Основы HTML

  1. Термины и определения
  2. Принципы WEB 2.0
  3. Структура HTML-документа
  4. Основные метатеги
  5. Форматирование текста HTML
  6. Списки
  7. Текст фиксированного формата
  8. Выделение фрагментов текста
  9. Изменение параметров шрифта
  10. Графика
  11. Таблицы
  12. Гиперссылки
  13. Изображения-карты
  14. Фреймы

Основы CSS3

  1. Что такое CSS
  2. Синтаксис CSS
  3. Стилевые классы
  4. Комбинированные стили
  5. Таблицы CSS
  6. Правила каскадности CSS
  7. Рекомендации применения стилей
  8. Параметры шрифтов
  9. Разрывы строк, вертикальное выравнивание
  10. Параметры фона
  11. Параметры абзаца
  12. Параметры списков
  13. Параметры курсора
  14. Параметры отступов
  15. Параметры рамки
  16. Параметры выделения
  17. Параметры отображения
  18. Контейнеры


   

Графика 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>

Смотреть пример в браузере..

Тег IMG относится к встроенным элементам, и не может существовать "сам по себе" - тег IMG должен быть частью блочного элемента, например, абзаца (тег Р).

Атрибуты тега IMG

ПРИМЕР:

<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-страницы. Поэтому, большие изображения следует оптимизировать, максимально уменьшив его "вес", но сохранив при этом приемлимое качество.


TOP ↑