Графика на HTML- странице
Графика на HTML- странице задается так: <img src=images/имя рисунка.jpg>
Тег <img> указывает браузеру, что на странице присутствует изображение. Обязательный атрибут этого тега src (source - источник). Закрывающего тэга нет.В зависимости от того, где находится изображение, пути прописываются следующим образом:
<img src=название рисунка.jpg> - изображение находится в той же папке, в которой находится и сама страница;
<img src=имя папки/название рисунка.jpg> - изображение находится там же, где Web-страница, но в отдельной папке;
<img src=http://www.название сайта.ru/имя папки/название рисунка.jpg> - изображение находится на другом сайте.
Аргумент align и его значениями left, right, top, middle определяют положение рисунка на странице:
<img src=picture.jpg align=left> - изображение прижато к левому краю страницы;
<img src=picture.jpg align=right> - изображение прижато к правому краю;
<img src=picture.jpg align=top> - вверху, над текстом;
<img src=picture.jpg align=middle> - посредине, текст обтекает его с обеих сторон.
Еще несколько важных параметров:
<img src=picture.jpg vspace=10> - задает расстояние между верхней и нижней строчками текста и рисунком по вертикали пикселях;
<img src= picture.jpg hspace=30> - задает расстояние по горизонтали;
<img src= picture.jpg width=100> - ширина картинки. Если ее не задавать, то, по умолчанию, она будет равна реальной ширине картинки;
<img src=picture.jpg height=200> - высота картинки;
<img src=picture.jpg border=5> - рамка вокруг картинки;
<img src= picture.jpg alt="моя фотография"> - краткое описание картинки. Если навести курсором мыши на рисунок, выскочит описание картинки.
Лучше чтобы элемент <img> был помещен внутрь любого блочного элемента, например <p>…</p> или <div>...</div>. Так легче регулировать положение рисунка на странице:
<p align=center> img src=picture.jpg </p> - по центру;
<p align=left> img src=picture.jpg </p> - по левому краю;
<p align=right> img src=picture.jpg </p> - по правому краю.
Вставляем рисунок на страницу:
<html>
<head>
<title>вставляем рисунок на страницу</title>
</head>
<body bgcolor=# FAF0E6>
<img src=images/03.gif align=left height=200 hspace=30 vspace=5 alt="расслабься">
<center><h2>Привет всем!</h2></center>
<p align=justify>У многих моих друзей и знакомых есть свои страницы в Internet. А я хуже? Начал делать свой сайт.</p>
<p align=center><font color=#CC0000 size=+1><b><i>Учу HTML! </b></i></font></p>
</body>
</html>
Cмотрим, что получилось
Рисунок можно назначить фоном страницы - <body background = images/picture.jpg>. Но об этом чуть позже.
