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

Теги логического уровня форматирования текста.

Тег <code>. Данный тег рекомендуется использовать для выделения фрагментов программных кодов в HTML-документе. Как правило, такой текст отображается моноширинным шрифтом.

Теги <del> и <ins>. С помощью тега-контейнера <del> рекомендуется отмечать текст как удаленный. Здесь предполагается, что по каким-либо причинам разработчику документа необходимо оставить удаленный текст на экране браузера, но пометить его как удаленный. Обычно такой текст браузеры отображают как перечеркнутый.

Аналогично используется тег-контейнер <ins>, который отмечает текст как добавленный (вставленный). Обычно такой текст помечается браузерами как подчеркнутый. Данный тег имеет те же необязательные параметры, что и тег <del>:

Тег <em>. Данный тег используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст курсивом.

Тег <kbd>. Тег-контейнер <kbd> служит для выделения текста, введенного с клавиатуры. Такой текст обычно отображается моноширинным шрифтом [1, с. 53].

Тег <samp>. Тег-контейнер <samp> отмечает текст как образец и обычно выводит моноширинным шрифтом и используется для форматирования текста, содержащих результаты действия программ.

Тег <strong>. Тег-контейнер <strong> служит для выделения важных фрагментов текста. Текст, выделенный данным тегом считается более важным, чем текст выделенный тегом <em>. При выводе браузеры обычно выделяют такой текст жирным шрифтом.

Тег <var>. Данный тег предназначен для выделения переменных программ и, как правило, отображается браузерами курсивом.

Рассматривая описанные выше теги, можно заметить, что результат действия некоторых тегов совпадает и дает один и тот же результат в окне браузера при отображении. Напрашивается вопрос: для чего необходимо такое разнообразие тегов, если они по результатам работы дублируют друг друга? Дело в том, что разработчики языка HTML дали возможность составителям HTML-документов корректно выделить те или иные информационные части в расчете на то, что будущее поколение браузеров и поисковых систем будут анализировать их и предоставлять большие возможности «конечным» пользователям для восприятия корректно отформатированного текста. Поэтому уже сейчас рекомендуется применять эти и другие теги логического форматирования текста для улучшения конкурентоспособности таких HTML-документов в будущем [1, с. 54].

Теги физического уровня форматирования текста.

Тег <b>. С помощью данного тега-контейнера выполняется выделение полужирным шрифтом части текста в HTML-документе, например:

<p>Это <b>текст с полужирным шрифтом</b> и обычный текст

На данный момент вместо тега <b> рекомендуется использовать тег <strong>.

Тег <i>. Данный тег служит для выделения текста курсивом следующим образом:

<p><i>Фрагмент текста, выделенный курсивом</i> и обычный текст

Тег <u>. Выполняет подчеркивание части текста в окне браузера:

<p><u>Подчеркнутый текст</u>

Теги <strike> и <s>. Данные теги-контейнеры позволяют выводить перечеркнутый текст в окне браузера. Обычно вместо этих тегов используется тег <del>, если зачеркнутый текст следует представлять как результат редактирования. Если же это просто элемент оформления, то следует использовать <strike> или <s>:

<p>Текст <strike>перечеркнутый</strike>

Теги <sub> и <sup>. С помощью данных тегов выполняется сдвиг текста относительно вниз и вверх соответственно. Это бывает удобно при оформлении математических выражений при простановке индексов или степеней:

<p>Оформление _{нижнего индекса}

<p>Оформление ^{верхнего индекса}

Тег <font>. Данный тег-контейнер позволяет задавать свойства шрифта при отображении текста в окне браузера. В настоящий момент не рекомендуется использовать тег <font> для форматирования документа, т.к. он нарушает принцип спецификации HTML 4.0 по разделению вида документа от его содержания. Вместо него лучше применять стилевое оформление, заданные в каскадных таблицах стилей (css). Тем не менее, рассмотрим данный тег, т.к. он бывает весьма полезен в простых документах и дает представление о свойствах шрифта [1, с. 55].

Тег <font> относится к последовательным элементам и не может включать в себя теги уровня блоков, например, <p>, <table>, <div> и т.п. Тег имеет следующие необязательные параметры.

Таблица 3

Необязательные параметры тега <font>

Тег <basefont>. Тег <basefont> задает значение свойств шрифта для всего текста документа и имеет те же свойства, что и тег <font>, т.е. color, face и size. Данный тег не нуждается в закрывающем теге и может располагаться в любой части документа, включая раздел <head> и повторяться сколько угодно раз. Следует отметить, что значения тега <basefont> могут переопределяться тегом <font> и восстанавливаться после закрывающего тега </font>, таким образом комбинируя возможные оформления в тексте HTML-документа.

Тег <img>. С помощью данного тега выполняется вывод изображений в окно браузера. Тег <img> имеет следующие наиболее распространенные необязательные параметры [1, с. 57].

Таблица 4

Необязательные параметры тега <img>

Изображение вставляется в строку текста, т.е. является объектом inline уровня. При этом, используя параметр align можно устанавливать способ выравнивания изображения по отношению к тексту.

Если же значение параметра align установить равным left или right, то изображение окажется «прижатым» к соответствующему краю окна браузера, а текст будет обтекать это изображение. При всех других способах

выравнивания изображение является «встроенным» в строку текста и составляет с ним единое целое.

Тег <span>. Тег-контейнер <span> предназначен для установки определенного стиля (формата) строчному фрагменту текста. Это тег inline уровня не приводит к разрыву текста и обычно используется для настройки собственных стилей, часто применяемых в HTML-документе. Для этого в таблице стилей (css) определяется нужный стиль и затем подключается через необязательный параметр class к тегу <span>.

<p>Пример работы <span style="color:red">тега span</span>

Тег <div>. Тег-контейнер <div> работает по тому же принципу, что и тег <span>, но в отличие от него является элементом уровня блока, т.е. по умолчанию никакая другая информация справа или слева от него не располагается. Данный тег используется для назначения общих свойств отображаемому блоку информации, например, для задания общего цвета фона, шрифта, размера, цвета текста и т.п. Как правило, все свойства прописываются в каскадной таблице стилей (css) и подключаются через параметр class тега <div> [1, с. 59].

<p>Пример работы <div style="color:red">тега div</div> - тега уровня блока.

Рисунок 4 - Пример работы тега <div>

2. Ссылки в HTML-документе

Отличительной особенностью HTML-страниц по отношению к стандартным текстам, напечатанным в книгах, газетах, журналах и т.п., является наличие ссылок на другие фрагменты этой же страницы или на сторонние документы. Наличие ссылок на страницах сайтов создают не просто текст, а гипертекст, т.е. текст, в котором пользователь может п лучить дополнительную информацию, кликнув мышкой на соответствующей ссылке [9, с. 253].

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

Ссылка в HTML-документах состоит из двух частей: видимой в окне браузера частью, называемой указателем ссылки (или анкором от англ. anchor – якорь) и адресной частью, URL-адресом, говорящим браузеру куда следует перенаправить пользователя при использовании данной ссылки.

Создание ссылок в документе. Ссылка задается с помощью тега <a>, у которого имеется основной параметр href="URL-адрес", определяющий URL-адрес страницы перенаправления:

<p>Пример <a href="mypage.htm">ссылки</a> в HTML-документе.

Рисунок 5 - Пример отображения ссылки в окне браузера документа

Здесь mypage.htm – URL-адрес страницы, на которую перейдет пользователь при нажатии на ссылку, а слово «ссылки» - анкор ссылки, т.е. видимая ее часть в окне браузера. В качестве анкора ссылки чаще всего выступают фрагменты текста или изображения.

В приведенном примере используется относительный URL-адрес страницы перенаправления, т.е. указывается только часть пути, где расположен требуемый документ (в данном случае имя документа mypage.htm), остальная часть пути к документу достраивается браузером автоматически, используя базовый адрес страницы.

Внутренние ссылки. Помимо ссылок на другие страницы или сторонние ресурсы можно создавать ссылки на разные разделы текущего документа. Например, большой документ может содержать оглавление, состоящий из таких ссылок, щелкая по которым, пользователь автоматически переходит к выбранной части документа [9, с. 254].

Для организации таких ссылок на странице создаются «маркеры», указывающие, куда должен быть перенаправлен пользователь при выборе той или иной ссылки. «Маркеры» создаются с помощью того же тега <a> с параметром name="имя маркера", а ссылка на этот маркер имеет вид

<a href="#имя маркера">Внутренняя ссылка</a>

Следует обратить внимание, что значение параметра href в этом случае должно начинаться с префикса #, говорящий что это внутренняя ссылка страницы.

Ниже представлен HTML-документ с внутренней ссылкой.

<html>

<head>

<title>Пример внутренней ссылки</title>

<meta http-equiv="Content-Type" content="text/html;

charset=windows-1251">

</head>

<body>

<h1>Оглавление</h1>

<a href="#chapter1">Глава 1</a>

<h2>Введение</h2>

<p>Введение в основы языка HTML.

<a name="chapter1"></a>

<h2>Глава 1</h2>

<p>Первая глава книги

</body>

</html>

Рисунок 6 - Пример организации внутренней ссылки в HTML-документе: а – начальное отображение страницы; б – результат перехода по ссылке к главе 1

Ссылки на другие ресурсы сети Интернет. В стандартной реализации ссылки, заданные в теге <a>, указывают на HTML-страницы в сети Интернет или на локальных ресурсах. Вместе с тем, существуют различные сервисы, имеющие иной формат передачи, приема, отображения данных отличный от HTML. Например, это может быть почтовый клиент, либо ftp-сеть передачи данных, либо telnet и т.п. Все эти и другие сервисы могут быть интегрированы в HTML-документ через ссылки. В этом случае также используется тег <a>, но в параметре href сначала указывается сервис, который подключается к документу, а затем, через двоеточие необходимые параметры этого сервиса [9, с. 255].

3. Списки в HTML-документе

В HTML-документах часто используется конструкция, представляющая собой список тех или иных данных. Например, это может быть список марок автомобилей, или знаков зодиаков, или рецептов блюд и т.п. Организовать такие списки можно, используя уже известные теги HTML. Однако гораздо более удобным и гибким инструментом являются специальные теги для представления списков в документе [9, с. 257].

3.1. Маркированный список

Наиболее простым в представлении является маркированный список, задаваемый тегом-контейнером <ul>. С его помощью формируются списки, у которых в качестве маркеров используются «отвлеченные» обозначения в виде квадратов, кружков, треугольников и др.

Для создания элементов списка используется тег <li>, записанный внутри тегов <ul> … </ul>. Тег <li> не требует закрывающего тега </li>, но его использование не возбраняется спецификацией языка HTML. Обычно браузер сам определяет где заканчивается один тег <li> и начинается другой. Кроме того, при определении элементов списка нет необходимости выполнять принудительный перенос строк с помощью тега <br> или тега <p>, эту задачу выполняет тег <li>, который четко структурирует элементы, образуя из них вид списка в окне браузера. Ниже представлен пример HTML-документа, использующий маркированный список для представления знаков зодиаков.