Списъци

Често в HTML-страниците се прави изброяване на някакви елементи и в тези случаи е подходящо да се използват специалните тагове на HTML за списъци, тъй като това придава по-подреден вид на страницата.

Могат да се изработват три основни вида списъци:

- неподредени
- подредени
- дефиниращи



1. НЕПОДРЕДЕНИ СПИСЪЦИ

Неподреден е списъка, в който елементите, които се изброяват, не са номерирани чрез арабски цифри, римски цифри или букви.
Кода за такъв списък е следния:

<ul>
   <li>Първи елемент от списъка</li>
   <li>Втори елемент от списъка</li>
   <li>Трети елемент от списъка</li>
</ul>

При задаване на този код браузъра изобразява списъка с автоматичен отстъп от лявото поле. Не е нужно и да се изписва тага за преминаване на следващ ред <br />, тъй като това също става автоматично. Автоматично се добавя и по един празен ред над и под списъка.

Знака, който се появява пред всеки ред в списъка, е по подразбиране черен запълнен кръг. Ако желаете да използвате други символи трябва да ги зададете като стойности към атрибута type на тага <ul>.
Възможните стойности са три:

- disc (запълнен кръг като този, който е по подразбиране)
- circle (незапълнен кръг)
- square (запълнен квадрат).

ПРИМЕР за неподреден списък с незапълнени кръгчета:

<ul type="circle">
   <li>Първи елемент от списъка</li>
   <li>Втори елемент от списъка</li>
   <li>Трети елемент от списъка</li>
</ul>

ПРИМЕР за неподреден списък със запълнени квадратчета:

<ul type="square">
   <li>Първи елемент от списъка</li>
   <li>Втори елемент от списъка</li>
   <li>Трети елемент от списъка</li>
</ul>

!ВНИМАНИЕ: Атрибута type на тага ul е изваден от стандартите на езика и не се поддържа от XHTML, макар че браузърите ще продължат да го поддържат.



2. ВЛАГАНЕ ЕДИН В ДРУГ НА НЕПОДРЕДЕНИ СПИСЪЦИ

Неподредените списъци могат да се влагат един в друг. Кода за такова влагане може да бъде например следния:

<ul>
   <li>Първи елемент от списъка</li>
   <li>Втори елемент от списъка</li>

        <ul>
           <li>Първи поделемент на 2-рия елемент от списъка</li>
           <li>Втори поделемент на 2-рия елемент от списъка</li>
        </ul>

   <li>Трети елемент от списъка </li>
</ul>

Елементите от вложения списък автоматично биват изобразявани с още по-голям отстъп от лявото поле и с незапълнен кръг като символ пред редовете.



3. ПОДРЕДЕНИ СПИСЪЦИ

Подредените списъци извършват подредбата на елементите по един от следните начини:

- чрез арабски цифри
- чрез големи римски цифри
- чрез малки римски цифри
- чрез главни латински букви
- чрез малки латински букви

За да направите подреден списък с арабски цифри трябва да изпишете следния код:

<ol>
   <li>Първи номериран елемент от списъка</li>
   <li>Втори номериран елемент от списъка</li>
   <li>Трети номериран елемент от списъка</li>
</ol>

Обърнете внимание, че в кода не се изписват никакви цифри - те се присвояват автоматично.

Автоматичното присвояване важи само за списъците, номерирани с арабски цифри. За всеки от останалите подредени списъци е нужно изрично да се укаже техния тип, като се присвои съответната стойност към атрибута type на тага <ol>.

За да зададете номериране с големи римски цифри присвоявате на type стойност главно латинско I, за малки римски цифри - малко латинско i, за големи и малки букви - съответно голямо латинско A и малко латинско a.

ПРИМЕР за подреден списък с големи римски цифри:

<ol type="I">
   <li>Първи елемент от списъка, номериран с големи римски цифри </li>
   <li>Втори елемент от списъка, номериран с големи римски цифри </li>
   <li>Трети елемент от списъка, номериран с големи римски цифри </li>
</ol>

ПРИМЕР за подреден списък с малки римски цифри:

<ol type="i">
   <li>Първи елемент от списъка, номериран с малки римски цифри</li>
   <li>Втори елемент от списъка, номериран с малки римски цифри</li>
   <li>Трети елемент от списъка, номериран с малки римски цифри</li>
</ol>

ПРИМЕР за подреден списък с големи латински букви:

<ol type="A">
   <li>Първи елемент от списъка, обозначен с големи букви</li>
   <li>Втори елемент от списъка, обозначен с големи букви</li>
   <li>Трети елемент от списъка, обозначен с големи букви</li>
</ol>

ПРИМЕР за подреден списък с малки латински букви:

<ol type="a">
   <li>Първи елемент от списъка, обозначен с малки букви</li>
   <li>Втори елемент от списъка, обозначен с малки букви</li>
   <li>Трети елемент от списъка, обозначен с малки букви</li>
</ol>

Както беше подчертано в урока за основните понятия на HTML - таговете (т.е. командите), техните атрибути и присвоените стойности на атрибутите задължително трябва да се изписват на латиница, така че не забравяйте да превключвате клавиатурата си, ако основния текст в страницата ви е на кирилица. Някои от буквите в латинската азбука и кирилицата не се различават при изписването им и е честа грешка в кода на езика да се вмъкват букви на кирилица. При такава грешка браузъра не разчита кода.

Понякога е нужно един подреден списък да започне номерирането не от първата цифра или буква, а от някаква следваща. Това се постига като в тага се включи атрибута start и му се зададе съответната цифрова (винаги в арабски цифри) стойност. Например за да започне изброяването от 5-тата голяма римска цифра се пише следния код:

<ol type="I" start="5">
   <li>Първи елемент от списъка, номериран с голяма римска цифра 5 </li>
   <li>Втори елемент от списъка, номериран с голяма римска цифра 6 </li>
   <li>Трети елемент от списъка, номериран с голяма римска цифра 7 </li>
</ol>

!ВНИМАНИЕ: Атрибутите type и start на тага <ol> са извадени от стандартите на езика и не се поддържат от XHTML.


4. ВЛАГАНЕ НА ПОДРЕДЕНИ СПИСЪЦИ

Подредените списъци също могат да се влагат един в друг, а освен това те могат да се влагат в неподредени списъци и обратно - неподредените списъци да се влагат в подредени.

ПРИМЕР за влагане на един подреден списък в друг подреден списък:

<ol>
   <li>Първи номериран елемент от списъка</li>
   <li>Втори номериран елемент от списъка</li>

       <ol type="A">
          <li>Първи поделемент обозначен с главна буква</li>
          <li>Втори поделемент обозначен с главна буква</li>
       </ol>

   <li>Трети номериран елемент от списъка</li>
</ol>

ПРИМЕР за влагане на подреден списък в неподреден списък:

<ul>
   <li>Първи неномериран елемент от списъка</li>
   <li>Втори неномериран елемент от списъка</li>

       <ol>
          <li>Първи номериран поделемент от списъка</li>
          <li>Втори номериран поделемент от списъка</li>
       </ol>

   <li>Трети номериран елемент от списъка </li>
</ul>



5. ДЕФИНИРАЩИ СПИСЪЦИ

Дефиниращите списъци се използват за да акцентират върху дадена дефиниция или термин, като покажат съдържанието на дефиницията с отстъп от лявото поле на браузъра.
При дефиниращите списъци не се изобразяват символи в началото на реда. Но вие може да укажете собствени символи, като ги зададете чрез тага за показване на изображения.
Дефиниращите списъци започват с началния таг за дефиниращ списък <dl>
Следва тага за задаване заглавие на дефиниращия списък <dt>
След това се изписва тага за тялото на дефиницията <dd>
И трите тага трябва да завършват със съответните си затварящи тагове.

Пример за дефиниращ списък:

<dl>
   <dt>Заглавие на 1-ви дефиниращ списък</dt>
      <dd>Съдържание на първа дефиниция.</dd>
      <dd>Съдържание на втора дефиниция.</dd>
      <dd>Съдържание на трета дефиниция.</dd>

   <dt>Заглавие на 2-ри дефиниращ списък</dt>

      <dd>Съдържание на първа дефиниция.</dd>
      <dd>Съдържание на втора дефиниция.</dd>
</dl>

За да зададете символ по ваше желание в началото на реда на дефиницията, трябва да разполагате с някакъв файл, например mysymbol.gif, и да напишете код, подобен на следния:

<dl>
   <dt>Заглавие на дефиницията</dt>
      <dd> <img src="mysymbol.gif" width="8" height="8" alt="my own symbol">
Съдържание на дефиницията.
      </dd>
</dl>



6. ВЛАГАНЕ НА ДЕФИНИРАЩИ СПИСЪЦИ

Дефиниращите списъци също могат да се влагат един в друг, както и в останалите два вида списъци и обрaтно - подредените и неподредените списъци могат да се влагат в дефиниращи списъци. Например:

<dl>
   <dt>Заглавие на дефиниращ списък</dt>
      <dd>Съдържание на първа дефиниция.</dd>
      <dd>Съдържание на втора дефиниция.</dd>

         <ul>
            <li>Първи неномериран елемент на 2-ра дефиниция</li>
            <li>Втори неномериран елемент на 2-ра дефиниция</li>

               <ol>
                  <li>Първи номериран поделемент</li>
                  <li>Втори номериран поделемент</li>
              </ol>
         </ul>
</dl>

Текст в HTML

1. Тагът font

В html текста се задава с тагa <font>, който има затвяращ таг </font>.

Тагът <font> може да съдържа следните атрибути:

face="название на шрифта" - задава шрифт за текста
size="размер на текста" - задава размер на текста
color="цвят" - задава цвят на текста

Забележки:

1. Шрифта (face) се задава като наименование на съответния шрифт. Най-популярните шрифтове са arial и times new roman, тъй като ги поддържат практически всички браузъри и повечето страници в интернет използват някой от тях като основен шрифт.

Съществуват няколко шрифта, които са близки до arial (например helvetica, verdana, sans-sherif?) и няколко, които са близки до times new roman (например georgia, timoku), затова обикновено се задават заедно няколко близки шрифта, отделени със запетая - в случай, че някои браузъри не поддържат един или повече от тях.

Други популярни шрифтове са
courier, courier new
segoe print, comic sans ms
impact

Monotype corsiva

2. Размера  на буквите на текста се задава

а) Като абсолютна стойност с цифри от 1 до 7 включително, като 1 е най-малкия размер, а 7 - най-големия размер на текста.

б) Като относителна стойност, например -1 или +2 и т.н. В първия случай текста ще се покаже с един размер по-малък от размера на текста по подразбиране (-1), а във втория случай текста ще бъде с размер два пъти по-голям от размера по подразбиране (+2).

3. Цвета се задава чрез английско нaзвание за цвят или чрез 16-ична стойност.

ПРИМЕР:
<font face="arial, helvetica, sans-sherif" size="-1" color="#ff0000">текст</font>

В примера е зададен шрифт arial и сродните му шрифтове, размер на текста с един размер по-малък от размера по подразбиране и цвят на текста червен (#ff0000).

2. Форматиране на текст

Върху вида на текста може да се въздейства чрез следните тагове:

1. <b> </b> Удебелява текста

2. <i> </i> Показва текста наклонен

3. <u> </u> Подчертава текста (не се поддържа от XHTML)

4. <strong> </strong> Удебелява текста подобно на тага <b>

5. <ins> </ins> Подчертава текста подобно на тага <u>

6. <em> </em> Показва текста наклонен подобно на тага <i>

7. <cite> </cite> Показва текста наклонен подобно на тага <i>

8. <dfn> </dfn> Показва текста наклонен подобно на тага <i>

9. <var> </var> Показва текста наклонен подобно на тага <i>

10. <address> </address> Показва текста наклонен подобно на тага <i>

11. <big> </big> Увеличава големината на шрифта с един размер на всяко изписване на тага

12. <small> </small> Намалява големината на шрифта с един размер на всяко изписване на тага

13. <strike> </strike> Зачертава текста (не се поддържа от XHTML)

14. <s> </s> Зачертава текста (не се поддържа от XHTML)

15. <del> </del> Зачертава текста

16.  Изписва текста като горен индекс

17.  Изписва текста като долен индекс

18. <tt> </tt> Изписва текста в шрифт като на пишеща машина подобен на Courier

19. <code> </code> Изписва текста в шрифт като на пишеща машина подобен на Courier

20. <samp> </samp> Изписва текста в шрифт като на пишеща машина подобен на Courier

21. <kbd> </kbd> Изписва текста в шрифт като на пишеща машина подобен на Courier


22. <abbr> </abbr> Таг за изписване на абревиатури(Абревиатура (на латински: ab — „на“, brevis — „кратко“) е дума, която се образува от началните букви или срички на сложни наименования. При абревиатурите краесловията на думите се съкращават и не се поставят точки.Пример СССР (Съюз на съветските социалистически републики) DDR-Deutsche Demokratische Republik). Възпроизвежда се от аудио-браузърите, където задава изговаряне на всяка буква поотделно. Може да съдържат атрибута title, на който се задава като стойност пълното название на съкращението, например <аbbr title="Bulgaria">BG</abbr>

23. <bdo dir="rtl"> </bdo> Ако на атрибута dir на тага bdo e зададена стойност rtl - както е в примера, текста изписан между началния и крайния таг ще се покаже огледално обърнат. Другата възможна стойност на dir е ltr - в този случай текста се показва както е написан.

Пример; <bdo dir="rtl">Васил </bdo>

Излиза: лисаВ

3. Разположение и подравняване на текст

Върху разположението и подравняването на текст (и някои други елементи, например графики и пр.) в html страницата може да се въздейства чрез следните тагове:

1. <br /> Пренася текста на следващия ред. Няма затварящ таг. Може да се използва за оставяне на един, два и т.н. празни реда, като се изпишат толкова на брой тагове <br /> колкото празни редове трябва да се оставят.

2. <p> </p> Оставя разстояние от един ред между горната и долната част на текстов блок и останалия текст. Може да се използва с атрибута align, чиито стойности могат да бъдат:
<p align="left"> Подравнява текста вляво (това е подравняването и по подразбиране)
<p align="right"> Подравнява текста вдясно
<p align="justify"> Подравнява текста едновременно и вляво и вдясно
<p align="center"> Центрира текста

3. <blockquote> </blockquote> Показва текстов блок с отстъп и оставя разстояние от един ред между горната и долната част на текстов блок и останалия текст. Примерно ако пишем някакъв цитат в текст.

4. <pre> </pre> Показва текста така както е написан в текстовия редактор - с всички паузи между букви и думи и оставени празни редове

5. <xmp> </xmp> Ако се изпише html-код между <xmp> и </xmp> той ще се покаже в браузъра така както е написан в текстовия редактор - с ъгловите скоби на таговете, с паузите между букви и думи и с оставените празни редове (не се поддържа от XHTML)

6. <nobr> </nobr> Не позволява разкъсване на текста и пренасяне на думи на по-долен ред - показва текста на един ред

7. <div align="стойност"> </div> Подравнява текста според зададената стойност на атрибута align:
<div align="left"> Подравнява текст и други елементи вляво
<div align="right"> Подравнява текст и други елементи вдясно
<div align="justify">Подравнява текста едновременно и към лявата и към дясната част на страницата
<div align="center"> Центрира текст и други елементи

8. <center> </center> Центрира текст и други елементи (не се поддържа от XHTML)

9. &nbsp; Отмества първия ред на абзац

<p>&nbsp; &nbsp; &nbsp;текст текст текст текст текст</p>

!ВНИМАНИЕ: Атрибута align на тага <div> е изваден от стандартите на езика и не се поддържа от XHTML, макар че браузърите ще продължат да го поддържат.

При изписване само на тага <div> без атрибути и стойности ефекта обикновено е като от тага <br />, т.е. преминаване на по-долен ред.

4. Заглавия на текст

Началния таг за задаване на заглавие е <h>, затварящия таг е </h>. Размерът на заглавията се определя с цифрите от 1 до 6 включително, като най-малък е размера на заглавие 6, а най-голям - размера на заглавие 1.

<h1>Заглавие</h1> Най-голям размер на текста
<h2>Заглавие</h2>
<h3>Заглавие</h3>
<h4>Заглавие</h4>
<h5>Заглавие</h5>
<h6>Заглавие</h6> Най-малък размер на текста

При използването на този таг автоматично се добавя по един празен ред над и под текста на заглавието.

В тага <h> може да се включи атрибута align чрез стойностите на който да се укаже подравняване на заглавието вляво (left), вдясно (right) или в центъра (center), например:

<h2 align="center">Заглавие</h2>  и т.н.

За да се изобрази текст на кирилица. Слага се в<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

5. Движещ се текст

1. Преминаващ текст

Един много популярен модел, който позволява да поставите ефектен акцент върху желана от вас информация в сайта си или просто да спестите място. Анимираният текст се появява отляво или отдясно (според указаното от нас в direction="...") и преминава по ширина през страницата или елемента, в който е поставен кода, отново и отново.

<marquee direction=”left”> ПРИЯТЕН ДЕН!</ marquee >

2. Появяващ се текст

Анимираният текст, след като се появи на екрана да спре. Това е появяващ се отляво текст, който достигайки границата на елемента, в който е поставен, спира и остава там (за да видим отново ефекта, трябва да презаредим страницата).

<marquee behavior=”slide” direction=”right”> ПРИЯТЕН ДЕН!</marquee >

 

 

3. Отскачащ от границите на сайта текст

Анимираният текст се движи само между двата края  (ляв и десен) на страницата.

<marquee behavior="alternate" bgcolor="#FF9900">Блъскащ се текст в ляво и дясно </marquee>

<marquee behavior=”alternate”> ПРИЯТЕН ДЕН!</marquee>

4. Вертикално движещ се текст

Движението на текста може да бъде не само хоризонтално, но и вертикално, като ние свободно можем да определим и границите на неговото движение.

<marquee behavior=”scroll” direction=”up”> ПРИЯТЕН ДЕН!</marquee>

<marquee behavior=”scroll” direction=”under”> ПРИЯТЕН ДЕН!</marquee>

<marquee behavior=”scroll” direction=”down”> ПРИЯТЕН ДЕН!</marquee>

6. Скорост на движение

Атрибутът, който отговаря за това с каква скорост ще се движи текста, е scrollamount="...", чиято стойност по подразбиране е "6". С негова помощ вече придобивате пълен контрол над движещия се в сайта текст.

<marquee direction=”left”  scrollamount="9" > ПРИЯТЕН ДЕН!</marquee>

7. Подвижен текст с фон

<marquee bgcolor="#FF9900">Подвижен текст с Фон</marquee>

Скороста на движение, на текста можете да променим чрез scrollamount="3"
Можете да променим и фона в желаният цвят, като сменим кода #FF9900

<marquee behavior="alternate" scrollamount="3" direction="left" bgcolor="#FF9900"> Блъскащ се текст с променена скорост </marquee>

9. Tекст, който спира, когато мишката е върху него и тръгва когато я махнем

<marquee direction="left" scrollamount="3" onmouseover="this.stop()" onmouseout="this.start()" align="center" width="100" height="100" >Тук пишем нещо</marquee>

-"left" посоката в която да се движе
-width="100" height="100" големината
-scrollamount="3" определя скоростта