Лабораторная работа №3. Работа со списками. Гипертекстовые ссылки ..23

Лабораторный практикум

 

 

Рыбница, 2011

УДК 338.24

ББК 32.81

М 64

 

Составитель

В.Н. Черний, преп. каф. прикладной информатики

 

Рецензенты:

Л.А. Тягульская, канд. экон. наук, доц. кафедры физики математики и информатики филиала ПГУ им. Т.Г. Шевченко в г. Рыбница

И.А. Печерский, программист отдела автоматизации ЗАО «Агропром банк»

 

 

М 64 Мировые информационные ресурсы: лабораторный практикум/

Сост. В.Н. Черний. – Рыбница, 2011. – 62 с. (в обл.)

 

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

Лабораторный практикум предназначен для студентов дневной формы обучения специальности "Прикладная информатика в экономике" (080801) и соответствует рабочей программе указанной дисциплины.

 

 

УДК 338.24

ББК 32.81

 

 

Рекомендовано Научно-методическим советом ПГУ им. Т.Г. Шевченко

 

 

© Составление:

Черний В.Н., 2011

Содержание

 

Введение………………………………………………………………………….4

Лабораторная работа №1. Структура HTML–документа……………………5

Лабораторная работа №2. Работа с текстом………………………………...12

Лабораторная работа №3. Работа со списками. Гипертекстовые ссылки..23

Лабораторная работа №4. Объекты HTML–документов…………………..30

Лабораторная работа № 5. Оформление HTML документа. Таблицы…....38

Лабораторная работа № 6. Формы в HTML………………………………...46

Лабораторная работа №7. Работа с фреймами……………………………...54

Заключение……………………………………………………………………..60

Список литературы …………………………………………………………...61

Введение

Основным элементом WWW (World Wide Web) является web-страница– текст, размеченный специальными маркерами-тегами, которые обеспечивают определенный внешний вид материала и его связи с другими страницами. Все web-страницы записываются на специальном языке HTML. Сегодня технология WWW позволяет пользователям создавать web-страницы, которые посредством гиперссылок связаны с другими страницами и прочими размещенными в Интернете ресурсами.

HTML – язык разметки гипертекста (HyperText Markup Language), используемый при создании web-страниц.

Гиперссылка – выделенный фрагмент документа (текст, иллюстрация), с которым ассоциирован адрес другого web-документа.

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

Совокупность web-страниц, связанных между собой взаимными гиперссылками, называется web-узлом, или web-сайтом. Web-сайт располагается на web-сервере в определенной папке этого сервера.

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

Лабораторная работа №1

Заголовок HTML–документа

Заголовок HTML–документа создается с помощью элемента HEAD, между тэгами которого размещаются элементы, содержащие техническую информацию о документе. Заголовок располагается до тела документа.

Элементы, относящиеся к заголовку документа:

HEAD	Определяет начало и конец заголовка документа
TITLE	Определяет имя всего документа, которое отображается в заголовке окна браузера
BASE	Определяет базовый адрес, от которого отсчитываются относительные линки внутри документа
STYLE	Используется для вставки в документ таблицы стилей CSS
LINK	Описывает взаимосвязь документа с другими объектами

HEAD

(HTML 1.0) – Head

Определяет начало и конец заголовка документа. Является контейнером для элементов, содержащих техническую информацию о документе.

 

<HTML>

<! –Начинаем загодовок…–>

<HEAD>

<TITLE>справочник по HTML</TITLE>

</HEAD>

<! –…кончили. Дальше пошло тело документа –>

<BODY>

Текст документа

</BODY>

</HTML>

TITLE

(HTML 2.0) – Title

Определяет имя всего документа. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML–документа и может быть указан не более одного раза.

…

<HEAD>

<TITLE>руководство по эксплуатации</TITLE>

</HEAD>

…

BASE

(HTML 3.2) – Base URL

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

Параметры:

HREF – определяет базовый адрес (URL) текущего документа.

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

<HEAD>

<! – Пусть браузер думает, что находится по адресу: –>

<BASE HREF = “http://www.igf.ru/other/index.html”>

</HEAD>

…

<! – А теперь создадим относительную ссылку на документ – >

<! – http://www.igf.ru/other/list.html –>

<A HREF = “../list.html”> Список </A>

…

STYLE

(HTML 3.2) – Style

Используется для вставки в документ таблицы стилей (CSS – Cascade Style Sheet).

Параметры:

TYPE – обязательный параметр. Определяет MIME–тип вставляемого блока стилей. Как правило, значением этого параметра является "text/css".

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

<HEAD>

<TITLE> Пример использования таблицы стилей </TITLE >

<! – Втыкаем табличку стилей –>

<STYLE TYPE = “text/css” TITLE = “Cool table”>

<! –

A {text – decoration: none;}

P {color: blue, font – size: 12pt; font – family: Arial;}

H1{color: red; font – size: 18pt;}

- >

</STYLE >

<! – … кончили втыкать –>

</HEAD>

 

LINK

(HTML 2.0) – Link

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

Параметры:

HREF – определяет URL объекта.

REL – определяет тип взаимосвязи текущего документа с объектом, определенным параметром HREF. Возможные значения:

stylesheet – указывает на файл, содержащий таблицу стилей (CSS) для текущего документа. Браузер загрузит css–файл с указанного в параметре HREF адреса и применит его к текущему документу.

home – указывает на заглавную страницу вашего сайта

toc, contents – указывают на файл, содержащий оглавление данного документа.

index – указывает на файл, содержащий информацию для индексного поиска по текущему документу.

glossary – указывает на файл, содержащий перечень терминов, относящихся к текущему документу.

copyright – указывает на страницу сайта, в которой говорится о его создателях, авторских правах и т.п.

up, parent – указывает на "родительскую" страницу (документ, стоящий на ступеньку выше в иерархической структуре вашего сайта).

child – указывает на "дочернюю" страницу (документ, стоящий на ступеньку ниже в иерархической структуре вашего сайта).

next – указывает на следующую страницу в последовательности документов (напр. следующую страницу электронного каталога, документации или словаря).

previous – указывает на предыдущую страницу в последовательности документов.

last, end – указывает на последнюю страницу в последовательности документов.

first – указывает на первую страницу в последовательности документов.

help – указывает на страницу с подсказкой (напр. по навигации по вашему сайту).

TYPE – определяет MIME–тип для объекта, указанного в параметре HREF.

<HEAD>

<TITLE> Элементы DIV</ TITLE >

<LINK REL = “HOME” TITLE = “HTML – справочник” HREF = “index.html”>

< LINK REL = “UP” TITLE = “Текстовые блоки” HREF = “textblocks.html”>

<LINK REL = “PREVIOUS” TITLE = “Элемент Р” HREF = “р.html”>

<LINK REL = “NEXT” TITLE = “Элемент ADDRESS” HREF = “address.html”>

</HEAD>

 

<HEAD>

<TITLE> Полдневье </ TITLE >

<LINK REL = “stylesheet” TYPE = “text/css” HREF = “deco1.css”>

Тело HTML-документа

BODY

(HTML 2.0) - Body

Указывает начало и конец тела HTML-документа. Между начальным и конечным тэгами содержится текст документа, изображения и таблицы. Одним словом, все HTML-элементы, отвечающие за отображение документа, управление им и гипертекстовые ссылки. Элемент BODY должен встречаться в документе не более одного раза.

Параметры:

MARGINHEIGHT - определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Netscape.

TOPMARGIN - определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer.

MARGINWIDTH - определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Netscape.

LEFTMARGIN - определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Internet Explorer.

BACKGROUND - определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате gif или jpg.

BGCOLOR - определяет цвет фона документа.

TEXT - определяет цвет текста в документе.

LINK - определяет цвет гиперссылок в документе.

ALINK - определяет цвет подсветки гиперссылок в момент нажатия.

VLINK - определяет цвет гиперссылок на документы, которые вы уже просмотрели.

Значения параметров BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB-значением в шестнадцатеричной системе.

<HTML>

<BODY BACKGROUND=”image.jpg” BGCOLOR=“#202020” TEXT=”#FFFFFF” LINK=”#FF0000” VLINK=”#505050” MARGINHEIGHT=”30” TOPMARGIN=”30” LEFTMARGIN=”40” MARGINWIDTH=”40”>

…

Текс документа.

…

</BODY>

</HTML>

Примечание:

При задании ширины полей для обеспечения совместимости со всеми видами браузеров используйте одновременно параметры MARGINWIDTH/MARGINHEIGHT и TOPMARGIN/LEFTMARGIN как показано в примере.

Всегда указывайте параметры BGCOLOR и TEXT одновременно. Считайте, что они неразлучны. Если один из этих параметров не указан, браузер по умолчанию будет использовать цвет из текущей цветовой схемы Windows.

 

Задание:

Лабораторная работа №2

Тема: Работа с текстом

Цель: Научится работать с элементами, разбивающими текст на блоки и элементами для оформления и осмысленного выделения текста.

Текстовые блоки

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

Элементы, разбивающие текст на блоки:

H1,H2,...H6	Используются для создания заголовков текста
P	Используется для разметки параграфов.
DIV	Отделяет блок HTML–документа от остальной его части
ADDRESS	Оформляет текст как почтовый адрес
BLOCKQUOTE	Оформляет текст как цитату
BR	Осуществляет перевод строки
HR	Вставляет в текст горизонтальную разделительную линию.
PRE	Включает в документ (моноширинным шрифтом) блок предварительно отформатированного текста

H1,H2,...H6

(HTML 2.0) – Headers

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

Параметры:

ALIGN – определяет способ выравнивания заголовка по горизонтали.

Возможные значения: left, right, center.

<H1 ALIGN = “center” >Самый большой заголовок посередине </H1>

<H2> Заголовок поменьше </H2>

…

<H6> Самый маленький заголовочек </H6>

 

P

(HTML 2.0) – Paragraph

Используется для разметки параграфов.

Параметры:

ALIGN – определяет способ горизонтального выравнивания параграфа.
Возможные значения: left, center, right. По умолчанию имеет значение left.

<P ALIGN = “center”> Это центрированный параграф. <BR>

Текст располагается в центре окна браузера </P>

< P ALIGN = “right”> А это параграф, выровненный по правому краю.</P>

DIV

(HTML 3.2) – Division

Используется для отделения блока HTML–документа от остальной части документа. Находящиеся между начальным и конечным тэгами текст или HTML–элементы оформляются как отдельный параграф.

Параметры:

ALIGN – определяет выравнивание содержимого элемента DIV. Параметр может принимать следующие значения: left, right, center.

… Текст документа …

<DIV ALIGN = “center”>

… Текст, таблицы, изображения. Выравнивание по центру.

</DIV>

… Текст документа …

 

ADDRESS

(HTML 2.0) – Address

Находящийся между начальным и конечным тэгами текст оформляется как почтовый адрес. Чаще всего оформление выражается в выделении строки адреса курсивом.

Пишите по следующему адресу:

<ADDRESS>

Москва, ул. Академика Королёва, 13<BR>

Мурзилке

< /ADDRESS >

Примечание: Internet Explorer версии 3.0 неверно интерпретирует конечный тэг </ADDRESS>, поэтому весь текст, находящийся после адреса, будет отображаться курсивом. Эту ошибку можно легко устранить, поставив после </ADDRESS> любой элемент форматирования текста.

 

<ADDRESS>

Мой адрес не дом и не улица, <BR>

Мой адрес Советский Союз.

< /ADDRESS >

<│></│>

Нормальный текст

…

 

BLOCKQUOTE

(HTML 2.0) – Block Quote

Оформляет находящийся между начальным и конечным тэгами текст как цитату. Используется для длинных цитат (в отличие от элемента CITE). Цитируемый текст отображается отдельным абзацем с увеличенным отступом.

Редакция журнала “Домосед” выражает благодарность

Бухаресту Магарычу Шницелю за замечательное стихотворение:

<BLOCKQUOTE>

Синели красные ромашки, <BR>

Желтели в небе облака, <BR>

Синицы в тёплый край летели, <BR>

К истоку двигалась река. <BR>

…

</BLOCKQUOTE>

BR

(HTML 2.0) – Break

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

Параметры:

CLEAR – указывает на необходимость завершения обтекания изображения текстом. Может принимать следующие значения:

all – завершить обтекание изображения текстом.

left – завершить обтекание текстом изображения, выровненного по левому краю.

right – завершить обтекание текстом изображения, выровненного по правому краю.

Первое предложение <BR > Второе предложение на следующей строке

 

Примечание: Возьмите себе за правило всегда ставить <br> после тэга <img...>. В противном случае все картинки будут иметь неприятный отступ.

HR

(HTML 2.0) – Horisontal Rule

Вставляет в текст горизонтальную разделительную линию.

Параметры:

WIDTH – определяет длину линии в пикселах или процентах от ширины окна браузера.

SIZE – определяет толщину линии в пикселах.

ALIGN – определяет выравнивание горизонтальной линии. Параметр может принимать следующие значения:

left – выравнивание по левому краю документа.

right – выравнивание по правому краю документа.

center – выравнивание по центру документа (используется по умолчанию).

NOSHADE – определяет способ закраски линии как сплошной. Параметр является флагом и не требует указания значения. Без данного параметра линия отображается объемной.

COLOR – определяет цвет линии. Задается либо RGB–значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Работает только в Internet Explorer, поэтому лучше его не использовать.

Текст, разделённый <HR NOSHADE WIDTH = “50%”> сплошной горизонтальной линией.

PRE

(HTML 2.0) – Preformatted Text

Используется для включения в документ уже отформатированного текста. Браузеры воспроизводят содержимое этого элемента с помощью моноширинного шрифта, сохраняя пробелы и символы конца строки.

<PRE>

Hi There!

Hi There!

Hi There!

</PRE>

 

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

Форматирование текста

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

Элементы форматирования текста:

BASEFONT	Определяет основной шрифт, которым должен отображаться текст документа
FONT	Позволяет изменять цвет, размер и тип шрифта текста
I	Выделяет текст курсивом
EM	Используется для смыслового выделения текста (курсивом)
B	Выделяет текст жирным шрифтом
STRONG	Усиленное выделение текста (жирным)
U	Выделяет текст подчеркнутым
S, STRIKE	Выделяет текст перечеркнутым
BIG	Отображает текст увеличенным шрифтом (относительно текущего)
SMALL	Отображает текст уменьшенным шрифтом (относительно текущего)
SUP	Отображает текст со сдвигом вверх (верхний индекс)
SUB	Отображает текст со сдвигом вниз (нижний индекс)
CODE, SAMP	Оформляют текст как формулу или программный код
TT	Отображает текст моноширинным шрифтом
KBD	Выделяет текст, который предлагается набрать на клавиатуре
VAR	Используется для обозначения в тексте переменных
CITE	Оформляет текст как цитату или ссылку на источник

BASEFONT

(HTML 4.0) – Base Font

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

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

Параметры:

SIZE – обязательный параметр. Определяет базовый размер шрифта. Возможные значения: целые числа от 1 до 7 включительно.

FACE – определяет используемый шрифт (гарнитуру).

<BODY>

<BASEFONT SIZE = “3”>

…

Текст документа шрифтом 3 размера

…

<FONT SIZE =”+1”>

Слегка увеличиваем шрифт

</FONT>

…

Продолжаем шрифтом 3 размера

…

</BODY>

 

FONT

(HTML 3.2) – Font

Позволяет изменять цвет, размер и тип шрифта текста, находящегося между начальным и конечным тэгами. Вне тэгов <FONT> и </FONT> используется шрифт, указанный в элементе BASEFONT.

Параметры:

SIZE – определяет размер шрифта. Возможные значения:

– целое число от 1 до 7;

– относительный размер с указанием знака, вычисляется путем сложения с базовым размером, определенным с помощью параметра SIZE элемента BASEFONT.

COLOR – определяет цвет текста. Задается либо RGB–значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.

FACE – определяет используемый шрифт.

<FONT SIZE =”+2”> COLOR = “#AA0000”> Увеличенный красный шрифт </FONT>

<FONT SIZE =”3” FACE = “Courier” COLOR = “Magenta”> Моноширинный фиолетовый текст 3 размера </FONT>

Примечание: Будьте внимательны. Многие элементы форматирования текста PRE, CODE, KBD,SAMP...), расположенные внутри элемента FONT, работают некорректно.

STRONG

(HTML 2.0) – Strong

Усиленное выделение. Текст, заключенный между начальным и конечным тэгами, будет выделен жирным шрифтом. То есть элемент STRONG практически аналогичен по действию элементу В.

Я <STRONG> сильный </STRONG>, но далёкий.

 

U

(HTML 2.0) – Underline

Данный элемент отображает помещенный между начальным и конечным тэгами текст как подчеркнутый.

<U> Подчёркнутый текст </U>

 

S, STRIKE

(HTML 2.0) – Strike

Элемент STRIKE отображает помещенный между начальным и конечным тэгами текст как перечеркнутый. В HTML 3.2 вместо STRIKE был предложен более краткий тэг S.

Лена + <STRIKE> Вася </STRIKE> Коля = Love

BIG

(HTML 3.2) – Big

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

Текст с <BIG> увеличенным </BIG> словом

 

SMALL

(HTML 3.2) – Small

Текст, заключенный между начальным и конечным тэгами, отображается уменьшенным шрифтом (относительно текущего).

Небоскрёбы, небоскрёбы, а я <SMALL>маленький </SMALL> такой.

 

Примечание: В настоящее время элемент SMALL поддерживают только браузеры Internet Explorer и Netscape. Если вы хотите обеспечить совместимость с другими средствами просмотра, используйте тэг <FONT SIZE="–1"> (см. элемент FONT).

SUP

(HTML 2.0) – Superscript

Отображает текст со сдвигом вверх (верхний индекс) и уменьшением размера текущего шрифта на единицу.

Microsoft <SUP> TM </SUP>

 

SUB

(HTML 2.0) – Subscript

Отображает текст со сдвигом вниз (нижний индекс) и уменьшением размера текущего шрифта на единицу.

X < SUB> i</SUB> = B<SUB>+C< SUB >i</SUB>

CODE, SAMP

(HTML 2.0) – Code, Sample

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

Формула:<CODE>n=((x*15–z/1.25)/4)^5< /CODE >

TT

(HTML 2.0) – Tele Type

Данный элемент отображает помещенный между начальным и конечным тэгами текст моноширинным шрифтом.

<TT> СЕНЯ ЗПТ ТЧК ПОДРОБНОСТИ В ПИСЬМЕ ТЧК </TT>

KBD

(HTML 2.0) – Keyboard

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

Чтобы войти в систему наберите <KBD> “GUEST”</KBD> заглавными буквами.

 

VAR

(HTML 2.0) – Variable

Элемент VAR предназначен для обозначения в тексте переменных. Как правило, отображается курсивом.

Переменная <VAR> IndexZ </VAR> равен 5.

 

CITE

(HTML 2.0) – Citation

Оформляет находящийся между начальным и конечным тэгами текст как цитату или ссылку на источник. Обычно используется для коротких цитат (в отличие от элемента BLOCKQUOTE). Цитируемый текст отображается курсивом.

Как сказал классик:<BR>

<CITE>”Грамотное написание HTML способствует пищеварению”</CITE>

 

 

Задание:

Создать свою папку на диске и поместить в нее два документа: "aboutme.htm" и "rezume.htm". В файле "rezume.htm" указать краткую информацию о себе: ФИО, год рождения, семейное положение, адрес, телефон, e-mail, образование и указать есть ли опыт работы. В файле "aboutme.htm" кратко рассказать о себе, своей семье, о своих друзьях и о свих увлечениях. Необходимо использовать большинство тэгов, описанных в этой лабораторной работе.

Контрольные вопросы:

Лабораторная работа №3

Списки

Списки в HTML бывают двух видов: упорядоченные (пронумерованные) и неупорядоченные (непронумерованные). Отличаются они лишь способом оформления. Перед пунктами неупорядоченных списков обычно ставятся символы–буллеты (bullets), например, точки, ромбики и т.п., в то время как пунктам упорядоченных списков предшествуют их номера.

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

UL	Создает неупорядоченный список
OL	Создает упорядоченный список
LI	Создает пункт меню внутри элементов OL или UL
MENU, DIR	Создает неупорядоченный список, подобный UL
DL	Открывает и закрывает список определений
DT	Создает термин в списке определений внутри элемента DL
DD	Cоздает определение термина внутри элемента DL

UL

(HTML 2.0) – Unsorted List

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

<UL>

<LI> Первый пункт списка

<LI> Второй пункт списка

<LI> Третий пункт списка

</UL>

OL

(HTML 2.0) – Ordered List

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

Параметры:

START – определяет первое число, с которого начинается нумерация пунктов. (только целые числа)

TYPE – определяет стиль нумерации пунктов. Может иметь значения:

"A" – заглавные буквы A, B, C...
"a" – строчные буквы a, b, c...
"I" – большие римские числа I, II, III...
"i" – маленькие римские числа i, ii, iii...
"1" – арабские числа 1, 2, 3...

По умолчанию используется TYPE="1".

<OL TYPE = “I” START = “2”>

<LI> Пункт два

<LI> Пункт три

<LI> Пункт четыре

</OL>

 

LI

(HTML 2.0) – List Item

Создает пункт в списке. Располагается внутри элементов OLили UL.

Параметры:

VALUE – изменяет порядок нумерации элементов списка. Используется только, если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.

 

<OL TYPE = “A” START = “2”>

<LI> Пункт, озаглавленный буквой В.

<LI VALUE = “6”>Пункт, озаглавленный буквой F.

<LI> Пункт, озаглавленный буквой G.

</OL>

 

MENU, DIR

(HTML 2.0) – Menu, Directory List

Данные тэги предназначены для создания неупорядоченных списков, подобных UL. Эти элементы не вошли в спецификацию HTML 4.0, однако браузеры могут распознавать их в целях обратной совместимости. Авторам же рекомендуется использовать вместо MENU и DIR элемент UL.

DL

(HTML 2.0) – Definition List

Открывает и закрывает список определений (терминов и их описаний). Определения задаются с помощью тэгов <DT> и <DD>.

Параметры:

COMPACT – включает режим "компактного" отображения списка. Удобно использовать, если список определений очень велик. Данный параметр является флагом и не требует присвоения значения.

<OL COMPACT>

<DT> Жапура <DD> Река в Колумбии и Бразилии

<DT> Зайцы <DD> Семейство млекопитающих отряда зайцеобразных

…

</DL>

 

DT

(HTML 2.0) – Definition Term

Создает термин в списке определений внутри элемента DL.

 

DD

(HTML 2.0) – Definition Description

Cоздает определение термина внутри элемента DL.

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

Гипертекстовые ссылки являются ключевым компонентом, делающим WEB привлекательным для пользователей. Добавляя гипертекстовые ссылки (далее – ссылки), создается набор связанных и структурированных документов, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно. Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки.

Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например запрашивать файл по FTP–протоколу для отображения его браузером.

Элемент DL и его параметр.

IMG

(HTML 2.0) – Image

Используется для вставки изображений в HTML–документ.
Это один из самых популярных элементов, незаменимый инструмент web–дизайнера. Элемент допускает вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные). Последние версии браузеров позволяют также использовать формат PNG, но до тех пор пока они не устареют от применения PNG лучше воздержаться. Элемент IMG не имеет конечного тэга.

Параметры:

SRC – обязательный параметр. Указывает адрес (URL) файла с изображением.

HEIGHT и WIDTH – определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества).

HSPACE и VSPACE – определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.

ALIGN – обязательный параметр. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:

left – выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.
right – выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.
top и texttop – выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
middle – выравнивает базовую линию текущей текстовой строки с центром изображения.
absmiddle – выравнивает центр текущей текстовой строки с центром изображения.
bottom и baseline – выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.
absbottom – выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

NAME – определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript–сценариев.

ALT – определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения.

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

LOWSRC – указывает адрес (URL) файла с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в параметре SRC. Браузеры, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, a затем заменят ее картинкой из SRC.

USEMAP – применяет к изображению навигационную карту (image map), заданную элементом MAP. В качестве значения задается имя карты с предшествующей ему решеткой. Например, если имя карты – "map1", то ссылка на нее будет выглядеть как "#map1". Обратите внимание: прописные и строчные буквы в данном параметре трактуются браузером как разные.

ISMAP – определяет изображение как навигационную карту (image map), обрабатываемую сервером. Имеет смысл использовать только тогда, когда изображение является гиперссылкой. После клика мышкой на изображении серверу отправляются x,y–координаты нажатия. В зависимости от полученных координат, сервер (при наличии на нем соответствующего программного обеспечения) может показать тот или иной документ. Данный параметр является флагом и не требует присвоения значения.

 

<IMG src="img/picture.gif" WIDTH="45" HEIGHT="53" ALT="Рысь" HSPACE="10" ALIGN="left"> Этот текст обтекает картинку с рысью справа и находится от нее на расстоянии 10 пикселов.

<A HREF="carlson.html">
<IMG src="img/button.jpg" WIDTH="70" HEIGHT="30" ALIGN="right" BORDER="0" ALT="Досье Карлсона">
</A>
Для просмотра досье нажмите на кнопку справа.

 

<A HREF="http://www.igf.ru/bin/imagemaps/map1">
<IMG SRC="map.gif" ISMAP></A>

<IMG src="img/buttons.jpg" WIDTH="170" HEIGHT="120" ALIGN="middle" BORDER="0" USEMAP="#ButtonsMap">

Примечания: Необходимо всегда явно задавать размеры картинки в параметрах HEIGHT и WIDTH, резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах или при подключении к сети посредством модема это смотрится просто отвратительно. Если на картинке изображено что–то разборчивое, нужно описать это словами в параметре ALT.

ВСЕГДА сразу после <IMG...> вставьте <BR>, так как после картинки появится пустое пространство в несколько пикселей.

Значения top и texttop параметра ALIGN не совсем идентичны, и их использование порой дает разный результат. Необходимо указывать значения параметров HSPACE и VSPACE, даже если хотите оставить поля нулевой ширины. Бывает, что некоторые браузеры по умолчанию присваивают им какое–то небольшое значение, не равное нулю.

EMBED

(В спецификациях W3C отсутствует) – Embed

Используется для вставки в HTML различных объектов: не–HTML документов и media–файлов. Тип вставляемого объекта, будь то музыкальный wav/midi–файл или трехмерный мир VRML, должен быть зарегистрирован на машине пользователя как проигрываемый одним из имеющихся plug–in'ов или поддерживаемый каким–либо приложением. Если браузер поддерживает элемент EMBED, содержащиеся между начальным и конечным тэгами текст и элементы будут игнорироваться.

Параметры:

Вставка объекта происходит так же, как и вставка изображения (см. элемент IMG): под внедряемый объект необходимо сначала выделить