double arrow

Добавление изображения в веб-страницу


<img src=«my.jpg»>

Вместо my.jpg мы можем подставить имя любой картинки (me.gif,

main.png). Самое главное понять, что все расположенное между кавычками

– ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит

в том же каталоге (директории, папке), в которой лежит и наш документ.

Если картинка лежит в поддиректории то ссылка на неё будет выглядеть

так:

<img src=«/my/my.jpg»>

Если картинка лежит на уровень выше, а документ находится в под-

директории, то ссылка на неё будет такой:

<img src=«../my.jpg»>

Если картинка лежит на другом сайте, то путь прописывается полно-

стью:

<img src=«http://www.homepage.ru/my/my.jpg»>

Для вашего удобства кладите картинку в ту же директорию, что и до-

кумент, тогда путаницы будет меньше. Запомните: тэг img не требует за-

крывающего тэга.

<html>

<head>

<title>Мой первый шаг </title>

</head>


<body text=«#336699» bgcolor=«#000000»>

<center>

<H3>Здравствуйте, это моя первая страница.</H3>

<br>

<font color=«#CC0000»> Добро пожаловать!</font> :) </center>

<p align=«justify»>

<img src=«primtocodephoto.gif»> Я совсем недавно начал(а) знакомиться с

виртуальной жизнью, но мне по давней традиции тоже захотелось создать

свою домашнюю страничку для моих новых виртуальных друзей и знако-

мых, чтобы они могли посмотреть мои фотографии, почитать обо мне,

черкнуть пару строчек в мою гостевую книгу. А может и просто случай-

ный посетитель вдруг захочет познакомится со мной, и у меня появится

<b> еще один виртуальный друг? :)</b>

</p>

</body>

</html>

Параметры тега <img src=« »>

Параметр align есть и у картинок:

align=«left» – что картинка будет прижата к левому краю экрана, а текст

будет обтекать ее справа.

align=«right» – картинка справа, текст слева.

align=«bottom»> – текст может располагаться внизу картинки (это по умол-

чанию)

align=«middle» – посередине

align=«top» – вверху

Кроме параметра align существует еще несколько параметров:

(1) – <img src=«pr1.png» Vspace=«10»>

(2) – <img src=«pr1.png» Hspace=«30»>

(3) – <img src=«pr1.png» alt=«моя фотография»>

(4) – <img src=«pr1.png» width=«100»>

(5) – <img src=«pr1.png» height=«200»>

(6) – <img src=«pr1.png» border=«5»>

(1) – параметр vspace – задает расстояние между текстом и рисунком

(по вертикали). Расстояние задается в пикселях (pixel – минимальная еди-

ница изображения, точка. Например разрешение экрана 800х600 – 800 на

600 точек). В нашем примере расстояние равно 10 пикселям.

(2) – параметр hspace – тоже задает расстояние между текстом и ри-

сунком, но по горизонтали. Расстояние задается в пикселях. В нашем при-

мере оно равно 30 пикселям (точкам).

(3) – параметр alt – краткое описание картинки. Если навести курсо-

ром мыши на рисунок, и так подержать его (курсор) несколько секунд вы-


скочит описание картинки. В нашем случае это будет фраза – «моя фото-

графия». Если параметр alt не задавать, описания не будет. Но умные люди

говорят, что описание картинкам задавать следует (особенно, если это

кнопки), т.к. есть особенные люди, которые бродят по интернету с отклю-

ченной графикой. Без alt им не будет видно на что жать, т.к. картинка не

отображается, а при заданном alt, можно увидеть надпись, для чего она

(картинка) предназначалась.

(4) – параметр width – ширина самой картинки (в пикселях). Если ши-

рину не задавать специально, то по умолчанию она будет равна реальной

ширине картинки (а так вы можете ее сделать или уже или шире).

(5) – параметр height – высота самой картинки (тоже в пикселях). Так

же как в случае с width высоту (height) картинки можно и не задавать.

Правда, умные люди говорят, что размеры картинок следует задавать, для

тех же особенных людей с отключенной графикой...

(6) – параметр border – рамка вокруг самой картинки (в пикселях).

Можно не задавать.

Все параметры могут употребляться одновременно друг с другом,

чтобы избежать путаницы продемонстрирую наглядно на нашей странич-

ке. Введем следущие параметры для нашей картинки:

<img src=«pr1.png» align=«left» HSPACE=30 VSPACE=5 alt=«моя фо-

тография»>

Наша картинка будет прижата к левому краю экрана, текст будет обтекать

ее справа, расстояние до текста по горизонтали – 30 пикселей, по вертика-

ли – 5 пикселей (чтобы красиво все смотрелось), ну, и если вы наведете на

картинку курсор, то выскочит надпись – «моя фотография».


Сейчас читают про: