រចនាសម្ព័ន្ធ HTML Document

មាតិកា

1. គ្រោងឆ្អឹងនៃគ្រប់ទំព័រ
2. Doctype
3. Element html និង Attribute lang
4. head៖ ព័ត៌មានអំពីទំព័រ
5. body៖ អ្វីដែលមនុស្សឃើញ
6. Element, Tag និង Attribute
7. Nesting និងការចូលបន្ទាត់
8. Void Element និង Comment
9. ការផ្ទៀងផ្ទាត់ HTML របស់អ្នក
10. សាកល្បងដោយខ្លួនឯង

1. គ្រោងឆ្អឹងនៃគ្រប់ទំព័រ

រាល់ទំព័រ HTML ចាប់ពី file សាកល្បងតូចមួយ រហូតដល់ website ដ៏ធំ មានគ្រោងឆ្អឹងដូចគ្នា។ វាគឺជា file ដែលអ្នកបានវាយនៅក្នុងជំពូកមុន៖

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dara Sok</title>
  </head>
  <body>
    <h1>Hello, I'm Dara</h1>
    <p>I'm learning to build websites.</p>
  </body>
</html>

វាមានបីស្រទាប់៖ ការប្រកាស doctype បន្ទាប់មក element <html> ដែលផ្ទុកអ្វីៗទាំងអស់ ហើយវាមាន <head> (ព័ត៌មាន អំពី ទំព័រ) និង <body> (ខ្លួនទំព័រផ្ទាល់)។ តោះដើរកាត់ពួកវាតាមលំដាប់។

2. Doctype

<!doctype html>

បន្ទាត់ដំបូងនេះប្រាប់ browser ថា៖ "នេះជា HTML document ទំនើប។" បើគ្មានវាទេ browser នឹងប្តូរទៅ quirks mode ដែលជាម៉ូដឆបគ្នាដែលធ្វើត្រាប់តាម browser ពីទសវត្សរ៍ 1990 ហើយធ្វើឲ្យ layout មានឥរិយាបថប្លែកៗ។ វាមិនមែនជា element ទេ ហើយក៏មិនប្រកាន់អក្សរតូចធំដែរ ប៉ុន្តែទម្រង់អក្សរតូចខាងលើគឺជាស្តង់ដារ។ សូមដាក់វាជានិច្ច។

3. Element html និង Attribute lang

<html lang="en">

<html> គឺជា root element៖ គ្រប់ element ផ្សេងទៀតស្ថិតនៅខាងក្នុងវា។ Attribute lang ប្រកាសភាសារបស់ទំព័រ ហើយវាសំខាន់ជាងអ្វីដែលវាមើលទៅ៖

• Screen reader ជ្រើសរើសការបញ្ចេញសំឡេងត្រឹមត្រូវ។ អត្ថបទខ្មែរដែលអានដោយសំឡេងអង់គ្លេស គឺមិនអាចយល់បានទេ។
• Browser ផ្តល់ជូនការបកប្រែតែនៅពេលភាសាខុសពីភាសារបស់អ្នក ហើយជ្រើស font និងការកាត់ពាក្យ (hyphenation) ឲ្យសមស្រប។
• Search engine ប្រើវាដើម្បីសម្រេចថាត្រូវបង្ហាញទំព័រនេះដល់អ្នកណា។

ប្រើ en សម្រាប់ភាសាអង់គ្លេស និង km សម្រាប់ភាសាខ្មែរ។ ប្រសិនបើផ្នែកមួយនៃទំព័រជាភាសាផ្សេង សូមដាក់ lang លើ element នោះ៖

<p>He said, <span lang="km">សួស្តី</span>, and smiled.</p>

4. head៖ ព័ត៌មានអំពីទំព័រ

<head> ផ្ទុក metadata៖ អ្វីដែល browser, search engine និង social site ត្រូវការ ប៉ុន្តែមិនត្រូវបានបង្ហាញលើខ្លួនទំព័រទេ។ ទាំងនេះគឺជា element ដែលអ្នកនឹងប្រើច្រើនបំផុត។

សូមបន្ថែម description ទៅទំព័ររបស់អ្នកឥឡូវនេះ៖

<meta name="description" content="Dara Sok is a junior web developer from Phnom Penh.">

គ្មានអ្វីមើលឃើញប្រែប្រួលលើទំព័រទេ។ លទ្ធផលបង្ហាញនៅលើ tab របស់ browser លទ្ធផលស្វែងរក និងការមើលជាមុននៃ link ដូច្នេះវាគួរតែធ្វើឲ្យត្រឹមត្រូវ។

5. body៖ អ្វីដែលមនុស្សឃើញ

អ្វីៗទាំងអស់ដែលបង្ហាញក្នុងបង្អួច browser ស្ថិតនៅក្នុង <body>៖ ចំណងជើង អត្ថបទ រូបភាព ប៊ូតុង form។ ស្ទើរតែផ្នែក HTML ទាំងមូលនៃស៊េរីនេះ គឺអំពីអ្វីដែលស្ថិតនៅខាងក្នុងវា។

សំណួរទូទៅរបស់អ្នកចាប់ផ្តើមគឺ "តើមានអ្វីកើតឡើងប្រសិនបើខ្ញុំដាក់មាតិកានៅក្នុង <head> ជំនួសវិញ?" Browser ជាទូទៅផ្លាស់ទីវាទៅ body ឬមិនអើពើវា។ ច្បាប់គឺសាមញ្ញ៖ head សម្រាប់ព័ត៌មានអំពីទំព័រ body សម្រាប់ខ្លួនទំព័រ។

6. Element, Tag និង Attribute

ពាក្យទាំងបីនេះច្រើនតែច្រលំគ្នា ដូច្នេះសូមកំណត់ឲ្យច្បាស់៖

<a href="about.html">About me</a>
└─┬─┘ └─────┬──────┘└───┬───┘└┬─┘
opening   attribute   content closing
  tag                           tag
└────────────────────┬─────────────────────┘
                  element

• Tag គឺជាផ្នែកក្នុងសញ្ញាក្រចក (angle bracket)៖ <a> ឬ </a>។
• Element គឺជា opening tag មាតិកា និង closing tag បញ្ចូលគ្នាទាំងអស់។
• Attribute បន្ថែមព័ត៌មានបន្ថែមទៅ element។ វាស្ថិតនៅក្នុង opening tag ជា name="value"។

Attribute ខ្លះជាកម្មសិទ្ធិរបស់ element ជាក់លាក់ (href លើ <a> src លើ <img>)។ ខ្លះទៀតដំណើរការលើ គ្រប់ element៖

សូមដាក់តម្លៃ attribute ក្នុងសញ្ញាអញ្ជើញជានិច្ច ហើយកុំប្រើ id ដដែលម្តងទៀតលើទំព័រតែមួយ។

7. Nesting និងការចូលបន្ទាត់

Element មួយផ្ទុក element ផ្សេងទៀត។ នេះហៅថា nesting ហើយវាបង្កើតជាដើមឈើដែលអ្នកបានឃើញក្នុង DevTools។ ច្បាប់តែមួយគត់៖ បិទ element តាមលំដាប់បញ្ច្រាសនៃរបៀបដែលអ្នកបានបើក។

<!-- Correct -->
<p>I like <strong>learning <em>HTML</em></strong>.</p>

<!-- Wrong: the tags overlap -->
<p>I like <strong>learning <em>HTML</strong></em>.</p>

Browser ព្យាយាមជួសជុល tag ដែលត្រួតគ្នា ប៉ុន្តែមិនមែនតែងតែតាមរបៀបដែលអ្នកចង់បានទេ។ សូមចូលបន្ទាត់ (indent) កម្រិត nest នីមួយៗដោយដកឃ្លាពីរ ដូចក្នុងគ្រោងឆ្អឹងខាងលើ។ ការចូលបន្ទាត់គ្មានអត្ថន័យសម្រាប់ browser ទេ ប៉ុន្តែវាអនុញ្ញាតឲ្យ អ្នក មើលឃើញដើមឈើភ្លាមៗ ហើយ tag ដែលមិនត្រូវគ្នាក្លាយជាច្បាស់។

Whitespace ដំណើរការតាមរបៀបដែលធ្វើឲ្យអ្នកចាប់ផ្តើមភ្ញាក់ផ្អើល៖ ចំនួនដកឃ្លា tab ឬការចុះបន្ទាត់ណាក៏ដោយក្នុង source ត្រូវបានបង្រួមទៅជា ដកឃ្លាតែមួយ ពេលបង្ហាញ។ ការចុច Enter ពីរដងមិនបន្ថែមគម្លាតលើទំព័រទេ។ គម្លាតគឺជាការងាររបស់ CSS មិនមែនរបស់ HTML ទេ។

8. Void Element និង Comment

Element ខ្លះគ្មានមាតិកា ដូច្នេះមិនត្រូវការ closing tag ទេ។ ពួកវាហៅថា void element៖

<meta charset="utf-8">
<img src="dara.jpg" alt="Dara Sok at a desk">
<br>
<hr>
<input type="text">

ការសរសេរ <br /> ជាមួយសញ្ញា slash នៅខាងចុងត្រូវបានអនុញ្ញាត ប៉ុន្តែមិនចាំបាច់នៅក្នុង HTML ទំនើបទេ។ កុំសរសេរ </br> ឬ </img>។

Comment ទុកចំណាំសម្រាប់ខ្លួនអ្នកផ្ទាល់។ Browser មិនអើពើវា ប៉ុន្តែនរណាក៏អាចអានវាតាម "View source" ដែរ ដូច្នេះកុំដាក់អាថ៌កំបាំងក្នុងវា៖

<!-- TODO: replace this with my real photo -->

Comment ក៏មានប្រយោជន៍សម្រាប់បិទបណ្តោះអាសន្នផ្នែកមួយនៃ HTML ពេលអ្នកកំពុងពិសោធន៍។ នៅក្នុង VS Code សូមជ្រើសបន្ទាត់ទាំងនោះ ហើយចុច Ctrl+/ (Cmd+/ នៅលើ macOS)។

9. ការផ្ទៀងផ្ទាត់ HTML របស់អ្នក

ដោយសារ browser អត់ឱនចំពោះកំហុសដោយស្ងៀមស្ងាត់ អ្នកអាចសរសេរ HTML ដែលខូចដោយមិនដឹងខ្លួន។ មានពីរវិធីដើម្បីពិនិត្យ៖

• W3C validator នៅ validator.w3.org — paste code របស់អ្នកក្រោម Validate by Direct Input ហើយអានកំហុស។ សារទាំងនោះត្រង់ៗ ប៉ុន្តែត្រឹមត្រូវ។
• DevTools។ ប្រសិនបើដើមឈើ Elements មិនត្រូវនឹងអ្វីដែលអ្នកបានវាយ មានន័យថា browser បានជួសជុលអ្វីមួយ។ សូមរកភាពខុសគ្នានោះ។

សូមបង្កើតទម្លាប់ផ្ទៀងផ្ទាត់ទំព័រមួយ មុនពេលអ្នកហៅថាវាបានបញ្ចប់។

10. សាកល្បងដោយខ្លួនឯង

1. សាងសង់ពីការចងចាំ។ បិទ index.html របស់អ្នក ហើយបង្កើតគ្រោងឆ្អឹងឡើងវិញក្នុង file ថ្មី test.html ដោយមិនមើល។ បើកវាក្នុង browser។ តើអ្វីដែលពិបាកចងចាំ?
2. លុប doctype។ លុបបន្ទាត់ដំបូងនៃ test.html ហើយ reload។ នៅក្នុង DevTools → Console វាយ document.compatMode។ វាបង្ហាញ "BackCompat" ក្នុង quirks mode និង "CSS1Compat" ក្នុង standards mode។ ដាក់វាត្រឡប់មកវិញ ហើយពិនិត្យម្តងទៀត។
3. ធ្វើឲ្យ encoding ខូច។ បន្ថែម <p>សួស្តី, world</p> បន្ទាប់មកលុប <meta charset="utf-8">។ តើអត្ថបទខ្មែរខូចទេ? (វាអាស្រ័យលើរបៀបដែល editor និង browser របស់អ្នកត្រូវបានកំណត់ — សាកល្បងទាំងពីរបែប។) សូមស្តារ tag នោះឡើងវិញក្រោយមក។
4. ផ្ទៀងផ្ទាត់។ Paste index.html របស់អ្នកទៅក្នុង W3C validator។ ជួសជុលអ្វីដែលវារាយការណ៍។ បន្ថែម meta tag description ពីជំពូកនេះ ហើយ commit។

បន្ទាប់ យើងនឹងបំពេញ body ដោយមាតិកាពិតប្រាកដ៖ ចំណងជើង paragraph បញ្ជី link និងរូបភាព។