Найти тему
<!Веселый HTML>

Как правильно вставлять на сайт картинки?

Вчера обещал рассказать вам про картинки. Сложно представить себе сайт без картинок и иллюстраций. Но как правильно вставлять их? Читайте далее!

Вот так выглядит посетитель сайта, на котором много картинок
Вот так выглядит посетитель сайта, на котором много картинок

Картинку чаще всего вставляют с помощью тэга <img>. Атрибут src этого тэга позволяет указать путь к самой картинке. В итоге все выглядит примерно так: <img src="КартинкаПервая.jpg">. Как правильно указывать адрес картинки - читайте здесь.

Но не все так просто. У <img> есть и другие атрибуты. Самые распространенные из них - height и width, то бишь ширина и высота. На многих сайтах-самоучителях по HTML5 вы можете увидеть, что эти параметры указываются в пикселах(px). Я не рекомендую этого делать по причине того, что экраны-то разные. На ноутбуке откроется так, на широком мониторе эдак. Указывайте лучше в процентах. Например, width="50%". Как раз полэкрана. А еще можно по центру разместить с помощью align. А если уж решили в пикселах, то почитайте здесь, как подобрать несколько вариантов одной и той же картинки.

Вот так я вижу идеальный вариант вставки картинки.
Вот так я вижу идеальный вариант вставки картинки.

Тут разве что border можно опустить. Он иногда смотрится неказисто.

Еще один неплохой вариант - <figure>. Метод хорош для вставки картинки в статью. Выглядит примерно так:

-3

Мне больше второй вариант нравится, но смотрите сами. На сегодня все, пишите в комментариях, о чем еще хотели бы послушать. А если не напишите - сам решу :D