наверх





Вставив изображение в документ, мы этим самым освежим его и сделаем более приятным для прочтения.
Давайте рассмотрим, как правильно вставить картинку в документ. На самом деле все очень просто.
Элемент изображения обозначается как <img>. На примере можно увидеть, как вставить изображение в документ:

<img src="/img/apple.jpg">


У элемента <img> имеется несколько важных атрибутов, как ширина, высота и описание с ссылкой на картинку. В представленном мною примере был использован лишь один из атрибутов - ссылка на картинку.

src


Атрибут src указывает путь к файлу изображения, который необходимо вывести в документе. Допускается указывание как относительного, так и абсолютного пути.

width


Атрибут width указывает на ширину вставляемой нами изображения. То есть, если картинка слишком широкая и не вмещается в страницу, то мы может очень легко и просто её подправить. Однако, стоит учесть, что при такой правке мы создадим искажение изображения, поэтому нам придется еще и изменить её длину.

height


Атрибут height позволяет нам изменить длину изображения. Если правильно подобрать высоту и ширину картинки, то искажения не будет, и выглядеть она будет приятно и красиво.

Давайте рассмотрим оба атрибута на примере:

<img src="/img/apple.jpg" width="300px" height="148px">


Что мы сделали: мы написали тег <img> и прописали ему атрибут src, который ссылается на изображение. Стоит учесть, что относительная ссылка на изображение должна писаться относительно HTML документа, с котором мы работаем. Далее мы прописали атрибут width, и указали ему ширину в 300 пикселей, и еще написали атрибут height, в котором написали выбранную нами высоту, в нашем случае это 148 пикселей.

alt


Этот атрибут позволяет описать вставленную нами картинку. К примеру, если пользователь отключил поддержку загрузки изображений в браузере, то вместо картинки ему высветится наше описание. Или же еще один пример, пользователь, наведя мышкой на картинку, увидит наше описание. Записать его можно следующим образом:

<img src="/img/apple.jpg" width="300px" height="148px" alt="Яблочный сад">


В этом примере, мы указали, что картинка хранится на нашем сервере, в папке img и называется как apple.jpg. После чего, её ширина и высота изображения, выводимая на документ, будет равна 300 на 148 пикселей. И при наведении на неё мышкой, мы увидим надпись "Яблочный сад".





Поделиться
Border-radius генератор
Занимаетесь веб-разработкой? Кроссбраузерный border-radius генератор с поддержкой выборочных скруглений краев.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.