Всем привет. Сегодня я хочу поговорить о визуальном способе подачи информации, т.е. о картинках и о способах работы с ними в HTML. Никто не будет отрицать что текст (контент) — это важнейший элемент любого сайта. Тому как правильно работать с текстом в HTML была посвящена отдельная статья.
Но сегодня речь пойдет о другом способе подачи информации — об изображениях и о том какие возможности есть в HTML для работы с ними.
Для вставки в HTML-документ изображений используется тэг:
<img src="..." width="" height="" alt="..." />
Тэг img является самостоятельным и не имеет закрывающего тэга, но по спецификации xHTML все теги, которые не имеют закрывающего тега (например, <img> или <br>) должны иметь на конце /.
По аналогии с атрибутом href у ссылки, атрибут src (source) имеет абсолютный или относительный адрес файла изображения.
Параметры width и height не являются обязательными, к тому же их можно задать через CSS.
Атрибут alt — является обязательным, он описывает содержание картинки и отображается в случаи если у пользователя в браузере отключена загрузка картинок или по какой-то причине не получилось загрузить картинку.
Также не стоит забывать что именно этот параметр используют и Яндекс и Google для поиска по картинкам.
<img src=/path/to/images/htmlcss.jpg" alt="html & css" />
в браузере:
Графические ссылки
Наряду с текстовыми ссылками вы можете также использовать графические ссылки или сочетание того и другого.
<a href="..."><img src="/path/to/images/htmlcss.jpg" alt="Все записи в рубрике html & css" /></a> <a href="...">Читать все записи <img src="/path/to/images/htmlcss.jpg" alt="Все записи в рубрике html & css" /> в рубрике html & css.</a>
в браузере:
Форматы изображений
Сейчас для работы с графикой в вебе применяются графические элементы трех форматов: GIF, JPEG (JPG) и PNG. Подробно их описывать я не вижу смысла, но не упомянуть самое главное не могу.
GIF
Изображения в формате GIF могут содержать максимум 256 цветов из всех миллионов цветов, которые ваш компьютер может отобразить.
Из-за того что количество цветов сравнительно небольшое, картинки в формат GIF получаются небольшого размера, а это всегда хорошо. Также формат GIF позволяет задавать прозрачность пикселей.
Формат GIF поддерживают анимацию, поэтому в свое время он был очень популярен для создания иллюзии интерактивности и баннеров. Но с приходом технологии flash, GIF для баннеров почти не используется. [подробнее о формате GIF]
JPG
Изображения в формате JPG поддерживают 16,7 млн. цветов и, таким образом, лучше всего подходят для реалистичных фотографий. В зависимости от настройки сжатия, качество изображения и размер исходящего файла могут варьироваться. Постарайтесь найти баланс между размером файла и качеством изображений. [подробнее о формате JPG]
PNG
Формат png достаточно молодой формат относительно первых двух. Он также поддерживает 16,7 млн. цветов как jpg и прозрачность пикселей как gif, но в отличии от них позволяет сжимать картинку без потери качества.
Пожалуй, наиболее интересной особенностью формата PNG является поддержка полупрозрачного альфа-канала. Каждый пиксель может иметь свою собственную прозрачность в диапазоне от 0 до 100% (в отличие от формата GIF, где пиксель либо прозрачный или непрозрачный).
Полупрозрачный альфа-канал поддерживают все современные браузеры (Firefox, Opera, Safari, IE7). К сожалению IE6 изначально не поддерживал альфа-прозрачность, однако есть несколько способов научить его уму-разуму, о которых я расскажу в других постах. [подробнее о формате PNG]
На сегодня все. Удачи.
↑ К оглавлению ↑
2leep.com
20 марта 2010 в 14:50
Неправильность заключается в несоответствии спецификации и рекомендациям W3C. Безусловно, все будет работать и без закрывающего слэша, но тогда говорить о валидной верстке не приходится. Так же у всех картинок вставленных в HTML обязательно должен присутствовать атрибут alt пусть даже и пустой, но быть должен.
20 марта 2010 в 18:27
А вот я одиночные теги всегда писал без всяких слешей. Выходит, что это неправильно? Вроде бы без них во всех браузерах всё нормально отображается — в чём тогда заключается эта "неправильность"?
20 марта 2010 в 20:58
Хорошо расписал для новичков) респект
В обще хтмл учится легко, как только начинаешь работать с ним плотно.
20 марта 2010 в 17:16
Спасибо, полезная статейка) черпнул для себя новой информации
21 марта 2010 в 18:36
Ещё картинки следует оптимизировать для web, чтобы весили поменьше.
21 марта 2010 в 19:42
Да, конечно. Стоит искать оптимальное соотношение вес/качество.
23 марта 2010 в 18:46
Если хотите получить доп. трафик, то оптимизируйте и картинки для, например, Я.фоток или же images.google.ru
24 марта 2010 в 14:05
Смотря какая спецификация. Для XHTML Strict конечно не валидно будет))
24 марта 2010 в 9:05
Цветов всего 7! Это Радуга, а вот оттенков миллионы)) Не путайте.
24 марта 2010 в 14:12
Да ладно?Ну ка назови нам их! В основных моделях ИСПОЛЬЗУЕМЫХ В ВЕБЕ их 3 (RGB) или 4 (CMYK). И в цветовом круге их используют явно не 7, так что знания из учебника физики за 9 класс тут не катят)))
P.S. Всем и так понятно, что остальное оттенки, вы же не придете в магазин и не скажете: "Можно мне телевизор с n количеством оттенков?"
24 марта 2010 в 14:17
Собственно по статье. Не согласен со следующим, цитирую: "с приходом технологии flash, GIF для баннеров почти не используется". Хотите целый список очень посещаемых сайтов Вам приведу, где такие баннеры даже на главной висят в неплохом количестве? А GIF баннеры на пол окна у каких-нибудь небольших компаний?
24 марта 2010 в 16:41
Спасибо за статью и инфу в ней =)
Редко использую .jpg, обычно гиф, без особой траты качества, значительно уменьшается вес, что радует пользователей )))
28 марта 2010 в 6:02
Я также редко пользуюсь, но почитать полезно.
28 марта 2010 в 16:59
за материал +1
по теме — никогда не пользуюсь png — уж очень большой размер получается.
30 марта 2010 в 1:02
Полезная статья, хоть я и по привычке все картинки делаю в гифе.
31 марта 2010 в 7:07
Рассказали бы как создавать и накладывать картинку с прозрачным фоном.
15 апреля 2010 в 12:32
Спасибо, помог пост разобраться в изображениях на сайтах, но зато в рисунках на бумаге я ххорошо разбираюсь)
16 апреля 2010 в 18:00
Я тоже редко когда закрываю, но вот последнее время, стараюсь в конце таких тегов как бр ставить слеш в конце. Приучаюсь к грамате)
22 апреля 2010 в 20:46
Учиться нужно всегда, вроде знал, а оно не совсем так.. Блин! Придется проставлять слеши… ))
Спасибо, почерпнул пару моментов.
01 мая 2010 в 13:24
У меня вопрос: как сделать рамку картинке? Нет, я знаю, что можно как то в фотошопе, но им совершенно не владею. Можно это как то на простеньком html написать?
04 мая 2010 в 10:26
только не html а css. Пример:
img {border: 1px solid #666}
это правило обрамит все картинки на сайте серым бордюром в 1 пиксель
Если надо обвести бордюром только одну или несколько картинок следует прописать в css-файле класс и присвоить его нужным картинкам.
05 мая 2010 в 6:53
Тут ты прав, для инета и мира ИТ используются именно то, что ты описал. Но я живу в реальном мире и смотрю на радугу и никак не вижу там больше 7 цветов). Я конечно понимаю, что манипулируя 3 или 4 цветами на экране или бумаге можно сделать любой оттенок, но цветов 7 так было задумано природой.
07 мая 2010 в 6:57
Спасибо, за информацию, благодар вашему блогу начинаю справляться с HTML
19 августа 2010 в 14:56
PNG отличный формат. Качество хорошее и весит немного. Одна беда — валидно подружить PNG и IE не получается (((
07 октября 2010 в 8:31
Мне вот тоже png нравится, только вот сжать его нормально не получается. Если нетрудно, подскажите программы для сжатия png.
07 октября 2010 в 20:21
Я тоже за jpg.
08 октября 2010 в 20:21
jpg мне больш удобный,наверно привык уже к нему просто)
09 ноября 2010 в 0:11
Ну разве что на заброшенных западных сайта
они не особенно торопятся менять, хотя и наших хватает с графикой gif
11 ноября 2010 в 14:45
спасибо за статью, понравилась, все понятно
про png слышала много хорошего
25 ноября 2010 в 13:08
Спасибо за полезную информацию! Из всего перечисленного мне ближе всего jpeg и gif, но png тоже хорошая штука!
05 марта 2011 в 1:27
PNG не всегда оправдан,
но если случаи когда это действительное наиболее оптимальное решение,
при верстке в большинстве случаев не использую
31 мая 2011 в 22:24
Какие вы знаете Форматы изображений используемых в HTML?????
плиз помогите
31 мая 2011 в 23:40
а вы статью читали? если нет — рекомендую
30 августа 2011 в 14:53
Пытаюсь учить HTML, PHP, настроил httpd.conf и php.ini, как будто все работает. Вставляю картинку в HTML код и она не отображается во всех браузерах, а если сделать ее фоновой то тогда видно. Где я "не донастроил"?
30 августа 2011 в 15:01
Код в студию, а то телепатов тут нет.
30 августа 2011 в 16:17
<html>
</H1>
<head>
<title>Тесты</title>
</head>
<body text="#660000" bgcolor="#ffffcc">
<center>
<H1>Пробы что-то написать!
<img scr="htmlcss.jpg" alt="какой-то коментарий">
</body>
</html>
30 августа 2011 в 16:26
Ну тут все предельно просто. Обрати внимание на то как ты пытаешься задать путь к картинке. Должно быть src="htmlcss.jpg"
У тебя ошибка в написании атрибута.
30 августа 2011 в 16:31
и почему так фон есть, а картинки нет?
<html>
</H1>
<head>
<title>Тесты</title>
</head>
<body text="#660000" background="htmlcss.jpg">
<center>
<H1>Пробы что-то написать!
<img scr="htmlcss.jpg" alt="какой-то коментарий">
</body>
</html>
30 августа 2011 в 16:37
еще раз говорю <img SRC="htmlcss.jpg" alt="какой-то коментарий"> смотри внимательней
30 августа 2011 в 16:39
Огромное спасибо!!!
))
05 декабря 2011 в 17:12
Только недавно создала свой блог, поэтому много чего еще туговато доходит. А вообще спасибо. За это не знала.