រំលងទៅមាតិកាសំខាន់
HTML

HTML គឺជាអ្វី?

មុននឹងចាប់ផ្តើមសរសេរ code ណាមួយ ចាំបាច់ត្រូវយល់ថា HTML គឺជាអ្វី ហើយវាដើរតួនាទីអ្វីនៅក្នុងគេហទំព័រមួយ។ មេរៀននេះជាចំណុចចាប់ផ្តើមនៃ Course HTML...

មុននឹងចាប់ផ្តើមសរសេរ code ណាមួយ ចាំបាច់ត្រូវយល់ថា HTML គឺជាអ្វី ហើយវាដើរតួនាទីអ្វីនៅក្នុងគេហទំព័រមួយ។ មេរៀននេះជាចំណុចចាប់ផ្តើមនៃ Course HTML ទាំងមូល។

គោលដៅសិក្សា

  • យល់ពីអត្ថន័យពេញនៃ HTML
  • ដឹងថា HTML ខុសពី CSS និង JavaScript យ៉ាងណា
  • ស្គាល់រូបរាងទូទៅនៃ HTML document មួយ

តម្រូវការជាមុន

មិនចាំបាច់មានចំណេះដឹងអ្វីពីមុនទេ។ គ្រាន់តែមាន browser (Chrome, Firefox) និង text editor ណាមួយ (VS Code ជាការណែនាំ)។

HTML គឺជាអ្វី?

HTML តំណាងឲ្យ HyperText Markup Language។ វាមិនមែនជា programming language ទេ — HTML ជា markup language ដែលប្រើសម្រាប់កំណត់រចនាសម្ព័ន្ធ (structure) របស់ទំព័រ Web៖ តើផ្នែកណាជាចំណងជើង ផ្នែកណាជាកថាខណ្ឌ ផ្នែកណាជារូបភាព។

អាចប្រៀបធៀបទៅនឹងគ្រោងឆ្អឹងនៃផ្ទះមួយ៖

  • HTML — គ្រោងឆ្អឹង (Structure)
  • CSS — ការតុបតែង ពណ៌ រូបរាង (Style)
  • JavaScript — អាកប្បកិរិយា អន្តរកម្ម (Behavior)

ឧទាហរណ៍ជាក់ស្តែង

រាល់គេហទំព័រដែលអ្នកបើកមើល — Facebook, Google, YouTube — សុទ្ធតែសរសេរដោយ HTML ជាមូលដ្ឋាន។ អ្នកអាចមើលឃើញ code HTML ណាមួយបាន ដោយចុច Right Click → View Page Source។

Syntax

HTML សរសេរដោយប្រើ tag។ Tag ភាគច្រើនមានគូ៖ tag បើក និង tag បិទ។

<tagname>មាតិកានៅទីនេះ</tagname>

ឧទាហរណ៍

នេះជារចនាសម្ព័ន្ធ HTML document តូចបំផុតដែលអាចដំណើរការបាន៖

<!DOCTYPE html>
<html lang="km">
<head>
  <meta charset="UTF-8">
  <title>ទំព័រដំបូងរបស់ខ្ញុំ</title>
</head>
<body>
  <h1>សួស្តី​ពិភពលោក</h1>
  <p>នេះជាទំព័រ HTML ដំបូងរបស់ខ្ញុំ។</p>
</body>
</html>
OUTPUT
សួស្តី​ពិភពលោក
នេះជាទំព័រ HTML ដំបូងរបស់ខ្ញុំ។

ពន្យល់

<!DOCTYPE html> ប្រាប់ browser ថានេះជា HTML5 document។ <html> គឺជា root element។ <head> ផ្ទុកព័ត៌មានសម្រាប់ browser (មិនបង្ហាញលើទំព័រ) ចំណែក <body> ផ្ទុកមាតិកាទាំងអស់ដែលអ្នកមើលឃើញ។

អនុវត្ត

កែអត្ថបទក្នុង <h1> និង <p> ខាងក្រោម រួចចុច Run Code ដើម្បីមើលលទ្ធផល៖

<h1>សួស្តី​ពិភពលោក</h1> <p>នេះជាការសាកល្បងដំបូងរបស់ខ្ញុំ។</p>

បញ្ហាញឹកញាប់

ច្រឡំ HTML ជាមួយ programming language

HTML មិនមាន logic (if, loop) ដូច Python ឬ JavaScript ទេ។ វាគ្រាន់តែពណ៌នារចនាសម្ព័ន្ធប៉ុណ្ណោះ។ Logic ជាការងាររបស់ JavaScript។

ភ្លេច <!DOCTYPE html>

បើមិនដាក់បន្ទាត់នេះ browser អាចបកស្រាយ HTML ខុសពីអ្វីដែលអ្នកចង់បាន (គេហៅថា quirks mode)។

តេស្តខ្លួនឯង

========================================================= ចំណាំ - Breadcrumb, Module badge, ថ្ងៃខែ, ប៊ូតុង Copy Code, ចែករំលែក, មេរៀនមុន/បន្ទាប់ និងមេរៀនពាក់ព័ន្ធ — Theme បង្កើតដោយស្វ័យប្រវត្តិ - បន្ទាប់ពីផុសរួច ត្រូវយក URL ទៅដាក់ជំនួស href="#lesson-01" ក្នុង sidebar module list (file html-course-module-sidebar.txt) - data-module="1" ត្រូវផ្គូផ្គងនឹងលេខក្នុង sidebar =========================================================
ADVERTISEMENT

មតិយោបល់

មិនទាន់មានមតិនៅឡើយទេ។ សរសេរមតិដំបូងខាងក្រោម។