HTML изображение, вставка изображения в код страницы
HTML тег, отвечающий за вывод изображения
- HTML изображением может быть любое изображение в формате PNG, JPEG и GIF.
- HTML код изображения определяется тегом <img />.
- HTML изображение может быть фоном интернет-страницы.
- HTML изображение может быть определено в роле гиперссылки.
- Вставка изображения в HTML код страницы
- Расстояние между изображением и текстом по горизонтали, и по вертикали
- Определяем фоновое изображение в HTML
- HTML изображение - ссылка и определяющий его код
- Размещаем HTML изображение по центру страницы или блока
В папку D\My_first_site\ или в любую другую, где у вас находится файл index.html поместите изображение с расширением, скажем, .jpg, назовите его как угодно, например, xxx.
Вставка изображения в HTML код страницы:
<html> |
Тег <img /> – непарный. Обратите внимание на способ его закрытия.
Атрибуты и значения
- src="" – обязателен, он указывает на источник изображения.
- alt="" – определяет альтернативный текст, комментарий, который считывает поисковый робот при анализе содержимого web-страницы. Его также нужно обозначать.
- width="" – определяет ширину изображения в пикселях.
- height="" – определяет высоту изображения в пикселях.
Указывайте реальные размеры – так вы сохраните первоначальное качество изображения.
Для web разработок применимы изображения трех форматов: PNG (.png), JPEG (.jpg) и GIF (.gif). Adobe Photoshop является специализированным средством по созданию графики для сайтов. С его помощью можно конвертировать один формат изображения в другой.
HTML изображение | Отступы по горизонтали и по вертикали
или расстояние по горизонтали и по вертикали между изображением и текстом
<html> |
Результат:
Посмотреть в новом окне: расстояние между изображением и текстом
Атрибуты и значения
- hspace="" – определяет расстояние между изображением и текстом по горизонтали.
- vspace="" – определяет расстояние между изображением и текстом по вертикали.
HTML фоновое изображение
или фон страницы, определяемый изображением
Мы располагаем следующим изображением:
Напишим код для отдельной страницы:
<html> |
Посмотреть результат в новом окне: Фоновое изображение в HTML
Атрибуты background, background-image рассматриваются в CSS уроках.
Вставка изображения и ее порядок → ../images/primer-img.jpg → смотрите здесь.
HTML изображение - ссылка
или графическая ссылка, определяемая изображением
Ссылка наверх текущей страницы:
Код примера:
<title>HTML изображение - ссылка</title> |
border="0" – отменяет границу графической ссылки.
HTML изображение по центру страницы
или все возможные способы размещения изображений по центру
Код примера:
<html> |
Посмотреть результат в новом окне: HTML изображение по центру страницы
На что здесь необходимо обратить внимание? → Во-первых, на то, что обозначены размеры — это ускоряет загрузку изображения. Во-вторых, прописаны атрибуты alt="", что также крайне желательно делать, даже если альтернативный текст отсутствует. В первом случае центрирование было определено HTML параметром, а во втором — с помощью линейного включения каскадных таблиц стилей.