Рамка довкола зображення
В тега <img> є ще один необов'язковий параметр border. З його допомогою можна задати товщину рамки довкола зображення. За умовчанням товщина рамки зображення нульова, тобто рамки немає.
Наприклад, так можна додати до нашої картинки рамку завтовшки 2 піксели:
<img src="img/1.png" border="3">
Ось що покаже нам браузер:
Колір рамки збігається з кольором тексту на сторінці, заданим за допомогою параметра text тега <body> (Див. Урок 6. Властивості сторінки - параметри тега body), за умовчанням це чорний колір.
Але якщо зображення є засланням, то у нього товщина рамки за умовчанням = 1, а його колір збігається з кольором заслань:
І якщо Ви не хочете бачити рамку, примусово привласніть параметру border нульове значення:
<img src="img/1.png" border="0">
Альтернативний текст
Альтернативний текст відображується браузером на місці картинки, поки та не завантажиться. Або замість картинки, якщо вона з якої-небудь причини не відображувалася.
Коли і якщо картинка завантажилася, альтернативний текст показуватиметься при наведенні курсора миші на цю саму картинку.
Аби додати альтернативний текст, використовується параметр alt тега <img>, якому привласнюється строкове значення, обов'язково поміщене в лапки.
<img src="img/1.png" alt="Альтернативный текст">
Можна створити багаторядковий альтернативний текст.
Наведіть курсор на картинку
Для цього досить вставити перенесення рядка в html-документе.
<img src="img/1.png" alt="Альтернативный текст">
Вирівнювання зображення
Для зображення, як і для параграфа, існує поняття вирівнювання відносно тексту і інших зображень на сторінці. Задати типа вирівнювання можна також за допомогою параметра align тега <img>.
Нижче приведена таблиця можливих значень параметра align:
Значення
|
Опис
|
Результат
|
<img src="sample.gif" align="texttop">
|
Верхній кордон зображення вирівнюється по найвищому текстовому елементу поточного рядка.
|
Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.
|
<img src="sample.gif" align="top">
|
Верхній кордон зображення вирівнюється по найвищому елементу поточного рядка.
|
Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.
|
<img src="sample.gif" align="middle">
|
Вирівнювання середини зображення по базовій лінії поточного рядка.
|
Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.
|
<img src="sample.gif" align="absmiddle">
|
Вирівнювання середини зображення по середині поточного рядка.
|
Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.
|
<img src="sample.gif" align="baseline">
|
Вирівнювання зображення по базовій лінії поточного рядка.
|
Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.
|
<img src="sample.gif" align="bottom">
|
Вирівнювання нижнього кордону зображення по довколишньому тексту.
|
Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.
|
<img src="sample.gif" align="left">
|
Вирівнює зображення по лівому краю вікна.
|
Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.
|
<img src="sample.gif" align="right">
|
Вирівнює зображення по правому краю вікна.
|
Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.
|
Параметри texttop, top, middle, absmiddle, baseline, bottom задають вирівнювання зображення по вертикалі. А параметри left і right дають браузеру зрозуміти, з якого боку текст повинен обтікати зображення.