Учебник HTML

Вставка горизонтальных линий

Отделить один раздел веб-страницы от другого можно с помощью горизонтальной линии. Она создается посредством тега <НR>, который обеспечивает перемещение вниз на одну строку, вставку горизонтальной линии и переход в начало следующего раздела с новой строки.

Параметры линии задаются с помощью атрибутов данного тега. Атрибут WIDTH определяет длину линии в процентах от ширины окна браузера, где отображается веб-страница. С помощью атрибута SIZE можно указать толщину линии в пикселах. Атрибут ALIGN предназначен для выравнивания линии по левому или по правому краю либо по центру. Тег, который вы видите ниже, обеспечивает отображение отцентрированной линии толщиной в два пиксела, которая занимает 80 % ширины окна браузера:

<HR SIZE="2" WIDTH="80%" ALIGN="CENTER">

Добавление изображений

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

Где его взять? Да где угодно. Можно использовать готовые иллюстрации, создать собственные с помощью графического редактора, загрузить снимки, выполненные цифровой камерой, либо отсканировать какие-то понравившиеся рисунки Или фотографии. Существует также много сайтов, с которых можно бесплатно загрузить различного рода изображения.

Чтобы добавить рисунок, нужно в том месте тела веб-страницы, где он должен появиться, ввести тег <IMG> (image — изображение). Для указания имени файла, содержащего рисунок, применяется атрибут SRC (source — источник), например:

<IMG SRC="picture.gif">

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

Абсолютный и относительный пути к файлу

При использовании абсолютного пути имя файла предваряется указанием полного пути к файлу. После перемещения файлов или изменения имен каталогов (папок) вам придется отредактировать каждый тег <IMG> в каждом НТМL-файле, который содержит абсолютный путь. По этой причине данный способ указания файлов считается не совсем удобным.

Относительный путь определяет путь к файлу изображения относительно местонахождения НТМL-файла. Почему рекомендуется применять именно этот способ именования графических файлов, вы сейчас поймете. Если файл изображения хранится в том же каталоге, что и НТМL-файл, в теге <IMG> можно использовать только имя файла изображения, без указания пути. А если файл изображения размещается в подкаталоге каталога, где находится НТМL-файл, в тег <IMG> нужно включить имя этого подкаталога:
<IMG SRC="images/picture.gif">>

Когда файл изображения хранится в каталоге одним уровнем выше НТМL-файла, имя пути должно содержать две точки (..):
<IMG SRC="../picture.gif">

Некоторые разработчики хранят часто используемые графические файлы в каталоге с названием images или pictures и во всех тегах <IMG> всех страниц веб-узла задают ссылку на один набор графических файлов.

Атрибуты изображения

Позиционировать изображение и управлять размещением текста вокруг него можно с помощью следующих атрибутов тега <IMG>.

• HEIGHT и WIDTH. Управляют размерами (в пикселах) области, в которой изображение появится на веб-странице. Эти атрибуты являются необязательными; используйте их лишь в том случае, если вас по какой-либо причине не устраивают размеры области, где рисунок отображается по умолчанию. Тогда веб-браузер приведет высоту и ширину изображения к указанным размерам. Задавая атрибуты HEIGHT и WIDTH, обязательно сохраняйте пропорции оригинального изображения, иначе оно будет выглядеть вытянутым по горизонтали или по вертикали. Приведенный ниже тег <IMG> будет отображать рисунок из файла picture.gif в виде прямоугольника со сторонами 30 и 50 пикселов независимо от реального размера хранимого изображения:
  

  <IMG SRC="picture.gif" HEIGHT="30" WIDTH="50">

  На веб-страницах лучше использовать изображения небольших (но и не слишком маленьких) размеров, поскольку таковые быстрее загружаются. Размер файла со слишком большим изображением нужно уменьшить с помощью графической программы. Не рассчитывайте только на применение атрибутов HEIGHT и WIDTH, поскольку они не влияют на размер файла (а следовательно, не сокращают время его загрузки). Они лишь модифицируют способ отображения файла в браузере.
• ALIGN. Управляет размещением текста, обтекающего изображение. Данный атрибут имеет пять возможных значений:
  • ТОР — располагает первую строку текста на одном уровне с верхним краем изображения;
  • MIDDLE — выравнивает фрагмент текста относительно середины изображения по вертикали;
  • ВОТТОМ — выравнивает последнюю строку текста по нижнему краю изображения (атрибуты ТОР, MIDDLE и ВОТТОМ удобно использовать при условии, что имеется одна строка текста, которую нужно поместить рядом с изображением);
  • LEFT — размещает изображение в левой части страницы и выравнивает абзац по правому краю изображения;
  • RIGHT — размещает изображение в правой части страницы и выравнивает абзац по левому краю изображения.
  Атрибуты LEFT и RIGHT обычно применяются при необходимости разместить текст рядом с изображением. Так, следующий тег позволяет отобразить рисунок в левой части веб-страницы и выровнять обтекающий его текст по правому краю:
  

  <IMG SRC="picture.gif" ALIGN="LEFT">

• HSPACE и VSPACE. Определяют ширину незаполненного пространства вокруг изображения. Оба значения должны быть указаны в пикселах. Атрибут HSPACE устанавливает ширину пространства слева и справа от изображения; он позволяет управлять расстоянием от текста, выровненного по одному из краев изображения, и самим изображением. Атрибут VSPACE задает ширину пространства, остающегося над и под изображением. При использовании тега, приведенного ниже, ширина незаполненного пространства слева и справа от рисунка составит 25 пикселов, а сверху и снизу - 10:
  

  <IMG SRC="picture.gif" HSPACE="25" VSPACE="10">

• BORDER. Определяет, должна ли быть рамка вокруг изображения, и задает ее ширину. Ширина рамки измеряется в пикселах. Следующий тег позволяет вставить изображение с рамкой, ширина которой составляет три пиксела (сплошная линия):
  

  <IMG SRC="picture.gif" BORDER="3">

• ALT. Содержит текст, который появляется во время загрузки рисунка, отображается в браузере, не поддерживающем графику, либо появляется на экране, если пользователь предпочитает не загружать рисунок при просмотре веб-страниц. Атрибут ALT рекомендуется включать во все теги изображений, чтобы веб-узел был доступен для пользователей с дефектами зрения, которые для чтения текста на экране применяют специальное программное обеспечение. Например:
  

  <IMG SRC="picture.gif" ALT="Обложка лучшей книги этой недели">
  

Обратите внимание, что перечисленные атрибуты применять не обязательно. Необходимым является только атрибут SRC, определяющий имя файла. Все атрибуты размещаются в одном теге, <IMG>, и разделяются пробелами. Если вы решите использовать все перечисленные выше атрибуты, тег <IMG> может выглядеть следующим образом:

<IMG SRC="picture.gif" HEIGHT="30" WIDTH="50" ALIGN="LEFT" HSPACE="25"
VSPACE="10" BORDER="3" ALT="Обложка лучшей книги этой недели">

Кроме описанного выше существуют и другие способы размещения графических изображений. В частности их можно отображать в таблице, включив тег <IMG> в тег <ТD>, например так:

<ТD><IMG SRC="picture.gif" ALT="Обложка лучшей книги этой недели"></ТD>

Изображение может быть отцентрировано, если заключить тег <IMG> между тегами <CENTER> и </CENTER>:

<CENTER><IMG SRC="picture.gif"
ALT="Обложка лучшей книги этой недели"></CENTER>

Кроме того, изображение может служить ссылкой, которая переадресует посетителя на новую страницу или на другой узел. Подробнее об этом будет рассказано в следующем разделе.