Статья рассказывает, как размещать графику на сайтах используя HTML-теги. Статья будет полезна начинающим веб-дизайнерам, а так же художникам, которые размещают свои работы в сети Интернет.

Нередко приходиться видеть, как художники, которые не работают с HTML и не занимаются дизайнами сайтов, не представляют, как закодировать элементарные изображения на веб-страницах. Ниже приведена достаточно полная информация по этому вопросу. Возьмем для примера стандартный HTML код, описывающий какую-либо картинку:
< IMG SRC="Samples_for_site/A_little_sample.jpeg" WIDTH="193" HEIGHT="231" ALT="Samples_alternatt" VSPACE="3" HSPACE="1" BORDER="4" >

IMG: Это HTML-тег, сообщающий браузеру, что используется графическая информация, и что ее необходимо загружать в веб-страницу.

SRC: свойство IMG-тега, указывающее имя графического файла или ссылку на него. В нашем примере, название изображения - A_little_sample.jpeg, а расположено оно в каталоге Samples_for_site. Как имя файла, так и ссылка на него при указании должны заключатся в кавычки. Обратите внимание, что названия файлов и их расширения регистрозависимы.

WIDTH / HEIGHT: данные теги определяют размеры графического изображения и указываются в пикселах. Если параметры высоты и ширины не указаны, используются по-умолчанию параметры самого изображения. Причем в таком случае загрузка страницы происходит гораздо быстрее, чем с нестандартной высотой или шириной.

ALT: содержит текстовую информацию об изображении и должен быть указан в кавычках. Это поле служит для оповещения пользователей о содержании картинки, если они отключены в его браузере, этот же текст используется при просмотре страницы в текстовом редакторе. Этот параметр незаслуженно пропускается многими программистами. А ведь значительное количество поисковых роботов индексируют и альтернативны текст картинки, увеличивая число потенциальных посетителей. При использовании браузера IExplorer альтернативный текст картинки отображается и при наведении на нее курсора, не забывайте, что вы можете использовать это для дополнительной рекламы или информации.

BORDER: Начинающие кодеры также пропускают это свойство. Если вы встраиваете свое изображение в другое или хотите, чтобы оно слилось с фоном обязательно установите этот параметр на «0». В противном случае ваше изображение будет обведено ободком толщиной в пикселах равной указанному параметру. Цвет границы совпадает с цветом ссылок.

HSPACE / VSPACE: наиболее эффективны при создании красивых дизайнерских решений, определяют горизонтальные и вертикальные отступы от изображения. Эта функция может быть полезна в случаях, когда вы не хотите, чтобы текст прилегал к изображению вплотную.