Стандартная структура шаблона сайта. Пример построения документа на HTML5. Стартовая страница

структура шаблона сайта

Любой сайт начинается с создания или редактирования главной страницы. Она задаёт общую архитектуру будущему проекту.
Структура сайта определяется главной страницей, все дополнительно созданные варианты имеют аналогичное построение за исключением содержимого (контента) "Тела страницы".

Рассмотрим простую схему построения любого среднестатистического сайта


Все шаблоны состоят из файлов.html (страниц) и папок (директорий).
Главная страница index.html открывается по умолчанию при вызове сайта по адресу домена: http://вашДомен.ru/

Файлы стилей дизайна лежат в папке (директории) css/ (ниже приведены примеры часто используемых файлов).
Файлы сценариев находятся в папке js/ (ниже включены примеры часто применяемых скриптов).
Файлы изображений обычно помещают в директорию img/ (ниже указаны разные форматы картинок).

Пример структуры шаблона

Иерархия стандартного шаблона сайта

Жирным шрифтом обозначены - папки;
Синим цветом выделены файлы;
Красным цветом отмечены основные стандартные файлы.

Шаблон(домен)/
index.html - главная страница
page1.html - дополнительная страница
page2.html - дополнительная страница
page3.html - дополнительная страница
contact.html - страница контактов

└── папка css/
    ––– style.css
    ––– bootstrap.css
    ––– font-awesome.css
    ––– jquery.3.4.1.min.js
    ––– и т.д.

└── папка js/
    ––– js.js
    ––– jquery.min.js
    ––– responsive.js
    ––– и т.д.

└── папка img/
    ––– image1.jpg
    ––– image2.png
    ––– image3.gif
    ––– image4.jpg
    ––– и т.д.


Пример стандартной стартовой страницы построенной на HTML5 с комментариями


Скачать пример страницы вы можете ниже. В коде страницы присутствуют комментарии, поэтому остановлюсь лишь на некоторых пунктах:
- Атрибут lang="en" можно заменить для русскоязычных сайтов на lang="ru", хотя его присутствие является не обязательным.
- Как вы заметили, отсутствует атрибут Метатег Keywords - теперь поисковые системы обходятся без него и не нуждаются в нашем представлении для них ключевых слов.
- Мегатег Description остался в HTML5. Мы имеем возможность предложить поисковикам свою версию описания документа, но он в праве выбирать сам, какой фрагмент текста использовать для показа пользователям.

В структуре страницы желательно использовать семантические элементы HTML5 определяющие тематику блоков, например:
<header> - элементы навигации и заголовков;
<nav> - подразумевает навигацию;
<section> - группирует тематическое содержимое;
<article> - дочерний элемент <section>;
Это не обязательное требование, можно просто воспользоваться обычными элементами DIV, если вы в будущем не собираетесь структурировать страницу под семантическую разметку Schema.

Пример кода стартовой страницы HTML5

<!doctype html> <!-- Допускается любой регистр -->
<html lang="en"> <!-- Для русскоязычных сайтов lang="ru" -->
<head>
  <meta charset="utf-8"> <!-- Объявляет кодировку страницы -->
  <title>Стартовый шаблон HTML5</title>  <!-- Название страницы -->
  <meta name="description" content="Документ построен на HTML5"> <!-- Описание страницы -->
  <meta name="author" content="SiteY">
  <link rel="stylesheet" href="css/styles.css"> <!-- Путь к пользовательской папке с файлом -->
  <link rel="stylesheet" href="https://...../bootstrap.min.css"><!-- Абсолютный путь к внешнему файлу -->
  <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><!-- Для капризов IE 9 -->
  <![endif]-->
</head>
<body>
<!-- Шапка - заголовок страницы -->
<header>
<!-- Навигация -->
<nav class="">
<div class="menu">
Меню сайта
</div>
</nav>
<!-- Слайдер-->
<div class="carousel">
Слайдер
</div>
</header>
<!-- Конец Шапка -->

<!-- Тело страницы -->
<main>
   <section id="1">

      <section id="1.1">
         <article>
            Часть секции 1 
         </article>
      </section>
	  
      <section id="1.2">
         <article>
            Часть секции 2 
         </article>
      </section>

   </section>
</main>
<!-- Конец тела страницы -->

<div class="aside">
Дополнительная колонка SideBar
</div>
<!-- Footer -->
<footer class="">
<div class="">
<p class=""> Copyright &copy;  2019</p>
</div>
</footer>
<script src="js/js.js"></script> <!-- Путь к папке со скриптом -->
<script>
Вставка для скрипта
</script>
</body>
</html>

Скачать пример стартовой страницы на HTML5: Standard-HTML5.rar [1,08 Kb] (cкачиваний: 0)

Автор: Saah | Просмотров: 10 | 9-11-2019,Сб, 21:11  

Добавить свой комментарий:

@
Похожие публикации