1. Введение
Немного истории
Всемирная информационная сеть (World Wide Web далее
Web) имеет недолгую, по людским меркам, историю. Годом рождения Web
считается 1992 год, а отцом основателем был некто Tim Berners-Lee, который
сумел, используя новые сетевые технологии и опыт своих предшественников,
сделать Web приятным и удобным средством распространения информации во
всемирной сети компьютерных сетей Internet (Internet существует с середины
60-х годов).
Толчок для своего стремительного и победного шествия
по планете Web получила в 1993 году, когда Mark Andressen с группой студентов
университета Иллинойса, разработали бесплатно распространяемую (вот истинная
причина бурного развития Web) программу Mosaic для просмотра Web-страниц.
Ну а в дальнейшем сами знаете что случилось, или вы не обнаруживаете у себя
признаков Internet-зависимости ?
HTML был разработан на основе мощного языка разметки
SGML, путем переноса некоторых его функций разметки данных в сетевую среду для
разметки гипертекста. Одновременно с развитием Web технологий, насыщением Web
новыми сервисами и возможностями, развивался и язык разметки гипертекста. С
момента своего появления стандарт HTML претерпел множество изменений, последнее
из которых это
Суть и составные
части Web технологии
Итак выделим базовые элементы технологии Web:
- Internet это всемирная сеть разнородных
компьютерных сетей, взаимодействующих по протоколу TCP/IP.
- Web является одним из приложений Internet (наряду
с электронной почтой, новостями и прочими электронными сервисами),
предназначенным для массового распространения разнообразной информации.
- Носителями информации в Web служит
Web-страницы, содержащие текст, графику, мультимедиа элементы и
гиперссылки на другие ресурсы Web или Internet.
- Для передачи гипертекста Web-страниц в Internet
используется специально разработанный протокол HTTP (Hyper Text
Transfer Protocol).
- Для разработки Web-страниц используется
специальный язык разметки гипертекста HTML (Hyper Text Markup Language).
-
2. Система
гипермедиа WWW
После экскурса в историю создания Web и
теоретических основ технологии перейдем непосредственно к предмету - языку
HTML.
2.1. Базовые
элементы языка и структура HTML документа
Базовым элементом языка разметки гипертекста
является - ТЕГ (дескриптор, маркер). Тег всегда заключен
между скобками < > и имеет следующий вид:
<ТЕГ атрибут 1=ЗНАЧЕНИЕ ... атрибут
N=ЗНАЧЕНИЕ>
Теги бывают одиночными и контейнерными. Контейнером
называется пара: открывающий <ТЕГ> и закрывающий </ТЕГ>.
<ТЕГ> Контейнер </ТЕГ>
Открывающий тег служит для указания программе-броузеру
начала какого-либо объекта или задания свойств объектов помещенных в контейнер.
Закрывающий тег служит для указания программе-броузеру о конце объекта или
окончания применения свойств, заданных в открывающем теге.
Атрибуты тега задают значения свойств данного объекта
или объектов помещенных в контейнер. Значения свойств, содержащие пробелы,
берутся в кавычки, в остальных случаях кавычки можно опустить.
HTML документ представляет собой обычный текстовый
файл, содержащий маркированный тегами форматирования текст, а так же заданные
специальными тегами ссылки на графические и прочие файлы мультимедиа, ссылки на
другие документы HTML и ресурсы Internet.
Документ HTML начинается открывающим тегом
<HTML> и заканчивается закрывающим тегом </HTML>. Между данной
парой контейнерных тегов располагаются две другие основные части HTML
документа: заголовок заключенный в контейнер <HEAD>...</HEAD> и
тело документа в контейнере <BODY>...</BODY>. Таким образом структура
простого HTML документа выглядит примерно так:
Структура HTML документа
<HTML> - Начало документа
<HEAD>
ЗАГОЛОВОК ДОКУМЕНТА
</HEAD>
<BODY>
ТЕЛО ДОКУМЕНТА
</BODY>
</HTML> - Конец документа
2.2. Ссылки в
HTML документах
Как было сказано выше, HTML-документ это
обычный текстовый файл. Гипертекстовым его делают содержащиеся в нем ссылки на
другие документы и ресурсы Internet. Рассмотрим, что такое ссылка, какие бывают
типы ссылок и как их задать в документе.
Ссылка состоит из двух компонентов: так называемого
якоря (anchor) или элемента привязки и URL (Universal Resurse Locator)
связанного с ним ресурса Internet.
Первый компонент ссылки - якорь это текстовый или графический
объект, который как правило служит органом управления на Web-странице. Каждый
раз при просмотре Web-страниц мы видим множество различных элементов-якорей.
Это и красочные рекламные баннеры, всевозможные кнопки и иконки, выделенные
подчеркнутым курсивом элементы текста, адреса электронной почты.
Второй компонент ссылки не отображается Web-броузером, но служит конкретным
указанием где в Internet найти, и что сделать при активизации пользователем
соответствующего ему якоря.
Адреса ресурсов бывают относительные и абсолютные.
Относительный адрес это адрес ресурса относительно
компьютера и каталога загрузки HTML-документа, если иной базовый адрес не
указан в заголовке документа, тег <BASE> (См. раздел 2.3.).
Относительный адрес задается в сокращенной форме (путь/файл). Например,
если ваша начальная страница index.htm загружена броузером c httр://www.site.ru, то использование в ней относительной ссылки resume.htm означает
загрузку httр://www.site.ru/resume.htm.
Абсолютные адреса используются для привязки к ресурсам
других узлов Internet и задаются полным форматом записи (httр://компьютер/путь/файл).
Например: httр://www.sitename.ru/filename.htm.
Что такое ссылка теперь вроде ясно. А какие они бывают
и как задаются в HTML-документе ?
Ссылки в документах задаются при помощи контейнера <A> ...</A>,
следующей структуры:
<A rel="nofollow ugc" target="_blank" href="Ресурс" TARGET="имя
окна" TITLE="Подсказка">Элемент - якорь</A>
Атрибут HREF в открывающем теге задает ресурс который
необходимо обработать броузеру при выборе на Web-странице, соответствующего ему
якоря. Рассмотрим наиболее часто используемые ресурсы:
<A rel="nofollow ugc" target="_blank" href="URL"> - ссылки на другие
документы HTML и файлы.
<A rel="nofollow ugc" target="_blank" href="ftр://ftp_server/path/filename">
- ссылки на файлы FTP-сервера.
<A rel="nofollow ugc" target="_blank" href="mailto:e-mail"> - ссылки на адреса
электронной почты.
<A rel="nofollow ugc" target="_blank" href="news:newsgroup"> - ссылки на группы новостей.
Атрибут TITLE задает текстовую подсказку в стиле
ToolTip, отображаемую броузером при позиционировании указателя-курсора в зоне
элемента-якоря.
Заключеный в контейнер элемент-якорь выделяется
броузером особым образом (текст-цветом и подчеркиванием, графика-рамкой)
при отображении на Web-странице. Можно задать свой способ выделения
элемента-якоря в атрибутах тега <BODY> - тела документа (См. раздел 2.4.).
Теперь рассмотрим несколько конкретных примеров использования ссылок в
документах:
<A rel="nofollow ugc" target="_blank" href="httр://www.site.ru"
TITLE="Переход на www.site.ru"> Заходите к нам на огонек
</A> - абсолютная ссылка: переход на сайт www.site.ru, текстовый
якорь - Заходите к нам на огонек, с подсказкой.
<A rel="nofollow ugc" target="_blank" href="/VW/cars.htm"> Модельный ряд
VW </A> - относительная ссылка: открытие станицы cars.htm в подразделе VW
относительно раздела основной страницы, текстовый якорь - Модельный ряд VW,
без подсказки.
<A
rel="nofollow ugc" target="_blank" href="mailtо:webmaster@freemail.ru">Связь с вебмастером</A>
- загрузка интерфейса к почтовой системе пользователя с автозаполнением
реквизитов получателя, текстовый якорь - Связь с вебмастером, без
подсказки.
<A
rel="nofollow ugc" target="_blank" href="ftр://ftp.site.ru/soft/driver.zip">Новый драйвер
здесь</A> - доступ на FTP-сервере к файлу драйвера, текстовый якорь-Новый
драйвер здесь, без подсказки.
При использовании графического файла в качестве
элемента-якоря необходимо вместо текста в контейнере <A>...</A>
использовать конструкцию <IMG SRC="файл"> (См. раздел 3.2.).
Например:
<A rel="nofollow ugc" target="_blank" href="/VW/passat.htm"><IMG
SRC="/VW/CARS/passat.gif"></A> - относительная ссылка:
открытие станицы passat.htm в подразделе VW относительно раздела основной страницы, графический
якорь-passat.gif, без подсказки.
Кроме вышеперечисленных ссылок существуют еще
внутренние ссылки или закладки. Этот тип ссылок используется для удобства
перемещения в пределах документа. Для использования в HTML-документе закладок
необходимо задать имена тех областей документа, на которые необходимо
ссылаться.
Имя закладки в теле документа задается использованием
атрибута NAME=ИмяЗакладки в контейнере <A>...</A>. Причем в данном
случае текст, заключенный в контейнер, не является элементом-якорем (но
выводится).
Например для перехода на начало документа необходимо
поместить там закладку:
<A
NAME=DocBegin>Начало документа<A>
Внутренняя ссылка на закладку в документе имеет
следующий формат:
<A rel="nofollow ugc" target="_blank" href="URL документа#ИМЯ">Элемент
- якорь</A>
Например для размещения в документе ссылки на внутреннюю
закладку (содержащуюся в данном документе) необходимо применить:
<A
rel="nofollow ugc" target="_blank" href="#DocBegin">Перейти к началу документа</A>
А для размещения в документе ссылки на внешнюю
закладку (например содержащуюся в файле Doc1.htm) необходимо применить:
<A rel="nofollow ugc" target="_blank" href="Doc1.htm#DocBegin">Перейти
к началу документа Doc1.htm</A>
В заключении надо описать еще один важный атрибут тега
ссылки, это атрибут TARGET. Данный атрибут задает окно либо фрейм (См. раздел 4.2.) назначения
для документа заданного атрибутом HREF. По умочанию загрузка происходит в
текущее окно броузера, но можно указать имя нового или существующего окна, а
так же одно из предопределенных имен объектов броузера: _blank, _self, _parent,
_top. Например:
<A rel="nofollow ugc" target="_blank" href="sample/sample.htm"
TARGET="new_win">Пример</A> - загрузка документа sample.htm в новое
окно броузера с именем "new_win".
Вот пожалуй и все что я могу вам рассказать о ссылках.
Едем дальше ?
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.