Чат PHP-разработчиков
Как вставить картинку в HTML

Как вставлять картинки в HTML

Итак, мы с вами изучили ссылки. Но знаете, не в ссылках же счастье. Счастье - в котиках. И Интернетом правят котики. А представляют собой котики в Интернете ни что иное как картинки. Об этом мощнейшем инструменте влияния на людей мы и поговорим. И я сейчас про картинки, а не про котиков (ну не расстраивайтесь вы так).

Вставка картинки в HTML-страницу документа происходит с помощью тега <img>, который используется вместе с атрибутом src. В данном атрибуте прописывается адрес изображения.

На практике это выглядит так:

<img src="image.jpg">

Надо отметить, что в сети чаще всего используются изображения, которые имеют форматы JPEG и PNG.

Размеры изображения

Создавая HTML страницу, можно самостоятельно определять высоту и ширину изображения, применяя при этом атрибуты height и width, соответственно. Приведем пример.

<img src="img/book1.jpg" width="200">

Как следует из данного кусочка кода, ширина изображения будет составлять 200 пикселей. Обратите внимание, что буквосочетание px, обозначающее эти самые пиксели, отсутствуют рядом с числом, которое идет за атрибутом. Так принято в действующем стандарте, указанное значение – это по умолчанию количество пикселей.

Добавим эту строку в код имеющейся у нас страницы:

...
<h1>Совершенный код</h1>
<img src="img/book1.jpg" width="200">
<h2>Описание</h2>
...

Результат в браузере:

А теперь приведем второй пример, в котором ширина задана относительная и составляет 70 процентов.

<img width="70%" src="logo.png">

Что касается высоты, то для ее указания проценты, как правило, не используются.

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

Но можно задать оба параметра. На примере это выглядит вот так.

<img width="100" height="100" src="logo.png">

И в таком случае браузер, устанавливая заданные размеры, не будет обращать внимание на пропорции сторон, что может их нарушить. Разумеется, это ещё не всё о картинках, смотрите следующие уроки. Всем удачи!

Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Домашнее задание
  • создайте в папке с Вашими html-страничками папку img
  • положите в неё картинку в формате png или jpg
  • добавьте её на свою страницу с помощью тэга <img>
  • задайте для ней по отдельности сначала ширину, а затем высоту
  • теперь задайте оба атрибута
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
Читайте также
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
Комментарии (9)


merkuriy

Добрый день! Хотел бы поблагодарить Вас за данную статью и за курс в целом. На Вашем портале узнал много новых "тэгов" и научился грамотно их применять. Очень важным аспектом выступила возможность самому определять ширину и высоту изображения, что очень мне пригодилось! Нигде не мог найти столь простого и понятного языка. Везде все описано достаточно сложно. Думаю, что не однократно буду возвращаться к данным материалам. Спасибо за проделанную работу.

ivashkevich

Приятно слышать, спасибо!)

sergasia2

Мне очень пригодилась статья. Я пишу курсовую по HTML и мне нужно вставлять разные картинки и рисунки. Для меня это катастрофа, но благодаря вашим советам я все сделала.

ivashkevich

Удачи с курсачём =)

Hunter

У меня изображение не изображается

666pro@rambler.ru

Создай папку "img" и скопируй в него картинку переименуй его в book1 с расширением jpg

sofi.tatarinowa@yandex.ru
<img width="70%" src="book1.png">

здравствуйте, не понимаю почему изображение не отображается

ivashkevich

Здравствуйте, вариант только один - рядом с HTML-файлом не лежит картинка с таким названием.

Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
Популярное за сутки
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Сейчас читают
Логические задачи с собеседований