Вставить картинку в html на сайт можно с помощью специального тега <img>. Чтобы сделать картинку в html на странице сайта нужно 2 шага:
- Скопировать картинку в нужную папку;
- В коде html у тега <img> прописать атрибут src=»адрес изображения», внутри которого указывается путь к картинке. Html код картинки будет примерно таким: <img src=»адрес изображения»>, как вы уже поняли тег <img> является одиночным и закрывающий тег </img> не требуется.
Содержание
Относительные и абсолютные адреса картинки
В html языке можно указать:
- Относительный адрес картинки от корня сайта «/my_img/dogs.jpg» . Используется чаще всего. Работает только сервере в интернете или запущенном на локальной машине.
- Относительный адрес изображения с текущего уровня «my_img/dogs.jpg» . Используется редко, в основном на статичных сайтах или во время обучения, т. е. когда сервер не запущен на рабочем компьютере и первый способ не подходит.
- Абсолютный адрес картинки, например «http://my-site.ru/my_img/dogs.jpg» . Во многих случаях этот метод неудобно использовать, т. к. все сайты обычно сначала делаются и тестируются на обычном компьютере и только потом копируются на сервер. Если вы напишете абсолютный адрес изображения на компьютере, то перед копированием этот адрес нужно будет сменить, а это лишняя работа.
Относительный адрес картинки значительно удобнее, т. к. во время написания кода html позволяет отображать сайт как на компьютере, так и на сервере без изменений адреса сайта в коде. Поэтому старайтесь всегда, когда необходимо вставить картинку в html на сайт использовать относительный адрес.
1 вариант адреса от корня сайта предпочтительнее и удобнее в использовании, чем 2-ой с текущего уровня, потому что будет работать, даже если вы перенесете файл с исходным кодом на уровень ниже или выше. Но 1 вариант работает только, если у вас установлен веб сервер на личном компьютере или в интернете.
Пример кода html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
</head>
<body>
<img src="my_img/dogs.jpg" >
</body>
</html>Внешний вид в браузере
В примере выше, внутри атрибута src указано, что картинка с именем «dogs.jpg» находится в папке «my_img». Соответственно, чтобы код сработал, нужно, чтобы изображение находилось по указанному адресу, т.е. каталог «my_img» с картинкой должен быть в одной папке с файлом html, содержащим данный код.