07.03.2017   1962

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

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

Домашнее задание
Для просмотра домашки нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности

Следующий урок Предыдущий урок

Комментарии

 merkuriy 2017-05-26 11:17:56
0

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

Ответить
 sergasia2 2017-05-26 12:01:37
0

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

Ответить
Чтобы написать комментарий нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности