Гипертекстовые технологии
Практическая работа, 10 Июня 2014, автор: пользователь скрыл имя
Краткое описание
Обычный текст представляется как одна длинная строка символов, которая читается в
одном направлении. Гипертекстовая технология заключается в том, что текст представляется
как многомерный с иерархической структурой.
Одно из основных применений гипертекстовых технологий — разработка Web-
документов для публикации в компьютерных сетях, в первую очередь в Internet. Далее будем
рассматривать технологию создания гипертекста именно с точки зрения Web-документа.
Под разметкой гипертекста подразумевается использование специальных кодов, легко
отделяемых от содержания документа и используемых для реализации гипертекста.
Применение этих кодов подчиняется строгим правилам, определяемым спецификацией языка
HTML (Hyper Text Markup Language).
Вложенные файлы: 1 файл
ГИПЕРТЕКСТОВЫЕ ТЕХНОЛОГИИ.docx
— 31.24 Кб (Скачать файл)ГИПЕРТЕКСТОВЫЕ ТЕХНОЛОГИИ
Обычный текст представляется как одна длинная строка символов, которая читается в
одном направлении. Гипертекстовая технология заключается в том, что текст представляется
как многомерный с иерархической структурой.
Одно из основных применений гипертекстовых технологий — разработка Web-
документов для публикации в компьютерных сетях, в первую очередь в Internet. Далее будем
рассматривать технологию создания гипертекста именно с точки зрения Web-документа.
Под разметкой гипертекста подразумевается использование специальных кодов, легко
отделяемых от содержания документа и используемых для реализации гипертекста.
Применение этих кодов подчиняется строгим правилам, определяемым спецификацией языка
HTML (Hyper Text Markup Language).
Особенность описания документа средствами языка HTML связана с принципиальной
невозможностью достижения абсолютной точности воспроизведения исходного документа.
Предполагается, что документ будет широко доступен в Интернете, и поэтому неизвестно, как
будет организовано его воспроизведение. Документ может быть представлен на графическом
экране, выведен в чисто текстовом виде или прочитан программой синтеза речи. Поэтому язык
HTML предназначен не для форматирования документа, а для его функциональной разметки.
1. Основные понятия HTML
Управляющие конструкции языка HTML (Hyper Text Markup Language) называются
тегами (дескрипторами) и вставляются непосредственно в текст документа. Все теги
заключаются в угловые скобки <…>. Сразу после открывающей скобки помещается ключевое
слово, определяющее тег, например <DIV>.
Teги HTML бывают парными и непарными. Непарные теги оказывают воздействие на
весь документ или определяют разовый эффект в том месте, где они вставлены. При
использовании парных тегов в документ добавляются открывающий и закрывающий теги,
которые воздействуют на часть документа, заключенную между ними. Закрывающий тег
отличается от открывающего наличием символа "/" перед ключевым словом (</DIV>). Закрытие
парных тегов выполняется так, чтобы соблюдались правила вложения:
<B><I>Текст</I></B>
К открывающему тегу может быть добавлен атрибут, представляющий собой
дополнительные ключевые слова, отделяемые от ключевого слова, определяющего тег, и от
других атрибутов пробелами и размещаемые до завершающего тег символа ">". Способ
применения некоторых атрибутов требует указания значения атрибута. Значение атрибута
отделяется от ключевого слова атрибута символом "=" и заключается в кавычки.
<Н1 ALIGN="LEFT">
При отображении документа HTML сами теги не отображаются, но влияют на способ
отображения документа HTML.
Существует два способа формирования документов HTML.
Первый способ состоит в разметке существующего или создаваемого документа
вручную. Эта работа выполняется в текстовом редакторе или редакторе HTML.
Второй способ заключается в формировании документа непосредственно на экране и
автоматической его разметке. В этом способе необязательно знание языка HTML. Разметкавыполняется специальным редактором, работающим по принципу WYSIWYG, например,
FrontPage Express.
Во втором способе используются средства форматирования вместо средств описания,
что может приводить к нежелательным последствиям.
Воспроизведение документа HTML выполняется программами — броузерами, например
Internet Explorer.
2. Структура документа HTML
Простейший правильный документ HTML, содержащий все теги, определяющие
структуру, выглядит следующим образом:
<HTML>
<HEAD>
<TITLE>Заголовок документа</
</HEAD>
<BODY>
Текст документа
</BODY>
</HTML>
Здесь использованы ключевые слова:
- HTML — начало и конец документа HTML;
- HEAD — начало и конец раздела заголовка;
- TITLE — начало и конец общего заголовка документа;
- BODY — начало и конец тела документа.
Большинство элементов языка HTML описывает части содержания документа и
помещаются между тегами <BODY> и </BODY> (структурный элемент BODY).
Основными функциональными элементами документа HTML являются заголовки и
абзацы. Язык HTML поддерживает шесть уровней заголовков, которые задаются при помощи
тегов от <H1> до <H6>. В Web-документе они отображаются шрифтом разного размера.
Обычные абзацы задаются с помощью парного тега <P>. В HTML нет средств для
задания абзацного отступа. Абзацы отделяются пустой строкой. Закрывающий тег </P>
рассматривается как необязательный. Подразумевается, что он стоит перед тегом, который
задает очередной абзац. Если в тексте присутствует символ конца строки, при воспроизведении
в броузере он рассматривается как простой пробел. Для перехода на другую строку
используется непарный тег <BR>. В качестве ограничителя абзацев может использоваться
горизонтальная линейка, задаваемая тегом <HR>, например:
<HR ALIGN="RIGHT" SIZE="10" WIDTH="50%">
Этот тег задает горизонтальную линейку высотой в 10 пикселов, занимающую половину
ширины окна и расположенную справа.
3. Гипертекстовые ссылки
Как только в Web-страницу будет встроена гиперсвязь, документ можно назвать
гипертекстом. Гиперссылка может указывать:
- на позицию в своем документе (внутренние гиперссылки),
- на другой документ на своем сервере,
- на произвольный объект по любому адресу Internet.Внутренние гиперссылки применяются для того, чтобы упростить пользователю
ориентацию в больших документах.
Гиперссылки могут быть оформлены как абсолютные или относительные. Для
создания гиперссылки необходим адрес документа, на который устанавливается ссылка. Этот
адрес называется URL - Uniform Resource Locator.
Абсолютный URL — это полный Internet-адрес со всей информацией, требуемой
клиенту для того, чтобы отыскать сервер и успешно установить с ним связь.
Относительный URL используется для адресации в пределах документа или
совокупности документов на одном сервере.
Полный Internet-адрес можно получить лишь тогда, когда к относительному адресу
добавляется базовый. Web-броузер при необходимости в большинстве случаев сам добавляет
необходимый базовый адрес, чтобы получить полный адрес в Internet.
Относительные URL используются обычно внутри HTML-документа, например, для
того, чтобы организовать переход из оглавления к конкретной главе. Базовый адрес можно
определить с помощью дескриптора <base> в заголовке HTML-документа.
Абсолютные URL следует использовать во всех тех случаях, когда вы ссылаетесь на
документы другого сервера в Internet.
Гипертекстовая ссылка задается парным тегом <A>, который содержит обязательный
атрибут HREF=. В качестве значения атрибута используется адрес URL документа, на который
указывает ссылка. Она может указывать на произвольный документ, располагающийся на
любом общедоступном узле сети, например:
<A HREF=http://www.site.com/
Здесь задан адрес в абсолютной форме. Обычно в такой форме задается ссылка на
внешний документ. При использовании относительного адреса ссылка рассматривается как
внутреняя, например:
<A HREF="text.htm">
Достоинство внутренней ссылки в том, что она сохраняет свою работоспособность при
изменении адреса Web-узла.
Дескриптор гиперсвязи <A> иногда называется «якорь» (само наименование
дескриптора представляет собой аббревиатуру от английского слова anchor — якорь).
Полный формат гиперссылки включает возможность ссылки на определенное место
внутри страницы. Для этого соответствующее место помечается с помощью якоря. Якорь
задается тегом <A> с атрибутом name, например:
<A name="MyLabel">.
Значение этого атрибута - произвольная последовательность латинских букв и цифр,
рассматриваемая как имя якоря. Для ссылки на якорь его имя указывается в конце адреса URL
после символа "#":
<A HREF=http://www.site.com/
Между дескрипторами <A> и </A> могут находиться только текст, графика и заголовки.
Текст, располагающийся между <A> и </A> дескрипторами, обычно изображается броузерами
в цвете (для этих целей по умолчанию используется голубой цвет), некоторые программы
подчеркивают его. Посредством атрибутов в дескрипторе <body> цвет текста гиперсвязи можно
изменить.
При включении в Web-страницу гиперссылок учитывайте следующие рекомендации.· Выразительно оформляйте текст гиперсвязи. По тексту гиперсвязи должно быть четко и
ясно понятно, куда ведет эта связь. Текст гиперссылки не был слишком длинным: кратко
и сжато выражайте цель ссылки.
- Не перегружайте документ гиперссылками. Вставляйте в текст Web-страницы только
действительно необходимые ссылки. В противном случае, пытаясь ознакомиться со
всеми адресуемыми объектами, пользователь очень быстро потеряет нить ваших
рассуждений.
- Никогда не размещайте два <а>-дескриптора по соседству друг с другом в тексте
документа, не вставив между ними никакого разделителя. При отображении такого
документа тексты этих гиперсвязей просто сольются.
- Создав свою Web-страницу, попытайтесь взглянуть на нее глазами пользователя. Все ли
гиперссылки выдержаны в одном стиле?
Основные дескрипторы для организации ссылок и форматирования текста показаны в
таблице.
Дескриптор Атрибут Назначение
<a>, </a> href=URL Адрес объекта
name=имя метки Создание локального имени ссылки
<b>, </b> Полужирный шрифт
<base> href=URL Базовый URL
<basefont> size=n Размер шрифта
<big>,</big> Увеличение шрифта
<body>, </body> Содержимое HTML-документа
alink=Цвет Цвет активизированной гиперсвязи
background=URL URL повторяющейся фоновой иллюстрации
bgcolor=Цвет Цвет фона
link=Цвет Цвет гиперсвязи
text=Цвет Цвет текста
vlink=Цвет Цвет посещенной гиперсвязи
<br> Принудительный разрыв строки
<caption>,
</caption>
Заголовок таблицы
<center>,</center> Центрирование фрагмента документа
<em>, </em> Выделение текста
<font>, </font> color=Цвет Задание цвета шрифтаface=Шрифт Вид шрифта
size=n | +n | -n Размер (абсолютный | относительный)
<hn>, </hn> Уровень заголовков, где n = 1 - 6
<hr> Горизонтальная линия
align=Выравнивание Выравнивание по горизонтали
noshade Выключение трехмерного изображения
size=n Высота линии в пикселах
width=n | n% Ширина линии
<i>, </i> Курсив
<li>, </li> Элемент списка
value=n Явное задание номера элемента
<ol>, </ol> Пронумерованный список
start=n Начальный номер
<p>, </p> Текстовый абзац
align=Выравнивание Выравнивание по горизонтали
<small>, </small> Уменьшение шрифта
<sub>, </sub> Нижний индекс
<sup>, </sup> Верхний индекс
<table>, </table> border=n Определение таблицы с обрамлением
<td>, </td> Ячейка данных таблицы
colspan=n Захваченные столбцы
rowspan=n Захваченные строки
<th>, </th> Ячейка заголовка таблицы
colspan=n Захваченные столбцы
rowspan=n Захваченные строки
<tr>, </tr> Строка таблицы
<ul>, </ul> Ненумерованный список
В таблице использованы следующие обозначения:
- параметр Цвет задается шестнадцатеричным кодом #RRGGBB, где RR, GG, BB -
соответственно красная, зеленая и синяя составляющие цвета, принимающие значенияот 00 до FF. Чем больше значение, тем меньше насыщенность цвета. Стандартные цвета
можно задать словом: Black, Silver, Gray, White, Red, Green, Yellow, Blue и другие;
- параметр Выравнивание может принимать значения Center;
- вертикальная черта "|" в описании атрибутов означает возможность выбора одного из
атрибутов.
Символы <, >, & и " напрямую в тексте не отображаются. Для их изображения используются
следующие коды:
- < — левая угловая скобка;
- > — правая угловая скобка;
- & — амперсанд;
- " — кавычки;
-   — непрерывный пробел.
Замечание: в этих кодах нельзя использовать заглавные буквы.
Рассмотрим примеры форматирования текста.
Пример 1
<font color=Red size=6 face="Times New Roman">
Пример управления шрифтом
</font>
Броузер воспроизведет текст
"Пример управления шрифтом"
красным цветом, размером — 6, шрифтом Times New Roman.
Пример 2
<UL>
<LI>яблоки
<LI>бананы
</UL>
Результатом воспроизведения является маркированный список:
· яблоки
· бананы
Пример 3
<OL>
<LI>апельсины
<LI>персики
<LI>виноград
</OL>
Результатом воспроизведения является нумерованный список:
1. апельсины
2. персики
3. виноградПример 4
<table border=1>
<caption>Результаты измерений</caption>
<tr>
<th>время</th><th>температура<
</tr>
<tr align=right>
<td>12:00</td><td>26.00</td><
</tr>
<tr align=right>
<td>12:15</td><td>22.50</td><
</tr>
<tr align=right>
<td>12:30</td><td>11.00</td><
</tr>
<tr align=right>
<td>12:45</td><td> 3.30</td><td> 0.030</td><
/tr>
<tr align=right>
<td>13:00</td><td> 0.05</td><td> 0.002</td>
</tr>
</table>
Результаты воспроизведения этого примера будет таблица:
Результаты измерений
Время температура давление
12:00 26.00 12.800
12:15 22.50 9.810
12:30 11.00 1.650
12:45 3.30 0.030
13:00 0.05 0.002
4. Использование графики в HTML–документах