Подредени и неподредени листове 3
Сподели урока
Понякога при създаването определен раздел от уеб страницата ще ти се наложи да използваш подредени и/или неподредени листове. Значението им, точно както името ни подсказва, е да предоставят на посетителя лесна за възприемане информация, която е групирана по определен начин.
Чрез използването на подредени листове, предоставената информация е групирана по точно определен ред като всяка точка от списъка се означава с число или буква. От друга страна, информацията в неподредените листове не следва такъв ред и всяка точка се обозначава по един и същ начин без видимо ниво на важност.
В този урок ще разгледаме същността на подредените и неподредени листове чрез няколко нагледни и лесни за следване примера.
Структура на урока:
Подредени листове
Както казах в началото, работата на подредените листове е да предостави информация, която следва определена последователност. Пример за такъв вид лист е готварската рецепта. При нея всяка стъпка е от значение и следването им в точно оределения ред ще ни даде (евентуално) желания резултат. Виж следващото изображение.
Надявам се, че този пример направи нещата малко по-ясни.
Следващата стъпка е да разберем как да добавим подреден лист в нашата уеб страница.
Структура
За да добавим подреден лист, трябва да използваме HTML елемента <ol> (съкратено от Ordered List). Този елемент идва под формата на двойка отварящ и затварящ таг като между тях поставяме отделните точки. Всяка точка се представя посредством друг HTML елемент - <li> (съкратено от List Item). Този елемент също има отварящ и затварящ таг, като отварящия таг маркира началото на точката, а затварящия таг – края ѝ. Следващото изображение обяснява всичко това.
Упражнение
В следващото упражнение ще превърнем рецептата по-горе в обикновен подреден лист като приложим наученото до тук.
Стъпка 1
Създай нов html документ и го наименувай index.html. Моят изглежда по следния начин.
index.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 заглавие и рецептата по-горе, която ще превърнем в подреден лист. Кода ще изглежда ето така:
... <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
<!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 заглавие последвано от кратък неподреден лист представящ менюто по-горе. Кода ще изглежда ето така:
... <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
<!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>Главно меню с едно подменю</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 като възможностите са безброй.
Надявам се, че урока е лесен за следване и разбираем. Най-добрия начин да усвоиш употребата на подредени и неподредени листове е чрез много практика. Не се страхувай да опитваш нови, нестандартни неща. Това ще обогати знанията и уменията ти.
Имаш ли препоръки или коментари? Ще се радвам, ако ги споделиш след урока.
Използвани снимки
Снимка към урока: Jim Linwood
Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.

Хареса ли ти урока? Сподели го със света :)
1
Интересно само защо при мен браузъра не номерира сам отделните редове.. :|
2
Извинявам се, моя беше грешката. :)
3
Няма проблем. Бих се радвал да ти помогна, ако намираш някъде затруднения :)