Хоризонтални линии

Езикът HTML позволява да се изчертават хоризонтални линии с елемента <HR>. Този елемент няма съответен затварящ елемент, но има някои атрибути.

  • Дължината на линията се задава с атрибута WIDTH= на елемента <HR>. Дължината можете да зададете в пиксели или в проценти от ширината на екрана. Нека начертаем 2 линии, едната с дължина 100 пиксела, а другата 100% от ширината на екрана:

<BODY>
<HEAD>
<TITLE> Хоризонтални линии </TITLE>
<HEAD>
<BODY>
<HR WIDTH=100>
<HR WIDTH=100%>
</BODY>
</HTML>

Резултатът е следния: 



  • Когато променяте размера на прозореца на браузъра втората линия ще се променя с него, докато първата ще си остане 100 пиксела. Обърнете внимание, че линиите се подравняват в средата по подразбиране. Ако искате да промените това положение трябва да използвате атрибута ALIGN, и неговите параметри left, center и right, съответно за подравняване вляво, в средата и вдясно на страницата. Параметъра center спокойно можете да го пропуснете, защото линията така или иначе се подравнява в средата при липсата на атрибута ALIGN. Сега да начертаеме две линии с дължина по 300 пиксела и да ги подравним съответно вляво и вдясно:

<BODY>
<HEAD>
<TITLE> Хоризонтални линии </TITLE>
<HEAD>
<BODY>
<HR WIDTH=300 ALIGN=“left“>
<HR WIDTH=300 ALIGN=“right“>
</BODY>
</HTML>

 



  • Дебелината на линията се променя с атрибута SIZE=“ „. Параметрите на SIZE се задават в пиксели. Например SIZE=5 означава, че линията е с дебелина 5 пиксела. Ето какво представлява такава линия с дължина 80%, подравнена в средата:

<BODY>
<HEAD>
<TITLE> Хоризонтални линии </TITLE>
<HEAD>
<BODY>
<HR WIDTH=80% SIZE=5>
</BODY>
</HTML>


  •     Ако зададем и атрибута  NOSHADE линията ще се покаже плътна, без сянка.

<BODY>
<HEAD>
<TITLE> Хоризонтални линии </TITLE>
<HEAD>
<BODY>
<HR WIDTH=80% SIZE=5>
</BODY>
</HTML>


  •     Цвят на линията можете да зададете с COLOR. Ето една синя линия с дебелина 8 пиксела и ширина 90%:

<BODY>
<HEAD>
<TITLE> Хоризонтални линии </TITLE>
<HEAD>
<BODY>
<HR WIDTH=90% SIZE=8 COLOR=“#0000FF“>
</BODY>
</HTML>

Вашият коментар