Создание гиперссылок

Главная особенность гипертекста – он позволяет посредством ссылок (links) связывать документы, т.е. делать ссылки из одного документа на другие.

Это можно сделать, т.к. каждый документ сети имеет свой уникальный адрес (URL - Uniform Resource Locator), состоящий из адреса компьютера-сервера, на котором он находиться и пути к документу на этом сервере. Кроме полного URL часто используется частичный URL (просто название файла), он не содержит название сервера, потому что указывает на документ, находящийся на том же сервере, что и документ, из которого сделана ссылка

Ссылки могут назначаться и на текст, и на рисунок. Зная URL документа или рисунка можно сделать на него ссылку, используя запись:

<A href="URL">...</A> Примеры:

<A href="http://ftep.debryansk.ru/fakultet/facult.html">Ссылка на факультет БГУ</A>

<A href="page2.html">Ссылка на 2ю страницу </A>

ЗАДАНИЕ. Создадим на странице гиперссылку на другую страницу.

Откройте 1.htm в Блокноте. Между <body>..</body> всё удалите и введите:

<html> <head> <title> Пример 5 </title> </head> <body> Текст до ссылки. <A href="1.htm">Это ссылка</A> Текст после ссылки </body> </html>

  Сохраните документ под именем ссылка.htm

  Откройте файл ссылка.htm в программе Internet Explorer . Убедитесь: текст между тегами <А> и </А> выделен как ссылка (цветом, подчеркиванием).

  Щелкните по ссылке - загрузится документ, на который указывает ссылка.

  Щелкните на кнопке Назад (вверху, на панели инструментов), чтоб вернуться к предыдущей странице. Убедитесь: ссылка теперь считается просмотренной и отображается другим цветом.

Ссылка может указывать как на другой документ, так и на конкретную часть внутри другого документа. Для этого: 1) данной части документа (тексту или рисунку) должно быть присвоено имя. Для этого используют запись:

<A name="имя">Текст </A> или

<A name="имя"> <img src="URL рисунка"> < /A >

2) Чтоб сделать ссылку на конкретную часть документа, записывают:

<A href="URL документа #имя"> Текст, за которым закреплена ссылка </A>

<A href="URL документа"> <img src="URL рисунка"> </A>,

Если нужно сделать ссылку на конкретную часть документа, который вы просматриваете в данный момент, то используется команда:

<A href="#имя"> ... </A>

Форматирование шрифта

ЗАДАНИЕ. Настроим различные параметры шрифта.

Откройте 1.htm в Блокноте. Между <body>..</body> всё удалите и введите:

<html> <head> <title> Пример 6 </title> </head> <body> <base font size="5" color="brown"> <p>Шрифт по умолчанию коричневый</p> <font size="-2" face="arial" color="green"> <p>Шрифт зеленый</p> </font> <p> <B> Полужирный.</B> <I>Курсив.</I> <U> Подчеркнутый.</U> <S>Вычеркивание.</S> <sub> Нижний индекс.</sub> <sup>Верхний индекс.</sup> <p> <p> <em>Выделение. <strong>Сильное выделение. <code>Текст программы. <kbd>Клавиатурный ввод. </body> </html>

- Сохраните документ под именем шрифт.htm.

- Откройте в браузере Internet Explorer файл шрифт.htm

- Установите, как настраивают шрифт применённые тэги. Поясним:

 <basefont> – этот тэг задаёт шрифт по умолчанию, причем увеличенный шрифт. После тега указывают атрибуты шрифта по умолчанию:

size - задаёт размер шрифта по умолчанию (например, size="5")

color - задаёт цвет шрифта (например, коричневый color="brown").

 <font>..</font> - заключенный между этими тэгами шрифт приобретает параметры (размер, гарнитуру, цвет), указанные после тега <font> атрибутами:

size - размер шрифта (например size="-2"), face - гарнитура шрифта (например face="arial"), color - цвет шрифта (напр., зеленый color="green").

 Начертание шрифта задают парные теги: <В>..</В> - полужирный шрифт, <I>..</I> – курсив, <U>..</U> – подчеркивание, <S>..<S> – вычеркивание, _.. – нижний индекс, ^.. – верхний индекс.

 Оформление шрифта задают теги: <еm> (выделение), <strong> (сильное выделение), <code> (текст программы), <kbd> (клавиатурный ввод), <samp> (пример вывода).

Браузер при выводе html-файла на экран преобразует его текст – игнорирует лишние пробелы, символы конца строки. Но если хотите, чтоб на экране текст выглядел так, как вы его ввели в html-документ, используйте тэг предварительного форматирования <pre> (текст должен находиться между тэгами <pre>.. </pre>). С помощью него удобно делать и таблицы.