Язык html представления гипермедиальных документов
HTML расшифровывается как HyperText Markup Language, или язык гипертекстовой разметки. Это сокращенное название языка, с помощью которого создаются Web-страницы.
HTML-команды называются тэгами (дескрипторами).
Тэг (tag-ярлык, признак) –это код, идентифицирующий определенный элемент документа HTML, например, абзац, заголовок, ссылку, таблицу и т.д. Тэги заключаются в угловые скобки <>.
Наиболее часто HTML-команды встречаются попарно: „Start-Tag" формата <tagname> и „End-Tag" формата </tagname>. Между тэгом начала и конца выполняется соответствующая команда. В этой главе описываются некоторые команды необходимые для оформления простых документов HTML-языковых элементов.
Теги HTML бывают парными и непарными. Непарные теги оказывают воздействие на весь документ или определяют разовый эффект в месте своего появления. При использовании парных тегов в документ добавляются открывающий и закрывающий теги, которые воздействуют на часть документа, заключенную между ними. Закрывающий тег отличается от открывающего наличием символа «/» (косая черта) перед ключевым словом (</DIV>). Закрытие парных тегов выполняется так, чтобы соблюдались правила вложений.
<В><1>На этот текст воздействуют два тега</1></В>
Эффект применения тега может видоизменяться путем добавления атрибутов. В парных тегах атрибуты добавляются только к открывающему тегу. Атрибуты представляют собой дополнительные ключевые слова, отделяемые от ключевого слова, определяющего тег, и от других атрибутов пробелами и размещаемые до завершающего тег символа «>». Способ применения некоторых атрибутов требует указания значения атрибута. Значение атрибута отделяется от ключевого слова атрибута символом «=» (знак равенства) и заключается в кавычки.
<Н> ALIGN="LEFT”>
Определение HTML как языка разметки основывается на том, что при удалении из документа всех тегов получается текстовый документ, совершенно эквивалентный по содержанию исходному гипертекстовому документу. Таким образом, при отображении документа HTML сами теги не отображаются, но влияют на способ отображения остальной части документа.
Структура.
HTML-документ состоит, прежде всего, из тэга: <HTML>... </HTML>. Эта часть, в свою очередь, состоит из головного тэга (<HEAD>... </HEAD>) - раздел заголовков (в частности, раздел заголовков должен содержать общий заголовок документа, ограниченный парным тегом <TITLE>) и тэга содержания (<BODY>... </BODY>).
Общая структура HTML- документа следующая:
<HTML>
<HEAD>
…
</HEAD>
<BODY>
…
</BODY>
</HTML>
Самый важным используемым в HEAD элементом является заголовок страницы: <TITLE>... </TITLE>. В TITLE-элементе указывается заголовок документа. Это имя используется для идентификации этого документа в брaузере.
Большинство элементов языка HTML описывает части содержания документа и помещается между тегами <BODY> и </BODY>, то есть внутрь структурного элемента BODY. Такие элементы делят на блочные и текстовые. Блочные элементы относятся к частям текста уровня абзаца. Текстовые элементы описывают свойства отдельных фраз и еще более мелких частей текста.
Теперь можно сформулировать правила вложения элементов.
• Элементы не должны пересекаться. Другими словами, если открывающий тег располагается внутри элемента, то и соответствующий закрывающий тег должен располагаться внутри этого же элемента.
• Блочные элементы могут содержать вложенные блочные и текстовые элементы.
• Текстовые элементы могут содержать вложенные текстовые элементы.
• Текстовые элементы не могут содержать вложенные блочные элементы.
В разделе BODY могут добавляться следующие дополнительные параметры:
· TEXT= "... " Специфицирует стандартный текст;
· LINK= "... " Определяется цвет ссылки;
· ALINK= "... " Определяет цвет выбранной ссылки;
· VLINK= "... " Определяет цвет пройденной ссылки;
· BGCOLOR= "... " Определяет цвет фона;
· BACKGROUND= "... " URL с адресом картинки фона;
· BGPROPERTIES=FIXED картину заднего плана с запретом скроллинга.
В основном тексте могут использоваться команды для возврата каретки и определения абзаца. Возврат каретки происходит обычно автоматически, в зависимости от величины окна используемого броузера. Возврат каретки может задаваться командой <BR>. Новый абзац начинается командой <P>. Абзацы разделяются в основном пустой строкой, иногда используется возврат каретки.
HTML содержит шесть различных заголовков, причем чем меньше уровень заголовка, тем более крупный шрифт используется для его воспроизведения на экране. Оформление заголовков зависимости от используемого броузера. Синтаксическая конструкция выглядит следующим образом: <Hx>...</Hx>, причем x может быть величиной от l до 6:
<H1>...</H1> Заголовок высшего уровня (основной заголовок)
<H2>...</H2>
<H3>...</H3>
<H4>...</H4>
<H5>...</H5>
<H6>...</H6> Заголовка низшего уровня
Модификация текста.HTML предлагает различные возможности для модификации текста. Тэги модификации могут находится в любых частях текста. В HTML существует различие между физическими и логическими параметрами текста. Физические параметры формируют внешний вид документа, в то время как форма логических установок зависит от броузера.
Физические элементы
<B>... </B> - жирный текст (Bold);
<I>...</I> - курсив (Italic);
<U>...</U> - подчеркивание;
<TT>... </TT> постоянное символьное расстояние, как у пишущей машинки (Teletype);
Пример:
...
<I>курсив</I> и <B>жирный</B> в предложении.
...
Получаем:
...
курсив ижирный в предложении.
...
Логические элементы.<EM>... </EM> - применяется для акцентирования внимания на текст внутри тэга, в основном отображается курсивом;
<STRONG>...</STRONG> - применяется для создания логического ударения на текст внутри тэга, в основном отображается жирным шрифтом;
<CODE>...</CODE> - пример кода;
<SAMP>...</SAMP> - последовательность символов;
<KBD>...</KBD> - символы введенные с клавиатуры;
<VAR>...</VAR> - имя переменной, в основном курсив;
<CITE>...</CITE> - цитата, в основном курсив.
Списки.Имеются несколько различных типов списков. Все элементы списков (кроме описывающих элементов) представляются и вводятся <LI> - тэгом (List Item). Рассмотрим типов списков по порядку:
1. Упорядоченные списки (Ordered List)
Элементы списка будут автоматически пронумерованы тэгом: <OL>...</OL>.
Параметры:
· TYPE = "..." – определяет символ которым будут маркироваться эементы списка;
· START = "..." – определяет символ начиная с которого будет маркироваться список.
2. Неупорядоченные списки (Unordered List)
Для задания этого списка используется тэг <UL>...</UL>.
Параметры:
· TYPE = "..." – определяет символ которым будут маркироваться эементы списка;
· SRC = "..." – определяем источник из которого берется изображение символа.
3. Описательный список (Definition List)
Для задания этого списка используется тэг <DL>...</DL>. Списки описания требуют попарного представления Term’а и его определения, которые определяются, соответственно, тэгами <DT> и <DD>.
Кроме того используются также тэги <DIR>...</DIR> и <MENU>...</MENU>, которые здесь не описаны, потому что редко используются. Примеры:
1. Упорядоченный список:
<OL TYPE= "i">
<LI> элемент списка l
<Ll> элемент списка 2
<LI> элемент списка 3
</OL>
Получаем:
i. элемент списка l
ii. элемент списка 2
iii. элемент списка 3
2. Неупорядоченный список:
<Ul TYPE = “disc” >
<LI> элемент списка l
<LI> элемент списка 2
<LI> элемент списка 3
</UL>
Получаем
· элемент списка l
· элемент списка 2
· элемент списка 3
3. Описательный список:
<DL>
<DT> Term l <DD> Определение l
<DT> Term 2 <DD> Определение 2
</DL>
Получаем:
Term l Определение l
Term 2 Определение 2
Якори.Якори являются начальными и конечными точками связи гипертекста. Для определения якоря используется тэг <A>…</A>. Самыми важными свойствами являются HREF и NAME:
· HREF – определяет ссылку по которой пользователь может перейти к другому документу. Документ-целью может быть не только HTML документ, но и графикой или аудио-файлом, который воспроизводится внешней программой, или ссылкой к Gopher серверу, News серверу и т.п. HREF может иметь вид «HREF=#identifier». В этом случае якорь ссылается на текст в пределах текущего документа, который имеет идентификатор identifier.
· NAME - свойство, описывающее якорь конечной точки. Значение атрибутов служит одновременно идентификацией якоря. Значение свойства описывается одной строкой и должно быть уникальным.
Таблицы.Таблица определяется тэгом <TABLE>…</TABLE>, а также тэгами <TR>…</TR> и <TD>…</TD>, описывающими строку таблицы и отдельную ячейку, соответственно. Далее описаны некоторые аттрибуты вышеперечисленных тэгов (табл. ).
Таблица . Свойства всей таблицы
| № | Атрибут | Значение |
| 1. | BORDER | Толщина рамки (0 = нет рамки) |
| 2. | BGCOLOR | Цвет фона элементов таблицы и, соответственно, всей таблицы |
| 3. | WIDTH | Ширина таблицы, либо в пикселах, либо в процентах от ширины экрана |
| 4. | HEIGHT | Высота таблицы, либо в пикселах, либо в процентах от ширины экрана |
| 5. | CELLSPACING | Расстояние между ячейками (в пикселах) |
| 6. | CELLPADDING | Расстояние между данными в ячейке и её стенками (в пикселах) |
| 7. | BACKGROUND | Определяет изображение, которое будет служить “обоями” для таблицы (фоновым изображением) |
Таблица . Свойства отдельной строки
| № | Атрибут | Значение |
| 1. | COLSPAN | Количество столбцов, которые будет занимать одна ячейка (по умолчанию равно 1) |
| 2. | ROWSPAN | Количество строк, которые будет занимать одна ячейка (по умолчанию равно 1) |
| 3. | WIDTH | Ширина строки, либо в пикселах, либо в процентах от ширины экрана |
| 4. | HEIGHT | Высота строки, либо в пикселах, либо в процентах от ширины экрана |
Таблица . Свойства отдельной ячейки
| № | Атрибут | Значение |
| 1. | ALIGN | Горизонтальное выравнивание текста: слева, по центру, справа, JUSTIFY, DECIMAL |
| 2. | VALIGN | Вертикальное выравнивание текста: TOP, MIDDLE, BOTTOM, BASELINE |
| 3. | BGCOLOR | Цвет фона отдельного элемента таблицы |
| 4. | NOWRAP | Без переноса по словам |
Примеры:
l.
<TABLE Border=5 BGCOLOR='*FFFFOO'>
<TR> <!-- начало первой строки -->
<TD> произольный текст </TD>
<TD> произольный текст </TD>
</TR> <!-- конец первой строки -->
<TR> <!-- начало второй строки -->
<TD COLSPAN=2> произольный текст </TD>
</TR> <!-- конец второй строки -->
</TABLE> <!-- конец таблицы -->
2.
<TABLE BORDER=1 HEIGTH=200 WIDTH=200 BGCOLOR=#FF0000> <TR>
<TD ALIGN = CENTER> l.l </TD>
<TD ALIGN=CENTER> 1.2 </TD>
<TD ALIGN=CENTER> 1. 3 </TD>
</TR>
<TR>
<TD COLSPAN = 2 ALIGN=CENTER> 2.1 - 2.2 </TD>
<TD ROWSPAN = 2 ALIGN=CENTER> 2.3 - 3.3 </TD>
</TR>
<TR>
<TD ALIGN = CENTER > 3.1 </TD>
<TD ALIGN = CENTER> 3.2 </TD>
</TR>
</TABLE>
| 1.1 | 1.2 | 1.3 |
| 2.1 – 2.2 | 2.3 – 3.3 | |
| 3.1 | 3.2 |
В итоге получается следующая таблица:
Графика и изображения.Атрибут IMG позволяет вставить изображение в активный документ. Это обычно графика или иконка. Не разрешена вставка других HTML-документов посредством данного атрибута. Графика должна быть представлена в форматах GIF, JPEG или BITMAP (XBM, XPM). Атрибут IMG имеет следующие свойства:
· SRC – содержит URL документа, который должен всегда указываться. Синтаксис соответствует HREF - свойству <A> элемента.
· ALT – альтернативный текст, который будет выводиться вместо изображения, если браузер не позволяет просматривать изображения или отключена соответствующая опция.
· ALIGN – управляет выравниванием текста в изображениях;
· BORDER – рамка в пикселах;
· WIDTH, HEIGHT – высота и ширина изображения, соответственно;
· LOWSRC – изображение более низкого разрешения, загружающееся перед загрузкой собственно изображения.
Пример
<A HREF="Go"><IMG SRC="Button.gif">Для получения дополнительной информации нажмите здесь</A>
Дает в итоге:
Для получения дополнительной информации нажмите здесь
Вставка видео-файлов в HTML-страницу.Как уже говорилось ранее, для Netscape Navigator существуют разнообразные дополнительные модули (Plug-in), которые значительно расширяют возможности броузера. Для просмотра видео-файлов в формате QuickTime требуется проинсталировать модуль ViewMovie. Для того, чтобы в Вашу гипермедиальную информационную систему вставить видео-файл используйте следующую команду:
< EMBED SRC= "mymovie.mov" WIDTH=xxx HEIGHT=yyy >
Файлы видео должны иметь расширение ".mov". Тэг EMBED имеет следующие параметры по управлению модулем ViewMovie:
· LOOP - TRUE, FALSE или PALINDROME
· AUTOPLAY - TRUE или FALSE, видео-файл будет автоматически запускаться при TRUE.
· VOLUME - от низкой до высокой.
· QUALITY - от HIGH до DRAFT (default)
· PLAYEVERYFRAME - TRUE или FALSE, параметр определяет - проигрывать все фреймы подряд или допускается пропуск фреймов для ускорения процесса воспроизведения.
Image maps.Познакомиться с механизмом передачи параметра можно посредством простого задания: создания, так называемых, Image maps. Image map является прежде всего интегрированным в HTML-документе изображением (в GIF-формате), которое служит якорем для различных гиперссылок. Для этого на сервере создается файл, содержащий карту изображения - map definition file, который описывает связь частей изображения и гиперссылок.
Обработчиком нажатий на изображения является стандартный сценарий CGI, поэтому нет необходимости использовать внешний сценарий. Файл, содержащий карту изображения имеет окончание ".Map" и будет на этом сервере идентифицирован.
WWW-клиент передает серверу через URL координаты точки изображения (X, Y) на которую нажал пользователь. Сервер посредством координат и таблиц map файла определяет какой HTML-документ пользователь потребовал загрузить.
Описание изображения как Image map осуществляется указанием аттрибута USEMAP в тэге <IMG>:
<IMG SRC=”имя файла" USEMAP=”имя карты">
Мap definition file имеет следующий формат:
Тип области URL Координата1, Kooрдината2... Координата n
Можно указать следующие типы области:
· DEFAULT - определяется URL по умолчанию. Используется, если пользователь выбрал не описанную как гиперсвязь область. Координаты не указываются.
· CIRCLE - определяет круг. Координаты описывают центр и координаты описанного вокруг круга прямоугольника.
· POLY - определяет полигон. Координаты являются координатами вершин полигона.
· RECT - определяет прямоугольник. Координаты описывают левый верхний и правый нижний угол.
· POINT - определяет точку. Координата описывают координаты точки.
Для создания map definition file существует ряд вспомогательных программ, которые упрощают ручное редактирование и соответственно экономят время.
Фреймы.HTML-страницы могут быть разбиты с помощью фреймов на несколько частей. Вследствие этого одновременно рассматриваться различные файлы разных форматов. Важные сведения, элементы навигации или комментарии можно вынести в отдельный фрейм, а основной текст со скролингом – в другой, что значительно повысит наглядность страницы. Наряду с этими преимуществами фреймов существует, однако, ряд недостатков, поэтому к их применение следует подходить с осторожностью.
Преимущества и недостатки фреймов:
+ Обеспечивают очень наглядную навигацию;
+ Важные сведения остаются видимыми постоянно;
+ Разнообразные возможности оформления;
- Не все броузеры могут воспринимать фреймы, поэтому дополнительные страницы должны быть без фреймов;
- Содержания отдельных фреймов нельзя запомнить как закладку и они не учитываются в списке посещенных страниц;
- Plug-in в комбинации с фреймами часто служат причиной системной ошибки;
- Ощутимо возрастает время загрузки документов в броузер по сравнению со страницами без фреймов (до 3-4 раз);
- Распечатка страницы с фреймами проблематична;
- Искажается статистика доступа.
Создание фреймов.Для создания фреймов в контейнер <BODY></BODY> заменяется на контейнер <FRAMESET></FRAMESET>. Для броузеров не поддерживающих фреймы используется контейнер <NOFRAME></NOFRAME>. Броузеры, поддерживаающие фреймы, игнорируют все, что находится внутри дескрипторной пары <NOFRAME></NOFRAME>. Остальные броузеры (т.е. не поддерживающие фреймы) игнорируют все дескрипторы фреймов (которые они просто не могут распознать) и воспринимают только текст, заключенный в контейнер NOFRAME.
Пример:
< FRAMESET >
Фреймы и другие элементы HTML
<NOFRAMES>
<P> Здесь текст, для страниц не поддерживающих фреймы. </P>
</NOFRAMES>
</FRAMESET>
Теперь должно быть установлено разделение с помощью параметров ROWS и COLS. ROWS измеряется в строках, COLS – в столбцах. Ширина может указываться при этом как относительно (в процентах), так и абсолютно (в пикселах). Также возможно комбинация обеих способов (см. пример 3). Вместо значения может использоваться также "*", так как ширина рассчитывается из других данных (см. под 2).
Примеры:
1.
<FRAMESET COLS="50%, 50%">
Два фрейма занимаю равное пространство на странице;
2.
< FRAMESET COLS= ``100, *, 50" >
Левый фрейм занимает 100 пикселов, правый - 50 пикселов, среднего занимает оставшееся пространство страницы;
3.
< FRAMESET COLS= "50, 20 %, 80 %, 50" >
Фреймы справа и слева имеют ширину в 50 пикселов, остаток площади разделяется в зависимости от величины процента.
4.
< FRAMESET COLS= "20 %, 80 %" ROWS= "50 %, 50 %" >
дает в итоге 4 фрейма на странице
Вместо COLS в 1-3 можно бы писать также ROWS.
Текст, который будет содержать фрейм определяется с помощью тэга <FRAME>:
< FRAME SRC= "name.HTML" " NAME= " any_name " >
В качестве аттрибута данного тэга указывается, какая HTML-страница должна использоваться для заполнения фреймов. Name.HTML может быть как локальный файл, так и любая WWW-страница. При этом „any_name " – имя данного фрейма, которое будет использоваться для ссылок на него их других документов. Оно может отличаться от „Name.htm".
Дополнительные параметры:
SCROLLING – YES, NO или AUTO - указывается для разрешения скроллинга.
Можно создавать вложенные фреймы добавляя еще один или несколько контейнеров <FRAMESET></FRAMESET>
Пример:
<FRAMESET ROWS="30%,30%,30%">
<NOFRAMES>
... Фреймы не поддерживаются данным Броузером
</NOFRAMES>
<FRAME SRC = "http: //cad.ntu-kpi.kiev/students.html" NAME = "Students">
<FRAME SRC="моя страница.HTML" NAME="Я">
<FRAMESET . . . .>
Здесь идут вложенные фреймы
</FRAMESET>
</FRAMESET>
Присвоив фреймам имена, Вы можете указать их в гипертекстовой ссылке с помощью атрибута TARGET, который помещается в обычный тэг привязки <A>. При этом используется следующий формат:
<A HREF=”адрес документа" TARGET=”имя окна"> текст ссылки </A>,
где “имя окна” - это имя, которое Вы присвоили окну с помощью атрибута NAME тэга <FRAME>.
Кроме этого существует несколько специальных имен окон, которые Вы можете указать в атрибуте TARGET:
· “_BLANK" – документ всегда загружается в новое окно. Новое окно не имеет имени, поэтому на него нельзя ссылаться из сценария, находяшегося на начальной странице;
· " _PARENT" – документ загружается в текущее родительское окно фрейма;
· " _TOP" – документ загружается в самый верхний фрейм текущего окна броузера.