We Learn ICT | សិក្សាបង្កើតគេហទំព័រជាភាសាខ្មែរ

រចនាសម្ព័ន្ធមូលដ្ឋានរបស់ HTML

ដើម្បីអោយឯកសារ HTML មួយអាចដំណើរការបានត្រឹមត្រូវ ១០០% វាត្រូវតែមានទម្រង់និងរចនាសម្ព័ន្ធស្តង់ដាររបស់វា។ គ្រប់ទំព័រគេហទំព័រទាំងអស់ តែងតែចាប់ផ្តើមជាមួយរចនាសម្ព័ន្ធនេះជានិច្ច គ្មានករណីលើកលែងឡើយ។

ការពន្យល់មួយជំហានម្តងៗ ពីបន្ទាត់នីមួយៗ

តោះយើងមកបំបែកកូដស្តង់ដារខាងក្រោម ដើម្បីស្វែងយល់ពីអត្ថន័យនៃបន្ទាត់នីមួយៗ៖

<!DOCTYPE html> : នេះគឺជាការប្រកាសប្រភេទឯកសារ (Document Type Declaration)។ វាមិនមែនជា Tag នោះទេ តែវាជាសារប្រាប់ទៅ Browser ថា "សួស្តី ឯកសារនេះត្រូវបានសរសេរជាភាសា HTML5 ណា!"។ បើគ្មានបន្ទាត់នេះ Browser ខ្លះអាចនឹងបង្ហាញវិបសាយរបស់អ្នកខុសទ្រង់ទ្រាយ។
<html lang="km"> ... </html> : នេះគឺជា Root Element (ឫសគល់) ដែលក្តោបគ្រប់យ៉ាងទាំងអស់នៅក្នុងគេហទំព័រ។ lang="km" គឺជា Attribute ប្រាប់ទៅ Google ថា គេហទំព័រនេះសរសេរជាភាសាខ្មែរ (បើភាសាអង់គ្លេស ប្រើ "en") ដែលមានប្រយោជន៍ខ្លាំងសម្រាប់ការស្វែងរក (SEO) និងកម្មវិធីបកប្រែ។
<head> ... </head> : កន្លែងនេះប្រើសម្រាប់ដាក់ព័ត៌មានលាក់បាំង (Metadata)។ គ្រប់យ៉ាងនៅក្នុងនេះ (លើកលែងតែចំណងជើង) គឺសម្រាប់ Browser និង Search Engine អាន មិនមែនសម្រាប់មនុស្សមើលដោយផ្ទាល់លើអេក្រង់ទេ។
<meta charset="UTF-8"> : នេះគឺជាការកំណត់ប្រភេទតួអក្សរ។ បើគ្មានបន្ទាត់នេះទេ ពេលអ្នកសរសេរអក្សរខ្មែរ វានឹងលោតចេញជាសញ្ញាសួរ (?) ឬអក្សរខ្មោចមិនខាន! UTF-8 គាំទ្រគ្រប់ភាសាលើលោក។
<meta name="viewport" content="width=device-width, initial-scale=1.0"> : នេះជាបន្ទាត់មន្តអាគម ដែលធ្វើអោយគេហទំព័ររបស់អ្នកអាចដំណើរការបានល្អនៅលើទូរស័ព្ទដៃ (Responsive)។
<title> ... </title> : កំណត់ឈ្មោះចំណងជើង ដែលនឹងបង្ហាញនៅលើ Tab របស់ Browser របស់អ្នក (នៅលើបង្អួចខាងលើបំផុត)។
<body> ... </body> : នេះគឺជាកន្លែងដ៏សំខាន់បំផុតសម្រាប់អ្នក! គ្រប់យ៉ាងដែលអ្នកសរសេរនៅក្នុង body នេះ (អក្សរ រូបភាព វីដេអូ) នឹងបង្ហាញចេញមកលើអេក្រង់ទូរស័ព្ទ ឬកុំព្យូទ័ររបស់អ្នកប្រើប្រាស់។

ឧទាហរណ៍នៃការប្រើប្រាស់ជាក់ស្តែង

ចំណាំ៖ កុំភ្លេចបិទ Tag វិញជានិច្ច! បើអ្នកបើក <body> អ្នកត្រូវតែមាន </body> នៅខាងចុង ដើម្បីកុំអោយ Browser យល់ច្រឡំ។ (ទោះបីជា Browser ឆ្លាតអាចទាយដឹង តែយើងគួរតែសរសេរអោយបានត្រឹមត្រូវ)