មូលដ្ឋាន
បើកកម្មវិធីសរសេរកូដណាមួយដែលអ្នកពេញចិត្ត ។
បញ្ជាក់ប្រភេទឯកសារ
ដើម្បីប្រាប់ថា ឯកសារមួយនឹង ជាឯកសារប្រភេទ HTML5 ត្រូវសរសេរដូចខាងក្រោម ។
<!DOCTYPE html>
ត្រូវសរសេរវានៅលើគេបង្អោះ ។
html tag
កូដ HTML ទាំងអស់ត្រូវសរសេរក្នុង <html> ។
<!DOCTYPE html>
<html>
<meta charset="utf-8">
</html>
DOCTYPE ប្រាប់អំពីប្រភេទនៃឯកសារនោះ ។ វាមិនមែនជាកូដ HTML ទេ ។
head tag
កូដមួយចំនួន ចម្លើយរបស់វាមិនត្រូវការឲ្យចេញជារូបរាងលើគេហទំព័រទេ ។ កូដទាំងនោះត្រូវសរសេរនៅក្នុង <head> ។
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
</html>
<meta> មិនបង្ហាញជារូបរាងលើគេហទំព័រទេ ដូចនេះត្រូវសរសេរក្នុង <head> ។
head tag ពិបាកយល់បន្តិចសំរាប់កំរិតដំបូង ។ យើងនឹងសិក្សាអំពីវា នៅមេរៀនក្រោយៗ ។
កំណត់ចំណងជើង
ចំណងជើងនៃទំព័រនីមួយៗត្រូវបានកំណត់ដោយប្រើ <title> ។ <title> ត្រូវបានបង្ហាញនៅកន្លែងចំណងជើងនៃផ្ទាំងដែលបើកទំព័របច្ចុប្បន្ន ។ វាមិនបង្ហាញលទ្ធផលជារូបរាងលើទំព័រណាមួយទេ ។ ដូចនេះយើងត្រូវសរសេរវានៅក្នុង <head> ។
<!DOCTYPE html>
<html>
<head>
<title>Khmer Angkor Academy Academy</title>
<meta charset="utf-8">
</head>
</html>
body tag
កូដមួយចំនួនដែលចម្លើយរបស់វាត្រូវបង្ហាញជារូបរាងលើគេហទំព័រ ត្រូវសរសេរនៅក្នុង body tag ។
<!DOCTYPE html>
<html>
<head>
<title>Khmer Angkor Academy Academy</title>
<meta charset="utf-8">
</head>
<body>
អក្សរនៅទីនេះនឹងបង្ហាញជារូបរាងលើទំព័រ ។
បន្ទាត់នេះ យើងបានចុះបន្ទាត់ តែ HTML គិតត្រឹមតែជាការដកឃ្លាមួយប៉ុណ្ណោះ ។
</body>
</html>
ការដកឃ្លា មិនផ្ដល់បញ្ហាដល់កូដទេ ។ ដកឃ្លាបានត្រឹមត្រូវនឹងធ្វើឲ្យកូដ ងាយអាន ។
កំណត់ឲ្យអាចសរសេរអក្សរខ្មែរបាន
បន្ទាត់ទី២នៃកូដខាងក្រោម បញ្ជាក់ថាឯកសារ HTML បច្ចុប្បន្នប្រើសំណុំអក្សរប្រភេទ UTF-8 ដែលមានផ្ទុកនូវអក្សរខ្មែរផងដែរ ។
<!DOCTYPE html>
<meta charset="utf-8">
រក្សាទុកឯកសារ
- ចុច File > Save
- ជ្រើសរើសទីតាំងសំរាប់ទុកឯកសារ
- កំណត់ឈ្មោះឯកសារ បញ្ចប់ដោយ .html
- បើមានជម្រើសឲ្យជ្រើសរើស Encoding សូមជ្រើសរើសយក UTF-8 (សំរាប់ឯកសារដែលមានអក្សរខ្មែរ)
- ចុច Save ជាការស្រេច ។
កែប្រែឯកសារ
- Mouse ស្ដាំលើឯកសារ
- Open With
- ជ្រើសរើសកម្មវិធីកែកូដ ដែលអ្នកពេញចិត្ត ។
ដំណើរការកូដ
ចុច២ដងលើឯកសារ ។ វានឹងដំណើរការនិងបង្ហាញលទ្ធផលលើកម្មវិធីរុករកគេហទំព័រ ។
ទម្រង់ HTML5 ពេញលេញ
នេះជាទម្រង់ HTML5 ពេញលេញមួយដែលមានធាតុសំខាន់ៗទាំងអស់៖
<!DOCTYPE html>
<html lang="km">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ចំណងជើងទំព័រ</title>
</head>
<body>
<h1>ចំណងជើងធំ</h1>
<p>នេះជាកថាខណ្ឌមួយ។</p>
</body>
</html>
Attribute lang
Attribute lang ក្នុង <html> tag ប្រើសម្រាប់បញ្ជាក់ភាសានៃឯកសារ៖
lang="km"សម្រាប់ភាសាខ្មែរlang="en"សម្រាប់ភាសាអង់គ្លេសlang="fr"សម្រាប់ភាសាបារាំង
ការបញ្ជាក់ភាសាជួយឲ្យកម្មវិធីរុករកនិងម៉ាស៊ីនស្វែងរកយល់បានល្អអំពីមាតិការបស់អ្នក។
Meta Viewport
<meta name="viewport"> សំខាន់សម្រាប់គេហទំព័រដែលត្រូវការដំណើរការល្អលើទូរស័ព្ទនិងថេប្លេត៖
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width- កំណត់ទទឹងតាមទំហំឧបករណ៍initial-scale=1.0- កំណត់កម្រិតពង្រីកដំបូង
Meta viewport ជួយឲ្យគេហទំព័ររបស់អ្នកមើលឃើញបានល្អលើគ្រប់ឧបករណ៍ (Responsive Design)។
រចនាសម្ព័ន្ធឯកសារ HTML
ឯកសារ HTML មាន៣ផ្នែកសំខាន់៖
| ផ្នែក | មុខងារ | ឧទាហរណ៍ |
|---|---|---|
<!DOCTYPE html> |
បញ្ជាក់ប្រភេទឯកសារ | ត្រូវមានជាបន្ទាត់ទី១ |
<head> |
ផ្ទុកព័ត៌មានអំពីទំព័រ | title, meta, links |
<body> |
ផ្ទុកមាតិកាដែលបង្ហាញ | អត្ថបទ, រូបភាព, វីដេអូ |
ឧទាហរណ៍ពេញលេញ
សាកល្បងកូដខាងក្រោមដើម្បីបង្កើតទំព័រ HTML ទី១របស់អ្នក៖
រក្សាទុកឯកសារនេះជា index.html ហើយបើកវាក្នុងកម្មវិធីរុករកដើម្បីមើលលទ្ធផល។
ចុច២ដងលើឯកសារនោះ ។ វានឹងចេញលទ្ធផលលើកម្មវិធីរុករកគេហទំព័រ ។