Как поставить картинку на сайт html
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap
Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5
Всем привет!
Продолжаем усердно изучать основы HTML.
В этом уроке я расскажу, как вставить картинку в HTML-документ, как сделать картинку фоном, размер картинки, обтекание картинки текстом, как выровнять картинку. Все перечисленные возможности буду закреплять примерами и результатами.
Итак, изображения на веб-страницах могут быть как фоновые, так и обычные. Какая разница между фоновым и обычным изображением?
Фоновое изображение размещается в качестве фона, наверх которого можно вставить другие картинки, текстовку, таблицу и т.д.
Обычное изображение будет отталкивать от себя другие элементы страницы (другие картинки, текстовку, таблицу и т.д.). На примере вы потом все увидите и поймете.
Для веб-страниц рекомендуется использовать форматы картинок JPEG (JPG) , GIF и PNG .
○ Как сделать картинку фоном в HTML
Чтобы сделать картинку фоном, для тега <body> нужно прописать атрибут «background» :
Теперь смотрим полный пример. Вставьте файл картинки «fon.jpg» рядышком с HTML файлом.
и в HTML файл вставьте вот этот код:
Результат будет таким:
Внимание: название картинки должно быть написано на латинице, иначе картинка не отобразится.
Не правильное название:
○ Как вставить картинку в HTML
Чтобы вставить картинку в HTML-документ, используют тег <img> с параметром «src» , которое определяет путь или адрес к картинке.
Теперь смотрим полный пример. Вставьте файл картинки «kartinka.jpg» рядышком с HTML файлом и в HTML файле пропишите вот этот код:
Результат будет таким:
Внимание: название картинки должно быть написано на латинице, иначе картинка не отобразится.
Не правильное название:
Я думаю, вы до этого момента все поняли. Теперь попробуем скомбинировать два примера вместе. Сделаем на веб-странице фон, вставим изображение и текст.
○ Как вставить картинку, если она находится в папке «img» или «images»?
Если картинка находится в папке «img» или «images» , тогда нужно указать путь от HTML файла к папке «img» или «images» , а потом уже только прописать название картинки с расширением. Выглядеть это будет вот так:
Если картинка находится на другом сайте или блоге, тогда нужно указать адрес сайта и, если нужно, папку, где находится картинка. Ну, естественно, нужно указать и название изображения с его расширением.
Задание: Попробуйте создать папку с любым названием (только на латинице), закачать в папку картинку и в HTML файле указать правильный путь к изображению так, чтобы все отобразилось. Пробуйте!
○ Как сделать картинки в HTML по центру.
Чтобы картинка разместилась по центру HTML документа, заключите тег картинки в известный вам тег <center></center>
○ Как сделать обтекание или выравнивание картинки в HTML
К тегу <img> нужно добавить атрибут «align» .
Значение атрибута «align» :
left – выравнивание по левому краю, текст будет обтекать справа ( align=»left» ).
right – выравнивание по правому краю, текст обтекает слева ( align=»right» ).
○ Как сделать отступы от картинки в HTML
Чтобы сделать отступы от картинки, к тегу <img> нужно добавить атрибут «hspace» и «vspace» . Параметры задаются цифрами и в пикселях
HSPACE — отступы от картинки по горизонтали (в пикселях) ( hspace=»15″ ).
VSPACE — отступы от картинки по вертикали (в пикселях) ( vspace=»15″ ).
○ Как установить размер картинки в HTML
Чтобы задать размер картинке, к тегу <img> нужно добавить атрибут «height» и «width» . Параметры задаются цифрами и в пикселях или в процентах.
HEIGHT — высота изображения ( height=»100″ ).
WIDTH — ширина изображения ( width=»50″ ).
○ Как установить рамку для картинки в HTML
Чтобы задать рамку для картинки, к тегу <img> нужно добавить атрибут «border» . Параметры задаются цифрами и в пикселях.
Если задать к атрибуту «border» параметр « 0 », рамка отображаться не будет.
○ Дополнительные атрибуты для картинок
Title — это заголовок картинки. Заголовок отображается в том случае, если вы наведете на картинку курсор мышки.
Если у пользователя отключен режим загрузки изображений, то вместо картинки ему загрузится иконка с символикой, что картинки нет (на разных браузерах иконка разная). Можно в таком случае написать подсказку для пользователя, подписав картинку. Для этого используется параметр «alt» .
Текст, который прописан в «alt» , будет отображаться вместе с иконкой.
Смотрите пример:
Вот и все! Теперь попробуем все то, что я написал в уроке использовать на веб странице.
Вот, что я сделал для вас с использованием уже известных для вас атрибутов: