Робсон Э., Фримен Э. Изучаем HTML, XHTML и CSS 2-е издание Серия «Head First O’Reilly» Перевел с английского В. Черник Заведующий редакцией Научный редактор Художник Корректор Верстка Д. Виницкий В. Черник Л. Адуевская Н. Викторова Е. Леля -018 Робсон Э., Фримен Э. Ф88 Изучаем HTML, XHTML и CSS. 2-е изд. — СПб.: Питер, 2014. — 720 с.: ил. — (Серия «Head First O’Reilly»). Устали от чтения книг по HTML, которые понятны только специалистам в этой области? Тогда самое время взять в руки второе издание «Изучаем HTML, XHTML и CSS». Хотите изучить HTML, чтобы уметь создавать веб-страницы, о которых вы всегда мечтали? Так, чтобы более эффективно общаться с друзьями, семьей и привередливыми клиентами? Тогда эта книга для вас. Прочитав ее, вы изучите все секреты создания веб-страниц. Вы узнаете, как работают профессионалы, чтобы получить визуально привлекательный дизайн, и как максимально эффективно использовать HTML, CSS и XHTML, чтобы создавать такие веб-страницы, мимо которых не пройдет ни один пользователь. Используя новейший стандарт HTML5, вы сможете поддерживать и совершенствовать свои веб-страницы в соответствии с современными требованиями, тем самым обеспечивая их работу во всех браузерах и мобильных устройствах. 12+ ( от 29 декабря 2010 г. № 436-ФЗ.) англ. Authorized Russian translation of the English edition of Head First HTML and CSS, 2nd Edition ( ). 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. © Перевод на русский язык ООО Издательство «Питер», 2014 © Издание на русском языке, оформление ООО Издательство «Питер», 2014 получены по соглашению с O’Reilly. Все права защищены. не может быть воспроизведена в какой бы то ни было форме владельцев авторских прав. Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как надежные. Тем не менее, имея в виду возможные человеческие или технические ошибки, издательство не может гарантировать абсолютную точность и полноту приводимых сведений и не несет ответственности за возможные ошибки, связанные с использованием книги. ООО «Питер Пресс», 192102, Санкт-Петербург, ул. Андреевская (д. Волкова), 3, литер А, пом. 7Н. Налоговая льгота — общероссийский классификатор продукции ОК 005-93, том 2; 95 3005 — литература учебная. . /16. Усл. п. л. 75,600. . Заказ 0000. Отпечатано в полном соответствии с качеством предоставленных издательством материалов в ГППО «Псковская областная типография». 180004, Псков, ул. Ротная, 34. зерами. Войны между брау в главе 6. Читайте об этом Посвящается Консорциуму Всемирной паутины (W3C) за прекращение войн между браузерами и четкое разграничение структуры (HTML) и презентации (CSS)… Для того чтобы грамотно исполwьзовать HTML и CSS в комплексе, необходимо прочитать эту книгу. авторы Îá àâòîðàõ Эрик Фрим an) (Eric Freem обсон Элизабет Р obson) (Elisabeth R Одна из основоположников серии «Head First» Кэти Сьерра так характеризует Эрика: «Один из редких людей, которые одинаково хорошо владеют языком, практическими навыками и знаниями культуры в разных областях, будь то сфера, в которой орудует хакер-хипстер, работает корпоративный вице-президент, проектировщик или эксперт-аналитик». Элизабет совмещает деятельность проектировщика программного обеспечения, писателя и инструктора. Увлекаться технологиями она начала еще во время учебы в Йельском университете, где получила степень магистра компьютерных наук и занималась разработкой языка параллельного визуального программирования и программной архитектуры. В профессиональном плане Эрик недавно подошел к почти десятилетней отметке в качестве должностного лица в медиакомпании: он занимает пост главного технического директора Disney Online & Disney.com в Walt Disney Company. В настоящее время Эрик занят WickedlySmart – стартапом, который он организовал совместно с Элизабет. Элизабет увлеклась созданием веб-приложений на самом раннем этапе существования Интернета; она участвовала в создании заслужившего признание веб-сайта The Ada Project, который стал одним из первых ресурсов, призванных помочь женщинам, занятым в сфере информатики, отыскать онлайн карьерную информацию, а также другие полезные сведения. По образованию Эрик — ученый в области компьютерных наук, и ему довелось заниматься научными исследованиями с таким светилом, как Дэвид Джелернтер (David Gelernter), во время его деятельности как доктора философии в Йельском университете. Его диссертация была охарактеризована как плодотворный труд в сфере поиска альтернатив «метафоре рабочего стола», а также как первая реализация потоков активности — концепции, которую он разработал совместно с доктором Джелернтером. Она является одним из основателей WickedlySmart – образовательного онлайн-ресурса, посвященного веб-технологиям, где можно отыскать ее книги, статьи, видео и пр. Ранее, когда она была руководителем специальных проектов в O’Reilly Media, Элизабет лично проводила семинары и онлайн-лекции на разные технические темы, создавала образовательные ресурсы, помогающие людям разобраться в технологиях. До сотрудничества с O’Reilly Media Элизабет довелось поработать в Walt Disney Company, где она отвечала за руководство исследованиями и разработками в сфере цифрового медиа. В свободное время Эрик серьезно увлечен музыкой; результат последнего проекта Эрика, над которым он работал в сотрудничестве с пионером музыкального стиля «эмбиент» Стивом Роачем (Steve Roach), имеется в электронном магазине приложений для iPhone и называется «Immersion Station». Местом жительства Эрика, его жены и маленькой дочери является остров Бейнбридж. Его дочь часто посещает студию Эрика, где ей нравится играть с переключателями на синтезаторе звуков и создавать аудиоэффекты. Электронные письма Эрику направляйте по адресу eric@ wickedlysmart.com, посетите его сайт Когда Элизабет не сидит за компьютером, она любит совершать длительные прогулки, кататься на велосипеде, сплавляться на байдарке, снимая все на камеру, а также готовить вегетарианские блюда. Электронные письма Элизабет направляйте по адресу beth@ wickedlysmart.com, а также посетите ее блог на сайте http:// elisabethrobson.com. Содержание (сводка) Введение Язык Сети. Знакомство с HTML Знакомство с гипертекстом. Идем дальше — используем гипертекст Конструирование веб-страниц. Строительные блоки Путешествие в Webville. Соединение Знакомство с медиа. Добавление изображений на страницы Серьезный HTML. Стандарты Начнем работать над дизайном. Приступаем к работе с CSS Увеличиваем словарный запас. Меняем шрифты и цвета Познакомимся с элементами поближе. Блочная модель Современная веб-конструкция. Элементы div и span Расставим элементы по местам. Разметка и позиционирование Современный HTML. HTML5-разметка Представление в табличной форме. Таблицы и большие списки Переход на интерактивный режим. HTML-формы Приложение. Топ-10 тем, которые не были освещены в этой книге Содержание (настоящее) Введение Поведение вашего мозга при изучении HTML и CSS. Когда вы пытаетесь что-либо выучить, ваш мозг неустанно следит за тем, чтобы процесс изучения не остановился. Он думает: «Лучше оставить место для более важной информации, чтобы, например, знать, встречи с какими дикими животными следует избегать. Или знать, что катание на сноуборде без специального снаряжения — не самая удачная идея». Как же убедить свой мозг в том, что для вас так же важно знать HTML и CSS? Для кого написана эта книга? Метапознание: учимся учиться Вот что МЫ делали А вот что можете сделать ВЫ, чтобы заставить свой мозг работать Примите к сведению Технические рецензенты (первое издание) Благодарности (первое издание) Технические рецензенты (второе издание) Благодарности (второе издание) содержание Язык Сети Единственное, что необходимо для того, чтобы успешно работать в Сети, — научиться говорить на ее специфическом языке: HyperText Markup Language (язык гипертекстовой разметки), или сокращенно HTML. Итак, приготовьтесь к нескольким урокам языка. После этой главы вы не только узнаете некоторые базовые понятия HTML, но и сможете разговаривать на этом языке, используя определенный стиль. Черт возьми, к концу этой книги вы сможете говорить на языке HTML так, будто выросли в Сети! Видео убило радиозвезду Что делает веб-сервер Что делает браузер Что пишете вы (HTML-код) Что создает браузер Большая перемена в кафе Starbuzz Создание веб-страницы для Starbuzz Создание HTML-файла (Mac) Создание HTML-файла (Windows) Между тем вернемся к кафе Starbuzz Сохранение работы Открытие веб-страницы в браузере Тестирование страницы Еще один тест Разделение тегов Познакомьтесь с элементом