Для вставки картинки в html-документ используется одинарный тег <img>. Самое главное для вставки изображения в html-документ – это правильно указать адрес картинки. Давайте разберем несколько случаев, где может располагаться картинка.

Картинка может располагаться на одном уровне, где и индексная страница сайта. В качестве примера в html-документ я буду вставлять свою фотографию. Итак, случай, когда картинка и индексная страница на одном уровне:

Тогда в html-документе пишем тег <img>, указываем атрибут «источника» и присваиваем значение, т.е. в кавычках пишем называние файла с его расширением.

Но этого еще не достаточно. Такой документ не пройдет валидацию. При случае, если картинка не отобразится, нужно, чтобы показывалось называние картинки. Для этого используется атрибут alt. В кавычках пишем название картинки. Это называние выведется, в случае если картинка не появится.

Это означает, что относительно индексного документа нам просто нужно выйти из папки «mysite_1» и прийти к нашей картинке . В таком случае путь указывается так:

Так можно выходить из нескольких папок. Ставите слеш и две точки (../).

А что если нам нужно выйти из папки, а потом войти? Картинка находится на том же уровне, что и индексный документ, только в другой папке.

Все точно также. Выходим из папки, а потом указываем путь, где находится наша картинка.

Таким образом, вы сами можете указывать адрес картинки, как вам удобно. Самое главное, правильно его указать. Лично я вам рекомендую, для каждой индексной страницы создавать отдельную папку для картинок. Так намного удобнее и вы никогда не запутаетесь, какая картинка, к какому индексному документу относится.

Вы можете указывать адрес не только относительно папок, но и также можете указать адрес в интернете на ту картинку, которая вам нужна или нравится.

В кавычках ставите адрес картинки в интернете вот и все.

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

Когда указываем адрес и не задаем никаких атрибутов, то получается не очень красиво. Браузер дает значения по умолчанию и выделяет слишком много места для нашей картинки.

Поэтому для картинки следует указать несколько атрибутов.

Во-первых, нужно узнать высоту и ширину картинки.

И указать, что ширина картинки 200 пикселей, а высота 246 пикселей.

С помощью этих параметров, мы можем сами указывать, сколько браузеру выделить места под картинку. Таким образом можем либо уменьшить картинку, либо увеличить.

Как вы видите, атрибут align применяется не только к выравниванию текста, но и к выравниванию картинки.

В этом случае на картинку не будет выделяться слишком много места, и текст картинку будет обтекать.

В-третьих, можно задать отступы для картинки.

Таким образом, мы задаем, чтобы картинка отступала по горизонтали на 10 px с правой и левой стороны.

Если хотим, чтобы картинка отступала сверху и снизу на 10 px, то достаточно задать такой атрибут:

Буква h означает «горизонталь», а буква v означает «вертикаль».

Конечно, последние атрибуты устарели, потому что с помощью html эти вещи уже давно не делаются, но, тем не менее, вы должны знать, как вставляется картинка и какие атрибуты ей можно задать.

Если вам помог этот материал, поделитесь им в социальных сетях! Спасибо за вашу помощь!