HTML_2 (Методические материалы к лабораторным работам 1, 2)

14

Лекция №2. Элементы языка HTML.

----------------------------------------------------------------

1. Шрифты. Элементы разметки текста

2. Списки

3. Гипертекстовые ссылки

----------------------------------------------------------------

Элементы отображения шрифтов и разметки текста

Элементы управления шрифтами: FONT и BASEFONT – НЕ ПОДДЕРЖИВАЮТСЯ В HTML5

Элемент FONT изменяет размер и цвет шрифта для содержимого элемента.

Начальный тег: обязателен, Конечный тег: не обязателен

Атрибуты:

size = число

Устанавливает размер шрифта. Возможные значения:

• Абсолютная шкала. Целое число от 1 до 7. Устанавливает фиксированный размер шрифта, представление которого зависит от броузера.

• Относительная шкала. Значение "+1" означает на один размер больше по сравнению с базовым. Значение "-3" означает шрифт на три размера меньше. Все размеры относятся к шкале от 1 до 7. По умолчанию, базовый размер шрифта = 3. Базовый размер шрифта можно задать с помощью элемента <BASEFONT>.

color = цвет текста

face = строка названий шрифтов

Определяет список разделенных запятыми названий шрифтов (в порядке приоритета).

Пример:

<FONT SIZE=”5” COLOR=”GREEN” FACE="ARIAL"><P>ARIAL</P></FONT>

<FONT SIZE=”-2” COLOR=”BROWN” FACE="TIMES,ARIAL"><P>TIMES</P></FONT>

Элемент BASEFONT устанавливает базовые параметры шрифта (размер, цвет, вид шрифта). Элемент BASEFONT может быть указан несколько раз на странице.

Начальный тег: обязателен, Конечный тег: не обязателен.

Если конечный тэг не указан, то действие элементов FONT или BASEFONT распространятется до конца документа.

Атрибуты у элемента <BASEFONT> такие же, как у элемента <FONT>, за исключением того, что в атрибуте SIZE можно указывать только значения по абсолютной шкале.

Пример:

<BASEFONT SIZE="5" COLOR="GREEN" FACE="Times,Arial">

<P>Размер 5</P>

<FONT SIZE=-1><P>Размер 4</P></FONT>

<FONT SIZE=-2><P>Размер 3</P>

---------------------------

Пример неправильного использования для IE.

<BASEFONT SIZE=2>

<FONT SIZE=-1><P>Размер 1</P></FONT>

<FONT SIZE=-3><P>Размер 1</P></FONT>

</BASEFONT>

<BASEFONT SIZE=5>

<FONT SIZE=+2><P>Размер 7</P></FONT>

<FONT SIZE=+5><P>Размер 7</P></FONT>

</BASEFONT>

То что не определено стандартом, зависит от броузера.

---------------------------

Элементы разметки текста

TT - Представляется как моноширинный шрифт (шрифт пишущей машинки). (ВИДЫ шрифтов: моноширинные, пропорциональные; с засечками, без засечек).

I - Представляет курсивом.

B - Представляется полужирным шрифтом.

BIG - Представляется "крупным" шрифтом. (рекурсивное действие)

SMALL - Представляется "малым" шрифтом. (рекурсивное действие)

STRIKE и S - Представляется перечеркнутым шрифтом.

U - Представляется подчеркнутым шрифтом. (лучше использовать осторожно, чтобы пользователь не воспринял как гиперссылку)

Пример:

<P><b>полужирный</b>, <i>курсив</i>, <b><i>полужирный курсив</i></b>, <tt>моноширинный</tt>, <big>большой</big> и <small>малый</small> текст.

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

P – Параграф текста

EM – Выделение (обычно курсив).

STRONG - Более сильное выделение (обычно полужирный шрифт).

DFN – определение термина.

CODE – Текст программы.

SAMP - пример

KBD - Текст, который должен ввести пользователь.

VAR - переменная

ABBR - аббревиатура (например, WWW, HTTP, URI, и т.д.).

ACRONYM - Акроним (например, радар и т.д.).

ADDRESS – Информация об адресе

CITE - Цитата. (как правило отображается курсивом)

BLOCKQUOTE – длинная цитата (более одного параграфа). Как правило, отображается с отступом.

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

SUB - Нижний индекс

SUP - Верхний индекс

PRE - Форматированный текст. Отображается моноширинным шрифтом. Внутри элемента PRE учитываются все пробелы и символы перехода на следующую строку. При отображении большинства других элементов эти символы не учитываются.

Начальный тег: обязателен, Конечный тег: обязателен

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

Атрибуты:

title = текст (отображается в виде всплывающей посдказки). Атрибут title присутствует у большинства элементов HTML, в том числе у рассмотренных элементов P и H1..H6.

Примеры:

---------------------------

<P>Текст с <U title="подсказка">всплывающей подсказкой</U></P>

<P>Текст с <FONT title="подсказка">всплывающей подсказкой</FONT></P>

---------------------------

H₂O

E = mc²

---------------------------

<P>

1-я строка без отступа.

Тоже 1-я строка.

</P>

<P>

&nbsp;&nbsp;&nbsp;1-я строка с отступом.

Тоже 1-я строка.

</P>

<PRE>

1-я строка с отступом.

2-я строка.

</PRE>

----------------------------

Элементы создания списков.

Упорядоченные и неупорядоченные списки.

UL – неупорядоченный (маркированный) список

Начальный тег: обязателен, Конечный тег: обязателен

OL – упорядоченный (нумерованный) список

Начальный тег: обязателен, Конечный тег: обязателен

LI (list item) – элемент маркированного или нумерованного списков

Начальный тег: обязателен, Конечный тег: необязателен

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

Оба эти типа списков состоят из последовательностей элементов списков LI.

Атрибуты:

type = строка

Устанавливает стиль элемента списка.

Для элемента UL возможными значениями атрибута type являются disc, square и circle. Значение, используемое по умолчанию, зависит от уровня вложенности текущего списка. Эти значения не учитывают регистр. Представление каждого значения зависит от броузера. Как правило, броузер отображает "disc" в виде небольшого заполненного кружка, "circle" - в виде окружности, а "square" в виде небольшого квадрата.

Для элемента OL возможные значения атрибута type следующие (учитывается регистр):

1 - арабские цифры

a - буквы нижнего регистра

A – буквы верхнего регистра

i – римские цифры в нижнем регистре

I – римские цифры в верхнем регистре

start = число

Только для OL. Задает начальный номер первого элемента в упорядоченном списке.

value = число

Только для LI. Устанавливает номер текущего элемента списка. Используется в том случае, когда необходимо указать номера элементов списка, отличающиеся от автоматической нумерации.

compact

Список становится более компактным по вертикали, если это возможно.

Пример:

<OL type="1">

<LI><P>Пункт 1

<UL>

<LI>1.1

<LI>1.2

</UL>

<LI><P>Пункт 2

<OL type="I">

<LI>2.1

<LI>2.2

</OL>

</LI>

</OL>

Результат:

1. Пункт 1

• 1.1

• 1.2

2. Пункт 2

I. 2.1

II. 2.2

------------------

<ol>

<li value="30">N 30.

<li value="40">N 40.

<li>N 41.

</ol>

Результат:

30. N 30

40. N 40

41. N 41

-------------------

Список определений ( элементы DL, DT и DD)

Отображается отступами.

DL - список определений

Начальный тег: обязателен, Конечный тег: обязателен

DT - определяемый термин

DD - определение

Начальные тег: обязателен, Конечный тег: не обязателен

Пример:

<DL>

<DT>Термин 1 <DD>Определение 1

<DT>Термин 2 <DD>Определение 2

</DL>

( Результат:

Термин 1

Определение 1

Термин 2

Определение 2

)

Гипертекстовые ссылки (A)

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

Гипертекстовая ссылка задается с помощью элемента <A>.

Если для элемента A установлен атрибут href, этот элемент определяет исходный якорь.

Пример:

<A href="http://iu5.bmstu.ru">Сайт ИУ-5</A>

Конечным якорем является главная страница сайта ИУ-5, его задает атрибут href.

Как правило, броузер подчеркивает содержимое элемента <A> и выделяет его синим цветом, определяя как гипертекстовую ссылку.

Задание конечных якорей гиперссылки:

1. Конечный якорь задается как URL, указывающий на ресурс Интернет.

<A href="picture.gif" title=”изображение”>ссылка на изображение</A>

2. Конечный якорь задается в атрибуте “name” элемента <A>.

<A href="#ancor1">начальный якорь</A>

...

<A name="ancor1">конечный якорь</A>

3. Конечный якорь задается в атрибуте ID любого элемента HTML.

Эта возможность появилась в последних версиях спецификации HTML.

<A href="#id_h1">начальный якорь</A>

...

<H1 id="id_h1">Заголовок</H1>

Можно устанавливать атрибуты name и href одновременно в одном элементе A.

Каким образом задается URL в атрибуте href:

1. С помощью абсолютного URL: http://www.mycompany.com/one.html#anchor-one

2. С помощью относительного URL: one.html#anchor-one или ../two/two.html#anchor-two

(если документ располагается на том же сайте)

3. Если якорь определен в текущем документе: #anchor-one

По возможности надо стараться использовать относительные ссылки.

Имена якорей должны быть уникальны, регистр не учитывается. Имена якорей должны содержать только символы набора ASCII.

Ссылки и якоря, определяемые элементом A, не могут быть вложенными; элемент A не должен содержать других элементов A.

Арибут name может содержать ссылки на символы. По спецификации атрибут id не может содержать ссылки на символы, хотя некоторые броузеры это поддерживают.

<A name="&uuml;">конечный якорь</A> - ДОПУСТИМО

<H1 id="&uuml;">Заголовок</H1> - ОШИБКА

--------------

Атрибуты элемента A.

id, name, href

hreflang = строка

Задает базовый язык ресурса, назначаемого атрибутом href, и может использоваться, только если указан атрибут href.

Двухбуквенные коды зарезервированы для сокращений языков по стандарту [ISO639]. Сюда входят коды fr (французский), de (немецкий), it (итальянский), nl (голландский), el (греческий), es (испанский), pt (португальский), ar (арабский), he (иврит), ru (русский), zh (китайский), ja (японский), hi (хинди), ur (урду) и sa (санскрит) и др.

type = строка

Определяет тип содержимого.

Примеры типов содержимого: "text/html", "image/gif", "video/mpeg".

Типы содержимого учитывают регистр.

charset = строка

Задает кодировку символов назначаемого ссылкой ресурса.

Например, Windows-1251 или KOI8-R