[WDC101] មេរៀន​ទី៣៖ មូលដ្ឋាន​នៃ HTML

មាតិកា​មេរៀន

 

ពី​សប្ដាហ៍​មុន​នោះ ខ្ញុំ​បាន​សរសេរ​អត្ថបទ​ចំនួន​ពីរ​មក​ហើយ​ដែល​និយាយ​អំពី​មូលដ្ឋាន​នៃ​ការ​អភិវឌ្ឍ​វេប​និង​លក្ខណៈ​ទូទៅ​នៃ​វេបសាយ​មួយ។ ប៉ុន្តែ​សំណួរ​សួរ​ថា តើ​យើង​ត្រូវ​បង្កើត​វា​យ៉ាង​ដូចម្ដេច? ខ្ញុំ​ជឿជាក់​ថា​អត្ថបទ​ពីរ​ដំបូង​នោះ បាន​ផ្ដល់​ជា​គំនិត​មូលដ្ឋាន​នានា​ដល់​អ្នក​ក្នុង​ការ​ចាប់ផ្ដើម​ការ​ធ្វើ​វេបសាយ​មួយ។ បើ​មិនទាន់​បាន​អាន​ទេ សូម​មើល​តំណ​ក្នុង​ផ្នែក​មាតិកា​ខាង​លើ។

ចម្លើយ​នៃ​សំណួរ​ខាង​លើ​អាច​យក​ទៅ​បកស្រាយ​បាន​ច្រើន​បែប​ណាស់ ប៉ុន្តែ​ដោយ​ឈរ​នៅ​លើ​ទស្សនៈ “មូលដ្ឋាន” ដូច្នេះ​ហើយ​ខ្ញុំ​នឹង​បកស្រាយ​ទៅ​តាម​បែប​មូលដ្ឋាន​ដែល​អ្នក​ចាប់ផ្ដើម​ធ្វើ​វេប​គួរតែ​បាន​ដឹង​ជា​ចាំបាច់ រួម​ទាំង​វេបសាយ​ផ្សេងៗ​ទៀត​ដែល​អ្នក​ត្រូវ​រៀន​ដោយ​ខ្លួនឯង។

សេចក្ដី​ផ្ដើម

នៅ​ក្នុង​មូលដ្ឋាន​នៃ​ការ​ធ្វើ​វេបសាយ​មួយ គេ​តែងតែ​បង្កើត​វា​ដោយ​មាន​សមាសភាគ​សំខាន់ៗ​យ៉ាង​ហោច​ណាស់​ចំនួន​២​គឺ៖ HTML និង CSS។ ហើយ​មាន​សមាសភាគ​ទី៣​ទៀត​គឺ JavaScript។ CSS និង JavaScript នឹង​ត្រូវ​យក​មក​បង្ហាញ​ច្រើន​នៅ​មេរៀន​បន្តបន្ទាប់​ខាង​មុខ។ នៅ​ពេល​នេះ​យើង​នឹង​ជជែក​ត្រួសៗ​អំពី​ពួកវា​សិន។

HTML ជា​ពាក្យ​កាត់​មក​ពី Hyper-text Markup Language។ យើង​អាច​ហៅ​វា​ថា​ជា​ភាសា​មួយ​ដែល​គេ​ប្រើ​សម្រាប់​រៀបចំ​ធាតុ​ផ្សេងៗ​នៅ​ក្នុង​ទំព័រ​វេប ហើយ​វា​ក៏​ជា​ភាសា​សម្រាប់​បរិយាយ​អំពី​រចនាសម្ព័ន្ធ​នៃ​ទំព័រ​វេប​ដែរ។ សូម​សាកល្បង​ចុច Ctrl + U (Mac: Command + U) នោះ​អ្នក​នឹង​ឃើញ​ផ្ទាំង​ថ្មី​មួយ​លេច​ឡើង។ អក្សរ​ដែល​អ្នក​ឃើញ​នោះ​អាច​មាន HTML, CSS, និង JavaScript។ ដើម្បី​ឲ្យ​ស្គាល់​សញ្ញាណ​វា​បន្តិច សូម​មើល​ត្រង់​កន្លែង​ណា​ដែល​មាន​ប្រើ​សញ្ញា < និង > ។ ខ្ញុំ​ដឹង​ថា​វា​មាន​ច្រើន​កន្លែង។ នោះ​ហើយ​ជា​រូបរាង​នៃ​ធាតុ​នៅ​ក្នុង HTML។

CSS ពាក្យ​ពេញ​របស់​វា​គឺ Cascading Stylesheet។ គេ​ប្រើ​វា​សម្រាប់​រៀបចំ​ស្ទីល​ទៅ​ឲ្យ HTML ពីព្រោះ​ដូច​បាន​បញ្ជាក់​ពី​ខាង​លើ​ហើយ​ថា HTML គ្រាន់តែ​សម្រាប់​បរិយាយ​អំពី​រចនាសម្ព័ន្ធ​នៃ​ទំព័រវេប​ប៉ុណ្ណោះ ឯ​រឿង​ស្ទីល (ពណ៌, ទីតាំង, ទំហំ, …) ផ្សេងៗ​ ត្រូវ​អាស្រ័យ​លើ CSS  ។

JavaScript គេ​អាច​ហៅ​វា​ថា​ជា​ភាសា​កម្មវិធី​នៅ client-side។ ជាទូទៅ​គេ​ប្រើ​វា​សម្រាប់​បង្កើត​ចលនា (animation), បន្ថែម​មុខងារ​ទៅ​ឲ្យ​ធាតុ​ណាមួយ​ក្នុង HTML, ការ​បង្កើត​ជា​កម្មវិធី​វេប។ល។

ទំព័រ​វេប​សាមញ្ញ​មួយ

អត្ថបទ​ដំបូង​របស់​ខ្ញុំ។

អក្សរ​ក្រាស់​របស់​ខ្ញុំ។

កម្មវិធី​សរសេរ​កូដ

អ្នក​ប្រាកដ​ជា​ឆ្ងល់​ហើយ​ថា​តើ​ត្រូវ​ប្រើ​កម្មវិធី​អ្វី​ដើម្បី​សរសេរ​កូដ? ខ្ញុំ​សុំ​ណែនាំ​ឲ្យ​ប្រើ Atom Github សម្រាប់​ការ​សរសេរ​កូដ។

រចនាសម្ព័ន្ធ​ទូទៅ​នៃ HTML

ដើម្បី​បង្កើត​ទំព័រ​វេប HTML មួយ យើង​ចាំបាច់​ត្រូវ​ស្គាល់​រចនាសម្ព័ន្ធ​ទូទៅ​ឬ​រចនាសម្ព័ន្ធ​មូលដ្ឋាន​របស់​វា នោះ​ទើប​យើង​អាច​យល់​អំពី​វា​បាន​ច្បាស់។

នៅ​ក្នុង​រចនាសម្ព័ន្ធ​នេះ​មាន​ចំណុច​បី​ជា​មូលដ្ឋាន​គឺ៖

  1. html – ជា​ធាតុ​ប្រាប់​ឲ្យ​ដឹង​ថា​ជា​ឯកសារ HTML ហើយ​វា​គឺ​ជា​ធាតុ​មេ​គេ​បង្អស់​(root)​ដែល​ក្ដោប​ធាតុ​ដទៃ​ទៀត។ https://dev.w3.org/html5/html-author/#the-html-element
  2. head – ជា​ធាតុ​មួយ​ដែល​ស្ថិត​នៅ​ក្នុង​ធាតុ html ហើយ​ជា​អ្នក​ផ្ទុក​រាល់​ទិន្នន័យមេតា​(metadata)​របស់​ឯកសារ HTML នោះ។ វា​គឺ​ធាតុ​ដំបូង​គេ​នៅ​ក្នុង​ធាតុ html។ https://dev.w3.org/html5/html-author/#the-head-element
  3. title – ជា​ធាតុ​សម្រាប់​កំណត់​ចំណងជើង​បង្ហាញ​នៅ​ក្នុង​ផ្ទាំង​ប្រោវស័រ
  4. body – ជា​ធាតុ​ប្រើ​សម្រាប់​ផ្ទុក​មាតិកា​ចម្បង​របស់​ឯកសារ HTML។ និយាយ​ឲ្យ​ចំ​ទៅ​គឺ​អ្វីៗ​ដែល​ត្រូវ​បង្ហាញ​នៅ​លើ​អេក្រង់​គឺ​ត្រូវ​ទុក​នៅ​ក្នុង​ធាតុ body នេះ។ https://dev.w3.org/html5/html-author/#the-body-element

ធាតុ​នៅ​ក្នុង HTML

នៅ​ក្នុង HTML មាន​ធាតុ​ជាច្រើន ហើយ​ពួកវា​នីមួយៗ​ធ្វើ​កិច្ចការ​ឬ​តំណាង​មុខងារ​ខុសៗ​គ្នា។ ធាតុ​នីមួយៗ​សុទ្ធតែ​មាន​ឈ្មោះ​សម្គាល់​ដូច​ដែល​យើង​ឃើញ​ពី​លើ​ស្រាប់ មាន​ដូចជា​ធាតុ html, head, body ជាដើម។ មាន​ធាតុ​ផ្សេងៗ​ទៀត​ដូចជា​ធាតុ p តំណាង​ឲ្យ paragraph, b គឺ bold, img គឺ image។ល។ ធាតុ​នីមួយៗ​ត្រូវបាន​តំណាង​ដោយ​ស្លាក ហើយ​រចនាសម្ព័ន្ធ​នៃ​ធាតុ​មួយ​ជាទូទៅ​តែង​មាន​ស្លាក​បើក​(start tag), មាតិកា​(content), និង​ស្លាក​បិទ​(end tag)។

ឧទាហរណ៍៖

HTML Tags

គេ​អាច​សម្គាល់​ធាតុ​នីមួយៗ​បាន​ដោយ​ប្រើប្រាស់​ស្លាក​(tag) ហើយ​ស្លាក​នេះ​មាន​បី​ប្រភេទ​គឺ៖

  1. ស្លាក​បើក – ឧ. <p> ជា​ស្លាក​បើក​តំណាង​ឲ្យ​ធាតុ p។ ស្លាក​បើក​មាន​ទ្រង់ទ្រាយ <tag_name>
  2. ស្លាក​បិទ – ឧ. </p> ជា​ស្លាក​បិទ​តំណាង​ឲ្យ​ធាតុ p។ កាល​ណា​មាន​ស្លាក​បើក​នោះ​ក៏​ត្រូវ​មាន​កន្លែង​បិទ។ ស្លាក​បិទ​មាន​ទ្រង់ទ្រាយ​ស្រដៀង​ស្លាក​បើក ដោយ​គ្រាន់​បន្ថែម​សញ្ញា “/” នៅ​ពី​មុខ​ឈ្មោះ​ស្លាក </tag_name>
  3. ស្លាក​បិទ​ខ្លួនឯង – មាន​ធាតុ​មួយ​ចំនួន​ទៀត​មិន​ប្រើ​ស្លាក​បិទ​នោះ​ទេ ពីព្រោះ​វា​មិនមាន​ផ្ទុក​មាតិកា​(content)។ ឧ. <img src="example.png"> ដែល​ស្លាក​នេះ​តំណាង​ឲ្យ​ការ​បង្ហាញ​រូបភាព ដោយ​ផ្ដល់​ទីតាំង​រូបភាព​នៅ​ក្នុង​លក្ខណៈ​កំណត់(attribute)។

 

សរសេរ​កូដ​ឲ្យ​ស្រួល​មើល

ដើម្បី ​សរសេរ​កូដ​ឲ្យ​ងាយស្រួល​មើល ឲ្យ​ដឹង​ថា​ធាតុ​ណា​នៅ​ក្នុង​ណា គឺ​ចាំបាច់​ត្រូវ​ខិត​ធាតុ​ចូល​បន្ទាត់ (Indentation)។ សូម​មើល​កូដ​ដែល​ខ្ញុំ​សរសេរ​ពី​ខាងលើ​មក ខ្ញុំ​តែងតែ​ចូល​បន្ទាត់។ ឧ. <html> ជា​ស្លាក​នៅ​ក្រៅ​គេ មិន​ត្រូវការ​ចូល​បន្ទាត់​ទេ ប៉ុន្តែ <head> និង <body> វា​ជា​ស្លាក​នៅ​ក្នុង <html> ដូច្នេះ​ត្រូវ​ចូល​បន្ទាត់។ ធ្វើ​បែបនេះ​យើង​អាច​ដឹង​ថា​វា​ស្ថិតនៅ​ក្នុង <html>។ អ្នក​អាច​ខិត​ចូល​បន្ទាត់​ដោយ​ចុច Tab។

HTML Attributes

អ្នក​ប្រាកដ​ជា​បាន​ឃើញ​ខ្ញុំ​បញ្ជាក់​អំពី​លក្ខណៈ​កំណត់​ស្លាក​(attribute)​នៅ​ចំណុច​ខាង​លើ។ ខ្ញុំ​គិត​ថា​ពាក្យ​លក្ខណៈ​នេះ វា​ជា​ន័យ​ត្រង់​រួច​ស្រេច​ទៅ​ហើយ គឺ​វា​ជា​ការ​កំណត់​ព័ត៌មាន​បន្ថែម​ទៅ​ឲ្យ​ស្លាក​មួយ​ថា​ត្រូវ​អនុវត្ត​មុខងារ​យ៉ាង​ដូចម្ដេច។

ដូច​យើង​ឃើញ​ខាង​លើ​នោះ ខ្ញុំ​បាន​លើក​ឡើង​អំពី​ធាតុ img ដែល​មាន​លក្ខណៈ​មួយ​ឈ្មោះ​ថា src ប្រើ​សម្រាប់​កំណត់​ទីតាំង​រូបភាព​ដែល​ត្រូវ​បង្ហាញ ហើយ​មាន​តម្លៃ "example.png"

មាន​លក្ខណៈ​មួយ​ចំនួន​ជា​លក្ខណៈ​កំណត់​សកល ហើយ​លក្ខណៈ​ខ្លះ​ទៀត​មាន​តែ​ចំពោះ​ស្លាក​ជាក់លាក់​ណា​មួយ​នោះ​ទេ។ មើល​ទីនេះ​សម្រាប់​លក្ខណៈ​កំណត់​សកល។

ស្លាក​មួយ​ចំនួន

.:: Headings ::.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

.:: Links ::.

Sovichet.info
Google


.:: Paragraphs ::.

This is the content in Paragraph.


.:: Images ::.


.:: Unordered List ::.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

.:: Ordered List ::.

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5

.:: Table ::.

ID Name Location
K12 Sokha Phnom Penh
K18 Kanha Kampong Chhnang
K20 Bopha Kampong Cham

អ្នក​ប្រាកដ​ជា​ឃើញ​មាន​ស្លាក​ខ្លះ​វា​ចូល​គ្នា​បីបួន​ជាន់ នេះ​ក៏​ព្រោះតែ​ជា​ករណី​ដែល​គេ​បាន​កំណត់​មក​យ៉ាង​ដូច្នេះឯង។ ខ្ញុំ​សុំ​លើក​យក​ឧទាហរណ៍​ស្លាក ul និង ol មក​និយាយ។ ul គឺ​ជា​ស្លាក​សម្រាប់ Unordered List (បញ្ជី​គ្មាន​លំដាប់) ចំណែក​ឯ ol គឺ​សម្រាប់ Ordered List (បញ្ជី​មាន​លេខ​រៀង)។ នៅ​ក្នុង​ពួក​វា​សុទ្ធតែ​មាន​ស្លាក​កូន li។ ស្លាក li (List Item) នេះ​ប្រើ​សម្រាប់​បញ្ជាក់​ថា​ជា​ធាតុ​របស់​បញ្ជី ពីព្រោះ​បើ​គ្មាន​ស្លាក li ទេ នោះ​បញ្ជី​ទាំងពីរ​ប្រភេទ​នេះ​វា​មិន​ដឹង​ថា​តើ​វា​មាន​ធាតុ​អ្វី​ខ្លះ​ទេ។ ក៏​ដូចគ្នា​ទៅ​នឹង table ដែល​វា​មាន​ការ​កំណត់​ស្មុគស្មាញ​បន្តិច ដោយ​សារ​វា​ត្រូវ​ចែក​ចេញ​ជា​ក្បាល​តារាង តួ​តារាង ហើយ​វា​ក៏​មាន​បាត​តារាង (tfoot) ដែរ។

ការ​បង្កើត Form

ក្រៅ​អំពី​ធាតុ​ទាំងប៉ុន្មាន​ដែល​មាន​បង្ហាញ​នៅ​ខាង​លើ (ទាំង​ស្លាក​និង​លទ្ធផល) នៅ​មាន​សមាសភាគ​មួយ​សំខាន់​ទៀត​គឺ Form។ វា​ជា​សមាសភាគ​ដែល​ស្ទើរតែ​មិន​អាច​ខ្វះបាន​នៅ​ក្នុង​វេបសាយ​មួយ។ អ្នក​ប្រាកដ​ជា​ធ្លាប់​បាន​ឃើញ Form ពីមុន​មក​ហើយ​ដូចជា​នៅ៖ ទំព័រ​ចុះឈ្មោះ, ទំព័រ​ចូល​គណនី, ទំព័រ​បំពេញ​ព័ត៌មាន​ទិញ​ទំនិញ, ប្រអប់​ស្វែងរក។ល។ ទាំងអស់​ហ្នឹង​កើត​ចេញ​មក​ដោយ​សមាសភាគ Form។

នៅ​ក្នុង​ការ​បង្កើត Form មួយ​ត្រូវ​ការ​មាន​រចនាសម្ព័ន្ធ​បែបនេះ៖

ធាតុ input

ធាតុ​ដែល​សំខាន់​បំផុត​នៅ​ក្នុង​ការ​បង្កើត Form គឺ​ធាតុ input។ ធាតុ​នេះ​វា​មាន​តួនាទី​បង្ហាញ​វាល​សម្រាប់​បំពេញ​ព័ត៌មាន ហើយ​វា​ចាំបាច់​ត្រូវ​ស្ថិត​នៅ​ខាង​ក្នុង​ធាតុ form។ ប្រភេទ input មាន​ច្រើន ដែល​កំណត់​ដោយ​លក្ខណៈ​កំណត់ (attribute) type។ ប្រភេទ input ចំនួន​៥​ដែល​ឧស្សាហ៍​ប្រើ​គឺ៖

  1. text – ជា​ប្រភេទ input សម្រាប់​បញ្ចូល​តួ​អក្សរ
  2. password – ជា​ប្រភេទ input សម្រាប់​បញ្ចូល​ពាក្យ​សម្ងាត់ (ដោយ​មាន​បាំង)
  3. checkbox – ជា​ប្រភេទ input សម្រាប់​បង្កើត​ប្រអប់​ធីក
  4. ­radio – ជា​ប្រភេទ input សម្រាប់​បង្កើត​ជម្រើស​ដែល​ជ្រើស​បានតែ​មួយ
  5. submit – កំណត់​ប៊ូតុង​សម្រាប់​ដាក់ស្នើ

ប្រភេទ text

ទីក្រុង:

ប្រទេស:

ប្រភេទ password

ពាក្យ​សម្ងាត់:

ប្រភេទ checkbox

សៀវភៅ​ដែល​អ្នក​ចូលចិត្ត
ការ​អភិវឌ្ឍ​ខ្លួន
ប្រវត្តិសាស្ត្រ
គណិតវិទ្យា

ប្រភេទ radio

ភេទ
ប្រុស
ស្រី

ប្រភេទ submit

សៀវភៅ​ដែល​អ្នក​ចូលចិត្ត
ការ​អភិវឌ្ឍ​ខ្លួន
ប្រវត្តិសាស្ត្រ
គណិតវិទ្យា

ឯកសារ​ត្រូវ​មើល​បន្ថែម

ដូច​ដែល​ខ្ញុំ​បាន​ប្រាប់​ពី​ខាង​លើ​មក​ថា រាល់​អត្ថបទ​ដែល​ខ្ញុំ​សរសេរ​គឺ​គ្រាន់តែ​ជា​ការ​ពន្យល់​ទៅ​លើ​គោលគំនិត​សំខាន់​ជាមូលដ្ឋាន​ប៉ុណ្ណោះ មិនមាន​ចេតនា​ពន្យល់​លម្អិត​ទាំងអស់​នោះ​ទេ ដូច្នេះ​ហើយ​វា​តោង​អាស្រ័យ​ឲ្យ​អ្នក​ទាំងអស់​គ្នា​ត្រូវ​ចូល​ទៅ​អាន​បន្ថែម​ដោយ​ខ្លួនឯង​នៅ​ក្នុង​វេបសាយ​ផ្សេងៗ​ទៀត ដែល​គេ​បាន​រៀបចំ​មាតិកា​មេរៀន​បាន​យ៉ាង​ល្អ។

  1. w3schools.com
  2. tutorialspoint.com

ឧទាហរណ៍

បញ្ជី​ម៉ឺនុយ (មាន​តំណ​ភ្ជាប់)

បង្កើត​ប្រអប់​ចូល​គណនី

ឈ្មោះ:

ពាក្យ​សម្ងាត់:

សេចក្ដី​បញ្ចប់

ទាំងអស់​នេះ​គ្រាន់តែ​ជា​ការ​រៀបរាប់​យ៉ាង​ត្រួសៗ​អំពី HTML ប៉ុណ្ណោះ ដូច្នេះ​ហើយ​ខ្ញុំ​សង្ឃឹម​ថា​អ្នក​នឹង​ស្វះស្វែង​រៀន​បន្ថែម​តាម​វេបសាយ​ពីរ​ដែល​ខ្ញុំ​ឲ្យ​ពី​ខាងលើ ឬ​រៀន​ពី​វេបសាយ​ផ្សេងៗ​ទៀត​ដែល​អ្នក​ស្គាល់។ នៅ​ពេល​បន្ទាប់ យើង​នឹង​ជជែក​អំពី CSS ម្ដង គឺ​យើង​នឹង​យក​ថ្នាំ​មក​លាប​ផ្ទះ HTML របស់​យើង។

សាកល្បងល្បង​ធ្វើ​ទំព័រ៖

  1. ទំព័រ​ផ្ទាល់​ខ្លួន (ប្រវត្តិរូប​ផ្ទាល់ខ្លួន)
  2. តារាង​ឈ្មោះ​និស្សិត (មាន​ដាក់​ប្រអប់​ធីក​នៅ​ជួរដេក)
  3. ទំព័រ​បំពេញ​ព័ត៌មាន​ការ​ដឹកជញ្ជូន​ទំនិញ​ណាមួយ

One Reply to “[WDC101] មេរៀន​ទី៣៖ មូលដ្ឋាន​នៃ HTML”

Leave a Reply