Как добавить подпись под фотографией?

Как добавить подпись под фотографией?
Как добавить подпись под фотографией?

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

HTML изображение и текст

Особенности взаимодействия HTML изображения и текста

Посмотрим, как разместить текст слева или справа изображения.

В предыдущем уроке мы рассмотрели метод вывода HTML изображения с расширением .jpg на web-страницу и то, как установить дополнительное расстояние между ним, и текстом. Продолжим наше знакомство с тегом <img /> и особенностями его взаимодействия с элементами текста.


Навигация по странице

  1. Текст вверху, внизу, по центру изображения
  2. HTML изображение слева – текст справа
  3. HTML изображение справа – текст слева

Текст вверху, внизу, по центру изображения

Пример:

<html>
<head>
<title>HTML текст вверху, внизу, по центру изображения</title>
</head>
<body>
<p><img src="../images/2121.png" width="128" height="128" align="top" />Текст вверху изображения</p>
<p><img src="../images/2121.png" width="128" height="128" align="middle" /> Текст по центру изображения</p>
<p><img src="../images/2121.png" width="128" height="128" align="bottom" /> Текст внизу изображения</p>
</body>
</html>

Результат:

HTML текст. Текст вверху, внизу, по центру изображения

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

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

  • align="top" – выравнивает изображение и текст по верху.
  • align="middle" – выравнивает изображение и текст по центру, по вертикали.
  • align="bottom" – выравнивает изображение и текст по низу.

Напомню, что для web применимы изображения трех форматов: PNG (.png), JPEG (.jpg) и GIF (.gif).

Обратите внимание на способ подгрузки изображения: ../images/2121.png. Во-первых, использован формат PNG (.png). Во-вторых, изображение находится в отдельной папке, то есть документ у меня в одной папке, а изображение в другой. В таких ситуациях очень важно правильно указать путь от документа к подгружаемой картинке, что и было сделано: первые две точки .. определяют выход из папки где находится документ (все уроки, они же страницы, они же документы курса по HTML у меня находятся в одной папке, CSS – в другой, изображения – в третьей и так далее); /images/ – не что иное, как название папки с изображениями, а 2121.png – полное имя файла самого изображения.

HTML изображение слева – текст справа

Пример:

<html>
<head>
<title>HTML изображение слева – текст справа</title>
</head>
<body>
<img src="../images/2121.png" align="left" width="128" height="128" />
<p>Изображение обтекает текст слева</p>
<p>Изображение обтекает текст слева</p>
<p>Изображение обтекает текст слева</p>
<p>Изображение обтекает текст слева</p>
</body>
</html>

Результат:

HTML текст. Изображение слева - текст справа

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

HTML изображение справа – текст слева

Пример:

<html>
<head>
<title>HTML изображение справа – текст слева</title>
</head>
<body>
<img src="../images/2121.png" align="right" width="128" height="128" />
<p>Изображение обтекает текст справа</p>
<p>Изображение обтекает текст справа Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа</p>
</body>
</html>

Результат:

HTML текст. Изображение справа - текст слева

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

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

Урок 10. HTML изображение   HTML изображение, текст   Урок 12. Верстка

Как добавить подпись под фотографией? 74
Создать картинки с надписями. Наложить текст на изображение
Как добавить подпись под фотографией? 96
HTML изображение; текст вверху, внизу, по центру - Текст справа
Как добавить подпись под фотографией? 31
Html - Расположить текст относительно картинки - Stack Overflow
Как добавить подпись под фотографией? 24
Как сделать из текста изображение? - 7я.ру
Как добавить подпись под фотографией? 70
Как сделать обтекание картинки текстом?
Как добавить подпись под фотографией? 43
Текст из картинки / Хабр
Как добавить подпись под фотографией? 83
Как добавить подпись под фотографией? 87
Как добавить подпись под фотографией? 53
Как добавить подпись под фотографией? 61
Как добавить подпись под фотографией? 21
Как добавить подпись под фотографией? 72
Как добавить подпись под фотографией? 61
Как добавить подпись под фотографией? 47
Как добавить подпись под фотографией? 8
Как добавить подпись под фотографией? 24