Тэг IMG и HR

Тэг <IMG>

Тег <IMG> используется для вставки изображений в HTML-страницу. Он имеет два обязательных атрибута: src и alt. Изображения в интернете играют одну из ключевых ролей. Они активно применяются в оформлении сайтов, в ссылках (вставкой их в тег <A>), наглядно дополняют текстовую информацию и т.д. Если тег <IMG> используется внутри ссылки или задает карту изображений, то вокруг самого изображения некоторые браузеры отображают рамку, которую можно убрать при помощи атрибута border.

Важным моментом при включении изображения в страницу является его размер (вес) в килобайтах, а точнее соотношение вес-качество. Естественно, чем меньше вес изображений – тем быстрее загрузится страница. В основном в сети используются графические форматы JPEG, GIF и PNG, которые вполне отвечают данным требованиям.

Также, для ускорения загрузки страниц рекомендуется устанавливать атрибуты width и height, тега <IMG>. Тогда браузер не будет ожидать полной загрузки изображения, он просто выделит под него место и будет загружать страницу дальше, а его подгрузит потом. К тому же, если одно изображение используется на странице несколько раз (значение атрибута src одинаковое), то браузер загружает его с сервера только один раз, а потом берет из кэш-памяти.

Атрибуты

  • src – Обязательный атрибут. Адрес местонахождения изображения.

Способы указания местонахождения файла:

  1. Абсолютный: SRC=”D:/Папка1/Раздел1/Имя.jpg”

Ссылка на изображение привязана к конкретному месту диска. При переносе файлов она станет “висячей”. Поэтому избегайте указания абсолютного адреса.

  1. Относительный: SRC=”Папка1/Раздел1/Имя.jpg”SRC=”nanKa 1/Раздел l/llfll.jpg”

Ссылка привязана к конкретной папке. Поэтому перемещение папки более высокого уровня не повлияет на ссылку. Если же надо перейти на уровень выше, то использовать “../”. Если на 2 уровня – то “../../” и т.д.
Например: “../../Папка 00/Папка 01/Папка2/Имя.jpg”

  1. URL-адрес: SRC=”http://www.mysite.com/Папка1/Раздел1/Имя.jpg“
  • alt = “текст”– Обязательный атрибут. Текст, отображаемый на странице вместо картинки, если в браузере отключен показ изображений, а также пока они грузятся. Кроме этого, некоторые старые версии браузеров выводят этот текст в виде «всплывающей» подсказки, при наведении курсора мыши на изображение, если не установлен атрибут title.
  • align = “Left | Right | Top | Middle | Bottom ” – Положение изображения относительно окружающего текста.
    Выравнивание картинки по ширине окна браузера задается предшествующим тегом Р или DIV
  • border = “N” – Толщина рамки вокруг изображения.
  • height = “N | N%” – Переопределяет высоту изображения.
  • width = “N | N%” – Переопределяет ширину изображения.
  • hspace = “N” – Размер боковых полей изображения от его краев до окружающего контекста.
  • vspace = “N” – Размер верхних и нижних полей изображения от его краев до окружающего контекста.
  • title = “текст” – Текст «всплывающей» подсказки при наведении курсора мыши на изображение.
  • ismap – Позволяет использовать серверные карты изображений.
  • usemap – Позволяет использовать клиентские карты изображений.

Тип тэга

Непарный, пустой

Синтаксис

<img src=”URL” alt=”текст”>

Результат. Применение атрибута align.

img

Тэг <HR>

Тег <HR> используется для отображения горизонтальной разделительной линии. Так как этот тег является блочным – он создает перенос строк перед собой и после себя, а также небольшие поля (margin) сверху и снизу. Внешний вид линии и размер полей зависит от типа браузера, как правило они отображают ее с рамкой, которая создает эффект трехмерности. А Firefox еще и скругляет концы.

Атрибуты

Личные атрибуты:

  • align – Устанавливает горизонтальное положение линии относительно окружающего контекста.
  • color – Задает цвет линии.
  • noshade – Линия становится «плоской», а не объемной.
  • size – Высота линии.
  • width – Ширина линии.

Тип тэга

Непарный, пустой

Синтаксис

<hr>

Пример HTML: применение тега HR

<!DOCTYPE HTML5>

<html>

<head>

<title> Применение тега HR</title>

</head>

<body>

<h3>«Битые» ссылки.</h3>

<hr>

<p>Одной из часто встречающихся ошибок начинающих сайтостроителей     является наличие на сайте «битых» ссылок. То есть ссылок, которые     никуда не ведут. Это может случиться из-за ошибки в адресе или из-за     того, что человек решил переместить страницу в другую папку и забыл     удалить/переписать ссылку и т.д.</p>

</body>

</html>

Без комментариев.

Добавить комментарий