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