ОГЛАВЛЕНИЕ

Введение 7
Глава 1. Структура 17
Глава 2. Текст 43
Глава 3. Списки 63
Глава 4. Ссылки 73
Глава 5. Изображения 91
Глава 6. Таблицы 121
Глава 7. Формы 137
Глава 8. Дополнительная разметка 167
Глава 9. Flash, видео- и аудиоконтент 189
Глава 10. Введение в CSS 213
Глава 11. Цвет 231
Глава 12. Текст 247
Глава 13. Блоки 281
Глава 14. Списки, таблицы и формы 309
Глава 15. Макет 335
Глава 16. Изображения 381
Глава 17. Макет в HTML5 401
Глава 18. Процесс разработки 423
Глава 19. Практическая информация 445
Предметный указатель 461

ЗАГРУЗКА Файлы примеров для этой книги вы

КОДА
можете загрузить на сайте
[Link]
 ВВЕДЕНИЕ

 Об этой книге
 Принципы Всемирной паутины
 Обучение на примере уже созданных страниц
В первую очередь, выражаем
благодарность за выбор данной книги.
Она была написана для тех, кто:

 хочет обучиться дизайну и верстке сайтов с нуля;

 владеет собственным сайтом (который, возможно, был
создан с использованием системы управления контентом
(CMS), блог-платформы, либо платформы электронной
коммерции) и желает получить больший контроль над
внешним видом его страниц.
Все, что вам понадобится, — это компьютер с установленными
веб-браузером и текстовым редактором — таким как Блокнот
(Notepad) в операционной системе Windows или TextEdit
в OS X.

8 ВВЕДЕНИЕ
 РАЗМЕРЫ БЛОКА ОГРАНИЧЕНИЕ ШИРИНЫ
width, height min-width, max-width

По умолчанию размер Некоторые страницы созда-

блока задается так, чтобы глава-13/[Link] HTML HTML глава-13/[Link]
ются таким образом, чтобы
он был способен вместить <div> <tr> контент менял свой размер
контент. Чтобы установить <p> Компания Moog первой наладила коммерческое <td><img src="images/[Link]" width="200" в соответствии с размером
собственные размеры бло-
Существует некоторое количество ка, вы можете использовать
производство модульных управляемых напряжением height="100" alt="Фендер-Родес" /></td> экрана. В этом случае свой-
аналоговых синтезаторов в начале <td class="description">Родес-пиано — это ство min-width опреде-
видов информации, которые свойства height и width.
1950-х годов.</p> разновидность электромеханического пианино. Оно ляет наименьшую ширину
Чаще всего размер блока
следует отображать в виде сетки указывается в пикселах, </div> было изобретено Гарольдом Родесом в пятидесятые блока при уменьшении окна
процентах или единицах годы и позднее выпускалось в ряде вариаций...</td> браузера, а свойство max-
или таблицы, например, результаты em. Пикселы наиболее по- <td>240000 рублей</td> width —наибольшую шири-
спортивных соревнований, пулярны, поскольку позво- </tr> ну блока при увеличении.
ляют точно контролировать Это очень полезные свой-
информация фондовых рынков, размер. ства, позволяющие гаран-
При использовании процен-
расписания поездов. тов размер блока задается
тировать удобочитаемость
CSS CSS
относительно размера страниц, особенно на ма-
окна браузера, а если блок [Link] { [Link] { леньких экранах портатив-
Для создания таблиц нужно иметь представление
заключен в другой блок, то height: 300px; min-width: 450px; ных устройств. Например,
о специальных терминах, таких как строки и столбцы.
относительно его размера. width: 300px; max-width: 650px; вы можете использовать
В этой главе вы узнаете как:
При использовании единиц background-color: #bbbbaa;} text-align: left; свойство max-width, чтобы
 использовать четыре ключевых элемента для создания em размер блока зависит p { padding: 5px; быть уверенным в том, что
таблиц; от размера содержащегося height: 75%; margin: 0px;} строки текста не окажутся
в нем текста. В последнее width: 75%; слишком широкими в боль-
 представлять в таблицах сложные данные; время разработчики начали
background-color: #0088dd;} шом окне браузера. Свой-
чаще использовать про-
 добавлять подписи к таблицам. центы и единицы em при ство min-width позволит
создании гибких дизайнов, гарантировать, что строки
предусматривающих доступ текста не окажутся чересчур
РЕЗУЛЬТАТ РЕЗУЛЬТАТ
с устройств с разными раз- узкими.
мерами экранов. Проверьте данный пример
В следующем примере вы в своем браузере, чтобы
видите элемент <div>, понять, что происходит,
ширина и высота которого когда вы увеличиваете или
равна 300 пикселам. Внутри
уменьшаете размер окна
него находится абзац
текста, занимающий 75% программы.
ширины и высоты элемента
<div>. Это означает, что
размер абзаца составляет
225 пикселов в ширину
и 225 пикселов в высоту.

122 ТАБЛИЦЫ ТАБЛИЦЫ 123 284 БЛОКИ БЛОКИ 285

Каждая глава начинается с Введения, в котором На справочных страницах представлен

перечисляются все ее основные темы основной HTML- и CSS-код; первый выделен
голубым цветом, второй — розовым

ТРАДИЦИОННЫЕ НОВЫЕ ЭЛЕМЕНТЫ

HTML-МАКЕТЫ МАКЕТА В HTML5
В течение долгого времени веб-дизайнеры использовали В HTML5 появились новые элементы, которые позволяют
элементы <div> для группировки элементов на странице разделить страницу на части. Имена элементов
(например, формирующих заголовок, статью, нижний определяют тип контента, который будет в них СИМВОЛ СИМВОЛ

<p> </p>
колонтитул или боковую панель). Авторы использовали располагаться. Имена еще могут измениться в финальной
атрибуты class или id, чтобы указать роль элемента <div> версии спецификации, однако это не мешает
в структуре страницы. веб-дизайнерам уже использовать их.
<body> <body> Этот пример имеет такую
На данной странице
представлен довольно <div id="page"> <div id="page"> же структуру, как и пример
распространенный макет на предыдущей странице.
<div id="header"> <header>
(нередко используемый Однако многие из элемен-
для блогов). тов <div> в нем заменены
В верхней части страни- новыми элементами HTML5.
<div id="nav"> <nav>
цы находится заголовок, Например, заголовок по-
содержащий логотип мещен внутри элемента
<div id="content"> <div id= <div id="content"> <header>, меню навига-
и меню навигации. <aside>
"sidebar">
Под заголовком распола- ции — в элементе <nav>,
<div class="article"> <article>
гаются одна или несколь- а статьи — в отдельных
ко статей или сообще- элементах <article>.
Цель создания этих новых ЗАКРЫВАЮЩАЯ СКОБКА ЗАКРЫВАЮЩАЯ СКОБКА
ний. Иногда они бывают
(ЗНАК «БОЛЬШЕ») (ЗНАК «БОЛЬШЕ»)
обзорными и содержат элементов заключает- ОТКРЫВАЮЩАЯ СКОБКА
ОТКРЫВАЮЩАЯ СКОБКА
ссылки на другие статьи. ся в том, чтобы помочь (ЗНАК «МЕНЬШЕ»)
(ЗНАК «МЕНЬШЕ»)
Справа находится боковая <div class="article"> <article> веб-дизайнерам описать
панель (вероятно, пред- структуру страницы. Напри- СЛЕШ
усматривающая функцию мер, программы экранного
поиска, ссылки на статьи доступа могут позволить
ОТКРЫВАЮЩИЙ ЗАКРЫВАЮЩИЙ
и разделы сайта или даже пользователям проигнори-
ровать заголовки и нижние
ТЕГ ТЕГ
рекламные объявления).
При кодировании сайта <div id="footer"> <footer> колонтитулы и перейти
таким образом разра- прямо к содержимому. Кро-
ботчики, как правило, ме того, поисковые машины Символы в скобках означают, Например, тегом р* Отличием закрывающего тега Термины «тег» и «элемент» Однако, строго говоря, тег, и закрывающий,
помещают эти основ- могут придать больший вес для каких целей можно обозначается абзац текста является наличие слеша после зачастую используются как элемент включает в себя а также любой контент,
ные разделы страницы содержимому элементов использовать данный тег символа <. синонимы и открывающий расположенный между ними
внутри элементов <div> <article>, чем содер-
и используют атрибуты жимому <header> или
class или id, чтобы ука- <footer>. Скорее всего, вы * От англ. paragraph — абзац. —
зать назначение конкрет- согласитесь, что это также Прим. ред.
ной части страницы. упрощает чтение кода.
28 СТРУКТУРА СТРУКТУРА 29

404 МАКЕТ В HTML5 МАКЕТ В HTML5 405

Страницы с дополнительной информацией Диаграммы и инфографика представлены

имеют белый фон и предоставляют расширенные на страницах с темным фоном — это простой
сведения по теме, обсуждаемой в главе визуальный источник справочной информации
по обсуждаемой теме

ПРИМЕР ОБЗОР
ВВЕДЕНИЕ В CSS СТРУКТУРА

Здесь вы можете увидеть простую

веб-страницу, отформатированную
с помощью CSS.
В данном примере используются два документа: файл HTML



Страницы HTML — это текстовые документы.
Теги (буквенные последовательности,
окруженные двумя угловыми скобками)
в языке HTML используются для придания
специального значения информации, которую
они окружают.
ТЕКСТ
2
([Link]) и отдельный файл CSS ([Link]). В пятой строке
HTML-кода используется элемент <link>, указывающий, где
находится файл CSS.
Далее вы узнаете, как правила CSS могут включаться в HTML-
 Теги часто называют «элементами».
страницу, а также о ситуациях, в которых это бывает нужным.

<!DOCTYPE html>
 Теги, как правило, парные. Открывающий
<html>
<head>
тег обозначает начало какого-либо участка
<title>Введение в CSS</title>
<link href="css/[Link]" type="text/css"
контента, закрывающий — его окончание.  Заголовки и абзацы;
rel="stylesheet" />  полужирное, курсивное и акцентированное
</head>
<body>
 Открывающие теги содержат нередко начертание;
<h1>С огорода на тарелку</h1> атрибуты, сообщающие дополнительную  структурная и семантическая разметка.
<p><i> Potager</i> в переводе с французского языка
означает огород...</p> информацию о содержимом данного элемента.
<h2> Что сажать</h2>
<p> Выбор растения определяется его
функциональностью, цветом и формой...</p>  Обязательными частями атрибута являются
</body>
</html> имя и значение.
body {
font-family: Arial, Verdana, sans-serif;}  Чтобы изучить язык HTML, необходимо
h1, h2 {
color: #ee3e80;} запомнить доступные для использования теги,
p {
color: #665544;} узнать, какие функции они выполняют, а также
в какой части HTML-документа они должны
быть использованы.
220 ВВЕДЕНИЕ В CSS ВВЕДЕНИЕ В CSS 221

Разделы с примерами объединяют изученные В конце каждой главы приведен Обзор, на

темы и демонстрируют практическое страницах которого напоминается об основных
применение изложенной выше информации моментах рассмотренных в ней тем

9 ВВЕДЕНИЕ ВВЕДЕНИЕ 9
 СЛОЖНО ЛИ НАУЧИТЬСЯ
СОЗДАВАТЬ САЙТЫ?
Многие книги, посвященные HTML
и CSS, напоминают скучные руководства
пользователя. Чтобы вам было легче учиться,
мы решили отказаться от традиционных
шаблонов, используемых издателями, и в корне
пересмотрели оформление этой книги.
На работе коллеги, сайты более качественным жизни столкнетесь
взглянув на экран моего контентом, специалисты с кодом, попадающим в эти
компьютера и увидев по маркетингу — более 10%, — как найти нужную
большое количество строк эффективно общаться информацию с помощью
программного кода, говорят с целевой аудиторией поисковых систем.
мне, что он выглядит и, наконец, менеджеры
очень сложным — и как, разного уровня будут более Кроме того, в данную
должно быть, я невероятно четко формулировать книгу мы также включили
умен, раз понимаю его. требования при создании дополнительные
Правда состоит в том, сайтов и получать лучшие материалы о подготовке
что научиться писать результаты от своих изображений, а также
и читать код веб-страниц сотрудников. аудио- и видеофайлов
отнюдь не так сложно, для использования во
как может показаться При написании книги Всемирной паутине,
на первый взгляд: для мы сконцентрировали о достижении поставленных
этого даже не нужно быть внимание на коде, который задач по дизайну и верстке
«программером». вы будете использовать веб-страниц сайта, об
в 90% случаев, и опустили улучшении его показателей
Понимание языков HTML те его фрагменты, в результатах выдачи
и CSS полезно всем, чья с которыми вам вряд ли поисковых систем (то, что
работа связана со Всемирной доведется иметь дело, называется «поисковой
паутиной: дизайнеры даже если создание оптимизацией», или SEO*)
смогут создавать более сайтов — ваша основная и о том, как использовать
привлекательные и удобные работа. Однако, прочитав сервис Google Analytics,
в использовании сайты, книгу до конца, вы будете чтобы получать сведения
редакторы — наполнять знать, — если в реальной о посетителях вашего сайта.

* Search Engine optimization (англ.) — поисковая оптимизация. — Примеч. ред.

10 ВВЕДЕНИЕ
СТРУКТУРА КНИГИ

Чтобы научить вас создавать

веб-страницы, данная книга была
разделена на три части.

HTML CSS ПРАКТИКУМ

На протяжении всей первой Мы начнем этот раздел Мы завершим эту книгу
главы мы будем рассказывать, с объяснения того, как полезной информацией,
как можно использовать используются правила CSS, которая поможет вам
язык HTML для создания чтобы предоставить вам создавать сайты, выглядящие
веб-страниц. Вы увидите, что возможность управлять профессионально.
для начала вам потребуется стилями и макетом создаваемых Мы рассмотрим несколько
ввести текст, который вы хотите веб-страниц. Далее мы новых тегов, которые появятся
отобразить на создаваемой продолжим изучение CSS в HTML5, они позволяют
странице. После этого вам надо и рассмотрим большое упростить описание структуры
будет добавить к словам теги, количество свойств, которые страницы. HTML5 — это
или элементы, позволяющие вы сможете использовать новейшая версия языка
браузеру понять, что из текста при создании собственных гипертекстовой разметки (на
является заголовком, где правил. Обычно все имеющиеся момент написания книги она
начинается и заканчивается свойства принято разделять на еще находилась в процессе
абзац и т.д. две следующие категории. разработки). Однако чтобы
Оставшаяся часть раздела Оформление: Свойства данной изучать эти новые элементы,
посвящена описанию этих тегов, категории позволяют управлять вы уже должны быть
используемых для верстки такими настройками, как цвет хорошо знакомы с тем, как
страниц. Все теги, находящиеся текста, гарнитура и кегль пользоваться средствами CSS
в вашем распоряжении, используемых шрифтов, а также для управления дизайном
разделены по группам: текст, добавлять фоновый цвет или веб-страниц. В данном
списки, ссылки, изображения, изображение на страницы (или разделе мы также рассмотрим
таблицы, формы, аудио-/видео- части страниц). алгоритм создания страницы,
и Flash-объекты и пр. Макет: Эти свойства которым вы, вероятно, захотите
Мы также должны вас используются для воспользоваться в будущем при
предупредить, что примеры, позиционирования на создании собственного сайта.
приводимые в первых девяти экране различных элементов Наконец, мы поговорим о том,
главах, вряд ли можно назвать страниц. Также вы изучите что поможет вам пользоваться
интересными, но тем не менее несколько профессиональных уже созданным сайтом,
это — основа любой веб- приемов, позволяющих делать например о размещении его на
страницы. В последующих создаваемые страницы более просторах Всемирной паутины,
главах, посвященных CSS, мы привлекательными. о поисковой оптимизации,
покажем вам, как изменить а также об использовании
внешний вид ваших веб- аналитического программного
страниц, чтобы улучшить обеспечения для отслеживания
впечатление, которое информации о посетителях
создается от их просмотра и о том, какие разделы сайта
у пользователей. они просматривают.

ВВЕДЕНИЕ 11
 КАК ЛЮДИ ПОЛУЧАЮТ
ДОСТУП К ВСЕМИРНОЙ
ПАУТИНЕ
Прежде чем приступить к объяснению кода,
используемого для верстки сайтов, мы считаем
предельно важным сказать пару слов о том, какие
способы доступа ко Всемирной паутине существуют,
и разъяснить терминологию.
БРАУЗЕРЫ ВЕБ-СЕРВЕРЫ ПРОГРАММЫ
Для доступа к сайтам Когда вы отдаете команду ЭКРАННОГО
пользователи используют браузеру открыть тот или иной ДОСТУПА
специальные программы, сайт, тот с помощью Интернета
называемые веб-браузерами. посылает запрос специальному Программы экранного
Среди наиболее популярных компьютеру, называемому доступа* — это специальное
браузеров можно назвать веб-сервером, на котором ПО, которое читает вслух текст
Firefox, Internet Explorer, Safari, расположены файлы нужного с экрана компьютера. Обычно
Chrome и Opera. вам сайта. Веб-серверы — это они используются людьми
Чтобы просмотреть какую-либо специальные компьютеры, с нарушением зрения.
страницу, пользователи могут постоянно подключенные Аналогично существующим
ввести ее адрес в специальное к Интернету, работа которых во многих странах законам,
поле браузера, перейти по оптимизирована для отправки обязывающим общественные
ссылке, размещенной на другом веб-страниц запрашивающим заведения быть доступными
сайте, либо воспользоваться их людям. Некоторые крупные для инвалидов, в настоящее
закладкой в разделе компании используют время принимаются акты,
«Избранное». собственные веб-серверы, предписывающие создавать
Производители программного но гораздо чаще владельцы сайты, удобные для
обеспечения регулярно сайтов пользуются услугами использования в том числе
выпускают свежие версии хостинговых компаний, и людьми с ограничениями.
браузеров с новыми функциями которые берут определенную В тексте книги вы несколько
и поддержкой новых языковых (чаще ежегодную) плату за раз встретитесь со ссылками на
дополнений. Однако важно возможность размещения сайта программы экранного доступа.
помнить, что очень многие у них на сервере. Они помогут вам проверить,
пользователи не обновляют доступен ли ваш сайт для
версии браузеров. Поэтому пользователей таких программ.
нельзя полагаться на то, что
УСТРОЙСТВА Интересно отметить тот факт,
абсолютно все посетители Разновидностей устройств, что технологии наподобие
вашего сайта смогут с помощью которых люди используемых при разработке
воспользоваться новейшими посещают сайты — настольных программ экранного доступа
функциями, реализованными компьютеров, ноутбуков, также применяются в различных
только в последних версиях планшетов, мобильных сферах деятельности, когда люди
программ. телефонов, — становится оказываются неспособными
В главе 19 вы узнаете, как все больше и больше. прочитать текст самостоятельно,
определить, с помощью какого Важно помнить, что разные например, при вождении
браузера посетитель зашел на устройства имеют различные машины или занятиях бегом.
ваш сайт. размеры экрана и что скорость
подключения к Интернету * Screen readers (англ.). —
одних выше, чем у других. Примеч. ред.

12 ВВЕДЕНИЕ
КАК СОЗДАЮТСЯ САЙТЫ

Языки HTML и CSS используются для создания

любых сайтов, однако системы управления
контентом и платформы для блогов
и электронной коммерции зачастую добавляют
в этот коктейль еще некоторые технологии.
ЧТО ВЫ ВИДИТЕ сайты, в частности те, что
подвергаются регулярному
HTML5 И CSS3
Когда вы просматриваете обновлению и используют С момента создания Всемирной
веб-страницу, ваш браузер, системы управления паутины последовательно
скорее всего, получает HTML- контентом*, а также платформы разрабатывалось несколько
и CSS-код с сервера, на котором для блогов и электронной версий HTML и CSS, и целью
расположен данный сайт. Чтобы коммерции, зачастую каждой было внести очередные
создать страницу, пригодную создаются с применением усовершенствования
для просмотра, браузер более сложных технологий, в технологию.
интерпретирует код. функционирующих на стороне На момент написания данной
В большинство веб-страниц веб-сервера. Однако на самом книги спецификации HTML5
обычно бывает включен деле все эти технологии и CSS3 все еще находились
дополнительный контент, используются для создания в стадии разработки. Однако
например изображения, необходимого HTML- несмотря на то, что еще не было
аудио- и видеоролики или и CSS-кода, впоследствии выпущено финальных версий
анимация, и эта книга научит посылаемого браузеру. обеих технологий, многие
вас подготавливать подобные Потому, если имеющийся браузеры уже поддерживают
материалы для использования у вас сайт использует эти некоторые из новых функций
во Всемирной паутине, а также технологии, вы сможете и многие создатели сайтов уже
добавлять их на страницы. применить новые знания по применяют новейшие элементы
Некоторые страницы также HTML и CSS, чтобы получить кода на своих страницах.
посылают вашему браузеру куда больший контроль над его Поэтому мы решили обучить
код JavaScript и Flash — и вы оформлением. вас использованию именно их.
также узнаете, как добавлять При создании более По причине того, что HTML5
подобные интерактивные крупных, сложных сайтов и CSS3 были созданы на основе
объекты на свой сайт. JavaScript часто используются базы предыдущих версий, вы,
и Flash — это более сложные данных для хранения изучив их, сможете понимать
темы, за изучение которых вы информации и различные любой HTML- и CSS-код. Мы
при желании можете взяться языки программирования, также добавили пояснения,
после того, как освоите верстку такие как РНР, [Link], Java где именно используемый
страниц с помощью HTML и CSS. или Ruby, работающие на нами код является новым и где
сервере, но, чтобы управлять он с большой вероятностью
внешним видом вашего сайта, не сработает в устаревших
КАК СОЗДАЮТСЯ вам не потребуется знание версиях браузеров.
САЙТЫ этих технологий. Навыков,
полученных вами по прочтении
Небольшие сайты обычно данной книги, должно хватить,
верстаются только на чтобы помочь вам разобраться * CMS, content management
HTML и CSS. Более крупные в создании сайтов. systems (англ.). — Примеч. ред.

ВВЕДЕНИЕ 13
 КАК РАБОТАЕТ
ВСЕМИРНАЯ ПАУТИНА

Сервер, на котором размещен посещаемый

вами сайт, может находиться в любой точке
мира. Чтобы определить его местоположение,
ваш браузер в первую очередь подключается
к DNS-серверу*.

На приведенной странице Пользователь из Барселоны На следующей странице

вы можете видеть пример запрашивает сайт [Link], показано, что происходит,
расположения сервера, находящийся в Токио. когда пользователь из Англии
на котором размещен Пользователь из Нью-Йорка хочет просмотреть сайт Лувра,
посещаемый вами сайт, в любой запрашивает сайт [Link], расположенный во Франции
точке планеты. DNS-серверы находящийся в Сан-Франциско. по адресу [Link].
помогают браузеру найти Пользователь из Стокгольма В первую очередь браузер,
нужный сайт. запрашивает сайт quantas. находящийся в Кембридже,
[Link], находящийся в Сиднее. связывается с лондонским
Пользователь из Ванкувера DNS-сервером. Тот сообщает
запрашивает сайт [Link], браузеру местоположение
находящийся в Бангалоре. сервера, на котором
расположен запрашиваемый
сайт (он находится в Париже).

* Domain name system (англ.), система доменных имен. — Примеч. ред.

14 ВВЕДЕНИЕ
 1 2

Подключение Ваш компьютер

к Интернету происходит подключается к сети,
с помощью провайдера. состоящей из серверов,
Чтобы перейти на называемых DNS-серверами.
какой-либо сайт, вам По своему назначению сродни
необходимо ввести телефонной книге: они
в адресную строку сообщают вашему компьютеру
браузера доменное имя IP-адреса, соответствующие
или адрес интересующего запрашиваемому доменному
вас сайта, например имени. IP-адрес — это число,
[Link], [Link]. состоящее из не более
[Link], [Link]. 12 цифр, разделенных точками
на четыре группы. Каждое
устройство, подключенное
к Интернету, имеет свой
уникальный IP-адрес, который
напоминает телефонный
номер, присвоенный тому
или иному абоненту.

Кембридж

3 ЛОНДОН
Уникальный номер,
возвращаемый
DNS-сервером на
ваш компьютер,
позволяет браузеру
подключиться к серверу,
на котором расположен ПАРИЖ
запрошенный вами сайт.
4

После этого веб-сервер

возвращает вашему браузеру
запрошенную вами страницу.

ВВЕДЕНИЕ 15
 СТРУКТУРА
1
 Понимание структуры
 Изучение принципов разметки
 Теги и элементы
 Ежедневно мы сталкиваемся
с различными типами документов.
Газеты, заявления на выдачу паспорта,
каталоги — этот список можно
продолжать до бесконечности.
Многие веб-страницы функционируют как электронные
версии вышеперечисленных документов. Например газеты
публикуют одни и те же репортажи как на бумаге, так и на
собственных сайтах; с помощью Всемирной паутины вы также
можете написать заявление на получение паспорта; интернет-
магазины содержат онлайн-версии каталогов и средства
электронной коммерции.

Структура важна для всех типов документов: она помогает

читателям понять информацию, которую вы пытаетесь до
них донести, а также способствует более простому переходу
между частями документов. Таким образом, чтобы научиться
создавать веб-страницы, важно понять, как правильно
структурировать документы. В этой главе вы:
 увидите, как язык HTML описывает структуру веб-страницы;
 узнаете, как нужно вставлять в документ теги и элементы;
 сверстаете свою первую веб-страницу.

18 СТРУКТУРА
СТРУКТУРА 19