Изображения
Изображения в HTML давно завоевали заслуженную популярность среди создателей сайтов. Они активно используются в дизайне сайтов, для наглядного дополнения текстовой информации, для оформления ссылок и Бог знает для чего еще.
Важным составляющим любого изображения является его размер (объем, вес) в килобайтах, ведь чем он больше, тем дольше будет загружаться HTML-страница. Поэтому в интернете существует три самых распространенных формата, которые содержат оптимальное соотношение размер—качество изображения — это GIF, JPG (JPEG) и PNG.
В следующих уроках вы научитесь вставлять изображения в HTML-страницы и использовать их по своему усмотрению. Чтобы не искать нужные для обучения картинки — вы можете скачать их по этой ссылке.
Тег <IMG> или как вставить изображение в HTML?
Для вставки изображения в HTML страницу используется тег <IMG>. Это самый обычный встроенный (inline, уровня строки) элемент, то есть он не создает впереди и после себя переводы строк в начало. Но вот содержимого у него не может быть, так как <IMG> не имеет закрывающего тега и является пустым.
У тега <IMG> есть два обязательных атрибута — это src, который указывает путь (URL) к изображению и alt, выводящий альтернативный текст, когда в браузере отключен показ изображений. Если src вы вряд ли забудете указать, ведь без него изображение просто-напросто не загрузится, то про alt очень часто забывают даже опытные вебмастеры. А все потому, что все браузеры спокойно воспринимают отсутствие alt, не считая это ошибкой. Ну что же, я постараюсь сделать так, чтобы вы не забыли о нем, даже разбуди вас ночью.
Атрибут src использует абсолютно такие же значения адресов, что и атрибут href тега <A>, которые мы рассматривали в уроке Ссылки и их разновидности, только ведут они к изображениям. Ну и, естественно, можно указывать как абсолютные, так и относительные адреса.
Пример вставки изображений в HTML-страницу
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Вставка изображений в HTML</title>
</head>
<body>
<div>
<img src="image/straus.gif" alt="Бегущий страус">
<img src="image/orel.gif" alt="Летящая птица">
Такие вот разные птицы.
</div>
</body>
</html>Результат в браузере
Такие вот разные птицы.Если отключите в своем браузере показ изображений, то увидите альтернативный текст атрибута alt.
Изменение размеров изображений в HTML
По умолчанию все браузеры показывают изображения в их натуральные размеры. Но при помощи атрибутов width и height тега <IMG> можно изменить их высоту и ширину. Значения указываются в числах, которые означают размеры в пикселях (ставить в конце чисел буквы px не нужно) или процентах, в этом случае в конце надо поставить знак %.
Пример изменения размеров изображений
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение размеров изображений</title>
</head>
<body>
<div>
<img src="image/orel.gif" width="50%" height="60" alt="Летящая птица">
</div>
</body>
</html>Результат в браузере
Не следует злоупотреблять изменением размеров, так как при визуальном уменьшении изображений, их объем в килобайтах не уменьшается, соответственно они загружаются столько же времени. А при увеличении изображений могут появиться размытости и другие искажения.
Тем не менее, лучше всегда указывать размеры изображений, даже если вы их не меняете. В этом случае браузеры не будут ожидать их полной загрузки, а выделят под них место и пойдут загружать страницу дальше, а изображения загрузят в конце. Это позволяет пользователям не сидеть в томительном ожидании и быстрее начать пользоваться сайтом. Кроме этого, если браузеры сразу будут знать размеры, то при загрузке страницы им не придется по ходу дела подстраиваться под появляющиеся картинки, что поможет избежать ненужных скачков и дерганий окружающих их HTML-элементов.
Ребята, еще раз хочу обратить ваше внимание на то, что только в размерах атрибута style указываются единицы измерения пиксели и пункты (px, pt), а все потому, что он относится к CSS. У всех (абсолютно всех) остальных атрибутов HTML, которые мы с вами изучили и еще изучим, пиксельный размер пишется просто цифрами, без указания единиц измерения. И только процентные размеры и там и там указываются со знаком %. Кстати, ошибки связанные с этой путаницей занимают одно из первых мест у новичков, так что перечитайте это примечание еще раз и будьте внимательны.
Выравнивание изображений
В старых версиях HTML для выравнивания изображений у тега <IMG> имелся уже известный вам атрибут align, но в современном HTML его нет, поэтому будем использовать тоже уже знакомый вам, и, надеюсь, ставший родным style.
Вы уже сталкивались с выравниванием в уроке о Выравнивании содержимого тегов, но как вы знаете, его нельзя применять к встроенным тегам, таким, как <IMG>, да и никакого эффекта это не даст. Поэтому и значения атрибута style будут совершенно другие, предназначенные для выравнивания не содержимого, а HTML-элемента целиком:
Пример выравнивания изображения по левому краю.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Выравнивание изображений</title>
</head>
<body>
<p>Первый параграф.</p>
<p>Текст перед картинкой.
<img src="image/orel.gif" style="float:left" width="100" height="50" alt="Летящая птица">
После картинки.
</p>
<p>Последний параграф.</p>
</body>
</html>Результат в браузере
Первый параграф.
Текст перед картинкой. После картинки.
Последний параграф.
Как видите, первый параграф-блок выравнивание не затронуло, зато весь текст второго параграфа и третьего параграфа обтекли картинку справа.
Хорошо, а если нам не надо, чтобы нижестоящие блоки обтекали изображение? В этом случае вам поможет еще одно значение атрибута style, которое вы можете применить внутри любого блочного тега.
style="clear:left" — прерывает обтекание изображений выровненных по левой стороне.
style="clear:right" — прерывает обтекание изображений выровненных по правой стороне.
style="clear:both" — прерывает обтекание изображений выровненных по обеим сторонам.
Пример прерывания обтекания изображения
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Прерывание обтекания изображений</title>
</head>
<body>
<p>Первый параграф.</p>
<p>Текст перед картинкой.
<img src="image/orel.gif" style="float:left" width="100" height="50" alt="Летящая птица">
После картинки.
</p>
<p style="clear:left">Последний параграф.</p>
</body>
</html>Результат в браузере
Первый параграф.
Текст перед картинкой. После картинки.
Последний параграф.
Создание внешних отступов у изображений
Я думаю, вы обратили внимание, что изображения всегда вплотную прижимаются к окружающим элементам. Будь в предыдущем примере не тег параграфа а, например, блок <DIV>, то рисунок вообще со всех сторон было бы прижат. Так вот, в старом HTML у тега <IMG> были два атрибута, hspace и vspace, которые изменяли размер внешних полей (отступов) между изображением и окружающими элементами, но теперь их нет и неизвестно, сколько еще времени браузеры будут их поддерживать. Поэтому вновь применяем атрибут style, общий синтаксис такой:
style="margin:размер" — Устанавливает одинаковый размер полей для всех сторон изображения.
style="margin:сверху справа снизу слева" — Размеры полей для каждой стороны, пишутся через пробел по часовой стрелке.
В качестве значений можете указывать известные вам единицы измерения: пункты (pt), пиксели (px), проценты (%), чаще всего применяют пиксели. Кстати, если каким-то из значений у вас является ноль (0), то единицы измерения можно не ставить, а можно и ставить — в данном случае без разницы.
Пример изменения полей вокруг изображений
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение размеров внешних полей</title>
</head>
<body>
<p>Текст перед картинкой.
<img src="image/orel.gif" style="margin:0 20px 0 40px" width="100" height="50" alt="Летящая птица">
После картинки.
</p>
</body>
</html>Результат в браузере
Текст перед картинкой. После картинки.
Всплывающий текст-подсказка у изображений в HTML
Как и у многих других HTML-тегов, у тега <IMG> есть атрибут title, выводящий текстовую подсказку при наведении курсора мыши на изображение.
Примера не будет, так как тут все элементарно. Главное не путайте title и alt. Содержимое alt отображается, если в браузере отключен показ картинок и, в отличие от title, он является обязательным атрибутом.
Иногда у меня возникает чувство, что я пишу учебник по CSS, а не по HTML — так часто мы используем style. Но что делать, если столько тегов или их атрибутов стали устаревшими в современном HTML. Ну вам-то это только на пользу — не будете, как я, переучиваться.
Домашнее задание.
- В папке, где находится ваша страничка, создайте подпапку с названием image и пусть все ваши рабочие изображения хранятся там.
- Создайте первый параграф и укажите там одно изображение, но три раза: в натуральный размер, в два раза больше, увеличьте только ширину.
- Во втором параграфе сделайте рисунок среди текста, пусть его боковые поля будут по 30px и имеется всплывающая подсказка.
- Ниже создайте изображение и пусть его левое и нижнее поля будут равны 20px
- Еще ниже напишите два параграфа и сделайте так, чтобы текст первого обтекал указанное выше изображение слева.
- В конце сделайте так, чтобы один из рисунков примеров данного урока загрузился на вашу страницу прямо с сайта Сеодон. Как? Подумайте.
| Якоря - создаем закладки | ← Содержание → | Изображения для фонов |