» » » Основы HTML (часть третья)

Основы HTML (часть третья)

Категория: Разработка сайтов / HTML

 


Изображения


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

Основы HTML (часть третья)


Для веб-сайтов используют в основном следующие расширения изображений:
GIF — подходит для изображений с небольшим количеством цветов (256 оттенков), в одном файле данного формата возможно располагать несколько изображений;
JPEG — отображает большее количество цветов подходит для фотографий, изображений с большим цветовым диапазоном, изображения данного формата имеют меньший объем по сравнению с предыдущим форматом;
PNG — сравнительно новый формат, отображает небольшое количество цветов, изображения в данном формате имеют небольшой объем, позволяет создавать анимированные изображения.

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

Теги и атрибуты


Тег IMG и атрибут SRC

Для отображения изображения используют тег <IMG>, обязательный атрибут — src, данный атрибут указывает на путь к файлу. Пример простейшего размещения рисунка
<IMG src=”image.jpg”/> — в данном случае файл image.jpg находится в корневой папке сайта.
<IMG src=”http://имя сайта/image.jpg”/> — файл находится на другом сайте.
При использовании данного тега без дополнительных атрибутов изображение размещается в верхнем левом углу.

Тег BODY

Используется для задания фонового рисунка.
<BODY background=”image.jpg”> — Фоновым рисунком заполняется мозаично вся страничка.


Атрибуты WIDTH и HEIGHT


Атрибуты width и height используются для обозначения ширины и высоты изображения. Данные атрибуты необходимо использовать всегда для более корректного отображения рисунка, это поможет отображать браузеру изображение более корректно.
Для использования данных атрибутов вам необходимо предварительно узнать ширину и высоту размещаемого изображения.
Получив данные, прописываете следующий код:
<IMG src=”http://имя сайта/image.jpg” width=”100” height=”100” />
Если вы укажете неправильные данные ширины и высоты, то браузер растянет, либо сожмет изображение, подогнав его под указанные параметры.

Атрибуты ALT и TITLE

Атрибут ALT предназначен для альтернативного текста, который отображается на месте изображения, если в браузере отключен показ изображений или картинка еще не прогрузилась.

Атрибут TITLE при наведении на изображение отображает введенный текст.

<IMG src=”http://имя сайта/image.jpg” width=”100” height=”100” alt=”здесь изображение” title=”изображение”/>

Рекомендуется использовать данные атрибуты, так как это помогает поисковому роботу индексировать ваш сайт.


Автор: команда http://the-network.ru — Создание сайта самостоятельно. Поисковое продвижение сайта.