Главное меню

Изображения на странице

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

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

Теперь мы можем попробовать вставить наше изображение на страницу. Тег, отвечающий за вставку изображения в html-страницу, это тег <img> - сокращение английского слова images - изображение. Где-то между двумя абзацами пропишем тег <img>. Заметим, что тег <img> одинарный, его нет необходимости закрывать.  Просто, там где нужно вставить изображение, пишем тег <img>.

Сам по себе тег <img> ничего не значит. К нему необходимо добавить соответствующие атрибуты. Первый, самый главный атрибут этого тега - это атрибут src - сокращение английского слова source - источник. Этот атрибут указывает на место расположения самого файла изображения. Так как наш файл лежит в той же папке, нам достаточно указать имя изображения. Если бы файл картинки находился в другом месте, нам пришлось бы писать полный путь к нему.

Далее нам необходимо указать ширину и высоту данного изображения. Эти размеры мы увидим при наведении курсора мыши на файл. За ширину отвечает атрибут width, а за высоту - атрибут height. И так, добавляем к тегу <img> атрибуты с соответствующими значениями. Получим строку примерно такого вида:

<img src= "image.jpg" width="127" height="155">

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

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

Пример:

<p align="center"><img src= "image.jpg" width="127" height="155"></p>

 

Если же мы хотим разместить рисунок по правому краю, то выравниваем абзац по правому краю:


<p align="right"><img src= "image.jpg" width="127" height="155"></p>


Правда у самого тега <img> есть атрибут выравнивания align, но он несет немножко другой смысл и сейчас мы с этим разберемся.

Давайте попробуем вставить картинку внутрь абзаца с текстом (так чтобы текст обтекал наше изображение).

Пример:

<p><img src= "image.jpg" width="127" height="155" align="left">текст абзаца...</p>

При добавлении к тегу <img> атрибута align со значением "left" рисунок будет размещен по левому краю страницы, а текст будет обтекать его справа. При значении "right" рисунок будет размещен по правому краю страницы, а текст слева от рисунка.

Вот таким образом работает атрибут align у изображения.

Рассмотрим еще один атрибут, применяемый при вставке изображения. Что бы избежать "прилипания" текста к изображению нам надо прописать величину отступа текста от изображения. В этом нам поможет атрибут hspace - отступ по горизонтали и атрибут vspace - отступ по вертикали.

Пример:

<p><img src= "image.jpg" width="127" height="155" align="left" hspace="15" vspace"10">

текст абзаца...</p>

Значения прописываем в пикселях.

Еще один важный атрибут изображения - атрибут alt: атрибут альтернативного текста. Значения этого атрибута - это описание изображения (что изображено на нашем рисунке). Это необходимо при просмотре пользователем страницы с отключенными изображениями (вместо рисунка он будет видеть текст его описания).

Следующий урок — создание списков