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

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

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

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

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

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

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

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

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

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

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

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

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

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

៤) បញ្ជីតាមលំដាប់នៅក្នុង HTML5 – ប្រភេទ attribute
ប្រភេទ attribute នៃ <ol> ដើម្បីកំណត់ប្រភេទសញ្ញាសម្គាល់សំរាប់ធាតុបញ្ជី។
៣.១) លេខ (Numbers)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Download PDF