Найти в Дзене
V07BiT.Compiles

А как вставить в html-страницу какую-нибудь картинку?

Оглавление

Ну хорошо, а как засунуть в html-страницу какую-нибудь картинку?

Для картинок имеется специальный тег <img> - но этот тэг не является "скобкой", как те, что мы рассматривали в предыдущих статьях: "HTML-страница", "оформление html-страниц", этот тэг имеет в себе параметры и выглядит вот так: <img src="путь к картинке" alt="альтернативный текст" width="50" height="50" />

Описание тэга <img>
Описание тэга <img>

Вот щас можно попробовать вставить картинки в наш "index.html"-файл. Подцепим картинки как с нашего диска на компьютере, так и с интернета, например с "Google-диска".

Подцепляем картинку с диска. Для этого в нашей папке "Web-pages", где располагается наш "index.html", делаем новую папку и обзываем её, например, "img". Вот так:

Сделал новую папку "img" для размещения в ней картинок
Сделал новую папку "img" для размещения в ней картинок

Разместим в ней какую-нибудь папку "img"

Размещение картинки в папке "img"
Размещение картинки в папке "img"

и подцепим её в "index.html".

Это будет выглядеть вот так:

Добавляем в html-страницу тэг <img src="...>
Добавляем в html-страницу тэг <img src="...>

так-же для картинки делаем новый заголовок. Конечно он будет поменьше в размерах. Я использовал тэг для заголовка картинки <h3>. Параметр alt="" я оставил пустой, да так то-же можно. Ширину сделал width="300", высоту картинки сделал height="120" - получилось криво, но это для наглядности, что-б было видно, что можно менять настройки, как вам угодно.

И что мы увидим в браузере?

А увидим вот что:

Наша html-страница стала ещё краше
Наша html-страница стала ещё краше

Теперь вставим в свою страничку картинку из интернета. Я буду вставлять картинку с "Google-диска", если у вас такого диска нет, то есть повод завести его. Делаем всё то-же самое в редакторе, только путь к картинке будет другой, ну ещё ширину и высоту картинки можно выставить другую.

Добавил теги нового заголовка и тэг для картинки из интернета
Добавил теги нового заголовка и тэг для картинки из интернета

И, что мы увидим в браузере?

Первая картинка подцепилась с диска, а вторая картинка подтянулась из интернета с "Google-диска"
Первая картинка подцепилась с диска, а вторая картинка подтянулась из интернета с "Google-диска"

Как правильно подцеплять картинки с Google-диска

Как правильно подцепить картинку с "Google-диска", чтобы она отображалась на вашей web-страничке, можно почитать вот тут.

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