Организация связи документов на сайте (ссылок). 


Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

Организация связи документов на сайте (ссылок).



Ссылки позволяют щелчком по выделенному слову или фразе перейти к другому документу или части того же документа. Гипертекстовые ссылки выделяются в тексте документа цветом.

Чтобы включить ссылку в документ необходимо:

1. Поместить в текст тег <A >. После символа А следует пробел.

2. Указать имя файла, на который происходит ссылка в формате: HREF=«имя файла» и закрывающую скобку >.

3. Ввести текст ссылки.

4. Указать на завершение тега </A>

 

Пример

<A HREF=«GLAVA2.HTM»> Глава вторая </A> В данном примере фраза «Глава вторая» является ссылкой на HTML-документ, GLAVA2.HTM, находящийся в том же каталоге (папке), что и текущий документ. Если документ находится в другом каталоге, то необходимо указать имя этого каталога (или путь), например:

<A HREF=«BOOK/GLAVA2.HTM»> Глава вторая </A>

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

<A HREF=«http:/www.cpress.ru/BOOK/GLAVA2.HTM»> Глава вторая </A>

Здесь http:/www.cpress.ru – так называемый URL – Uniform Resource Locator (унифицированный адрес ресурсов).

Ссылки на фрагмент документа

Для создания ссылки из документа DOCUM1 на какой-то раздел (абзац) документа, содержащегося в файле DOCUM2, необходимо сначала создать именованную ссылку (метку) в документе DOCUM2:

<A NAME=«PETJA»>Петя Иванов</A>,

а затем ссылку на неё из документа DOCUM1, указывая не только имя файла, но и имя ссылки, разделив их символом #.

<A HREF=«DOCUM2#PETJA»>Привет от Петра</A>.

В этом примере фраза «Привет от Петра» является ссылкой на метку «PETJA» документа DOCUM2.

Для организации ссылок на разделы одного и того же документа используется та же технология, но в адресе ссылки не указывается имя файла. Например, чтобы перейти в именованный раздел PETJA в документе DOCUM2, надо создать следующую ссылку:

<A HREF=«#PETJA»>

Цвета ссылок можно определить в теге стилей <style> (это так называемые каскадные стили.) При этом значения атрибутов, определенных в тэге <style> имеют приоритет перед определениями, сделанными в теге BODY или в теле документа.

Пример:

<head>

<style>

a:link {color:#ff5500; font-weight:normal; }

a:visited {color:#00ff00; font-weight:normal; }

a:hover {color:blue; font-weight:normal; }

</style>

</head>

На данном примере отражен механизм задания цвета ссылки на странице в трех возможных ее состояниях:

· просто задана ссылка;

· ссылка по которой уже был переход;

· ссылка на которую наведен курсор.

 

Графические ссылки

Такие ссылки позволяют щёлкнуть на изображении и перейти к другому файлу.

Для того, чтобы сделать графическую ссылку, надо набрать тот же код, что и для текстовых ссылок. Но в том месте, где стоял текст, выделенный для ссылки, поставьте графическое изображение, на котором будет производиться щелчок.

Пример

<A HREF=«DOG.HTM»><IMG SRC=«images/dog1.gif» ALT=«Собака» HEIGHT=80></A>

Целесообразно для графических ссылок не уменьшать размер исходного изображения при помощи атрибутов WIDTH и HEIGHT, а создавать отдельные миниатюрные изображения. Это существенно ускорит процесс загрузки документа.

Практическая часть.

 

1. Создайте HTML-документ (Web-страницу), содержащую четыре параграфа текста, выполненного различными типами шрифтов, различными цветами, имеющих различные выключки (выравнивания). Каждый параграф должен содержать одну фотографию.

 

ПРИМЕЧАНИЕ. Для создания HTML документа используйте программу «Блокнот» (Notepad).

2. Параграфы должны содержать следующую информацию:

ü Параграф 1 - «Работа студента группы ……………… Иванова И.И.». Далее наименование вуза, факультета и специальности.

ü Параграф 2 – любимый город;

ü Параграф 3 – любимый сезон года;

ü Параграф 4 – любимый вид спорта.

3. Параграфы должны начинаться заголовками различных уровней и содержать до трех строк текста с фотографией). Заголовок первого параграфа – «Данные об авторе»

4. В HTML-документе (п. 1 работы) создайте фоновый рисунок (тег BODY, атрибут BACKGROUND).

5. Введите в документ между параграфами текста разделительные полосы (тэг HR), придав атрибутам полосы различные значения высоты, ширины и выравнивания.

6. Создайте три дополнительные страницы с различным цветом фона страницы:

· страница 2;

· страница 3;

· страница 4.

Главному документу (первой странице) присвойте имя INDEX.HTM. При помощи тега <A HREF=> Текстовая ссылка </A> организуйте связь главного документа с тремя другими документами, обеспечивая перекрашивание гипертекстовой ссылки при наведении на неё курсора.

7. Перенесите текст параграфа 2  на страницу 2 и создайте ссылку со слов «Параграф 2» на первой странице на страницу 2.

8.  Повторите п. 7 для параграфов 3 и 4.

9. Проверьте через браузер правильность выполнения заданий данной работы.

10. Сообщите преподавателю об окончании работы.

Контрольные вопросы

1. Какова структура HTML-документа?

3. Что такое HTML?

4. Сколько размеров заголовков можно использовать в тексте HTML документа?

5. Какими тегами оформляется тело HTML-документа?

6. Как изменить размер графической вставки в HTML-документе?

7. Как ввести в текст символ произвольного вида в коде ASCI?

8. Бывают ли непарные теги?

9. Что такое тег?

10. С помощью какой программы в данной работе ведётся создание и редактирование текста HTML-документа?

11. Каким тегом определяется ссылка?

12. Для чего служат теги <А> и < /A>?

13. Как задать графическую ссылку?

14. Как обеспечить перекрашивание гипертекстовой ссылки при наведении на неё курсора?



Поделиться:


Последнее изменение этой страницы: 2021-07-18; просмотров: 115; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.144.116.159 (0.01 с.)