Привет, Хаброжители! У нас вышла новая обновленная книга Дэвида Макфарланда:
Технология CSS3 позволяет создавать профессионально оформленные сайты, но тонкости этого языка могут оказаться довольно сложными даже для опытных веб-разработчиков. Полностью переработанное четвертое издание этой книги поможет вам поднять навыки работы с HTML и CSS на новый уровень; она содержит множество ценных советов, описаний приемов, а также инструкции, написанные в стиле справочного руководства. Веб-дизайнеры, как начинающие, так и опытные, при помощи этой книги быстро научатся создавать красивые веб-страницы, которые при этом молниеносно загружаются как на ПК, так и на мобильных устройствах.
Что необходимо знать
Эта книга предполагает, что вы уже знакомы с языком HTML. Подразумевается, что вы создали пару сайтов (или по крайней мере несколько веб-страниц) и знакомы с основными элементами, такими как html, p, h1, table, составляющими основу языка гипертекстовой разметки документов. CSS бесполезен без HTML, поэтому вы должны знать, как создать простейшую веб-страницу с использованием основных HTML-элементов.
Если вы раньше создавали веб-страницы на HTML, но чувствуете, что знания требуется освежить, вам поможет следующий раздел книги.
HTML: структура языка
В языке гипертекстовой разметки HTML используются простые команды, именуемые тегами, для определения различных частей — фрагментов. Ниже приведен HTML-код простой веб-страницы:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Это заголовок веб-страницы</title> </head> <body> <p>А это абзац этой веб-страницы</p> </body> </html> Конечно, пример очень простой, но демонстрирует все основные элементы, необходимые обычной веб-странице. В нем вы заметите то, что называется объявлением типа документа — doctype, за ним следует открывающий тег (со скобками), потом элемент head (голова, раздел заголовка), следом body (тело, раздел тела), а в нем непосредственно содержимое веб-страницы. Все это завершается закрывающим тегом . Открывающий и закрывающий теги образуют HTML-элемент.
Типы документов
Все веб-страницы начинаются с объявления типа документа — строки кода, определяющей разновидность HTML, которой вы пользовались при написании страницы. В течение многих лет использовались два типа документов — HTML 4.01 и XHTML 1.0, и каждый из них имеет два стиля: строгий и переходный. Например, объявление переходного типа документа HTML 4.01 имеет следующий вид (другие объявления типа документа для HTML 4.01 и XHTML 1.0 выглядят примерно так же):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!doctype html> Если посмотреть на код примера HTML-страницы, показанный в этом разделе, то вы увидите, что в нем используется краткая форма объявления типа документа:
<!doctype html> Объявление типа документа появилось в языке HTML5. По сравнению с предшественниками, в HTML5 заложена простота и рациональность использования. В этой книге применяется объявление типа документа из HTML5, поддерживаемое любым популярным браузером (даже старым Internet Explorer 6). Применять другие объявления, отличные от простого doctype из HTML5, не имеет смысла.
Независимо от предпочитаемого типа документа, объявляемого с помощью doctype, важно, чтобы использовалось объявление хотя бы одного из них. Без этого ваши страницы будут выглядеть по-разному в зависимости от браузера вашего посетителя, поскольку браузеры, не имеющие в качестве руководства объявления типа документа, по-разному отображают информацию, форматированную с помощью CSS.
Каждое объявление типа документа требует от вас написания HTML-кода определенным образом. Например, элемент для разбиения строк имеет в HTML 4.01 следующий вид:
<br> Но в XHTML у этого элемента такой вид:
<br /> И здесь проявляется еще одно преимущество HTML5: он допускает применение любого из этих вариантов.
Как работают HTML-элементы
HTML-элементы состоят из тегов. В приведенном выше примере, как и в HTML-коде любой веб-страницы, большинство элементов используют пары тегов, начиная и завершая какой-то фрагмент — блок текста или другие команды. Будучи заключенными в скобки, эти теги представляют собой команды, которые говорят браузеру, каким образом отображать веб-страницу. Теги являются «разметочной» (markup) частью гипертекстового языка разметки — Hypertext Markup Language.
Открывающий тег каждого элемента показывает браузеру, где команда начинается, а заканчивающий — где заканчивается. Закрывающий тег всегда предваряется прямым слешем (/) после первого символа скобки (<).
На любой веб-странице обычно имеются как минимум следующие четыре HTML-элемента.
— Самая первая строка примера содержит объявление типа документа — элемент doctype, рассмотренный в предыдущем разделе.
— Тег требуется в начале веб-страницы и (с добавленным слешем) в конце: . Элемент html сообщает браузеру, что документ является программным кодом на языке HTML. Все содержимое страницы, включая остальные элементы, находится между открывающим и закрывающим тегами элемента html.
Если представить веб-страницу в виде дерева, то элемент html будет его стволом. Две основные части любой веб-страницы — раздел заголовка и тело — представляют собой ветви.
— Раздел заголовка веб-страницы (head) содержит ее название. Здесь также может содержаться другая информация, не отображаемая при просмотре веб-страницы, например описание страницы, которая предназначена для браузеров и поисковых машин. Раздел заголовка заключается в открывающий и закрывающий теги элемента head.
Кроме того, раздел заголовка может содержать информацию, используемую браузером для оформления HTML, имеющегося на странице, и для придания странице интерактивности. Вы увидите, что раздел заголовка может содержать код CSS (вроде того, который вы будете учиться создавать) или ссылку на другой файл, содержащий таблицу стилей.
— Тело веб-страницы, следующее непосредственно за разделом заголовка и заключенное в теги элемента body, содержит все, что должно появиться в окне браузера: заголовки, текст, изображения и т. д.
Внутри тела страницы, как правило, можно найти следующие элементы:
элемент p — открывающий тег начинает абзац, а закрывающий завершает;
элемент strong — выделяет текст как важный; например, код
<strong>Внимание!</strong> сообщит браузеру о том, что слово «Внимание!» должно быть выделено;
элемент a, или элемент привязки, — создает гиперссылку, при щелчке на которой можно переместиться в другую позицию веб-страницы или на другую страницу (нужно указать браузеру эту ссылку путем размещения ее внутри открывающего тега
<a>, например <a href="http://www.piter.com/">Щелкните здесь!</a>) Браузер знает, что при щелчке кнопкой мыши на ссылке со словами Щелкните здесь! посетитель вашей страницы должен перейти на сайт с адресом www.piter.com. Часть тега a — слово href — называют атрибутом, а URL (унифицированный указатель ресурса, или URL-адрес) является его значением. В этом примере
http://www.piter.com — значение атрибута href.
HTML5: больше элементов
HTML5, актуальная версия языка HTML, существует уже несколько лет. Иногда вы будете слышать названия, не относящиеся к HTML-элементам, например локальные хранилища (способ хранения данных с сайта на компьютере посетителя), геолокация (способ определения координат компьютера посетителя) и рисование на веб-странице с помощью библиотеки WebGL. Строго говоря, эти технологии не являются частью HTML, но они относятся к новым возможностям браузера, появившимся вместе с HTML5.
В этой книге термин HTML5 всегда относится к типу документа HTML5, а также к новым элементам, являющимся частью нового стандарта HTML5. HTML5 не несет каких-либо кардинальных отличий от своих предшественников — его целью является забота о том, чтобы Всемирная паутина продолжала работать так же, как и прежде, поддерживая новые потребности дизайнеров. В версии HTML5 были добавлены новые элементы. Например, элемент header может включать в себя содержимое, которое обычно встречается в верхней части страницы, — логотип и общие для всего сайта навигационные ссылки. Новый элемент nav заключает в себе набор ссылок, использующихся для навигации по сайту, а элемент footer размещает в себе все, что обычно помещается в нижней части страницы, например юридическую информацию, контакты по электронной почте и т. д.
Кроме того, в HTML5 добавлены новые элементы, позволяющие внедрять на страницу видео- и аудиоконтент, и новые элементы формы, добавляющие такие сложные компоненты, как ползунковые регуляторы, всплывающие панели выбора даты, а также встроенную браузерную поддержку проверки допустимости данных, введенных в форму (которая гарантирует правильное заполнение ваших форм посетителями). На протяжении всей книги, особенно в следующей главе, вы будете встречать примеры использования языка HTML5.
Об этой книге
Эта книга написана так, чтобы помочь читателям любого уровня. Для извлечения максимальной пользы из материала вы обязательно должны учиться на приведенных примерах HTML и CSS. Если же вы никогда раньше не создавали веб-страницы, то обратитесь к практикуму в конце главы 2. Материал, содержащийся в этих главах, написан для тех, кто уже немного освоился в данной области и имеет средний уровень знаний. Если же вы плохо знаете принципы создания веб-страниц, то для лучшего понимания освещаемой темы должны ознакомиться с текстом врезок «В курс дела!». С другой стороны, если у вас имеется большой опыт создания веб-страниц, обратите внимание на врезки «Для опытных пользователей». Они содержат подсказки, приемы и методы для опытных программистов.
Основные разделы книги. Книга разделена на пять частей. Первые четыре части содержат по несколько глав, а последняя часть состоит из приложений.
Часть I. Основы CSS. Здесь описано создание каскадных таблиц стилей в целом и дан краткий обзор ключевых понятий, таких как наследование, селекторы и каскадность таблиц стилей. Попутно с изучением CSS вы получите основные навыки написания HTML-кода. Практикумы закрепят вводимые в главах основные понятия и позволят вам почувствовать эффективность использования CSS.
Часть II. Применение CSS. Перенесет вас в реальный мир веб-дизайна. Вы изучите наиболее важные свойства CSS и их использование для форматирования текста, попрактикуетесь в создании полезных инструментов навигации и сможете улучшить внешний вид своих экспериментальных веб-страниц, добавив графику. Вы также узнаете о том, как с помощью CSS создавать простую анимацию. Эта часть также содержит рекомендации о том, как создавать красивые таблицы и формы.
Часть III. Верстка страниц с помощью CSS. Поможет вам разобраться с самой запутанной, но очень полезной функцией CSS: с управлением размещением элементов на вашей странице. Вы познакомитесь со схемами дизайна (размещение контента в две и три колонки) и узнаете, как добавить боковые панели. Будет рассказано о двух основных методах позиционирования элементов на странице:
абсолютном и относительном. Вы также научитесь создавать сайты, адаптируемые для лучшего восприятия в браузерах настольных систем, планшетных компьютеров и мобильных устройств, и применять flexbox — новый мощный инструмент для создания макета веб-страниц.
Часть IV. Профессиональные приемы CSS-верстки. Содержит советы от профессионалов по улучшению ваших каскадных таблиц стилей, а также расскажет о Sass — мощном и эффективном способе верстки таблиц стилей.
Часть V. Приложения, включая два справочника. Справочник свойств CSS описывает каждое свойство в отдельности в простой и доступной форме, чтобы вы могли быстро узнать о полезных свойствах CSS, которые раньше вам могли не попадаться, или быстро освежить в памяти уже знакомые свойства. Во втором приложении приводится описание инструментов и средств для создания и применения каскадных таблиц стилей.
Об авторе
Дэвид Макфарланд (David McFarland) — веб-разработчик, преподаватель и автор. Создает сайты с 1995 года: именно тогда он разработал свой первый проект — онлайн-журнал для специалистов в области коммуникаций.
Дэвид преподавал веб-дизайн в Высшей школе журналистики в Беркли, Центре электронного искусства (Electronic Art) и Государственном университете Портленда. В настоящий момент он главный преподаватель на сайте онлайн-образования Treehouse.
О творческой команде
Нэн Барбер (Nan Barber) — редактор серии книг Missing Manuals («Исчерпывающее руководство»). Живет в Массачусетсе вместе со своим мужем. Ее электронный адрес: nanbarber@oreilly.com.
Мелани Ярброух (Melanie Yarbrough) — литературный редактор и композитор. Проживает и трудится в Кембридже, штат Массачусетс. Увлекается выпечкой и любит совершать прогулки на велосипеде вокруг города. Ее электронный адрес: myarbrough@oreilly.com.
Молли Ивс Бровер (Molly Ives Brower) — внештатный редактор и корректор. Любит Интернет с тех пор, как в 1990 году получила адрес BITNET. В наше время ее можно найти на сайте mjibrower.com или в социальной сети Twitter, где она известна под ником @vintagereader. Ее электронный адрес: molly@mjibrower.com.
Рон Штраус (Ron Strauss) — составитель алфавитного указателя. Специализируется на составлении указателей для различных книг, посвященных информационным технологиям. Рон также талантливый скрипач. Он живет в Северной Калифорнии со своей женой и по совместительству коллегой Энни и карликовым пинчером Кенгой. Адрес электронной почты: rstrauss@mchsi.com.
Рич Костер (Rich Koster) — бета-ридер. Купил свой первый компьютер Mac (17-дюймовый MacBook Pro) в 2009 году и больше никогда не переходил на сторону пользователей Windows. В третьем издании книги «iPhone. Исчерпывающее руководство» Рич выступил техническим редактором. Он женат, воспитывает детей и в свободное время поддерживает собственноручно созданный сайт Disney Echo.
Более подробно с книгой можно ознакомиться на сайте издательства
Оглавление
Отрывок
Для Хаброжителей скидка 25% по купону — CSS
По факту оплаты бумажной книги отправляем на e-mail электронные версии книг, при покупке электронной книги — все доступные версии отправляются пользователям.
ссылка на оригинал статьи https://habrahabr.ru/post/280828/
Добавить комментарий