កូដជេនហ្សី
1

សេចក្ដីណែនាំអំពី HMTL

១.១ HTML គឺជាអ្វី?

HTML (HyperText Markup Language)
→ ជាភាសាសម្រាប់បង្កើត និងរៀបចំរចនាសម្ព័ន្ធគេហទំព័រ។

HTML គឺជា “ឆ្អឹងខ្នង” របស់ Web Development។
គេមិនអាចបង្កើតវេបបាន ប្រសិនបើមិនចេះ HTML។

✨ អ្វីដែល HTML អាចធ្វើបាន

✔​ បង្ហាញអត្ថបទ
✔ រូបភាព
✔ វីដេអូ
✔ Link
✔ Form
✔ Table
✔ Layout
✔ Structure Page
HTML ស្រួលរៀន និងចាំ!

១.២​ ហេតុអ្វីត្រូវរៀន HTML?

☀️ ងាយរៀន និងមិនចាំបាច់មាន Coding Skill មុនទេ

HTML មិនមែនជា Programming Language
➡️ មិនមាន Logic
➡️ គ្រាន់តែមាន Tag
➡️ មើលម្តង យល់ម្តង

☀️ អាចបង្កើតគេហទំព័រផ្ទាល់ខ្លួនបាន
➡️ Landing Page
➡️ Portfolio
➡️ CV Online
➡️ Business Website

☀️ រៀន HTML ដើម្បី៖
➡️​​​​ ចាប់ផ្តើម Web Development
➡️ បង្កើតគេហទំព័ររបស់អ្នក
➡️ មានឱកាសការងារល្អ
➡️ ជំហានដំបូងទៅ Programming
➡️ ងាយរៀន បង្រៀន និងអនុវត្ត

2

រចនាសម្ព័ន្ធមូលដ្ឋាន (Basic Structure)

២.១ HTML Document Structure

ចម្លងកូដខាងក្រោមដើម្បីបង្កើតកម្មវិធីសាកល្បង៖

Code Example 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ទំព័រដំបូង</title>
</head>
<body>
    <h1>សួស្តី HTML</h1>
</body>
</html>

ពន្យល់

➡️ <!DOCTYPE html> → HTML5
➡️ <html> → Root
➡️ <head> → ព័ត៌មានមិនបង្ហាញ
➡️ <body> → ព័ត៌មានបង្ហាញ

ចំណាំ​​ ៖

💡 រាល់ការសរសេរកូដត្រូវតែត្រាប់តាម structure !

២.២ Tag

☀️​Tag (ស្លាក) គឺជា ធាតុមូលដ្ឋានដែលប្រើសម្រាប់បង្កើតនិងកំណត់រចនាសម្ព័ន្ធលើទំព័រវេបសាយ។ Tag បង្ហាញទៅកាន់កម្មវិធីរក្សាទំព័រ (browser) ថាតើត្រូវបង្ហាញមាតិកាដូចម្តេច ឬត្រូវដាក់បែបណារបស់វា។

២.២.១​ Heading

☀️Heading ជា Tag មួយដែលមានអក្សរដិតខ្មៅ​ ភាគច្រើនគេប្រើវាជាចំណងជើង​។ វាមានពី h1 ដល់ h6 ដែល​ h1 មានទំហំអក្សរធំជាងគេ ​

<h1>ចំណងជើង Level 1</h1>
<h6>Level 6</h6>

ឧទាហរណ៍

ចម្លងកូដខាងក្រោមដើម្បីបង្កើតកម្មវិធីសាកល្បង៖

Code Example 

<!DOCTYPE html>
<html lang="km">
<head>
    <meta charset="UTF-8">
    <title>ឧទាហរណ៍ Heading</title>
</head>
<body>
    <h1>ចំណងជើង Level 1</h1>
    <h2>ចំណងជើង Level 2</h2>
    <h3>ចំណងជើង Level 3</h3>
    <h4>ចំណងជើង Level 4</h4>
    <h5>ចំណងជើង Level 5</h5>
    <h6>ចំណងជើង Level 6</h6>
</body>
</html>

២.២.២ Paragraph (<p>)

📌 <p> tag គឺជាអ្វី?
👉 Paragraph (<p>) គឺជា HTML Tag ដែលប្រើសម្រាប់​សរសេរអត្ថបទជាបន្ទាត់ ឬជាកថាខណ្ឌ (paragraph) នៅលើគេហទំព័រ។

<p>អត្ថបទនៅទីនេះ</p>

☀️ពន្យល់
➡️<p> → Tag បើក
➡️</p> → Tag បិទ
➡️អត្ថបទនៅកណ្ដាល → ខ្លឹមសារ (content)

២.២.៣.​ ​Text Formatting (ការតុបតែងអត្ថបទ)

📌 Text Formatting គឺជាអ្វី?
👉Text Formatting គឺជាការប្រើ HTML Tag ដើម្បីធ្វើឲ្យអត្ថបទ ដិត / ទ្រេត / គូសក្រោម / សំខាន់ / សង្កត់សំឡេង

☀️ <b> – អក្សរដិត (Bold)
📌 មុខងារ
➡️ធ្វើឲ្យអត្ថបទ ដិត
➡️គ្រាន់តែសម្រាប់រូបរាង (visual) ប៉ុណ្ណោះ
➡️មិនមានន័យសំខាន់ (semantic)

🧾 ឧទាហរណ៍
<b>ដិត</b>

☀️ <i> – អក្សរទ្រេត (Italic)
📌 មុខងារ
➡️ធ្វើឲ្យអត្ថបទ ទ្រេត
➡️ប្រើសម្រាប់ពាក្យបរទេស ឬពាក្យពិសេស
➡️មិនបញ្ជាក់ន័យសំខាន់

🧾 ឧទាហរណ៍
<i>ទ្រេត</i>

👉 លទ្ធផល៖ ទ្រេត

☀️ <u> – គូសក្រោម (Underline)
📌 មុខងារ
➡️គូសបន្ទាត់នៅក្រោមអត្ថបទ
➡️ប្រើប្រយ័ត្ន ព្រោះវាអាចច្រឡំជាតំណភ្ជាប់ (link)

🧾 ឧទាហរណ៍
<u>គូសក្រោម</u>

☀️ <strong> – អត្ថបទសំខាន់ (Important)
📌 មុខងារ
➡️ធ្វើឲ្យអត្ថបទ ដិត
➡️បញ្ជាក់ថា អត្ថបទនេះសំខាន់
➡️មានន័យសម្រាប់ SEO និង Screen Reader

🧾 ឧទាហរណ៍
<strong>សំខាន់</strong>

👉 លទ្ធផល៖ សំខាន់

📌 ចំណាំ៖
<strong> មើលទៅដូច <b> ប៉ុន្តែមាន អត្ថន័យ (semantic)

☀️ <em> – សង្កត់សំឡេង (Emphasis)
📌 មុខងារ
➡️ធ្វើឲ្យអត្ថបទ ទ្រេត
➡️បញ្ជាក់ការសង្កត់សំឡេងក្នុងប្រយោគ
➡️មានន័យសម្រាប់ Screen Reader

🧾 ឧទាហរណ៍
<em>សង្កត់សំឡេង</em>

👉 លទ្ធផល៖ សង្កត់សំឡេង

📌 ចំណាំ៖
<em> មើលទៅដូច <i> ប៉ុន្តែមានន័យច្បាស់

⚠️ អនុសាសន៍ល្អ
✅ ប្រើ <strong> ជំនួស <b>
✅ ប្រើ <em> ជំនួស <i>
❌ កុំប្រើ <u> ច្រើនពេក

✅ សរុប
<b> / <i> → សម្រាប់រូបរាង
<strong> / <em> → សម្រាប់អត្ថន័យ
Text Formatting ធ្វើឲ្យអត្ថបទងាយអាន និងមានន័យច្បាស់

ឧទាហរណ៍

ចម្លងកូដខាងក្រោមដើម្បីបង្កើតកម្មវិធីសាកល្បង៖

Code Example 

<p>
  <strong>HTML</strong> គឺជា
  <em>ភាសាសំខាន់</em>
  សម្រាប់បង្កើត
  <u>គេហទំព័រ</u>
</p>

២.២.៤.​ Link (<a>)

📌 Link គឺជាអ្វី?

Link (តំណភ្ជាប់) គឺជា HTML Element ដែលអនុញ្ញាតឲ្យអ្នកប្រើ
👉 ចុចពីទំព័រមួយ ទៅទំព័រមួយ
👉 ចុចទៅ Website ផ្សេង
👉 ចុចទៅ Section ខាងក្នុងទំព័រ

HTML ប្រើ Tag <a> (anchor) សម្រាប់បង្កើត Link

🧾 Syntax (របៀបសរសេរ)
<a href="URL">អត្ថបទសម្រាប់ចុច</a>

☀️ពន្យល់៖
➡️<a> → Tag បើក
➡️href → ទិសដៅ Link (URL)
➡️</a> → Tag បិទ
➡️អត្ថបទខាងក្នុង → អ្នកប្រើចុច

🧾 ឧទាហរណ៍
➡️<a href="https://google.com">ចូល Google</a>👉 ចុចហើយទៅ Google ក្នុង Tab ដដែល

🔄 target Attribute
☀️target="_blank"

បើក Link ក្នុង Tab ថ្មី
<a href="https://google.com" target="_blank">ចូល Google</a>

📌 ប្រើពេលចង់ឲ្យអ្នកប្រើនៅទំព័រដើម

📁 Link ទៅ File ខាងក្នុង Website
<a href="about.html">អំពីយើង</a>

📧 Email Link
<a href="mailto:example@gmail.com">ផ្ញើ Email</a>

📞 Phone Link
<a href="tel:012345678">ហៅទូរស័ព្ទ</a>

២.២.៥.​ Image (<img>)

📌 Image គឺជាអ្វី?
👉 ​​Image (រូបភាព) គឺជា HTML Element ដែលប្រើសម្រាប់បង្ហាញរូបថត / រូបភាព នៅលើគេហទំព័រ

Tag ដែលប្រើគឺ <img>
📌 វាជា self-closing tag (មិនចាំបាច់មាន </img>)

Syntax (របៀបសរសេរ)
<img src="photo.jpg" alt="រូបថត" width="250">

☀️ ពន្យល់ Attribute នីមួយៗ
👉​​ src (Source)

src="photo.jpg"

➡️ជា ទីតាំងរូបភាព
➡️អាចជា file ក្នុង project ឬ URL ខាងក្រៅ

ឧទាហរណ៍៖
<img src="images/photo.jpg">
<img src="https://example.com/photo.jpg">

☀️ alt (Alternative Text)
👉 alt="រូបថត"

➡️អត្ថបទជំនួស បើរូបមិនបង្ហាញ
➡️សម្រាប់ Screen Reader (អ្នកពិការភ្នែក)
➡️ជួយ SEO
📌 គួរដាក់ ជានិច្ច

ឧទាហរណ៍

ចម្លងកូដខាងក្រោមដើម្បីបង្កើតកម្មវិធីសាកល្បង៖

Code Example 

<!DOCTYPE html>
<html lang="km">
<head>
    <meta charset="UTF-8">
    <title>HTML Image Example</title>
</head>
<body>

    <h1>ឧទាហរណ៍ Image ក្នុង HTML</h1>

    <!-- Image ធម្មតា -->
    <img src="photo.jpg" alt="រូបភាពធម្មជាតិ" width="250">

    <br><br>

    <!-- Image ជា Link -->
    <a href="https://google.com" target="_blank">
        <img src="logo.png" alt="Google Logo" width="120">
    </a>

    <br><br>

    <!-- Image ជាមួយ Caption -->
    <figure>
        <img src="photo.jpg" alt="ភ្នំ និងធម្មជាតិ" width="300">
        <figcaption>រូបភាពធម្មជាតិដ៏ស្រស់ស្អាត</figcaption>
    </figure>

    <br><br>

    <!-- Image ពី Internet -->
    <img 
        src="https://via.placeholder.com/300"
        alt="រូបភាពពី Internet"
    >

</body>
</html>
3

HTML Lists & Tables

អ្វីជា​ HTML List​ និង Table?

☀️ ជំពូកនេះយើងរៀនអំពី List (បញ្ជី) និង Table (តារាង) ដែលគេប្រើញឹកញាប់ណាស់ក្នុង Website ដូចជា៖

➡️ Menu
➡️ Step by step
➡️ Price table
➡️ Student list
➡️ Product list