Картинки в HTML

Основы

Как и с любым большим текстом, вам попросту не обойтись без каких-то картинок. Благо в HTML вставить картинку не так и сложно, для этого используется специальный тэг < img>. Основная же сложность в расположении этой картинки и донесении абсолютно для всех, что же изображено на данной картинке. Ведь бывают браузеры или люди с ограниченными возможностями. Вот поэтому просто бахнуть тэг с атрибутом src (где и будет ссылка на вашу картинку) на вашу страницу - не получится. Это надо делать со смыслом.

Чтобы добавить тот самый смысл, есть специальный атрибут данного тэга - alt. Где мы попросту обязаны прописать, что предполагается на данной картинке. Бывает множество ситуаций, когда это пропускают, однако, это очено плохой тон. Во-первых, представьте что будет если ваша картинка не загрузится, то хотя бы будет представлен минимальный текст того, что изображено на данном изображении. Во-вторых, даже если картинка загрузилась, не факт что сейчас пользователю в принципе удобно смотреть на неё. Он может воспользоваться специальными программами ScreenReader, которые прочитают ему все, что есть на странице.

Работа с расположением

Кстати, кроме того, что вы можете указать конкретные размеры вашей картинки, используя height и width атрибуты - вы также можете поработать над тем, как эта картинка будет располагаться.

Для этих целей служит атрибут align, в который вы можете передать расположение (right, center). Также картинке можно задать рамку, для выделения таким образом самого изображения. Для этого используется атрибут border.

Давайте посмотрим всё что мы обсудили на примере:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Моя картинка</p>
<img src = "/html/images/test.png" alt="Тестовое изображение" width="150" height="100" border="3" align="right"/>
</body>
</html>