Академический Документы
Профессиональный Документы
Культура Документы
HTML XHTML CSS2 PDF
HTML XHTML CSS2 PDF
ББК 32.988.02-018
УДК 004.438.5
Робсон Э., Фримен Э.
Ф88 Изучаем HTML, XHTML и CSS. 2-е изд. — СПб.: Питер, 2014. — 720 с.: ил. — (Серия «Head First O’Reilly»).
ISBN 978-5-496-00653-8
Устали от чтения книг по HTML, которые понятны только специалистам в этой области? Тогда самое время взять в руки второе
издание «Изучаем HTML, XHTML и CSS». Хотите изучить HTML, чтобы уметь создавать веб-страницы, о которых вы всегда мечтали?
Так, чтобы более эффективно общаться с друзьями, семьей и привередливыми клиентами? Тогда эта книга для вас. Прочитав ее, вы
изучите все секреты создания веб-страниц. Вы узнаете, как работают профессионалы, чтобы получить визуально привлекательный
дизайн, и как максимально эффективно использовать HTML, CSS и XHTML, чтобы создавать такие веб-страницы, мимо которых не
пройдет ни один пользователь. Используя новейший стандарт HTML5, вы сможете поддерживать и совершенствовать свои веб-стра-
ницы в соответствии с современными требованиями, тем самым обеспечивая их работу во всех браузерах и мобильных устройствах.
12+ (В соответствии с Федеральным законом от 29 декабря 2010 г. № 436-ФЗ.)
ISBN 978-0596159900 англ. Copyright © 2012 Elisabeth Robson and Eric Freeman. All rights reserved.
Authorized Russian translation of the English edition of Head First HTML and CSS,
2nd Edition (ISBN 9780596159900). This translation is published and sold by
permission of O’Reilly Media, Inc., which owns or controls all rights to publish and
sell the same.
ISBN 978-5-496-00653-8 © Перевод на русский язык ООО Издательство «Питер», 2014
© Издание на русском языке, оформление ООО Издательство «Питер», 2014
Права на издание получены по соглашению с O’Reilly. Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой
бы то ни было форме без письменного разрешения владельцев авторских прав.
Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как надежные. Тем не менее, имея в виду
возможные человеческие или технические ошибки, издательство не может гарантировать абсолютную точность и полноту приводимых сведений
и не несет ответственности за возможные ошибки, связанные с использованием книги.
ООО «Питер Пресс», 192102, Санкт-Петербург, ул. Андреевская (д. Волкова), 3, литер А, пом. 7Н.
Налоговая льгота — общероссийский классификатор продукции ОК 005-93, том 2; 95 3005 — литература учебная.
Подписано в печать 19.07.13. Формат 84×108/16. Усл. п. л. 75,600. Тираж 2500. Заказ 0000.
Отпечатано в полном соответствии с качеством предоставленных издательством материалов
в ГППО «Псковская областная типография». 180004, Псков, ул. Ротная, 34.
зерами.
Войны между брау
в главе 6.
Читайте об этом
Îá àâòîðàõ ен
Эрик Фрим an) обсон
Элизабет Р obson)
(Eric Freem (Elisabeth R
Одна из основоположников серии «Head First» Кэти Сьерра так Элизабет совмещает деятельность проектировщика про-
характеризует Эрика: «Один из редких людей, которые одинаково граммного обеспечения, писателя и инструктора. Увлекаться
хорошо владеют языком, практическими навыками и знаниями технологиями она начала еще во время учебы в Йельском
культуры в разных областях, будь то сфера, в которой орудует университете, где получила степень магистра компьютер-
хакер-хипстер, работает корпоративный вице-президент, проек- ных наук и занималась разработкой языка параллельного
тировщик или эксперт-аналитик». визуального программирования и программной архитектуры.
В профессиональном плане Эрик недавно подошел к почти деся- Элизабет увлеклась созданием веб-приложений на самом
тилетней отметке в качестве должностного лица в медиакомпа- раннем этапе существования Интернета; она участвовала в
нии: он занимает пост главного технического директора Disney создании заслужившего признание веб-сайта The Ada Project,
Online & Disney.com в Walt Disney Company. В настоящее время который стал одним из первых ресурсов, призванных помочь
Эрик занят WickedlySmart – стартапом, который он организовал женщинам, занятым в сфере информатики, отыскать онлайн
совместно с Элизабет. карьерную информацию, а также другие полезные сведения.
По образованию Эрик — ученый в области компьютерных наук, Она является одним из основателей WickedlySmart – образо-
и ему довелось заниматься научными исследованиями с таким вательного онлайн-ресурса, посвященного веб-технологиям,
светилом, как Дэвид Джелернтер (David Gelernter), во время его где можно отыскать ее книги, статьи, видео и пр. Ранее, когда
деятельности как доктора философии в Йельском университете. она была руководителем специальных проектов в O’Reilly
Его диссертация была охарактеризована как плодотворный труд Media, Элизабет лично проводила семинары и онлайн-лекции
в сфере поиска альтернатив «метафоре рабочего стола», а также на разные технические темы, создавала образовательные
как первая реализация потоков активности — концепции, которую ресурсы, помогающие людям разобраться в технологиях. До
он разработал совместно с доктором Джелернтером. сотрудничества с O’Reilly Media Элизабет довелось порабо-
тать в Walt Disney Company, где она отвечала за руководство
В свободное время Эрик серьезно увлечен музыкой; результат по-
исследованиями и разработками в сфере цифрового медиа.
следнего проекта Эрика, над которым он работал в сотрудничестве
с пионером музыкального стиля «эмбиент» Стивом Роачем (Steve Когда Элизабет не сидит за компьютером, она любит совер-
Roach), имеется в электронном магазине приложений для iPhone шать длительные прогулки, кататься на велосипеде, сплав-
и называется «Immersion Station». ляться на байдарке, снимая все на камеру, а также готовить
вегетарианские блюда.
Местом жительства Эрика, его жены и маленькой дочери является
остров Бейнбридж. Его дочь часто посещает студию Эрика, где Электронные письма Элизабет направляйте по адресу beth@
ей нравится играть с переключателями на синтезаторе звуков и wickedlysmart.com, а также посетите ее блог на сайте http://
создавать аудиоэффекты. elisabethrobson.com.
Электронные письма Эрику направляйте по адресу eric@
wickedlysmart.com, посетите его сайт http://ericfreeman.com.
Содержание (сводка)
Введение 23
1 Язык Сети. Знакомство с HTML 35
2 Знакомство с гипертекстом.
Идем дальше — используем гипертекст 75
3 Конструирование веб-страниц. Строительные блоки 107
4 Путешествие в Webville. Соединение 149
5 Знакомство с медиа. Добавление изображений на страницы 187
6 Серьезный HTML. Стандарты 241
7 Начнем работать над дизайном. Приступаем к работе с CSS 275
8 Увеличиваем словарный запас. Меняем шрифты и цвета 329
9 Познакомимся с элементами поближе. Блочная модель 377
10 Современная веб-конструкция. Элементы div и span 427
11 Расставим элементы по местам.
Разметка и позиционирование 485
12 Современный HTML. HTML5-разметка 557
13 Представление в табличной форме.
Таблицы и большие списки 611
14 Переход на интерактивный режим. HTML-формы 653
Приложение. Топ-10 тем, которые не были освещены в этой книге 705
Содержание (настоящее)
Введение
Поведение вашего мозга при изучении HTML и CSS. Когда вы пытаетесь что-либо
выучить, ваш мозг неустанно следит за тем, чтобы процесс изучения не остановился.
Он думает: «Лучше оставить место для более важной информации, чтобы, например,
знать, встречи с какими дикими животными следует избегать. Или знать, что катание на
сноуборде без специального снаряжения — не самая удачная идея». Как же убедить свой
мозг в том, что для вас так же важно знать HTML и CSS?
7
содержание
знакомство с HTML
1 Язык Сети
Единственное, что необходимо для того, чтобы успешно работать в Сети, — на-
учиться говорить на ее специфическом языке: HyperText Markup Language (язык
гипертекстовой разметки), или сокращенно HTML. Итак, приготовьтесь к нескольким
урокам языка. После этой главы вы не только узнаете некоторые базовые понятия HTML,
но и сможете разговаривать на этом языке, используя определенный стиль. Черт возь-
ми, к концу этой книги вы сможете говорить на языке HTML так, будто выросли в Сети!
ен HTML-файл loung
нуж e.
не
ht
<html>
М
<head>
<title>
ml».
My Playlist
</title>
«
<head>
<body>
<html> <h1>Kick’n Tunes
<head>
<title>
</h1>
My Playlist <p>BT - Satellite:
</title> nice downbeat tune.
<head>
<body> </p>
<h1>Kick’n Tunes <p>
</h1> ...
<p>BT - Satellite:
nice downbeat tune.
</p>
<p>
...
<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kick’n Tunes
</h1>
:
<p>BT - Satellite:
nice downbeat tune.
</p>
<p> <html>
<head>
... <title>
My Playlist
</title>
<head>
<body>
<h1>Kick’n Tunes
</h1>
<p>BT - Satellite: nice
downbeat tune.
</p>
<p>
...
«Нашел, держите!»
Веб-сервер
8
содержание
2 Знакомство с гипертекстом
Кто-то сказал «гипертекст»? Что это? О, только чистая основа Сети. В главе 1 мы
привели основные сведения о языке HTML, и, надеемся, вы пришли к выводу, что это
хороший язык для разметки текста, используемый для описания структуры веб-стра-
ниц. Сейчас наша задача — разобраться с гипертекстом, который позволит осво-
бодиться от одиночных страниц и ссылаться на другие страницы. В процессе этого
мы познакомимся с новым элементом <a> и поймем, какая превосходная штука —
взаимосвязь страниц. Итак, пристегните ремни безопасности, вы вот-вот начнете
изучение гипертекста.
дальше 9
содержание
строительные блоки
3 Конструирование веб-страниц
Мы говорили вам, что в этой книге вы действительно будете создавать веб-страницы.
Конечно, уже многое выучено: теги, элементы, ссылки, пути, однако все это бесполез-
но, если, используя полученные знания, не попробовать создать парочку потрясающих
веб-страниц. В этой главе мы будем расширять строительство веб-страниц: перейдем от их
общего осмысления к проектированию, зальем фундамент, построим их и даже выполним
кое-какую отделку. Все, что вам нужно, — это усердие, трудолюбие и пояс для рабочих
инструментов, так как мы будем добавлять некоторые новые инструменты и давать вам
информацию, как пользоваться ими.
h2
h2
img
10
содержание
соединение
4 Путешествие в Webville
Веб-страницы предназначены для того, чтобы располагаться и обслуживаться
в Интернете. До сих пор вы создавали веб-страницы, которые «жили» только в вашем
собственном компьютере. Вы также создавали ссылки только на те страницы, которые
хранятся на вашем компьютере. Мы вот-вот изменим это навсегда. В этой главе мы научим
вас размещать веб-страницы в Интернете, где все ваши родные, друзья и покупатели
действительно смогут их увидеть. Мы также раскроем тайну создания ссылок на другие
страницы, взломав код h, t, t, p, :, /, /, w, w, w. Итак, собирайте свои вещи, следующая
остановка — Webville.
дальше 11
содержание
5 Знакомство с медиа
Улыбнитесь и скажите «сыр». Теперь улыбнитесь и скажите «gif», «jpg» или «png» —
это те форматы файлов, которые вы выберете, создавая рисунки для Сети. В этой главе
вы узнаете все о том, как добавить на веб-страницу свой первый медиафайл — изобра-
жение. У вас есть парочка цифровых фотографий, которые вы хотите поместить в Сеть?
Никаких проблем. У вас есть логотип, который нужен на веб-странице? И это легко.
Или, может быть, сначала вы хотите более близко познакомиться с элементом <img>?
К концу этой главы вы будете знать все мельчайшие подробности того, как использовать
этот элемент и его атрибуты. Вы также узнаете, как этот небольшой элемент побуждает
браузер делать такую серьезную работу по поиску и отображению ваших картинок.
12
содержание
стандарты
6 Серьезный HTML
Что же еще нужно знать об HTML? Вы уже неплохо справляетесь с написанием HTML-стра-
ниц. Не настало ли время перейти к CSS и научиться придавать всей этой разметке еще
и ошеломительный внешний вид? Перед тем как сделать это, мы должны убедиться, что
ваши знания о HTML на должном уровне. Не поймите нас неправильно, вы и так создавали
первоклассный HTML, но есть еще несколько вещей, которые вам нужно сделать, чтобы
превратить его в «индустриально-стандартный» HTML. Пришло время, когда следует за-
думаться об обязательном использовании новейшего и самого лучшего HTML-стандарта,
также известного как HTML5. Благодаря этому вы сможете гарантировать, что ваши страницы
будут одинаково отображаться во всех браузерах (по крайней мере, в таких, которые для
вас важны), не говоря уже о том, что они смогут нормально работать на устройствах от
компании Apple, относящихся к самому последнему поколению (выберите свое любимое).
Вы также сможете создавать страницы, которые быстрее загружаются, гарантированно
хорошо взаимодействуют с CSS, идут в ногу с развитием стандартов. Приготовьтесь, в этой
главе вы из любителя превратитесь в профессионала!
13
содержание
head body
img a em a
14
содержание
15
содержание
блочная модель
16
содержание
10 Современная веб-конструкция
Пришло время для подготовки массивной конструкции. В этой главе мы займемся
такими HTML-элементами, как <div> и <span>. Это вам уже не мелкие прутья, а большие
стальные балки. С помощью <div> и <span> вы построите серьезные опорные конструк-
ции и, расставив их по местам, сможете стилизовать новыми, более действенными ме-
тодами. Обратите внимание, что ваш пояс для CSS-инструментов практически заполнен,
так что настало время показать вам несколько приемов для быстрого доступа к ним,
что очень облегчит определение всех этих свойств. В эту главу мы также пригласили
специальных гостей — псевдоклассы, с помощью которых вы сможете создавать очень
интересные селекторы.
те эти
и пробуй
ый вечер
к нам кажд тельные напитки.
Заходите за ме ча
и другие
17
содержание
разметка и позиционирование
18
содержание
HTML5-разметка
12 Современный HTML
Мы уверены, что вам доводилось слышать о шумихе вокруг HTML5. И, принимая во
внимание то, насколько далеко вы продвинулись в чтении данной книги, вы, вероятно,
задаетесь вопросом о том, была ли ее покупка правильным поступком. Сейчас необходимо
прояснить одну вещь: все, что вы изучили ранее по ходу книги, было HTML, точнее говоря,
отвечало стандарту HTML5. Однако существует ряд новых аспектов HTML-разметки, поя-
вившихся с приходом стандарта HTML5, которые мы еще не рассматривали, чем как раз и
займемся в этой главе. Большинство этих нововведений имеют эволюционный характер и,
учитывая всю тяжелую работу, которую вы проделали по ходу изучения данной книги, вы
без особого труда сможете в них разобраться. Среди них также имеются революционные
элементы (например, <video>), о которых мы тоже поговорим в этой главе. Итак, давайте
приступим и взглянем на эти нововведения!
19
содержание
20
HTML-формы
14 Переход на интерактивный режим
До сих пор ваше веб-общение было односторонним: от веб-страницы к поль-
зователям. Разве не было бы здорово, если бы пользователи смогли отвечать вам?
Именно на этом этапе вступают в действие формы HTML. Как только вы снабдите свои
страницы формами (прибегнув к определенной помощи веб-сервера), вы сможете
собирать отзывы клиентов, принимать по Сети заказы, делать следующий ход в игре
в режиме онлайн или проводить интернет-голосования. В этой главе вы познакомитесь
с целой группой HTML-элементов, предназначенных для создания веб-форм. Вы также
узнаете кое-что о том, что происходит на сервере для поддержки форм и как сделать
сами формы стильными.
21
содержание
Приложение
Топ-10 тем, которые не были
освещены в этой книге
В книге мы рассмотрели очень много тем, и вы уже
почти закончили свое обучение по ней. Однако мы не
можем со спокойной душой отпустить вас, не рассказав
еще кое-что напоследок. Как бы мы ни старались, но
не сможем уместить в это маленькое приложение все
то, что вам нужно знать, поэтому мы сначала вклю-
чили в него все, что вам нужно знать об HTML и CSS
(все то, что не было освещено в предыдущих главах),
уменьшив размер шрифта на 0,00004. Все вместилось,
но прочесть это было нереально. В итоге мы все же
выбросили большую часть информации и поместили
в приложение только десять самых важных тем.
Введение
Не могу поверить,
что они пишут такое
в книге по HTML!
прос:
и во т р епещущий во
на ж
ответим о HTML?»
этой части мы т а к о е в книге п
В пишут
очему они
«Итак, п
как работать с этой книгой
[Замечание от отдел
а маркетинга:
вообще-то эта книга
для любого, у кого
есть деньги.]
24 введение
введение
дальше 25
как работать с этой книгой
иси
<hea
<he
<head>
на дп
<b
<bo
<body>
ть
<h1>Kick’n Tunes
Tune
по ме
<p>BT
p>BT - Satellite: nice
nic
Лучше
down
downbeat
nbeat tune.
tune
</p>
</p>
<p>
<p>
...
26 введение
введение
д
введение
дальше 27
как работать с этой книгой
А еще лучше, если текст и изображение работают вместе. Мы добавляли текст внутрь b
body
d
картинки, потому что мозг работает более эффективно, если текст находится внутри h1 p p h2 p
28 введение
введение
дальше 29
как работать с этой книгой
Ïðèìèòå ê ñâåäåíèþ
Эта книга — учебник, а не просто справочник. Мы рассмотрели все ситуации,
которые могут возникнуть в процессе обучения, и создали книгу с учетом
этого. Читая ее первый раз, вы должны начать с самого начала, поскольку мы
постоянно предполагаем, что вы уже знаете все вышеизложенное.
Мы начинаем с изучения исходных положений HTML, затем
переходим к HTML5.
Чтобы писать на HTML, основанном на общепринятых стандартах, нужно
понимать много технических деталей, которые бесполезны, пока вы еще
только знакомитесь с основами языка. Наш подход заключается в том, чтобы
сначала научить вас основным понятиям HTML (не останавливаясь на дета-
лях), а затем, когда вы будете все хорошо понимать, научить вас писать на
HTML (самой последней версией которого является HTML5), основанном
на общепринятых стандартах. В этом есть дополнительная польза, так как
технические детали имеют больше смысла после того, как изучены основы.
Важно также, что к моменту использования CSS вы уже будете писать на HTML,
основанном на общепринятых стандартах.
Мы не описываем все подряд элементы и атрибуты HTML и свой-
ства CSS, которые когда-либо были созданы.
Существует множество элементов и атрибутов HTML и свойств CSS. Бесспорно,
все они интересны, но нашей целью было написание книги, которая весит
меньше, чем ее читатель, поэтому мы не описываем их все. Мы обращаем
внимание только на основные элементы HTML и свойства CSS, которые
действительно важны для начинающих, и надеемся, что вы по-настоящему
поймете, как и когда их использовать. В любом случае после прочтения этой
книги вы сможете взять любой справочник и быстро ознакомиться со всеми
элементами и свойствами, которые мы пропустили.
В книге четко разделены понятия структуры и представления
ваших страниц.
В наши дни при создании серьезных веб-страниц применяется HTML для
структурирования их содержимого, а также CSS для стилизации и дизайна.
В веб-страницах 1990-х годов часто использовалась другая модель, где HTML
применялся и для структуризации, и для стилизации. Мы научим вас исполь-
зовать HTML для структуризации, а CSS для стилизации; мы не видим смысла
учить вас дурным устаревшим привычкам.
Мы поощряем использование нескольких браузеров.
Пока мы учим вас писать на HTML и CSS, основанных на стандартах, вы
по-прежнему (и, скорее всего, и далее) будете сталкиваться с небольшими
различиями в способах отображения страниц разными браузерами. Поэтому
30 введение
введение
дальше 31
обзор команды
с
Валентин Кретта Кори Макглоун
Òåõíè÷åñêèå ðåöåíçåíòû
(ïåðâîå èçäàíèå)
Джо Коньор Барни Мариспини
Луиза Барр
Бесстрашный
Эйфел Тауэр руководитель
команды критиков
Маркус Грин
Айк Ван
Ай В Атта
А
Йоханнес де Йонг
Паулина Макнамара
озвище
Паулина получила пр
Наши рецензенты «Злостный критик».
Выражаем большую благодарность нашей команде технических рецензентов.
Йоханнес де Йонг (Johannes de Jong), организовавший и возглавивший проект,
исполнял роль «папы» и сделал всю работу слаженной. Паулина Макнамара
(Pauline McNamara), соуправляющий проекта, привела все в систему и была
первой, кто обратил внимание на то, что примеры не совсем актуальны для
наших дней. Вся команда подтвердила, как сильно нам помогли их техническая
экспертная оценка и внимание к деталям. Валентин Креттас (Valentin Crettaz), Дэвид О’Мера
Барни Мариспини (Barney Marispini), Маркус Грин (Marcus Green), Айк Ван
Атта (Ike Van Atta), Дэвид О’Мера (David O’Meara), Джо Коньор (Joe Konior)
и Кори Макглоун (Corey McGlone) не пропустили ни одной мелочи, анализируя
книгу, что сделало ее намного лучше. Ребята, вы молодцы! Благодарим также
Кори (Corey) и Паулину (Pauline), которые не давали нам незаметно перейти
к слишком официальному стилю изложения. Отдельная благодарность JavaRanch
за услуги размещения информации в Сети.
Огромное спасибо Луизе Барр (Louise Barr), нашему веб-дизайнеру, которая
упорно следила за дизайном и за использованием нами HTML и CSS.
32 введение
введение
Уважаемый
Áëàãîäàðíîñòè (ïåðâîå èçäàíèå)* рецензент Дэвид
Пауэрс
И еще про технические рецензии
Мы также выражаем большую благодарность нашему уважаемому техническому
рецензенту Дэвиду Пауэрсу (David Powers). У нас были действительно сложные
отношения с ним, потому что он заставлял нас усердно работать, зато какой
результат! Поэтому оно того стоило. Честно говоря, основываясь на его коммен-
тариях, мы сделали существенные изменения в этой книге, и в техническом
плане это сделало ее в два раза лучше.
Группе O’Reilly:
Выражаем большую благодарность нашему редактору Бретту Маклафлину
(Brett McLaughlin), который отредактировал всю книгу так, что она стала
ясной и понятной и может быть быстро освоена всей семьей. Бретт потра-
тил много времени, усердно редактируя книгу (что нелегко для этой серии).
Спасибо, Бретт, этой книги не было бы без тебя. Этот парень
действительно
Н
Наша искренняя благодарность всей команде O’Reilly:
профессионал в своем деле,
Грег Коррин (Greg Corrin), Гленн Бизиньяни (Glenn
его невозможно обмануть.
Bisignani), Тони Артузо (Tony Artuso), Кайл Харт (Kyle
Hart) возглавили отдел маркетинга, и мы признатель-
ны им за их замечательный новый подход. Благодарим
Элли Волкхаусен (Ellie Volkhausen) за притягательный дизайн обложки, который до
сих пор нам служит, а также Карэн Монтгомери (Karen Montgomery) за то, что поспо-
собствовала тому, чтобы использовалась именно эта обложка. И конечно же, благо-
ф
фл
клаф
Макла
етт Ма н
ин
лин
ли дарим Колена Гормана (Colleen Gorman) за основательное редактирование текста
Брет
Бр
(и за сохранение шутливого стиля изложения). Книга не была бы столь красочной,
если бы не Сью Виллинг (Sue Willing) и Клэр Клотье (Claire Cloutier). Кроме того, выражение признатель-
ности всем участвующим в создании книги было
Кэти Сь ерра
бы неполным без благодарности Майку Лукайдсу с
Берт Бэйт
(Mike Loukides) за создание целой серии и Тиму
О’Рейлли (Tim O’Reilly) за то, что он всегда был
и продолжает быть с нами. Наконец, благодарим
Майка Хендриксона (Mike Hendrickson) за то, что
привлек нас всех в дружную семью создателей
этой серии и доверил нам работу с ней.
И последнее, но далеко не маловажное: благода-
рим Кэти Сьерра и Берта Бэйтса — наших парт-
неров, которые создали серию. Спасибо вам, ре-
бята, за доверие. Мы надеемся, что оправдали его.
Трехдневная сессия была ярким моментом напи--
сания книги, и мы надеемся повторить ее снова.
О, и не могли бы вы в следующий раз позвонить
LTJ и пригласить его приехать в Сиэтл?
* Мы выражаем благодарность такому большому количеству людей, так как проверяем теорию, будто каждый из них купит по крайней мере один экземпляр книги, а возможно, больше,
учитывая их родственников и знакомых. Если вы хотите, чтобы мы выразили вам благодарность в нашей следующей книге, и у вас большая семья, пишите нам.
дальше 33
Дэвид Пауэрс
Майк Хендриксон
Áëàãîäàðíîñòè (âòîðîå èçäàíèå))
Выражаем глубочайшую признательность нашему главному редактору Майку Хен-
дриксону (Mike Hendrickson), который всячески способствовал выходу данной
книги в свет (помимо непосредственного труда над ее текстом), превратил работу
над ней в увлекательное путешествие и, что более важно (величайшая вещь, которую
может сделать любой редактор), нисколько не сомневался в том, что мы закончим
ее! Спасибо, Майк, без тебя ни одна из наших книг не увидела бы свет. Ты остаешься
нашим защитником на протяжении свыше десяти лет, и мы любим тебя за это!
Публикация книги требует усилий немалого количества людей. Выражаем самую ис-
креннюю признательность всей команде из O’Reilly: Кристен Борг (Kristen Borg) (ге-
ниальному редактору по производству), чудесной Рэйчел Монаган (Rachel Monaghan) Лу Барр
(корректору), Рону Штрауссу (Ron Strauss) за тщательно проработанный предметный
указатель, Ребекке Демарест (Rebecca Demarest) за помощь с иллюстрациями; Карен Монтгомери (Karen
Montgomery), первоклассному дизайнеру обложек, и, последней по счету, что, конечно же, ничуть не
умаляет ее заслуг, Луизе Барр (Louise Barr), которая всегда помогает нам сделать наши страницы красивее.
1 знакомство с HTML
Язык Сети
Не так быстро… Сначала вы
должны научиться говорить на
универсальном языке, то есть
на HTML и CSS.
Ñåòü à
Âèäåî óáèëî ðàäèîçâåçäó
Хотите поделиться своей новой идеей? Продать что-то? Просто нужен творческий выход? Обратитесь
к Сети — нет необходимости говорить вам, что она стала универсальной формой коммуникации. Кроме
того, это форма коммуникации, в которой ВЫ можете участвовать.
Но если вы действительно хотите эффективно использовать возможности Сети, то вам необходимо
узнать кое-какие вещи про HTML, не говоря уже о том, что нужно понимать, как работает сама Сеть.
Начнем с самого главного.
После того как вы поместили
веб-страниц вы
Для получения созданные файлы в веб-сервер,
, написанные на
создаете файлы age
любой браузер сможет через
t MarkupLangu
языке HyperTex ае те
Интернет отыскать ваши
ML) и помещ
(сокращенно HT ме-
веб-страницы.
(о том, как по
их в веб-сервер
в веб-сервер,
стить файлы
далее).
мы поговорим
Интернет
<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kick’n Tunes
</h1>
Веб-сервер
<p>BT - Satellite:
nice downbeat tune.
</p>
<p>
...
36 глава 1
знакомство с html
-файл loung
HTML e.h
<html>
<head>
ужен t
<title>
My Playlist
н
ml
</title>
не
<head>
<body>
<html> <h1>Kick’n Tunes
<head>
</h1>
».
<title>
My Playlist <p>BT - Satellite:
</title> nice downbeat tune.
«М
<head>
<body> </p>
<h1>Kick’n Tunes <p>
</h1> ...
<p>BT - Satellite:
nice downbeat tune.
</p>
<p>
...
<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kick’n Tunes
</h1> <html>
<p>BT - Satellite: <head>
<title>
nice downbeat tune. My Playlist
</p> </title>
<head>
<p> <body>
... <h1>Kick’n Tunes
</h1>
<p>BT - Satellite: nice
downbeat tune.
</p>
<p>
...
ст
<head>
веб- равляет
<title>
Head First Lounge
</title>
<head>
п <body>
и от ру.
<h1>Welcome to Head
</h1>
<img src="drinks.gi
зе
<p>Join us any even
брау
</p>
<html>
<head>
<title>
<p>
My Playlist
</title> ...
<head>
<body>
<html> <h1>Kick’n Tunes
<head>
<title>
</h1>
My Playlist <p>BT - Satellite:
</title> nice downbeat tune.
<head>
<body> </p>
<h1>Kick’n Tunes <p>
</h1> ...
<p>BT - Satellite:
nice downbeat tune.
</p>
<p>
...
<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kick’n Tunes
</h1>
<p>BT - Satellite:
nice downbeat tune.
</p>
<p>
...
Веб-сервер
Но каким образом браузер узнает о том, как именно отображать страницу? Вот здесь начи-
нает работать язык HTML. Он говорит браузеру всё о содержании и структуре страницы.
Посмотрим, как это работает…
дальше 37
немного о html
38 глава 1
знакомство с html
E
D
дальше 39
подробнее о разметке и тегах
часто
Задаваемые
вопросы
В: Итак, HTML — это всего лишь набор при редактировании пробелы, символы HTML-разметки и привносит новую функцио-
тегов, которые я расставляю вокруг ос- табуляции и абзацы, вы поймете, что они нальность, которую мы рассмотрим в данной
новного текста? улучшают читабельность кода. книге. Он также обеспечивает ряд продви-
нутых опций посредством своих Javascript-
О: Для начинающих. Запомните, что HTML — В: Существует два уровня заголовков: интерфейсов прикладного программирова-
это HyperText Markup Language (язык гипер- <h1> и <h2>? ния API (Application Programming Interface),
текстовой разметки), то есть он дает возмож- которые рассматриваются в книге «Head
ность «пометить» ваш текст тегами, которые О: На самом деле их шесть: от <h1> до First HTML5 Programming» («Изучаем
описывают браузеру его структуру. Помимо <h6>. Браузер обычно отображает их, раз- программирование на HTML5»).
этого, у HTML есть гипертекстовый аспект, личая благодаря последовательному умень-
о котором мы поговорим далее в книге. шению размера шрифта. Заголовки дальше В: Мне кажется, что размечать доку-
<h3> используются для сложных документов. мент — глупо. Программы, основанные на
В: Как браузер определяет, каким обра- принципе «что видишь на экране, то и по-
зом отображать HTML? В: Почему необходим тег <html>? Разве лучишь при печати», используются с 1970-х
и так не очевидно, что это HTML-документ? годов. Почему же Сеть не основывается
О: HTML описывает браузеру структуру на формате, аналогичном Microsoft Word?
вашего документа: где заголовки, где на- О: Тег <html> говорит браузеру, что ваш
чинаются новые абзацы, какой текст нужно документ является HTML-документом. Если О: Сеть состоит из текстовых файлов без
подчеркнуть и т. д. Получив эту информацию, одни браузеры не обратят внимания на то, какого-то специального форматирования.
браузер использует встроенные в него по что вы опустите этот тег, то другие вам этого Благодаря этому каждый браузер в любом
умолчанию правила о том, как отображать не простят. Постараемся вам доказать, что уголке света может найти веб-страницу
каждый из этих элементов. использование этого тега важно. и «понять» ее содержимое. Программы, ос-
Но вы можете добавить свой собственный нованные на принципе «что видишь на экра-
стиль и правила редактирования с помо- В: Что делает файл HTML-файлом? не, то и получишь при печати», например,
щью языка CSS, который определяет шрифт, Dreamweaver, отлично работают. В данной
цвет, размер и многие другие характери- О: По своей сути HTML-файл — это обычный книге мы начнем с основы — с текста. Затем
стики страницы. Мы вернемся к CSS позже. текстовый файл. В отличие от файлов специ- вы будете готовы понять, что приложение
альных текстовых редакторов, он не имеет Dreamweaver делает «за кадром».
В: В HTML-коде для гостевой Head First возможности форматирования. Обычно в кон-
используются отступы и соблюдаются це имени файла добавляется .html или .htm В: Есть ли какой-нибудь способ встав-
интервалы, но все же я не вижу, где это (в системах, которые поддерживают только три лять комментарии в HTML-код?
отображается в браузере. Как так? буквы в расширении файла), чтобы система
определила тип файла. Но вы же понимаете: О: Да, если вы поместите свой коммента-
О: Браузеры игнорируют символы табуля- имеет значение лишь содержимое файла. рий между символами <!-- и -->, то браузер
ции, абзацы и большинство пробелов в доку- их просто проигнорирует. Например, чтобы
менте HTML. Вместо этого они используют В: Все говорят о HTML5. А используем написать комментарий «Это начало нашей
заданную вами в коде разметку докумен- ли мы его? Если да, то почему мы не гостевой», нужно сделать так:
та для определения мест, где появляется говорим «HTML-ПЯТЬ» вместо «HTML»?
<!-- Это начало нашей гостевой -->
разрыв строки и конец абзаца. Для чего же
мы форматируем текст, если браузер все О: Вы изучаете HTML, а HTML5 — это Обратите внимание, что комментарий может
равно проигнорирует это? Чтобы нам было просто самая последняя версия языка быть написан в несколько строк. Помните,
легче читать HTML-документ, когда мы его HTML. За последнее время HTML5 было что все написанное между <!-- и -->, даже
редактируем. Поскольку HTML-документ со уделено много внимания, благодаря чему HTML-код, будет проигнорировано браузе-
временем усложняется, то, обнаружив в нем он упрощает многие из способов написания ром.
40 глава 1
знакомство с html
Снова рассмотрим HTML-код для гостевой Head First. Взгляните на теги. Можете
догадаться, что они говорят браузеру о содержимом документа? Напишите
свои ответы справа или где-нибудь еще в свободном месте. Мы начали это
делать за вас...
дальше 41
как сделать разметку
Присоединяйтесь к нам!
42 глава 1
знакомство с html
Генеральный
arbuzz
директор St
Мозговой
штурм Что вы сделаете в первую очередь
(выберите только одно).
дальше 43
что происходит на странице starbuzz
Замечательно!
Мы так рады, что вы
решили помогать нам . Вот
что нам нужно на первой
странице…
сь
о согласили
bu
zz Ка Спасибо, чтм нужна
помочь! На -страница
фе
Star
простая вебе ниже), на
(смотрит дут названия,
Star
которой бусания напитков.
фе
buz а
альны
й zК цены и опи
Генер р ч еркну
л
о ке 9
смесь, $1,4
к т лфет
дир е ых
т о на са
ам … Домашняя ерпкая смесь различни
что- л ее в Мягкая, нет и, Бол и ви
тяну е из Мексик
и п р о
сортов кофлы.
и Гватема
о, $2,35
Кофе мокк ипяченое молоко
Эспрессо, к ый сироп.
и шоколадн
$1,89 ока
Капучино, ессо и кипяченого мол
п р
Смесь эс ем пены.
с добавлени
чая,
Чай, $1,85 й напиток из черного
Возьми в руку карандаш Аро м а т н ы
ока и меда.
специй, мол
44 глава 1
знакомство с html
Мы не настаиваем, но скорее
всего, тысячи людей посетят
эту веб-страницу, когда вы
закончите. И она должна
быть корректно составлена
и великолепно выглядеть!
дальше 45
cоздание html в mac os
Шаг первый
Направляйтесь в папку Applications (Приложения).
Ярлык программы TextEdit находится в пап-
ке Applications (Приложения). Самый простой
способ туда попасть — выбрать пункт New Finder
Window (Поиск в новом окне) в меню Finder's File
(Файлы поиска) и затем искать папку Applications
(Приложения) прямо в ярлыках. Когда найдете
ее, щелкните на ней кнопкой мыши.
Шаг второй
Найдите и запустите TextEdit.
Вероятно, в вашей папке Applications (Приложе- Здесь TextEdit
ния) будет много программ. Прокручивай-
те список вниз до тех пор, пока не увидите
TextEdit. Для запуска программы дважды Ваши ярлыки папок
щелкните на ее значке.
46 глава 1
знакомство с html
Шаг четвертый
Поменяйте настройки в TextEdit.
По умолчанию в TextEdit выбран ре-
жим Rich Text (Сложный текст), это озна-
чает, что в ваш файл при сохранении
будут добавляться форматирование
и специальные символы. Однако вам
это не нужно. Поэтому необходимо Если здесь выбр
ан
поменять настройки в TextEdit, что- режим Rich Text
бы текст в вашем файле сохранялся (Сложный текст
), то
в обычном виде. Для этого в меню поменяйте наст
ройки.
TextEdit выберите подменю Preferences
(Настройки).
Шаг пятый
Установите режим
Plain Text (Обычный текст).
В окне Preferences (Настройки) сделайте
следующее.
Во-первых, выберите на вкладке New
Document (Создание документа) в каче-
стве используемого по умолчанию ре-
жим Plain Text (Обычный текст).
Во-вторых, убедитесь, что на вкладке
Open and Save (Открытие и сохранение)
установлен флажок Ignore rich text commands in
HTML files (Игнорировать команды услож-
нения текста в HTML-файлах).
И последнее, убедитесь, что снят фла-
жок Add .txt extension to plain text files (Добавлять
расширение .txt к файлам с обычным
текстом). Вот и все; щелкните на крас-
ной кнопке в левом верхнем углу, что-
бы закрыть диалоговое окно Preferences
(Настройки).
Шаг шестой
Закройте программу и откройте заново. Обратите вним
ание, что
Сейчас, выбрав в TextEdit меню пункт Quit меню форматир
ования
(Выход), выйдите из программы TextEdit исчезло. Это оз
начает,
и потом заново ее запустите. На этот раз что вы работае
те в ре-
вверху не будет причудливых меню фор- жиме обычного
текста.
матирования. Можно приступать к созда-
нию HTML-файлов.
дальше 47
создание html в windows
Шаг первый
Откройте меню Start (Пуск) и найдите программу Notepad (Блокнот).
Программа Notepad (Блокнот) находится в стандартных программах.
Самый простой способ туда попасть — открыть меню Start (Пуск), за-
тем выбрать All ProgramsAccessories (Все программыСтандартные). Здесь
в списке вы найдете программу Notepad (Блокнот).
48 глава 1
знакомство с html
Шаг второй
Откройте Notepad (Блокнот).
Выбрав в папке Accessories (Стандартные)
программу Notepad (Блокнот), щелкните
на ней кнопкой мыши. Откроется пустое
окно, в котором вы можете начать наби-
рать HTML-код.
Но рекомендуемый.
дальше 49
редакторы и html
часто
Задаваемые
вопросы
В: Почему нужно использовать простой текстовый редак- В: У меня есть текстовый редактор, но я не знаю, какой
тор? Неужели не существует мощных сервисных программ браузер нужно использовать. Их так много: Internet Explorer,
наподобие Dreamweaver и Expression Web для создания Firefox, Chrome, Opera, Safari. Что делать?
веб-страниц?
50 глава 1
знакомство с html
ацию
Печатайте информ
с салфетки так.
Mac
Windows
дальше 51
сохранение вашего html
Ñîõðàíåíèå ðàáîòû
После того как вы перенесли информацию о напитках с салфетки в текстовый редак-
тор, нужно сохранить работу в файле под названием index.html. Перед тем как это
сделать, создайте папку под названием starbuzz, чтобы хранить в ней файлы для сайта кафе.
Чтобы выполнить это, выберите в меню File (Файл) пункт Save (Сохранить), в результате
чего откроется окно Save As (Сохранить как). Рассмотрим, как это сделать.
обы
Щелкните здесь, чт Windows
у.
1 Создайте папку starbuzz для создать новую папк
хранения всех файлов, имеющих
отношение к кафе Starbuzz. Это
делается с помощью кнопки New
Folder (Новая папка).
Создайте Сохраните
новую папку
Сохраните файл.
52 глава 1
знакомство с html
Mac
и выберите
Найдите свой файл
й мыши
его, щелкнув кнопко
м нажав
на его значке и зате
рыть).
кнопку Open (Отк
дальше 53
тестируем ваш html
Во многих Mac
операционных
системах и браузерах вы можете
открыть HTML-файл двойным
щелчком кнопки мыши или
перетаскиванием на значок
браузера. Это намного
проще.
54 глава 1
знакомство с html
Развлечения с магнитами
Итак, давайте добавим структуру…
Ваша задача — структурировать текст с салфетки Starbuzz. Используйте
магниты для холодильника (ищите их внизу этой страницы) для разметки
текста таким образом, чтобы показать, какая его часть является заголов-
ком, какая — подзаголовком и где начинается новый абзац. Кое-что мы
сделали сами, чтобы вам было немного проще начать. Учтите, что для
этой работы вам не понадобятся все магниты. Некоторые из них останутся
незадействованными.
Капучино, $1,89
Смесь эспрессо и кипяченого молока с добавлением пены.
Чай, $1,85
Ароматный напиток из черного чая, специй, молока
и меда.
<p> /p>
>> </h2>>
1 <p> <</p>
>> </h1 1 <h2> </h </p>
<hh11 </h <h2> </h2>
/h2> <p>
< > </h1>
/h1>
<h1 <h2>
Используйте
е
Используйте Используйте Используйт этот магнит,
т,
этот те
этот магнит, этот магни чтобы
уйте Используй
магнит, Использ ит,
чтобы чтобы пометить
агнит, этот магн
чтобы этот м пометить пометить конец абзаца.
чтобы ца.
пометить чтобы ь
конец начало абза
начало помети
ть пометит подзаголовка.
головка. начало
заголовка. конец за ка.
подзаголов
дальше 55
ваша первая html-разметка
Поздравляем!
-й Вы только что написали свой
первый HTML-код.
Возможно, это напоминало наклеивание магнитов на хо-
лодильник, но на самом деле вы делали разметку текста
с помощью HTML. Только, как вы поняли, мы говорили
о магнитах, а имели в виду теги.
Посмотрите на разметку, приведенную ниже, и сравните ее со своими
магнитами с предыдущей страницы.
ют-
h1› использу
Теги ‹h1› и ‹/ а. Весь
ния заголовк
ся для выделе ов —
ри этих тег
текст внут
заголовок.
<h2>Чай, $1,85</h2>
<p>Ароматный напиток из черного чая,
специй, молока и меда.</p>
Заметьте, что не
обязательно указ
вать теги в одно ы-
й строке. Вы може
вставлять между т е
ними столько тек
сколько хотите. ста,
56 глава 1
знакомство с html
<body>
<h1>Напитки кафе Starbuzz</h1>
<h2>Домашняя смесь, $1,49</h2>
<p>Мягкая, нетерпкая смесь различных сортов кофе из
Мексики, Боливии и Гватемалы.</p>
Основная часть
<h2>Кофе мокко, $2,35</h2> страницы состоит
<p>Эспрессо, кипяченое молоко и шоколадный сироп.</p> из тегов ‹body›
и ‹/body› и всего,
что находится
<h2>Капучино, $1,89</h2>
между ними.
<p>Смесь эспрессо и кипяченого молока с добавлением
пены.</p>
<h2>Чай, $1,85</h2>
<p>Ароматный напиток из черного чая, специй, молока
и меда.</p>
</body>
</html> Отделяйте
Основная часть содержит всю название от
информацию и структуру основной части
веб-
страницы, которую вы вид страницы, когда
ите
в браузере. пишете код.
дальше 57
еще тест с разметкой
Заметьте,
l,
ть файл index.htm что появилось
Вы можете обнови
т меню Open File заглавие, которое
снова выбрав пунк ку
или используя кноп вы указали в теге
(Открыть файл)
зере. ‹head›.
обновления в брау
ит
Сейчас все выгляд
получше. Бр ау зе р
теги
интерпретировал
ни е
и создал изображе
торое
для страницы, ко
более
стало не только
ов ан ны м,
структурир
ел ьн ым.
но и более читаб
Здорово!
58 глава 1
знакомство с html
Ðàçäåëåíèå òåãîâ
Итак, вы уже немного знакомы с разметкой стра-
ницы, так давайте присмотримся и разберемся, как
на самом деле работают теги…
ий
Обычно вы ставите теги
вокруг какой-то Закрывающ
т
части текста. Наприм
ер, мы используем тег завершае
нашем
теги, чтобы сказать бра
узеру, что часть заголовок; в
Starbuzz» — это ег
текста «Напитки кафе примере т
за ве р шает
заголовок первого уровня. ‹/h1›
1›.
заголовок ‹h
ае те, что
Вы поним
Вот открывающий тег, ю-
это закрыва
который начинает заголовок. ак
щий тег, т
ид ет после
как он
ог о и перед
содержим
/».
» указано «
<h1> Напитки кафе Starbuzz </h1> «h1 ю ие
щ
Все закрыва
жат
теги содер
/» .
символ «
Помните:
Элемент = открывающий тег + содержимое +
+ закрывающий тег
дальше 59
элементы и соответственные теги
часто
Задаваемые
вопросы
В: Итак, соответственные теги не обя- В: Я заметил, что в некоторых HTML- О: Класс, тонкое замечание! Существуют
зательно должны быть расположены на кодах открывающему тегу не ставится такие элементы, которые используют сокра-
одной строке? в соответствие закрывающий. щенную форму записи только с одним тегом.
Пока закиньте это в дальний уголок своего
О: Нет. Помните, что браузер не обращает О: Вообще подразумевается, что теги долж- сознания, а мы вернемся к этому в следу-
внимания на символы табуляции, абзаца ны быть соответственными. Браузеры доста- ющих главах.
и пробелы, поэтому ваши теги могут начи- точно хорошо выполняют работу по распозна-
наться и заканчиваться где угодно, на одной ванию того, что вы имели в виду, даже если В: Элемент — это открывающий тег +
написали HTML-код неправильно. Кроме того, + содержимое + закрывающий тег, а может
строке или даже на разных строках. Просто
в наши дни есть множество средств, помога-
убедитесь, то первым идет открывающий ли один тег находиться внутри другого,
ющих написать код без ошибок. Существует
тег, как <h2>, а вторым — закрывающий тег, как «шапка» и основная часть находятся
много сервисных программ, проверяющих ваш
как </h2>. внутри тега <html>?
код перед тем, как вы поместите страницу
В: Почему в закрывающих тегах исполь- в веб-сервер и весь мир сможет ее увидеть.
Однако если вы будете нервничать, то никог-
О: Да, HTML-теги часто «вложены» таким
зуется символ «/»? да не сможете достичь в HTML совершенства, образом. Если подумать, то для HTML-страниц
естественно иметь основную часть, состоя-
О: Этот символ в закрывающих тегах помо- так что успокойтесь и просто возьмите себе
в привычку всегда ставить в соответствие щую из абзацев и других элементов. Поэтому
гает и вам, и браузеру понять, где заканчи- открывающим тегам закрывающие. одни HTML-элементы содержат другие вну-
вается отдельный кусок структурированного три своих тегов. Мы подробно разберем это
кода. Если бы не это, то закрывающий тег В: Хорошо, а что это за тег <img src="drinks. в следующих главах, а пока просто обратите
выглядел бы точно так же, как открывающий, gif"> в примере про гостевую? Вы забыли внимание, как элементы на веб-странице свя-
верно? закрывающий тег? заны между собой.
Мозговой
штурм
60 глава 1
знакомство с html
а
Основная задач
кафе Starbuzz
ас
Обеспечить в
м ы м
необходи
ко еина
ф
количеством
ания
для поддерж
нуса.
жизненного то
те это.
Просто выпей
дальше 61
использование css для оформления веб-страниц
62 глава 1
знакомство с html
<h2>Капучино, $1,89</h2>
<p>Смесь эспрессо и кипяченого молока с добавлением пены.</p>
<h2>Чай, $1,85</h2>
<p>Ароматный напиток из черного чая, специй, молока и меда.</p>
</body>
</html> часто
Задаваемые
вопросы
В: Элемент может иметь атрибут? Что это значит? В: Почему нужно задавать тип стиля "text/css" в качестве
атрибута? Существуют ли другие виды стиля?
О: С помощью атрибутов вы можете снабжать элемент до-
полнительной информацией. Например, если мы говорим об О: Одно время HTML-разработчики полагали, что появятся
элементе <style>, то атрибут позволяет уточнить, какой именно и другие стили, но, как оказалось, с тех пор все образумились, и вы
стиль имеется в виду. Вы еще познакомитесь с множеством других можете просто использовать <style> без атрибута – всем браузе-
атрибутов для различных элементов; просто запомните, что они ром будет понятно, что вы имеете в виду CSS. Такое положение
несут дополнительную информацию об элементе. вещей нас не радует; мы с нетерпением ждем появления стиля
<style type="50sKitsch">.
дальше 63
добавление элемента стиля
<body>
<h1>Напитки кафе Starbuzz</h1>
<h2>Капучино, $1,89</h2>
<p>Смесь эспрессо и кипяченого молока с добавлением пены.</p>
<h2>Чай, $1,85</h2>
<p>Ароматный напиток из черного чая, специй, молока и меда.</p>
</body>
</html>
64 глава 1
знакомство с html
ого
Вокруг содержим
илась
страницы появ
граница.
Поле
Мы используем разные
шрифты для более
четкого изображения.
дальше 65
познакомимся с css поближе
часто
Задаваемые
вопросы
В: CSS и HTML выглядят абсолютно каждый язык хорош именно в том, для чего пред- В: Что это за body перед CSS? Что оно
по-разному. Зачем нужны два языка? назначен. В результате легче выучить их оба, значит?
Просто для того, чтобы мне нужно было чтобы использовать каждый по назначению, а не
больше выучить, так? применять один язык для обеих задач. О: Слово body в CSS означает, что весь
код между { и } применяется к содержимому
О: Вы совершенно правы в том, что HTML В: Мне кажется, что #d2b48c не похоже HTML-элемента <body>. Итак, когда вы уста-
и CSS — абсолютно разные языки, но это по- на цвет. Как это может означать желто-ко- навливаете шрифт sans-serif, вы говорите,
тому, что они предназначены для абсолютно ричневый цвет? что по умолчанию он будет использоваться
разных целей. Точно так же, как вы не станете для основной части веб-страницы.
использовать английский язык для подведе- О: Существует два способа задания цвета
ния баланса на чековой книжке или язык ма- в CSS. Самый известный основан на приме- В скором времени мы углубимся во множе-
тематики для написания стихотворения, вы не нении шестнадцатеричного кода, которым ство других деталей работы CSS, поэтому
будете использовать CSS для создания струк- и является значение #d2b48c. На самом деле продолжайте читать. Далее вы узнаете, что
туры или HTML для создания стиля, потому это желто-коричневый цвет. Пока просто сми- есть много особенностей применения этих
что это не то, для чего они были разработаны. ритесь с этим, а чуть позже мы подробно правил, и, пользуясь этим, сможете создавать
Это значит, что вам нужно выучить оба язы- расскажем вам, как #d2b48c может быть красивые и стильные страницы.
ка. И в процессе обучения вы поймете, что цветом.
66 глава 1
знакомство с html
После того как вы придали стиль странице Starbuzz index.html, продолжайте дви-
гаться вперед и создайте такой же стиль для страницы mission.html.
4 Убедитесь, что ваша страница-задание выглядит так же, как наша (см. в конце
главы).
дальше 67
содержимое и стиль
HTML CSS
Привет, CSS! Я рад, что ты здесь, потому что
я хочу прекратить кое-какие сплетни про нас.
68 глава 1
знакомство с html
HTML CSS
дальше 69
обзор основ html и css
ÊËÞ×ÅÂÛÅ
ÌÎÌÅÍÒÛ
HTML и CSS — языки, которые мы используем Чтобы закрывающие теги отличались от откры-
для создания веб-страниц. вающих, в них после левой угловой скобки перед
именем тега ставится символ «/».
Веб-серверы обслуживают и хранят веб-стра-
ницы, которые созданы с помощью HTML и CSS. В ваших страницах всегда должен присутство-
Браузеры извлекают страницы и визуализиру- вать элемент <html> с элементами <head>
ют их содержимое, основанное на HTML и CSS. и <body> внутри.
HTML — это аббревиатура HyperText Markup Информация о веб-странице входит в элемент
Language (язык гипертекстовой разметки). Этот <head>.
язык используется для структуризации веб-стра-
То, что вы добавляете внутрь элемента <body>,
ниц. вы видите в браузере.
CSS — это аббревиатура Cascading Style Sheets. Большинство служебных символов (символы
Он используется для управления отображением табуляции, абзаца, пробелы) игнорируются бра-
вашего HTML. узером, но вы можете использовать их, чтобы
Используя HTML, мы помечаем содержимое сделать HTML-код более читабельным.
тегами, чтобы придать ему структуру. Мы на- В HTML-код веб-страницы можно добавить CSS-
зываем соответствующие теги и их содержимое код, если поместить правила CSS внутрь элемен-
элементом. та <style>. Элемент <style> всегда должен
Элемент состоит из трех частей: открывающего находиться внутри элемента <head>.
тега, содержимого и закрывающего тега. Но есть С помощью CSS вы определяете свойства стиля
несколько элементов, например <img>, кото- элементов HTML.
рые являются исключением из этого правила.
Открывающие теги могут иметь атрибуты.
Мы уже видели один: type.
70 глава 1
знакомство с html
сь
bu
zz Ка
а с и б о , ч т о согласилиостая
С п р
м нужна п
фе
Star
вьте
помочь! Наица (смотрите
Доба веб-стран оторой будут
Star
овок
ниже), на к ены и описания
фе
загол .
buz а
ницы ц
фе названияо,в.
zК
стра
итки ка
Нап напитк
zz
S tar bu
9
смесь, $1,4
Домашняя х
ь различны
к
олово
рпкая смес
г
Подза е
Мягкая, нет , Боливии
т о в к о ф е из Мексики
сор
лы.
ок и Гватема
голов Абзац
ы
подза
ругой
Д о, $2,35
Кофе мокк
олоко
с п р е с с о , к ипяченое м
Э
ый сироп.
и шоколадн
е
Больш о в к о в
$1,89
Капучино,
гол
подза
ченого молока
ессо и кипя
Смесь эспр
ем пены.
с добавлени
дальше 71
решение упражнений
<h2> Д
Домашняя смесь, $1,49 </h2>
<p> М
Мягкая, нетерпкая смесь различных сортов кофе из
М
Мексики, Боливии и Гватемалы. </p>
<h2> Ко
К 5 </h2>
Кофе мокко, $2,35
<p> Эс
Эспрессо, молоко и шоколадный сироп. </p>
ное моло
кипяченое
<h2> Ка
а
Капучино, $1,89 </h2>
<p> См
м
Смесь . </p>
эспрессо и кипяченого молока с добавлением пены.
<h2> Ча
Чай, $1,85 </h2>
<p> А
Ароматный напиток из черного чая, специй, молока
и меда. </p>
</h1>>
>> 1
<hh11 </h
< </h1>
/h1>
<h1>
ты
Неиспользованные магни
72 глава 1
знакомство с html
<html>
<head>
</head>
<body>
те это. </html>
Просто выпей
Это HTML-код.
Это HTML,
отображае
в браузере. мый
дальше 73
решение упражнений
<html>
<head>
<title>Основная задача кафе Starbuzz</title>
<style type=”text/css”>
Вот CSS в стра- body {
нице с постановкой background-color: #d2b48c;
задачи. margin-left: 20%;
margin-right: 20%;
border: 2px dotted black;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Основная задача кафе Starbuzz</h1>
<p>Обеспечить вас необходимым количеством кофеина для поддержания
жизненного тонуса.</p>
<p>Просто выпейте это.</p>
</body>
</html>
ствует
Теперь стиль соответ
Sta rbu zz.
основной странице
Хотя вы только один раз взглянули на CSS, вы уже видели кое-что из того, на что он способен. Поставьте в соответствие
каждой строке с определением стиля то, что она делает.
74 глава 1
2 идем дальше – используем гипертекст
Знакомство с гипертекстом
Кто-то сказал «гипертекст»? Что это? О, только чистая основа Сети. В главе 1 мы приве-
ли основные сведения о языке HTML, и, надеемся, вы пришли к выводу, что это хороший
язык для разметки текста, используемый для описания структуры веб-страниц. Сейчас
наша задача — разобраться с гипертекстом, который позволит освободиться от оди-
ночных страниц и ссылаться на другие страницы. В процессе этого мы познакомимся
с новым элементом <a> и поймем, какая превосходная штука — взаимосвязь страниц.
Итак, пристегните ремни безопасности, вы вот-вот начнете изучать гипертекст.
совершенствуем гостевую head first
Вот новая
и усовершенствованная
страница.
ет
азыва
т ки» ук ом
а «на
пи спи к
с
Ссылк с п о лным
у
раниц итко
в.
на ст и х нап
аю щ
Мы добави- освеж
ли ссылки на две
новые страницы:
одну для напит-
ков, другую —
для указателей.
тели»
Ссылка «указа
приводит на
цу
HTML-страни
и.
с указателям
directions.html
76 глава 2
идем дальше — используем гипертекст
ржит
Страница соде
ых
список полезн
щ их на питков.
освежаю
ь,
Не стесняйтес
ин перед
отведайте од
ол ить
ж
тем, как прод
работу.
Создание новой
и усовершенствованной
гостевой в три этапа...
Переделаем оригинальную страницу
гостевой Head First так, чтобы она ссы-
лалась на две новые страницы.
Готово
к употреблению
дальше 77
посмотрим на исходные файлы
<html>
.
.
вы
Папку lounge
.
</html>
есь,
найдете зд lounge.html
ых
в своих исходн chapter2
Два новых файла,
файлах.
<html>
.
.
. уже приготовленных
</html>
для вас. Взгляните
elixir.html на них — вы уже
Все файлы lounge
достаточно знаете,
гостевой <html>
чтобы их понять.
.
.
находятся .
</html>
в этой
directions.html
ti ht
папке.
green.jpg
blue.jpg
Гостевая Head First увеличивается. Как вы думаете, хорошо ли для организации сайта
держать все его файлы в одной папке? Что можно придумать вместо этого?
78 глава 2
идем дальше — используем гипертекст
дальше 79
как создавать ссылки
Отлично,
я загрузил новую страницу
За сценой
гостевой, пощелкал по
ссылкам, и все правильно
сработало. Но я хочу убедиться,
что понимаю, как работает
HTML.
×òî äåëàëè ìû
1 Давайте подробно разберем процедуру создания HTML-ссылок. В первую
очередь нам нужно поместить текст, который мы сделаем ссылкой,
в элемент <a>. Это делается таким образом:
<a>напитки</a> <a>указатели</a>
Элемент тве
для созда
‹a› прим
еняется Содержимое элемента ‹a› выступает в качес
ражается
другую с
ния ссыл
к и на метки для ссылки. В браузере метка отоб
траницу та, чтоб ы показ ать вам,
. в виде подчеркнутого текс
ой мыш и.
что можно щелкнуть на нем кнопк
<a href="directions.html">указатели</a>
80 глава 2
идем дальше — используем гипертекст
<a href="elixir.html">напитки</a>
И «напитки»,
тся
и «указатели» находя
между откры ваю щи м
и ‹a›,
и закрывающим тегам
ся
поэтому они становят
ми,
на веб-страницах ссылка
на которых можно
ши.
щелкнуть кнопкой мы
<a href="directions.html">указатели</a>
дальше 81
как работают ссылки
За сценой
либо
Пользователь щелкает
и» , либ о...
на ссылке «напитк
ирает
Когда пользователь выб
узер Если была выбрана ссылка
ссылку «указатели», бра
риб ут а href — «напитки», браузер находит
находит значен ие ат
dir ect ion s.html... значение elixir.html...
в данном случае это
<a href="elixir.html">напитки</a>
...и отображает
соотв етствующую
страницу.
<a href="directions.html">указатели</a>
82 глава 2
идем дальше — используем гипертекст
Правила
безопасности Äåëàéòå òàê (îïòèìàëüíûé âàðèàíò)
<a href="top10.html">Отличные фильмы</a>
чки
е кавы
Атрибуты всегда пишутся одинаково: сначала двойны
идет имя атрибута, затем знак равенства, затем знак значение атрибута
значение атрибута, взятое в двойные кавычки. имя равенства двойные
Возможно, в Сети вы увидите небрежно атрибута кавычки
написанные HTML-страницы, в которых
пропущены эти двойные кавычки, но не
ленитесь ставить их сами. Ваша небрежность
Íå äåëàéòå òàê
может доставить вам массу проблем (далее вы <a href=top10.html>Отличные фильмы</a>
убедитесь в этом сами). Значение атрибута не взято в двойные
кавычки.
дальше 83
атрибуты и элементы
часто
Задаваемые
вопросы
В: Могу ли я просто выдумать новый атрибут для элемента
HTML?
84 глава 2
идем дальше — используем гипертекст
Уязвимость
атрибутов
Интервью, взятое на этой неделе.
Признания атрибута href
Head First: Добро пожаловать, Href. Очень приятно брать интервью у такого важ-
ного атрибута, как вы.
Href: Спасибо. Я очень рад, что освободился от создания ссылок и нахожусь здесь;
эта работа может изнурить любой атрибут. Догадываетесь, кто говорит браузеру, куда
идти дальше, каждый раз, как только кто-то щелкнет на ссылке? Это я.
Head First: Мы рады, что вы выделили время для нас в своем очень плотном графике
работы. Может быть, расскажете нам всё с самого начала? Что значит быть атрибутом?
Href: Конечно. Атрибут используется, чтобы видоизменить элемент. Нет ничего
проще, чем окружить кусок текста парочкой тегов <a>. Например, для выражения
«Запишись сейчас!» это будет выглядеть так: <a>Запишись сейчас!</a>. Но без
меня, атрибута href, вы не сможете указать элементу <a> место назначения ссылки.
Head First: Пока понятно…
Href: ...благодаря атрибуту вы можете снабдить элемент дополнительной информаци-
ей. В моем случае это информация о том, куда указывает ссылка: <a href="signup.
html">Запишись сейчас!</a>. Это означает, что элемент <a>, отображаемый
на странице меткой «Запишись сейчас!», ссылается на страницу signup.html. В на-
стоящее время в мире есть множество других атрибутов, но только меня используют
с элементом <a>, чтобы показать, куда он ссылается
Head First: Здорово. Но сейчас мы должны спросить и надеемся, что это вас не
оскорбит: что означает ваше имя?
Href: Это имя старого интернет-семейства. Оно означает «гипертекстовая ссылка»,
но друзья сокращенно называют меня просто Href.
Head First: А что это?
Href: Гипертекстовая ссылка — это просто другое название ресурса, который нахо-
дится в Интернете или в вашем компьютере. Обычно ресурс — это другая страница,
но я также могу указывать на PDF-документы… и на все остальное.
Head First: Интересно. Наши читатели до сих пор успели познакомиться только со
ссылками на их собственные страницы. А как ссылаться на другие страницы и ре-
сурсы в Сети?
Href: Эй! Я должен снова возвращаться к работе, вся Сеть не может без меня нор-
мально работать. Более того, разве это не ваша работа — учить этому читателей?
Head First: Хорошо, хорошо, да, мы вернемся к этому чуть позже. Спасибо, что
уделили нам время, Href.
дальше 85
ссылаемся назад на главную страницу
86 глава 2
идем дальше — используем гипертекст
Резюме cv.html
Посмотри на mini-cooper.html
мою Мини
Давайте
поиграем <a href="millionaire.html"> </a>
часто
Задаваемые
вопросы
В: Я видел много страниц, в которых можно щелкнуть кнопкой В: Итак, я могу поместить что угодно между тегами <a>, и на этом
мыши на изображении, а не на тексте. Можно ли использовать можно будет щелкнуть кнопкой мыши? Скажем, целый абзац?
для этого элемент <a>?
О: Вы действительно можете поместить элемент <p> внутрь эле-
О: Да, если вы поместите элемент <img> между тегами <a>, то мента <a>, чтобы добавить целый параграф в качестве ссылки. Вы,
ваш рисунок станет такой же ссылкой, как и текст. Мы не будем по большей части, будете использовать текст или рисунки (или и то
подробно на этом останавливаться, но рисунки отлично работают и другое) внутри элемента <a>, но если вам потребуется добавить
в качестве ссылок. элемент <p> или <h1> в качестве ссылки, то это тоже будет возможно.
Какие теги могут быть использованы внутри других, — это совсем
другая тема, но не волнуйтесь, мы очень скоро к ней вернемся.
дальше 87
организуйте свой сайт с помощью папок
Íàâåäåíèå ïîðÿäêà
Перед тем как продолжить создавать HTML-страницы, нужно
привести все в порядок. До сих пор мы складывали все файлы
и изображения в одну папку. Далее вы узнаете, что даже не-
большими сайтами намного проще управлять, если разложить
веб-страницы, рисунки и другие ресурсы в различные папки.
Рассмотрим, что мы имеем сейчас:
Это три
<html>
.
. HTML-файла:
.
elixir.html
lounge
<html>
.
.
.
</html>
directions.html
На нее часто ссылаются как на корневую
папку сайта. Это означает, что
она является папкой верхнего уровня,
содержащей все элементы сайта.
green.jpg
blue.jpg
88 глава 2
идем дальше — используем гипертекст
й так
невой папко Мы оставим основную ст
Нашей кор lo u nge. раницу
ся папка lounge.html в папке lounge
и останет .
<html>
lounge .
.
.
</html>
lounge.html
green.jpg
g
<html> <html>
about
.
.
beverages .
. images blue.jpg
. .
</html> </html>
drinks.giff
directions.html elixir.html
дальше 89
пересматриваем и меняем ссылки
Òåõíè÷åñêèå òðóäíîñòè
Кажется, у нас появились кое-какие
проблемы с гостевой страницей после
приведения в порядок файлов и папок...
Некоторые ри
сунки
не отображаю
тся.
Обычно их назы
вают
«отсутствую
щими
изображениями»
.
ссылке
Если вы щелкнете кнопкой мыши на
, то увид ите,
«напитки» (или «указатели»)
:
что все стало выглядеть намного хуже
страница
появляется окно с сообщением, что
не может быть найдена.
90 глава 2
идем дальше — используем гипертекст
дальше 91
работаем с путями
Ïëàíèðîâàíèå ïóòåé
Что вы обычно делаете, когда планируете отдохнуть
с семьей и отправиться в путешествие? Вы достаете ельно
Хорошо, вы действит
карту и определяете путь к пункту назначения. При ами Google,
воспользуетесь карт
этом пути связаны с вашим нынешним месторасполо- здесь с нами!
жением: ведь если бы вы находились в другом городе, но пока поработайте
это были бы совершенно другие пути, верно?
Когда нужно выяснить относительный путь для ссы-
лок, все делается точно так же. Вы начинаете со стра- Существуют так
же другие типы
ницы, на которой расположена нужная ссылка, а затем путей. Мы вернем
определяете путь, проходя через все папки, пока не ся к этому
в следующих глав
найдете файл. ах.
Начнем
отсюда...
<html>
lounge .
.
.
</html>
lounge.html
green.jpg
g
<html> <html>
about
.
.
beverages .
. images blue.jpg
. .
</html> </html>
drinks.giff
directions.html elixirs.html
red.jpg lightblue.jpg
...и придем сюда.
92 глава 2
идем дальше — используем гипертекст
Сначала мы должны
опуститься в папку
beverages.
<html>
lounge .
.
.
</html>
lounge.html
g
green.jpg
<html> <html>
about
.
.
beverages .
. images blue.jpg
. .
</html> </html>
drinks.gif
directions.html elixir.html
red.jpg lightblue.jpg
beverages / elixir.html
<a href="beverages/elixir.html">напитки</a>
дальше 93
небольшое упражнение с путями
<html>
lounge .
.
.
</html>
lounge.html
green.jpg
g
<html> <html>
about
.
.
beverages .
. images blue.jpg
. .
</html> </html>
drinks.giff
directions.html elixir.html
red.jpg lightblue.jpg
ЕТ
Е Т В А Ш О ТВ
ЗД Е С Ь Б УД
94 глава 2
идем дальше — используем гипертекст
directions.html, </html>
Начнем отсюда...
lounge .
about
.
.
.
. images blue.jpg
. .
</html> </html>
drinks.giff
directions.html elixir.html
дальше 95
формируем href
Выделяем каждую
мся на
подниме
Сначала . Как
часть пути с помощью В конце пишем
ку вверх
одну пап омощью
символа «/». имя файла.
ать? С п
это сдел но, это
«..». Вер
символов
и.
две точк
.. / lounge.html
96 глава 2
идем дальше — используем гипертекст
часто
Задаваемые
вопросы
В: Что такое родительская папка? В: А что делать, если нужно подняться В: А как насчет обратного направления?
Если у меня есть папка под названием на две, а не на одну папку вверх? Есть ли какие-нибудь ограничения в том,
«Яблоки» внутри папки «Фрукты», будет насколько глубоко я могу опуститься
ли папка «Фрукты» родительской для О: Символы «..» можно использовать для вниз?
папки «Яблоки»? каждой родительской папки, в которую вы
хотите войти. Каждый раз, используя «..», О: Вы можете опуститься вниз ровно на
О: Да, точно. Папки (их еще называют дирек- вы поднимаетесь на одну папку вверх. Итак, столько папок, сколько создали. Если вы
ториями или каталогами) часто описываются если вы хотите подняться на две папки, вве- создали папку на 10 уровней ниже корневой,
с помощью терминов наследственных свя- дите «../..». Как видите, в этом случае необхо- то можете указать путь, который приведет
зей. Рассмотрим это, используя ваш пример. димо отделять каждую часть пути с помощью вас вниз на 10 папок. Но мы не рекомендуем
Папка «Фрукты» — это родитель каталога символа «/». Не забывайте делать это, так этого делать: если у вас так много уровней,
«Яблоки», а каталог «Яблоки» — ребенок как браузер не поймет, что означает «....»! это, скорее всего, означает, что организация
(дочерний каталог) папки «Фрукты». Если бы вашего сайта слишком сложна!
у вас была еще папка «Груши», тоже ребенок В: Когда я поднимусь на две папки К тому же некоторые браузеры налагают
папки «Фрукты», то она была бы сестрой ка- вверх, как мне сказать браузеру, где ис- ограничение на количество символов в пути.
талога «Яблоки». Просто проводите аналогии кать файл? Спецификация предостерегает от превыше-
с генеалогическим древом. ния лимита в 255 символов, хотя современ-
О: Добавьте к символам «../..» имя файла. ные браузеры поддерживают более длинные
В: Хорошо, с родительскими папками Так, чтобы сослаться на файл fruit.html, кото- пути. Если ваш сайт слишком большой, то не
понятно, но что это за «..»? рый находится в папке двумя уровнями выше, забывайте об этом ограничении.
нужно написать ../../fruit.html. Вы, наверное,
О: Если вам нужно сказать браузеру, что ожидаете, что мы назовем папку, подразу- В: Моя операционная система в каче-
файл, на который вы ссылаетесь, находится меваемую под символами «../..», «папкой-ба- стве разделителя папок использует сим-
в родительской папке, используйте симво- бушкой», но обычно вместо этого мы говорим вол «\»; должен ли я тоже использовать
лы «..». Они как бы говорят: «Двигайтесь «родитель родительской папки». его вместо символа «/»?
вверх, в родительскую папку». Другими сло-
вами, так браузер обратится к родительской В: Есть ли какие-нибудь ограничения О: Нет; для веб-страниц всегда используется
папке. В нашем примере мы хотели попасть в том, насколько высоко я могу под- символ «/» (прямой слеш). Не используйте «\»
из файла directions.html, который располага- няться? (обратный слеш). В разных операционных си-
ется в папке about, в файл lounge.html, кото- стемах применяются разные разделители (на-
рый находится в папке lounge, родительской О: Вы можете подниматься до тех пор, пока пример, Windows использует «\» вместо «/»),
для about. Поэтому нам нужно было сказать не придете в корневую папку своего сайта. но когда речь идет о Сети, мы выбираем об-
браузеру смотреть на одну папку выше. В нашем примере корневой папкой была щий для всех разделитель и привязываемся
Использование символов «..» — это способ, папка lounge. Иными словами, вы не можете к нему. Неважно, какая у вас операционная
которым мы говорим браузеру идти ВВЕРХ. подняться выше этой папки. система, всегда используйте символ «/», ука-
зывая путь в HTML.
Мозговой
штурм
Ваша очередь: прорисуйте относительный путь от файла elixir.html
к файлу lounge.html со ссылки Назад в гостевую. Чем он отличается от такой
же ссылки в файле directions.html?
Ответ: Ничем, он абсолютно такой же.
дальше 97
относительные пути и изображения
<img src="drinks.gif">
Это относительный путь, который
говорит браузеру, где расположен рисунок.
Мы указали его точно так же, как
в атрибуте href элемента ‹a›.
в ges, lounge .
папку ima
.
попасть в
.
</html>
е.
енную ниж
располож lounge.html
green.jpg
g
<html> <html>
about
.
.
beverages .
. images blue.jpg
. .
</html> </html>
drinks.giff
directions.html elixir.html
файл drinks.gif.
...и найдем
путь здесь.
<img src="images/drinks.gif">
98 глава 2
идем дальше — используем гипертекст
ЗАДАЧА: мы находимся
в папке beverages, а нам (2) Затем идем вн
из,
нужно попасть в папку в папку images.
images.
<html>
lounge .
.
.
</html>
lounge.html
green.jpg
g
<html> <html> ...и найдем
about
.
beverages .
images blue.jpg
путь здесь.
. .
. .
</html> </html>
drinks.giff
directions.html elixir.html
red.jpg lightblue.jpg
вверх,
(1) Итак, мы поднимаемся Начнем
в родительскую пап ку loun ge. отсюда...
Помните, что в пути это
. (3) И наконец, находим
будет обозначаться как «..»
файл red.jpg.
папке.
.. / images / red.jpg
<img src="../images/red.jpg">
дальше 99
привязываем изображения к относительным ссылкам
Вы сделали это!
Сейчас все приведено в систему Далее мы будем
и ссылки работают. Самое поднимать сайт на
время отпраздновать это. качественно новый
Присоединяйтесь к нам и выпейте уровень.
охлажденного зеленого чая.
100 глава 2
идем дальше — используем гипертекст
ÊËÞ×ÅÂÛÅ
ÌÎÌÅÍÒÛ
Если вы хотите создать ссылку с од- Используйте символы «..», чтобы со-
ной страницы на другую, используйте слаться на файл, который находится
элемент <a>. в родительской папке (по отношению
Атрибут href элемента <a> указывает к папке, где находится файл, с которого
на целевую страницу ссылки. вы ссылаетесь).
Содержимое элемента <a> — метка Символы «..» означают «родительская
ссылки. Метка — это то, что мы видим папка».
на веб-странице. По умолчанию она Не забывайте разделять части пути
подчеркнута. Это говорит о том, что на символом «/» (прямой слеш).
ней можно щелкнуть кнопкой мыши.
Если путь к рисунку указан неверно,
В качестве метки ссылки может быть
вы увидите «отсутствующее изобра-
использован текст или изображение.
жение» на веб-странице.
Когда вы щелкаете кнопкой мыши на
Не используйте пробелы в именах, ког-
ссылке, браузер загружает веб-страни-
цу, которая указана в значении атри- да даете их файлам и папкам вашего
бута href. сайта.
дальше 101
новое задание
Большая задача
по относительным путям
Это ваш шанс проверить свои навыки в области относительных путей. У нас есть сайт для
100 альбомов, расположенных в папке music. В этой папке находятся HTML-файлы, другие
папки и рисунки. Ваша задача — определить необходимые относительные ссылки так,
чтобы было можно сослаться с данной веб-страницы на другие веб-страницы и файлы.
На этой странице вы найдете структуру сайта, а на следующей — задания для про-
верки ваших навыков. Ваша задача — указать правильный относительный путь для
каждого исходного и целевого файла. Если вы справитесь с этим, можете считать себя
настоящим чемпионом в области относительных путей.
Удачи!
рисовать
Можете ии
<html>
изображен
.
прямо на
та, чтобы
.
этого сай
.
</html>
пути.
music
top100.html указать
<html>
.
.
.
</html>
genres images
logo.gif
genres.html
<html>
.
.
.
</html>
darkside.gif floyd.gif
pinkfloyd.html
rock cdcovers artists
<html>
.
.
.
</html>
xandy.gif chris.gif
coldplay.html
102 глава 2
идем дальше — используем гипертекст
00.html
Файл top1
Пример находится
в папке
этому
<html>
genres/genres.html <html>
music, по л
йти фай
. .
чтобы на
. .
. .
l, м ы
genres.htm
<html> <html>
top100.html logo.gif
Раунд второй
<html>
.
.
.
<html>
logo.gif
genres.html
Раунд третий
<html> <html>
. .
. .
. .
<html> <html>
top100.html pinkfloyd.html
Бонусный раунд
<html>
.
.
.
<html>
coldplay.html chris.gif
дальше 103
решение упражнений
<html>
<head>
<title>Напитки гостевой Head First</title>
</head>
<body>
<h1>Наши напитки</h1>
104 глава 2
идем дальше — используем гипертекст
Решение упражнений
Горячо или
нет? hot.html <a href="hot.html">Горячо или нет?</a>
candy.html
Вкусная candy.html <a href=" ">Вкусная конфета</a>
конфета
lounge.html
green.jpg
g
<html> <html>
about
.
.
beverages .
. images blue.jpg
. .
</html> </html>
drinks.gif
directions.html elixir.html
red.jpg lightblue.jpg
directions.html <a href=" about/directions.html ">указатели</a>
ОТВЕТ
ЭТО И ЕСТЬ
дальше 105
решение упражнений
00.html
Файл top1 usic,
Раунд первый в папке m
находится а й ти
, чтобы н
поэтому мы
res.html,
файл gen
<html>
. images/logo.gif ь ся
пуст и т
должны о
.
.
enres.
<html>
logo.gif в папку g
top100.html
l
Файл genres.htm
из у, в папке
Раунд второй находится вн
чтобы
genres, поэтому,
найти logo.gif, мы
<html> ../images/logo.gif ься
должны поднят
.
.
.
ic, а затем
<html>
в папку mus
пку
genres.html
logo.gif опуститься в па
images.
ы
.html м
а й л а top100 r es,
Раунд третий От ф
ся в папк
у gen
е м
опуска и нахо
дим
<html>
тем в rock
<html> genres/rock/pinkfloyd.html . за l.
yd.htm
.
pinkflo
.
. .
. <html>
<html>
top100.html pinkfloyd.html
106
3 cтроительные блоки
Конструирование
Лучше давай
найдем парочку хороших
веб-страниц
работяг, Бетти. Здесь самая
настоящая стройка, и эти
веб-страницы очень быстро
разрастаются!
Дневник Тони
и
Скутер Тон
12
ля, 20 е Burm
a
14 ию знаков
в стил за-
США арочку «Если
в ы н е
т е ре по Яв и д е л п о р о г и :
ш и н ы, то
На с к у моем н а о б очине д е м и мо ма е —
здок на
пое Shave зжающ
и новени
к моих е по т
ер- и т е прое с . О дно мг е х о-
Дневни о м с кутер м ет
у т сбить
в а
п р е д еленн
о н
е н н о г Я о а .
собств А! они м ть…» машин
ии СШ нечнос аехала
ритор и беско бы на меня н
то
тел, ч 12
, 2012 а, 20
2 июня 20 авг
уст
твия!
тешес 200 м -
иль
оего пу отло-
р в ы й д е н ь м
о не ц с м о г
е п р о ехал 1 т е р ес
Пе а к - н
ер ю , что н о н у и отпра т а к, я уж екоторых
и
а т
в р И
Я не а в сто льку ал в н ла, шт
и т ь все дел с т ви е . Поско и побыв х : В а ла-Ва ти, штат
ж ше о еста
в путе ере, т ных м ик-Си Юта,
виться а скут Мэдж штат
а л с я ехать н н о г о вещей: ш и н гтон, ф у л ,
я собир собой м В а и о,
зять с он, iPo
d, Баунт т Колорад
м о г в е л е ф А йдахо, ш т а т - ор-
не овый т а дный Чанс, а, Тру ко.
толь к о с о т
еру и ш
о к о л Л э с т
ат А
р и з о н Мекси
ю к а м о е необ- , ш т а т Нью-
у са м Уай с, шт
цифров ько все ао Цзы
: куэнсе
ик. Тол л бы Л Консе
батонч ск аз а ь н ачи-
е. Как чу мил
ходимо в тыся у».
т е ш ествие г а к скутер
«Пу о г о ш а
с одн
нается
но прочитали
Убедитесь, что вниматель
и, они будут
обо всех приключениях Тон
ии всей главы.
описываться на протяжен
108 глава 3
cтроительные блоки
дальше 109
cоздание черновика
×åðíîâèê
Дневник Тони очень похож на веб-страницу. Все, что остает- Тони назвал свой дневник
«На ску-
ся сделать, — создать черновик для страницы, чтобы на ней тере по США», так дав
айте
содержались все записи из дневника, и составить план ее об- и поместим это в самый
щей структуры. Для каждого дня, когда Тони заносил запись верх
страницы в качестве наз
в дневник, он указывал заголовок в виде даты, иногда вставлял вания.
фотографию и кратко описывал, что произошло в этот день.
Давайте посмотрим на черновик…
110 глава 3
cтроительные блоки
Îò ÷åðíîâèêà ê ïëàíó
Теперь, когда у вас есть черновик страницы,
вы можете взять каждую ее часть и нари-
совать нечто похожее на план или схему
HTML-страницы...
Упражнение:
веб-конструирование
Вы уже определили основные архитектур-
ные области страницы, осталось лишь за-
крепить строительные материалы. Исполь-
зуйте элементы, приведенные ниже, чтобы
пометить каждую область. Не обязательно
использовать их все, так что не волнуйтесь,
если какие-то строительные материалы оста-
нутся неиспользованными. И не забудьте
при строительстве надеть свою защитную
каску.
h1
h1
h1
h2
p h2
p h2
p
h3
h3
img h3
img
img
h4
h4
a h4
a
a
h5
h5
h5
h6
h6
h6
дальше 111
переходим от плана к веб-странице
Îò ïëàíà ê âåá-ñòðàíèöå
Вы почти достигли цели. Вы создали план страницы
для Тони. Теперь осталось написать соответствующий
HTML-код, чтобы сформировать страницу и внести
в нее текст из дневника Тони.
Перед тем как приступить к работе, вспомните, что каж-
дая веб-страница должна начинаться с элемента <html> h1
и содержать элементы <head> и <body>.
p
h2
img
h2
img
112 глава 3
cтроительные блоки
нужны
е, что всегда
Не забывайт ‹title›
tml›,‹head›,
элементы ‹h
и ‹body›. Мы используем название
дневника в качестве названия
<html>
веб-страницы.
<head>
<title>Дневник моих поездок на моем собственном скутере по территории США!</title>
</head>
<body>
и описание
Заголовок
<h1>На скутере по США</h1> они.
<p> журнала Т
Дневник моих поездок на моем собственном скутере по территории США!
</p>
вок
заголо
<h2>20 августа, 2012</h2> к
рисуно
<img src="images/segway2.jpg"> н ие
опи с а
<p> Это последняя
Итак, я уже проехал 1200 миль и побывал в некоторых интересных запись Тони.
местах: Вала-Вала, штат Вашингтон, Мэджик-Сити, штат Айдахо,
Баунтифул, штат Юта, Лэст Чанс, штат Колорадо, Уай, штат
Аризона, Трут-ор-Консекуэнсес, штат Нью-Мексико.
</p>
вия!
ешест ль и по
-
его пут смог 00 ми
день мо ц хал 12 -
Первый о наконе орону , я уж
е прое тересн
ых ме
рю, чт ст Итак рых ин нгтон,
Я не ве ь все дела в ест вие. л в некото ат Ваши
т еш быва шт
отложи иться в пут ать на Вала-В
ала,
ат Ай
дахо,
ав ех стах: Чанс,
и отпр у я собирался - ик-Сит
и, шт а, Лэст
ьк ть с со Мэдж ат Ют Аризон
а,
Поскол мог взя сотовый фул, шт Уай, штат
е, то не ько Баунти до,
скутер о вещей: тол ка ме- Колора ес, штат
ог ую ат нс
бой мн , iPod, цифров чик. Только шт нсек уэ
он он ут -ор-Ко
ый бат Как ска-
Тр
телеф Мексик
о.
коладн е. Нью-
ру и шо необходимо вие
е ешест
все само о Цзы: «Пут ся с одно-
зал бы
Ла нает
у ми ль начи
в тыс яч еру» .
к скут
го шага
-
ошо вы
и т е , как хор о -
Посмот
р . Вы п
а с т раница
эт зобра-
глядит кст и и
л и т е
мести ни на
д н е в ника То
жения и
з рук-
т а е м ую и ст .
хорошо
ч и раницу
н н у ю в еб-ст
ова
турир
Фантастика! Это
выглядит великолепно;
мне не терпится добавить
еще пару записей на
страницу.
ит
Тони звон
с дороги…
114 глава 3
cтроительные блоки
и в конце первой
Проверьте это: у Тон
цитата. Это
записи есть небольшая
высказывания
его переделанная версия
вие в тысячу миль
Лао Цзы: «Путешест
га к скутеру».
начинается с одного ша
дальше 115
кавычки в вашем html
<html>
<head>
<title>Тест для цитаты</title> В этом HTML есть две цитаты...
</head>
<body>
<p>
Вы никогда не знаете, когда вам понадобится хорошая цитата,
как, например, <q>Быть или не быть</q> или <q>От судьбы не уйдешь</q>.
</p>
</body>
</html>
гом ‹q›
ывание открывающим те
Мы окружили каждое высказ йные
ьте, что мы не ставим дво
и закрывающим ‹/q›. Замет
ния.
кавычки вокруг высказыва
бражают
Не все браузеры ото
Будьте и вокр уг
двойные кавычк
ем ен та <q>.
осторожны! содержимого эл
е двойные кавычки
о, пот ом у что если вы поставит
Это не оче нь хор ош ы кавычек. Мы совету-
оры е бра узе ры отобразят ДВЕ пар ие
сами, то нек от рах, чтобы увидеть, как
ь <q> в разных браузе
ем вам протестироват
я.
результаты получатс
116 глава 3
cтроительные блоки
Подождите минутку...
Вы убрали двойные кавычки
и заменили их элементом <q>,
который просто используется для их
отображения? Я должна удивиться?
дальше 117
добавление цитаты
Это дневник Тони. Продолжайте работу и оформите его цитату Лао Цзы с исполь-
зованием элемента <q>. После того как вы сделаете это на бумаге, поменяйте
файл journal.html и протестируйте его. Решение вы найдете в конце главы.
<html>
<head>
<title>На скутере по США</title>
</head>
<body>
118 глава 3
cтроительные блоки
дальше 119
cоздание длинных цитат
Äëè-è-è-èííûå öèòàòû
Теперь, когда вы знаете, как делать корот-
кие цитаты, давайте рассмотрим длинные.
Тони дал нам длинную цитату с музыкальной
заставкой Burma Shave.
В своем дневнике Тони просто поместил ци-
тату прямо внутрь абзаца. Однако не лучше
ли вынести ее отдельно в свой собственный
блок? Например, так:
120 глава 3
cтроительные блоки
ь элемент
Чтобы вставит
ала нужно
‹blockquote›, снач
<h2>14 июля, 2012</h2>
закончить абзац.
<p>
Я видел парочку знаков в стиле Burma Shave на
обочине дороги: Затем мы помещаем слоган
</p> Burma Shave внутрь элемента
<blockquote> ‹blockquote›.
Если вы не заметите
Мы также помещаем каждый
проезжающие мимо машины,
пункт списка на новой строке,
то они могут сбить вас.
Одно мгновение — чтобы это больше походило
и бесконечность… на слоган.
</blockquote> И наконец, мы должн
ы добавить
<p> тег ‹p›, чтобы снова
начать абзац
Я определенно не хотел, чтобы на меня наехала после элеме
нта ‹blockquote›.
машина!
</p>
а вы-
ша цитат
Однако на а к, как
совсем т
глядит не что
и, потому
мы хотел строку.
на в одну
она написа е-
нужно разд
А ведь нам ес к о лько
ату на н
лить цит н ем ся
ммм… Вер
строк. Хм
ть позже.
к этому чу
дальше 121
все о цитатах
часто
Задаваемые
вопросы
В: Итак, я правильно понял, что эле- браузеры используют двойные кавычки, дру- О: Конечно. Точно так же как вы можете
мент <q> используется, если нужно гие — выделение курсивом, а третьи вообще поставить элемент <q> внутрь элемента <p>,
выделить цитату прямо внутри абза- не выделяют цитаты. Единственный способ вы можете поместить <q> внутрь <blockquote>.
ца, не вынося ее в отдельный блок, точно придать желаемый внешний вид ци- Это можно сделать, если необходимо проци-
а <blockquote> — если необходимо татам — назначить стиль самостоятельно, тировать кого-то, кто тоже кого-то цитировал.
вынести цитату в отдельный блок на и, конечно же, мы займемся этим чуть позже. Но элемент <blockquote> внутри <q> не имеет
веб-странице? смысла, не так ли?
122 глава 3
cтроительные блоки
дальше 123
блочные и строчные элементы
элемент
Каждый блочный
дельно,
отображается от
и после
h2 словно перед ним
строки.
него идет разрыв
Элемент ‹q›,
p
подобно всем
p
строчным эле-
q
ментам, вы-
водится в ос-
Блочные элементы новном тексте
отображают свое абзаца.
blockquote содержимое от-
дельным блоком.
часто
Задаваемые
вопросы
В: Мне казалось, я знаю, что такое разрыв строки; это что-то вроде
нажатия клавиши Enter на клавиатуре компьютера. Верно?
дальше 125
возврат каретки и элемент br
… но единственный способ,
который я вижу для решения этой
проблемы, — поместить каждую
строку в блочный элемент, например
в абзац. Как можно иначе заставить
браузер использовать разрыв строки?
126 глава 3
cтроительные блоки
ой
Сейчас после кажд
зрыв.
строки идет ра
дальше 127
пустые элементы не имеют закрывающих тегов
<br> </br>
Хорошо, но печат
ать так
ДЕЙСТВИТЕЛЬН
О глупо. Мы зна-
ем, что между эт
ими тегами ни-
<br> </br> когда не будет со
держимого.
Я всего
лишь половина
элемента, которым И если печатать так, то
был раньше... это на самом деле будет
(сопение). <br> обозначать то же самое.
128 глава 3
cтроительные блоки
часто
Задаваемые
вопросы
В: Итак, единственное назначение элемента <br> — вставлять В: Существуют ли еще какие-нибудь элементы без содер-
разрывы строки? жимого? Я думаю, что <img> также является элементом без
содержимого, ведь так?
О: Верно. Единственное место, где браузеры сами вставляют
разрывы в тексте, — там, где вы начинаете новый блочный элемент О: Да, есть еще парочка. Вы уже видели, как мы использовали
(как <p>, <h1> и т. д.). Если вы хотите вставить дополнительный элемент <img>, и вскоре мы подробно разберемся с ним.
разрыв строки в тексте, используйте элемент <br>.
В: Могу ли я сам сделать какой-нибудь элемент элементом
В: Почему элемент <br> называют элементом без содержи- без содержимого? Например, если у меня есть ссылка, но я не
мого? хочу задавать для нее содержимое, могу я просто написать
который включает в себя открывающий тег + содержимое + закры- О: Нет. В мире существует два типа элементов: стандартные
вающий тег. Он является элементом без содержимого, поскольку
элементы, как <p>, <h1> и <a>, и элементы без содержимого, как
лишен его, а также закрывающего тега. Считайте его «пустым про-
<br> и <img>. Вы не можете переключаться между ними. Например,
странством»; в нем ничего нет, он пуст.
если вы просто напечатали <a href="mypage.html">, то это открыва-
В: Я все еще не понял. Объясните, почему элемент <br> не ющий тег без содержимого и закрывающего тега (в чем нет ничего
хорошего). А если вы напечатаете <a href="mypage.html"></a>, то это
имеет содержимого?
будет абсолютно нормальный пустой элемент, однако он не особо
О: Рассмотрим, например, элемент <h1> (или <p>, или <a>). пригодится в вашей странице!
Основная цель элемента — разметить какое-то содержимое,
к примеру:
В: Я видел страницы не с элементом <br>, а с <br/>.
Что он означает?
<h1>Не ждите, заказывайте прямо сейчас</h1>
130 глава 3
cтроительные блоки
дальше 131
создание списка
Шаг первый
Поместите каждый элемент списка в HTML-элемент <li>.
Чтобы создать список, нужно поместить каждый его пункт в от-
дельный HTML-элемент <li>. Иными словами, нужно оградить
этот пункт списка слева открывающим тегом <li>, а справа — за-
крывающим </li>. Как и для всех других HTML-элементов, текст
внутри тегов может быть любой длины. Кроме того, его можно
разбить на любое количество строк.
<p>
Я видел парочку знаков в стиле Burma Shave на
обочине дороги:
</p>
132 глава 3
cтроительные блоки
Шаг второй
Заключите все элементы списка либо в элемент <ol>, либо в элемент <ul>.
Если вы используете элемент <ol>, то пункты списка будут про-
нумерованы, если элемент <ul>, то список будет отображен как
маркированный. Ниже приведен пример того, как правильно
заключить пункты списка в элемент <ol>.
<p> HTML
íóæåí äëÿ
Я видел парочку знаков в стиле Burma Shave на ñòðóêòóðû
обочине дороги:
Ïîìûòü
</p> Не забыть Èñïîëüçîâàòü
! ul èëè ol
êîòà
äëÿ ñïèñêîâ
неупорядочен
ный
список = ul
упорядоченны
Элемент <ol> — это блочный или строчный элемент? й список = ol
элемент спис
А как насчет <li>? ка = li
дальше 133
тестирование списка
Новый, усовершенствованный
список городов.
ен разрыв
Перед списком добавл
мент ‹ol›,
строки, поэтому эле
й.
должно быть, блочны
е, что брау-
Обратите внимани
все элементы
зер сам пронумеровал
не нужно зани-
списка (поэтому вам
оятельно).
маться этим самост
Возьми в руку
карандаш
Оказывается,
Тони
посетил Ариз
ону после
Нью-Мексико
. Можете ли
вы изменить сп
исок так,
чтобы нумера
ция стала
правильной?
134 глава 3
cтроительные блоки
Вот другой список из дневника Тони: сотовый телефон, iPod, цифровая камера
и шоколадный батончик. Вы найдете его в записи от 14 июля. Это маркированный
список элементов.
HTML-код для этой записи дневника приведен ниже. Добавьте код, который бы
преобразовал элементы в маркированный список (помните, что для таких списков
используется элемент <ul>). Мы немного поменяли формат документа, чтобы
вам было легче.
Когда справитесь с этим заданием, сверьте свой вариант решения с тем, что приво-
дится в конце главы. Затем внесите эти изменения в свой файл journal.html и про-
тестируйте его.
сотовый телефон
iPod
цифровую камеру
и шоколадный батончик
дальше 135
подробнее о списках
часто
Задаваемые
вопросы
В: Элементы <ol> и <li> всегда нужно применять вместе? В: Я думаю, что понимаю то, как браузер отображает блочные
и строчные элементы, но я совершенно запутался с тем, какие
О: Да, вы всегда должны использовать элементы <ol> и <li> (или элементы могут находиться внутри других, или, как вы говорите,
<ul> и <li>) вместе. Ни один из этих элементов не имеет смысла что во что может быть вложено.
без другого. Помните, что список — это группа элементов: эле-
менты <li> используются для определения каждого пункта списка, О: Это один из самых сложных моментов при изучении HTML.
а элемент <ol> — для их группировки. Вы будете постигать это на протяжении нескольких глав, а мы раз-
ными способами постараемся прояснить этот вопрос. Но все-таки
В: Можно ли помещать текст или другие элементы внутрь сначала мы немного поговорим о вложенности элементов. И раз
элементов <ol> или <ul>? уж вы подняли этот вопрос, то это будет следующая тема, которую
мы рассмотрим.
О: Нет, элементы <ol> и <ul> предназначены только для работы
с элементами <li>. В: Итак, в HTML есть упорядоченные и неупорядоченные
списки. А нет ли еще каких-нибудь типов списков?
В: Как насчет маркированных списков? Можно ли изменить
внешний вид маркеров? О: На самом деле есть еще один: список определений. Он выглядит
следующим образом: Каждый элемент
О: Да. Но не спешите пока. Мы вернемся к этому, когда будем в этом списке имеет
говорить о CSS и дизайне веб-страниц.
термин — ‹dt›
В: А что, если я захочу поместить список в другой список? <dl>
и описание — ‹dd›.
136 глава 3
cтроительные блоки
‹html›
‹body›
‹p›
‹q›
дальше 137
отношения вложенности, изображенные графически
Преобразуем это
в схему, где каждый
элемент будет блоком,
‹html› всегда нахо-
а каждая линия будет
дится в корне дерева.
соединять определенный
элемент с другим элементом,
вложенным в него.
‹html› содержит два
вложенных элемента:
‹head› и ‹body›. Вы можете
‹body› вложен в элемент ‹html›,
называть их «детьми»
html поэтому мы говорим, что
элемента ‹html›.
‹body› — «ребенок» ‹html›.
head body
138 глава 3
cтроительные блоки
p p
em
em
ХОРОШО: здесь элемент ‹em› ПЛОХО: здесь элемент ‹em› вышел за гра-
вложен в элемент ‹p›. ницу элемента ‹p›. Это означает, что он,
по сути, не вложен в него.
Êàêàÿ ðàçíèöà?
Это нормально, что вы запутались во вложенности. Если вы пишете HTML-код, не соблюдая вложен-
ности элементов, то ваши страницы могут работать в одних браузерах и не работать в других. Но если
вы постоянно заботитесь о вложенности, то сможете избежать несоответствия тегов, а ваши страницы
будут хорошо отображаться во всех браузерах. Это будет иметь еще большее значение в последующих
главах, когда мы основательно займемся «профессиональным» HTML.
дальше 139
находим несогласованные теги
СТАНЬ браузером
Ниже вы найдете HTML-файл,
в котором некоторые
теги не согласованы.
Ваша задача —
выполнить работу
<html>
браузера и найти
<head>
все ошибки. Сделав
<title>Топ-100</title> это упражнение, проверьте,
<body> все ли ошибки вы нашли (ответ
<h1>Топ-100
<h2>Dark Side of the Moon</h2>
смотрите в конце главы).
<h3>Pink Floyd</h3>
<p>
У Луны нет темной стороны; на самом деле <q>она вся темная.
</p></q>
<ul>
<li>Speak to Me / Breathe</li>
<li>On The Run</li>
<li>Time</li>
<li>The Great Gig in The Sky</li>
<li>Money</li>
<li>Us And Them</em>
<li>Any Colour You Like</li>
<li>Brain Damage</li>
<li>Eclipse</li>
</ul>
</p>
<h2>XandY</h3>
<h3>Coldplay</h2>
<ol>
<li>Square One
<li>What If?
<li>White Shadows
<li>Fix You
<li>Talk
<li>XandY
<li>Speed of Sound
<li>A Message
<li>Low
<li>Hardest Part
<li>Swallowed In The Sea
<li>Twisted Logic
</ul>
</body>
</head>
140 глава 3
cтроительные блоки
Кто я
?
Группа HTML-элементов в маскарадных костюмах играет на
вечеринке под названием «Кто я?». Они дадут вам ключ к разгадке,
благодаря которому вы попытаетесь угадать, кто они на самом
деле. Предполагается, что они все время говорят о себе прав-
ду. Опознайте участников и заполните правые столбцы бланка.
Кроме того, напишите для каждого участника игры, блочный он
или строчный.
Сегодняшние участники:
все очаровательные HTML-элементы, которые вы уже
встречали раньше, должны быть разоблачены! Ñòðî÷íûé
Èìÿ èëè áëî÷íûé?
дальше 141
специальные символы заменяются ссылками
142 глава 3
cтроительные блоки
часто
Задаваемые
вопросы
В: Здорово, я не догадывался, что иностранных языков будут поддерживать- бавлять & каждый раз, когда печатаете
браузер может отображать так мно- ся на их машинах. ссылку на символ, а если вам на самом
го разных символов. На сайте www. деле нужен знак &, то используйте вместо
unicode.org можно найти тонны раз- него ссылку.
личных символов и языков. В: Вы сказали, что & — специаль-
ный символ и мне нужно использо-
вать ссылку на этот символ вместо В: Просматривая ссылки на символы
О: Будьте осторожны. Ваш браузер него самого. Но чтобы напечатать эту на сайте www.w3cschools.com, я заме-
отобразит все эти символы только в том ссылку, я должен указать символ &. тил, что каждая ссылка также имеет
случае, если на вашем персональном Ведь, скажем, для ссылки на символ > номер. Для чего он нужен?
компьютере установлены соответству- я должен напечатать >?
ющие шрифты. Поэтому, в то время как
вы можете рассчитывать на корректное О: Вы можете использовать либо ссыл-
отображение в браузере основных симво- О: Нет, нет! Причина того, что & — ки на символы, либо числовые ссылки,
лов с сайта www.w3schools.com, нет ника- специальный символ, именно в том, что например d (они делают абсолютно
кой гарантии, что отобразятся остальные это первый знак любой ссылки на символ. одно и то же). Не для всех символов есть
символы из полного списка. Однако если Итак, это совершенно правильно — ис- ссылки, в этих случаях единственное, что
вы кое-что знаете о своих пользователях, пользовать & в ссылке на символ, только вы можете сделать, — это использовать
то должны предполагать, символы каких не отдельно. Просто не забывайте до- их числовой код.
дальше 143
попробуйте несколько элементов
<em>
Коктейль <strong> Используйте этот
Используйте этот элемент, элемент, чтобы особым
из элементов чтобы обозначить текст,
который вы произнесли бы
образом выделить текст.
144 глава 3
cтроительные блоки
Отличная страница.
Вы прекрасно выполнили задачу
по созданию онлайн-версии моего
дневника. Кроме того, ваш HTML-код
стал хорошо организованным и теперь
я самостоятельно могу добавлять новую
информацию. Итак, когда же мы
сможем перенести это все с вашего
компьютера в Сеть?
ÊËÞ×ÅÂÛÅ
ÌÎÌÅÍÒÛ
Перед тем как набирать содержимое, составьте <br> — это элемент без содержимого.
план структуры вашей веб-страницы. Начните
В элементах без содержимого, как следует из их
с черновика, затем создайте план и только потом
названия, нет содержимого.
пишите HTML-код.
Планирование страницы начинается с размеще- Элемент без содержимого состоит только из од-
ния больших блочных элементов, а затем уточня- ного тега.
ются строчные элементы. У пустого элемента нет содержимого, но есть как
Помните: по возможности нужно использовать открывающий, так и закрывающий теги.
элементы, чтобы сказать браузеру, что означает Вложенный элемент — это элемент, полностью
ваше содержимое.
находящийся внутри другого элемента. Если все
Всегда применяйте те элементы, которые наибо- ваши элементы вложены правильно, то все теги
лее точно соответствуют структуре вашей стра- будут корректно согласованы.
ницы. Например, никогда не используйте абзац,
когда вам нужен список. Для создания списка в HTML используйте ком-
бинацию двух элементов: для упорядоченных
<p>, <blockquote>, <ol>, <ul> и <li> — это списков применяйте <ol> и <li>; для неупоря-
блочные элементы . Они всегда стоят обособленно
доченных — <ul> и <li>. Когда браузер выводит
и изображаются (по умолчанию) так, что перед
упорядоченный список, он сам пронумеровывает
их содержимым и после него всегда есть разрыв
строки. его элементы.
<q> и <em> — строчные элементы. Содержимое Можете создать список, вложенный в другой спи-
этих элементов сливается с остальным содержи- сок, используя элементы <ol> или <ul> внутри
мым элемента, который их включает. элемента <li>.
Используйте элемент <br>, если хотите вставить Применяйте ссылки на символы для отображения
свой собственный разрыв строки. специальных символов в HTML.
дальше 145
решение упражнений
...
Это часть изменений
<p>
Первый день моего путешествия! Я не верю, что наконец
Заметьте,
Мы добавили смог отложить все дела в сторону и отправиться
ий что мы
открывающ в путешествие. Поскольку я собирался ехать на скутере,
д убрали
тег ‹q› пере то не мог взять с собой много вещей: только сотовый
а- двойные
началом цит
телефон, iPod, цифровую камеру и шоколадный батончик.
ы ва - Только все самое необходимое. Как сказал бы Лао Цзы: кавычки.
ты и за кр
q› ср а- <q>Путешествие в тысячу миль начинается с одного шага
ющий ‹/
к скутеру</q>
зу после нее. </p>
А вот результаты
теста...
но не
Хорошо, особой разницы не видно,
лучш е?
чувствуете ли вы, что так
Вот другой список из дневника Тони: сотовый телефон, iPod, цифровая камера
и шоколадный батончик. Вы найдете его в записи от 14 июля. Это маркированный
список элементов.
Внесите изменения в файл journal.html. Все выглядит так, как вы ожидаете?
146 глава 3
cтроительные блоки
СТАНЬ браузером. Решение
Взлом кода
для вычисления
›. а-
h1 в
месторасположения
‹ / ры
ег ак
т нз
е
закрыва- Вы можете найти ссылки на все
ий щ
Пропущен
щ пу
<html> ›.
‹/head эти символы в справочнике или
ро
<head> ющий тег
П
просто набрать их. В любом случае
ю
<title>Топ-100</title>
<body> ‹p› и ‹q› неправиль- ответ будет выглядеть так:
<h1>Топ-100 но вложены: тег ‹/p› Detroit!
<h2>Dark Side of the Moon</h2> должен идти после
<h3>Pink Floyd</h3>
тега ‹/q›.
<p>
У Луны нет темной стороны; на самом деле <q>она
вся темная.
</p></q>
<ul>
<li>Speak to Me / Breathe</li> Закрывающий
<li>On The Run</li> тег ‹/em› сто-
<li>Time</li> ит вместо за-
<li>The Great Gig in The Sky</li> крывающего
<li>Money</li>
тега ‹/li›.
<li>Us And Them</em>
<li>Any Colour You Like</li>
<li>Brain Damage</li>
Здесь закрывающий
<li>Eclipse</li>
тег ‹/p›, для которо-
В следующем месяце планируется собрание
</ul> членов группировки в моем подземном
</p> го нет открывающего логове в Ðετrö
ìτ.
<h2>XandY</h3> тега ‹p›. Приходите все.
<h3>Coldplay</h2>
<ol> В этом за
<li>Square One головке м
закрываю ы перепут
<li>What If? щие теги али
‹/h2› и ‹/
<li>White Shadows h3›.
<li>Fix You
Мы начали список открывающим тегом ‹ol›, но поставили
<li>Talk
<li>XandY ему в соответствие закрывающий тег ‹/ul›.
<li>Speed of Sound
li›.
щие теги ‹/
<li>A Message
<li>Low оп ус т ил и все закрываю
Мы пр
<li>Hardest Part
<li>Swallowed In The Sea
Этот закрывающий тег не соответствует открывающему
<li>Twisted Logic
</ul> тегу ‹ol›, с которого начинается список.
</body>
</head> Вот наш пропущенный тег ‹/head›; но нет
закрывающего тега ‹/html›.
дальше 147
решение упражнений
Кто я
Группа HTML-элементов в маскарадных костюмах играет на ве-
?
черинке под названием «Кто я?». Они дадут вам ключ к разгадке,
благодаря которому вы попытаетесь угадать, кто они на самом
деле. Предполагается, что они все время говорят о себе прав-
ду. Опознайте участников и заполните правые столбцы бланка.
Кроме того, напишите для каждого участника игры, блочный он
или строчный.
Сегодняшние участники:
все очаровательные HTML-элементы, которые вы уже встре-
чали раньше, должны быть разоблачены!
Хмм, он похож на
<a>
строчный, ОДНАКО
в себе
может заключать
, а не
Ñòðî÷íûé блочные элементы
кс т.
èëè áëî÷íûé? только лишь те
Èìÿ зави-
Таким образом, в
екста,
симости от конт
Я заголовок первого уровня. h1 Áëî÷íûé <a> может быть
как
к и блоч-
строчным, та
Я готов сослаться на другую страницу. a Õìì… ным элементом.
148 глава 3
4 соединение
Путешествие в Webville
Мы собираемся
в Webville! Мы навсегда
оставляем в прошлом нашу
скучную неинтересную
локальную файловую
систему.
150 глава 4
Веб-тур
Советы по выбору
Ïîèñê õîñòèíãîâîé êîìïàíèè хостинговой компании
Чтобы поместить страницы в Интернет, вам необ- Мы не сможем рассказать вам все, что нужно знать
ходимо найти сервер, который постоянно «живет» о выборе хостинговой компании (в конце концов,
в Сети. Лучше всего найти хостинговую компанию, эта книга о HTML и CSS), но постараемся указать,
которая позаботится о поддержке работы сервера. в каком направлении двигаться. Вот несколько
Не беспокойтесь, найти такую компанию доволь- рекомендаций, которые нужно учитывать при
но просто и совсем не дорого. выборе.
Какую компанию? Ну, мы бы хотели, чтобы вы Техническая поддержка: имеет ли хостинговая
зарегистрировались в хостинговой компании компания хорошую систему по обработке возни-
Head First Hip Web Hosting, Inc., но, к сожалению, кающих у вас технических вопросов? В лучших
таковой не существует. Поэтому вам придется по- компаниях на ваши вопросы ответят быстро по
заботиться об этом самостоятельно. Процесс по- телефону либо по электронной почте.
иска хостинговой компании совсем не сложный, Передача данных: существует ограниченное ко-
он сродни выбору компании, предоставляющей личество страниц и данных, которое хостинго-
услуги кабельного телевидения: следует учесть вая компания позволит вам отправлять вашим
множество свойств и тарифных планов. Вам нуж- посетителям в течение месяца. Большинство
но подобрать компанию, которая подходит имен- компаний в своих основных планах предлагают
но вам по цене и качеству своих услуг. приемлемое количество передаваемых данных
Есть хорошая новость: вы можете приступить для небольших сайтов. Если же вы создаете сайт,
к работе, заплатив сначала совсем небольшую сум- у которого, как предполагается, будет много по-
му. Затем при необходимости вы всегда сможете сетителей, то вам нужно обратить на это особое
расширить пакет услуг. Мы не будем советовать внимание.
вам выбрать какого-то определенного провайдера, Резервные копии: регулярно ли хостинговая
но можем рассказать, на что обратить внимание компания делает резервные копии ваших стра-
при его выборе. ниц и данных, которые можно будет восстано-
вить, если на сервере произойдет аппаратный
сбой?
СЬ
РАССЛАБЬТЕ Доменные имена: учитывает ли хостинговая
ь свои компания имя домена при ценообразовании?
ельно помещат
Вам не обязат од ол жить Читайте подробности на следующей странице.
ть, чтобы пр
страницы в Се
ой книге.
обучение по эт Надежность: большинство хостинговых компа-
страни- ний заявляют, что они осуществляют поддержку
тереснее, если
Хотя намного ин режнему сайтов до 99 % общего времени и более.
ы в Сети, вы по-п
цы расположен к HTML
жать учить язы Дополнительные возможности: входят ли
можете продол вс е фа йлы на
располагая
по этой книге, те ре .
в ваш пакет какие-нибудь дополнительные
м компью
своем локально возможности, такие как адреса электронной
йт в Сети,
те разместить са почты, форумы или поддержка сценарных
Если же вы хоти главу, что-
тать дальше эту языков (что-то, что в будущем может вам при-
продолжайте чи зо ва ть.
к это органи
бы выяснить, ка годиться)?
дальше 151
Веб-тур
äîìåííîå
Ïðèâåò, ìîå èìÿ...
Даже если вы никогда не слышали о доменных именах, вы видели и использо-
вали огромное их количество. Вы наверняка знаете google.com, facebook.
com, amazon.com, disney.com и, может быть, еще парочку, о которых не
хотите упоминать.
Итак, что такое доменное имя? Это просто уникальное имя, используемое
для определения места для вашего сайта. Рассмотрим пример:
www.starbuzzcoffee.com
н,
ных име
о н ч а н и я » домен , .o rg,
е «ок : .com
в у ю т различны р а з л и ч н ых целей ь к раз-
Эта часть име- Сущест ь з у ю т с я для
р и н а д л е жност
испол ывают н
а п
боре дом
ена
ни — название которые а кже указ . д. При вы
u ; а т p и т я в а с.
.gov, .ed k, .co.j му дл
определенного
с т р а н ам: .co.u б о л е е п одходяще
личным наи
чтение
сервера в домене. е предпо
отдайт
Есть несколько причин, по которым вы должны заботиться После нескольких лет
о доменных именах. Если вам нужно уникальное имя для сай- борьбы мы наконец-
та, то вам понадобится собственное доменное имя. Доменные то получили наше
имена также используются, чтобы вы могли сослаться на свои собственное доменное
страницы с других сайтов (мы вернемся к этому через несколько имя.
страниц).
И еще кое-что, что вам обязательно нужно знать. Доменные
имена контролируются централизованным учреждением (назы-
ваемым ICAAN). Это позволяет удостовериться, что только один
человек в данный момент использует определенное доменное
имя. Кроме того (вы догадывались, что так будет), вы ежегодно
платите небольшой регистрационный взнос для сохранения за
собой выбранного доменного имени.
152 глава 4
часто Веб-тур
Задаваемые
вопросы
В: Почему это называется доменным в то время как www.starbuzzcoffee.com — назва- хотите перейти в другую компанию, то все,
именем, а не именем сайта? ние сайта. Покупка домена — это как покупка кто знал о вашем сайте, больше не смогут
участка земли, скажем, 100mainstreet.com. быстро его найти. С другой стороны, если
О: Потому что это разные вещи. Если На этой земле вы можете построить столько у вас есть собственное доменное имя, вы
говорить о www.starbuzzcoffee.com, то это участков земли, сколько пожелаете, например: просто можете взять его с собой в новую
имя сайта, но лишь часть starbuzzcoffee. home.100mainstreet.com, toolshed.100mainstreet. хостинговую компанию (и пользователи ни-
com является доменным именем. Вы также com и outhouse.100mainstreet.com. когда даже не догадаются о том, что вы
можете создавать другие сайты, исполь- Итак, www.starbuzzcoffee.com — это всего лишь поменяли компанию).
зующие это же доменное имя, например один сайт в домене starbuzzcoffee.com.
corporate.starbuzzcoffee.com или employee. В: Доменные имена должны быть уни-
starbuzzcoffee.com. Итак, можно применять В: Что же все-таки полезного в том, чтобы кальными, но что, если кто-то уже исполь-
одно доменное имя для нескольких сайтов. иметь доменное имя? Действительно ли зует то имя, которое я хочу выбрать? Как
оно мне необходимо? В моей хостинговой я могу это узнать?
В: Если бы мне нужно было получить компании сказали, что я могу использовать
доменное имя для Starbuzz, разве я не их имя: www.dirtcheaphosting.com. О: Хороший вопрос. Большинство ком-
захотел бы выбрать www.starbuzzcoffee. паний, которые предоставляют услугу ре-
com? Кажется, все используют www в на- О: Если это вас устраивает, то нет ничего гистрации доменного имени, позволяют
чале имени сайта. плохого в том, чтобы использовать их имя. проверить, не используется ли оно кем-то
Но (и это важное НО) в этом есть большое еще (как и при поиске номерных знаков на
О: Не нужно путать доменное имя с именем неудобство: если компания когда-нибудь автомобиль).
сайта: starbuzzcoffee.com — это доменное имя, прекратит свою деятельность или вы за-
нуж-
Это упражнение, которое вам действительно
вам приде тся
но выполнить. Кроме того, сделать это
помочь
самостоятельно. Мы бы, конечно же, были рады
.
каждому из вас, но вопросов было бы слишком много
дальше 153
Веб-тур
Çàñåëåíèå
Поздравляем! Вы подобрали хостинговую компанию, выбра-
ли доменное имя и получили сервер, готовый разместить
ваши веб-страницы (даже если это не так, продолжайте
читать, потому что здесь приводится важная информация).
Что дальше? Конечно же, настало время заселяться. Итак,
снимайте вывеску «Продается» и собирайте все свои файлы
вместе: мы будем заселять их в новый сервер. Как и при
любом переезде, основная цель — переместить ваши вещи,
например, из кухни в старой квартире на кухню в новой.
А в Сети мы заботимся о перемещении информации из
вашей собственной корневой папки в корневую папку на
веб-сервере. Давайте вернемся к кафе Starbuzz и подробно
опишем всю процедуру переезда. Рассмотрим, как все вы-
глядит на данный момент:
Это корневая
папка для странички?
Помните свои Starbuzz-
Starbuzz. ица (index.html)
<html>
. Их две: основная стран
й содержится
и страница, на которо
.
.
on.html).
</html>
issi
index.html
постановка задачи (m
starbuzz
<html>
.
.
.
</html>
Это новый веб-сервер.
Хостинговая компания
<html>
.
.
.
<html>
starbuzz
index.html
mission.html
уже создала для вас
<html>
.
.
.
<html>
mission.html
ее
, где в настоящ
Ваш компьютер .
arbuzz-страницы
время живут St starbuzz
часто
В: Минутку, что же все-таки такое «кор- Задаваемые О: Точно. Вам нужно взять все страни-
невая папка»? вопросы цы с вашего компьютера и поместить их
в корневую папку своего сайта, которая
О: До сих пор корневой папкой была находится на сервере вашей хостинговой
просто папка наивысшего уровня, в кото- компании.
рой хранились файлы для ваших страниц. Главное, что вы знаете, где расположена
На веб-сервере значение корневой папки ваша корневая папка на сервере, и можете В: А как насчет вложенных папок, таких
увеличивается, потому что все, что в ней скопировать в нее свои файлы (мы вернем- как папка images? Их тоже нужно копи-
содержится, будет доступно в Сети. ся к этому чуть позже). ровать?
В: Кажется, моя хостинговая компания В: Позвольте мне убедиться, что я пра- О: Да, вам нужно скопировать все страни-
назвала мою корневую папку mydomain_ вильно все понял. Мы складывали все цы, файлы и папки из собственной корневой
com. Это плохо? страницы нашего сайта в одну папку, папки в корневую папку на сервере. Итак,
которую называли корневой. Сейчас мы если на вашем компьютере была папка
О: Ничуть. Хостинговые компании мо- собираемся скопировать все это в кор- images, то вам нужно, чтобы такая же по-
гут называть корневые папки как угодно. невую папку сервера? явилась и на сервере.
index.html
starbuzz
<html>
.
.
.
<html>
ать
но перед
<html>
Вам нуж
.
.
ем
у, и зат
.
их сервер
<html>
елятся»
они «пос
index.html
starbuzz
<html>
. в Сети.
.
.
<html>
mission.html
www.starbuzzcoffee.com
дальше 155
Веб-тур
Ñòîëüêî èíôîðìàöèè îá FTP, ñêîëüêî ìîæåò ïîìåñòèòüñÿ íà äâå ñòðàíèöû
Хотя эта книга о HTML и CSS, мы хотим представить вам небольшой путеводитель по использованию
FTP для размещения файлов в Сети. Примите во внимание, что ваша хостинговая компания может дать
вам пару советов о том, как наилучшим образом передать файлы на их сервер (а поскольку вы им пла-
тите, не пренебрегайте их помощью). Через несколько страниц мы закончим наше отступление, снова
вернемся к изучению HTML и CSS и уже не будем ни на что отвлекаться до конца книги (мы обещаем).
Мы предполагаем, что вы уже нашли FTP-клиент. Одни из них — с управлением из командной строки, дру-
гие имеют полностью графический интерфейс, а третьи встроены в программы, например в Dreamweaver
и Expression Web. Все они используют одни и те же команды, но в некоторых программах вам нужно
вводить их самостоятельно, в то время как в других вы просто используете графический интерфейс.
Рассмотрим по порядку, как работает FTP.
Для подключения вам понадобятся имя
пользователя и пароль, установленные
1 Подключитесь к вашему серверу вашей хостинговой компанией.
с помощью FTP. Слова «папка»
и «каталог» вза-
ftp www.starbuzzcoffee.com
имозаменяемы.
Большинство FTP-
sttar
arbu
b zz
клиентов используют
слово «каталог».
есь, что
и, убедит
www.starbuzzcoffee.com
сл ов а м
Другими zz на
ке starbu
т есь в пап
вы н а х о д и от рав-
п
п е р е д тем, как
2 Используйте команду cd, чтобы поменять текущий сервер е ,
айлы.
каталог на тот, в который вы хотите переслать да свои ф
лять ту
файлы.
cd starbuzz
Устанавливает
<html>
.
.
.
<html> текущим ката-
starbuzz
index.html
лог starbuzz.
starbuzz
<html>
.
.
.
<html>
mission.html
www.starbuzzcoffee.com
ю
Пересылает копи
файла index .html
3 Передайте ваши файлы на сервер, используя
ог
команду put. в текущий катал
на сервере.
l
.htm
ndex
put i
<html>
.
.
<html>
.
<html>
.
.
<html> .
.
starbuzz
index.html
starbuzz
<html>
.
.
</html> .
.
<html>
mission.html .
</html>
index.html
i d h l
index.html
www.starbuzzcoffee.com
156 глава 4
Веб-тур
4 Вы также можете создать новый каталог Это то же, что и создание
новой папки,
на сервере, используя команду mkdir. только вы создаете ее на
сервере, а не
mkdir images на личном компьютере.
<html>
.
.
.
<html>
<html>
index.html .
starbuzz
<html>
.
.
.
<html>
mission.html
starbuzz .
.
</html>
index.html
Создает новый ката-
лог под названием
www.starbuzzcoffee.com
images
im images, находящий-
ся внутри каталога
5 Вы можете извлечь файлы с помощью starbuzz на сервере.
команды get.
get index.html
<html>
.
.
.
<html>
<html>
starbuzz
index.html
.
starbuzz
<html>
.
.
.
<html>
.
mission.html
.
</html>
index.html
<html>
.
Передает копию фай-
.
.
</html> www.starbuzzcoffee.com ла с сервера обратно
index.html
images на ваш компьютер.
используется
FTP-клиентов
В большинстве й интерфейс,
Давайте соберем все вместе. Далее приведен
ог о бо ле е уд об ный графически
пример работы с FTP-клиентом с управлением намн не читать это,
окойно можете
из командной строки. так что вы сп х.
е с одним из ни
если работает
File Edit Window Help Jam FTP-команды
%ftp www.starbuzzcoffee.com
Подключение
Connected to www.starbuzzcoffee.comи идентификация. Неважно, печатаете вы FTP-команды в про-
Name: headfirst грамме с управлением из командной стро-
Получаем содержимое ки или используете FTP-клиент с графиче-
Password:****** ским интерфейсом, и там и там абсолютно
230 User headfirst logged in. текущего каталога.
одинаковые команды и операции, которые
Один
ftp> dir вы можете выполнять.
каталог
drwx------ 4096 Sep 5 15:07 starbuzz называет- dir: выводит содержим ое текущего
ftp> cd starbuzz Делаем ся starbuzz. каталога.
CWD command successful каталог cd: изменяет текущий каталог. Здесь
starbuzz
ftp> put index.html символы «..» также обозначают пере-
текущим. Пересылаем сюда
Transfer complete. ход вверх на один каталог.
файл index.html.
ftp> dir pwd: показывает, в какой директории
содер-
-rw------- 1022 Sep 5 15:07 index.html Смотрим вы сейчас находитесь.
жимое катало-
ftp> mkdir images put <имя_файла>: пересылает ука-
га и видим в нем
Directory successfully created файл index.html.
занный файл на сервер.
ftp> cd images get <имя_файла>: извлекает указан-
CWD command successful Создаем каталог для изображений, ный файл из сервера назад на ваш ком-
ftp> bye а затем выходим из программы пьютер.
с помощью команды bye.
дальше 157
Веб-тур
часто
Задаваемые
вопросы
В: В моей хостинговой компании мне О: Да, для небольших сайтов именно так В: Могу ли я редактировать файлы не-
сказали использовать SFTP, а не FTP. все и делается. Используйте свой компью- посредственно на веб-сервере?
В чем разница? тер, чтобы протестировать внесенные изме-
нения, и перед тем, как пересылать файлы на
сервер, убедитесь, что все работает именно О: Обычно это не очень правильно, по-
О: SFTP, или Secure File Transfer Protocol так, как вы хотите. Для больших сайтов орга- тому что ваши посетители могут увидеть
(протокол безопасной пересылки данных), — низации часто специально создают тестовый все изменения и ошибки еще до того, как
это более безопасная версия FTP, которая и реальный сайты, чтобы была возможность у вас появится время самому их заметить
работает примерно так же. Только перед предварительного просмотра изменений на и исправить.
приобретением SFTP убедитесь, что выбран- тестовом сайте, перед тем как они будут
ный FTP-клиент также поддерживает его. внесены на реальный. Однако некоторые хостинговые компании
позволят вам войти в систему под своим
Такие сервисные программы, как Dreamweaver регистрационным именем и поменять фай-
В: Итак, я должен редактировать файлы или Coda, позволяют протестировать изме- лы прямо на сервере. Чтобы так сделать,
на своем компьютере, а затем пересылать нения на вашем собственном компьютере. обычно нужно знать способ приглашения
их на сервер каждый раз, когда хочу об- После того как вы сохраните файлы, они на ввод команды MS-DOS или Linux, в за-
новить свой сайт? автоматически будут переданы на сайт. висимости от того, в какой операционной
системе работает ваш сервер.
Популярные FTP-клиенты
158 глава 4
соединение
Âåðíåìñÿ ê äåëó...
Вот и закончилась объездная дорога, и мы снова вы-
ехали на главную веб-магистраль. К этому моменту
у вас должны быть две Starbuzz-страницы: index.html
и mission.html, находящиеся в корневой папке на
сервере (или, по крайней мере, вы уже
знаете, как их туда поместить).
Согласитесь, было бы здорово, если бы
после всей проделанной работы браузер <html>
.
.
нашел эти страницы в Интернете и ото- .
</html>
mission.html
URL
Ãëàâíàÿ óëèöà, ÑØÀ
Вы, скорее всего, слышали выражение «h, t, t, p, двоеточие,
слеш, слеш» огромное количество раз. Однако что же оно оз-
начает? Во-первых, веб-адреса, которые вы вводите в браузере, Унифицированный
называются URL-адресами, или унифицированными указателями
информационных ресурсов. указатель ресурса
Если бы мы решали, то назвали бы их просто веб-адресами, (URL) — это сетевой
но нас никто не спрашивал, поэтому мы согласимся с предла-
гаемым названием. Рассмотрим, как расшифровывается URL:
адрес, который может
быть использован для
http://www.starbuzzcoffee.com/index.html
размещения в Сети
Первая часть URL Вторая часть —
имя сайта.
Третья часть — какой-либо информации,
говорит, какой абсолютный путь
протокол должен На данный мо- доступа к ресурсу включая HTML-
быть использован мент вы уже все из корневой папки. страницы, аудио, видео
для нахождения об этом знаете.
ресурса.
и многие другие формы
веб-содержимого.
Чтобы найти какой-нибудь ресурс в Сети, вы должны знать
имя сервера, выполняющего функции главного узла, и аб-
солютный путь к этому ресурсу. Только в этом случае вы
можете создать URL-адрес, и, вероятнее всего, ваш браузер Кроме того, для
найдет его, используя нужный протокол, обычно HTTP.
точного определения
месторасположения
Çàõîäèòå íà
ресурса URL включает
http:///www.ea
протокол, который нужно
rlsautos.com использовать, чтобы
найти этот ресурс.
160 глава 4
соединение
HTTP-запрос: могу ли
я получить файл /index.html?
www.starbuzzcoffee.com
Если ресурс не может быть найден, то вы получите широко известную
ошибку 404, которую сервер возвращает вашему браузеру.
дальше 161
абсолютные пути к вашим файлам
earls_autos
И указывайте
каждую папку,
через которую cars
вы продвигаетесь
к файлу. /
cars
new
аниями
Между назв
авляйте
папок вст
, чтобы
символ «/»
<html>
<html>
.
.
их.
разделить
.
new .
. used .
</html>
</html>
/ inventory.html inventory.html
Затем добавьте
имя файла.
inventory.html
Абсолютный путь
к файлу inventory.
html.
/cars/new/inventory.html
162 глава 4
соединение
часто
Задаваемые
вопросы
В: Что такого важного в абсолютных сможете просить браузер извлечь страницу О: О, отличный вопрос. Когда вы щелкаете
путях? (или другие типы ресурсов) из Сети. Как? кнопкой мыши на относительных ссылках,
Протокол говорит браузеру, какой метод он браузер самостоятельно преобразует отно-
должен использовать для поиска ресурса сительный путь в абсолютный, используя
О: Абсолютный путь — это то, что нужно (в большинстве случаев это HTTP). Название указанный в ссылке путь и относительный
серверу для определения местоположе- сайта (которое состоит из названия сервера путь к странице, на которой эта ссылка рас-
ния требуемого файла. Если у сервера нет и доменного имени) говорит браузеру, с ка- положена. Итак, благодаря вашему браузеру
абсолютного пути, он не будет знать, где кого компьютера в Интернете нужно взять все, что видит веб-сервер, — это абсолют-
искать файл. ресурс. А абсолютный путь говорит серверу, ные пути.
какая именно страница нужна.
://
протокол имя сайта абсолютный путь
дальше 163
легкие url
гда мы
Я бы хотела, чтобы Помните, ко
серверах
мои посетители могли просто говорим о веб-
обычно
набирать «http://www.starbuzzcoffee. или FTP, мы
ермин
com», не дописывая «index.html». используем т
есто
Есть ли способ это сделать? «каталог» вм
ка»?
термина «пап
ом де ле это
Но на сам
Да, есть. Один из вопросов, который мы не обсуди-
одно и то же.
ли, — что будет, если браузер запрашивает у веб-сервера
целый каталог вместо отдельного файла. Например,
браузер может запросить:
Каталог images
http://www.starbuzzcoffee.com/images/
в корневом
или каталоге.
http://www.starbuzzcoffee.com/
Сам корневой каталог.
Когда сервер получает запрос такого типа, он пы-
тается определить файл, выводимый по умолчанию
в этом каталоге. Обычно такой файл называется необходимо
index.html или default.htm. Если сервер нахо- Однако вам
как ваша
дит какой-либо из этих файлов, он возвращает его выяснить,
компания
браузеру для отображения. хостинговая
чтобы
требует,
Итак, чтобы обратиться к файлу в корневом (или свой
вы называли
любом другом) каталоге, не используя его имя, нужно ваемый по
просто назвать его index.html или default.htm. файл, выда сит
. Это зави
умолчанию п
кой т и
от того, ка .
Но я спрашивала про а использует
серверов он
«http://www.starbuzzcoffee.com», что
выглядит немного иначе. У него в конце
не стоит символ «/».
2 HTTP-запрос: могу ли
я получить файл /drinks/?
3 Сервер говорит: «Это
выглядит как каталог.
5 HTTP-ответ: вы запрашивали Есть ли в этом каталоге
каталог, но я нашел в нем файл, выдаваемый по
файл index.html и высылаю умолчанию?»
его вам.
starbuzz
<html>
.
.
.
</html>
drinks index.html
www.starbuzzcoffee.com
4 Сервер находит
в каталоге drinks
файл, выдаваемый по
умолчанию, который
называется index.html.
часто
В: Итак, все, кто зайдет на мой сайт Задаваемые В: Итак, когда я даю кому-то свой URL-
с URL http://www.mysite.com, увидят мою вопросы адрес, нужно включать в него часть
страницу index.html? index.html или нет?
дальше 165
упражнение
Корневая
<html>
папка Эрла. .
. A
.
</html>
index.html
earls_autos
<html>
.
.
.
B
</html>
directions.html
cars
<html> <html>
. .
.
.
C .
.
</html> </html>
index.html index.html
new used
<html> <html>
. .
.
.
.
.
D
</html> </html>
inventory.html inventory.html
E
images images
minicooper.gif thunderbird.gif
element.gif mustang.gif
166 глава 4
соединение
сь.
Напишите URL зде
дальше 167
ссылаемся на другие страницы
Фантастика! Мы готовы
работать в Сети. О нашем Кстати, у нас появилась
сайте уже поползли слухи. новая программа по
информированию людей о кофеине:
мы полагаем, что, если мы накачиваем
людей кофеином, то они должны
знать о кое-каких ограничениях
в его употреблении. Можем ли мы
поместить информацию о кофеине
с сайта buzz.headfirstlabs.com
на нашем сайте?
-
Обычный, привыч
ный элемент ‹a ›. Мы поместили URL в атрибут href. После
щелчка на ссылке «Все о кофеине» откроется
страница с сайта wickedlysmart.com/buzz.
Вот, в общем-то, и все. Чтобы сослаться на любой ресурс в Сети, вам понадобится лишь его унифи-
цированный указатель, который нужно поместить в элемент <a> в качестве значения атрибута href.
Давайте будем двигаться в этом направлении дальше и применим полученные знания к Starbuzz-стра-
нице index.html.
168 глава 4
соединение
<h2>Чай, $1,85</h2> Мы д
обави
<p>Ароматный напиток из черного чая, специй, мент ли эл
е-
‹ b r › ,
молока и меда. мест чтоб
ить с ы раз
</p> сылки -
разны в двух
<p> х стр
оках.
<a href="mission.html">Ознакомьтесь с нашей задачей</a>
<br>
Читайте<a href="http://wickedlysmart.com/buzz">Все о кофеине</a> здесь
</p>
</body> Здесь мы добави
</html> ли ссыл-
Мы также немного струк ку на страницу
- buzz.
турировали эту часть, wickedlysmar t.c
om/buzz
сгруппировав ссылки
и текст в один абзац.
дальше 169
тестирование ссылок
отличается от остальных.
Когда вы щелкаете
на этой ссылке,
браузер формирует
HTTP-запрос на
wickedlysmart.
com/buzz и затем
отображает
результат.
170 глава 4
соединение
часто
На странице «Все Задаваемые
о кофеине» мы вопросы
используем относительные
ссылки на другие страницы
нашего сайта и URL-адреса,
В: Кажется, теперь существует два спо- О: Да, хорошее замечание. Этот протокол
соба создать ссылки на другие страницы: используется, если браузер считывает фай-
чтобы сослаться на страницы
относительные пути и URL-адреса. лы прямо с вашего компьютера. URL-адрес
вне сайта, например на www.
файла, например, file:///chapter4/starbuzz/
caffeineanonymous.com. О: Относительные пути могут быть исполь- index.html, говорит браузеру, что путь к фай-
зованы только для того, чтобы создать ссылку лу index.html — /chapter4/starbuzz/. Этот путь
на страницу с этого же сайта, в то время как может выглядеть по-разному в различных
URL-адреса обычно применяются для создания операционных системах и браузерах.
ссылки на другие сайты.
Одна важная деталь, на которую нужно обра-
В: Не проще ли использовать URL-адреса тить внимание, если вы пытаетесь напечатать
для создания ссылок как на мои собствен- URL файла, — это то, что такой URL-адрес
ные, так и на внешние страницы? Ведь все содержит три слеша, а не два, как в HTTP.
будет правильно работать? Запомните это так: если взять URL-адрес HTTP
и удалить имя сайта, то получится три слеша.
О: Конечно, все будет работать, но есть не-
сколько причин, почему не стоит так делать. В: А есть ли еще какие-нибудь протоколы?
Одна заключается в том, что с URL-адресами
трудно обращаться, если на веб-странице их О: Да, многие браузеры могут искать стра-
достаточно много: они длинные, их трудно ре- ницы, используя FTP-протокол. Кроме того,
дактировать и с ними сложнее читать HTML-код существует протокол пересылки почты, кото-
(вам как автору страницы). рый передает данные посредством электрон-
ной почты. HTTP — это протокол, который вы
Кроме того, если на вашем сайте для ссылок на будете использовать чаще всего.
локальные страницы используются только URL-
адреса, а вы перемещаете его в другое место В: Я встречал URL, который выглядел так:
или меняете его имя, вам придется поменять http://www.mydomain.com:8000/index.html.
все эти URL-адреса, чтобы они соответствова- Почему в нем используется :8000?
ли новому местоположению сайта. Если же вы
используете относительные пути, то, пока ваши О: :8000 — это дополнительный «порт», кото-
страницы находятся в неизменном наборе па- рый вы можете поместить в URL HTTP. Чтобы
пок, в силу того, что ссылки относительные, вам понять, что такое порт, используйте следующую
не придется менять значения атрибутов href ассоциацию: имя сайта — это адрес, а порт —
в элементах <a>. номер почтового ящика (скажем, в многоквар-
тирном доме). Обычно все в Сети доставляет-
Используйте относительные пути, чтобы со- ся на порт, используемый по умолчанию (это
слаться на собственные страницы на этом же порт 80), но иногда веб-серверы сконфигури-
сайте, и URL-адреса, чтобы создать ссылку на рованы так, чтобы получать запросы на другой
страницы с других сайтов. порт (например, 8000). Чаще всего это тестовые
серверы. Обычные веб-серверы почти всегда
В: Разве мы не использовали еще один принимают запросы на порт 80. Если вы не
протокол? Я постоянно видел file:// перед укажете другой порт, то по умолчанию будет
тем, как мы начали работать с веб-сервером. использоваться порт 80.
дальше 171
время для маленькой загадки
История об относительных
и абсолютных путях
Перед корпорацией PlanetRobots, Inc. была поставлена задача
разработать сайт для каждой из их двух компаний: PlanetRobot
Home и PlanetRobot Garden. Было решено заключить договор
с двумя разными фирмами. Фирма RadWebDesign, производящая
впечатление имеющей большой опыт в такой работе, взялась
за сайт для отдела Home и писала его, используя при созда-
Пятиминутная нии внутренних ссылок только URL-адреса (в конце концов,
они выглядят более сложно, а значит, они лучше). Фирма
головоломка CorrectWebDesign, имеющая меньше опыта в написании
сайтов, но с хорошо обученными специалистами, взялась
за написание сайта для PlanetRobot Garden и для создания
ссылок на все страницы внутри сайта использовала относи-
тельные пути.
Когда создание обоих проектов подходило к концу, в обе фирмы
позвонили из корпорации PlanetRobots со срочным сообщени-
ем: «На нас был подан иск по поводу нарушения права собствен-
ности на торговую марку, поэтому мы меняем доменное имя
на RobotsRUs. Теперь нашим новым веб-сервером будет www.
robotsrus.com». В CorrectWebDesign сделали пару небольших
изменений, что заняло около пяти минут, и все было готово для
презентации сайта в корпорации RobotsRUs. А программисты
компании RadWebDesign работали до 4 часов утра, чтобы вне-
сти соответствующие изменения в веб-страницы, и, к счастью,
успели завершить работу ко времени проведения презентации.
Однако во время демонстрации сайтов произошло ужасное:
когда участник команды RadWebDesign демонстрировал сайт,
он щелкнул на ссылке и появилась ошибка 404 «Страница не
найдена». Недовольный генеральный директор корпорации
RobotsRUs предложил им подумать над тем, чтобы поменять на-
звание своей фирмы с RadWebDesign на BadWebDesign, и спро-
сил представителей фирмы CorrectWebDesign, в состоянии ли
они дать консультацию по поводу исправления главного сайта.
Что же произошло? Как в RadWebDesign допустили такой ляп, если
нужно было поменять всего лишь имя веб-сервера?
172 глава 4
соединение
Теперь, когда у нас есть атрибут title, давайте посмотрим, как им будут
пользоваться ваши посетители. В разных браузерах атрибут title применяется
по-разному, но в большинстве случаев появляется всплывающая подсказка.
Добавьте изменение, описанное выше, в файл index.html и обновите
страницу, чтобы посмотреть, как это работает в браузере.
дальше 173
передовая практика для ваших ссылок
-
Заголовок отображает
дсказ-
ся во всплывающей по
узеров.
ке в большинстве бра
затель
Просто наведите ука
по дож ди-
мыши на ссылку и
лыва-
те, пока появится всп
ющая подсказка.
174 глава 4
соединение
дальше 175
создание пункта назначения
176 глава 4
соединение
Ïîèñê çàãîëîâêà
Чтобы найти заголовок, нужно просмотреть
HTML-код страницы wickedlysmart.com/
buzz. Как? Почти во всех браузерах есть пункт
меню View Source (Посмотреть источник). Итак,
подождите, пока страница полностью загрузит- Все о к
офеи не
ся в окне браузера, выберите указанный пункт,
и вы увидите HTML-код для этой страницы.
дальше 177
ссылаемся на якорь назначения
178 глава 4
соединение
часто
Задаваемые
вопросы
В: Если в элементе два атрибута, важна О: Вы можете использовать любые ком- О: Вы не сможете этого сделать. Если нет
ли их очередность? Например, должен бинации строчных и прописных символов якоря (другими словами — нет элемента
ли атрибут title всегда следовать за href? в атрибуте id. Просто убедитесь, что всегда с id), то нельзя указать браузеру перейти
одинаково используете строчные и пропис- в определенное место на странице. Вы мо-
О: Порядок следования атрибутов в эле- ные буквы в атрибутах href и якорях id (по- жете связаться с автором страницы и по-
менте не имеет значения (в ином случае этому часто лучше использовать все строч- просить его добавить якорь (а еще лучше
у нас бы непрерывно болела голова от ные буквы). Если вы непоследовательны рассказать ему, как это сделать!).
этого), поэтому используйте любую оче- в этом, не ожидайте, что ваши ссылки будут
редность атрибутов. правильно работать во всех браузерах. Имя В: Могу ли я использовать такой id, как
якоря должно быть уникальным на вашей «Jedi Mindtrick», или id должен состоять
В: Как создать всплывающую подсказку странице. из одного слова?
для элемента, не являющегося <a>?
В: А могу ли я создать ссылку на якорь О: Чтобы ваши страницы работали согла-
О: Атрибут title можно добавить в любой внутри одного документа? сованно с большинством браузеров, всегда
элемент, поэтому если вам потребуется со-
здать всплывающую подсказку, скажем, для
О: Конечно. Вверху страницы (например, начинайте id с буквы (A–Z или a–z), а затем
пишите любые символы (буквы, цифры,
заголовка, то вы сможете добавить атрибут в ее заголовке) часто задается якорь «top»,
дефисы, нижние подчеркивания, двоеточия
а внизу указывается ссылка «На начало
title в свой открывающий тег <h1> точно или точки). Итак, вы не можете дать имя
страницы». Кроме того, часто в длинных
так же, как мы это делали в случае с <a>. «Jedi Mindtrick», так как нельзя использовать
документах используется содержимое всей
Существует ряд элементов, которые исполь- пробелы, но это беда небольшая, потому
страницы. Например, чтобы сослаться на
зуют атрибут title для кое-чего большего, что вы можете написать «Jedi-Mindtrick»,
якорь «top» на этой же странице, нужно напи-
чем просто всплывающая подсказка, однако «Jedi_Mindtrick», «JediMindtrick» и т. д.
сать <a href=”#top”>На начало страницы</a>.
именно всплывающая подсказка является
наиболее распространенной целью. В: Зачем нам было нужно добавлять В: Как я могу сказать другим, на какие
якоря можно сослаться?
В: Атрибут id можно добавить в любой «/index.html» в URL-адрес страницы «Все
элемент?
о кофеине», — чтобы создать ссылку на
якорь? А нельзя ли было просто написать
О: Нет никакого особенного способа сде-
лать это, выбор пункта меню View Source
О: Да, в любой. Вы можете создать ссылку http://wickedlysmart.com/buzz#Coffee?
(Показать источник) остается самым ста-
в середине параграфа, добавив id в эле- О: Нет, это не срабатывает, поскольку бра- рым и удобным способом для обнаружения
мент <em>, например. Вряд ли вам будет узер добавляет замыкающий слеш в конец якорей, на которые можно ссылаться.
часто требоваться так поступать, однако,
если понадобится, вы сможете это сделать.
URL-адреса за вас, в результате чего может
оказаться заменена id-ссылка. Однако вы
В: В качестве содержимого элемен-
могли бы написать http://wickedlysmart.com/ та <a> должны использоваться только
В: А можно сослаться на ссылку, до- buzz/#Coffee, что дало бы тот же результат, слова?
бавив атрибут id в элемент <a> в якоре? что и ссылка, которую мы создали с исполь-
зованием «index.html». Это пригодится, если О: Нет. Элемент <a> всегда позволял соз-
О: Да! вы не будете знать, называется ли файл, давать ссылки из слов и изображений (строч-
выдаваемый по умолчанию, «index.html». ное содержимое), а недавно был обновлен
В: Я заметил, что в качестве имен якорей (в HTML5), благодаря чему появилась воз-
вы использовали «chai» со всеми строч- В: А если в веб-странице не предусмо- можность создавать ссылки также и из блоч-
ными буквами, а для «Все о кофеине» трено якорей, но мне нужно сослаться ных элементов вроде <p> и <blockquote>!
указали «Coffee» с прописной буквой «C». на определенную часть страницы, как Таким образом, <a> можно использовать для
Это важно? это сделать? создания ссылок из всевозможных вещей.
дальше 179
все об относительных и абсолютных путях
История об относительных
и абсолютных путях
Итак, как же компания RadWebDesign так провалилась
о
на презентации? Поскольку они использовали для Упс… Кто-т
атрибутов href URL-адреса вместо относительных забыл напе ча -
нце
ссылок, им пришлось редактировать и менять каждую тать «s» в ко
отдельную ссылку с http://www.planetrobots.com имени.
на http://www.robotsrus.com. В чем же они ошиб-
Пятиминутная лись? В 3 часа утра кто-то зазевался и случайно
напечатал http://www.robotsru.com (и по
головоломка воле случая это оказалась та же ссылка, на ко-
торой генеральный директор щелкнул на пре-
зентации).
В CorrectWebDesign, напротив, использовали от-
носительные пути во внутренних ссылках. Напри-
мер, ссылка со страницы с постановкой задачи ком-
180 глава 4
соединение
Все о кофеине
Генеральный
директор
хочет, чтоб
ы после
того, как вы
выберете
ссылку «Все
о кофеи-
не», открыва
лась но-
вая страница 181
. дальше
размещаем окна
Разоблачение
атрибута target
Интервью, взятое на этой неделе.
Использование target считается плохим тоном?
Head First: Привет, Target, мы так рады, что ты сможет заходить всякий раз, когда ему потребуется.
смог с нами пообщаться! В отличие от открытия нового окна данный подход
Target: Я тоже рад, что я здесь. Приятно осознавать, является не таким дезориентирующим.
что вы все еще интересуетесь мною. Однако как это поможет в случае с экранными
Head First: А почему ты так говоришь? дикторами?
Target: Ну, если честно, я уже не такой популярный, Target: Ты имеешь в виду браузеры, используемые
как раньше. людьми со слабым зрением?
Head First: А как ты думаешь, почему так случилось? Head First: Точно. В некоторых экранных дикторах
при открытии нового окна играет музыка, а в других
Target: Думаю, пользователи теперь хотят управ- такой момент просто игнорируется или они немед-
лять тем, когда открывать окна. Они не всегда хотят, ленно делают новое окно текущим. В любом случае
чтобы в самый неожиданный момент открывалось это будет сбивать с толку тех, кто не может видеть,
новое окно. что происходит на экране. Я понятия не имею, как
Head First: Ну, это действительно может создавать они обрабатывают вкладки.
неудобство в работе. Нам поступали жалобы от Target (вздыхая): Да, мы еще не преуспели в обе-
людей, у которых в конце концов появлялось так спечении хороших инструментов, отвечающих
много окон на экране, что они не могли найти ис- нуждам всех людей, особенно слабовидящих. При
ходную страницу. этом, похоже, нам требуется способность «пере-
Target: Но ведь это совсем не сложно — справить- носить» пользователей на страницы вне нашего
ся с окнами... Нужно просто нажать маленькую сайта, что многие сайты делают путем открытия
кнопку Закрыть. Что тут трудного?! нового окна (или вкладки, если браузер это под-
держивает).
Head First: Верно, но пользователь может запутать-
ся, если не знает, что новое окно было открыто. Head First: Точно. Нам нужен ты, однако нам так-
Иногда новое окно полностью закрывает старое же нужно принять дополнительные меры, чтобы
и сложно понять, что произошло. пользователи не запутались.
Target: Что ж, браузеры становятся лучше в данном Target: Надеюсь, разработчики веб-стандартов
плане. и браузеров смогут улучшить текущую ситуацию.
Head First: Как это? Head First: Похоже, пока нам будет нужно просто
использовать тебя в подходящих ситуациях, не
Target: Браузеры зачастую открывают внешние
забывать о людях со слабым зрением и не злоупо-
страницы на новых вкладках в том же самом окне
треблять твоими услугами.
вместо того, чтобы открывать их в абсолютно но-
вых окнах. Target: Верно. Ты помог немного облегчить тяжесть
на моей душе; спасибо за предоставленную возмож-
Head First: Ах, да, это поможет, поскольку будет
намного меньше путаницы, когда пользователь ность высказаться!
увидит, что открылась новая вкладка, на которую Head First: Всегда пожалуйста, Target!
дальше 183
повторим выученное
ÊËÞ×ÅÂÛÅ
ÌÎÌÅÍÒÛ
Лучший способ разместить что-либо в Сети — Абсолютный путь — это путь от корневой
найти хостинговую компанию, которая раз- папки к файлу.
местит на своем сервере ваши веб-страницы. index.html и default.htm — примеры
Доменное имя — это уникальное имя, напри- страниц, выдаваемых по умолчанию. Если
мер amazon.com или starbuzzcoffee.com, вы указываете каталог без имени файла, то
используемое для распознавания сайта. веб-сервер будет искать именно такие стра-
ницы, чтобы вернуть их браузеру.
Хостинговая компания может создать один
или несколько веб-серверов в вашем доме- Чтобы сослаться на другие веб-страницы,
не. Часто серверы называются www. можете использовать либо относительные
Протокол передачи файлов (FTP) — общее пути, либо URL-адреса в атрибуте href эле-
мента ‹a›. Для других страниц с вашего сай-
средство пересылки веб-страниц и их со-
та лучше использовать относительные пути,
держимого серверу.
а для внешних сайтов — URL-адреса.
Такие клиенты, как Fetch для Mac или WS_FTP
Применяйте атрибут id для создания якоря
для Windows, могут упростить использова-
на странице. Используйте после него сим-
ние FTP, предоставляя графический интер-
вол «#» с именем якоря, чтобы сослаться на
фейс пользователю.
эту область вашей страницы.
URL — это унифицированный указатель ре-
Для удобства работы со страницей приме-
сурса, или веб-адрес, который может быть
няйте атрибут title, чтобы предоставить
использован для идентификации какого-ли-
пользователю описание ссылки элемента ‹a›.
бо ресурса в Сети.
Используйте атрибут target, чтобы открыть
Обычный URL-адрес состоит из протокола,
ссылку в новом окне браузера. Но не забы-
имени сайта и абсолютного пути к ресурсу.
вайте, что этот атрибут может нести с собой
HTTP — это запросно-ответный протокол, некоторые проблемы для пользователей
используемый для пересылки веб-страниц множества различных устройств и альтер-
между веб-сервером и вашим браузером. нативных браузеров.
Протокол file:// применяется браузером
для чтения страниц с вашего компьютера.
184 глава 4
соединение
Возьми в руку карандаш
Решение
Вы ждали достаточно долго. Пришло время протестировать ваш URL-адрес. Прежде чем это сделать, заполните
бланк (см. ниже) и введите свой URL (чего вы еще не делали). Если у вас возникнут какие-либо проблемы,
то самое время обратиться в хостинговую компанию, чтобы во всем разобраться. Если же вы так и не вос-
пользовались услугами хостинговой компании, все равно заполните бланк для сайта www.starbuzzcoffee.
com и введите URL в своем браузере.
B
http://www.earlsautos.com/directions.html
C
http://www.earlsautos.com/cars/new/
D http://www.earlsautos.com/cars/used/inventory.html
E http://www.earlsautos.com/cars/new/images/minicooper.gif
дальше 185
решение упражнений
<html>
<head>
<title>Кафе Starbuzz</title>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Напитки кафе Starbuzz</h1>
<h2>Домашняя смесь, $1,49</h2>
<p>Мягкая, нетерпкая смесь различных сортов кофе из Мексики,
Боливии и Гватемалы.</p>
<h2>Капучино, $1,89</h2>
<p>Смесь эспрессо и кипяченого молока с добавлением пены.</p>
-
Добавьте атри <h2>Чай, $1,85</h2>
-
бут title к ссыл <p>Ароматный напиток из черного чая, специй, молока
ке на стра ни цу и меда.</p> Вынесите «Ознакомьтесь с»
mission.html. <p>
за пределы элемента ‹a›.
Ознакомьтесь с <a href="mission.html"
title="Ознакомьтесь с важной задачей кафе Starbuzz“>нашей задачей</a>
<br>
Читайте <a href="http://wickedlysmart.com/buzz"
title="Читайте все самое важное о кофеине">Все о кофеине</a>здесь.
</p>
</body>
</html>
5 добавление изображений на страницы
Знакомство с медиа
Улыбнитесь и скажите «сыр». Теперь улыбнитесь и скажите «gif», «jpg» или «png» —
это те форматы файлов, которые вы выберете, создавая рисунки для Сети. В этой главе вы
узнаете все о том, как добавить на веб-страницу свой первый медиафайл — изображение.
У вас есть парочка цифровых фотографий, которые вы хотите поместить в Сеть? Никаких
проблем. У вас есть логотип, который нужен на веб-странице? И это легко. Или, может быть,
сначала вы хотите более близко познакомиться с элементом <img>? К концу этой главы
вы будете знать все мельчайшие подробности того, как использовать этот элемент и его
атрибуты. Вы также узнаете, как этот небольшой элемент побуждает браузер делать такую
серьезную работу по поиску и отображению ваших картинок.
187
изображения в вашем html
188 глава 5
добавление изображений на страницы
ен файл elixir.html»
нуж . <html>
<head>
не
<title>Another
<html>
Page</title>
<head>
</head>
М
<title>Head
<body>
First Lounge
<h1>Another
Elixirs</title>
« Page</h1>
</head>
...
<body>
</html>
<h1>Our <html>
<head>
Elixirs</h1>
<title>Another
... Page</title>
</html> </head>
<body>
<h1>Another
Page</h1>
...
</html>
<html>
<head>
<title>Head First Lounge
Elixirs</title>
</head>
«Н
<body>
<h1>Our Elixirs</h1>
...
</html>
аше
л, д
ержи его». Веб-сервер
Браузер
,
ется
к аж е нужен файл gre
, ещ en
О мне .j p <html>
«
<html>
<head> <head>
<title>Another <title>Another
<html> Page</title>
Page</title>
g»
<head> </head>
</head> <body>
<title>Head
<body> <h1>Another
First Lounge Page</h1>
<h1>Another
Elixirs</title> ...
.
Page</h1> </html>
</head>
...
<body>
</html>
<h1>Our
Elixirs</h1>
...
</html>
«Н
аше
л, д
ержи его». Веб-сервер
Браузер
дальше 189
как браузеры загружают изображения
Отображается green.jpg.
,
тся еще файл lig
же htb
ка нужен lu e
е .j
,
н
<html>
«О
<head> <html>
<title> <head>
м
My Playlist <title>Another
<html> Page</title>
</title>
pg
<head> <head> </head>
<body> <body>
<title>Head
<h1>Kick’n Tunes <h1>Another
First Lounge </h1> Page</h1>
».
Elixirs</title> <p>BT - Satellite: ...
nice downbeat tune. </html>
</head>
</p>
<body> <p>
<h1>Our Elixirs</ ...
h1>
...
</html>
«Н
аше
л, д
ержи его». Веб-сервер
Браузер
,
тся еще файл bl
же ue.
ка нужен j pg
е ».
,
н
<html>
«О
<head> <html>
м
<title> <head>
My Playlist <title>Another
<html> Page</title>
</title>
<head> <head> </head>
<body> <body>
<title>Head
<h1>Kick’n Tunes <h1>Another Page</
First Lounge </h1> h1>
«Н
аше
л, д
ержи его».
Веб-сервер
Рисунок
lightblue.jpg
Браузер
отображен.
190 глава 5
добавление изображений на страницы
Подходит для полутоновых нера- PNG подходит для изображений Как и PNG, GIF подходит для изо-
стровых изображений, таких как с несколькими чистыми цветами и бражений с несколькими чистыми
фотографии. таких штриховых изображений, как цветами и таких штриховых изобра-
логотипы, аппликации. Кроме того, жений, как логотипы, аппликации.
Может выводить рисунки с большим его хорошо применять, если в изо- Кроме того, его хорошо применять,
количеством различных цветов, до бражении есть небольшой текст. если в изображении есть небольшой
16 миллионов. текст.
PNG может выводить рисунки с мил-
Это формат «с потерями», потому лионами разных цветов. PNG бывает GIF может выводить рисунки с коли-
что при уменьшении размера файла трех видов: PNG-8 PNG-24 и PNG-32 чеством цветов, не превышающим
теряется некоторая информация об в зависимости от количества цветов, 256.
изображении. которое вам необходимо отобразить.
GIF тоже является форматом «без
Не предусматривает работы с про- PNG сжимает файл, чтобы умень- потерь».
зрачностью. шить его размер, но при этом не те-
ряется никакая информация. Таким GIF тоже предусматривает рабо-
Файлы получаются меньше по раз- ту с прозрачностью, однако дает
образом, это формат «без потерь».
меру, что обеспечивает более бы- возможность установить «прозрач-
струю загрузку веб-страниц. Дает возможность установить «про- ность» только для одного цвета.
зрачность» для цветов, чтобы сквозь
Отсутствует поддержка анимации. Файлы имеют тенденцию получаться
изображение было видно все, что
находится под ним. больше по размеру, чем их JPEG-эк-
виваленты.
Файлы имеют тенденцию получаться
больше по размеру, чем их JPEG-эк- Поддерживает анимацию.
виваленты, однако могут оказаться
меньше или больше GIF-файлов в
зависимости от количества исполь-
зуемых цветов.
дальше 191
различия между gif, jpeg и png
Head First: Всем привет. По-моему, это в первый раз, GIF: Все это звучит как-то сложно — твоим пользователям
когда мне дают интервью сразу три гостя! приходится запоминать больше.
JPEG: Здравствуй, GIF и PNG, вам тоже привет. PNG: Что ж, GIF, разве не было бы прекрасно, если бы
мы смогли выводить все изображения с использованием
GIF: Не понимаю, почему я должен сидеть здесь на одном
лишь 256 цветов? Но это невозможно.
диване вместе с этими субъектами. Все знают, что GIF —
это основной формат изображений в Интернете. GIF: Штриховые изображения, иллюстрации и тому по-
добное зачастую очень хорошо смотрятся с 8-битовой
JPEG: Ха! Как только ты научишься хорошо показывать
глубиной цвета, которую я могу отлично обеспечивать.
такие сложные изображения, как фотографии, то, воз-
можно, люди снова начнут воспринимать тебя серьезно, JPEG: Ха, когда ты в последний раз видел какую-нибудь
но я не могу понять, как это у тебя получится с исполь- фотографию, сохраненную в формате GIF? Люди уже
зованием всего лишь 256 цветов. знают о твоих недостатках, GIF.
Head First: PNG, можешь помочь нам здесь разобраться? GIF: А я говорил, что поддерживаю прозрачность? Ис-
Ты до сих пор сидел как-то тихо… пользуя меня, можно сделать изображение просвечива-
ющимся.
PNG: Да, легко вести себя спокойно, когда знаешь, что
ты — номер один. Я умею выводить сложные изображения, PNG: В этом плане ты не можешь соперничать со мной,
как JPEG, одновременно являясь форматом без потерь, GIF. Я позволяю устанавливать прозрачность для любого
как GIF. Во мне воплотилось лучшее из двух миров. числа цветов, а ты ограничен одним цветом.
Head First: Без потерь? GIF: Какая разница — один цвет или много? Один цвет —
это все, что нужно.
PNG: Верно; при сохранении изображения в формате
без потерь не утрачивается никакой информации или PNG: Нет, если требуется, чтобы на изображении име-
детали этого изображения. лись прозрачные области со сглаживанием!
GIF: Я тоже! Я ведь тоже формат без потерь. GIF: Что?
Head First: Что ж, тогда зачем кому-то может понадо- PNG: Видишь ли, поскольку я позволяю устанавливать
биться формат с потерями? прозрачность для более чем одного цвета, прозрачным
областям можно придавать красивые плавные границы.
JPEG: Всегда приходится искать оптимальное соотноше-
ние. Иногда требуется небольшой файл, который можно Head First: А ты так можешь, JPEG?
быстро загрузить, при этом изображение получается JPEG: Нет, но я не очень-то об этом беспокоюсь; вам будет
прекрасного качества. Нам не всегда нужно идеальное нужно так поступать лишь с немногими фотографиями.
качество. Люди довольны качеством JPEG-изображений. Это для логотипов.
PNG: Конечно, конечно, но смотрел ли ты когда-нибудь PNG: Хммм, а я вижу, как мой эффект прозрачности
на штриховые изображения, логотипы, небольшой текст используется повсюду в Интернете.
в изображении, чистые цвета? С JPEG они совсем не так
Head First: Что ж, в следующий раз я дважды подумаю
хорошо выглядят.
перед тем, как устраивать интервью с участием сразу трех
Head First: Постойте-ка, JPEG поднял интересный во- персон, тем не менее, как мне кажется, вы, GIF и PNG,
прос. GIF и PNG, ваши файлы большие по размеру? отлично годитесь для логотипов и изображений с текстом;
PNG: Надо признать, что размер моих файлов иногда ты, JPEG, прекрасно подходишь для фотографий; PNG,
оказывается большим, однако меня существует три вида, ты придешься кстати, если нам потребуется прозрачность,
что дает вам возможность выбрать оптимальный размер а также обилие цветов. До свидания!
файлов для своих изображений: PNG-8, PNG-24 и PNG-32. PNG, JPEG, GIF: Подожди, нет, постой!!!
192 глава 5
добавление изображений на страницы
дальше 193
знакомство с элементом <img>
<img src="images/drinks.gif">
194 глава 5
добавление изображений на страницы
<img src="http://www.starbuzzcoffee.com/images/corporate/ceo.jpg">
Это упражнение на самом деле имеет отношение к карандашам (и к рисункам). В нем поднимается один
простой вопрос. У вас есть обычный и совершенно новый карандаш. Если вы нарисуете сплошную
линию, исписав все острие карандаша, то какой длины будет эта линия?
Какое это имеет отношение к изображениям? Чтобы найти ответ, вам придется написать небольшой
HTML-код. Ответ на этот простой вопрос содержится в изображении, которое вы найдете по URL-адресу
http://wickedlysmart.com/hfhtmlcss/trivia/pencil.png. Ваша задача — добавить изображение
в приведенный код и получить ответ:
<html>
<head>
<title>Возьми в руку карандаш, простой вопрос</title>
</head>
<body>
<p>Линию какой длины можно нарисовать обычным карандашом?</p>
<p>
ием.
</p> Поместите сюда элемент с изображен
</body>
</html>
дальше 195
вопросы по работе с изображениями
часто
Задаваемые
вопросы
В: Итак, использовать элемент <img> В: Насчет примера про загрузку изобра- В: Что делает JPEG-фотографию лучше
достаточно легко. Он просто дает способ жений на веб-странице... Когда я загру- фотографии GIF либо PNG, или GIF- либо
указать месторасположение изображе- жал веб-страницу, я не заметил, чтобы PNG- логотип лучше логотипа JPEG?
ния, которое должно быть выведено на изображения загружались по очереди.
странице? Почему? О: Понятие «лучше» обычно определяет-
ся как комбинация качества изображения
О: Да, но это только краткое описание. О: Браузер часто извлекает все изображе- и размера файла. JPEG-фотография чаще
Далее мы также поговорим о некоторых атри- ния сразу. Это значит, что он делает запро- всего намного меньше, чем фото в формате
бутах, которые применяются вместе с этим сы на несколько рисунков одновременно. PNG или GIF такого же качества, в то время
элементом. Затем вы узнаете, как можно С учетом скорости компьютеров и сетей все как логотип PNG или GIF обычно выглядит
использовать CSS, чтобы поменять стиль это происходит достаточно быстро, поэтому лучше и имеет меньший размер, чем тот же
изображения. вы обычно видите страницу сразу со всеми логотип в формате JPEG.
Но есть также много всего, что нужно знать изображениями.
о самих изображениях. Зачем нужны различ- В: Как мне выбрать между GIF и PNG?
ные форматы? Когда нужно использовать В: Если я вижу на веб-странице изобра- Они вроде бы очень схожи.
один формат, а когда другой? Насколько жение, как мне определить его URL-адрес,
большими должны быть рисунки? Как под- чтобы можно было на него сослаться? О: PNG — это графический формат,
готовить изображение к добавлению на который появился позже остальных. Он
веб-страницу? О: В большинстве браузеров есть возмож- достаточно интересен, так как может под-
ность щелкнуть правой кнопкой мыши на держивать как фотографии, так и логоти-
В: Мы учили, что пустые элементы — изображении, чтобы появилось контекстное пы. Кроме того, он предоставляет больше
это элементы без содержимого или за- меню. Оно будет содержать пункт Copy Image возможностей по работе с прозрачностью,
крывающего тега. Мы также учили, что Address (Скопировать адрес изображения) чем GIF. Сейчас PNG поддерживается боль-
элемент <img> — это элемент без содер- или Copy Image Link (Скопировать ссылку на шинством всех основных браузеров, чего
жимого. Но разве он не имеет содержи- изображение), выбор которых позволит по- нельзя было сказать еще несколько лет
мого (изображение)? местить URL-адрес в буфер обмена. Второй назад. Чтобы выбрать между GIF и PNG,
способ найти URL — щелкнуть правой кнопкой необходимо принимать во внимание ряд
О: Если говорить точнее, то элемент без мыши и выбрать в меню пункт Open Image in аспектов. Во-первых, PNG обеспечивает
содержимого — это элемент, не имеющий New Window (Открыть изображение в новом чуть более лучшее сжатие, чем GIF, так
содержимого на HTML-странице, которое окне). В результате изображение откроется что если речь будет идти об изображении
заключено между закрывающим и открыва- в окне браузера. Затем вы сможете взять с одинаковым количеством цветов (то есть
ющим тегами. Конечно, изображение — это URL рисунка из адресной строки браузера. не более 256), то ваш PNG-файл может
содержимое, но элемент <img> лишь ссыла- Последний способ — использовать пункт получиться меньше по размеру. Если вам
ется на него. Изображение само по себе не меню браузера View Source (Посмотреть потребуется больше цветов, чем может
является частью HTML-страницы. Оно как источник) и просмотреть HTML-код. Однако предложить GIF, а JPEG окажется не ва-
бы заменяет элемент <img>, когда браузер помните, что ссылка на изображение, кото- шим вариантом (например, вам будет нужна
отображает страницу. И не забывайте, что рую вы найдете, может быть относительной прозрачность), то PNG, несомненно, будет
HTML-страницы исключительно текстовые, и вам придется «реконструировать» URL, подходящим выбором. Однако если вам
поэтому изображения никогда не смогут быть используя доменное имя сайта и путь к изо- потребуется анимация, то в этом случае
их непосредственной частью. бражению. следует использовать GIF, поскольку он яв-
ляется единственным широко поддерживае-
мым форматом, совместимым с анимацией.
196 глава 5
добавление изображений на страницы
<img src="http://wickedlysmart.com/hfhtmlcss/trivia/pencil.png"
alt="Обычный новый карандаш позволяет нарисовать линию длиной 35 миль.">
В этом упражнении вы увидите, как браузер работает с атрибутом alt, когда появ-
ляется «отсутствующее» изображение. Теоретически, если рисунок не может быть
найден, вместо него выводится значение атрибута alt. Однако не все браузеры
делают это, поэтому ваши результаты в разных браузерах могут различаться.
Рассмотрим, что вам нужно сделать.
1 Возьмите HTML-код из предыдущего упражнения.
2 Подкорректируйте элемент <img> так, чтобы в нем был атрибут alt
со значением «Обычный новый карандаш позволяет нарисовать
линию длиной 35 миль».
3 Поменяйте имя файла с изображением с pencil.png на broken.png.
На самом деле такого файла не существует, поэтому вы получите
«отсутствующее» изображение.
4 Обновите страницу в браузере.
дальше 197
атрибуты элемента <img>
В обоих атрибутах размер задается в пикселах. Если вы не знаете, что такое пикселы, то
сможете прочитать о них немного позже в этой главе. Атрибуты width и height можно
задавать для любого изображения. Если не указать их, то браузер автоматически опреде-
лит размер изображения перед тем, как вывести его на экран.
часто
Задаваемые
вопросы
В: Зачем вообще нужны эти атрибуты, ствовали новым размерам. Многие люди В: Вы много раз говорили, что HTML
если браузер все равно может вычислить делают так, когда им нужно вывести в брау- предполагается использовать для струк-
размер изображений? зере существующее изображение, уменьшив туризации, а не для дизайна. А эти атрибу-
или увеличив его реальный размер. Тем не ты больше похожи на те, что применяются
менее, как вы убедитесь чуть позже, есть для оформления веб-страниц. Я не прав?
О: Если вы укажете ширину и высоту изо- множество причин не использовать для этого
бражения в HTML-коде, то многие браузеры атрибуты width и height.
смогут распланировать структуру страницы О: В зависимости от того, как вы использу-
перед тем, как ее отображать. В ином слу- ете эти атрибуты. Если вы просто устанав-
чае браузеру придется менять планировку В: Я должен использовать эти атрибуты ливаете нужные размеры для изображения,
страницы после того, как он узнает размеры только в паре? Могу ли я просто указать то это действительно лишь информация.
изображения. Помните, что браузер загружа- ширину или высоту? Однако если вы используете width и height,
ет изображения уже после того, как загрузит чтобы изменить размеры изображения
HTML-файл и начнет отображать страницу. в браузере, то можно говорить, что вы при-
И если вы отдельно не укажете размер изо- О: Можете, но, указывая только один раз- меняете их для оформления веб-страницы.
бражения, то браузер не будет его знать до мер, вы оставляете для браузера такой же В этом случае, вероятно, лучше подумать об
тех пор, пока не загрузит рисунок. обьем работы, как если бы вообще не ука- использовании CSS, что позволит добиться
зали ни ширину, ни высоту (и не так уж часто тех же результатов.
Вы также можете указать значения высоты бывает полезно указывать лишь высоту или
и ширины, которые меньше или больше, чем лишь ширину, если только вы не хотите мас-
размеры изображения, и браузер установит штабировать изображение до определенной
пропорции рисунка так, чтобы они соответ- высоты или ширины соответственно).
198 глава 5
добавление изображений на страницы
Ñîçäàíèå ñàéòà äëÿ ñàìûõ áîëüøèõ ôàíàòîâ: myPod iPhone – тоже классная
Обладатели iPod очень их любят и берут с собой вещь!
повсюду. Представьте себе создание нового сайта
под названием myPod, который будет содержать
фотографии ваших друзей и их iPod в известных
местах по всему миру.
Что вам нужно, чтобы приступить к делу? Всего
лишь некоторые знания по HTML, парочка изо-
бражений и любовь к вашему iPod.
Мы уже написали кое-какой HTML-код для этого
сайта, но еще не добавили рисунки. Именно тут
вы приступаете к работе. Но перед тем, как вы
доберетесь до рисунков, позвольте нам немного
вам помочь; найдите папку chapter5 в файлах с при-
мерами для книги. Откройте находящуюся там
папку mypod. Вот что вы увидите внутри. Ìîé iPod â Ñèýòëå! Çäåñü âèäíà áàøíÿ
Ñïåéñ Íèäë. È íå âèäíî 628 êàôå
Вы найдете это
в папке chapter5. кое-ка-
Мы уже написали
я сайта
кой HTML-код дл
ете его
myPod. Вы найд
x.htm l.
<html>
в файле inde
.
mypod .
.
</html>
index.html
seattle.jpg
рочку
найдете еще па
Мы будем использовать Примечание: вы обра-
ypod, но пока не
папку photos для хране- папок внутри m
имания.
ния рисунков сайта. щайте на них вн
дальше 199
фан-сайт для ipod
код. Пока
да готовый CSS-
<html> Мы вставили сю что он
е его таким. Все,
<head> просто оставьт це свет-
идает страни
<title>myPod</title> делает, — это пр чнем
Обещаем, что на
лый зеленый фон.
<style type="text/css">
!
body { background-color: #eaf3da;} рез парочку глав
</style> разбирать CSS че
</head>
<body> Этот HTML-код выглядит привычно,
<h1>Добро пожаловать в myPod</h1> так как использованы основные строи-
<p> тельные блоки: ‹h1›, ‹h2› и ‹p›.
Добро пожаловать туда, где можно похвастаться своим iPod и рассказать, где
вы с ним были. Хотите повеселиться вместе с нами? Все, что вам для этого
нужно, — это любой iPod: от раннего iPod Classic до самого современного
iPod Nano, от самого маленького iPod Shuffle до самого большого iPod Video,
а также цифровая камера. Просто сфотографируйте свой iPod в любимом месте,
и мы будем рады поместить этот снимок на сайте myPod. Итак, чего же вы ждете?
</p>
<h2>Сиэтл, Вашингтон</h2>
<p>
Я и мой iPod в Сиэтле! Здесь видна башня Спейс Нидл.
И не видно 628 кафе.
</p>
</body>
</html>
200 глава 5
добавление изображений на страницы
</p>
<h2>Сиэтл, Вашингтон</h2>
<p>
Я и мой iPod в Сиэтле! Здесь видна башня Спейс Нидл.
И не видно 628 кафе.
</p>
</body>
</html>
дальше 201
вставка изображений
з-
р. Окно имеет ра
Вот наш браузе
статочно част
о .jpg,
мер, который до е s e attle
практике. жени айл
применяется на обра ивф
в о т из а в и л
А ы доб
рое в
кото l.
.htm
index
Это полный размер изображения,
который больше размера окна
браузера... намного больше.
Можно использовать
линейку прокрут-
ки, чтобы увидеть
оставшуюся часть
изображения, но разве
не было бы лучше,
если бы мы смогли
целиком поместить
это изображение
аузера —
Ширина окна бр в окне браузера?
кселов.
примерно 800 пи
О: Веб-страницами с большими изображениями пользоваться очень В: Какова зависимость размера изображения на экране от ко-
неудобно. Дело не только в том, что посетители не могут видеть весь личества пикселов?
рисунок целиком, — само по себе использование линейки прокрутки
обременительно. Кроме того, при работе с большими изображениями О: Примерно такова: 96 пикселов на каждый дюйм, хотя с современ-
сервер и браузер обмениваются большими объемами данных, что ными мониторами и ретинальными дисплеями высокого разрешения
занимает много времени и может привести к тому, что ваша страница это значение может быть и выше. Мы привыкли использовать стан-
будет медленно загружаться. дартное разрешение 72 пиксела на дюйм (ppi – pixels per inch), однако
для манипуляций в том, что касается современных дисплеев, была
В: Почему я не могу просто использовать атрибуты width придумана концепция «CSS-пиксел». CSS-пиксел — это 1/96 дюйма
и height, чтобы поменять размеры изображений на странице? (96 пикселов на дюйм). Таким образом, в случае с изображением
3 дюйма шириной и 3 дюйма высотой вы зададите следующие раз-
О: Браузеру нужно извлечь изображение полностью перед тем, как меры: 96 (пикселов) × 3 (дюйма) = 288 × 288 пикселов.
уменьшить его, чтобы оно поместилось на вашей странице.
В: Хорошо, а насколько большими я могу делать свои рисунки?
В: Вы сказали, что ширина окна браузера 800 пикселов. Что
это означает? О: Лучше задавать ширину рисунков не больше чем 800 пикселов.
Конечно, не исключено, что вы захотите, чтобы изображения были
О: Экран монитора состоит из миллионов точек, называемых намного меньше (или несколько больше), — это зависит от того, для
пикселами. Вы сможете их увидеть, если посмотрите на монитор чего вы их используете. Например, изображение — это логотип для
с очень близкого расстояния. В то время как размеры экранов мо- вашей страницы. В этом случае вы, скорее всего, захотите, чтобы
ниторов и их разрешения имеют тенденцию различаться (у некото- он был маленький, но тем не менее читаемый. Ширина логотипов,
рых людей мониторы большие, у некоторых маленькие), значение как правило, колеблется между 100 и 200 пикселами. И в конечном
где-то в промежутке между 800 и 1280 пикселами — это наиболее счете ответ на ваш вопрос зависит от дизайна страницы. Для фото-
часто используемая ширина окна браузера, которую люди для себя графий, которые вы хотите просматривать с максимально возможным
разрешением, можно создать страницу с миниатюрами изображений,
Вот множе- которые быстро загружаются, и дать возможность пользователю
Вот один
ство пиксе- щелкнуть на каждом из них для просмотра большой версии изобра-
пиксел.
лов, которые жения. Мы вскоре к этому вернемся.
вместе обра-
зуют верхнюю В: Мне кажется, что браузер автоматически изменил размер
часть правого фотографии с Сиэтлом, потому что она отлично помещается
крыла бабочки. в окне браузера. Почему он это сделал?
1200 пикселов
Нужно изменить раз-
мер изображения так,
чтобы оно оставалось
довольно большим, но
все же в ширину было
меньше чем 800 пиксе-
лов. Кажется, 600 пик-
селов будет в самый раз,
600 пикселов что как раз составляет
800 половину изначальной
пикселов ширины изображения.
400
пикселов
204 глава 5
добавление изображений на страницы
дальше 205
выбираем редактор изображений
Îòêðûòèå èçîáðàæåíèÿ
Во-первых, запустите программу для редактирования изображений и от-
кройте в ней файл seattle_video.jpg. В Photoshop Elements вам нужно
будет выбрать пункт Open (Открыть) в меню File (Файл), после чего откро-
ется окно Open (Открыть). Вы будете его использовать, чтобы найти файл
seattle_video.jpg в папке chapter5/mypod/photos.
ткрыть).
Вот окно Open (О Перемещаясь по папкам, вы будете
чтобы
Используйте его, видеть в них эскизы изображений.
seattle.jpg.
найти картинку
206 глава 5
добавление изображений на страницы
дальше 207
изменяем размер изображения
ество интересных
В этом окне вы можете делать множ ете формат
для
уемся на том, Здесь вы выбира
вещей. На данный момент мы сфокусир лов. Сейчас вы
бр ан
ера изображения сохранения фай
как его использовать для изменения разм еняем его на JP
EG
страниц. GIF, но мы пом
и сохранения в формате JPEG для веб- раниц.
через пару ст
Вот текущий
размер изобра-
жения: 1200 на
800 пикселов.
208 глава 5
добавление изображений на страницы
дальше 209
используем сохранение для cети
210 глава 5
добавление изображений на страницы
Ñîõðàíåíèå èçîáðàæåíèÿ
После того как вы нажмете кнопку OK, появится окно для сохранения файла. Сохраните рису-
нок под именем seattle_video_med.jpg, чтобы не потерять первоначальную фотографию.
Измените имя файла на seattle med.jpg.
-
часто
В: Вы можете рассказать подробнее про Задаваемые
параметры настройки качества в окне
вопросы которые применяются во множестве про-
грамм для редактирования фотографий.
Save for Web (Сохранить для Сети)?
В: Нельзя ли вместо этого просто ис-
О: Формат JPEG позволяет установить нуж- Наилучший способ разобраться с настрой- пользовать атрибуты width и height эле-
ный уровень качества. Чем хуже качество, тем ками качества и различными форматами мента <img>, чтобы изменить размер изо-
меньше размер. Если вы взглянете на панель изображений — поэкспериментировать над бражения?
предварительного просмотра в окне Save for ними. Вскоре вы поймете, какие уровни
Web (Сохранить для Сети), то увидите, что качества для каких изображений и на ка- О: Вы можете использовать атрибуты width
после того, как вы поменяли только настройки ких веб-страницах лучше использовать. и height, но это не совсем хорошая идея.
качества, изменились и размер, и качество. Вы также узнаете, в каких случаях фор- Почему? Потому что в этом случае будет
мат JPEG имеет преимущество над другими загружаться полноформатное изображение,
Формат
форматами. а затем браузер будет менять его размер
изображения.
(как это делается, когда в вашем браузере
Размер изобра
жения
В: Что это за число 30 в окне с параметра- включена настройка автоматического под-
(1 Кбайт по ми JPEG перед меткой Quality (Качество)? бора изображения). Атрибуты width и height
раз-
меру эквивале просто помогают браузеру выяснить, как мно-
1024 байтам
нтен
).
О: 30 — это число, которое Photoshop го места нужно оставить для изображения;
Elements рассматривает как качество Medium и если вы их используете, то они должны
Photoshop Elements даже говорит (Среднее). На самом деле JPEG использует соответствовать реальным ширине и высоте
вам, как много времени займет шкалу от 1 до 100 %, а Low (Низкое), Medium изображения.
пересылка файла браузеру при (Среднее), High (Высокое) и т. д. — всего
соединении по телефонной линии. лишь предварительно заданные значения,
дальше 211
тестируем размер изображения
<html>
<head>
<title>myPod</title>
<style type="text/css">
body { background-color: #eaf3da;}
часть HTML-кода.
Здесь будет остальная
</style>
</head> файле index.html.
<body> Она у вас уже есть в
лать, — это
. Все, что вам нужно сде
в элементе ‹img›
. поменять имя файла
. й вы только
<h2>Сиэтл, Вашингтон</h2> на имя файла, которы
med.jpg.
<p> что создали: seattle-video-
Я и мой iPod в Сиэтле! Здесь видна башня Спейс Нидл.
И не видно 628 кафе.
</p>
<p>
<img src="photos/seattle_video_med.jpg" alt="Мой iPod в Сиэтле, Вашингтон">
</p>
</body>
</html>
À ñåé÷àñ ïðîòåñòèðóåì...
Итак, вперед! Внесите все изменения, сохра-
ните их и обновите страницу index.html
в браузере. Теперь все должно выглядеть на-
много лучше. Размеры изображения подобра-
ны именно так, чтобы вашим посетителям
было удобно на него смотреть.
212 глава 5
добавление изображений на страницы
Какой
о формат изображения?
Новое задание для вас: откройте файл chapter5/
testimage/eye.jpg в Photoshop Elements. Откройте окно
Save for Web (Сохранить для Сети) и заполните пропуски (см. Формат.
ниже), выбирая каждую настройку качества для JPEG (низ- Размер изображения.
кое, среднее, высокое и т. д.), а также PNG-24 или GIF. Нуж-
ную информацию вы найдете на панели предварительного Время пересылки
просмотра, которая находится под самим изображением. при соединении по
Когда справитесь с этим, определите, какая настройка луч- телефонной линии.
ше всего подходит для данного изображения.
JPEG Ìàêñèìàëüíîå
JPEG Âûñîêîå
JPEG Ñðåäíåå
JPEG Íèçêîå
Íå
GIF ïðèìåíÿåòñÿ
дальше 213
добавим больше изображений
<html>
<head>
<title>myPod</title> Если хотите, можете добавить
<style type="text/css"> сюда пару своих фотографий.
body { background-color: #eaf3da;} Только не забудьте сначала изме-
</style>
нить их размер.
</head>
<body>
<h2>Сиэтл, Вашингтон</h2>
Давайте будем
<p> хранить
Я и мой iPod в Сиэтле! Здесь видна башня Спейс Нидл. все фотографии
из
И не видно 628 кафе. Сиэтла вместе.
</p>
<p>
<img src="photos/seattle_ video_med.jpg" alt="Мой iPod в Сиэтле, Вашингтон">
<img src="photos/seattle_classic.jpg" alt="iPod Classic в Сиэтле, Вашингтон">
<img src="photos/seattle_shuffle.jpg" alt="iPod Shuffle в Сиэтле, Вашингтон">
<img src="photos/seattle_downtown.jpg" alt="iPod в бизнес-центре Сиэтла,Вашингтон">
</p>
То же самое для фотогра-
<h2>Бирмингем, Англия</h2> фий из Бирмингема...
<p>
Это несколько фотографий из Бирмингема. Мы повстречали здесь несколько
людей, страстно влюбленных в свои iPod. Взгляните на классические британские
красные телефонные будки!
</p>
<p>
<img src="photos/britain.jpg" alt="iPod в Бирмингеме в телефонной будке">
<img src="photos/applestore.jpg" alt="iPod в Бирмингеме в магазине Apple">
</p>
</body>
</html>
214 глава 5
добавление изображений на страницы
дальше 215
используем эскизы изображений
<html>
.
mypod .
.
</html>
index.html
photos thumbnails
216 глава 5
добавление изображений на страницы
Ñîçäàíèå ýñêèçîâ
Теперь у вас есть место, куда вы будете складывать эскизы, поэтому можно их создать. Начните
с открытия файла seattle_video_med.jpg в программе для редактирования фотографий.
Измените размер фотографии до 150 × 100 пикселов, используя тот же метод, которым умень-
EG,
шали фотографии до размера 600 × 400 пикселов. на JP
150, ат м е).
выбери- ну на фор едне
В Photoshop Elements ш и р и ит е я т ь ( Ср
ните нажм мен ium
те пункт меню Save
for Web Изме а 1 00 и ь ) . ьте по в о Med
н т д
а выс
оту римен
и абу чест Нажмите
(Сохранить для Сети). p ply (П Не з овив ка
кнопк
у A
уст
а н кнопку OK.
Изменив размер изображения, нажмите OK и сохраните его с таким Если вы работаете с файла-
же именем, но в папке thumbnail. Будьте осторожны: если вы сохрани- ми, приведенными в качестве
те этот файл в папке photos, то замените им большую фотографию. примеров к книге, то найде-
Теперь повторите это для каждой фотографии из папки photos. те все эскизы фотографий
в папке thumbnails и вам не
придется всего этого делать
Как насчет (в конце концов, вы учите
фотографий из Бирмингема?
HTML, а не занимаетесь обра-
Их высота больше ширины.
боткой фотографий).
Разве логично для них задавать
тот же размер — 150 х 100?
дальше 217
используем папку эскизы
<p>
<img src="thumbnails/seattle_ video_med.jpg" alt="Мой iPod в Сиэтле, Вашингтон">
<img src="thumbnails/seattle_classic.jpg" alt="iPod Classic в Сиэтле, Вашингтон">
<img src="thumbnails/seattle_shuffle.jpg" alt="iPod Shuffle в Сиэтле, Вашингтон">
<img src="thumbnails/seattle_downtown.jpg" alt="iPod в бизнес-центре
Сиэтла,Вашингтон">
</p>
<h2>Бирмингем, Англия</h2>
<p>
Это несколько фотографий из Бирмингема. Мы повстречали здесь несколько
людей, страстно влюбленных в свои iPod. Взгляните на классические британские
красные телефонные будки!
</p>
<p>
<img src="thumbnails/britain.jpg" alt="iPod в Бирмингеме в телефонной будке">
<img src="thumbnails/applestore.jpg" alt="iPod в Бирмингеме в магазине Apple">
</p>
</body>
</html>
218 глава 5
добавление изображений на страницы
Минуточку,
вам не кажется,
что вы пытаетесь нас
одурачить? Раньше рисунки
отображались один под
другим; а теперь — один
за другим.
дальше 219
ссылки на оригинал
ит эскиз
Посетитель сайта вид
у нравит-
рисунка, который ем
тографии кнопкой
ся, например эскиз фо ...щелкает
ла… кизе
в бизнес-центре Сиэт мыши на эс
ии…
фотограф ...браузер находи
т
новую страницу
с оригиналом ф
ото-
графии...
...и выводит
ее
на экран.
щелк
220 глава 5
добавление изображений на страницы
<html>
.
mypod .
.
</html>
index.html
дальше 221
добавление элемента <img> внутрь элемента <a>
222 глава 5
добавление изображений на страницы
<h2>Сиэтл, Вашингтон</h2>
<p>
Я и мой iPod в Сиэтле! Здесь видна башня Спейс Нидл.
И не видно 628 кафе.
</p>
<p>
<a href="html/seattle_video_med.html">
<img src="thumbnails/seattle_video_med.jpg" alt="Мой iPod Video в Сиэтле, Вашингтон">
</a>
<a href="html/seattle_classic.html">
<img src="thumbnails/seattle_classic.jpg" alt="iPod Classic в Сиэтле, Вашингтон">
</a>
<a href="html/seattle_shuffle.html">
<img src="thumbnails/seattle_shuffle.jpg" alt="iPod Shuffle в Сиэтле, Вашингтон">
</a>
дальше 223
добавляем ссылки на изображения
<a href="html/seattle_downtown.html">
<img src="thumbnails/seattle_downtown.jpg" alt="iPod downtown в Сиэтле,
Вашингтон">
</a>
</p>
<h2>Бирмингем, Англия</h2>
<p>
Это несколько фотографий из Бирмингема. Мы повстречали здесь несколько
людей, страстно влюбленных в свои iPod. Взгляните на классические
британские красные телефонные будки!
</p>
<p>
<a href="html/britain.html">
<img src="thumbnails/britain.jpg" alt="iPod в Бирмингеме в телефонной будке">
</a>
<a href="html/applestore.html">
<img src="thumbnails/applestore.jpg" alt="iPod в Бирмингеме в Apple store">
</a>
</p> Каждый эскиз вложите в элемент ‹a›. Только
</body> будьте аккуратны и используйте правильное
</html> значение атрибута href для каждой ссылки!
часто
Задаваемые
вопросы
В: Если внутри элемента <a> находится текст, то на стра- что изображение является ссылкой, из контекста или по виду
нице он отображается подчеркнутым. Почему нет ничего указателя мыши, даже если вокруг него нет границы.
подобного для изображений?
В: Нельзя ли создать ссылки непосредственно на JPEG-
О: На самом деле браузер Internet Explorer выделяет изобра- изображения без всех этих HTML-страниц? Я думал, что
жение границей вокруг него, чтобы показать, что оно является браузеры достаточно умны для того, чтобы отображать
ссылкой (наш браузер Safari этого не делает). Если браузер рисунки просто так.
рисует границу вокруг или линию под изображениями-ссылка-
ми, а вам это не нравится, продолжайте читать книгу, и через О: Вы правы, можно создать ссылку непосредственно на изо-
несколько глав мы расскажем, как это изменить с помощью CSS. бражение: <a href=«photos/seattle_downtown.jpg»> ... </a>. Если вы
Обратите также внимание, что, когда вы наводите указатель так сделаете, а потом воспользуетесь такой ссылкой, то браузер
мыши на изображение-ссылку, вид указателя меняется так, сам выведет рисунок в пустом окне. Но вообще считается пло-
чтобы подсказать вам, что на рисунке можно щелкнуть кноп- хим тоном создавать ссылки непосредственно на изображения,
кой мыши. В большинстве случаев пользователям понятно, потому что обычно рисунку дают какое-либо описание.
224 глава 5
добавление изображений на страницы
Веб-страница myPod
выглядит великолепно!
Я думаю, было бы здорово
в качестве последнего штриха
добавить на страницу
логотип.
Многие програм
мы для ре-
дактирования ф
отографий
работают с ф
айлами форма-
та PSD, поэтом
у, даже если
у вас нет Phot
oshop Elements
продолжайте чи ,
тать даль-
ше и делайте вс
е аналогично
в своем редакт
оре. Если же
в вашей програ
мме нельзя от
крыть PSD-фай -
л, вы можете
воспользоватьс
я готовыми
логотипами из
папки logo.
дальше 225
добавляем логотип
Ïîäðîáíåå...
Логотип сделан удачно; в нем текст сочетается с двумя кругами: серым
и белым (что явно ассоциируется с функцией «click wheel» iPod Classic).
Но что это за узор в клеточку на заднем плане? Это способ, которым боль-
шинство программ для редактирования изображений отображают прозрач-
ные области. Вам нужно это помнить, когда будете выбирать графический
формат для логотипа...
Как только вы
ор
увидите этот уз
айт е,
в клеточку, зн
что он обозначает
-
прозрачные участ
ки на рису нк е.
226 глава 5
добавление изображений на страницы
Когда вы выбира-
ете формат PNG,
появляется фла-
жок Transparency
(Прозрачность).
По умолчанию он
установлен. Нам
нужен прозрачный
задний план?
Обратите также
внимание на список
Matte (Подложка).
Он тоже имеет от-
ношение к прозрач-
ности, как вы совсем
скоро поймете.
Если вы попытаетесь снять флажок
Transparency (Прозрачность), то увидите,
что в PNG для предварительного просмотра
задний фон стал белым.
дальше 227
выбираем прозрачность
228 глава 5
добавление изображений на страницы
о
Вы уже знаете, чт
нужно выбрать
PNG-8.
И устано-
Сейчас нам нужно разобраться
вить флажок
со списком Matte (Подложка).
Transparency
(Прозрачность).
Выберите
пункт Other
(Другой),
так как нуж-
ного цвета
в списке нет.
дальше 229
цвет фона веб-страницыf
230 глава 5
добавление изображений на страницы
итесь
Если сейчас вы присмотр
е,
к логотипу, то заметит
ает
что цвет подложки совпад
веб -ст ран ицы
с цветом фона
mypod.html.
дальше 231
сохранение логотипа
Ñîõðàíåíèå ëîãîòèïà
Отлично, вы задали все необходимые настройки в окне Save for Web
(Сохранить для Сети), теперь нажмите кнопку OK, чтобы сохранить
изображение с именем mypod.png.
ически
Программа автомат
ени е
поменяет расшир
G.
в имени файла на PN
е изо бр аж ени е
Сохранит
my po d.p ng
под названием
в папку logo.
232 глава 5
добавление изображений на страницы
дальше 233
вопросы об изображениях
часто
Задаваемые
вопросы
В: Обязательно ли мне все это знать о форматах изображений, В: Почему нельзя просто сделать цвет фона в логотипе чистым
чтобы создавать хорошие веб-страницы? и совпадающим с цветом фона веб-страницы?
О: Нет. Вы можете создавать превосходные веб-страницы вообще О: Вы можете сделать и так, но в этом есть один недостаток: если
без изображений. Но все-таки рисунки — это большая часть Сети, на вашей веб-странице имеются другие элементы, которые будут
поэтому некоторые знания о том, как работать с ними, действительно видны через прозрачные области логотипа, то они не будут отобра-
могут вам пригодиться. Иногда всего лишь одно или два изображения жаться в чистом цвете. Пока вы не видели подобных примеров, но
переводят сайт из разряда хороших в отличные. Есть еще много еще увидите, когда будете изучать CSS.
всего, что можно узнать об изображениях, главное — только захотеть.
В: Что, если я поменяю цвет фона после того, как создам
В: Зачем вообще сглаживать края текста? версию логотипа с использованием подложки?
О: Сравните два варианта логотипа для myPod: О: Скорее всего, незначительное изменение цвета фона не будет
заметно. Однако если вы значительно поменяете цвет фона страни-
цы, вам придется исправить PNG, используя новый цвет подложки.
Если вы размещаете
Вы видите, что у логотипа, расположенного выше, очень резкие,
зубчатые границы текста, что ухудшает его читаемость. Так текст
прозрачное изображение
отображается на экране компьютера по умолчанию. Во второй версии
логотипа края улучшены благодаря использованию метода, назы-
на своей веб-странице,
ваемого сглаживанием. На экране компьютера текст, обработанный
таким методом, лучше читается и более приятен для глаз.
то убедитесь, что цвет
В: Когда вступает в действие подложка? подложки этого изображения
О: Сглаживание смягчает границы относительно цвета фона. Если совпадает с цветом фона
вы поместите нижнюю версию логотипа (из предыдущего вопроса) на
цветной фон, то увидите в нем белые края. Список Matte (Подложка)
вашей веб-страницы.
в программе Photoshop Elements позволяет установить цвет фона,
на который будет помещен текст, поэтому края текста смягчаются Вы можете использовать
с учетом этого цвета.
формат PNG или GIF
В: Этот метод работает только для текста?
для своего прозрачного
О: Нет, он работает для любых линий в вашей графике, на которых
могут появляться «зазубрины». К кругу в логотипе myPod тоже был изображения.
применен этот метод.
234 глава 5
добавление изображений на страницы
ÊËÞ×ÅÂÛÅ
ÌÎÌÅÍÒÛ
Используйте элемент <img>, чтобы поместить JPEG, PNG и GIF — это три формата изображений,
изображение на веб-страницу. широко используемые в браузерах.
Браузеры обращаются с элементами <img> не- Формат JPEG лучше всего подходит для фотогра-
много иначе, чем с другими элементами HTML. фий и других сложных изображений.
После прочтения HTML-страницы браузер извле- Форматы GIF и PNG больше всего подходят для
кает каждое изображение с веб-сервера и ото- логотипов и другой простой графики с чистыми
бражает его. цветами, линиями или текстом.
Если у вас много больших картинок на веб-стра- Изображения в формате JPEG могут быть сжаты
нице, то вы можете сделать ее более удобной до различного уровня качества, и вы можете вы-
в использовании и уменьшить время ее загруз- брать наилучшее для себя соотношение размера
ки. Для этого создайте эскизы изображений, на и качества.
которых пользователь сможет щелкнуть, чтобы
посмотреть оригиналы изображений. Форматы GIF и PNG позволяют создавать изображе-
ния с прозрачным фоном. Если вы поместите такое
Элемент <img> — строчный элемент. Это озна- изображение на веб-страницу, то все, что окажется
чает, что браузер не добавляет разрывы строки под ним, в том числе и фон самой веб-страницы,
перед изображениями и после них. будет видно сквозь прозрачные части изображения.
С помощью атрибута src вы указываете месторас- GIF и PNG – это форматы без потерь, а это озна-
положение файла с рисунком. Вы можете брать чает, что при их использовании размер итоговых
изображения со своего сайта, используя относи- файлов, скорее всего, будет больше, чем в случае
тельные пути в атрибуте src, или изображения применения JPEG.
с других сайтов, используя URL-адрес.
PNG предоставляет более широкие возможности
Атрибут alt элемента <img> позволяет задать по управлению прозрачностью, чем GIF, и поддер-
содержательное описание изображения. Оно вы- живает намного больше цветов, чем GIF, который
водится в некоторых браузерах, если само изобра- ограничен 256 цветами.
жение не может быть найдено, а также исполь-
зуется в экранных дикторах, чтобы можно было PNG бывает трех видов, поддерживающих разное
описать изображение людям со слабым зрением. количество цветов: PNG-24 (поддерживает милли-
оны цветов), PNG-16 (поддерживает тысячи цветов)
Лучше всего на веб-страницах применять изобра- и PNG-8 (поддерживает 256 цветов), которые вы
жения шириной не больше 800 пикселов. Многие можете использовать в зависимости от ваших нужд.
фотографии, созданные цифровыми камерами,
имеют ширину, большую, чем у веб-страниц, по- В Photoshop Elements для выбора нужного цвета
этому необходимо менять их размер. при смягчении краев в вашем прозрачном PNG-
или GIF-изображении используйте список Matte
Photoshop Elements — это одна из множества (Подложка) из окна Save for Web (Сохранить для
программ для редактирования фотографий, ко- Сети).
торую вы можете использовать, чтобы поменять
размер изображения. Вы также можете восполь- Изображения могут быть использованы в ка-
зоваться одним из многих бесплатных онлайн-ин- честве ссылок на другие веб-страницы. Чтобы
струментов для изменения размера изображений. создать изображение-ссылку, используйте эле-
Просто введите в поисковике фразу «бесплатный мент <img>, вложив его в элемент <a>, и поме-
онлайн-редактор изображений». стите ссылку в атрибут href элемента <a>.
Слишком большие изображения для веб-страниц
создают неудобства в использовании этих страниц
и увеличивают время их загрузки и отображения.
дальше 235
решение упражнений
236 глава 5
добавление изображений на страницы
Это упражнение на самом деле имеет отношение к карандашам (и к рисункам). В нем поднимается
один простой вопрос. У вас есть обычный и совершенно новый карандаш. Если вы нарисуете
сплошную линию, исписав все острие карандаша, то какой длины будет эта линия?
Какое это имеет отношение к изображениям? Чтобы найти ответ, вам придется написать
небольшой HTML-код. Ответ на этот простой вопрос содержится в изображении, которое вы
найдете по URL-адресу http://wickedlysmart.com/hfhtmlcss/trivia/pencil.png. Ваша
задача — добавить изображение в приведенный код и получить ответ. Вот наше решение:
<html>
<head>
<title>Возьми в руку карандаш, простой вопрос</title>
</head>
<body>
<p>Линию какой длины вы можете нарисовать обычным карандашом?</p>
<p>
<img src="http://www.headfirstlabs.com/trivia/pencil.gif">
</p>
</body> ие, вы сможете
Разместив здесь изображен
</html> узите страницу.
увидеть ответ, когда загр
Источник: http://www.papermate.com.
дальше 237
решение упражнений
Здесь приведены варианты того, как выглядят «отсутствующие» рисунки в различных брау-
зерах. В большинстве случаев браузеры могут использовать дополнительную информацию
из атрибута alt, чтобы описать то, что показано на рисунке. Почему надо об этом заботить-
ся? В конце концов, это ошибка на веб-странице и нам просто нужно ее исправить, верно?
А в реальном мире все часто не идеально, иногда что-то ломается, прерывается подключение
к Интернету, когда загружена только половина страницы, или людям со слабым зрением
нужно услышать описание рисунка, потому что они не в состоянии его увидеть.
238 глава 5
добавление изображений на страницы
Вы заме-
тили, как
ухудшается
JPEG Ìàêñèìàëüíîå 21 Káàéò 8 ñåêóíä
качество
изображе-
ния по мере
перехода от
максималь- JPEG Âûñîêîå 6 Káàéò 3 ñåêóíäû
ного к низко-
му качеству
в случае
с JPEG? JPEG Ñðåäíåå 3 Káàéò 2 ñåêóíäû
Íå
GIF ïðèìåíÿåòñÿ 22 Káàéò 9 ñåêóíä
дальше 239
решение упражнений
Если вы посмотрите в папку html в примерах к книге, то найдете там все индивидуаль-
ные страницы для изображений, кроме одной — seattle_downtown.jpg. Создайте
страницу seattle_downtown.html в папке html и протестируйте ее. Перед тем как
продолжить работу, проверьте, что страница работает.
Вот решение:
н размещаться
Этот HTML-код долже
wn.html.
<html> в файле seattledownto
<head>
<title>myPod: бизнес-центр Сиэтла</title>
<style type="text/css"> body { background-color: #eaf3da; } </style>
</head>
<body>
<h1>Бизнес-центр Сиэтла</h1>
<p>
<img src="../photos/seattle_downtown.jpg" alt="iPod в бизнес-центре Сиэтла,
Вашингтон">
Этот файл нужно Это результат
</p> по-
</body> ме стит ь в папку html, выполнения кода.
</html> которая находитс
я
в папке mypod.
mypod
<p>
<img src="photos/seattle.jpg" alt="Мой iPod в Сиэтле, Вашингтон">
</p>
240 глава 5
6 стандарты
Серьезный HTML
Что же еще нужно знать об HTML? Вы уже неплохо справляетесь с написанием HTML-страниц.
Не настало ли время перейти к CSS и научиться придавать всей этой разметке еще и ошело-
мительный внешний вид? Перед тем как сделать это, мы должны убедиться, что ваши знания
о HTML на должном уровне. Не поймите нас неправильно, вы и так создавали первоклассный
HTML, но есть еще несколько вещей, которые вам нужно сделать, чтобы превратить его в «ин-
дустриально-стандартный» HTML. Пришло время, когда следует задуматься об обязательном
использовании новейшего и самого лучшего HTML-стандарта, также известного как HTML5.
Благодаря этому вы сможете гарантировать, что ваши страницы будут одинаково отображаться
во всех браузерах (по крайней мере, в таких, которые для вас важны), не говоря уже о том, что
они смогут нормально работать на устройствах от компании Apple, относящихся к самому по-
следнему поколению (выберите свое любимое). Вы также сможете создавать страницы, которые
быстрее загружаются, гарантированно хорошо взаимодействуют с CSS, идут в ногу с развитием
стандартов. Приготовьтесь, в этой главе вы из любителя превратитесь в профессионала!
241
пишем стандартный html
Джо
Фрэнк: До настоящего момента мы в значительной степени
игнорировали тот факт, что для всего этого существуют стан-
Джим Фрэнк дарты. Не говоря уже о разных версиях HTML, например,
HTML 4.01 и, что сейчас актуальна, HTML5. Делаем ли мы
все необходимое для того, чтобы обеспечить соответствие
нашего кода стандартам HTML5?
Джо: Да брось ты, нам просто дают очередной кусок работы.
А нам и так есть что делать. Страница действительно отлично
выглядит; я даже протестировал ее на некоторых более новых
устройствах.
Фрэнк: Возможно, но я пытаюсь сказать, что это поможет
нам в будущем делать меньше работы.
Джо: Да? Это как же?
242 глава 6
стандарты
Мозговой
штурм
дальше 243
история html
244 глава 6
Начиная с главы 7 нашей цел стандарты
ью станет написание правил
HTML5-кода. Как и все в это ьного
м мире, HTML постоянно
развивается, и в этой книге
мы будем рассказывать об
этом.
HTML 4.01
4 01 XHTML 1.0
10 HTML5
Ах, жизнь хороша. HTML 4.01 В то время как мы только начинали чувство- Без поддержки со стороны сооб-
появился на свет в 1999 году и вать себя комфортно, всеобщее внимание щества данный «брак», естествен-
являлся «обязательной» версией привлекла новая блестящая технология. но, не закончился ничем хорошим
HTML на протяжении последую- Этой технологией был XML. Более того, и был заменен новой версией
щих десяти лет. он привлек настолько большое внимание HTML под названием «HTML5».
HTML, что они вступили в «вынужденный Благодаря тому, что эта версия
Версия 4.01 в действительности
брак», результатом которого стало появле- поддерживала большинство тре-
не сильно отличалась от вер-
ние XHTML 1.0. бований стандарта HTML 4.01,
сии 4.0; в нее потребовалось вне-
а также новым опциям, например
сти лишь несколько изменений. XHTML обещал покончить со всеми пробле-
поддержке элементов вроде тех,
Но по сравнению с теми днями, мами веб-разработчиков благодаря своей
что используются в блогах, новым
когда HTML только появлялся (ког- точности и новому подходу к написанию
возможностям по работе с видео и
да всем нам приходилось неслад- веб-страниц.
графикой, целому новому набору
ко), версия HTML 4.01 позволила
Единственной проблемой оказалось то, что средств, нацеленных на создание
нам спать спокойно по ночам,
в итоге большинство веб-разработчиков веб-приложений, HTML5 было су-
зная, что почти все браузеры (по
стало с неприязнью относиться к XHTML. ждено стать стандартом.
крайней мере те, о которых стоит
Им не был нужен новый подход к написанию
волноваться) хорошо отобразят По-правде говоря, «развод» HTML
веб-страниц, они просто хотели усовершен-
наши веб-страницы. и XML стал для многих людей не-
ствовать то, что уже было возможно при
ожиданностью, что в первое время
помощи HTML 4.01. Веб-разработчики были
привело к неразберихе с тем, что
намного больше заинтересованы в гибко-
на самом деле представляет со-
сти HTML, чем в точности XHTML. И они
бой HTML5. Однако все утряслось,
все больше и больше хотели создавать
поэтому читайте дальше, чтобы
веб-страницы, которые больше походили
узнать, какое значение имеет для
бы на приложения, нежели на документы
вас HTML5 и как вы можете его
(более подробно о веб-приложениях мы
использовать.
поговорим позднее)…
Уязвимость браузера
Интервью, взятое на этой неделе.
Почему для тебя так важна версия HTML?
Head First: Мы рады, что ты к нам пришел, Брау- ют. Кроме того, убедитесь, что ваши страницы не
зер. Как ты знаешь, версии HTML стали часто об- содержат каких-либо ошибок вроде несогласован-
суждаемым вопросом. С чем это связано? В конце ных тегов в разметке и тому подобного.
концов, ты браузер. Я даю тебе HTML-код, а ты
Head First: А как нам сказать тебе, какую версию
обрабатываешь его и отображаешь веб-страницу
HTML мы используем? Особенно сейчас, когда мы
наилучшим способом. все переходим на HTML5.
Браузер: В наши дни браузерам приходится нелег- Браузер: Что ж, вообще-то HTML5 все немного
ко. Существует множество веб-страниц, и многие упрощает.
из них написаны с использованием старых версий
HTML или в их разметке есть ошибки. Как вы ска- Head First: Серьезно? Как именно помогает новая
зали, моя работа — попытаться отобразить каждую версия HTML? По-моему, еще одна версия просто
из этих веб-страниц вне зависимости от того, как все усложняет еще больше.
она написана. Браузер: Это правда, любая новая версия ведет
Head First: А в чем сложность? Похоже, что у тебя к «болезням роста», когда все пытаются выйти на
это довольно неплохо получается. уровень самого современного стандарта. Однако
HTML5 упрощает способ, посредством которого вы
Браузер: Безусловно, в некоторых случаях так сообщаете мне о том, какую версию HTML исполь-
и есть, но вы когда-нибудь обращали внимание на зуете. Кроме того, в стандарте HTML5 задокументи-
то, как выглядят ваши страницы в разных браузе- рованы многие из встречающихся в веб-страницах
рах? При использовании старой или некорректной ошибок, чтобы все браузеры могли согласованно
разметки ваша страница может отлично выглядеть подходить к их обработке.
в одном браузере, а в другом — уже не так хорошо.
Head First: Означает ли это, что нам не нужно бес-
Head First: Правда? А почему так происходит? покоиться насчет того, что мы можем допустить
Разве все вы, браузеры, не работаете одинаково? ошибки при написании своей HTML-разметки?
Браузер: Мы работаем одинаково, когда отображаем Браузер: Нет! То, что мы теперь лучше умеем обра-
страницы, написанные с использованием корректной и батывать ошибки, вовсе не означает, что вы можете
отвечающей современным требованиям разметки. Как я небрежно писать разметку. Создаваемые вами стра-
уже говорил, при отображении страниц, в разметке ницы должны соответствовать требуемому стандар-
которых есть ошибки, ситуация резко осложняется. ту и не содержать ошибок. В противном случае вы
И вот почему: все мы, браузеры, руководствуемся можете получить противоречивые результаты при
HTML-спецификацией, которая «говорит» нам, как использовании разных браузеров, кроме того, не
отображать корректную HTML-разметку, но когда стоит забывать о браузерах мобильных устройств.
дело доходит до HTML-разметки с ошибками, мы
действуем по-разному. Таким образом, у разных Head First: Вернемся к тому, как нам сказать тебе
о том, какую версию HTML мы используем?
браузеров может наблюдаться разное поведение.
Браузер: Вы можете поведать мне все об использу-
Head First: Как же со всем этим справиться? Мы хо-
емой вами версии HTML посредством DOCTYPE.
тим, чтобы наши страницы выглядели хорошо.
Это небольшая часть разметки, которую вы можете
Браузер: Легко. Заранее предупреждайте меня, использовать, расположив в самом верху своего
какую версию HTML вы используете. Вы удивились HTML-файла. Поскольку наше время истекает, ис-
бы, если бы узнали, сколько страниц этого не дела- следуйте ее самостоятельно!
246 глава 6
стандарты
HTML
Археология
Мы покопались и нашли старые страницы, написанные с использо-
ванием HTML 4.01 и XHTML 1.1. В этих страницах задействуется
DOCTYPE, расположенный в самом верху HTML-файла для того,
чтобы сообщить браузеру, какую версию HTML они используют. Мы
-
привели для вас парочку наглядных примеров DOCTYPE. Увидеть Вы можете напе
е это
их вы можете чуть ниже. чатать вс
или,
Это означает, В этой части го- в одну строку
Это просто раз-
что элемент ворится, что мы если хотите,
означает, что сколько.
- ‹html› — кор- используем версию делить на не
аузе стандарт
Главное, убед
итесь,
д л я бр невой (пер- HTML 4.01 и HTML-
Здес
ь тся HTML 4.01 зры-
д еляе что вы не ра
п р е а вый) на вашей является обще-
разметка написана
ра о ент ваете на неск
оль-
п д окум р а- странице. на английском языке.
ти ст доступным. что
н о й ко строк то,
дан
для взято в кавы
чки.
.
ницы
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
: это НЕ
Обратите внимание
симво-
элемент HTML. После Это значение указывает
вол «!»,
ла «‹» сразу идет сим
на файл, который устанавли-
о это
что говорит вам, чт вает особый стандарт.
нечто иное.
дальше 247
определение типа документа
ответ.
ишите здесь свой
Нап
248 глава 6
стандарты
<!doctype html>
Это всего одна строка;
не теряйте ее.
И она очень проста!
дальше 249
html — живой стандарт
Хорошо, я думаю,
теперь все стало понятно.
Давайте вставим этот DOCTYPE
в файлы гостевой и обновим наши
страницы согласно HTML5.
сто добавьте
Это строка DOCTYPE. Про
loun ge.html.
ее в самое начало файла
<!doctype html> Вы можете написать либо DOCTYPE, либо doctype.
Подойдет любой из вариантов.
<html>
<head>
<title>Гостевая Head First</title>
</head>
<body>
<h1>Добро пожаловать в новую и усовершенствованную гостевую Head First</h1>
<img src="drinks.gif">
<p>
Заходите к нам каждый вечер, чтобы попробовать освежающие
<a href="beverages/elixir.html">напитки</a>
поболтать и, возможно,
<em>станцевать разок-другой</em>.
Всегда обеспечен беспроводной доступ
(захватите с собой свой ноутбук).
</p>
<h2>Указатели</h2>
<p>
Вы найдете нас в центре Webville.
Если вам нужна помощь, чтобы найти нас, используйте наши
<a href="directions.html">указатели</a>.
Присоединяйтесь к нам!
</p>
</body>
</html>
дальше 251
тестирование типа документа
лось.
Здорово, ничего не измени
идали
Мы на самом деле не ож
ний , пот ом у что
никаких измене
CT YP E, —
все, что делает DO
,
это дает браузеру знать
ML5.
что вы используете HT
252 глава 6
стандарты
Откровенно об HTML5
Интервью, взятое на этой неделе.
В чем важность HTML5?
Head First: HTML5, ты «самая новая и великая» версия Head First: Понятно. Нашим читателям просто следует
HTML, о которой все без умолку говорят, однако наши продолжать изучение HTML5 — ой, извиняюсь, HTML,
читатели хотят знать, чем именно ты так замечателен. а все, что они уже успели изучить ранее, является актуаль-
HTML5: Во-первых, у меня есть масса новых элементов, ным. Не говоря уже о том, что все новое, что они будут
а также ряд новых атрибутов. изучать в дальнейшем, представляет собой новейшую
и величайшую технологию HTML.
Head First: По-моему, мы пока что не используем хоть
какие-нибудь из них, не так ли? HTML5: Именно.
HTML5: Все используемые вами элементы — это часть Head First: Вместе с тем я должен спросить: мне доводи-
моего стандарта, так что вы применяете HTML5-элемен- лось слышать, что кое-что из нового в тебе предназначено
ты. Однако вы пока не используете ни один из новых для создания веб-приложений. С чем это связано?
элементов…
HTML5: Самое важное заключается в том, что я больше
Head First: А почему бы нет? Разве нам не стоит начать не служу лишь для создания веб-страниц; я предназначен
использовать все новейшие элементы как можно скорее? для написания полнофункциональных веб-приложений.
HTML5: Не обязательно. Для работы всегда следует ис- Head First: А в чем разница между ними?
пользовать подходящий элемент (мы говорили об этом
HTML5: Веб-страницы — это, по большей части, ста-
в главе 3)! А у моих новейших элементов специфиче-
ская работа. Некоторые из них служат для расширения тичные страницы. На них располагается ряд изображе-
структуры и добавления значения в ваши страницы. ний и набор ссылок, а также несколько эффектов там
Как, например, мой новый элемент <article>, который и сям, например в меню, однако страницы в основном
специально предназначен для вещей вроде блог-постов предназначены для чтения. А веб-приложения — для
и новых статей. взаимодействия с ними, выполнения при помощи них
требуемых задач.
Head First: Мы могли бы использовать его в главе 3 для
блога Тони, да? Head First: А ты мог бы привести пример?
HTML5: Верно… я уверен, что в дальнейшем вы доба- HTML5: Приложения для социальных сетей, картогра-
вите его. фические приложения, игры… список можно продолжать
Head First: Я уверен, что нашим читателям интересно, до бесконечности.
поскольку они изучают HTML в данной книге, нужно ли Head First: Их нельзя было создать до появления HTML5?
им вместо него начать изучать HTML5?
HTML5: Что ж, некоторые из них можно было создать,
HTML5: Нет! HTML5 — это всего лишь следующий эво- однако многие инструменты, необходимые для создания
люционный шаг, а все, что они уже изучили, в HTML5 приложений такого рода, впервые были стандартизи-
является в точности таким же. HTML5 просто привносит рованы с моим появлением. До меня, если они вообще
кое-что новое. Более того, нам следует перестать гово- и существовали, то были в некоторой степени бесси-
рить «HTML5». Я просто самая последняя версия HTML, стемными.
так что называйте меня «HTML». Говоря «HTML5» на
данном этапе, вы лишь сбиваете людей с толку. Head First: Тем не менее я не думаю, что мы будем созда-
вать такие приложения в данной книге.
Head First: Постой, после всей этой шумихи вокруг
HTML5 ты всерьез предлагаешь нам перестать назы- HTML5: Но все же ознакомьтесь с содержанием книги
вать тебя так? «Head First HTML5 Programming» («Изучаем программиро-
вание на HTML5»). Она всецело посвящена созданию
HTML5: Все верно. Вы уже знаете, что я — живой стан-
веб-приложений при помощи меня!
дарт, а номера версий ушли в прошлое. Я живой стандарт
для HTML, а не HTML5. Head First: Непременно! Спасибо за интервью, HTML5!
дальше 253
валидация вашего html
Неплохо;
теперь браузер будет
знать, что мы используем
стандартный HTML.
254 глава 6
стандарты
Ïîçíàêîìüòåñü ñ W3C-âàëèäàòîðîì
Давайте взглянем на W3C-валидатор и проверим с его помощью файлы гостевой. Чтобы
начать, просто откройте ссылку http://validator.w3.org в своем браузере.
расположен
W3C-валидатор org.
://validator.w3.
по адресу http
Существует три
способа для проверки
вашего HTML.
ца находит-
(1) Если страни
можете
ся в Сети, то вы
ать URL-
просто напечат
ть кнопку
адрес здесь, нажа
-
я програм-
Check, и сервисна
ваш код
ма сама найдет
и проверит ег о.
дальше 255
нужен атрибут alt
256 глава 6
стандарты
Мы провалились
на валидации.
Кажется, есть
ошибка.
Похоже, это
ошибка.
дальше 257
эксперимент по валидации html
<!doctype html>
<html>
<head>
<title>Гостевая Head First</title>
</head>
<body>
<h1>Добро пожаловать в новую и усовершенствованную гостевую Head First</h1>
<img src="drinks.gif" alt="Напитки"> Вы уже знакомы с атрибутом alt.
<p> Добавьте его в элемент ‹img›.
Заходите к нам каждый вечер, чтобы попробовать освежающие
<a href="elixir.html">напитки</a>,
поболтать и, возможно,
<em>станцевать разок-другой</em>.
Всегда обеспечен беспроводной доступ
(захватите с собой свой ноутбук).
</p>
<h2>Указатели</h2>
<p>
Вы найдете нас в центре Webville.
Если вам нужна помощь, чтобы найти нас, используйте наши
<a href="directions.html">указатели</a>.
Присоединяйтесь к нам!
</p>
</body>
</html>
Мозговой
штурм
258 глава 6
стандарты
Åùå íå âñå...
Удача! На странице видна зеленая полоса; должно быть, все в порядке. Однако здесь также есть три
предупреждения. Похоже, нам предстоит позаботиться еще о нескольких вещах. Давайте посмотрим:
Мы прошли! Но…
Итак, наш HTML-файл соответствует требованиям в том смысле, как в нем написан
код, но, кажется, мы должны сделать что-то относительно нашей кодировки символов.
Давайте посмотрим, что же это означает.
дальше 259
нам нужна кодировка
Смотри, мы получаем
предупреждающее сообщение,
в котором говорится, что валидатор
не может определить кодировку
символов.
В: utf-8? О: Нет. Это формат для тега <meta> в версии HTML 4.01 и ниже.
При использовании HTML5 вы можете просто написать <meta
О: Попытаемся объяснить. Это как WD-40 (товарный знак много- charset="utf-8">.
функционального препарата для антикоррозийной защиты и смазки
трущихся поверхностей производства одноименной компании). Вам В: По этой причине нам было нужно сохранять наши файлы
не нужно вникать в то, почему это так называется, просто исполь- с использованием кодировки utf-8 в главе 1?
зуйте это. Как мы уже отмечали ранее, utf-8 (иногда пишется как
UTF-8) является частью семейства кодировок Unicode. Буква «u» О: Да. Необходимо, чтобы кодировка файла, загружаемого вами
в utf-8 означает «Unicode». Unicode — это набор символов, под- в браузер, соответствовала кодировке, указанной вами в теге <meta>.
дальше 261
тестирование тега meta
Хотите заключить пари? Пройдет ли этот файл процедуру валидации? Во-первых, внесите
необходимые изменения в lounge.html, сохраните их и обновите страницу в браузере.
Вы снова не заметите никаких изменений, зато браузер заметит. Теперь давайте проверим
валидность страницы.
262 глава 6
стандарты
о
Тем не менее есть одн
ие… но нам
предупрежден
ко-
не нужно о нем беспо
иться (см. ниже).
дальше 263
вопросы о валидации и версиях
часто
Задаваемые
вопросы
В: Валидатор говорит, что является экспериментальным для и должен сделать, чтобы поступить правильно. А вы, следователь-
HTML5. Что это означает? но, снова столкнетесь с проблемой, которая заключается в том, что
разные браузеры по-разному будут обрабатывать вашу страницу.
О: Сообщение «Using experimental feature: HTML5 Conformance Единственный способ получить предсказуемые результаты — это
Checker» («Используется экспериментальный инструмент: средство сказать браузеру, что вы используете HTML5.
контроля соответствия требованиям HTML5») в валидаторе означает,
что он проверяет ваш HTML-код, ориентируясь на стандарт HTML5, В: Есть ли какая-нибудь разница между HTML, который мы
но поскольку данный стандарт не является завершенным (в него пишем, и HTML5?
по-прежнему добавляются новые опции), валидатор подвержен из-
менениям, поэтому получаемые вами при валидации своей страницы О: Мы используем стандартный HTML, который является HTML5.
результаты не будут точными на 100%. Это значит, что в ваших же HTML5 привнес кое-что новое в разметку (о чем мы еще поговорим),
интересах, как сознательного разработчика, идти в ногу со стандартом а также возможность создавать веб-приложения, однако HTML5 —
HTML и регулярно проверять свои страницы. это HTML, и все написанное вами является «HTML5-совместимым».
Так что в дальнейшем все будет просто «HTML», включая новые
В: Чего мы в действительности достигли в данной главе? Моя опции, предусматриваемые спецификацией HTML5. Все изученное
страница выглядит, как и прежде. вами полностью отвечает требованиям HTML5, кроме того, вы уви-
дите, насколько мало вам потребуется сделать, чтобы перейти от
О: В данной главе мы немного подкорректировали разметку вашей страницы с «неформальной HTML-разметкой» к HTML-странице,
страницы, чтобы она соответствовала спецификации HTML. Какая написанной на профессиональном уровне.
от этого польза? Чем больше ваша страница соответствует специ-
фикации, тем выше шансы на то, что она будет нормально работать В: В чем превосходство HTML5 над HTML 4.01?
на практике. Если вы создаете веб-страницу профессионального
уровня, то ее необходимо писать с использованием индустриаль- О: Превосходство HTML5 заключается в трех аспектах. Во-первых,
ного стандарта, что мы как раз и сделали в данной главе, добавив в HTML5 имеется ряд очень классных элементов и атрибутов (на-
DOCTYPE, указав кодировку символов и устранив ошибки (добавили пример, элемент <video>), а также кое-что другое, что поможет вам
атрибут alt) в HTML-коде. создавать лучшие страницы (об этом поговорим позже).
Во-вторых, в версии HTML5 есть много новых опций, позволяющих
В: А зачем нам нужен атрибут alt? веб-разработчикам создавать веб-приложения с использованием
этой версии HTML. Веб-приложения — это веб-страницы, пове-
О: По двум веским причинам. Во-первых, если изображение на дение которых больше напоминает поведение приложений (вроде
вашей веб-странице почему-то окажется «отсутствующим» (например, тех, которые вы привыкли использовать на своем ноутбуке или
из-за сбоя на используемом вами сервере изображений или очень мобильном устройстве), нежели статичных веб-страниц. Если вы
медленного соединения), атрибут alt (в большинстве браузеров) заинтересованы в создании веб-приложений, то после того, как вы
вместо этого изображения будет отображать свой текст, который вы справитесь со всем в этой книге, вам следует прочитать книгу «Head
указали. Во-вторых, пользователи со слабым зрением, прибегающие First HTML5 Programming» («Изучаем программирование на
к экранным дикторам для чтения страниц, смогут посредством этих HTML5») (O’Reilly).
дикторов узнать, каким является текст атрибута alt, что поможет им И наконец, спецификация HTML5 намного более проработана, чем
лучше понять веб-страницу. спецификации предыдущих версий HTML. Помните, как мы говорили,
что в данной спецификации теперь документируются распростра-
В: Что будет, если я скажу браузеру, что использую HTML5, ненные ошибки, допускаемые веб-разработчиками? И она помогает
но на самом деле это окажется не так? браузерам понять, как обрабатывать эти ошибки? Это значит, что
страницы с ошибками в их разметке больше не будут приводить к
О: Браузер поймет, что вы в действительности используете не скверным последствиям, как раньше, что является хорошей новостью
HTML5, и задействует возможности по обработке ошибок, что он для пользователей.
264 глава 6
стандарты
дальше 265
удобный путеводитель
266 глава 6
стандарты
Webville-путеводитель по HTML
В этом удобном путеводителе написание корректных HTML-страниц све-
дено к использованию логичного набора основополагающих принципов.
Вот они:
Всегда начинайте с <doctype>.
Написание любой страницы всегда начинайте с определения
<doctype>. Это позволит вам произвести хорошее впечатление
на браузеры, а также на валидатор.
дальше 267
тонкости html
268 глава 6
стандарты
HTML
Археология
<html>
<head>
<title>Прогноз погоды Webville</title> Это атрибуты, отвечающие за дизайн
вливает цвет
страницы: bgcolor устана
</head>
цвет самого
<body bgcolor="tan" text="black"> фона страницы, а text —
body.
текста внутри элемента
<p>
Прогноз погоды обещает дождь и сильный ветер в
<font face="arial">Webville</font> сегодня, так что
элемен-
по возможности не выходите на улицу. Шрифт был изменен с помощью
</p>
та ‹font› и его атрибут а face.
торых закрывающих
<ul> Вы можете обойтись без неко
Это по-прежнему иногда
<li>Вторник: дождь и 15 °C. тегов, таких как ‹/li› и ‹/p›.
так не рекомендуется!
<li>Среда: дождь и 16 °C. возможно, однако поступать
</ul>
Значения атрибутов не заключены в кавычки. Сейчас реко-
<p align=right> мендуется всегда ставить кавычки, а в случае с атрибутами
Возьмите с собой зонт! с множественными значениями они являются обязательными.
дальше 269
проверь свои знания html
СТАНЬ валидатором
Ниже приведен HTML-файл. Ваша
задача — представить, что вы
валидатор, и найти все ошибки.
Выполнив задание, посмотрите
ответы в конце главы и убедитесь,
что нашли все ошибки.
ем,
тесь с задани
Когда справи чт обы
валидатор ,
используйте (и ли , если
ою работу
<html> проверить св казки).
<head> льзуйте подс
хотите, испо
<meta charset="utf-9">
</head>
<body>
<img src="chamberofcommerce.gif">
<h1>Подсказки: как сделать так, чтобы визит в Webville
доставил вам больше удовольствия
<p>
Это несколько подсказок, которые помогут вам в полной мере насладиться
пребыванием в Webville.
</p>
<ul>
<li>Всегда потеплее одевайтесь и защищайте свои head (голову)
и body (тело) с помощью html.</li>
<li>Как можно больше отдыхайте, пока здесь находитесь. Сон помогает
усвоить все эти правила.</li>
<li>Не упустите возможность посмотреть работы наших местных художников
в бизнес-центре в галерее CSS.
</ul>
</p>
<p>
У вас возникли какие-то вопросы? Вы всегда можете найти ответы в
<a href="http://www.wickedlysmart.com"><em>WickedlySmart</em></a>.
Вопросы все еще остались? Расслабьтесь, Webville — это достаточно гостеприимный
город. Просто попросите кого-нибудь вам помочь. И, как здесь принято говорить:
</p>
<em><p>
Не волнуйтесь. Все будет в порядке.
</em></p>
</body>
</html>
270 глава 6
стандарты
ÊËÞ×ÅÂÛÅ
ÌÎÌÅÍÒÛ
HTML 5 — это текущий стандарт HTML. В случае с большинством веб-страниц кодировка
utf-8 используется в их HTML-файлах, а также как
Консорциум Всемирной паутины (W3C) — это ор-
значение атрибута charset тега <meta> .
ганизация, занимающаяся стандартами. Она же
определяет, что такое «стандарт HTML». Атрибут alt является обязательным для элемента
<img>.
Определение типа документа (DOCTYPE) использу-
ется, чтобы сказать браузеру, какую версию HTML Валидатор W3C — это бесплатная сервисная про-
вы используете. грамма, которая проверяет страницы на соответ-
ствие стандартам.
Теперь HTML является «живым стандартом», что
означает, что данный стандарт будет изменяться Пользуйтесь валидатором, чтобы убедиться, что
из-за внедрения новых опций и обновлений. ваш HTML написан грамотно, а элементы и атрибуты
соответствуют стандартам.
Тег <meta> в элементе <head> представляет брау-
Если вы будете твердо придерживаться стандар-
зеру дополнительную информацию о веб-странице,
тов, то ваши страницы будут быстрее отображать-
например о типе документа и его кодировке.
ся и их внешний вид будет мало различаться при
Атрибут charset тега <meta> говорит браузеру, ка- отображении в разных браузерах, а ваш CSS будет
кая кодировка символов применяется на странице. работать лучше.
дальше 271
решение упражнений
СТАНЬ валидатором.
Решение
Ниже приведен HTML-
Здесь вместо ко- файл. Ваша задача —
дировки символов представить, что вы
utf-9 (которой
doctype не указан. валидатор, и найти все
не существует!)
должна быть ука-
ошибки. Вот решение
<html> зана utf-8. упражнения.
<head>
<meta charset="utf-9">
В ‹head› должен присут-
</head>
<body> ствовать элемент <title›. Нет тега ‹/h1›. Это
<img src="chamberofcommerce.gif"> Нет атрибута alt. приведет к проблемам
<h1>Подсказки: как сделать так, чтобы визит в Webville с элементом <p>, что
доставил вам больше удовольствия располагается ниже.
<p>
Это несколько подсказок, которые помогут вам в полной мере насладиться
пребыванием в Webville.
</p>
<ul>
<li>Всегда потеплее одевайтесь и защищайте свои head (голову)
и body (тело) с помощью html.</li>
<li>Как можно больше отдыхайте, пока здесь находитесь. Сон помогает
усвоить все эти правила.</li>
<li>Не упустите возможность посмотреть работы наших местных художников
в бизнес-центре в галерее CSS. Не указан тег ‹/li›. Код пройдет
</ul> , у ко т ор ог о валидацию, однако так поступать
</p> Лишний тег ‹/p›
рн ог о т ег а ‹p ›. не рекомендуется!
<p> нет па
У вас возникли какие-то вопросы? Вы всегда можете найти ответы в
<a href="http://www.wickedlysmart.com"><em>WickedlySmart</em></a>.
Вопросы все еще остались? Расслабьтесь, Webville — это достаточно гостеприимный
город. Просто попросите кого-нибудь вам помочь. И, как здесь принято говорить:
</p>
<em><p> Теги ‹em› и ‹p› переставлены местами.
Не волнуйтесь. Все будет в порядке.
</em></p>
</body>
</html>
272 глава 6
стандарты
дальше 273
7 приступаем к работе с CSS
Раньше говорилось, что в книге будет материал про CSS. До сих пор мы изучали
HTML, применяемый для создания структуры веб-страниц. Но, как видите, манера
браузеров оформлять страницы оставляет желать лучшего. Конечно же, можно было
позвать полицию моды, но нам это не нужно. Мы отлично справимся с дизайном стра-
ниц с помощью CSS, часто даже не меняя HTML-код. Действительно ли это так легко?
Ну, придется выучить новый язык, в конце концов, Webville — это двуязычный город.
После прочтения этой главы, посвященной CSS, вы будете в состоянии поддерживать
разговор, находясь на любой из сторон Мейнстрит.
Помните волшебника
из страны Оз? В этой части
книги все черно-белое станет
цветным.
Âû áîëüøå íå â Êàíçàñå
Вы уже потратили немало сил на изучение раз-
метки, структуры, синтаксиса, вложенности,
соответствия стандартам, и сейчас пришло
время развлечься, создавая дизайн веб-страниц.
Однако не беспокойтесь: все те усилия, которые
вы затратили на изучение HTML, не напрасны.
На самом деле вы поймете, что хорошее знание
HTML — необходимое условие для изучения
(и использования) CSS, а именно изучением
каскадных таблиц стилей мы и займемся в сле-
дующих нескольких главах.
На этих двух страницах мы разрекламировали
дизайн, с которым вы будете иметь дело в остав-
шейся части книги. Не правда ли, он очень от-
личается от дизайна тех страниц, которые вы
уже успели создать? Итак, что же нужно для
того, чтобы приступить к делу? Конечно же,
выучить язык CSS.
Давайте начнем...
276 глава 7
переходим к работе c css
дальше 277
язык css
278 глава 7
переходим к работе c css
p { background-color: red; }
Все, что мы здесь сделали, — убрали разрывы строки. Можете форматировать свой CSS-
код так, как хотите. Если правило достаточно длинное, то обычно в него добавляются
разрывы строки и отступы для удобства чтения (для вас же самих).
Вокруг содержимого
л,
элемента ‹p› будет ...шириной в 1 пиксе
ета.
нарисована граница... сплошная, серого цв
дальше 279
больше о css и html
часто
Задаваемые
вопросы
В: Все элементы <p> всегда имеют одинаковый стиль? Или, скажем,
я могу задать разные цвета тексту различных абзацев?
280 глава 7
переходим к работе c css
дальше 281
придание стиля гостевой
<!DOCTYPE html>
<html lang="en">
Это правило <head>
Свойство для изменения цвета шрифта
стиля, ко- <meta charset="utf-8">
<title>Гостевая Head First</title>
торое будет
<style> называется color (возможно, вы думали,
определять что оно будет называться font-color
цвет текста или text-color, но это не так).
в абзацах. p {
color: maroon;
} Мы устанавливаем кр
асивый насыщенный
красно-коричневый цве
т текста, что
будет хорошо сочет
Мы выбираем </style> аться с диванами
в гостевой.
элемент ‹p›, </head>
для которо- <body>
го и будет <h1>Добро пожаловать в новую и усовершенствованную
ься гостевую Head First</h1> Элемент ‹p›
при ме нят
<p> выбирает
этот стиль. <img src="images/drinks.gif" alt="Напитки"/> все абзацы
</p>
HTML.
<p>
Заходите к нам каждый вечер, чтобы попробовать освежающие
<a href="beverages/elixir.html">напитки</a>,
поболтать и, возможно,
<em>станцевать разок-другой</em>.
Всегда обеспечен беспроводной доступ
(захватите с собой свой ноутбук).
</p>
<h2>Указатели</h2>
<p>
Вы найдете нас в центре Webville.
Если вам нужна помощь, чтобы найти нас, используйте наши
<a href="about/directions.html">указатели</a>.
Присоединяйтесь к нам!
</p>
</body>
</html>
282 глава 7
переходим к работе c css
Òåñòèðîâàíèå ñòèëÿ
Итак, продолжим. Внесите все изменения, описанные на предыдущих
страницах, в файл lounge.html из папки chapter7/lounge, сохраните
и обновите страницу в браузере. Вы увидите, что цвет текста абзацев по-
менялся на красно-коричневый.
Все остальное
отобразилось так,
как и должно: заго-
ловки все еще чер-
ные, потому что
мы выбрали для
Это наш красно- оформления лишь
коричневый цвет элементы ‹p›.
текста абзацев.
Заметьте, что
цвет ссылок
не поменялся.
Запомните это...
Мозговой
штурм
Что будет, если вы установите для элементов <p> красно-коричневый цвет
фона, а не текста? Каким образом изменится способ отображения ваших
страниц в браузерах?
дальше 283
оформление заголовков
p {
color: maroon;
}
Òåñò
Добавьте этот новый CSS-код в файл lounge.
html и обновите страницу в браузере. Вы уви-
дите, что благодаря одному правилу выделили
и заголовки <h1>, и подзаголовки <h2>.
ранице
Оба типа заголовков на ст
овы й стиль:
теперь имеют одинак
цвет.
шрифт sans-serif и серый
284 глава 7
переходим к работе c css
свойство,
Здесь мы указываем
h1, h2 {
font-family: sans-serif; границу
color: gray; добавляющее нижнюю
› и ‹h2 ›.
border-bottom: 1px solid black; для элементов ‹h1
}
p {
color: maroon;
}
дальше 285
добавляем изысканности с помощью селекторов
Ñíîâà ïðîòåñòèðóåì
Измените свой CSS-код и обновите страницу. Вы увидите, что
новое правило устанавливает черную нижнюю границу для
основного заголовка, что выглядит очень изящно и действи-
тельно выделяет этот заголовок.
Это черная
нижняя
граница.
И никакой
границы
здесь, как мы
и хотели.
286 глава 7
переходим к работе c css
часто
Задаваемые
вопросы
В: Как же все работает, когда для од- В: Каковы преимущества такого подхода? предусмотрен специальный стиль для
ного элемента задано больше одного Не лучше ли создавать свое правило стиля подчеркивания?
правила? для каждого отдельного элемента, чтобы
наверняка знать, какой он имеет стиль?
О: Хороший вопрос. Такой стиль действи-
О: Для одного элемента вы можете зада- тельно предусмотрен, и в данной ситуации
вать столько правил стиля, сколько хотите. О: Не совсем. Если у вас объединены оди- можно использовать его. Однако два этих
Каждое новое правило добавляет новую ин- наковые стили и какой-то стиль нужно по- стиля немного по-разному отображаются на
формацию о стиле к тому правилу, которое менять, вам придется изменить только одно странице: если вы задаете нижнюю границу,
находится перед ним. Таким образом, вы правило. А если вы задаете правило для то линия растягивается на всю ширину стра-
объединяете все общие правила стилей, каждого элемента, то вам придется менять ницы, а подчеркивание отображается только
как мы сделали для <h1> и <h2>, а затем множество правил, что может послужить под самим текстом. Свойство, применяе-
указываете каждое индивидуальное свой- причиной множества ошибок. мое для подчеркивания текста, называется
ство отдельного элемента в другом правиле, text-decoration, и чтобы подчеркнуть текст
как мы это сделали, подчеркнув основной снизу, нужно установить значение underline.
заголовок. В: Почему мы используем нижнюю Попробуйте применить его, и вы поймете
границу для подчеркивания? Разве не разницу.
Мы называем это
селектором.
ментов,
h1 { Стиль применяется для эле
м; в дан ном
color: gray; описанных селекторо
›.
примере для элемента ‹h1
}
h1, h2 {
color: gray;
}
Вы увидите, что CSS позволяет задавать любые виды селекторов, которые определяют, для каких
элементов применяется стиль. Понимание того, как использовать эти селекторы, — это первый шаг
к освоению CSS. Чтобы овладеть этим, вам нужно четко понимать структуру того HTML-кода, который
вы оформляете. В конце концов, как вы можете отобрать элементы для оформления, если не имеете
четкого представления об HTML-элементах и о том, как они взаимодействуют друг с другом?
Итак, составим четкую картину гостевой HTML в своей голове, а затем вновь вернемся к селекторам.
дальше 287
рисуем структуру гостевой
дание, чтобы вам было легче. Решение упражнения вы найдете в конце главы.
html
title
img
h1
body p
a p p h2
meta
head a style
em
288 глава 7
переходим к работе c css
h1 {
border-bottom: 1px solid black;
}
p {
color: maroon;
}
</style>
</head>
<body>
<h1>Добро пожаловать в новую и усовершенствованную гостевую Head First</h1>
<p>
<img src="images/drinks.gif" alt="Напитки"/>
</p>
<p>
Заходите к нам каждый вечер, чтобы попробовать освежающие
<a href="beverages/elixir.html">напитки</a>,
поболтать и, возможно,
<em>станцевать разок-другой</em>.
Всегда обеспечен беспроводной доступ
(захватите с собой свой ноутбук).
</p>
<h2>Указатели</h2>
<p>
Вы найдете нас в центре Webville.
Если вам нужна помощь, чтобы найти нас, используйте наши
<a href="about/directions.html">Указатели</a>.
Присоединяйтесь к нам!
</p>
</body>
</html>
дальше 289
визуализируем селекторы
Мы можем добавлять
Âèçóàëüíîå ïðåäñòàâëåíèå ñåëåêòîðîâ стили только для
тех элементов, что
Рассмотрим несколько селекторов и определим, находятся внутри
где они будут отображаться в дереве, которое мы body, поэтому не
только что нарисовали. Вот как селектор h1 ото-
показываем ‹head›
бразится на диаграмме: html и все элементы вну-
три него.
h1 { head
body
font-family: sans-serif;
}
h1 p p h2 p
html
h1, h2 { body
font-family: sans-serif;
}
h1 p p h2 p
соответствует
img a em a
Теперь селектор
ам ‹h1› и ‹h2›.
обоим элемент
p { body
font-family: sans-serif;
}
h1 p p h2 p
290 глава 7
переходим к работе c css
p, h2 {
font-family: sans-serif;
}
html
body
h1 p p h2 p
img a em a
p, em {
font-family: sans-serif;
}
html
body
h1 p p h2 p
img a em a
дальше 291
победа благодаря css
292 глава 7
переходим к работе c css
дальше 293
создание css-файла
lounge.html
lounge Мы часто будем на-
h1, h2 {
}
fon
col зывать CSS-файлы
таблицами стилей.
p {
lounge.css
green.jpg
g
<html> <html>
. .
about
.
.
</html> beverages .
.
</html> images blue.jpg
drinks.gif
directions.html elixir.html
red.jpg lightblue.jpg
h1, h2 {
font-family: sans-serif;
color: gray;
} Ваш файл lounge.css
h1 { должен выглядеть так.
border-bottom: 1px solid black; Помните: никаких тегов
} ‹style›!
p {
color: maroon;
}
294 глава 7
переходим к работе c css
дальше 295
создание внешних ссылок
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Напитки гостевой Head First</title>
<link type="text/css" rel="stylesheet" href="../lounge.css"/>
</head>
<body>
.
.
Это файл elixir.html. Просто
.
</body> добавьте элемент ‹link›.
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Указатели гостевой Head First Lo</title>
<link type="text/css" rel="stylesheet" href="../lounge.css"/>
</head>
<body>
.
. То же самое для файла
. directions.html.
Добавьте элемент ‹link›
</body> здесь.
</html>
296 глава 7
переходим к работе c css
дальше 297
используем css для удобства
298 глава 7
переходим к работе c css
т-
Для заголовков используе
san s-s erif . Он не
ся шрифт
имеет засечек и выг лядит
очень четко.
вам
Засечки.
дальше 299
поговорим о наследовании
h1, h2 {
font-family: sans-serif;
color: gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
font-family: sans-serif; Просто добавьте в файле
color: maroon; lounge.css свойство font-
} family в правило для абзацев.
300 глава 7
переходим к работе c css
ли свойство
Когда вы добави
лектор p,
font-family в се
фтов для
семейство шри
изменилось.
элементов ‹p›
о поменя-
Кроме того, он
и выделенного
лось для ссылок
текста.
html
семейство
Конечно же, ено Элементы ‹a›, ‹em›
дет примен
шрифтов бу body и ‹a› из двух абзацев
ентов ‹p›.
для всех элем наследуют семей-
h1 p p h2 p ство шрифтов от
Элементы ‹img› являют- их родительского
ся дочерними для абзацев, элемента ‹p›.
img a em a
но в них нет никакого
текста, поэтому к ним
ничего не применяется.
дальше 301
переносим правила в элемент body
Как и их дочерние
элементы.
img a em a
Помните, что
в изображениях
текста нет. Ого, сработало! Просто поменяв свойство
font-family в правиле для body, мы можем
изменить шрифт для всего сайта.
p {
font-family: sans-serif;
color: maroon;
}
302 глава 7
переходим к работе c css
дальше 303
когда вы не хотите применять наследование
img a em a
Вы хотите, чт
обы вместо не
к элементу ‹e го
m› было прим
семейство шри енено
фтов serif? Ну
переопредели жно
ть наследован
CSS-правилом ие новым
.
Отлично, значит, можно переопределить наследуемые пра-
вила, применив индивидуальное правило для элемента <em>.
Рассмотрим, как добавляется элемент <em> для перекрытия
свойства font-family, указанного в body:
body {
font-family: sans-serif;
}
h1, h2 {
color: gray;
}
h1 {
border-bottom: 1px solid black;
}
ство
ределить свой
Чтобы переоп
p {
body,
color: maroon; следуемое от
font-family, на а-
} правило и уст
добавьте новое
serif данного
em { новите значение
емента ‹em›.
font-family: serif; свойства для эл
}
304 глава 7
переходим к работе c css
Òåñò
Добавьте в свой CSS-код правило стиля для эле-
мента <em> со значением serif свойства font-
family и обновите страницу lounge.html.
Обратите внимание, что для тек-
ста «станцевать разок-другой»,
который находится в элементе ‹em›,
сейчас используется шрифт serif.
часто
Задаваемые
вопросы
В: Как браузер узнает, какое правило навливающие его размер, плотность (для В: Существует ли какой-нибудь способ
нужно применять к элементу <em>, если полужирного шрифта) и начертание (для добавлять комментарии, чтобы напоми-
я переопределяю значение наследуемого выделения курсивом), являются наследу- нать самому себе, для чего используются
правила стиля? емыми. Другие свойства, например граница, эти правила?
не наследуются, что логично, не так ли? Ведь
О: В CSS всегда используется наиболее если вы хотите, чтобы ваш элемент <body> О: Да. Чтобы добавить комментарий в CSS-
приоритетное правило. Итак, если у вас был взят в рамку, это совсем не значит, что код, просто поместите его между символа-
есть правило для <body> и более приори- и все его внутренние элементы тоже должны ми /* и */. Например:
тетное правило, заданное только для эле- быть взяты в рамку. В большинстве случаев /* Это правило применяется для
ментов <em>, то будет использовано более вы можете сами догадаться, какие элементы всех абзацев и устанавливает си-
приоритетное правило. Чуть позже мы под- наследуются, а какие — нет. Когда вы боль- ний цвет текста */
робнее рассмотрим, какие правила стиля ше поработаете с различными свойствами Обратите внимание, что комментарий мо-
считаются более приоритетными. и поймете, для чего они используются, у вас жет быть расположен на нескольких строках.
вообще не будет с этим проблем. Вы также можете окружить CSS-код ком-
В: Как узнать, какие CSS-правила явля- ментариями, и браузер проигнорирует его,
ются наследуемыми, а какие нет? В: Всегда ли я могу переопределить вот так:
свойство, унаследованное от родитель-
О: Здесь пригодятся хорошие справочники, ского элемента, если мне нужно задать
/* это правило ни к чему не при-
меняется, потому что это ком-
например CSS Pocket Reference издатель- для него другое значение? ментарий
ства O’Reilly. Вообще все стили, влияющие
на внешний вид текста и определяющие О: Да. Вы всегда можете использовать p { color: blue; } */
его цвет, семейство шрифтов, с которым более приоритетный селектор, чтобы пе- Убедитесь в том, что вы надлежащим обра-
мы только что работали, и другие связан- реопределить свойство, унаследованное зом закрыли свои комментарии, иначе ваш
ные со шрифтом свойства, например уста- от родительского элемента. CSS не будет работать!
дальше 305
оформление отдельных абзацев
Я думаю, было бы
здорово, если бы под каждым
рисунком с напитком был текст,
сочетающийся по цвету с самим
изображением. Вы можете это
сделать?
Синий текст
Фиолетовый текст
Красный текст...
О, этот нам
не нужно изменять.
306 глава 7
переходим к работе c css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Напитки гостевой Head First</title>
<link type="text/css" rel="stylesheet" href="../lounge.css"/>
</head> Чтобы добавить элемент в класс, про-
<body>
сто используйте в нем атрибут class
<h1>Наши напитки</h1>
<h2>Охлажденный зеленый чай</h2> со значением, соответствующим назва-
<p class="greentea"> нию класса, например greentea.
<img src="../images/green.jpg" alt="Зеленый чай"/>
Этот напиток содержит огромное количество витаминов и минералов
и приносит пользу для здоровья благодаря составу: зеленый чай,
цветки ромашки и корень имбиря.
</p>
<h2>Охлажденный малиновый сироп</h2>
<p>
<img src="../images/lightblue.jpg" alt="Охлажденный малиновый сироп">
Сочетая в себе малиновый сок и лимонное сорго, цедру
цитрусовых и плоды шиповника, этот прохладительный напиток
освежит и прояснит ваш разум.
</p>
<h2>Чудо-напиток из голубики</h2>
<p>
<img src="../images/blue.jpg" alt="Чудо-напиток из голубики">
Экстракты голубики и вишни, добавленные в травяной чай
из бузины, сразу же приведут вас в состояние покоя
и блаженства.
</p>
<h2>Клюквенный антиоксидантный взрыв</h2>
<p>
<img src="../images/red.jpg" alt="Клюквенный взрыв">
Зарядитесь энергией богатого витамином C напитка
со вкусом клюквы и гибискуса.
</p>
</body>
</html>
Теперь, когда абзац с описанием охлажденного зеленого чая принадлежит классу greentea,
остается лишь подготовить несколько правил для оформления этого класса элементов.
дальше 307
селекторы классов
Итак, теперь вы знаете способ отобрать элементы <p>, принадлежащие конкретному классу, что-
бы оформить их. Все, что вам для этого нужно, — добавить атрибут class во все элементы <p>,
содержимое которых вы хотите отображать на странице зеленым цветом. В результате такое пра-
вило будет применено к ним. Проверьте это сами: откройте файл lounge.css и добавьте в него
селектор класса p.greentea.
body {
font-family: sans-serif;
}
h1, h2 {
color: gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
color: maroon;
}
p.greentea {
color: green;
}
308 глава 7
переходим к работе c css
дальше 309
распределим селекторы классов
p.greentea {
color: green;
}
Что же делать,
если нужно добавить
элементы <h1>, <h2>, <h3>, <p>
и <blockquote> в класс greentea?
Неужели нужно писать один
большой селектор?
.greentea {
color: green;
}
Если вы опустите название всех
элементов, добавите точку (.)
и сразу за ней — название класса,
то правило будет применено
ко всем членам класса.
310 глава 7
переходим к работе c css
дальше 311
руководство по применению классов
p.raspberry { color: blue; } Эти правила тоже лишь для абзацев из конкретного
класса. Так что у них с правилом p.greentea одинако-
p.blueberry { color: purple; } вый приоритет.
312 глава 7
переходим к работе c css
<p class="greentea">
Сохраните файл и обновите страницу. Какого цвета теперь стал текст в абзаце
с описанием чая?
дальше 313
сравнение языков: css и html
CSS HTML
314 глава 7
переходим к работе c css
CSS HTML
Неужели?
дальше 315
проверим ваше мастерство в наследовании
body
h1 p h2 p h2 blockquote
a em a img p p
em em a
316 глава 7
переходим к работе c css
<style>
body {
background-color: white
h1, {
gray;
font-family: sans-serif;
}
h2, p {
color:
}
<em> {
font-style: italic;
}
</style>
дальше 317
валидация css
Упражнение заставило
меня задуматься... Существует
ли способ применить процедуру
валидации для CSS, как это
было с HTML?
Конечно, да!
W3C-разработчики не просто просиживают
свои штаны, а усердно работают. Их CSS-вали-
датор вы найдете по адресу:
http://jigsaw.w3.org/css-validator/
318 глава 7
переходим к работе c css
торые вы мо-
Это значки, ко
ить на своей
жете размест
если захотите
веб-странице, д
я, что ваш CSS-ко
похвастатьс ч-
ым (анало ги
является валидн
ки т ак же доступны для
ные знач
-кода).
валидного HTML
часто
Задаваемые
вопросы Как и при успешной валидации HTML-
кода, здесь будет видна «зеленая поло-
са», означающая успешное завершение
В: Стоит ли мне обращать внимание процедуры валидации вашего CSS-кода.
на эти предупреждающие сообщения? Зеленый – это хорошо!
О чем они говорят?
дальше 319
попробуем на вкус некоторые свойства
gn
text-ali
Коктейль top
-
Это свойство использует
ся для выравн ива ния тек
-
ста
Определяет по
из свойств зицию верхне
края элемент
го
а.
по левому краю, по центр
или по пра вом у кра ю.
у
ервал
Используйте св letter-s Позволяет задавать инт
ойство color pacing между символами в пределах
для задания цв
ета текста
элемента. элемента.
background-color
color Это свойство применяет-
Это свойство опре- ся для выделения текста
т
рифта. деляет фоновый цве курсивом.
олщину ш
Задает т чтобы сд
е- элемент а.
йте его,
Использу и р н ы м .
tyle
ст полуж -s
лать тек border font
ght
t-wei С помощью эт
fon вать рамку во
ого свойства
можно нарисо
-
Это свойство по-
круг элемент зволяет контро-
left быть сплошно а. Она может
й, пунктирно лировать то, как
й и т. д.
Используя это свойство, style будут выглядеть
вы говорите элементу, Если вам необходим отступ
list- пункты списка.
где расположить его между краем элемента и его
левый край. padding содержимым, применяйте
о свойство,
свойство padding. Используйте эт
строчный ь изображение
Данное свойство задает меж чтобы поместит
ентах.
интервал в текстовых элем шрифт под элементом.
Делает е н ь ш е . ge
li или м ma
больше
ne -i
-h
ei font- und
size ro
gh
t ckg
ba
320 глава 7
переходим к работе c css
Кажется,
вы начинаете хорошо
разбираться во всех этих
стилях. Нам очень интересно,
какого уровня вы достигнете
в следующих нескольких
главах.
ÊËÞ×ÅÂÛÅ
ÌÎÌÅÍÒÛ
CSS состоит из простых операторов, называемых Многие свойства наследуются. Например, если
правилами. свойство определено для элемента <body>, то
это свойство унаследуют все его дочерние эле-
Каждое правило задает стиль для выбранного
менты.
HTML-элемента.
Вы всегда можете переопределить унаследован-
Обычно правило состоит из селектора и одного
ное свойство, создав правило с большим прио-
или нескольких свойств и их значений.
ритетом для того элемента, у которого хотите это
Селектор указывает, к какому элементу приме- свойство поменять.
няется данное правило.
Чтобы добавить элементы в класс, используйте
В конце описания каждого свойства ставится атрибут class.
точка с запятой.
Если хотите выбрать определенный элемент из
Все свойства и их значения для каждого правила класса, указывайте название элемента, символ «.»,
заключаются в фигурные скобки. а затем название класса.
Вы можете выбрать любой элемент, используя Чтобы выбрать все элементы класса, сразу пи-
в качестве селектора его название. шите .название_класса.
Можно выбрать сразу несколько элементов, раз- Вы можете указать, что элемент принадлежит не-
делив их названия запятыми. скольким классам. Для этого в значении атрибу-
Один из самых простых способов оформления та class укажите нужные классы через пробел.
HTML — использовать тег <style>. Вы можете проверить свой CSS-код на валид-
При использовании HTML-кода и при создании ность, используя валидатор W3C, который на-
сайтов с достаточно большим уровнем сложности ходится по адресу http://jigsaw.w3.org/
лучше ссылаться на внешние таблицы стилей. css-validator.
дальше 321
решение упражнений
head body
Помните, как вы рисовали иерархическую диаграмму
из элементов HTML в главе 3? Теперь вы должны
title p
были это сделать для главной страницы гостевой. Вот
решение этого упражнения:
q
html
head body
img a em a
322 глава 7
переходим к работе c css
p, h2 {
font-family: sans-serif;
}
html
body
h1 p p h2 p
img a em a
p, em {
font-family: sans-serif;
}
html
body
h1 p p h2 p
img a em a
дальше 323
решение упражнений
h1, h2 {
color: gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
color: maroon;
}
p.greentea {
color: green;
}
p.raspberry {
color: blue;
}
p.blueberry {
color: purple;
}
324 глава 7
переходим к работе c css
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Напитки гостевой Head First</title>
<link type="text/css" rel="stylesheet" href="../lounge.css"/>
</head>
<body>
<h1>Наши напитки</h1>
<h2>Охлажденный зеленый чай</h2>
<p class="greentea">
<img src="../images/green.jpg" alt="Зеленый чай">
Этот напиток содержит огромное количество витаминов и минералов
и приносит пользу для здоровья благодаря составу: зеленый чай,
цветки ромашки и корень имбиря.
</p>
<h2>Охлажденный малиновый сироп</h2>
<p class="raspberry">
<p>
<img src="../images/lightblue.jpg" alt="Охлажденный малиновый сироп">
Сочетая в себе малиновый сок и лимонное сорго, цедру
цитрусовых и плоды шиповника, этот прохладительный напиток
освежит и прояснит ваш разум.
</p>
<h2>Чудо-напиток из голубики</h2>
<p class="blueberry">
<p>
<img src="../images/blue.jpg" alt="Чудо-напиток из голубики">
Экстракты голубики и вишни, добавленные в травяной чай
из бузины, сразу же приведут вас в состояние покоя
и блаженства.
</p>
<h2>Клюквенный антиоксидантный взрыв</h2>
<p>
<img src="../images/red.jpg" alt="Клюквенный взрыв">
Зарядитесь энергией богатого витамином C напитка
со вкусом клюквы и гибискуса.
</p>
</body>
</html>
дальше 325
решение упражнений
Для элемен
та blockquo
правила, п te нет CSS
оэтому он -
ементов h1
Поскольку у эл цвет от эл т оже унасле
дует
свойства color, емента bo
и h2 нет своего е- скольку селе dy. Однако
п о-
т цвет от эл body ктор p пер
они унаследую на черный,
blockquote
еопределяе
т цвет
т повезл о!
мента body. Во не станет
зеленым.
h1 p h2 p h2 blockquote
a em a img p p
Элементу em посчаст-
ливилось быть дочерним em em a
элементом h2, которы
й,
в свою очередь, унаследо-
вал цвет от body. А по- Эти «бедные» элементы
a также являются дочер- для этих эле-
скольку нет отдельного К несчастью ьских
ними для элемента p, по- в их родител
правила для em, которо ментов em, ется
е
этому они не унаследовали переопределя
перекрывало бы заданн элементах p bo dy.
ый дованный от
цвет своим собственны цвет от body. цвет, унасле лу ют
ча
м, м, они не по
то em наследует цвет Таким образо dy.
едство от bo
от body. цвет в насл
для p, поэтому
img — дочерний элемент
body. Он ни в ка-
он не наследует цвет от
т в наследство.
ком случае не получит цве
326 глава 7
переходим к работе c css
e› —
HTML! Тег ‹styl
де не до лж но быть никакого
ко
В вашем CSS- аблицах стиля
CSS.
M L, и он не работает в т
это HT
<style>
Не хватает точки
body {
с запятой.
background-color: white
Вот здесь нужн
а скобка }.
Лишняя запятая.
h1, {
gray; Не указано название свойства и двоеточие.
font-family: sans-serif;
}
ачения свойства
Не хватает зн
той.
и точки с запя
h2, p {
color:
}
<em> {
Вместо названия элемента использован тег HTML.
font-style: italic;
} Должно быть написано просто em.
дальше 327
решение упражнений
Используется фиоле-
товый цвет, потому
В файле elixir.html измените элемент абзаца что правило для класса
для описания охлажденного зеленого чая так, что- blueberry указано по-
бы он включал в себя все три класса: следним в CSS-файле.
<p class="greentea raspberry
blueberry">
Сохраните файл и обновите страницу. Какого цвета льзуется
Ôèîëåòîâûé. Все еще испо
стал текст в абзаце с описанием чая? цвет, пото-
фиолетовый
док следования
Далее поменяйте порядок следования файлов му что поря
буте class
классов в атри
в вашем HTML-коде:
.
кого значения
<p class="raspberry blueberry не имеет ника
greentea">
Сохраните файл и обновите страницу. Какого цвета
теперь стал текст?
Ôèîëåòîâûé.
льзует-
На этот раз испо
к как
Откройте свой CSS-файл и переместите правило ся зеленый цвет, та
я класса
теперь правило дл
p.greentea в самый конец.
CSS-
Сохраните файл и обновите страницу. Какого цвета greentea указано в
стал текст в абзаце с описанием чая? Çåëåíûé. файле последним .
Увеличиваем
словарный запас
Andale
Mono
Ñàìîå ãëàâíîå î òåêñòå è øðèôòàõ Arial
Arial Bla
Множество CSS-свойств создано для того, чтобы помочь вам оформить ck
текст. С помощью CSS вы можете контролировать шрифт, его стиль, Comic Sa
ns
цвет и даже декоративные элементы, встроенные в текст, — обо всем Courier
этом мы расскажем в данной главе. Начнем с изучения существующих New
шрифтов, которые используются для отображения текста на ваших Georgia
страницах. Вы уже видели свойство font-family, а в этой главе узна- Impact
ете больше о назначении различных шрифтов.
Times New
Roman
Перед тем как приступить, рассмотрим основные свойства, которые
Trebuchet
вы можете использовать, чтобы задать и поменять шрифты. Затем мы MS
рассмотрим базовые шрифты и очень подробно изучим особенности Verdana
использования каждого из них.
330 глава 8
меняем шрифты и цвета
body {
Silver Teal White Yellow
color: silver;
}
дальше 331
обзор семейств шрифтов
Trebuchet MS
В семейство serif входят шрифт
ы Arial
с засечками. У многих люд ей они
ассоциируются с газетными
Geneva
статьями.
Засечки — это
декоративные
штрихи
и черточки по
Ñåìåéñòâî serif краям букв.
Семейство sans-serif содержит
ся
шрифты без засечек. Они читают
на экране компьютера лучше, чем
шрифты семейства serif.
Times
Sans-serif
означает «без
Times New Roman засечек».
332 глава 8
меняем шрифты и цвета
Ñåìåéñòâî monospace
Courier Семейство monospace состоит из шрифтов,
символы которых имеют одинаковую
Courier New фиксированную ширину. Например, символ «i»
будет иметь такую же ширину, как
Andale Mono символ «m». Эти шрифты используются
в основном для отображения примеров кода
программ.
Comic Sans
monospace, выглядят так, будто были напечата-
ны на пишущей машинке. Шрифты из семейств
cursive и fantasy применяются для художествен-
ного оформления или в декоративных целях.
Apple Chancery
Ñåìåéñòâî fantasy
И последнее семейство шр
ифтов —
fantasy. Оно состоит из худ
ожественных
и декоративных шрифтов.
Last NinjA
Impact
дальше 333
усовершенствуйте свое чувство шрифта
Развлечения с магнитами
Ваша задача — помочь вымышленным шрифтам найти дорогу домой,
к их родным семействам. Переместите каждый магнит для разметки,
расположенный слева, в правильное семейство шрифтов, распо-
ложенное справа. Перед тем как перейти к следующему разделу,
проверьте свои ответы. Если понадобится, перечитайте описание
семейств шрифтов, приведенное на предыдущих страницах.
Bainbridg
e Ñåìåéñòâî monospace
Ñåìåéñòâî fantasy
Cartoon
Palomino
Messenger
Savanna Ñåìåéñòâî serif
h
Crush
Nautica
Quarter
334 глава 8
меняем шрифты и цвета
body {
font-family: Verdana, Geneva, Arial, sans-serif;
}
В свойстве font-family Пишите названия
можно определить несколько шрифтов правильно, айте
В конце списка всегда указыв
шрифтов. Просто укажите с учетом регистра , нап рим ер serif,
название семейства
их названия через запятую. букв. osp ace.
sans-serif, cursive или mon
аете
Для чего это нужно, вы узн
через минуту.
Êàê ðàáîòàåò ñâîéñòâî font-family
Посмотрите, как браузер понимает список шрифтов, заданный в вашем свойстве font-family:
Если и Geneva
Проверяет, установлен Если Verdana И наконец, если ни
не установлен, то не установлен, то
ли шрифт Verdana на один из указанных
ищет шрифт Arial.
компьютере пользователя, ищет шрифт Geneva. шрифтов не найден,
Если он имеется на
и, если да, использует его В случае успешного
вашем компьютере,
применяется шрифт
в качестве шрифта для поиска использует
то браузер применяет
sans-serif, который
этого элемента (в данном его для ‹body›.
его для ‹body›. считается браузером
случае для элемента ‹body›). используемым
по умолчанию.
body {
font-family: Verdana, Geneva, Arial, sans-serif;
}
ыре
Вам не обязательно указывать чет
взаимозаменя емых шри фта . Мож ете
ей главе
Свойство font-family дает возможность задать спи- указать два, три и т. д. В предыдущ
сок предпочтительных шрифтов. Будем надеяться, что , прим еняе мый
мы использовали только один
большинство браузеров будет поддерживать один из
по умолчанию шрифт sans-serif. Надо
указанных вами шрифтов, а если нет, то вы, по крайней лательно,
отметить, что так делать неже
мере, можете быть уверены, что он использует типовой дает возм ожно сти
потому что это не
шрифт из этого же семейства. ть шри фты,
в полной мере контролирова
А теперь поменяем несколько шрифтов на ваших стра- которые будут использованы.
ницах...
дальше 335
усовершенствуем дневник тони
задавали
Вспомните, что мы не
й для сайта Тони,
никаких стиле
зуе тс я
поэтому в нем исполь
if.
семейство шрифтов ser
Если не учитывать
фотографии, эта страница
одноцветная, поэтому
не помешает добавить
шрифтам цвета.
336 глава 8
меняем шрифты и цвета
body {
font-family: Verdana, Geneva, Arial, sans-serif;
}
Теперь необходимо создать ссылку с дневника Тони на новый файл с таблицей стилей. Для
этого откройте файл journal.html, находящийся в папке chapter8/journal. Вам нужно
добавить в него элемент <link>, что позволит сослаться на стили в файле journal.css,
как мы сделали это ниже.
Тони, чтобы перевести его
Мы также обновили файл journal.html
и тег ‹meta›.
на официальный HTML5, добавив DOCTYPE
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="journal.css"/>
<title>На скутере по США</title>
</head>
м
Здесь мы создае
<body>
. но вы й
. ссылку на
. файл journal.css.
</body>
</html>
После того как вы внесете это изменение, сохраните файл и откройте страницу в браузере.
дальше 337
несколько вопросов о шрифтах
мое
Поскольку font-family — наследуе
if
свойство, теперь шрифт sans-ser
на
используется для всех элементов
эти х пунк тов списка...
странице, даже для
часто
Задаваемые
вопросы идет тот шрифт, который вы хотите видеть на в font-family, не будут найдены. Вместо них
странице, за ним — его основной заместитель, браузер будет применять тот шрифт, который
В: Как мне задать шрифт, название кото- затем следующий заместитель и т. д. Что определен им как используемый по умолчанию
рого состоит из нескольких слов, например касается последнего шрифта, то здесь нужно для указанного семейства шрифтов.
Courier New? указать универсальный шрифт, характерный
для конкретного вида: sans-serif или serif, кото- В: Как узнать, какой шрифт лучше ис-
О: Объявляя шрифт, заключите такое на- рый должен принадлежать тому же семейству, пользовать? Serif или sans-serif?
звание в двойные кавычки, например: font- что и остальные шрифты списка.
family: "Courier New", Courier; О: Строгих правил для этого нет. Тем не
В: Разве serif и sans-serif — это шрифты? менее многие полагают, что для текста на
В: Итак, свойство font-family представ- экране компьютера лучше подходит sans-
ляет собой набор взаимозаменяемых О: Serif и sans-serif — это не названия реаль- serif. Существует множество дизайнов с ис-
шрифтов? но существующих шрифтов. Тем не менее ваш пользованием шрифтов serif для основного
браузер использует действительно существу- текста или шрифтов serif и sans-serif впе-
О: Да. По сути, это список шрифтов, указан- ющий шрифт вместо serif или sans-serif, если ремешку. То есть, дизайн вашей страницы
ных в порядке первоочередности. Первым все предшествующие шрифты, указанные зависит только от вашей фантазии и вкуса.
338 глава 8
меняем шрифты и цвета
дальше 339
внедрение веб-шрифтов
Я понял, насколько
важно убедиться в том, что
мы указываем шрифты, встречающиеся на
компьютере любого из пользователей, однако
я очень наделся, что мы сможем применить
шрифт «Emblema One», который я нашел, для основного
заголовка. Можно ли его задействовать, и, если
в операционных системах пользователей его не
окажется, смогут ли они прибегнуть к другому
шрифту как к резервному варианту?
340 глава 8
меняем шрифты и цвета
abcdefg
hijklmn
а содер-
В файле шрифт opqrstuv
wxyzABCD
димое
жится все необхо EFGHIJKL
о, чтобы
браузеру для тог crazyfont.woff
ответ-
использовать со
иф т в вашей
ствующий шр
веб-странице. www.starbuzzcoffee.com
Обратите внимание
на то, что файл дан-
ного шрифта имеет
На вашем сервере, есте-
расширение «.woff»,
ственно, также распола-
означающее «web open
гаются все ваши файлы
font format».
HTML и CSS, но здесь они
не показаны.
crazyfont.woff
.
<html> www.starbuzzcoffee.com
.
.
</html>
дальше 341
работаем с веб-шрифтами
abcdefg www.starbuzzcoffee.com
hijklmn
opqrstuv
wxyzABCD
EFGHIJKL
World! wxyzABCD
новенькое! EFGHIJKL
crazyfont.woff
www.starbuzzcoffee.com
В: Что такое «WOFF», или «Web В: Получается, что для того, что- В: Если я задействую веб-шрифт,
Open Font Format»? бы использовать веб-шрифты, не- то смогу ли рассчитывать на то,
обходимо разместить их файлы
О: WOFF пребывает на стадии развития в на сервере?
что он будет доступен для моих
342 глава 8
меняем шрифты и цвета
Øàã âòîðîé: óáåäèòüñÿ, ÷òî ó íàñ èìåþòñÿ âñå ôîðìàòû øðèôòà, êîòîðûé íàì íåîáõîäèì
Хорошая новость насчет веб-шрифтов: CSS-правило @font-face является почти стандартом для совре-
менных браузеров. Но есть и плохая новость: фактический формат, используемый для сохранения
шрифтов, пока не полностью стал стандартом (хотя мы к этому идем), а браузеры на самом деле в той
или иной степени поддерживают несколько разных форматов (на момент написания данной книги).
Вот распространенные форматы (и соответствующие им файловые расширения):
Шрифты TrueType: .ttf Шрифты TrueType и OpenType тесно связаны между собой;
pe).
формат OpenType основан на TrueType (он новее, чем TrueTy
pe.
Шрифты OpenType: .otf Embedded OpenType (EOT) – это компактная форма OpenTy
Данный формат являет ся пропри етарны м (Micros oft) и под-
держивается только браузером Internet Explorer.
Шрифты Embedded OpenType: .eot
Scalable Vector Graphics или SVG – это графический формат
общего назначения, используемый в случае со шрифтами SVG
Шрифты SVG: .svg
для представления символов.
Web Open Font Format базируется на TrueType и разраба-
Шрифты Web Open Font Format: .woff тывается в качестве стандарта для веб-шрифтов. Хорошо
поддерживается большинством современных браузеров.
Большинство современных браузеров поддерживают формат Web Open Font Format, поэтому именно
его мы и рекомендуем использовать. Как альтернативу для устаревших браузеров мы будем использовать
TrueType, поскольку данный формат тоже хорошо поддерживается всеми браузерами (за исключением
Internet Explorer).
Øàã òðåòèé: ðàçìåñòèòü íàøè ôàéëû øðèôòîâ â Èíòåðíåòå
Вам потребуется самим разместить свои файлы шрифтов в Интернете, чтобы они стали доступны для
браузеров ваших пользователей. Либо вы можете воспользоваться одной из множества онлайн-служб
шрифтов, обеспечивающих хостинг таких файлов. И в том и в другом случае вам будет нужно знать
URL-адреса ваших файлов шрифтов. Вот URL-адреса файлов Тони, размещенных нами на сайте
wickedlysmart.com:
http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff
http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf
дальше 343
добавляем веб-шрифты в jornal
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}
Свойство scr сообщает браузеру о том, где можно взять соответству-
ющий шрифт. Нам необходимо указать значение scr для каждого файла,
который может быть распознан браузером. В нашем случае мы указы-
ваем типы .woff и .ttf, распознаваемые современными браузерами.
Правило @font-face дает команду браузеру загружать файлы шрифтов, используя URL-адреса в scr.
Браузер будет загружать все файлы, URL-адреса которых указаны в scr, пока не найдет файл шрифта,
который он поддерживает. После загрузки шрифту будет присвоено имя, указанное в свойстве font-
family, — в данном случае это имя «Emblema One». Давайте посмотрим, как мы можем использовать
этот шрифт в стиле страницы.
Подсказка: вы уже знаете,
Øàã ïÿòûé: èñïîëüçîâàòü óêàçàííîå â font-family èìÿ â íàøåì CSS как это сделать!
Загрузив шрифт в браузер с помощью правила @font-face, вы можете приступать к использованию дан-
ного шрифта, ссылаясь на его имя, которое вы указали для него в свойстве font-family. Давайте заменим
шрифт заголовка <h1> страницы Тони на шрифт «Emblema One». Чтобы сделать это, нам потребуется
добавить правило для <h1>, приведенное ниже:
а так же, как
Мы указываем имя шрифт
h1 { раз это будет
и обычно, только на этот
ощью @font-face!
шрифт, загружаемый с пом
font-family: "Emblema One", sans-serif;
пойдет не так,
} И на случай, если что-то
естве резервного
мы указываем sans-serif в кач
варианта.
344 глава 8
меняем шрифты и цвета
часто
Задаваемые
вопросы
В: Правило @font-face не очень похоже на CSS- для печатной страницы, настольного монитора или экра-
правило и не действует как оно, не так ли? на мобильного телефона. Более подробно о @media мы
поговорим позже.
О: Cчитайте @font-face встроенным CSS-правилом,
а не правилом, действующим как селектор. Вместо того В: Похоже, веб-шрифты – это отличная штука; а есть
чтобы выбирать элемент, правило @font-face позволяет ли какие-нибудь аргументы против их использова-
вам извлечь веб-шрифт и присвоить ему имя, указанное ния?
в font-family. Символ @ в начале является указателем
на то, что это необычное CSS-правило. О: Таких аргументов несколько. Во-первых, извлече-
ние веб-шрифтов требует времени, в силу чего ско-
В: Есть ли другие встроенные CSS-правила, о ко- рость загрузки вашей страницы может снизиться при
торых мне следует знать? их первом извлечении. Кроме того, управлять большим
количеством шрифтов нелегко. И наконец, вы можете
О: Есть. Двумя распространенными встроенными пра- столкнуться с мобильными и небольшими по размеру
вилами, с которыми вы будете сталкиваться, являются устройствами, которые их не поддерживают, поэтому
@import, позволяющее импортировать дополнитель- всегда предусматривайте в своем коде альтернативные
ные CSS-файлы (вместо <link> в вашем HTML-коде), варианты шрифтов.
и @media, дающее возможность создавать CSS-правила, (Продолжение на с. 347)
специфичные для определенных медиатипов, например
дальше 345
как задать размер шрифта
Если вы все сделаете
правильно, то каждый
Ðàçìåðû øðèôòà пользователь сможет
самостоятельно
Теперь, когда на странице Тони используется новый набор шрифтов, необ- увеличивать размеры
ходимо поработать с их размерами, так как чаще всего размеры заголовков, шрифта на вашей
устанавливаемые по умолчанию, немного великоваты. Как же задаются веб-странице, чтобы
размеры шрифтов? Для этого предусмотрено несколько способов. Рассмо- ему было комфортнее
трим некоторые из них и затем поговорим о том, какой больше подходит для читать. Совсем скоро
того, чтобы размеры шрифтов были последовательными и удобными для вы узнаете, как это
пользователя. сделать.
px Вы можете задать размер шрифта в пикселах, как мы это делали в главе 5. Когда
вы указываете размер шрифта таким образом, вы говорите браузеру, какой высоты
должны быть символы шрифта.
346 глава 8
меняем шрифты и цвета
часто
Задаваемые
вопросы
В: Можно ли задействовать большое количество чересчур низкой, то это может вызвать раздражение
особых шрифтов посредством @font-face? у ваших пользователей!
О: Да. Если вы используете @font-face для загрузки В: Вы упоминали службы, обеспечивающие хо-
шрифтов, то в случае с каждым шрифтом, который стинг файлов веб-шрифтов. Можно подробнее?
вы желаете задействовать, вам потребуется удосто-
вериться в том, что на вашем сервере доступен файл
О: Конечно! FontSquirrel (http://www. fontsquirrel.com/) –
это отличное место для поиска открытых и бесплатных
соответствующего шрифта, а также создать отдельное
шрифтов, которые вы сможете выгрузить на свой сервер.
правило @font-face для каждого из шрифтов, чтобы
Имеющиеся там наборы шрифтов позволяют обеспечи-
им можно было дать уникальные имена. Однако не
вать сразу несколько форматов определенного шрифта.
забудьте убедиться в том, что вы задействуете лишь теПосредством службы Google Web Fonts (http://www.
шрифты, которые действительно необходимы для вашей google.com/webfonts) вы сможете поручить Google вы-
веб-страницы; каждый лишний шрифт будет приводить к полнение всей работы по управлению шрифтами и CSS
увеличению времени загрузки вашей страницы, поэтому за вас; в данном случае вам потребуется лишь узнать
использование большого количества веб-шрифтов будет ссылки на требуемые вам шрифты в службе Google,
замедлять ее. Если скорость загрузки страницы окажется
а затем использовать их в своем CSS.
юо веб- шри ф-
Дополнительную информаци
дет е в при лож ени и к данной книге. дальше 347
тах вы най
используем для задания размера ключевые слова
Ключесвлыове а
Существует еще один способ задавать размеры шрифта: ис-
пользовать ключевые слова. Вы можете определить размер
шрифта как xx-small, x-small, small, medium, large,
x-large или xx-large, и браузер преобразует эти слова
в значения в пикселах.
Обычно размеры шрифтов, которые задаются различными
xx-small
ключевыми словами, соотносятся друг с другом таким
образом. Каждый следующий размер примерно на 20 % x-small
больше предыдущего, а small обычно равен 12 пикселам small
в высоту. Тем не менее не забывайте, что ключевые слова
не всегда одинаково определяются в различных браузерах medium
и пользователи при желании могут их переопределить.
large
body {
}
font-size: small;
x-large
В большинстве браузе
задает размер шриф
равным примерно 12
ров это правило
та в элементе body xx-large
пикселам.
1 Выберите ключевое слово (мы рекомендуем small или medium) и укажите его в ка-
честве размера шрифта в правиле для body. Таким образом вы зададите размер
шрифта, используемый на вашей странице по умолчанию.
Это неплохие требования, но все же что в них хорошего? Задав размеры шрифтов относительно разме-
ра шрифта элемента body, вы действительно легко сможете поменять их на всей веб-странице, просто
изменив высоту шрифта для body. Хотите изменить страницу так, чтобы на ней использовались боль-
шие размеры шрифтов? Если значение размера шрифта для body равняется small, просто поменяйте
его на medium, и размеры шрифтов для всех остальных элементов автоматически пропорционально
увеличатся, потому что они заданы относительно размера шрифта элемента body. Кроме того, в таком
случае ваши пользователи и сами смогут изменить размер шрифтов на странице.
348 глава 8
меняем шрифты и цвета
Теперь размер шрифта элемента body стал крупнее, и все остальные размеры изменились соот-
ветственно. Это великолепно, потому что вам не пришлось менять вручную остальные размеры
шрифта — достаточно было изменить размер шрифта элемента body. Если же вы пользователь,
то вы вообще не должны знать, как это происходит. Когда вы увеличили размер шрифта, объем
текста стал еще больше, поскольку все размеры элементов заданы относительно друг друга. В ре-
зультате страница стала выглядеть еще лучше с увеличенным размером шрифта.
дальше 349
задаем размеры шрифтов на странице тони
350 глава 8
меняем шрифты и цвета
Заголовки ‹h2›
также немного
уменьшились, и их
размер хорошо
сочетается
с размером
заголовка ‹h1›.
дальше 351
еще несколько вопросов о размерах шрифтов
часто
Задаваемые
вопросы
В: Итак, задавая размер шрифта для ходящие для них размеры шрифтов. В таком В: Итак, могу ли я при задании разме-
элемента <body>, я каким-то образом случае вы также создадите страницы, ко- ров в правиле для body вместо ключевых
определяю и все остальные размеры на торые сложнее поддерживать, потому что слов использовать em или %? Если я укажу
странице. Как же это работает? при необходимости увеличения размеров свойство font-size для body равным 90%,
шрифтов для всех элементов вам придется что это будет означать? Это 90 % от чего?
О: Установив размер шрифта для элемен- вносить в код очень много изменений.
та <body>, вы сможете определить размеры О: Да, вы можете сделать и так. Если вы
шрифтов для всех остальных элементов на В: В чем разница между em и %? Кажется, укажете в правиле для body размер шрифта,
странице относительно их родителя. Какие они делают одно и то же. равный 90 %, то он будет составлять 90 % от
преимущества это дает? Если вам нужно размера шрифта, используемого по умол-
изменить размеры шрифтов, то вам пона- О: По сути, это два разных способа для чанию, который, как мы только что сказали,
добится лишь указать размер шрифта для достижения одной и той же цели. Оба дают обычно равняется 16 пикселам. Если вы
body, а все остальные размеры изменятся возможность задать размер относительно хотите, чтобы размер шрифта немного отли-
пропорционально. размера шрифта родительского элемента. чался от того, который задается ключевыми
352 глава 8
меняем шрифты и цвета
font-weight: bold;
дальше 353
используем нормальную плотность
t
значение font-weigh
Здесь мы меняем
ловков ‹h2›.
на normal для заго
А вот резуль
таты. Сейчас
заголовки ‹h2›
стали выгляд
легче. Однако еть
по-прежнему
что это заго яс но,
ловки, поскол
размер их шри ьк у
фта составля
130 % от разм ет
ера шрифта
основного тек
ста.
354 глава 8
меняем шрифты и цвета
Îôîðìëåíèå øðèôòîâ
Вы уже знакомы с курсивом, верно? Курсивные символы
пишутся под наклоном и иногда имеют дополнительные
засечки. Например, сравните эти два стиля: Курсивный
не курсивный Курсивные символ
ы и наклонный — это
курсивный наклонены вп ра во и имеют
сечки.
два стиля, которые
дополнительные за
устанавливают для
В CSS можно задать курсивный стиль
тексту, используя свойство font-style:
Существует шрифта наклон вправо.
распространенная
ошибка, когда
font-style: italic; вместо italic пишут Поскольку вы не можете
italics. Если вы так
Однако не во всех шрифтах предусмо-
трен курсив, и вместо него можно уви- сделаете, то ваш
управлять теми
деть лишь наклонные символы. Такие сим- текст не станет шрифтами и браузерами,
курсивным, поэтому
волы также наклонены вправо, но при
этом браузер не использует специально не забывайте
что используют ваши
разработанный набор символов, а про-
сто наклоняет стандартный шрифт.
проверять свой код. посетители, вы будете
Сравните следующие стили: в одних случаях получать
курсивный шрифт,
В наклонном стиле
не наклонный стандартные символы
а в других — наклонный,
наклонный просто наклонены независимо от того,
вправо.
Чтобы получить наклонный текст, вы также можете исполь-
какой стиль вы указали.
зовать свойство font-style, задав для него такое значение:
Таким образом, вы
font-style: oblique;
можете просто задавать
Дальше вы поймете, что на практике в зависимости от вы-
бранного шрифта и браузера два стиля могут иногда выгля-
курсивный стиль и не
деть одинаково, а иногда — нет. Итак, если разница между обращать внимания на
наклонными и курсивными символами для вас не очень
велика, выберите одно из этих начертаний и продолжайте различия (скорее всего,
работать. Если же она имеет для вас значение, придется
протестировать различные сочетания шрифтов и браузеров
вы все равно не сможете
для достижения лучшего результата. это контролировать).
дальше 355
используем стили шрифта
blockquote {
font-style: italic;
}
часто
Задаваемые
вопросы
В: Текст элемента <blockquote> на самом деле находится
внутри элемента <p>, который вложен в элемент <blockquote>.
Каким же образом текст абзаца становится курсивным?
356 глава 8
меняем шрифты и цвета
дальше 357
обзор веб-цветов
100 % зеленый
358 глава 8
меняем шрифты и цвета
ирующий
Синий не добавляется в результ
как за-
цвет на экране компьютера, так
дано 0 % синего.
Смешивая 80 % красного
и 40 % зеленого, мы получим
40 % зеленый
приятный оранжевый цвет.
0 % зеленый
дальше 359
названия цветов
360 глава 8
меняем шрифты и цвета
Blue Fuchsia
Îïðåäåëåíèå öâåòà ÷åðåç åãî íàçâàíèå
Наиболее простой способ описать цвет в CSS — просто использовать
его название. Существует 16 основных и 150 дополнительных цве- Gray Green
тов, которые могут задаваться таким способом. Предположим, вы
хотите задать серебристый цвет для фона элемента body. Для этого
вам нужно будет написать в CSS следующее:
Lime Maroon
body {
background-color: silver; Navy Olive
}
Purple Red
Это правило
Свойство Цвет, заданный
для body.
background-color. названием.
Silver Teal
Итак, чтобы задать цвет таким образом, просто укажите его назва-
ние в качестве значения свойства. При этом не имеет значения,
пишете вы названия строчными или прописными буквами, поэтому White Yellow
можете напечатать silver, Silver или SILVER, и все это сработает.
Здесь 16 цветов, определенных в CSS. Помните, что это всего лишь
названия заданных сочетаний красного, зеленого и синего цвета
в определенных пропорциях.
дальше 361
используем rgb-значения
362 глава 8
меняем шрифты и цвета
й
ас
ны
кр
ле
зе
дальше 363
понимание шестнадцатеричных кодов
Шаг первый
Разделите шестнадцатеричный цвет на три компонента.
Помните, что каждый шестнадцатеричный цвет состоит из красной,
зеленой и синей составляющих. Первым делом вам нужно разделить их.
Разбейте шестнадцатеричное
число на красную, зеленую
и синюю составляющие.
# CC 66 00
Красный Синий
Зеленый
CC 66 00
364 глава 8
меняем шрифты и цвета
Шаг второй
Преобразуйте каждое шестнадцатеричное число в десятичное.
Теперь, когда составляющие разделены, можете преобразовать каждую
в десятичное число от 0 до 255. Начнем с красной составляющей:
Возьмите пер-
вый слева символ 12
и преобразуйте его
в десятичное число,
а затем умножьте
это число на 16.
12 * 16 = 192
это эквива-
Итак, 204 —
Наконец, сложите ичной систе-
лент в десят
эти два числа. для шестнад-
192 + 12 = 204 ме счисления
числа CC.
цатеричного
Шаг третий
Теперь сделайте то же самое для остальных значений.
Повторите такие же действия для двух оставшихся значений. Вот что
вы должны получить:
Чтобы преобразовать 66,
нужно выполнить такие вы-
CC 66 00 числения: (6 * 16) + 6 = 102.
Шаг четвертый
А никакого четвертого шага нет, вы уже все сделали!
Ну вот, кажется, и все. Теперь у вас есть числа для каждой составляющей
и вы точно знаете, сколько красного, зеленого и синего входит в ваш цвет.
Можете таким же cпособом разобрать любое шестнадцатеричное число.
дальше 365
используем редактор изображений для веб-цветов
body {
background-color: rgb(80%, 40%, 0%); Определение через процентное
} соотношение красного, зеленого
и синего.
body { ее
з значение, задающ
background-color: rgb(204, 102, 0); Определение чере си не го
го, зеленого и
количество красно
}
от 0 до 255.
цветов по шкале
body {
background-color: #cc6600; Определение через компактный
}
шестнадцатеричный код.
366 глава 8
меняем шрифты и цвета
body {
background-color: #b817e0;
}
368 глава 8
меняем шрифты и цвета
@font-face {
font-family: "Emblema One";
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-
Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-
Regular.ttf");
}
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
Мы хотим сделать заголовки ‹h1› и ‹h2› оранжевыми, поэтому
}
помещаем свойство color в правило для них.
h1, h2 { Это шестнадцатеричный код для
color: #cc6600; оранжевого цвета, известного еще
text-decoration: underline; как rgb(80%, 40%, 0%).
} А это способ, которым мы устанавл
иваем
подчеркивание текста. Мы использу
ем свойство
h1 { text-decoration и задаем ему значение
underline.
font-family: "Emblema One", sans-serif;
font-size: 220%;
}
Обратите внимание на то, что мы создали
h2 { одно новое правило как для заголовков ‹h1›,
font-weight: normal; так и для заголовков ‹h2›. Это хороший
font-size: 130%; подход, поскольку он позволяет сократить
} дублирование одного и того же кода.
blockquote {
font-style: italic;
}
дальше 369
протестируем шестнадцатеричные цвета
Хмм...
Вдобавок к этому заголовки подчеркнуты.
ения,
мы думали, что это хороший способ выдел
и на ссылк и, на
но наши заголовки стали похож
привы кли ду-
которых можно щелкнуть, а люди
что
мать, что в Сети можно щелкать на всем,
подчеркнуто.
370 глава 8
меняем шрифты и цвета
Если же ваш текст наследует какой-либо вид оформления, а вам это не нужно, просто
используйте значение none:
часто
Задаваемые
вопросы
В: Итак, если у меня задано два разных правила для элемен- О: Это свойство на самом деле задает цвет переднего плана
та <em> и одно из них устанавливает подчеркивание, а другое — элемента, то есть цвет текста и его границы, хотя вы можете опре-
надчеркивание, будут ли они объединены так, что я получу делить для границы отдельный цвет, используя свойство border-color.
оба эффекта?
В: Мне нравится эффект оформления, который называется
О: Нет. Вам нужно объединить два этих значения в одно правило, «перечеркивание». Могу ли я использовать его для редактиру-
чтобы получить оба вида оформления. Для декорирования текста емого текста, чтобы обозначить то, что должно быть удалено?
нужно только одно правило, а эффекты оформления, заданные
в разных правилах, не объединяются. Только то правило, которое О: Да, можете, но существует способ лучше. В HTML есть элемент,
предназначено для декорирования текста, определит используемые который называется <del>. Он помечает то содержимое вашего
виды оформления, поэтому единственный способ получить сразу два HTML-документа, которое должно быть удалено. Есть еще похожий
эффекта оформления — задать их в одном правиле. элемент <ins>, помечающий те части содержимого, которые должны
быть добавлены. Обычно браузеры выделяют эти элементы пере-
В: Я давно хотел спросить: почему свойство color не назы- черкиванием и подчеркиванием соответственно. Используя же CSS,
вается text-color? вы можете оформлять их так, как захотите. Благодаря <del> и <ins>
вместе со стилем элемента вы зададите его смысловое значение.
дальше 371
используем границу вместо подчеркивания
Óäàëåíèå ïîä÷åðêèâàíèÿ
Давайте избавимся от этого сбивающего с толку подчерки- Добавьте нижнюю границу для элемен-
вания, а вместо него добавим изящную нижнюю границу, тов ‹h1› и ‹h2›. Выражение thin dotted
как мы сделали на странице гостевой. Для этого откройте переводится как «тонкий пунктирный».
файл journal.css и внесите нижеприведенные изменения
В данном случае мы добавляем тонкую
в совместное правило h1, h2:
пунктирную линию цветом #8 88888
h1, h2 { по нижней границе элемента.
color: #cc6600;
В следующей главе мы подробно рас-
border-bottom: thin dotted #8 88888;
смотрим границы. Подождите немного,
text-decoration: underline;
} это будет уже совсем скоро!
ани-
имание, что гр
Обратите вн ину
тся во всю шир
цы отображаю мим
только под са
страницы, а не ет е
му? Вы уз на
текстом. Поче
ей главе.
это в следующ
372 глава 8
меняем шрифты и цвета
ÊËÞ×ÅÂÛÅ
ÌÎÌÅÍÒÛ
CSS предоставляет множество способов контроли- Используйте ключевые слова, чтобы задать основной
ровать вид задаваемых шрифтов, используя такие размер шрифта в правиле для body. В таком случае
свойства, как font-family, font-weight, font- все браузеры смогут масштабировать размеры тек-
size и font-style. ста, если пользователи захотят, чтобы шрифт был
больше или меньше.
Семейство шрифтов — это набор шрифтов с общими
характеристиками. Вы можете сделать текст полужирным, используя
CSS-свойство font-weight.
Семейства шрифтов, применяемые в Сети, — это serif,
sans-serif, monospace, cursive и fantasy. Чаще всего Свойство font-style применяется для того, чтобы
используются семейства serif и sans-serif. сделать текст курсивным или наклонным. Курсивные
и наклонные символы наклонены вправо.
Тип шрифтов на экране пользователя вашей веб-стра-
ницы будет зависеть от того, какие шрифты установ- Веб-цвета создаются смешиванием красного, зелено-
лены на его собственном компьютере, если только го и синего цвета в различных количествах.
вы не задействуете веб-шрифты.
Если вы смешаете 100 % красного, 100 % зеленого
В CSS-свойстве font-family полезно указывать не- и 100 % синего, то получите белый цвет.
сколько шрифтов. Это пригодится, если у ваших поль- Смешав 0 % красного, 0 % зеленого и 0 % синего, вы
зователей не установлен шрифт, который вы задали. получите черный цвет.
В качестве последнего шрифта в списке всегда зада- В CSS существует 16 основных цветов, включая чер-
вайте типовой шрифт, например serif или sans-serif.
ный, белый, красный, синий и зеленый, а также
В таком случае браузер сам найдет подходящую за-
150 дополнительных цветов.
мену, если не будет обнаружен ни один из указанных
шрифтов. Вы можете определить цвет, который хотите исполь-
зовать, задав процентное соотношение красной,
Чтобы задействовать шрифт, который, возможно, зеленой и синей составляющих в нем. Вместо про-
не установлен по умолчанию на компьютерах ва- центов можно также задавать численные значения
ших пользователей, примените правило @font-face от 0 до 255 или шестнадцатеричные коды.
в CSS-коде.
Простой способ узнать шестнадцатеричный код
Размеры шрифтов обычно задаются через пикселы,
нужного цвета — использовать цветовую палитру
em, проценты (%) или ключевые слова.
из программы для редактирования изображений
Если для определения размера шрифта вы исполь- или одну из множества таблиц цветов в Интернете.
зуете пикселы, то тем самым вы говорите браузеру,
Шестнадцатеричные коды, представляющие цвета,
сколько пикселов в высоту должно быть у букв этого состоят из шести цифр, и каждая цифра берется из
шрифта. интервала 0–F. Первые две цифры задают количество
Em и % — это относительные способы задания раз- красного, вторые — зеленого, а последние — синего
меров шрифтов, то есть размер букв будет зависеть цвета.
от размера шрифта родительского элемента.
Чтобы подчеркнуть текст, можете использовать
Применение относительных размеров для шрифтов свойство text-decoration. Подчеркнутый текст
делает ваши страницы более удобными в обслужи- пользователи часто путают со ссылками, поэтому
вании. применяйте его осторожно.
дальше 373
решение упражнений
Ñåìåéñòâî monospace
Ñåìåéñòâî fantasy
Messenger
Crush
Bainbridge
Ñåìåéñòâî cursive
Ñåìåéñòâî sans-serif
Iceland Cartoon
Angel
Savanna
h
Quarter
Palomino
374 глава 8
меняем шрифты и цвета
body {
background-color: #b817e0;
}
дальше 375
Возьми в руку карандаш
Решение
Что общего имеют все эти цвета? Попробуйте за-
дать каждый из них на веб-странице, например,
в качестве цвета фона. Можете также использовать
палитру цветов из вашей программы для редакти-
рования изображений, вводя шестнадцатеричный
код непосредственно в окно палитры.
#1 11111
#2 22222
#3 33333 надца-
#4 44444 Все цвета, в шест
торых
#5 55555 теричных кодах ко
ько
#6 66666 используется тол
эт о от-
#7 77777 одна цифра, —
оч ень
#8 88888 тенки серого: от
черного)
#9 99999 темного (почти
(почти
#aaaaaa до очень светлого
#bbbbbb белого).
#cccccc
#dddddd
#eeeeee
9 блочная модель
Познакомимся
с элементами поближе
Я думаю, мы стали
бы с элементами более
близкими друзьями, если
бы не все эти отступы, поля
и таблицы.
Ìîäåðíèçàöèÿ ãîñòåâîé
Вы прошли долгий путь из восьми глав и уже
создали прекрасную гостевую Head First. В двух
следующих главах мы полностью модернизиру- Появилось новое изобра-
ем ее, добавив абсолютно новое содержимое жение для верхнего ко-
на главную страницу, и заново оформим ее. лонтитула страницы.
Чтобы уже сейчас немного вас заинтересовать,
мы вкратце расскажем о том, что получит-
ся в результате. Итак, посмотрите — на этой
странице вы найдете новую неоформленную
гостевую страницу с новым содержимым на
ней, а на следующей странице — ее же оформ-
ленную версию, которую мы создадим к концу
этой главы.
Включена информация
о специальных напитках.
378 глава 9
блочная модель
дальше 379
начнем с простых стилей
3 Затем вам нужно будет создать новый файл lounge.css в папке chapter9/lounge. В нем
будет храниться весь новый CSS-код для гостевой.
h1 {
font-size: 150%; Для заголовков ‹h1› и ‹h2› зададим аквамариновый цвет,
} чтобы они сочетались с бокалом на логотипе.
h2 {
font-size: 130%; Теперь определим подходящие размеры для заголов-
}
ков ‹h1› и ‹h2›. Поскольку мы задаем для них два
разных размера, то нужно разделить правила.
380 глава 9
блочная модель
дальше 381
изменим межстрочный интервал
После
меж-
ьском деле
В издател еще
интервал
строчный ьяжем.
интерлин
называют
Свойство line-height наследуется, поэто-
му, задав его для элемента body, вы «дадите
команду» всем элементам страницы тоже
использовать межстрочный интервал 1.6em.
382 глава 9
блочная модель
Область содержимого,
где находится, например,
текст или изображение.
дальше 383
блочная модель
384 глава 9
блочная модель
дальше 385
как можно конфигурировать блоки
Вы можете задать
лучшие впечатления после каждого
посещения гостевой. Неважно, зашли
вы к нам просто проверить свою элек-
тронную почту за чашечкой чая или
сплошную границу:
заказали грандиозный обед, вы увиди-
те, что наш обслуживающий персонал
обращает внимание на каждую мелочь.
Если вы чем-то недовольны, отведайте
Áëîêè
Вы можете офор-
мить блок так,
Наша гарантия: мы обязуемся остав-
лять у вас, наших гостей, только самые чтобы он имел от- Не задавать Наша гарантия: мы обязуемся остав-
лучшие впечатления после каждого лять у вас, наших гостей, только самые
посещения гостевой. Неважно, зашли
вы к нам просто проверить свою элек-
тронную почту за чашечкой чая или ступ, границу и поля. границу вовсе. лучшие впечатления после каждого
посещения гостевой. Неважно, зашли
вы к нам просто проверить свою элек-
заказали грандиозный обед, вы увиди- тронную почту за чашечкой чая или
заказали грандиозный обед, вы увиди-
те, что наш обслуживающий персонал
те, что наш обслуживающий персонал
обращает внимание на каждую мелочь. обращает внимание на каждую мелочь.
Если вы чем-то недовольны, отведайте Если вы чем-то недовольны, отведайте
наш чудо-напиток из голубики. наш чудо-напиток из голубики.
Или только
тронную почту за чашечкой чая или
заказали грандиозный обед, вы увиди-
те, что наш обслуживающий персонал
пунктирный. обращает внимание на каждую мелочь.
Если вы чем-то недовольны, отведайте
наш чудо-напиток из голубики.
обращает внимание на каждую мелочь.
Если вы чем-то недовольны, отведайте
наш чудо-напиток из голубики. границу
и отступ.
Или только
обращает внимание на каждую мелочь.
те, что наш обслуживающий персонал Если вы чем-то недовольны, отведайте
обращает внимание на каждую мелочь. наш чудо-напиток из голубики.
Если вы чем-то недовольны, отведайте
границу.
наш чудо-напиток из голубики.
ленными углами.
посещения гостевой. Неважно, зашли лучшие
сещениявпечатления
гостевой. Непосле
важно,каждого
зашли
вы к нам просто проверить свою элек- посещения гостевой.
вы к нам просто Неважно,
проверить свою зашли
элек-
тронную почту за чашечкой чая или
заказали грандиозный обед, вы увиди-
Или только вы к нам просто
тронную
тронную
заказали
те, что наш
проверить
почту за чашечкой
почту за чашечкой
заказали грандиозный
грандиозный
свою
обед, вы
обед, вы
обслуживающий
чаяэлек-
или
чаяувиди-
или
увиди-
персонал
те, что наш обслуживающий персонал те, что нашвнимание
обслуживающий персонал
обращает на каждую мелочь.
обращает внимание на каждую мелочь.
Если вы чем-то недовольны, отведайте
наш чудо-напиток из голубики.
поля без грани- обращает
Если
внимание
Если вы чем-то на каждую
недовольны,
вы чем-то недовольны,
наш чудо-напиток
мелочь.
отведайте
отведайте
из голубики.
наш чудо-напиток из голубики.
цы и отступа.
386 глава 9
блочная модель
области содержимого.
лять у вас, наших гостей, только са-
мые лучшие впечатления после каж-
дого посещения гостевой. Неважно,
зашли вы к нам просто проверить
свою электронную почту за чашеч-
кой чая или заказали грандиозный Здесь мы задали боль- жете кон-
обед, вы увидите, что наш обслужива- Наша гарантия: мы обязуемся остав-
ющий персонал обращает внимание
на каждую мелочь. Если вы чем-то
недовольны, отведайте наш чудо-на- шие левый и правый тролировать лять у вас, наших гостей, только самые
лучшие впечатления после каждого
посещения гостевой. Неважно, зашли
питок из голубики. вы к нам просто проверить свою элек-
А здесь — верхний
Наша гарантия: мы обязуемся остав-
и нижний отступы.
лять у вас, наших гостей, только са-
мые лучшие впечатления после каж-
дого посещения гостевой. Неважно,
зашли вы к нам просто проверить
свою электронную почту за чашеч-
Здесь большие
кой чая или заказали грандиозный
обед, вы увидите, что наш обслужива-
ющий персонал обращает внимание Наша гарантия: мы обязуемся остав-
на каждую мелочь. Если вы чем-то лять у вас, наших гостей, только самые
недовольны, отведайте наш чудо-на-
питок из голубики. левое и правое лучшие впечатления после каждого
посещения гостевой. Неважно, зашли
вы к нам просто проверить свою элек-
тронную почту за чашечкой чая или
но к нижнему
лять у вас, наших гостей, только самые
лучшие впечатления после каждого
вать параметры
посещения гостевой. Неважно, зашли
вы к нам просто проверить свою элек-
правому углу ы
тронную почту за чашечкой чая или
отдельно, чтоб
лять у вас, наших гостей, только са- наш чудо-напиток из голубики.
мые лучшие впечатления после каж-
дого посещения гостевой. Неважно,
зашли вы к нам просто проверить
верхнего и ля,
здавать такие по
свою электронную почту за чашеч-
кой чая или заказали грандиозный
левого от-
обед, вы увидите, что наш обслужива-
ющий персонал обращает внимание
и.
как, например, эт
на каждую мелочь. Если вы чем-то
недовольны, отведайте наш чудо-на-
питок из голубики.
ступов.
Îáëàñòü ñîäåðæèìîãî
Наша гарантия: мы
обязуемся оставлятьь
Вы даже можете
у вас, наших гостей,,
только самые лучшие
Здесь область
впечатления после
а-
каждого посещения
различными способ
гостевой. Не важно,,
Наша гарантия: мы обязуемся оставлять у вас, наших го- зашли вы к нам про--
рину
стей, только самые лучшие впечатления после каждого
посещения гостевой. Не важно, зашли вы к нам просто
сто проверить свою
электронную
электро
лектр нную почту
по
п чту
ту за содержимого
ми задавать ши
проверить свою электронную почту за чашечкой чая или чашечкой чая или за--
заказали грандиозный обед, вы увидите, что наш обслужи- казали грандиозный
вающий персонал обращает внимание на каждую мелочь. обед, вы увидите, что
растянута вверх,
и высоту. Здесь мы
Если вы чем-то недовольны, отведайте наш чудо-напиток наш обслуживающий
из голубики. персонал обращает
внимание на каждую
ь
мелочь. Если вы чем--
но сужена.
расширили област
то недовольны, отве--
дайте наш чудо-напи--
ток из голубики.
содержимого .
дальше 387
некоторые подробности о блоках
часто
Задаваемые
вопросы
В: Мне кажется, что все эти знания о блоч- В: Я не совсем понял, как элементы рас-
ной модели пригодились бы мне, если бы полагаются на странице и как на это влияют
я создавал программное обеспечение для поля.
браузеров, но как они могут помочь мне
улучшить мои веб-страницы? О: Пока подождите с этим. В этой главе вы
еще узнаете кое-что о взаимодействии полей
О: Чтобы создавать не просто веб-страницы, с другими элементами на странице, но подробно
использующие стандартную разметку, предла- эту тему мы будем разбирать в главе 11, когда
гаемую браузерами, а пойти намного дальше, начнем говорить о позиционировании.
вам необходимо уметь контролировать то, как
элементы располагаются на самой страни- В: Все оформление полей и отступов за-
це и относительно других элементов на ней. ключается в том, что для них можно задать
Для этого придется менять размеры отступов размер?
и полей для каждого элемента. То есть, для
создания интересных дизайнов веб-страниц О: Так и есть. И поля и отступы предназна-
вам определенно нужно кое-что знать о блоч- чены лишь для того, чтобы определять пустое Эй, ребята, я смотрю, вам
ных моделях. пространство на странице, и нельзя напрямую очень нравится говорить на
задать цвет или другой эффект оформления профессиональные темы.
В: В чем разница между полями и от- этим свойствам. Однако поскольку они про- Но не забыли ли вы, что мы
ступами? Мне показалось, что это одно зрачные, они будут принимать цвет фона или на полпути к реконструкции
и то же... фоновых рисунков. Различие между отступами гостевой?
и полями состоит в том, что цвет фона элемента
О: Поля отвечают за промежутки между ва- (или фоновый рисунок) будет растягиваться
шим и другими элементами, а не за промежутки под первым и не будет — под вторым. Как это
между содержимым и границей в вашем эле- работает, вы увидите очень скоро.
менте. Если у вас есть видимая граница, то
отступы, естественно, находятся внутри этой В: Размер области содержимого опреде-
границы, а поля — снаружи. Считайте отступы ляется автоматически исходя из размера
частью элемента, а поля — тем, что окружает самого содержимого?
ваш элемент и отделяет от всего, что находится
снаружи. О: Браузеры используют ряд различных пра-
вил для определения высоты и ширины области
В: Я знаю, что все эти свойства необяза- содержимого, и мы более подробно рассмотрим
тельны, но нужно ли задавать отступы, если их чуть позже. Если отвечать на ваш вопрос
я хочу задать границу или поля? кратко, то можно сказать, что, несмотря на то
что содержимое является основным фактором
О: Нет, все эти свойства не зависят друг от в определении размера элемента, вы сами
друга, так что вы можете задать границу, не можете установить высоту и ширину этой об-
устанавливая отступы, или определить поля, ласти, если вам необходим полный контроль
не задавая границу, и т. д. над размером элемента.
388 глава 9
блочная модель
Âåðíåìñÿ ê ãîñòåâîé
Нам нужно продолжать работу над гостевой страницей, поэтому вернемся к ней. Вы обратили
внимание на абзац голубого цвета с различными стилями, когда смотрели на финальную версию
страницы в начале этой главы? В этом абзаце был текст с гарантией, которая дается руковод-
ством гостевой своим клиентам. Совершенно очевидно, что они хотели выделить свое обещание.
Рассмотрим этот абзац более подробно, а затем создадим его.
Для текста использо-
У абзаца аквама- ван курсивный шрифт
риновый фон. serif, а не sans-serif.
В этом
абзаце даже
есть рисунок.
Между текстом
и границей есть
Обратите вним
а- расстояние.
ние: абзац немног
о
смещен вправо.
Вокруг него нарисована
стильная граница с эф-
фектом «рваного края».
дальше 389
поработаем с отступами, границами и полями
Мозговой
штурм
390 глава 9
блочная модель
".
Добавьте атрибут class со значением "guarantee
елить стиль
Помните, что благодаря классу можно опред
абзацев.
для этого абзаца, не влияя на стили остальных
<p class="guarantee">
Наша гарантия: мы обязуемся оставлять у вас, наших гостей, только
самые лучшие впечатления после каждого посещения гостевой. Не-
важно, зашли вы к нам просто проверить свою электронную почту
за чашечкой чая или заказали грандиозный обед, вы увидите, что наш
обслуживающий персонал обращает внимание на каждую мелочь. Если вы
чем-то недовольны, отведайте наш чудо-напиток из голубики.
</p>
дальше 391
первая попытка оформления абзаца
392 глава 9
блочная модель
Äîáàâëåíèå îòñòóïîâ
Начнем с добавления промежутков между содержимым и границей. В CSS есть свойство
padding, которое вы можете использовать, чтобы задать отступы со всех четырех сторон
содержимого. Его можно задавать либо в пикселах, либо в процентах. Мы будем исполь-
зовать пикселы и установим отступы шириной по 25 пикселов с каждой стороны.
.guarantee {
border-color: black;
border-width: 1px;
border-style: solid;
background-color: #a7cece;
Мы добавляем отступы шириной
padding: 25px;
} 25 пикселов с каждой стороны
содержимого (сверху, справа,
снизу и слева).
дальше 393
тестирование отступов
.guarantee {
border-color: black;
border-width: 1px;
border-style: solid;
background-color: #a7cece;
padding: 25px;
margin: 30px; Мы добавляем поля шириной 30 пикселов
со всех сторон содержимого (сверху, спра-
}
ва, снизу и слева).
394 глава 9
блочная модель
дальше 395
фоновые изображения
Теперь вам просто нужно поместить это изображение в элемент <p>. Для
этого вы будете использовать элемент <img>, верно? Не спешите. Если хо- Это свойства, кото-
тите использовать изображение в качестве фона какого-нибудь элемента, рые вы добавили, вы-
то для этого есть другой способ. В CSS можно использовать фоновый рису- полняя упражнение из
нок для какого-нибудь элемента, определяя свойство background-image. предыдущего раздела.
Попробуем это сделать и посмотрим, как оно работает:
.guarantee {
line-height: 1.9em;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
color: #4 44444;
border-color: black;
border-width: 1px;
border-style: solid;
background-color: #a7cece;
padding: 25px;
margin: 30px;
background-image: url(images/background.gif);
}
396 глава 9
блочная модель
дальше 397
поговорим о свойстве background-image
background-image: url(images/background.gif);
398 глава 9
блочная модель
дальше 399
придадим больше утонченности отступам
Но мы еще хотим,
чтобы текст не на-
кладывался на рисунок.
400 глава 9
блочная модель
дальше 401
обзор границ
Стиль границы
Свойство border-style определяет вид границы. Существует восемь доступных
типов границ.
Стиль dotted
Выбирайте solid, представляет
Попробовав
Стиль solid за- я появился рань- собой последо- задать точеч-
ше всех. ную границу,
дает сплошную вательность
вы будете
границу. точек. использовать
ее всегда.
Стиль dashed исполь-
Стиль double
зует последователь- Игнорируйте
использует две точечные ли-
Выбирайте ность штрихов. нии, используй-
линии. double, я в два те пунктирные.
раза лучше
остальных. Стиль inset
Стиль groove вы- выглядит
Я единственный
глядит как углу- Я граница, как вклад- «внутренний»
которая создает стиль: inset.
бление на странице ка, вдавленная
эффект углубле-
(в книге это слож- ния. в страницу.
но заметить).
Стиль ridge
смотрится на
Стиль outset выгля- Выбирайте меня, Я самая краси-
я лучше всего под- странице как
дит как вкладка, вы- вая; у меня есть
хожу для вкладок. выступающая кромки.
ходящая из страницы.
кромка.
402 глава 9
блочная модель
border-top-color: black;
border-top-style: dashed;
border-top-width: thick;
border-bottom-color border-left-color
border-bottom-style border-left-style
Эти свойства заданы толь-
border-bottom-width border-left-width ко для верхней части границы.
Вы можете описывать каждую
часть отдельно.
дальше 403
наведем красоту с помощью границ
border-top-left-radius: 15px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 15px;
Используя border-radius, вы
сможете создавать всевоз-
можные интересные фигуры.
404 глава 9
блочная модель
Здесь мы поменя-
border-style: dashed; ли стиль границы
с solid на dashed.
дальше 405
тестирование границ
Здорово! Не могу
дождаться, когда увижу
всю измененную страницу
целиком. Немного отдохните
и выпейте чашечку
охлажденного чая!
Ïîçäðàâëÿåì!
Браво! Вы взяли обычный HTML-абзац и пре-
образовали его во что-то намного более при-
влекательное и стильное, использовав лишь
15 строк CSS-кода.
Вы неплохо потрудились, поэтому теперь мы
предлагаем вам немного отдохнуть. Возьмите
себе чашечку охлажденного чая и расслабь-
тесь. Вам понадобится некоторое время, чтобы
переварить всю информацию. Когда вы вер-
нетесь, мы расскажем вам еще о нескольких
нюансах работы с CSS.
406 глава 9
блочная модель
Пока вы пьете охлажденный чай, попробуйте свои силы в скруглении разных углов границы
вокруг «абзаца с гарантией». Внизу приведен ряд примеров рамки данного абзаца с набором
разных значений радиуса скругления ее углов. Напишите CSS для задания каждой из границ,
приведенных в примерах. В каждом примере мы пометили значение радиуса скругления,
используемое в нем для скругления углов.
30px
е здесь.
Свой CSS-код напишит
40px
40px
2em
дальше 407
когда не нужно создавать класс
Уязвимость класса
Интервью, взятое на этой неделе.
Всегда ли классы правы?
Head First: Класс, ты знаешь, что мы часто поль- Класс: Пока все понятно, но разрешите мне уточ-
зуемся твоими услугами, но мы до сих пор очень нить следующий момент: речь идет о нескольких
мало знаем о тебе. абзацах или об одном?
Класс: А мне особенно и нечего о себе рассказы- Head First: Я не думаю, что есть какие-то причины
вать. Если вы хотите создать группу, которой нужно добавлять несколько «абзацев с гарантией», и не
придать особый стиль, используйте класс, поме- вижу, чтобы этот же стиль применялся еще где-ни-
стите в него свои элементы, и тогда вы сможете будь на странице. Такой абзац был только один.
оформить все элементы класса вместе.
Класс: Хмммм, мне это не нравится. Понимаете,
Head First: Класс позволяет выбрать несколько эле- подразумевается, что классы определяются для
ментов и применить к ним одно или более свойств таких стилей, которые нужно использовать не для
стиля? одного, а для нескольких элементов. Если же вы
Класс: Именно. Допустим, на вашей странице есть хотите оформить только один элемент, то совер-
несколько разделов, посвященных праздникам: шенно нет смысла создавать класс.
один для Хэллоуина, другой для Рождества. Вы мо- Head First: Минуточку, мне кажется, что наш класс
жете добавить все элементы из раздела о Хэллоуи- отлично работает. Что же тогда не так?
не в класс halloween, а из раздела о Рождестве —
Класс: Тише-тише, не надо нервничать. Все, что
в класс christmas. Тогда вы сможете оформлять
вам нужно сделать, — использовать вместо атрибу-
наборы элементов из различных классов независи-
та class атрибут id. Это займет не больше минуты.
мо друг от друга, например использовать оранже-
вый цвет для элементов, относящихся к Хэллоуину, Head First: Атрибут id? Я думал, он используется
и красный — для элементов, относящихся к Рожде- для якорей, как сказано в главе 4.
ству. Для этого вам нужно будет написать правила Класс: Атрибут id используется в разных случаях.
стиля для каждого класса. На самом деле он представляет собой уникальный
Head First: Использовать классы достаточно удоб- идентификатор для элемента.
но. Мы совсем недавно видели отличный пример Head First: Можешь ли ты рассказать нам про атри-
этому, не так ли? бут id более подробно? Я ничего не знал об этом
Класс: Не могу сказать наверняка, я не работал раньше. Оказывается, на протяжении всей этой
в это время. Вам придется описать мне, что это главы я неправильно использовал класс!
был за пример. Класс: Без паники; это достаточно распростра-
Head First: Хорошо, мы работали над гостевой ненная ошибка. По сути, вам нужно знать, что
страницей Head First, где есть «абзац с гарантией» класс используется тогда, когда одинаковый стиль
от ее владельцев. Они хотели, чтобы этот абзац оформления планируется применять к нескольким
выделялся на фоне остального текста. элементам. Но если элемент, который вам нужно
408 глава 9
блочная модель
оформить, встречается на странице лишь один гационная панель. Они никогда не используются на
раз, следует использовать id. Он применяется странице дважды. Конечно же, вы можете использо-
исключительно для того, чтобы присвоить имя вать класс и для одного элемента, но кто-то другой
одному элементу. возьмет и добавит в этот класс еще один элемент,
Head First: Кажется, я все понял. Но почему вооб- и тогда ваш элемент потеряет свою уникальность. Все
ще имеет значение, что я использую при наличии это также может иметь значение, когда вы начнете
одного элемента: класс или атрибут? Ведь когда мы позиционировать HTML-элементы.
использовали класс, у нас все отлично работало. Head First: Хорошо, Класс. Эта беседа, конечно
Класс: Потому что на странице иногда действи- же, была познавательной. Я думаю, мы действи-
тельно встречаются элементы, единственные в своем тельно должны использовать для нашего абзаца
роде. «Абзац с гарантией», о котором вы упомянули, атрибут id, а не class. Еще раз благодарю тебя,
один из них; но есть примеры и получше, например что встретился с нами.
верхний или нижний колонтитул на странице, нави- Класс: Всегда к вашим услугам, Head First!
Мозговой
штурм Выберите, какой атрибут лучше использовать для следующих
элементов (class или id).
id class id class
Абзац, используемый в качестве ниж- Набор элементов <p>, в которых со-
него колонтитула страницы. держатся рецензии на фильмы.
Совокупность заголовков и абзацев, где Элемент <ol> со списком заданий, ко-
приводятся биографии компаний. торые вам нужно выполнить.
Элемент <img> с «картинкой дня». Элементы <q>, содержащие цитаты
Баккару Банзая.
дальше 409
идентификация элементов
Àòðèáóò id
Поскольку вы уже использовали атрибут id для элементов <a> и знаете, как применяется атрибут class,
вам не придется тратить много времени, чтобы узнать, как еще можно работать с атрибутом id. Допу-
стим, на вашей странице есть нижний колонтитул. Поскольку на странице обычно только один нижний
колонтитул, в данном случае явно лучше использовать атрибут id. Присвойте идентификатор footer
абзацу с текстом колонтитула таким образом:
часто
Задаваемые
вопросы
В: Какой же в этом смысл? Зачем мне применять id только узнаете их через несколько глав. Например, при позиционировании
для того, чтобы указать, что такой элемент на странице един- элементов на странице вам понадобится, чтобы каждый элемент
ственный? Я ведь могу с тем же успехом использовать и class. имел собственный идентификатор.
О: Вы всегда можете использовать класс вместо уникального В: Может ли один элемент одновременно иметь идентифи-
идентификатора, но есть множество причин, по которым этого катор и принадлежать какому-либо классу?
лучше не делать. Допустим, вы работаете над веб-проектом
в команде людей. Один из членов вашей команды, увидев класс, О: Да, может. Запомните это так: id — всего лишь уникальный
может подумать, что его можно применять для других элементов. идентификатор элемента, но он не запрещает элементу принадле-
Однако если он увидит уникальный идентификатор, то поймет, жать одному или нескольким классам (точно так же, как уникальное
что тот предназначен для одного-единственного элемента. Есть имя не запрещает вам стать членом одного или нескольких клубов).
еще несколько причин того, почему важно использовать id, и вы
410 глава 9
блочная модель
p.specials {
color: red; Так выбираются только абзацы, принадле-
} жащие классу specials.
.specials {
color: red; Так выбираются все элементы класса
} specials.
#footer {
color: red;
Так выбирается любой элемент с иденти-
}
фикатором footer.
p#footer {
color: red; Так выбирается элемент ‹p›, имеющий
}
идентификационное имя footer.
дальше 411
выбор по идентификатору
<p id="guarantee">
Наша гарантия: мы обязуемся оставлять у вас, наших гостей, только
самые лучшие впечатления после каждого посещения гостевой. Не-
важно, зашли вы к нам просто проверить свою электронную почту
за чашечкой чая или заказали грандиозный обед, вы увидите, что наш
обслуживающий персонал обращает внимание на каждую мелочь. Если вы
чем-то недовольны, отведайте наш чудо-напиток из голубики.
</p>
#guarantee {
line-height: 1.9em;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
color: #4 44444;
border-color: white;
border-width: 1px;
border-style: dashed;
background-color: #a7cece;
padding: 25px;
padding-left: 80px;
margin: 30px;
margin-right: 250px;
background-image: url(images/background.gif);
background-repeat: no-repeat;
background-position: top left;
}
412 глава 9
блочная модель
часто
Задаваемые
вопросы
В: Почему вы использовали селектор #guarantee, а не встречаться на странице только один раз, заменять его
p#guarantee? атрибутом id?
О: Можно применять любой из этих селекторов, и они сделают О: Нет. В большинстве случаев при разработке веб-страниц
одно и то же. Мы знаем, что на нашей странице идентификатор вы заранее знаете, будет элемент уникальным или нет. А в этой
всегда ссылается на абзац, так что нет разницы, какой селектор главе мы сделали все именно в такой последовательности только
использовать (к тому же #guarantee проще). Однако при работе потому, что в начале работы вы ничего не знали про селектор
идентификатора.
с более сложным набором страниц у вас может возникнуть ситу-
ация, когда на различных страницах уникальный идентификатор
ссылается на разные элементы: например, на одной — на абзац, на
В: Каковы правила для имен классов и идентификаторов?
другой — на список или блочную цитату. Вам может понадобиться О: Имена классов должны начинаться с буквы, а имена иден-
несколько правил для одного идентификатора, например p#someid тификаторов могут начинаться с цифры или с буквы. Имена
и blockquote#someid, что зависит от того, какой элемент применяется идентификаторов и классов могут содержать буквы и цифры,
на странице. а также символы подчеркивания, но не пробелы. Например,
правильными будут имена «number1» и «main_content»,
В: Нужно начинать с использования атрибута class, а «header content» — нет. Помните, что имена идентифи-
а затем, если становится известно, что элемент будет каторов должны быть уникальными!
дальше 413
используем больше одной таблицы стилей
Мы установили
Среди наших клиентов
все основные свойства,
много молодежи. Мы немного
которые будут использоваться
подкорректировали цвета
на сайте компании: шрифты,
и добавили свой стиль, но в целом
цвета и т. д.
не отступили от основного
стиля нашей компании.
Отдел
напитков
414 глава 9
блочная модель
часто
Задаваемые
вопросы
В: Итак, порядок следования таблиц В: Понадобится ли мне все это когда-ни- В: Вы можете подробнее рассказать
стилей имеет значение? будь для простого сайта? о том, как выбирается стиль для опре-
деленного элемента?
О: Да, каждая последующая таблица имеет О: Вы удивитесь, но иногда таблицы стилей
преимущество над предыдущей. Например, применяются в качестве основы и вместо О: Мы уже кое-что рассказывали об этом
если у вас свойство font-family для элемента того, чтобы менять такую таблицу, можно в главе 7. Сейчас к тем знаниям просто до-
<body> определено как в таблице стилей для просто сослаться на нее, а затем добавить бавьте еще немного — порядок следования
всей корпорации, так и в таблице стилей собственную таблицу стилей, в которой ука- ссылок на таблицы стилей имеет значение.
для отдела, то преимущество будет иметь зать, что необходимо поменять. В следующей главе, когда вы узнаете еще
заданное для отдела, так как ссылка на него несколько подробностей о CSS, мы детально
из HTML-кода расположена ниже. разберем то, как браузер узнает, какой стиль
и для какого элемента использовать.
дальше 415
назначаем типы устройств
416 глава 9
блочная модель
Итак, все это работает следующим образом: в правило @media включаются только те CSS-правила, ко-
торые специфичны для требуемого типа устройств. Все правила, являющиеся общими для всех типов
устройств, располагаются в CSS-файле под правилами, включенными в @media, благодаря чему у нас
нет каких-либо повторяющихся без необходимости правил. И когда браузер будет загружать страницу,
он посредством медиазапросов определит соответствующие этой странице правила и будет игнориро-
вать все правила, которые к ним не относятся.
Смартфон:
480 х 640 Планшетный
пикселов компьютер:
портретная
Настольный компьютер: Телевизор с поддержкой выхода
или альбомная
1280 х 960 пикселов. в Интернет: 2560 х 1600 пикселов,
ориентация,
альбомная ориентация.
1024 х 768
пикселов.
418 глава 9
блочная модель
часто
Задаваемые
вопросы
В: Все это здорово. Получается, что я могу задавать различные сов CSS3 (http://www.w3.org/TR/css3-mediaqueries/), а примеры —
таблицы стилей для разных устройств? в книге «Head First Mobile Web» («Разработка веб-приложений
для мобильных устройств»).
О: Да, вы можете создать несколько таблиц стилей и затем ссылаться
на них из HTML-кода. Работа браузера — выбрать нужную таблицу В: Что лучше использовать для указания разных CSS-правил
стилей, основываясь на типе устройства и характеристиках, которые для разных типов устройств – <link> или @media?
вы указали в своем медиазапросе.
О: Подойдет любой из этих вариантов. Однако следует отметить,
В: Есть ли другие медиасвойства помимо max-device-width что если вы поместите все свои правила в один файл, разделив их
и mindevice-width? посредством правил @media, то объем вашего CSS может стать
большим. Используя разные элементы <link> для разных типов
О: Да, их много, включая max-width и min-width (отличные устройств, вы сможете упорядочить свой CSS по разным файлам в
от device-width, в чем вы скоро убедитесь), max-height и зависимости от типа устройств. Если ваши CSS-файлы являются
min-height, orientation, color, aspect-ratio и др. большими по размеру, рекомендуем вам использовать элементы
Все подробности вы сможете найти в спецификации медиазапро- <link> для задания разных таблиц стилей.
КЛЮЧЕН.
ДОПОЛНИТЕЛЬНО НЕОБХОДИМ ПРИНТЕР, ОН В КНИГУ НЕ ВКЛЮЧЕН.
дальше 419
тестирование файлов CSS для различной ширины
Теперь перезагрузите страницу lounge.html в браузере. Убедитесь, что окно браузера выглядит
бˆольшим по размеру. Гостевая страница должна отображаться нормально.
Затем сделайте окно браузера узким (менее 480 пикселов в ширину). Что произошло с гостевой страни-
цей? Вы заметили разницу? Опишите чуть ниже, что произойдет, когда вы сделаете свою веб-страницу
узкой и загрузите ее. Почему эта версия страницы больше подходит для мобильных браузеров?
420 глава 9
блочная модель
ÊËÞ×ÅÂÛÅ
ÌÎÌÅÍÒÛ
Ширина границы может задаваться в пик- У элемента не может быть несколько иден-
селах или с помощью ключевых слов thin, тификационных имен, но он может принад-
medium и thick. лежать нескольким классам.
В своем HTML-коде вы можете использовать
Существует восемь различных стилей гра-
несколько таблиц стилей.
ниц, среди которых: solid, dashed, dotted
и ridge. Если одно и то же свойство по-разному опре-
делено в двух таблицах стилей, то преиму-
В CSS имеются свойства для определения по- щество будет иметь та таблица, ссылка на
лей, отступов и границ со всех сторон сразу которую в HTML-файле расположена позже.
(сверху, справа, снизу, слева) или с каждой
Используя медиазапросы в элементе <link>
стороны отдельно.
или правиле @media в своем CSS, вы можете
Используйте свойство border-radius для скру- указывать тип устройств, на которых будет
гления углов границы элементов. отображена страница.
дальше 421
решение упражнений
Верхнее поле
Верхний отступ
Правый
отступ
Левое
поле
Левый Правое
отступ поле
Нижний отступ
Нижнее поле
422 глава 9
блочная модель
ервал.
Увеличен межстрочный инт Использован курсивный шрифт serif.
дальше 423
решение упражнений
Смартфон:
480 х 640 Планшетный
пикселов компьютер:
портретная
Настольный компьютер: Телевизор с поддержкой выхода
или альбомная
1280 х 960 пикселов. в Интернет: 2560 х 1600 пикселов,
ориентация,
альбомная ориентация.
1024 х 768
пикселов.
424 глава 9
блочная модель
Пока вы пьете охлажденный чай, попробуйте свои силы в скруглении разных углов границы
вокруг «абзаца с гарантией». Внизу приведен ряд примеров рамки данного абзаца с набором
разных значений радиуса скругления ее углов. Напишите CSS для задания каждой из границ,
приведенных в примерах. В каждом примере мы пометили значение радиуса скругления,
используемое в нем для скругления углов.
е здесь.
Свой CSS-код напишит
30px
border-top-left-radius: 30px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 30px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
border-top-right-radius: 2em;
border-bottom-right-radius: 0em;
border-bottom-left-radius: 2em;
дальше 425
решение упражнений
Современная веб-конструкция
Какой-то строитель сказал:
«Семь раз отмерь, один раз
отрежь». Я говорю: «Спланируй,
раздели на части и задай
отступы между ними».
Бармен
Алиса
Специаль
предлож ные
ения напи
тков
«Лимонны
й бриз»
Максималь
но
ток. Содерж полезный напи-
ит экс трак
минералы ты трав,
и вит
лимона в ф амины, а кусочек
орме завит
дает напи ка при-
тку чудесн
цитрусовы ый мягкий
й ар
бриз» заряд омат. «Лимонный
ит вас энер
гией на
весь день.
Чай «Льд
Это меню со специальными предложениями Это не трад
инка »
иционный
напитков, которое мы подаем нашим клиен- В нем смеш
аны
чай.
специи, а т матэ и чайные
ак же доба
шоколадн влен
там. Ого, его дизайн очень сильно отличается качества,
ый сироп
вы
что придае сшего
т напитку
удивительн
от дизайна другой части страницы: ширина
ый вкус ле
дяного
кофе.
Заходите к н
ам кажд
и другие зам ый вечер и пробуйте
ечательны эти
е напитки
.
428 глава 10
элементы div и span
<p>
<img src="images/chai.gif" alt="Напиток Чай «Льдинка»"/>
</p>
<h3>Чай «Льдинка»</h3> Эта структу-
<p>
ра повторяет-
Это не традиционный чай. В нем смешаны матэ и чайные
специи, а также добавлен шоколадный сироп высшего качества, ся для каждого
что придает напитку удивительный вкус ледяного кофе. напитка.
</p>
<p>
<img src="images/black.gif" alt="Напиток «Подзарядка для мозга»"/>
</p>
<h3>>«Подзарядка для мозга»</h3>
<p>
Проблемы с памятью? Отведайте наш напиток «Подзарядка для
мозга», сделанный из черного чая и небольшого количества
эспрессо. Ваш мозг будет вам благодарен за подзарядку.
</p>
дальше 429
новый элемент под названием div
Ребята, кажется,
задача достаточно сложная. Нам
придется внести много изменений
в оформление страницы, а стиль
меню совсем не соответствует
стилю остальной страницы.
Джим: Да брось ты, Фрэнк, мы можем просто создать один или два
класса и оформить все элементы меню отдельно от остальной страницы.
Фрэнк: Да, возможно, все не так уж страшно. Я уверен, что существует
простое свойство, с помощью которого можно выровнять текст по
центру. И мы также знаем, как задавать цвет для текста.
Джим: Минуточку, а как насчет границы, которая нарисована вокруг
всего меню?
Фрэнк: Очень просто. Мы только что узнали, как создаются границы.
Вспомни: граница может быть нарисована вокруг любого элемента.
Джо: Хмм, я так не думаю. Если ты посмотришь на HTML-код, то
увидишь, что он представляет собой набор элементов <h2>, <h3>
и <p>. Если мы зададим границы для каждого отдельного элемента,
то они и будут выглядеть как отдельные блоки.
Фрэнк: Ты прав, Джо. Нам нужен элемент, в который мы вложим все
наши элементы, а потом задим границу только для него одного. Тогда
у нас будет одна граница вокруг всего раздела со специальными пред-
Джим Джо
ложениями напитков.
Фрэнк
Джим: Теперь я понимаю, почему тебе платят большие деньги, Фрэнк.
Можем ли мы вложить все наши элементы в элемент <p> или <block-
quote>?
Фрэнк: Это пагубно скажется на структуре и значении страницы, ведь
меню напитков не является параграфом или блочной цитатой. Похо-
же, такой вариант не подойдет… И все-таки мне кажется, что решение
где-то близко. Я читаю одну книгу по HTML и CSS и как раз дошел до
раздела, в котором описывается новый элемент <div>. Думаю, это
именно то, что нам нужно.
Джо: <div> — что это? Звучит так, будто это какой-то математический
термин.
Фрэнк: Надо сказать, что ты не так уж и далек от истины, потому что
с помощью <div> страницу можно разбить на логические разделы.
Джим: Кажется, это как раз то, что нужно!
Фрэнк: Точно. Ребята, давайте я сначала покажу вам, как можно раз-
бить страницу на логические разделы, а потом расскажу, что я знаю
про <div>...
430 глава 10
элементы div и span
му
Мы нарисовали схе
Âûÿñíèì, êàê ìîæíî ðàçáèòü ñòðàíèöó страницы Pe tS tor z.
íà ëîãè÷åñêèå ðàçäåëû
Посмотрите на веб-страницу, расположенную справа: это
страница для PetStorz.com. Сейчас мы рассмотрим, как h1
можно добавить ей дополнительную структуру, опреде-
h2
лив несколько логических разделов и затем заключив
каждый в элемент <div>. p
Эта страница выгля-
дит привлекательно: h2
множество заголовков,
абзацев и рисунок. p
асти содер-
еет две основные обл
Страница PetStorz им В ней
h2
ов, другая — для собак.
жимого: одна — для кот мы вер немся Собаки
других областей, но
есть также несколько p
к этому позже.
дальше 431
как обозначить логические разделы с помощью div
p
img
p
img
432 глава 10
элементы div и span
Мозговой
штурм Страница № 1 Страница № 2
Теперь элементы
Íåìíîãî ïîðàáîòàåì íàä ñòèëåì ‹div› имеют свой h1
стиль оформления.
Итак, вы задали кое-какую логическую струк- div id=“cats”
туру страницы PetStorz и разметили ее, при- Фон, заданный
своив уникальный идентификатор каждому h2
для ‹div›, также
элементу <div>. Этого достаточно, чтобы используется для
начать работать над стилем группы элемен- p
всех его элементов.
тов, вложенных в <div>.
Здесь у нас есть два Элементы, вложенные в ‹div›, div id=“dogs”
правила: по одному для
v›. как и любые дочерние элементы, уна-
каждого элемента ‹di h2
ает ся следуют и другие свойства от ‹div› (на-
Каждый ‹div› выбир
пример, размер шрифта, цвет и т. д.).
через селектор id. p
В каждом прави-
#cats { ле задается свойство p
background-image: url(leopard.jpg); background-image. Для
} группы «Коты» ис- p
пользуется рисунок img
с изображением лео-
#dogs {
background-image: url(mutt.jpg);
} парда, а для группы
же-
«Собаки» — с изобра
й собачки.
нием маленько
дальше 433
вложенные элементы div
p
img
Структуризация страницы с помощью элементов ‹div›
может даже помочь продумать ее дизайн. Например,
действительно ли этот одинокий элемент ‹p› должен
быть здесь?
div id=“header”
Äîáàâëåíèå âëîæåííîé ñòðóêòóðû h1
434 глава 10
элементы div и span
часто
Задаваемые
вопросы
В: Итак, элемент <div> выступает в роли пользу, то, бесспорно, его нужно создавать. В: Мне было не все понятно об эле-
контейнера, в который вы можете сло- Однако если никакой пользы вы от этого не менте <div>, когда о нем рассказывалось
жить элементы, чтобы хранить их в од- получаете, вы просто усложняете страницу. на примере разделов «Домашние живот-
ном месте? Немного поработав с элементами <div>, вы ные», «Коты» и «Собаки». Можете объяс-
сами начнете чувствовать, когда и в каком нить это немного подробнее?
О: Да, конечно. Мы часто описываем эле- количестве их нужно использовать.
менты <div> как контейнеры. Хотя нельзя О: Конечно. Вы уже привыкли к тому, что
сказать, что они выступают в роли только В: Бывает ли такое, что элементы <div> элементы могут быть вложенными, верно?
логических контейнеров, которые можно ис- помещают в класс, вместо того чтобы Например, <p> вложен в <body>, который
пользовать для хранения набора взаимосвя- давать им идентификационные имена? в свою очередь вложен в <html>. Вы даже
занных элементов (как, например, элементы видели списки, вложенные друг в друга.
логического раздела cat). Когда в следующей О: Вспомните, что элемент может одновре- Элемент <div> на самом деле ничем не отли-
главе мы начнем задавать элементам <div> менно иметь идентификационное имя и быть чается от остальных: вы просто вкладываете
стиль и использовать их для позициониро- членом одного или нескольких классов. одни элементы внутрь других. В примере
вания, вы увидите, что они могут выступать Таким образом, речи о взаимном исклю- с PetStorz мы использовали элементы <div>,
и в роли графических контейнеров. чении в данном случае не идет. Конечно, чтобы разбить страницу на большие части
бывают ситуации, когда вы создаете элемен- (подразделы «Коты» и «Собаки» вложены
В: Если я уже разметил страницу на абза- ты <div> и помещаете их в классы. Допустим, в раздел «Домашние животные»). Вы так-
цы, заголовки и т. п., нужно ли после этого у вас на странице есть несколько разде- же можете использовать элементы <div>,
добавлять верхний уровень структуры лов с музыкальными альбомами. Можете чтобы вложить подраздел «Пиво» в раздел
с помощью элементов <div>? поместить все элементы, составляющие «Напитки», который в свою очередь вложен
один альбом, в элемент <div> (и так для в раздел «Меню».
О: И да, и нет. Структуру необходимо соз- каждого альбома), а затем поместить все Но самый лучший способ понять, зачем один
давать для конкретных целей, а не ради эти <div> в класс под названием albums. элемент <div> вкладывать в другой, — опро-
структуры самой по себе. Если вы хоти- Таким образом вы определите, где находят- бовать все самим. Просто не забывайте эту
те грамотно создавать страницы, всегда ся альбомы, а затем сможете оформить их информацию, и очень скоро вы увидите при-
следите, чтобы ваша структура была на- в одном стиле, используя тот факт, что они мер ситуации, когда вам понадобится такое
столько проста, насколько это возможно. составляют класс. В то же время вы можете вложение.
Например, если создание общего раздела дать каждому альбому идентификационное
«Домашние животные», содержащего под- имя, чтобы он мог иметь собственный стиль,
разделы «Коты» и «Собаки», несет какую-то который применяется только для него.
Âåðíåìñÿ â ãîñòåâóþ
Отлично, хватит изучать теорию по элементам <div>, давайте используем их для гостевой. Вспомните:
нам нужно сгруппировать все элементы, имеющие отношение к напиткам, а затем придать им стиль
так, чтобы они выглядели как меню для посетителей. Итак, откройте файл lounge.html из папки
chapter10/lounge, найдите элементы, имеющие отношение к напиткам, и окружите их открываю-
щими и закрывающими тегами элемента <div>.
тег, и мы присваи-
Это открывающий
тор elixirs. Не забывайте,
<div id="elixirs"> ваем ему идентифика
мы показываем
<h2>Специальные предложения напитков</h2>
только фраг-
<p> мент HTML-кода.
<img src="images/yellow.gif" alt="Напиток «Лимонный бриз»"/> Откры в файл
</p> lounge.h tml, вы
<h3>«Лимонный бриз»</h3> увидите всю раз-
<p> метку страницы.
Максимально полезный напиток. Содержит экстракты трав, минералы и витамины,
а кусочек лимона в форме завитка придает напитку чудесный мягкий цитрусовый
аромат. «Лимонный бриз» зарядит вас энергией на весь день.
</p>
<p>
<img src="images/chai.gif" alt="Напиток Чай «Льдинка»"/>
</p>
<h3>Чай «Льдинка»</h3>
<p>
Это не традиционный чай. В нем смешаны матэ и чайные специи,
а также добавлен шоколадный сироп высшего качества, что
придает напитку удивительный вкус ледяного кофе.
</p>
<p>
<img src="images/black.gif" alt="Напиток «Подзарядка для мозга»"/>
</p>
<p>
Заходите к нам каждый вечер и пробуйте эти
и другие замечательные
<a href="beverages/elixir.html"
title="Напитки гостевой Head First">напитки</a>.
</p>
</div> А это закрывающий тег.
436 глава 10
элементы div и span
Специа
предложе льные
штурм
«Лимонны
й бриз»
«Подзаря
дка для
мозга»
Проблемы
с памятью?
наш напито Отведайте
мозга», сде к «Подзарядка для
лан
и небольшо ный из черного чая
го количеств
со. Ваш моз
г будет вам а эспрес-
благодаре
за подзарядк н
у.
Заходите к на
м каж дый
и другие зам вечер и пр
ечательны обуйте эти
е напитки.
дальше 437
добавление стиля в div
Äîáàâëåíèå ãðàíèöû
Отлично, все элементы раздела с напитками вложены в элемент <div>,
и начинается самое интересное: можно приступить к оформлению.
Первое, что мы хотим скопировать из меню, — граница, которая окружа-
ет весь раздел с напитками, верно? Теперь, когда создан элемент <div>,
в который вложены все элементы раздела, для создания границы можно
придать стиль именно ему. Попробуем сделать это прямо сейчас.
Вам понадобится новое CSS-правило для гостевой, которое будет выби-
рать элемент <div> по его идентификационному имени. Откройте файл
lounge.css из папки chapter10/lounge и добавьте это правило в самый
конец кода:
кода.
ый конец вашего CSS-
Добавьте это в сам
брать элемент ‹div›
#elixirs {
border-width: thin; Правило позволяет вы
ру elixirs и добавить
border-style: solid; по его идентификато
ницу нашего любимого
border-color: #007e7e; тонкую сплошную гра
.
аквамаринового цвета
}
емента ‹div›,
за да ли ви ди му ю границу для эл
Вы и полей.
е нет отступов
но у него все ещ
добавить.
Их тоже нужно
438 глава 10
элементы div и span
Эта ссылка
аквамаринового цвета.
дальше 439
план атаки
Ïëàí äåéñòâèé
В стиле оформления придется изменить многое, так что давайте сначала
составим план действий. Вот что нам нужно будет сделать.
#elixirs {
border-width: thin;
border-style: solid;
border-color: #007e7e;
width: 200px;
}
С помощью свойства width можно задавать ши-
рину области содержимого элемента. В данном
примере мы задаем ширину 200 пикселов.
440 глава 10
элементы div и span
ое элемента ‹div›
Теперь все содержим
elixirs умещается
с идентификатором
0 пикселов. Это
в столбце шириной 20 Обратите внимание,
я, даже если вы
значение не изменитс что высота раздела
а браузера больше с напитками стала
сделаете ширину окн
те сами! больше. Это пото-
или меньше. Проверь
му, что мы сделали
его уже и оно заняло
го
200 пикселов больше вертикально
пространства.
Мозговой
штурм
Вы можете изменить размер окна браузера таким образом, чтобы его ширина стала меньше, чем ширина
раздела с напитками? Одни браузеры не позволят вам этого сделать, другие позволят. Если вы можете сде-
лать окно браузера у́же раздела с напитками, то сравните текст внутри этого раздела с остальным текстом
страницы. Абзацы изменяют свою ширину независимо от того, насколько узким становится окно браузера,
но ширина элемента <div> с идентификатором elixirs никогда не станет меньше 200 пикселов.
дальше 441
больше информации о ширине блока
Общая ширина
Ширина границы
Ширина
(определяется
свойством
width)
442 глава 10
элементы div и span
Хорошо, а как же
задать ширину для
всего элемента сразу?
300 пикселов
300
10 пикселов
20 пикселов
1 пиксел
1 пиксел
дальше 443
ширина и высота блока
часто
Задаваемые
вопросы
В: Если я сам не укажу ширину элемента, В А если у меня нет отступов, границ В А как насчет высоты?
откуда она возьмется? и полей?
О: Высота элементов по умолчанию уста-
О: По умолчанию для блочных элементов О: Тогда ширина содержимого будет рав- навливается автоматически, и браузер растя-
используется автоширина. Это означает, на ширине блока. Если ширина области со- гивает область содержимого в вертикальном
что элемент будет растянут ровно настоль- держимого равна 300 пикселам и у вас нет направлении так, чтобы отобразилось все
ко, сколько есть свободного места. Если вы отступов, границ и полей, то ширина всего содержимое. Взгляните на размер раздела
представите любую из созданных веб-стра- блока тоже будет равняться 300 пикселам. с напитками после того, как мы задали ему
ниц, вам покажется, что каждый блочный ширину 200 пикселов, и вы увидите, что <div>
элемент растянут на всю ширину окна бра- В: Какие есть способы задания ши- стал намного выше.
узера, и это именно так. Просто запомните, рины? Вы, конечно, можете и сами задать высоту,
что благодаря автоширине элемент (учиты- но тогда вы рискуете тем, что нижняя часть
вая отступы, границы и поля) занимает все О: Вы можете указать реальный размер содержимого будет «заползать» в другие
свободное пространство. Более подробно в пикселах или процентах. Если вы использу- элементы, если заданная вами высота эле-
мы поговорим об этом в следующей главе. ете второй вариант, то ширина будет опреде- мента недостаточно велика, чтобы уместить
лена как процент от ширины того элемента, его полностью. Вообще лучше не задавать
в котором содержится ваш (это может быть высоту элементов, и пусть по умолчанию
элемент <body>, <div> и т. д.). применяется автоширина.
10 пикселов
5 пикселов
30 пикселов
200 пикселов
444 глава 10
элементы div и span
много
ле слева, чтобы не
padding-right: 20px; Мы расширили по раво.
с напиткам и вп
сместить раздел
padding-bottom: 20px;
padding-left: 20px; ся позже...
Нам это пригодит
margin-left: 20px;
Используйте свойство text-align
text-align: center; для блочных элементов, чтобы
выровнять содержащийся в них
background-image: url(images/cocktail.gif); текст. В данном случае мы вырав-
background-repeat: repeat-x; ниваем текст по центру.
}
И наконец, мы указываем, какое изображение будет использовано в качестве
фона, — в данном случае это рисунок с коктейлями. Мы устанавливаем зна-
чение repeat-x свойства background-repeat, в результате чего изображение
будет повторяться только по горизонтали.
дальше 445
как работает свойство text-align
Минуточку...
почему свойство
text-align применилось ...и все отлич-
и к рисункам? Разве не должен но выровнено
выравниваться только текст? Этому по центру.
свойству подошло бы другое
название, если оно выравнивает еще
и изображения.
446 глава 10
элементы div и span
Это интересно, но
я заметил, что весь текст
элемента <div> находится внутри
других блочных элементов, таких как
<h2>, <h3> и <p>. Итак, если выравниваются
только строчные элементы, вложенные
в блочный элемент <div>, то как же
выравнивается текст в блочных
элементах?
дальше 447
вычислим ширину блока
?
которой мы определили как thin. Просто предположите, что
толщина такой границы равна 1 пикселу (для большинства бра-
узеров). Как насчет полей? Мы задали значение для ширины
левого поля, но не задали для правого, то есть по умолчанию
она равняется 0 пикселов.
Вот все свойства, имеющие отношение к ширине. Ваша задача
дача —
Специаль
ные
вычислить общую ширину элемента <div>. предлож
ения напи
тков
border-width: thin;
width: 200px;
«Лимонны
й бриз»
padding-right: 20px; Максимал
ьно
ток. Содерж полезный напи-
ит экстракт
padding-left: 20px; минералы
и витамин
ы трав,
чек лимона ы, а к
в форме за усо-
придает на витка
питку чуде
мягкий ци сный
margin-left: 20px; «Лимонны
трусовый
й бриз» за
аромат.
энергией рядит вас
на весь де
нь.
Чай «Льд
инка»
Это не трад
иц
В нем смеш ионный чай.
ан
ные специи ы матэ и чай-
, а так же до
лен шокола бав-
дный сиро
шего каче п
ства, что пр выс-
напитку уд идает
ивительный
ледяного вкус
кофе.
«Подзаря
дка для
мозга»
Проблемы
с памятью
наш напито ? Отведайт
к «Подзаря е
мозга», сд дка для
елан
чая и небол ный из черного
ьшого коли
эспрессо. чества
Ваш мозг бу
благодаре дет
н за подзар вам
ядку.
Заходите к н
ам каждый
и другие за вечер и про
мечательны буйте эти
е напитки.
448 глава 10
элементы div и span
Ìû ïî÷òè çàêîí÷èëè...
Мы уже практически закончили работу над разделом с напитками. Что осталось сделать?
Кажется, все очень просто, так? В конце концов, Мы уже почти все
вы уже делали это раньше. По сути, опираясь на сделали; осталось только
имеющиеся знания, вы можете просто задать сти- изменить цвет заголовков
ли для элемента <div>, и они будут унаследованы. и межстрочные интервалы.
С этим вы справитесь достаточно быстро.
html
Это элементы для
главных заголовков
body
в HTML-коде для го-
стевой.
h1 h2 div id=”elixirs”
h2 h3 h3 h3
На данный момент CSS говорит, что цвет
элементов ‹h1› и ‹h2› аквамариновый. Все
элементы ‹h1› и ‹h2›, даже находящиеся внутри
h1, h2 {
элемента ‹div› с идентификатором elixirs, color: #007e7e;
имеют этот цвет. }
Это правило, определяющее
цвет заголовков ‹h1› и ‹h2›
в файле lounge.css.
×òî ìû õîòèì ïîëó÷èòü
h2
h1 div id=”elixirs”
body
Это родительский
элемент h2. h1
h2
div id=”elixirs”
Это потомок.
h2 h3 h3 h3
div h2 {
color: black; Оставшаяся часть правила
} пишется как обычно.
Вот элемент, который это правило
выбирает в гостевой.
ент ‹h2›,
Это правило говорит выбрать любой элем
являющийся потомком элемента ‹div›.
html
h2 h3 h3 h3
#elixirs h2 {
color: black; Правило выбирает тот же элемент, но оно более
} конкретное. Таким образом, все будет нормально,
если мы добавим на страницу еще один ‹div› с эле-
Правило говорит выбрать
ментами ‹h2› внутри, потому что это правило
любой элемент ‹h2›, являю-
щийся потомком элемента выбирает только те элементы ‹h2›, которые
с идентификатором elixirs. находятся в ‹div› с идентификатором elixirs.
дальше 451
поговорим еще о выборе потомков
html
body
h2 div id=”calendar”
h1 div id=”elixirs”
h2
h2 h3 h3 h3 h1 h2 h3
часто
Задаваемые
вопросы
В: Под потомками обычно понимаются В: Хорошо, а существует ли способ вы- О: Все делается аналогично. Просто ука-
дети, внуки, правнуки. Здесь мы выбира- брать только дочерний элемент (не выби- зывайте больше потомков, например, так:
ем только потомков-детей, верно? рая внуков, правнуков и т. д.)?
#elixirs blockquote h2 {
#elixirs h2 выбирает ВСЕХ потомков элемен- #elixirs > h2, чтобы выбрать только те <h2>,
та с идентификатором elixirs, так что <h2> которые являются непосредственными деть- Таким образом будут выбраны элементы
может являться непосредственно дочерним ми элемента с идентификатором elixirs. <h2>, являющиеся потомками элементов
элементом элемента <div> или может быть <blockquote>, которые в свою очередь яв-
вложен в <blockquote> или другой <div> (что В: А что, если мне нужно что-то более ляются потомками элемента с идентифи-
сделает его внуком) и т. д. Итак, селектор сложное, например <h2>, который являет- катором elixirs.
потомка выбирает и элементы <h2>, вло- ся дочерним для элемента <blockquote>,
женные в другие элементы, независимо от вложенного в элемент с идентификатором
того, как глубоко они вложены. elixirs?
452 глава 10
элементы div и span
#elixirs h2 {
color: black; Здесь мы используем селекторы потомков, чтобы
} выбрать только те элементы ‹h2› и ‹h3›, кото-
рые находятся внутри элемента ‹div› с иденти-
#elixirs h3 {
фикатором elixirs. Мы определяем для ‹h2› черный
color: #d12c47;
} цвет, а для ‹h3› — красный, используя шестнад-
цатеричный код.
Áûñòðûé òåñò
Вперед! Добавьте эти новые свойства в самый ко-
нец файла lounge.css, сохраните его и обновите
страницу lounge.html.
осталось
Теперь нам
ежстрочный
изменить м
интервал.
дальше 453
другие способы определения межстрочного интервала
от элемента <body>, который мы задали как small. равным размеру размер шрифта — small
высоты шрифта
Нужно, чтобы все элементы, вложенные в <div> с идентифика- элемента ‹div› h2 — 120 % от small
тором elixirs, имели межстрочный интервал, вычисляемый не с идентифика-
относительно размера шрифта элемента <div>, а относительно тором elixirs, то
размера шрифта вложенного элемента. Мы хотим, чтобы заго-
есть small, или
ловок <h2> имел межстрочный интервал, равный 1 × размер
около 12 пикселов.
шрифта, который составяет 120 % от small, а абзацы <p> — меж-
строчный интервал, равный 1 × размер шрифта, который равен Размер шрифта межстрочный интервал
small. Как можно этого добиться? У свойства line-height для элемента p для body — 1,6 от small
рав ен sm all (p
есть небольшая особенность: вместо числа с указанием относи-
тельной единицы измерения, такой как em или %, вы можете наследует свойство
задать только число. Задавая лишь число 1, вы говорите, что каж- font-size от эле- div id=”elixirs”
межстрочный интервал —
дый элемент, вложенный в <div> с идентификатором elixirs, мента ‹div› с иден- small, или около
должен иметь размер, равный высоте его собственного шрифта, тификатором 12 пикселов
elixirs), та к чт о он
а не шрифта элемента <div> с идентификатором elixirs.
Попробуйте сделать это: установите значение 1 свойства line- будет иметь меж-
height элемента <div> с идентификатором elixirs, и вы строчный интервал h2 is 120 % of “small”
увидите, что проблема с заголовками будет решена. 12 пикселов. Это межстрочный
интервал — 120 %
как раз то, что от small, или около
height нам нужно. 14 пикселов
ойство line-
Добавьте св ач ен ие 1
ему зн
#elixirs { и присвойте ид ен т и-
Мы хотим, чтобы межстрочный
а ‹div› с
line-height: 1; для элемент об ы из -
интервал для элемента ‹h2› равнялся
elixirs, чт высоте его собственного шрифта,
} фикатором ы й ин т ер -
строчн
менить меж что составляет 14 пикселов (120 %
элемента.
454 глава 10 вал каждого от small).
элементы div и span
дальше 455
определение свойств через сокращения
Хорошо, вот вам небольшой бонус от этой главы. Вы узнаете, как задать все
эти значения, не рискуя получить кистевой туннельный синдром.
а-
Это старый способ зад А это новый и усовершенствованный
ния отступов. способ — нужно написать сокращенные
названия свойств.
padding-top: 0px;
padding-right: 20px; padding: 0px 20px 30px 10px;
padding-bottom: 30px;
пр ни ле
padding-left: 10px; ве ав ж во
рх ое не е
не е
е
Вы можете использовать такой же способ сокращения для полей:
margin-top: 0px;
margin-right: 20px; margin: 0px 20px 30px 10px;
margin-bottom: 30px;
margin-left: 10px; Как и для отступов, вы пр ни ле
ве ав ж во
можете использовать со- рх ое н ее е
не
кращенный вариант свой- е
ства, чтобы определить
сразу все значения полей.
дальше 457
сокращения для шрифтов
Итак, попробуем применить это на практике. Вот свойства шрифта для элемента body гостевой:
font-size: small;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.6em;
Преобразуем их в сокращение:
Мы не используем эти сво
йства, но это
нестрашно, так как все они
являются необя-
зательными.
458 глава 10
элементы div и span
часто
Задаваемые HTML
Не забыть!
Ïîìûòü
äëÿ ñïèñêîâ
О: Нет, не обязательно. Кто-то думает, что длинная запись лучше Чтобы зап
апо
омн
мниить
ть порядок сле-
дования значений сво
читается. Преимущество сокращений состоит в том, что они делают CSS- йств в со-
кращениях для отступ
ов и полей,
файлы меньше по объему и, конечно же, быстрее вводятся с клавиатуры. ассоциируйте их с
час ами, на
которых вместо циф
Однако если возникают проблемы, то их немного сложнее устранить, р написано
«верх», «правая сторон
а», «низ»,
если использованы некорректные значения или неверный порядок. Итак, «левая сторона». Нуж
но всегда
идти по часовой стр
применяйте любую форму записи, которая более удобна для вас, так елке: верх —
правая сторона — низ
— левая
как они обе абсолютно допустимы. сторона.
margin: 0px 20px
30px 10px;
О: Вы сами не заметите, как быстро сумеете все запомнить. Однако надо свойства или его синтаксис, возьмите этот справочник и найдите
сказать, что разработчики, использующие сокращения, предпочитают то, что вам нужно. Лично мы предпочитаем книгу CSS Pocket
иметь под рукой справочное руководство. Просто купите одно из таких Reference, написанную Эриком Мейером. Она совсем маленькая,
руководств и, если вам понадобится быстро найти название какого-нибудь но содержит огромное количество справочной информации.
Пришло время применить все новые знания на практике. Вы помните, что в нижней
части гостевой страницы есть небольшой раздел с информацией об авторском
праве, который является нижним колонтитулом страницы. Добавьте элемент <div>,
чтобы создать для него собственный логический раздел. После чего придайте
стиль этому разделу, используя следующие свойства:
Сделаем текст действительно маленьким, ведь это
ВАЖНАЯ ИНФОРМАЦИЯ, К КОТОРОЙ ОБЫЧНО
font-size: 50%; СТАРАЮТСЯ НЕ ПРИВЛЕКАТЬ ВНИМАНИЕ.
text-align: center;
line-height: normal; Выровняем текст по центру.
margin-top: 30px;
Кроме того, установим для межстрочного ин-
тервала значение normal (ключевое слово, с ко-
Давайте также зададим верхнее торым вы раньше не встречались). Это значение
поле, чтобы отделить нижний ко- позволяет браузеру выбрать подходящий размер
лонтитул от остальной инфор- для свойства line-height, которое обычно основы-
мации на странице. вается на параметрах шрифта.
Пока вы не перешли к чему-то другому, просмотрите файл lounge.css. Есть ли еще места, где лучше
использовать сокращения? Если да, то внесите соответствующие изменения.
дальше 459
другое назначение гостевой
х
Выделить названия всех Выделить имена все
лу жи р-
компакт-дисков курсив- исполнителей по
Постоянный диджей ным шрифтом. ным шрифтом.
гостевой.
Мозговой
штурм
460 глава 10
элементы div и span
дальше 461
как использовать элементы span
из названия компакт-диска,
Каждый пункт списка состоит
запятой и имени исполнителя.
<ul>
<li>Buddha Bar, Claude Challe</li>
<li>When It Falls, Zero 7</li>
<li>Earth 7, L.T.J. Bukem</li>
<li>Le Roi Est Mort, Vive Le Roi!, Enigma</li>
<li>Music for Airports, Brian Eno</li>
</ul>
Сделайте то же самое для
имени исполнителя. Вложит
е
Добавим элементы <span> первой паре «диск — исполнитель»: его в элемент ‹span›, только
ий Затем добавьте закрыва- на этот раз поместите
Просто добавьте открывающ
clas s ющий тег после названия ‹span› в класс artist.
тег ‹span› с атрибутом
компакт-диска.
и его значением cd.
<ul>
<li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
<li>When It Falls, Zero 7</li>
<li>Earth 7, L.T.J. Bukem</li>
<li>Le Roi Est Mort, Vive Le Roi!, Enigma</li>
<li>Music for Airports, Brian Eno</li>
</ul>
462 глава 10
элементы div и span
Отличная работа.
Следующая
музыкальная композиция
звучит для вас.
Теперь первая музыкаль-
ная композиция оформлена
правильно.
дальше 463
больше информации о span
<ul>
<li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
<li>When It Falls, Zero 7</li>
<li>Earth 7, L.T.J. Bukem</li>
<li>Le Roi Est Mort, Vive Le Roi!, Enigma</li>
<li>Music for Airports, Brian Eno</li>
</ul>
часто
Задаваемые
вопросы
В: В каких случаях лучше использовать В: Могу ли я задавать свойство width находящихся вокруг, а частично перекроют
элемент <span> вместо таких строчных для элементов <span>? А вообще, как на- другие строчные элементы.
элементов, как <em> или <strong>? счет строчных элементов в целом? Изображения немного отличаются от других
строчных элементов. Свойства width, padding
О: Как обычно, размечать содержимое О: Вы можете задавать это свойство для и margin, заданные для рисунков, ведут себя
лучше с помощью тех элементов, которые таких строчных элементов, как <span>, <em> как в блочных элементах. Вспомните из
лучше всего соответствуют его значению. и <strong>, но вы не заметите никакого эф- главы 5: если вы задаете ширину изобра-
Итак, если вы хотите выделить слова ло- фекта до тех пор, пока не станете их позици- жения, используя либо атрибут width эле-
гически, то используйте элемент <em>; онировать (это вы научитесь делать только мента <img>, либо свойство width в CSS, то
если вы пытаетесь подчеркнуть важность в следующей главе). Вы также можете зада- браузер масштабирует изображение таким
информации, используйте <strong>. Но если вать для них отступы, поля и границу. Поля образом, чтобы оно соответствовало задан-
вы просто хотите изменить стиль оформле- и отступы для строчных элементов работа- ной ширине. Иногда это может быть полез-
ния отдельных слов, например названий ют немного не так, как для блочных. Если но, если вы не можете изменить размеры
музыкальных альбомов или исполнителей, вы добавите поля со всех сторон строчного изображения самостоятельно. Но помните:
то лучше использовать элементы <span>, элемента, то заметите, что свободное про- если вы полностью полагаетесь на браузер
распределив их по определенным классам, странство появилось только слева и справа. в масштабировании своего изображения, то,
чтобы сгруппировать и затем иметь возмож- Вы можете добавить для такого элемента от- возможно, будет загружаться больше дан-
ность задать им стиль всем вместе. ступы сверху и снизу, но они не повлияют на ных (если рисунок имеет большие размеры).
расстояние до других строчных элементов,
464 глава 10
элементы div и span
Мозговой
штурм
дальше 465
как оформлять ссылки
466 глава 10
элементы div и span
часто
Êàê ìîæíî ïî-ðàçíîìó îôîðìèòü Задаваемые
ýëåìåíòû ñ ó÷åòîì èõ ñîñòîÿíèÿ? вопросы
Ссылка может находиться в нескольких состояниях: она может
В: Что будет, если я оформлю элемент <a> как
обычный элемент? Например:
быть непосещенной, посещенной или ненажатой (над которой
a { color: red; }
находится указатель мыши). Кроме того, есть еще несколь-
ко других состояний. Итак, как же можно извлечь выгоду из
этих состояний? Например, было бы хорошо задать цвета для
О: Вы, конечно, можете так сделать, но тогда ваши
ссылки будут выглядеть одинаково во всех состояниях,
посещенных и непосещенных ссылок. Или, может быть, вы- что сделает их менее удобными для использования,
делить ссылку подсветкой, когда пользователь наводит на нее потому что не будет видно, какие из ссылок уже посе-
указатель мыши. Если только существует способ это сделать... щались, а какие — нет.
Конечно же, существует, но если мы скажем вам, что для
этого нужно использовать псевдоклассы, вы, скорее всего, В: Какие еще есть состояния ссылок?
просто решите, что и так достаточно узнали сегодня, и за-
кроете книгу. Верно? Но подождите минутку! Сделаем вид, О: Есть еще два состояния: в фокусе и активное.
что мы никогда не произносили слово псевдоклассы, и просто Первое возникает, когда браузер фокусируется на
посмотрим, как можно оформить ссылки. вашей ссылке. Что это означает? Некоторые браузеры
идет
о вслед за символом «a» позволяют пользователю пройтись по всем ссылкам на
Обратите внимание, чт ает ся состо я-
а затем зад странице, если он будет нажимать клавишу табуляции.
символ «:» (двоеточие), о у вас
мы хот им описать. Убедитесь, чт При этом выбранная ссылка получает признак фоку-
ние, которое аче , нап рим ер,
пробел ов (ин
в данных селекторах нет
сировки. Задание значения для псевдокласса :focus
ь!)
a:link не будет работат положительно скажется на доступности, поскольку
- те, кому для доступа к ссылке требуется использовать
a:link { Этот селектор приме клавиатуру (а не мышь), будут знать, что они выбрали
няется к неп осе ще нны м
color: green; нужную им ссылку. Активное состояние появляется,
} ссылкам. когда пользователь щелкает на ссылке впервые.
Данный селектор будет при-
a:visited {
color: red; менен для ссылок, которые уже
В: Могут ли мои ссылки находиться одновремен-
но в нескольких состояниях? Например, ссылка
} были посещены.
может быть посещенной и при этом пользователь
a:hover { А этот селектор приме- будет активно щелкать на ней?
color: yellow; няется, когда пользователь
} наводит на ссылку указа-
О: Конечно, могут. Вы определяете, какой стиль будет
тель мыши. применен, устанавливая порядок правил. Итак, пра-
вильный порядок обычно такой: link, visited, hover, focus,
и затем active. Если вы будете задавать состояния
ссылок в таком порядке, то получите те результаты,
которых ожидаете.
Добавьте эти правила в самый конец файла lounge.css,
сохраните его и обновите страницу lounge.html. По-
В: Хорошо, я понял. Что же такое псевдокласс?
экспериментируйте со ссылками, чтобы увидеть все их
состояния. Обратите внимание на то, что вам придется О: Это всего лишь одно из тех слов в языке CSS, ко-
почистить журнал в браузере, чтобы увидеть цвет непо- торое сбивает людей с толку. Но, как вы уже заметили,
сещенных ссылок (зеленый). оформление ссылок достаточно простое и понятное.
Итак, поговорим о псевдоклассах...
дальше 467
поговорим о псевдоклассах
Уязвимость
псевдокласса
Интервью, взятое на этой неделе.
Знакомство с псевдоклассом
Head First: Добро пожаловать, Псевдокласс. Head First: Хорошо, как же они работают?
Очень приятно, что ты пришел к нам. Должен Псевдокласс: Браузер внимательно исследу-
признаться, что когда меня попросили взять ет ваш код и распределяет элементы <a> по
это интервью, я немного смутился. Что такое псевдоклассам. Если ссылка уже посещена, то —
псевдокласс? Единственное, что приходило на никаких проблем — она будет помещена в псев-
ум, — песня Фила Коллинза 1980-х годов. докласс :visited. Пользователь навел указатель
Псевдокласс: Ах, наверное, это песня Sussudio. мыши на ссылку и задумался? Не проблема, бра-
Меня зовут Псевдо. узер добавит ее в псевдокласс :hover. О, пользо-
ватель уже убрал указатель со ссылки? Браузер
Head First: Ой. Это чистое недоразумение. «достает» ссылку из псевдокласса :hover.
Может быть, с этого и начнем? Не мог бы ты
рассказать о том, откуда появилось твое имя? Head First: Ого, никогда об этом не слышал.
Значит, браузер сам добавляет элементы в эти
Псевдокласс: Под «псевдо» обычно понимают классы и удаляет их оттуда?
что-то, кажущееся настоящим, но таковым не
являющееся. Псевдокласс: Да, именно так, и об этом очень
важно знать, иначе как вы сможете оформить
Head First: А фамилия? Класс? свои ссылки, находящиеся в различных состоя-
Псевдокласс: Все вы знаете, что такое ниях?
CSS-классы. Это группы для размещения в них Head First: Итак, Псевдо, ты работаешь только
элементов, позволяющие оформить всю группу со ссылками?
вместе. Объедините «псевдо» и «класс», и по-
Псевдокласс: Нет, я работаю и с другими эле-
лучится «псевдокласс»: он работает как класс,
ментами. Современные браузеры уже поддер-
но на самом деле им не является.
живают такие псевдоклассы, как :active и :hover,
Head First: А что же в нем ненастоящего, если для разных элементов. Кроме того, существу-
он работает так же, как настоящий класс? ет еще несколько других псевдоклассов. На-
Псевдокласс: Хорошо, откройте HTML-файл пример, псевдокласс :first-child предназначен
и найдите в нем класс :visited, :link или для определения дочерних элементов, напри-
мер первого абзаца в элементе <blockquote>.
:hover. Когда найдете, дайте мне знать.
Вы даже можете выбрать последний абзац в
Head First: Я не могу найти ни одного из них. <blockquote> с использованием псевдокласса
Псевдокласс: И тем не менее псевдоклассы :last-child. На самом деле я довольно гибок.
a:link, a:visited и даже a:hover позволя- Head First: Отлично, мы, конечно же, вынесем
ют определить стиль так, будто являются клас- из этого интервью кое-что полезное для себя.
сами. Однако это псевдоклассы. Иными слова- Кто знал, что песня на самом деле называется
ми, псевдоклассы можно оформить, но никто Sussudio?! Спасибо, что был с нами, Псевдо-
никогда не печатает их в своем HTML-коде. класс.
468 глава 10
элементы div и span
ков в сочетании
сп ол ьз уе м селектор потом
перемены. И любой не-
Итак, большие ор да ет ко манду выбрать
и. Первый селе кт тификатором
с псевдоклассам ый вл ож ен в элемент с иден
емент ‹a›, кот
ор тками.
посещенный эл раздела с напи
ТО ЛЬ К О дл я ссылок внутри
стиль
elixirs. Зададим
дальше 469
используем псевдоклассы для ссылок
470 глава 10
элементы div и span
воляют пользова-
Некоторые браузеры поз
венные стили для
телям создавать собст
и в вашей таблице
Автор HTML-элементов. Есл
иль, то применяет-
(это вы!) не задан какой-то ст
ьзователя.
ся таблица стилей пол
дальше 471
что такое каскадность
472 глава 10
элементы div и span
Êàñêàäíîñòü
Для выполнения этого упражнения вам придется поработать брау-
зером. Допустим, у вас на странице есть элемент <h1>, и вы хотите
узнать для него значение свойства font-size. Вот как это сделать.
Шаг первый
Соберите вместе все таблицы стилей.
На этом шаге вам понадобятся ВСЕ таблицы стилей: таблицы,
которые написал автор веб-страницы, таблицы, созданные пользо-
вателем, и стандартные стили браузера. Помните, сейчас вы игра-
ете роль браузера, так что имеете доступ ко всем этим таблицам!
Шаг второй
Найдите все соответствующие объявления свойства.
Мы уже говорили, что
Нужно именно свойство font-size, так что найдите все его обьявления
тели могут по-
с таким селектором, который, вероятно, может выбирать элемент <h1>. пользова
CSS-правила
Просмотрите все таблицы стилей и выберите из них все правила, соот- мечать свои
ветствующие элементу <h1> и имеющие свойство font-size. выражением !important.
В таком случае эти
Шаг третий правила станут первыми
Возьмите все, что нашли, и отсортируйте. в нашей сортировке.
Теперь, когда вы собрали все подходящие правила вместе, отсортируйте их в таком порядке:
авторские, пользовательские, правила браузера. Иными словами, правила, написанные автором
страницы, важнее правил, написанных пользователем, а пользовательские стили важнее стандарт-
ных стилей браузера.
Шаг четвертый
Теперь отсортируйте все обьявления по приоритетам.
Вспомните, мы уже немного говорили об этом в главе 8. Вы можете интуитивно предположить,
что правило имеет больший приоритет, если оно более точно выбирает элемент. Например, селек-
тор потомка blockquote h1 имеет больший приоритет, чем селектор h1, потому как выбирает
только те элементы <h1>, которые находятся внутри элементов <blockquote>. Но существует
специальный способ, с помощью которого можно вычислить точный приоритет элемента, и мы
рассмотрим его на следующей странице.
Шаг пятый
Наконец, отсортируйте все конфликтные правила в том порядке,
в котором они появляются в отдельных таблицах стилей.
Теперь осталось взять полученный список и отсортировать конфликтующие правила в порядке их
появления в соответствующей таблице стилей (от нижнего к верхнему). Таким образом, если вы поме-
щаете новое правило в таблицу стилей, оно может переопределить все правила, расположенные выше.
Вот и всё! Первое правило в новом списке станет главным, и будет применено именно его свойство
font-size. Теперь посмотрим, как можно точно определить приоритет элемента.
дальше 473
вычисляем приоритет
000
Затем следует просто подсчитать различные элементы в селекторе,
например так:
Имеются ли Имеются ли в селекторе какие-либо классы или
в селекторе псевдоклассы? По одному баллу за каждый.
названия каких- Имеются ли в селекторе какие-нибудь
нибудь элементов? идентификаторы? По одному баллу за
По одному баллу за каждый.
каждое. Селекторы h1 и h1.blue
содержат по одному
000 элементу, так что для
Например, в селекторе h1 есть один элемент, так что получается: них обоих число в пра-
вом столбце будет
Читайте это равняться 1.
как число один. 001
В селекторе h1.blue также со-
И другой пример: в селекторе h1.blue есть один элемент держится один класс, так что
и один класс, так что получается: в среднем столбце для него будет
стоять число 1.
Читайте это
как число один- 011 Идентификаторов нет ни в одном селекторе, так
что для обоих в левом столбце будет стоять число 0.
надцать.
После того как вы подсчитали количество всех идентификаторов, элементов и классов,
можете сделать следующий вывод: чем больше число, тем больший приоритет имеет пра-
вило. Итак, поскольку h1.blue имеет число приоритета 11, то оно более приоритетно,
чем h1, которое имеет число приоритета 1.
h1.greentea ol li p em
474 глава 10
элементы div и span
часто
Задаваемые
вопросы
В: Что делает одно число приоритета В: Можете подробнее рассказать про В: Я не могу получить пользовательские
больше другого? выражение !important? таблицы стилей. Как же можно выяснить,
каким образом сработает каскадность?
О: Просто читайте их как обыкновенные
числа: 100 (сто) больше чем 010 (десять), О: Пользователь может переопределить О: Никак. Если пользователь переопре-
что, в свою очередь, больше, чем 001 (один), стиль, указав !important в самом конце объ- деляет ваши стили, то вы не можете это
и т. д. явления свойства, например, так: контролировать. Поэтому просто делайте
так, чтобы на ваших страницах применялись
В Как насчет правила h1, h2? Каков его h1 {
font-size: 200% те стили, которые вам нравятся. Если же
приоритет? !important; пользователь захочет их переопределить,
}
то он получит то, что желает (возможно, это
О: Рассматривайте это правило как два Это переопределит все авторские правила. будет выглядеть лучше, а возможно, хуже).
отдельных: правило h1, имеющее число
приоритета 001, и правило h2 с числом
приоритета 001.
Браузер
h1 {
дан-
Это вы (на
color: #efefef;
} body h1 { т ).
color: #cccccc; ный момен
h1.blueberry { }
color: blue;
}
дальше 475
используем каскадность
h1 { h1.blueberry {
}
color: #efefef; 001 }
color: blue; 011
Правило с классом
h1.blueberry {
}
color: blue; 011 blueberry переме- h1 {
щается в самый
}
color: #efefef; 001
верх, так как
body h1 { имеет макси- body h1 {
}
color: #cccccc;
002 мальное число }
color: #cccccc;
002
приоритета.
h1 { h1 {
}
color: black;
001 }
color: black;
001
Обратите внимание, что мы сортируем правила только внутри ка-
тегорий правил: авторские, пользовательские, правила браузера. Мы не
сортируем весь список целиком, потому что иначе правило body h1
находилось бы выше правила h1, которое задано автором.
476 глава 10
элементы div и span
Шаг пятый
Наконец, отсортируйте все конфликтующие правила
в порядке их появления в отдельных таблицах стиля.
h1.blueberry {
На данном этапе нет проблем, так color: blue;
Автор
как у нас вообще не оказалось кон- }
фликтующих правил. Правило с клас- h1 {
сом blueberry, имеющее число при- color: #efefef;
}
оритета 11, — явный лидер. Если
бы у нас оказалось сразу два правила body h1 { Пользовател
с числом приоритета 011, то вы- color: #cccccc; ь
}
играло бы то правило, которое распо-
h1 {
лагалось бы ниже в таблице стилей. Браузер
color: black;
}
У нас есть победитель...
Пройдя первичный отбор элементов, первую и вторую
сортировку, а затем выиграв в соревновании по
приоритетам, правило h1.blueberry поднялось на самую
вершину. Итак, для элемента <h1> будет применено
значение blue свойства color.
часто
Задаваемые
вопросы
В: Правило, расположенное в CSS-файле О: Каждая последующая сортировка проис- вать с оформлением страницы. Но поскольку
ниже, имеет приоритет над тем, что распо- ходит с учетом предыдущей. Итак, сначала каждый пользователь может управлять лишь
ложено выше, но что будет, если в HTML правила сортируются по таким категориям: своим вариантом страницы, это никак не
есть ссылки сразу на несколько таблиц авторские, пользовательские, правила бра- повлияет на ваш дизайн.
стилей? узера. Затем внутри каждой категории вы
сортируете их по приоритету. И наконец, вы
сортируете только те правила, числа приори- В Что из этого всего действительно
О: Всегда идите по порядку: сверху вниз, тета у которых оказались равными, учитывая стоит запоминать?
независимо от того, один у вас CSS-файл их порядок следования в таблицах стилей.
или несколько. Просто представьте, что вы
разместили все CSS-таблицы в том поряд- О: Вы будете работать с таблицами стилей
ке, в котором расположены ссылки на них В: Неужели пользователи на самом деле на интуитивном уровне, и изо дня в день ин-
в вашем HTML-коде. В результате станет создают собственные таблицы стилей? туиция будет подводить вас все реже и реже.
ясно, как расположены правила одно отно- Время от времени вы будете видеть, как на
сительно другого. ваших страницах появляются стили, которые
О: Вообще-то нет. Но все же такие случаи вы совсем не ожидали увидеть, и именно в эти
бывают. Например, люди с ослабленным зре- моменты вы будете возвращаться к изучению
В Получается, что когда происходит нием могут создавать свои таблицы стилей теории. Но если вы будете понимать, как рабо-
сортировка по приоритету, порядок меня- и, конечно же, всегда найдется любопытный тает каскадность, то всегда будете точно знать,
ется не для всего списка целиком? человек, который захочет поэкспериментиро- что может произойти на ваших страницах.
дальше 477
когда каскадность не определяет значение
О, а почему
это называется
каскадностью?
Мозговой
штурм
повышенная сложность
дальше 479
обзор элементов div и span и псевдоклассов
ÊËÞ×ÅÂÛÅ
ÌÎÌÅÍÒÛ
Элементы <div> применяются, когда нужно выберет все элементы <h2>, вложенные
объединить группу взаимосвязанных элемен- в элементы <div> (включая дочерние эле-
тов в логический раздел. менты, дочерние дочерних и т. д.).
Создание логических разделов может помочь Для родственных свойств можно указы-
вам выделить основные области содержимого, вать сокращения. Например, padding-
верхний и нижний колонтитулы страницы. top, padding-right, padding-bottom
Вы можете применять элементы <div>, что- и padding-left — все задают отступы и мо-
бы сгруппировать элементы, для которых нуж- гут быть определены одним сокращенным
но задать общий стиль. правилом padding.
Используйте вложенные элементы <div>, В сокращенной форме могут быть опреде-
чтобы еще более детально структурировать лены свойства padding, margin, border,
свои файлы. Но не добавляйте структуру, пока background и font.
она на самом деле вам не понадобится.
Строчный элемент <span> похож на эле-
После того как вы создали логический раз-
мент <div>: он используется для группи-
дел, сгруппировав различные элементы с по-
ровки взаимосвязанных строчных элементов
мощью элемента <div>, можете оформить
этот <div> точно так же, как вы оформили и текста.
бы любой другой блочный элемент. Напри- Вы можете добавлять элементы <span>
мер, можно добавить границу вокруг группы в классы (или давать элементам <span>
элементов, используя свойство border для уникальные идентификаторы), чтобы офор-
элемента <div>, в который они вложены. мить их.
Свойство width определяет ширину области Элемент <a> может иметь несколько состо-
содержимого элемента.
яний. Основные состояния элемента <a> —
Общая ширина элемента состоит из ширины это unvisited, visited и hover.
области содержимого, ширины отступов, са-
Используя псевдоклассы, вы можете офор-
мой границы и полей, которые вы добавили.
мить элемент для каждого состояния отдель-
Как только вы зададите элементу ширину, он но. Псевдоклассы, которые чаще всего ис-
больше не будет растягиваться, чтобы соот- пользуются для элемента <a>, — это :link
ветствовать ширине окна браузера.
(для непосещенных ссылок), :visited (для
Text-align — свойство для блочных эле- посещенных ссылок) и :hover (для статуса
ментов, которое выравнивает по центру, «наведение указателя мыши»).
левому или правому краю строчное содер-
жимое блочного элемента. Оно наследуется Псевдоклассы также могут использоваться
всеми вложенными блочными элементами. в сочетании и с другими элементами, а не
только с <a>.
Вы можете использовать селекторы потомков,
чтобы выбрать элементы, вложенные в дру- К числу дополнительных псевдоклассов отно-
гие элементы. Например, селектор потомка сятся: :hover, :active, :focus, :first-
div h2 { ... } child и last-child.
480 глава 10
элементы div и span
Решение
ния гостевой. Не важно, зашли вы к нам
просто проверить свою электронную
почту за чашечкой чая или заказали
грандиозный обед, вы увидите, что
наш обслуживающий персонал обра-
щает внимание на каждую мелочь. Если
вы чем-то недовольны, отведайте наш
чудо-напиток из голубики.
Решение
Итак, теперь, когда вы умеете хорошо работать с шириной блока, вычислим общую
щую
«Лимонны
ширину раздела с напитками. Мы знаем, что ширина области содержимого равня-
вня- Максималь
й бриз»
но
ток. Содерж полезный напи-
ется 200 пикселам. Кроме того, заданы левый и правый отступы, а также граница,
ица, минералы
ит экс тракты
и ви
чек лимона тамины, а кусо-
трав,
в ф
придает нап орме завитка
ширину которой мы определили как thin. Просто предположите, что толщина ина мягкий цит
«Лимонный
итку чудесн
русовый аро
ый
мат.
бриз» заряди
такой границы равна 1 пикселу (для большинства браузеров). Как насчет полей?
ей? энергией
на весь ден
т вас
ь.
Мы задали значение для ширины левого поля, но не задали для правого, то есть
сть
по умолчанию она равняется 0 пикселов.
Вот все свойства, имеющие отношение к ширине. Ваша задача — вычислить общую
щую Чай «Льд
инка»
Левая граница
Правая граница
Левый отступ
Левое поле
Правое поле
«Подзаря
дка для
мозга»
Проблемы
с памятью?
наш напито Отведайте
к «Подзаряд
мозга», сде ка для
лан
чая и небол ный из черного
ьшого кол
эспрессо. иче
Ваш мозг буд ства
благодаре ет вам
н за подзар
ядку.
Заходите к на
м каж дый
и другие зам вечер и пр
ечательны обуйте эти
е напитки.
h2 div id=”calendar”
h1 div id=”elixirs”
h2
h2 h3 h3 h3 h1 h2 h3
дальше 481
решение упражнений
Пришло время применить все новые знания на практике. Вы помните, что в нижней
части гостевой страницы есть небольшой раздел с информацией об авторском
праве, который является нижним колонтитулом страницы. Добавьте элемент <div>,
чтобы создать для него собственный логический раздел. После чего придайте стиль
этому разделу, используя следующие свойства:
ин-
Окружите раздел с Дайте ему идентифика-
авт ор ском
формацией об ционное имя footer.
праве тегами ‹di v›.
<div id="footer">
<p>
© 2012, Гостевая Head First<br />
Все торговые марки, которые появляются на данном сайте,
являются собственностью их владельцев.
</p>
Еще лучшим решением стала бы замена ‹p›
</div>
на ‹small›, который является элементом,
специально предназначенным для важной ин-
формации, напечатанной мелким шрифтом на
Это CSS-код для нижнего
неприметном месте. Попробуйте сделать это!
колонтитула.
#footer {
font-size: 50%;
text-align: center;
line-height: normal;
margin-top: 30px;
}
482 глава 10
элементы div и span
<ul>
<li><span class="cd">Buddha Bar</span>,
<span class="artist">Claude Challe</span></li>
<li><span class="cd">When It Falls</span>,
<span class="artist">Zero 7</span></li>
<li><span class="cd">Earth 7</span>,
<span class="artist">L.T.J. Bukem</span></li>
<li><span class="cd">Le Roi Est Mort, Vive Le Roi!</span>,
<span class="artist">Enigma</span></li>
<li><span class="cd">Music for Airports</span>,
<span class="artist">Brian Eno</span></li>
</ul>
дальше 483
решение упражнений
Ваша задача — определить для ссылки указатели в гостевой такой же стиль, как и для ссылок
в разделе с напитками. Иными словами, все непосещенные ссылки должны быть аква-
маринового цвета, а посещенные — серого. Однако нам не нужно, чтобы для остальных
ссылок гостевой при наведении на них указателя мыши применялся какой-либо стиль. Это
особенность ссылок в разделе с напитками. Как же это сделать? Заполните пропуски для
стилей ссылки указатели и другой ссылки, которую вы, возможно, еще добавите в гостевую.
Вот решение упражнения:
a:link
____________ { color
__________: #007e7e; }
a:visited
____________ { color
__________: #3 33333; }
484
11 разметка и позиционирование
485
исследуем страницу с двумя колонками
486 глава 11
разметка и позиционирование
Блочные элементы
берутся в том
порядке, в котором
<html> встречаются h1
<head>...</head>
<body> в разметке,
h2
<h1>...</h1> и помещаются
<h2>...</h2> на страницу. p
<p>...</p>
<h2>...</h2> После каждого
<p>...</p>
блочного элемента h2
<p>...</p>
<p>...</p> ставится разрыв
p
</body> строки.
</html>
p
Обратите внимание, p
что элементы занимают
всю ширину строки.
дальше 487
поиграем с потоком
h1
h2
p
p p
p p
p
p
div
div
ul
488 глава 11
разметка и позиционирование
дальше 489
как работает поток
h1 text p text
h2 text text
p
img img
img img
490 глава 11
разметка и позиционирование
Если браузер
teas, and coffees, or, stay a bit longer
menu that combines a harmony of taste, and enjoy the multicultural culinary
texture, and color with the best in fresh
and healthy ingredients. большего из двух полей. menu that combines a harmony of taste,
texture, and color with the best in fresh
располагает and healthy ingredients.
их поля. you with the relaxing sentiments of from eras past. And, don’t forget, the
sights from eras past. And, don’t forget, lounge offers free wireless access to the
the lounge offers free wireless access to
the Internet, so bring your laptop. 20 пикселов. Internet, so bring your laptop.
дальше 491
вопросы о полях
часто
Задаваемые
вопросы
В: Итак, если у меня есть блочный ставляют изображения. Для них достаточно раз, постарайтесь не пугаться. Теперь же
элемент без полей (0 пикселов), часто задаются не только поля, но и грани- отложите эту информацию в дальний уго-
а под ним расположен блочный эле- цы с отступами. И хотя в этой главе мы не лок сознания до тех пор, пока подобное не
мент с полем высотой 20 пикселов, будем задавать поля ни для каких строчных случится.
то поле между двумя этими элемен- элементов, чуть позже мы рассмотрим, как
тами будет высотой 20 пикселов? задавать границу для одного из них. В: Как именно текст рассматрива-
ется в виде элемента, хотя на са-
О: Верно. Если одно поле больше другого, В: А если у меня один элемент мом деле является содержимым?
то для общего поля используется размер вложен в другой и оба имеют поля?
большего поля, даже если второе равняется Они тоже могут соединяться? О: Даже несмотря на то что текст — это
0 пикселов. Но если поля имеют одинаковый содержимое, браузеру необходимо залить
размер, скажем, по 10 пикселов, то они про- О: Да, такое может случиться. Если у вас его на страницу, верно? Сначала браузер
сто прячутся одно под другое и получается есть два соприкасающихся друг с другом поля выясняет, сколько текста поместится на теку-
общее поле высотой все те же 10 пикселов. (верхнее — одного элемента, нижнее — дру- щей строке, а затем рассматривает этот кусок
гого), то они соединятся, даже если один из текста так, будто он является элементом.
В: На самом ли деле строчный этих элементов вложен в другой. Обратите Браузер даже создает вокруг него неболь-
элемент может иметь поля? внимание, что если у внешнего элемента есть шой блок. Как вы уже видели, при изменении
граница, то поля никогда не будут соприка- размера страницы все эти блоки могут изме-
О: Конечно, может, хотя вы скоро заметите, саться и, соответственно, не соединятся. ниться, так как текст перестраивается, чтобы
что поля для строчных элементов задаются Но если вы удалите границу, они превратятся соответствовать размерам новой области
очень редко. Единственное исключение со- в одно поле. Столкнувшись с этим в первый содержимого.
p id=“amazing”
Äàéòå åìó èäåíòèôèêàöèîííîå èìÿ text
text
text
p
img img img img
h1 text
h2 text
Êàê çàäàòü øèðèíó
Требование для плавающих элементов — на- p id=“amazing”
личие заданной ширины. Определим ширину text
этого абзаца равной 200 пикселам. text
text
#amazing {
width: 200px; h2 text
}
p
span em span em
пикселам,
Теперь ширина абзаца равна 200 p
text
гнано под
а его строчное содержимое подо text
— это блочный
этот размер. Помните, абзац text
енты не будут
элемент, поэтому никакие элем
так как перед
расположены рядом с ним, p
них доба вляется
блочными элементами и после
img img img img
разрыв строки.
дальше 493
как работает поток
494 глава 11
разметка и позиционирование
дальше 495
новое задание: starbuzz
Отличная идея. Вы же не
думаете, что я просто посмотрю на
этот фантастический дизайн гостевой
и не захочу усовершенствовать страницу
Starbuzz? Поскольку вы получаете чек на
предъявителя без обозначения суммы,
переведите Starbuzz на следующий
уровень.
496 глава 11
разметка и позиционирование
дальше 497
посмотрим на разметку
Ïîñìîòðèì íà ðàçìåòêó
Теперь посмотрим на новую разметку страницы Starbuzz. Каждый логический раздел мы поместили
в элемент <div>, которому присвоили соответствующий идентификатор. Кроме элементов <div>
и <span>, вы не увидите здесь ничего такого, чего не видели ранее в главе 5. Итак, взгляните на код
и ознакомьтесь со структурой, а затем переверните страницу, чтобы посмотреть на CSS-стили.
<div id="main">
<h1>КАЧЕСТВЕННЫЙ КОФЕ, КАЧЕСТВЕННЫЙ КОФЕИН</h1>
<p>
В кафе Starbuzz мы делаем все для того, чтобы удовлетворить вашу потребность в кофеине
посредством качественного кофе и чая. Конечно же, мы бы хотели, чтобы вы всегда заказывали
самую большую чашку кофе и получали максимальный заряд бодрости, но мы являемся единственной
компанией, которая активно контролирует и оптимизирует уровень кофеина в своих напитках.
Итак, остановитесь и закажите кофе с помощью новой формы. Вы получите качественный кофе
Starbuzz, содержание кофеина в котором соответствует потребностям вашего организма.
</p>
<p>
Упоминали ли мы о <em>кофеине</em>? Мы совсем недавно начали Финансировать ребят, которые
проводят поразительные исследования на сайте <a href="http://buzz.wickedlysmart.com"
title="Все самое интересное о кофеине">Все о кофеине</a>.
Если вы хотите знать самые свежие новости о кофе и других продуктах, содержащих кофеин,
зайдите на этот сайт.
</p>
<h1>НАША ИСТОРИЯ</h1>
<p>
«Человек, план, кофейное зернышко». Ладно, палиндром не получился, зато получилась
чертовски хорошая чашка кофе. Генеральный директор Starbuzz — как раз тот самый человек,
и вы уже знаете, каков его план: Starbuzz на каждом углу.
</p>
<p>
Всего лишь за несколько лет он достиг своей цели, и сегодня вы можете наслаждаться
напитками Starbuzz в любом месте. И конечно же, главная новость в этом году такова —
сотрудники Starbuzz объединились с читателями Head First для создания веб-обшества
Starbuzz, которое очень быстро растет и помогает удовлетворять потребность в кофеине
абсолютно новой группы клиентов.
</p>
<h1>НАПИТКИ КАФЕ STARBUZZ</h1>
<p>
Кафе Starbuzz предлагает большой выбор кофеиносодержащих напитков, включая наши:
498 глава 11
разметка и позиционирование
</div>
<div id="sidebar">
<p class="beanheading">
<img src="images/bag.gif" alt=" Пакетик Bean Machine"/>
<br/>
ОНЛАЙН-ЗАКАЗ через
<a href="form.html">BEAN MACHINE</a> Это элемент ‹div› для Bean
<br/> Machine. Мы присвоили ему
<span class="slogan">
БЫСТРЫЙ <br/>
идентификационное имя
СВЕЖЕПРИГОТОВЛЕННЫЙ <br/> sidebar. Что бы это могло
ПРЯМО К ВАМ ДОМОЙ <br/> обозначать?
</span>
</p>
<p>
Чего вы ждете? Вы можете заказать любой сорт кофе через Интернет с помощью нашей
новой автоматической формы Bean Machine. Как это работает? Просто щелкните на ссылке
Bean Machine, оформите заказ, и ваш кофе будет обжарен, перемолот (если вы этого
захотите), упакован и доставлен к вашей двери.
</p>
</div>
<div id="footer">
© 2012, Кафе Starbuzz
<br/>
Все торговые марки, которые появляются на данном сайте,
являются собственностью их владельцев.
</div>
</body>
И наконец, у нас есть
</html>
элемент ‹div› для нижнего
колонтитула страницы.
дальше 499
начинаем офрмлять страницу starbuzz
#main {
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
Затем идут правила
margin: 0px 10px 10px 10px;
} для каждого логического
раздела. В каждом из
#sidebar {
background: #efe5d0 url(images/background.gif) bottom right; них мы определяем
font-size: 105%; размер шрифта,
padding: 15px;
margin: 0px 10px 10px 10px;
добавляем отступы,
} а для элементов
с идентификаторами
#footer {
background-color: #675c47; main и sidebar задаем
color: #efe5d0; фоновое изображение.
text-align: center;
padding: 15px;
margin: 10px;
font-size: 90%; Затем мы устанавливаем
размер и цвет шрифта для
}
h1 { заголовков.
font-size: 120%;
color: #954b4b;
И такой же цвет шрифта для
}
класса slogan, который используется
.slogan { color: #954b4b;} в элементе ‹div› с идентификатором
.beanheading { sidebar. Мы также определяем
text-align: center; свойства для класса beanheading,
line-height: 1.8em;
} который применяется там же.
500 глава 11
разметка и позиционирование
дальше 501
переместим врезку
выбрать
Используем селектор идентификатора, чтобы
элемент ‹div› с идентификатором sidebar.
#sidebar {
background: #efe5d0 url(images/background.gif) bottom
right;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
width: 280px; лов.
float: right; Мы задаем ширину области содержимого 280 пиксе
}
Затем смещаем элемент с идентиф
икатором sidebar вправо. Помните,
сместится вправо под верхним коло он
нтитулом страницы настолько, наск
это возможно. Кроме того, элемент олько
sidebar будет удален из общего пот
остальные элементы из HTML, опис ока. Все
анные после sidebar, будут обтекат
ь его.
502 глава 11
разметка и позиционирование
дальше 503
протестируем свойство float
вы вернетесь
Что ж, выглядит неплохо, но если
зам ети те, что мы
на три страницы назад, то
ели.
получили не совсем то, что хот
Основное содержимое
и врезка находятся
слева и справа
соответственно, но они
все же не выглядят как
две отдельные колонки.
Посмотрите, как
фоновые изображения
двух разделов наложились
друг на друга. Кроме
того, между колонками
нет видимой границы.
504 глава 11
разметка и позиционирование
дальше 505
используем поля для создания двух колонок
#sidebar {
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
width: 280px;
float: right;
}
В этом правиле вы найдете все
составляющие, необходимые для
вычисления ширины врезки.
#main {
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
margin: 10px;
margin: 0px 330px 10px 10px;
}
506 глава 11
разметка и позиционирование
Òåñò
Как обычно, сохраните файл starbuzz.css
и обновите страницу index.html. Теперь вы
увидите промежуток между двумя колонками. Да-
вайте еще раз разберемся с тем, как это работает.
Врезка «плавает» справа, так что она смещается
в эту сторону настолько, насколько это возмож-
но, и весь ее элемент <div> удаляется из общего
потока и плавает по верху страницы. Теперь
элемент <div> для основного содержимого все
еще занимает всю ширину окна браузера (по-
тому что он является блочным элементом), но
мы задали для него поле такой же ширины, как
у врезки. В результате получаются две красивые
колонки. Вы знаете, что блок элемента <div>
с идентификатором main все еще располагается
прямо под врезкой, но мы никому об этом не
скажем, если вы сами этого не сделаете.
Увеличив поле элемента ‹div›
с идентификатором main, мы создаем
иллюзию двухколоночной разметки.
Îõ, ó íàñ ïîÿâèëàñü
åùå îäíà ïðîáëåìà
Тестируя свою страницу, вы, возмож-
но, заметили небольшую проблемку.
Если вы делаете окно браузера шире,
то нижний колонтитул поднимается
и отображается под врезкой. Почему
так происходит?
Как вы помните, врезка удалена из
общего потока, поэтому нижний ко-
лонтитул почти полностью ее игно-
рирует. Если область содержимого
слишком коротка, то нижний колон-
титул поднимается вверх и заходит
под врезку.
Мы можем использовать тот же трюк
с полем и для нижнего колонтиту-
ла, но тогда он будет отображаться
только под областью содержимого,
У нас появилась проблема. Если вы расширяете
а не по всей ширине страницы. А это
окно браузера, то нижний колонтитул
плохо. Итак, что же теперь делать?
и врезка частично перекрывают друг друга.
дальше 507
альтернатива полям
дальше 509
поговорим о колонках и потоках
Òåñò
Итак, вперед! Добавьте в файле starbuzz.
css свойство clear в правило для нижнего ко- Теперь наши проблемы с нижним
лонтитула и обновите страницу index.html. колонтитулом решены. Он всегда
Вы увидите, что при расширении окна браузера будет расположен под врезкой,
нижний колонтитул все равно остается под врез-
независимо от ширины окна браузера.
кой. Неплохо!
Теперь страница выглядит довольно хорошо, но
можно внести и другие изменения, которые улуч-
шат ее вид. Например, можно сделать так, чтобы
каждая колонка опускалась вниз до тех пор, пока
не встретит нижний колонтитул и не прибли-
зится к нему вплотную, — обратите внимание
на то, что на данный момент у нас есть проме-
жуток между основным содержимым и нижним
колонтитулом (если окно браузера достаточно
большой ширины) либо между врезкой и ниж-
ним колонтитулом (если ширина окна средняя).
Однако исправить это при помощи float нелегко,
поэтому мы лучше двинемся дальше и взглянем
на ряд дополнительных способов разметки стра-
ниц с использованием других CSS-методов. Как
вы еще увидите, в CSS есть множество методов
для реализации любых замыслов разработчика,
и каждый из них имеет свои сильные и слабые
стороны.
Важно, чтобы вы понимали данные методы,
поскольку это позволит вам применять их там
и тогда, когда вам будет необходимо.
часто
Задаваемые
вопросы
В: Можно ли сделать так, чтобы в плане разметки, которое будет включено плавающие элементы — всего лишь пла-
элемент «плавал» по центру? в будущие версии CSS, возможно, обеспечит вающие элементы. Другими словами, поля
возможность сделать это — нам нужно лишь плавающих элементов не соприкасаются с
О: Нет, CSS позволяет создавать элемен- подождать и посмотреть. полями элементов из потока, поэтому они
ты, плавающие только справа или слева. не могут сворачиваться.
Хорошенько подумав, вы поймете, что, если В: Сворачиваются ли поля для плава-
бы такая возможность все-таки была, строч- ющих элементов? Но это затрагивает один важный момент,
ному содержимому пришлось бы обтекать который влечет за собой ошибки в разметках.
плавающий по центру элемент с двух сторон, О: Нет, и очень легко понять почему. Если есть область с основным содержимым
чего было бы довольно трудно добиться в В отличие от блочных элементов, которые и врезка, то достаточно часто для них обеих
браузере. Однако одно из новых решений заливаются на страницу сплошным потоком, задают верхние поля. Затем, если врезку
510 глава 11
разметка и позиционирование
делают плавающей, то она все еще имеет плавающим либо слева, либо справа изобра- О: Да, можно думать и так. Строчное
поле, но оно больше не будет соединяться с жение из абзаца, и вы увидите, что текст нач- содержимое, вложенное в блочный эле-
тем, что находится над этой врезкой. Таким нет обтекать его с соответствующей стороны. мент, всегда обтекает плавающий эле-
образом, вы легко можете получить поля Не забудьте добавить отступы, чтобы вокруг мент, принимая во внимание его границы,
разных размеров для области с основным изображения появилось немного свободно-
содержимым и для врезки, если не будете в то время как блочные элементы зали-
го места, и, если хотите, добавьте границу.
помнить о том, что поля плавающих элемен- ваются на страницу в обычном режиме.
Вы также можете сделать плавающим любой
тов никогда не сворачиваются. Исключение составляет тот случай, когда
другой строчный элемент, но такое встреча-
вы задаете свойство clear для блочного
В: Можно ли сделать строчный ется редко.
элемента, в результате чего он смещается
элемент плавающим?
В: Правильно ли думать, что пла- вниз до тех пор, пока справа, слева или
О: Да, конечно, можно. Самый лучший и наи- вающие элементы игнорируются с обеих сторон (в зависимости от значения
более часто встречающийся пример этого — блочными, но строчные элементы свойства) не будет никаких плавающих
плавающие изображения. Попробуйте сделать их видят? элементов.
дальше 511
тест не для css
512 глава 11
разметка и позиционирование
Áûñòðûé òåñò
Мы уже говорили, что если сделать об-
ласть основного содержимого плавающей
слева, то возникнут определенные пробле-
мы. Прежде чем продолжить работу, вы-
полните небольшой тест и посмотрите,
как это будет работать. Внесите изменения
в файле starbuzz.css и обновите в брау-
зере страницу index.html. Внимательно
рассмотрите, как отображается страница,
если сделать окно браузера узким, средней
ширины или широким.
Если рассматривать это с точки зрения дизайна, первый вариант был лучше,
в то время как с точки зрения содержимого лучше выбрать второй вариант
(из-за порядка расположения элементов <div>). Можно ли объединить пре-
имущества этих двух вариантов: чтобы врезка имела фиксированную ширину,
но элемент <div> с идентификатором main все же шел первым в HTML? Какие
дизайнерские решения могут помочь получить этот результат?
514 глава 11
разметка и позиционирование
Èçìåíåíèÿ â HTML
В свой HTML-код вы добавите новый элемент <div> с идентификатором allcontent. Как можно до-
гадаться по названию, этот <div> будет включать в себя все содержимое страницы. Итак, поместите
открывающий тег <div> перед элементом <div> с идентификатором header, а закрывающий тег —
после элемента <div> с идентификатором footer.
Добавьте новый ‹div› с идентификатором allcontent
<body>
<div id="allcontent"> и заключите в него все элементы, вложенные в ‹body›.
<div id="header">
... остальной HTML будет здесь ...
</div>
ет
</div> Этот элемент ‹div› закрыва
ом foot er.
</body> ‹div› с идентификатор у элемента
Зададим ширин
ой 800 пик-
Èçìåíåíèÿ â CSS allcontent равн
оизведет
селам. Это пр
Теперь мы будем использовать этот <div>, чтобы заключить фект: все
все элементы и содержимое внутри элемента <div> с иден- следующий эф
утри него
тификатором allcontent в область фиксированной шири- находящееся вн
но в область
ны, равную 800 пикселам. Рассмотрим CSS-правило, которое будет заключе
пикселов.
делает это: шириной 800
#allcontent {
width: 800px;
padding-top: 5px; Поскольку мы впервые оформляем этот
padding-bottom: 5px; элемент ‹div›, определим для него отступы
background-color: #675c47; и фоновое изображение. Вы увидите, что
} это поможет объединить всю страницу.
Когда речь шла о задании ширины auto для области основного содержимого, браузер
растягивал ее настолько, насколько это было нужно. Для полей с шириной auto
браузер выясняет, какой фактически должен быть размер, а также делает левое
и правое поля одинаковыми, чтобы содержимое было центрировано.
516 глава 11
разметка и позиционирование
Узкое
Широкое
дальше 517
используем абсолютное позиционирование
div id=“footer”
Поскольку врезка покинула об-
щий поток, другие элементы
вообще не знают, что она есть
на странице, и полностью ее
игнорируют.
518 глава 11
разметка и позиционирование
дальше 519
поговорим о свойствах позиционирования
часто
Задаваемые
вопросы
В: Какое значение свойства В: Существуют ли другие значе- В: При позиционировании эле-
position используется по умолча- ния свойства position, кроме static ментов можно использовать толь-
нию? и absolute? ко пикселы?
О: Значение static. При статическом О: На самом деле их четыре: static, О: Нет, положение элементов часто за-
позиционировании элементы заливаются на absolute, fixed и relative. Вы уже дается через проценты. Если вы будете
страницу в общем потоке и вы не определя- слышали о значениях static и absolute. использовать проценты, то месторасполо-
ете их месторасположение на странице, — При фиксированном позиционировании эле- жение ваших элементов будет меняться при
браузер сам решает, где они отобразятся. мент располагается в месте, которое вычисля- изменении размера окна браузера. Итак,
Чтобы убрать элемент из общего потока, ется относительно окна браузера (а не самой например, если ширина окна браузера рав-
вы можете использовать свойство float. страницы), так что фиксированные элементы няется 800 пикселам, а для элемента левая
При этом можно определить, будет элемент никогда не перемещаются. Через несколько позиция задана как 10 %, то он будет распо-
«плавать» слева или справа, но в конеч- страниц вы увидите пример такого позицио- ложен на расстоянии 80 пикселов от левой
ном счете браузер сам решает, где именно нирования. При относительном позициони- границы страницы. Но если вы измените
располагать этот элемент. Сравните это со ровании элемент заливается на страницу как ширину окна браузера на 400 пикселов, то
значением absolute свойства position. При обычно, но перед тем, как отобразиться на это расстояние до левой границы страницы
абсолютном позиционировании вы указы- странице, он смещается в каком-либо на- будет уменьшено до 10 % от 400 пикселов,
ваете браузеру точное месторасположение правлении. Относительное позиционирование то есть до 40 пикселов.
элемента. часто применяется для более современного Кроме того, в процентах часто задается
позиционирования элементов и создания ширина. Если вам не нужна четко установ-
В: Я могу позиционировать толь- дополнительных эффектов. Пример такого ленная ширина для элементов или их полей,
ко элементы <div>? позиционирования вы также еще увидите. можете использовать проценты, чтобы и об-
ласть основного содержимого, и врезка име-
О: Вы можете абсолютно позиционировать В: Нужно ли мне задавать ши- ли гибкие размеры. Так делается во многих
любые элементы: и блочные, и строчные. рину для абсолютно позициони- двух- и трехколоночных разметках.
Просто помните, что когда элемент пози- рованных элементов, как я делал
ционирован абсолютно, он удаляется из это для плавающих элементов? В: Нужно ли мне знать, как за-
общего потока. давать свойство z-index, чтобы
О: Ширину для абсолютно позициониро- использовать абсолютное пози-
В: Итак, я могу позиционировать ванных элементов задавать не обязательно. ционирование?
и строчные элементы? Но если вы этого не сделаете, то по умол-
чанию блочный элемент займет всю ширину О: Нет, свойство z-index применяется
О: Да, конечно, можете. Например, очень окна браузера, за исключением того отсту- в более сложных ситуациях, где необходимо
часто позиционируются элементы <img>. па, который вы задали слева или справа. использование CSS. Это касается очень
Можно также позиционировать элементы Возможно, вам именно это и будет нужно. сложных сценариев веб-страниц и немного
<em>, <span> и др., но это редко делается. Задавайте значение свойства width только выходит за рамки материала этой книги.
в том случае, если хотите изменить это стан- Но это свойство — часть работы абсолют-
дартное поведение. ного позиционирования, так что неплохо бы
знать о нем (чуть позже мы еще поговорим
о z-index).
520 глава 11
разметка и позиционирование
ы вернулись
Помните, м ла,
Èçìåíåíèå CSS äëÿ Starbuzz-ñòðàíèöû версии фай
к исходной йти
может на
е
которую вы ol ut e.
ter11/abs
Наш HTML-код уже готов к использованию, а <div> с иден- в папке chap
тификатором sidebar находится как раз там, где нужно
(под областью основного содержимого). Нам остается вне- Вы можете работать и не в пап-
сти несколько изменений в CSS, и мы получим абсолютно ке absolute, а, например, скопиро-
позиционированную врезку. Откройте файл starbuzz.css вать файлы index.html и starbuzz.
и внесите несколько правок для врезки. css в папку starbuzz и работать
в ней, как это сделали мы.
#sidebar {
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px; Итак, теперь мы указываем, что врезка
ионирована абсолютно и должна нахо-
margin: 0px 10px 10px 10px; позиц
диться на расстоянии 128 пикселов от верх-
position: absolute; й.
ней границы страницы и 0 пикселов от право
и-
top: 128px; Мы также хотим, чтобы врезка имела фикс
сдела ем ее тако й
right: 0px; рованную ширину, поэтому
width: 280px; же, как в «плавающей версии»: 280 пикселов.
}
кселов
Откуда берется Расстояние 0 пи
ицы страницы
цифра 128, вы узна- от правой гран
того, что
ете через минуту... даст гарантию
тся» к пра-
врезка «приклеи
на браузера.
вой стороне ок
дальше 521
используем поля с позиционированием
Когда вы изменяете
Ого, все выглядит точно размер окна браузера,
так же, как когда мы врезка все равно нахо-
использовали плавающий дится на расстоянии
элемент, однако вы зна- 128 пикселов от верха
ете, что врезка позици- страницы и вплотную
онирована абсолютно. к ее правому краю.
дальше 523
обзор способов создания двухколоночной разметки
524 глава 11
разметка и позиционирование
дальше 525
делаем две колонки в табличном представлении CSS
526 глава 11
разметка и позиционирование
дальше 527
решение упражнения
Сначала мы заключим
в <div> с идентификатором
tableContainer все, что будет
ы
отображаться в виде таблиц
528 глава 11
разметка и позиционирование
530 глава 11
разметка и позиционирование
Áûñòðûé òåñò
Здорово! Наши два столбца выглядят (поч-
ти) идеально. Попробуйте сделать окно
Почти
браузера шире, а затем ˆуже. Обратите вни-
мание на то, что оба столбца всегда оста- идеально!
ются равны по высоте и у нас больше нет Единствен-
такой проблемы, как перекрытие столбцом ная остав-
нижнего колонтитула. Теперь содержимое шаяся
будет отображаться на экранах мобильных проблема –
устройств пользователей корректно! слишком
Есть еще одна легко устранимая проблема: большое
расстояние между верхним колонтитулом расстояние
и столбцами, а также между нижним ко- здесь…
лонтитулом и столбцами слишком велико…
…и здесь.
#header {
background-color: #675c47; Вместо промежутка шириной 10 пикселов
margin: 10px; по всем сторонам нижнего колонтитула
margin: 10px 10px 0px 10px; теперь у нас имеется промежуток такой
height: 108px; же ширины по всем сторонам, за исключением
}
нижней, где он равен 0 пикселов.
#footer {
background-color: #675c47;
color: #efe5d0; Аналогичным образом, теперь по всем
text-align: center; сторонам нижнего колонтитула, за
padding: 15px; исключением верхней, ширина поля
margin: 10px; составляет 10 пикселов.
margin: 0px 10px 10px 10px;
font-size: 90%;
}
532 глава 11
разметка и позиционирование
ю
HTML для мен
<div id="drinks">
<h1>НАПИТКИ</h1>
<p>Домашняя смесь, $1.49</p>
<p>Кофе мокко, $2.35</p>
<p>Капучино, $1.89</p>
<p>Чай, $1.85</p> Генеральный директор
<h1>ОСВЕЖАЮЩИЕ НАПИТКИ</h1> хочет, чтобы страница
<p> Starbuzz выглядела вот
Мы с гордостью подаем освежающие напитки, так, с новой колонкой
которые готовят наши друзья в гостевой Head First. слева, содержащей меню
</p> напитков.
<p>Охлажденный зеленый чай, $2.99</p>
<p>Охлажденный малиновый сироп, $2.99</p>
<p>Чудо-напиток из голубики, $2.99</p>
<p>Клюквенный антиоксидантный взрыв, $2.99</p>
<p>Чай «Льдинка», $2.99</p>
<p>«Подзарядка для мозга», $2.99</p>
</div>
м необходимо
Новый CSS… ва
написание!
завершить его
#drinks { Заполните данный пробел,
_________________________; чтобы <div> с идентификато-
background-color: #efe5d0; ром drinks отображался как
width: 20%;
первая колонка на странице.
padding: 15px;
vertical-align: top;
}
дальше 533
вопросы о свойстве display:table
часто
Задаваемые
вопросы
В: Я знаю, что HTML-таблицы будут цы Starbuzz, то увидите, что у нас имеется по вертикали по верхнему краю, по центру
рассматриваться позже в этой книге, но по два столбца (или три после добавления или по нижнему краю.
является ли CSS-свойство display: колонки с меню напитков) в каждой стро-
table аналогом использования HTML- ке. Чтобы добавить еще одну строку, вам
таблиц? потребуется добавить еще один <div>, В: Важен ли объем содержимого, кото-
аналогичный <div> с идентификатором рый я помещаю в ячейку?
tableRow, вложенный в <div> с иден-
О: Оно является аналогом в том смысле, тификатором tableContainer и содер-
что вы создаете структуру в своем HTML, жащий то же самое количество столбцов в О: Не очень. Вы, возможно, захотите
которая сопоставима со строками и столбца- первой строке. Вы сможете продолжать до- позаботиться о том, чтобы ни в одной из
ми таблицы. Но, в отличие от HTML-таблиц, бавлять строки, добавляя элементы <div> колонок не имелось больше содержимого,
CSS-свойство display: table всецело таким же способом. чем в других колонках, чтобы ваша страни-
посвящено представлению содержимого в ца выглядела симметрично, но, в конечном
данной структуре с использованием макета,
подобного табличному. HTML-таблицы пред- В: Зачем мы применяли выравнивание счете, вам решать, какой вид будет иметь
ваша страница.
назначены для табличных данных — данных, по вертикали к каждой ячейке в CSS по-
которые должны быть структурированы как средством vertical-align: top?
таблица. Таким образом, использование
CSS-свойства display: table — это
В: Можно ли управлять шириной ко-
способ создания определенного типа ма- О: Мы применили vertical-align: лонок?
кета представления, в то время как HTML- top к каждой ячейке, чтобы обеспечить
таблицы всецело посвящены структуриро-
ванию данных. Все об HTML-таблицах вы
выравнивание всего содержимого по верх-
нему краю ячейки. Если содержимое ка-
О: Да, вы можете управлять шириной
колонок посредством свойства width.
узнаете из главы 13. ждой ячейки выровнено таким образом, то
В упражнении по добавлению колонки с меню
содержимое каждой из наших колонок на
странице Starbuzz должно быть выровнено напитков, которое вы только что делали, вы,
В: А что, если в моем табличном пред- по верхнему краю, благодаря чему представ- вероятно, заметили, что для width было
ставлении мне понадобится более одной ление будет больше походить на созданное задано значение 20%. Вы можете задавать
строки? профессионалом. Если вы не примените ширину каждой колонки таким способом
выравнивание по вертикали, то можете (и будет хорошей идеей позаботиться о том,
столкнуться с тем, что в вашем браузере чтобы значения ширины составляли в сумме
О: Если вам потребуется отображать со- по умолчанию будет применяться выравни- 100%!). При использовании процентов ваша
держимое в нескольких строках, то просто вание по центру. Естественно, в некоторых таблица сможет расширяться и сужаться
добавьте HTML-структуру, чтобы обеспечить случаях это может оказаться тем, что вам должным образом по мере того, как вы бу-
это. Если вы взглянете на HTML-код страни- и нужно! Вы можете задавать выравнивание дете изменять размер окна браузера.
534 глава 11
разметка и позиционирование
Ãèáêàÿ ðàçìåòêà
Гибкая размет-
Далее мы создали фиксированную разметку, заключив все
ка обеспечи-
содержимое страницы в новый элемент <div> фиксиро-
ванного размера, а затем сделали ее гибкой, позволив по- вает область
лям растягиваться благодаря значению auto. В результате содержимого
наша разметка стала выглядеть великолепно (во множестве с выравнивани-
веб-страниц используется именно такой дизайн, который, ем по центру,
например, имеется у многих блогов). Это также решило фиксированны-
проблему с упорядочиванием разделов. Недостаток дан- ми размерами
ной разметки состоит в том, что содержимое страницы не
и растягиваю-
растягивалось, чтобы занять всю ширину окна браузера
(хотя многие разработчики вообще не рассматривают это щимися полями.
как недостаток).
дальше 535
обзор инструментов
536 глава 11
разметка и позиционирование
дальше 537
позиционирование изображений для колонтитула
Если мы разделим изображение для верхнего колонтитула на два отдельных изображения, на одном из
которых будет логотип, а на другом – слоган, то каким образом следует расположить эти два изображения
в элементе <div id=“header”>, чтобы обеспечить их корректное позиционирование (то есть чтобы ло-
готип оставался слева от верхнего колонтитула, а слоган всегда был привязан к правой стороне верхнего
колонтитула, даже при открытии страницы Starbuzz в растянутом окне браузера)?
Мы можем легко разделить изображе-
ние для верхнего колонтитула на два …обеспечиваем вас необходимым количеством
GIF-изображения (оба будут иметь кофеина для поддержания жизненного тонуса.
прозрачный фон с подложкой, что Просто выпейте это.
538 глава 11
разметка и позиционирование
Далее нам потребуется обновить наш HTML, чтобы заменить существующее изображение для
верхнего колонтитула, являющееся одним большим изображением шириной 800 пикселов, на
два изображения, которые мы создали во время этапа 1. Мы присвоим этим изображениям иден-
тификаторы, которые будем использовать для выбора каждого из них в нашем CSS.
<div id="header">
<img src="images/header.gif" alt="Starbuzz Coffee header image">
<img id="headerLogo"
src="images/headerLogo.gif" alt="Starbuzz Coffee logo image">
<img id="headerSlogan"
src="images/headerSlogan.gif"
alt="Providing all the caffeine you need to power your life.">
</div>
дальше 539
тестируем позиционирование изображений в колонтитуле
Данный CSS настолько прост, что вы, вероятно, сможете справиться с ним даже с за-
крытыми глазами, ведь вы уже столько узнали о макетах из этой главы. Напишите CSS
для позиционирования изображений в верхнем колонтитуле. Вы уже знаете, что будете
использовать float; заполните пробелы в приведенном ниже коде, указав правило, не-
обходимое для позиционирования изображений в требуемых местах. Сверьте свой ответ
с тем, что приведен в конце данной главы, прежде чем двигаться дальше.
______________________ {
float: ________;
}
540 глава 11
разметка и позиционирование
часто
Задаваемые
вопросы
В: Почему нам было не нужно добавлять этому прочие элементы страницы остаются В: А мы могли бы осуществить позици-
clear: right в <div> с идентификатором на своих местах. онирование изображений для верхнего
tableContainer под верхним колонтиту- колонтитула с использованием других
лом? В: А что, если сделать плавающим изо- стратегий разметки, о которых говорили
бражение в текстовом абзаце? ранее?
О: Потому что изображение, которое мы
сделали плавающим, имело точно такую же О: Тогда текст будет обтекать данное изо- О: Да, несомненно. В CSS обычно бывает
высоту — 108 пикселов, что и второе изо- бражение. Все будет работать так же, как и более одного способа сделать ту или иную
бражение в верхнем колонтитуле, так что в случае, когда мы делали плавающим эле- вещь. Другая стратегия, к которой мы могли
просто не осталось места для того, чтобы мент <div> с идентификатором elixirs бы прибегнуть, заключается в использовании
другое содержимое страницы смогло под- на гостевой странице; помните, как текст абсолютного позиционирования. Далее мы
няться и обтекать плавающий элемент. Оба остальной части страницы обтекал данный посмотрим, как осуществляется абсолютное
изображения занимают абсолютно одинако- <div>? То же самое будет, если вы сдела- позиционирование изображений.
вый объем вертикального пространства, по- ете плавающим изображение.
Награда
Äîáàâëåíèå íàãðàäû
Обратите внимание на то, что из-за своего расположения награда будет перекрывать как
верхний колонтитул, так и основную часть страницы. Будет довольно сложно разместить
плавающее изображение в таком месте. Более того, как мы знаем, необходимо, чтобы награда
не влияла на поток каких-либо других элементов страницы.
Похоже, что здесь придется прибегнуть к абсолютному позиционированию. В конце концов,
благодаря абсолютному позиционированию вы можете разместить изображение именно
там, где захотите, и так как оно не будет входить в общий поток, оно не повлияет ни на какие
элементы на странице. Кажется, это небольшое изменение позволит легко вставить нужное
изображение и не нарушит имеющуюся структуру страницы.
Давайте попробуем это сделать. Начнем с добавления нового элемента <div> сразу под верх-
ним колонтитулом (генеральный директор считает, что очень важно, чтобы изображение
находилось в самом начале). Вот <div>:
Вот этот <div> содержит
<div id="award"> изображение награды.
<img src="images/award.gif"
alt="Награда обжарщику кофейных зерен года">
</div>
Ïîçèöèîíèðîâàíèå íàãðàäû
Мы хотим, чтобы изображение награды было расположено
примерно посередине страницы, когда ширина окна браузера
составляет 800 пикселов (это ширина изображения верхнего
колонтитула и обычная ширина окна браузера), и просто пе-
рекрывало <div> с основным содержимым.
Итак, будем использовать свойства top и left для позициони-
рования награды: 30 пикселов от верхней границы страницы
и 365 пикселов от левой.
пози-
#award { Мы задаем абсолютную
с иден-
position: absolute; цию для элемента <div>
о-
top: 30px; тификатором award, кот
left: 365px; ет 30 пик сел ов
рая составля
} цы
от верхней границы страни
и 365 пикселов от левой.
542 глава 11
разметка и позиционирование
часто
Задаваемые
вопросы
В: Похоже, абсолютное позиционирование лучше, чем В: Как узнать, какое значение z-index имеется у каждого
float, поскольку оно дает больше контроля над тем, где из элементов страницы по умолчанию?
будут располагаться элементы. Следует ли предпочитать
его вместо float? О: Вы не узнаете его, если не исследуете CSS, применяемый
браузером к каждому из элементов страницы, воспользовав-
О: Не всегда; выбор будет зависеть от того, что вам требу- шись инструментами разработчика. Однако в большинстве
ется. Если вам действительно необходимо, чтобы элемент случаев вас не будут заботить значения z-index элементов,
располагался в четко определенном месте на странице, то ис-
если только вы не станете специально накладывать эти эле-
пользуйте абсолютное позиционирование. Но если вам, к при-
менты друг на друга слоями или не столкнетесь с ситуацией,
меру, понадобится, чтобы текст обтекал изображение, то вы
подобной той, что возникла у нас в случае с наградой. Обычно
не сможете легко обеспечить это посредством абсолютного
значения 1, заданного для z-index, вполне достаточно
позиционирования; в данном случае вам, несомненно, придет-
ся использовать float. Вы будете регулярно сталкиваться для того, чтобы обеспечить расположение одного элемента
с ситуациями, когда потребуется применять либо абсолютное поверх других элементов страницы, однако если у вас имеется
позиционирование, либо float. несколько элементов, которые вы позиционируете и накла-
дываете слоями друг на друга, то вам потребуется уделить
В: Мне довелось иметь дело с парочкой элементов <div> немного больше внимания значениям z-index.
с абсолютным позиционированием, и один из них всегда
отображался поверх другого. А есть ли способ изменить В: Существует ли максимальное значение, которое
то, какой из них будет отображаться сверху? может иметь z-index?
О: Да, есть: у каждого позиционированного элемента име- О: Да, но оно очень большое, и на практике вам никогда
ется свойство, которое называется z-index и определяет не потребуется задавать для z-index настолько крупные
порядок элементов на воображаемой вертикальной оси (счи- значения.
тайте ее системой указателей на экране). Данное свойство
используется следующим образом: В: А как насчет отрицательных значений для z-index —
можно ли задать для данного свойства значение, напри-
#div1 {
мер, –1?
position: absolute;
top: 30px;
left: 30px; О: Да, можно! При этом будут действовать все те же правила
z-index: 0;
(то есть чем больше положительное значение, тем выше слой
}
#div2 { расположения соответствующего элемента и тем ближе он
position: absolute; к вам на экране).
top: 30px;
left:
z-index:
30px;
1;
В: z-index может иметься у любого элемента?
}
О: Нет, только у элементов, позиционированных посред-
Данные правила обеспечат позиционирование элемента ством CSS с применением абсолютного, относительного или
с идентификатором div2 поверх элемента с идентифика- фиксированного позиционирования. Далее вы увидите пример
тором div1. использования фиксированного позиционирования!
дальше 543
фиксированное позиционирование
544 глава 11
разметка и позиционирование
пикселов
300
coupon. позиционирование.
#coupon { 100
div id=“coupon”
position: fixed; пикселов
top: 300px;
left: 100px;
}
дальше 545
добавление нового элемента
<div id="coupon">
<a href="freecoffee.html" title="Щелкните здесь, чтобы получить бесплатный кофе">
<img src="images/ticket.gif" alt="Купон на бесплатный кофе Starbuzz" />
</a>
</div>
Итак, вперед! Добавьте этот элемент <div> в самый конец вашего файла index.html сразу над нижним
колонтитулом. Поскольку нам нужно позиционировать элемент, его расположение в HTML будет иметь
значение только в тех браузерах, которые не поддерживают позиционирование, а купон не настолько
важен, чтобы помещать его в самом верху.
Теперь напишем CSS-код для позиционирования купона.
ое позиционирование для опреде-
Будем использовать фиксированн
а с идентификатором coupon
ления месторасположения элемент
350 пикселов от верхней гра-
и расположим его на расстоянии
#coupon {
к его правой границе. Таким
ницы окна просмотра и вплотную
position: fixed;
0 пикселов от левой границы.
образом, нужно задать расстояние
top: 350px;
left: 0px;
л-
ть стиль изображению и ссы
} Кроме того, нужно придава уг
ет оказаться, что вокр
кам. В противном случае мож
а, так как оно активизиру-
#coupon а, img { изображения появилась границ е
и. Итак, установим значени
border: none; ется щелчком кнопкой мыш же са-
ражения и сделаем то
none свойства border для изоб
}
енных ссылок. Мы используем
мое для посещенных и непосещ и
случае с изображением, так
одно и то же свойство как в в одн о.
ем объ единить пра вил а
со ссылками, в силу чего мож
Помните, что в CSS есть правило, которое убирает эффекты декорирования текста
и вместо этого использует границу для подчеркивания текста. В данном примере мы пе-
реопределяем это правило для ссылок в элементе ‹div› с идентификатором coupon и гово-
рим, что не хотим, чтобы для ссылок использовалась граница. Вернитесь назад и посмо-
трите на исходный CSS-код, если забыли, как выглядят остальные правила для ссылок.
546 глава 11
разметка и позиционирование
-90
пикселов
div id=“coupon”
дальше 547
тест-драйв
Ïîëîæèòåëüíûé òåñò
äëÿ îòðèöàòåëüíûõ çíà÷åíèé
Убедитесь, что задали отрицательное значение для
свойства left, сохраните изменения и обновите стра-
ницу. Разве это не симпатично? Поздравляем, вы толь-
ко что создали первый спецэффект в CSS. Джордж
Лукас, берегись!
льзование
по м ни те, что испо та,
Про ст о ания элемен
ро ва нн ог о позициониров ь
фикси ется част
под ним пряч ать
при котором можно назв
ог о ст ра ницы, вряд ли Л О .
содержим о ВЕСЕ
я по ль зо ва теля, но эт
удобным дл
ена
Впишите им
чтобы
селекторов,
S.
дополнить CS
div id=“header” div id=“navigation”
div id=“main” {
margin-top: 140px;
img id=“photo” p
margin-left: 20px;
width: 500px;
}
{
position: absolute;
top: 20px;
left: 550px;
width: 200px;
}
{
float: left;
}
{
position: absolute;
top: 20px;
left: 20px;
width: 500px;
height: 100px;
}
дальше 549
вопросы о позиционировании
часто
Задаваемые
вопросы
щем потоке, а затем смещая данный элемент согласно заданному
В: Фиксированное изображение купона — это, конечно, здо- вами значению.
рово, однако оно несколько раздражает. Есть ли другой способ
для его позиционирования таким образом, чтобы оно не пере- Вы также можете сочетать данные способы позиционирования друг
крывало содержимое, — например, в нижней части колонки с другом. Например, помните, как мы отмечали, что элементы с аб-
с меню напитков? солютным позиционированием располагаются относительно самого
близкого позиционированного родительского элемента? Вы можете
О: Конечно. Вы можете осуществить позиционирование изобра- осуществить абсолютное позиционирование одного <div> внутри
жения купона внизу колонки с меню напитков, прибегнув к отно- другого <div>, применив к внешнему <div> относительное пози-
сительному позиционированию. Мы не рассматривали данный ционирование (оставив его в потоке), а к внутреннему <div> — аб-
тип позиционирования по ходу книги, однако он схож с абсолютным солютное позиционирование, что позволит вам расположить элемент
позиционированием с тем исключением, что соответствующий эле- относительно родительского элемента <div>.
мент остается в потоке страницы (где он обычно и бывает), а затем
смещается согласно заданному вами значению. Вы можете смещать Таким образом, сущствует много способов позиционирования эле-
элементы, используя top, left, bottom или right, точно так ментов с применением CSS.
же, как и в случае с элементами с абсолютным позиционированием.
Допустим, вы захотели расположить изображение купона под меню
напитков в соответствующей колонке: вы переместите изображение
В: А можно, если потребуется, расположить элемент полно-
стью вне экрана?
купона таким образом, чтобы оно оказалось вложенным в <div>
с идентификатором drinks внизу, а затем зададите для свойства
position значение relative. После этого вы разместите
О: Да! Например, изображение купона имеет ширину 283 пиксела,
так что если вы зададите для левой позиции значение –283px, то
изображение купона именно там, где вам и требуется; вы могли бы
купон исчезнет из виду. Однако он по-прежнему останется на стра-
разместить его на 20 пикселов ниже <div> с идентификатором
нице; он просто не будет виден в окне просмотра. Помните, что окно
drinks, указав top: 20px, и на расстоянии 90 пикселов от левой
просмотра – это видимая область страницы.
стороны страницы посредством left: –90px (точно так же, как мы
это делали при фиксированном позиционировании).
В: А что, если мы захотим анимировать элементы, например,
В: Получается, позиционирование бывает четырех типов: для того, чтобы показать, как изображение купона выдвигается
статическое, абсолютное, фиксированное и относительное? на страницу из ее левой стороны? Это возможно при помощи
CSS?
О: Все верно. Статическое позиционирование – это то, что О:
будет применяться по умолчанию, если вы вообще не укажете тип Вообще-то да, и мы рады, что вы спросили об этом. Рассмотрение
позиционирования. В этом случае все будет заливаться на страницу CSS-анимации лежит вне рамок данной книги, однако отметим, что в
как обычно. При абсолютном позиционировании элемент пол- версии CSS3 появились возможности по базовой анимации элементов
ностью изымается из потока страницы, и вы сможете осуществить посредством трансформаций и переходов, что является захватыва-
его абсолютное позиционирование относительно самого близко- ющей новостью для таких фанатов веб-разработки, как мы. Данные
го позиционированного родительского элемента (которым будет возможности весьма ограниченны, но вы сможете создавать довольно
<html>, если только вы сами не зададите какой-то другой элемент); классные вещи посредством CSS-анимации. Если вам потребуется
при фиксированном позиционировании элемент размещается в нечто большее, чем позволяет сделать CSS, то в этом случае вам
определенной, фиксированной позиции относительно окна браузера; придется прибегнуть с JavaScript, а это уже совершенно другая тема.
относительное позиционирование обеспечивает размещение В приложении к данной книге мы привели краткое введение в CSS-
элемента относительно его элемента-контейнера, оставляя его в об- трансформации и переходы, чтобы разжечь у вас интерес.
550 глава 11
разметка и позиционирование
ÊËÞ×ÅÂÛÅ
ÌÎÌÅÍÒÛ
Браузеры размещают элементы на странице, исполь- Для свойства position может быть задано четыре
зуя поток. значения: static, absolute, fixed и relative.
Блочные элементы заливаются на страницу сверху Статическое позиционирование используется по умол-
вниз, с разрывами строки между ними. По умолчанию чанию. В этом случае элементы заливаются на страницу
каждый блочный элемент занимает всю ширину окна в общем потоке.
браузера. Абсолютное позиционирование позволяет поместить
Строчные элементы внутри блочных заливаются сле- элемент на странице там, где нужно. По умолчанию ме-
ва направо, сверху вниз. Если одной строки мало, то сторасположение абсолютно позиционированных эле-
браузер создает новую строку и растягивает блочный ментов вычисляется относительно границ страницы.
элемент в вертикальном направлении, чтобы вместить Если абсолютно позиционированный элемент вложен
все строчное содержимое. в другой позиционированный элемент, то его место-
Смежные верхнее и нижнее поля двух соседних эле- расположение вычисляется относительно родитель-
ментов в общем потоке страницы сворачиваются до ского элемента.
размера большего поля или до размера одного поля, Свойства top, right, bottom и left применяют-
если поля одинаковые. ся для определения месторасположения элементов
Плавающие элементы убираются из общего потока в абсолютном, фиксированном и относительном по-
и размещаются слева или справа. зиционировании.
Плавающие элементы располагаются поверх блочных Абсолютно позиционированные элементы можно рас-
элементов и не влияют на общий поток страницы. положить поверх других, используя свойство z-index.
Однако строчное содержимое учитывает границы Чем больше значение свойства z-index, тем ближе
плавающих элементов и обтекает их. к вам на экране расположен элемент (в верхнем слое).
Свойство clear используется для указания того, что Месторасположение фиксированно позиционирован-
слева или справа (или с обеих сторон) от блочного ного элемента всегда вычисляется относительно окна
элемента не может располагаться плавающий элемент. браузера и не меняется при использовании для про-
Блочный элемент с заданным для него свойством крутки страницы колесика мыши. Остальное содер-
clear будет смещаться вниз до тех пор, пока с той жимое страницы прокручивается под этим элементом.
стороны, которая указана в значении этого свойства, Относительно позиционированные элементы снача-
не будет ни одного плавающего элемента. ла заливаются на страницу в общем потоке, а затем
Для плавающего элемента вместо auto должно быть смещаются на указанное расстояние в заданном на-
задано конкретное значение свойства width. правлении, оставляя пустым то место, где они должны
были быть расположены.
В разметке с непостоянной шириной содержимое
страницы растягивается и сжимается, чтобы соответ- При использовании относительного позиционирова-
ствовать размерам окна браузера. ния свойства left, right, top и bottom указывают
смещение от месторасположения элемента, если он
В разметке с постоянной шириной область содержимо- залит в общем потоке.
го фиксирована, не растягивается и не сжимается при
изменении размеров окна браузера. Преимущество Табличное представление CSS позволяет распола-
этой разметки в том, что можно лучше контролировать гать элементы с использованием макета, подобного
дизайн, но ценой того, что ширина окна браузера будет табличному.
задействована не полностью. Для создания табличного представления CSS исполь-
В гибкой разметке ширина содержимого фиксирована, зуйте блочные элементы для таблицы, строк и ячеек.
но при изменении размеров окна браузера растягива- Обычно это элементы <div>.
ются и сжимаются поля. В такой разметке содержимое Использование табличного представления — это
обычно находится в центре страницы. Она имеет те же хорошая стратегия в том, что касается макетов для
преимущества, что и разметка с постоянной шириной, многоколоночных разметок, в которых требуются
но часто выглядит более привлекательно. столбцы с содержимым.
дальше 551
решение упражнений
h1
p
div
h2
Все блочные
p p
элементы
в файле h3
lounge.html p
p
заливаются p
сверху вниз,
h3
и между ними
p добавляется p
разрыв строки. p
h3
p
p
p
h2
отступ
Правое
поле
Левое
поле
граница
граница
Левый
Правый
Левая
Правая
дальше 553
решение упражнений
554 глава 11
разметка и позиционирование
div id=“main”
img id=“photo” p
#photo
_______________ {
float: left;
}
#header
_______________ {
position: absolute;
top: 20px;
left: 20px;
width: 500px;
height: 100px;
}
Данный CSS настолько прост, что вы, вероятно, сможете справиться с ним даже с закрытыми глазами,
ведь вы уже столько узнали о макетах из этой главы. Напишите CSS для позиционирования изображений
в верхнем колонтитуле. Вы уже знаете, что будете использовать float; заполните пробелы в приведенном
чуть ниже коде, указав правило, необходимое для позиционирования изображений в требуемых местах.
Вот наше решение.
#header img#headerSlogan {
______________________ Вы также могли бы исполь
зовать
right
float: ________; здесь #headerSlogan в качест
ве
} селектора, если бы пожела
ли.
дальше 555
решение упражнений
Это первая
и единственная
строка.
Современный HTML
Мы первые, кто перешел
на HTML5… продавец сказал
нам, что данная версия более
совершенная и отшлифованная,
чем HTML4.01
557
размышляем о html-структуре
Ïåðåñìîòð HTML-ñòðóêòóðû
Прежде чем мы займемся дальнейшим изучением разметки, давайте сделаем небольшое отступление…
мы много говорили о структуре, но действительно ли элементы <div> являются хорошей структурой?
Ведь браузер на самом деле не знает, что ваш <div id="footer"> – это нижний колонтитул, он знает
лишь, что это <div>, не так ли? Такое положение дел не кажется хорошим, да?
Значительная часть новой HTML5-разметки направлена на распознавание того, как люди структури-
руют свои страницы с использованием элементов <div>, и обеспечение HTML-кода, который более
специфичен и лучше подходит для определенных типов структуры. Видите ли, когда браузер (или по-
исковые механизмы или экранные дикторы) сталкивается с id="navigation" в коде вашей страницы,
он понятия не имеет, что ваш <div> относится к навигации. Для него это то же самое, что элемент
с id="goobledygoop".
Комитет стандартов взглянул на то, как используются элементы <div>, — для верхних колонтитулов,
навигации, нижних колонтитулов, выделения определенных частей текста и так далее, — и добавил
новые элементы для представления этих вещей. Это означает, что мы можем немного переделать свои
страницы с использованием HTML5 и заменить наши <div> на элементы, более конкретно идентифи-
цирующие тип содержимого, которое в них располагается.
558 глава 12
html5-разметка
Мы, конечно же, могли бы просто рассказать вам о новых HTML5-элементах, однако не будет
ли интереснее, если вы сами в них разберетесь? Ниже слева приведены новые элементы
(не все из них являются новыми, однако они имеют несколько более важное значение, чем
другие); подберите для каждого из этих элементов соответствующее ему описание из тех,
что приведены справа:
дальше 559
проверяем разметку
Мы определенно мо-
жем считать этот
элемент областью
Это <div> основного содержи-
с иденти- мого страницы либо,
фикатором следует сказать,
drinks для основным разделом.
этой левой
колонки.
Это <div> с иден-
тификатором
Все это содер- sidebar для правой
жимое является колонки.
взаимосвязанным;
есть ли более оп-
Очень похоже, что
тимальный способ
это второстепен-
его группировки?
ное содержимое;
можно ли разме-
стить его в эле-
Область основного менте <aside> в коде
содержимого фак- страницы?
тически состоит
из статей о раз-
личных аспектах
Примечание: из при-
Starbuzz.
мера для данной главы
Это <div> с идентификатором footer мы убрали изображе-
для нижнего колонтитула. Здесь все ния награды и купо-
вполне очевидно, поскольку в нашем рас- на, чтобы сосредо-
поряжении имеется элемент <footer>. точиться на общей
структуре.
560 глава 12
html5-разметка
<div id=“header”>
<div id=“footer”>
дальше 561
решение упражнения
<header>
<footer>
562 глава 12
html5-разметка
дальше 563
тест-драйв
Òåñòèðîâàíèå îáíîâëåííîé
HTML-ðàçìåòêè Starbuzz
Нам предстоит еще кое-что модифицировать,
но не кажется ли вам, что ваша HTML-размет-
ка стала в какой-то степени новее, чище и со-
временнее? Проведите тест, загрузив страницу
Starbuzz в своем браузере.
О-о-о… похоже,
все оказалось
не так хорошо.
В чем же дело?
Вы все убеждали меня
в преимуществах HTML5.
Однако теперь страница
Starbuzz выглядит не так
хорошо.
564 глава 12
html5-разметка
Устаревшие браузеры
не поддер-
Будьте живают новые HTML
которые вы будете ис
5-элементы,
осторожны! в данной главе.
пользовать
Эл ем ен ты , пр им ен
в данной главе, явля яе мы е на ми
ются нововведениями
обладают хорошей в HTML5 и не
поддержкой со стор
браузеров (таких, ка оны устаревших
к Internet Explorer ве
Safari версии 3 и ни рсии 8 и ниже,
же и т. д.). Если ва
что ваши веб-страниц с беспокоит то,
ы, возможно, будут пр
пользователи, у кото осматривать
рых все еще установл
шие браузеры, то не ены устарев-
применяйте эти но
вообще. Мобильные вые элементы
браузеры смартф он
Android и iPhone, подд ов, например
ерживают новые HT
так что если вашей ML5-элементы,
целевой аудиторией
ные пользователи, то будут мобиль-
можете смело примен
элементы! ять данные
По адресу http://caniu
se.com/#search=new%2
сможете узнать свеж 0elements вы
ие новости относите
ки браузерами элемен льно поддерж-
тов, используемых в
данной главе.
дальше 565
обновляем новые элементы
Òåñò №2 о
Так намного
лучше!
Итак, это все, что нам требовалось сделать; давайте проведем
еще один тест, и на этот раз вы должны увидеть, как страница
снова будет отображаться нормально. Более того, она должна
будет выглядеть точно так же, как и до того, как мы добавили
HTML5-разметку.
566 глава 12
html5-разметка
Какой смысл в добавлении новой HTML5-разметки, если это не оказывает влияния на страницу
в визуальном плане?
HTML5 HTML4.01
Ах, мой старый друг, HTML4.01. Ты пользо-
вался успехом, но это уже в прошлом, а теперь Это уже в прошлом? Посмотри на Интернет,
пришел я. там по-прежнему море HTML4.01.
Я нахожусь лишь в начале своего пути. Да? А как дела у тех новых элементов? Что-то
я не видел, чтобы многие из них применялись.
дальше 567
обсуждаем версии html
HTML5 HTML4.01
Да, все это можно сделать с использованием <div>, но
если задействовать, например, элемент <article>, то
браузеры, поисковые механизмы, экранные дикторы и
твои поклонники среди веб-разработчиков будут точно
знать, что это статья. И что? Все будет выглядеть так же.
жно ли
спустились – мо
т ка дл я ре да кт ора: они совсем ра бе се ды?
Заме ь окончани е
568 глава 12 ве рн ут ьс я на за д, чтобы изменит
как-то
html5-разметка
Возьми в руку карандаш
Вы уже заменили элементы <div> с идентификаторами header,
footer и sidebar на элементы <header>, <footer> и <aside>.
Теперь вам нужно заменить элементы <div> с идентификаторами
drinks и main на элементы <section>, а также обновить свой CSS.
Все остальные элементы <div> табличного представления пока
HTML без элемента оставьте на месте, поскольку они все еще нужны нам для сохранения
корректности макета страницы.
<section>.
Откорректируйте приведенный
<div id="tableContainer"> чуть ниже HTML- и CSS-код,
<div id="tableRow"> добавив элемент <section>.
<div id="drinks">
...
</div>
<div id="main">
...
</div>
<aside>
...
</aside>
</div> <!-- tableRow -->
</div> <!-- tableContainer -->
#drinks {
display: table-cell;
background-color: #efe5d0;
width: 20%;
padding: 15px;
vertical-align: top;
}
#main {
display: table-cell;
background: #efe5d0
url(images/background.gif) top left;
font-size: 105%;
Буду т ли вам
padding: 15px; все еще ну жны
тифик аторы дл иден-
vertical-align: top; я данных разд
Ес ли да, то по елов?
}
чему?
дальше 569
решение упражнения
Обновленный CSS
для двух разделов.
section#drinks {
Мы могли бы остави
display: table-cell; ть CSS без А вот и наша стра-
изменений! Посколь
background-color: #efe5d0; ку мы используем ница! Она выглядит
идентификаторы,
width: 20%; сущ ествующие в точности, как
правила были бы на
padding: 15px; целены на все те и прежде, но раз-
же два элемента.
vertical-align: top; Мы добавили имя ве вам не полегчало
тега перед селект
} ором иденти- от осознания того,
фикатора просто
для того, чтобы что вы задейство-
было ясно, что мы
section#main { используем здесь вали новые HTML5-
элементы <section
display: table-cell; >. элементы к месту?
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
vertical-align: top;
}
570 глава 12
html5-разметка
Теперь в области
основного содер-
жимого несколько
блог-постов.
Остальная часть
страницы оста-
лась прежней
дальше 571
выбираем элементы для блога
Ваша задача заключается в том, чтобы выбрать элементы, которые, по вашему мнению,
наилучшим образом подойдут для нового блога. Заполните пробелы в приведенной
чуть ниже диаграмме, чтобы показать, какие элементы вы выбрали. Обратите внима-
ние на то, что каждый блог-пост будет иметь заголовок и минимум один абзац текста.
Выберите свои элементы из приведенного ниже списка:
<header> <aside>
<footer> <section>
<article> <div>
<nav> <h1>
<time> <p>
Новая блог-страница.
Она аналогична домашней
странице, за исключением тог
о, <header>
что средняя секция теперь со-
держит блог-посты, а навига-
ционное меню располагается
<__________>
под верхним колонтитулом.
<section <______________> <aside>
id=“drinks”> <___________>
<___________>
<___________>
<___________>
<___________>
<___________>
<___________>
<___________>
<___________>
<footer>
572 глава 12
html5-разметка
Ваша задача заключается в том, чтобы выбрать элементы, которые, по вашему мнению,
наилучшим образом подойдут для нового блога. Заполните пробелы в приведенной
чуть ниже диаграмме, чтобы показать, какие элементы вы выбрали. Обратите внима-
ние на то, что каждый блог-пост будет иметь заголовок и минимум один абзац текста.
Выберите свои элементы из приведенного ниже списка:
<header> <aside>
<footer> <section>
Новая блог-страница. Она
ана- <article> <div>
логична домашней странице,
<nav> <h1>
за исключением того, что
сред- <time> <p>
няя секция теперь содержит
блог-посты, а навигационно
е
меню располагается под вер
х-
ним колонтитулом. <header>
Мы использовали <nav>
элемент <nav> для
навигационного меню. <section <section id= “blog”> <aside>
id=“drinks”> <article>
Мы разместили элемент
<h1>
страницы <section> с иден-
тификатором blog в другом <p>
элементе <section>, посколь-
ку <section> используется для <article>
группировки взаимосвязанно <h1>
го
содержимого.
<p>
Мы поместили каждый
блог-пост в его собственный <article>
элемент <article>, поскольку <h1>
каждый блог-пост – это обо-
собленный элемент (то есть <p>
одни элементы <article> можно
было бы убрать и это никак
бы не сказалось на удобочи-
<footer>
таемости других оставшихся
элементов <article>).
дальше 573
используем элемент article
574 глава 12
html5-разметка
Мы пока не добавили CSS, чтобы нацелиться на наш новый элемент <section> с идентификато-
ром blog, так что давайте сделаем это. Мы знаем, что нам необходимо, чтобы данный элемент был
оформлен точно так же, как и элемент <section> с идентификатором main на домашней странице,
поэтому мы можем просто повторно использовать аналогичное правило, добавив его для <section>
с идентификатором blog в уже существующее правило для <section> с идентификатором main
следующим образом:
о и то же правило
Мы можем использовать одн
> путем приме-
для обоих элементов <section
раз дел енных запятой.
нения двух селекторов,
нит ь эти все эти
Здесь говорится: «приме
section#main, section#blog { ным элементам».
свойства к обоим выбран
display: table-cell;
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
Несмотря на то что два эле
padding: 15px; мента – <section> с иден-
тификатором main и <sec
vertical-align: top; tion > с идентификатором
blog – располагаются на дву
х разных страницах, это
} сработает, поскольку в код
е обеих страниц указана
ссылка на один и тот же CSS
-файл.
Вот и всё! Все другие стили оформления, необходимые нам в случае с элементом страницы <section>
с идентификатором blog, уже в CSS, а для <article> мы не станем менять оформление. Так что
пришло время для…
дальше 575
тест-драйв
Òåñòèðîâàíèå
áëîã-ñòðàíèöû
Создав новую блог-страницу и внеся неболь-
шие корректировки в страницу (то есть до-
бавив элементы <section> и <article>),
давайте сохраним изменения в странице
и загрузим ее в браузере
Да, здесь можно запутаться. Мы сразу скажем вам, что абсолютно четкого
ответа на данный вопрос нет; более того, существует множество способов
использования <article> и <section>. Однако в общих чертах к ним
следует подходить так: используйте <section> для группировки взаимо-
связанного содержимого, а <article> — для заключения обособленной
части содержимого вроде новостной статьи, блог-поста или краткого отчета.
В каждой колонке на странице Starbuzz располагается взаимосвязанное
содержимое, поэтому мы трактовали каждую из них как раздел страни-
цы. Мы также взяли отдельные блог-посты и поместили их в элементы
<article>, поскольку они являются обособленными (вы даже можете
задуматься о том, чтобы взять один из этих блог-постов и опубликовать
его на другом сайте или блоге).
Всякое бывает, но в большинстве случаев вам следует придерживаться ис-
пользования <section> для группировки взаимосвязанного содержимого,
а для размещения обособленного содержимого применяйте <article>.
Если же вам потребуется сгруппировать содержимое, которое не кажется
взаимосвязанным, то вы всегда можете прибегнуть к <div>.
576 глава 12
html5-разметка
<time datetime="2012-02-18">2/18/2012</time>
Это официальный Вы можете указать лишь год
интернет-формат для 2012-02 и месяц или даже только год.
х
указания дат, включающи
день, месяц и год . 2012
дальше 577
тест-драйв
Òåñòèðîâàíèå áëîãà
Снова протестируйте блог, и вы должны
увидеть, что под заголовком каждого
из блог-постов отображается дата его
размещения.
578 глава 12
html5-разметка
дальше 579
внедряем элементы header
<article>
<header>
<h1>Starbuzz использует компьютерные науки</h1>
<time datetime="2012-03-10">3/10/2012</time>
</header>
<p>...</p> Убедитесь, что вы добавили <hea
der>
</article> в каждый из элементов <article>
в <section> с идентификатором
<article> blog.
<header>
<h1>Самый уникальный постоянный клиент месяца</h1>
<time datetime="2012-02-18">2/18/2012</time>
</header>
<p>...</p>
</article>
</section>
...
Можете также смело добавить строку с указанием имени автора в верхний колонтитул. Хмм, элемент
<author> отсутствует. Есть идеи, как можно разметить строку с указанием имени автора?
580 глава 12
html5-разметка
ой CSS и про-
гляните на св
Подсказка: вз е другие пра-
т е, ес т ь ли там любы ь
ве рь могут влият
дл я <h ea de r>, которые
вила улы статей,
ние колонтит
на новые верх бавили.
олько что до
которые вы т
дальше 581
закрепляем элементы header
header {
background-color: #675c47;
margin: 10px 10px 0px 10px;
height: 108px;
}
Свойство height в правиле для <header>
приводит к тому, что задание цвета
фона и добавление пробелов осуществля-
ется в случае со ВСЕМИ верхними ко-
лонтитулами на странице, а не только
в случае с основным верхним колонтиту-
лом. И margin здесь не помогает.
Правило для оформления верхнего
Мы можем исправить это, создав класс исключительно для <header>
колонтитула отлично работа-
в самом верху страницы. У нас может иметься несколько элементов
ет в случае с основным верхним
<header> в элементах <section> и <article> на всем сайте,
а в нашем случае со страницей кафе Starbuzz элемент <header>, рас- колонтитулом, однако верхние
полагающийся наверху, всегда будет обрабатываться иначе, нежели колонтитулы статей выглядят
прочие верхние колонтитулы, в силу своего особого графического ужасно из-за этого правила.
оформления. Поэтому найдите самый верхний элемент <header>
в своем файле blog.html и добавьте в него класс с именем top:
элемент
Добавьте класс top в первый
<header> в коде страницы.
<body>
<header class="top">
<img id="headerLogo"
src="images/headerLogo.gif" alt="Изображение логотипа кафе Starbuzz для
верхнего колонтитула">
<img id="headerSlogan"
src="images/headerSlogan.gif" alt="Изображение слогана кафе Starbuzz для
верхнего колонтитула">
</header>
...
582 глава 12
html5-разметка
После того как вы добавите класс top в файлы index.html и blog.html, вам
останется лишь обновить свой CSS с целью задействовать данный класс в селекторе
в правилах для <header>:
.top
Мы добавили селектор класса
<he ade r> в CSS .
header.top { в правило для
background-color: #675c47;
margin: 10px 10px 0px 10px;
height: 108px;
}
Мы также добавили вот это в данное правило:
header.top img#headerSlogan { несмотря на то что для корректной работы
float: right;
данный селектор нам не требуется, он более ясно
}
дает понять в CSS, какой именно headerSlogan
мы выбираем. Таков оптимальный подход.
дальше 583
В: Мы проделали массу работы, что- в такой степени, как <div>. Например, если мента <section> — это группа взаимос-
бы добавить элементы в страницу, но вы просто добавляете элемент, чтобы сти- вязанного содержимого на вашей странице,
она выглядит в точности, как и прежде! лизовать страницу, то используйте <div>. поэтому обычно у него бывает какой-либо
Скажите еще раз, что же все это мне дает? Если вы добавляете элемент для разметки верхний колонтитул для отделения и пред-
содержимого, образующего четко определен- ставления данного раздела содержимого.
О: Мы заменили ряд элементов и вне- ный раздел взаимосвязанного содержимого,
дрили несколько новых, добавив при этом то используйте <section>. Если же у вас В: Следует ли использовать <header>
массу значения в ваши страницы. Браузеры, имеется содержимое, которое может повтор- только в тех ситуациях, когда у нас име-
поисковые механизмы и приложения для но использоваться или распространяться ется более одной вещи, которую мы хо-
создания веб-страниц смогут более толково независимо от остального содержимого стра- тим поместить в него? Что, если у нас
подходить к обработке разных частей вашей ницы, то используйте <article>, будет только один заголовок и больше
веб-страницы. Код вашей страницы стал ничего?
более удобочитаем как для вас, так и для В: Должен ли у каждого элемента
других веб-разработчиков. Хотя ваша стра- <section> и <article> всегда быть <header>? О: Вы можете использовать <header>
ница внешне выглядит, как и прежде, внутри даже в том случае, если у вас имеется
она стала намного выразительнее. О: В большинстве случаев у ваших эле- только один заголовок для размещения в
ментов <section> и <article> будет нем. Элемент <header> обеспечивает
В: В чем разница между <section> <header> или, по крайней мере, заголо- дополнительное семантическое значение,
и <article>? Мне они кажутся одинаковыми. вок (такой, как <h1>). Cледует рассуждать отделяющее верхний колонтитул страницы,
так: содержимое элемента <article> раздел или статью от остального содержи-
О: Можно легко запутаться в том, какой из может быть повторно использовано где-то мого. Однако вам не обязательно всегда
этих элементов следует применять в кон- еще, поэтому, скорее всего, данному со- размещать содержимое заголовка в элемен-
кретной ситуации, поэтому мы рады, что вы держимому потребуется верхний колон- те <header> (то есть страница пройдет
спросили. Элемент <section> является титул в описательных или вводных целях. валидацию, даже если вы не станете раз-
более общим, чем <article>, однако не Аналогичным образом, содержимое эле- мещать его там).
Head First: Привет, <div>, мы слышали, ты за последнее <div>: Это правда, и я не видел каких-либо новых элементов,
время совсем приуныл. В чем дело? которые служили бы просто для создания общей структуры.
<div>: На случай, если вы не заметили, скажу, что ко мне стали Head First: Верно! Все эти новые элементы специально
относиться как к лишнему элементу! Меня везде заменяют на предназначены для добавления семантического значения
эти новые элементы <section>, <nav>, <aside>… в страницы, а ты намного более универсален. Ты являешь-
Head First: Эй, но ведь тебя по-прежнему можно наблюдать в ся тем, к чему все прибегают, когда требуется, например,
коде страницы Starbuzz, где у тебя имеются идентификаторы табличный макет.
tableContainer и tableRow. <div>: Это действительно так!
<div>: От меня пока еще не полностью избавились, но если Head First: Мы считаем, что ты был перегружен работой до
люди продолжать изобретать новые элементы, то пройдет появления этих новых элементов… не пора ли тебе начать
не много времени, как моя игра будет окончена. наслаждаться тем, что твоя рабочая нагрузка снизилась?
Head First: Последний раз, когда я заглядывал в HTML-специ- <div>: Знаете, вы сделали дельное замечание. Возможно, мне
фикацию, ты по-прежнему был там. У веб-разработчиков стоило бы «прикрыть лавочку» на какое-то время и повидать
возникают всевозможные особые ситуации, когда требуется мир; в конце концов, я уже намотал много миль, постоянно
добавить структуру в их страницы, а ребята, занимающиеся «летая» по Интернету.
стандартами, не заинтересованы в изобретении огромного Head First: Постой, ты не можешь просто исчезнуть; боль-
количества новых элементов. шинство веб-страниц полагается на тебя… Ты где? <div>?
584 глава 12
html5-разметка
<a href="index.html">ДОМОЙ</a>
<a href="blog.html">БЛОГ</a>
<a href="">ИЗОБРЕТЕНИЯ</a>
<a href="">РЕЦЕПТЫ</a>
<a href="">АДРЕСА</a>
дальше 585
добавляем навигацию
Îáåñïå÷åíèå íàâèãàöèè
Теперь поместите код для обеспечения навигации прямо в свой HTML. Вставьте его непосредственно
под верхним колонтитулом в файле blog.html:
<body>
<header class="top">
<img id="headerLogo"
src="images/headerLogo.gif" alt="Изображение логотипа кафе Starbuzz для
верхнего колонтитула">
<img id="headerSlogan"
src="images/headerSlogan.gif" alt="Обеспечиваем вас необходимым количеством
кофеина...">
</header>
<ul>
<li><a href="index.html">ДОМОЙ</a></li>
<li class="selected"><a href="blog.html">БЛОГ</a></li>
<li><a href="">ИЗОБРЕТЕНИЯ</a></li>
<li><a href="">РЕЦЕПТЫ</a></li>
<li><a href="">АДРЕСА</a></li>
что вы
Убедитесь,
</ul>
... ый CSS
</body> добавили данн
оего
в КОНЕЦ св
zz.css.
Äîáàâëåíèå CSS äëÿ íàâèãàöèîííûõ ýëåìåíòîâ файла star bu
<nav>
<ul>
<li><a href="index.html">ДОМОЙ</a></li>
<li class="selected"><a href="blog.html">БЛОГ</a></li>
<li><a href="">ИЗОБРЕТЕНИЯ</a></li>
<li><a href="">РЕЦЕПТЫ</a></li>
<li><a href="">АДРЕСА</a></li>
</ul>
</nav>
дальше 587
элементы навигационного списка
Прежде чем
мы продолжим заниматься
тестированием дальше, нам
крайне необходимо поговорить
о вашем CSS.
588 глава 12
html5-разметка
Îáà-íà! Ïîñìîòðèòå-êà
íà ýòó íàâèãàöèþ!
Внесите описанные чуть выше изменения в CSS
и проведите тест. Неплохо, да? Теперь мы можем
быть уверены в том, что все элементы <ul>, кото-
рые будут добавляться в будущем, не станут подвер-
гаться воздействию со стороны CSS для навигаци-
онных элементов. Помните, что для оформления
элементов следует по возможности добавлять наи-
более конкретизированное правило.
дальше 589
добавляем видео в блог
Генеральный директор
Starbuzz хочет разместить
видео прямо на странице, как
показано здесь…
590 глава 12
html5-разметка
дальше 591
добавляем элемент video в блог
</article>
Мы разместим видео прямо здесь,
под абзацем в блог-элементе.
592 глава 12
html5-разметка
има-
Вы обратили вн
воспроизве-
ние на то, что
оматически
дение видео авт
завершении
запустилось по
цы? Это
загрузки страни
ы задали
потому, что м
ay. Удалите
атрибут autopl
телю при-
его, и пользова
ь на кнопке
дется щелкнут
изведения,
запуска воспро
реть видео.
чтобы просмот
Неплохой результат для всего лишь пары строк разметки, не так ли? Но не стоит слишком расслаблять-
ся (особенно если вы так и не смогли увидеть видео); вам предстоит еще многое узнать об элементе
<video>. Давайте приступим к его изучению…
дальше 593
проблемы с форматами видео
594 глава 12
html5-разметка
о
Следует отметить, чт
Êàê ðàáîòàåò ýëåìåíò video? атрибуты con tro ls и aut opl ay
я от дру гих
ного отличаютс
Итак, на данный момент вы все устроили, и у вас на странице вос- нем дов о-
ов, которые вам
производится видео, однако прежде чем мы пойдем дальше, давайте атрибут . Эт о
взглянем на элемент <video> и его атрибуты: дилось видеть до сих пор
риб ут ы, у кото-
логические ат
Если атриб ут contro ls присут - Так , нап ри-
рых нет значений.
этому про- ls
ствует, то благодаря мер, если атрибут contro
игрыватель предоставит пользо- присутствует, то элемен
ты
вателю элементы управления для ео буд ут от о-
управления вид
контроля над воспро изведе нием чае от сут -
бражаться. А в слу
а они
видео и аудио. ствия данного атрибут
.
Благодаря атрибуту autopla y воспро- отображаться не будут
изведение видео будет запуск аться
<video controls
по завершении загрузки страницы.
autoplay
Ширина и высота видео на странице.
width="512" height="288"
src="video/tweetsip.mp4" Исходное местоположение видео.
poster="images/poster.png"
id="video">
Если хотите, то вы можете преду-
</video>
смотреть постерное изображение,
которое будет отображаться, когда
И конечно же, мы также можем добавить
видео не воспроизводится.
идентификатор для элемента на случай,
если решим применить стиль оформления.
дальше 595
обзор атрибутов video
596 глава 12
html5-разметка
Я провела проверку в
разных браузерах, и в каждом из них
элементы управления выглядят не так,
как в остальных. Хотя при использовании
решений вроде Flash в их внешнем
виде по крайней мере наблюдалась
согласованность.
дальше 597
обзор видеоформатов
Êîíêóðèðóþùèå âèäåîôîðìàòû
Реальность такова, что если вы собираетесь поставлять содержимое для широкого спектра поль-
зователей, то вам придется предусмотреть наличие видеофайлов в более чем одном формате.
С другой стороны, если вы нацеливаетесь, например, только на пользователей Apple iPad, то вам,
возможно, удастся обойтись видео лишь в одном формате. В настоящее время существует три
основных претендента, — давайте взглянем на них:
дальше 599
поддержка видеоформатов
ДО
СЬ
Е:
ВИ
ДЕ
О
СОВЕРШЕННО СЕКРЕТНО
СИЯ:
ВАША МИС Д ДЕРЖКИ ВИДЕ
О
ОВЕНЬ ПО
ДДЕРЖ-
ПО У Р
РАЗВЕДКА ТЕК У Щ ИЙ ДАЦИЯ:
ХХХХХХХ (РЕКОМЕН
ЛИТЬ ХХХ ЕДЕ БР А УЗ Е Р ОВ
ВОПРО-
Ч А ЕТСЯ ОПР Д Е Н НЫХ НИЖЕ Ю П О ДАННОМУ
ВАМ ПО Р У
АЖДОМ ИЗ
ПР И ВЕ ФОР МА Ц И ХХХХХХ,
В К К Т У А ЛЬНУЮ ИН Х ХХ ХХХХХХХХ
КИ ВИ Д Е О СКАТ Ь А VID E O , ЙШИЕ
С М ОЖЕТЕ ОТЫ /W I K I/HTML5_ Й Т ЕС Ь НА НОВЕ
ЗДЕСЬ ВЫ DIA. OR G ЕНТ И РУ РАУЗЕР/
/ / E N.WIKIPE V I D E O). ОРИ Е Н Н ОМУ В «Б
СУ: H T T P : SEA RC H = ПР И В ЕД ВОЗВРА-
// C A N I USE.COM/# Ж ДО М У Б РАУЗЕРУ, Д Д Е РЖ И В АЕТ. ПО
HTTP: . ПО КА П О
РАУЗЕРОВ ТОРЫЕ ОН АНИЯ!
ВЕРСИИ Б ВИД ЕО О ПЦИИ, КО ЕНИ Я НО ВОГО ЗАД
ОТМ ЕТЬТЕ Я П О ЛУ Ч
ВИДЕО», ОТЧЕТ ДЛ ных сист
ем
И П Р ЕД О СТАВЬТЕ о перацион
ЩЕНИ равл е н и е м
ва под уп
Устройст и прочих).
Explorer
roid (сред
Explorer
n d
Explorer
iO S и A
и выше
Internet ли
ebKit
и
версии 7
версии 8
Internet
Браузер
версии 9
Internet
Mobile W
ниже
Firefox
Opera
Chrome
Safari
Видео
H.264
WebM
Ogg
Theora
600 глава 12
html5-разметка
ме-
В случае с каждым <source> браузер загружает
чтоб ы прове рить , смож ет
таданные видеофайла,
ться
ли он его воспроизвести (все это может оказа
о облег -
длительным процессом, однако его можн
.
ÊËÞ×ÅÂÛÅ чить для браузера… см. следующую страницу)
ÌÎÌÅÍÒÛ
дальше 601
подробнее о видеоформатах
602 глава 12
html5-разметка
Îáíîâëåíèå è òåñòèðîâàíèå
Обновите элементы <source>, как показано чуть ниже, и протестируйте свою страницу:
Ваше видео, скорее всего, будет воспроизводиться, как и раньше, однако теперь вы будете знать, что «за
кадром» помогаете браузеру, снабжая его дополнительной информацией о типах и кодеках. Больше ин-
формации о разнообразных опциях для параметров type для использования в вашем элементе <source>
вы сможете найти по адресу http://wiki.whatwg.org/wiki/Video_type_parameters.
В:Есть ли надежда, что в ближайшие несколько лет специалисты будут со всем В: Могу ли я воспроизводить свое видео
несколько лет мы придем к единому кон- этим разбираться. Принимайте во внима- в полноэкранном режиме? Удивительно,
тейнерному формату или типу кодека? ние потребности своей целевой аудитории и что в соответствующем API-интерфейсе
Разве на это не указывает наличие у нас обеспечивайте соответствующую поддержку. нет свойства для этого.
стандартов?
В: С чего мне начать, если я захочу за- О: Данная функциональность еще не была
О: В ближайшее время не появится формат, няться кодированием своего видео? стандартизирована, однако если поискать в
который станет господствующим над всеми Интернете, то можно найти способы воспро-
остальными, – данная тема пересекается с О: Вы можете начать с несложных про- изводить полноэкранное видео при помощи
целой массой сложностей, начиная с жела- грамм вроде iMovie или Adobe Premiere некоторых браузеров. Часть браузеров преду-
ния компаний контролировать свою судьбу Elements, которые позволят кодировать сматривают наличие элемента управления
в сфере видео и заканчивая проблемами с видео для последующего размещения в для проигрывания видео в полноэкранном
интеллектуальной собственностью. Комитет Интернете. Если вы собираетесь заняться режиме (например, на планшетных компьюте-
по стандартам HTML5 осознал это и решил не серьезной обработкой видео, то исполь- рах), который наделяет данной возможностью
определять формат видео в спецификации зуйте программы Final Cut Pro или Adobe элемент <video>. Следует отметить, что после
HTML5. Несмотря на то что HTML5 поддер- Premiere, в которых имеются встроенные того, как вы найдете способ воспроизводить
живает все эти форматы, разработчикам производственные инструменты. Если вы видео в полноэкранном режиме, дальнейшие
браузеров решать, что они будут, а что не хотите осуществлять доставку свого видео действия с ним могут оказаться ограниченны-
будут поддерживать. посредством сети Content Delivery Network ми по соображениям безопасности (подобно
Если видео имеет для вас важное значе- (CDN), то знайте, что многие CDN-компании тому, как это бывает в случае с видеоплаги-
ние, следите за этой темой, в ближайшие также предлагают услуги по кодированию. нами в настоящее время).
дальше 603
резервируем flash-видео
Нет проблем.
Существует ряд методик для переключения на другой
проигрыватель видео, если тот, что вы предпочитаете
(будь то проигрыватель видео HTML5 или Flash или
какого-то другого), не поддерживается.
Внизу вы найдете пример того, как можно вставить
свое Flash-видео в качестве резервного содержимого,
заменяющего HTML5-видео в ситуациях, когда браузер
«не знает», как воспроизвести HTML5-видео. Ясно, что
данная область быстро меняется, поэтому заглядывайте
в Интернет (в котором размещается намного более
свежая информация, чем та, что приводится в книгах),
чтобы быть в курсе и использовать новейшие и наи-
лучшие методики. Вы также сможете найти способы
сделать резервным не Flash-видео, а HTML5-видео, если
в очередности вы предпочитаете отдавать приоритет
Flash-видео.
<video poster="video.jpg" controls>
<source src="video.mp4">
<source src="video.webm">
<source src="video.ogv">
<object>...</object>
</video>
604 глава 12
html5-разметка
Вы поверите, ес
ли мы скажем, чт
вы лишь начали о на самом деле
изучать тему ви
есть: разметка – део? Все так и
это лишь первый
HTML5, вы такж шаг. Используя
е сможете созд
тивные веб-стра авать интерак-
ницы с видео с
JavaScript. применением
Однако все это
лежит далеко за
ной книги (в пр рамками дан-
отивном случае
бы таск ать с со вам пришлось
бой книгу объе
ниц), поэтому, за мом 1400 стра
кончив читать -
ее, переходите
к книге «Head
Fi rs t H TM L5 P
ro gr am m inng
g»»
(« И зу ча ем пр ог
ра м м ир ов
ваа--
ние на HTML5»)
(написанно ой
й,,
конечно же, ваш
ими самыми
любимыми авто
рами Head
First), которая по
зволит вам
выйти на следую
щий уровень
в своем обучении
.
дальше 605
тестируем новые элементы
606 глава 12
html5-разметка
ÊËÞ×ÅÂÛÅ
ÌÎÌÅÍÒÛ
дальше 607
решение упражнений
решение
Мы, конечно же, могли бы просто рассказать вам о новых HTML5-элементах, однако не
будет ли интереснее, если вы сами в них разберетесь? Чуть ниже слева приведены новые
элементы (не все из них являются новыми, однако они имеют несколько более важное
значение, чем другие); подберите для каждого из этих элементов соответствующее ему
описание из тех, что приведены справа:
608 глава 12
html5-разметка
ДО
СЬ
Е:
ВИ
ДЕ
О
СОВЕРШЕННО СЕКРЕТНО
РЕШЕНИЕ
СИЯ:
ВАША МИС Д ДЕ Р ЖКИ ВИДЕ
О
В ЕНЬ ПОДД
ЕРЖ-
ПО УРО
РАЗВЕДКА КУЩ ИЙ АЦИЯ:
ХХХХХХХХХХ ТЕ ЕРОВ (РЕКОМЕНД
ЕДЕЛИТЬ
ПР Е БРАУЗ У ВОПРО-
Ж М
ЧАЕТСЯ О ЕННЫХ НИ ПО ДАННО
ВАМ ПОРУ АЖ ДО М ИЗ ПРИВЕД ЬН У Ю И НФОРМАЦИЮ Х ХХХХХХХХХХХХХ
,
Е О В К АК ТУ А Л EO , ХХ Х ШИЕ
КИ ВИД ОТЫСКАТЬ TML5_VID А НОВЕЙ
СМОЖЕТЕ G/WIKI/H ЙТЕСЬ Н ЕР/
ЗДЕСЬ ВЫ EN . WIKIP E DI A.OR
E O ). ОР ИЕН ТИ Р У
Н ОМ У В « БРА УЗ
P :/ / H =V ID ПРИВ Е ДЕ Н ОЗВРА-
СУ: HTT U S E.COM/#S
EARC
Б Р АУЗЕРУ, В АЕТ. ПО В
/C A N I ДО МУ ОД ДЕ РЖ И
HTTP:/ . ПО КАЖ РЫЕ ОН П НИЯ!
РАУЗЕРОВ ИИ, КОТО ОГО ЗАДА
ВЕРСИИ Б Т ЬТ Е ВИ ДЕ ООПЦ
Л У Ч Е Н ИЯ НО В
ОТМЕ ПО
ВИДЕО», ТЧЕТ ДЛЯ х систем
П Р ЕД О СТАВЬТЕ О п е рационны
ЩЕНИИ и е м о
р авлен
ва под уп
Устройст прочих).
Explorer
id (среди
Explorer
n d ro
Explorer
iOS и A
и выше
Internet ли
ebKit
и
версии 7
версии 8
Internet
Браузер
версии 9
Internet
Mobile W
ниже
Firefox
Opera
Chrome
Safari
Видео но iOS
ич
аст
H.264 ч
oid
ndr
A
WebM
Ogg
Theora
дальше 609
13 таблицы и большие списки
Представление
в табличной форме
Если данные лучше оформить в виде таблицы... Пришло время научиться работать
с устрашающими табличными данными. Каждый раз, когда вам нужно создать страницу,
на которой выводится список документов вашей компании за последний год или пере-
чень вашей коллекции виниловых фигурок анимационных персонажей (не беспокойтесь,
мы никому не расскажем об этом), вы знаете, что нужно использовать HTML. Но как?
Мы готовы заключить с вами соглашение: выполняйте все наши инструкции — и за одну
главу вы узнаете все секреты, позволяющие поместить данные прямо в HTML-таблицы.
Но есть кое-что еще: с каждой инструкцией мы будем представлять вам информацию из
нашего эксклюзивного руководства по стилизации HTML-таблиц. Если вы начнете прямо
сейчас, то в качестве специального бонуса мы представим вам руководство по оформ-
лению HTML-списков. Не сомневайтесь, соглашайтесь прямо сейчас!
611
кое-что новое от тони
придорож-
ных кафе
Население
Темпера-
Рейтинг
Высота
Дата
Город
тура
Мэджик-Сити, 5312
25 июля 74 50 3/5
штат Айдахо футов
Баунтифул, 4226
10 июля 91 41 173 4/5
штат Юта футов
Трут-ор-
Консекуэнсес, 4242
9 августа 93 7289 5/5
штат Нью- фута
Мексико
612 глава 13
таблицы и большие списки
В этой строке
олбцы.
У нас есть ст находятся заголовки.
Рейтинг
Темпе-
Город Дата Высота Население придорож-
ратура
Кроме того, ных кафе
у нас есть Вала-Вала, 15 июня 75° 1204 29 686 4/5
строки. штат Вашингтон фута
Мэджик-Сити, 25 июня 74° 5312 50 3/5
штат Айдахо футов
Баунтифул, 10 июля 91° 4226 41 173 4/5
штат Юта футов
Лэст Чанс, 23 июля 102° 4780 265 3/5
штат Колорадо футов
Трут-ор-Консекуэнсес, 9 августа 93° 4242 фута 7289 5/5
штат Нью-Мексико
Уай, штат Аризона 18 августа 104° 860 футов 480 3/5
т
Каждый кусочек данных называю
ячейкой. Иногда также просто
.
говорят «табличные данные»
Мозговой
штурм
дальше 613
html-таблицы
614 глава 13
таблицы и большие списки
У нас есть
три строки,
включая строку
с заголовками.
Каждый элемент ‹td› —
отдельная ячейка.
И шесть столбцов,
то есть именно то,
Каждый ‹th› — это
что мы ожидали
также ячейка. Кажется,
увидеть.
по умолчанию браузер
отображает заголовки
полужирным шрифтом.
дальше 615
состав таблицы
Ðàçäåëåíèå òàáëèöû
Вы видели, что для создания одиночной таблицы использу-
ются четыре элемента: <table>, <tr>, <th> и <td>. Рассмотрим
каждый по отдельности, чтобы понять, какую роль они играют
в создании таблицы.
Рейтинг
<tr> Темпе- Населе- придо-
</tr>
Город Дата Высота
ратура ние рожных
кафе
<tr> Вала-Вала, 15 июня 75° 1204 29 686 4/5 </tr>
штат Вашингтон фута
Мэджик-Сити, 25 июня 74° 5312 50 3/5
<tr> штат Айдахо футов
</tr>
Баунтифул, 10 июля 91° 4226 41 173 4/5
<tr> штат Юта футов
</tr>
<tr> Лэст Чанс, 23 июля 102° 4780 265 3/5 </tr>
штат Колорадо футов
<tr> Трут-ор-Консекуэнсес, 9 августа 93° 4242 фута 7289 5/5 </tr>
штат Нью-Мексико
<tr> Уай, штат Аризона 18 августа 104° 860 футов 480 3/5 </tr>
616 глава 13
таблицы и большие списки
часто
Задаваемые
вопросы Таблицы
В: Почему нет отдельного элемента для представление CSS, чтобы извлечь выгоду из
позволяют
столбца таблицы? табличного макета, не создавая на самом деле
О: Таблицы повсеместно использовались для В: Можно ли использовать табличное пред- Самое главное:
создания разметок в эру HTML, которая была до
появления CSS. Тогда не существовало лучшего
ставление CSS для придания стиля HTML-
таблицам?
таблицы не
способа создания сложных разметок. Однако предназначены
в наши дни это плохой вариант разметки страниц. О: У вас нет нужды делать это. Потому что вы для разметки
Сегодня всем известно, что при использовании уже создаете табличную структуру посредством
таблиц для разметок сложно получить желаемый
вид страницы, а затем поддерживать ее. Вместо
HTML, так что, как вы увидите позднее, вы можете
использовать простой CSS для придания стиля
элементов; это
этого намного лучше использовать табличное таблицам. работа CSS.
дальше 617
протестируем наши таблицы
СТАНЬ браузером
Слева вы
найдете HTML-код для
таблицы.
Ваша задача —
поставить себя
<table><tr><th>Исполнитель</th> на место браузера,
<th>Альбом</th></tr><tr> отображающего эту
<td>Enigma</td><td>Le Roi Est Mort, страницу. Выполнив упражнение,
Vive Le Roi!</td></tr> <tr><td>LTJ проверьте правильность решения
Bukem</td> в конце главы.
<td>Progression Sessions 6</td>
</tr><tr>
<td>Timo Maas</td> аблица.
о HTML-т
<td>Pictures</td></tr></table> Это прост
таблицу
Нарисуйте
здесь.
618 глава 13
таблицы и большие списки
Äîáàâëåíèå çàãîëîâêà
Вы можете незамедлительно усовершенствовать свою таблицу,
добавив заголовок.
<table>
<caption>
Города, которые я посетил во время
путешествия на скутере по США
</caption> Название отображается
<tr> в окне браузера. По умолчанию
<th>Город</th> в большинстве браузеров оно
<th>Дата</th> отображается над таблицей.
<th>Температура</th>
<th>Высота</th>
<th>Население</th>
<th>Рейтинг придорожных кафе</th>
</tr>
Если вам не нравится месторас-
<tr>
положение заголовка, заданное по
<td>Вала-Вала, штат Вашингтон</td>
<td>15 июня</td> умолчанию, то для изменения его
<td>75</td> положения на странице вы можете
<td>1204 фута</td> использовать CSS. Имейте в виду,
<td>29 686</td> что устаревшие браузеры не пол-
<td>4/5</td> ностью поддерживают изменение
</tr> позиционирования заголовка.
<tr>
<td>Мэджик-Сити, штат Айдахо</td>
<td>25 июня</td>
<td>74</td>
Вы должны всегда размещать
<td>5312 фута</td>
<td>50</td> заголовок над своей таблицей
<td>3/5</td> в HTML-коде и использовать CSS,
</tr> чтобы изменить позициониро-
вание заголовка и разместить
. остальные
. Далее идут его под таблицей, если вам так
лицы.
. строки таб будет нужно.
</table>
дальше 619
проверим нашу неоформленную таблицу
620 глава 13
таблицы и большие списки
<p>
Итак, я уже проехал 1200 миль и побывал в некоторых
интересных местах:
</p>
<ol>
<li>Вала-Вала, штат Вашингтон</li> Это старый список городов. Удалите
<li>Мэджик-Сити, штат Айдахо</li> его, потому что вместо него мы
<li>Баунтифул, штат Юта</li> будем использовать таблицу.
<li>Лэст Чанс, штат Колорадо</li>
<li>Трут-ор-Консекуэнсес, штат Нью-Мексико</li>
<li>Уай, штат Аризона</li>
</ol>
<table>
<caption>Города, которые я посетил во время путешествия на скутере по США</caption>
<tr>
<th>Город</th>
<th>Дата</th>
<th>Температура</th>
<th>Высота</th> Здесь будет новая таблица. Самый простой
<th>Население</th> способ поместить ее сюда — скопировать
<th>Рейтинг придорожных кафе</th> из предыдущего файла.
</tr>
.
.
.
</table>
дальше 621
таблицы и стиль
Îôîðìëÿåì òàáëèöó
Добавьте новые правила, описанные ниже, в самый конец файла с таблицей стилей journal.css.
@font-face {
font-family: "Emblema One";
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
} Вверху приведены все те стили,
h1, h2 { которые на данный момент при-
color: #cc6600;
меняются на веб-странице Тони.
border-bottom: thin dotted #888888;
Мы добавляли их в главе 8. Под
}
ними мы добавим новые правила
h1 {
font-family: "Emblema One", sans-serif; стиля для таблицы.
font-size: 220%;
}
h2 {
font-size: 130%;
font-weight: normal;
}
blockquote {
font-style: italic;
} Сначала мы оформим таблицу.
Добавим левое и правое поля и тонкую
table { черную границу для таблицы.
margin-left: 20px;
margin-right: 20px;
border: thin solid black; Переместим заголовок под таблицу.
caption-side: bottom;
}
622 глава 13
таблицы и большие списки
У нашей таблицы
е
есть поля и небольши
отступы, заданн ые для
каждой ячейки.
дальше 623
ячейки и блочная модель
Это содержимое.
Это отступ.
А это граница.
624 глава 13
таблицы и большие списки
часто
Задаваемые
вопросы
В: Вы сказали, что промежуток В: Понятно, а существует ли В: Кажется, в моем браузере
между ячейками определяется способ сделать горизонтальные свойство border-spacing не рабо-
для всей таблицы, то есть полу- и нижние промежутки между ячей- тает.
чается, что я не смогу задать поля ками разными? Мне кажется, это
для каждой ячейки таблицы инди- могло бы быть полезно. О: Вы используете устаревшую версию
видуально? Internet Explorer? Очень жаль, но его шестая
О: Конечно, так можно сделать. Вы можете версия не поддерживает свойство border-
О: Именно. У ячеек таблицы нет полей. задать расстояние между ячейками следу- spacing. Говоря серьезно, разве вам не пора
У них есть лишь свободное пространство ющим образом: перейти на более новую версию браузера?
вокруг границ, которое задается для всей border-spacing: 10px 30px;
таблицы целиком. Вы не можете определять В результате вы установите горизонтальные
промежутки между различными ячейками промежутки шириной 10 пикселов, а верти-
индивидуально. кальные — высотой 30 пикелов.
дальше 625
объединение с помощью границ
Îáúåäèíåíèå ãðàíèö
Есть еще один способ решить проблему с границами. Вы можете
использовать CSS-свойство border-collapse, позволяющее объ-
единить границы между ячейками так, чтобы расстояния между
ячейками не было вовсе. Если вы это сделаете, браузер будет игно-
рировать все промежутки между ячейками (а также между ячейка-
ми и границей самой таблицы), которые вы задали для таблицы.
Он также будет соединять две соседние границы в одну.
Вы можете установить свойство border-collapse, как показано
ниже. Внесите эти изменения в файл journal.css:
table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
Добавьте свойство border-collapse
caption-side: bottom;
border-collapse: collapse; и установите для него значение collapse.
}
НА СКУТЕРЕ ПО США
626 глава 13
таблицы и большие списки
НА СКУТЕРЕ ПО США
центру.
Все это выровнено по
А это выровнено
по правому краю.
дальше 627
раскрасим ячейки
НА СКУТЕРЕ ПО США
th {
background-color: #cc6600;
}
628 глава 13
таблицы и большие списки
Серьезный CSS
Хотите увидеть другой, более продвинутый способ задать цвет для каждой из строк таблицы?
Он основан на применении псевдокласса nth-child. Вы помните, что псевдоклассы исполь-
зуются для оформления элементов в зависимости от их состояния (например, псевдокласс
a:hover, который мы задействовали в случае с гостевой Head First и обеспечивающий при-
дание стиля ссылке, когда пользователь наводит на нее курсор мыши).
В нашей ситуации для псевдокласса nth-child таким состоянием будет порядковый номер
элемента в общей последовательности по отношению к его элементам-братьям, находящимся
на том же уровне вложенности. Давайте рассмотрим пример того, что это значит:
Здесь у нас имеется четыре элемента <p>, вло-
женных в элемент <section>. Каждый <p> является
дочерним элементом по отношению к <section>.
<section>
<p>
Это первый дочерний элемент…
<p>
…это второй дочерний элемент…
<p>
…это третий дочерний элемент…
<p>
…а это четвертый дочерний элемент.
Допустим, вы хотите выбрать четные элементы <p> (то есть <p> под номерами 2 и 4), чтобы сделать цвет их
фона красным, и нечетные <p>, чтобы снабдить их зеленым фоном. Для этого потребуется следующий код:
p:nth-child(even) {
иметь
background-color: red; Элементы <p> под номерами 2 и 4 будут
} красный фон…
p:nth-child(odd) {
background-color: green; …а элементы <p> под номерами 1 и 3 – зеленый фон.
}
Исходя из имени nth-child вы, возможно, уже догадались¸ что данный псевдокласс обеспечивает более
гибкие возможности, чем простой выбор четных и нечетных элементов, вложенных в тот или иной элемент.
Вы также можете задавать простые выражения, включающие номер n, что открывает перед вами широкий
спектр опций по выбору элементов. Например, у вас также есть возможность выбирать четные и нечетные
элементы <p> следующим образом:
Если n=0, то 2n=0
Выбирает элементы <p> <section>
(никакой <p>), а 2n+1=1,
с четным номером.
p:nth-child(2n) { то есть первый <p>. <p>
background-color: red;
<p>
} Выбирает элементы <p> Если n=1, то 2n=2,
p:nth-child(2n+1) { с нечетным номером.
то есть второй <p>, <p>
background-color: green;
а 2n+1=3, то есть
} <p>
третий <p>.
дальше 629
тестируем псевдокласс nth-child
Серьезное упражнение
Почему бы вам не попробовать свои силы в применении псевдо-
класса nth-child? Устраните пробелы в приведенном чуть ниже НА СКУТЕРЕ ПО США
CSS, используя псевдокласс nth-child для назначения нечетным
строкам светло-оранжевого цвета.
:
Напишите свой псевдокласс .cellcolor здесь
tr:___________________ {
background-color: #fcba7a;
}
рием,
Снабдите свой класс .cellcolor коммента
как показано здесь:
/* .cellcolor {
background-color: #fcba7a;
} */
Тесс
Ìû ãîâîðèëè, ÷òî Òîíè ñäåëàë î÷åíü èíòåðåñíîå
îòêðûòèå â Òðóò-îð-Êîíñåêóýíñåñ?
Надо сказать, что Тони узнал кое-что интересное в городе Трут-ор-Кон-
секуэнсес, штат Нью-Мексико. На самом деле это показалось ему
настолько интересным, что после Аризоны он снова вернулся туда.
Мы, конечно, рады за Тони, но он задал нам сложную задачку с табли-
цей. Хотя можно просто добавить новую строку для Трут-ор-Консеку-
энсес, мы все же хотели бы сделать это в более изысканной манере.
О чем мы говорим? Переверните страницу, чтобы выяснить это.
630 глава 13
таблицы и большие списки
придорож-
ных кафе
Население
Темпера-
Рейтинг
Высота
Дата
Город
тура
Вала-Вала, штат 1204
15 июня 75 29 686 4/5
Вашингтон фута
Мэджик-Сити, 5312
25 июля 74 50 3/5
штат Айдахо футов
4242
Трут-ор- 9 августа 93 фута 7289 5/5
Консекуэнсес, штат
Нью-Мексико 27 августа 98 4242 7289 4/5
фута
860
Уай, штат Аризона 18 августа 104 480 3/5
футов
Рейтинг
Темпе- Населе-
Город Дата Высота придорожных
ратура ние
кафе
Вала-Вала, 15 июня 75° 1204 фута 29 686 4/5
штат Вашингтон
Мэджик-Сити, 25 июня 74° 5312 50 3/5
штат Айдахо футов
Здесь Баунтифул, 10 июля 91° 4226 41173 4/5
отмечены оба штат Юта футов
визита Тони Лэст Чанс, 23 июля 102° 4780 265 3/5
в Трут-ор- штат Колорадо футов
Консекуэнсес. Трут-ор- 9 августа 93° 4242 фута 7289 5/5
Консекуэнсес, штат 27 августа 98° 4/5
Нью-Мексико
Уай, штат Аризона 18 августа 104° 860 футов 480 3/5
Но как же нам отразить это в HTML? Кажется, придется добавить новую Теперь эти данные
строку и просто дублировать в ней название города, население и высоту… занимают ДВЕ
Не будем забегать вперед, ведь у нас есть специальная технология. Используя строки в таблице.
HTML-таблицы, вы можете сделать так, чтобы ячейка охватывала несколько
строк (или столбцов). Посмотрим, как это работает.
дальше 631
используем в таблицах промежутки
Рейтинг
Темпе- Населе-
Город Дата Высота придорожных
ратура ние
кафе
Вала-Вала, 15 июня 75° 1204 фута 29 686 4/5
штат Вашингтон
Мэджик-Сити, 25 июня 74° 5312 футов 50 3/5
штат Айдахо
Баунтифул, штат Юта 10 июля 91° 4226 футов 41173 4/5
Ячейки
Лэст Чанс, 23 июля 102° 4780 футов 265 3/5 с датой,
штат Колорадо темпера-
Трут-ор-Консекуэнсес, 9 августа 93° 4242 фута 7289 5/5 турой
штат Нью-Мексико 27 августа 98° 4/5 и рейтингом
придорож-
Уай, штат Аризона 18 августа 104° 860 футов 480 3/5
ных кафе
занимают
оки. по одной
Эти ячейки охватывают две стр
строке.
Как же реализовать это в HTML? На самом деле это намного легче, чем вы думаете. Нужно
использовать атрибут rowspan, чтобы указать, как много строк займет ячейка, а затем
удалить соответствующий элемент с данными из других строк, которые покрывает эта
ячейка. Проще понять это на примере.
В таблице есть две строки Для ячеек, содержащих
с данными о Нью-Мексико. те данные, которые
<tr> не изменились при по-
<td rowspan="2">Трут-ор-Консекуэнсес, штат Нью-Мексико</td>
вторном визите (город,
<td class="center">9 августа</td>
высота и население),
<td class="center">93</td>
<td rowspan="2" class="right">4242 фута</td> мы добавляем атрибут
<td rowspan="2" class="right">7289</td> rowspan. Он указывает,
<td class="center">5/5</td> Город указывать что ячейка с этими
</tr> не нужно, так как данными охватывает
<tr> в предыдущей строке две строки.
мы задали для него
<td class="center">27 августа</td> атрибут rowspan.
<td class="center">98</td>
Во второй строке мы
То же самое указываем только те данные,
<td class="center">4/5</td> для высоты которых пока нет (дата,
</tr>
и населения. температура и новый рейтинг).
632 глава 13
таблицы и большие списки
<tr>
<td rowspan="2">Трут-ор-Консекуэнсес, Нью-Мексико</td>
<td class="center">9 августа</td>
<td class="center">93</td>
<td rowspan="2" class="right">4242 фута</td>
<td rowspan="2" class="right">7289</td>
<td class="center">5/5</td>
</tr>
<tr>
<td class="center">4/5</td>
</tr>
98°
дальше 633
тестируем таблицу
Òåñòèðîâàíèå òàáëèöû
Внесите соответствующие изменения в та- НА СКУТЕРЕ ПО США
блицу из файла journal.html и проте-
стируйте страницу. Взгляните на таблицу.
Подумайте о том, что именно вы делаете
с таблицей: вы используете HTML-код,
чтобы указать, что определенные ячей-
ки охватывают несколько строк, а затем
удаляете лишние элементы <td> из сле-
дующих строк.
часто
Задаваемые
вопросы
В: Вы сказали, что можно сделать так, чтобы одна В: Неужели вам действительно кажется, что ячейки,
ячейка охватывала несколько столбцов? охватывающие несколько строк, смотрятся лучше?
О: Конечно, можно. Просто добавьте атрибут colspan в элемент <td> О: Они определенно уменьшают количество информации в табли-
и укажите в нем количество столбцов. С помощью rowspan вы це, что обычно хорошо. Если вы посмотрите на некоторые реально
объединяете строки, а посредством colspan удаляете элементы существующие таблицы, то увидите, что ячейки, объединяющие
с табличными данными из той же строки (поскольку вы объеди- несколько строк или столбцов, используются достаточно часто,
няете столбцы, а не строки). так что здорово уметь делать это в HTML. Но если вам больше
нравилась предыдущая версия таблицы, можете поменять свой
В: Можно ли для одного и того же элемента <td> HTML-код и вернуться к ней.
использовать и атрибут colspan, и атрибут rowspan?
634 глава 13
таблицы и большие списки
Ïðîáëåìà â ðàþ?
Кажется, у нас появилось расхождение во мнениях о рейтинге обеда в придорожном
кафе за 27 августа. Можно, конечно, попросить Тони и Тесс прийти к единому мнению,
но разве мы должны это делать? У нас есть таблица, и мы должны суметь добавить в нее
еще один рейтинг. Но как? Мы совсем не хотим добавлять еще одну запись только для
того, чтобы отобразить мнение Тесс об обеде. Хммм... Почему бы нам не сделать это
следующим образом?
Тем- Рейтинг
Населе-
Город Дата пе-ра- Высота придорожных
ние
тура кафе
Вала-Вала, 15 июня 75° 1204 фута 29 686 4/5
штат Вашингтон
Мэджик-Сити, 25 июня 74° 5312 50 3/5
штат Айдахо футов
Баунтифул, 10 июля 91° 4226 41173 4/5
штат Юта футов
Лэст Чанс, 23 июля 102° 4780 265 3/5
штат Колорадо футов
Трут-ор- 9 августа 93° 4242 фута 7289 5/5
Консекуэнсес, штат 27 августа 98° Тесс 5/5
Нью-Мексико Тони 4/5
дальше 635
нам нужна вложенная таблица
Минутку... кажется, мы
имеем дело с таблицей
в таблице.
<tr>
<td rowspan="2">Трут-ор-Консекуэнсес, штат Нью-Мексико</td>
<td class="center">9 августа</td>
<td class="center">93</td>
<td rowspan="2" class="right">4242 фута</td>
<td rowspan="2" class="right">7289</td>
<td class="center">5/5</td>
</tr>
<tr>
<td class="center">27 августа</td>
<td class="center">98</td>
<td>
4/5
<table> Сначала удалите
<tr> старый рейтинг...
<th>Тесс</th>
<td>5/5</td>
</tr>
<tr> ...и поместите в это место таблицу.
<th>Тони</th> В ней будут храниться оценки обеда
<td>4/5</td>
по пятибалльной шкале: одна оценка
</tr>
</table> Тесс, другая — Тони. Мы используем их
</td> имена в качестве заголовков таблицы,
</tr> а рейтинги — в качестве ячеек.
636 глава 13
таблицы и большие списки
НА СКУТЕРЕ ПО США
Ого, выглядит
здорово.
Единственное
замечание: цветной
фон для заголовков
вложенной таблицы —
это лишнее.
Давайте выделим
имена полужирным
шрифтом, но уберем
цветной фон.
дальше 637
тестирование ваших знаний о таблицах
Мозговой штурм
повышенная сложность
Пришло время вспомнить все, что изучено к этому моменту. Вам нужно
поменять цвет фона только для заголовков вложенной таблицы (Тони
и Тесс) и при этом не затронуть цвет фона заголовков главной таблицы.
Как? Нужно написать селектор, который выбирает только заголовки
вложенной таблицы.
{
background-color: white;
Напишите
селектор,
}
выбирающий
только заголовки
вложенной
Ñòîï! Íå ïåðåâîðà÷èâàéòå
таблицы.
å
ñòðàíèöó, ïîêà íå âûïîëíèò
ýòî óïðàæíåíèå.
638 глава 13
таблицы и большие списки
Мозговой
штурм
Нужно, чтобы фоновые цвета
строк таблицы с рейтингом
Тони и Тесс были разными,
например голубым и розо-
вым соответственно. Можете
, что для
Теперь элементы ‹th› Но обратите внимание ли вы придумать несколько
во вложенной таблице пол уж ирный способов реализовать это?
них все еще задан
имеют белый фон. шрифт, так как мы не
йство.
переопределяли это сво
дальше 639
вернемся к оформлению списков
.
Мы рассматриваем только
.
. отрывок HTML-кода, содержащий
<h2>2 июня, 2012</h2> запись от 2 июня.
<p>
<img src="images/segway1.jpg"
alt="The first day of the trip" />
</p> Это нижняя часть дневника
Тони из файла journal.html.
<p> Помните этот список в первой
Первый день моего путешествия! Я не
записи дневника?
верю, что наконец смог отложить все
дела в сторону и отправиться
в путешествие. Поскольку я собирался
ехать на скутере, то не мог взять
с собой много вещей: только
</p>
<ul>
<li>сотовый телефон</li>
<li>iPod</li>
<li>цифровую камеру</li>
<li>и шоколадный батончик</li>
</ul>
<p>
Только все самое необходимое. Как
сказал бы Лао Цзы: <q>Путешествие
в тысячу миль начинается с одного
шага к скутеру</q>
</p>
</body>
</html>
640 глава 13
таблицы и большие списки
Îôîðìëåíèå ñïèñêà
Вы уже в курсе, что, зная основы CSS (шрифт, текст, цвет и другие свойства), можно придать стиль
чему угодно, включая списки. Вы уже видели пример с оформлением списков (в главе 12), и, оказы-
вается, есть всего несколько свойств, которые применяются исключительно для списков, так что
вам не придется дополнительно учить слишком многое. Основное свойство для списков называется
list-style-type и позволяет определять вид используемых в списках маркеров. Рассмотрим не-
сколько способов задания маркеров.
li {
list-style-type: circle;
}
li {
list-style-type: square;
}
li {
list-style-type: none;
} е
Значение none вообщ
удаляет ма рк ер ы.
дальше 641
создаем пользовательский маркер списка
в качестве
Это свойство list-style-image,
URL.
значения которого мы задаем
li { Рисунок backpack.gif представ-
list-style-image: url(images/backpack.gif); ляет собой маленькое изобра-
padding-top: 5px; жение рюкзака. Кажется, нам
margin-left: 20px; это подходит, не так ли?
}
-
Чтобы добавить свободное про
ов
странство слева от элемент
уем пол е. Кро ме
списка, мы использ
отс туп ,
того, задаем небольшой
тоже
чтобы в верхней части списка
было свободное пространство.
È ïîñëåäíèé òåñò...
Это будет последнее изменение сайта Тони.
Добавьте новое правило стиля для элементов
списка в CSS-код, а затем обновите страницу.
642 глава 13
таблицы и большие списки
часто
Задаваемые
вопросы
В: Как насчет нумерованных спи- В: Как можно контролировать В: Вы уверены, что это именно
сков? Что можно сделать, чтобы способ переноса текста на новую так? Кажется, должно быть на-
изменить их стиль? строку в списке? Я имею в виду, оборот.
как можно проверить, переносится
текст под маркер или правее, под
О: Нумерованные и маркированные списки начало предыдущей строки? О: Да, вот что на самом деле говорят эти
оформляются одинаково. Конечно же, в ну- значения: если вы устанавливаете значение
мерованных списках используются не мар- inside свойства line-style-position, то маркеры
керы, а числа или буквы. Благодаря CSS вы О: Для этого предназначено свойство как бы располагаются внутри элементов
можете задавать в качестве маркеров для list-style-position. Если вы зададите для вашего списка, а переносимый на новую стро-
нумерованных списков цифры десятичной него значение inside, то после переноса на ку текст отображается под ними. Если вы
системы счисления, римские цифры или новую строку текст будет расположен под используете значение outside, то маркеры как
буквы алфавита (например, a, b, c). Для это- маркером. Если вы укажете значение outside, бы находятся вне элементов вашего списка
го применяется свойство list-style-type. Для то текст будет выровнен по левому краю и переносимый на новую строку текст просто
получения более подробной информации предыдущей строки. отображается под текстом предыдущей стро-
используйте справочник по CSS (как мы уже ки. А под «внутри элементов вашего списка»
говорили, их множество). мы имеем в виду «в рамках границ блоков
элементов вашего списка».
дальше 643
обзор таблиц и списков
ÊËÞ×ÅÂÛÅ
ÌÎÌÅÍÒÛ
644 глава 13
таблицы и большие списки
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
td, th {border: 1px solid black;}
Сначала напечатайте </style>
HTML-код для тести- <title>Тестирование таблицы Тони</title>
рования таблицы Тони. </head>
Хотя печатать его будет <body>
скучно, это поможет <table>
вам усвоить и запом- <tr>
нить структуру тегов <th>Город</th>
<table>, <tr>, <th> <th>Дата</th>
<th>Температура</th>
и <td>. Когда закончите,
<th>Высота</th>
быстро протестируйте
<th>Население</th>
код, а затем добавьте <th>Рейтинг придорожных кафе</th>
оставшиеся данные из </tr>
таблицы Тони. И снова <tr>
протестируйте. <td>Вала-Вала, штат Вашингтон</td>
<td>15 июня</td>
<td>75</td>
<td>1204 фута</td>
<td>29 686</td>
<td>4/5</td>
</tr>
<tr>
<td>Мэджик-Сити, штат Айдахо</td>
<td>25 июня</td>
<td>74</td>
<td>5312 футов</td>
<td>50</td>
<td>3/5</td>
</tr>
<tr>
<td>Баунтифул, штат Юта</td>
<td>10 июля</td>
<td>91</td>
<td>4226 футов</td>
<td>41 173</td>
<td>4/5</td>
</tr>
<tr>
<td>Лэст Чанс, штат Колорадо</td>
<td>23 июля</td>
<td>102</td>
<td>4780 футов</td>
<td>265</td>
<td>3/5</td>
</tr>
<tr>
См. продолжение
<td>Трут-ор-Консекуэнсес, штат Нью-Мексико</td>
<td>9 августа</td> на следующей
<td>93</td> странице.
дальше 645
решение упражнений
<td>4242 фута</td>
<td>7289</td>
е) <td>5/5</td>
ол жени
(Прод </tr>
<tr>
<td>Уай, штат Аризона</td>
<td>18 августа</td>
<td>104</td>
<td>860 футов</td>
<td>480</td>
<td>3/5</td>
</tr>
</table>
</body>
</html>
646 глава 13
таблицы и большие списки
Мы отформатировали HTML,
чтобы он был более удобочитаемым.
дальше 647
Возьми в руку карандаш
Решение Дублированные точечные линии в таблице Тони очень сильно
бросаются в глаза. Было бы лучше, если бы вокруг каждой
ячейки была одинарная точечная линия, чтобы не отвлекать
внимание от содержимого таблицы. Вы можете придумать
способ сделать это, используя те знания о стилях, которые
имеете на данный момент?
Можно задать значение 0 для свойства border-spacing,
что позволит убрать промежутки между границами.
table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
caption-side: bottom;
border-spacing: 0px;
}
две ли-
Это лучше, но мы все же имеем
и расп олож ены
нии, а не одну, хотя они
льт ате
вплотную друг к другу. В резу
бы боль-
ширина границ удваивается. Нам
ячейками
ше понравилось, если бы между
. Не так ли?
была одинарная граница
648 глава 13
таблицы и большие списки
<table >
<caption>Города, которые я посетил во время путешествия на скутере по США</caption>
<tr>
<th>Город</th>
<th>Дата</th>
<th>Температура</th>
<th>Высота</th>
<th>Население</th>
<th>Рейтинг придорожных кафе</th>
</tr>
<tr>
<td>Вала-Вала, штат Вашингтон</td>
<td class="center">15 июня</td>
<td class="center">75</td>
<td class="right">1204 фута</td>
<td class="right">29 686</td>
<td class="center">4/5</td> Здесь вы просто
</tr> добавляете каждый
<tr>
элемент ‹td›
<td>Мэджик-Сити, штат Айдахо</td> класс!
<td class="center">25 июня</td> в соответствующий
<td class="center">74</td>
<td class="right">5312 футов</td>
<td class="right">50</td>
<td class="center">3/5</td>
</tr>
.
.
.
</table>
<tr class="cellcolor">
<td>Мэджик-Сити, штат Айдахо</td>
...
</tr>
дальше 649
решение упражнений
<tr>
<td rowspan="2">Трут-ор-Консекуэнсес, штат Нью-Мексико</td>
<td class="center">9 августа</td>
<td class="center">93</td>
<td rowspan="2" class="right">4242 фута</td>
<td rowspan="2" class="right">7289</td>
<td class="center">5/5</td>
</tr>
<tr>
<td class="center">4/5</td>
</tr>
tr:nth-child(odd) {
background-color:
#fcba7a;
}
650 глава 13
таблицы и большие списки
Мозговой штурм
повышенная сложность . Решение
Пришло время вспомнить все, что изучено к этому моменту. Вам нужно
поменять цвет фона только для заголовков вложенной таблицы (Тони
и Тесс) и при этом не затронуть цвет фона заголовков главной таблицы.
Как? Нужно написать селектор, который выбирает только заголовки
вложенной таблицы.
(1) Начните
с выбора внешней
таблицы.
table table th {
background-color: white;
Напишите
селектор, }
выбирающий
только заго-
ловки вложенной
таблицы.
дальше 651
14 HTML-формы
653
браузеры и формы
раницу Веб-сервер
те веб-ст получает
Вы посещае олняете Браузер упаковывает данные фор
мы и отда
ормой, зап ет
с HTML-ф авляете все данные из формы их серверно
му сценари
у и предст ю
эту форм отрение. и отсылает их веб-серверу. на обработ
ку.
нф ор м ац и ю на рассм
и
firstname=buck
lastname=bonz
1 item=java
number=2
Серверный сценарий
Веб-сервер
Браузер
2 <html>
<head>
<title>
Your Order has
Processed
</title>
Серверный сценарий
<head>
<body>
<p>Thanks for your
it will be shipping
soon!
</p>
</body>
</head>
Веб-сервер
Браузер
ает
Ответ — это ер отсыл
Браузер получает этот Веб-серв й
HTML-страница. олученны
ответ и отображает его. отв ет, п ц е н ария,
рного с
от серв е .
браузеру
обратно
654 глава 14
html-формы
Вы вводите данные
Вы используете элементы управления для вво-
да данных. В зависимости от типа элемента
ввод происходит по-разному. Вы можете ввести
единичную строку текста в текстовый элемент
управления или выбрать одно из нескольких
положений в элементе управления типа «пе-
реключатель». Очень скоро мы рассмотрим
разные виды элементов управления.
Вы представляете форму
на рассмотрение
Вы представляете форму на рассмотрение, на-
жав кнопку Submit (Отправить). Этим вы даете
браузеру сигнал, что ему нужно упаковать все
данные и отослать их серверу.
Сервер реагирует
Как только сервер получает данные формы, он
отправляет их соответствующему серверному
сценарию на обработку. В качестве результата
этой обработки выдается новая HTML-страни-
ца, которая возвращается браузеру. Поскольку
это обычный HTML-код, то браузер отобража-
ет его для вас.
дальше 655
как писать формы
<form action="http://wickedlysmart.com/hfhtmlcss/contest.php"
У нас есть сам
method="POST">
элемент ‹form›...
A <p>Просто введите свое имя (и нажмите кнопку Отправить),
чтобы принять участие в конкурсе: <br/>
</body>
</html>
656 глава 14
html-формы
дальше 657
элемент form
contest.php
hfhtmlcss
Браузер wickedlysmart.com
658 глава 14
html-формы
дальше 659
обзор элементов формы
660 глава 14
html-формы
дальше 661
еще больше информации об элементах формы
textarea
Элемент <textarea> создает мно-
гострочное текстовое поле для
ввода данных. Если вы вводите
больше текста, чем может вме-
ститься в одну строку, то справа
появляется полоса для прокрутки. rows
cols
cols
Атрибут
Элемент браузеру,
сообщает но
‹textarea› — это не рины долж
какой ши оле
пустой элемент, Используйте ат стовое п
рибут быть тек ся
то есть у него есть name, чтобы определяет
(ширина во лов,
и открывающий присвоить элем вом сим
енту количест т ся
и закрывающий теги. уникальное им поместя
я. которые
оле).
в этом п
662 глава 14
html-формы
select
Элемент <select> создает на веб-странице
раскрывающийся список. Он предостав-
ляет возможность выбирать предлага-
емые варианты ответов. Элемент <select>
Элемент ‹select› создает раскрывающийся
работает в паре с элементом <option>, соз-
дающим меню. список, который выглядит следующим
образом (хотя его внешний вид может очень
сильно варьироваться в разных браузерах).
Элемент ‹selec
t›
ах формы,
должен окруж их элемент
ать все Как и в друг уникальное
пункты меню
, чтобы йт е эл ем енту ‹select›
присво name.
сгруппироват зуя атрибут
ь их. имя, исполь
<select name="characters">
<option value="Баккару">Баккару Банзай</option>
<option value="Томми">Чудесный Томми</option>
<option value="Пенни">Пенни Придди</option>
<option value="Джерси">Нью-Джерси</option>
<option value="Джон">Джон Паркер</option>
</select>
Содержимое элемента
<select name="characters"> ‹option› используется для
<option value="Баккару">Баккару Банзай</option> описания пунктов меню.
<option value="Томми">Чудесный Томми</option> Каждый пункт также
<option value="Пенни">Пенни Придди</option> включает представляющий
<option value="Джерси">Нью-Джерси</option>
<option value="Джон">Джон Паркер</option> его атрибут value.
</select>
дальше 663
еще больше информации об элементах формы
Постойте-ка, HTML5
привносит еще больше
Î, â ôîðìó ìîæåò âõîäèòü è åùå êîå-÷òî! замечательных типов
<input>! Не стоит о них
Ах да, нельзя забывать обо всех тех новых и интересных вещах,
забывать!
которые появились. С выходом HTML5 нам стали доступны еще
более специализированные формы для ввода данных. Давайте
взглянем:
664 глава 14
html-формы
t> являются
Все эти три типа элемента <inpu
Элемент <input> типа url разновидностью типа text
х вы
элем
не
ента
заме тит
<input>.
е разни-
В настольных браузера
в моби льны х брау зерах
Как и элементы <input> типа email и tel, эле- цы между ними. Однако
мент <input> типа url является всего лишь спец иаль ная клав иат ура,
может отображаться
текстовым полем ввода, но приводит к по- ых симв олов , напр и-
облегчающая ввод требуем
явлению на экранах мобильных устройств
мер «/», «@» и чисел.
специальной клавиатуры.
<input type="url">
Пока не все браузеры
обе-
спечивают полную подд
ерж-
Будьте ку данных типов <input>.
осторожны! Типы <input>, рассмотрен
ные
на этой и предыдущей ст
Даже в случае с этими специализированн ницах, являются новыми ра-
ыми в HTML5, и, несмотря
типами вам придется разобраться в на то что сейчас вы мо
том, жете использовать их
какие именно значения ожидает получить во всех веб-страницах, нек
оторые из них могут
соответствующий серверный сценарий, отображаться не так, как
было показано здесь.
и использовать подходящий тип <inpu
t>.
дальше 665
bean machine
сок
Раскрывающийся спи
с напитками.
Молотый кофе
или кофе в зернах
Выберите кофе: Домашняя смесь (можно выбрать
zz Ка
bu Боливия
только одно).
фе
Star
Тип:
Кофе Гватемала
Star
в зернах
Подарочная упаков-
фе
buz а Кения
Молотый
zК ка или включить
Дополнительные услуги:
каталог (не выби-
райте ни одного
Подарочная упаковка
или выберите один
Форма
Доставка каталога вместе с заказом или два).
должна Доставить по адресу
выглядеть Имя: Информация
следующим о заказчике и его
Адрес:
образом. адрес, состоящие
Город:
из шести тек-
Страна: стовых полей.
Почтовый индекс:
Телефон:
Поле для коммен-
Комментарии клиентов:
тариев клиентов.
Кнопка отправ-
Заказать сейчас ления заказа.
666 глава 14
html-формы
..>/>
"" ...
puut
iinnp
"tte
e=="
yppe
tt tty
tt"
exxt ./>
...>
Выберите кофе: Домашняя смесь
<<i ty pe =" te
nput type="text" ...>xt "
<i
<input
Тип: Боливия
Кофе Гватемала
<input type="color" ...> в зернах
Кения
Молотый
<input
i ttype="checkbo
" h kb
type="chec
t x" ".../>
kbox"
"checkbox" >
...>
<input Количество пакетиков:
<input type="checkbox" ...>
Доставить к указанной дате:
<input type="tel" ...>
..> Дополнительные услуги:
<input type="date" ...>
Подарочная упаковка
io"
"radi
pe=" >
" ...>
nput tytype="r
<i<input adio" ...> Доставка каталога вместе с заказом
<input type="radi
type
type= radioo" ...>
>
Доставить по адресу
<textarea> .....<tex Имя:
<textarea> .<textar
tarea>
ea/>
Адрес:
lect> ...<select>
<se<select> Город:
<select
<sel ...<select>
t> ...<select/>
Страна:
Почтовый индекс:
<option> ...<option>
<option>> ...<optiion/>
...<opt on>
/>
p ion> ...<option
<option
<opt Телефон:
Комментарии клиентов:
<input type="range" ...>
<input type="range" ...>
<input t
ype="sub
mit" ...> >
.../
<input type="submit Заказать сейчас
дальше 667
создание формы
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Starbuzz Bean Machine</title>
</head>
<body>
http://starbuzzcoffee.com/processorder.php
Этот URL-адрес hp
...а серверный сценарий processorder.p
указывает на сайт ерны й
находится на их сервере. Этот серв
starbuzzcoffee... ывать заказы
сценарий уже знает, как обрабат
создавать.
из тех форм, которые мы будем
668 глава 14
html-формы
Пока все идет нормально, но пустой элемент <form> вряд ли принесет много пользы. Вернитесь к схе-
ме формы и взгляните на нее еще раз. Предстоит добавить много различных элементов, но начнем
с простого: создадим часть формы, посвященную адресу доставки. Если вы помните, она состоит из
набора текстовых полей, среди которых есть поле для ввода телефонного номера. Вы уже знаете, что
представляют собой текстовые поля ввода, но давайте разберемся с ними более детально. Поля ввода
для формы Starbuzz выглядят следующим образом: от
му что эт
дан тип text, пото
В данном случае за товым полем.
ия будет текс
Мы используем элемент управлен
‹input› для несколь- <input type="text" name="name"> У нас есть по од-
ких разных элемен- ному элементу
<input type="text" name="address">
тов управления. для каждого поля
Атрибут type <input type="text" name="city"> ввода в форме:
указывает тип эле- <input type="text" name="state"> имя, адрес, город,
мента управления. страна, почтовый
<input type="text" name="zip">
индекс и телефон.
<input type="tel" name="phone">
Атрибут name выступает в роли иден-
В данном случае задан тип tel, потому тификатора данных, которые вводит
пользователь. Обратите внимание, что
что данное поле предназначено для ввода
все их значения различны. Посмотрим, как
телефонного номера.
это работает...
дальше 669
названия элементов формы
Уникальные имена
для каждого эле- name = Баккару Банзай
мента формы.
address = Институт Банзай
city = Лос-Анджелес
state = США
альное zip = 90050
Каждое уник
т
имя получае
phone = 310-555-1212 processorder.php
т орое
значение, ко
данных,
берется из
форму.
вводимых в www.starbuzzcoffee.com
Информация, которую
браузер упаковывает Она нужна серверному сценарию,
для сервера. чтобы данные формы были помечены
соответствующим образом.
670 глава 14
часто html-формы
Задаваемые
вопросы
В: В чем разница между элементом <input> О: Все элементы <input> типов tel, email и url O: Хорошее замечание. Все элементы
типа text и элементом <textarea>? отправляют соответствующему серверному <option> являются частью меню, которое со-
сценарию текстовые строки и, в сущности, яв- здается элементом <select>. Нам нужно лишь
O: Вы можете использовать элемент <input> ляются тем же самым, что и элемент <input> одно имя для всего меню, и оно уже присвоено
типа text для ввода текстовых данных, которые типа text. Однако поскольку браузер будет элементу <select>. Иначе говоря, элементам
вмещаются в одну строку, таких как имя или знать, что определенный элемент <input> име- <option> не нужен атрибут name, потому что
почтовый индекс, а элемент <textarea> приме- ет тип, например, tel, он сможет более толково в элементе <select> уже указано имя для всего
няйте для ввода более длинного текста. подходить к обеспечению интерфейса поль- меню целиком. Не забывайте, что при пред-
зователя для людей, зашедших на страницу. ставлении формы на рассмотрение на сервер
В: Могу ли я изменить надпись Так, некоторые мобильные браузеры могут под этим именем отсылается только то зна-
на кнопке отправки формы? отображать цифровую телефонную клавиатуру. чение, которое пользователь выбрал в меню.
O: Да, просто используйте в элементе атри- В: Я до сих пор не понял, как имена В: Разве вы не говорили, что имя каж-
бут value и присвойте ему нужное значение. ставятся в соответствие данным формы. дого элемента формы должно быть уни-
Вы также можете использовать атрибут value кальным? Но все элементы <input> типа
для элемента <input> типа text, чтобы опреде- O: Каждый элемент формы имеет уникаль- radio имеют одинаковое имя.
лить для него текст, который будет отображать- ное имя и у каждого элемента есть свое зна-
ся по умолчанию. чение. Когда вы нажимаете кнопку отправки O: Верно. Положения для переключателей
формы, браузер берет все имена вместе с их всегда используются группами. Подумайте
В: Есть ли ограничения по объему значениями и отсылает серверу. Например, над этим: если вы установите одно положение
информации, который я могу ввести когда вы вводите почтовый индекс 90050 в эле- переключателя, то остальные станут неактив-
в элемент <input> типа text или в элемент мент <input> типа text с именем zip, браузер ными. Итак, чтобы браузер знал, что положе-
<textarea>? отсылает серверу “zip = 90050”, после того ния переключателя взаимосвязаны, для них
как форма представляется на рассмотрение. используется одно имя. Допустим, у вас есть
O: Браузеры задают определенные огра- переключатель под названием “color” (цвет)
ничения на количество информации, кото- В: Как серверный сценарий уз- с положениями “красный”, “зеленый” и “синий”.
рое можно вводить в элементы <input> или нает, какие имена я собираюсь Во всех значениях указаны цвета, и выбран мо-
в <textarea>. Однако вряд ли вам когда-то использовать? Как мне выбирать жет быть только один, так что в указании одного
понадобится больше информации, чем допу- имена для элементов формы? общего имени для всего набора есть логика.
скают эти ограничения. Если вы все же хотите
ограничить количество символов, которое ваши O: Хороший вопрос. На самом деле все В: Флажки работают так же, как пере-
пользователи могут ввести в элемент <input>, происходит наоборот: это вы должны знать, ключатели?
используйте атрибут maxlength и задайте ему какие имена ожидает увидеть ваш серверный
значение, равное определенному количеству сценарий, и, учитывая это, писать свою форму. O: Да. Единственное отличие состоит в том,
символов. Например, maxlength=”100” не позво- Если вы используете серверный сценарий, на- что вы можете установить сразу несколько
лит пользователям ввести более 100 символов. писанный кем-то другим, то этот кто-то должен флажков. Когда браузер отсылает данные
Однако для <textarea> в HTML нет способа вам сказать, какие имена нужно использовать, формы серверу, он комбинирует значения
ограничить количество символов, которое могут или предоставить вам такую информацию всех флажков в одно и отсылает их под име-
ввести пользователи. в документации для этого серверного сцена- нем элемента checkbox. Допустим, у вас есть
рия. Неплохо начать с того, чтобы попросить флажки под общим названием “spice” (специи)
В: Элементы <input> таких типов, как о помощи вашу хостинговую компанию. со значениями “соль”, “перец” и “чеснок”, и вы
tel, email и url, выглядят точно так же, как установили их все. В результате браузер ото-
элемент <input> типа text. А есть ли между В: Почему у элемента <option> нет атри- шлет серверу выражение “spice = соль&пе-
ними разница? бута name? У всех остальных элементов рец&чеснок”.
форм он есть.
дальше 671
добавление элементов input
Это ТОЛЬКО
Вложите элементы
Начнем с того, непосредственно в форму.
фрагмент формы
все
что поместим form.html.
ен т а ‹p›.
внутрь элем
L-
После того как вы внесете все эти изменения, сохраните Не забудьте проверить свой HTM
-
файл form.html и двигайтесь дальше! код на валидность. Элементы фор
мы тоже долж ны быт ь пров ерен ы!
672 глава 14
html-формы
дальше 673
использование элемента select
Содержимое элемента
та <option>
У каждого элемен используется в качестве пункта
ие.
есть свое значен раскрывающегося списка.
<option value="Гватемала">Гватемала</option>
674 глава 14
html-формы
Это результат
arbuzz Bean
выбора ‹select›. Похоже, что St
считать, что
Machine будет
зать один
мы хотим зака
Это данные, введенные если мы сами
пакетик кофе,
в текстовые поля, включая олько именно
не укажем, ск
поле для указания телефона. м требуется
.
пакетиков на
дальше 675
предоставим выбор
Мозговой
штурм
Измените значение атрибута name элемента <select> на thembeans. Обновите форму и сде-
лайте новый заказ. Как это повлияло на ответ, который вы получили от серверного сценария?
После того как вы выполните это упражнение, убедитесь, что изменили значение атрибута
name обратно на beans.
<p>Тип: <br>
</p>
676 глава 14
html-формы
Îôîðìëåíèå ïåðåêëþ÷àòåëåé
Возьмите код для переключателя с предыдущей страницы и вставьте его
в свой HTML-код, прямо под абзац, содержащий элемент <select>. Убеди-
тесь, что обновили страницу, и снова представьте форму на рассмотрение.
дальше 677
добавление флажков
Теперь, если вы попробуете ввести значение ко- Пользователь получит сообщение об ошибке, если попы-
личества пакетиков, которое больше 10 или мень- тается ввести значение, которое будет больше
ше 1, в браузерах, поддерживающих такой тип (или меньше) установленного максимума (или минимума).
<input>, как number, будет выводиться сообще-
ние об ошибке, когда вы попытаетесь отправить
форму, в котором будет сказано, что введенное
вами значение является неправильным.
678 глава 14
html-формы
<p>
Количество пакетиков: <input type="number" name="bags" min="1" max="10">
</p>
<p>
Доставить к указанной дате: <input type="date" name="date">
</p>
дальше 679
тест-драйв
Äîïîëíåíèå ôîðìû
Вы уже почти все сделали. Осталось добавить
в форму элемент управления «Дополнительные
услуги» с двумя флажками и элемент управления zz Ка
Выберите кофе: Домашняя смесь
bu
для комментариев клиентов. Поскольку вы уже Боливия
фе
Star
Тип:
научились работать с формами, мы не будем Кофе Гватемала
Star
в зернах
фе
Телефон:
риями
Раздел с коммента Комментарии клиентов:
осто
клиентов — это пр
элемент ‹textarea›.
Заказать сейчас
680 глава 14
html-формы
<p>Комментарии клиентов:<br>
<textarea name="comments"></textarea>
</p>
дальше 681
успешная передача на рассмотрение
Çàâåðøàþùèé òåñò
Сохраните изменения, обновите страницу и оцените новую форму.
Не находите, что она достаточно хорошо выглядит?
А это многострочное
поле для ввода текстовой
информации.
682 глава 14
html-формы
Остановитесь на минутку.
Вы думаете, я не заметила, как вы
попытались не обращать внимания
на элемент “extras[]”? Что это за
квадратные скобки? Вы должны это
объяснить.
дальше 683
сопоставим имена с элементами формы
СТАНЬ браузером
Ниже приведена HTML-форма, а справа — те данные,
которые ввел в нее пользователь. Ваша задача — стать
на время браузером и поставить в соответствие
каждому имени элемента формы значение, введенное
пользователем. Выполнив это упражнение, проверьте,
все ли вы сделали правильно.
</p>
<p>Какую модель вы хотите? <br>
<select name="model">
<option value="купер">Мини Купер</option>
<option value="куперS">Мини Купер S</option>
<option value="откидной">Мини Купер с откидным верхом</option>
</select>
</p>
<p>Какой цвет вы хотите? <br>
<input type="radio" name="color" value="чилийский красный"> Чилийский красный <br>
<input type="radio" name="color" value="ярко-синий">Ярко-синий
</p>
<p>Какие дополнительные параметры вы хотите? <br>
<input type="checkbox" name="caroptions[]" value="полоски">Гоночные полоски
<br>
<input type="checkbox" name="caroptions[]" value="спортивные сиденья">Спортивные
сиденья
</p>
<p>
<input type="submit" value="Заказать сейчас">
Это форма.
</p>
</form>
684 глава 14
html-формы
Поставьте в соот
ветствие
каждому полю фо
рмы его значение
и впишите свои от
веты сюда.
дальше 685
методы формы: get и post
firstname=buck
lastname=bonz
item=java
number=2
POST Серверный
В адресной
сценарий строке браузера
пользователь
видит только URL
http://wickedlysmart.com/hfhtmlcss/contest.php
серверного сценария.
http://wickedlysmart.com/hfhtmlcss/contest.php?firstname=buckaroo&lastname=banzai
686 глава 14
html-формы
http://www.starbuzzcoffee.com/processorder.php?beans=Kenya&beantype=gro
und&extras%5B%5D=catalog&name=Buckaroo+Banzai&address=Banzai+Instit
ute&city=Los+Angeles&state=CA&zip=90050&comments=Great+coffee
ого
Теперь вы можете видеть имя кажд Обратите внимание, что браузер кодирует некото-
ение ,
элемента формы, а также его знач рые символы, например пробелы. Серверный сценарий
прямо здесь, в URL-адресе. автоматически декодирует их, когда получит запрос.
дальше 687
тест для вас, get и post
688 глава 14
html-формы
Мозговой
штурм
дальше 689
выбираем, как оформить формы
690 глава 14
html-формы
дальше 691
структурирование html
дальше 693
оформление формы
Готово
Îôîðìëåíèå ôîðìû ñ ïîìîùüþ CSS к употреблению
У нас уже есть вся необходимая нам структура, так что теперь нам осталось лишь добавить не-
сколько правил стиля, и все будет готово. Поскольку наша форма — это часть сайта Starbuzz, мы
будем повторно использовать стили из файла starbuzz.css и создадим таблицу стилей под
названием styledform.css, в которую добавим новые правила стиля для формы Bean Machine.
Вы уже видели весь этот CSS-код. Мы не используем никаких индивидуальных правил стиля для
форм и таблиц: все это уже было сделано в предыдущей главе.
Вы найдете CSS-код в файле styledform.css, который находится в папке chapter14/starbuzz.
ем полагаться на CSS
В некоторых стилях мы буд
добавим фоновый
для всего Starbuzz-сайта, но
элемента body.
body { рисунок Starbuzz и поля для
background: #efe5d0 url(images/background.gif) top left;
margin: 20px;
} Мы используем форму для представления
таблицы в табличном виде…
form { …и добавляем границу вокруг формы и от-
display: table; ступы между содержимым формы и границей,
padding: 10px; а также фоновый цвет для того, чтобы форма
border: thin dotted #7e7e7e; контрастировала с фоном страницы.
background-color: #e1ceb8;
} а, в фор-
Чтобы для комментариев было больше мест
вления, как
form textarea { ме мы делаем крупнее такой элемент упра
информации,
width: 500px; многострочное поле для ввода текстовой
и height.
height: 200px; задав соответствующие значения для width
роль
} ом tableRow играет
Каждый <div> с класс вле ни я.
бличного предста
div.tableRow { строки в макете та
display: table-row;
} Каждый элемент <p>, вложенный в <div> с классом
tableRow, является ячейкой таблицы. Мы вертикально
div.tableRow p { выравниваем содержимое в каждом <p>, чтобы содер-
display: table-cell; жимое в каждой строке было выровнено по верху ячеек.
vertical-align: top; Мы также задаем здесь небольшой отступ, чтобы
padding: 3px; добавить пространства между строками.
ild
} Данное правило задействует псевдоэлемент first-ch
нты
в селекторе для элементов <p>, вложенных в элеме
й
div.tableRow p:first-child { <div> с классом tableRow. Это означает, что первы
ься по
text-align: right; элемент <p> в каждой строке будет выравниват
} правой стороне, то есть все они будут вертикально
ца.
выравниваться относительно правой стороны столб
p.heading {
font-weight: bold; Для всех элементов <p>с классом heading мы выде-
} ляем полужирным шрифтом текст, чтобы он вы-
глядел как заголовок. Данный класс мы использовали
в случае с ячейкой «Доставить по адресу:».
694 глава 14
html-формы
Метки
выровнены
по верхнему
и правому краям
элементов
формы.
Благодаря
этому сразу
становится
понятно, какая
метка к какому Заголовок
элементу «Доставить
относится. по адресу:»
выделен
Промежутки полужирным
между строками шрифтом,
таблицы сильно как нам
влияют на ее и требовалось.
внешний вид,
и информация
в ней читается
намного проще.
дальше 697
другие элементы формы
Параметр multiple
Это не новый элемент, а скорее новый способ использова-
ния уже известных вам элементов. Если вы добавите логи-
Указав параметр
ческий атрибут multiple со значением multiple в свой
multiple, вы
элемент <select>, то превратите меню с однозначным
выбором в такое меню, где можно выбрать сразу несколько можете выбрать
пунктов. Вы получите меню, все пункты которого сразу сразу несколько
отображаются на экране (если этих пунктов много, то пунктов меню
добавляется полоса прокрутки). Можете выбрать более одновременно.
одного пункта, удерживая нажатой клавишу Ctrl (Windows)
или Command (Mac) в то время, как делаете свой выбор.
698 глава 14
html-формы
Атрибут placeholder
Вы можете использовать атрибут placeholder в сочетании
с большинством типов <input> в формах, чтобы дать подсказку
пользователю, заполняющему форму, относительно типа содер-
жимого, которое ему следует ввести в соответствующий элемент Если вы оставите данное поле
неза-
управления. Например, если у вас имеется текстовое поле для полненным и отправите фор
му, то
ввода имени и фамилии, то вы можете обеспечить отображение содержимое placeholder НЕ БУД
ЕТ
отправлено в качестве значения
в нем образца имени и фамилии, воспользовавшись атрибутом для
данного элемента управления!
placeholder. Значение данного атрибута будет отображаться в
элементе управления, но более блеклым цветом, чем обычное со-
держимое, добавляемое в данный элемент управления, и как только Атрибут placeholder позволяет
пользователь установит курсор мыши в текстовом поле, отобра- обеспечивать подсказку относи-
жавшийся в нем текст, который является значением placeholder, тельно типа содержимого, которое
тут же исчезнет, то есть он не будет мешать вводу информации. пользователю следует ввести
в данной части формы.
<input type="text" placeholder="Buckaroo Banzai">
Атрибут required
Атрибут required можно использовать в сочетании с любым
элементом управления формы; он дает пользователям понять,
что соответствующее поле является обязательным для запол-
нения. Если вы, используя браузер, который его поддерживает, Это скриншот из браузера Chro
me.
попытаетесь отправить форму, не указав значение в обязатель- На момент написания данного мат
е-
ном для заполнения поле, то получите сообщение об ошибке риала не все браузеры поддерживали
и отправка формы на сервер не произойдет. атрибут required, но вы в любом
случае
можете задействовать его в коде
. У вас
Обратите внимание на то, что атрибут required тоже являет- будет возможность отправить
форму,
ся логическим, как и некоторые атрибуты элемента <video>, но затем, естественно, серверны
й
о которых мы говорили ранее. Это означает, что данный атри- сценарий пожалуется на то, что
вы
не заполнили соответствующее
бут не имеет значений – он либо он есть, либо его нет. То есть поле.
если данный атрибут присутствует, то он задан, а если нет, то required является логическим атрибутом,
он не задан. В приведенном здесь примере атрибут required поэтому если он присутствует в опре-
присутствует, а это означает, что он задан и соответствующее деленном элементе управления формы,
поле является обязательным для заполнения, чтобы затем то это означает, что в данном поле
должно быть указано значение, чтобы
можно было отправить форму. отправка формы прошла корректно.
<input type="text" placeholder="Buckaroo Banzai" required>
Отредактируйте свой файл styledform.html, добавив атрибуты placeholder в каждый из элементов <input> типов
text и tel. Подберите значения, которые обеспечат для ваших пользователей хорошую подсказку относительно
типа содержимого, которое им следует ввести в каждом из полей.
Затем снова отредактируйте все тот же файл, добавив атрибут required в каждое поле формы, обязательное для
заполнения в Starbuzz Bean Machine (все поля «Доставить по адресу:»). Поскольку у beans и beantype имеются
значения по умолчанию, то будет ли на самом деле необходим атрибут required в случае с соответствующими
полями? Что произойдет, если вы удалите атрибут checked из beantype? Будет ли тогда нужен атрибут required?
Поэкспериментируйте с разными браузерами и выясните, какие из них поддерживают placeholder и required.
дальше 699
обзор форм
ÊËÞ×ÅÂÛÅ
ÌÎÌÅÍÒÛ
Элемент <form> определяет форму, и все ее элементы Типы email, url и tel создают однострочные тек-
вкладываются в него. стовые поля ввода, которые приводят к отображению
специальной клавиатуры в некоторых мобильных бра-
Атрибут action содержит URL-адрес серверного сце-
узерах для более легкого ввода данных.
нария.
Элемент <textarea> создает многострочное тексто-
Атрибут method задает метод отправки данных: POST
вое поле для ввода информации.
либо GET.
Элемент <select> создает меню, состоящее из од-
POST упаковывает данные формы и отсылает их как
ного или нескольких элементов <option>. Элемен-
часть запроса.
ты <option> определяют пункты меню.
GET упаковывает данные формы и присоединяет их
Если вы поместите какой-нибудь текст внутрь
к URL-адресу. <textarea>, то он по умолчанию будет отображаться
Используйте метод POST, если данные формы должны в соответствующем поле для ввода на веб-странице.
быть конфиденциальными. Кроме того, этот метод при- Атрибут value элемента <input> типа text может
меняется, если информации слишком много, например быть использован для указания текста, который будет
в форме использованы элементы <textarea> или изначально отображен в элементе управления для
элемент <input> типа file. ввода однострочного текста.
Используйте метод GET для таких запросов, на кото- Используя атрибут value для кнопки Submit (Отпра-
рые пользователь может ссылаться, а также создавать вить), можно изменить надпись на этой кнопке.
закладки.
Когда веб-форма представляется на рассмотрение,
Элемент <input> может создавать множество раз- значения ее данных ставятся в соответствие именам
личных элементов управления для ввода информа- элементов формы и все имена и значения отсылаются
ции на веб-странице в зависимости от значения его серверу парами.
атрибута type.
Для создания разметки форм часто применяется та-
Тип text создает элемент управления для ввода од- бличное представление CSS, если эти формы имеют
нострочного текста. табличную структуру. CSS также может использоваться
Тип submit создает кнопку Submit (Отправить). для задания цвета форм, стилей шрифтов, границ и др.
Тип radio создает одно положение переключателя. HTML позволяет структурировать элементы формы
Все положения, имеющие одинаковое имя, создают благодаря элементу <fieldset>.
переключатель. Элемент <label> может быть использован для до-
Тип checkbox создает один флажок на странице. бавления меток к элементам формы таким образом,
Вы можете создать целый набор флажков, задав не- чтобы было понятно, какая метка какому элементу
соответствует.
скольким флажкам одно и то же имя.
Используйте атрибут placeholder, чтобы обеспечить
Тип number создает однострочное текстовое поле,
для пользователей вашей формы подсказку относи-
предназначенное для ввода только чисел.
тельно типа содержимого, которое им следует ввести
Тип range создает палитру цветов в браузерах, кото- в то или иное поле.
рые его поддерживают (в противном случае он создает
Атрибут required дает понять, какое поле является
текстовое поле).
обязательным для заполнения, чтобы отправка формы
Тип date создает календарь в браузерах, поддержи- прошла корректно. Некоторые браузеры принуждают
вающих данный тип (в противном случае он создает пользователей вводить данные в такие поля перед
текстовое поле). отправкой формы.
700 глава 14
html-формы
<select> ...<select>
Выберите кофе: Домашняяяя см есь
<op <option>
tion> ...<o
Количество пакетиков:
кетиков:
<input type="number" ...>
азанной
Доставить к указанной
дате: ..>
<input type="date" ...>
ные услуги:
Дополнительные
чная<input
Подарочная упаковкаtype="checkbox" ...>
а кат
Доставка т <input
каталога вместе с заказом kbox" ...>
type="chec
дресу
Доставить по адресу
дальше 701
решение упражнений
"Áàêêàðó Áàíçàé"
name = __________________
zip = "90050"
___________________
"ñ îòêèäíûì âåðõîì"
model = _________________
"÷èëèéñêèé êðàñíûé"
color = _________________
"ïîëîñêè"
caroptions[] = __________
702 глава 14
html-формы
дальше 703
Разве не было бы здорово, если бы
это был самый конец книги? Если бы
не было никакого раздела «Повторим
выученное», никаких головоломок, HTML-
листингов или чего бы то ни было еще?
Но это больше похоже на фантастику...
Поздравляем!
Вы дошли до самого конца
Конечно же, есть еще приложение.
И выходные сведения.
И еще сайт...
705
дополнительные селекторы
Ïñåâäîýëåìåíòû
Вы уже все знаете о псевдоклассах, а псевдоэлементы очень на них похожи. Они могут
использоваться для выбора тех частей элемента, которые не получается окружить эле-
ментами <div> или <span>. Например, псевдоэлемент first-letter можно применять
для выбора первой буквы текста блочного элемента, что позволяет добавлять буквицы.
Вы можете использовать псевдоэлемент :first-line для выбора первой строки абзаца.
Рассмотрим, как используются оба этих элемента для выбора первой буквы и первой
строки элемента <p>:
Для псевдоэлементов исполь
зуется тот
же синтаксис, что и для псе
p:first-letter { вдоклассов.
font-size: 3em;
}
Здесь делаем первую букву абзаца
p:first-line { большой, а шрифт первой строки
font-style: italic; делаем курсивным.
}
Ñåëåêòîðû àòðèáóòîâ
Селекторы атрибутов работают соответственно их названию: это такие селекторы, с по-
мощью которых можно выбрать элементы по значениям их атрибутов. Они применяются
следующим образом:
706 приложение
приложение
Ниже приведен пример того, как можно создать достаточно сложный комбинированный
селектор. Давайте подробно разберем его.
(1)
1 Начните с определения содержимого элемента, который хотите выбрать, например, так:
Здесь мы используем селектор потомка,
в котором указывается, что элемент ‹div›
div#greentea > blockquote
с идентификатором greentea должен быть
родительским элементом для ‹blockquote›.
(2)
2 Затем укажите элемент, который хотите выбрать:
Далее мы добавляем ‹p› как тот элемент,
который нужно выбрать из контекста
div#greentea > blockquote p элемента ‹blockquote›. Элемент ‹p› должен быть
т потомком ‹blockquote›, который в свою очередь
м ен должен являться дочерним для элемента ‹div›
контекст эле
с идентификационным именем greentea.
(3)
3 Затем укажите псевдоклассы или псевдоэлементы:
контекст
мен
бавляем
Затем мы до
first-line,
эле
дальше 707
свойства, определяемые поставщиками
-moz-transform
Идентификатор постав-
Свойство
щика; здесь это moz, озна-
чающий «Mozilla».
Вы можете смело использовать определяемые поставщиками свойства, однако они не предна-
значены для обязательного применения в поставляемых на рынок программных продуктах:
определенное свойство может так и не стать легитимным стандартом либо поставщик может
изменить реализацию этого свойства в любой момент. С другой стороны, многим из нас тре-
буется возможность создавать страницы, задействующие самые новые и лучшие технологии,
однако, делая это, не забывайте, что вы используете свойства, которые могут измениться. Если
вы собираетесь использовать данные свойства, то часто будете писать следующий CSS-код:
о
аем общее свойств
Сначала мы указыв
поддерживается
на случай, если оно м.
div { живаться в будуще
либо будет поддер
transform: rotate(45deg);
-webkit-transform: rotate(45deg); Safari и Chrome
-moz-transform: rotate(45deg); Mozilla Затем мы ука-
-o-transform: rotate(45deg); Opera зываем извест-
-ms-transform: rotate(45deg);
Internet ные варианты,
}
Explorer определяемые
поставщиками.
708 приложение
приложение
№ 3. CSS-òðàíñôîðìàöèè è ïåðåõîäû
Используя CSS, вы теперь можете генерировать комплексные 2D и 3D-трансфор-
мации элементов. Вместо того чтобы говорить о них, давайте рассмотрим пример
(напечатайте приведенный далее код).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-трансформации и переходы</title> Вот базовый стиль для <div>
<style> с идентификатором box внизу…
#box { position имеет значение absolute (разве
position: absolute; теперь вы не рады тому, что оставались
top: 100px; с нами на протяжении всей главы, в кото-
left: 100px; рой шла речь о позиционировании?).
дальше 709
css-трансформации и переходы
2 секунды
710 приложение
приложение
№ 4. Èíòåðàêòèâíîñòü
HTML-страницы не обязательно должны быть пассивными документами: они могут иметь исполняемое
содержимое. Оно задает поведение для ваших страниц. Исполняемое содержимое создается посредством
написания программ или сценариев на языке сценариев под названием «JavaScript». Посмотрите на
следующий фрагмент кода, чтобы получить первое представление о том, как поместить исполняемое
содержимое на ваши страницы.
Это новый HTML- Мы применяем идентификатор формы,
элемент <script>, чтобы получить к ней доступ на JavaScript
го
с помощью которо для осуществления различных действий
ст ит ь код
<script> можно поме вроде определения того, что произойдет,
window.onload = init; прямо внутрь HTML. когда пользователь щелкнет на кнопке.
function init() {
var submitButton = document.getElementById("submitButton");
submitButton.onclick = validBid;
} Это небольшой сценарий на
function validBid() { JavaScript, который проверяет
if (document.getElementById("bid").value > 0) {
предлагаемую пользователям
document.getElementById("theForm").submit();
} else { цену, чтобы убедиться, что она
return false; Если пред лагае мая цена не равна 0 долларов и менее.
} окажется больше 0, то мы
} отправим форму; в против-
</script> ном случае мы не станем ее
отправлять, поскольку воз-
никнет ошибка.
дальше 711
другие вкусности html-5 Взаимодействуйте со страницами новыми
способами, применимыми в случае с настоль-
ными и мобильными устройствами.
№ 5. API-èíòåðôåéñû HTML5 è âåá-ïðèëîæåíèÿ
В дополнение к элементам, которые привносит стандарт
HTML5, он включает в себя целый новый набор интер-
фейсов прикладного программирования API (Application
Programming Interface), доступных благодаря JavaScript.
Данные API-интерфейсы открывают для ваших веб-страниц
целый новый мир выражений и функциональности. Давайте
взглянем на некоторые из этих возможностей…
, вы
Используя API-интерфейсы HTML5 и JavaScript
ую 2D-ри сован ие
сможете создавать поддерживающ
этом
поверхность прямо на своей странице, и при
не потребуются какие-либо плагины.
Кэшируйте данные
локально, исполь Для воспроизведения
зуя
браузерное хран видео больше не нужны
илище,
для ускорения ра специальные плагины.
боты
мобильных прил
ожений.
Создавайте собственные
элементы управления вос-
Интегрируйте свои страницы произведением, используя
с Google Maps и давайте пользова- HTML и JavaScript.
телям возможность отслеживать
их собственное перемещение
в режиме реального времени.
712 приложение
приложение
Используйте локальное
хранилище в браузере.
рмы
Зарядите свои фо
м Java Script,
посредство
ть насто-
чтобы обеспечи Создавайте веб-страницы,
ность.
ящую интерактив которые по-новому объеди-
няются с видео.
дальше 713
работа с веб-шрифтами
№ 6. Ïîäðîáíåå î âåá-øðèôòàõ
Нам бы хотелось уделить намного больше времени веб-шрифтам, и мы включили материал о них
в «Топ-10 тем, которые не были освещены в этой книге». Если вы используете веб-шрифты, то вам
следует узнать и изучить ряд дополнительных вещей, поэтому мы составили список из 10 важных
пунктов, которые вам следует знать о веб-шрифтах:
1. Существуют службы, которые облегчают применение веб-шрифтов, такие, например, как
Google Web Fonts (http://www.google.com/webfonts), Fonts.com (http://www.fonts.com/
web-fonts) и Extensis (http://www.extensis.com/).
2. Браузеры ведут себя по-разному, пока идет загрузка шрифтов. Одни браузеры отображают
резервный шрифт, в то время как другие дожидаются окончания загрузки требуемого шрифта,
прежде чем приступать к отображению текста.
3. Когда загрузка шрифта завершается, он кэшируется браузером и будет снова извлечен, когда
вы в следующий раз зайдете на страницу, в случае с которой задействуется данный шрифт.
4. Все современные браузеры (Internet Explorer версии 9 и выше) поддерживают Web Open
Font Format (WOFF), который, скорее всего, станет стандартом в сфере веб-шрифтов. Од-
нако Internet Explorer вплоть до версии 8 поддерживает другой стандарт шрифтов, чем все
прочие современные браузеры (.eot), и имеет дефект, из-за которого не может загружать
множественные шрифты (то есть вы не сможете указать более одного шрифта в своем правиле
@font-face). Если вам потребуется поддержка веб-шрифтов в Internet Explorer версии 8 и
ниже, то упоминавшиеся выше службы смогут избавить вас от беспокойства о данных про-
блемах с кроссбраузерной совместимостью.
5. Существует множество бесплатных шрифтов. Введите в поисковик фразу «бесплатные
шрифты», чтобы отыскать шрифты, которые вы сможете включить в свои веб-страницы
без необходимости что-либо платить.
6. Поскольку веб-шрифты являются действительно существующими шрифтами, вы можете
применять к ним любой стиль оформления точно так же, как и к традиционным шрифтам.
7. Использование веб-шрифтов может сказаться на скорости загрузки
страниц, однако считается оптимальной методикой и обычно обе-
спечивает более высокую скорость загрузки страниц, чем использо-
ьзо-
вание специальных графических изображений для типографики. ики.
8. Ограничивайте шрифты в своем правиле @font-face только ко
теми из них, что используются в случае с определенной страницей.
ей.
9. Если у вас имеются действующие лицензии на шрифты, то уз-
найте у своего поставщика, разрешается ли их использование
е
в веб-страницах.
10. Как и в случае с традиционными шрифтами, всегда включайте
резервный шрифт на случай, если шрифт вашей веб-страницы
окажется недоступен или при его извлечении или декодиро-
вании произойдет ошибка.
714 приложение
приложение
дальше 715
что вы можете делать с xhtml?
№ 8. XHTML5
Мы довольно жестко повели себя с XHTML в этой книге, при этом эра XHTML подошла к концу. Дело
в том, что когда дело касается XHTML, то под ним понимаются лишь версии XHTML 2 и ниже, кото-
рые уже мертвы, но вы можете писать свой HTML5-код, используя XHTML-стиль, если потребуется.
По какой причине? Что ж, вам может понадобиться осуществить валидацию или преобразование своих
документов в XML-формат либо обеспечить поддержку XML-технологий вроде SVG (в этом случае вы,
вероятно, уже будете знакомы с данной технологией), работающих с HTML.
Давайте взглянем на простой XHTML-документ, а затем пройдемся по наиболее важным аспектам (мы не
смогли привести здесь все, что вам необходимо знать по данной теме, поскольку, как и в случае со всем,
что касается XML, вы быстро запутались бы).
То же самое определение типа
документа, что и раньше! Это XML; нам необходимо добавить то,
что называется пространством имен.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
гра-
<head> Все элементы должны быть построены абсолютно
в конце
<title>Ты молодец!</title> мотно; обратите внимание на то, что идущее
/> служи т для закры тия
<meta charset="UTF-8" /> строки сочетание символов
Это XML- форм ат
</head> данного элемента без содержимого.
закрывающего тега элемента без содержимого .
<body>
<p>Мне вроде как нравится этот XHTML!</p>
<svg xmlns="http://www.w3.org/2000/svg"> В качестве примера
<rect stroke="black" fill="blue" x="45px" y="45px" мы используем SVG
для рисования прямо-
width="200px" height="100px" stroke-width="2" />
угольника на нашей
</svg>
Мы можем вложить XML странице. Здесь важны
</body>
прямо в код страницы! не детали, а то, что
</html> И это очень здорово. это XML-формат,
«обитающий» внутри
Вот ряд вещей, которые вам необходимо учитывать в случае со своими XML, а не HTML.
XHTML-страницами:
Закрытие всех
XHTML вашей страницы должен быть грамотно написан.
элементов, кавыч-
Ваша страница должна загружаться с использованием MIME-типа ки вокруг значений
application/xhtml+xml; для этого вам потребуется удостовериться, атрибутов, допу-
что ваш сервер обеспечивает именно этот тип (проверьте это самостоя-
стимое вложение
тельно либо свяжитесь с администратором используемого вами сервера).
элементов и прочее.
Обязательно включите пространство имен XHTML в свой элемент <html>
(что мы и сделали чуть ранее).
Как уже отмечалось, в случае с XML существует масса дополнительных вещей,
о которых нужно знать, а также множество вещей, на которые следует обращать
особое внимание. И, как и всегда в случае с XML, да пребудет с вами сила…
716 приложение
приложение
№ 9. Ñåðâåðíûå ñöåíàðèè
Многие сайты не создаются вручную, а генерируются приложениями, работающими на
сервере. Например, представьте себе систему для онлайн-заказов, в которой сервер генери-
рует страницы по мере того, как вы проходите все стадии заказа, или форум, где имеются
страницы, сгенерированные сервером и основанные на сообщениях форума, которые
хранятся в какой-то базе данных. Для обработки формы, которую вы создали в главе 14 для
Starbuzz Bean Machine, мы также использовали серверное приложение.
Многие хостинговые компании позволяют создавать собственные серверные приложения
путем написания серверных сценариев и программ. Рассмотрим, что можно сделать с их
помощью.
Создать интернет-магазин, в котором будет представлен перечень предлагаемых
товаров, а также предусмотрена система заказа в режиме онлайн и возможность
рассчитаться кредитной картой.
Персонализировать ваши страницы для пользователей по их предпочтениям.
Размещать на странице последние новости, события и информацию.
Позволять пользователям искать сайт.
Давать посетителям возможность помогать вам в создании сайта.
Для создания серверных приложений вам нужно знать определенный серверный язык
сценариев или язык программирования. Существует множество конкурирующих языков,
и вы, скорее всего, услышите разные мнения о достоинствах и недостатках каждого из них.
На самом деле веб-языки имеют нечто общее с автомобилями: вы можете ездить на чем
угодно, начиная с Prius и заканчивая Hummer, и каждая модель будет иметь свои сильные
и слабые стороны (цена, простота использования, размер, экономия и т. д.).
Веб-языки постоянно развиваются и совершенствуются. PHP, Python, Perl, Node.js, Ruby
on Rails и Java Server Pages (JSP) — это наиболее часто применяемые языки. Если вы нови-
чок в программировании, то обратите внимание на PHP, использующийся в миллионах
веб-страниц. Это, наверное, самый простой язык, который подойдет для начинающего
разработчика. Если вы уже имеете какой-то опыт в программировании, попробуйте писать
на JSP или Python. Если вы более ориентированы на технологии Microsoft, вам, возможно,
лучше обратиться к VB.net и ASP.net в качестве серверного решения. А если вы предпочи-
таете JavaScript, то используйте Node.js ради абсолютно нового подхода.
дальше 717
воспроизведение аудио
718 приложение
Выходные сведения
К числу мест, где проходило написание данной книги, относятся следующие: остров
Бейнбридж, штат Вашингтон; Портленд, штат Орегон; Сисайд, штат Флорида; Лексингтон,
штат Кентукки. На протяжении долгих дней, пока мы писали эту книгу, нам придавали
силы напитки без кофеина и «Brew Dr. Kombucha», а также музыка таких исполнителей,
как Foster the People, B-52s, Duran Duran, Дэвид Боуи, Уильям Шатнер, Элвис Пресли, Pink
Floyd, Genesis, Simple Minds, Ratt, Skid Row, Men without Hats, Men at Work, Berlin, Стив
Роач, Том Вейтс, Beyman Brothers, а также музыка исполнителей 1980-х годов, которые
вас, возможно, не заинтересуют.
А вы знаете о нашем веб- Мы не прощаемся с вами
сайте? Там приводятся ответы
на некоторые вопросы из этой Захотите на сайт
книги, руководства, из которых можно
wickedlysmart.com
научиться дополнительным вещам,
а также ежедневные обновления
в блоге от авторов!