В этом уроке мы создадим каркас сайта, к которому в дальнейшем применим CSS-дизайн. Для написания кода вы можете воспользоваться любым текстовым редактором, в дальнейшем сохранив полученный файл с разрешением .html.
HTML-документ представляет собой набор элементов, начало и конец каждого из которых обозначаются тегами. Элементы могут быть вложенными друг в друга.
Код должен начинаться с <!DOCTYPE html>. Это сообщает браузеру, что используется язык HTML.
Следующие теги - <html> и </html> - открывают и закрывают документ соответственно.
Документ состоит из двух частей - заголовка страницы (<head>) и её тела (<body>). В заголовке располагается информация о странице, а в теле - её содержимое.
В заглавии располагается элемент <title>, содержащий название страницы (показывается в заголовке окна браузера). Давайте добавим нашему сайту название.
В теле сайта находится его содержимое - например, текст и изображения. Параграфы текста выделяются тегом <p>. Добавим к документу несколько параграфов.
Картинки добавляются посредством элемента <img>. Обратите внимание: это один из пустых элементов, то есть он ничего в себе не содержит. Адрес нужного изображения задаётся с помощью атрибута src. Атрибуты служат для определения свойств элементов и указываются в открывающем теге. Если атрибутов несколько, порядок их перечисления неважен.
Для добавления заголовка служат элементы <h1>-<h6> (1 - самый большой размер текста, 6 - самый маленький).
Теперь добавим на сайт гиперссылку. Гиперссылки могут указывать куда угодно - на определённый элемент данной страницы или на другую страницу. Адрес перехода указывается в атрибуте href элемента <a>.
Ещё один важный элемент - списки. Хотя для их создания и можно воспользоваться элементами <p>, это противоречит идее использования HTML в целях указания структуры документа, поэтому для списков существует отдельный элемент. Списки могут быть упорядоченными - тег <ol> и неупорядоченными - тег <ul>. Каждый отдельный пункт списка заключается в элемент <li>.
Последний элемент, которым мы воспользуемся - div. С его помощью можно группировать элементы и задавать их расположение на странице. Давайте заключим в один элемент div заголовок и первый абзац, а во второй - другой абзац, изображение и список. Пока что во внешнем виде сайта ничего не изменилось, но элементы div пригодятся нам, когда мы будем изучать CSS.
В уроке по CSS мы научимся создавать стиль документа.
