Картинки в HTML

Картинки в 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/cat.jpg" width="200">
    <h2>Описание</h2>

А вот что должно быть видно в браузере:

Рассмотрим второй пример, в котором ширина задана в процентах и  составляет 50 процентов.

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

Внимание! Для высоты проценты не используются!

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

Но бывают случаи когда необходим точный размер, тогда же можно задать все вручную:

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

И в таком случае браузер, устанавливая заданные размеры, игнорируя  пропорции сторон. До встречи на следующем уроке! Дальше будет только интереснее!