Изображения в HTML
Для вставки изображений в HTML применяются два основных формата GIF и JPEG. Формат GIF может хранить внутри себя простейшую анимацию ( динамические баннеры ), JPEG отлично подходит для изображений с большим количеством цветов, например фотографий. Третьим форматом для web-графики является формат PNG, но он не получил широкого применения в web-дизайне. Любое изображение в форматах GIF или JPEG вставляется на web-страницу при помощи тега < img >, закрывающего тега нет.
Содержание:
- Атрибут SRC.
- Выравнивание изображений.
- Задаем отступы. Атрибуты HSPACE и VSPACE.
- Задаем рамку. Атрибут BORDER.
- Изображения – ссылки.
- Альтернативный текст. Атрибут ALT.
- Задаем размер. Атрибуты WIDTH и HEIGHT.
- Заключение.
Атрибут SRC
Посредством атрибута src задается адрес (URL) файла с изображением, т.е. браузер находит нужное изображение в каталоге сайта по пути (адресу URL), прописанному в этом атрибуте. Для удобства все изображения сайта находятся в отдельной папке, обычно с именем image. Для примера возьми любое изображение, лучше небольшого формата, и сохрани в созданной папке image, с именем primer.jpg. Далее мы будем обращаться к ней для обучения.
Ну что, попробуем вставить картинку на страницу? Пишем код (путь – URL, прописывается в зависимости от местонахождения папки с изображениями):
< img src="image/primer.jpg">
Браузер отобразит:
Теперь попробуем вставить изображение с текстом:
<img src="image/primer.jpg">
Получилось:
Текст в который просто вставлена картинка. Обтекание не задано.
По умолчанию, если не задано никаких параметров обтекания, рисунок располагается на странице как объект строки (слово, буква и т.д.). Высота строки при этом увеличивается до размеров рисунка, а текст не распределяется вокруг изображения. Обтекание задается с выравниванием изображения относительно правого или левого края страницы. После чего рисунок вставляется на нужное место, а текст располагается с другой стороны.
Выравнивание изображений
Для выравнивания изображений применяется уже знакомый тебе атрибут align. Способов выравнивания существует несколько, они делятся на горизонтальное и вертикальное.
Горизонтальное выравнивание и соответственно обтекание задается так же уже знакомыми тебе значениями left, center и right. Посмотрим на примере кода:
<img src="image/primer.jpg" align="left">
Браузет отобразит код так:
Текст в который просто вставлена картинка. Задано расположение изображения у левого края страницы, текст обтекает справа.
Пример кода с расположением у правого края:
<img src="image/primer.jpg" align="right">
В браузере будет выглядеть так:
Текст в который просто вставлена картинка. Задано расположение изображения у правого края страницы, текст обтекает слева.
С вертикальным выравниванием ты еще не знаком, сейчас рассмотрим и его. Задается оно так же тремя значениями – вертикальное выравнивание по центру middle, по верху top и по низу bottom базовой линии (линией, на которой расположен текст текущей строки).
Смотрим пример:
<img src="image/primer.jpg" align="middle">
Текст в который просто вставлена картинка. Задано расположение по центру.
Задаем отступы. Атрибуты HSPACE и VSPACE
Кроме способа выравнивания и обтекания текстом, для изображения можно задать поля отступов, которые не будут заняты текстом при обтекании. Задаются отступы двумя атрибутами: vspace – верхний и нижний, hspace – левый и правый. Значения задаются в пикселях. Например задаем выравнивание для изображения по левому краю и отступы слева и справа – 35px, сверху и снизу – 25px, пишем код:
<img src="image/primer.jpg" align="left" hspace="35" vspace="25">
Браузер покажет:
Текст в который просто вставлена картинка. Задано расположение изображения у левого края страницы, текст обтекает справа.
Задаем рамку. Атрибут BORDER
В HTML можно задать рамку, определенной толщины, вокруг изображения. Делается это с помощью атрибута border, значение которого задается в пикселях. Единственный минус в том, что цвет рамки будет черным, а изменить его средствами HTML никак нельзя. Но можно заранее на изображении, в графическом редакторе, выполнить рамку произвольного цвета. Если этот вариант неподходит, тогда помогут каскадные таблицы стилей CSS. Посмотрим пример написания кода вставки изображения с рамкой:
<img src="image/primer.jpg" align="middle" border="2">
На странице отобразится:
Текст в который просто вставлена картинка. Расположение по центру.
Изображения – ссылки
Изображения могут быть не только приемом web-дизайна, но и гиперссылками на другие web-страницы. Делается это точно так же, как с текстом, при помощи того самого тега < a >. В тег < a > просто включается тег нужного изображения и вперед, по просторам гиперпространства… Лучше всего к такой ссылке (как и к любой гиперссылке) добавить тег title, так как это дает дополнительную информацию да и поисковые системы одобряют. Ну что, пишем код:
< a href="https://www.smartincom.ru/" title="Логотип сайта SMARTINCOM.RU">< img src="image/logo.jpg" border="0">< /a >
В браузере:
Альтернативный текст. Атрибут ALT
Для чего же задается альтернативный текст? Давай по-порядку. В каждом браузере есть функция отключения изображений, поэтому пользователь, использующий такую функцию, может видеть по описанию указанному в теге alt, что представляет собой изображение. Может быть это на сегодняшний день и неактуально, так как предпочтение отдается безлимитным тарифам, но все же это считается правилом хорошего тона. Смотрим пример кода:
<img src="image/logo.jpg" border="0" title="Логотип сайта SMARTINCOM.RU" alt="Изображение логотипа сайта SMARTINCOM.RU">
Увидеть это можно только выключив отображение изображений в браузере.
Задаем размер. Атрибуты WIDTH и HEIGHT
Замечу сразу, ширина и высота очень важные параметры, поэтому не нужно их игнорировать. Суди сам, при незаданных размерах изображения, да при отключенных изображениях в браузере, когда изображения не загружаются, маленькие пустые квадратики могут распологаться совсем не в том месте где ты их планировал разместить. Красоты странице это не придаст. Поэтому не ленись и всегда прописывай размеры в HTML коде.
Задаются размеры изображения тегами width – ширина и height – высота, значения задаются как в пикселях, так и в процентах от ширины экрана (с процентами очень осторожно). Смотрим код:
<img src="image/logo.jpg" border="0" title="Логотип сайта SMARTINCOM.RU" alt="Изображение логотипа сайта SMARTINCOM.RU" width="200" height="90">
Заключение
Изображения привлекают посетителей сайта, несут в себе массу наглядной информации, просты в использовании, но все же необходимо придерживаться некоторых рекомендаций, если ты хочешь создать хороший, популярный сайт.
Не нужно использовать слишком большие размеры файла изображения, так как это влияет на скорость загрузки страницы. Поверь, это далеко не последний показатель.
Атрибут ALT имеет очень важное значение, добавлять его необходимо для каждого тега IMG. Содержание текстового сообщения должно очень точно описывать изображение, причем кратко.
Изображения на web-странице должны соответствовать текстовому содержанию.
Соблюдайте авторские права, так как найденные в Интернете изображения могут быть защищены авторскими правами.
После изучения этого раздела уже можно опробовать себя в качестве web-мастера и создать полноценную HTML – страницу. А далее перейдем к вставке средств мультимедиа.