Изображение в HTML
Сегодня дорогие друзья, я поведаю вам интересную тему отображения в html картинки и ее настройка. Графика делает Web-страницу привликательнее для глаз, изображении на страницах помогают лучше передать суть и содержание документа. Основные форматы:
GIF - этот формат использует только 256 цветов и поддерживает прозрачность. Кроме того, GIF-файл может содержать анимацию;
JPEG - метод сжатия фотографии с потерей качества. Прозрачночть и анимация не поддерживаются;
PNG - формат хранения графики, использующий сжатие без потерь. Поддерживает прозрачность. Разрабатывался в качестве замены формата GIF.
Для размещения картинки в html существует одинарный тег <img>, сокращение от английского слова image. Тег является одинарным, так как вы могли уже понять изображение не может в одном месте начаться а в другом закончится, как допустим текст. Для того чтобы отобразить изображение на странице нам понадобится атрибут. Этот тег имеет атрибут src в котором мы и прописываем путь к картинке, относительно нашего файла где мы и размещаем картинку, пример:
<img src=”images/logo.jpg”>Чтобы задать размеры картинки у этого тега также существует атрибуты, такие как width отвечающий за ширину и height отвечающий за высоту. Эти атрибуты не обязательны, картинка и так при загрузки отобразится нам в том размере в каком она есть, но я вам советую лучше эти атрибуты использовать так как, для отображение картинки браузеру потребуется больше времени, чтобы узнать размеры и корректно отобразить изображение. Для не больших сайтов это не существенно, а если у вас будет многофункциональный сайт, он будет требовать больше времени для загрузки, что порой сильно мешает и раздражает. Так же значение атрибутов width и height могут не соответствовать реальным размерам изображения. В этом случае Web-браузер выполнит перемасштабирование. Если значение одного из параметров указать неправильно, то изображение будет искажено. Если указать только один параметр, то значение второго будет рассчитано пропорционально значению первого исходя из реальных размеров изображения.
Есть также атрибут border который задает рамку изображении, но он используется крайне редко. Ещё имеется атрибут alt, он дает описание картинки, если вдруг на вашем сайте картинка по каким-либо причинам не отобразилась, или вы отключили отображение картинок, то в том месте оно должно быть появится описание, которое вы зададите с помощью этого атрибута.
Есть такая особенность браузера, если даже картинка небольшого размера, она займет всю строку и останется много свободного пространства, чтобы этого избежать есть такой атрибут как align, он выравнивает изображение и делает его обтекаемым. Еще имеется устаревший атрибут hspace по горизонтали и vspace по вертикалиы, который отвечает за отступы прикосновения других блоков с картинкой, он используется очень редко, может вы его встретите где ни будь на старом сайте и чтоб знали что такой атрибут существует.
Чтобы сделать картинку фонам страницы можно воспользоваться атрибутом background тега <body>.
Для лучшего восприятия картики лучше еще указывать цвет фона близкий к цвету фонового изображения. По причине того, что резкий переход цветов, может вызвать неприятное мелькание. Пример:
<body background="fon.jpg" bgcolor="grey">Документ</body>
Это основы для отображения картинки, зная их вы можете смело уже работать с изображениями. Спасибо за внимание! :)
Дата создания: 06.06.2014 23:51:19
Автор: Максим Фёдоров
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.