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

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



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

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


Сервисы

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

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

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

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

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

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

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

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

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

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




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

14.Ноя.2019 Не выгружаются заказы в 1С
Не выгружаться заказы в 1С из сайта на битрисе могут по разн...

07.Ноя.2019 Видео youtube на фон сайта
Как-то на сайт мне нужно было вывести видео на весь экран, к...

05.Ноя.2019 Свойство с большим списком (датой)
Если в инфоблоке необходимо использовать свойство типа списо...

05.Ноя.2019 Основные настройки BitrixVM
Приведу основные пути и файлы конфигурации в виртуальной маш...

24.Окт.2019 Безлимитный интернет от Билайн не безлимитный
Как-то мне пришла смс от Билайна, что мне доступна услуга бе...

24.Окт.2019 Как мне помог сервис kwork.ru
Хочу поделиться своей истории о том, как я начал зарабатыват...

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

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

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

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