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

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

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

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

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

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

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

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

Лабораторная работа Создание и использование гиперссылок и якорей Откройте папку 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

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

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

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

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

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

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

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

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

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

Формат JPG

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

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

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

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

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

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

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

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

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

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