You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
15 KiB
145 lines
15 KiB
# ការប្រឡងផ្ដល់ហេតុផល HTML៖ កសាងគំរូប្លុក
|
|
|
|
## គោលបំណងសិក្សា
|
|
|
|
អនុវត្តចំណេះដឹង HTML របស់អ្នកដោយរចនានិងកូដរចនាសម្ព័ន្ធទំព័រដើមប្លុកមួយគ្រប់លក្ខណៈ។ ការប្រឡងបញ្ញាត់នេះនឹងផ្តល់ឱ្យអ្នកនូវយុទ្ធសាស្រ្ត HTML សម្របសម្រួល លក្ខណៈចូលប្រើបានល្អ និងជំនាញរៀបចំកូដផ្លូវការដែលអ្នកនឹងប្រើនៅពេលពិភពវេបសាយរបស់អ្នក។
|
|
|
|
**ដោយបញ្ចប់កិច្ចការនេះ អ្នកនឹង៖**
|
|
- ធ្វើការធ្វើផែនការរចនាគេហទំព័រមុនពេលកូដ
|
|
- ប្រើធាតុ HTML ដែលមានន័យត្រឹមត្រូវ
|
|
- បង្កើតម៉ាកអកដ៏ចូលដំណើរការបាននិងមានរចនាសម្ព័ន្ធល្អ
|
|
- អភិវឌ្ឍទម្លាប់កូដផ្លូវการជាមួយយោបល់និងការរៀបចំ
|
|
|
|
## ទាមទារគម្រោង
|
|
|
|
### ផ្នែកទី ១៖ ផែនការរចនា (គំរូមើលឃើញ)
|
|
|
|
**បង្កើតគំរូមើលឃើញនៃទំព័រដើមប្លុករបស់អ្នកដែលមាន៖**
|
|
- កម្រងខាងលើជាមួយចំណងជើងគេហទំព័រនិងការរុករក
|
|
- តំបន់មាតិកាធំជាមួយពិពណ៌នាប្លុកយ៉ាងតិច ២-៣
|
|
- តំបន់ផ្នែកជាក្រោយជាមួយព័ត៌មានបន្ថែម (ផ្នែកអំពី, ពិពណ៌នាព្រឹត្តិការណ៍ថ្មីៗ, ប្រភេទ)
|
|
- មើលខាងក្រោមជាមួយព័ត៌មានទំនាក់ទំនងឬតំណភ្ជាប់
|
|
|
|
**ជម្រើសបង្កើតគំរូ៖**
|
|
- **គំនូរដោយដៃ**៖ ប្រើក្រដាសនិងខ្មៅ, បន្ទាប់មកថតរូបឬស្កេនរចនារបស់អ្នក
|
|
- **ឧបករណ៍ឌីជីថល**៖ Figma, Adobe XD, Canva, PowerPoint ឬកម្មវិធីគំនូរអ្វីមួយ
|
|
- **ឧបករណ៍ Wireframe**៖ Balsamiq, MockFlow ឬកម្មវិធី Wireframing ផ្សេងទៀត
|
|
|
|
**សម្គាល់ផ្នែកគំរូរបស់អ្នក** ជាមួយធាតុ HTML ដែលអ្នកមានគម្រោងប្រើ (ឧ. "Header - `<header>`", "Blog Posts - `<article>`")។
|
|
|
|
### ផ្នែកទី ២៖ ផែនការធាតុ HTML
|
|
|
|
**បង្កើតបញ្ជីផ្សំផ្គុំផ្នែកនីមួយៗនៃគំរូរបស់អ្នកជាមួយធាតុ HTML ជាក់លាក់៖**
|
|
|
|
```
|
|
Example:
|
|
- Site Header → <header>
|
|
- Main Navigation → <nav> with <ul> and <li>
|
|
- Blog Post → <article> with <h2>, <p>, <time>
|
|
- Sidebar → <aside> with <section> elements
|
|
- Page Footer → <footer>
|
|
```
|
|
|
|
**ធាតុត្រូវការដែលត្រូវបញ្ចូល៖**
|
|
HTML របស់អ្នកត្រូវតែមានយ៉ាងតិច ១០ ធាតុ semantic ផ្សេងៗពីបញ្ជីនេះ៖
|
|
- `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`
|
|
- `<h1>`, `<h2>`, `<h3>`, `<p>`, `<ul>`, `<li>`, `<a>`
|
|
- `<img>`, `<time>`, `<blockquote>`, `<strong>`, `<em>`
|
|
|
|
### ផ្នែកទី ៣៖ អនុវត្ត HTML
|
|
|
|
**កូដទំព័រដើមប្លុករបស់អ្នកអនុវត្តតាមស្តង់ដារទាំងនេះ៖**
|
|
|
|
1. **រចនាសម្ព័ន្ធឯកសារ**៖ មាន DOCTYPE, html, head និង body ត្រឹមត្រូវ
|
|
2. **ម៉ាកកម្មសម័យ**៖ ប្រើធាតុ HTML សម្រាប់គោលបំណងដែលបានកំណត់
|
|
3. **ចំណុចចូលដំណើរ**៖ បញ្ចូលអក្សរជំនួស alt សម្រាប់រូបភាព និងអត្ថន័យតំណភ្ជាប់
|
|
4. **គុណភាពកូដ**៖ ប្រើចំណុចបន្សំដ្ឋានត្រឹមត្រូវ និងមានយោបល់មានន័យ
|
|
5. **មាតិកា**៖ មានមាតិកាប្លុកដែលជាក់ស្តែង (អ្នកអាចប្រើអត្ថបទជំនួស)
|
|
|
|
**រចនាសម្ព័ន្ធ HTML ឧទាហរណ៍៖**
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>My Personal Blog</title>
|
|
</head>
|
|
<body>
|
|
<!-- Main site header -->
|
|
<header>
|
|
<h1>My Blog Title</h1>
|
|
<nav>
|
|
<!-- Navigation menu -->
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Main content area -->
|
|
<main>
|
|
<!-- Blog posts go here -->
|
|
</main>
|
|
|
|
<!-- Sidebar content -->
|
|
<aside>
|
|
<!-- Additional information -->
|
|
</aside>
|
|
|
|
<!-- Site footer -->
|
|
<footer>
|
|
<!-- Footer content -->
|
|
</footer>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
### ផ្នែកទី ៤៖ ការសង់វិចារណា
|
|
|
|
**សរសេរការសង់វិចារណា(៣-៥វាគ្មិន)ដែលមាន៖**
|
|
- តើធាតុ HTML មួយណាអ្នកមានទំនុកចិត្តច្រើនបំផុត?
|
|
- តើមានការលំបាកអ្វីខ្លះក្នុងការធ្វើផែនការឬកូដ?
|
|
- តើ HTML semantic ជួយរៀបចំមាតិកាយ៉ាងដូចម្តេច?
|
|
- តើអ្នកនឹងធ្វើអ្វីខុសគ្នានៅគម្រោង HTML បន្ទាប់របស់អ្នក?
|
|
|
|
## បញ្ជីធ្វើការដាក់ស្នើ
|
|
|
|
**មុនពេលដាក់ស្នើ សូមប្រាកដថាអ្នកមាន៖**
|
|
- [ ] គំរូមើលឃើញមានស្លាកធាតុ HTML
|
|
- [ ] ឯកសារ HTML ពេញលេញជាមួយរចនាសម្ព័ន្ធឯកសារត្រឹមត្រូវ
|
|
- [ ] មានធាតុ HTML semantic ផ្សេងៗយ៉ាងតិច ១០ ត្រូវបានប្រើត្រឹមត្រូវ
|
|
- [ ] មានយោបល់ដែលមានន័យបរិយាយរចនាសម្ព័ន្ធកូដ
|
|
- [ ] ហេតុផល HTML ត្រឹមត្រូវ (សាកល្បងនៅក្នុងកម្មវិធីរកមើលវេប)
|
|
- [ ] ការសង់វិចារណាដែលឆ្លើយតបសំណួរ
|
|
|
|
## តារាងវាយតម្លៃ
|
|
|
|
| វិសាលភាព | ល្អឥតខ្ចោះ (៤) | មានជំនាញល្អ (៣) | កំពុងអភិវឌ្ឍ (២) | កំពុងចាប់ផ្ដើម (១) |
|
|
|----------|-------------------|--------------------|--------------------|-------------------|
|
|
| **ការធ្វើផែនការនិងការរចនា** | គំរូលម្អិត មានស្លាកច្បាស់ បង្ហាញការយល់ដឹងច្បាស់លាស់នៃរចនាសម្ព័ន្ធ និង HTML semantic | គំរូច្បាស់សំខាន់ៗ មានស្លាកត្រឹមត្រូវ | គំរូមូលដ្ឋាន មានការស្លាកខ្លះ បង្ហាញការយល់ដឹងទូទៅ | គំរូតិច ឬមិនច្បាស់ខ្លាំង កាត់ខ្សែផ្នែកអត្តសញ្ញាណមិនត្រឹមត្រូវ |
|
|
| **ការប្រើប្រាស់ HTML Semantic** | ប្រើ ១០+ ធាតុ semantic ត្រឹមត្រូវ បង្ហាញការយល់ដឹងជ្រាលជ្រៅ ពីរចនាសម្ព័ន្ធ HTML និងចំណុចចូលដំណើរ | ប្រើ ៨-៩ ធាតុ semantic ត្រឹមត្រូវ បង្ហាញការយល់ដឹងល្អពីម៉ាកកម្មសម័យ | ប្រើ ៦-៧ ធាតុ semantic មានការភាន់ច្រឡំហើយ | ប្រើតិចជាង ៦ ឬប្រើឥតត្រឹមត្រូវ |
|
|
| **គុណភាពកូដនិងការរៀបចំ** | រៀបចំយ៉ាងល្អ សរសេរដាក់ឆ្នេរ និងមានយោបល់ពេញលេញ នឹងមានកូដ HTML ត្រឹមត្រូវ | រៀបចំត្រឹមត្រូវ មានការឋិតិភាព ចំនុចយោបល់ល្អ និងស្វយ័ត | រៀបចំភាគច្រើន មានយោបល់ខ្លះ បញ្ហាតិចតួច | រៀបចំខ្វះខាត យោបល់តិច គំរូកូដខូច |
|
|
| **ចំណុចចូលដំណើរ និងអនុវត្តល្អបំផុត** | ធ្វើការពិចារណាចូលដំណើរល្អ អក្សរជំនួស alt មានន័យ ខ្នាតចំណងជើងត្រឹមត្រូវ និងអនុវត្តល្អបំផុត | មានលក្ខណៈចូលដំណើរល្អ ប្រើចំណងជើង និង alt ត្រឹមត្រូវ និងអនុវត្តភាគច្រើនគោលការណ៍ | មានលក្ខណៈចូលដំណើរខ្លះៗ អក្សរជំនួស alt មូលដ្ឋាន និងរចនាសម្ព័ន្ធផ្លូវចំណង | លក្ខណៈចូលដំណើរតិច ទំរង់ចំណងជើងមិនល្អ មិនគោរពគោលការណ៍សម័យទំនើប |
|
|
| **ការសង់វិចារណា និងការសិក្សា** | ការសង់វិចារណាឆ្លាតវៃ បង្ហាញការយល់ដឹងជ្រាលជ្រៅអំពីមេរៀន HTML និងវិភាគយ៉ាងល្អ | ការសង់វិចារណាល្អ បង្ហាញការយល់ដឹង និងការយល់ខ្លួនខ្លះៗ | ការសង់វិចារណាមូលដ្ឋាន មានការយល់ដឹងពីមេរៀន HTML ខ្សោយ | ការសង់វិចារណាតិច ឬបាត់ បង្ហាញការយល់ដឹងតិចពីមេរៀនបាន |
|
|
|
|
## ប្រភពសិក្សា
|
|
|
|
**ឯកសារយោងសំខាន់ៗ៖**
|
|
- [MDN HTML Elements Reference](https://developer.mozilla.org/docs/Web/HTML/Element) - មគ្គុទេសក៍ពេញលេញសម្រាប់ធាតុ HTML ទាំងអស់
|
|
- [HTML5 Semantic Elements](https://developer.mozilla.org/docs/Web/HTML/Element#content_sectioning) - ការយល់ដឹងអំពីម៉ាកកម្មសម័យ
|
|
- [Web Accessibility Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) - ការបង្កើតមាតិកាវេបចូលដំណើរការបាន
|
|
- [HTML Validator](https://validator.w3.org/) - ពិនិត្យសម្រស់គូសសញ្ញា HTML របស់អ្នក
|
|
|
|
**គន្លឹះជោគជ័យ៖**
|
|
- ចាប់ផ្តើមពីគំរូរបស់អ្នកមុនសរសេរកូដណាមួយ
|
|
- ប្រើឧបករណ៍អភិវឌ្ឍន៍របស់កម្មវិធីរកមើលដើម្បីពិនិត្យរចនាសម្ព័ន្ធ HTML
|
|
- សាកល្បងទំព័ររបស់អ្នកជាមួយទំហំអេក្រង់ផ្សេងគ្នា (គ្មាន CSS ក៏បាន)
|
|
- អាន HTML របស់អ្នកចេញមកសម្រាប់ពិនិត្យមើលថារចនាសម្ព័ន្ធមានហេតុផល
|
|
- ពិចារណាថាឧបករណ៍អានអេក្រង់នឹងយល់ដឹងរចនាសម្ព័ន្ធទំព័ររបស់អ្នកយ៉ាងដូចម្តេច
|
|
|
|
> 💡 **ចងចាំ**៖ កិច្ចការនេះផ្តោតលើរចនាសម្ព័ន្ធ HTML និងម៉ាកកម្មសម័យ។ កុំបារម្ភអំពីរចនាប័ទ្មមើលមនុស្ស — អ្នកអាចមើលសាមញ្ញ ប៉ុន្តែត្រូវតែមានរចនាសម្ព័ន្ធល្អនិងមានអត្ថន័យ។
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**ការបដិសេធ**៖
|
|
ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាកម្មបកប្រែ AI [Co-op Translator](https://github.com/Azure/co-op-translator) ។ ខណៈពេលដែលយើងខិតខំប្រឹងប្រែងសម្រាប់ភាពត្រឹមត្រូវ សូមយល់ថាការបកប្រែដោយស្វ័យប្រវត្តិក្នុងខ្លួនវាអាចមានកំហុស ឬ ភាពមិនត្រឹមត្រូវ។ ឯកសារដើមនៅភាសាទំនើបគួរត្រូវបានចាត់ទុកជាក្រុមហ៊ុនផ្ដល់ព័ត៌មានសម្លឹងឆ្លាត។ សម្រាប់ព័ត៌មានសំខាន់ៗ យើងណែនាំឱ្យស្វែងរកការបកប្រែដោយអ្នកជំនាញមនុស្សដែលមានជំនាញវិជ្ជាជីវៈ។ យើងមិនទទួលខុសត្រូវចំពោះការយល់អកុសល ឬការបកប្រែបញ្ហាណាមួយដែលកើតមានពីការប្រើប្រាស់ការបកប្រែនេះទេ។
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |