Вставляем изображение в HTML

Процесс вставки картинок в структуру HTML для многих прост и привычен, но если попытаться описать все подробности, то получится целая брошюра. Попробуем вкратце все же сделать это.

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

Основной в этом деле тег img. Добавляя на страничку изображения, главное не переусердствовать и помнить о том, что большое количество картинок как минимум увеличит скорость загрузки. Иной случай, если изображения – основное содержание сайта.

Тег img используется при добавлении изображений с неотъемлемым атрибутом src, который указывает браузеру место расположения файла. Таким образом, для вставки изображения с названием foto.jpg нужно вставить такой код

в запланированном месте страницы. Здесь важно помнить, что подобная короткая форма указания пути к файлу работает только, если картинка и страница лежат в одном каталоге (папке). Также не забывайте о том, что тег img не нуждается парный и закрывает сам себя, что видно по символу слэша в конце.

В случае, когда изображение и страница будут располагаться в разных каталогах, то путь к изображению потребуется указать более полно. Условно, если web-страничка находится в папке web, а в этой же папке находится еще одна папка (подкаталог) с названием images, где и хранится файл foto.jpg, то в коде это должно выглядеть так:

Соответственно чем дальше друг от друга находятся веб страничка и фото, тем более полно придется прописать путь.
Если атрибут src для тега img является обязательным, то есть и ряд необязательных атрибутов данного тега. Об этом мы поговорим в следующих темах.