Гипертекстовые технологии
Применение гипертекстовых технологий при разработке Web-документов для публикации в компьютерных сетях и интернет. Использование специальных кодов для реализации гипертекста. Особенность описания документа средствами языка HTML. Основные понятия HTML.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | контрольная работа |
| Язык | русский |
| Дата добавления | 01.02.2012 |
| Размер файла | 24,5 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Гипертекстовые технологии
Обычный текст представляется как одна длинная строка символов, которая читается в одном направлении. Гипертекстовая технология заключается в том, что текст представляется как многомерный с иерархической структурой.
Одно из основных применений гипертекстовых технологий - разработка Web-документов для публикации в компьютерных сетях, в первую очередь в Internet. Далее будем рассматривать технологию создания гипертекста именно с точки зрения Web-документа.
Под разметкой гипертекста подразумевается использование специальных кодов, легко отделяемых от содержания документа и используемых для реализации гипертекста. Применение этих кодов подчиняется строгим правилам, определяемым спецификацией языка HTML (Hyper Text Markup Language).
Особенность описания документа средствами языка HTML связана с принципиальной невозможностью достижения абсолютной точности воспроизведения исходного документа. Предполагается, что документ будет широко доступен в Интернете, и поэтому неизвестно, как будет организовано его воспроизведение. Документ может быть представлен на графическом экране, выведен в чисто текстовом виде или прочитан программой синтеза речи. Поэтому язык HTML предназначен не для форматирования документа, а для его функциональной разметки.
Основные понятия 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.
Структура документа HTML
Простейший правильный документ HTML, содержащий все теги, определяющие структуру, выглядит следующим образом:
<HTML>
<HEAD><TITLE>Заголовок документа</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 пикселов, занимающую половину ширины окна и расположенную справа.
Гипертекстовые ссылки
Как только в 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/index.htm>.
Здесь задан адрес в абсолютной форме. Обычно в такой форме задается ссылка на внешний документ. При использовании относительного адреса ссылка рассматривается как внутреняя, например: <A HREF= «text.htm»>.
Достоинство внутренней ссылки в том, что она сохраняет свою работоспособность при изменении адреса Web-узла.
Дескриптор гиперсвязи <A> иногда называется «якорь» (само наименование дескриптора представляет собой аббревиатуру от английского слова anchor - якорь).
Полный формат гиперссылки включает возможность ссылки на определенное место внутри страницы. Для этого соответствующее место помечается с помощью якоря. Якорь задается тегом <A> с атрибутом name, например: <A name= «MyLabel»>.
Значение этого атрибута - произвольная последовательность латинских букв и цифр, рассматриваемая как имя якоря. Для ссылки на якорь его имя указывается в конце адреса URL после символа «#»: <A HREF=http://www.site.com/index.htm#address>.
Между дескрипторами <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>температура</th>
<th>давление</th>
</tr>
<tr align=right>
<td>12:00</td>
<td>26.00</td>
<td>12.800</td>
</tr>
<tr align=right>
<td>12:15</td>
<td>22.50</td>
<td>9.810</td><
/tr>
<tr align=right>
<td>12:30
</td><td>11.00
</td>
<td>1.650</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 |
Использование графики в HTML-документах
Рисунки являются очень важными элементами оформления WEB-страниц. Привлекательность и информативность сайтов в Интернет во многом определяется использованием графики. Рисунки, чаще всего, хранятся в файлах формата .jpg или .gif, обычно в отдельной папке (браузеры поддерживают и другие графические форматы). Кроме указанных форматов допускается использовать видео-изображения в формате .avi.
Подключение рисунков выполняется с помощью дескриптора <img>, имеющего следующие основные атрибуты:
· align=Выравнивание - способ выравнивания графики, например, Center;
· border=n - видимая рамка вокруг графики;
· dynsrc=URL - исходный URL видео;
· height=n - высота графики;
· loop=n - число повторений видео (если вместо n задано infinite, видео будет повторяться непрерывно);
· src=URL - исходный URL графики;
· start=Условие запуска - задает способ запуска видео, например, start=mouseover запускает видео при перемещении указателя мыши по области видео;
· width=n - ширина графики.
Рассмотрим пример добавления графики в HTML-документ.
Пример 5
Откроем редактор Блокнот и наберем следующий код:
<HTML>
<HEAD></HEAD>
<BODY>
<TABLE Border=1>
<TR><TD colspan=2><img src= «Car.jpg»></TD></TR>
<TR><TD colspan=2>
<Font color=Red size=3 face= «Times New Roman»>
Двигатель внутреннего сгорания</Font></TD></TR>
<TR><TD><img dynsrc= «Demo.avi» start=mouseover></TD>
<TD><img dynsrc= «Demo.avi» loop=infinite></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Сохраним код под любым именем с расширением .html или .htm, например, Example.html. Следует иметь в виду, что в соответствии с кодом, графика должна храниться в той же папке, где и Example.html.
Выполним двойной щелчок по значку Example.html. Воспроизведение приведенного кода в браузере Internet Explorer.
Размещено на Allbest.ru
Подобные документы
Понятие об html. Структура файла в формате html. Отличительный признак html-документа. Гипертекстовые ссылки. Создание документов в стандарте html. Заголовки. Форматирование текста и изменение стилей. Фреймы.
реферат [23,7 K], добавлен 17.08.2007Определение понятия гипертекста. Основные части документа SGML. История создания стандартного языка разметки документов HTML. Отличия синтаксиса XHTML от HTML. RSS - семейство XML-форматов для описания лент новостей. Применение языка разметки KML.
презентация [4,3 M], добавлен 15.02.2014Hyper Text Markup Language (html) как стандартный язык для создания гипертекстовых документов в среде web. Тэги списков, гипертекстовые ссылки, графика внутри документа, специальные тэги html и таблицы. Планирование фреймов. Этапы создания сайтов.
контрольная работа [126,9 K], добавлен 18.11.2010Суть и составные части Web технологии, ее базовые элементы. Стандартный язык, предназначенный для создания гипертекстовых документов: HyperText Markup Language (HTML). HTML-тэги, определяющие, как будет отображаться WEB-броузером тело документа в целом.
реферат [19,4 K], добавлен 01.04.2010Общая характеристика языка разметки гипертекста Hypertext Markup Language. Структура HTML-документа. Обзор основных возможностей HTML. Элементы современного дизайна Web-страниц. Анализ практического применения HTML (на примере обучающих программ).
курсовая работа [47,9 K], добавлен 24.11.2012Работа с HTML-редактором Adobe Dreamweaver. Этапы и правила построения заглавной страницы сайта, форматирования HTML-страниц, создания гипертекстовых ссылок, создания и форматирования таблиц. Использование графических материалов при разработке сайта.
методичка [1,9 M], добавлен 06.07.2011Цели, задачи и компоненты информационной технологии управления. Разработка структуры сайта и программный код работы в HTML–редакторе: создание титульной страницы, документа с фреймами, связь информационных документов с помощью гипертекстовых ссылок.
курсовая работа [34,3 K], добавлен 11.08.2011Использование пакета прикладных программ MS Office при решении экономических задач. Разработка баз данных при помощи Microsoft Access. Интернет-технологии и применение языка гипертекста HTML. Построение и вычисление финансовых функций с помощью MS Excel.
курсовая работа [3,2 M], добавлен 19.03.2010Специальные разметочные указатели (теги) языка HTML. Основные правила написания тегов. Структура HTML-файлов. Внесение изменений и способы обновления Web-сайта. Необходимые атрибуты для создания на Web-странице бегущей строки и вставки рисунков.
презентация [439,3 K], добавлен 29.01.2014Разработки британского учёного Тима Бернерсом-Ли. HTML как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. Структура HTML-документов и основные теги на языке HTML.
курсовая работа [820,3 K], добавлен 03.03.2011
