C, PHP, VB, .NET

Дневникът на Филип Петров


* Вмъкване на картинки

Публикувано на 20 август 2009 в раздел ХHTML.

Обикновено в страниците в интернет има много картинки. Това са не само снимки, но и много графики, които оформят менюта, рамки, прозорци и т.н. Има два метода за добавяне на картинки в XHTML. Първият е чрез наложилият се масово, но нестандартен таг <img>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<title>Пример за вмъкване на снимка</title>
	</head>
	<body>
		<p><img src="imagename.jpg" alt="Някаква снимка" /></p>
	</body>
</html>

В случая файлът imagename.jpg трябва да се намира в същата директория, в която е и html файла, който ще се отваря. Ако желаете можете и да укажете пълния път до изображението (http://www.domain.dom/directory/imagename.jpg). По принцип са позволени jpg, gif, png, bmp и някои други стандартни формати. Атрибутът "alt" показва текст за браузъри, които не поддържат графики. Той освен това е много полезен и при индексиране на картинките от ботове на търсачки. Появява се и като задържите мишката си върху картинката.

Стандартният и с по-новите версии на XHTML скоро задължителен начин за добавяне на картинка е:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<title>Пример за вмъкване на снимка</title>
	</head>
	<body>
		<p>
		<object data="imagename.jpg" type="image/jpg">
			Някаква снимка
		</object>
		</p>
	</body>
</html>

Това е абсолютно еквивалентен начин на първия, но е силно препоръчителен. В по-нови версии на стандарта XHTML тагът <img...> ще изчезне.

Можем и да разтягаме и намаляваме картинките. Това се осъществява с атрибутите width и height:

<object data="imagename.jpg" type="image/jpg" width="48" height="48">
	Някаква снимка
</object>

Този метод въобще не се препоръчва. Обикновено браузърите не скалират изображението добре и често то излиза с лошо качество. Силно препоръчваме винаги да скалирате сами изображението, да го обработвате с редактори така, че да е в добро качеството му и накрая да го вмъквате в реални размери.

 



Добави коментар

Адресът на електронната поща няма да се публикува


*