Правильный 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.
Загрузка

1133 просмотра
05.02.2016
Теги: html



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

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


Сервисы

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

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

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

Калькулятор стоимости кафеля (плитки)

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

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

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

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

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

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




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

04.Май.2019 Вывод ошибок в .settings.php
Если у вас на сайте произошла ошибка, но она не отображается...

05.Дек.2018 403 Forbidden в админке Bitrix

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...