задано два параметра. Первый
параметр BORDER указан без значения. Второй параметр ALIGN имеет значение left.
В последующих главах первой части книги будет описано назначение
тегов языка HTML и их параметров. В общем, теги могут иметь различные параметры,
однако существует ряд параметров, единых практически для всех тэгов. Упомянем
здесь общие параметры тэгов, чтобы более не говорить о них при описании каждого
тэга.
Все тэги, которые допустимо использовать в разделе
документа HTML, могут иметь параметры CLASS, ID, LANG, LANGUAGE, STYLE и TITLE.
Использование этих параметров полезно, прежде всего, при стилевом оформлении
документов, речь о котором пойдет во второй части книги.
Параметры CLASS, ID, STYLE поддерживаются Internet Explorer,
начиная с версии 3.0, и Netscape, начиная с версии 4.0. Эти параметры нужны
при использовании стилей.
Параметры LANG, LANGUAGE, TITLE - поддерживаются только
Internet Explorer, начиная с версии 4.0. Эти параметры указывают, соответственно,
используемый язык (например, для России: LANG=ru), язык записи скриптов (например,
LANGUAGE=JavaScript), а также текст подсказки, выдаваемой при наведении указателя
мыши на данный элемент (TITLE).
В современном HTML, помимо тегов языка и их содержимого,
в исходном HTML-коде также записываются коды сценариев (javascript или VBScript).
В первой части книги об этом практически нигде не упоминается, зато часть вторая
целиком посвящена вопросам использования сценариев.
Завершая общий обзор HTML, отметим, что простейшие HTML-документы
представляют собой обычные текстовые файлы, для просмотра и редактирования которых
можно воспользоваться любым текстовым редактором. Эти файлы обычно имеют расширение
НТМ или HTML.
Спецификации HTML
Язык HTML приобрел популярность в середине 90-х годов,
благодаря экспоненциальному росту сети Интернет. К этому времени назрела необходимость
стандартизации языка, поскольку различные компании, разрабатывавшие программное
обеспечение для доступа в Интернет, предлагали свои
варианты инструкций HTML, число которых все возрастало
и возрастало. Настала пора прийти к какому-то единому соглашению в части применения
тегов языка HTML.
Работу по созданию спецификации HTML взяла на себя организация,
называемая World Wide Web Consortium (сокращенно - W3C). В ее задачу входило
составление спецификации, отражающей современный уровень развития возможностей
языка с учетом разнообразных предложений компаний-разработчиков браузеров. Так,
в ноябре 1995 г. появилась спецификация HTML 2.0, призванная формализовать сложившуюся
к концу 1994 г. практику использования HTML.
Схема утверждения спецификаций состоит в следующем. Консорциум
W3C выпускает проект спецификации, после обсуждения которого выпускается так
называемый черновой, рабочий (draft) вариант спецификации и предлагает его к
обсуждению на определенный период. После периода обсуждения рабочий вариант
спецификации может стать рекомендацией, т. е. официально признанным вариантом
спецификации HTML.
Вскоре после спецификации 2.0 была выпущена рабочая версия
спецификации 3.0, срок окончания периода обсуждения которой истек в сентябре
1995 г. Эта спецификация так и не была принята в качестве официальной рекомендации.
В нее планировалось включить большое разнообразие тегов и возможностей, специфичных
для отдельных браузеров, однако Консорциум W3C не нашел возможности разработать
хорошую спецификацию для такого большого числа инструкций.
После долгих размышлений в мае 1996 г. был выпущен проект
HTML 3.2. Проект основывался на части тэгов, имеющихся в версии 3.0, которые
показывали стабильность в работе. В сентябре 1996 г. после нескольких месяцев
обсуждения версия 3.2 стала предлагаемой спецификацией, а в январе 1997 г. -
официальной рекомендацией.
Июль 1997 года ознаменовался выходом предлагаемой спецификации
HTML 4.0, которая в декабре 1997 г. стала официальной рекомендацией. На сегодняшний
день это последняя из принятых спецификаций.
В приводимом здесь кратком обзоре истории развития языка
HTML вряд ли стоит детально описывать особенности различных спецификаций, тем
более, что в реальной жизни разработчики далеко не всегда следуют рекомендациям
Консорциума. Отметим лишь некоторые идеи, заложенные в основу последней спецификации.
В спецификации HTML 4.0 ключевой идеей стало отделение
описания структуры документа от описания его представления на экране монитора.
Опыт показывает, что разделение структуры и представления документа уменьшает
затраты на поддержку широкого спектра платформ, сред и т. п., а также облегчает
внесение исправлений в документы. В соответствии с этой идеей следует шире пользоваться
методами описания представления
документа с помощью таблиц стилей, вместо того, чтобы задавать
конкретные данные о форме представления вперемешку с содержанием документа.
Для реализации этой идеи в спецификации HTML 4.0 ряд тэгов, используемых для
непосредственного задания формы представления HTML-элементов, отменены. К отмененным
по этой причине тэгам относятся , , ,
, , . Среди других отмененных тегов отметим
, , , . Вместо отмененных
тегов предлагаются альтернативные варианты реализации соответствующих возможностей,
на что мы обращаем особое внимание в этой книге.
Понятие отмененного (deprecate) тега состоит в следующем.
Если в данной спецификации языка тег назван отмененным, то это означает, что
браузеры должны пока продолжать поддержку таких тэгов, но их использование не
рекомендуется. В следующих спецификациях эти тэги, возможно, будут переведены
в разряд устаревших (obsolete). Устаревшие теги могут более не поддерживаться
браузерами. В спецификации HTML 4.0 устаревшими названы всего три тэга: ,
И . Информацию о том, какие из тегов включены
в спецификацию, можно получить из таблицы, приводимой в приложении П1 .
Официальные сведения о спецификации HTML всегда можно получить
с Web-сайта Консорциума W3C по адресу http://www.w3.org/TR/
. Спецификация
4.0 находится по адресу http://www.w3.org/TR/REC-htmI40-971218
.
Заметим, что по логике вещей официальная спецификация должна
играть роль руководящей и направляющей силы, обеспечивая одинаковую форму представления
информации различными браузерами. Это идеальный вариант, к которому следует
стремиться. На деле все обстоит не так хорошо. Постоянно появляются новые идеи,
реализуемые компаниями-разработчиками в своих браузерах и пропагандируемые ими.
Удачные идеи приживаются, а затем подхватываются другими разработчиками. Часть
возможностей так и остается специфическими особенностями отдельного браузера.
Удачные разработки в итоге попадают в спецификацию и становятся общепринятыми.
Таким образом, процесс усовершенствования возможностей браузеров и уточнения
спецификации идет непрерывно, оказывая взаимное влияние друг на друга.
Структура документа
Первым тэгом, с которого следует начинать описание документов
HTML, является тег . Он должен всегда начинать описание документа,
а завершать описание документа должен тег . Эти теги обозначают,
что находящиеся между ними строки представляют единый HTML-документ. Сам по
себе документ является обыкновенным текстовым ASCII-файлом. Без этих тегов браузер
или другая программа просмотра, возможно, будет не в состоянии идентифицировать
формат документа и правильно его интерпретировать.
Чаще всего тег используется без параметров.
В предыдущих версиях использовался параметр VERSION, отмененный спецификацией
HTML 4.0
. На смену этому параметру пришел тег .
Большинство современных браузеров могут опознать документ
и не содержащий тегов и , все же их употребление крайне
желательно.
Между парой тегов и располагается
сам документ. Документ может состоять из двух разделов - раздела заголовка (начинающийся
тэгом ) и раздела содержательной части документа (начинающийся тэгом
). Для документов, описывающих фреймовые структуры, вместо раздела
BODY используется раздел FRAMESET (с тэгом ). Далее будут рассмотрены
правила составления разделов документа HEAD и BODY. Построение документов, содержащих
фреймы, рассматривается в главе 5.
Раздел документа HEAD
Раздел документа HEAD определяет его заголовок и не является
обязательным тэгом, однако хорошо составленный заголовок может быть весьма полезен.
Задачей заголовка является представление необходимой информации для программы,
интерпретирующей документ. Тэги, находящиеся внутри раздела HEAD (кроме названия
документа, описываемого с помощью тега ), не отображаются на экране.
Раздел заголовка открывается тэгом . Обычно
этот тег следует сразу же за тэгом . Закрывающий тег
показывает конец этого раздела. Между упомянутыми тэгами располагаются остальные
теги раздела заголовка.
Название документа
Тэг-контейнер является единственным обязательным
тэгом заголовка и служит для того, чтобы дать документу название. Оно обычно
показывается в заголовке окна браузера. Тег нельзя путать с названием
файла документа; напротив, он представляет собой текстовую строку, совершенно
независимую от имени и местоположения файла, что делает его весьма полезным.
Имя же файла жестко определяется операционной системой компьютера, на котором
он хранится. Также следует отличать название документа (с тэгом )
от заголовков внутри документа, обычно размечаемых тэгами .
Примечание
Обязательность названия документа, вообще говоря, носит
характер настоятельной рекомендации. Документ без тега также будет
отображаться браузерами. При этом различные браузеры в качестве заголовка окна
будут выдавать различную информацию. Так ранние версии браузера Netscape выдавали
строчку "No title". Другие браузеры либо не показывают ничего, либо
отображают адрес загруженного файла, повторяя информацию панели Location браузера.
Название документа записывается между тэгами
и и представляет собой строку текста. В принципе, название может
иметь неограниченную длину и содержать любые символы,
кроме
некоторых зарезервированных. На практике следует ограничиться одной строкой,
имея в виду, что название появляется в заголовке окна браузера. Также следует
помнить о том, что останется от названия документа при минимизации окна браузера.
Можно рекомендовать ограничивать длину названия документа 60 символами. Увидеть,
как отображается название в окне браузера, можно на любом рисунке в данной книге,
где приводится пример отображения какого-либо документа.
По умолчанию текст, содержащийся в названии документа,
используется при создании закладки (bookmark) для документа. Поэтому, для большей
информативности, избегайте безликих названий (Home Page, Index и т. д.). Подобные
слова, используемые в качестве названия закладки, обычно совершенно бесполезны.
Название документа должно кратко характеризовать его содержание. Заметим, что
при отображении на экране документов с фреймовой структурой, когда в каждый
из фреймов загружается отдельный документ, имеющий свое название, на экране
будет видно только название главного документа. Тем не менее, задавать название
отдельных документов, предназначенных для загрузки во фреймы, также настоятельно
рекомендуется. Более подробно этот вопрос рассматривается в главе 5.
Важность названия документа определяет следующий факт.
Поскольку тег располагается практически в самом начале HTML-файла,
то после начала загрузки документа первым делом отображается именно оно. Далее
выполняется загрузка основного содержания документа, при этом браузер начинает
форматирование документа в окне. Этот процесс, вообще говоря, в зависимости
от содержания и структуры документа, а также скорости соединения, может затянуться.
В течение достаточно продолжительного времени пользователь будет созерцать пустой
экран, единственной информативной строчкой которого будет являться название
документа. Весьма часто (при обрыве соединения или, если пользователь не желает
дожидаться окончания загрузки документа) вся информация о документе на этом
и заканчивается.
Связь с другими документами
Часто HTML-документы связаны между собой, то есть имеют
ссылки друг на друга. Ссылки могут быть как абсолютные, так и относительные.
И те и другие имеют недостатки. Абсолютные ссылки могут быть слишком громоздкими
и переставать работать, если перемещен младший по иерархии документ. Относительные
ссылки легче вводить и обновлять, но и эта связь обрывается, если перемещен
старший по иерархии документ. Оба вида связей могут нарушиться при переносе
документа с одного компьютера на другой.
Часто случается, что пользователь загрузил на свою машину
большой документ и отключился от сети для его подробного изучения. Все ссылки
в локальной копии документа перестанут работать. Для их "реанимации"
придется вновь обратиться к оригиналу документа, находящемуся на удаленном компьютере.
К счастью, разработчики HTML предусмотрели эту проблему
и добавили два тэга, и , которые включаются в заголовок
для того, чтобы связь между документами не нарушалась.
Тэг
Тэг служит для указания полного базового URL-адреса
документа. С его помощью относительная ссылка продолжает работать, если документ
переносится в другой каталог или даже на другой компьютер. Тег
работает аналогично команде path MS-DOS, что позволяет программе просмотра определить
ссылку на искомый документ, даже если она находится в старшем по иерархии документе,
расположенном на другом компьютере.
Тэг имеет один обязательный параметр HREF,
после которого указывается полный URL-адрес документа. Ниже показан пример использования
тега .
Указание базового адреса
Тэг указывает браузеру, где искать файл. В
случае, если пользователь работает с локальной копией файла и его машина не
отключена от сети, изображение пиктограммы News будет найдено и показано в окне
браузера.
Тэг
Даже если тег позволяет найти файл, остается
открытым вопрос о взаимоотношениях документов. Важность этих отношений возрастает
пропорционально росту сложности ваших документов. Для того чтобы поддерживать
логическую связь между ними, в HTML введен тег .
Тэг указывает на связь документа, содержащего
данный тег и другого документа или объекта. Он состоит из URL-адреса и параметров,
конкретизирующих отношения документов. Заголовок документа может содержать любое
количество тегов . Табл. 1.1 описывает параметры тега
и их функции.
Таблица 1.1.
Параметры тега
Приведем примеры тега с параметрами:
Первая строка указывает на связь с файлом оглавления документа
(toc.html - table of contents) с прямым отношением contents. Вторая строка описывает
связь с URL-адресом автора документа (с обратным отношением made).
Между документами может существовать множество различных
отношений. Примеры других значений параметра REL:bookmark,
copyright, glossary, help, home, index, toc, next, previous. Параметр REV может
также принимать значения: author, editor, publisher, owner.
Тэг
Разработка новых спецификаций языка разметки гипертекста
занимает немалый срок, и за это время компании, производящие браузеры, успевают
выпустить несколько версий своих продуктов. Поэтому в раздел заголовка может
быть добавлен еще один тег , позволяющий авторам документа определять
информацию, не имеющую отношения к HTML.
Эта информация используется браузером для действий, которые
не предусмотрены текущей спецификацией HTML. Тег не потребуется
вам для создания первых HTML-документов, но он вам наверняка понадобится, когда
ваши страницы станут более сложными.
Пример:
Браузеры Netscape Navigator и Internet Explorer поймут
эту запись как инструкцию ожидать 60 секунд, а затем загрузить новый документ.
Такая инструкция часто используется при изменении местоположения документов.
Небольшой документ с приведенной строкой может быть оставлен на старом месторасположении
документа для автоматической ссылки на его новое месторасположение.
Следующая строка:
инструктирует браузер перезагружать страницу каждые 60
секунд. Это может быть полезно, если данные на странице часто обновляются, например,
в случае отслеживания котировок акций.
Стало весьма популярным применение элемента
для решения некоторых типичных задач. В качестве примера можно привести указание
ключевых слов, используемых поисковыми системами. Этот способ позволяет включать
в индекс документа дополнительные слова, которые могут явно не входить в его
содержание. Для этого в тэге в качестве значения параметра NAME
указывается имя некоторого свойства. А при помощи параметра CONTENT указывается
значение данного свойства, например:
Спецификация HTML не определяет каких-либо конкретных имен
свойств, записываемых в тэге . Однако есть несколько часто применяемых
свойств, например, description, keywords, author, robots и др.:
Приведенные теги вполне могли бы быть указаны,
например, для электронного варианта данной книги.
Тэг может иметь параметры, указанные в табл.
1.2.
Таблица 1.2.
Параметры тега
Еще одно важное предназначение тега - это
указание кодировки текста. Так, для текста на русском языке в кодировке Windows
нужно записать следующую строчку:
Другие элементы заголовка
В разделе заголовка документа могут присутствовать еще
два тега - и . Их назначение связано с использованием
таблиц стилей в документе и записью скриптов. Эти вопросы подробно рассматриваются
во второй части книги.
Раздел документа
BODY
В этом разделе документа располагается его содержательная
часть. Большинство тэгов, рассматриваемых далее в этой главе и последующих,
должно располагаться в данном разделе документа. Здесь мы рассмотрим лишь некоторые
общие вопросы.
Раздел документа BODY должен начинаться тэгом
и завершаться тэгом , между которыми располагается все содержимое
данного раздела. Строго говоря, наличие этих тегов не является обязательным,
поскольку браузеры могут определить начало содержательной части документа по
контексту. Однако их употребление рекомендуется.
Тэг имеет ряд параметров, ни один из которых
не является обязательным. Перечень параметров приведен в табл. 1.3.
Таблица 1.3.
Перечень параметров тега
Параметр
|
Назначение
|
ALINK
|
|
BACKGROUND
|
Указывает
на URL-адрес изображения, которое используется в качестве фонового
|
BOTTOMMARGIN
|
Устанавливает
границу нижнего поля документа в пикселах
|
BGCOLOR
|
Определяет
цвет фона документа
|
BGPROPERTIES
|
Если установлено
значение FIXED, фоновое изображение не прокручивается
|
LEFTMARGIN
|
Устанавливает
границу левого поля документа в пикселах
|
LINK
|
Определяет
цвет еще не просмотренной ссылки
|
RIGHTMARGIN
|
Устанавливает
границу правого поля документа в пикселах
|
SCROLL
|
Устанавливает
наличие или отсутствие полос прокрутки окна браузера
|
TEXT
|
Определяет
цвет текста
|
TOPMARGIN
|
Устанавливает
границу верхнего поля документа в пикселах
|
VLINK
|
Определяет
цвет уже просмотренной ссылки
|
Использование параметров BACKGROUND и BGCOLOR, определяющих
фон документа, подробно рассмотрено в .
Параметр BGPROPERTIES, принимающий единственное значение
FIXED, поддерживается только браузером Microsoft Internet Explorer.
Параметры BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN и TOPMARGIN,
задающие расстояния в пикселах между краями текста и соответствующими краями
окна, а также параметр SCROLL, распознаются только браузером Microsoft Internet
Explorer, начиная с версии 4.0.
Параметры ALINK, LINK, TEXT и VLINK определяют цвета ссылок
и текста документа.
В языке HTML цвета определяются цифрами в шестнадцатеричном
коде. Цветовая система базируется на трех основных цветах - красном, зеленом
и синем - и обозначается RGB. Для каждого цвета задается шестнадцатеричное значение
в пределах от 00 до FF, что соответствует диапазону 0-255 в десятичном исчислении.
Затем эти значения объединяются в одно число, перед которым ставится символ
#. Например, число #800080 обозначает фиолетовый цвет. Чтобы не запоминать совокупности
цифр, вместо них можно пользоваться названиями цветов, которые приводятся в
приложении П2 . Ранние версии браузеров распознавали
только названия 16 стандартных цветов, отмеченных в приложении звездочками.
Современные версии браузеров распознают все 140 названий цветов.
Форматирование текста
В данном разделе будут рассмотрены возможности форматирования
отдельных символов текста документа.
Тэги уровня блока и последовательные
тэги
Некоторые HTML-тэги, которые могут появляться в разделе
BODY, называют тэгами уровня блока (block level), в то время как другие последовательными
(inline) тэгами или, называя по-другому, тэгами уровня текста (text level),
хотя такое разделение тегов по уровням в известной степени условно.
Различие уровней HTML-тэгов заключается в следующем: теги
уровня блока могут содержать последовательные теги и другие теги уровня блока,
тогда как последовательные теги содержат только данные и другие последовательные
тэги. Блоковые теги описывают более крупные структуры документов, по сравнению
с последовательными тэгами.
По умолчанию теги этих видов размещаются в тексте описания
различным образом: теги уровня блока начинаются с новой строки, в то время как
последовательные - нет.
Логическое и физическое форматирование
Для форматирования текста HTML-документов предусмотрена
целая группа тэгов, которую можно условно разделить на теги логического и физического
форматирования.
Тэги логического форматирования обозначают (своими именами)
структурные типы своих текстовых фрагментов, такие, например, как программный
код (тэг ), цитата (тэг ), аббревиатура (тэг )
и т. д. (см. описания этих и других подобных тегов в следующем разделе). С помощью
тегов и можно, например, отметить отдельные фрагменты
как выделенные, или сильно выделенные. Заметим, что речь идет о структурной
разметке, которая не влияет на конкретное экранное представление фрагмента браузером.
Поэтому такая разметка и называется логической. Фрагменты с логическим форматированием
браузеры отображают на экране определенным образом, заданным по умолчанию. Вид
отображения никак не связан со структурным типом фрагмента (т. е. именем тега
логического форматирования), но может быть легко переопределен.
Тэги физического форматирования определяют формат отображения
указанного в них фрагмента текста в окне браузера (согласно предпочтениям автора
документа). Например, для отображения фрагмента курсивом можно использовать
тег курсива . Этот и другие, часто используемые теги физического форматирования
описаны ниже в разделе "Тэги физического форматирования текста"этой
главы.
Между разработчиками HTML-документов долгое время шли споры
о преимуществах и недостатках того или иного подхода. С выходом спецификации
HTML 4.0 эти споры завершились в пользу применения логического форматирования,
поскольку был провозглашен принцип отделения структуры документа от его представления.
Действительно, только на базе логического форматирования можно гибко управлять
представлением документа, используя современные методы (основанные на таблицах
стилей, динамически изменяющихся документах и т. д.).
Тем не менее, на настоящий момент может свободно использоваться
и физическое форматирование. В спецификации HTML 4.0 некоторые теги физического
форматирования не рекомендуются для применения, однако, пока они все еще поддерживаются
всеми браузерами. Заметим, что некоторые теги логического форматирования, призванные
заменить отдельные теги физического форматирования, распознаются не всеми браузерами,
что делает их применение крайне неудобным. Примером может служить логический
тег , который рекомендуется использовать вместо физического тега
.
Рассматриваемые ниже теги относятся к тэгам уровня текста,
т. е. призваны, в основном, размечать небольшие группы символов. Некоторые теги
могут задавать разметку и на уровне блока.
Тэги логического форматирования текста
Тэг
Тэг отмечает свой текст как аббревиатуру (ABBReviation).
Несмотря на то, что этот тег включен в спецификацию HTML 4.0, он до настоящего
времени не поддерживается ни одним браузером.
Тэг
Тэг . Так же, как и тег , используется
для отметки аббревиатур. Этим тэгом рекомендуется отмечать так называемые акронимы,
т. е. произносимые слова, состоящие из аббревиатур. Тег возможно
в будущем станет использоваться для невизуального отображения элементов, например
при речевом синтезе.
Данный тег удобно использовать в сочетании с параметром
TITLE, в качестве значения которого можно указать полную форму записи аббревиатуры.
Тогда визуальные браузеры при наведении курсора на текст, размеченный тэгом
, будут выдавать полное наименование в виде появляющейся подсказки.
Заметим, что тег распознается только браузером
Microsoft Internet Explorer. Пример:
СПбГИТМО
- один из ведущих технических вузов Санкт-Петербурга
Тэг
Тэг используется для отметки цитат или названий
книг и статей, ссылок на другие источники и т. д. Браузерами такой текст обычно
выводится курсивом. Пример:
Невское время является
одной из наиболее популярных городских газет Санкт-Петербурга
Тэг
Тэг отмечает свой текст как небольшой фрагмент
программного кода. Как правило, отображается моноширинным шрифтом. Этот тег
не следует путать с тэгом Являющимся элементом уровня блока, который
следует использовать для отметки больших фрагментов (листингов) кода.
Например:
Пример простейшего оператора языка программирования
C:
puts("Hello, World!");
Есть еще одно различие в использовании тегов
и В коде программ часто бывает важно наличие нескольких идущих
подряд пробелов. Их отображение будет сохранено только при использовании тега
.
Тэг
Тэг отмечает свой текст как удаленный. Этот
элемент полезно использовать для отметки изменений, вносимых в документ от версии
к версии. Тег может использоваться как элемент уровня текста и как
элемент уровня блока.
Тэг имеет два необязательных параметра: CITE и DATETIME.
Значение параметра CITE должно представлять собой URL-адрес документа, поясняющего
причины удаления данного фрагмента.
Параметр DATETIME указывает дату удаления в формате: YYYY-MM-DDThh:mm:ssTZD,
определяющем год, месяц, число, часы, минуты и секунды удаления, а также часовой
пояс (Time Zone). Например:
Последней принятой спецификацией языка разметки
HTML является версия 3.2
4.0
Текст, помеченный тэгом обычно отображается
перечеркнутым текстом. В спецификации HTML 4.0 этому тэгу отдается предпочтение
перед тэгом физического форматирования или , обозначающих
перечеркнутый текст. Однако тег
Тэг
Тэг отмечает свой текстовый фрагмент как определение
(DeFinitioN). Например, этим тэгом можно отметить какой-либо термин, когда он
встречается в тексте в первый раз. Пример:
Internet Explorer - это
популярный Web-браузер
Тэг поддерживается только браузером Microsoft
Internet Explorer. Отображается по умолчанию курсивом.
Тэг
Тэг отмечает свой текст как вставку (INSertion).
Этот элемент полезно использовать для отметки изменений, вносимых в документ
от версии к версии. Тег может использоваться как элемент уровня
текста и как элемент уровня блока.
Тэг имеет два необязательных параметра: CITE и DATETIME.
Значение параметра CITE должно представлять собой URL-адрес документа, поясняющего
подробности внесенных дополнений.
Параметр DATETIME указывает дату вставки в формате: YYYY-MM-DDThh:mm:ssTZD,
определяющем год, месяц, число, часы, минуты и секунды вставки, а также часовой
пояс (Time Zone).
Текст, помеченный тэгом , обычно отображается
подчеркнутым текстом. Тег в настоящее время распознается только
браузером Microsoft Internet Explorer.
Тэг
Тэг (EMphasis - выделение, подчеркивание) используется
для выделения важных фрагментов текста. Браузеры обычно отображают такой текст
курсивом. Пример:
Пример выделения отдельных слов
текста
.
Тэг
Тэг отмечает текст как вводимый пользователем
с клавиатуры. Обычно отображается моноширинным шрифтом, например:
Чтобы запустить текстовый редактор, напечатайте: notepad
Применение данного тега предпочтительнее применения тега
физического форматирования .
Тэг
Тэг отмечает короткие цитаты в строке текста.
В отличие от тега уровня блока при отображении не выполняется
отделение размеченного текста пустыми строками. Обычно отображается курсивом.
Тег (в отличие от ) в настоящее время распознается
только браузером Microsoft Internet Explorer.
Тэг имеет параметр CITE, в качестве значения которого можно
указать источник цитаты.
Тэг
Тэг отмечает текст как образец (SAMPle). Обычное
использование этого тега - отметка текста, выдаваемого программами (sample output).
Используется также для выделения нескольких символов моноширинным шрифтом.
Применение данного тега предпочтительнее применения тега
физического форматирования . Например:
В результате работы программы будет напечатано:
Hello, World!
.
Тэг
Тэг , как правило, используется для выделения
важных фрагментов текста. Браузеры обычно отображают такой текст полужирным
шрифтом. Пример:
Санкт-Петербург расположен в самой восточной оконечности
Финского залива в устье реки Невы<
/STRONG>
Применение данного тега предпочтительнее применения тега
физического форматирования . Тегом обычно размечают
более важные фрагменты текста, чем те, что размечены тэгом .
Тэг
Тэг отмечает имена переменных программ. Обычно
такой текст отображается курсивом. Пример:
Задайте значение переменной N
Отображение некоторых из примеров, приведенных при описании
тегов логического форматирования текста, показано на рис. 1.1. На рисунке видно,
как при наведении указателя мыши на текст, отмеченный тэгом ,
выдается подсказка.
Рис. 1.1.
Примеры форматирования текста
Вы, наверное, обратили внимание на то, что некоторые элементы
дают одинаковый результат. Более того, часть элементов может никак не изменять
представление фрагмента текста на экране. Может возникнуть законный вопрос:
для чего создано такое разнообразие элементов форматирования?
Ответ - в названии этой группы элементов. Они предназначены
для расстановки логических ударений, выделения логических частей и подчеркивания
сути высказываний. Их использование весьма актуально, поскольку, вероятно, в
ближайшем будущем возможности браузеров возрастут, например, станет возможен
поиск цитат на Web-пространстве, а может быть следующее поколение браузеров
научится читать документы вслух. Кроме того, авторам документов ничто не мешает
уже сегодня, применяя таблицы стилей, задать желаемое отображение для любого
из тэгов, переопределив значения по умолчанию.
Тэги
физического форматирования текста
Приведем описание тегов физического форматирования. Часть
из них не рекомендуется к использованию спецификацией HTML 4.0 по приведенным
выше причинам. Некоторые теги отменены (deprecate) спецификацией HTML 4.0, однако
они продолжают поддерживаться браузерами.
Тэг
Тэг отображает текст полужирным шрифтом. В большинстве
случаев рекомендуется вместо тега использовать тег логического форматирования
. Например:
Это полужирный шрифт.
Рис. 1.2.
Примеры физического форматирования
текста (браузером Netscape)
Тэг
Тэг отображает текст курсивом. Для большинства
случаев вместо этого тега рекомендуется использовать теги , ,
или , поскольку последние лучше отражают назначение
выделяемого текста. Например:
Выделение курсивом
Тэг
Тэг отображает текст моноширинным шрифтом. Для
большинства случаев вместо этого тега лучше использовать теги ,
или . Пример:
Это моноширинный шрифт
.
Тэг
Тэг отображает текст подчеркнутым. Отмененный
тэг. Вместо него рекомендуется использовать теги или .
Например:
Пример подчеркивания текста
.
Тэги и
Тэги и отображают текст, перечеркнутый
горизонтальной линией. Отмененный тэг. Вместо него следует использовать тег
. Например:
Пример зачеркнутого
текста
.
В настоящее время тег поддерживается не всеми
браузерами, поэтому пока рекомендуется использовать в сочетании
с тэгом . А именно, внутрь тэга-контейнера можно вложить
пару тегов
...
.
Тэг
Тэг выводит текст шрифтом большего (чем непомеченная
часть текста) размера. Вместо данного элемента лучше использовать
или теги заголовков, например,
Шрифт большего размера
.
Тэг
Тэг выводит текст шрифтом меньшего размера.
Поскольку в HTML нет тэга, противоположного по действию тэгу , то
для этих целей можно применять тег . Большинство браузеров поддерживают
вложенные теги , однако использовать такой подход не рекомендуется.
Например:
Шрифт меньшего размера
.
Тэг
Тэг сдвигает текст ниже уровня строки и выводит
его (если возможно) шрифтом меньшего размера. Удобно использовать для математических
индексов. Например:
Пример шрифта для нижнего
индекса
.
Тэг
Тэг сдвигает текст выше уровня строки и выводит
его (если возможно) шрифтом меньшего размера. Удобно использовать для задания
степеней чисел в математике. Например:
Пример шрифта для верхнего
индекса
.
Тэг
Тэг отображает мигающий текст. Этот тег не
входит в спецификацию HTML и поддерживается только браузером Netscape. Опытные
разработчики крайне редко прибегают к использованию этого тэга, поскольку наличие
на странице мигающих символов раздражает многих пользователей.
Тэг
Тэг-контейнер является аналогом тега уровня
блока . Может использоваться в тех случаях, когда требуется отметить
фрагмент текста для задания его свойств, и при этом не удается использовать
никакой другой структурный тег форматирования.
Браузер Microsoft Internet Explorer дополнительно разрешает
использование следующих параметров тэга: DIR, DATAFLD, DATAFORMATAS, DATASRC.
Описание параметров можно найти во второй части книги.
Рис. 1.3.
Использование вложенных тегов форматирования
текста
Тэги форматирования могут быть вложенными друг в друга.
При этом нужно внимательно следить, чтобы один контейнер находился целиком в
другом контейнере. На рис. 1.3 показан пример использования вложения элемента
курсива в элемент полужирного шрифта. Использован следующий фрагмент HTML-кода:
Это полужирный шрифт.
Это курсив.
А здесь текст полужирный и курсивный
Тэг
Тэг указывает параметры шрифта. Он относится
к тэгам физического форматирования уровня текста.
Назначение параметров шрифта непосредственно в тексте документа
нарушает основную идею разделения содержательной части документа и описания
формы представления документа. Поэтому в спецификации HTML 4.0 данный тэг, а
также тег отнесены к отмененным. Их дальнейшее применение не
рекомендуется.
Несмотря на эти грозные предупреждения, видимо, для самых
простых документов физическое форматирование можно считать допустимым. Кроме
того, начинать обучение основам форматирования проще всего именно с правил непосредственного
указания форматов элементов. До стилевого оформления начинающий разработчик
должен еще дорасти.
Тэг относится к последовательным элементам,
поэтому не может включать в себя элементы уровня блока, например,
Или
.
Для тега могут задаваться следующие параметры: FACE, SIZE
и COLOR. Заметим, что браузер Netscape допускает также использование двух дополнительных
параметров: POINT-SIZE и WEIGHT, описание которых опускаем.
FACE
Параметр FACE служит для указания типа шрифта, которым
программа просмотра пользователя будет выводить текст (если такой шрифт
имеется на компьютере). Значением данного параметра служит название шрифта,
которое должно в точности совпадать с названием шрифта, имеющего у пользователя.
Если такого шрифта не будет найдено, то данное указание будет проигнорировано
и будет использован шрифт, установленный по умолчанию.
Можно указать как один, так и несколько названий шрифтов,
разделяя их запятыми. Это весьма полезное свойство, так как в разных системах
могут быть почти идентичные шрифты, называющиеся по-разному. Другим важным
качеством является задание предпочтения использования шрифтов. Список шрифтов
просматривается слева направо. Если на компьютере пользователя нет шрифта,
указанного в списке первым, то делается попытка найти следующий шрифт и
т. д.
Приведем пример использования параметра FACE:
Назначение шрифтов
Пример задания названия шрифта.
На рис. 1.4 показано отображение примера браузером
Netscape. В примере в качестве предпочитаемого указывается шрифт Verdana,
при его отсутствии будет использован шрифт Arial и т. д.
Рис. 1.4.
Отображение примера браузером Netscape
SIZE
Этот параметр служит для указания размеров шрифта в
условных единицах от 1 до 7. Конкретный размер шрифта зависит от используемой
программы просмотра. Принято считать, что размер "нормального"
шрифта соответствует значению 3.
Настройки размеров шрифта, используемых по умолчанию, а
также величины абсолютного изменения размеров шрифта, зависят от браузеров.
На рис. 1.5 показано окно настройки браузера Netscape, в котором задаются шрифты,
используемые по умолчанию.
Размер шрифта указывается как абсолютной величиной (SIZE=2),
так и относительной (SIZE=+1). Последний способ часто используется в сочетании
с заданием базового размера шрифта с помощью тега .
Примечание
При указании размеров шрифтов записи типа "2"
и "+2" (в отличие от большинства языков программирования, в которых
унарный знак "+" можно опускать) дают принципиально разный результат.
Приведем пример, в котором использованы различные способы
назначения размеров шрифтов. Отображение примера показано на рис. 1.6.
Рис. 1.5.
Окно настройки параметров шрифтов браузера
Netscape
Рис. 1.6.
Назначение размеров шрифтов
Назначение размеров шрифтов
Шрифт размера 1
Шрифт размера 2
Шрифт размера 3
Шрифт размера 4
Шрифт размера 5
Шрифт размера 6
Шрифт размера 7
COLOR
Этот параметр устанавливает цвет шрифта, который может
задаваться с помощью стандартных имен или в формате #RRGGBB. Приведем пример
документа с разноцветным текстом.
Выбор цвета шрифта
Текст зеленого цвета
Текст красного цвета
Тэг
Тэг используется для указания размера,
типа и цвета шрифта, используемого в документе по умолчанию. Эти значения обязательны
для всего документа, однако могут в нужных местах переопределяться с помощью
тега . После закрывающего тега действие тега
восстанавливается. Значения параметров шрифтов, используемых по умолчанию, могут
неоднократно переопределяться в документе, т. е. тег может
появляться в документе любое количество раз.
Примечание
Тэг может появляться также и в разделе
документа.
Заметим, что для тега не существует закрывающего
тэга.
В качестве параметров могут использоваться точно такие
же параметры, что и
для тега , а именно:
FACE, SIZE и COLOR. Назначение и правила записи
параметров
аналогичны.
Примечание
Браузер Netscape не допускает применение параметра
FACE тега .
Приведем пример использования тега .
Назначение размеров шрифтов
Текст, записанный шрифтом по умолчанию.
Шрифт размера 2.
Шрифт размера 4.
Текст внутри ячейки
таблицы |
Текст после таблицы
В приведенном примере дважды переопределяется размер шрифта,
используемого по умолчанию. Изначально он равен 3 (по умолчанию). Затем устанавливается
равным 2, далее - 4. Обратите внимание на отображение данного примера (рис.
1.7). Видно, что для таблиц назначение тега не действует. Это
характерно для многих браузеров, хотя формально нарушает идею применения тэга.
Рис. 1.7.
Отображение примера С ТЭГОМ
(браузером Netscape)
Форматирование HTML-документа
Разделение на абзацы
Любые тексты, будь то школьное сочинение, заметка в газете
или техническое описание устройства имеют определенную структуру. Элементами
такой структуры являются заголовки, подзаголовки, таблицы, абзацы и др.
Одним из первых правил составления практически любых документов
является разбиение его текста на отдельные абзацы, выражающие законченную мысль.
HTML-документы не являются исключением из этого правила. При создании документов
с помощью текстовых редакторов разбиение на абзацы выполняется вводом символа
перевода строки. Большинство редакторов реализует это при нажатии клавиши .
В HTML-документах символы перевода строки не приводят к образованию нового абзаца.
Язык HTML предполагает, что автор документа ничего не знает
о компьютере своего читателя. Читатель вправе установить любой размер окна и
пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса
в строке определяется только программой просмотра и установками конечного пользователя.
Поскольку символы перевода строки оригинального документа игнорируются, то текст,
отлично смотревшийся в окне редактора автора документа, может превратиться в
сплошной неудобочитаемый текст в окне программы просмотра.
Избежать этой неприятности позволяет применение специального
тега разделения на абзацы
Перед началом каждого абзаца текста следует
поместить тег
Закрывающий тег
не обязателен. Браузеры
обычно отделяют абзацы друг от друга пустой строкой.
Примечание
Браузеры обычно интерпретируют несколько стоящих подряд
тегов абзаца
Как один. То же самое относится и к тэгу перевода строки
. Поэтому создать несколько пустых строк при помощи этих тегов не
удается.
Тэг
Может задаваться с параметром горизонтального
выравнивания ALIGN. Возможные значения параметра приведены в табл. 1.4. По умолчанию
выполняется выравнивание по левому краю.
Таблица 1.4.
Значения параметра ALIGN
Значение параметра ALIGN
|
Действие
|
LEFT
|
Выравнивание текста по
левой границе окна браузера
|
CENTER
|
Выравнивание по центру
окна браузера
|
RIGHT
|
Выравнивание по правой
границе окна браузера
|
JUSTIFY
|
Выравнивание по ширине
(по двум сторонам)
|
Заметим, что выравнивание по ширине (ALIGN = JUSTIFY) долгое
время не поддерживалось браузерами. Во многих описаниях языка HTML для значений
параметра выравнивания указывается только три варианта (LEFT, CENTER и RIGHT).
В настоящее время все популярные браузеры умеют выполнять выравнивание по ширине.
Некоторые проблемы создания документов с выравниванием по ширине рассмотрены
также в главе 8.
Примечание
Отсутствие выравнивания по ширине в настоящее время
кажется удивительным. Этот режим применяется очень часто для печатных изданий.
Достаточно взять в руки любую газету или внимательно присмотреться к абзацам
данной книги - все они выровнены по ширине. Однако для HTML-документов до последнего
времени выравнивание по ширине не допускалось. Всего лишь пару лет назад ни
один браузер не имел такого режима. Так, читатели, до сих пор использующие браузер
Netscape версии 3.x, не смогут увидеть ровные строчки в документе. Можно попытаться
предугадать, какие же еще возможности появятся в будущем у браузеров, сравнив
возможности мощных текстовых редакторов и современных браузеров. Примером не
реализованных пока возможностей может являться автоматическая расстановка переносов
и пр.
Перевод строки
При отображении текстовых документов в браузере место переноса
строки в пределах абзаца определяется автоматически в зависимости от размера
шрифтов и размера окна просмотра. Перенос строки может осуществляться только
по символам-разделителям слов (например, пробелам). Иногда в документах требуется
задать принудительный перевод строки, реализующийся независимо от параметров
настроек браузера. Для этого служит тег принудительного перевода строки
,
который не имеет соответствующего закрывающего тэга. Включение тега
в текст документа обеспечит размещение последующего текста с начала новой строки.
Например, такой подход может использоваться для создания структур типа списков
без использования специальных тегов разметки списка. Или, например, без данного
тега не обойтись для отображения стихотворений и т. п.
Приведем пример использования принудительного перевода
строки (рис. 1.8):
Использование принудительного перевода
строки
Над омраченным Петроградом
Дышал ноябрь осенним хладом.
Плеская шумною волной
В края своей ограды стройной,
Нева металась, как больной
В своей постеле беспокойной.
А.С.Пушкин. Медный всадник
Рис. 1.8.
Тег
можно использовать для
принудительного перевода строки
В отличие от тега абзаца
При использовании тега
не будет образована пустая строка.
Использование тега
требует осторожности - возможна
ситуация, когда браузер уже сделал перевод строки за одно-два слова до того,
как встретил ваш тег
. Это бывает в случае, если ширина окна программы
просмотра читателя меньше, чем тот же параметр программы, с помощью которой
вы тестировали ваш документ. При этом может получиться, что в строке посреди
абзаца останется только одно слово, нарушая тем самым красоту компоновки документа.
Примечание
При использовании тега
для разбивки текста,
обтекающего изображения или таблицы, можно задавать параметр CLEAR, прекращающий
обтекание текста. Об этом можно прочитать в главах 3 и 4.
Тэги u
Бывают ситуации, когда требуется выполнить операцию противоположного
назначения - запретить перевод строки. Для этого существует тэг-контейнер .
Текст, размеченный этим тэгом, будет гарантированно располагаться в одной строке,
независимо от ее длины. Если при этом получающаяся строка будет выходить за
пределы окна просмотра браузера, то появится горизонтальная полоса прокрутки.
Примечание
Для обеспечения неразрывности текста, располагаемого
в ячейках таблиц, существует специальный параметр NOWRAP тега
. Об
этом можно узнать в главе 4.
Размечая текст с помощью тега неразрывной строки
можно получить очень длинные строки. Чтобы этого избежать, можно указать браузеру
читателя место возможного перевода строки, что будет выполнено только при необходимости
(так называемый "мягкий" перевод строки). Это можно осуществить, поставив
в нужном месте текста тег (Word BReak), который так же, как и тег
, не нуждается в закрывающем тэге.
Примечание
Тэг вообще не поддерживается браузером
Netscape. Браузер Microsoft Internet Explorer распознает этот тег только в тексте,
размеченном тэгами .
Заголовки внутри HTML-документа
Наряду с названием всего документа, на Web-странице могут
использоваться заголовки для отдельных частей документа. Эти заголовки могут
иметь шесть различных уровней (размеров) и представляют собой фрагменты текста,
которые выделяются на экране при отображении страницы браузером.
Для разметки заголовков используются теги , ,
, , и . Эти теги требуют соответствующего
закрывающего тэга. Заголовок с номером 1 является самым крупным (заголовок верхнего
уровня), а с номером 6 - самым мелким. Теги заголовка являются элементами уровня
блока, поэтому с помощью них нельзя размечать отдельные слова текста для увеличения
их размера. При использовании тегов заголовков осуществляется вставка пустой
строки до и после заголовка, поэтому тегов абзаца или перевода строки здесь
не требуется.
Тэги заголовков могут задаваться с параметром горизонтального
выравнивания ALIGN. Возможные значения параметра совпадают с параметрами выравнивания
тега абзаца (см. табл. 1.4).
Пример использования заголовков разного уровня с различным
выравниванием (рис. 1.9):
Примеры заголовков
Заголовок размера 1
Заголовок размера 2
Заголовок размера 3
Заголовок
размера 4
Заголовок размера 5
Заголовок размера 6
Основной текст документа
Рис. 1.9.
Отображение заголовков различного размера
Горизонтальные линии
Другим методом разделения документа на части является проведение
горизонтальных линий. Они визуально подчеркивают законченность той или иной
области страницы. Сейчас часто используют рельефную, вдавленную линию, чтобы
обозначить "объемность" документа.
Тэг позволяет провести рельефную горизонтальную
линию в окне большинства программ просмотра. Этот тег не является контейнером,
поэтому не требует закрывающего тэга. До и после линии автоматически вставляется
пустая строка. Параметры тега представлены в табл. 1.5.
Таблица 1.5.
Параметры тега
Пример:
В этом примере задается горизонтальная линия, которая занимает
половину ширину окна просмотра и располагается посередине окна. Заметим, что
параметры выравнивания имеют смысл только тогда, когда линия занимает не всю
ширину окна.
Примечание
Браузер Netscape не позволяет использовать параметр
COLOR тега .
Использование предварительно
отформатированного текста
Как видно в приведенных выше разделах, для разбивки текста
по абзацам и обеспечения принудительного перевода строки следует пользоваться
специальными тэгами. Однако бывают случаи, когда в HTML-документ необходимо
включить текст, уже имеющий форматирование, выполненное традиционным способом
при помощи символов перевода строки, необходимого количества пробелов, символов
табуляции и т. д. Для решения таких задач предусмотрен специальный тэг-контейнер
Определяющий предварительно форматированный (п
реформатированный)
текст.
Текст, размеченный тэгом Будет отображаться
в таком виде, как он выглядит в обычном текстовом редакторе. Для отображения
всегда будет использоваться моноширинный шрифт. При этом вы сможете в большей
степени контролировать вывод документа программой просмотра, правда, за счет
некоторой потери в гибкости.
Одним из вариантов использования этого тега являются таблицы,
построенные без применения специальных тегов разметки таблиц. Другим важным
применением является вывод на экран больших блоков программного
кода (Java, C++ и т. п.), не позволяющий браузеру переформатировать их.
Текст внутри контейнера Может содержать элементы
форматирования уровня текста, кроме следующих: , ,
, , , , , ,
. Недопустимо внутри преформатированного текста задавать элементы
форматирования уровня блока, например, теги заголовков. Тег абзаца по логике
вещей также не должен встречаться внутри преформатированного текста, однако
если встречается, то будет реализовывать переход на новую строку (без образования
пустой).
Примечание
Тэг Имеет необязательный параметр WIDTH,
назначение которого - указывать браузеру максимальную длину строки преформатированного
текста. В зависимости от этого значения браузер мог бы подобрать нужный шрифт
и/или отступ для оптимального отображения преформатированного текста. В качестве
значения по умолчанию предлагалось использовать 80. Другими рекомендованными
значениями являются 40 и 132. Заметим, что читателям, имеющим значительный опыт
работы со средствами вычислительной техники, эти числа говорят о многом. На
деле же современные браузеры игнорируют значение параметра WIDTH.
Существуют еще несколько тэгов, решающих близкую по смыслу
задачу. К ним относятся теги , И .Все три упомянутых тега в спецификации HTML 4.0 отмечены как устаревшие.
Это означает, что в будущих версиях браузеры прекратят их поддержку. Вместо
этих тегов рекомендуется использовать тег .
Тэг
Тэг-контейнер является элементом уровня блока,
служащим для выделения фрагмента документа. Целью этого выделения является управление
параметрами данного фрагмента, которое обычно выполняется с помощью назначения
стилей. Приведем пример:
(Фрагмент документа)
В этом примере фрагмент HTML-документа обрамляется тэгами
и для задания некоторых его свойств. В данном случае
все текстовые элементы выделенного фрагмента будут отображаться зеленым (green)
цветом. Аналогом тега уровня текста является элемент .
Заметим, что непосредственное назначение стилевых свойств
отдельного фрагмента так, как это сделано в примере, использовать не желательно
в соответствии с концепцией разделения структуры документа и его представления.
Следует использовать таблицы стилей, речь о которых пойдет во второй части книги.
Тэг
Тэг-контейнер предназначен для горизонтального
выравнивания всех элементов посередине окна просмотра браузера. Он имеет уровень
блока и его полезно использовать для центрирования таких элементов, как, например,
таблиц, так как они не могут быть центрированы назначением
ALIGN=CENTER тега .
По существу тег является краткой формой
следующей записи: . Дальнейшее использование тега
по причинам, отмеченным в предыдущем разделе, также нежелательно.
Включение комментариев в документ
В HTML-документ можно включать комментарии, которые не
будут видны читателю. Они могут состоять из произвольного числа строк и должны
начинаться тэгом . Все, что заключено внутри
этих тэгов, при просмотре страницы не будет отображаться на экране.
Здравствуйте, уважаемые читатели блога сайт. Сегодня я предлагаю продолжить разговор про , который мы начали еще в приведенной статьей. Еще раньше мы с вами познакомились с тем, что такое таблицы каскадных стилей, узнали, что означают и многое другое. Все материалы по таблицам каскадных стилей, которые уже были опубликованы на этом блоге, вы сможете найти в . Сегодня же мы поговорим сначала про то, как можно комбинировать и группировать селекторы, а затем подробно рассмотрим правил, которые применяются для одного и того же элемента в Html коде (Important, подсчет селекторов и запись правил в атрибуте style). Комбинации и группировка селекторов в CSSИтак, в предыдущих статьях мы успели рассмотреть 7 типов: Из этих семи возможных видов в языке CSS можно составлять комбинации. Все комбинации, которые мы будем составлять, имеют непосредственное отношение к (предки — потомки, родители — дети, братья — сестры). Первый вид комбинации называется контекстный селектор
. Он учитывает взаимоотношение элементов Html кода по принципу «Предок — Потомок»: Отдельные селекторы в комбинации записываются через пробел
, а читать ее нужно справа налево. Т.о. правила CSS будут применяться только к последнему этой комбинации (самому правому), а все, что стоит перед ним, лишь позволяет задать более точное применение (прицеливание) для наших правил (акцентировать). В первом примере говорится, что все элементы B (выделение жирным), у которых в предках есть элементы Div, будут окрашены в зеленый цвет. В приведенном коде только подчеркнутый фрагмент будет окрашен в зеленый цвет, т.к. в числе его предков имеется Div, а второй фрагмент кода, выделенный тегами B, останется того цвета, который выбран для него по умолчанию, ибо в числе его предков контейнера Div уже нет (только P и Body): Такие комбинации работают в любых браузерах. Следующим типом комбинаций будет дочерний селектор
, который строится на принципах взаимоотношений элементов кода по типу «Родитель — Ребенок»: Записываются они с разделяющим знаком больше (>)
: Данная запись будет трактоваться браузером так: для , «родителем» (ближайшим предком) которых является контейнер Div, будет использоваться выделение красным цветом. В приведенном примере только обведенные абзацы будут окрашены в красный цвет, ибо они заключены непосредственно в контейнер Div, который для них является родителем (ближайшим предком). Если видоизменить приведенный пример дочернего селектора на такой: Body > p {color:red}
То красным уже будет выделен только последний абзац, т.к. его родителем является тег Body, а два первых параграфа останутся того цвета, который был предусмотрен для них по умолчанию (Body для них предок, но не родитель, которым является Div). Дочерние селекторы не работают в браузере Ie 6
. Как и для чего группируют селекторы в CSS кодеПоследняя комбинация называется соседние селекторы
и отвечает принципам отношений между элементами Html кода по типу «Сестры — Братья». В качестве разделителя у них может использоваться либо «+», либо «~»: Данная запись означает, что содержимое элемента I (выделение курсивом) будет окрашено в красный цвет только тогда, если его ближайшим соседом слева (сверху по коду) является элемент B (выделение жирным). Например, данное условие будет соблюдено в этом примере: Если записать соседний селектор в Css коде в таком виде: H1 ~ p {color:red}
То это будет означать, что все параграфы (P), у которых выше по коду расположен соседний элемент H1 (заголовок), будут окрашены в красный цвет. Имеются в виду именно соседние элементы (отношения вида «Сестры — Братья»). На приведенном ниже примере заданному селектору будут удовлетворять обведенные абзацы: Комбинации соседних селекторов в браузере Ie 6 тоже, к сожалению, не поддерживаются. В Ie 6 поддерживается только первый вид комбинации, а в Ie 7 и выше поддерживаются все остальные. В остальных браузерах никаких проблем возникать не должно. Селекторы в Css можно еще и группировать
. Например, если у каких-то из них используется одно или несколько одинаковых правил, то их можно объединить в группу для уменьшения объема Css кода. В приведенном на скриншоте примере, повторяется для каждого селектора заголовка (h1-3), что может вызвать сложности (многократная работа) при желании поменять значение этого свойства. Поэтому второй вариант сгруппированной записи выглядит немного предпочтительнее. Обратите внимание, что при группировке селекторы пишутся через запятую
. Если одинаковых правил будет больше, то и экономия кода будет более ощутимой. А те правила, которые были уникальными, нужно по-прежнему записывать индивидуально. Приоритеты Css свойств (с important и без него)Теперь давайте подумаем, а какое стилевое оформление будет использовать браузер, если никаких стилей для данного элемента Html кода не задано? А для этого существует соответствующая спецификация , где все это описано. Как вы можете видеть, сейчас произошло уже окончательное разделение Html и Css. Т.е. даже для чистого ХТМЛ кода браузер все равно будет использовать дефолтные свойства таблиц стилей. Так вот свойства, принятые по умолчанию, имеют самый низший приоритет
. Более высокий приоритет имеют свойства, которые назначит пользователь в настройках своего браузера. Эти стили будут применены к любым документам, которые он просматривает в этом обозревателе. Правда не у всех браузеров есть такая возможность, но по крайней мер, в Ie и Опере она имеется. Т.е. при желании пользователь в качестве источника стилевой разметки сможет подключить свой собственный файл CSS. Например, в Ie для этого нужно выбрать из верхнего правого меню «Сервис» — «Свойства обозревателя», а затем на первой вкладке «Общие» щелкнуть по нижней кнопке «Оформление». В открывшемся окне вам нужно поставить галочку в поле «Оформлять, используя пользовательский стиль», и с помощью кнопки «Обзор» найти на своем компьютере нужный вам файл стилевой разметки CSS: Т.е. у пользователя есть возможность заставить любой открываемый в браузере сайт выглядеть в соответствии с его требованиями, описанными в файле CSS. Это называется «пользовательские стили»
и они имеют приоритет выше, чем стили, которые определены в спецификации по умолчанию. Но еще больший приоритет будут иметь так называемые авторские стили. Т.е., если я (разработчик сайта) захотел использовать в оформлении какого-либо элемента Html кода стили отличные от дефолтных (помните, они в спецификации описаны), то пользователь своим собственным файлом Css перебить мое оформление не сможет. Пользователь будет вынужден смириться? Нет. Есть у него возможность повысить приоритет своих свойств CSS с помощью добавления Important
в конце каждого из них. Пишется это слово через пробельный символ и перед ним ставится восклицательный знак: P {color:red !important;}
Если у пользователя в его собственном файле стилей, который он подключил к браузеру, будет прописано это же свойство с Important, то все абзацы он будет видеть в красном цвете. Но ведь и автор (разработчик) сайта мог использовать Important для этого свойства. Кто же тогда победит и чей приоритет окажется выше? Решили, что пользовательские стили с Important
будут иметь по-любому более высокий приоритет, чем авторские стили, что с Important, что без него. Давайте обобщим в виде списка всю изложенную информацию по поводу приоритетов стилевых свойств. Приоритет будет убывать сверху вниз: Пользовательские с ImportantАвторские с ImportantАвторскиеПользовательскиеСтили, принятые для Html элементов в спецификации по умолчанию (когда ни автор, ни пользователь ничего другого не задали)
Т.е. без Important авторские стили важнее, а с них уже пользовательские стили самые важные и приоритетные. Ну, а теперь давайте разбираться именно с авторскими таблицами, ибо про то, что делает пользователь, нам не ведомо и покрыто мраком. Как повышают приоритеты Css свойств в авторских стиляхИменно сейчас мы с вами и переходим к вопросу каскадности таблиц стилей CSS
. Давайте рассмотрим это на примере, чтобы было нагляднее. Допустим, что у нас имеется фрагмент кода со следующими Html элементами (параграф внутри контейнера Div):
Содержимое контейнера
Давайте сначала пропишем такие свойства: P {color:red}
.sbox {background:#f0f0f0}
В результате будет применено и первое из них к параграфу (ибо он образован тегом P), и свойство, задающее серый фон для элемента с классом «sbox», который опять же имеется у этого параграфа: А теперь давайте добавим ко второму селектору (класса) еще одно свойство, которое будет конфликтовать с первой строчкой (в них обоих задается , но значения при этом используются разные): P {color:red}
.sbox {background:#f0f0f0;color:blue}
В результате цвет текста параграфа станет синим вместо красного. Почему? Потому что именно таким способом разрешается конфликт, когда один и тот же элемент Html кода получает сразу несколько одинаковых правил, но с разными значениями и из разных мест Css кода. Для того, чтобы определить, приоритет какого правила выше, нужно считать его селекторы. Кроме этого сами селекторы имеют градацию по приоритетам
. Самый высокий приоритет у ID. В этом примере цвет текста будет синим именно потому, что приоритет Id (#out) будет выше, чем у селектора тега (p): P {color:red}
#out {color:blue}
Дальше по лесенке приоритетов, направленной вниз, следуют селекторы классов, псевдоклассов и атрибутов. В следующем примере опять проиграет тег (p) и цвет текста абзаца будет синим, ибо тягается он с селектором более высокого приоритета (класса): P {color:red}
.sbox {color:blue}
Ну, и самым низким приоритетом (не считая универсальный *, обладающего нижайшим весом и не вносящего никаких изменений в подобные бодания) обладают селекторы тегов и псевдоэлементов. Div p {color:red}
p {color:blue}
Какого цвета в результате получится текст параграфа? Правильно, именно красного, т.к. у этого свойства больше селекторов тегов (два против одного). О как. Т.е. сначала считаются Id. Если победитель не выявлен, то считаются классы, псевдоклассы и атрибуты. Ну, а если и там ничего не решилось или таких не было найдено, то считаются селекторы тегов и псевдоэлементов. Но вполне возможна ситуация, когда победитель не выявится и селекторы конкурирующих классов окажутся равного приоритета в сумме. Например, для нашего многострадального параграфа заключенного в контейнер Div:
Содержимое контейнера
Вполне можно будет написать такой кусок Css кода: Div.box #out{color:red}
#in p.sbox{color:blue}
И какого же цвета должен быть текст параграфа? Обе комбинации описывают именно наш параграф. Первую следует, как и водится, читать справа налево: применить данные свойства (color:red) для элемента с Id #out, который стоит где-то внутри (иметь его среди «предков») контейнера Div с классом.box (div.box). Полностью подходит к нашему абзацу. Вторая комбинация: применить данные свойства (color:blue) для элемента параграфа с классом sbox (p.sbox), который стоит внутри любого элемента с Id #in. Опять же, она полностью описывает именно наш параграф. Давайте считать селекторы. С ID в обоих комбинациях встречаются по одному разу, тоже самое можно сказать и о классах. Остается только посчитать селекторы тегов, но их тоже в обоих комбинациях используется одинаковое число раз (один). Засада. Получились равные приоритеты
у одного и того же свойства, имеющего разные значения (цвет текста красный, либо синий). Как же браузер будет решать эту дилемму? Тут будет действовать правило — кто последний
, тот и прав. Поэтому в моем примере цвет текста параграфа будет синим, ибо это свойство (color:blue) расположено ниже в коде. Если эти правила поменять местами: #in p.sbox{color:blue}
div.box #out{color:red}
То в результате цвет текста параграфа изменится на красный. Что и требовалось доказать. Можно дописать, например, к любой комбинации еще один селектор тега и мы перевесим чашу весов в его пользу, даже если она и не стоит ниже в коде: Body #in p.sbox{color:blue}
div.box #out{color:red}
В этом случае цвет параграфа измениться на синий. Универсальный селектор «*» вообще никакого влияния на подсчет приоритетов не оказывает. Кстати, чуть выше мы рассмотрели способ повышения приоритета Css правил с помощью добавления Important. В нашем примере это может выглядеть так: P {color:green !important}
#in p.sbox{color:blue}
div.box #out{color:red}
Какого цвета будет в этом случае текст параграфа? Зеленым, конечно же. И даже считать ничего не нужно, ибо добавление Important
к стилевому свойству решает этот спорный вопрос однозначно, где бы оно в коде не стояло и сколько у него селекторов не было. Но Important не является единственным способом безоговорочного повышения приоритета свойства. Второй способ повышения может заключаться в использовании стилевых свойств в атрибуте Style
нужного вам Html элемента. Т.е. прописываете внутри того же многострадального тега P атрибут Style с заданием любого цвета:
Содержимое контейнера
Ну и все. Теперь вне зависимости от того, какие свойства прописаны для этого элемента во внешнем файле таблицы стилей или же внутри тегов Style Html кода, цвет текста параграфа будет желтым. Но вот свойства с Important он перебить не сможет. Т.е. в последнем примере, где мы добавили правило «p {color:green !important}», цвет текста по-прежнему будет зеленым, даже несмотря на style="color:yellow". На самом деле приоритет двух правил (с Important во внешнем файле таблицы стилей и в атрибуте style) равный, а значит нужно переходить к подсчету селекторов. А разве они могут быть внутри атрибута style? Да никаких не может быть, а это значит, что правило, прописанное в атрибуте style, всегда проиграет правилу с Important только за счет меньшего числа селекторов (ноль будет меньше любого числа). Ну, а что же тогда даст наибольший приоритет Css свойству
? Правильно, его оно будет прописано в атрибуте style да еще с Important:
p {color:green !important}
#in p.sbox{color:blue}
div.box #out{color:red}
Содержимое контейнера
В этом случае цвет текста параграфа будет желтым и перебить это уже ничем в авторских стилях будет невозможно. Мы нашли абсолютный способ задания стилей. Его сможет перебить только пользователь со своим собственным файлом стилей и прописанным для этого свойства Important. Итак, давайте попробует составить список факторов, влияющих на приоритет
свойства в авторских стилях по мере их убывания: Прописывание свойства в атрибуте style нужного тега вместе с ImportantДобавление Important к свойству во внешнем файле таблиц стилей или же в теге style прямо в Html кодеПростое прописывание этого свойства в атрибуте style нужно элементаИспользование бОльшего числа Id для данного свойстваИспользование большего числа селекторов классов, псевдоклассов или атрибутовИспользование большего числа селекторов тегов и псевдоэлементовБолее низкое расположение свойства в Css коде, при прочих равных условиях
На самом деле правила в атрибуте style используются крайне редко (представьте себе, как трудно будет в этом случае вносить изменения во всем коде сайта, а не в отдельном файле CSS). Этот атрибут в основном используют, когда только нужно что-то быстро протестировать. Ну, и еще это удобно, если вы вставляете свой код в чужие Html странички, которые имеют свое стилевое оформление и которое может унаследоваться () и для ваших вставляемых элементов. А зачем и как вставлять свой код на чужие страницы? Нам может и незачем, а Яндекс и Гугл это делают, когда или на чужих площадках (наших с вами сайтах). Добавив во все элементы кода рекламных блоков атрибут style, с прописанными в нем свойствами и добавленным Important, можно уже не беспокоиться о том, что код объявлений будет изменен каким-либо образом (хотя объявления Яндекса все же можно менять за счет CSS и Important, видимо они не использовали этот метод). Удачи вам! До скорых встреч на страницах блога сайт посмотреть еще ролики можно перейдя на
");">
Вам может быть интересно Селекторы тега, класса (class), Id и универсальные, а так же селекторы атрибутов в современном CSS
Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода
List style (type, image, position) - Css правила для настройки внешнего вида списков в Html коде
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
Как написать правильный CSS-код?
Без знания основ невозможно движение вперёд. Причём эти основы должны быть у вас натренированы до подсознательно уровня. Вы должны знать все правила написания чистого понятного кода наизусть и всюду их применять. Начните прямо с текущего или, в крайнем случае, следующего своего проекта. Это будет вашей CSS-библией
Ниже смотрите 15 золотых правил для написания удобного и профессионального CSS-кода 1) Используйте CSS-ResetCSS-reset
- это некий фрагмент кода, который пишется вначале нашего файла стилей, в котором обнуляются все значения, и задаются все основные параметры для всех стилей, которые нам, скорее всего пришлось бы прописывать для каждого конкретного id/class. Это позволяет укоротить код впоследствии, а также избежать различий в отображении браузерами. Вот пример CSS-Reset, взятый со страницы http://meyerweb.com/eric/tools/css/reset/index.html /* v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } /* remember to define focus styles! */:focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need "cellspacing="0"" in the markup */ table { border-collapse: collapse; border-spacing: 0; }
2) Используйте сокращенияК примеру, чтобы писать длинное Border-top: 5px; border-right: 10px; border-bottom: 15px; border-left: 20px;
мы можем записать коротко: Border: 5px 10px 15px 20px;
то есть по часовой стрелке начиная сверху. В основном сокращают border, margin, padding, font и background. подробней об этом вы можете посмотреть
А вот цвета можно сокращать так:
Если кода цвета состоит из 3х повторяющихся цифр, то можно записать просто три этих цифры. На примере: #FFFFFF можно записать как #FFF, или #990055 можно записать #905, а #F091A4 сократить нельзя. 3) Используйте комментарииИспользуйте комментарии везде, где следует — они очень помогают упорядочить код, делая его более понятным для себя и для того, кто будет с ним работать Выглядит это примерно так: /* Ваш комментарий здесь */
Комментируйте: а) Заголовок страницы стилей — пишите кто автор кода и когда он был написан б) Отмечайте разделы стилей — это упорядочит весь код по разделам. Например: /****************************************/ /* Sidebar */ /****************************************/
в) Комментируйте проблемные места. Например те, где страница может иметь отличия в разных бразуерах.например: Input /* IE6 Problem */
г) Пишите маленькие комментарии тем, с кем работаете — например, когда нужно что-то доработать. 4) Добавляйте Легенду ЦветовНа маленьких css-файлах не сложно отслеживать все цвета сайта. А что делать, если у нас код на 5000 строк? — ведь нельзя допускать использования не тех цветов. Для этого существует легенда цветов — то есть список тех цветов, которые мы используем в нашем файле. Например: /* /* светлый синий: #4595be /* тёмный синий: #367595 /* красный для ссылок: #9F1212 ********************************/
5) Помним, что такое Position:realtive и Position:absoluteВ этих понятиях путается большинство начинающих верстальщиков, но есть правило, которое позволяет избежать путаницы. Position:absolute
позиционирует объект относительно страницы — и неважно, где он расположен в HTML-потоке. По умолчанию это значение 0 слева и 0 сверху. Обычно этот вариант не используется - ибо неудобен и ограничен в опциях. А вот что вам пригодиться - если задать родителю («обёртке») нашего элемента Position:realtive, то Position:absolute будет выравниваться уже Относительно верхнего левого угла родителя
. Так что можете проставлять это свойство по-необходимости. Наглядно на картинке: 6) Избегайте использование хаковПорой такие браузеры, как IE6 и IE7 просто вынуждают нас использовать хаки. Хаки - сразу ошибка для валидатора. Так что выносите из в специальные css-файлы для каждого браузера. Специальные записи для хаков каждому браузеру и как их выносить в отдельные файлы можно посмотреть 7) Используйте Margin’ы в описании расположенияНа это не так часто обращают внимание, но это помогает избежать проблем в различных браузерах. Идея следующая: вместо использования padding’а у родителя, мы используем margin для дочерних-элементов. Так, вместо #main-content { padding-left: 10px }
#main-content { } #main-content #left-column { margin-left: 10px }
Ничего неправильно в использовании padding’а, но опыт показывает, что лучше всё же margin 8) Используйте float’ыЕсли вы ходите приписать элементу float, то его родителю пишите overflow:hidden
Ul { overflow: hidden; } ul li { float: left; }
Без этого свойства элемент может обтекаться некрасиво — также проблемы могут возникнуть при задании margin’ов или border’ов. Если вы хотите, чтобы элемент не обтекался - указываем clear:both
ниже обтекаемого элемента. Часто это используют вместо overflow: hidden; 9) Добавляем display:inline для float-элементовДовольно известная проблема в IE6 с удваиванием margin’ов у float-элементов. То есть если нам нужно 20px, то приходится писать 10px, ибо этот отступ удваивается. Хотя IE6 уже приказывает долго жить, и многие дизайнеры не тратят время на то, чтобы оптимизировать сайт под него, всё же небольшой кусочек кода сделает отображение в нём приятней. Итак, ставим Display: inline /* IE6 Problem */
для элемента, к которому применён float 10) Делаем спрайтами жизнь комфортнееКартинки-спрайты - очень удобная вещь. Они дают представление обо всей графике страницы, и снижают время загрузки. Если знаете английский, то вот 11) Структура файлов сайта должна быть понятнойПотратьте время на то, чтобы сделать структуру сайта понятной. Раскидайте всё по полочкам. Например: Здесь «Website Name»
- имя сайта, с которым мы работаем. Эта папка содержит HTML-файлы для сайта, плюс папки assets
и styles
. В папке assets
содержаться файлы, которые можно скачать с сайта, например, архивы или PDF-файлы. В папке styles
содержаться, в свою очередь, папки css, images, javascript. - css
- содержит все файлы css, например, reset.css, layout.css и main.css
- images
- все картинки сайта. Эту папку тоже можно разбить по разделам.
- javascript
- все javascript-файлы.
Эта схема приблизительна, и можно её отображать по-разному. Мысль в том, что она помогает вам рабоать быстрее и делает сайт понятнее и аккуратнее. 12) Разверните стилиНеобязательный совет - Название классов и id стилей лучше писать, соблюдая древовидность, чтобы всё было понятно и наглядно. 13) Используйте пиксели а не относительные величиныВсё довольно просто - пиксели меньше нагружают код, так как документу не придётся высчитывать проценты относительных величин. Проблема относительных величин — в передаче этой относительности. Чтобы было понятно, разъясню на примере: body { font-size: 62.5% } значит font-size: 1em, то есть 10px. Если #blog-content нужен 14px, прописываем: #blog-content { font-size: 1.4em; }
Теперь если H3 тег внутри #blog-content нужен нам 20px, то его можно было бы задать так: #blog-content { font-size: 1.4em; } #blog-content h3 { font-size: 2.0em }
Всё бы хорошо, но у нас действует относительность. И эти 2.0em применяются к 1.4em #blog-content’a
, и в итоге, размер мы получим 28px. Так что используйте фиксированные величины
. 14) Ограничивайте псевдо-классы якорными тегамиНовые браузеры не имеют данной проблемы, всё упирается в ряд старых браузеров во главе с IE6. Проблема заключается в том, что в старых браузерах псевдо-классы (такие как:hover) работают только применительно к тегу a
, тоесть #header ul li:hover { background-color: #900 }
не работает в IE6 Эта проблема устраняеться с jQuery
15) Избегайте проблем с селекторамиИспользуйте селекторы где это возможо
Например, используйте вместо #main-content.main-header
#main-content h1
Будьте осторожны с группировкой селекторов
Ведь тут могут неправильно сыграть относительные величины, если вы их используете Если на это примере всё в порядке, Main-content div,.main-content p { color: #000; }
То на этом — будьте внимательны с относительными величинами. Main-content div,.main-content p { line-height: 1.3em; }
И напоследокЧтобы написать успешный код, избегайте постоянного оборачивания одного в другое и тд. Учите теги h1, ul и p. Ключ к успеху прост - это практика, практика, практика
Удачно тренироваться)
Основы HTML
содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.
HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот)
, так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.)
. HTML-документ имеет расширение.html .
HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).
Начальный тег
показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег
образуется путем добавления слэша / перед именем тега: … . Между начальным и закрывающим тегами находится содержимое тега - контент.
Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег создаст кнопку с текстом Кнопка
внутри.
Теги могут вкладываться друг в друга, например, Текст . При вложении следует соблюдать порядок их закрытия (принцип «матрёшки»)
, например, следующая запись будет неверной: Текст .
HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.
Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.
Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы - заголовки, таблицы, изображения и т.д.
Процесс интерпретации (парсинг)
начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.
HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … .
Структура веб-страницы
1. Структура HTML-документа
Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD)
. DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.
DOCTYPE
отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.
...
Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, DOM (document object model)
. При этом элемент является корневым элементом.
Рис. 1. Простейшая структура веб-страницы
Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения»
между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.
Предок
- элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является . В то же время элемент является предком для всех содержащихся в нем тегов: , , , и т.д.
Потомок
- элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент Является потомком одновременно для и .
Родительский элемент
- элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 и . Тег Является родительским только для .
Дочерний элемент
- элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , , И являются дочерними по отношению к .
Сестринский элемент
- элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и Являются между собой сестринскими.
1.1. Элемент
1.2. Элемент
Раздел ... содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.
1.2.1. Элемент
Обязательным тегом раздела является тег . Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.
1.2.2. Элемент
Необязательным тегом раздела является одинарный тег . С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент может содержать несколько элементов , потому что в зависимости от используемых атрибутов они несут различную информацию.
Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:
С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:
Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:
Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:
Таблица 2. Атрибуты тега
Атрибут
charset
|
Указывает кодировку символов для текущего HTML-документа:
|
content
|
Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name , в зависимости от их значения.
|
http-equiv
|
Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте:
default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента , который ссылается на таблицу стилей CSS, или идентификатор элемента , содержащего таблицу стилей.
refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" .
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:
|
name
|
Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop .
application-name указывает название веб-приложения, используемого на странице.
author указывает имя автора документа в свободном формате.
description определяет краткое описание к содержимому страницы, например:
generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:
.
keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:
. Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято.
|
1.2.3. Элемент
Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.
Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.
.paper {
width: 200px;
height: 300px;
background-color: #ef4444;
color: #666666;
}
Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:
...
CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:
1.2.4. Элемент
Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .
Подключить файл со стилями к веб-странице можно двумя способами: через
директиву @import url
@import url(style.css);
с
использованием элемента . Элемент не требует закрывающего тега. Данный элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько. Запись будет иметь следующий вид:
Таблица 4. Атрибуты тега
Атрибут
Описание, принимаемое значение
crossorigin
|
Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта.
anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: * (или имя домена вместо звёздочки), то загрузка изображения будет заблокирована.
use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true , то загрузка изображения будет заблокирована.
|
href
|
Основной атрибут тега, в качестве значения выступает путь к файлу со стилями.
|
hreflang
|
Определяет язык текста в документе, на который идет ссылка.
|
media
|
Определяет тип устройства, к которым должен быть применен ресурс ссылки.
|
nonce
|
Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста.
|
rel
|
Атрибут определяет отношения между текущим документом и документом, на который идет ссылка.
alternate — ссылка на тот же документ, но в другом формате (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom),
.
archives — указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов.
author ссылка на страницу об авторе документа или на страницу с контактными данными автора.
bookmark ссылка на ближайшего предка статьи, являющегося связующим звеном, или на раздел статьи, наиболее тесно связанных с элементом, если нет предка.
external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта.
first указывает ссылку, ведущую на первый документ из последовательности документов.
help ссылка на документ со справкой.
icon определяет путь к иконке, которая будет использована для текущего документа.
last указывает ссылку, ведущую на последний документ в последовательности документов.
license ссылка на сведения об авторских правах для документа.
next указывает, что этот документ является частью серии, и что ссылка ведет на следующий документ в этой серии.
nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер.
noreferrer указывает на то, что заголовок запроса клиента, содержащий url источника запроса, не должен передаваться при переходе по ссылке.
pingback указывает адрес пингбэк-сервера, что дает возможность для блога автоматически оповещать сайты, ссылающиеся на него.
prefetch указывает, что следует заранее кэшировать файл, на который ведет ссылка.
prev указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии.
search указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов.
sidebar указывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера, и некоторые браузеры при щелчке по гиперссылке открывают окно для добавления ссылки в панель закладок.
stylesheet ссылка на внешний файл, который будет использоваться в качестве таблицы стилей для данного документа.
tag указывает на то, что метка, на которую ведет гиперссылка, относится к данному документу.
up указывает, что страница является частью иерархической структуры, и что гиперссылка ведет на более высокий уровень ресурса в структуре.
|
sizes
|
Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon" , и может принимать следующий значения:
ширинах
высота - определяет список размеров, разделенных пробелами, каждый размер должен быть в формате - ширинах
высота (размеры иконки задаются в пикселях), например:
;
any - иконка может масштабироваться до любого размера.
|
title
|
Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст.
|
type
|
Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css" .
|
1.2.5. Элемент
Таблица 5. Атрибуты тега
Атрибут
Описание, принимаемое значение
async
|
Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы).
|
charset
|
Определяет кодировку символов
|
crossorigin
|
Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src).
anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена, скрипт не будет загружен.
use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true , скрипт не будет загружен.
|
defer
|
Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя.
|
nonce
|
Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется.
|
src
|
Указывает на месторасположение файла со сценарием, значение атрибута - это url файла, содержащего JavaScript-программу.
|
type
|
Используются для объявления языка сценария, использованного при составлении содержимого тега.
|
1.3. Элемент
В этом разделе располагается все содержимое документа. Для элемента доступны .
Таблица 5. Атрибуты тега
Атрибут
Описание, принимаемое значение
onafterprint
|
Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати.
|
onbeforeprint
|
Событие, срабатывающее перед отправкой страницы на печать.
|
onbeforeunload
|
Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу.
|
onhashchange
|
Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2 .
|
onmessage
|
Событие происходит, когда сообщение получено через источник события.
|
onoffline
|
Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало.
|
ononline
|
Событие вызывается браузером в том случае, когда соединение с интернет возобновилось.
|
onpagehide
|
Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д.
|
onpageshow
|
Событие происходит, когда пользователь переходит на веб-страницу, после события onload.
|
onunload
|
Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера.
|
Еще статьи из этой рубрики
|