Главная / Основы HTML / Блог / Теги HTML для вставки изображений

Теги HTML для вставки картинки, изображения в HTML

В данном материале я вам расскажу об очень важных тегах HTML, для вставки картинок и графики на страницу, ведь без этого сложно создать красивый и хороший сайт.

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

Не награмождай html-страницу картинками, страница должна быть легкой и не отпугивать посетителей. Посетитель всегда должен усваивать главную информацию и не отвлекаться, вставляй картинки в HTML только там, где в этом есть необходимость.

на странице Атрибуты тега BODY я уже говорил, что картинки могут быть фоном html-страницы, а сейчас я вам расскажу, как эти же картинки можно использовать на более высоком уровне, нежели фон.

И так, для того, что вставить картинку в HTML-страницу, тебе понадобится тег <IMG>, у которого есть самый главный атрибут SRC. Данный атрибут необходим для указания адреса к картинке. Допустим, тебе нужно ставить картинку image.jpg в какое-нибудь место на html-страницу, а наша картинка будет находится в одной папке (каталоге)) со страницей, тогда надо писать вот такой html-код:

<img src="image.jpg">

Если картинка и html-страница находятся в разных папках или каталогах, то надо написать путь к изображению относительно страницы. Например, наша html-страница находится в папке или каталоге news, в этом же каталоге или папке находится подкаталог (папка) pop, в котором и расположена наша картинка image.jpg, то для ее вставки надо писать так:

<img src="pop/image.jpg">

Кроме атрибута src у тега <IMG> есть еще парочка необязательных, но важных атрибутов:

Если не указывать данные атрибуты, браузер загрузит реальные размеры картинки. Однако не стоит переусердствовать со значениями данных атрибутов, ведь увеличение длины или ширины картинки может её исказить, что испортит её, например фотографию человека, где изменятся пропорции человека.

Как я уже написал, размеры картинки можно указывать как в пикселах, так и в процентах. Приведу просто пример:

<img src="pop/image.jpg" width="30" height="40">

еще пример html-кода:

<img src="pop/image.jpg" width="35%" height="10%">

Бывают случаи, когда в браузере отключена возможность отображения графики, в том числе и картинок, и чтобы ваша страница не потеряла смысл, применяют атрибут alt, в котором мы пишем альтернативный текст, если картинка не под грузилась на страницу. html-код на примере:

<img src="image.jpg" alt="Картинка сайта www.1seo.by">

Этот пример вставит вместо картинки текст, в область, под которую было зарезервировано место под изображение, однако повторюсь, это необязательный атрибут, но ему есть место.

Далее важный атрибут align, при помощи которого, как ты уже догадался, можно управлять расположением картинки относительно текста на html-странице. Далее его значения:

Приведу HTML-код:

<img src="image.jpg" align="left"> 
Текст, радом с картинкой.

а браузер выведет следующее:

Текст, радом с картинкой.



 

HTML-код для значения right:

<img src="image.jpg" align="right"> 
Текст, радом с картинкой.

на html-странице будет так:

Текст, рядом с картинкой.



 

Для того, чтобы текст не обтекал картинку, можно использовать ранее упомянутый тег BR на странице Форматирование текста в HTML. Кстате, тег BR имеет атрибут clear, со своими значениями значения:

Без атрибута align текст обтекат по умолчанию справа картинки и почти вплотную. Если ты хочешь чтобы текст не обтукал вплотную картинку, можно использовать вот такие атрибуты:

Приведу простой html-код на примере:

<img src="image.jpg" align="left" vspace="7" hspace="10"> 
Вот такая красивая картинка.

Что получится по данному примеру попробуй посмотреть сам.

Вокруг картинки еще можно сжделать рамку с помощью атрибута border и указывать в пикселях её величину. Чем больше значение, тем больше рамка вокруг изображения. HTML-код будет таким:

<img src="image.jpg" border="4">

на html-странице будет вот так:

Я написал основные теги HTML, необходимые для вставки картинок на html-страницу. Далее я расскажу тебе, как создать ссылки в HTML, а также как сделать картинку ссылкой.

← Теги для форматирования текста в HTML Теги HTML для создания ссылок →
Дата публикации: 15 мая, 2012
    Отзывы и комментарии:
  • Евгений:
    А как сделать чтобы вставить картинку с прямой ссылки на картинку из интернета?
  • Кирилл:
    просто вставляешь в атрибуе src="" адрес картинки с другого источника, она тоже отобразится.
  • Александр:
    А как сделать так что бы при нажатие на картинку она всплывала в более больший размер. Пример как в контакте при просмотре фото или картинок! Очень нужно...
  • www.1seo.by:
    Такой эффект "всплывания" можно достич сторонники плагинами на jquery, например, fancybox. Примеры и инструкцию по установке можно взять тут http://fancyapps.com/fancybox/
  • Кирилл Шерстюк:
    Почему я не вижу картинку?


Лично я люблю землянику со сливками, но рыба почему-то предпочитает червяков. Вот почему, когда я иду на рыбалку, я думаю не о том, что люблю я, а о том, что любит рыба.
© Дейл Карнеги

Супер-предложение!

Купить виртуальный хостинг для сайта и домен с бесплатным тестовым периодов 1 месяц!

Подробнее

Подпишитесь на интересные обновления моего блога, чтобы быть в тренде последних тенденций разработки и продвижения сайтов: