Будет полезно




Графические элементы (картинки, фото, рисунки тд.), о которых мы будем говорить, - важный компонент в создании веб-документов. Сочетание текста и графики делают веб-страницы привлекательными для посетителей. Но все должно быть в меру. Злоупотребление графикой дает результат совершенно противоположный, например, из-за увеличения объема страницы, увеличивается время ее загрузки, а это не совсем приятно. И все таки, прекрасно смотрится веб-страница, где логично и гармонично вписывается рисунок в текст.

Какие же в языке HTML есть инструменты для вставки графических элементов в html-документы, правильного их позиционирования и тд.?

Тег вставки графики в web-документы

Таким инструментом является одноэлементный тэг img. Ряд атрибутов (параметров) тега (тэга) <img> расширяют возможности его применения, но, в основном, это функции позиционирования самого рисунка на странице и размещения текста около него.
 Рассмотрим эти параметры.

src ="url" - обязательный атрибут, указывающий на местонахождение файла с изображением. Формат файла должен быть jpg или gif, т.е. формат, поддерживаемый большинством браузеров. В статье "Гипертекстовые ссылки в веб-документах" мы уже говорили, что URL (Uniform Resource Locator) - местонахождение ресурса (в данном случае, файла с изображением). К примеру, URL

file://website/home/logo_file.jpg указывает, что файл рисунка logo_file.jpg находится на локальной машине в каталоге "website/home". А

http://profitinet.com/images/img_tag1.jpg - файл рисунка img_tag1.jpg находится на данном сайте в каталоге "images".
Используя тег,

<img src="http://profitinet.com/images/img_tag1.jpg">, вставим в следующий абзац рисунок img_tag1.jpg.

Обратите внимание, где размещен этот текст, относительно рисунка, и, что в указанном теге (тэге), используется только один параметр SRC .

alt="описание" необязательный атрибут, он задает описание рисунка на месте образа, при работе браузера в текстовом режиме (просмотр картинок отключен) или если браузер не поддерживает графический режим. Хотя, в первом случае, браузер сразу на месте выводимого рисунка, покажет надпись, определенную параметром ALT, а затем покроет ее изображением.

Где разместить рисунок, как около него будет размещен текст и тп. - важное задание при создании веб-страниц. Эти особенности реализуются в теге значением атрибута align.

align="top"|"middle"|"bottom":

top - текст будет размещаться у верхнего края рисунка;
middle - посередине;
bottom - у нижнего края рисунка.

Как вы заметили, в предыдущем примере, параметр ALIGN отсутствует и текст около рисунка размещен, без отступа, справа внизу, т.е. аналогично использованию align="bottom".

align=left (right) - рисунок прижат к левому (правому) краю документа, а текст будет его огибать, соответственно, справа (слева). Чтобы посмотреть как это выглядит, вставим в начало следующего абзаца тег

<img src="http://profitinet.com/images/img_tag2.jpg" align="left" alt="Пример вставки рисунка в веб-документ с параметром align">.

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

Чтобы это поправить, у тега <img> есть два атрибута, дающие возможность задавать горизонтальный (вертикальный) отступ от рамки рисунка до огибающего его текста:

hspace - определяет величину отступа текста по горизонтали (слева или справа) от рисунка,
vspace - определяет величину отступа текста по вертикали (сверху или снизу) от рисунка.

Также здесь будет уместно сказать, что используя тег (тэг) разрыва строки

<br clear="left"|"right"|"all">,

можно разместить текст не огибая рисунок, а обойдя его. Если рисунок находится слева, после перевода строки, посредством <br>, следующая стока будет размещена ниже рисунка. Для тега <br clear="left"> в какой-то строке текста, следующая строка будет размещена с чистой слева строки окна. Подробно об этом теге и других текстовым тегах языка HTML описано в статье "Теги заголовка, абзаца, преформатирования текста, цитаты, разрыва строки, неразрывной строки".

border="n", параметр, который может задавать рамку рисунка, если принимает положительное значение (n - толщина рамки в пикселях). Цвет рамки определяет сам браузер.

Скажем еще о двух параметрах, задающих высоту и ширину отображаемого рисунка, независимо от его фактического размера, в пикселях или процентах. Причем, если значения параметров задаются в процентах, то размеры выводимого рисунка зависят от разрешения монитора. Это

height="n" - высота рисунка;
width="m" - ширина рисунка.

title="дополнительное описание рисунка", атрибут, роль которого заключается в том, что для некоторых браузеров, при наведении указателя мыши на рисунок, всплывает заданное ему описание.

Пример использования тега вставки рисунка в веб-документ с разными параметрамиДля примера, вставим в начале этого абзаца тег

<img src="http://profitinet.com/images/img_tag3.jpg" align="left" hspace="20" vspace="10" border="2" width="181" height="166" title="А я в интернете" alt="Пример использования тега вставки рисунка в веб-документ с разными параметрами" >.

Какие значения имеют разные атрибуты тега, вы видите сами: рисунок прижат к левому краю документа, вертикальный отступ текста от рисунка - 10 пикселей, горизонтальный отступ текста от рисунка - 20 пикселей, толщина рамки рисунка - 2, ширина рисунка - 181, высота рисунка - 166. Фактический же размер рисунка - 121х106 пикселей. Согласитесь, что размещение рисунка и текста здесь и в предыдущих примерах - не одно и тоже.

В заключение, одно дополнение: теги (тэги) языка HTML допускают вложение одного в другой. Эта замечательная возможность позволяет определить рисунок как гипертекстовую ссылку. Кликнувши по рисунку, вы можете перейти на страницу сайта, указанную в заданной ссылке. Проделаем вышесказанное на практике. Вставим в этот абзац тег

Пример определения рисунка как гиперссылки<a href="href_tag.php" > <img src="http://profitinet.com/images/img_tag4.jpg" border="1" align="left" hspace="20" vspace="10" width="181" height="150" title="Структура веб-документа, основные теги, обязательные теги" alt="Пример определения рисунка как гиперссылки" > </a>,

где рисунок определен как гипертекстовая ссылка на страницу "Структура веб-документа, основные теги, обязательные теги".
Тег горизонтальной линии

И еще не забудем один важный тег (тэг). Для разделения элементов html-документа горизонтальной линией, применяется тег

<hr size="n" width="m" align="left"|"right"|"center" noshade>, где

size - толщина линии в пикселях,
width - ширина линии абсолютная в пикселях или относительная (от ширина окна) в процентах,
align - выравнивание линии в окне (по левому краю, по центру, по правому краю),
noshade - задает линию в виде темной полоски без тени.

Ну вот, пожалуй, для начинающего веб-мастера, и достаточно.

17-08-2015, 07:24

История других клубов
  • Красивые ногти мечта любой дамы
  • Стеклянный фартук для кухни - практичное дизайнерское решение
  • Создаем новую страницу на сайте
  • Аэрография сегодня набирает популярность
  • Выбор обуви для авто






  • Поиск клуба