Уроки WEB-Строительства

\|УРОК 7\| - Добавляем картинку

Вступление

Поскольку один текст - это все таки скучновато, давайте добавим картинку в нашу страничку. Работаем с vinnie.html:

<html>
 <body bgcolor=white text=black>
  <H4>Песенка Винни-Пуха</H4>
   <img src="vinnie.jpg" alt="Винни-Пух" width=232 height=304>
   <p>
    <EM>Если б мишки были пчелами</EM><br>
    <STRONG>То они бы нипочем</STRONG><br>
    <CITE>Никогда бы не подумали</CITE><br>
    Так высоко строить <SUP>дом</SUP><br>
  </p>
  <p align=center>Конец</p>
 </body>
</html>

Прежде чем запускать эту страничку, вам необходимо взять файл vinnie.jpg отсюда и скопировать его в каталог с файлом vinnie.html.

Теперь апускаем и видим следующее:

Песенка Винни-Пуха

Необходимые пояснения

В нашем документе появился новый тег <img> (обратите внимание, что он одиночный, то есть закрывающего тега у него нет).

Тег <img> внедряет в документ картинку, которая находится по пути(адресу), указанному в аттрибуте src. Сразу скажу, что аттрибут src может получать в качестве значения относительный или абсолютный путь. В нашем примере указан относительный путь (то есть предполагается, что файл с картинкой находится в том же каталоге, что и HTML-документ). Если бы мы захотели использовать абсолютный путь, то мы бы написали что-нибудь вроде:
<img src="C:\examples\vinnie.jpg">
(Это в случае просмотра странички с компьютера пользователя) или:
<img src="http://www.vinnie.ru/vinnie.jpg">
(В случае нахождения нашего HTML документа по адресу www.vinnie.ru).

Аттрибуты width и height служат для явного определения размеров(ширины и высоты) изображения. В принципе, если вы не будете указывать размер вашей картинки явно, то браузер все-равно отобразит ее верно. Однако, в случае если вы определите размер с помощью аттрибутов, то:

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


Так получается при использовании аттрибутов width и height		А так без них

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


Так получается при использовании аттрибута alt		А так без него

В заключении хотелось бы сказать, что наиболее широко распознаваемыми форматами изображений в Web являются GIF,JPG и PNG. Использование других графических форматов может привести к неправильному отображению документа браузером.

Сухой остаток

1.  Тег <img> служит для внедрения изображений в HTML-документ.
2.  Аттрибут src задает путь к файлу с изображением.
3.  Аттрибуты width и height используются для определения размеров изображения
4.  Аттрибут alt служит для определения альтернативного текста.
5.  Лучше всего использовать изображения в формате GIF, JPG или PNG.

Эксперименты

1. Попробуйте указать абсолютный путь к файлу vinnie.jpg.
2. Попробуйте задать любой другой размер изображения в аттрибутах width и height и посмотрите что получится