15 KiB

Raw Permalink Blame History

ការប្រឡងផ្ដល់ហេតុផល 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

កូដទំព័រដើមប្លុករបស់អ្នកអនុវត្តតាមស្តង់ដារទាំងនេះ៖

រចនាសម្ព័ន្ធឯកសារ៖ មាន DOCTYPE, html, head និង body ត្រឹមត្រូវ
ម៉ាកកម្មសម័យ៖ ប្រើធាតុ HTML សម្រាប់គោលបំណងដែលបានកំណត់
ចំណុចចូលដំណើរ៖ បញ្ចូលអក្សរជំនួស alt សម្រាប់រូបភាព និងអត្ថន័យតំណភ្ជាប់
គុណភាពកូដ៖ ប្រើចំណុចបន្សំដ្ឋានត្រឹមត្រូវ និងមានយោបល់មានន័យ
មាតិកា៖ មានមាតិកាប្លុកដែលជាក់ស្តែង (អ្នកអាចប្រើអត្ថបទជំនួស)

រចនាសម្ព័ន្ធ 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 - មគ្គុទេសក៍ពេញលេញសម្រាប់ធាតុ HTML ទាំងអស់
HTML5 Semantic Elements - ការយល់ដឹងអំពីម៉ាកកម្មសម័យ
Web Accessibility Guidelines - ការបង្កើតមាតិកាវេបចូលដំណើរការបាន
HTML Validator - ពិនិត្យសម្រស់គូសសញ្ញា HTML របស់អ្នក

គន្លឹះជោគជ័យ៖

ចាប់ផ្តើមពីគំរូរបស់អ្នកមុនសរសេរកូដណាមួយ
ប្រើឧបករណ៍អភិវឌ្ឍន៍របស់កម្មវិធីរកមើលដើម្បីពិនិត្យរចនាសម្ព័ន្ធ HTML
សាកល្បងទំព័ររបស់អ្នកជាមួយទំហំអេក្រង់ផ្សេងគ្នា (គ្មាន CSS ក៏បាន)
អាន HTML របស់អ្នកចេញមកសម្រាប់ពិនិត្យមើលថារចនាសម្ព័ន្ធមានហេតុផល
ពិចារណាថាឧបករណ៍អានអេក្រង់នឹងយល់ដឹងរចនាសម្ព័ន្ធទំព័ររបស់អ្នកយ៉ាងដូចម្តេច

💡 ចងចាំ៖ កិច្ចការនេះផ្តោតលើរចនាសម្ព័ន្ធ HTML និងម៉ាកកម្មសម័យ។ កុំបារម្ភអំពីរចនាប័ទ្មមើលមនុស្ស — អ្នកអាចមើលសាមញ្ញ ប៉ុន្តែត្រូវតែមានរចនាសម្ព័ន្ធល្អនិងមានអត្ថន័យ។

ការបដិសេធ៖
ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាកម្មបកប្រែ AI Co-op Translator ។ ខណៈពេលដែលយើងខិតខំប្រឹងប្រែងសម្រាប់ភាពត្រឹមត្រូវ សូមយល់ថាការបកប្រែដោយស្វ័យប្រវត្តិក្នុងខ្លួនវាអាចមានកំហុស ឬ ភាពមិនត្រឹមត្រូវ។ ឯកសារដើមនៅភាសាទំនើបគួរត្រូវបានចាត់ទុកជាក្រុមហ៊ុនផ្ដល់ព័ត៌មានសម្លឹងឆ្លាត។ សម្រាប់ព័ត៌មានសំខាន់ៗ យើងណែនាំឱ្យស្វែងរកការបកប្រែដោយអ្នកជំនាញមនុស្សដែលមានជំនាញវិជ្ជាជីវៈ។ យើងមិនទទួលខុសត្រូវចំពោះការយល់អកុសល ឬការបកប្រែបញ្ហាណាមួយដែលកើតមានពីការប្រើប្រាស់ការបកប្រែនេះទេ។

15 KiB Raw Permalink Blame History

ការប្រឡង​ផ្ដល់ហេតុផល HTML៖ កសាងគំរូប្លុក

គោលបំណង​សិក្សា