Занятие №4

Содержание
Виды ссылок
Задание ссылки
Атрибуты
Ссылки на текущую страницу (якоря)
Задание формата ссылок

Виды ссылок
Внешние
переход осуществляется вне текущего web-узла – указываем полный URL- адрес документа
Внутренние
переход осуществляется в рамках одного web-узла (другая страница, документ и т.п.) – указываем относительный адрес
Переход внутри документа (якоря)
переход осуществляется в рамках одного html-документа от фрагмента к фрагменту (иногда от фрагмента одной страницы – к фрагменту другой страницы – комбинированная ссылка)

Задание ссылки
Чтобы задать ссылку необходимо воспользоваться тегом
.
Данный тег может быть, как парным (для создания ссылки), так и одинарным (для задания метки);
но для создания ссылки может использоваться только парный вариант.
В качестве ссылки между открывающимся и закрывающимся тегом может находится:
текстовый фрагмент;
графическое изображение.

Ссылки
Красивая ссылка на главную страницу

Атрибуты
href
Данный параметр содержит адрес, на который должен переходить браузер при активизации ссылки.
Адрес может содержать как и просто имя файла (если переход осуществляется в рамках одного каталога), так и полный адрес размещения файла (или html-страницы).
Связаться с нами
- если пользователь нажмет на ссылку (текст «Связаться с нами»), то перейдет на страницу contacts.html

Внешние ссылки
Переход ВНЕ текущего web-узла
Ссылка на сайт Microsoft
Отправить письмо href="http://www.mizic.ru/alex/lena/test.zip">Ссылка на zip-архив

Задание
Создайте html-страницу; задайте на ней следующие строки-ссылки:
ссылка на onliner.by;
ссылка на любой e-mail; добавьте еще несколько произвольных внешних ссылок.

Внутренние ссылки
Относительный адрес:
ссылка с index.html на page.html
ссылка с page.html
на index.html
ссылка с page.html на ris.gif
Переход на другую страницу ТЕКУЩЕГО web-узла

Типы адресов
“img_1.jpg” (html-файл и изображение лежат в одной папке)
“images/img_1.jpg” (изображение лежит в отдельной папке, которая хранится на одном уровне с html-файлом )
“../images/img_1.jpg” (отдельная папка лежит на уровень выше html-файла)
“http://.....img_1.jpg” (изображение лежит на сервере)

Пример
Создадим две страницы, переход между которыми будет осуществляться по текстовым ссылкам
Page_01.html
Page_02.html

Пример
Page_01.html
Строка
Перейдем на вторую страницу
- позволяет задать текстовую ссылку (текст «Перейдем на вторую страницу») на страницу Page_02.html
Page_02.html
Строка
Вернемся на первую страницу
позволяет задать текстовую ссылку (текст «Вернемся на первую страницу») на страницу Page_01.html
Таким образом мы получили две связанные ссылками html-страницы

Задание
Создайте html-страницу, которая будет содержать ссылки на две другие страницы:
переход на вторую страницу;
переход на третью страницу;
Вторая страница будет содержать текст «Вы перешли на вторую страницу. Чтобы вернуться обратно нажмите на ссылку» и ссылку «вернуться назад».
Третья страница будет содержать текст «Вы перешли на третью страницу. Чтобы вернуться обратно нажмите на ссылку» и ссылку «вернуться назад».
Протестируйте в браузере систему переходов между страницами.

Атрибуты
name
Данный параметр присваивает ссылке условное имя.
Такая форма обращения к ссылке (по присвоенному имени) используется для организации переходов в рамках одной страницы; обычно задается для одинарного тега
Например,
- на html-странице на позиции, где расположен одинарный тег
будет находится условная метка под именем «marker_01» - по этой метке возможно будет найти (и сразу прейти) именно эту позицию на странице

Атрибуты
target
Данный параметр используется, если при переходе по ссылке новую страницу необходимо открыть не в текущем окне браузера.
Может принимать следующие значения:
_blank – создается новое пустое окно браузера и в него загружается страница;
_self – страница загружается в текущее окно (используется по умолчанию);
-parent – страница загружается в родительское окно (если таковое имеется);
_top – страница загружается в текущее окно, при этом все фреймы удаляются.

Атрибуты
title
Данный параметр позволяет задать текст, описывающий ссылку; данный текст выводится браузером, когда пользователь наводит на ссылку указатель мыши.

Задание
Создайте систему html-страниц (минимум 2 страницы), связанных текстовыми ссылками. Для ссылок задайте:
при наведении мыши на ссылку появляется краткая текстовая надпись (информирующая о том, куда ведет эта ссылка);
при переходе по ссылкам страницы открываются в новом окне браузера.

Изображение как ссылка
В качестве ссылки может выступать изображение. Тогда в тег
помещается тег
.
Например,
изображение 5416.jpg будет являться ссылкой
при наведении указателя мыши появится надпись "переход на сайт onliner.by";
при щелчке ссылка откроет страницу в новом окне браузера (target='_blank');

Пример
при наведении указателя мыши появляется надпись

Задание
создайте html-страницу;
задайте на ней ссылку на внешний ресурс (любой, например, tut.by);
ссылку оформите в виде изображения;
для ссылки укажите следующие параметры:
- при наведении указателя мыши появляется комментарий;
- страница при активизации ссылки открывается в новом окне браузера;
для изображения, выступающего в роли ссылки, задайте следующие параметры:
- задайте небольшой размер;
- обводку рамкой;
- ориентируйте по центру;

Якоря
Якоря – ссылки в пределах одной страницы.
Сначала устанавливаем метки в тех местах на странице, куда можно будет осуществить переход: для этого используем одинарный тег а с параметром name (например,
)
Затем прописываем ссылки, которые нас должны будут «привести» на установленные метки: для этого используется двойной тег а с атрибутом href, но в качестве адреса указывается по шаблону #имя_метки (например,
Переходим на нужную позицию
)

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

Пример
Выбираем ссылку Переходим на этой же странице к заданной метке

Пример
Ссылки на метки Метки

Задание
Создайте html-страницу; разместите на ней три абзаца произвольного текста (объем на несколько вертикальных прокрутов мышью). В начале каждого абзаца задайте метку для перехода по ссылке. В начале страницы введите три строки
Абзац 1
Абзац 2
Абзац 3
которые будут ссылками на заданные вами метки.
Проверьте работу ссылок в браузере.

Формат ссылок
Формат ссылок задаем через стили.
link – не посещённая ссылка;
Например,
a: link{color: # a23434;} можно опустить link; будет аналогично a{color: #a23434;}
active - ссылка при активации пользователем элемента (при нажатии левой кнопки мыши)
Например,
a: active {color: #34a237;}
visited – посещенная ссылка
Например,
a: visited{color: #3449a2;}
hover – при наведении указателя мыши, но до щелчка
Например,
a: hover{color: #efe70a;}

Пример
a:link{text-decoration: none;}
для ссылок убираем эффект подчеркивания
a:visited { text-decoration: none;}
для посещенных ссылок убираем эффект подчеркивания
a:active { text-decoration: none;}
для ссылок, по которым выполняется щелчок, убираем эффект подчеркивания
a:hover { text-decoration: underline; color: red;}
при наведении указателя мыши меняет цвет ссылки
и создает эффект подчеркивания

Задание
В любом из предыдущих заданий, где использовались ссылки, задайте через стили дополнительные параметры (изменение цвета в зависимости от активизации или другие параметры – размер, стиль и т.п.).