Свой сайт — своими руками!

XHTML →

Картинки

В этой статье мы поговорим о таком элементе веб-страницы как картинка. Мы научимся вставлять картинку на веб-страницу и поговорим о форматах, которые используются в Сети.

Для вставки картинки на веб-страницу используется тег-команда <img />. Тег имеет 3 атрибута: src, alt и title. Давайте рассмотрим пример:


<img
    src="images/sharpener.png"
    alt="Точилка!"
    title="Металлическая точилка фирмы Faber-Castell." />

Дескриптор <img /> говорит браузеру о том, что мы хотим вставить картинку. Атрибут src содержит ссылку на картинку относительно нашей веб-странички (тоесть в нашем случае картинка лежит в папке images, имеет имя sharpener и расширение .png). Атрибут alt содержит альтернативный текст, который будет выведен на экран заместо картинки, если её показать неудасться (например, если браузер не сможет обнаружить картинку на сервере или если пользователь отключил показ изображений в своём браузере). Используйте этот атрибут для описания того, что изображено на картинке. Атрибут title в качестве своего значения содержит текст, который будет выводится во всплывающем окне, при наведении мышки на картинку. Обычно он испольщуется для описания дополнительных сведений о картинке. Использовать его необязательно. Если атрибут title отстутвует, то во всплывающем окне будет показан текст, содержащийся в атрибуте alt. В результате выполнения кода мы увидим на страничке картинку:


Точилка!



Так же всегда желательно указывать размеры картинки. Для этого используйте следующий код:


style="width: 88px; height: 31;"

Вместо значения 88 укажите ширину вашей картинки, а вместо 31 — её высоту. Сам атрибут style помещается в тег <img />. Подробнее с этим атрибутом мы познакомимся при изучении CSS.

Ну а теперь поговорим о форматах. Вообще в Сети используются 3 формата картинок: GIF, JPEG и PNG. Сейчас мы рассмотрим каждый из них и узнаем, в каком случае какой применять.

Формат GIF — один из самых старых и известных графических форматов. Все файлы этого формата имеют расширение .gif. К сожалению, качество картинок в этом формате не самое лучшее, но это окупается весом картинок. Всё это зависит от того, что в GIF используется глубина цвета равная 8 битам, поэтому максимальное количество цветов ограничивается 256. GIF так же поддерживает прозрачность, анимацию и черессрочную графику (функция постепенного отображения графики в несколько проходов в процессе поступления данных), поэтому он идеален для создания небольших картинок, имеющих не так много цветов, например, баннеры.

Формат JPEG — объединённая группа экспертов по фотографиям) был специально разработан для обработки фотографий. Картинки в это формате имеют расширение .jpeg (или .jpg). Глубина цвета, используемая в этом формате — 24 бита, что позволяет использовать миллионы цветов. Фотографии в этом формате очень лёгкие, а качества теряется немного.

PNG — переносимая сетевая графика) — это формат, который был специально разработан для замены устаревшего формата GIF. PNG поддерживает 24-битную глубину цвета, поэтому изображения мало теряют в качестве, зато их вес так же хорошо уменьшается как и в GIF. Все файлы в этом формате имеют расшиерние .png. PNG, как и GIF, подерживает прозрачность и черессрочную графику, однако с помощью него нельзя содавать анимированных изображений. Стоит ещё сказать, что Internet Explorer 6 не поддерживает прозрачность у этого формата, поэтому если вы хотите использовать свойство прозрачности, используйте GIF. В остальнных случаях рекомендуется именно PNG.

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



Copyright © by svoisait.info, 2008. Все права защищены.
При полном или частичном воспроизведении материала, ссылка на сайт обязательна!

 Rambler's Top100