Как вставить картинку в 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">

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

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


merkuriy
merkuriy

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

ivashkevich
ivashkevich

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

sergasia2
sergasia2

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

ivashkevich
ivashkevich

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

Hunter
Hunter

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

666pro@rambler.ru
666pro@rambler.ru

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

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

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

ivashkevich
ivashkevich

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