.
Наполним нашу страницу картинками (тэг img, border, width, height).
Автор megabax   
01.08.2009 г.
Давайте продолжим делать сайт. На нашей страничке чего то не хватает … Добрый день

Тема сегодняшнего урока: «Наполним нашу страницу картинками» (тэг img,  border, width, height).

 

Давайте продолжим делать сайт. На нашей страничке чего то не хватает …

Правильно, картинок! Поэтому изучим тэг <img>. Вот его синтаксис: <img src=адрес и имя картинки>

 

Пример тэга img

 

<img border="0" src="http://www.easyprog.ru/kb1_files/image004.jpg" width="317" height="201">

 

В данном тэге, помимо адреса местоположения картинки (URL) мы задали толщину рамки картинки (точнее, отсутствие самой рамки, так как мы задали нулевую толщину):

 

border="0"

 

Ширину

 

width="317"

 

и, наконец, высоту:

 

height="201".

 

 

Теперь немного о правилах задания пути в параметре src. Если картинка находиться на другом сайте, то путь нужно задавать полный, с URL адресом, например вот так:

 

http://www.easyprog.ru/kb1_files/image004.jpg

 

 

Совсем другое дело, если картинка находиться на нашей странице. Тогда нужно задать локальный путь, иначе, переместив страницу на другой сайт, мы будем вынуждены исправлять все адреса сайта в тэгах img. Вот таким может быть тэг <img>

 

<img border="0" src="index7.jpg" width="184" height="32">

 

 

А теперь давайте посмотрим пример (Картинку для урока можно скачать здесь):

 

<HTML>

<HEAD>

<TITLE>Урок 4. Наполним нашу страницу картинками </TITLE>

</HEAD>

<BODY>

<font size=5>

<A href=index.htm>О Компании</a><br>

<A href=news.htm>Новости</a><br>

<A href=steklom.htm>Стекломагниевый лист</a><br>

<A href=cement.htm>Цемент</a><br>

<A href=plitka.htm>Потолочная плитка</a><br>

<A href=profil.htm>Профиля</a><br>

<A href=zamki.htm>Дверные замки, ручки</a><br>

<A href=siding.htm>Сайдинг</a><br>

<A href=dekor.htm>Потолочная плика</a><br>

<A href=contacts.htm>Контакты</a><br>

<img src="girl.jpg">

</font>

</BODY>

</HTML>

 

Если вы скопируете пример в файл html и откроете его, то увидите нечто вроде:

 

 

web-программирование - это просто: скриншот примера (HTML)

 

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

Последнее обновление ( 14.10.2009 г. )