В этой статье создадим хранилище для сайта и напишем полный файл гипертекстовой разметки всего сайта.
Как я уже в прошлой статье писал, весь сайт находится в одной папке. Будь он у вас на хостинге в базе данных или на локальном сервере вашего компьютера. На начальной разработке сайта вам не обязательно сейчас чтобы сайт находился на хостинге или локальном сервере, так как это уже разработка CMS на програмном языке php. Достаточно на рабочем столе создать папку, и в ней уже разместить сайт.
Мы уже знаем что для написания сайта нужно для качала только два файла, но сразу приучаемся к порядку и создаем папки для подключеных файлов.
Чтобы создать сайт нужно для начала заполнить документ index.html всем содержимым которое должно находиться на сайте вашего браузера. Как я раньше упоминал, но все же освежим память. HTML5 является языком гипертекстовой разметки. Иными словами, что мы хотим видеть на сайте (картинку, слово, номер телефона или E-mail) вписываем в файл index.html.
ЗАПОМНИТЕ
Чтобы не тратить много времени, не пытайтесь написать к примеру сначала небольшой блок и сразу его стилизовать. Такой метод увеличивает время верстки, т.е. таким методом можно весь день проковыряться и не факт что сверстаете полностью. Сначала размечаем полностью index.html а потом уже придаем стили. Таким методом я простой статичный сайт верстаю за три-четыре часа, в зависимости от наполнения и самого дизайна. На кросс браузерность и адаптацию уходит остальная половина рабочего дня. В итоге за рабочий день в восемь часов(спокойно не торопясь с чувством расстановки) создается сайт, адаптивный и кросс браузерный.
Весь сайт поделен на три основных блока (тега). Это шапка, тег <header></header>. Основной контент, тег <article></article>. И подвал, тег <footer></footer>. Ну и для статичности желательно эти три тега обернуть в один общий блок
<header></header>
В шапке по желанию заказчика могут находиться элементы, стандартный список элементов ниже. Как правило шапка и подвал на всем многостраничном сайте должны быть одинаковы, описание подвала будет ниже.
№1. Название сайта
1. логотип
2. Название
3. Слоган
№2. Вид деятельности
№3. Меню
№4. Контактные данные
1. Адрес
2. Телефон
3. E-mail
4. Соц. сети
5. Режим работы
№5. Кнопка обратной связи
Помимо списка так же по желанию клиента или дизайнера который вам предоставят шаблон, там могут находиться и дополнительные элементы.
<article></article>
Основной контент. Он может быть наполнен любой информацией какой только вы пожелаете, все может ограничиться только вашей фантазией. Иногда бывает что контент делят на две или три части, это колонка или колонки с любого края основного контента. В колонке как правило находятся:
№1. Боковое, вертикальное меню или вертикальный список товара или услуг.
№2. Простой редактируемый блок, к примеру статья с картинкой, с текстом и ссылкой в виде кнопки.
<footer></footer>
В подвал могут дублироваться почти все элементы находящийся в шапке. Но также могут дополнительно добавить карту и текст с авторским правом.
Когда вы будете составлять гипертекстовую разметку, не забываем про семантику. А так же каждому блоку (строчному или блочному) не забываем присваивать селектор class или id чтобы легче было присваивать стили. О селекторах я писал в более ранней статье, память можете освежить там. Имена селекторов должны быть индивидуальны на весь файл html и соответствовать тематике блока. К примеру если в вашем блоке находятся новости, то название примерно должно быть class="news". К счастью есть онлайн переводчик))))
На этом этапе у нас должен быть полностью составлен файл index.html а в следующей статье будет описание файла style.css