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

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



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

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


Сервисы

Найти среднюю оценку

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

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

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

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

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

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

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

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

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

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




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

24.окт.2021 Битрикс Работа с сокетами Ошибка! Не работает
В проверке сайте можно наблюдать такую ошибку
Работа ...

17.июл.2021 Как передать Roistat в заказ 1С-Битрикс
Передать ID Roistat можно в сам заказ в Битриксе после его о...

21.июн.2021 Сбой на файле, ошибка распаковки пакета
При очередном обновлении 1С-Битрикс выскочила ошибка [UUGZA0...

03.июн.2020 Не выводиться заглушка в композитном кеше
Столкнулся с тем, что при указании заглушки в динамической о...

01.апр.2020 Установка SSL сертификата LetsEncrypt на BitrixVM
Установка SSL сертификата LetsEncrypt на виртуальную машину ...

07.мар.2020 Битрикс настройка SSL, ошибка работы с сокетами
Заходим в меню битрикса выбираем 8. Manage pool web servers ...

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

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

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

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