ស្វែងយល់ពី Section នៅក្នុង HTML5

• Sross Viech


• 15 Oct 2016

HTML5 គឺជាជំនាន់ទី 5 របស់ HTML ដែលមានពាក្យពេញថា Hyper Text Markup Language ដែលប្រើសំរាប់បង្កើតគ្រោងឆ្អឹងរបស់គេហទំព័រ ហើយនៅក្នុង HTML5 មានស្លាក (Tag) ជាច្រើនប្រើសំរាប់បង្កើតគេហទំព័រមានដូចជា ៖ <div>, <section>, <table>,<span> … ។ល។ ប៉ុន្តែថ្ងៃនេះ TechFree សូមបង្ហាញអំពីការប្រើប្រាស់ស្លាកមួយរបស់ HTML5 គឺ <section></section> ។

ស្លាក<section> គឺប្រើដើម្បីបង្ហាញបញ្ជាក់ពីផ្នែកនីមួយៗនៅក្នុងការសរសេរកូដ ដូចជា ផ្នែកខាងលើ (Header), ផ្នែកខាងក្រោម (Footer) និងផ្នែកផ្សេងៗជាច្រើនទៀតដើម្បីឲ្យមានភាពងាយស្រួលក្នុងការមើលនិងមានរបៀបរៀបរយក្នុងការសរសេរកូដក្នុងផ្នែកនីមួយៗ ។

១) កូដនៃ index.html

នៅក្នុងរូបភាពនេះបានបង្ហាញអំពីផ្នែកនីមួយៗនៃ section ដែលយើងប្រើដើម្បីបង្កើតរូបរាងនៃគេហទំព័រ។

ក្នុងរូបភាពនេះផងដែរយើងខ្ញុំបានសរសេរកូដដោយប្រើប្រាស់ជាមួយនឹងពាក្យបង្ហាញនៃប្លុក section ដែលជាកូដមិនដំនើរការ រឺ ហៅថា comment ដើម្បីពន្យល់លោកអ្នកអំពីផ្នែក រឺ ប្លុក (Blog) នៃគេហទំព័រ ។

ខាងក្រោមនេះជាគំរូមួយនៃ section នៅក្នុង index.html :

 

២) កូដនៃ style.css

ខាងក្រោមនេះជាកូដ របស់ style.css សំរាប់ធ្វើការរចនា (style) របស់ផ្នែកនីមួយៗដែលយើងបានសរសេររួចនៅខាងលើដើម្បីបង្ហាញរូបរាងគេហទំព័រទៅតាមអ្វីដែលយើងចង់បាន។

• .container គឺជា class មួយដែលយើងប្រើដើម្បីក្ដោបគេហទំព័ររបស់យើងទាំងមូល
• .header គឺជា class មួយដែលយើងប្រើសំរាប់រចនាផ្នែកខាងលើនៃគេហទំព័រ (header)
• h2 គឺជាការរចនាអក្សរនៅក្នុងស្លាក <h2></h2>
• .menu គឺជា class មួយសំរាប់រចនាក្បាលបញ្ជី (Menu)
• .menu > ul > li ប្រើសំរាប់រចនាអក្សរដែលនៅក្នុងបញ្ជី (Menu)
• .body គឺជា class មួយសំរាប់រចនាខ្លួននៃគេហទំព័រ (Body) ដែលជាកន្លែងផ្ទុកទិន្នន័យធំជាងគេ
• .footer គឺជា class មួយសំរាប់រចនាផ្នែកខាងក្រោមនៃគេហទំព័រ (Footer)

 

៣) លទ្ធផល

ក្រោយពីបញ្ចប់ការសរសេរកូដរួចមកយើងនឹងបានលទ្ធផលដូចខាងក្រោម ៖