2015-06-28
1091
<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 пикселей (чтобы красиво все смотрелось), ну, и если вы наведете на
картинку курсор, то выскочит надпись – «моя фотография».
