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




2


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 Elements វាគឺជាអ្វីៗទាំងអសល់របស់ start tag ហើយនឹង end tag រួមទាំង Tags ខ្លួនវាផងដែរ។
HTML & CSS 
HTML Editors  ដើម្បីសរសេរកូដ HTML អ្នកអាចប្រើកម្មវិធី Professional HTML ដូចជា៖
  • Adobe Dreamweaver
  • Microsoft Expression Web
  • FreshHTML
  • NotePad++
  • CoffeeCup HTML Editor
ទោះជាកម្មវីធីខាងលើនេះសុទ្ធតែជាកម្មវីធីដែលធ្វើអោយយើងមានអារម្មណ៍ ថាងាយស្រួលក៏ដោយ ប៉ុនតែបើអាច ពួកយើងសូមអោយ អ្នកទាំង អស់ គ្នាប្រើ កម្មវីធី Notepad របស់ Windows រឺក៏ប្រើត្រឹងតែ Notepad++ ទៅបានហើយ(សំរាប់ PC ដែលប្រើ Windows) ចំនែក Mac សូមប្រើTextEdit ដែលមាននៅលើម៉ាស៊ីនស្រាប់។
ជំហ៊ានទី១​ របៀបបើកកម្មវិធី ដើម្បីដំណើរការ កម្មវីធីដែលមាន ស្រាប់នៅក្នុង windows សុំចូលទៅកាន់
Start –>All Programs –> Accessories –>Notepad
រឺក៏ ចូលទៅកាន់Run (start+r) រួចវាយ notepad –> OK
HTML & CSS 
ជំហ៊ានទី២​ សរសេរកូដក្នុង Notepad
វាយកូដ HTML ទៅក្នុង Notepad
HTML & CSS 
ជំហ៊ានទី៣​ Save AS សូម Save File នេះនៅទីតាំងណា ដែលស្រួល ចាំ រួចបើកវាជាមួយ Browser ណាមួយ ដោយ Right Click លើFile ដែលយើងបាន Save –> Open with –> រើសbrowser រួច click==>បានលទ្ធផលដូចនេះ។
HTML & CSS 
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 *
នេះគឺជា កថាខណ្ឌ
នេះគឺជា ការភ្ជាប់ Files
នេះសំរាប់ចុះបន្ទាត់
**** សំរាប់ 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។
ចំពោះ attributes អ្នកនឹងរៀននៅមេរៀបបន្ទាប់ទៀត។
Nested HTML Elements វាគឺជា HTML Element ដែលប្ររួម គ្នា ក្នុង HTML Elements តែមួយ​ រួមទាំង​ HTML documents ផងដែរ។
ឧទាហរណ៍របស់ HTML Document



This is my first paragraph.



នៅក្នុង ឧទាហរណ៍របស់ HTML មាន ៣ ដែលជា HTML Document៖
Empty HTML Elements វាគឺជា HTML Elements ទាំងឡាយ ណាដែលមិនចាំបាច់មាន Closing Tags។
ឧទាហរណ៍៖  
,

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)
ចំនាំ កុំភ្លេចបិទ Quotes វិញផង
HTML Headings HTML Headings គឺវាមានស្រាប់នៅក្នុង HTML documents
គេប្រើវាដើម្បីអោយ តួអក្សរមានទំហំធំ ហើយឌិតជាងមុន។
Headings មានពី

រហូតដល់

ដែល

ធំជាងគេ។
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 យើងអាចប្រើជា៖
តំរឹមអត្ថបទខាងឆ្វេង
តំរឹមអត្ថបទខាងស្តាំ
តំរឹមអត្ថបទមកកណ្តាល
តំរឹមអត្ថបទទាំងសងខាង


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 តាមតម្រូវការ ផ្សេងៗគ្នាដូចជា , <style>, <meta>, <link>, <script>, <noscript>, and <base&g;</p> <p> The HTML <title> Element</p> <p> Tags នេះប្រើសំរាប់បង្ហាញចំនងជើង រឺមតិកាផ្សេងៗក្នុង Browser toolbar។</p> <ul> <li>ជាអ្នកកំណត់ Title ជាក់លាក់មួយសំរាប់ Page មួយក្នុង Browser toolbar</li> <li>បង្ហាញការពិពណ៌នាសំរាប់ Page Website នៅពេលគេប្រើ search-engine</li> </ul> <p> <!DOCTYPE html><br> <html><br> <head><br> <title>Title of the document


The content of the document……
>


The HTML Element
tags កំនត់ទីតាំងជាក់លាក់របស់ URL/targetដែលទាក់ទងនឹង URL នៅក្នុងPage ណាមួយ។



The HTML Element
tags ជានាក់កំនត់ទំនាក់ទំនងរវាង ឯកសារនៅខាងក្នុង នឹងប្រភពឯកសារនៅខាងក្រៅ។
ជាធម្មតាវាប្រើជាមួយ style sheets(CSS)។



The HTML Element tags ជាពត៍មានអំពី ទិន្នន័យ របស់វេបសាយ ដែលយើងបានសរសេរដាក់ពីលើ ហើង វាមានឥទ្ធិពលនៅពេលគេប្រើ ការស្វែងរក (Search Engines) តាមរយះ Google រឺ Yahoo…។
គ្រប់ទិន្នន័យរបស់ Meta មិនបានបង្ហាយចេញនៅលើ Pages ខ្លួនវាទេ ប៉ុន្តែវាបង្ហាញ ចេញនៅពេលគេ Search Engines។ គ្រប់ Attributes របស់ Meta ត្រូវបានប្រើបា្រស់ខុសៗគ្នា៖
កំនត់ពាក្យគន្លឹងសំរាប់ប្រើក្នុង ការស្វែងរក (Search Eninges)

កំនត់ការពីពណ៌នាសំរាប់ Website
បង្ហាញឈ្មោះអ្នកនិពន្ធ វេបសាយ

កំនត់រយៈពេល សំរាប់ការ Refresh Webpage។
ឧទាហរណ៍៖ ចង់ refresh 30 វិនាទីម្តង

The HTML

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
tag ប្រើសំរាប់បង្ហាញរូបភាពនៅលើ web page
Attribtutes របស់ tag មានដូចជា ៖
  • src=”" ផ្លូវទៅកាន់រូបភាព
  • title=”" ពាក្យពិពណ៌នានៅលើ រូបភាព
  • width=”"​ កំនត់ប្រវែងរូបភាព
  • height=”" កំនត់កំពស់រូបភាព
  • border=”" កំនត់កំរាសស៊ុម
សូមមើលឧទាហរណ៍ យើងមានរូបភាពឈ្មោះ my photo.jpg
”photo
HTML Tables
ដើម្បីបង្កើតតារាបាន យើងចាំបាច់ត្រូវចាប់ផ្តើមដោយ open tag និងបញ្ចប់ដោយ close 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
បង្កើតក្បាលតារាង ដោយប្រើ Tags ……













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




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
ភ្ជាប់ Table ជាមួយ CSS









Header 1 Header 2
row 1, cell 1 row 1, cell 2

Header 1
Header 2
row 1, cell 1 row 1, cell 2
HTML Lists List ដែលប្រើច្រើនមាន ២ប្រភេទគឺ ordered និង unordered lists។
Ordered

  1. Coffee

  2. Milk


Result:
  1. Coffee
  2. Milk
HTML Unordered Lists

  • Coffee

  • Milk


Result:
  • Coffee
  • Milk
HTML Definition Lists

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
HTML & CSSThis is Heading 2
this is second paragraph
This is block Image
The HTML Element

This is block Span



Block Span