Варна - 2006

Съдържание:

HTML - Въведение
HEAD
BODY - фон, текст, цветове на връзките
FONT - работа с текстове
Форматиране на параграфи
Цветове
Хипервръзки
IMG - Изображения
Таблици
Списъци
Формуляри
Линии
Фреймове
Музикален фон

Хоризонтални и вертикални линии

Таг за хоризонтална линия

  • Тага за хоризонтална линия в HTML е <hr> и той няма затварящ таг.
  • Тъй като обаче XHTML изисква всички тагове да се затварят, правилното изписване на тага за хоризонтална линия е <hr />
  • За да оформите хоризонталната линия по ваше желание трябва да използвате атрибутите на тага <hr /> със съответните стойности:
    • Атрибута width задава дължината на хоризонталната линия. Той може да приема абсолютни и относителни стойности. Абсолютните стойности са в пиксели, а относителните - в процент от дължината на екрана.
      • Например за да зададете дължина на хоризонтална линия от 250 пиксела трябва да напишете кода: <hr width="250" />
      • Ако желаете дължината на хоризонталната линия да бъде половината от дължината на екрана (50%) трябва да напишете кода:< hr width=" 50%" />
    • Ако дължината на хоризонталната линия е по-малка от дължината на екрана, тогава може да и се зададе местоположение на екрана - вляво, вдясно или в центъра. Атрибута за задаване на местоположение е align и може да приема стойности left , right и center. Например за да центрирате хоризонталната линия трябва да напишете:
      <hr align="center" />
    • За да се зададе цвят на линията се използва атрибута color, който може да приема като стойности всевъзможни цветове в 16-сетичен код. Например за да се зададе червен цвят на линия трябва да се напише кода:
      <hr color="#ff 0000" />
    • За задаване на дебелина на хоризонталната линия се използва атрибута size, който може да приема стойности в пиксели. Например за хоризонтална линия с дебелина 10 пиксела трябва да напишете кода:
      <hr size="10" />
    • Тага за хоризонтални линии <hr /> изгражда 3-измерни хоризонтални линии - те се появяват със "сянка". За да премахнете сянката трябва да използвате атрибута noshade. Този атрибут няма никакви стойности в HTML, но новата версия XHTML изисква на всички атрибути да се задава стойност, затова на атрибута noshade се задава като стойност собственото му название, например:<hr noshade="noshade" />

Изграждане на вертикална линия

  • В HTML не е предвидена специална команда за построяване на вертикална линия.
  • Затова вертикалните линии се правят по един от следните два начина:
    • Като се използва вертикална линия във вид на изображение - за целта трябва да направите вертикалната линия в някоя от програмите за изработване на изображения, да я съхраните във вид на gif, jpg или jpeg файл и да я използвате в страницата си чрез тага за показване на изображения.
      Ето пример за такава вертикална линия. Тя представлява файл в gif формат:

  • Другия начин да се направи вертикална линия е като в такава линия се превърне една от колоните на някоя таблица. За целта на колоната трябва да се зададе за фон някакъв цвят и малка ширина - например 2 пиксела.
    Ето една примерна таблица, оградена в червена рамка, в която една от колоните е превърната във вертикална линия, като и е зададен черен цвят за фон и ширина 5 пиксела.

Упражнение 19:

а) Копирайте следния текст в лявата част на прозореца по-долу и натиснете бутона над него.

<html>
<body>
<h3 align="center"> Хоризонтална линия </h3>
<hr width="250" align ="center" color="#ff0000" size="10" noshade="noshade" />
</body>
</html>

б) Направете редакция, като смените стойностите на атрибутите.

в) Копирайте следния код и натиснете бутона отгоре:

<table width="290" bgcolor="#f0f0f0" border="0" align="center" valign="top" cellpadding="0" cellspacing="3">
<tr align="left" valign="top">
<td width="135">
<font face="Arial" size="-1" color="#000000">
Това е пример за изграждане на вертикална линия чрез превръщане на колона от таблица във вертикална линия.
</font>
</td>
<td width="5" bgcolor="#000000">
</td>
<td>
<font face="Arial" color="#000000" size="-1">
<==== Тук отляво се вижда вертикална линия, която всъщност е колона от настоящата таблица със зададен черен фон и дебелина 5 пиксела.
</font>
</td>
</tr>
</table>

 

JDJ © 2006 Всички права запазени.