Пример полужирного шрифта.
Пример курсивного подчеркнутого текста.
Пример показывающий свойства вложенных тегов.
Текст вышеописанного примера.
Обратите внимание на то, что каждый пример начинается с новой строки, а межстрочный интервал одинарный.
Логическое форматирование:
Полужирным шрифтом отображается текст, заключенный между тегами:
<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:[email protected]
Последний 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-мастера какая-то ячейка должна выглядеть пустой, поместите в нее хотя бы неразрывный пробел . Ячейки, не содержащие данных, могут некрасиво выглядеть в 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; при необходимости использовать их в тексте, отображаемом браузером, следует применять символьные примитивы:
| символ | соответствующий символьный примитив | символ | соответствующий символьный примитив |
| < > | < > | & " | & " |
Например, для того, чтобы в окне браузера вывести формулу 2 < 3, в тексте HTML-документа придется записать: 2 < 3 .
Есть еще много десятков символьных примитивов, полный список которых приведен в описаниях стандартов HTML и некоторых справочниках. Здесь стоит упомянуть, по крайней мере, о символьных примитивах © (знак авторского права ©), ® (зарегистрированный товарный знак ®) и (от англ. 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) Создайте гиперссылку для перехода к другому документу:
а) сделайте активной зоной текстовый фрагмент;
б) сделайте активной зоной изображение (целиком).