Изображения - это неотъемлемая часть любого сайта в сети интернет. Есть три типа файлов изображений, которые можно вставить на ваши страницы:
· GIF (Graphics Interchange Format)
· JPG / JPEG (Joint Photographic Experts Group)
· PNG (Portable Network Graphics)
GIF - использует всего 256 цветов и соответственно лучше подходит для рисунков с малым кол-вом оттенков. Этот формат поддерживает прозрачность изображений. JPEG - формат изображений, который использует до миллиона цветов. Обычно используется для фотографий и качественной графики(с огромным количеством оттенков). PNG - сравнительно новый формат . По многим параметрам превосходит JPEG и GIF: миллионы цветов и эффективное сжатие. Также поддерживает прозрачность.
Если изображение лежит в той же папке, что и страница, для его вставки необходимо написать:
<img src="дракоша.jpg">
В результате мы увидим:
Что нам понадобилось: элемент IMG, не имеющий закрывающего тега и атрибут SRC (сокращение от source - положение) который указывает, где находится изображение. Вы легко можете вставлять изображения, размещенные в других папках или на других сайтах. Просто укажите правильный путь (примерно так как при создании ссылок).
Вот еще несколько примеров с комментариями:
<!-- если бы изображение находилось в папке images --> <img src="images/pchela.jpg"> <!-- если б находилось на сайте www.zvirec.com --> <img src="http://www.zvirec.com/pchela.jpg"> <!-- если б находилось на сайте www.zvirec.com в папке images --> <img src="http://www.zvirec.com/images/pchela.jpg">
еще необходимые атрибуты:
ALIGN - определяет способ выравнивания картинки по горизонтали. Очень полезное свойство при обтекании картинки текстом. Обычно используютLEFT (выравнивание по левому краю, текст будет обтекать справа) и RIGHT(выравнивание по правому краю, текст обтекает слева) .Если на странице есть текст, то это обязательное свойство.
HSPACE и VSPACE - отступы в пикселях по горизонтали и по вертикали от картинки до других объектов документа. Легко запомнить название если взять и просто перевести с английского. HSPACE - Horizontal Space - горизонтальный отступ и VSPACE - Vertical Space - вертикальный отступ.
HEIGHT и WIDTH - высота и ширина изображения в пикселях. Лучше явно задавать размеры картинки в атрибутах HEIGHT и WIDTH, резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться.
пример:
<!-- первый пример с отступами и выравниванием по левому краю-->
<p align="justify"> <img src="pchela.jpg" width="65" height="59" hspace="15" vspace="15" align="left"> Любой Интернет-бизнес немыслим без сайта. Так что первым делом не мешало бы научиться создавать сайты. В данном случае фраза "научиться создавать сайты" будет означать - знать на хорошем уровне язык гипертекстовой разметки HTML и каскадные таблицы стилей CSS, которые значительно расширяют возможности HTML и позволяют создавать действительно стильные и качественные сайты.</p> <!-- второй пример с отступами и выравниванием по правому краю--> <p align="justify"> <img src="pchela.jpg" width="65" height="59" hspace="15" vspace="15" align="right"> Любой Интернет-бизнес немыслим без сайта. Так что первым делом не мешало бы научиться создавать сайты. В данном случае фраза "научиться создавать сайты" будет означать - знать на хорошем уровне язык гипертекстовой разметки HTML и каскадные таблицы стилей CSS, которые значительно расширяют возможности HTML и позволяют создавать действительно стильные и качественные сайты.</p>
<!--третий пример без отступов, с выравниванием по левому краю--> <p align="justify"> <img src="pchela.jpg" width="65" height="59" align="left"> Любой Интернет-бизнес немыслим без сайта. Так что первым делом не мешало бы научиться создавать сайты. В данном случае фраза "научиться создавать сайты" будет означать - знать на хорошем уровне язык гипертекстовой разметки HTML и каскадные таблицы стилей CSS, которые значительно расширяют возможности HTML и позволяют создавать действительно стильные и качественные сайты.</p>
Вот результат браузере:
Вот еще пара полезных атрибутов - ALT и TITLE . ALT - определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения. Смотрите пример:
