អ្វីជា HTML និង CSS

មាតិកា

1. ភាសាពីរ ការងារពីរ
2. HTML មិនមែនជាភាសាសរសេរកម្មវិធីទេ
3. រៀបចំកន្លែងធ្វើការរបស់អ្នក
4. ទំព័រដំបូងរបស់អ្នក
5. បន្ថែម CSS បន្តិចបន្តួច
6. ជួប DevTools ម្តងទៀត
7. គម្រោងដែលអ្នកនឹងសាងសង់
8. សាកល្បងដោយខ្លួនឯង

1. ភាសាពីរ ការងារពីរ

នៅក្នុង ខាងក្នុង Browser អ្នកបានឃើញថា browser ទាញយក response, parse វា ហើយគូរ pixel។ អ្វីដែលវា parse គឺ HTML ហើយអ្វីដែលប្រាប់វាពីរបៀបគូរគឺ CSS។ ពួកវាមានការងារដាច់ដោយឡែកពីគ្នា៖

ការប្រៀបធៀបដែលមានប្រយោជន៍គឺផ្ទះមួយ។ HTML គឺជាស៊ុម ជញ្ជាំង ទ្វារ និងបង្អួច — វាសម្រេចថាមានអ្វីខ្លះ និងផ្នែកនីមួយៗស្ថិតនៅត្រង់ណា។ CSS គឺជាថ្នាំលាប កម្រាលឥដ្ឋ និងការរៀបចំគ្រឿងសង្ហារឹម។ អ្នកអាចរស់នៅក្នុងផ្ទះដែលគ្មានថ្នាំលាបបាន ហើយ web ក៏ដំណើរការដូចគ្នាដែរ៖ ទំព័រដែលមានតែ HTML មើលទៅធម្មតា ប៉ុន្តែប្រើបានពេញលេញ។ ទំព័រដែលមានតែ CSS គ្មានអ្វីត្រូវ style ទេ។

ការញែកភាសាទាំងពីរចេញពីគ្នា គឺជាទម្លាប់សំខាន់បំផុតតែមួយគត់នៅក្នុងស៊េរីនេះ។ ពេលអ្នកសម្រេចថា អ្វីមួយជាអ្វី សូមប្រើ HTML។ ពេលអ្នកសម្រេចថា វាមើលទៅយ៉ាងណា សូមប្រើ CSS។ ការជ្រើសរើស heading tag ដោយសារតែវា "មើលទៅធំ" គឺជាកំហុសបុរាណរបស់អ្នកចាប់ផ្តើម ហើយជំពូកបន្តបន្ទាប់នឹងបង្ហាញពីមូលហេតុដែលវាបង្កបញ្ហា។

2. HTML មិនមែនជាភាសាសរសេរកម្មវិធីទេ

HTML គ្មាន variable គ្មាន if គ្មាន loop ទេ។ វាជា markup language៖ អ្នកគ្របបំណែកអត្ថបទដោយ tag ដែលដាក់ស្លាកឲ្យវា។

<p>This is a paragraph.</p>

<p> គឺជា opening tag </p> គឺជា closing tag ហើយទាំងមូលនោះគឺជា element។ Browser អានស្លាកទាំងនោះ ហើយសម្រេចថាត្រូវធ្វើអ្វី៖ paragraph ទទួលបានគម្លាតជុំវិញ link ក្លាយជាអាចចុចបាន ហើយរូបភាពត្រូវបានទាញយក។

CSS ក៏មិនមែនជាភាសាសរសេរកម្មវិធីដែរ។ វាគ្រាន់តែជាបញ្ជីនៃ rule — "ធ្វើឲ្យគ្រប់ paragraph មានពណ៌នេះ" — ដែល browser អនុវត្ត។ ភាសាទាំងពីរសុទ្ធតែជា declarative៖ អ្នកពិពណ៌នាលទ្ធផលដែលអ្នកចង់បាន ហើយ browser រកវិធីបង្កើតវាដោយខ្លួនឯង។

នេះជាដំណឹងល្អសម្រាប់អ្នកចាប់ផ្តើម។ គ្មានអ្វីត្រូវ compile ហើយគ្មានអ្វីត្រូវដំឡើងទេ។ កំហុសមួយមិនធ្វើឲ្យអ្វីគាំងទេ។ browser គ្រាន់តែព្យាយាមអស់ពីសមត្ថភាពជាមួយអ្វីដែលអ្នកសរសេរ ហើយ DevTools បង្ហាញអ្នកពីអ្វីដែលវាយល់។

3. រៀបចំកន្លែងធ្វើការរបស់អ្នក

អ្នកត្រូវការ folder មួយសម្រាប់គម្រោង និង editor មួយ។

1. ដំឡើង Visual Studio Code ប្រសិនបើអ្នកមិនទាន់មាន។
2. នៅក្នុង terminal (ពី មូលដ្ឋានគ្រឹះ Command Line) បង្កើត folder គម្រោង ហើយបើកវានៅក្នុង editor៖

mkdir dara-profile
cd dara-profile
code .

ប្រសិនបើ code . មិនត្រូវបានស្គាល់ សូមបើក VS Code ជ្រើស File → Open Folder ហើយជ្រើស dara-profile។

3. នៅក្នុង VS Code សូមដំឡើង extension Live Server។ វា reload browser រាល់ពេលអ្នក save ដែលធ្វើឲ្យការរៀនលឿនជាងមុន។

អ្នកក៏នឹងប្រើ Git នៅក្នុងជំពូកចុងក្រោយដែរ ដូច្នេះគួរតែ run git init ឥឡូវនេះ៖

git init

4. ទំព័រដំបូងរបស់អ្នក

នៅក្នុង VS Code សូមបង្កើត file ថ្មីមួយឈ្មោះ index.html នៅក្នុង folder dara-profile។ សូមវាយវាចូល — កុំ paste ព្រោះការវាយជួយឲ្យដៃចាំ៖

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Dara Sok</title>
  </head>
  <body>
    <h1>Hello, I'm Dara</h1>
    <p>I'm learning to build websites.</p>
  </body>
</html>

អ្នកនឹងរៀនពីអ្វីដែលគ្រប់បន្ទាត់ធ្វើនៅក្នុងជំពូកបន្ទាប់។ សម្រាប់ពេលនេះ សូមបើក file នោះ៖ ចុចស្តាំលើ index.html នៅក្នុង VS Code ហើយជ្រើស Open with Live Server ឬគ្រាន់តែចុចពីរដងលើ file នៅក្នុង file manager របស់អ្នក។

Browser របស់អ្នកបង្ហាញចំណងជើងធំមួយ និង paragraph មួយ។ សូមមើល address bar៖ ជាមួយ Live Server វាគឺ http://127.0.0.1:5500/index.html ហើយនៅពេលបើកដោយផ្ទាល់ វាគឺ file:///…/index.html។ ក្នុងករណីទាំងពីរ browser កំពុងធ្វើអ្វីដែលវាតែងតែធ្វើ — ទទួលបាន HTML ហើយបង្ហាញវា។ ភាពខុសគ្នាតែមួយគត់គឺ "server" នោះគឺជាម៉ាស៊ីនផ្ទាល់ខ្លួនរបស់អ្នក។

ឥឡូវនេះ សូមប្តូរ Dara ទៅជាឈ្មោះរបស់អ្នក save ហើយមើលទំព័រអាប់ដេត។ វដ្តនៃការកែ-save-មើលនោះ គឺជារបៀបដែលអ្នកនឹងធ្វើការពេញមួយស៊េរីដែលនៅសល់។

5. បន្ថែម CSS បន្តិចបន្តួច

ឥឡូវនេះ browser កំពុងប្រើ default style របស់វា — រូបរាងដែលមានស្រាប់ក្នុង browser ទាំងអស់ ដែលអនុវត្តលើទំព័រទទេ។ សូមបន្ថែម element <style> នៅក្នុង <head> បន្ទាប់ពី <title>៖

<style>
  body {
    font-family: sans-serif;
    background-color: #fdf6e3;
    color: #333333;
  }

  h1 {
    color: #b45309;
  }
</style>

Save។ ផ្ទៃខាងក្រោយប្រែជាពណ៌ក្រែម អត្ថបទប្រែជាពណ៌ប្រផេះចាស់ ហើយចំណងជើងប្រែជាពណ៌ទឹកក្រូច-ត្នោត។ ប្លុកនីមួយៗគឺជា rule របស់ CSS៖

h1 {
  color: #b45309;
}
└┬┘  └──┬─┘ └──┬──┘
selector property value

Selector ប្រាប់ថា element មួយណា ហើយបន្ទាត់នីមួយៗក្នុងដង្កៀបប្រាប់ថា ត្រូវផ្លាស់ប្តូរអ្វី។ ជំពូកទី 6 គ្របដណ្តប់ selector យ៉ាងស៊ីជម្រៅ។ សម្រាប់ពេលនេះ សូមកត់សម្គាល់ថាអ្នកបានផ្លាស់ប្តូររូបរាងដោយមិនប៉ះ tag <h1> ឬ <p> ទេ។ រចនាសម្ព័ន្ធនៅដដែល។

6. ជួប DevTools ម្តងទៀត

ចុចស្តាំលើចំណងជើង ហើយជ្រើស Inspect (ឬចុច F12)។ Panel Elements បង្ហាញទំព័រតាមរបៀបដែល browser យល់៖ ជាដើមឈើនៃ element។

html
├── head
│   ├── meta
│   ├── title
│   └── style
└── body
    ├── h1
    └── p

ដើមឈើនេះហៅថា DOM — Document Object Model។ អត្ថបទ HTML របស់អ្នកគឺជា source ហើយ DOM គឺជាអ្វីដែល browser បង្កើតពីវា។ ជាទូទៅពួកវាត្រូវគ្នា ប៉ុន្តែនៅពេលដែលមិនត្រូវគ្នា (ឧទាហរណ៍ដោយសារកំហុសវាយ) DOM បង្ហាញអ្នកពីអ្វីដែល browser បានធ្វើពិតប្រាកដ។

ចុចលើ element មួយនៅក្នុងដើមឈើ ហើយមើលផ្ទាំង Styles នៅខាងស្តាំ។ វាបញ្ជីគ្រប់ CSS rule ដែលអនុវត្ត រួមទាំង rule លំនាំដើមរបស់ browser (ដាក់ស្លាកថា user agent stylesheet)។ អ្នកអាចចុចលើតម្លៃដូចជា #b45309 ហើយកែវាបានភ្លាមៗ។ ការផ្លាស់ប្តូរក្នុង DevTools គឺបណ្តោះអាសន្ន — វាបាត់ពេលអ្នក reload — ដែលធ្វើឲ្យវាក្លាយជាកន្លែងសុវត្ថិភាពសម្រាប់ពិសោធន៍។ ពេលណាអ្នកជាប់គាំងក្នុងស៊េរីនេះ សូម inspect element នោះ។

7. គម្រោងដែលអ្នកនឹងសាងសង់

ក្នុងដប់ជំពូកបន្ទាប់ folder តែមួយនេះនឹងលូតលាស់ទៅជា site ដែលបានបញ្ចប់៖

សូម commit បន្ទាប់ពីជំពូកនីមួយៗ ជាមួយសារខ្លីមួយ។ នៅចុងបញ្ចប់ ប្រវត្តិ Git របស់អ្នកនឹងបង្ហាញទំព័រលូតលាស់ជំហានម្តងមួយៗ។

git add .
git commit -m "Add first index.html"

8. សាកល្បងដោយខ្លួនឯង

1. ធ្វើឲ្យវាខូចដោយចេតនា។ លុប closing tag </p> ហើយ save។ តើទំព័រមើលទៅខុសពីមុនទេ? បើក panel Elements ហើយពិនិត្យដើមឈើ។ បន្ទាប់មកដាក់វាត្រឡប់មកវិញ។ នេះបង្ហាញថា parser អត់ឱនប៉ុណ្ណា។
2. កែ DOM។ នៅក្នុង DevTools ចុចពីរដងលើអត្ថបទក្នុង <h1> ហើយវាយអ្វីផ្សេង។ Reload ទំព័រ។ តើមានអ្វីកើតឡើងចំពោះការផ្លាស់ប្តូររបស់អ្នក ហើយហេតុអ្វី?
3. ផ្លាស់ប្តូរ style បីនៅក្នុង DevTools។ ចុចលើ element <body> រក background-color នៅក្នុងផ្ទាំង Styles ហើយសាកល្បងពណ៌ថ្មី។ បន្ថែម property ថ្មីផ្ទាល់ខ្លួនរបស់អ្នក ដូចជា font-size: 24px។
4. មើល source។ ចុច Ctrl+U (Cmd+Option+U នៅលើ macOS) នៅលើ website ណាមួយ។ នេះគឺជា HTML ដើមដែល server បានផ្ញើ។ ប្រៀបធៀបវាជាមួយ panel Elements នៅលើទំព័រតែមួយ។ ហេតុអ្វីបានជាពួកវាអាចខុសគ្នា?

បន្ទាប់ យើងនឹងដើរកាត់ទំព័រដែលអ្នកទើបវាយ ម្តងមួយបន្ទាត់ ហើយរៀនពីអ្វីដែល HTML document ត្រឹមត្រូវមួយត្រូវបានបង្កើតឡើងពី។