Графика в HTML

«Графика в HTML» – шестой урок учебника HTML. В этом уроке речь пойдет о работе с веб графикой, как частью HTML страниц. Мы научимся создавать изображения в рамках HTML и настраивать их отображение.

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

Использование графики на HTML страницах.

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

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

Простота - есть гениальность.

Придерживайтесь этого правила и ваши страницы будут притягивать внимание.

Но простота и примитивность – совершенно разные понятия. Найдите баланс. Экспериментируйти для получения своей, уникальной формулы дизайнерского успеха...

Добавление изображений к html странице.

Для добавления к web–странице файла с изображением используется тег <img>, с обязательным атрибутом src, который будет указывать на файл с изображением.

<p><center><img src="../img/cat.gif" alt="Это кот "></center></p>

Форматирование изображений.

Для форматирования текста, расположенного рядом с изображением используется атрибут тега <img> – allign. Пример его работы вы можете видеть ниже:

Значение	Вид
Rigth Hspace=10px	кот кот кот кот кот кот кот кот кот кот коткот кот кот кот кот коткот кот кот кот кот кот кот кот кот кот кот
Left Hspace=3px	кот кот кот кот кот котбла кот кот кот кот котбла кот кот кот кот котбла кот кот кот кот котбла кот кот кот кот кот
Top Hspace=10px Vspace=5px	кот кот кот кот кот кот кот кот кот кот кот кот кот кот кот кот кот кот кот кот кот кот кот кот кот кот
Middle Hspace=1px Vspace=12px	кот кот кот кот кот кот кот кот кот кот котбла кот кот кот кот кот кот кот кот кот кот кот кот кот кот кот
Bottom Hspace=10px Vspace=10px	кот кот кот кот кот кот кот кот кот кот котбла кот кот кот кот кот кот кот кот кот кот кот кот кот кот кот

Для дополнительного форматирования изображений могут быть использованны атрибуты hspace и vspace, которые определяют интервал между графическим изображением и расположенным возле текстом по горизонтали и вертикали. Величина отступа задается в пикселях. В примере сверху вы можете видеть влияние этих атрибутов на форматирование.

Также форматировать изображение можно посредством атрибута border, задающего ширину рамки вокруг изображения. По умолчанию рамка вокруг изображения равна 0, а вокруг изображения, являющегося ссылкой – 2.

Аттрибуты height и width позволяют задать размер изображения по ширине и высоте. Задать размер можно как в пиксельной, так и в процентной величине. По умолчанию браузер устанавливает изображению его реальные размеры, но я вам настоятельно рекомендую всегда использовать эти атрибуты и задавать размер изображения вручную. Связанно это с тем, что при невозможности загрузить изображения браузер установит ему случайные размеры и получится пустой квадрат со случайным размером, который почти наверняка искаверкает общий каркас сайта, что приведет к неправильному отображению последнего. Если же атрибуты размера установленны, то даже при невозможности загрузки изображения каркас сайта не будет нарушен.

Атрибут ALT – указывает название изображения, которое учитывается поисковыми машинами при индексации сайта и отображается в пустом квадрате вместо изображения, в случае невозможности загрузки последнего. Использование этого атрибута я считаю обязательным, но об этом мы поговорим в разделе «Как раскрутить сайт самостоятельно и с нуля ».

Использование фона в HTML.

Одним из наиболее важных факторов графического оформления сайта является использование фона. Для создания фона, состоящего из одного сплошного цвета используется атрибут bgcolor со значением цвета. Для использования изображения в качестве фона используется атрибут background с адресом фонового рисунка. Особенностью тега background является то что он при открытии изображения помещает его в полном размере в левый верхний угол экрана и начинает его тиражировать на весь экран, что позволяет добиваться довольно интерестных эффектов. Например:

<body bgcolor="red">
<p align="center">
я текст на красном фоне
</p>
</body>

<body background=
"../img/cat.gif">
<p align="center">
я текст на фоне кота побольше
</p></body>

Из примеров хорошо видно, как браузер тиражирует изображение.

Горизонтальная линия.

Для построения горизонтальной линии используется тег <hr>. Для изменения параметров линии, а именно, толщины и длинны, используются атрибуты SIZE и WIDTH. Для выравнивания линии, относительно центра страницы используется атрибут ALIGN. Атрибут NOSHADE используется для определения, будет ли у линии тень.

<hr align="center" color="#666666" width="400">

Правильное использование графики на веб-страницах способствует созданию необходимой атмосферы на сайте. Цветовые и графические схемы необходимо подбирать в зависимости от ситуации и от нацеленности всего проекта. Например на информационных сайтах, содержащих преимущественно текстовую информацию отлично работают теплые тона, с небольшим контрастом между окотстью с содержанием текста и остальной окотстью сайта, на продающих сайтах отлично работают светлые схемы оформления с элементами высокой контрастности (красный и синий). Вообще правильный выбор дизайна сайта – это отдельная и очень объемная тема, которая с легкостью может занять целую книгу.

Графическое оформление позволит сделать ваш сайт уникальным и привлекательным. При создании графики внутри HTML страниц немаловажно проводить оптимизацию изображений для уменьшения их веса, а соответственно и скорости загрузки картинок. Для небольших изображений рекомендую использовать формат .gif, для крупных - .jpeg со средними настройками качества. .png изображения являются одними из наиболее увесистых, поэтому рекомендую по возможности отказаться от их использования.

В следующий раз мы научимся работать с таблицами в html. Правильная работа с таблицами позволяет отлично позиционировать элементы и даже создавать каркасы сайтов.

Урок 5: Гиперссылки в HTML.

Урок 6: Графика в HTML.

Урок 7: Таблицы в HTML.