Пример полужирного шрифта.

Пример курсивного подчеркнутого текста.

Пример показывающий свойства вложенных тегов.

Текст вышеописанного примера.

Обратите внимание на то, что каждый пример начинается с новой строки, а межстрочный интервал одинарный.

Логическое форматирование:

Полужирным шрифтом отображается текст, заключенный между тегами:

<STRONG> ... </STRONG> (сильное выделение)

Курсивом (наклонным шрифтом) отображается текст, заключенный между тегами:

<DFN> ... </DFN> (определение)

<EM> ... </EM> (выделение)

<CITE> ... </CITE> (цитата)

<VAR> ... </VAR> (переменная)

Моноширинным щрифтом отображается текст, заключенный между тегами:

<CODE> ... </CODE> (программный код)

Параметры шрифта

Текст, заключенный между тегами <FONT ... > ... </FONT> имеет размер, цвет и гарнитуру, задаваемую следующими атрибутами:

SIZE = значение размер; задается либо в форме абсолютного значения (число от 1 до 7), либо относительно размера основного шрифта (в форме +n или –n)
COLOR = цвет цвет (см. ниже – представление цветов в html-документах)
FACE = список шрифтов предпочтительные гарнитуры для отображения текста; названия перечисляются через запятую, например, FACE="Verdana,Helvetica,Arial,Sans-Serif"

Представление цветов в HTML-документах

В HTML-документе существует возможность указывать цвет фона документа, фона ячеек таблиц и цвета текстовых фрагментов, в частности, цвета гиперссылок (обычных, активных и посещенных). Значения цвета можно задавать в одной из двух форм.

Первая форма использует задание цветов в RGB-палитре (Red-Green-Blue). При этом код цвета указывается как шестиразрядное шестнадцатеричное число, задающее интенсивность красной (первые две цифры), зеленой (следующие две цифры) и голубой (последние две цифры) составляющей.

Интенсивность каждой составляющей в шестнадцатеричной форме изменяется от 00 до FF. Очевидны коды черного (000000) и белого цветов (FFFFFF), а также ярко-красного, ярко-зеленого и ярко-синего (FF0000, 00FF00 и 0000FF). Миллионы оттенков (а именно, 166 = 16777216) могут быть заданы с помощью RGB-триады. При задании цвета в качестве значения атрибута некоторого тега перед шестнадцатеричным числом ставится символ #.

Возможно и задание цветов с помощью имен. Microsoft Internet Explorer поддерживает 16 стандартных имен цветов (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white), а Netscape Navigator – несколько сотен. Каждому названию цвета соответствует определенная RGB-триада, например, цвету "navy" соответствует "#000080".

Несмотря на принципиальную возможность задать миллионы цветов, надо учитывать, что браузеры отображают лишь 256 цветов, причем у каждого браузера своя цветовая палитра. В этой палитре браузер подберет цвет, наиболее близкий к заданному.

Задание 7.

Выделите части Вашего документа различными цветами и размером шрифта.

Цвета основного текста и фон документа

Цвет основного текста, цвета гипертекстовых ссылок и фон документа описываются в начальном теге тела документа <BODY>с помощью атрибутов:

TEXT=цвет цвет основного текста документа
LINK= цвет цвет непосещенных гиперссылок
VLINK= цвет цвет посещенных гиперссылок
ALINK= цвет цвет активных гиперссылок (вспыхивает на мгновение при щелчку мыши по гиперссылке)
BGCOLOR= цвет цвет фона документа
BACKGROUND=url адрес графического файла, используемого при создании фонового изображения (см. ниже – адресация ресурсов)

 

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

Фоновое изображение обычно выбирают небольшим по размеру; браузер помещает его в левый верхний угол окна документа и копирует, распространяя мозаикой по горизонтали и вертикали, пока не будет заполнено все пространство окна. Это, например, дает возможность создания различных полосатых и клетчатых фонов с помощью элементарных графических изображений. Чуть сложнее создать текстурный фон: тут придется немного поэкспериментировать с маленькими образцами фона, чтобы не было заметно "стыков".

Если указан атрибут BACKGROUND, отменяется цвет фона, заданный в BGCOLOR.

Задание 8.

Задайте цвет основного текста документа, цвет фона (или фоновое изображение) и цвет гиперссылок.

Адресация ресурсов

Местоположение информационных ресурсов в WWW может быть определено в абсолютной и относительной форме.

Адресация в абсолютной форме используется при ссылках на ресурсы, находящиеся на других серверах. Универсальный адрес, определяющий местонахождение информационного ресурса, носит название URL(Uniform Resource Locator – унифицированный адрес ресурса). URL состоит из двух частей, разделенных двоеточием. Первая часть указывает на тип сетевого протокола, который зависит от типа ресурса. Например, если ресурс располагается на WWW-сервере, это протокол http. Вторая часть включает в себя имя компьютера (сервера) в доменной системе имен и (если требуется) путевое имя файла. При записи путевого имени названия каталогов разделяются прямой косой чертой (символ /); в именах файлов и каталогов различаются прописные и строчные буквы; пробелы не допускаются. Вот примеры URL:

http://195.21.123.13:81100

ftp://everything.com/soft/prog.zip

mailto:Ivanov@hotmail.com

Последний URL, указывающий на протокол mailto и адрес электронной почты, стоит особняком в ряду других, поскольку не ссылается ни на какой информационный ресурс; это единственный тип URL, при записи которого не ставятся после двоеточия две косые черты (//).

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

Fauna/fox.htm

../Fauna/fox.htm

../../Town/ecology.htm

При адресации WWW-ресурсов (т.е. HTML-документов) есть возможность ссылаться и на фрагменты HTML-документов в виде http://www.ecosafe.nw.ru/tspm/win/Science.htm#new, где после символа # указывается заранее определенный идентификатор фрагмента (метка) документа.

Графические изображения

Тег <IMG>вставляет изображение в текстовый поток. Закрывающего компонента этот тег не имеет. Обязательный атрибут:

SRC = url адрес графического файла

Основные необязательные атрибуты:

ALT = текст альтернативный текст, выводимый в режиме браузера без загрузки изображений
BORDER = значение толщина обрамляющей рамки в пикселах; 0 означает отсутствие рамки (по умолчанию)
HEIGHT = значение высота изображения в пикселах (по умолчанию оригинальная) либо в процентах от высоты окна браузера
WIDTH = значение ширина изображения в пикселах (по умолчанию оригинальная) либо в процентах от ширины окна браузера
HSPACE = значение свободное пространство слева и справа от изображения в пикселах
VSPACE = значение свободное пространство сверху и снизу от изображения в пикселах
ALIGN = значение выравнивание изображения по горизонтали или вертикали. Значения TEXTTOP, ABSCENTER, CENTER, BOTTOM, ABSBOTTOM обеспечивают различные варианты вертикального выравнивания относительно текстовой строки; при применении этих значений вставленное изображение разрывает текстовый поток. Если заданы значения LEFT либо RIGHT, изображение соответствующим образом будет выровнено по горизонтали; задание этих значений обеспечивает обтекание изображения текстом
USEMAP = #имя указывается имя, задаваемое в теге MAP, задающем в данном изображении области, чувствительные к щелчку мыши

 

Несмотря на то, что формально обязательным является только атрибут SRC, на практике следует указывать и альтернативный текст (атрибут ALT). Ведь многие работают с браузером в режиме без загрузки изображений, особенно когда связь плохая, и документ загружается долго. К тому же, до сих пор существуют браузеры, не поддерживающие графики.

Значения атрибутов BORDER, HEIGHT и WIDTH тоже лучше указывать явным образом, не полагаясь на умолчания. Само наличие атрибутов HEIGHT и WIDTH говорит о возможности масштабирования исходного изображения. Увеличивать исходное изображение обычно бессмысленно, поскольку это ведет к потере качества.

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

Задание 9.

Вставьте графическое изображение в свой HTML-документ

Графические форматы

Браузеры поддерживают три графических формата:

• GIF – Graphic Interchange Format. При сохранении изображения в этом формате количество используемых цветов не должно превышать 256. Обычно этот формат используют для небольших изображений, содержащих области однородной окраски с четкими границами.

Формат GIF позволяет создать прозрачные фрагменты изображения. Кроме того, этот формат поддерживает анимацию.

• JPEG (JPG) – Joint Photography Experts Group. Этот формат допускает сохранение изображений, содержащих миллионы цветов, с тонкими цветовыми переходами. Например, фотографии обычно сохраняются в формате JPEG.

Изображения в этом формате не могут иметь прозрачных областей.

• PNG – Portable Network Graphics. Этот формат является развитием формата GIF; обладая всеми его преимуществами, не имеет ограничений в количестве используемых цветов.

Часто выбрать оптимальный для конкретного изображения формат можно только экспериментальным путем. При этом преследуется основная цель: достичь хорошего качества изображения при минимальном размере файла.

Списки

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

<OL> ... </OL> упорядоченный список (от англ. ordered list)

<UL> ... </UL> неупорядоченный список (от англ. unordered list)

Каждый элемент списка заключается в теги <LI> ... </LI> (от англ. list item). При выводе текста браузер располагает каждый элемент списка с новой строки, предваряя его номером либо маркером. Допустимы вложенные списки.

Тег <OL> имеет необязательные атрибуты:

TYPE = формат   формат нумерации; может иметь значения: 1 арабские цифры (по умолчанию) A прописные буквы a строчные буквы I большие римские цифры i маленькие римские цифры
START = значение первый номер в списке (по умолчанию 1)

 

Тег <UL>имеет необязательный атрибут

TYPE = формат формат маркера; может иметь значения: Disc диск (по умолчанию) Circle окружность Square квадрат

Задание 10.

Создайте следующие списки:

Говоря о таких файлах, употребляют разные термины:

§ HTML-файл,

§ HTML-документ,

§ Web-стра­ница.

Значения цвета можно задавать в одной из двух форм:

I. Задание цветов в RGB-палитре.

II. Задание цветов с помощью имен.

Таблицы

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

Все табличные данные заключаются в теги <TABLE> ... </TABLE>; описание каждого ряда ячеек заключается в теги<TR> ... </TR>; содержимое каждой ячейки заключается в теги<TD> ... </TD>.

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

<TABLE>

<TR>

<TD> содержимое 1-ой ячейки первой строки </TD>

<TD> содержимое 2-ой ячейки первой строки </TD>

</TR>

<TR>

<TD> содержимое 1-ой ячейки второй строки </TD>

<TD> содержимое 2-ой ячейки второй строки </TD>

</TR>

</TABLE>

Ячейки таблицы могут содержать любые данные, допустимые в HTML-документе, в частности, текст, изображения, текст с HTML-тегами; допустимы вложенные таблицы. Не следует оставлять ячейки таблицы незаполненными; если по замыслу web-мастера какая-то ячейка должна выглядеть пустой, поместите в нее хотя бы неразрывный пробел &nbsp;. Ячейки, не содержащие данных, могут некрасиво выглядеть в Netscape Navigator: не отображается заданный фон и рамки ячеек.

Помещаемый в ячейки таблицы текст по умолчанию автоматически размещается браузером (если не задан атрибут ячейки NOWRAP); текст выводится слово за словом; при достижении правой границы ячейки очередное слово переносится на новую строку.

Ячейки таблицы могут охватывать несколько строк или столбцов; при описании таких ячеек используется атрибуты ROWSPAN и COLSPAN.

Теги, описывающие таблицы, имеют много атрибутов; все они необязательны. Здесь упомянем те, которые одинаково поддерживаются браузерами Netscape Navigatorи Microsoft Internet Explorer.Учтите, что даже при использовании лишь этих атрибутов таблицы могут по-разному выглядеть в разных браузерах. Следовательно, как и во многих других случаях, уверенность в качестве Вашего сайта даст только тестирование в разных браузерах.

Атрибуты тега <TABLE>задают параметры таблицы в целом:

ALIGN = значение Выравнивание относительно текстового потока; возможны значения left, right и center
BACKGROUND = url Фоновое изображение для всей таблицы (Microsoft Internet Explorer 3.0 и выше и Netscape Navigator 4.0 и выше)
BGCOLOR = цвет Фоновый цвет
CELLPADDING = значение Расстояние от границ ячейки до ее содержимого в пикселах
CELLSPACING = значение Расстояние между ячейками в пикселах
HSPACE = значение Свободное пространство слева и справа от таблицы в пикселах
VSPACE = значение Свободное пространство сверху и снизу от таблицы в пикселах
WIDTH = значение Ширина таблицы; задается в пикселах или в процентах от текущей ширины окна браузера; примеры: WIDTH=256; WIDTH=100%

 

Атрибуты тега <TR>задают параметры данного ряда (при возникновении противоречий атрибуты, заданные в теге <TABLE>, отменяются).

ALIGN = значение Выравнивание содержимого ячеек; возможны значения left, right и center
BACKGROUND = url Фоновое изображение для ячеек данного ряда таблицы (Microsoft Internet Explorer 3.0 и выше и Netscape Navigator 4.0 и выше)
BGCOLOR = цвет Фоновый цвет для ячеек данного ряда
BORDER = значение Толщина рамки, обрамляющей ячейки данного ряда; BORDER=0 –без обрамления
VALIGN = значение Вертикальное выравнивание содержимого ячеек; возможны значения top, center и bottom

 

Атрибуты тега <TD>задают параметры данной ячейки (при возникновении противоречий атрибуты, заданные в тегах <TABLE>и <TR>, отменяются).

ALIGN = значение Выравнивание содержимого ячейки; возможны значения left, right и center
BACKGROUND = url Фоновое изображение для ячейки таблицы (Microsoft Internet Explorer 3.0 и выше и Netscape Navigator 4.0 и выше)
BGCOLOR = цвет Фоновый цвет для ячейки
BORDER = значение Толщина рамки, обрамляющей ячейку; BORDER=0 – без обрамления
VALIGN = значение Вертикальное выравнивание содержимого ячейки; возможны значения top, center и bottom
WIDTH = значение ширина ячейки; задается либо в пикселях, либо в процентах от ширины таблицы;
ROWSPAN = значение указывает количество строк, охватываемых ячейкой
COLSPAN = значение указывает количество столбцов, охватываемых ячейкой
NOWRAP при задании этого атрибута текст не располагается автоматически в ячейке; отображается лишь та его часть, что умещается в видимой части ячейки; может появиться горизонтальная полоса прокрутки.

 

При работе с таблицами учтите, что указанное значение атрибута WIDTH во многих случаях лишь "принимается к сведению" браузером. Заданные пропорции в точности выдерживаются редко, браузер старается отобразить таблицу как можно лучше (в его понимании).

Задание 11.

Создайте таблицу:

WIDTH = значение ширина ячейки; задается либо в пикселях, либо в процентах от ширины таблицы;
ROWSPAN = значение указывает количество строк, охватываемых ячейкой
COLSPAN = значение указывает количество столбцов, охватываемых ячейкой

Заголовки разных уровней внутри текста

Теги вида <Hn> ... </Hn>оформляют заключенный в них текст в виде заголовка уровня n. Значения n могут изменяться от 1 до 6. Заголовок высшего уровня выводится наиболее крупным шрифтом.

Теги <H1>, <H2>, ... , <H6> могут иметь атрибут выравнивания ALIGN со значениями LEFT (по умолчанию), RIGHT и CENTER.

Символьные примитивы

Символы < > " и & являются специальными символами HTML; при необходимости использовать их в тексте, отображаемом браузером, следует применять символьные примитивы:

 

символ соответствующий символьный примитив символ соответствующий символьный примитив
< > &lt; &gt; & " &amp; &quot;

 

Например, для того, чтобы в окне браузера вывести формулу 2 < 3, в тексте HTML-документа придется записать: 2 &lt; 3 .

Есть еще много десятков символьных примитивов, полный список которых приведен в описаниях стандартов HTML и некоторых справочниках. Здесь стоит упомянуть, по крайней мере, о символьных примитивах &copy; (знак авторского права ©), &reg; (зарегистрированный товарный знак ®) и &nbsp;(от англ. nonbreaking space – неразрывный пробел).

Комментарий

Текст комментария размещается в теге <!--...... текст комментария ....... --> и не отображается в окне браузера.

Гиперссылки

Связь между HTML-документами и фрагментами документов организуется с помощью тегов <A> ... </A>(от англ. anchor – якорь). Тег <A>употребляется в двух формах.

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

HREF = url

– адрес целевого документа.

Текст и изображения, размещенные между тегами <A> ... </A>, становятся активной зоной документа, чувствительной к щелчку мыши, который вызывает загрузку целевого документа. Текст гиперссылки выделяется подчеркиванием и цветом, указанным как значение атрибута LINK тега <BODY> (либо цветом по умолчанию).

Из необязательных атрибутов здесь упомянем один:

TARGET = имя

– имя кадра или окна для вывода целевого документа.

Во втором случае – при создании якоря (метки) фрагмента. В этом случае обязателен атрибут

NAME = имя

– имя идентификатора фрагмента.

Созданный в некоторой точке документа якорь служит для того, чтобы была возможность ссылаться не на весь документ целиком, а на его фрагмент. При создании ссылки на этот фрагмент используется тег <A>с атрибутом HREF. Имя идентификатора фрагмента дописывается к адресу целевого документа через символ #.

Вот пример совместного использования якоря и гиперссылки. Представим себе длинный документ book.htm, состоящий из нескольких глав. Создадим в точке начала каждой главы метку-якорь и дадим этим меткам удобные имена, например:

.......

<A NAME="chapter1"></A> Глава 1. ........

.......

<A NAME="chapter2"></A> Глава 2. ........

.......

Теперь можно создать гиперссылки из этого же документа или из любого другого на указанные фрагменты. Приведем, например, гиперссылки на точку документа, с которого начинается Глава 2.

Гиперссылка из того же документа:

<A HREF="#chapter2">переход к Главе 2</A>

Гиперссылка из другого документа, находящегося в том же каталоге:

<A HREF="book.htm#chapter2">переход к Главе 2</A>

Отметим, что тег <A> позволяет сделать активной зоной текстовый фрагмент или изображение целиком; для того же, чтобы разные фрагментыодного изображения ссылались на разные целевые документы, придется использовать тег <MAP>, реализующий чувствительное изображение-карту.

Задание 12.

1) Создайте метку в начале Вашего html-документа.

2) Создайте гиперссылку для перехода из конца документа в начало.

3) Создайте гиперссылку для перехода к другому документу:

а) сделайте активной зоной текстовый фрагмент;

б) сделайте активной зоной изображение (целиком).