HTML առաջին քայլերը - Դաս 3 - ul, ol ցանկերի տեգեր. HTML տեգերի հատկանիշներ
Գերհաճախ կայքերում օգտագործվում են ցանկեր՝ մենյուում, տեքստում ինչ-որ բան թվարկելու համար։ Եկեք սկսենք ամենատարածված անթիվ ցանկի տեսակով <UL></UL> (unordered list – անթիվ ցանկ)։
UL ցանկ
UL ցանկը օգտագործվում է մենյուի և մարկացված ցանկերի համար, և HTML-ով կարելի է սահմանել մարկերի տեսքը։
Եկեք փոխենք մեր HTML կոդը․
<html>
<head>
<title>Իմ առաջին HTML փաստաթուղթը</title>
</head>
<body>
<h1>Իմ առաջին HTML փաստաթուղթը</h1>
<ul>
</ul>
</body>
</html>
Փաստաթղթում կցուցադրվի միայն վերնագիրը, քանի որ մեր ցանկը դեռ դատարկ է․ եկեք ավելացնենք կետեր. դրանց համար օգտագործում ենք <LI></LI> (list item – ցանկի կետ) տեգերը։
<html>
<head>
<title>Իմ առաջին HTML փաստաթուղթը</title>
</head>
<body>
<h1>Իմ առաջին HTML փաստաթուղթը</h1>
<ul>
<li>Առաջին կետ</li>
<li>Երկրորդ կետ</li>
<li>Երրորդ կետ</li>
</ul>
</body>
</html>
Հիմա կցուցադրվի նշանշված ցանկ։ Մարկերի տեսքը կարելի է փոխել UL տեգի ատրիբուտ type-ով։
HTML տեգերի ատրիբուտներ
UL տեգի, ինչպես ասացի վերը, կան ատրիբուտներ։ Ատրիբուտներ ունի բոլոր HTML տեգերը. ուշադիր կանդրադառնանք դրանց ավելի ուշ, իսկ հիմա՝ ի՞նչ է ատրիբուտը. ատրիբուտը թույլ է տալիս կառավարել տեգի արտահայտումը՝ գույներ, չափ, ձև և այլն. UL տեգի դեպքում կարող ենք ընտրել մարկերի տեսակը՝ քառակուսի, շրջաթող, լի շրջան և այլն։
Ատրիբուտները ունեն այսպիսի գրառում:
<թեգ ատրիբուտ="ատրիբուտի արժեք">
Այսպիսով, ուղղակի տեգի ներսում գրում ենք, թե ինչպես ցուցադրել այն. UL տեգի համար ատրիբուտը կոչվում է type․
<html>
<head>
<title>Իմ առաջին HTML փաստաթուղթը</title>
</head>
<body>
<h1>Իմ առաջին HTML փաստաթուղթը</h1>
<ul type="square">
<li>Առաջին կետ</li>
<li>Երկրորդ կետ</li>
<li>Երրորդ կետ</li>
</ul>
</body>
</html>
Եթե թարմացնեք էջը դիտարկիչում, կտեսնեք, որ ցանկը նշանշված է քառակուսիներով (square – քառակուսի)։ Կարող ենք նաև кружочками նշել՝
<html>
<head>
<title>Իմ առաջին HTML փաստաթուղթը</title>
</head>
<body>
<h1>Իմ առաջին HTML փաստաթուղթը</h1>
<ul type="circle">
<li>Առաջին կետ</li>
<li>Երկրորդ կետ</li>
<li>Երրորդ կետ</li>
</ul>
</body>
</html>
Կարող եք օգտագործել տարբեր մարկերներ յուրաքանչյուր կետի համար, բայց ապա պարտադիր պետք է ցույց տալ type-ատրիբուտը նաև li տեգում։
<html>
<head>
<title>Իմ առաջին HTML փաստաթուղթը</title>
</head>
<body>
<h1>Իմ առաջին HTML փաստաթուղթը</h1>
<ul type="circle">
<li>Առաջին կետ</li>
<li type="square">Երկրորդ կետ</li>
<li>Երրորդ կետ</li>
</ul>
</body>
</html>
Ընդհանուր առմամբ UL, LI տեգերի լռված type-ը «disc» է (լի շրջան). օրինակ՝
<html>
<head>
<title>Իմ առաջին HTML փաստաթուղթը</title>
</head>
<body>
<h1>Իմ առաջին HTML փաստաթուղթը</h1>
<ul type="disc">
<li>Առաջին կետ</li>
<li type="square">Երկրորդ կետ</li>
<li>Երրորդ կետ</li>
</ul>
</body>
</html>
Հետագայում վերցնենք UL տեգը առանց type-ատրիբուտի և կտեսնենք արդյունքը.
<html>
<head>
<title>Իմ առաջին HTML փաստաթուղթը</title>
</head>
<body>
<h1>Իմ առաջին HTML փաստաթուղթը</h1>
<ul>
<li>Առաջին կետ</li>
<li type="square">Երկրորդ կետ</li>
<li>Երրորդ կետ</li>
</ul>
</body>
</html>
Ահա բոլոր երեք կետերը տարբեր մարկերներով.
<html>
<head>
<title>Իմ առաջին HTML փաստաթուղթը</title>
</head>
<body>
<h1>Իմ առաջին HTML փաստաթուղթը</h1>
<ul>
<li type="disc">Առաջին կետ</li>
<li type="square">Երկրորդ կետ</li>
<li type="circle">Երրորդ կետ</li>
</ul>
</body>
</html>
Գիտեմ, որ հիմա արդեն պարզ է, թե որտեղ գրել ատրիբուտները. առաջիկայում կքննարկենք ուրիշ բազմաթիվ ատրիբուտներ։
OL ցանկեր
OL տեգը (ordered list – թվարկված ցանկ) UL-ի նման հաճախ չէ հանդիպում, բայց սահուն կիրառելի է, երբ պետք է ցուցադրել գործողությունների հաջորդականություն, իրադարձությունների ժամանակագրություն, առարկաների թվարկություն և այլն։ de ամենուր, որտեղ անհրաժեշտ է թվարկել տողերը, կարելի է օգտվել OL տեգից։
<html>
<head>
<title>Իմ առաջին HTML փաստաթուղթը</title>
</head>
<body>
<h1>Իմ առաջին HTML փաստաթուղթը</h1>
<ol>
<li>Առաջին կետ</li>
<li>Երկրորդ կետ</li>
<li>Երրորդ կետ</li>
</ol>
</body>
</html>
Ինչպես UL-ի դեպքում, OL տեգն ունի type-ատրիբուտ, բայց նրա արժեքները տարբերվում են.
- type="A" – մեծատառ լատինական տառեր (մեծ A “եյ”)
- type="a" – փոքրատառ լատինական տառեր (փոքր a “եյ”)
- type="I" – մեծատառ հռոմեական թվեր (մեծ I “այլ”)
- type="i" – փոքրատառ հռոմեական թվեր (փոքր i “այլ”)
- type="1" – արաբական թվեր, օգտագործվում է լռված (default) ձևաչափ
Կարող եք փորձել տարբեր type արժեքներ UL տեգի համար. այստեղ մեկ օրինակ.
<html>
<head>
<title>Իմ առաջին HTML փաստաթուղթը</title>
</head>
<body>
<h1>Իմ առաջին HTML փաստաթուղթը</h1>
<ol type="i">
<li>Առաջին կետ</li>
<li>Երկրորդ կետ</li>
<li>Երրորդ կետ</li>
<li>Չորրորդ կետ</li>
</ol>
</body>
</html>