Вы находитесь на странице: 1из 39

ÓÄÊ 004.

42
ÁÁÊ 32.973.26
Ä 14

Jon Duckett
HTML and CSS: Design and Build Websites
© 2011 by John Wiley & Sons, Inc., Indianapolis, Indiana

ISBN: 978-1-118-00818-8

All rights reserved. This translation published under licence

Äàêåòò Ä.
Ä 14 HTML è CSS. Ðàçðàáîòêà è äèçàéí âåá-ñàéòîâ / Äæîí Äàêåòò ; [ïåð.
ñ àíãë. Ì. À. Ðàéòìàíà]. – Ì. : Ýêñìî, 2013. – 480 ñ. : èë. + 1 CD. – (Ìè-
ðîâîé êîìïüþòåðíûé áåñòñåëëåð).
ISBN 978-5-699-64193-2
Ýòà êíèãà – ñàìûé ïðîñòîé è èíòåðåñíûé ñïîñîá èçó÷èòü HTML è CSS. Íåçàâèñèìî
îò ñòîÿùåé ïåðåä âàìè çàäà÷è: ñïðîåêòèðîâàòü è ðàçðàáîòàòü âåá-ñàéò ñ íóëÿ èëè ïîëó-
÷èòü áîëüøå êîíòðîëÿ íàä óæå ñóùåñòâóþùèì ñàéòîì, ýòà êíèãà ïîìîæåò âàì ñîçäàòü
ïðèâëåêàòåëüíûé, äðóæåëþáíûé ê ïîëüçîâàòåëþ âåá-êîíòåíò. Ïðîñòîé âèçóàëüíûé ñïî-
ñîá ïîäà÷è èíôîðìàöèè ñ ïîíÿòíûìè ïðèìåðàìè è íåáîëüøèì ôðàãìåíòîì êîäà çíà-
êîìèò ñ íîâîé òåìîé íà êàæäîé ñòðàíèöå. Âû íàéäåòå ïðàêòè÷åñêèå ñîâåòû î òîì, êàê
îðãàíèçîâàòü è ñïðîåêòèðîâàòü ñòðàíèöû âàøåãî ñàéòà, è ïîñëå ïðî÷òåíèÿ êíèãè ñìî-
æåòå ðàçðàáîòàòü ñâîé âåá-ñàéò ïðîôåññèîíàëüíîãî âèäà è óäîáíûé â èñïîëüçîâàíèè.
ÓÄÊ 004.42
ÁÁÊ 32.973.26
Âñå íàçâàíèÿ ïðîãðàììíûõ ïðîäóêòîâ ÿâëÿþòñÿ çàðåãèñòðèðîâàííûìè òîðãîâûìè
ìàðêàìè ñîîòâåòñòâóþùèõ ôèðì.
Íèêàêàÿ ÷àñòü íàñòîÿùåãî èçäàíèÿ íè â êàêèõ öåëÿõ íå ìîæåò áûòü âîñïðîèçâåäåíà
â êàêîé áû òî íè áûëî ôîðìå è êàêèìè áû òî íè áûëî ñðåäñòâàìè, áóäü òî ýëåêòðîííûå
èëè ìåõàíè÷åñêèå, âêëþ÷àÿ ôîòîêîïèðîâàíèå è çàïèñü íà ìàãíèòíûé íîñèòåëü, åñëè íà
ýòî íåò ïèñüìåííîãî ðàçðåøåíèÿ ÎÎÎ «Èçäàòåëüñòâî «Ýêñìî».

© Ðàéòìàí Ì.À., ïåðåâîä íà ðóññêèé ÿçûê, 2013


ISBN 978-5-699-64193-2 © Îôîðìëåíèå. ÎÎÎ «Èçäàòåëüñòâî «Ýêñìî», 2013
ОГЛАВЛЕНИЕ

Введение 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
ВВЕДЕНИЕ

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

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


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

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

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


блока задается так, чтобы глава-13/width-height.html HTML HTML глава-13/min-width-max-width.html
ются таким образом, чтобы
он был способен вместить <div> <tr> контент менял свой размер
контент. Чтобы установить <p> Компания Moog первой наладила коммерческое <td><img src="images/rhodes.jpg" width="200" в соответствии с размером
собственные размеры бло-
Существует некоторое количество ка, вы можете использовать
производство модульных управляемых напряжением height="100" alt="Фендер-Родес" /></td> экрана. В этом случае свой-
свойства height и width. аналоговых синтезаторов в начале <td class="description">Родес-пиано — это ство min-width опреде-
видов информации, которые ляет наименьшую ширину
Чаще всего размер блока 1950-х годов.</p> разновидность электромеханического пианино. Оно
следует отображать в виде сетки указывается в пикселах, </div> было изобретено Гарольдом Родесом в пятидесятые блока при уменьшении окна
процентах или единицах годы и позднее выпускалось в ряде вариаций...</td> браузера, а свойство max-
или таблицы, например, результаты em. Пикселы наиболее по- <td>240000 рублей</td> width —наибольшую шири-
спортивных соревнований, пулярны, поскольку позво- </tr> ну блока при увеличении.
ляют точно контролировать Это очень полезные свой-
информация фондовых рынков, размер. ства, позволяющие гаран-
При использовании процен-
расписания поездов. тов размер блока задается
тировать удобочитаемость
CSS CSS
относительно размера страниц, особенно на ма-
окна браузера, а если блок div.box { td.description { леньких экранах портатив-
Для создания таблиц нужно иметь представление
заключен в другой блок, то 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> для группировки элементов на странице разделить страницу на части. Имена элементов
(например, формирующих заголовок, статью, нижний определяют тип контента, который будет в них СИМВОЛ СИМВОЛ
колонтитул или боковую панель). Авторы использовали располагаться. Имена еще могут измениться в финальной
атрибуты class или id, чтобы указать роль элемента <div> версии спецификации, однако это не мешает

<p> </p>
в структуре страницы. веб-дизайнерам уже использовать их.
На данной странице <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">
<aside> <header>, меню навига-
"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

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


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

2
ПРИМЕР ОБЗОР
ВВЕДЕНИЕ В CSS СТРУКТУРА
 Страницы HTML — это текстовые документы.
 Теги (буквенные последовательности,
Здесь вы можете увидеть простую окруженные двумя угловыми скобками)
веб-страницу, отформатированную в языке HTML используются для придания
с помощью CSS.
В данном примере используются два документа: файл HTML
(example.html) и отдельный файл CSS (example.css). В пятой строке
специального значения информации, которую
они окружают.
ТЕКСТ
HTML-кода используется элемент <link>, указывающий, где
находится файл CSS.
Далее вы узнаете, как правила CSS могут включаться в HTML-
 Теги часто называют «элементами».
страницу, а также о ситуациях, в которых это бывает нужным.

<!DOCTYPE html>
 Теги, как правило, парные. Открывающий
<html>
<head>
тег обозначает начало какого-либо участка
<title>Введение в CSS</title>
<link href="css/example.css" type="text/css"
контента, закрывающий — его окончание.  Заголовки и абзацы;
rel="stylesheet" />  полужирное, курсивное и акцентированное
</head>
<body>
 Открывающие теги содержат нередко начертание;
<h1>С огорода на тарелку</h1> атрибуты, сообщающие дополнительную  структурная и семантическая разметка.
<p><i> Potager</i> в переводе с французского языка
означает огород...</p> информацию о содержимом данного элемента.
<h2> Что сажать</h2>
<p> Выбор растения определяется его
функциональностью, цветом и формой...</p>  Обязательными частями атрибута являются
имя и значение.
</body>
</html>

Чтобы изучить язык HTML, необходимо


body {
font-family: Arial, Verdana, sans-serif;} 

запомнить доступные для использования теги,


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-код. Мы
при желании можете взяться языки программирования, также добавили пояснения,
после того, как освоите верстку такие как РНР, ASP.Net, Java где именно используемый
страниц с помощью HTML и CSS. или Ruby, работающие на нами код является новым и где
сервере, но, чтобы управлять он с большой вероятностью
внешним видом вашего сайта, не сработает в устаревших
КАК СОЗДАЮТСЯ вам не потребуется знание версиях браузеров.
САЙТЫ этих технологий. Навыков,
полученных вами по прочтении
Небольшие сайты обычно данной книги, должно хватить,
верстаются только на чтобы помочь вам разобраться * CMS, content management
HTML и CSS. Более крупные в создании сайтов. systems (англ.). — Примеч. ред.

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

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


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

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


вы можете видеть пример запрашивает сайт sony.jp, показано, что происходит,
расположения сервера, находящийся в Токио. когда пользователь из Англии
на котором размещен Пользователь из Нью-Йорка хочет просмотреть сайт Лувра,
посещаемый вами сайт, в любой запрашивает сайт google.com, расположенный во Франции
точке планеты. DNS-серверы находящийся в Сан-Франциско. по адресу www.louvre.fr.
помогают браузеру найти Пользователь из Стокгольма В первую очередь браузер,
нужный сайт. запрашивает сайт quantas. находящийся в Кембридже,
com.au, находящийся в Сиднее. связывается с лондонским
Пользователь из Ванкувера DNS-сервером. Тот сообщает
запрашивает сайт airindia.in, браузеру местоположение
находящийся в Бангалоре. сервера, на котором
расположен запрашиваемый
сайт (он находится в Париже).

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

14 ВВЕДЕНИЕ
1 2

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


к Интернету происходит подключается к сети,
с помощью провайдера. состоящей из серверов,
Чтобы перейти на называемых DNS-серверами.
какой-либо сайт, вам По своему назначению сродни
необходимо ввести телефонной книге: они
в адресную строку сообщают вашему компьютеру
браузера доменное имя IP-адреса, соответствующие
или адрес интересующего запрашиваемому доменному
вас сайта, например имени. IP-адрес — это число,
google.ru, www.bbc. состоящее из не более
co.uk, microsoft.com. 12 цифр, разделенных точками
на четыре группы. Каждое
устройство, подключенное
к Интернету, имеет свой
уникальный IP-адрес, который
напоминает телефонный
номер, присвоенный тому
или иному абоненту.

Кембридж

3 ЛОНДОН

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

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


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

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

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


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

18 СТРУКТУРА
СТРУКТУРА 19
ПРИМЕРЫ
СТРУКТУРИЗАЦИИ
СТРАНИЦ

Давайте вспомним, структура ее будет иной вид документа:


как выглядят статьи, лишь незначительно заявление на выдачу
публикуемые в газетах: отличаться от той, что вы паспорта. Как правило,
у каждой новостной заметки видите на бумаге (к таким у подобных форм есть
есть свой заголовок, публикациям, например, несколько разделов, каждый
текст и зачастую одно или иногда прикрепляют из которых может иметь
несколько изображений. какие-либо аудио- или собственный заголовок. Во
Если перед вами длинная видеофайлы). Взглянув на всех разделах имеются поля
статья, то она может быть следующую страницу, вы для заполнения и вопросы
разделена на несколько увидите отсканированную к ним, а также ячейки,
частей подзаголовками, журнальную статью и ее чтобы ставить галочки.
в ней также иногда электронную версию, Структура этого документа,
содержатся специально опубликованную на сайте опять же, очень похожа
выделенные врезки-цитаты. журнала. на электронную версию
формы, опубликованную
Если вы читаете статью А теперь давайте вспомним, на сайте Федеральной
во Всемирной паутине, как выглядит абсолютно миграционной службы.

20 СТРУКТУРА
СТРУКТУРА 21
СТРУКТУРИРОВАНИЕ
ДОКУМЕНТОВ
MICROSOFT WORD

Использование заголовков Такая структура может На следующей странице


и подзаголовков при быть расширена представлен простой
составлении документов с помощью подзаголовков, документ, составленный
различных типов помогает помещаемых в тексте в программе Microsoft Word.
отразить иерархию ниже на странице. В раскрывающемся списке
предоставляемых данных. При составлении показаны различные стили
Например любой документ документа с помощью текста, которые можно
должен начинаться текстового редактора применить в документе,
с заголовка, написанного принято разделять например для создания
крупным шрифтом, после фрагменты текста, чтобы заголовков разного уровня.
которого, как правило, структурировать их. Каждая Если вы часто работаете
следует введение или подтема может выделяться с программой Word, то вам,
резюме с наиболее важной в отдельный абзац, кроме вероятно, уже приходилось
информацией. того, каждый подраздел использовать инструменты
также может иметь форматирования или
собственный заголовок, палитру цветов для
описывающий то, о чем выделения заголовков
говорится в следующем за и подзаголовков.
ним тексте.

22 СТРУКТУРА
СТРУКТУРА 23
На предыдущей странице
был приведен пример
структурирования
документа Microsoft Word,
используемого для упрощения
восприятия текста. Подобное
использование структуры
принято и при верстке
веб-страниц.

24 СТРУКТУРА
ИСПОЛЬЗОВАНИЕ ЯЗЫКА
HTML ДЛЯ ОПИСАНИЯ
СТРУКТУРЫ ВЕБ-СТРАНИЦ
В окне браузера вы видите документ с абсолютно таким же
содержимым, как и на скриншоте программы Word на странице 18.
Для описания структуры веб-документа необходимо добавить
немного кода к тексту, который вы хотите отобразить на экране.

Ниже на странице приведен код на языке HTML. Не волнуйтесь по


поводу того, что вы не понимаете его назначения. Уже на следующей
странице мы начнем подробно знакомить вас с ним. Обратите
внимание, что HTML-код напечатан голубым цветом, а текст,
выводимый на экран, — черным.

<html>
<body>
<h1>Это основной заголовок</h1>
<p>Этот текст может быть введением к тексту,
помещенному
далее на странице. В случае если текст достаточно
длинный, он может быть разделен на несколько
разделов
с подзаголовками.</p>
</h2>Это подзаголовок</h2>
<p>Часто при написании длинных статей используют
подзаголовки, помогающие читателям следить за
структурой
всего написанного. Иногда используются
и подзаголовки
более низкого уровня.</p>
<h2>Еще один подзаголовок</h2>
<p>Вот еще один пример подзаголовка.</p>
</body>
</html>

HTML-код (выделен голубым цветом) состоит из символов,


помещенных между двух угловых скобок. Все это называется
HTML-элементами. Элементы, как правило, состоят из двух
тегов: открывающего и закрывающего. (Внутри закрывающего
тега также имеется косая черта, иначе называемая слеш.) Каждый
HTML-элемент сообщает браузеру какую-либо информацию о тексте,
помещенном между открывающим и закрывающим тегами.

СТРУКТУРА 25
ЯЗЫК HTML ОПИСЫВАЕТ
СТРУКТУРУ СТРАНИЦ
С ПОМОЩЬЮ ЭЛЕМЕНТОВ
Теперь давайте более детально рассмотрим код,
с которым вы познакомились на предыдущей
странице. Этот код содержит несколько различных
элементов. У каждого из них имеются открывающий
и закрывающий теги.

КОД
<html>

<body>

<h1>Это основной заголовок</h1>

<p>Этот текст может быть введением к тексту,


помещенному далее на странице. В случае если текст
достаточно длинный, он может быть разделен на
несколько разделов с подзаголовками.</p>

</h2>Это подзаголовок</h2>

<p>Часто при написании длинных статей используют


подзаголовки, помогающие читателям следить за
структурой всего написанного. Иногда используются
и подзаголовки более низкого уровня.</p>

<h2>Еще один подзаголовок</h2>

<p>Вот еще один пример подзаголовка.</p>

</body>

</html>

26 СТРУКТУРА
Элементы аналогичны контейнерам.
Они сообщают какую-либо информацию
о тексте, расположенном между
открывающим и закрывающим тегами.

ОПИСАНИЕ
Открывающий тег <html> означает, что все, помещенное между
ним и закрывающим тегом </html>, является HTML-кодом.
Тег <body> сообщает, что все, помещенное между ним и закрывающим тегом
</body>, должно быть отображено в основном окне браузера.

Текст между тегами <h1> и </h1> представляет основной заголовок.

Абзац текста должен быть помещен между тегами <p> и </p>.

Текст между тегами <h2> и </h2> представляет подзаголовок.

Это еще один абзац текста, помещенный между тегами <p> и </p>.

Еще один подзаголовок между тегами <h2> и </h2>

Еще один абзац текста между тегами <p> и </p>

Закрывающий тег </body> означает окончание контента, который должен быть


отображено в основном окне браузера

Закрывающий тег </html> означает конец HTML-кода.

СТРУКТУРА 27
БОЛЕЕ БЛИЗКИЙ ВЗГЛЯД
НА ТЕГИ

СИМВОЛ

<p>
ОТКРЫВАЮЩАЯ СКОБКА
(ЗНАК «МЕНЬШЕ»)
ЗАКРЫВАЮЩАЯ СКОБКА
(ЗНАК «БОЛЬШЕ»)

ОТКРЫВАЮЩИЙ
ТЕГ

Символы в скобках означают, Например, тегом р* Отличием закрывающего тега


для каких целей можно обозначается абзац текста является наличие слеша после
использовать данный тег символа <.

* От англ. paragraph — абзац. —


Примеч. ред.

28 СТРУКТУРА
СИМВОЛ

</p>
ОТКРЫВАЮЩАЯ СКОБКА
(ЗНАК «МЕНЬШЕ»)
ЗАКРЫВАЮЩАЯ СКОБКА
(ЗНАК «БОЛЬШЕ»)

СЛЕШ

ЗАКРЫВАЮЩИЙ
ТЕГ

Термины «тег» и «элемент» Однако, строго говоря, и закрывающий,


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

СТРУКТУРА 29
АТРИБУТЫ
ПРЕДОСТАВЛЯЮТ БОЛЕЕ
ПОДРОБНУЮ ИНФОРМАЦИЮ
ОБ ЭЛЕМЕНТАХ
Атрибуты предоставляют дополнительную
информацию о содержимом
HTML-элементов. Они располагаются
в открывающем теге элемента и состоят
из двух частей: имени и значения,
разделенных знаком «равно».

ИМЯ
АТРИБУТА

<p lang="ru">Текст на русском языке</p>

ЗНАЧЕНИЕ
АТРИБУТА

Имя атрибута собственно информация Выше в качестве примера


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

30 СТРУКТУРА
Язык HTML5 допускает
написание значений атрибутов
заглавными буквами без
кавычек, но делать это не
рекомендуется.

ИМЯ
АТРИБУТА

<p lang="en-US">Paragraph in English</p>

ЗНАЧЕНИЕ
АТРИБУТА

Большинство атрибутов Большинство значений для них значениях. Так,


могут быть использованы атрибутов могут быть значением атрибута
только с определенными либо предопределенными, lang может быть
элементами. Несмотря на либо установленными сокращенное обозначение
это некоторые атрибуты в соответствии с принятыми языка содержимого
(например, lang) стандартами. По мере элемента. Браузеры
допускается ставить изучения атрибутов вы должны распознавать это
в любом элементе. также узнаете и о доступных сокращение.

СТРУКТУРА 31
ЭЛЕМЕНТЫ BODY, HEAD
И TITLE
<body> глава-01/body-head-title.html HTML

С тегом <body>* вы уже <html>


встречались в первом <head>
примере. Все, помещае- <title>Это заголовок страницы</title>
мое внутрь этого элемен- </head>
та, отображается в основ- <body>
ном окне браузера. <h1>Это "тело" страницы</h1>
<p>Содержимое, помещенное в "тело" страницы,
будет отображено в основном окне браузера.</p>

<head> </body>
</html>

Вам часто придется ви-


деть элемент <head>**,
предшествующий РЕЗУЛЬТАТ
элементу <body>. Он со-
держит информацию
о самой странице, а не ту,
которая будет выведена
в основную часть окна
браузера (выделенную
голубым цветом на
следующей странице).
В элемент <head>
также часто включается
элемент <title>.

<title>
Содержимое элемента
<title>*** выводится
либо в заголовке окна
браузера (выше тексто-
вого поля, в которое вы
обычно вводите адрес
сайта), либо в качестве
названия вкладки стра-
* Тело (англ.). — Примеч. ред.
ницы (если ваш браузер
** Голова (англ.). — Примеч. ред.
использует вкладки).
*** Заголовок (англ.). — Примеч. ред.

32 СТРУКТУРА
Весь текст, находящийся между
тегов <title>, выводится
в заголовок окна браузера или
вкладки страницы (на рисунке
выделен оранжевым цветом)

Все, находящееся между


тегами <body>, выводится
в основное окно браузера
(на рисунке выделено
голубым цветом)

Возможно, вы уже знаете, посетителям быстро веб-страницу: к исходному


что аббревиатура HTML и легко перемещаться тексту, который вы хотите
расшифровывается с одной страницы на отобразить в окне браузера,
как HyperText Markup другую. Язык разметки вы добавляете какой-
Language — язык разметки позволяет вам создать либо код, используемый
гипертекста. В данном случае примечания к тексту, а эти браузером для корректного
слово «гипертекст» означает, примечания, в свою очередь, отображения страницы.
что с помощью языка придают дополнительное Поэтому теги, добавляемые
HTML вы можете создавать значение содержимому вами, называются
ссылки, позволяющие документа. Представьте себе «элементами разметки».

СТРУКТУРА 33
СОЗДАНИЕ ВЕБ-СТРАНИЦЫ
В ОПЕРАЦИОННОЙ СИСТЕМЕ
WINDOWS
Чтобы создать вашу пер-
вую веб-страницу на ком- 1
пьютере под управлением
операционной системы
Windows, запустите про-
грамму Блокнот (Notepad).
Это можно сделать следу-
ющим образом: на экране
Пуск (Start) в операцион-
ной системе Windows 8
щелкните правой кнопкой
мыши и выберите пункт
Все приложения (All Pro-
grams) в правом нижнем
углу экрана. В списке при-
ложений в группе Стан-
дартные — Windows
(Accessories — Windows)
щелкните мышью по яр-
лыку приложения Блокнот 2
(Notepad).
В предыдущих версиях
операционной систе-
мы Windows, выберите
команду меню Пуск ⇒ Все
программы ⇒ Стан-
дартные ⇒ Блокнот
(Start ⇒ All Programs ⇒ Ac-
cessories ⇒ Notepad).
Вы также можете загрузить
бесплатный текстовый ре-
дактор Notepad++ с сайта
notepad-plus-plus.org.
Если вы пользуетесь более
ранней версией Windows,
выполните команду меню
Пуск ⇒ Введите в окне
программы код, показан-
ный на рисунке справа.

34 СТРУКТУРА
ARTICLE
В меню Файл (File) выберите
команду Сохранить как (Save
As). Сохраните файл и запом-
ните, где он находится. При
желании вы сможете создать
отдельную папку для всех при-
меров из этой книги.
3 Сохраните этот файл под име-
нем first-test.html. Не забудьте
выбрать пункт Все файлы (All
Files) в раскрывающемся спи-
ске Тип файла (Save as type),
чтобы сохранить документ как
веб-страницу, а не как простой
текст.
Для веб-страниц с кирилли-
ческими буквами обязатель-
но выберите пункт UTF-8
в раскрывающемся списке
Кодировка (Encoding). Это
необходимо для правильного
отображения русского текста
в окне браузера.

Запустите браузер. В меню


4 Файл (File) выберите команду
Открыть (Open). Перейдите
в папку, содержащую только
что созданный файл, выдели-
те его и щелкните по кнопке
Открыть (Open). Появившаяся
страница должна быть похожа
на ту, что изображена на ри-
сунке слева.

Если открытая вами страница


отличается от изображенной
на рисунке, найдите только что
созданный файл и убедитесь,
что он имеет расширение
.html (если у файла расшире-
ние .txt, то вам придется вер-
нуться в программу Блокнот
(Notepad) и заново сохранить
его, поместив имя файла "first-
test.html" в кавычки).

СТРУКТУРА 35
СОЗДАНИЕ ВЕБ-СТРАНИЦЫ
В ОПЕРАЦИОННОЙ
СИСТЕМЕ OS X
Чтобы создать страни-
цу на компьютере под 1
управлением операци-
онной системы OS X,
запустите программу
TextEdit, расположенную
в папке Программы (Ap-
plications).
Вы также можете за-
грузить бесплатный
текстовый редактор для
создания веб-страниц
TextWrangler с сайта
www.barebones.com.

Программа TextEdit по
умолчанию создает не 2
простые текстовые,
а RTF-документы. Для
работы с HTML-кодом,
выберите команду меню
Формат ⇒ Конверти-
ровать в простой текст
(Format ⇒ Make Plain
Text).

36 СТРУКТУРА
ARTICLE
Теперь перейдите в меню
Файл (File) и выберите
команду Сохранить
(Save). Сохраните файл
и запомните его место-
положение.
При желании вы можете
3 создать отдельную папку
для всех примеров из
этой книги. Сохраните
данный файл под именем
first-test.html. Если на
экране появится диа-
логовое окно с запро-
сом, какое расширение
использовать для файла,
нажмите кнопку Оста-
вить .html (Use .html).
Далее запустите брау-
зер. В меню Файл (File)
выберите команду
Открыть файл (Open
file). Перейдите в папку,
содержащую только что
созданный вами файл,
4 выделите его и щелкни-
те по кнопке Открыть
(Open). Страница должна
быть похожа на ту, что
изображена на рисунке
слева.

Если на открытой вами


странице кириллический
текст отображается не-
правильно, вам следует
выбрать кодировку
вручную (как указывать
ее в коде, вы узнаете
позже). В меню браузера
Safari выберите команду
Вид ⇒ Кодировка тек-
ста ⇒ Unicode (UTF-8)
(View ⇒ Encoding ⇒ Uni-
code (UTF-8)).

СТРУКТУРА 37
КОД В СИСТЕМЕ
УПРАВЛЕНИЯ КОНТЕНТОМ

Обычно при работе с систе- увидите два текстовых поля, для отображения инфор-
мами управления контен- позволяющие вводить заго- мации обо всех имеющихся
том, а также платформами ловок документа и основной продуктах.) Предоставля-
для блогов или электрон- текст. Также на этой страни- емая вами информация о
ной коммерции для полу- це вы сможете указать дату товаре вводится в шаблон.
чения контроля над ними публикации и обозначить, в Преимущество данного ме-
необходимо перейти в спе- какой раздел сайта должна тода в том, что он позволяет
циальный административ- быть помещена статья. добавлять информацию на
ный раздел сайта. Инстру- Если бы вы работали с сай- сайт даже людям, не умею-
менты, предоставляемые в том интернет-магазина, то щим верстать веб-страницы.
таких разделах, как правило, вы, возможно, встретили бы Кроме того, вы можете изме-
позволяют редактировать поля, позволяющие вводить нить внешний вид отдель-
отдельные участки страниц, название продукта, его опи- ных блоков шаблона, и все
но не страницу целиком, по- сание, цену и количество, страницы, созданные с его
этому при работе с ними вы имеющееся на складе. использованием, автомати-
редко будете встречать та- Это возможно благодаря чески обновятся. Предста-
кие элементы, как <html>, тому, что для управления все- вив себе магазин, прода-
<head> или <body>. ми страницами раздела сайта ющий 1000 наименований
Взглянув на рисунок используется один и тот же продукции, вы поймете,
с изображением системы шаблон. (Например, на сайте что отредактировать один
управления контентом на интернет-магазина может шаблон гораздо проще, чем
следующей странице, вы использоваться один шаблон править страницу каждого

38 СТРУКТУРА

Вам также может понравиться