Автор работы: Пользователь скрыл имя, 10 Июня 2014 в 01:58, практическая работа
Обычный текст представляется как одна длинная строка символов, которая читается в
одном направлении. Гипертекстовая технология заключается в том, что текст представляется
как многомерный с иерархической структурой.
Одно из основных применений гипертекстовых технологий — разработка Web-
документов для публикации в компьютерных сетях, в первую очередь в Internet. Далее будем
рассматривать технологию создания гипертекста именно с точки зрения Web-документа.
Под разметкой гипертекста подразумевается использование специальных кодов, легко
отделяемых от содержания документа и используемых для реализации гипертекста.
Применение этих кодов подчиняется строгим правилам, определяемым спецификацией языка
HTML (Hyper Text Markup Language).
ГИПЕРТЕКСТОВЫЕ ТЕХНОЛОГИИ
Обычный текст представляется как одна длинная строка символов, которая читается в
одном направлении. Гипертекстовая технология заключается в том, что текст представляется
как многомерный с иерархической структурой.
Одно из основных применений гипертекстовых технологий — разработка 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 описывает части содержания документа и
помещаются между тегами <BODY> и </BODY> (структурный элемент BODY).
Основными функциональными элементами документа HTML являются заголовки и
абзацы. Язык HTML поддерживает шесть уровней заголовков, которые задаются при помощи
тегов от <H1> до <H6>. В Web-документе они отображаются шрифтом разного размера.
Обычные абзацы задаются с помощью парного тега <P>. В HTML нет средств для
задания абзацного отступа. Абзацы отделяются пустой строкой. Закрывающий тег </P>
рассматривается как необязательный. Подразумевается, что он стоит перед тегом, который
задает очередной абзац. Если в тексте присутствует символ конца строки, при воспроизведении
в броузере он рассматривается как простой пробел. Для перехода на другую строку
используется непарный тег <BR>. В качестве ограничителя абзацев может использоваться
горизонтальная линейка, задаваемая тегом <HR>, например:
<HR ALIGN="RIGHT" SIZE="10" WIDTH="50%">
Этот тег задает горизонтальную линейку высотой в 10 пикселов, занимающую половину
ширины окна и расположенную справа.
3. Гипертекстовые ссылки
Как только в Web-страницу будет встроена гиперсвязь, документ можно назвать
гипертекстом. Гиперссылка может указывать:
ориентацию в больших документах.
Гиперссылки могут быть оформлены как абсолютные или относительные. Для
создания гиперссылки необходим адрес документа, на который устанавливается ссылка. Этот
адрес называется 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-страницу гиперссылок учитывайте следующие рекомендации.· Выразительно оформляйте текст гиперсвязи. По тексту гиперсвязи должно быть четко и
ясно понятно, куда ведет эта связь. Текст гиперссылки не был слишком длинным: кратко
и сжато выражайте цель ссылки.
действительно необходимые ссылки. В противном случае, пытаясь ознакомиться со
всеми адресуемыми объектами, пользователь очень быстро потеряет нить ваших
рассуждений.
документа, не вставив между ними никакого разделителя. При отображении такого
документа тексты этих гиперсвязей просто сольются.
гиперссылки выдержаны в одном стиле?
Основные дескрипторы для организации ссылок и форматирования текста показаны в
таблице.
Дескриптор Атрибут Назначение
<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> Ненумерованный список
В таблице использованы следующие обозначения:
соответственно красная, зеленая и синяя составляющие цвета, принимающие значенияот 00 до FF. Чем больше значение, тем меньше насыщенность цвета. Стандартные цвета
можно задать словом: Black, Silver, Gray, White, Red, Green, Yellow, Blue и другие;
атрибутов.
Символы <, >, & и " напрямую в тексте не отображаются. Для их изображения используются
следующие коды:
Замечание: в этих кодах нельзя использовать заглавные буквы.
Рассмотрим примеры форматирования текста.
Пример 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–документах