- •11. Таблицы на html странице
- •12. Ссылки в html. Навигация по страницам
- •13. Адреса ссылок. Указание базового адреса
- •14. Организация навигации по книгам и сайтам
- •15. Формы на html странице
- •17. Стилевое оформление страницы средствами html
- •18. Контекстно-зависимые дескрипторы
- •19. Дескрипторы физического (декоративного) форматирования
18. Контекстно-зависимые дескрипторы
Контекстно-зависимый селектор — это селектор стиля, который идентифицирует все HTML-теги определенного типа, находящиеся где-нибудь внутри тега другого типа. Этот тип селектора используется для установки стиля всех тегов выделения, которые встречаются, например, внутри таблицы, либо всех тегов <strong>, встречающихся внутри упорядоченного списка. В этих примерах браузер игнорирует теги выделения, которые не появляются в таблице, или теги <strong>, которые не находятся в упорядоченном списке, если только для этих случаев не предоставлены дополнительные правила стилей. Дочерний и братский селекторы не всегда работают хорошо в браузере Internet Explorer.
Синтаксис для этого типа селектора выглядит следующим образом:
тег-контейнер целевой-тег
Как можно видеть, имена тегов разделяются с помощью одиночного пробела. Таким образом, чтобы определить стиль для всех тегов <strong>, располагающихся где-нибудь внутри упорядоченного списка, правило стиля должно выглядеть подобно следующему примеру:
ol strong {
font-style: italic;
}
Только те теги <strong>, которые находятся внутри упорядоченного списка, отображаются браузером полужирным курсивом. Возможно, у вас возникнет вопрос, почему полужирным, если в стиле ничего не указывает на полужирное начертание шрифта? Потому что по умолчанию браузеры воспроизводят текст, размеченный тегами <strong>, полужирным шрифтом, остальной текст на странице, размеченный тегами <strong>, отображается полужирным шрифтом без дополнительного эффекта курсива.
С помощью контекстно-зависимых селекторов можно действовать действительно избирательно. Скажем, вы хотите применить стиль только к тем тегам выделения, находящимся внутри тегов абзацев, которые в свою очередь находятся внутри ячеек таблицы, расположенных внутри элементов div:
div td p em {
font-weight : bold;
}
19. Дескрипторы физического (декоративного) форматирования
Физическое форматирование документа (визуальное) позволяет создавать различные виды выделения части текста по смысловому признаку. Например, можно подчеркнуть часть текста с помощью тега <U> или же сделать наклонное начертание с помощью тега <I>. По возможности стоит отдавать предпочтение тегам логического форматирования документа.
Перейдем к описанию тегов физического форматирования документа.
Часто для удобства документ разделяют заголовками разделов с помощью тегов <Hn> и </Hn>, где n может принимать значение от 1 до 6.
Параграф располагается между тегами <P> и </P>. Выравнивание задается свойством ALIGN. Перевод строки осуществляется с помощью тега <BR>
Начерание текста определяется следующими тэгами <B>Жирный</B>
<I>Курсив/наклонный</I>
<U>Подчеркнутый</U>
<STRIKE> Перечеркнутый</STRIKE>
<SUP>Верхний индекс</SUP>
<SUB>Нижний индекс</SUB>
Шрифт для фрагмента текста можно задать с помощью тега <FONT> (закрывающий тег </FONT> обязателен). Свойство SIZE определяет размер текста, значения размера от 1 (мелкий) до 6 (крупный), по умолчанию SIZE=3. Свойство FACE задает имя шрифта. Можно задавать несколько имен шрифтов через запятую. Если у пользователя не окажется первого шрифта, то браузер будет подставлять второй и т.д. Свойство COLOR задает цвет текста. Можно использовать как имена цветов (red, blue, green) так и номер в виде #RRGGBB, где RR - концентрация красного, GG - зеленого, BB - синего. Выделение текста цветовым фоном достигается использованием свойства STYLE="backgroud-color: цвет"
20. Часть <head></head> на странице
<HEAD> ... </HEAD> - заголовок HTML-программы
Заголовок также называют головной частью программы, он содержит справочную информацию о странице, которая не отображается браузером, а также название документа.
Тег <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title> устанавливающего заголовок окна веб-страницы.
Внутри контейнера <head> допускается размещать следующие элементы: <base>, <basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>.
Тег <BASE> определен внутри контейнера <HEAD> и инструктирует браузер относительно полного базового адреса текущего документа.
Тег <BASEFONT> предназначен для задания шрифта, размера и цвета текста по умолчанию. Указанные значения будут использоваться во всем документе за исключением тега <FONT>, в котором можно переопределить параметры оформления текста. Допускается использование тега в контейнере <HEAD> или <BODY>, причем несколько раз. Это позволяет изменять вид шрифта для части документа.
Тег <BGSOUND> определяет музыкальный файл, который будет проигрываться на веб-странице при ее открытии. Громкость, продолжительность звучания музыки и другие характеристики определяются с помощью параметров тега, а также могут управляться через скрипты. Этот тег должен размещаться только в контейнере <HEAD>.
Таблицы стилей лучше вынести в отдельный файл, так, чтобы его было удобнее изменять и не требовалось вписывать в файл каждой статической страницы (объем которой при этом также уменьшается). Тогда в заголовке страницы необходимо указать ссылку на файл, где находятся таблицы стилей. Выглядит это следующим образом:
<link rel="STYLESHEET" type="text/css" href="styles.css"> тег <LINK> размещается всегда внутри контейнера <HEAD> и не создает ссылку.
Мета-теги служат для предоставления браузеру клиента и поисковым системам некоторой служебной информации. Это теги языка HTML, имеющие следующий формат:
<meta name="имя" content="значение"> или <meta http-equiv="имя" content="действие">.
Условно мета-теги можно разделить на 3 группы: содержащие управляющие команды для браузера; содержащие управляющие команды для поисковых систем; содержащие информацию о странице и ее авторе.
В заголовке страницы вы можете также разместить скрипты, написанные на языках Java, PHP, JavaScript и др., которые будут тем или иным образом управлять загрузкой страницы.
Стили обрамляются тегами <style> </style>. С помощью Каскадных таблиц стилей (CSS) можно описывать все, что угодно, начиная от оформления текста и заканчивая внешним видом страницы в целом.
Тэг <TITLE> - это элемент HTML-кода, который определяет слова, появляющиеся в заголовке окна веб-браузера, когда он обратится к созданной вами странице.