2. Относительные адреса

В относительных адресах нет ни протокола, ни имени сервера, а путь не начинается со слэша /. Вот примеры относительных адресов:

courses/1

./courses

../../run/1

В относительных адресах могут использоваться специальные символы, аналогичные символам в путях файловых систем: «.» и «..».

Если браузер видит, что у ссылки задан относительный адрес, то он должен преобразовать этот адрес в абсолютный, чтобы знать, куда ведёт ссылка. Для этого браузер использует текущий адрес страницы. Использовать относительные адреса для навигации по сайту не рекомендуется. Однако относительные адреса бывают полезны, например, во внешних CSS-файлах.

3. Ссылка с якорем

Ссылки с якорем обычно используются для создания навигации внутри страницы. Например, оглавления в начале страницы с большой статьёй.

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

Можно задать адрес, состоящий из одного якоря, например:

<a href="#glava1">Глава 1</a>

При щелчке на такую ссылку браузер найдёт на странице элемент с атрибутом id со значением glava1 и прокрутит окно страницы к нему. То есть перезагрузки страницы не произойдёт.

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

4. Всплывающая подсказка

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

<a title="Подсказка" href="#">

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

Подсказки помогают разъяснить назначение непонятных ссылок, а также ссылок-изображений.

10. Вставка изображения

Чтобы добавить на страницу изображение, нужно использовать одиночный тег <img> с атрибутом src, в котором указан адрес картинки. Например:

<img src="logo.png">

Самыми распространёнными форматами изображений в сети являются JPEG и PNG.

1. Размеры изображения

Чтобы управлять шириной или высотой изображения, нужно использовать атрибуты width и height. Пример:

<img width="100" src="..." />

В примере изображению задана ширина 100px. В атрибуте width после цифры нет px. Если задается размер картинки в пикселях, то используются просто цифры, px добавлять не нужно.

Во втором примере изображению задана относительная ширина, 50 процентов:

<img width="50%" src="..." />

Высоту в процентах обычно не задают.

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

Если же задать и ширину, и высоту для картинки:

<img width="100" height="100" src="..." />

То браузер может нарушить пропорции исходного изображения.

2. Альтернативный текст

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

Альтернативный текст изображения задаётся с помощью атрибута alt. Пример:

<img src="cat.png" alt="Кот" />