ЯЗЫК HTML 4.0

advertisement
ЯЗЫК HTML 4.0
1. СПЕЦИФИКАЦИИ HTML
2 . О Б Щ А Я С Т Р У К Т У РА Я З Ы К А H T M L
3 . С Т Р У К Т У РА H T M L - Д О К У М Е Н ТА
4. ОСНОВЫ ЯЗЫКА HTML 4.0
 HTML (Hyper Text Markup Language) – язык
гипертекстовой разметки
 Гипертекст (hypertext) – это особый текст, в
котором есть ссылки на другие документы
 Web-страницы можно создавать вручную с
помощью языка HTML, при этом ввод HTML-кода
выполняется в любом текстовом редакторе или с
помощью HTML-редакторов
 В HTML, помимо команд языка, в исходный
HTML-код также может записываться коды
сценариев
Спецификации HTML
 Язык HTML был разработан британским учёным Тимом





Бернерсом-Ли в конце 80-х г.
1995 г. – World Wide Web Consortium (W3C)
разрабатывает спецификацию HTML 2.0
Январь 1997 г. – выпущена спецификация HTML 3.2
Декабрь 1997 г. – выходит спецификация HTML 4.0
1999 г. – вносятся изменения (HTML 4.01)
HTML 5.0 – в разработке
Общая структура языка HTML
 При разработке HTML-документа выполняется
разметка текстового документа с помощью тэгов
(tags)
 Тэги заключаются в угловые скобки (< >). Все
объекты, не заключенные в угловые скобки,
воспринимаются браузером как текстовые
элементы
Существует два типа тэгов
контейнер
одиночный


Например
Например


Теги могут записываться с параметрами (атрибутами)
 параметры отделяются друг от друга пробелами
 порядок следования параметров произволен
 многие параметры требуют указания их значений,
которое указывается через знак равенства
HTML позволяют использовать принцип вложения
одного тэга в другой
 HTML нечувствителен к регистру
 исключения: URL-адреса и escape-последовательности
Escape-последовательности
 запись escape-последовательности
подразумевает замену служебных символов
специальными командами, которые в процессе
интерпретации документа замещаются
выводимыми на экран искомыми знаками
 escape-последовательность начинаются с символа
ампресанд (&) и заканчиваются точкой с запятой, а
между ними размещается команда, записываемая
в нижнем регистре
Символ
Значение
Команда
<
Символ "меньше"; левая угловая скобка
<
>
Символ "больше"; правая угловая скобка
>
"
Парные кавычки
"
&
Ампресанд
&
©
Символ авторского права
&сору;
®
Символ зарегистрированной торговой марки
®
Комментарии
 HTML-документ может содержать комментарии, которые
не обрабатываются интерпретаторами браузеров и не
отображаются на экране
Цветовые спецификации
 Некоторые элементы языка HTML могут иметь в
качестве параметров переменные, обозначающие цвета
 Цвет задаётся с помощью меток или цифрового кода в
палитре RGB (Red, Green, Blue)
 Перед самим кодом ставится символ #, далее следует
набор из шести знаков в шестнадцатеричной системе
счисления
Цвет
Значение RGB
Символьная метка
Цифровой код
Белый
255 255 255
White
#FFFFFF
Черный
000
Black
#000000
Зеленый
0 128 0
Green
#008000
Светло-зеленый
0 255 0
Lime
#00FF00
Серый
128 128 128
Gray
#808080
Светло-серый
192 192 192
Silver
#C0C0C0
Желтый
255 255 0
Yellow
#FFFF0
Темно-бордовый
128 00
Maroon
#800000
Синий
0 0 255
Blue
#0000FF
Темно-синий
0 0 128
Navy
#000080
Голубой
0 255 255
Aqua
#00FFFF
Изумрудный
0 128 128
Teal
#008080
Красный
255 0 0
Red
#FF0000
Пурпурный
128 0 128
Purple
#800080
Розовый
255 0 255
Fuchsia
#FF00FF
Оливковый
128 128 0
Olive
#808000
Структура HTML-документа
Документ HTML
Заголовок документ
Внешний заголовок
Тело документа
Основной код
<HEAD>
<TITLE> Внешний заголовок </TITLE>
</HEAD>
<BODY>
Содержимое Web-страницы
</BODY>
Раздел документа HEAD
Раздел HEAD может включать теги
 TITLE – определяет название документа
 META – сообщает браузеру дополнительную
информацию о документе
 BASE – задает базовый адрес документа
 STYLE – определяет внешний вид документа
 ISINDEX – указывает, что данный документ будет
использоваться в поисковых системах
 SCRIPT – определяет операторы интерпретируемых
языков программирования, таких как JavaScript и
VBScript
 и др.
Заголовок странички
 Тэг-контейнер <TITLE> служит для того, чтобы дать
заголовок документу. Оно обычно показывается в
заголовке окна браузера
Раздел документа BODY
Тэг-контейнер <BODY> содержит в себе всю отображаемую на странице
информацию. Тэг может иметь параметры:
 BACKGROUND – фонового изображение
 BGCOLOR – цвет фона документа
 BGPROPERTIES – если установлено значение FIXED, фоновое изображение не
прокручивается
 BOTTOMMARGIN – устанавливает границу нижнего поля документа в
пикселах
 LEFTMARGIN – устанавливает границу левого поля документа в пикселах
 RIGHTMARGIN – устанавливает границу правого поля документа в пикселах
 TOPMARGIN – устанавливает границу верхнего поля документа в пикселах
 SCROLL – устанавливает наличие или отсутствие полос прокрутки окна
браузера
 TEXT – определяет цвет текста
 LINK – определяет цвет еще не просмотренной ссылки
 ALINK – определяет цвет активной гиперссылки
 VLINK – определяет цвет уже просмотренной ссылки
Форматирование текста
Логическое
форматирование
Физическое
форматирование
 обозначают структурные
 определяют формат
типы текстовых
фрагментов
 Фрагменты с логическим
форматированием
браузеры отображают на
экране определённым
образом, заданным по
умолчанию
отображения указанного
в них фрагмента текста в
окне браузера
Тэги логического форматирования текста
 <ACRONYM> – обозначение аббревиатуры
 <СIТЕ> , <Q>, <BLOCKQUOTE> – цитаты
 <DFN> – выделение текстового фрагмента как определение
 <ЕМ> , <STRONG> – важные фрагменты текста
 <INS> – обозначение текста как вставки
 <CODE> – обозначение текста как небольшого фрагмента
программного кода
 <SAMP> – обозначение текста, выдаваемого программой
 <VAR> – обозначение в тексте имен переменных программ
 <KBD> – обозначение текста, вводимого пользователем с
клавиатуры
Обозначение аббревиатуры
 Имеет параметр TITLE, в
качестве значения
которого можно указать
полную форму записи
аббревиатуры
Обозначение цитат
используется для
отметки цитат или названий
книг и статей, ссылок на другие
источники и т. д.

отмечает короткие цитаты
в строке текста

используется
для отображения длинных
цитат

Обозначение определений
 <DFN> – выделение
текстового фрагмента как
определение
Выделение важных фрагментов
 <STRONG> обычно
размечают более важные
фрагменты текста, чем те,
что размечены <ЕМ>
Обозначение вставок и удалений
используют для отметки изменений, вносимых в
документ.

используют для отметки в документе удалённого
текса
 Имеют два необязательных параметра:
1. CITE - URL-адрес документа, поясняющего подробности
внесенных изменений
2. DATETIME указывает дату внесения изменений в
формате: YYYY-MM-DDThh:mm:ssTZD

Обозначение элементов программ
- обозначение
текста как небольшого
фрагмента
программного кода

- текст,
выдаваемой программой

- обозначение в
тексте имён переменных
программ

Обозначение вводимого с клавиатуры текста

– обозначение
текста, вводимого
пользователем с
клавиатуры
Тэги физического форматирования текста









отображает текст полужирным шрифтом
отображает текст курсивом
отображает текст моноширинным шрифтом
отображает текст подчеркнутым
и
отображают текст, перечеркнутый горизонтальной
линией
выводит текст шрифтом большего размера, чем
непомеченная часть текста
выводит текст шрифтом меньшего размера, чем
непомеченная часть текста
сдвигает текст ниже уровня строки и выводит его (если
возможно) шрифтом меньшего размера
сдвигает текст выше уровня строки и выводит его (если
возможно) шрифтом меньшего размера
Изменение параметров шрифта
указывает параметры шрифта.
Имеет параметры:
 FACE - типа шрифта, которым программа
просмотра пользователя будет выводить текст
 SIZE - размер шрифта
 COLOR - цвет шрифта
Форматирование информации на веб-страничке
Разделение на абзацы
2. Перевод строки
3. Заголовки внутри HTML-документа
4. Горизонтальные линии
1.
Разделение на абзацы
- определяет абзац
Имеет параметр выравнивания ALIGN, который
может принимать значения:
 LEFT – выравнивание текста по левой границе
окна браузера
 CENTER – выравнивание по центру окна браузера
 RIGHT – выравнивание по правой границе окна
браузера
 JUSTIFY – выравнивание по ширине (по двум
сторонам)
Перевод строки
 Включение тэга
в текст документа обеспечит
размещение последующего текста с начала новой
строки
 Бывают ситуации, когда требуется выполнить
операцию противоположного назначения –
запретить перевод строки. Для этого существует
тэг-контейнер
Заголовки внутри HTML-документа
Для разметки заголовков используются тэги
,
,
,
,
и
Имеют параметр выравнивания ALIGN:
 RIGHT – позиционирование по правой границе
документа
 LEFT – позиционирование по левой границе
документа
 CENTER – позиционирование по центру
документа
Горизонтальная линия
Тэг
позволяет провести горизонтальную
линию в окне большинства программ просмотра
Иметь параметры:
 ALIGN – выравнивает по краю или центру, может
принимать значения LEFT, CENTER, RIGHT
 WIDTH – устанавливает длину линии в пикселях
или процентах от ширины окна браузера
 SIZE – устанавливает толщину линии в пикселях
 COLOR – указывает цвет линии с помощью формата
RGB или стандартного имени
<P ALIGN=LEFT> aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaa aaaaaaaaaaaaaaa </P>
<P ALIGN=CENTER> aaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaaaaaa
aaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaa</P>
<P LIGN=RIGHT> aaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaaaa
aaaaaaaa aaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaa
aaaaaaaaaa aaaaa</P>
<P ALIGN=JUSTIFY> aaaaaaaa aaaaa aaaa aaaaaa aaaaa aaaaaaaaaaaa aaa aaaaa aaaaa
aaaaaaaaaaaaa aaaa aaaaaaa aaaaaa aaaa aaaaa aaaaaaa aaaaaa aaaaa aaaa aaaaaaaaaa aaaaaaa
aaaaaaaaaaa </P>
<P ALIGN=JUSTIFY> aaaaaaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaa
aaaaaaaaaaaaaa <BR> aaaaa aaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaa </P>
<HR ALING=CENTER WIDTH=90% SIZE=2 COLOR=RED>
<NOBR> aaaaaaaa aaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaa aaaaaaaa aaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaa aaaaaaaa aaaaaaaaa aaaaaaaaaaa aaaaaaaaaa
</NOBR>
Организация ссылок
 Для организации ссылки необходимо сообщить
браузеру, что является указателем ссылки, а
также указать адрес документа, на который она
ссылается. Оба действия выполняются при
помощи тэга
 Тэг <А> имеет единственный параметр HREF
Внутренние ссылки
 Для построения внутренней ссылки сначала
нужно создать указатель, определяющий место
назначения
 После того как место назначения определено,
можно создать ссылки на него
Ссылки на документы различных типов
Ресурсы Internet
Web-страница
e-mail
Newsgroup
FTP
TelNet
Формат ссылки
http://имя сайта
mailto:адрес
news:имя группы новостей
ftp://имя сайта
telnet://имя сайта
Пример записи ссылки
http://www.mysite.com/
mailto:me@mysite.com
news:news.newusers.questions
ftp://ftp.mysite.com/
telnet://bbs.mysite.com/
Списки
В языке HTML предусмотрены следующие типы
списков:
 маркированный
 нумерованный
 список определений
Маркированный список
 Для создания маркированного списка необходимо
использовать тэг-контейнер
 Каждый элемент списка должен начинаться
тэгом
 <UL> имеет параметр TYPE, который может
принимать значения:
DISC – маркеры отображаются закрашенными кружками
 CIRCLE – маркеры отображаются не закрашенными
кружками
 SQUARE – маркеры отображаются закрашенными
квадратиками

Нумерованный список
 Для создания нумерованного списка следует использовать тэг-контейнер
 Каждый элемент списка должен начинаться тэгом
 Тэг <OL> может имеет параметры TYPE и START
 Параметр TYPE задаёт вид нумерации списка:
А – задаёт маркеры в виде прописных латинских букв
 a – задаёт маркеры в виде строчных латинских букв
 I – задаёт маркеры в виде больших римских цифр
 i – задаёт маркеры в виде маленьких римских цифр
 1 – задаёт маркеры в виде арабских цифр
 Параметр START позволяет начать нумерацию списка не с первого значения
 Тэг <LI> для нумерованных списков разрешает использовать параметры
TYPE и VALUE. Параметр TYPE может принимать такие же значения, как и
для тэга <OL>. Параметр VALUE позволяет изменить номер данного
элемента списка

Список определений
 Списки определений задаются с помощью тэга-
контейнера <DL>. Внутри контейнера тэгом
<DT> помечается определяемый термин, а тэгом
<DD> – его определение
Графика
 На web-страницах в подавляющем большинстве
случаев используется растровая графика
форматов: GIF, JPG и PNG
 Использование графики:
Фоновые изображения (параметра BACKGROUND тэга
<BODY>)
 Встраивание изображений в HTML-документы
 Использование изображения в качестве ссылки

Встраивание изображений в HTML-документы
 Для встраивания изображений в HTML-документ
используется тэг <IMG>, имеющий обязательный
параметр SRC, определяющий URL-адрес файла с
изображением
Параметр ALIGN тега <IMG>
 ТОР – верхняя граница изображения выравнивается по самому







высокому элементу текущей строки
ТЕХТТОР – верхняя граница изображения выравнивается по самому
высокому текстовому элементу текущей строки
MIDDLE – выравнивание середины изображения по базовой линии
текущей строки
ABSMIDDLE – выравнивание середины изображения посередине
текущей строки
BASELINE или BOTTOM – выравнивание нижней границы
изображения по базовой линии текущей строки
ABSBOTTOM – выравнивание нижней границы изображения по
нижней границе текущей строки
LEFT – изображение прижимается к левому полю окна. Текст
обтекает изображение с правой стороны
RIGHT – изображение прижимается к правому полю окна. Текст
обтекает изображение с левой стороны
Другие параметры тега <IMG>
 WIDTH - ширина
 HEIGHT - высота
 HSPACE - отступы от изображения по горизонтали
 VSPACE - отступы от изображения по вертикали
 BORDER - рамка
 ALT - альтернативный текст
Использование изображения в качестве ссылки
 Графические изображения могут использоваться
как указатель гипертекстовых связей. Для этого
изображение необходимо вставить внутрь тэгаконтейнера <А>
Таблицы в HTML
 Документ может содержать произвольное число






таблиц
Допускается вложенность таблиц друг в друга.
Каждая таблица должна начинаться тэгом
и завершаться тэгом
- заголовок таблицы
– строка таблицы
– ячейка-заголовок
– ячейка-данных
Параметры тэга <TABLE>
 BORDER – управляет изображением рамки таблицы
 CELLSPACING – определяет расстояние между ячейками
 CELLPADDING – определяет расстояние между




содержимым ячейки и её границами
WIDTH – определяет ширину таблицы
ALIGN – определяет горизонтальное расположение
таблицы в области просмотра
HEIGHT - определяет высоту таблицы
BGCOLOR - задает цвет подложки всей таблицы
BORDER=2
BORDER=2 CELLSPACING=10
BORDER=2 CELLSPACING=10 CELLPADDING=10
BORDER=2 WIDTH=70%
BORDER=2 WIDTH=200 ALIGN=CENTER
Объединение нескольких ячеек
 Для сложных таблиц необходимо объединять нескольких
ячеек в одну
 Данная возможность реализуется с помощью параметров
COLSPAN и ROWSPAN, задаваемых в кодах <TD> или <TH>.
 COLSPAN определяет, на сколько столбцов следует
расширить текущую ячейку по горизонтали, ROWSPAN по вертикали
Дополнительные параметры
 BORDERCOLOR определяет цвет всех элементов рамок




таблицы
BORDERCOLORLIGHT окрашивает в заданный цвет левый
и верхний края всей таблицы и соответственно правый и
нижний края каждой ячейки, а BORDERCOLORDARK
задаёт цвета противоположных краев
BACKGROUND определяет фоновый рисунок для таблицы
или ячейки. Этот параметр может задаваться в тэгах
<TABLE>, <TD> и <TH>
FRAME - прорисовка рамок вокруг таблицы
RULES - прорисовка внутренних линий сетки таблицы
Параметр FRAME может принимать следующие
значения
 BOX или BORDER – рамка рисуется со всех четырех







сторон
ABOVE – только с верхней стороны
BELOW – только с нижней стороны
HSIDES – рисуется нижняя и верхняя сторона
VSIDES – рисуется левая и правая сторона
LHS – только с левой стороны
RHS – только с правой стороны
VOID – таблица без внешних рамок
Параметр RULES может принимать следующие
значения
 ALL – рисуются все внутренние линии
 GROUPS – рисуются только линии, разделяющие
группы
 ROWS – рисуются линии, разделяющие строки
 COLS – рисуются линии, разделяющие столбцы
 NONE – внутренние линии не рисуются
Фреймы
 Фреймы позволяют разбить окно браузера на
несколько прямоугольных областей,
располагающихся рядом друг с другом
 В каждую из областей можно загрузить
отдельный HTML-документ, просмотр которого
осуществляется независимо от других
Правила описания фреймов
 Для описания структуры фреймов применяются тэги




и
Фреймы определяются с помощью тэга <FRAMESET>
Web-страницы, составленные из фреймов, не могут
содержать раздел <BODY>, а страницы с разделом
<BODY> не могут использовать фреймы
Контейнер из тэгов <FRAMESET> … </FRAMESET>
обрамляет каждый блок определений фрейма
Внутри контейнера <FRAMESET> могут содержаться
только тэги <FRAME> и вложенные тэги
<FRAMESET>
Тэг <FRAMESET>
 Тэг <FRAMESET> имеет два параметра:
 ROWS – строки
 COLS – столбцы
 Можно определить значения для ROWS или COLS,
или обоих вместе
 Необходимо определить, по меньшей мере, два
значения хотя бы одного из этих параметров
 Список значений параметров ROWS и COLS тэга
<FRAMESET> представляет собой разделённый
запятыми список значений, которые могут
задаваться:

в пикселях

в процентах

в относительных единицах
 Контейнер <FRAMESET>…</FRAMESET> может
быть вложен внутрь другого такого же
контейнера
 Тэг <FRAME> определяет одиночный фрейм, он
должен располагаться внутри контейнера
<FRAMESET>…</FRAMESET>
Параметры тэга <FRAME>
 SRC – определяет URL-адрес документа, который будет




изначально загружен в данный фрейм
NAME – определяет имя фрейма, которое может
использоваться для ссылки к данному фрейму
MARGINWIDTH и MARGINHEIGHT – устанавливают
ширину полей фрейма
SCROLLING – управляет отображением полосы прокрутки
NORESIZE – запрещает возможность изменения
пользователем размера фреймов
Файл frame1.html
Файл frame2.html
Файл frame3.html
Взаимодействие между фреймами
 Взаимодействие между фреймами заключается в
возможности загрузки документов в выбранный
фрейм по команде из другого фрейма
 Для взаимодействия между фреймами
используется параметр TARGET тэга <A>
Имеется четыре зарезервированных имени
– обеспечивает загрузку документа в новое
окно. Это окно не будет иметь имени и,
следовательно, в него невозможно будет загрузить
другой документ

– загрузка документа будет произведена в
текущий фрейм (или окно)

– вызывает загрузку документа в полное окно

– вызывает загрузку документа в область,
занимаемую фреймом-родителем текущего фрейма.
При отсутствии фрейма-родителя данное значение
параметра действует так же, как "_top"

Плавающий фрейм
 В HTML 4.0 появилась возможность вставлять
фрейм в обычный HTML-документ
 Для этого используется тэг
 При этом другие тэги <FRAME> и <FRAMESET> не
требуются
Тэг <IFRAME> может иметь параметры
 ALIGN – выравнивание фрейма
 ALLOWTRANSPARENCY – прозрачность фона фрейма
 FRAMEBORDER – граница вокруг фрейма (1/0 или yes/no)
 HEIGHT и WIDTH – высота и ширина фрейма
 HSPACE и VSPACE – горизонтальный и вертикальный отступы от фрейма до








окружающего контента
MARGINHEIGHT – отступ сверху и снизу от содержания до границы фрейма
MARGINWIDTH – отступ слева и справа от содержания до границы фрейма
NAME – имя фрейма
SANDBOX – позволяет задать ряд ограничений на контент загружаемый во
фрейме
SCROLLING –отображение полосы прокрутки во фрейме (auto / no / yes)
SEAMLESS – определяет, что содержимое фрейма должно отображаться так,
словно оно является частью документа
SRC – путь к файлу, содержимое которого будет загружаться во фрейм
SRCDOC – хранит содержимое фрейма непосредственно в атрибуте
Значения параметра ALIGN
 absmiddle – выравнивание середины фрейма по середине







текущей строки
baseline – выравнивание фрейма по базовой линии
текущей строки
bottom – выравнивание нижней границы фрейма по
окружающему тексту
left – выравнивает фрейм по левому краю окна
middle – выравнивание середины фрейма по базовой
линии текущей строки
right – выравнивает фрейм по правому краю окна
texttop – верхняя граница фрейма выравнивается по
самому высокому текстовому элементу текущей строки
top – верхняя граница фрейма выравнивается по самому
высокому элементу текущей строки
Значения параметра SANDBOX
 allow-same-origin – разрешает загружать содержание
фрейма, воспринимая его из того же источника, что и
родительский документ. Может использоваться для
безопасного открытия контента, блокируя при этом
всплывающие окна
 allow-top-navigation – позволяет открывать ссылки
фрейма в родительском документе
 allow-forms – позволяет содержимому фрейма
отправлять формы
 allow-scripts – разрешает запуск и выполнение
скриптов. Создание всплывающих окон при этом
запрещено
Карты-изображения
 Язык HTML позволяет привязывать
гипертекстовые ссылки к различным областям
изображения
 Карты-изображения предоставляют
пользователям дружественный интерфейс для
перехода на другие web-страницы
 Чтобы выполнить переход по такой ссылке,
следует просто выбрать нужное место на
изображении и щелкнуть мышью
 Карта-изображение это обычное встроенное
изображение
 Конфигурация карты-изображения записывается в
виде обычного текста, который может быть
сохранен в отдельном файле или являться частью
HTML-документа
 Описание конфигурации содержит координаты для
каждой из активных областей изображения, а также
URL-адреса, связанные с каждой из этих областей
 Активные области могут иметь форму
прямоугольников, кругов и многоугольников
Реализация карт-изображений
Картыизображения
серверные
NCSA
клиентские
CERN
Серверный вариант карт-изображений
 HTML-документ должен быть размещен на сервере
 Сервер должен поддерживать CGI-сценарии (Common Gateway
Interface - общий шлюзовой интерфейс)
 Для каждой карты-изображения на сервере должен быть
размещен файл, описывающий конфигурацию активных
областей
 Для изображения необходимо указать, что оно является
опорным для карты. Это выполняется заданием параметра
ISMAP в тэге <IMG>
 Изображение необходимо сделать ссылкой к файлу
конфигурации (*.map)
Формат CERN (Европейский научный центр )
 типы областей:
 rect (rectangle)
 circ (circle)
 poly (polygon)
 default
 значения пар координат X и Y разделяются
запятой и заключаются в круглые скобки
 не допускается использование комментариев
Пример
Формат NCSA (Национальный центр суперкомпьютерных
приложений университета штата Иллинойс)
 типы областей:
 rect
 circle
 poly
 default
 point
 координаты X и Y отделяются запятыми, но не
заключаются в круглые скобки

круговая область задаётся координатами двух точек - центра и
любой точки, лежащей на окружности
 допускается использование строк комментариев (#)
Пример
Клиентский вариант карты-изображения
 В этом варианте конфигурация карты может
располагаться непосредственно в том же HTMLдокументе, в котором задана ссылка на опорное
изображение, и допустимо сохранять конфигурацию
карты в отдельном файле и давать на него ссылку
 Для указания того, что встроенное изображение
является опорным для карты, используется параметр
USEMAP тэга <IMG>
 Для описания конфигурации областей карты-
изображения используется тэг
,
единственным параметром которого является
NAME
 Внутри тэга <МАР> должны располагаться
описания активных областей карты, для чего
используется тэг
 Каждый отдельный тэг <AREA> задаёт одну
активную область
Параметрами тэга <AREA>
 SHAPE – форма активной области:
 rect
 circle
 poly
 default (не все браузеры поддерживают)
 COORDS – координаты отдельной активной области
 HREF – адрес ссылки
 NOHREF – отсутствие ссылки
 TARGET – имя фрейма, в который будет загружаться
документ по данной ссылке
 ALT – альтернативный текст
Правила задания координат
 Для области типа rect задаются координаты
верхнего левого и правого нижнего углов
прямоугольника
 Для области типа circle задаются три числа –
координаты центра круга и радиус
 Для области типа poly задаются координаты
вершин многоугольника в нужном порядке
 Область типа default не требует задания
координат
Пример
Комбинация клиентского и серверного вариантов
 Допустимо использование комбинированного
варианта, при котором для одного и того же
изображения определены оба параметра –
USEMAP и ISMAP
 Параметр USEMAP является доминирующим
Мультимедиа
 Гипермедиа-ссылка отличается от других ссылок
только тем, что вместо связи с другими HTMLдокументами она обеспечивает связь с файлом
мультимедиа
 Встретив такую ссылку, браузер должен суметь
определить тип файла, с которым установлена связь, и
обратиться к требуемому вспомогательному
приложению
Модули-приложения для различных форматов
 LiveAudio. Данный модуль обеспечивает
воспроизведение звуковых файлов форматов
AIFF, AU, MIDI и WAV
 Live3D. Этот модуль обеспечивает
воспроизведение формата VRML (расширение
.WRL)
 LiveVideo. Данный модуль обеспечивает
воспроизведение видеофайлов формата AVI
 QuickTime. Этот модуль обеспечивает
видеофайлов формата QuickTime (расширение
.MOV)
Встраивание мультимедийных файлов в web-страницу
 Тэг
позволяет
воспроизводить файл
мультимедиа
непосредственно в окне
браузера
 Вид внедренного объекта
зависит от установленных в
браузере плагинов, типа
загружаемого файла, а также
от параметров тега <EMBED>
Параметры тэга <EMBED>
 SRC – путь к воспроизводимому файлу
 WIDTH и HEIGHT – ширина и высота окна модуля




приложения
ALIGN – определяет как объект будет выравниваться на
странице и способ его обтекания текстом
HIDDEN – указывает, скрыть объект на странице или нет
(TRUE / FALSE)
HSPACE и VSPACE – горизонтальный и вертикальный
отступы от объекта до окружающего контента
PLUGINSPAGE – адрес страницы в Интернете, откуда
можно скачать и установить плагин к браузеру
TYPE – MIME-тип объекта
Значения параметра ALIGN
 absmiddle – выравнивание середины объекта по середине текущей







строки
baseline – выравнивание объекта по базовой линии текущей строки
bottom – выравнивание нижней границы объекта по окружающему
тексту (по умолчанию)
left – выравнивает объект по левому краю окна, текст обтекает его
справа
middle – выравнивание середины объекта по базовой линии текущей
строки
right – выравнивает объект по правому краю окна, текст обтекает слева
texttop – верхняя граница объекта выравнивается по самому высокому
текстовому элементу текущей строки
top – верхняя граница объекта выравнивается по самому высокому
элементу текущей строки
Пример MIME-тип объекта
Расширение файла
avi
avi
avi
mp3
mp3
mp3
mp3
mpeg
mov
Тип данных
video/avi
video/msvideo
video/x-msvideo
audio/mpeg3
audio/x-mpeg-3
video/mpeg
video/x-mpeg
video/mpeg
video/quicktime
Фоновый звук
 тэг





используется для включения в документ
фонового звукового сопровождения
параметры тэга:
BALANCE – управляет балансом звука между правой и левой
колонками. Целое число от -10000 до 10000. Значение 0 служит
для баланса громкости, отрицательные числа увеличивают
громкость в левой колонке, а положительные – в правой
LOOP – устанавливает, сколько раз проигрывать музыкальный
файл. Значение 0 проигрывает файл один раз, -1 проигрывает
музыку до тех пор, пока текущая веб-страница открыта. Любое
целое положительное число заставляет браузер проигрывать
музыкальный файл указанное число раз
SRC – путь к музыкальному файлу
VOLUME – задаёт громкость звучания музыки. Целое число от 10000 до 0. Ноль соответствует максимальной громкости
звучания
Для воспроизведения файлов в формате AVI можно
использовать специальный параметр DYNSRC тэга <IMG>
 Условие запуска видео:
 FILEOPEN – автоматический старт
 MOUSEOVER – при щелчке мыши
Для загрузки внешних данных рекомендуется
использовать тег <OBJECT>
 Тэг <OBJECT> сообщает браузеру, как загружать и
отображать объекты, которые исходно браузер не
понимает
 Как правило, такие объекты требуют
подключения к браузеру специального модуля,
который называется плагин, или запуска
вспомогательной программы
 Тэг <OBJECT> является контейнером с множеством
атрибутов
Параметры тэга <OBJECT>
 ALIGN – определяет, как объект будет выравниваться на странице и способ










его обтекания текстом.
ARCHIVE – устанавливает путь к файлам, необходимым для работы объекта
CLASSID – адрес программы (приложения или плагина), которая работает с
данным объектом, и будет запускать его.
CODE – имя объекта для его выполнения.
CODEBASE – путь к папке с объектом, который указан атрибутом CODE или
CLASSID
CODETYPE – указывает на тип объекта, который задан атрибутом CLASSID
DATA – адрес файла для его отображения в окне браузера
HEIGHT и WIDTH – высота и ширина объекта
HSPACE и VSPACE – горизонтальный и вертикальный отступы от объекта до
окружающего контента
TABINDEX – определяет порядок перехода между элементами с помощью
клавиши Tab
TYPE – MIME-тип объекта
Создание бегущей строки
 Для создания бегущей строки используется тэг-
контейнер
 Содержимое контейнера <MARQUEE> позволяет
перемещать любые элементы веб-страницы
(изображения, текст, таблицы и т.д.)
 Перемещение можно задать не только по
горизонтали, но и вертикали, в этом случае
указываются размеры области, в которой будет
происходить движение
Параметры тэга <MARQUEE>
 BEHAVIOR – задаёт тип движения содержимого контейнера








<MARQUEE>
BGCOLOR – цвет фона
DIRECTION – указывает направление движения содержимого
контейнера <MARQUEE>
HEIGHT и WIDTH – высота и ширина области прокрутки
HSPACE и VSPACE – горизонтальные и вертикальные поля вокруг
контента
LOOP – задаёт, сколько раз будет прокручиваться содержимое
SCROLLAMOUNT – скорость движения контента
SCROLLDELAY – величина задержки в миллисекундах между
движениями
TRUESPEED – отменяет встроенный ограничитель скорости при
низких значениях атрибута SCROLLDELAY
Значения параметра BEHAVIOR
 ALTERNATE – контент перемещается между
правым и левым краем элемента
 SCROLL – контент перемещается в направлении,
заданным атрибутом DIRECTION, затем скрывается
за пределами области, после чего начинает
движение с начала
 SLIDE – контент перемещается в направлении,
заданным атрибутом DIRECTION, доходит до края
области и останавливается
Значения параметра DIRECTION
 DOWN – движение сверху вниз
 LEFT – движение справа налево
 RIGHT – движение в правую сторону
 UP – движение вверх
Организация связей с другими документами
 В HTML-документах имеют ссылки на другие
документы и файлы
 Ссылки могут быть как абсолютные, так и
относительные. И те, и другие имеют недостатки
 В языке HTML предусмотрены два тэга,
и
, которые включаются в заголовок для
того, чтобы связи между документами не
нарушалась
Тэг <BASE>
 Тэг <BASE> располагается в разделе HEAD и
содержит URL-адрес, относительно которого в
документе построена вся адресация. Это
указание влияет на любой тэг документа, в
котором используется относительная адресация
 Он имеет один обязательный параметр HREF,
после которого указывается полный URL-адрес
документа. А на основе этого URL-адреса
создаются относительные адреса
Пример
Тэг <LINK>
 Тэг <LINK> используется для поддерживания
логической связи между документами
 Он используется внутри элемента HEAD и
состоит из URL-адреса и параметров,
конкретизирующих отношения документов
 Заголовок документа может содержать любое
количество тэгов <LINK>
Параметры тэг <LINK>
 HREF – указывает на URL-адрес другого




документа
REL – определяет отношение между текущим и
другим документом
REV – определяет отношение между другим
документом и текущим (отношение, обратное
REL)
LANG – определяет язык документа
TYPE – указывает тип и параметры
присоединенного файла
Значения параметров REL и REV












alternate – другая версия документа
bookmark – закладка в документе
contents – оглавление документа
copyright – документ, содержащий информацию об авторских правах
на данный документ
glossary – документ, содержащий толковый словарь терминов для
данного документа
help – справочный документ
index – документ, содержащий алфавитный указатель данного
документа
next – документ, следующий сразу за данным документом
previous – документ, находящийся непосредственно перед данным
документом
start – первый документ в группе
stylesheet – таблица стилей
и др.
 Тэг <LINK> не создаёт реальной ссылки
 Он только документирует связи между
страницами, чтобы помочь поисковым системам
в них разобраться
Download