Для того, чтобы вставить картинку в html документ, используется тег <img> c обязательным атрибутом src, который указывает браузеру путь к файлу изабражения:
<img src="images/image1.png">
Также в качестве пути к изображению можно указать URL адрес картинки:
<img sfc="http://www.zarabotaisam.info/_ph/1/2/334807331.jpg?1407571315.png">
Существует три типа графических файлов, которые можно вставить на страницу, это GIF, JPEG и PNG.
Атрибуты тега <img>:
width - указывает размер картинки по ширине;
height - указывает размер картинки по высоте. Размеры изображения желательно указывать всегда, в противном случае документ при загрузке каждой картинки будет заново перерисовываться, что создает неприятный визуальный эффект и увеличивает время загрузки страницы. Если указать размеры меньше фактических, браузер сожмет картинку, а если указать больше, то растянет;
aling - определяет способ выравнивания картинки по горизонтали. Обычно используют: left - выравнивание по левому краю. Текст (при наличии) обтекает изображение с права; right - выравнивание по правому краю. Текст обтекает изображение слева;
vspace - создает верхний и нижний отступы;
hspace - создает отступы слева и справа;
title - всплывающая подсказка, появляющаяся при наведении курсора мыши на картинку;
alt - определяет текст, отображаемый вместо картинки, если в браузере отключена функция показа изображений;
border - позволяет создать черную рамку вокруг изображения. толщина задается в пикселях.
Пробуем сами и смотрим на результат.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>Ваш сайт</title>
</head>
<body>
<h1 aling="center">Текст заголовка</h1>
<b>текст</b>
<br>
<i>текст</i>
<p>
<u>текст</u>
<strike>текст</strike>
<p>
<font>текст</font>
<ol>
<li>текст</li>
<table>
<tr>
<td height="30" aling="center" colspan="3">
</td>
<tr>
<tr height="100">
<td width ="200" align="left"valign="top">
</td>
<td widht="300" aling="center"
valing="middle">
</td>
<td width="200" aling="right" valing="bottom">
</td>
</tr>
</table>
<p>
<img src="images/image1.jpg"
width="600" heigt="400" vspace="30"
hspace="30">
</body>
</html>
Урок шестой
| 
