HTML. Вставляем картинки.

     Для вставки картинки используется следующий тег <img src="kartinka.jpg">, где kartinka.jpg и есть имя файла нашей картинки. Вообще, всё что расположено между кавычками- есть наш путь к картинке. В зависимости от того, в какой директории (папке, каталоге), поддиректории лежит ваша картинка, будет меняться ваш путь. Обычно эта папка называется: images. Вспомните, в разделе- с чего начать? , мы создали папку html- это и есть наша директория. В ней надо создать папку images- это поддиректория. В неё, и надо размещать картинки. Тогда, будет выглядеть так: <img src="images/kartinka.jpg">. Обратите внимание на то, что имена файлов картинок чувствительны к регистру, т.е. kartinka.jpg, kartinka.JPG и т.п.- это разные файлы.

Пример:

<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
Наша картинка:<br>
<img src="images/21342341.gif">
</body>
</html>
 

Результат:

Наша картинка:

 

     Так же, картинку можно отобразить слева, справа от текста и т.д. Такой атрибут, как align есть и у картинок:
<img src="kartinka.jpg" align="left">- картинка будет прижата к левому краю, а текст будет обтекать ее справа
<img src="kartinka.jpg" align="right">-картинка будет прижата к правому краю, а текст будет обтекать ее слева
<img src="kartinka.jpg" align="bottom">- внизу
<img src="kartinka.jpg" align="middle">-посередине
<img src="kartinka.jpg" align="top">-вверху

Пример:

<html>
<head>
<title>Заголовок документа </title>
</head>
<body>
<p align="justify">
<img src="images/21342341.gif" align="right" >   Как Вы видите, текст отображается слева от картинки, соответственно сама картинка, находится справа.
</p>
</body>
</html>

 

Результат:

Как Вы видите, текст отображается слева от картинки, соответственно сама картинка, находится справа.


 

     Существуют еще несколько атрибутов для тега <img>: vspace, hspace, alt, width, height, border.
<img src="kartinka.jpg" vspace="15">- задает расстояние (в пикселях) между текстом и рисунком по вертикали.
<img src="kartinka.jpg" hspace="30">- задает расстояние (в пикселях)  между текстом и рисунком по горизонтали.
<img src="kartinka.jpg" width="100">- задает ширину картинки (в пикселях).
<img src="kartinka.jpg" height="200">- задает высоту; картинки ( в пикселях).
<img src="kartinka.jpg" alt="описание картинки">- показывает краткое описание картинки при; наведении курсором мыши на рисунок (в некоторых браузерах не работает, лучше смотреть через IE).
<img src="kartinka.jpg" border="5">- задает рамку вокруг самой картинки (в пикселях).

Пример:

<html>
<head>
<title>Заголовок документа </title>
</head>
<body>
<p align="justify">
<img src="images/21342341.gif" align="right" vspace="15" hspace="30" width="100" height="100" alt="описание вашей картинки" border="3">Как Вы видите, текст отображается слева от картинки, соответственно сама картинка, находится справа. Расстояние   между текстом и рисунком по вертикали равно 15, по горизонтали- 30, сам рисунок мы сделали размером 100*100, а рамку вокруг  картинки-3.
</p>
</body>
</html>

 

Результат:

описание вашей картинкиКак Вы видите, текст отображается слева от картинки, соответственно сама картинка, находится справа. Расстояние между текстом и рисунком по вертикали равно 15, по горизонтали- 30, сам рисунок мы сделали размером 100*100, а рамку вокруг картинки-3.


 

 
Загрузка...