Учебник сайтостроения глава три

Создание и раскрутка сайта
Учебник Сайтостроения Глава третья: "графика"
_________________________________________________________________________________________
 
 На протяжении этой главы мы будем разговаривать о изображениях в веб-странице.
 
Изображения в документ вставляются следующим способом: 


<img src="my.jpg">


Вместо my.jpg вы можете подставить имя любой картинки  с любым расширением 
(.gif;.png;.jpeg;.bmp) но следует помнить что картинка с расширением jpg 
(jpeg) весит намного меньше чем то же изображение в .bmp следовательно в 
первом случае изображение загрузится быстрее, а это очень важно для гостей 
вашей страницы (особенно для тех кто сидит на DialUp'e). 

Самое главное понять, что все расположенное между кавычками - путь к картинке.
Наш пример говорит о том, что картинка лежит в том же каталоге (папке), в
которой лежит и наш документ. Если картинка лежит в поддиректории (в папке, 
которая лежит в вашей основной папке), то ссылка на неё будет выглядеть так: 



<img src="my/my.jpg">



Если картинка лежит на уровень выше, а документ находится в поддиректории, 
то ссылка на неё будет такой: 



<img src="../my.jpg">



Если картинка лежит на другом сайте, то путь прописывается полностью: 



<img src="http://www.homepage.ru/my/my.jpg">
 
Лучше будет если всё имя будет прописано строчными буквами, т.к. некоторые 
браузеры чуствительны к регистру(это относится и к имненю самого html документа).


Чтобы текст рапологался, например слева откартинки, надо задать атрибут algin.

<img src="pr1.png" align="left">
 
 
Текст может располагаться внизу картинки - (1), посередине - (2), и вверху - (3):


(1) - <img src="pr1.png" align="bottom">
(2) - <img src="pr1.png" align="middle">
(3) - <img src="pr1.png" align="top">



Кроме атрибута align для тэга <img> можно ввести еще несколько атрибутов: 


Атрибут vspace - задает расстояние между текстом и рисунком (по вертикали). 
Расстояние задается в пикселях или в поцентах. 
В нашем примере расстояние равно 10 пикселям. 

<img src="pr1.png" vspace="10">


Атрибут hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. 
Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам). 

<img src="pr1.png" hspace="30">


Атрибут alt - краткое описание картинки. Его можно увидеть подержав курсор несколько 
секунд на изображении. В нашем случае это будет фраза - "моя фотография". 

<img src="pr1.png" alt="моя фотография">


Атрибут width - ширина самой картинки (в пикселях). Если ширину не задавать 
специально, то по умолчанию она будет равна реальной ширине картинки. 

<img src="pr1.png" width="100">


атрибут height - высота самой картинки (тоже в пикселях). 

<img src="pr1.png" height="200">


Атрибут border - рамка вокруг самой картинки (в пикселях).Чтобы убрать 
рамку задайте атрибут border равным нулю. 


<img src="pr1.png" border="5">



Мжно одновременно употреблять несколько параметров:

<img src="pr1.png" align="left" hspace="30" vspace="5" alt="моя фотография">



Так же изображение можно зделать фоном страницы:

<body text="#336699" bgcolor="#000000" background="ваш_фон.jpg">



Атрибут background указывает на то, где лежит фоновая картинка. 




Прежде чем переходить к следующей части поэксперементируйте с изученым 
матерьялом (это способствует лучшему усваению)



_________________________________________________________________________________________
<<<Глава вторая:"простейшие"(часть№3):Назад | Далее:глава четвёртая:"ссылки">>>
Хостинг от uCoz
Обмен ссылками
