Основы применения графики

Средства применения графики в HTML довольно скудны, и в принципе сводятся к вставке изображений на сайт в виде картинок или фона. Давайте познакомимся с возможностями украсить или придать сайту желаемый внешний вид.
Вставит картинку на страничку веб-сайта тег <img>, при этом, обязательному атрибуту src должно быть присвоено значение в виде имени файла картинки (при необходимости нужно будет указывать и путь к файлу). Например, рисунок ris1.gif находится в каталоге images (сам каталог images находится в том же каталоге, что и страничка веб-сайта), тогда чтобы вставить этот рисунок на сайт, нужно записать следующее
Код
<img src="images/ris1.gif">

И тогда на месте данного тега браузер отобразит рисунок.

 

автомобиль

 

Но кроме атрибута src в теге <img> можно, а, то и нужно использовать следующие атрибуты

  1. width - определяет ширину картинки, можно задать либо в пикселях, либо в процентах от ширины окна браузера;
  2. height - определяет высоту картинки, можно задать либо в пикселях, либо в процентах от высоты окна браузера;
  3. alt - определяет текст, который будет выводиться в прямоугольнике соответствующего размера на месте рисунка, если данный рисунок не будет отображен по каким-либо причинам (пользователь отключил показ рисунков у себя в браузере, произошла ошибка при загрузке рисунка или просто рисунка нет в указанном месте);
  4. border - определяет толщину рамки вокруг рисунка в пикселях;
  5. hspace - задает горизонтальный отступ картинки от других элементов веб-страницы в пикселях;
  6. vspace - задает вертикальный отступ картинки от других элементов веб-страницы в пикселях;
  7. align - управляет расположением рисунка относительно текста, он может принимать следующие значения:

    • "left" - изображение выравнивается по левому краю документа, а текст обтекает рисунок справа;
    • "right" - изображение выравнивается по правому краю документа, а текст обтекает рисунок слева;
    • "middle" - базовая линия текущей текстовой строки выравнивается с центром изображения;
    • "absmiddle" - центр текущей текстовой строки выравнивается с центром изображения;
    • "top" и "texttop" - верхняя линия текущей текстовой строки выравнивается с верхней границей картинки;
    • "bottom" и "baseline" - базовая линия текущей текстовой строки выравнивается с нижней границей картинки;
    • "absbottom" - нижняя граница текущей текстовой строки выравнивается с нижней границей картинки.

Если в атрибутах width и height тега <img> заданы величины, не совпадающие с реальными размерами картинки, то рисунок будет масштабироваться до указанных значений в атрибутах. При этом если заданы размеры большие, чем существующие размеры рисунка, то рисунок увеличится и качество ухудшится (исказится изображение или появится так называемая сетка). Что конечно не хорошо, поэтому, лучше ставить реальные размеры картинки, хотя исключения все же бывают. Если же размеры картинки в атрибутах будут заданы меньше, чем на самом деле, то рисунок отобразится с заданными размерами, но объем загружаемого трафика будет соответствовать реальному рисунку, то есть пользователь будет зря расходовать свой интернет-трафик. Поэтому лучше будет, сначала уменьшить размеры рисунка до нужных размеров, а потом уже использовать на сайте. То есть получается, в любом случае лучше отредактировать рисунок в какой-либо графической программе до нужных размеров, а потом уже вставлять это изображение на сайт.
Тегом <img> можно вставлять на веб-страничку картинки следующих форматов: jpeg, gif, png. Но браузер Internet Explorer картинки формата png может отображать не совсем правильно, в частности, при отображении бесцветной составляющей изображения могут появляться дефекты.
Например
Код
<img src="auto.gif" alt="автомобиль" width="200" height="100" border="0" hspace="10" vspace="10">

Чтобы на веб-страничке в качестве фона задать рисунок, нужно в атрибуте background тега <body> указать имя файла изображения. Например
Код
<body background="images/fonpage.gif">

При этом если рисунок меньше окна браузера, то он будет повторяться по горизонтали и по вертикали. Так же нужно учесть вариант, при котором по каким-либо причинам фоновый рисунок не загрузится и не отобразится. И тогда при неблагоприятных совпадениях содержимое веб-страницы может получиться одного цвета с фоном странички и пользователь ни чего не увидит. Чтобы этого не произошло нужно атрибутом bgcolor все того же тега <body> задать цвет фона близкий по оттенку к фоновому рисунку. Например
Код
<body background="images/fonpage.gif" bgcolor="#aabbcc">
Опубликовано 13 июня 2008 г.
Теги: html, img
Комментарии к публикации
Комментариев к публикации нет...
Вход в аккаунт
Новости сайта