Изображения и ссылки

Тег img

Это одинарный строчный тег. Располагаться он, как и любой строчный тег, должен в каком-либо контейнере.

Атрибут alt этого тега используется поисковыми системами для поиска по содержимому картинок в Интернете. Даже если вам нечего сказать об изображении, все равно атрибут нужно указывать, присваивая ему пустую строку, иначе валидатор сообщит об ошибке.

Атрибуты width и height указывать нужно обязательно, несмотря на то, что для большинства тегов их задание считается устаревшим и проблемы, за которые они отвечают, решаются с помощью CSS.

Когда браузер открывает веб-страницу, он сначала скачивает сам HTML-документ, потом прикрепленные к нему CSS и JS-файлы и, конечно, изображения. Все это занимает определенное время. И чтобы все это время страница браузера не была пустой, браузер начинает потихоньку выводить на экран веб-страницу. Когда браузер встречает тег img, перед ним встает вопрос - каких же размеров встреченное изображение? Ведь само изображение еще не скачано. Чтобы указать ширину и высоту изображения верстальщики задают размеры изображения с помощью атрибутов width и height.

Указание атрибутов width и height позволяет также зарезервировать пространство и под текст, задаваемый атрибутом alt. Ведь если изображение небольшое (например, значок), а альтернативный текст для него достаточно длинный, то при отображении альтернативного текста может произойти сдвиг ближайших к изображению элементов.

Тег hr

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

Тег a

Это парный строчный тег.

Если вы хотите чтобы при щелчке по ссылке ничего не происходило (в некоторых случаях это необходимо), то в качестве атрибута параметра href можно указать знак #.

Создание якорей

Следующий пример демонстрирует создание якорей.

<!DOCTYPE HTML>

<html>

<head>

<title>Заголовок</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

</head>

<body>

<div id="goto_top"><a href="#goto_bottom">Вниз</a></div>

<div>

<p>Много-много...</p>

<p>Много-много...</p>

<p>...нашего текста</p>

</div>

<div id="goto_bottom"><a href="#goto_top">Вниз</a></div>

</body>

</html>

Таким образом, чтобы создать локальную ссылку в качестве значения атрибута href нужно указать

#идентификатор элемента,

где в качестве идентификатора элемента выступает значение атрибута id какого-либо тега на веб-странице.

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

Ссылка на электронные адреса выглядит так:

<a href=”mailto:onestyle@list.ru”>Нажмите ссылку</a>

При щелчке на такой ссылке откроется окно создания письма, в котором в качестве получателя e-mail будет указан адрес onestyle@list.ru.

После электронного адреса можно указывать и данные:

<a href=”mailto:onestyle@list.ru?ключ1=значение1& ключ2=значение2 “>Нажмите ссылку</a>

В качестве ключа могут выступать следующие ключевые слова:

subject – тема письма;

body – текст письма;

cc – электронный адрес, на который будет отправлена копия письма;

bcc – скрытый электронный адрес, на который будет отправлена копия письма.

Если в значении какого-либо из ключевых слов есть пробелы. их нужно заменить символом %20. В значении можно также указать переводы строк – для этого используется последовательность %0A.

Например:

<a href=”mailto:onestyle@list.ru?subject=новый%20заказ&body=Здравствуйте.%0AЯ%20хотел%20бы %20 заказать%20разработку %20сайта” >Нажмите ссылку</a>

Таким образом, http и mailto – это протоколы, определяющие, какой именно программе браузер должен передать ссылку для открытия ( программа должна быть запущена).