Подредени и неподредени листове

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

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

В този урок ще разгледаме същността на подредените и неподредени листове чрез няколко нагледни и лесни за следване примера.

Структура на урока:

Подредени листове

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

Тази рецепта за мазане на филии е идеален пример за подреден лист.

Надявам се, че този пример направи нещата малко по-ясни.

Следващата стъпка е да разберем как да добавим подреден лист в нашата уеб страница.

Структура

За да добавим подреден лист, трябва да използваме HTML елемента <ol> (съкратено от Ordered List). Този елемент идва под формата на двойка отварящ и затварящ таг като между тях поставяме отделните точки. Всяка точка се представя посредством друг HTML елемент - <li> (съкратено от List Item). Този елемент също има отварящ и затварящ таг, като отварящия таг маркира началото на точката, а затварящия таг – края ѝ. Следващото изображение обяснява всичко това.

Рецептата за мазане на филии преобразувана в HTML подреден лист.

Упражнение

В следващото упражнение ще превърнем рецептата по-горе в обикновен подреден лист като приложим наученото до тук.

Стъпка 1

Създай нов html документ и го наименувай index.html. Моят изглежда по следния начин.

index.html

copyИзчистенПрозорец

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; 
            charset=utf-8" />
        <title>Рецепта “Мазане на филия”</title> 
    </head>
    <body>
    </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">	<head>		<meta http-equiv="Content-Type" content="text/html; 			charset=utf-8" />		<title>Рецепта “Мазане на филия”</title> 	</head>	<body>	</body></html>

Стъпка 2

В <body> елемента ще добавим едно h2 заглавие и рецептата по-горе, която ще превърнем в подреден лист. Кода ще изглежда ето така:

copyИзчистенПрозорец

...
<h2>Рецепта “Мазане на филия”</h2>
<ol>
<li>Отрежи филия хляб</li>
    <li>Вземи маслото от хладилника</li>
    <li>Вземи сладкото от шкафа</li>
    <li>Намажи масло в/у филията</li>
    <li>Сега намажи и сладкото</li>
    <li>Изяж си филията!!!</li>
</ol>

...<h2>Рецепта “Мазане на филия”</h2><ol><li>Отрежи филия хляб</li>	<li>Вземи маслото от хладилника</li>	<li>Вземи сладкото от шкафа</li>	<li>Намажи масло в/у филията</li>	<li>Сега намажи и сладкото</li>	<li>Изяж си филията!!!</li></ol>

Стъпка 3

Запази промените и виж резултата в браузър.

Подредения лист изглежда вкусно.

Както виждаш, няма нужда ръчно да номерираме всяка точка от листа, защото браузъра автоматично поставя номерата за нас. По подразбиране браузъра използва цифри за номериране на подредените листове започвайки от 1 и увеличавайки с 1 номера на всяка следваща точка.

Неподредени листове

Този вид листове е идентичен с предишния. Разликата тук е, че точките не следват определен ред, а по-скоро произволен. Пример за такъв лист е списъка с продукти, които трябва да купим от магазина или всякакъв друг вид списъци, точките на които могат да бъдат подредени по произволен начин.

Използването на неподредени листове е доста популярен начин за маркиране на менюто в дадена уеб страница. Също така прилагайки CSS можем да им придадем почти всякакъв стил, което ги прави гъвкав и удобен начин за създаване на навигация. Виж следващия пример.

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

Структура

За да добавим неподреден лист в нашата страница трябва да използваме HTML елемента <ul> (съкратено от Unordered List). Този елемент също идва под формата на двойка отварящ и затварящ таг като между тях поставяме съответните точки. Както при подредените листове, така и тук всяка точка се добавя чрез елемента <li>. Следващото изображение представя визуално всичко това.

Главното меню на нашата страница кодирано чрез неподреден лист.

Упражнение

В следващото упражнение ще превърнем примера от по-горе в просто меню, което може да бъде част от уеб страница.

Стъпка 1

Отново, създай нов html документ. Ако искаш, можеш да продължиш да работиш със страницата от предишното упражнение. Аз обаче ще създам нов документ.

index.html

copyИзчистенПрозорец

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; 
            charset=utf-8" />
        <title>Неподреден лист - Главно меню</title> 
    </head>
    <body>
    </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">	<head>		<meta http-equiv="Content-Type" content="text/html; 			charset=utf-8" />		<title>Неподреден лист - Главно меню</title> 	</head>	<body>	</body></html>

Стъпка 2

В <body> елемента ще добавим едно h2 заглавие последвано от кратък неподреден лист представящ менюто по-горе. Кода ще изглежда ето така:

copyИзчистенПрозорец

...
<h2>Главно меню</h2>
<ul>
    <li>Начало</li>
    <li>Портфолио</li>
    <li>За Мен</li>
    <li>За Сайта</li>
    <li>Контакти</li>
</ul>

...<h2>Главно меню</h2><ul>	<li>Начало</li>	<li>Портфолио</li>	<li>За Мен</li>	<li>За Сайта</li>	<li>Контакти</li></ul>

Стъпка 3

Запази промените и виж резултата в браузър.

Менюто на нашия сайт представено чрез неподреден лист.

Интересното тук е, че браузъра по подразбиране добавя малка черно кръгче в началото на всяка точка. Това естествено може да се промени (както и да се премахне) с помоща на CSS.

Вместване на листове един в друг

Освен стандартния лист с едно ниво (разгледаните до сега) ХТМL ни дава възможност да вместим различен вид листове един в друг. Всяко вместване добавя ново ниво в цялостния лист, което го прави по-сложен, но предимствата според мен надхвърлят недостатъците.

Най-често, вместването на листове се използва при създаването на меню с няколко подменюта (наречено още dropdown menu) или меню с голямо количество подменюта с различна сложност и структура (наречено още mega dropdown menu).

Визуално едно обикновенно меню с кратко подменюта би изглеждало така:

Както виждаш, в раздела “Портфолио” е вместен нов неподреден лист съдържащ няколко категории.

В следващата точка ще разгледаме структурата и правилният начин на вместване на листове.

Структура

Като цяло няма ограничение на броя вместени листове, но както казах всеки нов лист прави нещата по-сложни. Също така няма ограничение за вида лист, който искаме да вместим. Това значи, че можем да поставим неподреден в подреден и обратно.

За да вместим лист в друг лист, първо трябва да изберем мястото, където ще поставим новия лист. След това просто добавяме листа по начините разгледани по-рано, но мястото на вместване трябва да бъде между <li> и </li> таговете на желаната точка.

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

Визуално представяне на вместени един в друг листове.

Упражнение

Ще създадем нова html страница, в която ще поместим едно h2 заглавие и два неподредени листа.

Стъпка 1

index.html

copyИзчистенПрозорец

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; 
            charset=utf-8" />
        <title>Вместени листове</title> 
    </head>
    <body>
    </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">	<head>		<meta http-equiv="Content-Type" content="text/html; 			charset=utf-8" />		<title>Вместени листове</title> 	</head>	<body>	</body></html>

Стъпка 2

В <body> елемента ще сложим и останалата част от кода. Тя изглежда така:

copyИзчистенПрозорец

...
<h2>Главно меню с едно подменю</h2>
<ul>
    <li>Начало</li>
    <li>Портфолио
        <ul>
            <li>Избор 1</li>
            <li>Избор 2</li>
            <li>Избор 3</li>
        </ul>
    </li>
<li>За Мен</li>
    <li>За Сайта</li>
    <li>Контакти</li>
</ul>

...<h2>Главно меню с едно подменю</h2><ul>	<li>Начало</li>	<li>Портфолио		<ul>			<li>Избор 1</li>			<li>Избор 2</li>			<li>Избор 3</li>		</ul>	</li><li>За Мен</li>	<li>За Сайта</li>	<li>Контакти</li></ul>

Стъпка 3

Запази промените и виж резултата в браузър.

Менюто изглежда добре структурирано и подредено.

За да се отличат вместените листове от главните, браузъра прилага различен стил върху тях. Всичко това обаче може да се промени чрез CSS като възможностите са безброй.