HTML изображение

Фоновое HTML изображение

Урок 10. HTML изображение, вставка изображения в код страницы

HTML тег, отвечающий за вывод изображения

  1. Вставка изображения в HTML код страницы
  2. Расстояние между изображением и текстом по горизонтали, и по вертикали
  3. Определяем фоновое изображение в HTML
  4. HTML изображение - ссылка и определяющий его код
  5. Размещаем HTML изображение по центру страницы или блока

В папку D\My_first_site\ или в любую другую, где у вас находится файл index.html поместите изображение с расширением, скажем, .jpg, назовите его как угодно, например, xxx.

Вставка изображения в HTML код страницы:

<html>
<head>
<title>Вставка изображения в HTML код страницы</title>
</head>
<body>
<img src="xxx.jpg" alt="Альтернативный текст" width="100" height="80" />
</body>
</html>

Тег <img /> – непарный. Обратите внимание на способ его закрытия.

Атрибуты и значения

Указывайте реальные размеры – так вы сохраните первоначальное качество изображения.

Для web разработок применимы изображения трех форматов: PNG (.png), JPEG (.jpg) и GIF (.gif). Adobe Photoshop является специализированным средством по созданию графики для сайтов. С его помощью можно конвертировать один формат изображения в другой.

HTML изображение | Отступы по горизонтали и по вертикали

или расстояние по горизонтали и по вертикали между изображением и текстом

<html>
<head>
<title>Отступы между изображением и текстом</title>
</head>
<body>
<p>Текст вверху изображения на дополнительном расстоянии в 20 пикселей</p>
<img src="../images/2121.png" align="left" width="195" height="157" hspace="50" vspace="20" />
<p>Текст справа от изображения на дополнительном расстоянии в 50 пикселей</p>
<p>Текст</p>
<p>Текст</p>
<p>Текст</p>
<p>Текст</p>
<p>Текст</p>
<p>Текст внизу изображения на доболнительном расстоянии в 20 пикселей</p>
</body>
</html>

Результат:

Пример: изображение в HTML

Посмотреть в новом окне: расстояние между изображением и текстом

Атрибуты и значения

HTML фоновое изображение

или фон страницы, определяемый изображением

Мы располагаем следующим изображением:

фоновое изображение хтмл

Напишим код для отдельной страницы:

<html>
<head>
<title>Фоновое изображение в HTML</title>
</head>
<body style="background-image:url(../images/primer-img.jpg)">
<p>Какой-то произвольный текст.</p>
</body>
</html>

Посмотреть результат в новом окне: Фоновое изображение в HTML

Атрибуты background, background-image рассматриваются в CSS уроках.

Вставка изображения и ее порядок → ../images/primer-img.jpg → смотрите здесь.

HTML изображение - ссылка

или графическая ссылка, определяемая изображением

Ссылка наверх текущей страницы:

ХТМЛ изображение ссылка

Код примера:

<title>HTML изображение - ссылка</title>
</head>
<body>
<p>
<a href="#"><img src="../images/strelkavverx.png" alt="" border="0" /></a>
</p>

border="0" – отменяет границу графической ссылки.

HTML изображение по центру страницы

или все возможные способы размещения изображений по центру

Код примера:

<html>
<head>
<title>HTML изображение по центру страницы</title>
</head>
<body>
<p align="center">
<img src="../images/audi.jpg" width="250" height="221" alt="" />
</p>
<div style="text-align:center">
<img src="../images/mustang.jpg" width="250" height="153" alt="" />
</div>
</body>
</html>

Посмотреть результат в новом окне: HTML изображение по центру страницы

На что здесь необходимо обратить внимание? → Во-первых, на то, что обозначены размеры — это ускоряет загрузку изображения. Во-вторых, прописаны атрибуты alt="", что также крайне желательно делать, даже если альтернативный текст отсутствует. В первом случае центрирование было определено HTML параметром, а во втором — с помощью линейного включения каскадных таблиц стилей.

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 9. HTML фон   HTML изображение   Урок 11. HTML изображение и текст

    Сохранить в сервисы и закладки