От автора: приветствуем вас на webformyself, у нас вы можете узнать все о сайтостроении. А сегодня я вам расскажу, какие нужны теги для создания каркаса сайта.
Что такое каркас
Под каркасом (скелетом) понимаются самые основные блоки, которые разделяют содержимое друг от друга. Самый простой пример: шапка – блок слева – блок справа и подвал (футер). В этих блоках в свою очередь может быть очень много других, вложенных элементов, но они уже являются дополнительной разметкой, которая добавляется на втором этапе.
Как его создать
Итак, мы рассмотрим все теги, которые вам могут для этого пригодиться. Начнем с самых базовых.
<html> — самый главный контейнер, в который помещается вся страница. Собственно, сегодня его можно даже не писать, и без него все будет замечательно работать, но ради соблюдения правил можно и написать.
<head> — важный контейнер для хранения информации, которая не будет выведена на страницу, но играет большую роль в ее формировании.
<body> — сюда помещают все тело страницы, то есть ее содержимое, поэтому его наличие в коде обязательно.
Важные настройки, которые обязательно должны быть определены
Итак, под основой сайта лично я понимаю не только то, что вы видите непосредственно своими глазами, но и те куски кода, которые помогают содержимому выводиться правильно. Одной из таких строчек является — <!DOCTYPE html>, она определяет тип страницы и ее нужно поместить даже не в head, а в самое начало, перед глобальным контейнером. Таким образом мы укажем, чтобы наша разметка интерпретировалась по стандарту html5.
Все остальные настройки указываются в блоке head. Это кодировка, подключение таблиц стилей, скриптов (хотя их можно подключать и в конце body), задание тайтла (Title), других мета-тегов и многое другое.
Создание каркаса старым способом на HTML4
Совсем до недавних пор это был самый популярный способ, даже сегодня, я думаю, некоторые продолжают его использовать. Он заключается в том, что все элементы создаются одинаково – с помощью тега div, который обозначает пустой блочный контейнер. В зависимости от расположения и роли, каждый такой блок получал свой идентификатор, чтобы к нему можно было обратиться позже через стили.
Таким образом, разметка выглядела примерно так:
|
1 2 3 |
<div id = "header"></div> <div id = "main"></div> <div id = "sidebar"></div> |
Разработчики ориентировались по названиям идентификатором, именно они позволяли определить, что представляет собой элемент. Таким образом, использовался всего один тег для создания структуры сайта – div, только с разными id (или стилевыми классами).
Как создать разметку страницы по новому на HTML5
Новая версия языка разметки сильно изменила этот процесс. Начиналось все с того, что веб-разработчики начали осознавать необходимость создания новых тегов. Шапку так часто называли div id = «header», что разумно было создать специальный элемент header, который был бы предназначен именно для этого элемента на сайте.
Собственно, именно это и произошло, только помимо header появилась еще масса других. Давайте я покажу пример каркаса на HTML5, а потом уже его объясню:
|
1 2 3 4 5 6 7 8 |
<header id = "main-header"></header> <nav id = "main-nav"></nav> <section id = "main"> <h1></h1> <article></article> </section> <aside id = "sidebar"></aside> <footer></footer> |
Как видите, идентификаторы по-прежнему прописываются элементам, но теперь у нас в самых названиях тегов заложена роль элементов. Так, nav создан для вкладывания в него важных ссылок, а по сути, создания главного меню сайта. Section – это отдельная секция на сайте, со своим заголовком и главной мыслью.
Aside – что-то вроде второстепенной информации, поэтому некоторые в этот элемент вкладывают боковую колонку. Хотя для этой цели годится и section, ведь сайдбар – по сути, отдельная секция на веб-странице.
Ну и, наконец, новый тег footer создан для вывода подвала. Идентификаторы в этом случае перестали выполнять роль единственных информаторов на странице, хотя их имена подобраны так, чтобы указывать на роль блоков. Заметьте, что шапка получила название main-header и это неспроста. Дело в том, что на веб-странице может быть несколько «шапок». Это может быть шапка статьи или боковой колонки.
Меню тоже получило соответствующий идентификатор, потому что кроме него на сайте может быть и другая навигация, но меньшая по своей важности.
Итак, мы с вами разобрали простейший пример создания скелета, если вы хотите получить больше информации по использованию html5, приглашаю вас посмотреть наши уроки по этой технологии.
