Графика html-страницы. Тег IMG
Для работы с графикой в HTML применяется тег IMG.
Сейчас существует много различных форматов для хранения графики в файлах. В HTML используется три формата.
Формат GIF (Graphics Interchange Format) - разработан в 1987 году, считается устаревшим, но еще довольно широко используется. Главное достоинство формата GIF - возможность хранения анимированного изображения, чего пока нет ни в одном другом графическом формате. Формат GIF позволяет создавать в изображении "прозрачный" цвет. Места на изображении, которые закрашены "прозрачным" цветом, являются "дырками", через которые виден фон. Формат GIF отлично подходит для хранения изображений, созданных штрихом - карты, схемы, карандашный рисунок. Главный недостаток формата GIF - непригодность для хранения полутоновых изображений. Причина - GIF-изображения могут содержать не более 256 цветов, поэтому при сжатии полутонового изображения его качество станет заметно хуже.
Формат JPEG (Joint Photographic Experts Group) - разработан в 1993 году. Формат JPEG был разработан специально для хранения полутоновых изображений. Формат JPEG не поддерживает "прозрачный" цвет и анимацию.
Формат PNG (Portable Network Graphics) - разработан в 1996 году. Формат PNG объединяет достоинства форматов GIF, JPEG - он отлично подходит для хранения как штриховых изображений, так и полутоновых изображений, также поддерживает "прозрачный" цвет. Недостаток формата PNG - он не дает возможность хранить анимационное изображение.
Файлы форматов GIF, PNG имеют аналогичные расширения файлов - .gif, .png. Формат JPEG - .jpg, .jpeg, .jpe.
Главное отличие текста html-страницы от графического изображения заключается в том, что текст находится непосредственно в теле html-страницы, а изображение хранится отдельно от html-страницы и вставляется в ее тело при помощи тега IMG.
ПРИМЕР:
<p>1. <img src="image1.png"></p> <p>2. <img src="images/image2.png"></p> <p>3. <img src="http://othersite.com/img/image3.png"></p> |
- Первый пример помещает на html-страницу изображение, которое хранится в файле image1.png в той же папке, что и файл html-страницы.
- Второй пример помещает на html-страницу изображение, которое хранится в файле image2.png во вложенной папке images.
- Третий пример помещает на html-страницу изображение, которое хранится в файле image3.png, расположенном на другом сайте.
Тег IMG относится к встроенным элементам, и не может существовать "сам по себе" - тег IMG должен быть частью блочного элемента, например, абзаца (тег Р).
Атрибуты тега IMG
- ALT - "всплывающая" подсказка, снабжает изображение текстовой подписью, которая выводится браузером, если изображение недоступно и отображается в виде пустой области.
- TITLE - заголовок изображения, отображается при наведении курсором на изображение.
- WIDTH - ширина изображения.
- HEIGHT - высота изображения.
- BORDER - толщина рамки вокруг изображения.
- HSPACE - пустое поле слева и справа от изображения.
- VSPACE - пустое поле сверху и снизу от изображения.
- ALIGN - определяет положение изображения по отношению к соседним элементам, обычно - к тексту:
- top - вертикальное выравнивание по верхнему краю;
- middle - вертикальное выравнивание по центру;
- bottom - вертикальное выравнивание по нижнему краю;
- left - горизонтальное выравнивание по левому краю;
- right - горизонтальное выравнивание по правому краю;
- center - горизонтальное выравнивание по центру.
ПРИМЕР:
<p>1. <img src="images/1.png" align="left" border="2" hspace="10"> Lorem ipsum dolor ... </p> <br clear="left"> <p>2. <img src="images/2.png" align="middle" alt="img" title="image"> Lorem ipsum dolor ... </p> <br clear="all"> <p>3. <img src="images/3.png" alt="" width="300" height="300" border="1" align="right"> Lorem ipsum dolor ... </p> |
Надо помнить, что, чем больше изображение, тем дольше оно загружается в окно браузера, замедляя загрузку всей html-страницы. Поэтому, большие изображения следует оптимизировать, максимально уменьшив его "вес", но сохранив при этом приемлимое качество.