Файл: Основы программирования на языке HTML.pdf

1.3.4 Комментарии

Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются браузером. Синтаксис комментария: <!-- Комментарии -->

Комментарии могут встречаться в документе где угодно и в любом количестве. При этом допустимо внутрь комментария добавлять другие теги, но вложенные комментарии недопустимы. Также следует учесть, что двойной дефис внутри крмментария (--) воспринимается как часть комментария и соответственно его наличие в тексте комментария приводит к ошибке валидации документа.

Также комментарии могут быть созданы с использованием нестандартного тега <COMMENT>…</COMMENT>.

1.4 Форматирование текста средствами HTML

Главной составной частью документа HTML является его содержимое, которое состоит, прежде всего, из текста. Оформление текста позволяет наиболее эффективно донести его до пользователя. Набор средств для форматирования максимально приближен к возможностям форматирования текстового процессора Microsoft Word.

1.4.1 Стили форматирования текста

Непосредственное (авторское) форматирование позволяет отображать на странице авторский текст в исходном виде, для чего используются следующие теги:

<pre>…</pre> текст, содержащийся в этом теге, отображается без изменений, допускает использование внутри любых тегов, кроме <BIG>, <IMG>, <OBJECT>, <SMALL>, <SUB>, <SUP>;

<p>…</p> текстовый параграф, абзац;

<hr> горизонтальная линия (начинается всегда с новой строки);

<br> перенос на новую строку;

<nobr> запрет переноса строки;

<SPAN>…</SPAN> создание стиля строчных элементов;

<XMP>…</XMP> отображает содержимое в исходном виде и шрифтом фиксированной ширины;

<WBR>…</WBR> указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина элемента (введен в стандарте HTML5).

Физическое форматирование используется для отображения различных стилей шрифтов:

<H1>…</H1>, <H2>…</H2>, …, <H6>…</H6> заголовки, обозначающие начало разделов документа (наибольший Н1, наименьший Н6);

<b>…</b> полужирный шрифт;

<i>…</i> курсив (наклонный шрифт);

<u>…</u> подчеркнутое написание;

<s>…</s> зачеркнутый текст;

<tt>…</tt> моноширинный шрифт (шрифт фиксированной ширины);

^… верхний индекс;

_… нижний индекс;

<strike>…</strike> перечеркивание текста горизонтальной линией;

<big>…</big> шрифт большего размера, чем предыдущий;

<small>…</small> шрифт меньшего размера, чем предыдущий;

<blink>…</blink> моргающий текст;

<BDO>…</BDO> направление вывода текста (слева направо или наоборот);

<BDI>…</BDI> указывает фрагмент текста, который должен быть изолирован от изменения направления вывода текста (введен в стандарте HTML5);

<MARK>…</MARK> помечает текст как выделенный, например цветом (введен в стандарте HTML5).

Теги логического форматирования предназначены для указания смыслового содержания текста. К тегам логического форматирования относятся:

<ABBR>…</ABBR> последовательность символов является аббревиатурой;

<ACRONYM>…</ACRONYM> текст является акронимом (сокращением);

<ADDRESS>…</ADDRESS> хранение информации об авторе документа;

<APPLET>…</APPLET> вставка апплетов (кодов на Java);

<BLOCKQUOTE>…</BLOCKQUOTE> выделение длинных цитат в документе;

<cite>…</cite> цитата или сноска (отображается курсивом);

<Q>…</Q> выделение цитаты в кавычки;

<code>…</code> программный код;

<DEL>…</DEL> выделение текста, удаленного из новой версии документа;

<INS>…</INS> выделение текста, добавленного в новую версию документа;

<dfn>…</dfn> определение термина (отображается курсивом);

<em>…</em> акцентирование внимания;

<kbd>…</kbd> область ввода текста с клавиатуры;

<samp>…</samp> результат вывода программы, пример отображения;

<strong>…</strong> очень важный фрагмент текста (отображается полужирным текстом);

<var>…</var> выделение переменной;

<ARTICLE>…</ARTICLE> задает содержимое контейнера как новости, статьи, блога и т.п. (введен в стандарте HTML5);

<DETAILS>…</DETAILS> используется для хранения информации, которую можно скрыть или показать по требованию пользователя (введен в стандарте HTML5);

<METER>…</METER> используется для вывода значения в некотором диапазоне , используется для отображения числовых значений (введен в стандарте HTML5);

<RUBY>…</RUBY> используется для добавления аннотации сверху или снизу от заключенного в нем текста, где сама аннотация будет находится в тегах <RT>…</RT> (введен в стандарте HTML5);

<TIME>…</TIME> помечает текст внутри тега как дату, время или оба значения (введен в стандарте HTML5).

1.4.2 Установка атрибутов шрифта

Язык гипертекстовой разметки позволяет задавать размеры шрифта, которым будет отображаться текст документа. По умолчанию размер шрифта равен 3, однако, используя тег <font> с атрибутом size=”…”, его можно переопределить. Используются как относительные размеры шрифтов, так и абсолютные. Абсолютный размер шрифта задается приданием атрибуту size значения от 1 до 7, т.е. <font size=”7”>…</font>. Для использования относительного размера шрифта изначально нужно задать его базовый размер тегом <basefont> и установить его параметр size равным размеру шрифта (по умолчанию 0). Относительно этого базового размера можно указывать размер шрифта текста, который заключен в контейнере тегов <font>. Для этого достаточно присвоить атрибуту size одно из следующих значений: +1…+7 для увеличения шрифта на указанное количество единиц относительно базового размера; -1…-7 для уменьшения шрифта на указанное количество единиц относительно базового размера. Теги <basefont> и <font> предназначены для описания исходных параметров шрифта данной страницы. Их действие распространяется до следующего тега этого типа. Они имеют следующие атрибуты:

face=”…” задает имя шрифта или несколько возможных шрифтов для отображения шрифта;

size=”…” задает размер шрифта;

color=”…” задает цвет шрифта.

Установка цветов в документе производится с использованием атрибутов установки цвета в тегах. Выбор цвета можно проводить двумя способами: заданием имени или определением номера цвета по цветовой схеме RGB (Red, Green, Blue). Номер цвета RGB задается тремя двухзначными шест-надцатеричными числами, причем каждое число принадлежит интервалу от 00 до FF и определяет интенсивность соответствующего цвета. Язык HTML поддерживает много цветов, в табл.1 приведены коды и имена шестнадцати основных цветов.

Таблица 1

Часто при создании сайтов возникает необходимость во вставке различных символов. В таких случаях используется символ & (амперсанд) и соответствующий необходимому знаку код. Коды наиболее используемых символов приведены в табл.2.

Таблица 2

Одним из способов оживления страницы является задание бегущей строки в тексте документа. На самом деле возможно перемещение любых элементов страницы – изображений, текста, таблицы, элементов форм и т.п. Для этого используется контейнер <marquee>…</marquee> со следующими атрибутами:

width=”…” задает ширину бегущей строки в пикселях или процентах от ширины экрана;

height=”…” устанавливает высоту бегущей строки (в пикселях или процентах);

bgcolor=”…” определяет цвет фона бегущей строки;

behavior=”…” задает тип движения бегущей строки и имеет следующие значения: scroll – циклическая прокрутка строки из одного конца в другой, slide – текст появляется с одного края и останавливается у другого, alternate – текст перемещается от одного края к другому;

direction =”…” определяет направление движения бегущей строки. Имеет следующие значения: left – изображение движется влево по строке, right – изображение движется вправо по строке, up – вся строка перемещается сверху вниз, down – строка движется сверху вниз;

scrollamount=”…” определяет число пикселей, которые отделяют один текст от следующего;

scrolldelay=”…” указывает задержку в миллисекундах перед появлением следующего текстового блока;

loop=”…” задает число повторов анимации (любое положительное число). По умолчанию или при указании значения -1 браузер будет прокручивать текст бесконечное число раз;

HCPACE=”…” определяет горизонтальные поля вокруг контента;

VCPACE=”…” определяет вертикальные поля вокруг контента.

1.4.3 Выравнивание текста

Для выравнивания текста в документе используется атрибут align, который позволяет выровнять текст по левому или правому краю, по центру или ширине. Данный атрибут является атрибутом тега <p>, он также применим к графике и таблицам.

По умолчанию текст HTML выравнивается по левому краю и не выравнивается по правому, то есть начало строк находится на одном уровне, а концы – на разных. Для этого используется выражение:

<p align=”left”>…</p>.

Текст, выровненный по правому краю и не выровненный по левому: концы строк находятся на одном уровне, а начало на разных. Этот эффект достигается использованием выражения <p align=”right”>…</p>.

Существует несколько способов центрирования. Первым является использование выражения <p align=”center”>…</p>. Вторым является использование тега <center>…</center>, который центрирует любые объекты.

Выравнивание по ширине воспринимается немногими браузерами, поэтому использовать его не рекомендуется.

1.4.4 Работа со списками средствами языка HTML

В языке разметки гипертекста HTML предусмотрена возможность создания различных списков и перечислений. К ним относятся: нумерованный список, маркированный список, список определений, многоуровневый список.

Структура нумерованного списка следующая:

<ol> начало нумерованного списка;

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

<li>…</li> второй элемент списка;

<li>…</li> n-ый элемент списка;

</ol> конец нумерованного списка.

По умолчанию нумерация выполняется арабскими цифрами, начиная с единицы. Используя атрибуты тега <ol>, можно изменить стиль оформления списка. Атрибут type=”…” определяет стиль нумерации, при этом допускаются следующие его значения:

type=”A” использовать большие латинские буквы;

type=”a” использовать маленькие латинские буквы;

type=”I” использовать большие римские цифры;

type=”i” использовать маленькие римские цифры;

type=”1” использовать арабские цифры.

Также используются следующие атрибуты:

start=”…” определение начального значения списка;

reversed устанавливает обратный (убывающий) порядок нумерации элементов

Структура маркированного списка следующая:

<ul> начало маркированного списка

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