Често в 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>
Могат да се изработват три основни вида списъци:
- неподредени
- подредени
- дефиниращи
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-страниците се прави изброяване на някакви елементи и в тези случаи е подходящо да се използват специалните тагове на 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>
Могат да се изработват три основни вида списъци:
- неподредени
- подредени
- дефиниращи
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>
