Создание линий html

Для оформления дизайна сайта с целью увеличения числа посетителей и увеличения вашего заработка в интернете существует ряд дополнительных атрибутов, с которыми мы и познакомимся в этом разделе.

В начале познакомимся с линиями html.
Для оформления страниц html линии можно сделать горизонтальными и вертикальными.
Горизонтальные разделительные линии задаются тэгом <hr> и не требует закрывающего тэга. Для линий html, также имеются дополнительные атрибуты, которые прописываются в тэге <hr>:

width – задаёт длину линии. Может быть как в пикселях, так и в процентах;
size – задаёт толщину линии. Лучше всего задавать в пикселях. По умолчанию линия имеет толщину 2 пикселя;
align — атрибут для выравнивания линии по горизонтали. Может иметь значения center, right, left:

- center — выравнивание по центру документа;
- right — выравнивание по правому краю документа;
- left — выравнивание по левому краю документа.

noshade – атрибут для формирования сплошной темной линии;
сolor — задаёт цвет линии. Работает только в Internet Explorer.

Теперь посмотрим, как это выглядит в коде html:

<hr align=»center» width=»40%» size=»5″ color=»CC0000″>

Вставим данный код в нашу html страницу.

<html>
<head>
<title>Животный мир нашего края.</title>
</head>
<body text="#FF0033" bgcolor="#66CC99">
<div align="center">
<H1>Животные, обитающие в нашей области.</H1>
<hr align="center" width="40%" size="5" color="CC0000">
<H2><font color="#0000CC">Животные леса.</font></H2>
<hr align="center" width="20%" size="5" color="CC0000">
<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>

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

Далее поговорим о вертикальных линиях html. Прописать такую линию можно несколькими способами, с помощью таблиц и с помощью стилей.
Разберём создание вертикальных линий с помощью таблиц. Код html будет выглядеть следующим образом:


<table width="40%" cellpadding="0" cellspacing="15" border="0"
align="center">
<tr>
<td width="4" bgcolor="#990000">
<img src="spacer.gif" width="4"
height="1"></td>
<td>
<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>
</td>
</tr>
</table>

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

Параметры cellpadding и border должны быть равны нулю, cellspacing определяет расстояние от текста до линии, width ширина линии.

Создать вертикальную линию можно также с помощью стилей. Код html будет иметь такой вид:


<style type="text/css">
P.line 
{

(Прописываем расположение вертикальной линии от текста.) 
border-left: solid 2px black;
(Прописываем отступ от края до текста.)
margin-left: 20px; 
(Прописываем расстояние от линии до текста)
padding-left: 7px;

}
</style>

Он прописывается в теге <head>…</head>.
Пример расположения стилей в коде html:

<html>
<head>
<title>Животный мир нашего края.</title>
<style type="text/css">
P.line 
{
 border-left: solid 2px black; 
 margin-left: 20px;
 padding-left: 7px
}
</style>
</head>
<body text="#FF0033" bgcolor="#66CC99">
<div align="center">
<H1>Животные, обитающие в нашей области.</H1>
<H2><font color="#0000CC">Животные леса.</font></H2>
<br> 
<font color="#633000"> 
<p class="line" align="justify">
<font face="Garamond,  Arial, Verdana">
Животный мир нашего края достаточно разнообразен и 
представлен беспозвоночными и позвоночными животными 
различных классов, отрядов и видов.</font></p>
<p class="line" align="justify">
<font face="Garamond,  Arial, Verdana">
На территории области учтено 54 вида млекопитающих. 
На территорииобласти обитает 200-250 видов птиц; 163 вида 
из них гнездятся на территории области, восемь видов 
встречаются только в зимнее время, 60 - во время пролета 
и сезонных миграций; 16 видов птиц области занесены в 
Красные книги бывшего СССР и РСФСР.</font></p>
<p class="line" align="justify">
<font face="Garamond,  Arial, Verdana"> 
На территории области обитает 10 видов земноводных, 
шесть видов рептилий и около 3 500 видов насекомых 
(13 видов насекомых занесено в Красную книгу бывшего 
СССР и Красную книгу России). В водоемах области обитает 
38 видов рыб, из которых наиболее распространенными 
являются карп, сазан, лещ, карась, жерех и др. Самыми 
крупными рыбами водоемов области являются сом и щука.
</font></p>
</font>
</div>
</body>
</html>

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

Я надеюсь, что этот материал Вам будет полезен и пригодится для оформления Вашего будущего сайта. На следующей странице поговорим ещё об одном дополнительном атрибуте удаление полей по краям документа.

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

Создание линий html
Создание линий html
Создание линий html
Создание линий html
Создание линий html
Создание линий 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 Яндекс.Метрика