Далее на странице...
Графика является важной составляющей Интернет. Без графических изображений не обходится ни один сайт. Различные фотографии, иконки, значки, кнопки, рекламные баннеры и т.д. и т.п. являются неотъемлемыми элементами современных веб-страниц.
Как вставить изображение?
В основном на страницах размещают изображения в одном из трех графических форматов: gif, jpg/jpeg или png (подробнее здесь...).
Для вставки изображения на веб-страницу предназначен тег и его обязательный атрибут src, который указывает адрес файла с изображением - абсолютный или относительный путь к файлу (подробнее здесь...).
Атрибут align тега позволяет разместить изображение справа или слева относительно текста и других элементов страницы, либо расположить его определенным образом относительно базовой линии текущей строки.
Выравниваем изображение по базовой линии текущей строки.
Рамка вокруг изображения
Атрибут border тега позволяет заключить изображение в рамку, цвет которой совпадает с цветом текста на странице, а толщина задается в пикселях. По умолчанию рамка отсутствует.
Изображение заключено в рамку, толщиной 2 пикселя.
Размер изображения
Размеры графического изображения желательно всегда указывать явно с помощью атрибутов height и width, задающих соответственно высоту и ширину изображения.
В противном случае браузеру требуется дополнительное время для самостоятельного вычисления размеров изображения, что влияет на скорость загрузки страницы.
Размер изображения задается в пикселях и на скорость его загрузки не влияет.
<img src="img/peng.gif" height="32" width="32">
Отступы от изображения
Отступы от изображения (или поля вокруг изображения) до других элементов страницы задаются с помощью атрибутов hspace и vspace - отступы по горизонтали и вертикали соответственно.
Отступы задаются в пикселях.
В данном случае отступы от изображения по горизонтали, с одной стороны до текста, а с другой - до края родительского элемента, составляют 50 пикселей.
Альтернативный текст и всплывающая подсказка
При помощи атрибута alt тега к изображению добавляют альтернативный текст.
Альтернативный текст используют для краткого описания содержимого картинки, когда само изображение по какой-либо причине недоступно (например, если в Вашем браузере отключена автоматическая загрузка изображений).
Таким образом альтернативный текст Вы увидите, если браузер не загрузил или еще не загрузил изображение.
Всплывающая подсказка к картинке добавляется при помощи атрибута title. Она появляется при наведении на изображение курсора.
Попробуйте отключить автоматическую загрузку изображений в Вашем браузере, и вместо пингвина в рамке Вы увидите "Альтернативный текст".
