Контрольные задания
Используя атрибуты тега <BODY>, приведенные в п. 5.2.2., поэкспериментировать с заданием цветов, способами, указанными в п. 5.2.1.
Задействовать любой из доступных файлов-изображений (например, фоновые рисунки рабочего стола Windows) в Вашей html-странице.
Поэкспериментировать со всеми атрибутами тега <IMG>.
Загрузить несколько web-страниц различной тематики из сети Интернет. Сделать выводы об используемых в них различных сочетаниях цвета.
Лабораторная работа № 6
Списки
6.1. Цель работы
Научиться создавать списки в HTML-документах.
6.2. Теоретические сведения
HTML позволяет создавать нумерованные (упорядоченные), маркированные (неупорядоченные) списки, а также так называемые списки определений (используются сравнительно редко). Фрагмент текста, представляющий собой список, заключается в теги:
<OL> ... </OL> – упорядоченный список (от английского ordered list)
<UL> ... </UL> – неупорядоченный список (от английского unordered list)
<DL> ... </DL> – список определений (от английского definition list)
Каждый элемент упорядоченного или неупорядоченного списка заключается в теги <LI> ... </LI> (от английского list item). Элементы списка определений заключается в теги <DT> ... </DT> (термин) либо <DD> .. </DD> (определение). При выводе текста браузер располагает каждый элемент списка с новой строки, предваряя его номером либо маркером в случае соответственно упорядоченного или неупорядоченного списка.
В списке определений текст, заключенный между тегами <DD> ... </DD>, сдвигается на некоторое количество позиций (в разных браузерах по-разному) вправо относительно остального текста. Это свойство можно с успехом использовать и в том случае, когда по существу никакого списка нет, а просто надо сдвинуть ряд строк правее основного текста.
Тег <OL> имеет необязательные атрибуты (табл. 6):
Таблица 6
Необязательные атрибуты тега <OL>
TYPE = формат |
Формат нумерации. Может иметь значения: арабские цифры (по умолчанию); прописные буквы; строчные буквы; большие римские цифры; маленькие римские цифры |
START = значение |
Первый номер в списке (по умолчанию 1) |
Тег <UL> имеет необязательный атрибут (табл. 7):
Таблица 7
Необязательный атрибут тега <UL>
TYPE = формат |
Формат маркера. Может иметь значения: Disc – диск (по умолчанию); Circle – окружность; Square – квадрат |
Пример ненумерованного списка:
Пример 6.1
<UL>
<LI>Иван;
<LI>Данила;
<LI>белая кобыла
</UL>
Заменив </UL> на </OL>, получим пример нумерованного списка.
Пример списка определений:
Пример 6.2
<DL>
<DT>HTML
<DD>Термин HTML (HyperText Markup Language) означает 'Язык
маркировки гипертекстов'. Первую версию HTML разработал сотрудник
Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
<DT>html-документ
<DD>Текстовый файл с расширением *.htm (Unix-системы могут
содержать файлы с расширением *.html).
</DL>
Если определяемые термины достаточно коротки, можно использовать тег <DL COMPACT>, например:
Пример 6.3
<DL COMPACT>
<DT>А
<DD>Первая буква алфавита
<DT>Б
<DD>Вторая буква алфавита
<DT>В
<DD>Третья буква алфавита
</DL>
Допустимы вложенные списки, они очень удобны при подготовке разного рода планов и оглавлений:
Пример 6.4
<H1>HTML поддерживает несколько видов списков </H1>
<DL>
<DT>Ненумерованные списки
<DD>Элементы ненумерованного списка выделяются специальным
символом и отступом слева:
<UL>
<LI>Элемент 1
<LI>Элемент 2
<LI>Элемент 3
</UL>
<DT>Нумерованные списки
<DD>Элементы нумерованного списка выделяются отступом слева,
а также нумерацией:
<OL>
<LI>Элемент 1
<LI>Элемент 2
<LI>Элемент 3
</OL>
<DT>Списки определений
<DD>Этот вид списков чуть сложнее, чем два предыдущих, но и
выглядит более эффектно.
<P>Помните, что списки можно встраивать один в другой, но не
следует закладывать слишком много уровней вложенности. </P>
<P>Обратите внимание, что внутри элемента списка может
находиться несколько абзацев. Все абзацы при этом будут иметь
одинаковое левое поле. </P>
</DL>
Контрольные задания
Выполнить все примеры, приведенные в данном разделе.
Создать html-страницу со свободной тематикой, оформив ее с использованием всего пройденного материала.
Лабораторная работа № 7
Гиперссылки
7.1. Цель работы
Научиться использовать гиперссылки в HTML-документах.
7.2. Теоретические сведения
В отличие от обыкновенного текста, который можно читать только от начала к концу, гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Системы помощи многих популярных программных продуктов устроены именно по гипертекстовому принципу. При нажатии левой кнопкой мыши на некоторый выделенный фрагмент текущего документа происходит переход к заранее назначенному документу или фрагменту документа.
Связь между html-документами и фрагментами документов организуется с помощью тегов <A> ... </A> (от английского anchor - якорь).
Тег <A> употребляется в двух формах.
В первом случае – при создании гиперссылки. При этом обязательным является атрибут HREF = url – адрес целевого документа. Текст и изображения, размещенные между тегами <A> ... </A>, становятся активной зоной документа, чувствительной к щелчку мыши, который вызывает загрузку целевого документа. Текст гиперссылки выделяется подчеркиванием и цветом, указанным как значение атрибута LINK тега <BODY> (либо цветом по умолчанию). Из необязательных атрибутов здесь упомянем один: TARGET = имя – имя фрейма или окна для вывода целевого документа.
Во втором случае – при создании якоря (метки) фрагмента. Здесь обязателен атрибут NAME = имя – имя идентификатора фрагмента. Созданный в некоторой точке документа якорь служит для того, чтобы была возможность ссылаться не на весь документ целиком, а на его фрагмент. При создании ссылки на этот фрагмент используется тег <A> с атрибутом HREF. Имя идентификатора фрагмента дописывается к адресу целевого документа через символ #.
Рассмотрим пример совместного использования якоря и гиперссылки. Представим себе длинный документ book.htm, состоящий из нескольких глав. Создадим в точке начала каждой главы метку-якорь и дадим этим меткам удобные имена, например:
Пример 7.1
.......
<A NAME="chapter1"></A> Глава 1. ........
.......
<A NAME="chapter2"></A> Глава 2. ........
.......
Следите за написанием имен якорей: большинство браузеров отличают большие заглавные буквы от строчных.
Теперь можно создать гиперссылки из этого же документа, или из любого другого на указанные фрагменты. Приведем, например, гиперссылки на точку документа, с которого начинается Глава 2. Гиперссылка из того же документа: <A HREF="#chapter2">переход к Главе 2</A>. Гиперссылка из другого документа, находящегося в том же каталоге: <A HREF="book.htm#chapter2">переход к Главе 2</A>
Обратите внимание: если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере. Из этого следует одно очень важное практическое соображение. Допустим, Вы подготовили к публикации некоторую группу html-документов, которые ссылаются друг на друга только по имени файла и находятся в одном каталоге на Вашем компьютере. Тогда вся эта группа документов будет работать точно так же, если ее поместить в любой другой каталог на любом другом компьютере, на локальной сети или ... в Интернет! Таким образом, у Вас появляется возможность разрабатывать целые коллекции документов без подключения к Интернету и только после окончательной готовности, подтвержденной испытаниями, помещать коллекции документов на Интернет целиком.
Отметим, что тег <A> позволяет сделать активной зоной текстовый фрагмент или изображение целиком (например, <A HREF="pr.htm"> <IMG SRC="picture.gif"> </A>). Для того, чтобы разные фрагменты одного изображения ссылались на разные целевые документы, придется использовать тег <MAP>, реализующий чувствительное изображение-карту (см. лаб. раб. № 8).
Возможны также ссылки и на другие виды ресурсов:
<A HREF="ftp://server/directory/file.ext">Выгрузить файл</A>;
<A HREF="mailto:user@mail.box">Послать письмо</A>.
Контрольные задания
Используя примеры, приведенные в данном разделе, создать гиперссылки с одного Вашего html-документа на другой, а также на фрагменты документа.
Проработать тематику и структуру Вашего курсового проекта. Начать создание его отдельных элементов.
Лабораторная работа № 8
Изображение-карта
8.1. Цель работы
Научиться использовать изображение-карту в HTML-документах.
8.2. Теоретические сведения
Иногда согласно дизайнерскому замыслу web-мастера в html-документ надо поместить изображение, отдельные части которого должны переводить по гиперссылке на разные целевые документы. Один из очевидных примеров такого изображения – географическая карта, щелкнув мышкой по определенным зонам которой, мы переходим к соответствующим документам. В этом случае организовать ссылку с использованием тега <A> непосредственно нельзя и приходится либо «разрезать» изображение на несколько отдельных, состыковывать их и действовать обычным образом (см. лаб. раб. № 7), либо использовать тег <MAP>.
У тега-контейнера <MAP> единственным обязательным атрибутом является его имя NAME, которое должно быть использовано при описании атрибута USEMAP тега IMG, описывающего изображение, призванного служить картой. Внутри <MAP> каждой чувствительной к перемещению мыши зоне изображения должен соответствовать тег <AREA> с атрибутами (табл. 8).
Таблица 8
Атрибуты тега <AREA>
COORDS = список |
Список (через запятую) координат активной зоны (зависит от типа заданной формы зоны) |
HREF = url |
Адрес целевого документа гиперссылки, связанного с указанной зоной |
SHAPE = форма |
Возможные значения: circle (окружность – задается координатами центра и радиусом в пикселах); rectangle (прямоугольник – задается координатами левого верхнего и правого нижнего угла); polygon (многоугольник – задается координатами своих вершин) |
NOREF |
Иногда бывает нужно указать, что данная зона (заданная атрибутом SHAPE и координатами COORDS) не является активной, реакции на щелчок мыши нет |
Пусть, например, у нас есть изображение russia.gif размера 360х200 пиксела и три html-документа, на которые надо организовать гиперссылки: peterburg.htm, moscow.htm и yakutsk.htm.
Активными зонами изображения сделаем кружки, условно отмечающие местоположение на карте трех городов (рис. 5).
Рис. 5. Местоположение трех городов на карте
Центры кружков, если принять за точку отсчета (0,0) левый верхний угол изображения, находятся примерно на уровне:
(47,58) – Санкт-Петербург (координаты указаны на картинке);
(46,82) – Москва;
(254,91) – Якутск.
Логично в данном случае выбрать окружность в качестве формы активной зоны. Приняв, например, радиус этой окружности равным 8 пикселам (с избытком), реализовать гиперссылки можно с помощью следующего HTML-кода:
Пример 8.1
<IMG SRC="russia.gif" ALT="Карта России" WIDTH="360" HEIGHT="200"
BORDER=0 USEMAP="#mymap">
<MAP NAME="mymap">
<AREA SHAPE="circle" COORDS="47,58,8" HREF="peterburg.htm">
<AREA SHAPE="circle" COORDS="46,82,8" HREF="moscow.htm">
<AREA SHAPE="circle" COORDS="254,91,8" HREF="yakutsk.htm">
</MAP>.
Контрольные задания
Задействовать любой из доступных файлов-изображений (например, фоновые рисунки рабочего стола Windows) для создания изображения-карты.
Использовать помеченные Вами фрагменты изображения-карты для ссылок на разные целевые документы.
Лабораторная работа № 9
Таблицы
9.1. Цель работы
Научиться создавать таблицы в HTML-документах.
9.2. Теоретические сведения
Таблицы в html-документах используются не столько для того, чтобы располагать данные в обрамленных ячейках, сколько с целью позиционирования фрагментов текста и изображений друг относительно друга. Действительно, помещая изображения и фрагменты текста в ячейки таблицы с невидимой границей, можно добиться эффекта обтекания изображения текстом, расположить текст как многоколоночный и так далее. Кроме того, таблица, состоящая из одной ячейки, может очень эффектно выделить фрагмент текста, на который Вы хотите обратить внимание читателя.
Основные теги, используемые для описания таблиц: <TABLE> ... </TABLE>; <TR> ... </TR>; <TD> ... </TD>. Все табличные данные заключаются в теги <TABLE> ... </TABLE>; описание каждого ряда ячеек заключается в теги <TR> ... </TR>; содержимое каждой ячейки заключается в теги <TD> ... </TD>.
Таким образом, для описания, например, таблицы из двух строк (рядов), каждая из которых содержит две ячейки, придется создать следующую конструкцию:
Пример 9.1
<TABLE>
<TR>
<TD> содержимое 1-й ячейки первой строки </TD>
<TD> содержимое 2-й ячейки первой строки </TD>
</TR>
<TR>
<TD> содержимое 1-й ячейки второй строки </TD>
<TD> содержимое 2-й ячейки второй строки </TD>
</TR>
</TABLE>
Ячейки таблицы могут содержать любые данные, допустимые в html-документе, в частности текст, изображения, текст с html-тегами. Допустимы также вложенные таблицы. Не следует оставлять ячейки таблицы незаполненными. Если по Вашему замыслу какая-то ячейка должна выглядеть пустой, поместите в нее хотя бы неразрывный пробел . Ячейки, не содержащие данных, могут некрасиво выглядеть в Netscape Navigator: не отображаться заданный фон и рамки ячеек.
Помещаемый в ячейки таблицы текст по умолчанию автоматически размещается браузером (если не задан атрибут ячейки NOWRAP); текст выводится слово за словом; при достижении правой границы ячейки очередное слово переносится на новую строку.
Ячейки таблицы могут охватывать несколько строк или столбцов; при описании таких ячеек используется атрибуты ROWSPAN и COLSPAN.
Теги, описывающие таблицы, имеют много атрибутов; все они необязательны. Упомянем лишь те, которые одинаково поддерживаются браузерами Netscape Navigator и Microsoft Internet Explorer. Учтите, что даже при использовании только этих атрибутов, таблицы могут выглядеть в разных браузерах по-разному. Следовательно, как и во многих других случаях, уверенность в качестве Вашего сайта даст только тестирование во многих браузерах.
Атрибуты тега <TABLE> задают параметры таблицы в целом (табл. 9).
Таблица 9
Атрибуты тега <TABLE>
ALIGN = значение |
Устанавливает расположение таблицы по отношению к полям документа. Возможны значения left, right и center |
BACKGROUND = url |
Фоновое изображение для всей таблицы |
Окончание табл. 9
BGCOLOR = цвет |
Фоновый цвет |
BORDER = значение |
Толщина внешней рамки таблицы и ячеек в пикселах (0 – без обрамления) |
CELLPADDING = значение |
Расстояние от границ ячейки до ее содержимого в пикселах |
CELLSPACING = значение |
Расстояние между ячейками в пикселах. |
HSPACE = значение |
Свободное пространство слева и справа от таблицы в пикселах |
VSPACE = значение |
Свободное пространство сверху и снизу от таблицы в пикселах |
WIDTH = значение |
Ширина таблицы. Задается либо в пикселах, либо в процентах от текущей ширины окна браузера. Примеры: WIDTH=256; WIDTH=100% |
Атрибуты тега <TR> задают параметры данного ряда (при возникновении противоречий атрибуты, заданные в теге <TABLE>, отменяются) (табл. 10):
Таблица 10
Атрибуты тега <TR>
ALIGN = значение |
Выравнивание содержимого ячеек. Возможны значения left, right и center. |
BACKGROUND = url |
Фоновое изображение для ячеек данного ряда таблицы. |
BGCOLOR = цвет |
Фоновый цвет для ячеек данного ряда. |
BORDER = значение |
Толщина рамки, обрамляющей ячейки данного ряда (0 - без обрамления). |
VALIGN = значение |
Вертикальное выравнивание содержимого ячеек. Возможны значения top, center и bottom. |
Атрибуты тега <TD> задают параметры данной ячейки (при возникновении противоречий атрибуты, заданные в тегах <TABLE> и <TR>, отменяются) (табл. 11):
Таблица 11
Атрибуты тега <TD>
ALIGN = значение |
Выравнивание содержимого ячейки. Возможны значения left, right и center |
BACKGROUND = url |
Фоновое изображение для ячейки таблицы |
BGCOLOR = цвет |
Фоновый цвет для ячейки |
BORDER = значение |
Толщина рамки, обрамляющей ячейку (0 – без обрамления) |
Окончание табл. 11
VALIGN = значение |
Вертикальное выравнивание содержимого ячейки. Возможны значения top, center и bottom |
WIDTH = значение |
Ширина ячейки. Задается либо в пикселах, либо в процентах от ширины таблицы |
ROWSPAN = значение |
Указывает количество строк, охватываемых ячейкой |
COLSPAN = значение |
Указывает количество столбцов, охватываемых ячейкой |
NOWRAP |
При задании этого атрибута текст не располагается автоматически в ячейке. Отображается лишь та его часть, что умещается в видимой части ячейки. Может появиться горизонтальная полоса прокрутки |
При работе с таблицами учтите, что указанное значение атрибута WIDTH во многих случаях лишь «принимается к сведению» браузером. Заданные пропорции в точности выдерживаются редко, браузер старается отобразить таблицу как можно лучше (в его понимании).
Отметим, что любая ячейка таблицы может содержать в себе другую таблицу.
Пример 9.2
<H1>Простейшая таблица </H1>
<TABLE BORDER=1> <!--Это начало таблицы-->
<CAPTION> <!--Это заголовок таблицы-->
У таблицы может быть заголовок
</CAPTION>
<TR> <!--Это начало первой строки-->
<TD> <!--Это начало первой ячейки-->
Первая строка, первая колонка
</TD> <!--Это конец первой ячейки-->
<TD> <!--Это начало второй ячейки-->
Первая строка, вторая колонка
</TD> <!--Это конец второй ячейки-->
</TR> <!--Это конец первой строки-->
<TR> <!--Это начало второй строки-->
<TD> <!--Это начало первой ячейки-->
Вторая строка, первая колонка
</TD> <!--Это конец первой ячейки-->
<TD> <!--Это начало второй ячейки-->
Вторая строка, вторая колонка
</TD> <!--Это конец второй ячейки-->
</TR> <!--Это конец второй строки-->
</TABLE> <!--Это конец таблицы-->
Контрольные задания
Выполнить все примеры, приведенные в данном разделе.
Рассмотреть возможность использования таблиц в Вашем курсовом проекте.
Лабораторная работа № 10
Фреймы
10.1. Цель работы
Научиться создавать фреймы в HTML-документах.
10.2. Теоретические сведения
Фреймы (от английского frame) позволяют разбить окно браузера на области, в каждую из которых можно загрузить свой html-документ. При описании гиперссылок в этом случае есть возможность отобразить целевой документ в любом фрейме из описанного набора.
Структура html-документа, задающего набор фреймов, отличается от простейшей, описанной в п. 2.2.2. Секция <HEAD> по-прежнему присутствует, а вместо секции <BODY>, описывающей содержание одного документа, используется конструкция, описывающая набор фреймов. При этом используются два тега:
<FRAMESET> ... </FRAMESET> – описывает структуру набора фреймов; указывает, на сколько фреймов и каких пропорций надо разбить окно браузера;
<FRAME> – для каждого фрейма указывает, какой документ и с какими параметрами первоначально загружается в фрейм.