10.Введите заголовок списка: НЕНУМЕРОВАННЫЙ СПИСОК.
11.Вставьте в документ элементы списка (например, сосна, ель, пихта).
12.Завершите список при помощи тега </UL>.
13.Вставьте в документ список определений с помощью тега <DL>.
14.Вставьте в список определяемые термины, предваряя соответствующие абзацы тегом
<DT>.
15.Вставьте в список соответствующие определения терминов, предваряя их тегом
<DD>.
16.Завершите список при помощи тега </DL>.
17.Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить (F5) на панели инструментов. Посмотрите, как изменился вид страницы, обратив внимание на способ маркировки.
Создание таблиц
Таблицы удобно использовать для размещения однотипных данных и точного позиционирования элементов Web-страниц. Таблица задается при помощи парного тега <TABLE>. Она может содержать заголовок таблицы, определяемый парным тегом
<CAPTION> и строки таблицы, задаваемые при помощи парных тегов <TR>.
Каждая строка таблицы состоит из ячеек. Они относятся к одному из двух типов: ячейки в заголовках столбцов и строк (парный тег <TH>) и обычные ячейки (тег <TD>).
Каждая ячейка может содержать произвольный текст, а также любые теги HTML, допустимые в «теле» документа. В частности, ячейка таблицы может содержать вложенную таблицу или изображение.
Упражнение 5
1.Откройте документ structure.htm в программе Блокнот.
2.Удалите текст, находящийся между тегами <BODY> и </BODY>.
3.Введите парный тег <TABLE BORDER="10" WIDTH="100%">.
4.Введите строку: <CAPTION ALIGN="TOP">СПИCOК ТЕЛЕФОНОВ</CAPTION>, которая определяет заголовок таблицы.
5.Первая строка таблицы должна содержать заголовки столбцов. Определите ее следующим образом:
<TR BGCOLOR="YELLOW" ALIGN="CENTER"> <TH>ФАМИЛИЯ<TH>НОМЕР ТЕЛЕФОНА
5
6.Определите последующие строки таблицы, предваряя каждую из них тегом <TR> и помещая содержимое каждой ячейки (Фамилию, № телефона) после тега <TD>.
7.Последнюю строку таблицы задайте следующим образом:
<TR><TD ALIGN="CENTER" COLSPAN="2"> ДЛЯ ВЫХОДА В ГОРОД НАБЕРИТЕ КОД - 9.
8.Завершите таблицу тегом </TABLE>.
9.Сохраните документ под именем table.htm и откройте этот файл в обозревателе
Internet Explorer.
10.Изучите, как созданная таблица отображается в программе Internet Explorer, обращая особое внимание на влияние заданных атрибутов.
11.Измените ширину окна обозревателя и установите, как при этом изменяется внешний вид таблицы.
Создание изображения и размещение его на Web-странице
Рисунки хранятся на Web-узлах в отдельных файлах, но отображаются как элементы Web-страниц. Для вставки рисунка используется непарный тег <IMG>. Этот
тег должен содержать обязательный атрибут SRC=, задающий URL адрес файла с изображением в относительной или абсолютной форме, например: <IMG SRC=“picture1.gif”>.
Если рисунок необходимо масштабировать, применяют атрибуты WIDTH= и
HEIGHT=, задающие ширину и высоту рисунка (в пикселях):
<IMG SRC=“picture.jpg” WIDTH=“100” HEIGHT=“40”>.
Чтобы изображение отображалось автономно, его включают в отдельный абзац. Для изображения, которое включено в строку, можно задать режим взаимодействия с текстом с помощью атрибута ALIGN=, который может принимать следующие значения:
“BOTTOM” – нижняя граница изображения совмещается с основанием текстовой строки, “MIDDLE” – с серединой, “TOP” – с верхом строки, “LEFT” – изображение размещается у левого края страницы, “RIGHT” – у правого края.
В последних двух случаях тег <IMG> рекомендуется помещать в самое начало абзаца.
Между текстом и изображением должен оставаться некоторый промежуток. Задать величину этого промежутка можно при помощи атрибута HSPACE= (по горизонтали) и
VSPACE= (по вертикали). Размеры задаются в пикселях.
Альтернативный текст, который иногда выводится вместо изображения, задается как значение атрибута ALT=.
Так как изображение задается как текстовый элемент, оно может быть помещено внутрь другого текстового элемента, например, задающего гиперссылку. В этом случае изображение становится изображением-ссылкой.
6
Фоновый рисунок задается с помощью атрибута BACKGROUND= в теге <BODY> <BODY BACKGROUND=“waves.gif” TEXT=YELLOW>.
Упражнение 6
1.Откройте программу Paint (Пуск Программы Стандартные Paint).
2.Задайте размеры нового рисунка, например 100x100 точек (Рисунок Атрибуты).
3.Создайте рисунок и сохраните его под именем pic1.gif (!! в формате GIF !!).
4.В редакторе Paint создайте еще два рисунка и сохраните их под именами pic2.gif и pic3.gif
5.Откройте документ structure.htm и сохраните документ под именем picture.htm
6. Удалите текст, находящийся между тегами <BODY> и </BODY>.
7.После тега <BODY> введите произвольный текст (4-5 строк, каждая из которых должна заканчиваться <BR>).
8.Установите текстовый курсор в начало первой строки и введите непарный тег
<IMG SRC=“pic1.gif” ALIGN=“BOTTOM”>.
9.Посмотрите полученную страницу.
10.Вернитесь в программу Блокнот и добавьте еще два тега ко второй и третьей строкам документа picture.htm с атрибутами SRC=“pic2.gif” и SRC=“pic3.gif”. Сохраните файл.
11.Измените атрибуты тега <IMG> для новых рисунков: HSPACE=40 VSPACE=20 и ALIGN=“TOP”.
12.Вернитесь в программу Internet Explorer и посмотрите, как изменился вид страницы. В чем различие между созданными рисунками?
Создание гиперссылок
Гипертекстовая ссылка задается при помощи парного тега <A>, содержащего обязательный атрибут HREF= в качестве значения которого используется URL (адрес) того документа, на который указывает ссылка, например:
7
<A HREF=“HTTP://WWW.SITE.COM/INDEX.HTM”>
Адрес URL может быть задан в абсолютной форме, т.е. начинаться с указания протокола и адреса Web-узла. Такая запись используется, когда необходимо перейти на другой Web-узел и рассматривается как внешняя ссылка.
При использовании относительного адреса в ссылке задается только относительный путь для поиска документа. В этом случае предполагается использование того же протокола и того же Web-узла, а ссылка рассматривается как внутренняя. Так как относительный адрес автоматически переопределяется при переносе документа, то его использование является более предпочтительным.
Гиперссылки можно использовать для ссылки на мультимедийные файлы. Это часто помогает избежать потерь времени на ожидание их загрузки. Если же требуется интегрирование объектов мультимедиа в Web-страницу, то используют парный тег <OBJECT> или нестандартный непарный тег <EMBED>.
Упражнение 7
1.Откройте документ structure.htm в программе Блокнот.
2.Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Замените его предлагаемым ниже текстом.
3. Введите фразу: ТЕКСТ ДО ССЫЛКИ.
4.Введите тег: <A HREF=“STRUCTURE.HTM”>.
5.Введите фразу: ССЫЛКА.
6.Введите закрывающий тег </A>.
7.Введите фразу: ТЕКСТ ПОСЛЕ ССЫЛКИ.
8.Сохраните документ под именем link.htm и посмотрите полученную страницу.
9.Убедитесь в том, что текст между тегами <A> и </A> выделен как ссылка (цветом и подчеркиванием).
10.Щелкните на ссылке и убедитесь, что при этом загружается документ, на который указывает ссылка.
11.Щелкните на кнопке Назад на панели инструментов, чтобы вернуться к предыдущей странице. Убедитесь, что ссылка теперь считается «просмотренной» и отображается другим цветом.
Создание фреймов
Чтобы в рамках одной Web-страницы отобразить несколько документов страница должна быть разбита на несколько областей – фреймов. Структура такого документа отличается от обычной. Тело документа заменяется описанием фреймов, задаваемым парным тегом <FRAMESET> (элемента BODY в таком документе быть не должно).
Открывающий тег <FRAMESET> должен содержать обязательный атрибут COLS= или ROWS=, определяющий способ разбиения окна. В первом случае окно разбивается
вертикальными линиями, во втором – горизонтальными. Если заданы оба атрибута, создается сетка фреймов.
Значения атрибутов – относительные размеры отдельных фреймов (или размеры в
8
пикселях) < FRAMESET COLS=“60%, 40%”>. Последняя область может быть определена с помощью символа “*”, например, <FRAMESET ROWS=“40%, 40%, *”>.
Между открывающим и закрывающим тегами <FRAMESET> должно
располагаться ровно столько элементов, сколько областей создано с помощью атрибутов COLS= и ROWS=. При этом могут использоваться дополнительные элементы <FRAMESET>, описывающие дальнейшее разбиение на подобласти еще меньшего размера, или непарные теги <FRAME>, определяющие способ использования области.
Тег <FRAME> должен содержать обязательный атрибут SRC=, с помощью которого указывается, какой документ первоначально загружается в соответствующую область.
Атрибут NAME= позволяет задать «имя» созданной области в виде последовательности латинских букв и цифр: <FRAME SRC=“TEXT.HTM” NAME=“LEFT”>.
Упражнение 8
1.Запустите текстовый редактор Блокнот.
2.Введите следующий документ:
<HTML>
<HEAD>
<TITLE>ОПИСАНИЕ ФРЕЙМОВ</TITLE> </HEAD>
<FRAMESET ROWS="60%,*"> <FRAME SRC="TABLE.HTM">
<FRAMESET COLS="35%,65%"> <FRAME SRC="STRUCTURE.HTM"> <FRAME SRC="LINK.HTM">
</FRAMESET>
</FRAMESET>
</HTML>
3.Сохраните этот документ под именем frames.htm и откройте файл в обозревателе
Internet Explorer.
4.Изучите представление нескольких созданных ранее документов, в отдельных фреймах. Посмотрите, что происходит при изменении ширины окна обозревателя.
5.Проверьте, можно ли изменить положение границ фреймов методом перетаскивания при помощи мыши.
6.Щелкните на ссылке, имеющейся в одном из фреймов, и посмотрите, как будет отображен новый документ.
7.Щелкните на кнопке Назад на панели инструментов и убедитесь, что возврат к предыдущему документу на нарушает структуру фреймов.
8.Вернитесь в программу Блокнот и измените структуру и параметры фреймов по своему усмотрению. Сохраните документ
9