Фото,рисунки и другая графика-важная деталь в оформлении страницы.Без них сайт выглядит менее проработанным,но и слишком награмождать сайт графикой не стоит.Для того,что бы поместить фото на страницу применяется тег <img src="имя">. Eсли ваше изображение называется к примеру foto.jpg, то запись будет такая: <img src="foto.jpg">
Файл который вы хотите вставить в страницу должен находиться в папке, где находятся все документы связанные с сайтом,вставить его туда можно простым копированием, если файл находится в другой папке,то надо указать путь к нему вот так: <img src="../папка/имя">
Фото или рисунок должны быть с расширением "jpg"(jpeg) , "gif" , "png".Обратите внимание на соответствие расширения рисунка в исходной папке и в теге для вставки. К примеру,если файл в папке называется ="foto.jpg" а в теге="foto.JPG", то браузер посчитает их за разные рисунки и вставка не получится.
Если изображение находится на другом сайте в интернете,то для вставки на ваш сайт необходимо указать полный адрес этого изображения.Адрес можно узнать из адресной строки браузера.
Желательно указать ширину width="?" и высоту height="?" рисунка в пикселях,к примеру <img src="?.jpg" width="?" height="?">. Если ваш сайт состоит из достаточного количества ячеек таблицы, то вам не составит большого труда разместить изображение там где вам надо.Если вам не удается разместить там где бы вы хотели,тогда надо воспользововаться дополнительными средствами.Для этого служит тег align="?" со значениями "left", right", "bottom", "middle", (слева,справа,снизу,середина).
Бывает ситуация когда вставляемое изображение меньше чем ячейка таблицы и в этом месте образуется пустое место.Можно решить зту пустоту заполнением текста ,следующего за картинкой.Ниже показан пример обтекания картинки :
 Там ,где вы хотите чтобы текст обтекал рисунок справа ,надо вставить следующий атрибут CSS :<img src="имя рисунка.формат" width=220 height=150 border=0 style="float: left; margin: 20px;"> Если вам надо чтобы текст обтекал слева ,надо заменитьstyle="float: left; на style="float: right; .Свойство margin служит для установки величины отступа рисунка от каждого края других элементов. |
Некоторые браузеры помещают картинку в рамку.Что бы ее не было поместите в тег <img src="?.jpg" значение border="0"> вот так
<img src="?.jpg"border="0">
Также в этом теге можно использовать параметр alt или title="текст",при наведении мышкой на картинку будет всплывать текст который вы напишите.
Что бы вставить рисунок на страницу в качестве фона применяется параметр background,который надо поместить в тег body <body background="имя рисунка">
И в заключении напишем пример вставки картинки в HTML-страницу.
<html>
<head>
<title>Вставка фото</title>
</head>
<body>
<center><img src="23.gif" border="0" width="70" height="50">
</center>
</body>
</html>
А это результат
