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

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

បង្រៀនដោយលោកគ្រូ: ទាវ ឈុនណន
ព្រឹទ្ធបរុស មហាវិទ្យាល័យ វិទ្យាសាស្រ្ត និង បច្ចេកវិទ្យា
នៃ សាកលវិទ្យាល័យកម្ពុជា
Tel: 077778647-070778647-0977778647
Yahoo, Skype, google: chhunnan
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, ឧ. <htm>
  • HTML tag ជាធម្មតាត្រូវចាប់ផ្តើមដោយ បើកTag រួចបិទ Tag វិញ ឧ. <b>    </b>
  • រូបមន្ត <tagname>ពាក្យពីពណ័នា</tagname>

HTML Elements វាគឺជាអ្វីៗទាំងអសល់របស់ start tag ហើយនឹង end tag រួមទាំង Tags ខ្លួនវាផងដែរ។
HTML & CSSHTML 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 & CSSHTML 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 ដូចនេះ &nbsp;

<html>
<body>
R &nbsp;&nbsp;&nbsp;&nbsp;+ &nbsp;&nbsp;&nbsp;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> នេះសំរាប់ចុះបន្ទាត់

**** សំរាប់ Tag ចុះបន្ទាត់យើងអាចសរសេរបានពីររបៀប គឺ <br> និង <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។

ចំពោះ 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>

Empty HTML Elements វាគឺជា HTML Elements ទាំងឡាយ ណាដែលមិនចាំបាច់មាន Closing Tags។
ឧទាហរណ៍៖   <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)

ចំនាំ កុំភ្លេចបិទ Quotes វិញផង

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

<!DOCTYPE html>
<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 មួយផ្សេងទៀត

Inline Styles កំនត់ពណ៌ Background តាម Element នីមួយៗ

<!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=”” កំនត់កំរាសស៊ុម

សូមមើលឧទាហរណ៍ យើងមានរូបភាពឈ្មោះ my photo.jpg

<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

បង្កើតក្បាលតារាង ដោយប្រើ Tags <th>……</th>

<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 ជាមួយ CSS

<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

HTML Lists List ដែលប្រើច្រើនមាន ២ប្រភេទគឺ ordered និង unordered lists។

Ordered

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Result:

  1. Coffee
  2. Milk

HTML Unordered Lists

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Result:

  • Coffee
  • Milk

HTML Definition Lists

<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
HTML & CSSThis is Heading 2

this 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>

 

 

មេរៀនទី២: សង្ខេប Syntax CSS

មេរៀនទី២: មេរៀនសង្ខេប Syntax  CSS 

មេរៀន១: សញ្ញាមូលដ្ឋាន CSS

បង្រៀនដោយលោកគ្រូ: ទាវ ឈុនណន
ព្រឹទ្ធបរុស មហាវិទ្យាល័យ វិទ្យាសាស្រ្ត និង បច្ចេកវិទ្យា
នៃ សាកលវិទ្យាល័យកម្ពុជា
Tel: 077778647-070778647-0977778647
Yahoo, Skype, google: chhunnan

. CSS ជាអ្វី?
CSS ជាអក្សរកាត់មកពីពាក្យថា Cascading Style Sheets ត្រូវបាន ចាត់ ទុកថា ជាភាសាពិសេស មូយសម្រាប់លោកអ្នកដែល បានធ្វើការ ងារទាក់ទងទៅនឹងការរចនា Website។ ហើយម្យ៉ាងវិញទៀត វាជាអ្នកផ្តល់ភាពងាយស្រួលជាច្រើនក្នុងការគ្រប់គ្រង លើ style (​ដូចជាៈ font, color, size ល។)​ និង layout (ដូចជាៈ background, margin, padding ល។) របស់ web pages ទាំងអស់ ក្នុង ពេលតែមួយ ដែលធ្វើអោយលោកអ្នក ចំណេញពេលវេលាបានយ៉ាងច្រើនក្នុង ការធ្វើ អោយ website មួយឲមានសោភ័ណភាព និង លក្ខណៈ រស់ រវើក។ ជារួម CSS មានន័យថាជា ការបែងចែក តួនាទី ដាច់ ដោយឡែក​នៅក្នុង HTML File មួយរវាង content​​ និង layout របស់ fileនោះ។
សំគាល់ៈ សិក្សា CSS ទាមទារលោកអ្នកត្រូវចេះភាសា HTML ជាមុនសិន។
២.​ កម្មវិធីដែលអាចសរសេរភាសា CSS និង HTML
​          លោកអ្នកអាចសរសេរភាសា CSS និង HTML ចំពោះម៉ាស៊ីន កុំព្យូទ័រដែលប្រើ ប្រព័ន្ធដំណើរការ Window ជាមួយនឹងកម្មវិធីដូចជា៖
– Text Editor
– Word Processor
– WordPad
–  FrontPage
– Dreamweaver
ដោយឡែកចំពោះម៉ាស៊ីនកុំព្យូទ័រដែលតំណើរការដោយប្រព័ន្ធ Macintosh លោកអ្នក អាចប្រើកម្មវិធី ដូចជា៖
​- TeachText
– SimpleText
ប៉ុន្តែជារួមលោកអ្នកនៅតែប្រើប្រាស់ code របស់ CSS និង HTML ដូចគ្នា ហើយបង្ហាញ លទ្ធផល តែ មួយបើទោះបីលោកអ្នកប្រើ ប្រាស់ កម្មវិធីណាមួយដូចដែលបានបង្ហាញខាងលើក៏ដោយ។ គួរគត់ សំគាល់ ផងដែរទៅលើកម្មវីធី Microsoft FrontPage និង Dreamweaver វាជាកម្មវីធី ដែលមាន Interface និង Tools ជាច្រើនមានលក្ខណៈងាយ ស្រួលប្រើប្រាស់សម្រាប លោកអ្នក បង្កើតសរសេរ CSS និង HTML។

២.១​ កម្មវិធី Macromedia Dreamweaver

Dreamweaver ជាកម្មវីធីដែលលោកអ្នកត្រូវតម្លើងបន្ថែមទៅក្នុងប្រព័ន្ធដំណើរ ការ Window នៅលើម៉ាស៊ីនកុំព្យូទ័ររបស់លោកអ្នក។
២.១.១​ ទាញយកកម្មវិធី Macromedia Dreamweaver ពីInternet
​          លោកអ្នកអាចរកកម្មវីធីនេះបាន តាមរយះ Website​​​ (www.google.com.kh) ដោយគ្រាន់តែវាយឃ្លាថា “Download Dreamweaver Torrent” បញ្ចូលទៅកន្លែង ប្រអប់ស្វែងរក​ រួចហើយសូមចុច button ស្វែងរកនោះជា ការស្រេចដូចបង្ហាញ រូបភាព២.១ខាងក្រោម៖
a– បន្ទាប់មកលោកអ្នកត្រូវស្វែងរកប៊ូតុង Download ដែលបាន link ទៅកាន Fileមួយមាន extension (.torrent) ដូចរូបភាព២.១.២​ខាងក្រោម៖

a– បន្ទាប់មកសូមតំណើការកម្មវីធីមួយឈ្មោះថា Torrent ដូចរូបភាព២.១.៣ខាងក្រោម៖

a២.១.២​ តំណើការកម្មវិធី Macromedia Dreamweaver
​    
បន្ទាប់ពី download កម្មវីធី Dreamweaver ចប់សព្វគ្រប់រួចហើយ សូមលោកអ្នក ធ្វើការតំឡើងកម្មវីធីនោះ រួចហើយចូលទៅ បើកកម្មវិធី នោះតាមវិធីដូចរូបភាព ២.១.២ ខាងក្រោម៖
aដើម្បីបង្កើត Fileមួយជា CSS សូមលោកអ្នកចុច​ (Ctrl + N) ដូចបង្ហាញ ក្នុងរូបភាព ៥ ខាងក្រោម៖

a២.២​ កម្មវិធី NotePadរបស់ Window  

កម្មវិធី NotePad ជាកម្មវិធីមួយដែលមានស្រាប់ក្រោយពេលលោក អ្នកបាន តម្លើងប្រព័ន្ធ ដំណើរការ Window នៅលើម៉ាស៊ីនកុំព្យូទ័រ របស់អ្នក។ ហើយលោកអ្នក អាចតំណើរការ កម្មវិធីនេះតាមពីររបៀប៖

របៀបទី១ ដូចក្នុងរូបភាព ៦ខាងក្រោម

aរបៀបទី២ ដូចក្នុងរូបភាព ៧ខាងក្រោម

ចុច Start > All Programs > Accessories > Notepad​ ជាការស្រេច

aតាមរបៀបទាំងពីរខាងលើលោកអ្នកនឹងបានឃើញកម្មវីធី NotePad រូបភាព៨ ដូចខាងក្រោម៖

a៣​ CLASS, SELECTOR, PROPERTY, VALUE របស់ CSS ជាអ្វី? Class របស់ CSS គឺជាពុម្ពគំរូមួយសម្រាប់គ្រប់គ្រងលើ background, margin, padding ហើយនឹង ធ្វើការរចនាទៅលើ style (ដូចជាៈ​font, color, size ជាដើម)​​ នៃ tag ណាមួយរបស់ HTML យ៉ាងងាយស្រួលសំរាប់ លោកអ្នក។ Class របស់ CSS បានផ្ទុក ទៅដោយ selector, property និង​​ value។ Syntax ឬ ទម្រង់​ Class របស់ CSS មាន រូបរាងដូចខាង ក្រោម៖

selector {property:value}

selector ជាទូទៅគឺជា element ឬ tag របស់ HTML ឬមួយជាតំលៃ(value) នៃ attribute របស់ Class ឬក៏ជា​តំលៃ(value) នៃ attribute id ​របស់ tag HTML។
​          property ជាលក្ខណៈរចនាផ្សេងដូចជា font, color និង​ size ជាដើម ហើយត្រូវ បានកំណត់ដោយតំលៃច្បាស់លាស់(Value)។
​          value ជាតំលៃលេខ ឬអក្សរ ឬក៏អក្សរលាយលេខ តែប្រសិន value មានតំលៃ ចូលរួមដោយ space តំម្រូវអោយតំលៃទាំងនោះស្ថិតនៅក្នុង quote (‘ ’) ឬ double quote (“ ”) ជានិច្ច។
កូដ ១.០ បង្ហាញពីរបៀបប្រាស់ syntax របស់ CSS

body {background-color: black;}
body, td, th {color: #333333;}
h1, h2 {color: #000033;}
h3, h4, h5, h6 {color: #006699;}
a{color: #003366;}

៣.១ បញ្ចូល property ច្រើនទៅលើ selector មួយ
លោកអ្នកអាចបញ្ចូល property លើសពីមួយ(ច្រើន) ទៅអោយ selector តែមួយ បានដែរ។ដើម្បីធ្វើដូចនេះបានគឺទាមទារអោយលោកអ្នកត្រូវប្រើ សញ្ញា ; (semicolon) ដើម្បីបញ្ជាក់ពី ការខណ្ឌចែកពី property មួយទៅ property មួយទៀត។

selector {property1:value1; property2:value2;…}

កូដ ១.១ បង្ហាញពីការបញ្ចូល property ច្រើនទៅលើ selector តែមួយ

body {background-color: black; color: #333333;}

 body{
background-color: black;
color: #333333;
}

៣.២ selector ច្រើនអាចទទួលលក្ខណៈរចនាតែមួយ លោកអ្នកអាចធ្វើអោយ selector ច្រើនអាចទទួលលក្ខណៈ រចនាតែមួយបាន។ ប៉ុន្តែសូមលោកអ្នកប្រើនូវសញ្ញា , (comma) ដើម្បី ខណ្ឌចែកពី​ selector មួយទៅ select មួយទៀត។

Selector1, selector2,… {property1:value1; property2:value2;…}

កូដ ១.២ បង្ហាញពី selector ច្រើនទទួលលក្ខណៈរចនាតែមួយ

body, td, th {color: #333333;}
h1, h2 {color: #000033;}
h3, h4, h5, h6 {color: #006699;}

៣.៣ selector ដើរតួជា value នៃ attribute របស់ class
​          តួយ៉ាងដូចជា ឧទាហរណ៏កូដគំរូក្នុងចំនុច​ខាង​លើ គ្រប់ selector ទាំងអស់ វាគឺជា tag របស់ HTML។ ជាការពិត វាមានលក្ខណៈ ខុសគ្នារវាងការប្រើ selector ដែលជា tag របស់ HTML ទៅនឹងការប្រើ selector ដែលជាតំលៃ(value) នៃ attribute class របស់ tag។
​          លក្ខណៈខុសគ្នាត្រង់ថាបើសិនជាលោកអ្នកប្រើ selector ដែលជា tag របស់ HTML នោះមានន័យថា tag នោះដើរតួនាទីជា selector ដោយទទួលឥទ្ធិពលពី CSS គ្រប់ពេល លោកអ្នក បានប្រើវា។ចំណែកការប្រើ select ជាតំលៃ attribute របស់ class គឺវាផ្តល់ លក្ខណៈ ពិសេសមួយ ត្រង់ ថា CSS អាចមានឥទ្ធិពល ទៅលើ tag របស់ HTML បានលុះត្រាតែ tag នោះមានផ្ទុកតំលៃ នៃ attribute របស់ class និងដូចគ្នាទៅនឹង selector​ ផងដែរ។
​          ចំពោះការប្រើ selector ជា value នៃ​ attribute របស់ class មានពីរ syntax ផ្សេងគ្នាដូចខាងក្រោម៖

tag.class-value{property:value;…}

កូដ ១.3 បង្ហាញពី selector ជា value នៃ attribute របស់​ class

p.right{text-align: right}
p.center{text-align: center}

<p class=”right”> This phrase is right alignment. </p>
<p class=”center”> This phrase is center alignment. </p>

Syntax

.class-value{property:value;…}

ណាដែល Class-Value របស់វាដូចគ្នាទៅនឹង class ដែលបានបង្កើតនៅក្នុង CSS។
កូដ ១.៤ បង្ហាញពី selector ជា value នៃ attribute របស់​ class

<p class=”center”> This phrase is center alignment. </p>
<p class=”center”> This phrase is also center alignment. </p>

៣.៤ selector ជា Value នៃ attribute id
ចំពោះការប្រើ selector ជា value នៃ​ attribute id គឺមានលក្ខណៈ ដូចគ្នាទៅនឹង ការប្រើ selector ជា value នៃ​ attribute class ដូចច្នោះដែរ។ ការប្រើប្រាស់វាមានពីរ syntax ដូចខាងក្រោម៖

Syntax

tag#id-value{property:value;…}

ចំពោះ syntax 1​ នេះមានន័យថា​ CSS នឹងមានឥទ្ធិពលទៅលើ tag HTML ណា ដែលមាន tag និង value នៃ attribute id ដូចគ្នាទៅនឹង tag និង id-value ដែលបាន បង្កើតនៅក្នុង CSS។

កូដ១.៥ បង្ហាញពី selector ជា​ value នៃ attribute id

p#sytle{text-align: center; color: blue}

<p id=”style”>Content </p>

Syntax

#id-value{property:value;…}

លោកអ្នកក៏អាចយក id-value របស់ tag HTML ទៅប្រើដោយ ផ្ទាល់នៅក្នុង CSS បានដែរ ដើម្បីកំណត់លក្ខណៈរចនាអោយ tag នោះ។

កូដ១.៦ បង្ហាញពី selector ជា​ value នៃ attribute id

#sytle{text-align: center; color: blue}

<p id=”style”>Content </p>

៣.៥ tag មួយអាចទទួលយក class របស់ CSS ច្រើន
​        tag របស់ HTML មួយក៏អាចទទួលយក class របស់ CSS ច្រើន ផងដែរ ដោយការប្រើ​ attribute class របស់ tag HTML នោះទទួល យកលក្ខណៈរចនា ពី class មួយទៅclass មួយទៀតដោយ ប្រើចន្លោះ ចំហ(space) ដូច syntax ខាងក្រោម៖

Syntax

<tagName class=”selector1 selector2 selector3 …”>

កូដ១.៧ បង្ហាញពី tag មួយអាចទទួលយក class ច្រើន

center{text-align: center}
.green{color: green}
<p class=”center green”> This is multi CSS class.</p>

៤. Comments របស់ សោភ័ណនិច្ច័យ (CSS) Comment គឺជាទូទៅប្រើសម្រាប់សំគាល់ ឬពន្យល់នូវ script/code​ របស់ លោកអ្នក នៅក្នុងអំឡុងពេលនៃការសរសេរ code ហើយវា មិនត្រូវបានបកប្រែដោយ browser ឡើយ។ វាមានសារៈ ប្រយោជន៏ ក្នុង ការ ជួយ សម្រួលលោកអ្នក អោយចងចាំ ឬរំលឹក script/code ដែលលោកអ្នកបានសរសេរកន្លងមក​ រឺដើម្បីកែប្រែនូវ code នោះ ឡើងវិញជាដើម។ syntax comment របស់ CSS ត្រូវសរសេរចាប់ផ្តើមដោយ /* និង បញ្ជប់ដោយ */។

Syntax

/* your comment */

/*
Your comment
*/

កូដ១.៨ បង្ហាញពី comment របស់ CSS

/* Class for body content */
.body_page{
text-align: center;
color: red;
font-family: Time New Roman;
}

<body class=”body_page”>this is body content </body>

មេរៀន 2

ទំនាក់ទំនងរវាង CSS និង HTML / XHTML

ការពិតទៅ CSS និង HTML ជាគូរដែលមិនអាចខ្វះគ្នាបាននៅពេល លោកអ្នកសំរេចចិត្តបង្កើត Website មួយ​។​ ផ្ទុយទៅវិញ ប្រសិនបើ លោកអ្នក មិនប្រើ CSSនោះ លោកអ្នកនឹងជួបការស្មុគស្មាញ នឹងពិបាក គ្រប់គ្រងលើបញ្ហា ពិបាកកំនត់ទំរង់រចនាបទ ទៅតាមការ ចង់បាន (style, Layout) មានជាអាទ៌ style សំដៅដល់ លក្ខណៈអក្សរ កំណត់ ពណ៌ ជាដើម និងLayout សំដៅដល់ margin ទំរង់ page ទីតាំង Object ជាដើមផងដែរ។ នៅក្នុងមេរៀននេះលោកអ្នក នឹង សិក្សាអំពីមូលបទដូចជាៈ
​- ទីតាំងដែលអាចបង្កើត Class របស់ CSS
– របៀបហៅ Class ទៅប្រើនៅក្នុង HTML

. តើសោភ័ណនិច្ច័យ​(CSS)​ត្រូវសរសេរនៅទីតាំងណា?

លោកអ្នកបានដឹងពីសារះប្រយោជន៏ និងរូបមន្តនៃរបៀបបង្កើត Class  នៅក្នុងមេរៀនទី១រួចមកហើយ ប៉ុន្តែមិនទាន់បានដឹង ថាតើលោក អ្នកត្រូវ សរសេរClassនោះ ទៅប្រើនៅទីណាក្នុងHTML​ នៅឡើយ ទេ។ ដូចច្នេះត្រង់ ចំនុចនេះ លោកអ្នកនឹងបានដឹង និងសិក្សាពី ទីតាំង ដែលអាចសរសេរ CSS statement ទាំងនោះ។
១.១ ទីតាំងផ្ទាល់ជាមួយ attribute style របស់ tag (inline style)
លោកអ្នកអាចសរសេរ CSS ដោយផ្ទាល់ជាមួយ tag របស់ HTML បានដោយប្រើ attribute style។ ខាងក្រោមនេះជារូបមន្ត syntax នៃការ សរសេរ CSS ជាមួយនឹង attribute style៖
Syntax

<tagName style=”property1:value1;property2:value2,…”>

កូដ២.១ សរសេរ CSS ជាមួយនឹង attribute style

<p style=”color:red; margin-left:20px;”> this inline style 1 </p>
<p>This is paragraph</p>

កូដ២.១ត្រង់បន្ទាប់ទី១ បានសរសេរថា <p style=”color:black;margin-left:20px”> This inline style</p> មានន័យថា tag <p> នឹងទទួលឥទ្ធិពលពីCSS  ដោយកំនត់អក្សរ មានពណ៌ក្រហម ហើយតំរឹមខាងឆ្វេងស្មើនឹង 20 pixels។​ ដោយឡែកចំណែកបន្ទាត់ ទី២វិញ ដែលបានសរសេរថា <p> This is paragraph</p> គឺមិនបានទទួលឥទ្ធិពល ពី CSS ឡើយ។

សំគាល់ៈ ការសរសេរCSSផ្ទាល់ ដោយប្រើ​ attribute style មិនសូវផ្តល់ គុណសម្បត្តិ និងប្រយោជន៏ដល់លោកអ្នកនៅឡើយទេ ព្រោះថាឥទ្ធិពលរបស់ CSS មានតែម្តង តែចំពោះtag HTML ដែល បានសរសេរតែប៉ុណ្ណោះ ប៉ុន្តែបើសិនជាលោក អ្នកចង់អោយ tag ផ្សេងទៀតទទួលឥទ្ធិពលដូចគ្នា តម្រូវអោយលោកអ្នកសរសេរឡើង វិញទៅអោយ tag នោះ ដូចបង្ហាញឧទាហរណ៏កូដ២.២ខាងក្រោម៖

<p style=”color: red; margin-left: 20px ;”> This is paragraph</p>

Internal Style Sheet មានឥទ្ធិពលគ្រប់ដណ្តបពេញមួយ HTML Document ដែលមានន័យថាគ្រប់ tag របស់ HTML គឺអាចទទួល ឥទ្ធិពលពី Class របស់ CSS ទាំងអស់ដែល បានបង្កើត។ Internal Style Sheet ជាទូទៅត្រូវសរសេរនៅត្រង់ tag <head> របស់​​ HTML​ ហើយត្រូវប្រើ tag​ បើកនិងបិទ ឈ្មោះថា​ <style>internal style sheet statement </style>។​ ទំរង់ Internal Style Sheet មានរូបមន្តដូចខាងក្រោម

Syntax

<HTML>
<Head>
<style type=”text/css”>
Internal Style Sheet Statements…

                        </style>
                </Head>
<Body>
</Body>

</HTML>

ឧទាហរណ៏ លោកអ្នកអាចបង្កើត Page មួយដែលមានឈ្មោះថា​ Internal Style Sheet.html ដោយប្រើនូវ Internal Style Sheet ដើម្បីកំនត់បាននូវលក្ខណៈដូចរូប ភាពខាងក្រោម

ការវិភាគៈ
​          ដូចបានបង្ហាញក្នុងរូបភាព៩ដែលបានកំណត់នូវទំរង់និងទ្រង់ទ្រយ អត្ថបទ នៅក្នុងនោះ រួមមានtag <body>ជាកត្តាចំបង់ ដែលកំណត់ ទំរង់អក្សរជារួមមានឈ្មោះថា Cambria, “Times New Roman”, Arial ។ហើយ tag title<p> សំរាប់កំណត់ពណ៌ និងទំហំជា title នៅក្នុងអត្ថបទ។ ហើយ tag <hr> 1 ជាបន្ទាត់ទី១ tag subtitle <p> សំរាប់កំនត់ពណ៌ និងទំហំជា subtitle នៅក្នុងអត្ថបទ។ ហើយមាន tag content <p> សំរាប់ កំនត់លក្ខណៈ អត្ថបទធម្មតាមានជាពណ៌ ទំហំអក្សរ។ ហើយមាន tag sub-content <p> សំរាប់កំណត់ លក្ខណៈអោយអត្ថបទជា sub-content។​​ និងចុងក្រោយត្រូវបញ្ចប់ដោយបន្ទាប់ទី២ គឺ <hr>2។

ការសរសេរដូដៈ
​       
នៅក្នុងចំនុចសរសេរកូដនេះលោកអ្នកនឹងកាន់តែយល់ច្បាស់អំពីការប្រើប្រាស់ Internal Style Sheet ដែលត្រូវបង្ហាញដូចកូដ២.២ ដូចខាងក្រោម៖

កូដ២.២ របៀបប្រើប្រាស់ Internal Style Sheet
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Inernal Style Sheet</title>

<style type=”text/css”>
<!–
p.title{   font-family: Cambria, “Times New Roman”, Arial;
font-size: 25px;
margin-left:0px;
}
hr{ border:solid; border-color:#FF0000}
.subtitle { font-family: Cambria, “Times New Roman”, Arial;
font-size: 16px;
color:#0000FF
}
.content{ font-family: Cambria, “Times New Roman”, Arial;
font-size: 14px;
margin-left:20px;
}
.subcontent{
font-family:
Cambria, “Times New Roman”, Arial;
font-size: 12px;
}

–></style>


</head>
<body>
<p class=”title”>HOW TO USE INTERNAL STYLE SHEET</p>
<hr />
<p class=”subtitle”>THIS IS INTERNAL STYLE SHEET CLASS.</p>
<p  class=”content”> We use Internal Style Sheet in the same HTML file document but we place it in head tag of HTML document.In the CSS Rule Definition dialog box, select Type, and then set the style attributes you want. <br /><br />Leave any of the following attributes empty if they are not important to the style:
</p>
<p>
<ol class=”subcontent”>
<li>Font sets the font family (or series of families) for the style. Browsers display text in the first font in the series that is installed on the user’s system. For compatibility with Internet Explorer 3.0, list a Windows font first. The font attribute is supported by both browsers.                      </li>
<br />
<li>Size defines the size of the text. You can choose a specific size by selecting the number and the unit of measurement, or you can choose a relative size. Pixels as a unit work well to prevent browsers from distorting your text. The size attribute is supported by both browsers.

</li>
<br />
<li>Style specifies Normal, Italic, or Oblique as the font style. The default setting is Normal. The style attribute is supported by both browsers.
</li>
</ol>
</p>
<hr />
</body>
</html>

បកស្រាយកូដៈ
​       
កូដ២.២ខាងលើលោកអ្នកពិតជាបានឃើញ Class របស់ CSS ទាំងអស់ ចំនួន ៥ ដែលបានបង្កើត ដើម្បីប្រាស់នៅក្នុង ឧទាហរណ៏ ខាងលើនេះ។ ការបង្កើត Class ទាំង នេះ​នៅជាមួយ File HTML តែមួយ គឹត្រូវបានហៅថា Internal Style Sheet។ ប៉ុន្តែលោក អ្នកក៏ បានឃើញផងដែរ លើភាព ខុសគ្នានៃការបង្កើត selector ហើយនឹង ការ ហៅយកវា ទៅប្រើប្រាស់វិញដែរ។

p.title{  font-family: Cambria, “Times New Roman”, Arial; font-size: 25px;margin-left:0px;}

ជា Class មួយមាន selector ឈ្មោះជា​ tag <p> ដែលមានតំលៃ​ attribute class របស់ខ្លួនស្មើនឹង title។ ដូចច្នេះ Class នេះទទួល ឥទ្ធិពលចំពោះតែ tag <p> ណាដែលមាន attribute class ឈ្មោះថា​ title ប៉ុណ្ណោះ។ ចំណែក tag ផ្សេង វិញ គឺមិនទទួលឥទ្ធិពលឡើយ។ class នេះបានកំនត់ ប្រភេទអក្សរជាទំរង់​ Cambria ឬ  Time New Roman ឬ Arial ដែលមានទំហំ ២៥ pixel និងមានគំលាតចេញ ពីព្រំ ដែន ខាងឆ្វេងនៃ Page ប្រមាណ ០pixel។

  • hr{ border:solid; border-color:#FF0000 }
    ​​ជា Class មួយមាន selector ឈ្មោះថា tag <hr> (បន្ទាត់ដេក)។ នៅពេល លោកអ្នកប្រើ tag <hr> វានឹងទទួលឥទ្ធិពលពី Class នេះភ្លាម។ លក្ខណៈរបស់ Class នេះមាន បន្ទាត់ជាទំរង់ solid ហើយនឹងមានពណ៌បន្ទាត់ក្រហម។
  • .subtitle { font-family: Cambria, “Times New Roman”, Arial; font-size: 16px;
    color:#0000FF
    ​​​ }
  • ជា Class មាន selector ឈ្មោះថា subtitle បានកំនត់លក្ខណៈរចនារបស់ខ្លួនមាន ដូចជា ទំរង់អក្សរជា ​ Cambria ឬ  Time New Roman ឬ Arial  ទំហំអក្សរ 16pixel និង ពណ៌អក្សរ ខៀវ។

Internal Style sheet មានលក្ខណៈល្អជាង Inline Style ត្រង់ថា ឥទ្ធិពល របស់អាច គ្របដណ្តប់ ពេញមួយ HTML Document មាន ន័យថាគ្រប់ Tag របស់ HTML គឺអាច ទទួលឥទ្ធិពលពី Class របស់ CSS ទាំងអស់ដែលលោកអ្នកបានបង្កើត។

១.៣​​ នៅក្រៅទីតាំង ឬ External Style Sheet
​          ការធ្វើ website លោកនឹងត្រូវការ code របស់ CSS ជាច្រើនដើម្បី ប្រើប្រាស់ កំនត់នូវទំរង់ រចនាបទ ដែលលោកអ្នកចង់បានមានដូចជា style(font, color, size, …) ឬ Layout( background, margin, padding ,…)។ លោកអ្នកគួរតែជ្រើសរើសវិធីសាស្រ្ត គ្រប់គ្រងលើ Code របស់ CSS អោយបានល្អ និងមានប្រសិទ្ធភាព ដើម្បីជាសវាងនូវ​ ការសរសេរកូដជ្រាំដែល ខាត់ពេលវេលា និង File អាចមានទំហំធំ ដែលធ្វើអោយ ល្បឿនតំណើរការអាចកាត់ បន្ថយផងដែរ។ ដូចច្នេះ External Style Sheet គឺវីធី សាស្រ្តមួយសម្រាប់ជា ដំណោះស្រាយ ដ៏ល្អសម្រាប់លោកអ្នក។ External Style Sheet គឺជាការបង្កើត File មួយដាច់ដោយឡែកសម្រាប់ផ្ទុកតែ Class របស់ CSS តែប៉ុណ្ណោះ ហើយគ្រប់ HTML File អាចប្រើ Class ទាំងនោះដោយគ្រាន់តែហៅ File (External Style Sheet) យកមក Import តាមរយះtag ឈ្មោះ <link> ដែលលោកអ្នកនឹងយល់​នៅ ចំនុចបន្ទាប់នេះ។

១.៤ របៀបបង្កើត File ជា External Style Sheet ឬ CSS file
ដើម្បីបង្កើត File ជា External Style Sheet ឬ ហៅថា file CSS បានលោកអ្នក អាចប្រើកម្មវិធី Dreamweaver រឺកម្មវិធីផ្សេងទៀតដែល លោកអ្នកអាចសរសេរ Code ឬ Script របស់ HTML បានហើយត្រូវ រក្សា ទុកឬ Save ដោយកំនត់កន្ទុយ(Extension) File នោះមានទំរង់ .CSS។ ម៉្យាងវិញទៀតការបង្កើត CSS File មិនតំរូវអោយលោក ប្រើប្រាស់​និងផ្ទុក tag  របស់ HTML ទេ។ ខាងក្រោមនេះជាឧទាហរណ៏នៃការបង្កើត Class របស់ CSS ជាលក្ខណៈ External Style Sheet ដោយប្រើប្រាស់កម្មវិធី Dreamweaver ដោយ Save និងដាក់ឈ្មោះថា class.css។
​សូមដំណើរការកម្មវីធី Dreamweaver រួចចុច File > New… ដូចបានបង្ហាញរូបភាព១០ ដូចខាងក្រោម៖

aកូដ២.៣ Class ជាលក្ខណៈ External Style Sheet

a១.៥ ហៅ CSS file មកប្រើនៅក្នុង HTML / XHTML នៅត្រង់ចំនុចនេះលោកអ្នកនឹង យល់ពីរបៀបហៅ  CSS file មកប្រើ នៅ ក្នុង HTML file បន្ទាប់ពីលោកអ្នកបានបង្កើត Class របស់ CSS មានលក្ខណៈជា External Style Sheet ដូចនៅចំនុច ១.៥។ ជាទូទៅ ទីតាំងបញ្ចូល(Import) External Sheet Sheet ឬ CSS file ត្រូវ សរសេរ នៅក្នុងប្លុក tag <head> External Sheet Sheet </head> ហើយដោយប្រើ tag ឈ្មោះថា <link> ដូចនឹងបង្ហាញរូបមន្តខាងក្រោម៖

Syntax

<link rel=”stylesheet”  type=”text/css”  href=”[url/]filename.css” >

href : ជា attribute សម្រាប់តំរូវអោយលោកអ្នកបញ្ជាក់ពីទីតាំង(path) របស់ CSS file ឬ External Style Sheet របស់លោកអ្នក។
ឧទាហរណ៏ខាងក្រោមនេះនឹងបង្ហាញលោកអ្នកកាន់តែយល់ច្បាស់ពីការបញ្ចូល CSS file ទៅក្នុង HTML file ( index.html ) ដោយសន្មត់ថា៖

  • File ទាំងពីរស្ថិតនៅទីតាំង ជាមួយគ្នាដូចរូបភាព ១១ ខាងក្រោម
  • a

កូដ២.៤ CSS file (class.css)

aកូដ២.៥ HTML file (index.html)

aFile ទាំងពីរស្ថិតនៅទីតាំង ផ្សេងគ្នាដូចរូបភាព ១២​ ខាងក្រោម

aរូបភាព១២ បង្ហាញពីFile: index.html, class.css ស្ថិតនៅទីតាំងខុសគ្នា

ប្រសិនបើទីតាំងរបស់ File ទាំងពីរស្ថិតនៅទីតាំងផ្សេងគ្នាលោកអ្នកត្រូវ

ប្រែប្រួលលើទីតាំងត្រង់ attribute href  របស់ tag <link> ដូចកូដ២.៦​ខាងក្រោម

កូដ២.៦ HTML file (index.html)

a

មេរៀន៣

 គ្រប់គ្រងលើអត្ថបទ (Text property)

នៅក្នុងមេរៀនទី៣នេះលោកអ្នកនឹងបានសិក្សារបៀបប្រើប្រាស់ property ជាច្រើនរបស់ CSS ដែលគ្រប់គ្រងចំពោះអត្ថបទ( Text ) នៅក្នុង website របស់លោក អ្នក។ property ដែលនឹងលើក យកមកបកស្រាយមានដូចជា៖
១. text-align
២. text-decoration
៣. text-transform
៤. text-indent
៥. word-spacing
៦. letter-spacing
៧. Line-height
៨. Direction
១. text-align
ដើម្បីតំរឹមអត្ថបទ(text)នៅក្នុង web page របស់លោកអ្នក ទៅតាម ទំរង់រចនា​ តាមឆ្វេង តាមស្តាំ កណ្តាល ឬតាមឆ្វេង និងស្តាំ(ទាំង សង ខាង) CSS បានផ្តល់ប្រើ property មួយឈ្មោះថា text-align ដែល មាន តំលៃ(value) ដូចជា៖
​          ១- left : សម្រាប់តំរឹមខាងឆ្វេង

២- right: សម្រាប់តំរឹមខាងស្តាំ
​          ៣- center: សម្រាប់តំរឹមកណ្តាល

​៤- justify : សម្រាប់តំរឹមទាំងសងខាង(ទាំងឆ្វេងនិងស្តាំ)

Syntax

Selector {text-align: value ;}

លោកអ្នកនឹងអាចយល់ពីការប្រើប្រាស់ text-align ដូចបង្ហាញ តាម ឧទាហរណ៏កូដ ២.៧ ដូចរូបភាពខាងក្រោម៖

aកូដ២.៧ បង្ហាញពីការប្រើប្រាស់ text-align ដើម្បីរចនាអោយអត្ថបទ

a២. text-decoration
​        ការប្រើប្រាស់ text-decoration គឺមានលក្ខណៈដាក់បន្ទាត់ អោយ អត្ថបទលោកអ្នក​ ដូចជាដាក់បន្ទាត់ខាងលើ ឆូតកណ្តាល​ និង ខាង ក្រោម។ វាមានតំលៃ(value) ៤​ ដូចខាងក្រោម៖

១- olverline: សម្រាប់ដាក់បន្ទាត់ខាងលើ
​            ២- line-through: សម្រាប់ដាក់បន្ទាត់ឆូតកណ្តាល
​            ៣- underline: សម្រាប់ដាក់បន្ទាត់ខាងក្រោម
​            ៤- blink: សម្រាប់ធ្វើអោយអក្សរឃើញបាត់ៗ

៥- inherit:សម្រាប់ធ្វើអោយអក្សរមានលក្ខណៈដូច​ទៅ​ tag​មេ(parent element)
៦- none: មិនកំណត់លក្ខណៈអោយអក្សរ
*សំគាល់: blink មិនតំណើរជាមួយ IE, Chrome, Safari។

 Syntax

Selector {text-textdecoration: value ;}

ដើម្បីអោយលោកអ្នកកាន់តែយល់ច្បាស់ ឧទាហរណកូដ២.៨ និងបង្ហាញពីការប្រើ ប្រាស់ “text-decoration” ដូចរូបភាពខាងក្រោម៖

aកូដ២.៨ បង្ហាញពីការប្រើប្រាស់ text-decoration ដើម្បីរចនាអោយអត្ថបទ

a៣. text-transform

​        សម្រាប់កំណត់អោយអក្សររបស់អត្ថបទមានលក្ខណៈ អក្សរធំទាំង អស់(upper) អក្សរតូច ទាំងអស់(lower) ឬ ធំលើតួអក្សរដើមតំបូង (capitalize) ដោយអាស្រ័យទៅលើ តំលៃ(vaue) របស់វាដូច ខាងក្រោម៖

​១.uppercase សម្រាប់ធ្វើអោយតួអក្សរធំទាំងអស់
២.lowercase សម្រាប់ធ្វើអោយតួអក្សរតូចទាំងអស់
​៣.capitilize សម្រាប់ធ្វើអោយតួអក្សរតំបូងរបស់ពាក្យទៅជាអក្សរធំ
៤.inherit : ទាញយកលក្ខណៈដូចទៅនឹងលក្ខណៈរបស់ tagមេ(parent element)
៥.none: មិនមានឥទ្ធិពល

Syntax

Selector {text-transform: value ;}

ដើម្បីយល់កាន់តែច្បាស់ កូត២.៩ខាងក្រោមនេះជាឧទាហរណ៏ពីការប្រើប្រាស text-tranform៖

aកូដ២.៩បង្ហាញពីការប្រើប្រាស់ text-transform ដើម្បីរចនាអោយអត្ថបទ

aរូបភាព១៤បង្ហាញពី លទ្ធផលនៃកូដ ២.៩ ខាងលើ

text-indent សម្រាប់កំនត់ប្រវែងនៃការដកឃ្លាដើមបន្ទាត់នៃអត្ថបទ។ តំលៃ(value) អាចគិតតាមប្រភេទរង្វាស់ខ្នាតដូចជាៈ​px, pt, em, cm, % ។

សំគាល់:  1cm= 37.79px, 28.34pt, 2.37em។

Syntax

Selector {text-indent: value ;}

កូត៣.០ខាងក្រោមនេះបង្ហាញពីការប្រើ text-indent ដែលសរសេរនៅក្នុង HTML file ឈ្មោះថា​ “text-indet.html”។

aកូដ៣.០បង្ហាញពីការប្រើប្រាស់ text-indent ដើម្បីកំណត់ដកឃ្លាបន្ទាត់

aរូបភាព១៥បង្ហាញពី លទ្ធផលនៃកូដ ៣.០

៥. word-spacing សម្រាប់កំណត់គំលាតពីពាក្យមួយទៅពាក្យមួយទៀតនៅក្នុងអត្ថបទទៅតាម ប្រវែងនៃតំលៃ(value)របស់វា ដោយអាចកំនត់តាមប្រភេទរង្វាស់ខ្នាតដូចជា px, pt, em, cm, %។
​            សំគាល់:  1cm= 37.79px, 28.34pt, 2.37em។

Syntax

Selector {word-spacing: value ;}
ឧទាហរណ៏ថាលោកអ្នកមានឃ្លាមួយថា “Studying is never old for years.” ដោយកំណត់ ការដក់ឃ្លាមានប្រវែងដូចខាងក្រោម៖
​            ក) តំលៃ (value) ស្មើ 10px;
ខ) តំលៃ (value) ស្មើ -10px;
យោងតាមលក្ខ័ណទាំងពីរលោកអ្នកអាចសរសេរកូដ៣.១ដូចរូបភាពខាងក្រោម៖
aកូដ៣.១បង្ហាញពីការប្រើប្រាស់ word-spacing ដើម្បីកំណត់ដកឃ្លាពាក្យ និងពាក្យ

a៦.letter-spacing
​          letter-spacing ប្រើសម្រាប់កំណត់គំលាតអក្សរមួយទៅអក្សរមួយតាមតំលៃ​(value) របស់វា​ដោយមានប្រភេទរង្វាស់ខ្នាតដូចជាៈ px, pt, em, cm, %។

សំគាល់:  1cm= 37.79px, 28.34pt, 2.37em។

កូដ៣.២បង្ហាញពីការប្រើប្រាស់ letter-spacing ដើម្បីកំណត់ដកឃ្លាពីអក្សរ និងអក្សរ

Syntax

Selector {letter-spacing: value ;}

ដើម្បីងាយស្រួលយល់ពីការប្រើប្រាស់ letter-spacing លោកអ្នក អាចពិនិត្យលើកូត ៣.២ ដូចខាងក្រោម៖

a

កូដ៣.២បង្ហាញពីការប្រើប្រាស់ letter-spacing ដើម្បីកំណត់ ដកឃ្លា ពីអក្សរ និងអក្សរ

aរូបភាព១៧ បង្ហាញពី លទ្ធផលនៃកូដ ៣.២

៧. Line-height

Line Height  ប្រើសម្រាប់កំណត់គំលាត់ចន្លោះពីចុះបន្ទាត់មួយទៅចុះបន្ទាត់មួយ ទៀតរបស់អត្ថបទ ដែលតំលៃ(value) របស់វាគិតជាចំនួនបន្ទាត់ ឬជាតំលៃដែលមាន ខ្នាតដូចជា px,pt,em, % ជាដើម។

Syntax

Selector {line-height: value ;}

ដ៣.៣ខាងក្រោមបានបង្ហាញពីការប្រើ line-height property ដែលមាន class ពីរគឺ Class ទីមួយឈ្មោះ​ .line បានកំណត់គំលាត់ ចុះបន្ទាត់ទៅមួយចំនួន៣ដង ហើយ class ទីពីរ ឈ្មោះថា​ customsize. ដោយកំណត់គំលាត់ការចុះបន្ទាត់មួយទៅមួយជា px មានតំលៃ​​25px។

aកូដ៣.៣បង្ហាញពីការប្រើប្រាស់ line-height ដើម្បីកំណត់គំលាតចុះបន្ទាត់

aរូបភាព១៨ បង្ហាញពី លទ្ធផលនៃកូដ ៣.៣

Direction ប្រើសម្រាប់កំណត់ទីតាំងសរសេរអត្ថបទដោយចេញពីខាងឆ្វេង ឬស្តាំ វាមានតំលៃពីរដូចជា៖

១.​ltr សរសេរអត្ថបទចេញពីឆ្វេង
២.rtl សរសេរអត្ថបទចេញពីស្តាំ

Syntax

Selector {direction: value ;}

កូដ៣.៤ខាងក្រោមបានបង្ហាញពីការប្រើ direction ដែលមាន class ចំនួនពីរ​គឺ .ltr, .rtl។

aa

មេរៀនទី៣: កូដស្ទាយ CSS3

មេរៀនទី៣: កូដស្ទាយ CSS3  

Style CSS មកជម្រាបជូន ដោយសារ​តែ​ការបង្កើត​គេហទំព័រ ទាម ទារជាចាំបាច់នូវ CSS ដើម្បីបន្ថែម និងលើករូបរាង ព្រម ទាំង ទាក់ទាញ​អ្នកទស្សនា ឲ្យចង់មើល ឬចង់បានគំរូតាម ជាដើម ។ ធ្វើការលើកយក​ CSS3 មកធ្វើការបង្ហាញជូន ដែលអាចមាននាទីជំនួស JQuery បាន ដូចខាងក្រោម៖
១. ការដាក់ស្រមោលលើប្រអប់ (Box Shadow)
div.shadow {
width: 300px;
margin: 20px;
border: 1px solid #ccc;
padding: 10px;
}

div.shadow:hover {
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
box-shadow: 0 0 5px rgba(0,0,0,0.5);

២.ការកំណត់ភាពច្បាស់ (Opacity)
img.opacity {
opacity: 0.5;
filter: alpha(opacity=50);
}

img.opacity:hover {
opacity: 1;
filter: alpha(opacity=100);
ហើយប្រសិនបើ​លោកអ្នក ចង់ឲ្យវាធ្វើការ Smooth ល្អនោះ សូមវាយកូដ CSS ដូចក្រោម
    img.opacity {
opacity: 0.5;
filter: alpha(opacity=50);
-webkit-transition: opacity 1s linear;
}

img.opacity:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 1s linear;

 

មេរៀនទី៤: Menu HTML ជាមួយ CSS

មេរៀនទី៤: បង្កើត Menu នៅក្នុង HTML ជាមួយ CSS  

ការបង្កើត Menu ដោយប្រើ HTML + CSS មកបង្ហាញ មិត្តអ្នក អានដូចខាងក្រោម។ របៀបសរសេកូដក្នុង HTML ដំបូងយើងត្រូវបង្កើត Menu ជា Link រួមជាមួយនិង List ជាមុនសិន 11ផ្នែក CSS យើងត្រូវបង្កើត File CSS មួយទៀតនៅក្នុង Folder CSS ដោយដាក់ឈ្មោះថា menu.css ។
* ដោយសារ Menu របស់យើងចែកចេញជា បី ថ្នាក់គឺ

– Main Menu
– Submenu
– Sun-in-sub
ដំណាក់កាលទី១:
-ចំណាំ យើងត្រូវកំណត់ Main Menu ជាមុនសិន ដូច្នេះការសេសកូដ HTML ក៏សូមត្រឹមតែសរសេ Main Menu សិនបានហើយ

ចាប់ផ្តើមសរសេកូដ

// កំណត់ប្រវែងកម្ពស់ និងបណ្តោយ រួមទាំងពណ៌ផ្ទៃរបស់ Menu
1// កំណត់ពណ៌ឲ្យ Text របស់ Menu

.menu a{color:MenuText;}
// កំណត់ឲ្យ ul & li គ្មាន Margin & Padding
1// កំណត់ឲ្យរាល់ Link ទាំងអស់របស់ A គ្មានបន្ទាត់
ul li a{text-decoration:none;}

// កំណត់រាល់ ul នៅក្នុង Menu ត្រូវមានBackground ពណ៌ទឹកក្រូច និងបង្ហាញជាលក្ខណៈ Block
1// កំណត់ឲ្យរាល់ List ទាំងអស់ត្រូវ ប្តូរមករៀបជាជួរវិញ
1លទ្ធផល
1Step 2:
-ចំណាំ : ​បន្ទាប់មកយើងធ្វើ Submenu ដូច្នេះសូមសរសេកូដ Submenu ចូល HTML មុននិង Apply CSS

Start Code:
// ពេល Hover លើ Menu ដែលជា Main Menu ឪ្យចេញ Sub Menu
1// Apply Style ឲ្យ Sub Menu
1លទ្ធផល:
1Step 3:
-ចំណាំ : ​បន្ទាប់មកយើងធ្វើ SUB in SUB menu ដូច្នេះសូមសរសេកូដ SUB in SUB menu ចូល HTML មុននិង Apply CSS

Start Code: កំណត់ឲ្យ Sub in Sub ចេញពេលយក Mouse ដាក់លើ Submenu
1លទ្ធផល
1

 

មេរៀនទី៥: Flip box ជាមួយ CSS

មេរៀនទី៥: បង្កើត Flip box ជាមួយនិង CSS

តើអ្នកទាំងអស់គ្នាធ្លាប់បង្កើត Flipbox ដែរឬទេ?តាមការសិក្សា សិស្សនិស្សិត និងអ្នករចនាគេហទំព័រ មួយចំនួនបានដឹងថាការបង្កើត Flip page ឬ Flipbox យើងអាចបង្កើតដោយសរសេវាជាមួយភាសា JavaScript ឬ CSS។ ខាងក្រោមនេះជាជំហាន និងឧទាហរណ៍សាមញ្ញមួយ នៃការបង្កើត :
ជំហានទីមួយ : យើងត្រូវបង្កើត Div ដែលមាន ID ឈ្មោះ Box នៅក្នុង <Body> tag
<body>
<div id=”box”> Testing
</div>
</body>
ជំហានទីពីរ : Apply CSS ទៅឲ្យ ID របស់ Div ដែលមានឈ្មោះ box
#box
{
background-color: #FFFFFF;  //ដាក់ពណ៌ឲ្យផ្ទៃប្រអប់
border: 1px solid #CCCCCC; // ដាក់ស៊ុំឲ្យប្រអប់
cursor: pointer; // ផ្លាស់ប្តូរទម្រង់ Cursor
height: 200px; // កំណត់ប្រវែងប្រអប់
width: 200px;// កំណត់ប្រវែងបណ្តយប្រអប់
​​​​ }

ជំហានទី៣: បង្កើត Event  mouse hover (ពេលជ្រលរ)លើDiv  ដែលមាន ID ឈ្មោះ box
#box:hover
{
border-bottom-left-radius:50% 30px;//ធ្វើឲ្យប្រអប់បត់ផ្នែកខាង       ឆ្វេងនៃផ្នែកខាងក្រោម។
box-shadow:-5px 10px 15px rgba(0, 0, 0, 0.25); //ដាក់
ស្រមោលឲ្យ Box
}
————–
<html>
<head>
<title>Flip page </title>
<style>
body{background-color:#F4F4F4;}
#box{background-color: #FFFFFF;
border: 1px solid #CCCCCC;
cursor: pointer;
height: 200px;
width: 200px;}
#box:hover{border-bottom-left-radius:50% 30px;
box-shadow:-5px 10px 15px rgba(0, 0, 0, 0.25);
}
</style>
</head>
<body>
<div id=”box”>s
</div>
</body>
1———————————————————————–
មជ្ឈមណ្ឌល អាយធី ខេប៊ូ-IT CAMBO
បង្កើតកម្មវិធីសម្រាប់ក្រុមហ៊ុន អង្កការ ក្នុងតម្លៃសមរម្យ:

–     រចនាវ៉ិបសាយ & Hosting គ្រប់គ្រងក្រុមហ៊ុន…
–     បង្កើតកម្មវិធីគ្រប់គ្រងទិន្នន័យ គ្រប់គ្រងស្តុក លក់ទំនិញ
–     ដំឡើងប្រព័ន្ធ ណែតវឺក Networking និងសេវាជួសជុលកុំព្យូទ័រ
www.itcambo.com

កម្មវិធីសិក្សាបើកវគ្គខ្លី(សិស្សចាប់ពី ១០ឡើងទៅ)
–  វគ្គរចនាវ៉ិបសាយ HTML,CSS, Javascript, PHP, ASP.NET
–  វគ្គដំឡើងកុំព្យូទ័រណែតវឺក Networking
–   វគ្គជួសជុលកុំព្យូទ័រ Computer Repairing
–   វគ្គសរសេរកម្មវិធីលើ iOS (កម្មវិធី iPhone, iPAD)
ទំនាក់ទំ​នង 0977778647-077778647-070778647
Email: chhunnan@gmail.com
Chat: yahoo, skype: chhunnan
www.itcambo.com
ITCAMBO-NEW

មេរៀនទី៦: Style លើ Button រូបភាព

មេរៀនទី៦: ដាក់ Style លើ Button មានរូបភាពក្នុង CSS 

បង្កើត Form មិនមែនជារឿងពិបាកនោះឡើយ ប៉ុន្តែដើម្បីឲ្យ Form នោះមានភាព​ទាក់ទាញ លោកអ្នក​ចាំបាច់​ត្រូវ​បន្ថែម Style ទៅលើវា​ ។ កាលពីអត្ថបទ​មុនៗ សំបុកអាយធី បានលើកពីការប្រើប្រាស់ Style នានារួចហើយ ។
ជំហានទី១ សូមបង្កើត File HTML ជាលក្ខណៈ Form

<form action=””>
<label for=”name”>Name: </label> <input type=”text” id=”name” />
<label for=”password”>Password: </label> <input type=”password” id=”password” />
<label>&nbsp; </label> <input type=”submit” value=”Submit” /> <input type=”submit” value=”Cancel” />
</form>

a

 

រួចបន្ថែម Style ដោយភ្ជាប់រូបភាព សម្រាប់ដាក់លើប៊ូតុង នៅពេល MouseOver

CSS
input {
border: 1px solid #006;
background: #ffc;
}
.input:hover {
border: 1px solid #f00;
background: #ff6;
}
button {
border: none;
background: url(‘/forms/up.png’) no-repeat top left;
padding: 2px 8px;
}
.button:hover {
border: none;
background: url(‘/forms/down.png’) no-repeat top left;
padding: 2px 8px;
}
label {
display: block;
width: 150px;
float: left;
margin: 2px 4px 6px 4px;
text-align: right;
}
br { clear: left; }

មេរៀនទី៧: អត្ថបទកណ្តាលប្រើ CSS

មេរៀនទី៧: ដាក់អត្ថបទចំកណ្តាល​ប្រើកូដ CSS 

លោកអ្នកអាចកំណត់អក្សរឲ្យចំកណ្តាល (ប្រអប់) ដូចរូបខាងក្រោម៖
adiv.container {
width: 100px;
height: 100px;
background: #666;
color: #fff;
text-align: center;
line-height: 100px; /* where the magic happens */
}
ដាក់អក្សរឲ្យចំកណ្តាល​ប្រអប់នេះ បានលោកអ្នកគ្រាន់តែបន្ថែម៖នោះលោកអ្នក​នឹងទទួលបានដូចរូបខាងក្រោម ដោយគ្រាន់តែកំណត់ Value នៃ Property “line-height” ឲ្យដូចនឹង value នៃ Property “height” គឺជាការស្រេច។
a

មេរៀនទី៨: កែរូបភាពឲ្យកោងមូល

មេរៀនទី៨: កែរូបភាពឲ្យកោងមូល ជាមួយ CSS3  

កំណែប្រែចុងក្រោយមួយនៃ Cascading Style Sheets (CSS) ដែលមានបន្ថែមនូវ Properties ថ្មីៗ និងកាន់តែមានតួនាទីពិសេសៗ ជាកំណែប្រែមុនៗ ដូចជា CSS2 ជាដើម។
aការប្រើប្រាស់៖
<strong>Selector {property: value;}</strong>
ឧទាហរណ៍៖ <strong>boxStyle{border-radius: 5px;}</strong>
ចង់ធ្វើការកំណត់ទៅលើ Object ឲ្យមើលប៉ែកខាងលើ និងជ្រុងនៅប៉ែកខាងក្រោម លោកអ្នកអាចប្រើ៖
boxStyle

{

border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-right-radius:0;
border-bottom-left-radius:0;

}
អាច៖

boxStyle

{

border-radius: 5px 5px 0 0;

}

មេរៀនទី៩: បង្កើត Background វ៉ិបសាយ

មេរៀនទី៩: ងាយ​បង្កើត Background វ៉ិបសាយ 

ងាយ​ស្រួល​ទេ​បង្កើត Background Slideshow ក្នុង​វែបសាយ​
​គន្លឹះ​ទាក់​ទង​នឹង​ការ​អភិវឌ្ឍន៍​​គេហទំព័រ ដើម្បី​ឲ្យ​មើល​ទៅ​ឃើញ​ស្រស់​ស្អាត និង​ទាក់ទាញ
1
អត្ថបទ​ដំបូង​របស់​ខ្ញុំ​នេះ​ គឺ​ វិធី​បង្កើត​ Background Slideshow ក្នុង​វែបសាយ​​​​​ ដោយ​ប្រើ Backstretch jQuery Plugin ដែល​អាច​ដំណើរការ​បាន​ផង​ដែរ​​លើ​ទូរស័ព្ទ​ ហើយ​​ខ្ញុំ​​ក៏​បាន​​ប្រើ​វា​​​នៅ​ក្នុង​វែបសាយ Saramoni.com

មើល​ឧទាហរណ៍ក្នុង វែបសាយ​របស់​ខ្ញុំ ឬទាញ​យក​ទីនេះ Source Code

HTML

<!doctype html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Background Slideshow with Backstretch</title>
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
   <div class="box">
     <div class="box-content">
       Text here...
     </div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/jquery.backstretch.min.js"></script>
    <script>
      $(function() {
       $.backstretch([
        "img/slide_01.jpg",
        "img/slide_02.jpg",
        "img/slide_03.jpg",
        "img/slide_04.jpg"
       ], {
       fade: 750,
       duration: 4000
      });
    });
   </script>
</body>
</html>

STYLESHEET

.box {
	width: 940px;
	background: rgba(0, 0, 0, .9);
	margin: 50px auto;
	border-radius: 10px;
}
.box-content {
	padding: 20px;
}
.box h1,
.box p {
	color: #fff;
}

@media (max-width: 950px) { 
	body {
		padding: 15px;
	}
	.box {
		width: 100%;
		margin: 0;
		padding: 0;
	}
}

ក្នុងកូដ CSS នេះ​គឺ​ធម្មតាទេ តែ​ខ្ញុំ​បាន​បន្ថែម​ទួនាទី Responsive (@media query) បន្តិច​ដើម្បី​អោយ​វា​ដំណើរការ​ជាមួយ Smart Phone។

JAVSASCRIP

 <script>
      $(function() {
       $.backstretch([
        "img/slide_01.jpg",
        "img/slide_02.jpg",
        "img/slide_03.jpg",
        "img/slide_04.jpg"
       ], {
       fade: 750,
       duration: 4000
      });
    });
   </script>

ចំនុច ក ខ្ញុំ​បាន​ដា់កូដ​ខាង​លើននេះ​ហើយ ដែល​វា​អាច​ដំណើរការ​បានដោយ​ពឹ​ផ្អែកលើ jQuery libraries និង Backstretch jQuery Plugin។

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>

$.backstretch([…]) កូដ​នេះ​មាន​នាទី​ហៅ​ Plugin Backstretch ក្នុង​នោះ​ខ្ញុំ​បាន​ប្រើ​រូប​ភាព​ចំនួន​៤ ដើម្បី​អោយ​ធ្វើ​ Slideshow នៅ​ក្នុងមាន​ Properties ២ ដែល​ខ្ញុំ​បាន​ប្រើ គឹ ៖

  • fade: 750 មាន​ន័យ​ថា​​វានឹង​ធ្វើ effect រយៈពេល ៧៥០ms
  • duration: 4000 មានន័យ​ថា​វា​នឹង​ប្ដូរ​រូបភាព​ក្នុងរយៈពេល 4s

 

 

 

មេរៀនទី១០: ប្រើ Div បង្កើត Box

មេរៀនទី១០: ប្រើប្រាស់ Div និងការបង្កើត Box ជាមួយ CSS 

១- តើ Div គឺជាអ្វី? Div គឺជា Element សម្ខាន់ណាស់ក្នុង ពេលបច្ចុប្បន្នសម្រាប់ការរចនា និងរៀបចំ ទម្រង់នៃ​​គេហទំព័រ​។ គេប្រើប្រាស់វាសម្រាប់បែងចែកប្លុកនៃកូដ និង Layout ឬ ប្លុកនៃការបង្ហាញ ហើយ​រាល់​ការ​រៀប​ចំ​រចនា Lay Out និង Position Layout គឺអាស្រ័យទៅលើ Div។
<div class= “logo” > <img src=“images/mylogo.png”> </div>
<div class= “header-title”> <h1> Introduction </h1> </div>

ការប្រើប្រាស់ Div គឺដូចជាការបង្កើតប្រអប់ដើម្បីផ្ទុកកូដ និង ប្លុកនៃការបង្ហាញអញ្ចឹងដែរ។ ហើយObject នៃការបង្ហាញមួយគឺគេប្រើ Div មួយដើម្បីគ្រប់គ្រង ទីតាំង និង Style របស់ Object នោះ។ សូមមើល រូបភាពខាងក្រោម ដែលខ្សែរក្រហមនេះគឺគេប្រើ Div សម្រាប់រៀបចំ Layout
1តែយើង និងមិនឃើញដោយភ្នែកផ្ទាល់ទេ គឺយើងត្រូវប្រើ Web development tool bar ដើម្បីមើល Div ដែលគេបាន បង្កើតលើគេហទំព័រនីមួយៗបាន។
២- Box model របស់ Div ក្រោយពីយើងដឹងថា Div គឺជា Box ឬ ប្លុកមួយសម្រាប់បែងចែកកូដ ដែលជាទិន្នន័យដែល​បង្ហាញ។ យើងត្រូវសិក្សារពីការប្រើប្រាស់ Box Model របស់ Div ថែមទៀត
1នៅក្នុង Div វាមាន Object ជាច្រើនៅក្នុងនោះ តែយើងមិន អាចមើលឃើញដោយគ្មានកម្មវិធី ជំនួយ។ យ៉ាងណាម៉េញ ខាងលើនេះ គឺជា Box Model របស់ Div ដែលមាន Position របស់ Properties : Margin, Border និង Padding ចំពោះ Content គឺជាផ្នែកដែលត្រូវបង្ហាញទិន្នន័យ។
–  Margin គឺជាស្រទាប់ក្រៅបង្អស់របស់ Div វាគ្មាន Background-color ហើយលក្ខណៈពិសេសរបស់វាគឺ Value Properties អាចអវិជ្ជមានបាន។
–   Border គឺជាស្រទាប់បន្ទាប់ពី Margin ប្រើសម្រាប់ដាក់ Border ឲ្យ Div
–   Padding គឺជាគម្លាតរវាង Border និង Content ដែលជាផ្នែកបង្ហាញទិន្នន័យ Content គឺជាផ្នែកបង្ហាញ ទិន្នន័យ។
លំហាត់ និង កំណាត់កូដខ្លះៗ ក្នុងការរៀនបង្កើត Box
1—————————————————————–
មជ្ឈមណ្ឌល អាយធី ខេប៊ូ-IT CAMBO

បង្កើតកម្មវិធីសម្រាប់ក្រុមហ៊ុន អង្កការ ក្នុងតម្លៃសមរម្យ:

–     រចនាវ៉ិបសាយ & Hosting គ្រប់គ្រងក្រុមហ៊ុន…
–     បង្កើតកម្មវិធីគ្រប់គ្រងទិន្នន័យ គ្រប់គ្រងស្តុក លក់ទំនិញ
–     ដំឡើងប្រព័ន្ធ ណែតវឺក Networking និងសេវាជួសជុលកុំព្យូទ័រ
www.itcambo.com

កម្មវិធីសិក្សាបើកវគ្គខ្លី(សិស្សចាប់ពី ១០ឡើងទៅ)
–  វគ្គរចនាវ៉ិបសាយ HTML,CSS, Javascript, PHP, ASP.NET
–  វគ្គដំឡើងកុំព្យូទ័រណែតវឺក Networking
–   វគ្គជួសជុលកុំព្យូទ័រ Computer Repairing
–   វគ្គសរសេរកម្មវិធីលើ iOS (កម្មវិធី iPhone, iPAD)
ទំនាក់ទំ​នង 0977778647-077778647-070778647
Email: chhunnan@gmail.com
Chat: yahoo, skype: chhunnan
www.itcambo.com
ITCAMBO-NEW

 

 

 

មេរៀនទី១១: Form Account – CSS

 

មេរៀនទី១១: បង្កើត Form Account – CSS 

1Web IT2 copy1- HTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

<title>Designing Modern Web Forms</title>

</head>

<body>

<div id=”registration”>

<h2>Create an Account</h2>

<form id=”RegisterUserForm” action=”” method=”post”>

<fieldset>

<p>

<label for=”name”>Name</label>

<input id=”name” name=”name” type=”text” value=”” />

</p>

<p>

<label for=”tel”>Phone Number</label>

<input id=”tel” name=”tel” type=”tel” value=”” />

</p>

<p>

<label for=”email”>Email</label>

<input id=”email” name=”email” type=”email” value=”” />

</p>

<p>

<label for=”password”>Password</label>

<input id=”password” name=”password” type=”password” />

</p>

<p><input id=”acceptTerms” name=”acceptTerms” type=”checkbox” />

<label for=”acceptTerms”>

I agree to the <a href=””>Terms and Conditions</a> and <a href=””>Privacy Policy</a>

</label>

</p>

<p>

<button id=”registerNew” type=”submit”>Register</button>

</p>

</fieldset>

</form>

</div>

</body>

</html>

2.  CSS3

<style type=”text/css”>

/* css1 */

html, body, h1, form, fieldset, input {

margin: 0;

padding: 0;

border: none;

}

body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; }

#registration {

color: #fff;

background: #2d2d2d;

background: -webkit-gradient(

linear,

left bottom,

left top,

color-stop(0, rgb(60,60,60)),

color-stop(0.74, rgb(43,43,43)),

color-stop(1, rgb(60,60,60))

);

background: -moz-linear-gradient(

center bottom,

rgb(60,60,60) 0%,

rgb(43,43,43) 74%,

rgb(60,60,60) 100%

);

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

margin: 10px;

width: 430px;

}

#registration a {

color: #8c910b;

text-shadow: 0px -1px 0px #000;

}
#registration fieldset {
padding: 20px;

}

/* CSS2 */

input.text {

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;

border:solid 1px #444;

font-size: 14px;

width: 90%;

padding: 7px 8px 7px 30px;

-moz-box-shadow: 0px 1px 0px #777;

-webkit-box-shadow: 0px 1px 0px #777;

background: #ddd url(‘inputSprite.png’) no-repeat 4px 5px;

background: url(‘inputSprite.png’) no-repeat 4px 5px, -moz-linear-gradient(

center bottom,

rgb(225,225,225) 0%,

rgb(215,215,215) 54%,

rgb(173,173,173) 100%

);

background:  url(‘inputSprite.png’) no-repeat 4px 5px, -webkit-gradient(

linear,

left bottom,

left top,

color-stop(0, rgb(225,225,225)),

color-stop(0.54, rgb(215,215,215)),

color-stop(1, rgb(173,173,173))

);

color:#333;

text-shadow:0px 1px 0px #FFF;

}

/*CSS3*/

input#email {

background-position: 4px 5px;

background-position: 4px 5px, 0px 0px;

}
input#password {
background-position: 4px -20px;
background-position: 4px -20px, 0px 0px;

}

input#name {

background-position: 4px -46px;

background-position: 4px -46px, 0px 0px;

}

input#tel {

background-position: 4px -76px;

background-position: 4px -76px, 0px 0px;

}

#registration h2 {

color: #fff;

text-shadow: 0px -1px 0px #000;

border-bottom: solid #181818 1px;

-moz-box-shadow: 0px 1px 0px #3a3a3a;

text-align: center;

padding: 18px;

margin: 0px;

font-weight: normal;

font-size: 24px;

font-family: Lucida Grande, Helvetica, Arial, sans-serif;

}

#registerNew {

width: 203px;

height: 40px;

border: none;

text-indent: -9999px;

background: url(‘createAccountButton.png’) no-repeat;

cursor: pointer;

float: right;

}

#registerNew:hover { background-position: 0px -41px; }

#registerNew:active { background-position: 0px -82px; }

#registration p {

position: relative;

}

fieldset label.infield /* .infield label added by JS */ {

color: #333;

text-shadow: 0px 1px 0px #fff;

position: absolute;

text-align: left;

top: 3px !important;

left: 35px !important;

line-height: 29px;

}

</style>
1

មេរៀនទី១២: ទម្រង់ Form ជាមួយ CSS

មេរៀនទី១២: បង្កើតទម្រង់ Form ជាមួយ CSS 

លោកអ្នក​បង្កើត Form ដូចខាងក្រោម៖

Form

<form action=””><label for=”name”>Name: </label> <input id=”name” type=”text” /> <label for=”password”>Password: </label> <input id=”password” type=”password” /> <label>  </label> <input type=”submit” value=”Submit” /></form>

aសរសេរកូដ CSS
.input {
border: 1px solid #006;
background: #ffc;
}
.button {
border: 1px solid #006;
background: #9cf;
}
label {
display: block;
width: 150px;
float: left;
margin: 2px 4px 6px 4px;
text-align: right;
}
br { clear: left; }
a

មេរៀនទី១៣: Drop Down Menu – CSS

 

មេរៀនទី១៣: បង្កើត Drop Down Menu – CSS  

11- HTML1

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>

</title>

</head>

<body>

</body>

</html>

2- HTML2

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>

</title>

</head>

<body>

<nav>

<ul>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Tutorials</a>

<ul>

<li><a href=”#”>Photoshop</a></li>

<li><a href=”#”>Illustrator</a></li>

<li><a href=”#”>Web Design</a>

<ul>

<li><a href=”#”>HTML</a></li>

<li><a href=”#”>CSS</a></li>

</ul>

</li>

</ul>

</li>

<li><a href=”#”>Articles</a>

<ul>

<li><a href=”#”>Web Design</a></li>

<li><a href=”#”>User Experience</a></li>

</ul>

</li>

<li><a href=”#”>Inspiration</a></li>

</ul>

</nav>

</body>

</html>

Web IT2 copy

2.  CSS3

<style>

/*css1*/

nav ul ul {

display: none;

}

nav ul li:hover > ul {

display: block;

}

/*css2*/

nav ul {

background: #efefef;

background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);

background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);

background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);

box-shadow: 0px 0px 9px rgba(0,0,0,0.15);

padding: 0 20px;

border-radius: 10px;

list-style: none;

position: relative;

display: inline-table;

}

nav ul:after {

content: “”;

clear: both;

display: block;

}

/*css3*/

nav ul li {

float: left;

}

nav ul li:hover {

background: #4b545f;

background: linear-gradient(top, #4f5964 0%, #5f6975 40%);

background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);

background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);

}

nav ul li:hover a {

color: #fff;

}

nav ul li a {

display: block; padding: 20px 20px;

color: #757575; text-decoration: none;

}

body

{

background-color:#999999;

}

</style>
1

3. CSS4

<style>

/*css1*/

nav ul ul {

display: none;

}

nav ul li:hover > ul {

display: block;

}

/*css2*/

nav ul {

background: #efefef;

background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);

background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);

background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);

box-shadow: 0px 0px 9px rgba(0,0,0,0.15);

padding: 0 20px;

border-radius: 10px;

list-style: none;

position: relative;

display: inline-table;

}

nav ul:after {

content: “”;

clear: both;

display: block;

}

/*css3*/

nav ul li {

float: left;

}

nav ul li:hover {

background: #4b545f;

background: linear-gradient(top, #4f5964 0%, #5f6975 40%);

background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);

background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);

}

nav ul li:hover a {

color: #fff;

}

nav ul li a {

display: block; padding: 20px 20px;

color: #757575; text-decoration: none;

}

body

{

background-color:#999999;

}

 

/*css4*/

nav ul ul {

background: #5f6975; border-radius: 0px; padding: 0;

position: absolute; top: 100%;

}

nav ul ul li {

float: none;

border-top: 1px solid #6b727c;

border-bottom: 1px solid #575f6a;

position: relative;

}

nav ul ul li a {

padding: 15px 40px;

color: #fff;

}

nav ul ul li a:hover {

background: #4b545f;

}

</style>
1

4. CSS5

<style>

/*css1*/

nav ul ul {

display: none;

}

 

nav ul li:hover > ul {

display: block;

}

/*css2*/

nav ul {

background: #efefef;

background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);

background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);

background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);

box-shadow: 0px 0px 9px rgba(0,0,0,0.15);

padding: 0 20px;

border-radius: 10px;

list-style: none;

position: relative;

display: inline-table;

}

nav ul:after {

content: “”;

clear: both;

display: block;

}

/*css3*/

nav ul li {

float: left;

}

nav ul li:hover {

background: #4b545f;

background: linear-gradient(top, #4f5964 0%, #5f6975 40%);

background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);

background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);

}

nav ul li:hover a {

color: #fff;

}

nav ul li a {

display: block; padding: 20px 20px;

color: #757575; text-decoration: none;

}

body

{

background-color:#999999;

}

/*css4*/

nav ul ul {

background: #5f6975; border-radius: 0px; padding: 0;

position: absolute; top: 100%;

}

nav ul ul li {

float: none;

border-top: 1px solid #6b727c;

border-bottom: 1px solid #575f6a;

position: relative;

}

nav ul ul li a {

padding: 15px 40px;

color: #fff;

}

nav ul ul li a:hover {

background: #4b545f;

}

/ *css5*/

nav ul ul ul {

position: absolute; left: 100%; top:0;

}

</style>
1

មេរៀនទី១៤: ដាក់នាឡិកាលើប្លក

មេរៀនទី១៤: ដាក់នាឡិកាគ្រប់ប្រភេទនៅលើប្លក 

ពេលវេលាពិតជាមានសារៈសំខាន់ណាស់ចំពោះមនុស្សគ្រប់រូប។យ៉ាងណា មិញពាក្យ ស្លោកមួយបានពោលថា”ពេលវាលាជា មាសប្រាក់”។ឥលូវយើងចាប់ផ្តើមយកពេល វាលា មកតាំង បង្ហាញនៅលើប្លករបស់យើងម្តងទៅមើល
a

ចំពោះការដាក់បង្ហាញនាឡិកានីមួយៗយើងត្រូវធ្វើតាមជំហានខាងក្រោម៖

+  សូមចូលទៅកាន់គណនីប្លករបស់អ្នក  www.blogger.com +  ចូលទៅកាន់ Layout =>Add a Gadget   =>HTML/JavaScript
+  ចម្លងកូដរបស់នាឡិកាណាដែលអ្នកពេញចិត្ត យកទៅបិទភ្ជាប់ក្នុងHTML/JavaScript
+  ធ្វើការរក្សាទុកនៅទីតាំងណាដែលសមរម្យក្នុងការបង្ហាញ។
ខាងក្រោមនេះជាឈ្មោះនិងកូដនាឡិកានីមួយៗ៖
1:នាឡិកាពណ៌ទឹកក្រូច <script src=”http://www.clocklink.com/embed.js”></script><script language=”JavaScript” type=”text/javascript”>obj=new Object;obj.clockfile=”0012-orange.swf”;obj.TimeZone=”GMT0700″;obj.width=200;obj.height=200;obj.wmode=”transparent”;showClock(obj);</script>

2:នាឡិកាស្លឹកឈើ <script src=”http://www.clocklink.com/embed.js”></script><script type=”text/javascript” language=”JavaScript”>obj=new Object;obj.clockfile=”5030-green.swf”;obj.TimeZone=”GMT0700″;obj.width=85;obj.height=100;obj.TimeFormat=”hh:mm:ss TT”;obj.wmode=”transparent”;showClock(obj);</script>

3:នាឡិកាលេខធំៗ <script src=”http://www.clocklink.com/embed.js”></script><script type=”text/javascript” language=”JavaScript”>obj=new Object;obj.clockfile=”5005-red.swf”;obj.TimeZone=”GMT0700″;obj.width=240;obj.height=80;obj.wmode=”transparent”;showClock(obj);</script>

4:នាឡិការូបភ្នំទឹកកក <script src=”http://www.clocklink.com/embed.js”></script><script type=”text/javascript” language=”JavaScript”>obj=new Object;obj.clockfile=”5011-tiger.swf”;obj.TimeZone=”GMT0700″;obj.width=140;obj.height=120;obj.wmode=”transparent”;showClock(obj);</script>

5:នាឡិកាដៃពណ៌បៃតង <script src=”http://www.clocklink.com/embed.js”></script><script type=”text/javascript” language=”JavaScript”>obj=new Object;obj.clockfile=”5029-green.swf”;obj.TimeZone=”GMT0700″;obj.width=180;obj.height=180;obj.wmode=”transparent”;showClock(obj);</script>

6:នាឡិកាប៉ោលពណ៌ស <script src=”http://www.clocklink.com/embed.js”></script><script type=”text/javascript” language=”JavaScript”>obj=new Object;obj.clockfile=”0006-gray.swf”;obj.TimeZone=”GMT0700″;obj.width=125;obj.height=150;obj.wmode=”transparent”;showClock(obj);</script>

7:នាឡិកាលេខពណ៌ខ្មៅ <script src=”http://www.clocklink.com/embed.js”></script><script type=”text/javascript” language=”JavaScript”>obj=new Object;obj.clockfile=”5027-gray.swf”;obj.TimeZone=”GMT0700″;obj.width=200;obj.height=90;obj.wmode=”transparent”;showClock(obj);</script>

8:នាឡិកាលេខពណ៌ខៀវ <script src=”http://www.clocklink.com/embed.js”></script><script type=”text/javascript” language=”JavaScript”>obj=new Object;obj.clockfile=”5010-blue.swf”;obj.TimeZone=”GMT0700″;obj.width=222;obj.height=66;obj.wmode=”transparent”;showClock(obj);</script>

9:នាឡិកាលេខពណ៌សក្នុងប្រអប់ពណ៌ផ្កាឈូក <script src=”http://www.clocklink.com/embed.js”></script><script type=”text/javascript” language=”JavaScript”>obj=new Object;obj.clockfile=”5012-pink.swf”;obj.TimeZone=”GMT0700″;obj.width=151;obj.height=50;obj.wmode=”transparent”;showClock(obj);</script>

10:នាឡិកាក្រដាស <script src=”http://www.clocklink.com/embed.js”></script><script type=”text/javascript” language=”JavaScript”>obj=new Object;obj.clockfile=”5025-white.swf”;obj.TimeZone=”GMT0700″;obj.width=180;obj.height=180;obj.wmode=”transparent”;showClock(obj);</script>

11:នាឡិកាលេខពណ៌ប្រផេះ <script src=”http://www.clocklink.com/embed.js”></script><script type=”text/javascript” language=”JavaScript”>obj=new Object;obj.clockfile=”5022-white.swf”;obj.TimeZone=”GMT0700″;obj.width=200;obj.height=90;obj.wmode=”transparent”;showClock(obj);</script>

12:នាឡិកាពណ៌ខ្មៅ <embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-179.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

13:នាឡិកាពណ៌ស <embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-175.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

14:នាឡិកាស៊ុមពណ៌ខ្មៅ <object><param name=”movie” value=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf”><embed src=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf” width=”150″ height=”150″ wmode=”transparent”> </embed></object>

15:នាឡិកាធម្មតា <object><param name=”movie” value=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf”><embed src=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf” width=”150″ height=”150″ wmode=”transparent”> </embed></object>

16:នាឡិការួមទាំងលេខ <object><param name=”movie” value=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-28.swf”><embed src=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-28.swf” width=”150″ height=”150″ wmode=”transparent”> </embed></object>

17:នាឡិកាទ្រនិចរអិល <object><param name=”movie” value=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf”><embed src=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf” width=”150″ height=”150″ wmode=”transparent”> </embed></object>
18:នាឡិកាឈើ <object><param name=”movie” value=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf”><embed src=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf” width=”150″ height=”150″ wmode=”transparent”> </embed></object>

19:នាឡិកាគ្មានស៊ុម <object><param name=”movie” value=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf”><embed src=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf” width=”150″ height=”150″ wmode=”transparent”> </embed></object>

20:នាឡិកាលេខនៅចំកណ្តាលស៊ុម <object><param name=”movie” value=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-58.swf”><embed src=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-58.swf” width=”150″ height=”150″ wmode=”transparent”></embed></object>

21:នាឡិកាពណ៌ប្រាក់ <object><param name=”movie” value=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-11.swf”><embed src=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-11.swf” width=”150″ height=”150″ wmode=”transparent”> </embed></object>

22:នាឡិកាមានប្រតិទិន <object><param name=”movie” value=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-1.swf”> <embed src=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-1.swf” width=”150″ height=”250″ wmode=”transparent”></object>
<br /></div>

23:នាឡិកាពណ៌ខ្មៅរលោង <embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-165.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

24:នាឡិការូបផ្ទះ <embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-150.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

25:នាឡិកាផ្ទៃក្រោយពណ៌ខៀវ <embed src=http://safir85.ucoz.com/bdlab-blogspot/24work/301788.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

26:នាឡិកាទ្រនិចពណ៌ស <embed src=http://safir85.ucoz.com/bdlab-blogspot/24work/390495.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

27:នាឡិការោទិ៍ <embed src=http://safir85.ucoz.com/bdlab-blogspot/24work/176785.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

28:នាឡិកាបាល់ <embed src=http://safir85.ucoz.com/bdlab-blogspot/24work/WorldCupClock.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

29:នាឡិកាទ្រនិចផ្កាយ <embed src=http://safir85.ucoz.com/bdlab-blogspot/24work/PortalClock.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

30:នាឡិកាប៉ោលឈើ <embed src=http://safir85.ucoz.com/bdlab-blogspot/24work/167603.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

31:នាឡិកាទ្រនិចបីពណ៌ <embed src=http://safir85.ucoz.com/bdlab-blogspot/24work/950308.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

32:នាឡិកាពណ៌ប៉ោលធម្មតា <embed src=http://safir85.ucoz.com/bdlab-blogspot/24work/classic_blue.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

33:នាឡិកាពណ៌បៃតងនិងប្រផេះ <embed src=http://safir85.ucoz.com/bdlab-blogspot/24work/GreenConcentric.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

34:នាឡិកាពណ៌លឿងនិងខៀវ <embed src=http://safir85.ucoz.com/bdlab-blogspot/24work/HotSummerDay.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

35:នាឡិកាទ្រនិចរអិលពណ៌ប្រផេះ <embed src=http://safir85.ucoz.com/bdlab-blogspot/24work/worldclock.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

36:នាឡិកាពណ៌លឿង <embed src=http://safir85.ucoz.com/bdlab-blogspot/24work/WorldNewsClock.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

37:នាឡិកាមានរូបពពកនៅផ្ទៃក្រោយ <embed src=http://safir85.ucoz.com/bdlab-blogspot/24work/Cloudy_Free_Flash_Clock.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

38:នាឡិកាពណ៌សលាយប្រផេះ <embed src=http://safir85.ucoz.com/bdlab-blogspot/24work/GlassOfficeClock.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

39:នាំឡិកាទ្រនិចដង្កូវបាក់ខ្នង <embed src=http://safir85.ucoz.com/bdlab-blogspot/24work/620751.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

40:នាឡិកាចល័តតាមកណ្តុរ <embed src=http://safir85.ucoz.com/bdlab-blogspot/24work/189466.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

 

 

មេរៀនទី១៥: រូបភាព Image-CSS

លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី CSS
aលំហាត់ទី១ ធ្វើយ៉ាងណា ដាក់ព្រំដែនរូបភាព?aសរសេរកូដ
img {
border-width: 1px;
border-style: solid;
border-color: #000000;
}
img {
border: 1px solid #000000;
}

លំហាត់ទី២ ធ្វើយ៉ាងណា បង្កើត background រួបភាពលើទំព័រ?

aសរសេរកូដ
body {
background-color: #ffffff;
background-image: url(peppers_bg.jpg);
background-repeat: no-repeat;
}

លំហាត់ទី៣ ធ្វើយ៉ាងណា ដាក់ទីតាំ background រួបភាពនៅកណ្តាល?

aសរសេរកូដ
body {
background-color: #FFFFFF;
background-image: url(peppers_bg.jpg);
background-repeat: no-repeat;
background-position: center center;
}

លំហាត់ទី៤ ធ្វើយ៉ាងណា ដើម្បីបង្កើត  background រួបភាពអាចធ្វើចលនា text បាន?
a
សរសេរកូដ
body {
background-color: #FFFFFF;
background-image: url(peppers_bg.jpg);
background-repeat: no-repeat;
background-position: 20px 20px;
background-attachment: fixed;
body {
background-color: #FFFFFF;
background-image: url(peppers_bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 20px 20px;
}
body {
background: #ffffff url(peppers_bg.jpg) no-repeat fixed 20px
20px;
}
លំហាត់ទី៥ ធ្វើយ៉ាងណា ដើម្បីបង្កើត  background រួបភាពផ្សេង?

aសរសេរកូដ
#smallbox {
background-image: url(mini_chilli.jpg);

background-repeat: repeat-y;
float: left;
padding-left: 60px;
margin-right: 20px;
width: 220px;
border: 1px solid #F5C9C9;
}
a<h1>Chinese style stuffed peppers</h1>
.header {
background-image: url(dotty.gif);
width: 400px;
height: 30px;
padding: 6px 6px 4px 8px;
color: #B22222;
background-color: transparent;
}
aa:link, a:visited {
color: #B22222;
background-color: transparent;
font-weight: bold;
}
a:hover {
background-image: url(dotty.gif);
text-decoration: none;
}

លំហាត់ទី៦ ធ្វើយ៉ាងណា ដើម្បីបន្ថែម  background រួបភាពច្រើនជាងមួយ?
a
html {
background-image: url(mini_chilli.jpg);
background-repeat: repeat-y;
background-position: 2px 2px;
background-attachment: fixed;
}
body {
background-image: url(peppers_bg.jpg);
background-repeat: no-repeat;
background-position: 80px 20px;
}

 

មេរៀនទី១៧: CSS-Navigation

មេរៀនទី១៧: CSS-Navigation លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី CSS
a
លំហាត់ទី១ ធ្វើយ៉ាងណាដើម្បីប្តូរ font tag  ប្រើ CSS?
សរសេរកូដ
<p><font color=”#800080″
face=”Verdana,Geneva,Arial,Helvetica,sans-serif”>These
stuffed peppers are lovely as a starter, or as a side dish
for a Chinese meal. They also go down well as part of a
buffet and even children seem to like them.</font></p>
p {

color: #800080;
font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
}

ប្រើ pixels, points, ems ឬផ្សេងទៀត
aPoints and Picas
p {
font-size: 10pt;
}

Pixels
p {
font-size: 12px;
}

aEms
p {
font-size: 1em;
}

ap {
font-size: small;
}
em {
font-size: larger;
}
<p>These <em>stuffed peppers</em> are lovely as a starter, or as a

side dish for a Chinese meal. They also go down well as part of
a buffet and even children seem to like them.</p>
atd {
font-size: 80%;
}
<table>
<tr>
<td>This is a table
<table>
<tr>
<td>This is the second table
<table>
<tr>
<td>This is the third table</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
លំហាត់ទី២ ធ្វើយ៉ាងណាដើម្បីដោះ ប្រើ underlines ពី link?
aសរសេរកូដ
text-decoration: none;
a:link, a:visited {
text-decoration: none;
}
a
a:link, a:visited {
text-decoration: underline overline;
}

លំហាត់ទី៣ ធ្វើយ៉ាងណាដើម្បីបង្កើត link ហើយប្តូរពណ៌ mouse ពេលចុចលើវា?

aa:link, a:visited, a:hover, a:active {
text-decoration: underline;
color: #6A5ACD;
background-color: transparent;
}

aa:link, a:visited {
text-decoration: underline;
color: #6A5ACD;
background-color: transparent;
}
a:hover, a:active {
text-decoration: underline overline;
color: #191970;
background-color: #C9C3ED;
}
លំហាត់ទី៤
ធ្វើយ៉ាងណាដើម្បីបង្ហាញ Style ពីរនៃ link លើទំព័រមួយ?

a<div>
<p>Visit our <a href=”store.html”>online store</a>, for all your
widget needs.</p>
</div>
.boxout {
color: #FFFFFF;
background-color: #6A5ACD;
}
.boxout a:link, .boxout a:visited {
text-decoration: underline;
color: #E4E2F6;
background-color: transparent;
}
.boxout a:hover, .boxout a:active {
background-color: #C9C3ED;
color: #191970;
}

លំហាត់ទី៥ ធ្វើយ៉ាងណាដើម្បីបន្ថែម background color ទៅ ក្បាលលើ?

ah1 {
background-color: #ADD8E6;
color: #256579;
font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 2px;
}

លំហាត់ទី៦ ធ្វើយ៉ាងណាដើម្បីបង្កើត ក្បាល Style លើជាមួយ underlines?

ah1 {
font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: underline;
}a

h1 {
font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 2px;
border-bottom: 1px solid #aaaaaa;
}

លំហាត់ទី៧ ធ្វើយ៉ាងណាដើម្បី highlight text លើទំព័រ?

a.hilite {
background-color: #FFFFCC;
color: #B22222;
}

លំហាត់ទី៨ ធ្វើយ៉ាងណាដើម្បីដាក់កំពស់បន្ទាត់អក្សេរ លើទំព័រ?

a p {
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height: 2.0;
}

បង្កើតតម្រឹម justify text?

ap {
text-align: justify;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height: 2.0;
}

លំហាត់ទី៩ ធ្វើយ៉ាងណា ដាក់កំពស់ style a horizontal?

ahr {
border: none;
background-color: #ADD8E6;
color: #ADD8E6;
height: 1px;
width: 80%;
}

ដាក់ដើមបន្ទាត់

a<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Vivamus mollis. Etiam aliquet. Ut ultrices
justo ut arcu. Proin a purus. Fusce pharetra ultrices nibh.
Nam erat lectus, dapibus id, congue vel, cursus a, tellus.
Sed turpis ante, condimentum at, accumsan eget, pulvinar
vitae, nibh.</p>

.indent {
padding-left: 30px;
}

បង្កើត center text?
a
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Vivamus mollis. Etiam aliquet. Ut ultrices
justo ut arcu. Proin a purus. Fusce pharetra ultrices nibh. Nam
erat lectus, dapibus id, congue vel, cursus a, tellus. Sed
turpis ante, condimentum at, accumsan eget, pulvinar vitae,
nibh.</p>

.centered {
text-align: center;
}

លំហាត់ទី១០ ប្តូរអត្ថបទៅជាអក្សរធំ

a<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Vivamus mollis. Etiam aliquet. Ut ultrices
justo ut arcu. Proin a purus. Fusce pharetra ultrices nibh. Nam
erat lectus, dapibus id, congue vel, cursus a, tellus. Sed
turpis ante, condimentum at, accumsan eget, pulvinar vitae,
nibh.</p>

.transform {
text-transform: uppercase;
}


លំហាត់ទី១១ ប្តូរឬ remove the bullets លើ list items?
a
<ul>
<li>list item one</li>
<li>list item two</li>

<li>list item three</li>
</ul>

ul {
list-style-type: square;
}

បង្ហាញដោយគ្មាន displays without bullets

aul {
list-style-type: none;
}

លំហាត់ទី១២ ធ្វើយ៉ាងណាដើម្បីប្រើរូប ដាក់លើ list itembullet?

aul {
list-style-image: url(bullet.gif);
}

មេរៀនទី១៨: តារាងបញ្ជីទិន្នន័យ CSS

មេរៀនទី១៨: លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី CSS

aលំហាត់ទី១   ធ្វើយ៉ាងណាដើម្បីកំណត់អោយច្បាស់ ពីតារាង ទិន្នន័យអោយបានប្រសើរ?
aសរសេរកូដ

<table summary=”This table shows the yearly income for years 1999
through 2002″>
<caption>Yearly Income 1999 – 2002</caption>
<tr>
<th></th>
<th scope=”col”>1999</th>
<th scope=”col”>2000</th>
<th scope=”col”>2001</th>
<th scope=”col”>2002</th>
</tr>
<tr>
<th scope=”row”>Grants</th>
<td>11,980</td>
<td>12,650</td>
<td>9,700</td>
<td>10,600</td>
</tr>
<tr>
<th scope=”row”>Donations</th>
<td>4,780</td>
<td>4,989</td>
<td>6,700</td>
<td>6,590</td>
</tr>
<tr>
<th scope=”row”>Investments</th>
<td>8,000</td>
<td>8,100</td>
<td>8,760</td>
<td>8,490</td>
</tr>
<tr>
<th scope=”row”>Fundraising</th>
<td>3,200</td>
<td>3,120</td>
<td>3,700</td>
<td>4,210</td>
</tr>
<tr>
<th scope=”row”>Sales</th>
<td>28,400</td>
<td>27,100</td>
<td>27,950</td>
<td>29,050</td>
</tr>
<tr>
<th scope=”row”>Miscellaneous</th>
<td>2,100</td>
<td>1,900</td>
<td>1,300</td>
<td>1,760</td>
</tr>
<tr>
<th scope=”row”>Total</th>
<td>58,460</td>
<td>57,859</td>
<td>58,110</td>
<td>60,700</td>
</tr>
</table>

លំហាត់ទី២  ធ្វើយ៉ាងណាដើម្បីបន្ថែម border ទៅក្នុងតារាង menu ដោយប្រើ HTHM border attribute?

aសរសេរកូដ
.datatable {
border: 1px solid #338BA6;
}

.datatable td, .datatable th {
border: 1px solid #73C0D4;
}

លំហាត់ទី៣ ធ្វើយ៉ាងណាដើម្បីបង្ហាញ spreadsheet data អោយបានប្រសើរ?

aសរសេរកូដ

p, td, th {
font: 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;

}
.datatable {
border: 1px solid #D6DDE6;
border-collapse: collapse;
}
.datatable td {
border: 1px solid #D6DDE6;
text-align: right;
padding: 4px;
}
.datatable th {
border: 1px solid #828282;
background-color: #BCBCBC;
font-weight: bold;
text-align: left;
padding: 4px;
}
.datatable caption {
font: bold 0.9em “Times New Roman”, Times, serif;
background-color: #B0C4DE;
color: #33517A;
padding-top: 3px;
padding-bottom: 2px;
border: 1px solid #789AC6;
}

ap, td, th {
font: 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
}

លំហាត់ទី៤ ធ្វើយ៉ាងណាដើម្បីបង្ហាញ តារាង table rows មានព៌ណ?

aសរសេរកូដ
<table summary=”List of new students 2003″>
<caption>Student List</caption>
<tr>
<th scope=”col”>Student Name</th>
<th scope=”col”>Date of Birth</th>
<th scope=”col”>Class</th>
<th scope=”col”>ID</th>
</tr>
<tr>
<td>Joe Bloggs</td>
<td>27/08/1997</td>
<td>Mrs Jones</td>
<td>12009</td>
</tr>
<tr>
<td>William Smith</td>
<td>20/07/1997</td>
<td>Mrs Jones</td>
<td>12010</td>
</tr>
<tr>
<td>Jane Toad</td>
<td>21/07/1997</td>
<td>Mrs Jones</td>
<td>12030</td>
</tr>
<tr>
<td>Amanda Williams</td>
<td>19/03/1997</td>
<td>Mrs Edwards</td>
<td>12021</td>
</tr>
<tr>
<td>Kylie Jameson</td>
<td>18/05/1997</td>
<td>Mrs Jones</td>
<td>12022</td>
</tr>
<tr>
<td>Louise Smith</td>
<td>17/07/1997</td>
<td>Mrs Edwards</td>
<td>12019</td>
</tr>
<tr>
<td>James Jones</td>
<td>04/04/1997</td>
<td>Mrs Edwards</td>
<td>12007</td>
</tr>
</table>

CSS to style

p, td, th {
font: 0.8em Arial, Helvetica, sans-serif;
}
.datatable {
border: 1px solid #D6DDE6;
border-collapse: collapse;
width: 80%;
}
.datatable td {

border: 1px solid #D6DDE6;
padding: 4px;
}
.datatable th {
border: 1px solid #828282;
background-color: #BCBCBC;
font-weight: bold;
text-align: left;
padding-left: 4px;
}
.datatable caption {
font: bold 0.9em Arial, Helvetica, sans-serif;
color: #33517A;
text-align: left;
padding-top: 3px;
padding-bottom: 8px;
}
.datatable tr.altrow {
background-color: #DFE7F2;
color: #000000;
}
លំហាត់ទី៥
ធ្វើយ៉ាងណាដើម្បីប្តូរព៌ណ background color?

aសរសេរកូដ
datatable tr:hover {
background-color: #DFE7F2;
color: #000000;
}

ប្រើ JavaScript ដើម្បីប្តូរ Classes

a
.datatable tr:hover, .datatable tr.hilite {
background-color: #DFE7F2;
color: #000000;
}

<script type=”text/javascript”>
var rows = document.getElementsByTagName(‘tr’);

for (var i = 0; i < rows.length; i++) {
rows[i].onmouseover = function() {
this.className += ‘ hilite’;
}
rows[i].onmouseout = function() {
this.className = this.className.replace(‘hilite’, ”);
}
}
</script>

លំហាត់ទី៦ ធ្វើយ៉ាងណាដើម្បីបង្ហាញ calendar ដោយប្រើ CSS ?

aសរសេរកូដ
<table summary=”Calendar for June 2004″>
<caption>June 2004</caption>
<tr>
<th scope=”col”>Monday</th>
<th scope=”col”>Tuesday</th>
<th scope=”col”>Wednesday</th>
<th scope=”col”>Thursday</th>
<th scope=”col”>Friday</th>
<th scope=”col”>Saturday</th>
<th scope=”col”>Sunday</th>
</tr>
<tr>
<td>31</td>
<td>1
<ul>
<li>New pupils open day</li>
<li>Year 8 theatre trip</li>
</ul>
</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7
<ul>
<li>Year 7 English exam</li>
</ul>
</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17
<ul>
<li>Sports Day</li>
</ul>
</td>
<td>18
<ul>
<li>Year 7 Parents’ evening</li>
<li>Prizegiving</li>
</ul>
</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24
<ul>
<li>Year 8 parents’ evening</li>
</ul>
</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
<td>30
<ul>
<li>First Night of school play</li>
</ul>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>

body {
background-color: #ffffff;
color: #000000;
font-size: 90%;
}
.clmonth {
border-collapse: collapse;
width: 780px;
}
.clmonth caption {
text-align: left;
font: bold 110% Georgia, “Times New Roman”, Times, serif;
padding-bottom: 6px;
}
.clmonth th {
border: 1px solid #AAAAAA;
border-bottom: none;
padding: 2px 8px 2px 8px;
background-color: #CCCCCC;
color: #3F3F3F;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 110px;
}
.clmonth td {
border: 1px solid #EAEAEA;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 2px 4px 2px 4px;
vertical-align: top;
}
.clmonth td.previous, .clmonth td.next {
background-color: #F6F6F6;
color: #C6C6C6;
}
.clmonth td.active {
background-color: #B1CBE1;
color: #2B5070;
border: 2px solid #4682B4;
}
.clmonth ul {
list-style-type: none;
margin: 0;
padding-left: 12px;
padding-right: 6px;
}
.clmonth li {
margin-bottom: 8px;
}
a

<table class=”clmonth” summary=”Calendar for June 2004″>
<caption>June 2004</caption>
<tr>
<th scope=”col”>M</th>
<th scope=”col”>T</th>
<th scope=”col”>W</th>
<th scope=”col”>T</th>
<th scope=”col”>F</th>
<th scope=”col”>S</th>
<th scope=”col”>S</th>
</tr>
<tr>
<td class=”previous”>31</td>
<td class=”active”>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td class=”active”>7</td>
<td>8</td>

<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
<td>30</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
body {
background-color: #ffffff;
color: #000000;
font-size: 90%;
}
.clmonth {
border-collapse: collapse;
}
.clmonth caption {
text-align: left;
font: bold 110% Georgia, “Times New Roman”, Times, serif;
padding-bottom: 6px;
}
.clmonth th {
border: 1px solid #AAAAAA;
border-bottom: none;
padding: 2px 8px 2px 8px;
background-color: #CCCCCC;
color: #3F3F3F;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.clmonth td {
border: 1px solid #EAEAEA;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 2px 4px 2px 4px;
vertical-align: top;
}
.clmonth td.previous, .clmonth td.next {
background-color: #F6F6F6;
color: #C6C6C6;
}
.clmonth td.active {
background-color: #B1CBE1;
color: #2B5070;
border: 2px solid #4682B4;
}


មេរៀនទី១៩: Forms និង User CSS

មេរៀនទី១៩: លំហាត់ CSS-Forms និង User 

លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី CSS
aលំហាត់ទី១ បង្កើត form ប្រើកូដ CSS

aសរសេរកូដ
<form method=”post” action=”example1.html”>
<p>What is your name?
<br /><input type=”text” name=”name” id=”name” /></p>
<p>Select your favorite color:
<br /><select name=”color” id=”color”>
<option value=”blue”>blue</option>
<option value=”red”>red</option>
<option value=”green”>green</option>
<option value=”yellow”>yellow</option>
</select></p>
<p>Are you male or female?<br />
<input type=”radio” name=”sex” id=”male” value=”male” /> Male
<br />
<input type=”radio” name=”sex” id=”female” value=”female” />
Female
</p>
<p>Comments:<br />
<textarea name=”comments” id=”comments” cols=”30″ rows=”4″>
</textarea></p>
<p><input type=”submit” name=”btnSubmit” id=”btnSubmit”
value=”Submit” /></p>
</form>

form {
border: 1px dotted #aaaaaa;
padding: 3px 6px 3px 6px;
}
input {
color: #00008B;
background-color: #ADD8E6;
border: 1px solid #00008B;
}
select {
width: 100px;
color: #00008B;
background-color: #ADD8E6;
border: 1px solid #00008B;

}
textarea {
width: 200px;
height: 40px;
color: #00008B;
background-color: #ADD8E6;
border: 1px solid #00008B;
}

ដាក់ព៌ណក្នុង Form

aសរសេរកូដ
<input type=”text” name=”name” id=”name” />
input {
color: #00008B;
background-color: #ADD8E6;
border: 1px solid #00008B;
font: 0.9em Arial, Helvetica, sans-serif;
padding: 2px 4px 2px 4px;
width: 200px;
}

 

លំហាត់ទី២  ធ្វើយ៉ាងណាដើម្បីអនុវត្ត ស្ទាយខុសគ្នា ក្នុង form តែមួយប្រើកូដ CSS?

aសរសេរកូដ
<form method=”post” action=”fields.html”>
<p>What is your name?<br />
<input type=”text” name=”name” id=”name” /></p>
<p><input type=”submit” name=”btnSubmit” id=”btnSubmit”
value=”Submit” /></p>
</form>
form {
border: 1px dotted #aaaaaa;
padding: 3px 6px 3px 6px;
}
input.txt{
color: #00008B;
background-color: #ADD8E6;
border: 1px inset #00008B;
width: 200px;
}
input.btn {
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
padding: 2px 4px 2px 4px;
}
ainput {
color: #00008B;
background-color: #ADD8E6;
border: 1px inset #00008B;
width: 200px;
}

លំហាត់ទី៣​​ ធ្វើយ៉ាងណាដើម្បីបញ្ឈប់ ការបង្កើតបន្ថែម form ពេលដែលមាន Space និង  line breaks?

aសរសេរកូដ
Your email address:
<form method=”post” action=”inline.html”>
<input type=”text” name=”name” id=”name” />
<input type=”submit” name=”btnSubmit” id=”btnSubmit”
value=”Submit” />
</form>

form {
display: inline;
}
input.txt {
color: #00008B;
background-color: #E3F2F7;
border: 1px inset #00008B;
width: 200px;
}
input.btn {
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
}

លំហាត់ទី៤ ធ្វើយ៉ាងណាដើម្បីប submit button ដូចជា Text?

aសរសរកូដ
.btn {
background-color: transparent;
border: 0;
padding: 0;
}

លំហាត់ទី៥ ធ្វើយ៉ាងណាដើម្បីធ្វើអោយច្បាស់ ថាអ្នកប្រើប្រាស់ជា មួយ Text តែប៉ុណ្ណោះ

a

សរសេរកូដ

<form method=”post” action=”textonly.html”>
<table>
<tr>
<td><label for=”fullname”>Name:</label></td>
<td><input type=”text” name=”fullname” id=”fullname”
class=”txt” /></td>
</tr>
<tr>
<td><label for=”email”>Email Address:</label></td>
<td><input type=”text” name=”email” id=”email”
/></td>
</tr>
<tr>
<td><label for=”password1″>Password:</label></td>
<td><input type=”password” name=”password1″ id=”password1″
class=”txt” /></td>
</tr>
<tr>
<td><label for=”password2″>Confirm Password:</label></td>
<td><input type=”password” name=”password2″ id=”password2″
class=”txt” /></td>
</tr>
<tr>
<td><label for=”level”>Membership Level:</label></td>
<td><select name=”level”>
<option value=”silver”>silver</option>
<option value=”gold”>gold</option>
</select></td>
</tr>
</table>
<p>
<input type=”submit” name=”btnSubmit” id=”btnSubmit”
value=”Sign Up!” />
</p>
</form>
h1 {
font: 1.2em Arial, Helvetica, sans-serif;
}
input.txt {
color: #00008B;
background-color: #E3F2F7;
border: 1px inset #00008B;
width: 200px;
}
input.btn {
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
}
label {
font : bold 0.9em Arial, Helvetica, sans-serif;
}

 

លំហាត់ទី៦ ធ្វើយ៉ាងណាដើម្បីគូសពីរ form ជួរប្រើកូដ CSS ជំនួស តារាង?  

aសរសេរកូដ

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Table-free form layout</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”tablefree.css” />
</head>
<body>
<h1>User Registration Form</h1>
<form method=”post” action=”tablefree.html”>
<p>
<label for=”fullname”>Name:</label>
<input type=”text” name=”fullname” id=”fullname”
/>
</p>
<p>
<label for=”email”>Email Address:</label>
<input type=”text” name=”email” id=”email” />
</p>
<p>
<label for=”password1″>Password:</label>
<input type=”password” name=”password1″ id=”password1″
class=”txt” />
</p>
<p>
<label for=”password2″>Confirm Password:</label>
<input type=”password” name=”password2″ id=”password2″
class=”txt” />
</p>
<p>
<label for=”level”>Membership Level:</label>
<select name=”level”>
<option value=”silver”>silver</option>
<option value=”gold”>gold</option>
</select>
</p>
<p>
<input type=”submit” name=”btnSubmit” id=”btnSubmit”
value=”Sign Up!” />
</p>
</form>
</body>
</html>

h1 {
font: 1.2em Arial, Helvetica, sans-serif;
}
input.txt {
color: #00008B;
background-color: #E3F2F7;
border: 1px inset #00008B;
width: 200px;
}
input.btn {
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
}
form p {
clear: left;
margin: 0;
padding: 0;
padding-top: 5px;
}
form p label {
float: left;
width: 30%;
font: bold 0.9em Arial, Helvetica, sans-serif;
}

a<form method=”post” action=”textonly.html”>
<table>
<tr>
<td><label for=”fullname”>Name:</label></td>
<td><input type=”text” name=”fullname” id=”fullname”
class=”txt” /></td>
</tr>
<tr>
<td><label for=”email”>Email Address:</label></td>
<td><input type=”text” name=”email” id=”email”
/></td>

</tr>
<tr>
<td><label for=”password1″>Password:</label></td>
<td><input type=”password” name=”password1″ id=”password1″
class=”txt” /></td>
</tr>
<tr>
<td><label for=”password2″>Confirm Password:</label></td>
<td><input type=”password” name=”password2″ id=”password2″
class=”txt” /></td>
</tr>
<tr>
<td><label for=”level”>Membership Level:</label></td>
<td><select name=”level”>
<option value=”silver”>silver</option>
<option value=”gold”>gold</option>
</select></td>
</tr>
</table>
<p>
<input type=”submit” name=”btnSubmit” id=”btnSubmit”
value=”Sign Up!” />
</p>
</form>

លំហាត់ទី៧ ធ្វើយ៉ាងណាដើម្បីគូស group ដែលមាន field ទំនាក់ទំនងគ្នា?

aសរសេរកូដ

<form method=”post” action=”fieldset.html”>
<fieldset>
<legend>Personal Information</legend>
<p>
<label for=”fullname”>Name:</label>
<input type=”text” name=”fullname” id=”fullname”
/>
</p>
<p>
<label for=”email”>Email Address:</label>

<input type=”text” name=”email” id=”email” />
</p>
<p>
<label for=”password1″>Password:</label>
<input type=”password” name=”password1″ id=”password1″
class=”txt” />
</p>
<p>
<label for=”password2″>Confirm Password:</label>
<input type=”password” name=”password2″ id=”password2″
class=”txt” />
</p>
</fieldset>
<fieldset>
<legend>Address Details</legend>
<p>
<label for=”address1″>Address line one:</label>
<input type=”text” name=”address1″ id=”address1″
/>
</p>
<p>
<label for=”address2″>Address line two:</label>
<input type=”text” name=”address2″ id=”address2″
/>
</p>
<p>
<label for=”city”>Town / City:</label>
<input type=”text” name=”city” id=”city” />
</p>
<p>
<label for=”zip”>Zip / Post code:</label>
<input type=”text” name=”zip” id=”zip” />
</p>
</fieldset>
<p>
<input type=”submit” name=”btnSubmit” id=”btnSubmit”
value=”Sign Up!” />
</p>
</form>

h1 {
font: 1.2em Arial, Helvetica, sans-serif;
}
input.txt {
color: #00008B;

background-color: #E3F2F7;
border: 1px inset #00008B;
width: 200px;
}
input.btn {
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
}
form p {
clear: left;
margin: 0;
padding: 0;
padding-top: 5px;
}
form p label {
float: left;
width: 30%;
font: bold 0.9em Arial, Helvetica, sans-serif;
}
fieldset {
border: 1px dotted #61B5CF;
margin-top: 16px;
padding: 10px;
}
legend {
font: bold 0.8em Arial, Helvetica, sans-serif;
color: #00008B;
background-color: #FFFFFF;
}

a<fieldset>
<legend>Personal Information</legend>
<p>
<label for=”fullname”>Name:</label>
<input type=”text” name=”fullname” id=”fullname”
/>
</p>
<p>
<label for=”email”>Email Address:</label>
<input type=”text” name=”email” id=”email” />
</p>
<p>
<label for=”password1″>Password:</label>
<input type=”password” name=”password1″ id=”password1″
class=”txt” />
</p>
<p>
<label for=”password2″>Confirm Password:</label>
<input type=”password” name=”password2″ id=”password2″
class=”txt” />
</p>
</fieldset>


លំហាត់ទី៨ ធ្វើយ៉ាងណាដើម្បីធ្វើស្ទាយ Style  access key?

 

aសរសេរកូដ

<fieldset>
<legend><span>P</span>ersonal
Information</legend>
<p>
<label for=”fullname”>Name:</label>
<input type=”text” name=”fullname” id=”fullname”
accesskey=”p” />
</p>

.akey {
text-decoration: underline;
}

លំហាត់ទី៩ ធ្វើយ៉ាងណាដើម្បីប្រើព៌ណ  colored highlight ខុសគ្នា ក្នុងការជ្រើសរើស menu មួយ?

aសរសេរកូដ
<form method=”post” action=”example8.html”>
<p>
<label for=”color”>Select your favorite color:</label>
<select name=”color” id=”color”>
<option value=””>Select One</option>
<option value=”blue”>blue</option>
<option value=”red”>red</option>
<option value=”green”>green</option>
<option value=”yellow”>yellow</option>
</select>
</p>
<p>
<input type=”submit” name=”btnSubmit” id=”btnSubmit”
value=”Send!” />
</p>
</form>

.blue {
background-color: #ADD8E6;
color: #000000;
}
.red {
background-color: #E20A0A;
color: #ffffff;
}
.green {
background-color: #3CB371;
color: #ffffff;
}
.yellow {
background-color: #FAFAD2;
color: #000000;
}

លំហាត់ទី១០ មាន form មួយដែលអនុញ្ញាតអោយ Users បញ្ចូល ទិន្នន័យក្នុង spreadsheet

aសរសេរកូដ

<form method=”post” action=”spreadsheet.html”>
<table summary=”This table contains a form to
input the yearly income for years 1999 through 2002″>
<caption>Complete the Yearly Income 1999 – 2002</caption>
<tr>
<th></th>
<th scope=”col”>1999</th>
<th scope=”col”>2000</th>
<th scope=”col”>2001</th>
<th scope=”col”>2002</th>
</tr>
<tr>
<th scope=”row”>Grants</th>
<td><input type=”text” name=”grants1999″ id=”grants1999″ />
</td>
<td><input type=”text” name=”grants2000″ id=”grants2000″ />
</td>
<td><input type=”text” name=”grants2001″ id=”grants2001″ />
</td>
<td><input type=”text” name=”grants2002″ id=”grants2002″ />
</td>
</tr>
<tr>
<th scope=”row”>Donations</th>
<td><input type=”text” name=”donations1999″ id=”donations1999″
/></td>
<td><input type=”text” name=”donations2000″ id=”donations2000″
/></td>
<td><input type=”text” name=”donations2001″ id=”donations2001″
/></td>
<td><input type=”text” name=”donations2002″ id=”donations2002″
/></td>
</tr>
<tr>
<th scope=”row”>Investments</th>
<td><input type=”text” name=”investments1999″
id=”investments1999″ /></td>
<td><input type=”text” name=”investments2000″
id=”investments2000″ /></td>
<td><input type=”text” name=”investments2001″
id=”investments2001″ /></td>
<td><input type=”text” name=”investments2002″
id=”investments2002″ /></td>
</tr>
<tr>
<th scope=”row”>Fundraising</th>
<td><input type=”text” name=”fundraising1999″
id=”fundraising1999″ /></td>
<td><input type=”text” name=”fundraising2000″
id=”fundraising2000″ /></td>
<td><input type=”text” name=”fundraising2001″
id=”fundraising2001″ /></td>
<td><input type=”text” name=”fundraising2002″
id=”fundraising2002″ /></td>
</tr>
<tr>
<th scope=”row”>Sales</th>
<td><input type=”text” name=”sales1999″ id=”sales1999″ /></td>
<td><input type=”text” name=”sales2000″ id=”sales2000″ /></td>
<td><input type=”text” name=”sales2001″ id=”sales2001″ /></td>
<td><input type=”text” name=”sales2002″ id=”sales2002″ /></td>
</tr>
<tr>
<th scope=”row”>Miscellaneous</th>
<td><input type=”text” name=”misc1999″ id=”misc1999″ /></td>
<td><input type=”text” name=”misc2000″ id=”misc2000″ /></td>
<td><input type=”text” name=”misc2001″ id=”misc2001″ /></td>
<td><input type=”text” name=”misc2002″ id=”misc2002″ /></td>
</tr>
<tr>
<th scope=”row”>Total</th>
<td><input type=”text” name=”total1999″ id=”total1999″ /></td>
<td><input type=”text” name=”total2000″ id=”total2000″ /></td>
<td><input type=”text” name=”total2001″ id=”total2001″ /></td>
<td><input type=”text” name=”total2002″ id=”total2002″ /></td>
</tr>
</table>
<p><input type=”submit” name=”btnSubmit” id=”btnSubmit”
value=”Add Data” /></p>
</form>
table.formdata {
border: 1px solid #5F6F7E;
border-collapse: collapse;
}
table.formdata th {
border: 1px solid #5F6F7E;
background-color: #E2E2E2;
color: #000000;
text-align: left;
font-weight: normal;
padding: 2px 4px 2px 4px;
margin: 0;
}
table.formdata td {
margin: 0;
padding: 0;
border: 1px solid #E2E2E2;
}
table.formdata input {
width: 80px;
padding: 2px 4px 2px 4px;
margin: 0;
border: none;
}

លំហាត់ទី១១  ធ្វើយ៉ាងណាដើម្បីប្រើ highlight form ដែលអ្នក ប្រើប្រាស់ ចុចក្នុងបាន?

aបន្ថែមកូដខាងលើ នូវកូដខាងក្រោម

table.formdata input {
width: 80px;
padding: 2px 4px 2px 4px;
margin: 0;
border: 2px solid #ffffff;
}
.formdata input:focus {

border: 2px solid #000000;
}

មេរៀនទី២០: Browser និង Device CSS

 

មេរៀនទី២០: លំហាត់ CSS-Browser និង Device

aលំហាត់ទី១ ធ្វើយ៉ាងណាដើម្បីលាក់ កូដ CSS ពី browser ផ្សេង?
aaសរសេរកូដ
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Box Model Hack</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”box-model-hack.css”
/>
</head>
<body>
<div id=”mybox”>
<p>This div has a width of 200 pixels, padding of 20 pixels and a
border of 5 pixels.</p>
</div>
</body>
</html>
#mybox {
padding: 20px;
border: 5px solid #000000;
background-color: #00BFFF;
width: 200px;
}

លំហាត់ទី២ ធ្វើយ៉ាងណាដើម្បីបង្កើត print style sheet?
a
សរសេរកូដ
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Print Style Sheet</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”main.css”
title=”default” />
<link rel=”stylesheet” type=”text/css” href=”print.css”
media=”print” />
</head>
<body>
<div id=”banner”></div>
<div id=”content”>
<h1>Chinese style stuffed peppers</h1>
<p>These stuffed peppers are lovely as a starter, or as a side
dish for a Chinese meal. They also go down well as part of a
buffet and even children seem to like them.</p>
<h2>Ingredients</h2>

</div>
<div id=”navigation”>
<ul id=”mainnav”>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>
</div>

</body>
</html>
body, html {
margin: 0;
padding: 0;
}
#navigation {
width: 200px;
font: 90% Arial, Helvetica, sans-serif;
position: absolute;
top: 41px;
left: 0;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
margin: 0;
}
#navigation li a:link, #navigation li a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
color: #ffffff;
background-color: #b51032;
text-decoration: none;
}
#navigation li a:hover {
color: #ffffff;
background-color: #711515;
}
#content {
margin-left: 260px;
margin-right: 60px;
}
#banner {
height: 40px;
background-color: #711515;
border-bottom: 1px solid #ED9F9F;
text-align: right;
padding-right: 20px;
margin-top: 0;
}
#banner ul {
margin: 0;
padding: 0;
}
#banner li {
display: inline;
}
#banner a:link, #banner a:visited {
font: 80% Arial, Helvetica, sans-serif;
color: #ffffff;
background-color: transparent;
}
#content p, #content li {
font: 80%/1.6em Arial, Helvetica, sans-serif;
}
#content p {
margin-left: 1.5em;
}
#content h1, #content h2 {
font: 140% Georgia, “Times New Roman”, Times, serif;
color: #B51032;
background-color: transparent;
}
#content h2 {
font: 120% Georgia, “Times New Roman”, Times, serif;
padding-bottom: 3px;
border-bottom: 1px dotted #ED9F9F;
}
body, html {
margin: 0;
padding: 0;
}
#navigation {
display: none;
}
#content {
margin-left: 20pt;
margin-right: 30pt;
}
#banner {
display: none;
}
#content p, #content li {
font: 12pt/20pt “Times New Roman”, Times, serif;
}
#content p {
margin-left: 20pt;
}
#content h1, #content h2 {
font: 16pt Georgia, “Times New Roman”, Times, serif;
color: #4b4b4b;
background-color: transparent;
}
#content h2 {
font: 14pt Georgia, “Times New Roman”, Times, serif;
padding-bottom: 2pt;
border-bottom: 1pt dotted #cccccc;
}

លំហាត់ទី៣ អនុញ្ញាត browsers users ដើម្បីជ្រើសរើស style sheet

aសរសេរកូដ
<link rel=”stylesheet” type=”text/css” href=”main.css”
title=”default” />
<link rel=”stylesheet” type=”text/css” href=”print.css”
media=”print” />
<link rel=”alternate stylesheet” type=”text/css”
href=”largetext.css” title=”large text” />
body, html {
margin: 0;
padding: 0;
font-size: 140%;
}
#navigation {
width: 280px;
font: 90% Arial, Helvetica, sans-serif;
position: absolute;
top: 41px;
left: 0;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
margin: 0;
}
#navigation li a:link, #navigation li a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
color: #ffffff;
background-color: #b51032;
text-decoration: none;
}
#navigation li a:hover {
color: #ffffff;
background-color: #711515;
}
#content {
margin-left: 320px;
margin-right: 60px;
}
#banner {
height: 40px;
background-color: #711515;
border-bottom: 1px solid #ED9F9F;
text-align: right;
padding-right: 20px;
margin-top: 0;
}
#banner ul {
margin: 0;
padding: 0;
}
#banner li {
display: inline;
}
#banner a:link, #banner a:visited {
font: 80% Arial, Helvetica, sans-serif;
color: #ffffff;
background-color: transparent;
}
#content p, #content li {
font: 80%/1.6em Arial, Helvetica, sans-serif;
}
#content p {
margin-left: 1.5em;
}
#content h1, #content h2 {
font: 140% Georgia, “Times New Roman”, Times, serif;
color: #B51032;
background-color: transparent;
}
#content h2 {
font: 120% Georgia, “Times New Roman”, Times, serif;
padding-bottom: 3px;
border-bottom: 1px dotted #ED9F9F;
}

លំហាត់ទី៤ អនុញ្ញាត browsers users ដើម្បី style sheet ប្តូរបាន
aសរសេរកូដ
<link rel=”stylesheet” type=”text/css” href=”main.css”
title=”default” />
<link rel=”stylesheet” type=”text/css” href=”print.css”
media=”print” />
<link rel=”alternate stylesheet” type=”text/css”
href=”largetext.css” title=”large text” />
<script language=”javascript” type=”text/javascript”
src=”switcher.js”></script>
</head>
<body>
<div id=”banner”>
<ul id=”styleswitch”>
<li><a href=”javascript:;”
onclick=”setActiveStyleSheet(‘default’); return false;”
>Default Style</a></li>
<li><a href=”javascript:;”
onclick=”setActiveStyleSheet(‘large text’); return false;”
>Large Text</a></li>
</ul>
</div>
/*
Paul Sowden’s JavaScript switcher as detailed on:
http://www.alistapart.com/articles/alternate/
*/
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {
if(a.getAttribute(“rel”).indexOf(“style”) != -1 &&
a.getAttribute(“title”)) {
a.disabled = true;
if(a.getAttribute(“title”) == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {
if(a.getAttribute(“rel”).indexOf(“style”) != -1 &&
a.getAttribute(“title”) && !a.disabled)
return a.getAttribute(“title”);
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {
if(a.getAttribute(“rel”).indexOf(“style”) != -1
&& a.getAttribute(“rel”).indexOf(“alt”) == -1
&& a.getAttribute(“title”)
) return a.getAttribute(“title”);
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = “; expires=”+date.toGMTString();
}
else expires = “”;
document.cookie = name+”=”+value+expires+”; path=/”;
}
function readCookie(name) {
var nameEQ = name + “=”;
var ca = document.cookie.split(‘;’);
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0)
return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie(“style”);
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie(“style”, title, 365);
}
var cookie = readCookie(“style”);
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

មេរៀនទី២១: ទីតាំង និង Layout CSS

មេរៀនទី២១: លំហាត់ CSS-ទីតាំង និង Layout 

លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី CSS 

aលំហាត់ទី ១ ធ្វើយ៉ាងណាដើម្បីដាក់ ដូចជា Highlight ទៅក្នុងអត្ថបទបាន?

aសរសេរកូដ

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Inline and block level elements</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<style type=”text/css”>
#one {
background-color: #CCCCCC;
color: #000000;
border: 2px solid #AAAAAA;
padding: 2px 6px 2px 6px;
}
#two {
background-color: #CCCCCC;
color: #000000;
border: 2px solid #AAAAAA;
padding: 2px 6px 2px 6px;
display: inline;
}
a:link {
background-color: #ACACAC;
color: #FFFFFF;
text-decoration: none;
padding: 1px 2px 1px 2px;
}
a.block:link {
display: block;
}
</style>
</head>
<body>
<div id=”one”>A div is a block level element.</div>
<p>It is possible to display a div or any other block level
element as an inline element.</p>
<div id=”two”>This div is displaying as an inline element by
setting the display property to inline.</div>
<p><a href=”#”>The anchor tag creates an inline element</a></p>
<p><a href=”#”>We can force the link to be
displayed as block level</a></p>
</body>
</html>

លំហាត់ ទី២   ធ្វើយ៉ាងណាដើម្បី ទទួល Text រុំជុំវិញរូបភាព ដោយមិនប្រើ  HTML align attribute?

aសរសេរកូដ

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Float</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<style type=”text/css”>
.leftimg {
float: left;
}
</style>
</head>
<body>
<h1>Chinese style stuffed peppers</h1>
<img src=”peppers1.jpg” width=”319″ height=”255″ alt=”peppers”
class=”leftimg” />
<p>These stuffed peppers are lovely as a starter…</p>
</body>
</html>

ដាក់ស៊ុមដិតជុំវិញ

.leftimg {
float: left;
border: 2px solid #000000;
margin-right: 20px;
margin-bottom: 6px;
}

aលំហាត់ ទី៣   ធ្វើយ៉ាងណាដើម្បី បញ្ឈប់ បន្ទាប់ពីធាតុមួយធ្វើចលនាឡើង?

aសរសេរកូដ

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>float and clear</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<style type=”text/css”>
.rightimg {
float: right;
margin-left: 20px;
margin-bottom: 6px;
}
.clear {
clear: both;
}
p, ul {
border: 2px solid #000000;
}
</style>
</head>
<body>
<h1>Chinese style stuffed peppers</h1>
<img src=”peppers1.jpg” width=”319″ height=”255″ alt=”peppers”
class=”rightimg” />
<ul>
<li>1 tablespoon of oil</li>
<li>1 crushed garlic clove</li>
<li>Peeled and finely chopped fresh ginger root</li>
<li>250g minced pork, beef or Quorn</li>
<li>1 chopped spring onion</li>
<li>1 chopped celery stick</li>
<li>Grated rind of 1 lemon</li>
<li>Finely chopped red chilli (optional)</li>
<li>4 large green peppers</li>
</ul>
<p>These stuffed peppers are lovely as a …</p>

</body>
</html>

ដាក់ស៊ុមជុំវិញអក្សរ
.clear {
clear: both;
}

<p>These stuffed peppers are lovely as a starter, or
as a side dish for a Chinese meal. They also go down well as
part of a buffet and even children seem to like them.</p>

aលំហាត់ទី៤  ធ្វើយ៉ាងណាដើម្បី align logo នៅខាងឆ្វេង ឬខាងស្តាំ ដោយមិនប្រើ តារាង table?

aសរសេរកូដ

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Stage &amp; Screen – theatre and film reviews</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”strapline-align.css”
/>
</head>
<body>
<div id=”header”>
<img src=”stage-logo.gif” width=”187″ height=”29″
alt=”Stage &amp; Screen” />
<span>theatre and film reviews</span>
</div>
</body>
</html>

body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
border-top: 2px solid #2A4F6F;
}
#header {
border-top: 1px solid #778899;
border-bottom: 1px dotted #B2BCC6;
height: 3em;
}
#header .strapline {
font: 120% Georgia, “Times New Roman”, Times, serif;
color: #778899;
background-color: transparent;
float: right;
margin-right: 2em;
margin-top: 0.5em;
}
#header .logo {
float: left;
margin-left: 1.5em;
margin-top: 0.5em;
}
a<div id=”header”>
<img src=”stage-logo.gif” width=”187″ height=”29″
alt=”Stage &amp; Screen” class=”logo” />
<span class=”strapline”>theatre and film reviews<span>
</div>

a#header .strapline {
font: 120% Georgia, “Times New Roman”, Times, serif;
color: #778899;
background-color: transparent;
float: right;
margin-right: 2em;
margin-top: 0.5em;
}
#header .logo {
float: left;
margin-left: 1.5em;
margin-top: 0.5em;
}

លំហាត់ទី៥ ធ្វើយ៉ាងណាដើម្បី item នៅទល់មុខគ្នា?

aសរសេរកូដ

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Absolute positioning</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”position.css” />
</head>
<body>
<div id=”box1″>This is box one. It is positioned 10 pixels from
the top and 20 pixels from the left of the viewport</div>
<div id=”box2″>This is box two. It is positioned 2 em from the
bottom and 2 em from the right of the viewport</div>
</body>
</html>

#box1 {
position: absolute;
top: 10px;
left: 20px;
width: 100px;
background-color: #B0C4DE;
border: 2px solid #34537D
}
#box2 {
position: absolute;
bottom: 2em;
right: 2em;
width: 100px;
background-color: #FFFAFA;
border: 2px solid #CD5C5C;
}

a<div id=”box1″>This is box one. It is positioned 100 pixels from
the top and 100 pixels from the left of the viewport
<div id=”box2″>This is box two. It is positioned 2 em from the
bottom and 2 em from the right of the parent element – box1
</div>
</div>

#box1 {
position: absolute;
top: 100px;
left: 100px;
width: 400px;
background-color: #B0C4DE;
border: 2px solid #34537D
}
#box2 {
position: absolute;
bottom: 2em;
right: 2em;
width: 150px;
background-color: #FFFAFA;
border: 2px solid #CD5C5C;
}

#box1 {
position: absolute;
top: 100px;
left: 100px;
width: 400px;
height: 300px;
background-color: #B0C4DE;
border: 2px solid #34537D
}

លំហាត់ទី៥  ធ្វើយ៉ាងណាដើម្បី ដាក់បណ្តុំមួយនៅកណ្តាលទំព័រ?

aសរសេរកូដ

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Centered Box</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”center.css” />
</head>
<body>
<div id=”content”>
<p>This box is 630 pixels wide and centered in the document.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing …</p>
</div>
</body>
</html>

body {
background-color: #CCD3D9;
color: #000000;
text-align: center;
}
#content {
width: 630px;
margin-left: auto;
margin-right: auto;
border: 2px solid #A6B2BC;
background-color: #FFFFFF;
color: #000000;
padding: 0 20px 0 20px;
text-align: left;
}
លំហាត់ទី៦   ធ្វើយ៉ាងណាដើម្បី បង្កើត ២ជួរ layout ជាមួយ menu នៅខាងឆ្វេង និងមាតិការខាងស្តាំ?

aសរសេរកូដ

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Stage &amp; Screen – theatre and film reviews</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”2col.css” />
</head>
<body>
<div id=”header”>
<img src=”stage-logo.gif” width=”187″ height=”29″
alt=”Stage &amp; Screen” />
<span>theatre and film reviews</span>
</div>
<div id=”content”>
<h1>Welcome to Stage &amp; Screen</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing …</p>
</div>
<div id=”nav”>
<ul>
<li><a href=”#”>Play Reviews</a></li>
<li><a href=”#”>Film Reviews</a></li>
<li><a href=”#”>Post a Review</a></li>
<li><a href=”#”>About this site</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
<h2>Latest Reviews</h2>
<ul>
<li><a href=”#”>The Passion of The Christ</a></li>
<li><a href=”#”>Finding Nemo</a></li>
<li><a href=”#”>Stomp</a></li>
<li><a href=”#”>The Lion King 3</a></li>
</ul>
</div>
</body>
</html>

body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
border-top: 2px solid #2A4F6F;
}
#header {
border-top: 1px solid #778899;
border-bottom: 1px dotted #B2BCC6;
height: 3em;
}
#header .strapline {
font: 120% Georgia, “Times New Roman”, Times, serif;
color: #778899;
background-color: transparent;
float: right;
margin-right: 2em;
margin-top: 0.5em;
}

#header .logo {
float: left;
margin-left: 1.5em;
margin-top: 0.5em;
}
#nav {
position: absolute;
top: 5em;
left: 1em;
width: 14em;
}
#nav ul {
list-style: none;
margin-left: 1em;
padding-left: 0;
}
#nav li {
font-size: 80%;
border-bottom: 1px dotted #B2BCC6;
margin-bottom: 0.3em;
}
#nav a:link, #nav a:visited {
text-decoration: none;
color: #2A4F6F;
background-color: transparent;
}
#nav a:hover {
color: #778899;
}
#nav h2 {
font: 110% Georgia, “Times New Roman”, Times, serif;
color: #2A4F6F;
background-color: transparent;
border-bottom: 1px dotted #cccccc;
}
#content {
margin-left: 16em;
margin-right: 2em;
}
h1 {
font: 150% Georgia, “Times New Roman”, Times, serif;
}
#content p {
font-size: 80%;
line-height: 1.6em;

padding-left: 1.2em;
}

abody {
margin: 0;
padding: 0;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
border-top: 2px solid #2A4F6F;
}
#header {
border-top: 1px solid #778899;
border-bottom: 1px dotted #B2BCC6;
height: 3em;
}
#header .strapline {
font: 120% Georgia, “Times New Roman”, Times, serif;
color: #778899;
background-color: transparent;
float: right;
margin-right: 2em;
margin-top: 0.5em;
}
#header .logo {
float: left;
margin-left: 1.5em;
margin-top: 0.5em;
}

លំហាត់ទី៧
ធ្វើយ៉ាងណាដើម្បី  ដាក់ច្រាស layout នេះ ទៅ menu ខាងស្តាំបាន?

aថែមកូដខាងលើ

#nav {
position: absolute;
top: 5em;
right: 1em;
width: 14em;
}
#content {
margin-left: 2em;
margin-right: 16em;
}

លំហាត់ទី៨ ធ្វើយ៉ាងណាដើម្បី  កំរាស នៅកណ្តាល ពីរជួរ layout?

aសរសេរកូដ

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Recipe for Success</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link href=”2col-fixedwidth.css” rel=”stylesheet” type=”text/css”
/>
</head>
<body>
<div id=”wrapper”>
<div id=”content”>
<h1>Welcome</h1>
<p>The Recipe for Success web site brings you exciting and
easy to use recipes from around the world.</p>
<p>…</p>
</div>
<div id=”navigation”>
<ul id=”mainnav”>
<li><a href=”#”>Recipes</a>
<ul>
<li><a href=”#”>Starters</a></li>
<li><a href=”#”>Main Courses</a></li>
<li><a href=”#”>Desserts</a></li>
</ul>
</li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>
</div>
<div id=”footer”>Copyright &copy; 1999 – 2004 Recipe for
success</div>
</div>
</body>
</html>

body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
text-align: center;
}
#wrapper {
position: relative;
text-align: left;
width: 760px;
margin-right: auto;
margin-left: auto;
padding: 122px 0 0 0;
background-image: url(recipe_header.jpg);
background-repeat: no-repeat;
background-position: left top;
border-left: 2px solid #722100;
border-right: 2px solid #722100;
border-bottom: 2px solid #722100;
}
#content {
margin-left: 230px;
padding: 20px 10px 0 0;
}
#content p {
font-size: 80%;
line-height: 1.8em;
padding-left: 2em;
}
#content h1 {
font: normal 180% Georgia, “Times New Roman”, Times, serif;
color: #B51032;
background-color: transparent;
}
#content h2 {
font-size: 120%;
color: #940D1E;
background-color: transparent;
border-bottom: 1px dotted #FF9006;
}
#navigation {
position: absolute;
top: 122px;
left: 0;
width: 180px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navigation li {
width: 180px;
border-bottom: 1px solid #ED9F9F;
margin: 0;
padding: 0;
font-size: 80%;
vertical-align: bottom;
}
#navigation a:link, #navigation a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #722100;
border-right: 1px solid #722100;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
#navigation a:hover {
background-color: #722100;
color: #FFFFFF;
}
#navigation ul.subnav {
margin-left: 12px;
}
#navigation ul.subnav li {
border-bottom: 1px solid #722100;
width: 168px;
}
#navigation ul.subnav a:link, #navigation ul.subnav a:visited {
background-color: #ED9F9F;
color: #722100;
}
#footer {
padding: 0 0 10px 255px;
font-size: 70%;
color: #AAAAAA;
background-color: transparent;
}

body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
text-align: center;
}
#wrapper {
text-align: left;
width: 760px;
margin-right: auto;
margin-left: auto;
padding: 122px 0 0 0;
background-image: url(recipe_header.jpg);

background-repeat: no-repeat;
background-position: left top;
border-left: 2px solid #722100;
border-right: 2px solid #722100;
border-bottom: 2px solid #722100;
}
#content {
width: 520px;
float: right;
padding: 20px 10px 0 0;
}
#content p {
font-size: 80%;
line-height: 1.8em;
padding-left: 2em;
}
#content h1 {
font: normal 180% Georgia, “Times New Roman”, Times, serif;
color: #B51032;
background-color: transparent;
}
#content h2 {
font-size: 120%;
color: #940D1E;
background-color: transparent;
border-bottom: 1px dotted #FF9006;
}
#navigation {
float: left;
width: 180px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navigation li {
width: 180px;
border-bottom: 1px solid #ED9F9F;
margin: 0;
padding: 0;
font-size: 80%;
vertical-align: bottom;
}
#navigation a:link, #navigation a:visited {

display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #722100;
border-right: 1px solid #722100;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
#navigation a:hover {
background-color: #722100;
color: #FFFFFF;
}
#navigation ul.subnav {
margin-left: 12px;
}
#navigation ul.subnav li {
border-bottom: 1px solid #722100;
width: 168px;
}
#navigation .subnav a:link, #navigation ul.subnav a:visited {
background-color: #ED9F9F;
color: #722100;
}
#footer {
clear: both;
padding: 0 0 10px 255px;
font-size: 70%;
color: #AAAAAA;
background-color: transparent;
}

លំហាត់ ទី៩ ធ្វើយ៉ាងណាដើម្បី បង្កើត បីជួរ CSS layout?

aសរសេរកូដ

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Recipe for Success</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”3col.css” />
</head>
<body>
<div id=”content”>
<h1>Recipe for Success</h1>
<p>…</p>
</div>
<div id=”side1″>
<h3>Search the Recipes</h3>
<form method=”post” action=””>
<input type=”text” name=”textfield” /><br />
<input type=”submit” name=”Submit” value=”Submit” />
</form>
<ul>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</div>
<div id=”side2″>
<h3>Please Visit our Sponsors</h3>
<div><p>Lorem ipsum dolor sit amet, …</p></div>
<div><p>Sed mattis, orci eu porta …</p></div>
<div><p>Quisque mauris nunc, mattis …</p></div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
background-image: url(tomato_bg.jpg);
background-repeat: no-repeat;
background-color: #FFFFFF;
}
p {
font: 80%/1.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
padding-top: 0;
margin-top: 0;
}
form {
margin: 0;
padding: 0;
}
#content {
margin: 66px 260px 0px 240px;
padding: 10px;
}
#content h1 {
text-align: right;
padding-right: 20px;
font: 150% Georgia, “Times New Roman”, Times, serif;
color: #901602;
}
#side1 {
position: absolute;
width: 200px;
top: 30px;
left: 10px;
padding: 70px 10px 10px 10px;
}
#side2 {
position: absolute;
width: 220px;
top: 30px;
right: 10px;
padding: 70px 10px 10px 10px;
border-left: 1px dotted #cccccc;
background-image: url(sm-tomato.jpg);
background-position: top right;
background-repeat: no-repeat;
}
#side2 h3 {
font: 110% Georgia, “Times New Roman”, Times, serif;
margin: 0;
padding-bottom: 4px;
}
.adbox {
padding: 2px 4px 2px 6px;
margin: 0 0 10px 0;
border: 1px dotted #B1B1B1;
background-color: #F4F4F4;
}
#side1 h3 {
font: 110% Georgia, “Times New Roman”, Times, serif;
color: #621313;
background-color: transparent;
margin: 0;
padding-bottom: 4px;
}
#side1 .txt {
width: 184px;
background-color: #FCF5F5;
border: 1px inset #901602;
}
#side1 ul {
list-style: none;
margin-left: 0;
padding-left: 0;
width: 184px;
}
#side1 li {
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-bottom: 0.3em;
border-bottom: 1px solid #E7AFAF;
}
#side1 a:link, #side1 a:visited {
text-decoration: none;
color: #901602;
background-color: transparent;
}
#side1 a:hover {
color: #621313;
}
លំហាត់ទី១០ ធ្វើយ៉ាងណាដើម្បី បន្ថែម footer ដោយប្រើ CSS ?


aសរសេរកូដ

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Stage &amp; Screen – theatre and film reviews</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”footer.css” />
</head>
<body>
<div id=”contents”>
<div id=”header”>
<img src=”stage-logo.gif” width=”187″ height=”29″
alt=”Stage &amp; Screen” />
<span>theatre and film reviews</span>
</div>
<div id=”content”>
<h1>Welcome to Stage &amp; Screen</h1>
<p>…</p>
</div>
<div id=”nav”>
<ul>
<li><a href=”#”>Play Reviews</a></li>
<li><a href=”#”>Film Reviews</a></li>
<li><a href=”#”>Post a Review</a></li>
<li><a href=”#”>About this site</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
<h2>Latest Reviews</h2>
<ul>
<li><a href=”#”>The Passion of The Christ</a></li>
<li><a href=”#”>Finding Nemo</a></li>
<li><a href=”#”>Stomp</a></li>
<li><a href=”#”>The Lion King 3</a></li>
</ul>
</div>
<div id=”footer”><p>Copyright &copy; 2003 – 2004 Stage &amp;
Screen</p></div>
</div>
</body>
</html>

body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
html, body, #contents {
min-height: 100%;
width: 100%;
height: 100%;
}
html>body, html>body #contents {
height: auto;
}
#contents {
position: absolute;
top: 0;
left: 0;
}
#header {
border-top: 1px solid #778899;
border-bottom: 1px dotted #B2BCC6;
height: 3em;
}
#header .strapline {
font: 120% Georgia, “Times New Roman”, Times, serif;
color: #778899;
background-color: transparent;
float: right;
margin-right: 2em;
margin-top: 0.5em;
}
#header .logo {
float: left;
margin-left: 1.5em;
margin-top: 0.5em;
}
#nav {
position: absolute;

top: 5em;
left: 1em;
width: 14em;
}
#nav ul {
list-style: none;
margin-left: 1em;
padding-left: 0;
}
#nav li {
font-size: 80%;
border-bottom: 1px dotted #B2BCC6;
margin-bottom: 0.3em;
}
#nav a:link, #nav a:visited {
text-decoration: none;
color: #2A4F6F;
background-color: transparent;
}
#nav a:hover {
color: #778899;
}
#nav h2 {
font: 110% Georgia, “Times New Roman”, Times, serif;
color: #2A4F6F;
background-color: transparent;
border-bottom: 1px dotted #cccccc;
}
#content {
margin-left: 16em;
margin-right: 2em;
margin-bottom: 3em;
}
h1 {
font: 150% Georgia, “Times New Roman”, Times, serif;
}
#content p {
font-size: 80%;
line-height: 1.6em;
padding-left: 1.2em;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
border-top: 1px dotted #AAAAAA;
background-color: #CCCCCC;
color: #626262;
font-size: 70%;
}
#footer p {
margin: 0.5em 0 1em 2em;
padding: 0;
}
 លំហាត់ទី១១​ ធ្វើយ៉ាងណាដើម្បី  បង្ហាញ រូប ដោយមិនប្រើ table

aសរសេរកូដ

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>CSS photo album</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link href=”gallery.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<ul id=”albumlist”>
<li><img src=”thumb1.jpg” alt=”Garlic” width=”180″ height=”130″
/>Garlic</li>
<li><img src=”thumb2.jpg” alt=”Muffin” width=”180″ height=”130″
/>Muffin</li>
<li><img src=”thumb3.jpg” alt=”tomato” width=”180″ height=”130″
/>Tomato</li>
<li><img src=”thumb4.jpg” alt=”chilli” width=”180″ height=”130″
/>Chilli</li>
<li><img src=”thumb5.jpg” alt=”pear” width=”180″ height=”130″
/>Pear</li>
<li><img src=”thumb6.jpg” alt=”pepper” width=”180″ height=”130″
/>Pepper</li>
<li><img src=”thumb7.jpg” alt=”coffee beans” width=”180″
height=”130″ />Coffee Beans</li>
<li><img src=”thumb8.jpg” alt=”lime” width=”180″ height=”130″
/>Limes</li>
</ul>
</body>
</html>

body {
background-color: #FFFFFF;
color: #000000;
margin: 0;
padding: 0;
}
#albumlist {
list-style-type: none;
}
#albumlist li {
float: left;
margin-right: 6px;
margin-bottom: 10px;
font: bold 0.8em Arial, Helvetica, sans-serif;
color: #333333;
}
#albumlist img {
display: block;
border: 1px solid #333300;
}

a<ul id=”albumlist”>
<li><img src=”thumb1.jpg” alt=”Garlic” width=”180″ height=”130″
/>Garlic</li>
<li><img src=”thumb2.jpg” alt=”Muffin” width=”180″ height=”130″
/>Muffin</li>
<li><img src=”thumb3.jpg” alt=”tomato” width=”180″ height=”130″
/>Tomato</li>
<li><img src=”thumb4.jpg” alt=”chilli” width=”180″ height=”130″
/>Chilli</li>
<li><img src=”thumb5.jpg” alt=”pear” width=”180″ height=”130″
/>Pear</li>
<li><img src=”thumb6.jpg” alt=”pepper” width=”180″ height=”130″
/>Pepper</li>
<li><img src=”thumb7.jpg” alt=”coffee beans” width=”180″
height=”130″ />Coffee Beans</li>
<li><img src=”thumb8.jpg” alt=”lime” width=”180″ height=”130″
/>Limes</li>
</ul>

a#albumlist {
list-style-type: none;
}
#albumlist li {
float: left;
}
#albumlist img {
display: block;
}
a#albumlist li {
float: left;
margin-right: 6px;
margin-bottom: 10px;
font: bold 0.8em Arial, Helvetica, sans-serif;
color: #333333;
}

#albumlist img {
border: 1px solid #333300;
}

#albumlist {
list-style-type: none;
width: 500px;
}