close

Вход

Забыли?

вход по аккаунту

?

Презентация

код для вставкиСкачать
ЯЗЫК 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-последовательность начинаются с символа
ампресанд (&) и заканчиваются точкой с запятой, а
между ними размещается команда, записываемая
в нижнем регистре
Символ
Значение
Команда
<
Символ "меньше"; левая угловая скобка
&lt;
>
Символ "больше"; правая угловая скобка
&gt;
"
Парные кавычки
&quot;
&
Ампресанд
&amp;
©
Символ авторского права
&сору;
®
Символ зарегистрированной торговой марки
&reg;
Комментарии
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> не создаёт реальной ссылки
Он только документирует связи между
страницами, чтобы помочь поисковым системам
в них разобраться
Документ
Категория
Презентации
Просмотров
108
Размер файла
2 178 Кб
Теги
1/--страниц
Пожаловаться на содержимое документа