Вставка картинки



Перед произведением редактирования добавьте изображение на страницу путем задания тегов <img>. Для редактирования HTML-документа потребуется открыть страницу в любом текстовом редакторе. Кликните правой клавишей мыши на файле и выберите атрибут «Открыть с помощью» - «Блокнот». Вы также можете указать любой другой редактор, который вам будет удобнее использовать для изменения кода.

Перейдите к секции <body> документа и найдите тег <img>. Если изображение еще не добавлено на страницу, впишите следующий код:

<img src = “путь_до_файла_изображения” alt = “имя картинки”>

Путь до файла изображения может быть как относительным, так и абсолютным. Атрибут alt отвечает за название картинки и добавление к ней подписи, которая будет отображаться при наведении указателя мыши на изображение.

Изменение размера



Чтобы увеличить картинку, задайте ей соответствующие параметры width и height, добавив атрибуты к тегу картинки:

<img src = “путь_до_картинки” alt = “название” width = “300” height = “350”>

Параметр width отвечает ширину изображения, а height содержит в себе показатель высоты картинки. В данном случае при открытии страницы в окне браузера будет выведено изображение шириной 300 и высотой 350 пикселей. Для изменения настроек форматирования на странице вы также можете добавить атрибуты hspace и vspace:

<img src = “путь_до_картинки” alt = “имя” width = “400” height = “320” hspace = “5” vspace = “10” border = “1”>

В данном дескрипторе были заданы горизонтальный (hspace) и вертикальный (vspace) отступы от изображения. Любой добавленный на страницу текст будет отдален от изображения на 5 пикселей по горизонтали и на 10 пикселей по вертикали. Атрибут border отвечает за создание рамки вокруг картинки размером 1 пиксель.

Стоит отметить, что размер изображения может задаваться не только в пикселях, но и в процентном соотношении относительно размера окна браузера. Например:

<img src = “адрес_картинки” alt = “имя_изображения” width = “100%”>

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

Сохраните произведенные изменения при помощи функции «Файл» - «Сохранить» окна «Блокнота». Проверьте отображение картинки в окне браузера, открыв файл HTML нажатием правой клавишей мыши и выбрав опцию «Открыть с помощью». В списке предложенных вариантов выберите программу, которую вы используете для просмотра страниц в интернете. Для корректировки размера изображения вы можете отредактировать файл HTML любое количество раз.