Pages

Monday, December 28, 2015

            មេរៀនសង្ខេប
មេរៀនទី១: មូលដ្ឋាននៃ HTML
What is HTML?

  • HTML ជាអក្សរបំព្រួញនៃ Hypertext Markup Language គឺជាភាសា​ សំរាប់បង្កើត ទំព័រឯកសារផ្សេងៗ សៀវភៅឯកសារអេឡិចត្រូនិក (E-book) និង សំរាប់បង្កើតគេហទំព័រវិបសាយ នៅក្នុង​ អ៊ីនធើណែត។ HTML ត្រូវបានបង្កើតឡើងដោយ អ្នករូបនិយម ម្នាក់ឈ្មោះ Tim Berners-Lee (កើតនៅថ្ងៃទី ៨ ខែមិថុនា ឆ្នាំ១៩៥៥)
HTML is a markup language for describing web documents (web pages).
• HTML stands for Hyper Text Markup Language
• A markup language is a set of markup tags
• HTML documents are described by HTML tags
• Each HTML tag describes different document content

HTML Tags (បញ្ជួន ដាក់លើ)
- HTML tag គឺជាពាក្យគន្លឹះ(ឈ្មោះ Tag) ដែលត្រូវបានសរសេរនៅក្នុង សញ្ញា angle bracket,
ឧទាហរណ៍ . <htm>
- HTML tag ជាធម្មតាត្រូវចាប់ផ្តើមដោយ បើកTag រួចបិទ Tag វិញ
ឧទាហរណ៍ <b>    </b>
- រូបមន្ត <tagname>ពាក្យពីពណ័នា</tagname>
<!DOCTYPE html>                                                           
<html>                                                                    
<head>
  <title> Computer </title>
</head>

<body>
  <h1> University of Cambodia</h1>
  <p> My first paragraph. </p>
</body>

 </html> 

                          ពន្យល់ពីឧទាហរណ៍
• ពាក្ស DOCTYPE ការប្រកាស ប្រភេទ document type ជា HTML
• អត្ថបទ text រវាង <html>  និង </html> អធិប្បាយជា HTML document
• អត្ថបទ text រវាង <head> និង </head> ផ្តល់ព័ត៌មាន information ពី document
• អត្ថបទ text រវាង <title> និង </title> ផ្តល់ចំណងជើង title សម្រាប់ document
• អត្ថបទ text រវាង <body> និង </body> អធិប្បាយ មើលមាតិការទំព័រ page content
• អត្ថបទ text រវាង <h1> និង </h1> អធិប្បាយ heading ក្បាលលើ
• អត្ថបទ text រវាង <p> និង </p> អធិប្បាយ paragraph។

HTML tags គឺជា keywords (ឈ្មោះ tag names) ដែលនៅក្នុងសញ្ញា angle brackets:<tagname>content</tagname>
• HTML tags ធម្មតាមកជាគូរ ដូចជា <p> និង  </p>
• <p> ចាប់ផ្តើមបើក start tag, ហើយ tag ទី២គឺជា បិទបញ្ចប់ end tag
• បិទបញ្ចប់ end tag សរសេរដូច start tag, តែប្រើសញ្ញា slash មុខឈ្មោះ tag


Web Browsers
Web browser (Chrome, IE, Firefox, Safari) ដើម្បីអាន read HTML documents និងបង្ហាញវា។ browser មិនអាច display HTML tags, ប៉ុន្តែប្រើវា ដើម្បីកំណត់ បង្ហាញ display the document:

HTML Document Structure

HTML Document Page Structure
រចនាសម្ព័ន្ធ ទំព័រ HTML មានដូចខាងក្រោម


ការប្រកាស <!DOCTYPE> Declaration
ការប្រកាស <!DOCTYPE> ជួយ web browser ដើម្បីបង្ហាញ web page មួយបានត្រឹមត្រូវ
ដែលមានប្រភេទ document ជាច្រើននៅលើ web។ ដើម្បីបង្ហាញ document ត្រឹមត្រូវ browser ត្រូវតែដឹងទាំងប្រភេទ type និង version.
All cases are acceptable








HTML Versions

                             
មេរៀនទី២: HTML Editors

HTML Editors
សរសេរ HTML ដោយប្រើ Notepad ឬ TextEdit
• Adobe Dreamweaver
• Microsoft Expression Web
• CoffeeCup HTML Editor
• Notepad ++
• JBuilder
Notepad (PC) ឬ TextEdit (Mac)
ដើម្បីបើក Notepad ក្នុង Windows 7 ឬ Windows 8.1:
ចុច Start (ខាងក្រោមអេក្រង់). ចុចលើ All Programs--> Accessories--> Notepad
បើក Notepad ក្នុង Windows 8.1 :
Start Screen (the window symbol at the bottom left on your screen). Type Notepad

សរសេរ HTML
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>




Save ជា file HTML


View HTML Page ក្នុង Browser






មេរៀនទី៣: HTML Basic Tags

HTML Documents
គ្រប់ HTML documents ត្រូវតែចាប់ផ្តើមជាមួយ ប្រភេទ declaration: <!DOCTYPE html>។
HTML document វាចាប់ផ្តើមជាមួយ <html> ហើយបញ្ចប់ដោយ </html>។ មើល ផ្នែក នៃ HTML document រវាង <body> និង </body>។


<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>



Heading Tags

HTML headings ត្រូវបានកំណត់ជាមួយ <h1> ទៅ <h6> tags


<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>

<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>

</html>



Paragraph Tag
HTML paragraphs ត្រូវបានកំណត់ដោយ <p> tag:

<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>

</html>

Line Break Tag

យើងប្រើធាតុ <br /> element វាចាប់ផ្តើម next line។ tag នេះគឺជាឧទាហរណ៍មួយនៃ empty element កន្លែងលោកអ្នក មិនត្រូវការបើក ឬបិទ opening and closing tags។


<br /> tag មាន space មួយរវាង characters br និង forward slash

<!DOCTYPE html>
<html>
<head>
<title>Line Break  Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>

</html>



HTML Links

HTML links គឺកំណត់ដោយ <a> tag:


<a href="http://itcambo.com">This is a link</a> 

HTML Images
HTML images គឺកំណត់ដោយ <img> tag.

ប្រភព source file (src), alternative text (alt), ទំហំ size (width និង height) ត្រូវបានផ្តល់attributes:


<img src="itcambo.jpg" alt="itcambo.com" width="104" height="142"> 


Centering Content

អាចប្រើ <center> tag ដើម្បីបញ្ចូល content ក្នុង center នៃទំព័រ page ឬ table cell។

<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>

</html>



Horizontal Lines បន្ទាត់បញ្ឈរ

Horizontal lines ប្រើដើម្បីមើល document ជា <hr> tag បង្កើតបន្ទាត់មួយនៃទីតាំង កំពុងប្រើក្នុង document ទៅខាងស្តាំដៃនៃ right margin និង breaks line។

<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>

</html>


<hr /> tag គឺជា empty element, កន្លែងមិនត្រូវការបើក និង បិទ opening and closing tags


Preserve Formatting ទម្រង់ការបង្កា ការពារ
ពេលខ្លះអត្ថបទរបស់អ្នក តាម format ដែលបានសរសេរក្នុង HTML document។ ប្រើ preformatted tag <pre>  text រវាង opening <pre> tag និង closing </pre> tag និងទម្រង់ការពារ formatting នៃ source document

<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
   alert (strText)
}
</pre>
</body>
</html>



Non-breaking Spaces
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
</body>
</html>





មេរៀនទី៤: HTML Elements

HTML elements ដែលសរសេរ start tag, ជាមួយ end tag, ជាមួយ content រវាង:
<tagname>content</tagname>
HTML element គឺគ្រប់ ពី start tag ទៅ end tag:
<p>My first HTML paragraph.</p> 










នេះ <p>....</p> គឺជា HTML element, <h1>...</h1> ជា HTML element ផ្សេងទៀត។ មាន HTML elements ដែលមិនត្រួវការ closed, ដូចជា <img.../>, <hr /> និង <br /> elements។

Nested HTML Elements
HTML elements អាច nested (elements អាចផ្ទុក elements) គ្រប់ HTML documents ដែលមាន nested HTML elements។

This example contains 4 HTML elements:

<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>

</html>

HTML ពន្យល់ឧទារណ៍
<html> element កំណត់ whole document.
វាមាន start tag <html> និង end tag </html>.

element content គឺជាធាតុ HTML element (<body> element)


<html>
<body>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
</body>
</html> 

ធាតុ <h1> element កំណត់ដោយ heading។ វាចាប់ផ្តើម start tag <h1> និង end tag </h1>។ ធាតុ element content  ជា: My First Heading។


<h1> My First Heading</h1>


ធាតុ <p> element កំណត់ដោយ paragraph។ ចាប់ start tag <p> និង end tag </p>។ ធាតុ element content គឺជាង: My first paragraph។


<p>My first paragraph.</p>


កុំភ្លេច End Tag

<html>

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

</html>



Empty HTML Elements
HTML elements ដែលមិនមាន no content ហៅថា empty elements។
<br> ជា empty element មិនមាន closing tag ( <br> tag កំណត់ដោយ line break)។

Empty elements អាចជា "closed" ក្នុង opening tag ដូចជាង: <br />


Lowercase Tags

HTML tags are not case sensitive: <P> means the same as <p>






មេរៀនទី៥: HTML Attributes



HTML Attributes
• HTML elements អាចមាន attributes
• Attributes ផ្តល់ additional information អំពី element មួយ
• Attributes លក្ខណ:ពិសេស the start tag

• Attributes មានក្នុង name/value គូរជា : name="value"

The lang Attribute
The document language can be declared in the <html> tag.

The language is declared in the lang attribute.

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

The lang Attribute
document language អាចប្រកាស declared ក្នុង <html> tag។

ភាសា declared ក្នុង lang attribute។


<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

The title Attribute
HTML paragraphs កំណត់ដោយ <p> tag។

ក្នុងឧទាហរណ៍ <p> element មាន title attribute។ តម្លៃនៃ attribute ជា "About ITCAMBO":

<p title="About ITCAMBO">
ITCAMBO is a web IT Solutions site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>


href Attribute

HTML links ដែលកំណត់ដោយ <a> tag។ ភ្ជាប់ link address មានលក្ខណ:ក្នុងhref attribute:

<a href="http://www.itcambo.com">This is a link</a>

Size Attributes
HTML images ត្រូវកំណត់ <img> tag។

ឈ្មោះ filename នៃប្រភព source (src), និង size នៃរូប image (width and height) ទាំងអស់បានផ្តល់ជា attributes:

<img src="itcambo.jpg" width="104" height="142">


alt Attribute

alt attribute មានលក្ខណ:ជា អត្ថបទ alternative text ប្រើ កាលណា HTML element មិនអាចបង្ហាញ displayed

<img src="itcambo.jpg" alt=“itcambo.com" width="104" height="142">


Quote Attribute Values

<a href= http://www.cost.uc.edu.kh>                        This is a link


ឧទាហរណ៍ ពី HTML Attribute
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute  Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>

</html>


Core Attributes
មាន បួន core attributes ដែលអាចប្រើក្នុង HTML elements ជា:
• id
• title
• class

• style

The id Attribute

id attribute នៃ HTML tag មួយ អាចប្រើ uniquely identify any element within an HTML page.
<p id="html">This para explains what is HTML</p>

<p id="css">This para explains what is Cascading Style Sheet</p>

The title Attribute

title attribute ផ្តល់សម្រាប់ title នៃ element។ syntax សម្រាប់ title attribute គឺប្រហែល ជា id attribute:
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>

</html>

The class Attribute

class attribute ត្រូវបានប្រើសម្រាប់ ប្រមូលផ្តុំ element ជាមួយ style sheet, និងលក្ខណ:ពិសេស class របស់ element។

class="className1 className2 className3"

The style Attribute

style attribute អនុញ្ញាត ដើម្បីកំណត់ Casecading Style Sheet (CSS) តួនាទីក្នុង element។
<!DOCTYPE html>
<html>
<head>                                                                                        
<title>The style Attribute</title>
</head>
<body>
<p style="font-family:arial; color:#FF0000;">Some text...</p>
</body>

</html>

លទ្ធផលចេញ

Some text...


Internationalization Attributes
មានបី internationalization attributes, ដែលជាអថេរ available សម្រាប់ XHTML elements.
• dir
• lang

• xml:lang

The dir Attribute

dir attribute អនុញ្ញាតអោយបង្ហាញ indicate ដើម្បីមើល browser ផ្ទាល់នៅក្នុង text






<!DOCTYPE html>
<html dir="rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>

</html>

The lang Attribute

lang attribute អនុញ្ញាតអោយ បង្ហាញ main language ដែលប្រើក្នុង document, ប៉ុន្តែ attribute នេះបានរក្សាក្នុង HTML សម្រាប់ versions ថ្មី HTML របស់។ attribute នេះជំនួសដោយ xml:lang attribute ក្នុង XHTML documents ថ្មី។

<!DOCTYPE html>
<html lang="en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>

</html>




មេរៀនទី៦: HTML Headings



Headings គឺមានសារ:សំខាន់ ក្នុង HTML documents

HTML Headings
Headings កំណត់ដោយ <h1> ទៅ <h6> tags.

<h1> defines the most important heading. <h6> heading ចុងបញ្ចប់

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML Horizontal Rules
<hr> tag បង្កើតបន្ទាត់បញ្ឈរ horizontal line ក្នុង HTML page។

hr element អាចប្រើដើម្បី separate content:

<!DOCTYPE html>
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p> College Science & Technology .</p>
<hr>
<p>Learn ITE101.</p>
<hr>
<p>Learn ITE102 & ITE103.</p>
</body>

</html>

HTML <head> Element
HTML <head> element has nothing to do with HTML headings.
HTML <head> element ផ្ទុក meta data។ ដែល Meta data គឺមិនបង្ហាញ

HTML <head> element ស្ថិតនៅរវាង between <html> tag និង <body> tag:

<!DOCTYPE html>
<html>
<head>
  <title> ITE103 Introduction to HTML</title>
  <meta charset="UTF-8">
</head>
<body>
<p>Introduction to HTML very basic Web language</p>
<p> Web static HTML</p>
</body>

</html>




មេរៀនទី៧: HTML Paragraphs

HTML Paragraphs

HTML <p> ធាតុកំណត់ paragraph

<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>

</html>
HTML Display
លោកអ្នកមិនអាច កំណត់ច្បាស់ពីរបៀប HTML បង្ហាញ

អេក្រង់ Large ឬ small ហើយសន្លឹកទំហំ resized windows នឹងបង្ហាញលទ្ធផលខុសគ្នាresults. 
<!DOCTYPE html>
<html>
<body>
<p>
I'm sometimes asked by visitors thinking of starting
their own website what terms like "HTML", "CSS",
"JavaScript", "PHP" and "Perl"
</p>
<p>
When you write a normal document using a word processor like Microsoft Word/Office, your text is saved in a file with a special format.
</p>
<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>
</body>

</html>
                                                                  Result
កុំភ្លេច End Tag

browsers ជាច្រើននឹងបង្ហាញ display HTML ត្រឹមត្រូវ ទោះបីភ្លេច forget end tag:

<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.
<p>This is a paragraph.
<p>This is a paragraph.
<p>Don't forget to close your HTML tags!</p>
</body>

</html>
HTML Line Breaks
HTML <br> ធាតុកំណត់ line break។

ប្រើ <br> ប្រសិនបើចង់បាន line break (new line) ដោយចាប់ផ្តើម starting new paragraph:
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a para<br>graph with line breaks</p>
</body>

</html>
The HTML <pre> Element
HTML <pre> ធាតុកំណត់ preformatted text។

text នៅក្នុង <pre> គឺបានបង្ហាញ fixed-width font (usually Courier), and it preserves both spaces and line breaks:
<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
   Machine and assembly languages.
   Business-oriented languages.
   Object-oriented programming is dynamic dispatch.
  
   Programming Languages .
</pre>
</body>


</html>





មេរៀនទី៨: HTML Styles


<!DOCTYPE html>
<html>
<body>
<h2 style="color:red">I am Red</h2>
<h2 style="color:blue">I am Blue</h2>
</body>

</html>
HTML Styling
គ្រប់ធាតុ HTML element មាន default style មួយ (ពណ៌ background ជា white និង text color ជា black)។

ការផ្លាស់ប្តូរ default style នៃធាតុ HTML element, អាចធ្វើជាមួយ style attribute។
<!DOCTYPE html>
<html>
<body style="background-color:lightgrey">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

</html>
The HTML Style Attribute

HTML style attribute មាន syntax បង្ហាញខាងក្រោម:

style="property:value"  property ជា CSS property មួយ ហើយ value ជា CSS value។
HTML Text Color

color property កំណយ់ text color ដើម្បីប្រើសម្រាប់ HTML element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue">Cambodia University</h1>
<p style="color:red">College Science & Technology.</p>
</body>

</html>
HTML Fonts

font-family property កំណត់ font ដើម្បីប្រើសម្រាប់ HTML element:

<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana">
This is a heading</h1>
<p style="font-family:courier">
This is a paragraph.</p>
</body>

</html>
HTML Text Size

font-size property កំណត់ទំហំ text size ដើម្បីប្រើ HTML element:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%">
This is a heading</h1>
<p style="font-size:160%">
This is a paragraph.</p>
</body>

</html>
HTML Text Alignment

text-align property កំណត់ horizontal text alignment សម្រាប់ HTML element:
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center">
Centered heading</h1>
<p>This is a paragraph.</p>
</body>

</html>




មេរៀនទី៩: HTML Text Formatting

Bold Text

បង្ហាញជាមួយ <b>...</b> element, ត្រូវបង្ហាញជា bold :

<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
Italic Text
ជាមួយ <i>...</i> ត្រូវបានបង្ហាញជា italicized :
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>​​ italicized</i> typeface.</p>
</body>
</html>
Underlined Text
ជាមួយ <u>...</u> ធាតុ ត្រូវបានបង្ហាញជាមួយ underline :
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>


HTML Small Formatting

HTML <small> កំណត់ small text:

<!DOCTYPE html>
<html>
<body>
<h2>HTML <small>Small</small> Formatting</h2>
</body>

</html>

HTML Marked Formatting

HTML <mark> element កំណត់ marked ឬ highlighted text:
<!DOCTYPE html>
<html>
<body>
<h2>HTML <mark> Marked</mark> Formatting</h2>
</body>

</html>
Strike Text

ជាមួយ <strike>...</strike> element ត្រូវបានបង្ហាញ strikethrough
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>

</html>
Monospaced Font

content នៃ <tt>...</tt> element ត្រូវបានសរសេរក្នុង monospaced font។
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>

</html>
Superscript Text

content នៃ <sup>...</sup> element សរសេរក្នុង superscript
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>

</html>
Subscript Text

content នៃ <sub>...</sub> element សរសេរក្នុង subscript
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>

</html>

Inserted Text
ជាមួយ <ins>...</ins> element ត្រូវបានបង្ហាញ inserted text។

<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>

Deleted Text
បង្ហាញក្នុង <del>...</del> element, ត្រូវបានបង្ហាញជា deleted text។

<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del> cola</del> <ins>wine</ins></p>
</body>
</html>

Larger Text
content នៃ <big>...</big> element បង្ហាញ font size larger ធំជាងអត្ថបទជុំវិញ

<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>

Smaller Text
content នៃ <small>...</small> element បង្ហាញ font size smaller ជា text នៅជុំវិញ។

<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>

Grouping Content
<div> និង <span> elements អនុញ្ញាត group រួមធាតុ elements ជាច្រើនដើម្បីបង្កើត sections ឬsubsections នៃ page។

<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id="menu" align="middle" >
<a href="/index.htm">HOME</a> |
<a href="/about/contact_us.htm">CONTACT</a> |
<a href="/about/index.htm">ABOUT</a>
</div>

<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>

HTML Text Formatting Elements






















មេរៀនទី១០: HTML Phrase Tags


Phrase tags បានរចនាសម្រាប់លក្ខណ:ពិសេស specific បង្ហាញ ប្រហាក់ប្រហែល <b>, <i>, <pre> និង <tt> ក្នុងមេរៀនពីមុន។

Emphasized Text
បង្ហាញក្នុង <em>...</em> element ត្រូវបានបង្ហាញជា emphasized text។

<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses a <em>emphasized</em> typeface.</p>
</body>
</html>

Marked Text
ដែលបង្ហាញជា <mark>...</mark> element, ត្រូវបានបង្ហាញជា marked។

<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>
</html>

Strong Text
ដែលបង្ហាញក្នុង <strong>...</strong> element ត្រូវបានបង្ហាញជា important text។

<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>

Text Abbreviation
អាច abbreviate text ដោយបញ្ចូល <abbr> និង closing </abbr> tags។

<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>My best friend's name is  <abbr title="Abhishek">Abhy</abbr>.</p>
</body>
</html>

Acronym Element
<acronym> element អនុញ្ញាតអោយ បង្ហាញដែល text រវាង <acronym> និង </acronym> tags គឺជា acronym។

<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
</body>
</html>

Text Direction
<bdo>...</bdo> element សម្រាប់ Bi-Directional Override ហើយវាប្រើដើម្បី override current text direction។

<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
</body>
</html>

Special Terms
<dfn>...</dfn> element (ឬ HTML Definition Element) អនុញ្ញាតកំណត់ លក្ខណ: special term ប្រើប្រហែល italic words ក្នុង paragraph។

<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn> term.</p>
</body>
</html>

Quoting Text
កាលណាលោកអ្នកចង់ quote ពីប្រភព source លោកអ្នកនឹងបញ្ចូល ក្នុងរវាង <blockquote>...</blockquote> tags។

<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<p>The following description of XHTML is taken from the W3C 
Web site:</p>

<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>

Short Quotations
<q>...</q> element គឺប្រើកាលណាចង់ន្ថែម add a double quote ក្នុងsentence។

<!DOCTYPE html>
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
<p>Amit is in Spain, <q>I think I am wrong</q>.</p>
</body>
</html>

Text Citations
បង្ហាញ source រវាង opening <cite> tag និង closing </cite> tag

<!DOCTYPE html>
<html>
<head>
<title>Citations Example</title>
</head>
<body>
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
</body>
</html>

Computer Code
programming code ដើម្បីបង្ហាញលើ Web page should be placed inside <code>...</code> tags. 

<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
</body>
</html>

Keyboard Text
កាលណាកំពង់និយាយ ពី computers, ប្រសិនបើ លោកអ្នក ចង់ប្រាប់ អ្នកអាន reader បញ្ចូល text, ប្រើ <kbd>...</kbd>

<!DOCTYPE html>
<html>
<head>
<title>Keyboard Text Example</title>
</head>
<body>
<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
</body>
</html>

Programming Variables
element តែងតែប្រើក្នុង conjunction ជាមួយ <pre> និង <code> elements ដើម្បីបង្ហាញ content នៃ element ជាអថេរ variable។

<!DOCTYPE html>
<html>
<head>
<title>Variable Text Example</title>
</head>
<body>
<p><code>document.write("<var>user-name</var>")</code></p>
</body>
</html>

Program Output
<samp>...</samp> element បង្ហាញគំរូ output ពីកម្មវិធី program មួយ។

<!DOCTYPE html>
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
<p>Result produced by the program is <samp>Hello World!</samp></p>
</body>
</html>

Address Text
<address>...</address> element ប្រើសម្រាប់ផ្ទុក address។

<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Jubilee Hills -  Hyderabad</address>
</body>
</html>





មេរៀនទី១១: HTML Paragraphs



HTML Paragraphs
HTML <p> element កំណត់ paragraph.

<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

Don't Forget the End Tag
មាន browsers ជាច្រើននឹងកំណត់ បង្ហាញ HTML ត្រឹមត្រូវ ប្រសិនបើភ្លេច even end tag:

<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.
<p>This is a paragraph.
<p>This is a paragraph.

<p>Don't forget to close your HTML tags!</p>
</body>
</html>

HTML Line Breaks
HTML <br> element កំណត់ line break។ ប្រើ <br> ប្រសិនបើចង់ line break (a new line) ដោយមិនចាប់ផ្តើម new paragraph:

<!DOCTYPE html>
<html>
<body>
<p>This is<br>a para<br>graph with line breaks</p>
</body>
</html>

The Poem Problem

<!DOCTYPE html>
<html>
<body>
<p>In HTML, spaces and new lines are ignored:</p>
<p>
  My Bonnie lies over the ocean.
  My Bonnie lies over the sea.
  My Bonnie lies over the ocean.
  Oh, bring back my Bonnie to me.
</p>
</body>
</html>

The HTML <pre> Element
HTML <pre> element កំណត់ preformatted text.
text inside ក្នុង  <pre> element បង្ហាញ fixed-width font (ធម្មតាជា Courier):

<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
   Information technology.
   Computer Science.
   Computer Science.  
   Computer Science.
</pre>
</body>
</html>








មេរៀនទី១២: HTML Meta Tags


<meta> tag គឺប្រើដើម្បីផ្តល់ ដូចជា ការបន្ថែម information។ tag នេះគឺ empty element មិនមាន closing tag តែវាអាចនាំ information ជាមួយ attributes។

ការបន្ថែម Meta Tags ទៅ Your Documents
អាចបន្ថែម add metadata ទៅលើ web pages ដោយ <meta> tags ក្នុង header នៃdocument ដែលតំណាងដោយ <head> and </head> tags។

Specifying Keywords
អាចប្រើ <meta> tag ដើម្បីកំណត់លក្ខណ: សំខាន់ important keywords ទាក់ទងជាមួយ document និង keywords ត្រូវបានប្រើសម្រាប់ search engine។

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Document Description
អាចប្រើ <meta> tag ដើម្បីផ្តល់ short description អំពី document។ នេះអាចប្រើsearch engines កាលណា index webpage។

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Document Revision Date
អាចប្រើ <meta> tag ដើម្បីផ្តល់ពត៌មាន information ឯកសារកាលពីមុន ដែលបាន updated។ information នេះអាចប្រើដោយ  web browsers ពេលដែល refreshing  webpage។

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content=“IT CAMBODIA, 10/04/2015" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Document Refreshing
<meta> tag អាចប្រើដើម្បីកំណត់លក្ខណ:ពិសេស ក្នុងពេល web page នឹង refreshing automatically។

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content=" IT CAMBODIA, 10/04/2015 " />
<meta http-equiv="refresh" content="5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Page Redirection
អាចប្រើ <meta> tag ដើម្បី redirect page ទៅ webpage ផ្សេងទៀត។

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content=" IT CAMBODIA, 10/04/2015 " />
<meta http-equiv="refresh" content="5" url=http://www.itcambo.com" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Setting Cookies
Cookies ជាទិន្នន័យ data, ដែលផ្ទុកក្នុង text files លើកុំព្យូទ័រ computer ហើយវាបានប្តូរ រវាង web browser និង web server ដើម្បីរក្សាពត៌មានធំ លើ web application ត្រូវការ។

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content=" IT CAMBODIA, 10/04/2015 " />
<meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15 23:59:59 GMT;" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Setting Author Name
អាចបង្កើតឈ្មោះអ្នកនិពន្ធ author name ក្នុង web page ដែលប្រើ meta tag

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta ame="author" content=“Teav Chhun Nan" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Specify Character Set
ប្រើ <meta> tag កំណត់ character ពិសេស ដែលប្រើជាមួយ webpage

!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta ame="author" content=“Teav Chhun Nan" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

ដើម្បីប្រើ static page ជាមួយ traditional Chinese characters, the webpage must contain a <meta> tag to set Big5 encoding:

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta ame="author" content=“Teav Chhun Nan" />
<meta http-equiv="Content-Type" content="text/html; charset=Big5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>





មេរៀនទី១៣: HTML Styles



HTML Styling
Every HTML element has a default style (background color is white and text color is black).
Changing the default style of an HTML element, can be done with the style attribute.

<!DOCTYPE html>
<html>
<body style="background-color:lightgrey">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

The HTML Style Attribute
The HTML style attribute has the following syntax:
style="property:value" 
The property is a CSS property. The value is a CSS value.

HTML Text Color
The color property defines the text color to be used for an HTML element:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>
</body>
</html>

HTML Fonts
The font-family property defines the font to be used for an HTML element:

<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana">
This is a heading</h1>
<p style="font-family:courier">
This is a paragraph.</p>
</body>
</html>

HTML Text Size
The font-size property defines the text size to be used for an HTML element:

<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%">
This is a heading</h1>
<p style="font-size:160%">
This is a paragraph.</p>
</body>
</html>

HTML Text Alignment
The text-align property defines the horizontal text alignment for an HTML element:

<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center">
Centered heading</h1>
<p>This is a paragraph.</p>
</body>
</html>







មេរៀនទី១៤: HTML Comments



HTML comments ជាកន្លែងដាក់ រវាង <!-- ... --> tags។ content ដាក់ក្នុង <!-- ... --> tags

<!DOCTYPE html>
<html>
<head>  <!-- Document Header Starts -->
<title>This is document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
</body>
</html>

Valid vs Invalid Comments
Comments មិនអាចបញ្ចូលក្នុង comment ផ្សេងទៀតបាន។ ប្រើសញ្ញា double-dash sequence "--" មិនអាចបង្ហាញក្នុង comment មួយលើកលេងតែផ្នែកនៃ closing --> tag។

<!DOCTYPE html>
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>
<!--   This is valid comment -->
<p>Document content goes here.....</p>
</body>
</html>

ប៉ុន្តែបន្ទាត់ខាងក្រោម មិនស្គាល់ comment ហើយបានបង្ហាញដោយ browser។ ព្រោះ មាន space មួយរវាង left angle bracket និងសញ្ញា exclamation mark។

<!DOCTYPE html>
<html>
<head> 
<title>Invalid Comment Example</title>
</head>
<body>
< !--   This is not a valid comment -->
<p>Document content goes here.....</p>
</body>
</html>

Multiline Comments
HTML supports multi-line comments បានប្រសើរ។ លោកអ្នកអាច comment multiple lines ដោយចាប់ផ្តើម special beginning tag <!-- និង ending tag --> ។

<!DOCTYPE html><html>
<head> 
<title>Multiline Comments</title>
</head>
<body>
<!--  
This is a multiline comment and it can
span through as many as lines you like.
-->
<p>Document content goes here.....</p>
</body>
</html>

Conditional Comments
Conditional comments ដំណើរការបានលើ Internet Explorer (IE) សម្រាប់ Windows ប៉ុន្តែ វា ignored ជាមួយ browsers ផ្សេងទៀត។ វា supported ពី Explorer 5 ឡើងទៅ។

<!DOCTYPE html><html>
<head> 
<title>Conditional Comments</title>
<!--[if IE 6]>
   Special instructions for IE 6 here
<![endif]-->
</head>
<body>
<p>Document content goes here.....</p>
</body>
</html>

Using Comment Tag
មាន browsers ពីរបីថ្មី ដែល support <comment> tag ជា comment ផ្នែកមួយនៃHTML code។

<!DOCTYPE html><html>
<head>
<title>Using Comment Tag</title>
</head>
<body>
<p>This is <comment>not</comment> Internet Explorer.</p>
</body>
</html>

Commenting Script Code
លោកអ្នកនឹងរៀន Javascript ជាមួយ HTML ថែម។ តែត្រូវការ បង្កើតចំណាំប្រសិនបើប្រើ Java Script ឬ VB Script ក្នុង HTML code របស់អ្នក។ ពេលវាrecommended ដើម្បីបញ្ចូល script code ក្នុង HTML comments ដូច្នេះបណ្តា browsers អាចដំណើរការ តាមធម្មតា។

<!DOCTYPE html><html>
<head>
<title>Commenting Script Code</title>
<script>
<!--
   document.write("Hello World!")
//-->
</script>
</head>
<body>
<p>Hello , World!</p>
</body>
</html>

Commenting Style Sheets
លោកអ្នកនឹងរៀនប្រើ style sheets ជាមួយ HTML ប៉ុន្តែពេលនេះ ត្រូវបង្កើតកំណត់ ចំណាំ ថាប្រសិនបើប្រើ Casecading Style Sheet (CSS) ក្នុង HTML code ពេលវាrecommended ដើម្បីបញ្ចូល style sheet code ក្នុង HTML comments ។

<!DOCTYPE html><html>
<head>
<title>Commenting Style Sheets</title>
<style>
<!--
.example {
  border:1px solid #4a7d49;
}
//-->
</style>
</head>
<body>
<div class="example">Hello , World!</div>
</body>
</html>







មេរៀនទី១៥: HTML Quotation and Citation Elements



HTML <q> for Short Quotations
HTML <q> element កំណត់ short quotation។
Browsers ធម្មតាបញ្ចូល insert quotation marks ជុំវិញ <q> element។

<!DOCTYPE html>
<html>
<body>
<p>Browsers usually insert quotation marks around the q element.</p>
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
</body>
</html>



HTML <blockquote> for Long Quotations
HTML <blockquote> element កំណត់ quoted section។
Browsers usually indent <blockquote> elements.

<!DOCTYPE html>
<html>
<body>
<p>Browsers usually indent blockquote elements.</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
The Third Angkor Sankranta, scheduled to be held on the occasion of the Khmer Traditional New Year from April 14 to 16, 2015, would attract some 500,000 visitors, and about 3,000 youths have volunteered to take part in organizing this annual event, said H.E. Hun Many, President of the Union of the Youth Federations of Cambodia (UYFC).

During a meeting with Information Minister H.E. Khieu Kanharith to make a presentation on the organization of Angkor Sankranta 2015 at the Ministry of Information on Feb. 17, H.E. Hun Many said over 380,000 people participated in the event in 2014, up from some 170,000 a year earlier..
</blockquote>

</body>
</html>

HTML <abbr> for Abbreviations
HTML <abbr> element កំណត់ abbreviation ឬ acronym។
Abbreviations អាចផ្តល់ប្រើ ព័ត៌មាន ដើម្បី browsers, translation systems និង search-engines។

<!DOCTYPE html>
<html>
<body>

<p>The <abbr title="World Health Organization">WHO</abbr> 
was founded in 1948.</p>
<p>Marking up abbreviations can give useful information to 
browsers, translation systems and search-engines.</p>

</body>
</html>

HTML <address> for Contact Information
HTML <address> element កំណត់ contact information (author/owner) នៃ document ឬ article។

<!DOCTYPE html>
<html>
<body>
<p>Angkor Sankranta 2015 Expected to Attract 500,000 Visitors.</p>

<address>
H.E. Hun Many.<br>
Visit us at:<br>
http://www.akp.gov.kh<br>
Angkor wat Siem reap <br>
</address>

</body>
</html>

HTML <cite> for Work Title
HTML <cite> element កំណត់ title of a work។
Browsers តែងតែបង្ហាញ <cite> elements ជា italic។

<!DOCTYPE html>
<html>
<body>

<p>The HTML cite element defines the title of a work.</p>
<p>Browsers usually displays cite elements in italic.</p>

<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

</body>
</html>

HTML <bdo> for Bi-Directional Override
HTML <bdo> element definesកំណត់ bdo អត្ថបទ text នេះនឹងសរសេរពីស្តាំ right ទៅឆ្វេង left:

<bdo dir="rtl">This text will be written from right to left</bdo>

HTML Quotations, Citations, and Definition Elements





មេរៀនទី១៦: HTML Computer Code Elements



Computer Code

var person = {
    firstName:“Chhunnan",
    lastName:“Dara",
    age:50,
    eyeColor:“Tha"
} 

HTML Computer Code Formatting
ធម្មតា HTML ប្រើ variable letter size, និង variable letter spacing។
<kbd>, <samp>, និង  <code> elements ដែល support fixed letter size និង spacing.

HTML Keyboard Formatting
HTML <kbd> element កំណត់ keyboard input:

<p>To open a file, select:</p>
<p><kbd>File | Open...</kbd></p> 

<!DOCTYPE html>
<html>
<body style="font-size:16px">
<p>The kbd element represents keyboard input:</p>
<p><kbd>File | Open...</kbd></p>
</body>
</html>

HTML Sample Formatting
HTML <samp> element កំណត់ computer output:

<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>

<!DOCTYPE html>
<html>
<body style="font-size:16px">

<p>The samp element represents a computer output 
sample:</p>

<samp>
itcambo.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-
reslog-v6.189
</samp>

</body>
</html>

HTML Code Formatting
HTML <code> element កំណត់ programming code:

<code>
var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue" }
</code>

<!DOCTYPE html>
<html>
<body style="font-size:16px">

<p>Programming code example:</p>

<code>
var person = {firstName:"John", lastName:"Doe", age:50}
</code>

</body>
</html>


<code> element មិនអាចរក្សា extra whitespace និង line-breaks:


<p>Coding Example:</p>

<code>
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
}
</code>

<!DOCTYPE html>
<html>
<body style="font-size:16px">
<p>The code element does not preserve whitespace and line-breaks:</p>
<code>
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
}
</code>
</body>
</html>

ដើម្បីដោះស្រាយ, ដាក់ code នៅក្នុង <pre> element:

<p>Coding Example:</p>

<code>
<pre>
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
}
</pre>
</code>

<!DOCTYPE html>
<html>
<body>
<p>The code element does not preserve whitespace and line-breaks.</p>
<p>To fix this, you can wrap the code in a pre element:</p>
<code>
<pre>
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
}
</pre>
</code>
</body>
</html>

HTML Variable Formatting
HTML <var> element កំណត់អថេរគណិតវិទ្យា mathematical variable:

<p>Einstein wrote:</p>
<p><var>E = m c<sup>2</sup></var></p>

<!DOCTYPE html>
<html>
<body style="font-size:16px">
<p>Einstein wrote:</p>
<p><var>E</var> = <var>m</var> <var>c</var><sup>2</sup></p>
</body>
</html>

HTML Computer Code Elements






មេរៀនទី១៧: HTML Images



រូបភាពដែលមានទំហំតូច ជា GIF សម្រាប់មានចលនា រូបធម្មតាតូច JPG និង PNG

Insert Image
បញ្ចូល image ក្នុង web page ដោយប្រើ <img> tag តាម syntax

<img src="Image URL" ... attributes-list/>
























alt Attribute
alt attribute មានលក្ខណ:ពិសេស text សម្រាប់ image ប្រសិនបើមិនបង្ហាញ
<img src="html5.gif" alt="IT CAMBODIA"> 

Set Image Location
តាមធម្មតាយើងរក្សារូប images នៅ directory ដោយឡែក។ រក្សា HTML file test.htm នៅកក្នុង home directory ហើយបង្កើត subdirectory images នៅខាងក្នុងhome directory ជាកន្លែងដែលរក្សារូប image test.png។

<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="images/test.png" alt="Test Image" />
</body>
</html>

Set Image Width/Height
លក្ខណ:របស់ width និង height នៃ image។ តម្លៃនៃ pixels (ប្រើ px បន្ទាប់ពីតម្លៃ):

<img src="html.gif" alt=“IT CAMBO Icon" style="width:128px;height:128px"> 

អាចប្រើ width និង height attributes។ តម្លៃ values ក្នុង pixels (ដោយមិនបាច់ប្រើ px នៅបន្ទាប់ពីតម្លៃបាន):

<img src="html.gif" alt=“IT CAMBO Icon" width="128" height="128"> 

<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src="test.png" alt="Test Image" width="150" height="100"/>
</body>
</html>

Width and Height or Style

<!DOCTYPE html>
<html>
<head>
<style>
img {
    width:100%;
}
</style>
</head>
<body>

<img src="html.gif" alt=“IT CAMBO Icon" style="width:128px;height:128px">
<img src="html.gif" alt=" IT CAMBO Icon" width="128" height="128">

</body>
</html>

Images in Another Folder

<img src="/images/html5.gif" alt=“IT CAMBO Icon" style="width:128px;height:128px"> 

ប្រសិនបើ browser មើលឃើញរូប image, វានឹងបង្ហាញ broken link icon

<img src="wrongname.gif" alt=“IT CAMBO Icon" style="width:128px;height:128px"> 

Using an Image as a Link

<a href="default.asp">
  <img src=“douch swa.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a> 

Set Image Border
អាចកំណត់ border thickness ជា pixels ដោយប្រើ border attribute។

<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src="test.png" alt="Test Image" border="3"/>
</body>
</html>

Set Image Alignment
ដោយ default image ជា align នៅជ្រុង left side នៃ page, អាចប្រើ align attribute ដើម្បីបង្កើតជា center ឬ right។

<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src="test.png" alt="Test Image" border="3" align="right"/>
</body>
</html>






មេរៀនទី១៨: HTML Tables



តារាង HTML tables ត្រូវបានបង្កើតដោយប្រើ <table> tag ក្នុង <tr> tag ប្រើដើម្បីបង្កើតតារា table rows និង <td> tag គឺប្រើបង្កើត data cells។

<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>



<!DOCTYPE html>
<html>
<body>
<table style="width:100%">
  <tr>
    <td>Teav</td>
    <td>Chhun Nan</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Srey</td>
    <td>Kakda</td> 
    <td>94</td>
  </tr>
  <tr>
    <td>Tola</td>
    <td>Seiha</td> 
    <td>80</td>
  </tr>
</table>
</body>
</html>

តារាងកំណត់ <table> tag.
តារាង table rows ជាមួយ <tr> tag.
Table rows ត្រូវបានផ្តល់ table data ជាមួយ <td> tag.
តារាង table row មួយអាចបែងចែក ក្នុង table headings ជាមួយ <th> tag.
HTML Table with a Border Attribute
<!DOCTYPE html>
<html>
<body>
<table border="1" style="width:100%">
  <tr>
    <td>Teav</td>
    <td>Chhun Nan</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Reaksmey</td>
    <td>Kosal</td> 
    <td>94</td>
  </tr>
  <tr>
    <td>Chea</td>
    <td>Leakhena</td> 
    <td>80</td>
  </tr>
</table>
</body>

</html>

ប្រើ CSS border

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
  <tr>
    <td>Teav</td>
    <td>Chhun Nan</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Reaksmey</td>
    <td>Kosal</td> 
    <td>94</td>
  </tr>
  <tr>
    <td>Chea</td>
    <td>Leakhena</td> 
    <td>80</td>
  </tr>

</table>
HTML Table with Collapsed Borders    CSS border-collapse:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
  <tr>
    <td>Teav</td>
    <td>Chhun Nan</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Reaksmey</td>
    <td>Kosal</td> 
    <td>94</td>
  </tr>
  <tr>
    <td>Leakhena</td>
    <td>Seiha</td> 
    <td>80</td>
  </tr>
</table>
</body>

</html>
HTML Table with Cell Padding  CSS padding property:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}
</style>
</head>
<body>
<table style="width:100%">
    <td>Teav</td>
    <td>Chhun Nan</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Reaksmey</td>
    <td>Kosal</td> 
    <td>94</td>
  </tr>
  <tr>
    <td>Leakhena</td>
    <td>Seiha</td> 
    <td>80</td>
  </tr>
<p>Try to change the padding to 5px.</p>
</body>

</html>

Table Heading
តារាង Table heading អាចកំណត់ដោយប្រើ <th> tag

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>

</html>

CSS text-align property:


<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
th {
    text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Points</th>
  </tr>
<td>Teav</td>
    <td>Chhun Nan</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Reaksmey</td>
    <td>Kosal</td> 
    <td>94</td>
  </tr>
  <tr>
    <td>Leakhena</td>
    <td>Seiha</td> 
    <td>80</td>
  </tr>
</table>
</body>

</html>
HTML Table with Border Spacing
                         CSS border-spacing


<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    padding: 5px;
}
table {
    border-spacing: 15px;
}
</style>
</head>
<body>
<table style="width:100%">
  <td>Teav</td>
    <td>Chhun Nan</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Reaksmey</td>
    <td>Kosal</td> 
    <td>94</td>
  </tr>
  <tr>
    <td>Leakhena</td>
    <td>Seiha</td> 
    <td>80</td>
  </tr>
</table>
<p>Try to change the border-spacing to 5px.</p>
</body>
</html>
Colspan and Rowspan Attributes
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>
Table Cells that Span Many Rows
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;   
}
</style>
</head>
<body>
<h2>Cell that spans two rows:</h2>
<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Teav Chhun Nan</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>0977778647</td>
  </tr>
  <tr>
    <td>070778647</td>
  </tr>
</table>
</body>
</html>
HTML Table With a Caption
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
  <caption>ACELIDA BANK Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$1000</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$500</td>
  </tr>
</table>
</body>
</html>
style ខុសគ្នាសម្រាប់ table
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {

    padding: 5px;
    text-align: left;
}
table#t01 {
    width: 100%;   
    background-color: #f1f1c1;
}
</style>
</head>
<body>
<table style="width:100%">
  <tr>
    <th>First Name</th>
    <th>Last Name</th> 
    <th>Points</th>
  </tr>
  <td>Teav</td>
    <td>Chhun Nan</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Reaksmey</td>
    <td>Kosal</td> 
    <td>94</td>
  </tr>
  <tr>
    <td>Leakhena</td>
    <td>Seiha</td> 
    <td>80</td>
  </tr>
</table>
<br>
<table id="t01">
  <tr>
    <th>First Name</th>
    <th>Last Name</th> 
    <th>Points</th>
  </tr>
  <tr>
    <td>Teav</td>
    <td>Chhun Nan</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Reaksmey</td>
    <td>Kosal</td> 
    <td>94</td>
  </tr>
  <tr>
    <td>Leakhena</td>
    <td>Seiha</td> 
    <td>80</td>
  </tr>
  </tr>
</table>
</body>
</html>



<!DOCTYPE html>
<html>
<head>
<style>
table {
    width:100%;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
   background-color:#fff;
}
table#t01 th  {
    background-color: black;
    color: white;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th> 
    <th>Points</th>
  </tr>
  <tr>
      <td>Teav</td>
    <td>Chhun Nan</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Reaksmey</td>
    <td>Kosal</td> 
    <td>94</td>
  </tr>
  <tr>
    <td>Leakhena</td>
    <td>Seiha</td> 
    <td>80</td>
  </tr>
  </tr>
</table>
<br>
<table id="t01">
  <tr>
    <th>First Name</th>
    <th>Last Name</th> 
    <th>Points</th>
  </tr>
  <tr>
      <td>Teav</td>
    <td>Chhun Nan</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Reaksmey</td>
    <td>Kosal</td> 
    <td>94</td>
  </tr>
  <tr>
    <td>Leakhena</td>
    <td>Seiha</td> 
    <td>80</td>
  </tr>
</table>
</body>
</html>
Tables Backgrounds
•bgcolor attribute - You can set background color for whole table or just for one cell.
•background attribute - You can set background image for whole table or just for one cell.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>
ប្រើ background attribute
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" background="/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>




Table Height and Width
You can set a table width and height using width and height attrubutes.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

Table Header, Body, and Footera
•<thead> - ដើម្បីបង្កើត separate table header.
•<tbody> - បង្ហាញ main body នៃ table.
•<tfoot> - បង្កើត separate table footer.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
Nested Tables
ប្រើតារាង table inside តារាង table ផ្សេងទៀត

<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>
   <table border="1" width="100%">
   <tr>
   <th>Name</th>
   <th>Salary</th>
   </tr>
   <tr>
   <td>Ramesh Raman</td>
   <td>5000</td>
   </tr>
   <tr>
   <td>Shabbir Hussein</td>
   <td>7000</td>
   </tr>
   </table>
</td>
</tr>
</table>
</body>
</html>


មេរៀនទី១៩: HTML Lists

HTML offers web authors three ways for specifying lists of information.
•<ul> - An unordered list. This will list items using plain bullets.
•<ol> - An ordered list. This will use different schemes of numbers to list your items.
•<dl> - A definition list. This arranges your items in the same way as they are arranged in a dictionary.
Unordered HTML Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles).
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul> 

<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Default Bullets</h2>
<ul>
  <li>Ancher Beer</li>
  <li>Cambodia Beer</li>
  <li>Angkor Beer</li>
  <li>Tek Thnot Chou </li>
</ul> 
</body>
</html>
The type Attribute
អាចប្រើប្រភេទ type attribute សម្រាប់ <ul> tag ជា bullet ចង់បាន។ ប្រើជា default ជា disc។
<ul type="square">
<ul type="disc">
<ul type="circle">
ឬប្រើជា
ist-style-type:disc   The list items will be marked with bullets (default)
list-style-type:circle   The list items will be marked with circles
list-style-type:square   The list items will be marked with squares
list-style-type:none   The list items will not be marked

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
   <ul type="square">
<li>Ancher Beer</li>
  <li>Cambodia Beer</li>
  <li>Angkor Beer</li>
  <li>Tek Thnot Chou </li>
   </ul>
</body>
</html>

Ordered HTML Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List</h2>
<ol>
   <li>Ancher Beer</li>
  <li>Cambodia Beer</li>
  <li>Angkor Beer</li>
  <li>Tek Thnot Chou </li>
</ol> 
</body>
</html>










































































































































































































































































































































































































































Posted by at No comments:
Subscribe to: Posts (Atom)