Главная / Верстка / Html / Картинки в HTML. Работаем с изображениями +

Картинки в HTML. Работаем с изображениями +


07.07.2015 17:181395

Со списками разобрались, начнем разбираться с изображениями и тегом <img>.

Даже создавая сайт на какой-нибудь CMS, например на Joomla!, знание атрибутов тега изображения Вам будет необходимо.

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

Форматы изображений для web

Широкое распространение для веб-графики имеют два формата — JPEG (JPG) и GIF. Их многофункциональность, универсальность, небольшой объем исходных файлов при достаточном для сайта качестве, сослужили им хорошую службу и определили их как стандарт. Есть еще формат PNG, который также поддерживается браузерами при добавлении изображений. Однако популярность PNG сильно уступает форматам JPEG/JPG и GIF.

В каком формате выбрать файл — решать вам. Главное добиться максимального качества при минимальном размере. Если желаемая картинка в неподходящем формате, дело можно поправить при помощи графического редактора, например программы Adobe Photoshop. Существует еще бесплатный аналог Фотошопа — программа GIMP.

В самом начале этого, так сказать, мини-курса мы с Вами создавали папку images. Вот в эту папку и поместите выбранную Вами картинку. В HTML-коде мы будем прописывать путь к этому файлу.

Тег IMG

Атрибут src

Изображение на HTML-страницу помещается при помощи тега <img>. Сам по себе этот тег ничего не значит. Ему нужны атрибуты, в которых указывается путь к файлу. Тег <img> одинарный, закрывающий тег ему не нужен.

Сама картинка не помещается на страницу. Просто браузеру дается указание где лежит картинка, как ее имя и как ее отобразить. Для указания имени и места картинки существует обязательный атрибут src (от source - источник).

Таким образом, чтобы поместить картинку на страницу, нужно прописать код:

<img src="images/visitka.jpg">

То есть, в значении атрибута src (между кавычками) мы указали, что нужный нам файл находится в папке images, а имя файла visitka.jpg. Это при условии, что (как мы говорили) и папка images и html-файл, с которым мы работаем, лежат в одной папке.

Если ваш графический файл лежит в отдельной папке, и, прописывая путь, мы должны сначала выйти из этой папки как бы на один уровень выше, а потом войти в папку images, то путь будет выглядеть так: <img src="../images/visitka.jpg">. Добавляете перед именем папки две точки и слеш.

В значении атрибута src можно указать путь на совершенно другой сайт. Например, если Вы в своем веб-документе пропиште вот такой код:

<img src="http://ulotrix.ru/images/visitka.jpg">

то ваш браузер отобразит картинку, находящуюся на этом сайте в папке images (если Вы подключены к сети Интернет).

Необходимые атрибуты

Знакомый Вам атрибут align. По умолчанию картинка распологается слева и текст ее не обтекает. Применяя этот атрибут можно выровнять картинку слева или справа и текст будет обтекать картинку. left и right наиболее популярные значения.

Чтобы текст не прилегал плотно к картинке, рекомендуется в теге <img> добавить атрибуты hspace (горизонтальное пространство) и vspace (вертикальное пространство), задающих расстояние до текста в пикселах.

Чтобы выровнять картинку по центру, нужно тег картинки заключить в тег <div> (или тег <p>, разницы нет) и придать этому тегу атрибут align со значением center.

Атрибуты height и width указывают высоту и ширину изображения. В принципе размеры можно не задавать, но все же лучше прописать их. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения.

На примере будет нагляднее:

<!-- пример номер один, с отступами и выравниванием слева -->
<p><img src="images/visitka.jpg" align="left" hspace="15" vspace="15" height="67" width="100">
Домашний кинотеатр уже давно служил для меня будильником, лучше и не придумаешь – включается в точно запрограммированное время и орет человеческим голосом на всю комнату. Тут уж не проспишь, даже если очень захочешь.</p>

<!-- приме номер два, с отступами и выравниванием справа -->
<p><img src="images/visitka.jpg" align="right" hspace="15" vspace="15" height="67" width="100">
Нащупав на столике рядом с кроватью пульт, я немного убавил звук, но полностью выключать не стал, иначе опять провалюсь в сон и продрыхну до обеда. Индексы на фондовых рынках привычно падали, курс евро по отношению к доллару слегка подрос…</p>

<!-- пример номер три, без отступов, без выравнивания -->
<p><img src="images/visitka.jpg" height="67" width="100">
Потянувшись, я встал с кровати и, напевая, отправился в ванную принимать утренний душ. Чашка горячего ароматного кофе, пончики из микроволновки…</p>

<!-- примекр четыре, выравнивание картинки по центру -->
<p align="center"><img src="images/visitka.jpg" height="67" width="100"></p>

<p>Для начала нового дня этого достаточно. Нормально позавтракать я смогу чуть позже, спустившись в небольшой, но весьма приятный ресторанчик внизу. А сейчас я прошел в кабинет и усевшись в кресло, склонился над клавиатурой… </p>

Вот как это будет выглядеть в браузере:

=============================================================================================================

kto_takoy_tamada.jpg Домашний кинотеатр уже давно служил для меня будильником, лучше и не придумаешь – включается в точно запрограммированное время и орет человеческим голосом на всю комнату. Тут уж не проспишь, даже если очень захочешь.

 

Нащупав на столике рядом с кроватью пульт, я немного убавил звук, но полностью выключать не стал, иначе опять провалюсь в сон иkto_takoy_tamada.jpg продрыхну до обеда. Индексы на фондовых рынках привычно падали, курс евро по отношению к доллару слегка подрос…

 

kto_takoy_tamada.jpgПотянувшись, я встал с кровати и, напевая, отправился в ванную принимать утренний душ. Чашка горячего ароматного кофе, пончики из микроволновки…

kto_takoy_tamada.jpg

Для начала нового дня этого достаточно. Нормально позавтракать я смогу чуть позже, спустившись в небольшой, но весьма приятный ресторанчик внизу. А сейчас я прошел в кабинет и усевшись в кресло, склонился над клавиатурой…

=================================================================================================================

Оставшиеся атрибуты

Атрибут alt задает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Или если браузер не может найти нужный файл.

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

Пример:

<img src="images/visitka.jpg" title="Визитка сайта">

Результат: (наведите курсор на картинку)

Визитка сайта


При помощи атрибута border изображение можно поместить в рамку. В значении атрибута указывается толщина рамки в пикселях.

По умолчанию рамка вокруг изображения не отображается за исключением случая, когда картинка является ссылкой. Поэтому, если рамка вам не нужна ни при каких обстоятельствах, указывайте значение border="0". Но об этом на странице, посвященной ссылкам.

Иногда нужно расположть две картинки рядом. Нет ничего роще, если Вы изучили материал выше. Просто нужно прописать два тега <img> с нужными атрибутами src один следом за другим. Этого, в принципе, достаточно. Однако картинки будут прилипать друг к другу, между ними не будет никакого пространства. Чтобы необходимое пространство появилось, нужно присовокупить атрибут горизонтального отступа hspace.

По умолчанию картинки выравниваются слева. Чтобы их выровнять по центру, заключим их в тег div (или <p>) с выравниванием по цетру. Например:

<div align="center">
<img src="http://ulotrix.ru/images/baner.jpg" hspace="10">
<img src="http://ulotrix.ru/images/baner.jpg" hspace="10">
</div>

Результат должен получится таким:

kto_takoy_tamada.jpg

А если между тегами картинок вставить тег переноса строки - <br> - то картинки расположатся строго одна над другой. Попробуйте и посмотрите - как это получится?

Ну что ж. Надеюсь все понятно. Переходим к очень важной части, к ссылкам в HTML >>


Html , Изображения , Картинки



Верстка / Html PRoHtml


«Картинки в HTML. Работаем с изображениями +» - Похожие страницы

Смена картинки по клику средствами html css Смена картинки по клику Смена картинки по клику - это уже мини сценарий, который в большинстве случаев решается использованием Java Script, позволяющим выполнять эту процедуру эффективно. Но в этом уроке речь пойдет о том, как это ...
Как быстро создать собственный баннер из любой картинки + Не расстраивайтесь, все проще, чем кажется. Попробуйте сделать это сами, следуя дальнейшим инструкциям. Я уже рассказывал о простом графическом редакторе picpick и о том, как с его помощью редактировать карт...

Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям