Студопедия

Главная страница Случайная страница

КАТЕГОРИИ:

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






Гипертекстовые ссылки






Как только в Web-страницу будет встроена гиперсвязь, документ можно назвать гипертекстом. Гиперссылка может указывать:

· на позицию в своем документе (внутренние гиперссылки),

  • на другой документ на своем сервере,
  • на произвольный объект по любому адресу Internet.

Внутренние гиперссылки применяются для того, чтобы упростить пользователю ориентацию в больших документах.

Гиперссылки могут быть оформлены как абсолютные или относительные. Для создания гиперссылки необходим адрес документа, на который устанавливается ссылка. Этот адрес называется URL - Uniform Resource Locator.

Абсолютный URL — это полный Internet-адрес со всей информацией, требуемой клиенту для того, чтобы отыскать сервер и успешно установить с ним связь.

Относительный URL используется для адресации в пределах документа или совокупности документов на одном сервере.

Полный Internet-адрес можно получить лишь тогда, когда к относительному адресу добавляется базовый. Web-браузер при необходимости в большинстве случаев сам добавляет необходимый базовый адрес, чтобы получить полный адрес в Internet.

Относительные URL используются обычно внутри HTML-документа, например, для того, чтобы организовать переход из оглавления к конкретной главе. Базовый адрес можно определить с помощью дескриптора < base> в заголовке HTML-документа.

Абсолютные URL следует использовать во всех тех случаях, когда вы ссылаетесь на документы другого сервера в Internet.

Гипертекстовая ссылка задается парным тегом < A>, который содержит обязательный атрибут HREF=. В качестве значения атрибута используется адрес URL документа, на который указывает ссылка. Она может указывать на произвольный документ, располагающийся на любом общедоступном узле сети, например:

< A HREF=https://www.site.com/index.htm>

Здесь задан адрес в абсолютной форме. Обычно в такой форме задается ссылка на внешний документ. При использовании относительного адреса ссылка рассматривается как внутреняя, например:

< A HREF=" text.htm" >

Достоинство внутренней ссылки в том, что она сохраняет свою работоспособность при изменении адреса Web-узла.

Дескриптор гиперсвязи < A> иногда называется «якорь» (само наименование дескриптора представляет собой аббревиатуру от английского слова anchor — якорь).

Полный формат гиперссылки включает возможность ссылки на определенное место внутри страницы. Для этого соответствующее место помечается с помощью якоря. Якорь задается тегом < A> с атрибутом name, например:

< A name=" MyLabel" >.

Значение этого атрибута - произвольная последовательность латинских букв и цифр, рассматриваемая как имя якоря. Для ссылки на якорь его имя указывается в конце адреса URL после символа " #":

< A HREF=https://www.site.com/index.htm#address>

Между дескрипторами < A> и < /A> могут находиться только текст, графика и заголовки. Текст, располагающийся между < A> и < /A> дескрипторами, обычно изображается браузерами в цвете (для этих целей по умолчанию используется голубой цвет), некоторые программы подчеркивают его. Посредством атрибутов в дескрипторе < body> цвет текста гиперсвязи можно изменить.

 

Основные дескрипторы для организации ссылок и форматирования текста:

Дескриптор Атрибут Назначение
< 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;
  • вертикальная черта " |" в описании атрибутов означает возможность выбора одного из атрибутов.

Символы <, >, & и " напрямую в тексте не отображаются. Для их изображения используются следующие коды:

  • & lt — левая угловая скобка;
  • & gt — правая угловая скобка;
  • & amp — амперсанд;
  • & quot — кавычки;
  • & nbsp — непрерывный пробел.

Замечание: в этих кодах нельзя использовать заглавные буквы.

Рассмотрим примеры форматирования текста.

Пример 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.

 


Поделиться с друзьями:

mylektsii.su - Мои Лекции - 2015-2024 год. (0.011 сек.)Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав Пожаловаться на материал