មេរៀនទី១: ការណែនាំ HTML

HTML ជាអក្សរបំព្រួញនៃ Hypertext Markup Language គឺជាភាសា សំរាប់បង្កើត ទំព័រឯកសារផ្សេងៗ សៀវភៅឯកសារអេឡិចត្រូនិក (E-book) និង សំរាប់បង្កើតគេហទំព័រវិបសាយ នៅក្នុង អ៊ីនធើណែត។ វាពន្យល់បកស្រាយ អំពី អត្ថបទ ពត៌មាននានា នៅក្នុងឯកសារ។ HTML ជាភាសាគំរូ និង ជាភាសាមានប្រសិទ្ធិភាពខ្ពស់ ដែលត្រូវបានគេ ប្រើ ប្រាស់យ៉ាង ទូលំទូលាយ ដើម្បីពណ៍នា អំពី គេហទំព័រ និង នៅតែ ត្រូវ បាន គេប្រើប្រាស់ សំរាប់ អន្តរភាសា នៅក្នុង គេហទំព័រ។
ប្រវត្តិរបស់ HTML HTML ត្រូវបានបង្កើតឡើងដោយ អ្នករូបនិយម ម្នាក់ឈ្មោះ Tim Berners-Lee(កើតនៅថ្ងៃទី ៨ ខែមិថុនា ឆ្នាំ១៩៥៥) ដែលជាអ្នកម៉ៅការងាររបស់អង្គការ CERN។
HTML Tags
HTML ត្រូវបានសរសេរឡើងដោយ Tags ដូចនេះជាធម្មតាត្រូវបានគេ ហៅថា HTML Tags។
- HTML tag គឺជាពាក្យគន្លឹះ(ឈ្មោះ Tag) ដែលត្រូវបានសរសេរនៅក្នុង សញ្ញា angle brackets, ឧ.
- HTML tag ជាធម្មតាត្រូវចាប់ផ្តើមដោយ បើកTag រួចបិទ Tag វិញ ឧ.
- រូបមន្ត
ពាក្យពីពណ័នា

HTML Editors ដើម្បីសរសេរកូដ HTML អ្នកអាចប្រើកម្មវិធី Professional HTML ដូចជា៖
- Adobe Dreamweaver
- Microsoft Expression Web
- FreshHTML
- NotePad++
- CoffeeCup HTML Editor
ជំហ៊ានទី១ របៀបបើកកម្មវិធី ដើម្បីដំណើរការ កម្មវីធីដែលមាន ស្រាប់នៅក្នុង windows សុំចូលទៅកាន់
Start –>All Programs –> Accessories –>Notepad
រឺក៏ ចូលទៅកាន់Run (start+r) រួចវាយ notepad –> OK

ជំហ៊ានទី២ សរសេរកូដក្នុង Notepad
វាយកូដ HTML ទៅក្នុង Notepad

ជំហ៊ានទី៣ Save AS សូម Save File នេះនៅទីតាំងណា ដែលស្រួល ចាំ រួចបើកវាជាមួយ Browser ណាមួយ ដោយ Right Click លើFile ដែលយើងបាន Save –> Open with –> រើសbrowser រួច click==>បានលទ្ធផលដូចនេះ។

HTML Basic សូមកុំបារម្មណ៍ ប្រសិនបើអ្នកមិនបានរៀនឧទាហរណ៍ អំពីរបៀបប្រើប្រាស់ Tags។
អ្នកនឹងបានរៀន អំពី Tags នៅមេរៀន បន្ទាប់ទៀត។ នៅ ក្នុង ចំនុច HTML Editors យើងបានបង្ហាញពីរបៀបសរសេរ HTMLL, Save, Run វារួចហើយ។ ប៉ន្តែក្នុងចំនុចនេះពួក យើង នឹងលំអិតអំពីវា។
HTML Basic
HTML ត្រូវសរសេរដោយចាប់ផ្តើមជាមួយ បើកTags & ហើយបិទវិញជាមួយTags &
សូមសរសេរអ្វីដែលអ្នកចង់បង្ហាញនៅទីនេះ!
HTML Comments
HTML Comments ប្រើសំរាប់ពិពណ៌នាអោយកូដណាមួយរបស់HTML ហើយComments គឺមិនបង្ហាញ នៅក្នុងBrowser ទេ។
Syntax: <!– …………….. –>
<!– This is a comment –>
HTML Lines
HTML Lines ប្រើសំរាប់គូសបន្ទាត់ ពីក្រោមអត្ថបទណាមួយ។
Syntax:
សូមសរសេរអ្វីដែលអ្នកចង់បង្ហាញនៅទីនេះ!
Break Line
HTML Lines ប្រើសំរាប់ចុះបន្ទាត់
Syntax:
សូមសរសេរអ្វីដែលអ្នកចង់បង្ហាញនៅទីនេះ!
Hello, World!
HTML Output
អ្នកមិនអាចប្រាកដទេថា ការបង្ហាញលទ្ធផលរបស់ HTML ដូចគ្នា ព្រោះអាស្រ័យទៅលើទំហំ Screen កុំព្យូទ័រ ធំ រឺ តូច ដូចនេះលទ្ធផលដែលបង្ហាញនៅលើកុំព្យូទ័រគឺ វាមិនដូចគ្នាទេ។
ជាមួយនឹងកូដ HTML អ្នកមិនអាចកំនត់ចំនួន Spaces រឺ Line នោះទេ ព្រោះ Code HTML គិតតែមួយ Spaces ពេលយើង ចុចSpace ប៉ុន្តែបើយើងចង់បាន Space មួយទៀត យើងត្រូវប្រើ Syntax ដូចនេះ
R + T = RT
Hello, World!
HTML Elements
HTML documents ត្រូវបានអោយអត្ថន័យដោយ HTML elements
HTML elements គឺជាអ្វីគ្រប់យ៉ាងដែលមាននៅក្នុង Open Tags និង End Tags
Start tag ជារឿយៗត្រូវបានគេហៅថា opening tag
End tag ជារឿយៗត្រូវបានគេហៅថា closing tag
Start tag *
|
Element content
|
End tag *
|
នេះគឺជា កថាខណ្ឌ |
និង
សង្ខេប
- HTML element ត្រូវតែចាប់ផ្តើមដោយ start tag / opening tag
- HTML element ត្រូវតែបញ្ចប់ដោយ end tag / closing tag ខ្លួនវា
- element content គឺជាអ្វីៗដែលស្តិតនៅចន្លោះ start tag និង end tag
- element content មានក៏បាន អត់ក៏បាន
- ចំពោះ HTML Tags Name យើងអាចសរសេរជា តួអក្សរធំក៏បាន តូចក៏បាន ប៉ុន្តែយកល្អយើងគួរតែសរសេរ ជាតួរអក្សរតូច ពីព្រោះ វាជាការណែនាំដោយ W3C តាំងពីជំនាន់ HTML4 មកម្លេះ
- ស្ទើតែគ្រប់ HTML Elements ទាំងអស់ អាចមាន attributes។
Nested HTML Elements វាគឺជា HTML Element ដែលប្ររួម គ្នា ក្នុង HTML Elements តែមួយ រួមទាំង HTML documents ផងដែរ។
ឧទាហរណ៍របស់ HTML Document
This is my first paragraph.
នៅក្នុង ឧទាហរណ៍របស់ HTML មាន ៣ ដែលជា HTML Document៖
ឧទាហរណ៍៖
,
…
HTML Attributes Attributes ផ្តល់នូវពត៌មានបន្ថែម អំពី HTML Elements
សូមមើលឧទាហរណ៍ខាងក្រោម
- HTML Elements អាចមាន Attributes
- Attributes ផ្តល់ពត៌មានបន្ថែមអំពី element
- Attributes តែងតែស្ថិតនៅក្នុង Start Tags បន្ទាប់ពី Tag Name
- Attributes មានឈ្មោះ/តំលែ ជាគូៗ ដូចជា name=”value”
- នៅក្នុង Attributes អ្នកអាចប្រើ Double style quotes រឺ Single style quotes
- Attributes អាចសរសេរជាអក្សរតូចក៏បាន ធំក៏បាន, ប៉ុន្តែយកល្អសូមសរសេរ ជាអក្សរតូច ព្រោះ ជំនាន់ថ្មីរបស់ (X) HTML នឹងប្រើជាមួយ តួរអក្សរតូច (ការណែនាំរបស់ W3C)
HTML Headings HTML Headings គឺវាមានស្រាប់នៅក្នុង HTML documents
គេប្រើវាដើម្បីអោយ តួអក្សរមានទំហំធំ ហើយឌិតជាងមុន។
Headings មានពី
រហូតដល់
ដែល
ធំជាងគេ។
Headings វាពិតជាមានសារៈសំខាន់នៅក្នុងការបង្ហាញ document structure។
ធំជាងគេ។
Headings វាពិតជាមានសារៈសំខាន់នៅក្នុងការបង្ហាញ document structure។
HTML Headings Headings ប្រើសំរាប់បញ្ជាក់ទៅលើ តួអក្សរ ដើម្បីអោយអក្សរកាន់តែធំ ហើយដិត
This is a heading
This is a heading
This is a heading
HTML Paragraphs
Paragraphs យើងប្រើវាសំរាប់សរសេរអត្ថបទជាកថាខណ្ឌ។
នៅក្នុង Paragraph មាន Attributes ជាច្រើន ដូចនេះយើងនឹងលើកយក Attribute មួយ ដែលពេញនិយមយកមកប្រើ គឺ Align=”"
គ្រប់ Browsers ស្ទើតែទាំងអស់វាបង្ហាញលទ្ធផងដូចធម្មតា ទោះបីយើងមិនបាន បិទ Tag paragraph ក៏ដោយ។
Syntax:
……
HTML Paragraphs
Paragraphs សំរាប់សរសេរអត្ថបទជា កថាខណ្ឌ ៗ។
នៅក្នុង Open Tags យើងអាចប្រើជា៖
តំរឹមអត្ថបទខាងឆ្វេង
តំរឹមអត្ថបទខាងស្តាំ
តំរឹមអត្ថបទមកកណ្តាល
HTML Formatting
យើងអាចកំនត់អក្សរ អោយក្លាយជាអក្សរទ្រេត រឺក៏អក្សរដឹត ទៅតាម Elements ស្រាប់ៗ របស់HTML៖
… សំរាប់បង្ហាញអក្សរដិត
… សំរាប់បង្ហាញអក្សរដិត
… សំរាប់បង្ហាញអក្សរទ្រេត
… សំរាប់បង្ហាញអក្សរទ្រេត
HTML Paragraphs
Hello! Webkhmerlearning.com
HTML Links
Links សំរាប់ភ្ជាប់ទៅកាន់ Files ឬ URL ផ្សេង ដែលស្ថិត នៅទីតាំងជាមួយគ្នា រឺផ្សេងគ្នា។ ដើម្បីប្រើវាបាន អ្នកត្រូវ សរសេរបើកTags និងបិទវិញដោយ ។
នៅ ក្នុង Tag មាន Attributes ដូចជា៖
href=”" ផ្លូវទៅកាន់ File រឺ URL
title=”hello” សំរាប់ដាក់ពាក្យពិពណ៌នា
target=”" ពាក្យបង្គាប់ Page ថ្មី
សូមមើលរបៀបប្រើ Target=”"
target=”_blank” បោះ Page ចេញទៅ Tap ថ្មីមួយទៀត
target=”_parent” បោះ Page ជំនួស Page ដើម
target=”_self” បោះ Page ជំនួស Page ដើម
target=”_top” បោះ Page ជំនួស Page ដើម
សាកល្បងនៅទីនេះ
HTML Head
Head Element វាគឺជា element មួយប្រភេទ ដែលសំខាន់ជាងគេក្នុង HTML ព្រោះវាមានលទ្ធភាពគ្រប់គ្រង Element របស់ភាសារ ផ្សេង ទៀតបាន ទាំងនៅក្នុងFile ខ្លួនឯង និងនៅខាងក្រៅបាន។
Tags ដែលនៅខាងក្រោយនេះត្រូវបាន Add ចូលទៅ Head Tag តាមតម្រូវការ ផ្សេងៗគ្នាដូចជា,
HTML CSS គេប្រើ CSS សំរាប់រចនាវេបសាយ អោយកាន់តែ ស្រស់ស្អាត ជាងមុន នឹងងាយស្រួលសរសេរជាងមុន
ពាក្យបំព្រួញរបស់ CSS គឺ Cascading Style Sheets
រៀបសរសេរ CSS ជាមួយ HTML (Styling HTML with CSS)
យើងអាចសរសេរ CSS បាន ៣ បៀប គឺ៖
External Style Sheet
ប្រើ Link element សំរាប់ភ្ជាប់ទៅ file នៅខាងក្រៅឈ្មោះ mystyle.css
HTML Images
tag ប្រើសំរាប់បង្ហាញរូបភាពនៅលើ web page
Attribtutes របស់
tag មានដូចជា ៖

HTML Tables
ដើម្បីបង្កើតតារាបាន យើងចាំបាច់ត្រូវចាប់ផ្តើមដោយ open tag និងបញ្ចប់ដោយ close tag
។
តារា កើតឡើងដោយ បន្ទាត់ដេក(ជួរដេក) ហៅថា (Rows) និង បន្ទាត់ឈរ(ជួរឈរ) ហៅថា (Columns)
Tags Row គឺ ……
Tags Column គឺ……
សូមមើលឧទាហរណ៍
Ex:1
Result 1
បង្កើតក្បាលតារាង ដោយប្រើ Tags ……
Result:
ចង់បានកំរាស់បន្ទាត់ស្តើងជាងមុន
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
ភ្ជាប់ Table ជាមួយ CSS
HTML Lists List ដែលប្រើច្រើនមាន ២ប្រភេទគឺ ordered និង unordered lists។
Ordered
Result:
Result:
Result:
Coffee
- black hot drink
Milk
- white cold drink
HTML Blocks យើងប្រើ ខ្ចប់element នៅក្នុងក្រុមជាមួយគ្នាបាន ដោយប្រើ
Block level elements ជាធម្មតាតែងតែចាប់ផ្តើម(start) និងបញ្ចប់(end)ជាមួយនឹងបន្ទាត់ថ្មី នៅពេលបង្ហាញនៅក្នុង browser។
Examples:
, ,
តំរឹមអត្ថបទទាំងសងខាង
This is a Paragraphs 1
This is a Paragraphs 2
This is a Paragraphs 3
HTML Formatting
យើងអាចកំនត់អក្សរ អោយក្លាយជាអក្សរទ្រេត រឺក៏អក្សរដឹត ទៅតាម Elements ស្រាប់ៗ របស់HTML៖
… សំរាប់បង្ហាញអក្សរដិត
… សំរាប់បង្ហាញអក្សរដិត
… សំរាប់បង្ហាញអក្សរទ្រេត
… សំរាប់បង្ហាញអក្សរទ្រេត
HTML Paragraphs
Hello! Webkhmerlearning.com
HTML Links
Links សំរាប់ភ្ជាប់ទៅកាន់ Files ឬ URL ផ្សេង ដែលស្ថិត នៅទីតាំងជាមួយគ្នា រឺផ្សេងគ្នា។ ដើម្បីប្រើវាបាន អ្នកត្រូវ សរសេរបើកTags និងបិទវិញដោយ ។
នៅ ក្នុង Tag មាន Attributes ដូចជា៖
href=”" ផ្លូវទៅកាន់ File រឺ URL
title=”hello” សំរាប់ដាក់ពាក្យពិពណ៌នា
target=”" ពាក្យបង្គាប់ Page ថ្មី
សូមមើលរបៀបប្រើ Target=”"
target=”_blank” បោះ Page ចេញទៅ Tap ថ្មីមួយទៀត
target=”_parent” បោះ Page ជំនួស Page ដើម
target=”_self” បោះ Page ជំនួស Page ដើម
target=”_top” បោះ Page ជំនួស Page ដើម
សាកល្បងនៅទីនេះ
HTML Head
Head Element វាគឺជា element មួយប្រភេទ ដែលសំខាន់ជាងគេក្នុង HTML ព្រោះវាមានលទ្ធភាពគ្រប់គ្រង Element របស់ភាសារ ផ្សេង ទៀតបាន ទាំងនៅក្នុងFile ខ្លួនឯង និងនៅខាងក្រៅបាន។
Tags ដែលនៅខាងក្រោយនេះត្រូវបាន Add ចូលទៅ Head Tag តាមតម្រូវការ ផ្សេងៗគ្នាដូចជា
HTML CSS គេប្រើ CSS សំរាប់រចនាវេបសាយ អោយកាន់តែ ស្រស់ស្អាត ជាងមុន នឹងងាយស្រួលសរសេរជាងមុន
ពាក្យបំព្រួញរបស់ CSS គឺ Cascading Style Sheets
រៀបសរសេរ CSS ជាមួយ HTML (Styling HTML with CSS)
យើងអាចសរសេរ CSS បាន ៣ បៀប គឺ៖
- Inline ប្រើAttribute ឈ្មោះ style ក្នុង HTML Element
- Internal ប្រើ
External Style Sheet
ប្រើ Link element សំរាប់ភ្ជាប់ទៅ file នៅខាងក្រៅឈ្មោះ mystyle.css
HTML Images
Attribtutes របស់
- src=”" ផ្លូវទៅកាន់រូបភាព
- title=”" ពាក្យពិពណ៌នានៅលើ រូបភាព
- width=”" កំនត់ប្រវែងរូបភាព
- height=”" កំនត់កំពស់រូបភាព
- border=”" កំនត់កំរាសស៊ុម
HTML Tables
ដើម្បីបង្កើតតារាបាន យើងចាំបាច់ត្រូវចាប់ផ្តើមដោយ open tag
តារា កើតឡើងដោយ បន្ទាត់ដេក(ជួរដេក) ហៅថា (Rows) និង បន្ទាត់ឈរ(ជួរឈរ) ហៅថា (Columns)
Tags Row គឺ
Tags Column គឺ
សូមមើលឧទាហរណ៍
Ex:1
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
Result 1
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
Header 1 | Header 2 |
---|---|
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
Result:
Header 1
|
Header 2
|
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
Header 1 | Header 2 |
---|
Header 1
|
Header 2
|
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
Header 1 | Header 2 |
---|---|
row 1, cell 1 | row 1, cell 2 |
Header 1
|
Header 2
|
row 1, cell 1 | row 1, cell 2 |
Ordered
- Coffee
- Milk
Result:
- Coffee
- Milk
- Coffee
- Milk
Result:
- Coffee
- Milk
- Coffee
- - black hot drink
- Milk
- - white cold drink
Result:
Coffee
- black hot drink
Milk
- white cold drink
HTML Blocks យើងប្រើ ខ្ចប់element នៅក្នុងក្រុមជាមួយគ្នាបាន ដោយប្រើ
…..
ហើយនឹង …..Block level elements ជាធម្មតាតែងតែចាប់ផ្តើម(start) និងបញ្ចប់(end)ជាមួយនឹងបន្ទាត់ថ្មី នៅពេលបង្ហាញនៅក្នុង browser។
Examples:
, , ,
HTML Inline Elements ជាធម្មតាមិនដែលចាប់ផ្តើមដោយបន្ចាត់ថ្មីទេ នៅពេលបង្ហាញ។
Examples: , , , ![]()
The HTML
Element គឺជា Block Level element សំរាប់ដាក់ HTML element ជាក្រុមៗ
Hello world!
This is Heading 2
this is second paragraph
This is block image

Lovely Photo
Result: how to use DIV
This is Heading 2
this is second paragraph
This is block Image
The HTML Element
This is block Span
Block Span
Hello world!
This is Heading 2
this is second paragraph
This is block image
Lovely Photo
Block Span
Post a Comment