dzekson - урок 9 изображения

html - изображения и фотографии

Образы (изображения фотографии) страницы - это основа любого веб-дизайнера , поэтому важно использовать их должным образом .

Для того что бы поместить изображение на сайте , необходимо знать , где этот графический файл находится - URL (унифицированный указатель информационного ресурса).

Для того что бы поместить изображение на веб-странице используется тег-<img/> .

Он так же , как и тег <br/> не требует завершающего тега .

html - код изображения :

результат на странице :

html - url источника

Источники изображения url могут быть локальными или глобальными , что означает : файлы изображения , которые вы хотите отобразить на вашем сайте могут находится на вашем компьютере (локально) или в другом месте , на другом сайте (глобально) .

Местные Src	Описание Местоположения
src="sunset.gif"	картина файл находится в том же каталоге, что и .html файл
src="pics/sunset.gif"	изображение находится в файле фотокаталог
src="../sunset.gif"	картина находится на одну папку "вверх" от .html файл
src="../pics/sunset.gif"	изображение находится в файле фотокаталог одна папка "вверх" от .html файл.

У каждого URL формата есть свои плюсы и минусы ,

Используя url изображений находящихся на других веб-сайтах вы можете столкнутся с тем что изображение в один прекрасный момент может стать не доступно (файл на том сайте может быть перемещен в другое место или совсем удален )

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

html - атрибуты изображения : height и widht

Атрибуты height и widht предназначены для определения высоты и ширины изображения .

Эти атрибуты могут задаваться как в процентном соотношении . так и в пикселях .

пример :

результат:

Выше мы использовали значение пикселей для задания ширины и высоты изображения .

height="50" - сколько пикселей в высоту

widht="100" - сколько пикселей в ширину

Значения высоты и ширины так же может быть задано в процентах .

Значение в процентах , относительно родительского элемента html (обычно тела) , что означает если у вас есть родительский элемент например <body> с разрешением экрана (1024 х 768) , то изображение с высотой и шириной 100% будет занимать все тело элемента т.е. (1024 х 768)

В примере ниже мы поместим нашу картинку в таблицу размер которой 200 пик.. высота и 400 пик.. ширина :

<tr>

<td>

</td>

</tr>

</table>

результат :

Как видим изображение заняло все пространство таблицы т. е. 200 х 400 пикселей .

html - атрибут alt

Атрибут alt определяет альтернативный текст , который будет отображаться если по какой-то причине браузер не может найти изображение или не может отобразить данный формат изображения (не поддерживает) ну и по другим причинам .

пример :

результат на странице :

html - выравнивание изображения по горизонтали

По умолчанию изображения размещаются по левому краю , а вот если вам нужно разместить его например по центру или по правому краю используется атрибут align .

пример выравнивания изображения по правому краю :

результат :