មេរៀនទី១: ការណែនាំ HTML
បង្រៀនដោយលោកគ្រូ: ទាវ ឈុនណនព្រឹទ្ធបរុស មហាវិទ្យាល័យ វិទ្យាសាស្រ្ត និង បច្ចេកវិទ្យា
នៃ សាកលវិទ្យាល័យកម្ពុជា
Tel: 077778647-070778647-0977778647
Yahoo, Skype, google: chhunnan
HTML ជាអក្សរបំព្រួញនៃ Hypertext Markup Language គឺជាភាសា សំរាប់បង្កើត ទំព័រឯកសារផ្សេងៗ សៀវភៅឯកសារអេឡិចត្រូនិក (E-book) និង សំរាប់បង្កើតគេហទំព័រវិបសាយ នៅក្នុង អ៊ីនធើណែត។ វាពន្យល់បកស្រាយ អំពី អត្ថបទ ពត៌មាននានា នៅក្នុងឯកសារ។ HTML ជាភាសាគំរូ និង ជាភាសាមានប្រសិទ្ធិភាពខ្ពស់ ដែលត្រូវបានគេ ប្រើ ប្រាស់យ៉ាង ទូលំទូលាយ ដើម្បីពណ៍នា អំពី គេហទំព័រ និង នៅតែ ត្រូវ បាន គេប្រើប្រាស់ សំរាប់ អន្តរភាសា នៅក្នុង គេហទំព័រ។
ប្រវត្តិរបស់ HTML HTML ត្រូវបានបង្កើតឡើងដោយ អ្នករូបនិយម ម្នាក់ឈ្មោះ Tim Berners-Lee(កើតនៅថ្ងៃទី ៨ ខែមិថុនា ឆ្នាំ១៩៥៥) ដែលជាអ្នកម៉ៅការងាររបស់អង្គការ CERN។
HTML Tags
HTML ត្រូវបានសរសេរឡើងដោយ Tags ដូចនេះជាធម្មតាត្រូវបានគេ ហៅថា HTML Tags។
- HTML tag គឺជាពាក្យគន្លឹះ(ឈ្មោះ Tag) ដែលត្រូវបានសរសេរនៅក្នុង សញ្ញា angle brackets, ឧ. <htm>
- HTML tag ជាធម្មតាត្រូវចាប់ផ្តើមដោយ បើកTag រួចបិទ Tag វិញ ឧ. <b> </b>
- រូបមន្ត <tagname>ពាក្យពីពណ័នា</tagname>
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 <HTML> & <BODY> ហើយបិទវិញជាមួយTags </HTML> & </BODY>
<html>
<body>
សូមសរសេរអ្វីដែលអ្នកចង់បង្ហាញនៅទីនេះ!
</body>
</html>
សាកល្បងនៅទីនេះ
HTML Comments
HTML Comments ប្រើសំរាប់ពិពណ៌នាអោយកូដណាមួយរបស់HTML ហើយComments គឺមិនបង្ហាញ នៅក្នុងBrowser ទេ។
Syntax: <!– …………….. –>
<!– This is a comment –>
សាកល្បងនៅទីនេះ
HTML Lines
HTML Lines ប្រើសំរាប់គូសបន្ទាត់ ពីក្រោមអត្ថបទណាមួយ។
Syntax: <hr>
<html>
<body>
សូមសរសេរអ្វីដែលអ្នកចង់បង្ហាញនៅទីនេះ!
<hr>
</body>
</html>
សាកល្បងនៅទីនេះ
Break Line
HTML Lines ប្រើសំរាប់ចុះបន្ទាត់
Syntax: <br>
<html>
<body>
សូមសរសេរអ្វីដែលអ្នកចង់បង្ហាញនៅទីនេះ!
<br>
Hello, World!
</body>
</html>
សាកល្បងនៅទីនេះ
HTML Output
អ្នកមិនអាចប្រាកដទេថា ការបង្ហាញលទ្ធផលរបស់ HTML ដូចគ្នា ព្រោះអាស្រ័យទៅលើទំហំ Screen កុំព្យូទ័រ ធំ រឺ តូច ដូចនេះលទ្ធផលដែលបង្ហាញនៅលើកុំព្យូទ័រគឺ វាមិនដូចគ្នាទេ។
ជាមួយនឹងកូដ HTML អ្នកមិនអាចកំនត់ចំនួន Spaces រឺ Line នោះទេ ព្រោះ Code HTML គិតតែមួយ Spaces ពេលយើង ចុចSpace ប៉ុន្តែបើយើងចង់បាន Space មួយទៀត យើងត្រូវប្រើ Syntax ដូចនេះ
<html>
<body>
R + T = RT
<br>
<br>
<br>
<br>
<br>
Hello, World!
</body>
</html>
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 *
|
| <p> | នេះគឺជា កថាខណ្ឌ | </p> |
| <a href=”default.htm”> | នេះគឺជា ការភ្ជាប់ Files | </a> |
| <br> | នេះសំរាប់ចុះបន្ទាត់ |
សង្ខេប
- 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
<!DOCTYPE html>
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
នៅក្នុង ឧទាហរណ៍របស់ HTML មាន ៣ ដែលជា HTML Document៖
- <html>
- <body>
- <p>
ឧទាហរណ៍៖ <br> , <hr> …
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 មានពី <h1> រហូតដល់ <h6> ដែល <h1>ធំជាងគេ។
Headings វាពិតជាមានសារៈសំខាន់នៅក្នុងការបង្ហាញ document structure។
HTML Headings Headings ប្រើសំរាប់បញ្ជាក់ទៅលើ តួអក្សរ ដើម្បីអោយអក្សរកាន់តែធំ ហើយដិត
<html>
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
</body>
</html>
HTML Paragraphs
Paragraphs យើងប្រើវាសំរាប់សរសេរអត្ថបទជាកថាខណ្ឌ។
នៅក្នុង Paragraph មាន Attributes ជាច្រើន ដូចនេះយើងនឹងលើកយក Attribute មួយ ដែលពេញនិយមយកមកប្រើ គឺ Align=”"
គ្រប់ Browsers ស្ទើតែទាំងអស់វាបង្ហាញលទ្ធផងដូចធម្មតា ទោះបីយើងមិនបាន បិទ Tag paragraph ក៏ដោយ។
Syntax: <p align=”left”>……</p>
HTML Paragraphs
Paragraphs សំរាប់សរសេរអត្ថបទជា កថាខណ្ឌ ៗ។
នៅក្នុង Open Tags <p> យើងអាចប្រើជា៖
<p align=”left”> តំរឹមអត្ថបទខាងឆ្វេង
<p align=”right”> តំរឹមអត្ថបទខាងស្តាំ
<p align=”center”> តំរឹមអត្ថបទមកកណ្តាល
<p align=”justify”>តំរឹមអត្ថបទទាំងសងខាង
<html>
<body>
<p aling=”left”>This is a Paragraphs 1</p>
<p align=”right”>This is a Paragraphs 2</p>
<p align=”center”>This is a Paragraphs 3</p>
</body>
</html>
HTML Formatting
យើងអាចកំនត់អក្សរ អោយក្លាយជាអក្សរទ្រេត រឺក៏អក្សរដឹត ទៅតាម Elements ស្រាប់ៗ របស់HTML៖
<b>…</b> សំរាប់បង្ហាញអក្សរដិត
<strong>…</strong> សំរាប់បង្ហាញអក្សរដិត
<em>…</em> សំរាប់បង្ហាញអក្សរទ្រេត
<i>…</i> សំរាប់បង្ហាញអក្សរទ្រេត
HTML Paragraphs
<html>
<body>
<em> Hello! Webkhmerlearning.com</em>
</body>
</html>
HTML Links
Links សំរាប់ភ្ជាប់ទៅកាន់ Files ឬ URL ផ្សេង ដែលស្ថិត នៅទីតាំងជាមួយគ្នា រឺផ្សេងគ្នា។ ដើម្បីប្រើវាបាន អ្នកត្រូវ សរសេរបើកTags <a> និងបិទវិញដោយ </a>។
នៅ ក្នុង Tag <a> មាន 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>
<body>
<a href=”http://www.facebook.com/GB_Hunter” target=”_blank” title=”This is my Facebook Page!”> សាកល្បងនៅទីនេះ </a>
</body>
</html>
HTML Head
Head Element វាគឺជា element មួយប្រភេទ ដែលសំខាន់ជាងគេក្នុង HTML ព្រោះវាមានលទ្ធភាពគ្រប់គ្រង Element របស់ភាសារ ផ្សេង ទៀតបាន ទាំងនៅក្នុងFile ខ្លួនឯង និងនៅខាងក្រៅបាន។
Tags ដែលនៅខាងក្រោយនេះត្រូវបាន Add ចូលទៅ Head Tag តាមតម្រូវការ ផ្សេងៗគ្នាដូចជា <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base&g;
The HTML <title> Element
Tags នេះប្រើសំរាប់បង្ហាញចំនងជើង រឺមតិកាផ្សេងៗក្នុង Browser toolbar។
- ជាអ្នកកំណត់ Title ជាក់លាក់មួយសំរាប់ Page មួយក្នុង Browser toolbar
- បង្ហាញការពិពណ៌នាសំរាប់ Page Website នៅពេលគេប្រើ search-engine
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document……
</body>>
</html>
មើលលទ្ធផល
The HTML <base> Element
<base> tags កំនត់ទីតាំងជាក់លាក់របស់ URL/targetដែលទាក់ទងនឹង URL នៅក្នុងPage ណាមួយ។
<head>
<base href=”http://www.w3schools.com/images/” target=”_blank”>
</head>
The HTML <link> Element
<link> tags ជានាក់កំនត់ទំនាក់ទំនងរវាង ឯកសារនៅខាងក្នុង នឹងប្រភពឯកសារនៅខាងក្រៅ។
ជាធម្មតាវាប្រើជាមួយ style sheets(CSS)។
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
The HTML <meta> Element <meta> tags ជាពត៍មានអំពី ទិន្នន័យ របស់វេបសាយ ដែលយើងបានសរសេរដាក់ពីលើ ហើង វាមានឥទ្ធិពលនៅពេលគេប្រើ ការស្វែងរក (Search Engines) តាមរយះ Google រឺ Yahoo…។
គ្រប់ទិន្នន័យរបស់ Meta មិនបានបង្ហាយចេញនៅលើ Pages ខ្លួនវាទេ ប៉ុន្តែវាបង្ហាញ ចេញនៅពេលគេ Search Engines។ គ្រប់ Attributes របស់ Meta ត្រូវបានប្រើបា្រស់ខុសៗគ្នា៖
កំនត់ពាក្យគន្លឹងសំរាប់ប្រើក្នុង ការស្វែងរក (Search Eninges)
<meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript”>
កំនត់ការពីពណ៌នាសំរាប់ Website <meta name=”description” content=”Free Web tutorials on HTML and CSS”>
បង្ហាញឈ្មោះអ្នកនិពន្ធ វេបសាយ
<meta name=”author” content=”រុន រដ្ឋា (Run Rotha)”>
កំនត់រយៈពេល សំរាប់ការ Refresh Webpage។
ឧទាហរណ៍៖ ចង់ refresh 30 វិនាទីម្តង
<meta http-equiv=”refresh” content=”30″>
The HTML <style> Element
<style> tags សំរាប់កំនត់រូបរាង រឺពណ៌របស់ web page
<head>
<style type=”text/css”>
body {background-color:yellow}
p {color:blue}
</style>
</head>
HTML CSS គេប្រើ CSS សំរាប់រចនាវេបសាយ អោយកាន់តែ ស្រស់ស្អាត ជាងមុន នឹងងាយស្រួលសរសេរជាងមុន
ពាក្យបំព្រួញរបស់ CSS គឺ Cascading Style Sheets
រៀបសរសេរ CSS ជាមួយ HTML (Styling HTML with CSS)
យើងអាចសរសេរ CSS បាន ៣ បៀប គឺ៖
- Inline ប្រើAttribute ឈ្មោះ style ក្នុង HTML Element
- Internal ប្រើ <style> element នៅក្នុង <head>
- External សរសេរនៅក្នុង File មួយផ្សេងទៀត
<!DOCTYPE html>
<html>
<body style=”background-color:yellow;”>
<h2 style=”background-color:red;”>This is a heading</h2>
<p style=”background-color:green;”>This is a paragraph.</p>
</body>
</html>
កំនត់ពណ៌ ទំហំ ម៉ូត អក្សរ
<!DOCTYPE html>
<html>
<body>
<h1 style=”font-family:verdana;”>A heading</h1>
<p style=”font-family:arial;color:red;font-size:20px;”>A paragraph.</p>
</body>
</html>
Internal Style Sheet យើងត្រូវសរសេរ វាក្នុង <head> element
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<body>
</body>
</html>
External Style Sheet
ប្រើ Link element សំរាប់ភ្ជាប់ទៅ file នៅខាងក្រៅឈ្មោះ mystyle.css
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
HTML Images
<img> tag ប្រើសំរាប់បង្ហាញរូបភាពនៅលើ web page
Attribtutes របស់ <img> tag មានដូចជា ៖
- src=”" ផ្លូវទៅកាន់រូបភាព
- title=”" ពាក្យពិពណ៌នានៅលើ រូបភាព
- width=”" កំនត់ប្រវែងរូបភាព
- height=”" កំនត់កំពស់រូបភាព
- border=”" កំនត់កំរាសស៊ុម
<img src=”my photo.jpg” alt=”photo in wonderful day!” width=”300″ height=”260″ border=”5″ />
HTML Tables
ដើម្បីបង្កើតតារាបាន យើងចាំបាច់ត្រូវចាប់ផ្តើមដោយ open tag <table> និងបញ្ចប់ដោយ close tag </table>។
តារា កើតឡើងដោយ បន្ទាត់ដេក(ជួរដេក) ហៅថា (Rows) និង បន្ទាត់ឈរ(ជួរឈរ) ហៅថា (Columns)
Tags Row គឺ <tr> …… </tr>
Tags Column គឺ <td>……</td>
សូមមើលឧទាហរណ៍
Ex:1
<table border=”1″>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Result 1
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
<table border=”1″>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Result:
|
Header 1
|
Header 2
|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
<table border=”1″ cellpadding=”0″ cellspacing=”0″ >
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
|
Header 1
|
Header 2
|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
<table border=”1″>
<tr>
<th style=”background:#0099FF;”>Header 1</th>
<th style=”background:#FF3333; color:#FFFFFF;”>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
</table>
|
Header 1
|
Header 2
|
| row 1, cell 1 | row 1, cell 2 |
Ordered
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Result:
- Coffee
- Milk
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Result:
- Coffee
- Milk
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Result:
Coffee
- black hot drink
Milk
- white cold drink
HTML Blocks យើងប្រើ ខ្ចប់element នៅក្នុងក្រុមជាមួយគ្នាបាន ដោយប្រើ <div>…..</div> ហើយនឹង <span>…..</span>
Block level elements ជាធម្មតាតែងតែចាប់ផ្តើម(start) និងបញ្ចប់(end)ជាមួយនឹងបន្ទាត់ថ្មី នៅពេលបង្ហាញនៅក្នុង browser។
Examples: <h1>, <p>, <ul>, <table>
HTML Inline Elements ជាធម្មតាមិនដែលចាប់ផ្តើមដោយបន្ចាត់ថ្មីទេ នៅពេលបង្ហាញ។
Examples: <b>, <td>, <a>, <img>
The HTML <div> Element គឺជា Block Level element សំរាប់ដាក់ HTML element ជាក្រុមៗ
<div>
<p style=”background-color:#0099FF;”> Hello world!</p>
<h2> This is Heading 2</h2>
<p aling=”left”>this is second paragraph</p>
</div>
<div>
<h2>This is block image </h2>
<img src=”my photo.jpg” title=”This is my photo” />
<p align=”center”> Lovely Photo </p>
</div>
Result: how to use DIV
This is Heading 2this is second paragraph
This is block Image
The HTML <span> Element
<span>
<h3>This is block Span</h3>
<p style=” text-align:right; color:#0000FF; background-color:#00CC00″>
Block Span
</p>
</span>
