5. Преобразование регистра.

Синтаксис:

<span style="text-transform: значение"> текст </span>

Результат действия определяется значением параметра: none (Естественный порядок чередования прописных и строчных букв в предложении), capitalize (Каждое Слово Начинается С Прописной Буквы), uppercase (ВСЕ БУКВЫ ПРОПИСНЫЕ), lowercase (все буквы строчные).

6. Расстояние между буквами и словами.

Синтаксис:

<span style="letter-spacing: значение"> текст </span>

или

<span style="word-spacing: значение"> текст </span>

Значение атрибута может быть задано параметром normal (в этом случае расстояние задается браузером, исходя из размера шрифта и выравнивания текста) или выражено конкретной величиной (в сантиметрах, дюймах, пунктах и др.).

Пример:

6.1. Установка расстояния в 10 миллиметров между символами текста.

<span style="letter-spacing: 10 mm"> текст </span>

7. Цвет текста.

Синтаксис:

<span style="color: цвет"> текст </span>

Существует следующие формы задания цвета:

- символьная (указывается название одного из предопределенных цветов);

- цифровая (шестнадцатиричная комбинация в формате RGB: #RRGGBB);

- в функциональном виде с указанием значения насыщенности каждого цвета в диапазоне 0 – 255;

- в функциональном виде с процентным указанием значения насыщенности цвета.

Символьные идентификаторы основных цветов и их шестнадцатиричные RGB-комбинации приведены ниже: black (#000000) — черный, silver (#c0c0c0) — серебряный, gray (#808080) — серый, white (#ffffff) — белый, maroon (#800000) — темно-красный, red (#ff0000) — красный, purple (#800080) — томно-сиреневый, fuchsia (#ff00ff) — сиреневый, green (#008000) — зеленый, lime (00ff00) — ярко-зеленый, olive (#808000) — оливковый, yellow (#ffff00) — желтый, navy (#000080) — темно-синий, blue (#0000ff) — голубой, teal (#008080) — сине-зеленый, aqua (#00ffff) — ярко-голубой.

Примеры:

7.1. Вывод ярко-голубого текста с использованием символьной формы задания цвета.

<span style="color: aqua"> текст </span>

7.2. Вывод красного текста с использованием цифровой формы задания цвета.

<span style="color: #ff0000"> текст </span>

7.3. Вывод зеленого текста с указанием значения насыщенности каждого цвета.

<span style="color: rgb(0,255,0)"> текст </span>

7.4. Вывод синего текста с процентным указанием насыщенности каждой цветовой составляющей.

<span style="color: rgb(0%,0%,100%)"> текст </span>

Примечание. Следует отметить, что применение атрибута style допустимо также к тэгу абзаца <p> или к общему контейнеру языка (стиля) <div>.

Использование гиперссылок.

Гипертекстовые связи (гиперссылки или Web-ссылки) являются наиболее важным элементом Web-страниц. С их помощью документ получается связанным и структурированным, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно.

По умолчанию со ссылкой связана загрузка другого Web-ресурса. Это достигается путем выбора ссылки (щелчком мыши).

Синтаксис:

<a href="URL"> текст-ссылка </a>

Ссылка указывает на целевой объект (якорь), который может быть любым Web-ресурсом (изображением, видеоклипом, звуковым файлом, программой, HTML-документом, элементом в HTML-документе и т.д.).

Целевые якоря в HTML-документах могут указываться с помощью тэга <a> (с использованием атрибута name) или с помощью любого другого тэга (с использованием атрибута id).

Синтаксис:

<a name="якорь"> Текст, к которому идет переход </a>

или

<p id="якорь"> Текст, к которому идет переход </p>

Некоторые URL могут указывать на местоположение внутри ресурса. В этом случае URL заканчивается символом "#", за которым следует указатель (идентификатор фрагмента).

Используя специальный скрытый указатель, можно быстро переходить от одного раздела к другому внутри документа, не используя прокрутку экрана. После щелчка мышкой по ссылке браузер переместит вас на указанный раздел документа, а строка, в которой стоит указатель данного раздела (обычно, первая строка раздела или его заголовок) будет размещена на первой строке окна браузера (если данная строка не присутствует уже на экране).

Относительный URL не содержит информации о схеме доступа. Путь в нем указывает на ресурс на той же машине, на которой находится текущий документ. Относительные URI могут содержать компоненты относительного пути (например, ".." означает один уровень выше в иерархии) и идентификаторы фрагментов.

Атрибут title для тэга <a> позволяет отображать указанный текст в виде подсказки при наведении курсора мыши на гиперссылку.

Каждая из ссылок может пребывать в одном из четырех фиксированных состояний: link (неиспользованная ссылка), hover (ссылка с помещенным поверх нее указателем мыши), active (ссылка в момент активации), visited (использованная ссылка).

Синтаксис:

a:link {свойство: значение}

a:hover {свойство: значение}

a:active {свойство: значение}

a:visited {свойство: значение}

Примеры:

1. Текстовая ссылка на другой HTML-документ, находящийся там же, где и текущий документ.

<a href="hpc.html">Карманные компьютеры</a>

2. Текстовая ссылка на графический файл, находящийся там же, где и текущий документ.

<a href="be.jpg">Медведь</a>

3. Графическая ссылка на HTML-документ, находящийся там же, где и текущий документ.

<a href="be.html"><img src="be.jpg"></a>

4. Текстовые ссылки на различные фрагменты текущего HTML-документа.

<h1>ОГЛАВЛЕНИЕ/h1>

<p><a href="#chapter1">ГЛАВА 1</a><br>

<a href="#chapter2">ГЛАВА 2</a><br>

...продолжение оглавления...

...тело документа...

<h2><a name="chapter1"> ГЛАВА 1</a></h2>

...содержание (текст) главы 1...

<h2><a name="chapter2"> ГЛАВА 2</a></h2>

...содержание (текст) главы 2...

или

<h1>ОГЛАВЛЕНИЕ/h1>

<p><a href="#chapter1">ГЛАВА 1</a><br>

<a href="#chapter2">ГЛАВА 2</a><br>

...продолжение оглавления...

...тело документа...

<h2 id="chapter1"> ГЛАВА 1</a></h2>

...содержание (текст) главы 1...

<h2 id="chapter2"> ГЛАВА 2</a></h2>

...содержание (текст) главы 2...

5. Текстовая ссылка на адрес электронной почты.

Замечания по данному изданию отправляйте

<A href="mailto:skozlov@tut.by">Козлову С.М.</A>.

6. Определение подсказки для гипертекстовой ссылки.

<a href="be.jpg" title="Фотография">Медведь</a>

7. Ссылка на фрагмент с именем s2 в другом HTML-документе:

<a href="http://tut.by/top.html#s2">Текст</a>

Списки.

Существует три основных вида списков в HTML-документе: ненумерованный (маркированный), нумерованный, список определений.

Ненумерованный список заключается в контейнер <ul>, нумерованный – в контейнер <ol>. Каждый элемент списка начинается с тэга <li>. Заголовок списка определяется тэгом <lh>.

Синтаксис:

<ul>

<lh> Заголовок списка

<li> Первый элемент списка

<li> Второй элемент списка

<li> ...

</ul>

или

<ol>

<lh> Заголовок списка

<li> Первый элемент списка

<li> Второй элемент списка

<li> ...

</ol>

Для ненумерованных списков браузер обычно использует маркеры для пометки элемента списка. В нумерованном списке браузер автоматически вставляет номера элементов по порядку. При удалении или добавлении произвольного количества элементов нумерованного списка остальные номера автоматически перенумеровываются.

Для создания вложенных списков необходимо разместить одну пару тэгов (стартовый и завершающий) внутри другой.

Существует возможность задания следующих атрибутов списков и их элементов.