Основы HTML и CSS Ссылки и иллюстрации. Ссылки и иллюстрации: Механизмы адресации на ресурсы в Internet. Реализация механизма в языке HTML Создание гиперссылок. - презентация

1 Основы HTML и CSS Ссылки и иллюстрации

2 Ссылки и иллюстрации: Механизмы адресации на ресурсы в Internet. Реализация механизма в языке HTML Создание гиперссылок с помощью элемента A и его атрибутов. Типы ссылок Размещение иллюстрации на web-странице. Типы файлов иллюстраций. Элемент IMG и его атрибуты Распределение иллюстраций по страницам сайта: приемы и советы

3 Переход браузера... текст... какой-то текст... Метка(якорь, anchor):

4 Переход по метке: правила Выбираем имя для метки:. Имя должно быть уникальным. Это означает, что других меток с таким именем в документе быть не должно. А что будет, если проигнорировать этот совет? Имя может состоять из любых символов. В том случае, когда имя содержит пробелы или ключевые символы HTML, кавычки обязательны. Ставим переход по метке: текст. # ключевой символ. метка выбранное имя для метки. текст запись, которая будет выглядеть на экране браузера как ссылка.

5 Лабораторная работа Создание и использование якорей Откройте папку lab В файле index.html создайте оглавление, с каждого пункта которого осуществляется переход к нужной статье 2 2

6 Переход к другому документу Это ссылка на 1.html Это ссылка на 2.html Это ссылка на 3.html 1.html 3.html 2.html... текст... Это ссылка на 1.html Это ссылка на 2.html Это ссылка на 3.html

7 Лабораторная работа Создание и использование гиперссылок Откройте папку lab В файле index.html оформите меню в виде гиперссылок на файлы, соответствующие названиям пунктов меню 2 2

8 Переход к другому документу с меткой текст Ссылка на файл 1.html с меткой "а" В этом месте поставлена метка Ссылка на файл 1.html с меткой "а" Какой-то текст В этом месте поставлена метка 1.html Сюда будет осуществлен переход

9 Лабораторная работа Создание и использование гиперссылок и якорей Откройте папку lab-2-3 и создайте файл menu.html 1 1 В файле menu.html оформите меню в виде гиперссылок на файл content.html и показом статьи, соответствующей названию пункта меню В файле menu.html оформите меню в виде гиперссылок на файл content.html и показом статьи, соответствующей названию пункта меню 3 3 Скопируйте содержимое файла lab-2-2\index.html в menu.html Скопируйте содержимое файла lab-2-2\index.html в menu.html 2 2

10 Примеры абсолютных ссылок на различные файлы по разным протоколам: протокол://имя_сервера:порт/путь Ссылка на HTML файл по протоколу HTTP: Пример Ссылка на ZIP файл по протоколу HTTP: Пример Ссылка на EXE файл по протоколу FTP: Пример Ссылка на , при помощи протокола mailto: Пример

11 Лабораторная работа Создание и использование абсолютных гиперссылок Используйте файл menu.html 1 1 Создание гиперссылки ведущей на сайт Создание ссылки, которая позволит пользователю отправить , используя почтовый клиент по-умолчанию 3 3

12 Несколько типичных вариантов относительных ссылок root current.html target.html folder root current.html target.html href="target.html" href="folder/target.html"

13 Несколько типичных вариантов относительных ссылок folderroot current.html target.html href="../target.html" folder1 root current.html target.html folder href="../folder/target.html"

14 Примеры относительных адресов "info.html" "manual/info.html" "manual" "../help.html" "../project/first.html" "../../about/contact.html" "/" - корень сайта "/demo/" "/images/pic.gif" "./file/doc.html" = "file/doc.html" //В заголовке!

15 В каком окне открывать ссылку? ссылка ссылка

16 Цвет ссылок цвет неотработанной ссылки (пользователь еще не "кликал" на ссылке). цвет ссылки после щелчка (пользователь "кликнул" на ссылке; документ, на который указывает ссылка, грузится по сети). цвет отработанной ссылки (пользователь "ходил" по этой ссылке). Цвета ссылок по-умолчанию: синий цвет неотработанной ссылки красный цвет активной ссылки пурпурный цвет отработанной ссылки

17 Атрибуты, явно задающие цвета ссылок Атрибуты : link цвет неотработанной ссылки alink цвет активной ссылки vlink цвет отработанной ссылки

18 Формат GIF GIF-формат имеет три дополнительные возможности: Мультипликация Прозрачная графика Чересстрочная развертка

19 Формат JPG

20 Формат PNG PNG-8: индексированная цветовая палитра. поддержка прозрачности. PNG-24: полноцветный. PNG-32: полноцветный. полупрозрачность задается альфа-каналом.

21 Как показать файл?

22 Картинка как ссылка border = "0" border = "1"

23 Подписываем картинку Да, и ссылка тоже...

24 Задаем размеры и выравниваем картинку top - вертикальное выравнивание по верхнему краю. middle - вертикальное выравнивание по центру. bottom - вертикальное выравнивание по нижнему краю. left - горизонтальное выравнивание по левому. right - горизонтальное выравнивание по правому краю. hspace vspace

25 Фоновое изображение документа

26 Лабораторная работа Создание и использование иллюстраций Используйте файл menu.html 1 1 Использование изображения в качестве ссылки 2 2 Создание фонового рисунка 3 3

27 Карты изображений rect прямоугольник. circle окружность. poly многоугольник. default оставшаяся область. Дополнительные атрибуты: nohref alt title

28 Допустимые формы рабочих полей 0,

29 Итоги Механизм адресации на ресурсы в internet в языке HTML реализован в виде ссылок. Гиперссылки могут осуществлять адресацию внутри файла или на внешний ресурс. Гиперссылки на внешний файл бывают абсолютные и относительные. Используется три графических формата: gif, jpg, png. Изображение может быть ссылкой. Карты изображений - сочетание использования одного изображения и нескольких ссылок.