Списъци Печат
Написано от sevda   
Петък, 19 Април 2013 06:29

Списъци

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

1.Неподредени списъци

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

  • Първи елемент от списъка
  • Втори елемент от списъка
  • Трети елемент от списъка

Ефекта от горния код в браузъра е следния:

  • Първи елемент от списъка
  • Втори елемент от списъка
  • Трети елемент от списъка

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

Знака, който се появява пред всеки ред в списъка, е по подразбиране черен запълнен кръг. Ако желаете да използвате други символи трябва да ги зададете като стойности към атрибута type на тага ul. Възможните стойности са три: disc (запълнен кръг като този, който е по подразбиране), circle (незапълнен кръг), square (запълнен квадрат). Например:

  • Първи елемент от списъка
  • Втори елемент от списъка
  • Трети елемент от списъка

Ефекта от горния код в браузъра е следния:

  • Първи елемент от списъка
  • Втори елемент от списъка
  • Трети елемент от списъка

  • Първи елемент от списъка
  • Втори елемент от списъка
  • Трети елемент от списъка

Ефекта от горния код в браузъра е следния:

  • Първи елемент от списъка
  • Втори елемент от списъка
  • Трети елемент от списъка

2.Влагане на неподредени списъци

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

  • Първи елемент от списъка
  • Втори елемент от списъка
    • Първи поделемент на 2-рия елемент от списъка
    • Втори поделемент на 2-рия елемент от списъка

  • Трети елемент от списъка

Ефекта от горния код в браузъра е следния:

  • Първи елемент от списъка
  • Втори елемент от списъка
  • Първи поделемент на 2-рия елемент от списъка
  • Втори поделемент на 2-рия елемент от списъка
  • Трети елемент от списъка

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

3.Подредени списъци

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

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

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


  1. Първи номериран елемент от списъка
  2. Втори номериран елемент от списъка
  3. Трети номериран елемент от списъка

Ефекта от горния код в браузъра е следния:

  1. Първи номериран елемент от списъка
  2. Втори номериран елемент от списъка
  3. Трети номериран елемент от списъка

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

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

  1. Първи елемент от списъка, номериран с големи римски цифри
  2. Втори елемент от списъка, номериран с големи римски цифри
  3. Трети елемент от списъка, номериран с големи римски цифри

Ефекта от горния код в браузъра е следния:

  1. Първи елемент от списъка, номериран с големи римски цифри
  2. Втори елемент от списъка, номериран с големи римски цифри
  3. Трети елемент от списъка, номериран с големи римски цифри

  1. Първи елемент от списъка, номериран с малки римски цифри
  2. Втори елемент от списъка, номериран с малки римски цифри
  3. Трети елемент от списъка, номериран с малки римски цифри

Ефекта от горния код в браузъра е следния:

  1. Първи елемент от списъка, номериран с малки римски цифри
  2. Втори елемент от списъка, номериран с малки римски цифри
  3. Трети елемент от списъка, номериран с малки римски цифри

  1. Първи елемент от списъка, обозначен с големи букви
  2. Втори елемент от списъка, обозначен с големи букви
  3. Трети елемент от списъка, обозначен с големи букви

Ефекта от горния код в браузъра е следния:

  1. Първи елемент от списъка, обозначен с големи букви
  2. Втори елемент от списъка, обозначен с големи букви
  3. Трети елемент от списъка, обозначен с големи букви

  1. Първи елемент от списъка, обозначен с малки букви
  2. Втори елемент от списъка, обозначен с малки букви
  3. Трети елемент от списъка, обозначен с малки букви

Ефекта от горния код в браузъра е следния:

  1. Първи елемент от списъка, обозначен с малки букви
  2. Втори елемент от списъка, обозначен с малки букви
  3. Трети елемент от списъка, обозначен с малки букви

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


  1. Първи елемент от списъка, номериран с голяма римска цифра 5

  2. Втори елемент от списъка, номериран с голяма римска цифра 6

  3. Трети елемент от списъка, номериран с голяма римска цифра 7


Ефекта от горния код в браузъра е следния:

  1. Първи елемент от списъка, номериран с голяма римска цифра 5
  2. Втори елемент от списъка, номериран с голяма римска цифра 6
  3. Трети елемент от списъка, номериран с голяма римска цифра 7

4.Влагане на подредени списъци

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

  1. Първи номериран елемент от списъка
  2. Втори номериран елемент от списъка
    1. Първи поделемент обозначен с главна буква
    2. Втори поделемент обозначен с главна буква

  3. Трети номериран елемент от списъка

Ефекта от горния код в браузъра е следния:

  1. Първи номериран елемент от списъка
  2. Втори номериран елемент от списъка
  3. Първи поделемент обозначен с главна буква
  4. Втори поделемент обозначен с главна буква
  5. Трети номериран елемент от списъка

  • Първи неномериран елемент от списъка
  • Втори неномериран елемент от списъка
    1. Първи номериран поделемент от списъка
    2. Втори номериран поделемент от списъка

  • Трети номериран елемент от списъка

Ефекта от горния код в браузъра е следния:

  • Първи неномериран елемент от списъка
  • Втори неномериран елемент от списъка
  1. Първи номериран поделемент от списъка
  2. Втори номериран поделемент от списъка
  • Трети номериран елемент от списъка

5.Дефиниращи списъци

Дефиниращите списъци се използват за да акцентират върху дадена дефиниция или термин, като покажат съдържанието на дефиницията с отстъп от лявото поле на браузъра. При дефиниращите списъци не се изобразяват символи в началото на реда. Но вие може да укажете собствени символи, като ги зададете чрез тага за показване на изображения.

Дефиниращите списъци започват с началния таг за дефиниращ списък

. Следва тага за задаване заглавие на дефиниращия списък
. След това се изписва тага за тялото на дефиницията
И трите тага трябва да завършват със съответните си затварящи тагове. Пример за дефиниращ списък:

Заглавие на 1-ви дефиниращ списък

Съдържание на първа дефиниция.

Съдържание на втора дефиниция.

Съдържание на трета дефиниция.

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

Съдържание на първа дефиниция.

Съдържание на втора дефиниция.

Ефекта от горния код в браузъра е следния:

Заглавие на 1-ви дефиниращ списък

Съдържание на първа дефиниция.

Съдържание на втора дефиниция.

Съдържание на трета дефиниция.

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

Съдържание на първа дефиниция.

Съдържание на втора дефиниция.

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

Заглавие на дефиницията

my own symbol

Съдържание на дефиницията.

7.Влагане на дефиниращи списъци

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

Заглавие на дефиниращ списък

Съдържание на първа дефиниция.

Съдържание на втора дефиниция.

  • Първи неномериран елемент на 2-ра дефиниция
  • Втори неномериран елемент на 2-ра дефиниция
    1. Първи номериран поделемент
    2. Втори номериран поделемент

Ефекта от горния код в браузъра е следния:

Заглавие на дефиниращ списък

Съдържание на първа дефиниция.

  • Първи неномериран елемент на 2-ра дефиниция
  • Втори неномериран елемент на 2-ра дефиниция
  1. Първи номериран поделемент
  2. Втори номериран поделемент