Заказать обратный звонок * Бесплатный сервис связи * В удобное для вас время


Правильный 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.


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



Загрузка

Возврат к списку