Правильный HTML5 шаблон | Для разработчиков | Сайты для бизнеса
Заказать обратный звонок * Бесплатный сервис связи * В удобное для вас время

Правильный HTML5 шаблон


Правильный HTML5 шаблон со всеми необходимыми html тегами, атрибутами, стилями и скриптами.
Ниже постараемся разобрать каждую строчку этого шаблона. 
  1. <!DOCTYPE html>
  2. <html lang="ru" class="full">
  3. <head>
  4. 	<!-- Website title -->
  5. 	<title>My Site</title>
  6. 	<!-- Meta -->
  7. 	<meta charset="utf-8">
  8. 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  9. 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  10.  
  11. 	<!-- CSS Files -->
  12. 	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  13.  
  14. 	<!-- Google Fonts -->
  15. 	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic" />
  16. </head>
  17.  
  18. <body data-spy="scroll" data-target="#navbar-scroll">
  19. 	<header id="header">
  20. 		<!-- NAVIGATION -->
  21. 		<nav class="navbar-wrapper navbar-default" role="navigation">
  22. 			<ul class="nav navbar-nav">
  23. 				<li class="active"><a href="#a">О Компании</a></li>
  24. 				<li><a href="#b">Продукты</a></li>
  25. 				<li><a href="#c">Цены</a></li>
  26. 				<li><a href="#d">Контакты</a></li>
  27. 			</ul>
  28. 		</nav>
  29. 	</header>
  30. 	<section id="about" class="container-fluid" style="margin-top: 30px;">
  31. 		<!-- Main title -->
  32. 		<h1 class="wow flip">Мой Сайт</h1>
  33. 	</section>
  34. 	<footer id="footer">
  35. 		<div class="center">
  36. 			<div class="addr">
  37. 				г. Москва, пл. Красная, ТРЦ САЛЮТ, 3 этаж
  38. 			</div>			
  39. 		</div>
  40. 	</footer>	
  41.  
  42. 	<!-- Javascript files -->
  43. 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
  44. 	<script type="text/javascript">
  45. 		$(document).ready(function(){
  46. 			$('h1').addClass("flip");
  47. 			$("h1").css("background-color", "#555");
  48. 		})
  49. 	</script>
  50. </body>
  51. </html>

В первой строчке у нас собственно и говориться, что данный документ должен обрабатываться браузером, как HTML5 и никак иначе.
На второй начало html документа.
С третий строчки начинается описание html документа и его заголовков, это нужно браузеру, что бы тот понимал, в каком виде ему отображать сайт пользователю.
На пятой строчке название сайта, которое будет видно на вкладке браузера. На четвертой строчке был html комментарий. .
С седьмой строчки начинается описание метаданных, в которых сообщается браузеру о кодировке документа и прочая служебная информация. Не будем останавливаться на ней детально, перейдем к содержимому документа, разве что скажем, что на 12 строчке подключается css файл, в которм описывается визуальное представление нашего сайта. В 15 строчке также подключаем css файл из Google Fonts

На 18 строчке у нас начинается тело документа, это тег body, который также может иметь свои атрибуты, но они не обязательны.
Дальше у нас идут теги HTML, которые и будут обрабатываться и выводится браузером. В данном примере у нас есть тег шапки header, с вложенным в него тегом nav, в котором в свою очередь описывается меню. Затем идет сам контент в теге section, с вложенным в него тегом h1. И в последнюю очередь идет подвал нашего сайта footer, где может быть указана, контактная информация, адрес и прочее.

На 43 строчке мы загружаем скрипт из файла. Обратите внимание скрипты загружаются и описываются в конце нашего документа. Сделано это для того, что бы загрузка и обработка скриптов не мешала быстрой загрузке и отображению самого html с картинками и прочим контентом.
Далее идут наши скрипты с использованием JQuery.
Ну и затем не забываем закрывать теги body и html.

627 просмотров
05.02.2016
Теги: html



Комментариев пока нет
Оставить комментарий
 
Текст сообщения*
Защита от автоматических сообщений
 

Пользовательское свойство "Да/Нет" (Флажок)
Собеседование в «Сбербанк-Технологии» (СберТех)
Статьи


Сервисы

Прибавить или вычесть процент

Калькулятор процентов

Калькулятор стоимости длины

Калькулятор цен по весу

Калькулятор сравнения (разницы) цен

Калькулятор стоимости товара

Тетрис на Двоих

Проверка домена (whois)




Последние публикации

15.Июн.2018 Пагинация REL PREV NEXT 1С-Битрикс
Что бы облегчить поисковикам работу можно указать в теге hea...

07.Июн.2018 Как выровнять блок по центру экрана
Что бы выровнять блок по горизонтали, достаточно прописать с...

07.Июн.2018 Билайн продолжает списывать деньги при минусе
Это продолжение предыдущей статьи.
В прошлый раз я пис...

30.Май.2018 Новая версия 1С-Битрикс 18
Вышла новая версия 1С-Битрикс: Управление сайтом версии 18.0...

22.Май.2018 Настройка ЧПУ в 1С-Битрикс
Самый главный файл в 1С-Битрикс для настройки ЧПУ это urlrew...

22.Май.2018 Форматирования BB кода в 1С-Битрикс
Часто возникает ситуация, когда надо отформатировать текст, ...

21.Дек.2017 Не работает init.php
Если вы вносите правки в системный файл Битрикс init.php и н...

06.Июн.2017 Не выводятся деньги с QIWI на карту Сбербанка
При выводе средств из кашелька КИВИ (Visa QIWI Wallet...

26.Май.2017 Как правильно составлять задание для программиста на кворке
Многие делая заказ на бирже фриланса (кворк, fl.ru, free...

16.Май.2017 Запускается хром с рекламным сайтом
Очень часто в последнее время на моем компьютере начал самоп...