# គម្រោង Terrarium ផ្នែក ១៖ ការណែនាំអំពី HTML ```mermaid journey title ធ្វើដំណើរការសិក្សា HTML របស់អ្នក section មូលដ្ឋាន បង្កើតឯកសារ HTML: 3: Student បន្ថែម DOCTYPE: 4: Student រៀបចំរចនាសម្ព័ន្ធឯកសារ: 5: Student section មាតិកា បន្ថែមទិន្នន័យ metadata: 4: Student បញ្ចូលរូបភាព: 5: Student រៀបចំការរៀបចំទំបន់: 5: Student section អត្ថន័យ ប្រើស្លាកសញ្ញាត្រឹមត្រូវ: 4: Student បង្កើនការចូលដំណើរការ: 5: Student បង្កើតទើរីរីវ៉ូម: 5: Student ``` ![ការណែនាំអំពី HTML](../../../../translated_images/km/webdev101-html.4389c2067af68e98.webp) > កំណត់ត្រាដោយ [Tomomi Imura](https://twitter.com/girlie_mac) HTML ឬ HyperText Markup Language គឺជាគ្រឹះសម្រាប់គេហទំព័រទាំងអស់ដែលអ្នកធ្លាប់បានចូលស្វែងរក។ គិតពួកវា HTML ដូចជាខ្នងឆ្អឹងដែលផ្តល់រចនាសម្ព័ន្ធដល់ទំព័របណ្ដាញ – វាកំណត់កន្លែងដែលមាតិកាដាក់, របៀបដែលវាត្រូវបានរៀបចំ និងអ្វីដែលមួយៗតំណាងឲ្យ។ ខណៈដែល CSS នឹង "ពាក់លើ" HTML របស់អ្នកជាមួយពណ៌និងរៀបចំទាំងអស់ ហើយ JavaScript នឹងធ្វើឲ្យវាមានជីវិតជាមួយអន្តរកម្ម HTML ផ្តល់រចនាសម្ព័ន្ធមូលដ្ឋានដែលធ្វើឲ្យអ្វីគ្រប់យ៉ាងអាចធ្វើទៅបានបាន។ ក្នុងមេរៀននេះ អ្នកនឹងបង្កើតរចនាសម្ព័ន្ធ HTML សម្រាប់ផ្ទាំង terrarium ពិតប្រាកដមួយ។ គម្រោងអប់រំបន្តនេះ នឹងបង្វឹកអ្នកអំពីគំនិត HTML មូលដ្ឋាន ហើយក៏បង្កើតអ្វីមួយមានទិដ្ឋភាពទាក់ទាញផងដែរ។ អ្នកនឹងរៀនរបៀបរៀបចំមាតិកាក្នុងការប្រើធាតុភាសាសញ្ញា ធ្វើការជាមួយរូបថត និងបង្កើតគ្រឹះសម្រាប់កម្មវិធីបណ្ដាញអន្តរកម្ម។ ចុងបញ្ចប់មេរៀននេះ អ្នកនឹងមានទំព័រ HTML ដំណើរការដែលបង្ហាញរូបភាពរុក្ខជាតិក្នុងជួរឈររៀបចំរួចរាល់ សម្រាប់ការតុបតែងក្នុងមេរៀនបន្ទាប់។ សុំកុំបារម្ភបើវាលួចមើលគ្រាន់តែធម្មតា នេះគឺជារបស់ HTML គួរធ្វើមុន CSS បន្ថែមរចនាប័ទ្មរូបភាព។ ```mermaid mindmap root((មូលដ្ឋាន HTML)) Structure ប្រកាស DOCTYPE ធាតុ HTML ផ្នែកក្បាល ខ្លឹមសាររូបរាង Elements ស្លាក & លក្ខណៈ ស្លាកបិទដោយខ្លួនឯង ធាតុបន្ទាប់បន្សំ ប្លុក ប្រៀបធៀបជាមួយ បន្ទាត់ Content ធាតុអត្ថបទ រូបភាព ដោងរក (div) បញ្ជី Semantics ស្លាកមានន័យ សមត្ថភាពចូលដំណើរការ អ្នកអានអេក្រង់ អត្ថប្រយោជន៍ SEO Best Practices រៀបចំប្លុកត្រឹមត្រូវ សញ្ញាប័ត្រត្រឹមត្រូវ អត្ថបទ Alt ពណ៌នា រចនាសម្ព័ន្ធរៀបចំ ``` ## សំនួរពីមុនមេរៀន [សំនួរពីមុនមេរៀន](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **មើលហើយរៀន**: សូមពិនិត្យមើលវីដេអូសង្ខេបមានប្រយោជន៍នេះ > > [![វីដេអូមូលដ្ឋាន HTML](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## ការតំឡើងគម្រោងរបស់អ្នក មុនពេលចូលទៅរកកូដ HTML តោះរៀបចំកន្លែងការងារយ៉ាងត្រឹមត្រូវសម្រាប់គម្រោង terrarium របស់អ្នក។ ការបង្កើតរចនាសម្ព័ន្ធឯកសារយ៉ាងមានរបៀបពីដើម គឺជាព្រឹត្តិការណ៍សំខាន់ដែលនឹងជួយអ្នកយ៉ាងល្អពេលបន្តការអភិវឌ្ឍគេហទំព័ររបស់អ្នក។ ### ភារកិច្ច៖ បង្កើតរចនាសម្ព័ន្ធគម្រោងរបស់អ្នក អ្នកនឹងបង្កើតថតឯកសារពិសេសសម្រាប់គម្រោង terrarium របស់អ្នក និងបន្ថែមឯកសារ HTML ដំបូងរបស់អ្នក។ នេះជាវិធីពីរដែលអ្នកអាចប្រើបាន៖ **ជម្រើស ១៖ ប្រើ Visual Studio Code** 1. បើក Visual Studio Code 2. ចុច "File" → "Open Folder" ឬប្រើ `Ctrl+K, Ctrl+O` (Windows/Linux) ឬ `Cmd+K, Cmd+O` (Mac) 3. បង្កើតថតឈ្មោះ `terrarium` ហើយជ្រើសវា 4. នៅផ្នែក Explorer ចុចរូបតំណាង "New File" 5. ឈ្មោះឯកសាររបស់អ្នក `index.html` ![VS Code Explorer បង្ហាញការបង្កើតឯកសារថ្មី](../../../../translated_images/km/vs-code-index.e2986cf919471eb9.webp) **ជម្រើស ២៖ ប្រើពាក្យបញ្ជា Terminal** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **នេះជារឿងដែលពាក្យបញ្ជាខាងលើធ្វើបាន៖** - **បង្កើត**ថតថ្មីឈ្មោះ `terrarium` សម្រាប់គម្រោងរបស់អ្នក - **ចូលទៅក្នុង**ថត terrarium - **បង្កើត**ឯកសារ `index.html` ទទេ - **បើក**ឯកសារនេះក្នុង Visual Studio Code សម្រាប់កែសម្រួល > 💡 **គន្លឹះPro**: ឈ្មោះឯកសារ `index.html` មានសារៈសំខាន់ក្នុងការអភិវឌ្ឍគេហទំព័រ។ នៅពេលនរណាម្នាក់ចូលទៅគេហទំព័រ អ្នករកមើលក្រៅស្វ័យប្រវត្តិប្រារព្ធស្វែងរកឯកសារ `index.html` ជាតំបន់លំនាំដើមសម្រាប់បង្ហាញ។ នេះមានន័យថា URL ដូចជា `https://mysite.com/projects/` នឹងបង្ហាញ `index.html` ពីថត `projects` ដោយស្វ័យប្រវត្តិ ដោយមិនចាំបាច់បញ្ជាក់ឈ្មោះឯកសារនៅក្នុង URL។ ## ការយល់ដឹងស្តីពីរចនាសម្ព័ន្ធឯកសារ HTML ឯកសារ HTML រាល់មួយត្រូវបន្តដោយរចនាសម្ព័ន្ធជាក់លាក់ដែលកម្មវិធីច្រករុករកត្រូវការយល់ដឹង និងបង្ហាញបានត្រឹមត្រូវ។ គិតរចនាសម្ព័ន្ធនេះដូចជាការសរសេរលិខិតផ្លូវការ – វាត្រូវធាតុទាំងបង់ក្នុងលំដាប់ជាក់លាក់ដែលជួយអ្នកទទួល (គឺកម្មវិធីច្រករុករក) ដំណើរការមាតិកាឲ្យបានត្រឹមត្រូវ។ ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] C --> E["<meta charset>"] C --> F["<meta viewport>"] B --> G["<body>"] G --> H["<h1> ខ្សែចំណង"] G --> I["<div> កុងតាំង"] G --> J["<img> រូបភាព"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` ចាប់ផ្តើមដោយបន្ថែមគ្រឹះមូលដ្ឋានសំខាន់ដែលឯកសារ HTML ទាំងអស់ត្រូវការ។ ### ការស្នើសុំណែនាំ DOCTYPE និងធាតុដើម បន្ទាត់ដំបូងសម្រាប់ឯកសារ HTML ដែលណាមួយ មានតួនាទី​ជា "ការណែនាំ" ឯកសារនៅកាន់កម្មវិធីច្រករុករក៖ ```html <!DOCTYPE html> <html></html> ``` **យល់ដឹងអំពីអ្វីដែលកូដនេះធ្វើ:** - **ស្នើសុំណែនាំ**ប្រភេទឯកសារជា HTML5 ជាមួយនឹង `<!DOCTYPE html>` - **បង្កើត**ធាតុដើម `<html>` ដែលនឹងរួមបញ្ចូលមាតិកាទំព័រទាំងអស់ - **ស្ថាបនា**នីតិវិធីវេបសាយទំនើបសម្រាប់ការបង្ហាញត្រឹមត្រូវក្នុងកម្មវិធីច្រករុករក - **ធានា**ការបង្ហាញជាស្ថាពរជាច្រើនកម្មវិធីច្រករុករក និងឧបករណ៏ផ្សេងៗ > 💡 **គន្លឹះ VS Code**: បង្វិលលើស្លាក HTML មួយណាមួយក្នុង VS Code ដើម្បីឃើញព័ត៌មានជួយផ្សេងៗពី MDN Web Docs រួមទាំងឧទាហរណ៍ប្រើប្រាស់ និងលំដាប់ការចូលប្រើកម្មវិធីច្រករុករក។ > 📚 **រៀនបន្ថែម**: ការស្នើសុំណែនាំ DOCTYPE ទប់ស្កាត់កម្មវិធីច្រករុករកចូលទៅក្នុង "របៀប quirks," ដែលធ្លាប់ត្រូវបានប្រើសម្រាប់គេហទំព័រចាស់មួយចំនួន។ ការអភិវឌ្ឍវេបសាយទំនើបប្រើការស្នើសុំណែនាំ `<!DOCTYPE html>` របស់ប្រព័ន្ធ [ស្តង់ដារគោរពតាម](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)។ ### 🔄 **ពិនិត្យឥឡូវ** **ផ្អែកនិងចុះរំលឹក**: មុនបន្ត សូមផ្ទៀងផ្ទាត់ថាអ្នកយល់ថា៖ - ✅ ហេតុអាពីព្រោះឯកសារ HTML រាល់មួយត្រូវការស្នើសុំណែនាំ DOCTYPE - ✅ អ្វីដែលធាតុដើម `<html>` រួមមាន - ✅ រចនាសម្ព័ន្ធនេះជួយកម្មវិធីច្រករុករកបង្ហាញទំព័រយ៉ាងត្រឹមត្រូវដូចម្តេច **សាកល្បងរហ័ស**៖ តើអ្នកអាចផ្ដល់ការពន្យល់ដោយពាក្យរបស់អ្នកដោយផ្សព្វផ្សាយន័យ "ការ​បង្ហាញតាមស្តង់ដារ" បានទេ? ## ការបន្ថែមផ្នែក Metadata សំខាន់ឯកសារ ផ្នែក `<head>` នៃឯកសារ HTML មានព័ត៌មានសំខាន់ៗដែលកម្មវិធីច្រករុករក និងម៉ាស៊ីនស្វែងរកត្រូវការ ប៉ុន្តែអ្នកចូលមើលមិនមើលឃើញផ្នែកនេះដោយផ្ទាល់នៅលើទំព័រ។ គិតថាវាជាព័ត៌មាន "ក្រោយស្វែង" ដែលជួយឲ្យគេហទំព័ររបស់អ្នកដំណើរការត្រឹមត្រូវ និងបង្ហាញបានត្រឹមត្រូវលើឧបករណ៍ និងវេទិកាផ្សេងៗ។ Metadata នេះប្រាប់កម្មវិធីច្រករុករកពីរបៀបបង្ហាញទំព័ររបស់អ្នក តួអក្សរដែលត្រូវកំណត់ និងរបៀបគ្រប់គ្រងទំហំអេក្រង់ផ្សេងៗ – របស់ទាំងនេះមានសារៈសំខាន់សម្រាប់បង្កើតទំព័រ​បណ្ដាញដែលមានគុណភាព និងអាចចូលដំណើរការបាន។ ### ភារកិច្ច៖ បន្ថែមផ្នែក Head នៅក្នុងឯកសារ បញ្ចូលផ្នែក `<head>` នេះបណ្ដែកជាមួយស្លាកបើក និងបិទ `<html>` របស់អ្នក: ```html <head> <title>Welcome to my Virtual Terrarium ``` **បែងចែកអ្វីដែលធាតុ​នីមួយៗធ្វើបាន៖** - **កំណត់** ចំណងជើងទំព័រដែលបង្ហាញនៅលើបដាខ្មៅកម្មវិធីច្រករុករកនិងលទ្ធផលស្វែងរក - **កំណត់** អ្នកអញ្ចេត UTF-8 សម្រាប់បង្ហាញអក្សរត្រឹមត្រូវលើពិភពលោក - **ធានា** ការចុះឈ្មោះជាមួយប្រភេទកម្មវិធីច្រករុករក Internet Explorer ទំនើប - **កំណត់** រចនាប័ទ្មប្រតិបត្តិការឆ្លើយតបដោយកំណត់បង្អួចវីវហ្វតឲ្យសមនឹងទទឹងឧបករណ៍ - **គ្រប់គ្រង** កម្រិតហ៊ុមដំបូងសម្រាប់បង្ហាញមាតិកាជាប្រវែងធម្មជាតិ > 🤔 **គិតតាមរឿងនេះ**: តើអ្វីនឹងកើតឡើងបើអ្នកកំណត់ម្ដុំ meta viewport ដូចនេះ ``? វានឹងកំណត់ទំព័រឲ្យមានទទឹង ៦០០ ពិចសែលជានិស្ស័យ បំបែករចនាប័ទ្មចម្លើយ! សូមរៀនបន្ថែមអំពី [ការកំណត់ viewport ត្រឹមត្រូវ](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)។ ## ការបង្កើតផ្នែក Body នៃឯកសារ ធាតុ `` រួមបញ្ចូលអត្ថបទដែលអាចមើលឃើញបានទាំងអស់របស់ទំព័រគេហទំព័រ – អ្វីគ្រប់យ៉ាងដែលអ្នកប្រើនឹងមើលឃើញ និងអន្តរកម្មជាមួយវា។ ខណៈដែលផ្នែក `` ផ្តល់សេចក្តីណែនាំដល់កម្មវិធីច្រករុករក ផ្នែក `` មានមាតិកាពិតប្រាកដ៖ អត្ថបទ រូបភាព ប៊ូតុង និងធាតុផ្សេងៗដែលបង្កើតផ្ទាំងអ្នកប្រើរបស់អ្នក។ ចូរបន្ថែមរចនាសម្ព័ន្ធ body ហើយយល់ដឹងពីរបៀបដែលស្លាក HTML ប្រើសហការជាមួយគ្នាសម្រាប់បង្កើតមាតិការសំខាន់។ ### យល់ដឹងពីរចនាសម្ព័ន្ធស្លាក HTML HTML ប្រើស្លាកលូតលាស់ដើម្បីកំណត់ធាតុ។ ស្លាកភាគច្រើន មានស្លាកបើកដូចជា `

` ហើយស្លាកបិទដូចជា `

`, ជាមួយមាតិកាក្នងទី: `

Hello, world!

`។ នេះបង្កើតធាតុអត្ថបទដែលមានអត្ថបទ "Hello, world!"។ ### ភារកិច្ច៖ បន្ថែមធាតុ Body ធ្វើបច្ចុប្បន្នភាពឯកសារ HTML របស់អ្នក ដើម្បីបញ្ចូលធាតុ ``៖ ```html Welcome to my Virtual Terrarium ``` **នេះជារឿងដែលរចនាសម្ព័ន្ធពេញលេញនេះផ្ដល់សុពលភាព៖** - **បង្កើត** ស៊ុមឯកសារ HTML5 មូលដ្ឋាន - **រួមបញ្ចូល** Metadata សំខាន់សម្រាប់ការបង្ហាញត្រឹមត្រូវ - **បង្កើត** ផ្នែក `` ទទេ សម្រាប់មាតិកាអ្នកអាចមើលឃើញ - **អនុវត្ត** វិធីល្អបំផុតនៃការអភិវឌ្ឍវេបសាយទំនើប ឥឡូវនេះអ្នកបានរួចរាល់ក្នុងការបញ្ជូលធាតុអាចមើលឃើញនៃ terrarium ។ យើងនឹងប្រើធាតុ `
` ជាកន្ត្រក ដើម្បីរៀបចំផ្នែកផ្សេងៗនៃមាតិកា និងធាតុ `` ដើម្បីបង្ហាញរូបភាពរុក្ខជាតិ។ ### ធ្វើការជាមួយរូបភាព និងធាតុផ្ទុករៀបចំរចនាសម្ព័ន្ធ រូបភាពជាផ្នែកពិសេសក្នុង HTML ពីព្រោះវាប្រើស្លាក "បិទខ្លួនឯង"។ មិនដូចធាតុ `

` ដែលបង្រួមមាតិកាទេ ស្លាក `` មានព័ត៌មានទាំងអស់នៅក្នុងស្លាកដោយប្រើលក្ខណៈពិសេសដូចជា `src` សម្រាប់បញ្ជាក់ទីតាំងឯកសាររូបភាព និង `alt` សម្រាប់អាចចូលប្រើបាន។ មុនសិនបន្ថែមរូបភាពទៅ HTML របស់អ្នក អ្នកត្រូវរៀបចំឯកសារគម្រោងបានត្រឹមត្រូវ ដោយបង្កើតថត images ហើយបញ្ចូលរូបភាពរុក្ខជាតិ។ **ជំហានដំបូង សូមរៀបចំរូបភាពអ្នក៖** 1. បង្កើតថតឈ្មោះ `images` នៅក្នុងថតគម្រោង terrarium របស់អ្នក 2. ទាញយករូបភាពរុក្ខជាតិពី [solution folder](../../../../3-terrarium/solution/images) (រូបភាពរុក្ខជាតិ ១៤ រូប) 3. ចម្លងរូបភាពរុក្ខជាតិទាំងអស់ទៅក្នុងថត `images` ថ្មីរបស់អ្នក ### ភារកិច្ច៖ បង្កើតរចនាសម្ព័ន្ធបង្ហាញរុក្ខជាតិ ឥឡូវនេះបន្ថែមរូបភាពរុក្ខជាតិត្រូវបានរៀបចំជា ២ ជួរមេធ្វើនៅចន្លោះស្លាក `` របស់អ្នក៖ ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **ជំហានក្នុងកូដនេះមានអ្វីកើតឡើង៖** - **បង្កើត** រក្នុងទំព័រមេ container ជាមួយ `id="page"` ដើម្បីផ្ទុកមាតិកាទាំងអស់ - **បង្កើត** កន្ត្រកជួរស្ដាំ និងឆ្វេង៖ `left-container` និង `right-container` - **រៀបចំ** រុក្ខជាតិ ៧ មុខនៅជួរឆ្វេង និង ៧ មុខនៅជួរស្ដាំ - **បង្រួម** រូបភាពរុក្ខជាតិមួយៗនៅក្នុង `div plant-holder` សម្រាប់តំណត់ទីតាំង​ផ្ទាល់ខ្លួន - **អនុវត្ត** ឈ្មោះថ្នាក់សំរាប់ CSS តាមមេរៀនបន្ទាប់ - **ផ្ដល់** ID យូរអង្វែងសំរាប់រូបភាពរុក្ខជាតិ សំរាប់អន្តរកម្ម JavaScript បន្តក្រោយ - **បញ្ចូល** ផ្លូវឯកសារមានភាពត្រឹមត្រូវទៅថត images > 🤔 **ពិចារណាគឺចឹង**: សូមចត់សំពាធថារូបភាពទាំងអស់មានអត្ថបទ alt ដូចគ្នា "plant"។ វាមិនល្អសម្រាប់ការអាចចូលប្រើបានទេ។ អ្នកប្រើ screen reader នឹងស្តាប់ "plant" ជាថ្មី ១៤ ដង ដោយគ្មានការយល់ដឹងពីរុក្ខជាតិណាដែលត្រូវបានបង្ហាញ។ តើអ្នកអាចគិតពីអត្ថបទ alt ដ៍ល្អ និងពិពណ៌នាបានច្រើនជាងនេះសម្រាប់រូបភាពនីមួយៗទេ? > 📝 **ប្រភេទធាតុ HTML**: ធាតុ `
` ជា "block-level" ដែលទទួលទទឹងពេញលំហូរ ខណៈដែល `` ជា "inline" ដែលទទួលទទឹងតាមតម្រូវការ។ តើតើអ្នកគិតថាអ្វីនឹងកើតឡើង ប្រសិនបើអ្នកបម្លែងស្លាក `
` ទាំងអស់ទៅជា ``? ### 🔄 **ពិនិត្យឥឡូវ** **យល់ដឹងពីរចនាសម្ព័ន្ធ**៖ ចំណាយពេលមួយពិនិត្យរចនាសម្ព័ន្ធ HTML របស់អ្នក៖ - ✅ តើអ្នកអាចកំណត់ container សំខាន់ៗក្នុងរចនាសម្ព័ន្ធទិន្ន័យរបស់អ្នកទេ? - ✅ តើអ្នកយល់ដឹងហេតុអ្វីរូបភាពនីមួយៗមាន ID វិសេស? - ✅ តើអ្នកនិយាយពីគោលបំណងនៃ `plant-holder` div បានដូចម្តេច? **ពិនិត្យមើលទិដ្ឋភាព**៖ បើកឯកសារ HTML របស់អ្នកក្នុងកម្មវិធីច្រករុករក។ អ្នកគួរតែឃើញ៖ - បញ្ជីរូបភាពរុក្ខជាតាមូលដ្ឋាន - រូបភាពរៀបចំជា ២ ជួរ - រចនាសម្ព័ន្ធសាមញ្ញ មិនទាន់តុបតែង **ចងចាំ**៖ ទិដ្ឋភាពសាមញ្ញនេះគឺជារូបរាងដែល HTML គួរតែបង្ហាញ មុនពេល CSS នឹងបន្ថែមការតុបតែង! ដោយមាន markup នេះ, រុក្ខជាតិទាំងអស់នឹងបង្ហាញលើអេក្រង់ ប៉ុន្តែវានឹងមិនស្អាតនៅឡើយ — នេះជាការតុបតែង CSS សម្រាប់មេរៀនបន្ទាប់។ បច្ចុប្បន្ននេះអ្នកមានគ្រឹះ HTML ការពារយ៉ាងច្បាស់ ដើម្បីរៀបចំមាតិកា និងអនុវត្តន៍គន្លឹះ accessibility ល្អបំផុត។ ## ប្រើប្រាស់ Semantic HTML សម្រាប់ការចូលប្រើបាន Semantic HTML មានន័យថាប្រើធាតុ HTML ដោយផ្អែកលើអត្ថន័យ និងគោលបំណងរបស់វា មិនមែនតែមើលលក្ខណៈរូបរាងទេ។ នៅពេលដែលអ្នកប្រើ markup តាមពាក្យសម្រួលនេះ អ្នកកំពុងប្រាប់រចនាសម្ព័ន្ធ និងមាតិការបស់អ្នកទៅកម្មវិធីច្រករុករក ម៉ាស៊ីនស្វែងរក និងបច្ចេកវិទ្យាជំនួយដូចជា screen readers ។ ```mermaid flowchart TD A[ត្រូវការបន្ថែមខ្លឹមសារ?] --> B{ប្រភេទអ្វី?} B -->|ចំណងជើងធំ| C["

"] B -->|ចំណងជើងរង| D["

,

, ល។"] B -->|អត្ថបទ| E["

"] B -->|បញ្ជី| F["

    ,
      "] B -->|ការរុករក| G["