Вставка изображений в документ

На WEB-страницах могут размещаться графические файлы форматов GIF JPG. Преобразование может выполняться с помощью графических редакторов Editor и Photoshop. На титульном листе целесообразно помещать картинку посвященную теме сайта.

Тег img. Для вставки изображения используется тег img, который в HTML записывается как: < img атрибуты>.

Тег < img scr=“computer.gif”> - файл размещен на локальном компьютере в том же каталоге.

Тег < img scr=“C: \computer\computer.gif”> - в другом каталоге локального компьютера

Тег < img scr=“https://www.server.ru/computer.gif”> - на удаленном сервере в интернете.

Чтобы вывести на экран изображение, в первую очередь нужно указать, в каком файле оно хранится. Имя файла с изображением задается в разметке в качестве значения атрибута src(англ. Source - источник). Обычно разработчики располагают файлы изображений в одном из подкаталогов каталога, хранящего документ. Традиционно этот подкаталог называют images или graphics. В этом случае значение атрибута src должно содержать относительную ссылку на файл, т. е. ту часть маршрута файла изображения, которая начинается с имени подкаталога:

Атрибуты элемента img. Для управления выводом изображения браузером используется следующие атрибуты элемента img.

Src=”x” – как уже упомянуто, атрибут src определяет месторасположение файла с изображением.

Width=”x” – ширина прямоугольника, выделяемого браузера для изображения, в пикслелях.

Height=”x” – высота прямоугольника, выделяемого браузером для изображения, в пикселях.

Border=”x” – атрибут border используется для добавления рамки вокруг изображения. Значение x – целое число. Атрибут border может быть использован только в документах Transitional.

Align=”x” - с помощью этого атрибута изображения можно выровнять на странице по горизонтали и вертикали.

Alt=”описание” – текстовые браузеры вместо изображения выводят на экран значение атрибута alt. Кроме того, описание появляется на экране графических браузеров во время загрузки изображения, которая может быть длительной. Описание появляется также, когда указатель мыши проходит по изображению. Необходимо всегда включать атрибут alt в тег img. Например, < img src=”onua.jpg” alt=”Главный корпус ОНЮА” >.

Приведем фрагмент разметки, в котором указано описание графического объекта, а также ширина и высота изображения:

< src=”images/onua.jpg” alt=”Главный корпус ОНЮА” width=”213” height=”240” >.

Hspace=”x” – ширина свободного пространства слева и справа от изображения в пикселях. Vspace=”x” – ширина свободного пространства над и под изображением в пикселях. Для большей наглядности в следующих примерах присвоим этим атрибутам явно преувеличенные значения:

< img src=”images/onua.jpg” width=”100” height=”113” hspace=”100” vspace=”40” border=”1” align=”right”. Атрибуты hspace и vspace особенно полезны при обтекании изображения текстом. Эффект обтекания создаются с помощью плавающих изображений. Для этого необходимо элемент img c атрибутами включать в пределах тега < p>.

< img src=”images/onua.jpg” width=”200” height=”284 border=”5” align=”right” alt=”Главный корпус ОНЮА” >

Значения left и right, влекущие горизонтальное выравнивание, применяется чаще всего, однако изображения может быть выровнено также по вертикали:

< img src=”images/onua.jpg” width=”200” height=”284 border=”4” align=”top” alt=”Главный корпус ОНЮА”>

Вертикальное выравнивание может выполняться с помощью следующих значений атрибута align (рис. 5):

· Top – выравнивание по верхнему краю;

· Middle –выравнивание по середине;

· Bottom – выравнивание по нижнему краю.

Фоновые изображения. Изображения можно использовать не только как иллюстрации к тексту, но и как фоновые изображения с рисунком. Для этого используется атрибут background, значением которого является имя файла с изображением. Он может применяться в элементе body.

< body background=”back.gif”>

В качестве фонового изображения используется рисунок небольших размеров, например, размером 30Х30 пикселей. Чаще всего это рисунок формата GIF. Необходимо подобрать такое изображение, чтобы между отдельными его элементами не было видно стыков. Тогда оно будет выглядеть более эстетично.Атрибут background можно применять со многими другими тегами. Например, с тегами формирующими таблицу, абзац, элементы списков, гиперссылки и др.

Таблица тегов для работы с графическими изображениями