អត្ថបទ Link និងរូបភាព

មាតិកា

1. Heading
2. Paragraph និងការចុះបន្ទាត់
3. ការសង្កត់ធ្ងន់ strong និង em
4. List
5. Link
6. រូបភាព
7. Block Element និង Inline Element
8. ភាសាខ្មែរ និងភាសាផ្សេងទៀត
9. សាកល្បងដោយខ្លួនឯង

1. Heading

HTML មាន heading ប្រាំមួយកម្រិត គឺ <h1> ដល់ <h6>។ ពួកវា មិនមែន ជាបញ្ជីជ្រើសរើសទំហំអក្សរទេ — ពួកវាគឺជា ទម្រង់រចនាសម្ព័ន្ធនៃឯកសារ ដូចជា heading នៅក្នុងសៀវភៅសិក្សា។ Screen reader អនុញ្ញាតឲ្យអ្នកប្រើលោតពី heading មួយទៅ heading មួយ ហើយ search engine ក៏ប្រើពួកវាដើម្បីយល់ថាទំព័រនោះនិយាយអំពីអ្វី។

<h1>Dara Sok</h1>
<h2>About me</h2>
<h2>Projects</h2>
<h3>Recipe finder</h3>
<h3>Study timer</h3>

ច្បាប់ទូទៅ៖

• មាន <h1> តែមួយក្នុងមួយទំព័រ ដែលប្រាប់ថាទំព័រនោះនិយាយអំពីអ្វី។
• ចុះបន្តិចម្តងមួយកម្រិត៖ h1 → h2 → h3។ កុំលោតពី h2 ទៅ h5 ព្រោះតែអ្នកចូលចិត្តរូបរាងរបស់វា។
• បើ heading ធំពេក ឬតូចពេក សូមកែវាដោយ CSS។ កុំជ្រើសរើសកម្រិត heading ដោយសារទំហំរបស់វាឲ្យសោះ។

2. Paragraph និងការចុះបន្ទាត់

អត្ថបទត្រូវដាក់ក្នុង element <p>។ Paragraph នីមួយៗចាប់ផ្តើមនៅបន្ទាត់ថ្មី ហើយមានចន្លោះនៅជុំវិញ៖

<p>I'm a junior web developer from Phnom Penh.</p>
<p>I'm learning HTML, CSS, and JavaScript.</p>

សូមចាំពីជំពូកមុនថា ដកឃ្លា និងការចុះបន្ទាត់ដែលលើសនៅក្នុង source របស់អ្នកនឹងបង្រួមទៅជាមួយ។ ដើម្បីបង្ខំឲ្យចុះបន្ទាត់ នៅក្នុង paragraph មួយ ដូចជានៅក្នុងអាសយដ្ឋាន ឬកំណាព្យ សូមប្រើ <br>៖

<p>
  Dara Sok<br>
  Phnom Penh, Cambodia
</p>

កុំប្រើ <br> ដើម្បីបន្ថែមចន្លោះរវាង paragraph — នោះជាតួនាទីរបស់ margin ក្នុង CSS។ ចំណែក <hr> គូសបន្ទាត់ផ្តេកមួយ ដែលប្រើសម្រាប់បង្ហាញការប្តូរប្រធានបទ។

3. ការសង្កត់ធ្ងន់ strong និង em

Element ពីរបន្ថែមអត្ថន័យដល់ពាក្យ៖

<p><strong>Warning:</strong> this step <em>cannot</em> be undone.</p>

អ្នកប្រហែលស្គាល់ <b> និង <i>។ ពួកវានៅតែមាន សម្រាប់អត្ថបទដែលគ្រាន់តែមានរចនាប័ទ្មខុសគេ (ឈ្មោះផលិតផល ពាក្យបរទេស) ដោយមិនបន្ថែមអត្ថន័យអ្វី។ ពេលមិនប្រាកដ សូមសួរថា៖ «តើវាប្តូរអត្ថន័យនៃប្រយោគឬទេ?» បើបាទ/ចាស សូមប្រើ strong ឬ em។ បើគ្រាន់តែជារឿងរូបរាង សូមប្រើ CSS។

Inline element មួយចំនួនទៀតដែលគួរស្គាល់៖ <code> សម្រាប់កូដ, <kbd> សម្រាប់គ្រាប់ចុច, <mark> សម្រាប់អត្ថបទដែលបន្លិច, <abbr title="…"> សម្រាប់ពាក្យកាត់ និង <time datetime="2026-10-02"> សម្រាប់កាលបរិច្ឆេទ។

4. List

HTML មាន list បីប្រភេទ។ ធាតុនីមួយៗគឺ <li> ហើយ wrapper ជាអ្នកកំណត់ថាវាជា list ប្រភេទណា។

Unordered — list មានចំណុចៗ ដែលលំដាប់មិនសំខាន់៖

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ordered — list មានលេខ ដែលលំដាប់សំខាន់ ដូចជាជំហានៗ៖

<ol>
  <li>Open the folder</li>
  <li>Edit index.html</li>
  <li>Save and refresh</li>
</ol>

Description list — ពាក្យ និងនិយមន័យរបស់វា៖

<dl>
  <dt>HTML</dt>
  <dd>The structure of a page</dd>
  <dt>CSS</dt>
  <dd>The look of a page</dd>
</dl>

List អាចដាក់ជាន់គ្នាបាន៖ ដាក់ <ul> ទាំងមូល នៅក្នុង <li> មួយ មិនមែននៅចន្លោះ <li> ពីរទេ។ List ត្រូវបានប្រើច្រើនជាងការធ្វើចំណុចៗ — ម៉ឺនុយរុករក (navigation menu) តាមន័យ semantic គឺជា list នៃ link ដែលយើងនឹងប្រើនៅក្នុងជំពូកបន្ទាប់។

5. Link

Link គឺជាអ្វីដែលធ្វើឲ្យ HTML ជា hypertext។ Element <a> ("anchor") ប្រែមាតិការបស់វាឲ្យអាចចុចបាន ហើយ href ប្រាប់ថាវាទៅទីណា៖

<a href="https://developer.mozilla.org/">MDN Web Docs</a>

href អាចជាប្រភេទ URL ណាមួយពី URL ម្តងមួយផ្នែក៖

ដើម្បីសាកល្បង relative link សូមបង្កើត file ទីពីរ about.html ដែលមាន skeleton ផ្ទាល់ខ្លួន ហើយភ្ជាប់ទំព័រទាំងពីរទៅគ្នាទៅវិញទៅមក៖

<!-- in index.html -->
<a href="about.html">About</a>

<!-- in about.html -->
<a href="index.html">Home</a>

ចំណុចពីរបន្ថែមទៀតដែលគួរដឹង៖

• អត្ថបទ link គួរមានន័យដោយខ្លួនឯង។ "Read my CV" ល្អ ប៉ុន្តែ "click here" មិនល្អទេ។ អ្នកប្រើ screen reader ច្រើនតែរុករកបញ្ជី link ទាំងអស់នៅលើទំព័រ ដូច្នេះ "click here, click here, click here" គ្មានប្រយោជន៍ទាល់តែសោះ។
• target="_blank" បើក link នៅក្នុង tab ថ្មី។ សូមប្រើវាតិចៗ ហើយដាក់គូជាមួយ rel="noopener" សម្រាប់ website ខាងក្រៅ។ សូមឲ្យមនុស្សជ្រើសរើសដោយខ្លួនឯងថា link បើកនៅទីណា។

6. រូបភាព

Element <img> ជា void element (គ្មាន closing tag) ហើយត្រូវការ attribute ពីរ៖

<img src="images/dara.jpg" alt="Dara Sok smiling at a laptop">

• src គឺជា URL របស់ file — ជា relative ឬ absolute ក៏បាន។ សូមដាក់រូបថតក្នុង folder images/ ដើម្បីឲ្យមានរបៀបរៀបរយ។
• alt គឺជាការពិពណ៌នាជាអត្ថបទ។ Screen reader អានវាឡើង វាត្រូវបានបង្ហាញនៅពេលរូបភាពផ្ទុកមិនចេញ ហើយ search engine ក៏ប្រើវាដែរ។ សូមសរសេរអ្វីដែលរូបភាព បង្ហាញ ឬមានន័យ មិនមែន "image of…" ទេ។ បើរូបភាពគ្រាន់តែជាការតុបតែង សូមប្រើ alt="" ទទេ ដើម្បីឲ្យឧបករណ៍ជំនួយរំលងវា។ កុំលុប attribute នេះចោលឲ្យសោះ។

Attribute ពីរបន្ថែមទៀតដែលគួរដាក់ជាមួយរូបភាពពិតៗ៖

<img src="images/dara.jpg" alt="Dara Sok smiling at a laptop"
     width="800" height="600" loading="lazy">

width និង height (ជា pixel ត្រូវនឹងទំហំពិតរបស់ file) អនុញ្ញាតឲ្យ browser រក្សាទុកចន្លោះមុនពេលរូបភាពផ្ទុកចប់ ដើម្បីកុំឲ្យទំព័រលោតចុះឡើង។ loading="lazy" ពន្យារការផ្ទុករូបភាពដែលនៅក្រៅអេក្រង់ រហូតដល់អ្នកប្រើរំកិលជិតដល់ — ប៉ុន្តែកុំដាក់វាលើរូបភាពដំបូងដែលមើលឃើញនៅលើអេក្រង់។

មុនពេលបន្ថែមរូបថត សូមកែទំហំឲ្យស័ក្តិសមសម្រាប់ web។ រូបថតពីទូរស័ព្ទអាចមានទំហំ 5 MB ដែលទាញយកយឺតដោយឥតប្រយោជន៍។ សូមប្រើទទឹងប្រហែល 1600 px និងតិចជាង 300 KB ជា JPEG សម្រាប់រូបថត និង PNG, SVG ឬ WebP សម្រាប់ក្រាហ្វិក។

7. Block Element និង Inline Element

ឥឡូវនេះអ្នកបានស្គាល់ឥរិយាបថពីរហើយ៖

• Block element (<h1>, <p>, <ul>, <li>) ចាប់ផ្តើមនៅបន្ទាត់ថ្មី ហើយយកទទឹងទាំងអស់ដែលមាន។
• Inline element (<a>, <strong>, <em>, <img>) ស្ថិតនៅក្នុងបន្ទាត់អត្ថបទ ហើយមានទទឹងត្រឹមតែមាតិការបស់វា។

<p>This paragraph is a block. It contains an <a href="#">inline link</a>
and some <strong>inline bold text</strong>.</p>

ច្បាប់សម្រាប់ការដាក់ជាន់គ្នា៖ inline element ត្រូវនៅក្នុង block element មិនមែនបញ្ច្រាសទេ។ ជំពូកទី 7 ពន្យល់ពី CSS នៅពីក្រោយរឿងនេះ និងរបៀបប្តូរ element ពីប្រភេទមួយទៅមួយទៀត។

8. ភាសាខ្មែរ និងភាសាផ្សេងទៀត

អ្វីៗទាំងអស់នៅក្នុងជំពូកនេះដំណើរការដូចគ្នានៅក្នុងភាសាខ្មែរ។ សូម save file ជា UTF-8 (លំនាំដើមរបស់ VS Code) រក្សា <meta charset="utf-8"> នៅក្នុង head ហើយវាយ៖

<html lang="km">
  <head>
    <meta charset="utf-8">
    <title>ដារ៉ា សុខ</title>
  </head>
  <body>
    <h1>សួស្តី ខ្ញុំជា ដារ៉ា</h1>
    <p>ខ្ញុំកំពុងរៀនសរសេរគេហទំព័រ។</p>
  </body>
</html>

បើទំព័រមួយលាយទាំងអង់គ្លេស និងខ្មែរ សូមកំណត់ lang លើ <html> សម្រាប់ភាសាចម្បង និងលើ element នីមួយៗសម្រាប់ភាសាផ្សេងទៀត។ នេះជួយ screen reader ហើយធ្វើឲ្យ font ត្រឹមត្រូវត្រូវបានជ្រើសរើស។ ជំពូកទី 8 នឹងត្រឡប់ទៅរក font ខ្មែរម្តងទៀត។

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

សូមបង្កើតទំព័រប្រវត្តិរូបរបស់អ្នកឲ្យពេញលេញ៖

1. សរសេរមាតិកា។ នៅក្នុង index.html សូមបន្ថែម <h1> ដែលមានឈ្មោះរបស់អ្នក paragraph ខ្លីមួយ <h2>Skills</h2> ជាមួយ <ul> និង <h2>How I got here</h2> ជាមួយ <ol> ដែលមានបីជំហាន។
2. បន្ថែមទំព័រទីពីរ។ បង្កើត about.html ចម្លង skeleton ពីជំពូកទី 2 ហើយភ្ជាប់ទំព័រទាំងពីរទៅគ្នាទៅវិញទៅមក។
3. បន្ថែមរូបថត។ ដាក់រូបភាពដែលបានកែទំហំក្នុង images/ បន្ថែមវាទៅទំព័រជាមួយ alt text ល្អ និង width/height។ សាកល្បងធ្វើឲ្យ src ខុសដោយចេតនា — តើអ្នកឃើញអ្វី ហើយ alt ធ្វើអ្វី?
4. ពិនិត្យទម្រង់រចនាសម្ព័ន្ធ។ ប្រើ browser extension ដូចជា HeadingsMap ឬក្នុង DevTools ស្វែងរក h2 នៅក្នុងផ្ទាំង Elements។ តើលំដាប់ heading របស់អ្នកចុះបន្តិចម្តងមួយកម្រិតឬទេ?
5. Fragment link។ ដាក់ id="skills" លើ heading "Skills" របស់អ្នក ហើយបន្ថែម link <a href="#skills">Jump to skills</a> នៅផ្នែកខាងលើ។ ចុចវា ហើយមើល address bar។

សូម commit ការងាររបស់អ្នក។ បន្ទាប់ យើងនឹងបង្កើត skeleton ត្រឹមត្រូវឲ្យទំព័រជាមួយ semantic element ហើយមើលពីមូលហេតុដែលអត្ថន័យនៅក្នុង HTML សំខាន់សម្រាប់ accessibility។