В этом уроке мы с вами будем учиться вставлять изображение в HTML документ, для этого есть специальный тег <img> (англ. Image) и это одинарный тег. Кстати подумайте, почему все известные нам теги парные, а тег <img> одинарный? Просто картинка не может в одном месте начаться, а через два абзаца закончиться, поэтому логично, что тег <img> одинарный. Тег <img> вставляется в определенное место и это конкретная картинка.
Подготовка
Прежде чем вставлять картинку в наш HTML документ, давайте скопируем картинку. Мой HTML документ хранится в папке HTML которую я создал на диске С. При этом я советую хранить все картинки не вместе с HTML документом, а в отдельной папке. Поэтому в папке HTML создадим еще одну папку, назовем ее images и уже в нее скопируем вот эту картинку:
Вставка изображения
Теперь у нас есть индексный документ, и папка с картинками в которой лежит один единственный файл alarm.jpg. Давайте его вставим сразу после заголовка <h1> перед первым параграфом. Пишем с новой строки тег <img>, который в свою очередь браузеру еще ничего не говорит, мы должны обязательно указать некоторые атрибуты и самый главный из них – это атрибут src (англ. Source, т.е. источник). В атрибуте src мы должны указать источник нашей картинки, т.е. где она находится. В нашем случае она находится внутри папки images и называется alarm.jpg (обратите внимание, что мы пишем относительно нашего документа index.html).
Определяем размеры
Это еще не все. Желательно указать ширину и высоту этой картинки, потому что браузер должен знать какие размеры отвести под это изображение. Если же мы не укажем то он, конечно, отобразит ее правильно, но это займет у него чуть больше времени, потому что ему сначала нужно будет загрузить эту картинку, а уже потом решать какое место ей выделить. Чтобы узнать размеры картинки нужно кликнуть по ней правой кнопкой мыши и выбрать пункт «Свойства». Здесь во вкладке «Подробно» видим, что ширина у него 307 пикселей, а высота 450.
Поэтому дальше мы указываем два атрибута: ширина – width и высота – height.
Указываем альтернативный текст
И при этом есть еще один атрибут, который желательно указывать – это атрибут alt, он предназначен для тех, у кого в браузере картинки отключены, т.е. если картинка будет отключены, вместо нее будет отображаться текст, который мы введем, в нашем случае это – будильник.
Вот эти четыре атрибута, которые желательно указывать для каждой картинки. Сохраняем, проверяем.
Делаем обтекание
Вот у нас этот будильник появился в том месте, где и должен был быть. Как вы заметили, хотя картинка сама по себе всего 307 пикселей в ширину все остальное горизонтальное пространство остается не занятым, т.е. браузер отводит всю строку под картинку, хотя сама картинка всю строку не занимает. Очень часто нам нужно чтобы текст, который идет после картинки обтекал ее. Такая возможность есть, и мы сейчас посмотрим, как она реализуется.
Реализуется она с помощью уже знакомого нам атрибута align, и здесь мы должны указать, как должна быть выровнена картинка, либо по правому краю экрана (align="right") и текст ее будет обтекать слева, либо по левому (align="left"), а текст ее будет обтекать справа. В нашем случае align="right" смотрится лучше, поэтому оставим так.
Регулируем отступы
Здесь у нас возникает еще один вопрос: как мы можем регулировать отступы, которые даются от изображения до текста? Как мы можем увеличить или уменьшить этот отступ? Это также можно сделать, для этого есть специальные атрибуты, хотя они опять же устарели и лучше это делать через CSS, но мы все равно эти атрибуты пройдем, потому что они могут вам встретиться в каких-то старых документах, которые вам придется править, поэтому знать их вам все равно нужно. Первый атрибут – это hspace (англ. horizontal space, т.е. место по горизонтали) и мы указываем, что ближайший элемент, который будет соприкасаться с изображением должен отстоять от него на 30 пикселей.
Обновляем и видим, что у нас появился справа отступ по горизонтали и тоже самое до ближайшего текста, можно сделать еще больше. Попробуем поставить 60 пикселей. Опять же скажу, что сейчас все это делается через CSS и когда мы до этого курса доберемся вы узнаете, как это делается. Аналогичный этому атрибуту, только вертикальный – vspace (англ. vertical space) и можем указать 20 пикселей.
Вот видите, у нас изображение немного отступило вниз, потому что взяло отступ 20 пикселей, и если бы у нас снизу был бы какой-нибудь текст, то он тоже взял бы отступ в 20 пикселей. Вот таким образом вставляются изображения в HTML документы и такие атрибуты у них существуют. Как видно их достаточно много, но опять же скажу что высоту, ширину, выравнивание и отступы можно будет задавать через CSS. На этом мы здесь остановимся, увидимся в следующем уроке.