Графическое оформление

Согласитесь, что при добавлении цветов, вид нашей странички изменился к лучшему. Но всё равно чего-то не хватает. Как Вы думаете, что бы нам ещё добавить? Правильно. Не достает графического оформления, то есть html картинки. В этой главе мы и займёмся изучением добавления графики html для улучшения дизайна ресурса и увеличения посещаемости, а следовательно и увеличение вашего заработка в интернете. В этом нам поможет атрибут img src. html код расположения картинки на сайте выглядит так:

<img src=»электронный адрес картинки «>

Тэг img не требует закрывающего тэга.

И так, чтобы показать, как расположить картинку на нашей странице, я скачал её с Интернета и с помощью программы Фотошоп отредактировал ее и уменьшил до нужных размеров. Затем закачал эту картинку на хостинг сайта. Как это сделать я описал в разделе Загрузка файлов по ftp. Теперь адрес, где размещена эта картинка, вставляем  в код html:

<img src=»http://rabotalegko.com/fotik/foto-235.gif«>

Полученный html код вставляем на нашу страничку:

<html>
<head>
<title>Животный мир нашего края.</title>
</head>
<body text="#FF0033" bgcolor="#66CC99">
<div align="center">
<H1>Животные, обитающие в нашей области.</H1>
<H2><font color="#0000CC">Животные леса.</font></H2>
<br> 
<font color="#633000"> 
 <p align="justify"><font face="Garamond,  Arial, Verdana">
<img src="http://rabotalegko.com/fotik/foto-235.gif">
Животный мир нашего края достаточно разнообразен и 
представлен беспозвоночными и позвоночными животными 
различных классов, отрядов и видов.</font></p>
 <p align="justify"><font face="Garamond,  Arial, Verdana">
На территории области учтено 54 вида млекопитающих. 
На территорииобласти обитает 200-250 видов птиц; 163 вида 
из них гнездятся на территории области, восемь видов 
встречаются только в зимнее время, 60 - во время пролета 
и сезонных миграций; 16 видов птиц области занесены в 
Красные книги бывшего СССР и РСФСР.</font></p>
 <p align="justify"><font face="Garamond,  Arial, Verdana"> 
На территории области обитает 10 видов земноводных, 
шесть видов рептилий и около 3 500 видов насекомых 
(13 видов насекомых занесено в Красную книгу бывшего 
СССР и Красную книгу России). В водоемах области обитает 
38 видов рыб, из которых наиболее распространенными 
являются карп, сазан, лещ, карась, жерех и др. Самыми 
крупными рыбами водоемов области являются сом и щука.
</font></p>
</font>
</div>
</body>
</html>

посмотреть результат

Для того чтобы расположить весь текст рядом с картинкой html, воспользуемся услугами атрибута align, который отвечает за выравнивание картинки html. Так как картинку мы расположили слева, то к align подставим left. Это значить, что текст у нас выравняется по левому краю относительно картинки. Если подставить к align атрибут right, то текст у нас выравняется по правому краю относительно картинки.
Для улучшения расположения и дизайна картинки подставим несколько атрибутов для тэга <img>.

vspace=»15″ — задает расстояние между текстом и рисунком по вертикали;
hspace=»25″ — задает расстояние между текстом и рисунком по горизонтали;
width=»100″ширина картинки;
height=»200″высота картинки.
Также, по желанию, можно изменить ширину рамки вокруг картинки или совсем её убрать. Это делается с помощью атрибута border. Если Вам не нравиться цвет рамки html, то его также можно изменить благодаря атрибуту bordercolor. Все изменения производятся в пикселях.

Теперь оформим всё это в виде кода html:

<img src=»http://rabotalegko.com/fotik/foto-235.gif» align=»left» hspace=»25″ vspace=»15″ border=»3″ bordercolor =»#0000CC»>

И вставим в нашу страничку:

<html>
<head>
<title>Животный мир нашего края.</title>
</head>
<body text="#FF0033" bgcolor="#66CC99">
<div align="center">
<H1>Животные, обитающие в нашей области.</H1>
<H2><font color="#0000CC">Животные леса.</font></H2>
<br> 
<font color="#633000"> 
 <p align="justify"><font face="Garamond,  Arial, Verdana">
<img src="http://rabotalegko.com/fotik/foto-235.gif" 
align="left" hspace="25" vspace="15" border="3" 
bordercolor ="#0000CC">
Животный мир нашего края достаточно разнообразен и 
представлен беспозвоночными и позвоночными животными 
различных классов, отрядов и видов.</font></p>
 <p align="justify"><font face="Garamond,  Arial, Verdana">
На территории области учтено 54 вида млекопитающих. 
На территорииобласти обитает 200-250 видов птиц; 163 вида 
из них гнездятся на территории области, восемь видов 
встречаются только в зимнее время, 60 - во время пролета 
и сезонных миграций; 16 видов птиц области занесены в 
Красные книги бывшего СССР и РСФСР.</font></p>
 <p align="justify"><font face="Garamond,  Arial, Verdana"> 
На территории области обитает 10 видов земноводных, 
шесть видов рептилий и около 3 500 видов насекомых 
(13 видов насекомых занесено в Красную книгу бывшего 
СССР и Красную книгу России). В водоемах области обитает 
38 видов рыб, из которых наиболее распространенными 
являются карп, сазан, лещ, карась, жерех и др. Самыми 
крупными рыбами водоемов области являются сом и щука.
</font></p>
</font>
</div>
</body>
</html>

посмотреть результат

Также картинку можно сделать фоном html документа. Это делается с помощью атрибута background и прописывается для тэга <body>:

<body text=»#FF0033″ bgcolor=»#66CC99″ background=» http://rabotalegko.com/fotik/foto-236.gif«>

Теперь вставим его в код html нашей странички.

<html>
<head>
<title>Животный мир нашего края.</title>
</head>
<body text="#FF0033"  bgcolor="#66CC99" 
background="http://rabotalegko.com/fotik/foto-236.gif">
<div align="center">
<H1>Животные, обитающие в нашей области.</H1>
<H2><font color="#0000CC">Животные леса.</font></H2>
<br> 
<font color="#633000"> 
 <p align="justify"><font face="Garamond,  Arial, Verdana">
Животный мир нашего края достаточно разнообразен и 
представлен беспозвоночными и позвоночными животными 
различных классов, отрядов и видов.</font></p>
 <p align="justify"><font face="Garamond,  Arial, Verdana">
На территории области учтено 54 вида млекопитающих. 
На территорииобласти обитает 200-250 видов птиц; 163 вида 
из них гнездятся на территории области, восемь видов 
встречаются только в зимнее время, 60 - во время пролета 
и сезонных миграций; 16 видов птиц области занесены в 
Красные книги бывшего СССР и РСФСР.</font></p>
 <p align="justify"><font face="Garamond,  Arial, Verdana"> 
На территории области обитает 10 видов земноводных, 
шесть видов рептилий и около 3 500 видов насекомых 
(13 видов насекомых занесено в Красную книгу бывшего 
СССР и Красную книгу России). В водоемах области обитает 
38 видов рыб, из которых наиболее распространенными 
являются карп, сазан, лещ, карась, жерех и др. Самыми 
крупными рыбами водоемов области являются сом и щука.
</font></p>
</font>
</div>
</body>
</html>

посмотреть результат

На следующей странице мы окунёмся с Вами в изучение материала про ссылки.

Поделиться в соц. сетях

Графическое оформление
Графическое оформление
Графическое оформление
Графическое оформление
Графическое оформление
Графическое оформление

Оставить комментарий

http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Goon Каталог сайтов Рейтинг@Mail.ru Яндекс.Метрика