បញ្ជីនៅក្នុង HTML5 (HTML5 Lists)

បញ្ជីមិនតាមលំដាប់ (Unordered lists)នៅក្នុង HTML5 ត្រូវបានប្រើស្លាក <ul>។ ធាតុបញ្ជីនីមួយៗចាប់ផ្តើមដោយស្លាក <li>។ តាមលំនាំដើមបញ្ជីធាតុទាំងអស់នឹងត្រូវបានសម្គាល់ជា bullet (រង្វង់ខ្មៅតូច) ។

ឧទាហរណ៍បញ្ជីនៅក្នុង HTML5

image1

១) បញ្ជីមិនតាមលំដាប់នៅក្នុង HTML5 

unorderd-list-coding

យើងបានលទ្ធផលដូចខាងក្រោម៖

unorderd-html5-list

២) បញ្ជីមិនតាមលំដាប់នៅក្នុង HTML5- ជ្រើសសញ្ញាសម្គាល់ធាតុបញ្ជី
លក្ខណៈពិសេសរបស់ CSS list-style-type ត្រូវបានប្រើដើម្បីកំណត់រចនាបទ នៃសញ្ញាសម្គាល់ធាតុបញ្ជី ។

iamge2

២.១) ឧទាហរណ៍ disc

disc-bullets-coding

យើងបានលទ្ធផលដូចខាងក្រោម៖

disc-bullets

២.២) ឧទាហរណ៍ circle

circle-bullets-coding

យើងបានលទ្ធផលដូចខាងក្រោម៖

circle-bullets

២.៣) ឧទាហរណ៍ square

square-bullets-coding

យើងបានលទ្ធផលដូចខាងក្រោម៖

square-bullets

២.៤) ឧទាហរណ៍ none

non-bullets-coding

យើងបានលទ្ធផលដូចខាងក្រោម៖

non-bullets

៣) បញ្ជីតាមលំដាប់នៅក្នុង HTML5
បញ្ជីតាមលំដាប់ (ordered lists) ចាប់ផ្តើមដោយស្លាក <ol>។ ធាតុបញ្ជីនីមួយៗចាប់ផ្តើមដោយស្លាក <li>។ តាមលំនាំដើមធាតុបញ្ជីត្រូវបានសម្គាល់ដោយលេខ។

orderd-list-coding

យើងបានលទ្ធផលដូចខាងក្រោម៖

orderd-list

 

៤) បញ្ជីតាមលំដាប់នៅក្នុង HTML5 – ប្រភេទ attribute

ប្រភេទ attribute នៃ <ol> ដើម្បីកំណត់ប្រភេទសញ្ញាសម្គាល់សំរាប់ធាតុបញ្ជី។

iamge2
៣.១) លេខ (Numbers)

numbers-coding

យើងបានលទ្ធផលដូចខាងក្រោម៖

numbers

៣.២) អក្សរធំ (Uppercase Letters)

letter-coding

យើងបានលទ្ធផលដូចខាងក្រោម៖

letter

៣.៣) អក្សរតូច (Lowercase Letters)

lowercase-letters

យើងបានលទ្ធផលដូចខាងក្រោម៖

lowercase-letters-coding

៣.៤) លេខអក្សររ៉ូម៉ាំងធំ (Uppercase Roman Numbers)

roman-number-coding

យើងបានលទ្ធផលដូចខាងក្រោម៖

roman-number

៣.៥) លេខអក្សររ៉ូម៉ាំងតូច (Lowercase Roman Numbers)

lowercase-roman-number-codinng

យើងបានលទ្ធផលដូចខាងក្រោម៖

lowercase-roman-number

៤) បញ្ជីបរិយាយនៅក្នុង HTML5
ប្រើ HTML អាចផ្គត់ផ្គង់បញ្ជីបរិយាយ (Description Lists) បានផងដែរ។ បញ្ជីបរិយាយគឺជាបញ្ជីនៃ លក្ខខណ្ឌនានាដែលរៀបរាប់ពីបញ្ជីបរិយាយនីមួយ។ នេះជាស្លាក <dl> ដើម្បីកំណត់បញ្ជីបរិយាយប្រើស្លាក <dt> កំណត់ធាតុ (ឈ្មោះ) និង ស្លាក<dd> រៀបរាប់អំពីធាតុនិំមួយៗ។

description-list

យើងបានលទ្ធផលដូចខាងក្រោម៖

description-list-coding

៥) បញ្ជីដាក់រួមគ្នានៅក្នុង HTML5
បញ្ជីអាចត្រូវបានដាក់រួមគ្នា (បញ្ជីនៅក្នុងបញ្ជី)។

nested-list

យើងបានលទ្ធផលដូចខាងក្រោម៖

nested-list-coding

ចំណាំ: ធាតុបញ្ជីអាចមានបញ្ជីថ្មី និងធាតុរបស់ HTML5 ផ្សេងទៀត ដូចជារូបភាព និង តំណភ្ជាប់ (Link) ។ល។

៦) បញ្ជីផ្ដេក (Horizontal Lists)
បញ្ជីផ្ដេក (Horizontal Lists) នៅក្នុង (HTML5) អាចត្រូវបានតែងហៅនៅក្នុងវិធីផ្សេងគ្នាជាច្រើនជាមួយនឹង CSS ។ វិធីពេញនិយមមួយដើម្បីរចនាបញ្ជីផ្ដេកដើម្បីបង្កើតម៉ឺនុយ (Menu)។

menufull

យើងបានលទ្ធផលដូចខាងក្រោម៖

mune