Это урок о том, как вставить картинку в HTML, как её оформить, как сделать обтекание картинки текстом и т.д. Ведь известно, что изображения делают сайт более привлекательным и отличным от других ресурсов, поэтому умение использовать тег «IMG» и его атрибуты весьма пригодится в современном Интернете. Но, главное тут — чувство меры!
Переизбыток графики вызовет утяжеление html-страницы и, соответственно, увеличит время её загрузки. Кроме того, наличие большого числа изображений будет отвлекать посетителей от главного содержимого сайта (если, конечно, графика не является главным содержимым сайта). Так что, соблюдай меру и используй картинки в HTML только там, где это нужно. И будет тебе счастье!
В уроке про атрибуты тега body я уже рассказывал о том, как можно использовать картинки в качестве фона html-документа. Сейчас же поговорим о том, как графика используется в «верхнем слое» html-страницы.
§ 1. Как вставить картинку
Для вставки картинок в HTML используется тег IMG с обязательным атрибутом SRC. Этот атрибут указывает браузеру путь к файлу изображения. Т.е. для вставки картинки с названием logo.jpg в определенное место страницы (при условии, что и страница, и картинка расположены в одной папке (каталоге)) нужно в этом месте вставить следующий html-код:
Если картинка и страница расположены в разных каталогах (папках), то нужно указать путь к изображению относительностраницы. Например, если html-страница лежит в каталоге (папке) site, в этом же каталоге (папке) расположен подкаталог (папка) images, в котором и находится наша картинка logo.jpg, то для её вставки нужно написать так:
Помимо обязательного атрибута src у тега IMG есть еще несколько необязательных атрибутов. Рассмотрим их подробнее.
§ 2. Указание размеров картинки
Начнём с атрибутов, которые позволяют задать размеры картинки (точнее, застолбить место под эти размеры на страницы). Вот они:
- width — ширина картинки в пикселах или процентах;
- height — высота картинки в пикселах или процентах.
Если используются эти атрибуты, то браузер сначала выделит место под графику, подготовит макет документа, отобразит текст и только затем загрузит изображение. При этом он поместит картинку в прямоугольник выделенного размера, даже если реальные ширина и высота картинки больше (сожмет) или меньше (растянет). В случае, когда эти атрибуты не используются, браузер будет грузить картинку сразу, а вывод идущих за ней текста и остальных элементов задержится.
Ширину и высоту изображений можно указывать как в пикселах (при этом размер картинки будет постоянным вне зависимости от разрешения экрана), так и в процентах (размер картинки будет зависить от разрешения экрана пользователя). Например:
или
§ 3. Альтернативный текст
В случае, если пользователь в настройках браузера отключил показ изображений, то можно вместо картинки вывести альтернативный текст, который бы объяснил, что за графика здесь должна быть. Достигается это путем применения атрибута alt:
В этом случае браузер зарезервирует место на странице под изображение, но вместо самой картинки покажет текст, который ты напишешь в значении атрибута alt (повторю, если пользователь отключил показ графики, если же нет, то картинка скроет собой альтернативный текст).
§ 4. Выравнивание картинки
С помощью уже знакомого тебе атрибута align можно управлять выравниванием картинок относительно других элементов html-страницы. У атрибута align есть несколько значений, но нас больше всего на данный момент интересуют два:
- left — изображение располагается у левого края страницы, а текст обтекает картинку справа;
- right — изображение располагается у правого края страницы, а текст и другие элементы обтекают картинку слева.
Например, HTML-код
браузер покажет так
Это мой аватар на форумах и в различных сервисах А этот HTML-код
будет выглядеть вот так
Это мой аватар на форумах и в различных сервисах Для прекращения обтекания картинки текстом можно использовать тег BR (знакомый нам из прошлого раздела про форматирование текста в html). У тега BR есть атрибут clear, который может принимать три значения:
- left — прекращение обтекания текстом картинок, выровненных по левому краю;
- right — прекращение обтекания текстом картинок, выровненных по правому краю;
- all — прекращение обтекание текстом картинок, выровненных и по левому, и по правому краю.
§ 5. Создание отступов вокруг картинки
По-умолчанию, картинки встраиваются в страницу почти вплотную к тексту и другим элементам. Если такое отображение не устраивает, то можно задать отступы вокруг картинки. Делается это с помощью следующих атрибутов тега IMG:
- vspace — создает верхний и нижний отступы;
- hspace — создает боковые отступы (слева и справа).
Значения этих атрибутов указывается в пикселах. Например, если мы немного дополним предыдущий пример:
, то получим следующее
Это мой аватар на форумах и в различных сервисахСравни это с тем, как вся «композиция» выглядела раньше (выше).
§ 6. Рамка вокруг картинки
Вокруг картинок можно создать чёрную рамку с помощью атрибута border. Значение этого атрибута указывается в пикселах и определяет толщину рамки. Например, HTML-код
в браузере выглядит так
§ 7. Заключение
На этом раздел о тегах HTML, которые нужны для вставки картинок на страницы сайта можно считать завершенным. В следующем разделе поговорим о том, как создаются ссылки, и о том, как сделать ссылку-картинку в HTML.