មេរៀន html(1 6) by itcoolboy9

មេម ៀនHTML

ការណែន ាំអោយស្គាល់ពី HTML HTML ជាពាក្យកាត់នៃ Hypertext Markup Language ដែលជាភាសាែំ បូង ឬភាសា

មូលដ្ឋាៃគ្រឹះនៃការបងងកើតង្ហទំព័រ(Website)។ បាៃបងងកើតង

រាល់ការបងងកើតៃូវង្ហទំព័រទំងអស់គតូវ

ើងជាមួយៃរង HTML ជាៃិច្។ ច ែូច្ងៃឹះអនក្គតូវង្វើការសិក្ាដសវងយល់អំពី

ភាសាមួយងៃឹះឲ្យបាៃសីជងគៅងទើបចាប់ង្តើមងគបើ គបាស់បាៃ។ សគាប់ងោក្អនក្ដែលាៃបំណងច្ង់ងច្ឹះ ្ឺងោក្អនក្្ួរដតងច្ឹះៃូវភាសា

ៃិងស្សោញ់ងៅងលើជំនាញ

HTML។

ងោក្អនក្អាច្បងងកើតអតថបទ(Formatting

ងៅក្នងភាសា

Web

ងនាឹះ HTML

ងៅតាមទគមង់ដែលងោក្អនក្ច្ង់បាៃ,

Text)

ដ្ឋក្់ៃូវរូបភាព, បងងកើតតារាង, ដ្ឋក្់ Background ងៅងលើPage, Link ពី Page មួយងៅPage មួយងទៀត, Link ងៅWebsite, ដ្ឋក្់ File សំង

ង, File Video ៃិងអាច្ង្វើឲ្យតួអក្ស

ររត់បាៃងទៀត្ង។ ពាក្យថា Hypertext ាៃអតថៃ័យែូច្ងៅៃរង hyperlink ដែរ ្ឺជាការបងងកើតៃូវតំណភាាប់ពី ទំព័រមួយងៅទំព័រមួយងទៀតងៅក្នង ង្ហទំព័ររបស់ងយើង។ ្មមតាការបងងកើតង្ហទំព័រ ឬ អនក្ច្ូលទសសនាង្ហទំព័រមួយ ្ឺងៅក្នងង្ហទំព័រងនាឹះាៃៃូវទំព័រៃីមួយៗជាងគច្ើៃ ដែល ទំព័រៃីមួយៗគតូវបាៃតភាាប់ច្ូលគ្នន។ ៃិងពាក្យថា Markup Language ្ឺ ជាគបងេទនៃភាសាតបដតងមួយ ងគបើ សគាប់រច្នាៃូវ រូបរាងខាងងគៅបង្ណឹះសគាប់ង្ហទំព័រ ការ ិយា

ល័យដែរ។

ដែលាៃការងរៀបច្ំែូច្គ្ននងៅហនរងក្មមវ ិ្ី

ងែើមបីឲ្យការតបដតងាៃភាពស្សស់សាាត្ឺ គតូវដតយល់ែរងអំពីគ្រឹះ

របស់ភាសាមួយងៃឹះ។ ១. ការសរអសរ HTML ក្នងកាសរងសរៃូ វភាសា

HTML

ងោក្អនក្គតូវដតងគ្នរពងៅតាមរូបមៃតរបស់វា

ងទើ បវាែំងណើរការបាៃ។ ងោក្អនក្អាច្សរងសរវាងៅក្នងក្មមវ ិ្ី មួយច្ំ ៃួៃែូ ច្ជា Notepad, Notepad++, Text editor, Bluefish ឬ Dreamweaver……ជាងែើ ម។

បនាាប់ ពីងោក្អនក្ាៃក្មមវ ិ្ី សគាប់សរងសររួច្ងហើយ ងោក្អនក្គតូវយល់ពីរងបៀប Save File។ ងៅក្នងភាសា HTML ដែលងោក្អនក្បាៃសរងសររួច្ ងោក្អនក្គតូវ Save

ដ្ឋក្់ង្មឹះដបប្ក្៏បាៃដែរ ដតគតូវាៃ Extension .html or .htm (xxx.html or xxx.htm)។

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML ងគកាយងពលដែលងោក្អនក្បាៃ Save ៃូវ File ច្ប់សពវគ្ប់ងហើយ ងោក្អនក្គតូវ Choose ៃូ វ Browser ្មួ យដែលាៃែូ ច្ជា Internet Explorer, Mozilla Firefox, Chrome,….យក្មក្ Run។

២. ស្គាល់ពីធាតុសខា ាំ ន់ៗក្នង ុ HTML ២.១. Elements

Element ាៃៃ័ យថាជាធាត្សំង

ដ្នក្ៃីមួយៗនៃទំព័ររបស់ង្ហទំព័រ

ើងរបស់ HTML ដែលាៃតួនាទីសគាប់្ាក្ៃូវ

ងហើយអវីទំងអស់

ដែលសថិតងៅខាងក្នង្ឺ ទទួលៃូវ

ច្រ រតលក្ខណៈរបស់ element ងនាឹះដតមដង ។ ឧទហរណ៍ អនក្ដ្ឋក្់ៃូវអតថបទ ឬអក្សរងៅ ក្នងelement ..... ាៃៃ័យថាអក្សរ ឬអតថបទ ដែលងៅក្នងងនាឹះៃរងងគទតភាាមដតមដង។ <i>all text or sentence are inside the italic element will be italic.</i>

២.២. Tag Tag ្ឺ ជាពាក្យបញ្ជ ា ដែលគតូវបាៃង្សរងសរងៅច្ងនាាឹះសញ្ជាងបើក្ (<) ៃិង បិទ (>)

ងហើយងគបើងែើមបីគបាប់ងៅ Browser ងអាយយល់ ៃិងបក្ដគប។ Ex: <b>Hello PTC Takeo</b>

<b> ជា Opening tag

</b> ជា Closing tag

ពាក្យ Hello PTC Takeo ជា Contained Text

ភា្ងគច្ើៃនៃការសរងសរ Tag របស់ HTML ្ឺគតូវាៃ Opening Tag ៃិង Closing Tag។ ច្ំងពាឹះ

Opening

Tag

ៃិង

Closing

Tag

ខសគ្ននងដ្ឋយសារសញ្ជា

“

”

ងៅពីមខពាក្យបញ្ជ ា រក្បង្ណឹះ។ ែូច្គ្ននៃរង element ដែរ ដែលងពលខាឹះង្វើឲ្យអនក្ាៃការភាៃ់គច្

ំគ្ននបៃតិច្ ងគពាឹះ

ពាក្យទំងពីរងៃឹះអនក្ងគបើគបាស់ ៃិ ងងៅឆ្លាស់ងៅឆ្លាស់មក្បាៃ ងដ្ឋយមិៃាៃការគបកាៃ់ ខាាប់ងពក្ងនាឹះង

ើយ។ ងហើយអវីដែលាៃការខសគ្ននបៃតិច្ងនាឹះ្ឺ element មួយងក្ើតង

ើង

បាៃអំពី tags ពីរ ្ឺ ដ្នក្ខាងងបើក្ (opening tag) ៃិងដ្នក្ខាងបិទ (closing tag)។ <i> ្ឺ ជា tag ងបើ ក្នៃ element </i> ្ឺ ជា tag បិ ទនៃ element

ដូចន េះក្នុងការដដលអ្នក្នៅន្មេះថា tag ឬក្៏ element ពុុំ មា ខុសន អាស្ស័យនៅនលើការន្រើ្ាស់រុន្ណេះ ។ ២.៣. Attribute

Prepared by Mr.Chanthol

017721080

េះន

ើយគឺ

មេម ៀនHTML Attribute

្ឺជាធាតរបស់

។

Tag

ងែើមបីដក្ដគបៃូវលក្ខណៈរូបរាងរបស់ Tag ែូច្ជា ៖ <font

color>

tag

Attribute space

Prepared by Mr.Chanthol

017721080

ងយើងងគបើ

Attribute

មេម ៀនHTML

ងយើងងគបើ

Tag

ងែើមបីងអាយ

font

Browser

យល់ថាច្ង់បញ្ជ ា ងអាយាៃការដក្ដគបពាក្់ព័ៃធៃរង font ដតងបើងយើងងគបើ Attribute Color ាៃៃ័យថាងយើងច្ង់បូរពណ ត ៌ របស់ font។ ២.៤. Attribute Value ជា្មមតា Attribute ដតងដតាៃៃូវតនមារបស់វាដែលងយើងងៅថា Attribute Value។ Attribute Value ្ឺ អាស្ស័យងៅតាមគបងេទ Attribute Ex: Attribute Align អាច្ាៃ Attribute Value របស់វាែូ ច្ជា Left, Right, Center, Justify ច្ំដណក្ឯ Attribute Color អាច្ាៃ Attribute

របស់វាែូច្ជា

Value

ង្មឹះរបស់ពណ៌ដតមតង

(red,

yellow,

blue,

green,…)

ឬក្៏ងលខក្ូែរបស់ពណ៌ែូច្ជា (FFOOFF, OOAAFF…) ។ ច្ំដណក្ឯ Attribute Value ខាឹះងទៀតជាគបងេទតនមាងលខដតមតងែូច្ជា ៖ <font face=“Arial” color=“red” size=5>

Arial, red ,5 ជា Attribute Value

Justify ជា Attribute Value

Flower.jpg ជា Attribute Value

២.៥. ការងគបើគបាស់ Quotation Mark(“ ”) ច្ំងពាឹះ HTML រាល់ Attribute Value ទំងអស់គតូវសថិតងៅច្ងនាាឹះសញ្ជា (“ ”) បដៃត ងយើងក្៏អាច្អត់ងគបើវាបាៃដែរ គបសិៃងបើ Value ងនាឹះពំាៃែក្ឃ្លា។ Ex:

<img src=Flower.jpg> គតូវ <img src=Flower red.jpg> ខស <img src=”Flower red.jpg”> គតូវ

ឬValue ងនាឹះរួមាៃដតតួអក្សរពី A ងៅ Z ឬ a ងៅ z ងលខពី ០ ងៅ 9 សញ្ជា(hyphen “_”) ឬក្៏សញ្ជា “ . ” ។ គបសិៃងបើ Value ជាអាសយដ្ឋាៃ URLs វ ិញ្ឺ ងយើងគតូវដតងគបើសញ្ជា “ ” ងៃឹះ ងគពាឹះងជៀសវាងការបក្ដគបគច្

ំពីសំ្ក្់ Sever ។

៣. ស្គាល់ពី URL URL

មក្ពីពាក្យថា Uniform Resource Locator ្ឺសំងៅងៅងលើទីតាំង (Part)

របស់ឯក្សារងៅងលើគបព័ៃធ Internet ។ ងៅងពលដែល Visitor ច្ង់ច្ូលងៅ visit website Prepared by Mr.Chanthol

017721080

មេម ៀនHTML ្មួយ ឬ ច្ង់រក្ឯក្សារ្មួយងៅងលើ Internet ្ឺ Visitor គតូវវាយៃូវ Address Ex: Address ទំងអស់ងៃឹះងយើងងៅថា URL ។ ដ្នក្ទី ១ របស់URL

http://www.yahoo.com

ងយើងងៅថា

Scheme។

ថាងតើគតូវង្វើែូច្ងមតច្ច្ំងពាឹះ ដែលងោក្អនក្ធាាប់ង ងហើយវាគតូវបាៃង្

វាជាអនក្គបាប់ងៅែល់

Scheme

Browser

ដែលបគមុងៃរងងបើក្ងនាឹះ។

File

Scheme

ើញញរក្ញាប់ជាងង្ងនាឹះ្ឺ HTTP (Hypertext Transfer Protocol) ។ ជា

Set

Default

ងៅក្នង

Browser

របស់ងយើង

ែូងច្នឹះ

ងហើយបាៃជាងៅងពលដែលងោក្អនក្វាយ Address ្មួយរបស់ website ្មួយ ្ឺងយើងពំចាំបាច្់វាយ

ពីមខ

http://

ដតងៅងពលដែលងោក្អនក្វាយច្ប់ងហើយវាយ

ង

www.yahoo.com

Key

Enter

ស្សាប់ដតង

ើញ

ើយ

http://

ងៅពីមខែដែល។

មេម ៀនទី១

ការចាប្់អ្តើម Web Page ដាំប្ូង

១. ការក្ាំែត់ប្លង់ ងែើមបីអាច្បងងកើត ងហើយពំាៃភាពរងញរនញងនាឹះ

មួយដែលាៃលក្ខណៈគ្ប់គជុងងគជាយ

Website

្ឺងោក្អនក្គតូវដតក្ំណត់បាង់ជាមៃសិៃ។

ក្នងការក្ំណត់បាង់គតូវឆ្ាងកាត់ ៃូវជំ ហ៊ាៃែូ ច្ខាងងគកាម ៖ 1) ក្ំណត់ពីងគ្នលបំណងនៃការបងងកើត Website 2) គបមូលៃូវទិៃិៃ ន ័យ (data) ដែលគតូវយក្មក្ដ្ឋក្់ងលើ Website ទំងអស់។ 3) ដបងដច្ក្ទិៃិនៃ័យងៅតាមគបងេទខសៗគ្នន ៃិងចាប់ង្តើមងរៀបច្ំៃូវាតិកា (Menu)។ 4) ក្ំណត់ច្ំៃួៃ Page ទំងអស់ដែល្ួ រាៃក្នង Website របស់ងោក្អនក្។ Prepared by Mr.Chanthol

017721080

មេម ៀនHTML 5) ្ួរ្ូសបាង់ Website របស់ងោក្អនក្ងៅងលើគក្ដ្ឋសជាមៃសិៃ (ក្ំណត់ថាងតើ Page ្ Link ភាាប់ងៅកាៃ់ Page ្)។ 6) ច្ំណច្ច្ងងគកាយងនាឹះងោក្អនក្្ួរដតដ្ឋក្់ង្មឹះ ងៅតាមគបងេទការងារ

ៃិ ងដ្ឋក្់ក្នង

Folder

File,

File

រូបភាពង្សងៗ

ង្សងៗគ្ននងជៀសវាងការគច្លំ

ៃិងរងញរនញ។ ២. រអប្ៀប្ននការសរអសរ HTML Webpage ភា្ងគច្ើ ៃគតូវបាៃដបងដច្ក្ជាពី រតំ បៃ់្ំៗ ្ឺ head ៃិ ង body។ តំ បៃ់ head

្ឺជាតំបៃ់ដែលងយើងងគបើងែើមបីដ្ឋក្់ៃូវច្ំណងងជើងរបស់

Page។

ងោក្អនក្ក្៏ អាច្ងគបើវា្ងដែរសគាប់ជាជំ ៃួយក្នងការ

engines

ៃិងសគាប់សរងសរៃូវ Script (JavaScript, VB Script…) ។ ច្ំដណក្ឯតំបៃ់ body វ ិញ ជាតំបៃ់ដែលងយើងងគបើសគាប់សរងសរៃូវរាល់ ទំងមូលដែលបងគមើឲ្យការរច្នារបស់ងោក្អនក្។ ងោក្អនក្គតូវអៃវតតងៅតាមទគមង់ែូច្ខាងងគកាម ៖ <html> <head> <title>…………….</title> </head> <body> ………………… ………………… </body> </html>

Prepared by Mr.Chanthol

017721080

Code

ការសរងសរៃូវ

របស់ Code

HTML

របស់

HTML

មេម ៀនHTML

Title

ជាក្ដៃាងដែលអៃញ្ជាតឲ្យងោក្អនក្ដ្ឋក្់ច្ំណងងជើងឲ្យ

Page។

Title

ងោក្អនក្្ួរដតដ្ឋក្់ឲ្យខាីងហើយបញ្ជ ា ក្់ៃ័យងអាយ Page ទំងមូល។ ឧទហរណ៍ Test HTML ែូច្ខាងងគកាម ៖ <html> <head> <title>Test HTML</title> </head> <body> Welcome to the HTML language. </body> </html>

៣. ការអ្ប្ើនូវ Header ក្នង HTML ងោក្អនក្អនក្ដ្ឋក្់ច្ំណងងជើងបាៃ ៦យាងខសៗគ្នន ្ឺ <hn> ដែល n ាៃតនមាពី

១ងៅែល់

៦។

កាល្

ាៃតនមាកាៃ់ដតតូច្

្ឺច្ំណងងជើងអតថបទរបស់ងោក្អនក្កាៃ់ដត្ំ។ សូមងមើលឧទហរណ៍ខាងងគកាម៖ Ex1-1: <html> <head> <title>Test Heading</title> </head> <body> <h1>This is Heading 1</h1> <h2>This is Heading 2</h2> <h3>This is Heading 3</h3> <h4>This is Heading 4</h4> <h5>This is Heading 5</h5> <h6>This is Heading 6</h6> </body> </html>

ក្នង

tag

<hn>

ងោក្អនក្អាច្ងគបើៃូវ

attribute

ដែលងគបើសគាប់ក្ំណត់ច្ំណច្ចាប់ង្តើមពីខាង្មួយ ឬតគមរមទំងសងខាង)។ Ex1-2: <html> <head> <title>Test Heading</title> </head> <body> <h1 align="left">This is Heading 1</h1> <h2 align="center">This is Heading 2</h2> <h3 align="right">This is Heading 3</h3>

Prepared by Mr.Chanthol

017721080

មួយច្ំៃួៃែូច្ជា (ងឆ្វង

សាតំ

Align

ក្្ ត ល

មេម ៀនHTML <h4 align="left">This is Heading 4</h4> <h5 align="center">This is Heading 5</h5> <h6 align="right">This is Heading 6</h6> </body> </html>

៤. ការអ្ប្ើនូវ Paragraph ជា្មមតាងៅក្នងអតថបទជាភាសាអង់ ង្ាសង្ដតងដតដច្ក្ងច្ញជា ដែលាៃៃ័យជាភាសាដខមរថា

ក្ថាខ័ ណឌ

HTMLវ ិញក្៏អៃញ្ជាតងអាយងោក្អនក្ដច្ក្អតថបទងៅងលើ

Paragraph

ច្ំ ដណក្ឯងៅក្នង Website

របស់ងោក្អនក្ជា

Paragraph ្ងដែរ ងដ្ឋយងោក្អនក្គតូវងគបើ គបាស់ៃូវ <p> tag។ <p>……………..text…………….</p>

ងោក្អនក្ក្៏អាច្ងគបើ Attribute align បាៃ្ងដែរ <p aling=”left, right, center or justify “>………….text………..</p> Ex1-3: <html> <head> <title> Paragraph Sample</title> </head> <body> <h1 align="center">Paragraph Sample</h1> <p align="justify">Writing up a research for publication is good for both ourselves and others because of a number of reasons. First, find the topic for publication it is a crucial step. It means that if we found the good topic, we need to publish the paper It is the knowledge product that demonstrates to people that we have found something new. Writing will not be easy at first, but it does get easier and easier if you practice the rule step. The next you need to know that our topic did anyone public or not it have two option for this point if anyone published, we can not public it again but we can discovered new in this topics and we can add it to public again. And the next step about this public we need to start sketch, an outline of what we want to talk about in the paper it mean that. Once we have written down a bound of ideas and topic, then we can divide them up into logical groupings and move them around in your word document to create a nice “flow” of information. </p> </body> </html>

៥. ការចុុះអដើមប្នាត់ ក្នង HTML ពំទទួលសាាល់ៃូវការច្ឹះងែើមបនាាត់ដែលងោក្អនក្បាៃវាយ Key Enter ងៅក្នងការសរងសរ

Code

ងនាឹះង

ែូងច្នឹះងហើយគបសិៃងបើងោក្អនក្ច្ង់ច្ឹះងែើមបនាាត់ងោក្អនក្គតូវងគបើគបាស់ <br> tag។ Ex1-4: <html> <head> <title>Break Line</title> </head> <body> Hello!

Prepared by Mr.Chanthol

017721080

ើយ

មេម ៀនHTML How are you today? I'm pretty well. </body> </html>

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML

Ex1-5: <html> <head> <title>Break Line</title> </head> <body> Hello!<br> How are you today?<br> I'm pretty well. </body> </html>

៦. ការគូសប្នាត់ ក្នង

ពំាៃ

HTML

្មួយដែលអៃញ្ជាតឲ្យងោក្អនក្ទញបនាាត់យក្មក្្ូសែូច្ ងនាឹះង

Tool Microsoft

Word

ើយ ែូងច្នឹះងហើយគបសិៃងបើងោក្អនក្ច្ង់្ូស ងោក្អនក្គតូវងគបើ <hr> tag ។

Size ្ឺជាក្គាស់របស់បនាាត់ ដែល x ្ិតជា pixel

Width ្ឺជាគបដវងរបស់បនាាត់ ដែល y ្ិតជា pixel ឬ ភា្រយ(%)។

Color

ងគបើសគាប់ដ្ឋក្់ពណ៌ងអាយបនាាត់

ងោក្អនក្អាច្ដ្ឋក្់ង្មឹះ

ឬក្៏ងលខក្ូែរបស់ពណ៌ក្៏បាៃដែរ (Red or #FFOOBB)។ Ex1-7: <html> <head> <title>Break Line</title> </head> <body> <hr> <hr size="5"> <hr size="10" width="50%"> <hr align="center" size="10" width="50%" color=red> <hr align="right" size="15" width="50%" color=blue> </body> </html> Ex1-8: <html> <head> <title> Paragraph Sample</title> </head> <body> <h1 align="center">Paragraph Sample</h1> <p align="justify"> Writing up a research for publication is good for both ourselves and others because of a number of reasons. First, find the topic for publication it is a crucial step. It means that if we found the good topic, we need to publish the paper It is the knowledge product that demonstrates to people that we have found something new. Writing will not be easy at first, but it does get easier and easier if you practice the rule step. The next you need to know that our topic did anyone public or

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML not it have two option for this point if anyone published, we can not public it again but we can discovered new in this topics and we can add it to public again. And the next step about this public we need to start sketch, an outline of what we want to talk about in the paper it mean that. </p> Once we have written down a bound of ideas and topic, then we can divide them up into logical groupings and move them around in your word document to create a nice "flow" of information.<br><br> <hr align="center" size="5" width="30%" color=blue> </body> </html>

៧. Preformatted Text: (Pre) ងពលខាឹះងោក្អនក្ង្វើការគ្ប់គ្ងងៅងលើអតថបទរបស់ងោក្អនក្ងដ្ឋយពំច្ង់ងអាយ Browser

ង្វើការផ្លាស់បូរៃូ ត វទគមង់

ែូច្ជាការច្ឹះងែើមបនាាត់ជាងែើម

ឬលក្ខណៈដែលងោក្អនក្បាៃក្ំ ណត់ ងនាឹះង ដែលជា្មមតា្ឺ

Browser

ពំទទួលសាាល់ង

ើ យ។ ើយ

ៃិងទទួលសាាស់ដតមួយ្ឺ space បង្ណឹះច្ំងពាឹះការែក្ឃ្លា។ ែូងច្នឹះងែើមបីងអាយ Browser ទទួលសាាល់្ឺង្ងគបើគបាស់ <pre> tag។ ដែល <pre> ្ឺជា tag មួយដែលង្ងគបើគបាស់ងែើមបីឲ្យ អក្សរច្ឹះបនាាត់ងៅគតង់ ក្ដៃាងដែលអនក្ច្ឹះ Enter។ ក្នងមួយអក្សរ ឬមួយបនាាត់ងោក្អនក្ អាច្ច្ឹះ Enter បនាមៃក្ដៃាងក្៏បាៃ ងដ្ឋយគគ្នៃ់ដតងោក្អនក្ងគបើគបាស់ <pre> ងែើមបីង្វើការ ងកាតបវា។ Ex1-9: <html> <head> <title>Preformatted Text</title> </head> <body> <pre> Takeo Provincial Training Center </pre> </body> </html>

៨. Center: (center) ងៃឹះ្ឺជា

tag

មួយដែលអៃញ្ជាតងអាយងោក្អនក្តគមរមអតថបទរបស់ងោក្អនក្ងអាយងៅច្ំក្្ ត លទំព័រ ។

គបសិៃងបើងោក្អនក្ច្ង់ងអាយដ្នក្្មួយនៃអតថបទ

ឬក្៏អតថបទរបស់ងោក្អនក្ទំងមូលងៅច្ំ ក្្ ត លទំ ព័រងនាឹះងោក្អនក្គគ្នៃ់ ដតដ្ឋក្់ បញ្ូច ល អតថបទងនាឹះងៅច្ងនាាឹះ <center> ៃិង </center> ជាការងស្សច្។ Ex1-10: <html> <head>

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML <title> Align Center</title> </head> <body> <center> <h1>Paragraph Sample</h1> <p> Writing up a research for publication is good for both ourselves and others because of a number of reasons. First, find the topic for publication it is a crucial step. It means that if we found the good topic, we need to publish the paper It is the knowledge product that demonstrates to people that we have found something new. Writing will not be easy at first, but it does get easier and easier if you practice the rule step. The next you need to know that our topic did anyone public or not it have two option for this point if anyone published, we can not public it again but we can discovered new in this topics and we can add it to public again. And the next step about this public we need to start sketch, an outline of what we want to talk about in the paper it mean that. Once we have written down a bound of ideas and topic, then we can divide them up into logical groupings and move them around in your word document to create a nice "flow" of information. </center> </body> </html>

៩. Address: (address) ជា្មមតាងយើងងគបើៃូវ

tag

ងៃឹះងែើមបីដ្ឋក្់ៃូវអាសយដ្ឋាៃង្សងៗងៅក្នងទំព័ររបស់ងោក្អនក្។ ងយើងងគច្ើៃសរងសរវាង

ើងងៅច្ងបញ្ចប់នៃទំព័រៃីមួយៗរបស់ង្ហទំព័រែូច្ជា

ង្មឹះអនក្ៃិពៃធ អាសយដ្ឋាៃ email ឬងលខទូរស័ពាជាងែើម។ ងៅងពលដែលងោក្អនក្ងគបើ Tag ងៃឹះ browser ៃរ ងបងាាញទគមង់ ជាអក្សរងគទត។ Ex1-11: <html> <head> <title> Address</title> </head> <body> <h1 align="center">Paragraph Sample</h1> <p align="justify"> Writing up a research for publication is good for both ourselves and others because of a number of reasons. First, find the topic for publication it is a crucial step. It means that if we found the good topic, we need to publish the paper It is the knowledge product that demonstrates to people that we have found something new. Writing will not be easy at first, but it does get easier and easier if you practice the rule step. The next you need to know that our topic did anyone public or not it have two option for this point if anyone published, we can not public it again but we can discovered new in this topics and we can add it to public again. And the next step about this public we need to start sketch, an outline of what we want to talk about in the paper it mean that. </p> Once we have written down a bound of ideas and topic, then we can divide them up into logical groupings and move them around in your word document to create a nice "flow" of information.<br><br> <hr align="center" size="5" width="30%" color=blue> <center> <p>For more information please contact me:</p> <address> Name: Ly Sambath<br> Tel: 012 777 777<br> Email: sambath_ly@yahoo.com

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML </address> </center> </body> </html>

អមអរៀនទី ២

ការអរៀប្ចាំអតថប្ទ ១. ការផ្លលស់ប្រ្ប្អេទតួ តូ អក្សរ

Tag font អៃញ្ជាតងអាយងោក្អនក្ង្វើការផ្លាស់បូរៃូ ត វគបងេទតួ អក្សរ ទំ ហំ

ពណ៌របស់តួអក្សរងៅតាមដ្នក្ង្សងៗរបស់អតថបទ។ ងែើ មបីផ្លាស់បូរគបងេទតួ ត អក្សរងយើងគតូវងគបើ ៖

<font face= “font name”>………text……..</font> Ex2-1: <html> <head> <title>Font Tag</title> </head> <body> <font face="Arial"> Writing up a research for publication is good for both ourselves and others because of a number of reasons. First, find the topic for publication it is a crucial step. It means that if we found the good topic, we need to publish the paper It is the knowledge product that demonstrates to people that we have found something new. </font> <br> <br> <font face="Lucida Handwriting"> Writing will not be easy at first, but it does get easier and easier if you practice the rule step. The next you need to know that our topic did anyone public or not it have two option for this point if anyone published, we can not public it again but we can discovered new in this topics and we can add it to public again. </font> </body> </html>

២. ការផ្លលស់ប្រពែ តូ ៌ៈ Color Attribute

ងោក្អនក្អាច្ងគបើ Color Attribute ងែើមបីង្វើការក្ំណត់ៃូវពណ៌របស់តួអក្សរ។

ងែើ មបីបូរៃូ ត វពណ៌របស់តួអក្សរងោក្អនក្គតូវ៖

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML </head> <body> <font color="blue"> Writing up a research for publication is good for both ourselves and others because of a number of reasons. First, find the topic for publication it is a crucial step. It means that if we found the good topic, we need to publish the paper It is the knowledge product that demonstrates to people that we have found something new. </font> <br> <br> <font face="Lucida Handwriting" color="red"> Writing will not be easy at first, but it does get easier and easier if you practice the rule step. The next you need to know that our topic did anyone public or not it have two option for this point if anyone published, we can not public it again but we can discovered new in this topics and we can add it to public again. </font> </body> </html>

៣. ការផ្លលស់ប្រទាំ តូ ហត ាំ ួអក្សរ៌ៈ Size Attribute

ងោក្អនក្អាច្ងគបើ size attribute ងែើមបីង្វើការផ្លាស់បូរៃូ ត វទំហំតួអក្សរ។

ជាទូងៅតនមាទំហំរបស់តួអក្សរឋិតងៅច្ងនាាឹះពី ១ ងៅែល់ ៧។ រងបៀបសរងសរ៖ <font size= “n”>………text……..</font>

ដែល n ជាច្ំៃួៃ្ត់ាៃតនមាចាប់ពី ១ ងៅែល់ ៧។ Ex2-3: <html> <head> <title>Font Tag</title> </head> <body> <font color="blue" size="5"> Writing up a research for publication is good for both ourselves and others because of a number of reasons. First, find the topic for publication it is a crucial step. It means that if we found the good topic, we need to publish the paper It is the knowledge product that demonstrates to people that we have found something new. </font> <br> <br> <font face="Lucida Handwriting" color="red" size="2"> Writing will not be easy at first, but it does get easier and easier if you practice the rule step. The next you need to know that our topic did anyone public or not it have two option for this point if anyone published, we can not public it again but we can discovered new in this topics and we can add it to public again. </font> </body> </html> Ex2-4: <html> <head>

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML <title>Font Tag</title> </head> <body> <font size="1">1</font> <font size="2">2</font> <font size="3">3</font> <font size="4">4</font> <font size="5">5</font> <font size="6">6</font> <font size="7">7</font> <font size="6">6</font> <font size="5">5</font> <font size="4">4</font> <font size="3">3</font> <font size="2">2</font> <font size="1">1</font> </body> </html>

៤. ការអ្ប្ើ tag big and small: + <big> ងគបើ សគាប់ បងងកើៃទំ ហំតួអក្សរ្ំ ជាងអក្សរដែលងៅជំ វ ិញវា។ + <small> ងគបើសគាប់បញ្ចឹះទំ ហំតួអក្សរងអាយតូច្ជាងអក្សរដែលងៅជំ វ ិញវា។ Ex2-6: <html> <head> <title>Font Tag</title> </head> <body> <big>Lorem Ipsum is simply dummy text </big> of the printing and typesetting industry. <br> <br> <small>Lorem Ipsum is simply dummy text </small> of the printing and typesetting industry. </body> </html>

៥. ការអ្ប្ើអក្សរដិត និងអក្សរអ្ទត៌ៈ Bold and Italic HTML អៃញ្ជាតងអាយងោក្អនក្ង្វើតួអក្សរែិ ត (Bold) ៃិ ងតួអក្សរងគទត (Italic)

ែូច្ក្នង Microsoft Word បាៃដែរ។

Note:<b>….</b>ឬ<strong>…<strong>

ៃិង <i>…..</i>ឬ<em>……..</em> រងបៀបសរងសរ៖ <b>….Text….</b> សគាប់ អក្សរែិ ត <i>……Text……</i> សគាប់ អក្សរងគទត Ex2-7: <html> <head> <title>bold and Italic tag</title>

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML </head> <body> <b>This is a bold text.</b> <br> <i>This is a italic text.</i> </body> </html>

៦. ការអ្ប្ើ Supperscript និង Subscript : (sup) and (sub) + Supperscript ងគបើ សគាប់ ដ្ឋក្់ តួអក្សរជាលក្ខណៈ សវ័យ្ណែូច្ជា(X2, Y3, a2, b2…..)។

រងបៀបសរងសរ៖ <sup> វាយងលខ ឬអក្សរដែលគតូវដ្ឋក្់ Supperscript </sup> + Subscript ងគបើ សគាប់ដ្ឋក្់ តួអក្សរជាលក្ខណៈ សៃាសសៃ៍ ែូច្ជា(H2O, CO2,...)។

រងបៀបសរងសរ៖ <sub> វាយងលខ ឬអក្សរដែលគតូវដ្ឋក្់ Subscript </sub> Ex2-8: <html> <head> <title>sup and sub tag</title> </head> <body> <font size="5"> (a<sup>2</sup> + b<sup>2</sup>) = (a - b)(a + b) <br> <br> H<sub>2</sub>O <br> <br> CO<sub>2</sub> </font> </body> </html> A Brief Look at C++ Bjarne Stroustrup AT&T Bell Laboratories Murray Hill, New Jersey 07974 ABSTRACT me key aspects of what C++ is and of how C++ has developed ective is that of an experienced C++ user looking at C++ as a are made to compare C++ to other languages, though I have ons that I have often heard asked by Lisp programmers. grown and changed over the years. For me, the improvements t

មមមមមមម ម Prepared by Mr.Chanthol

017721080

មេម ៀនHTML មេម ៀនទី៣

List

ងៅក្នងងមងរៀៃងៃឹះងយើងៃរ ងបងាាញងោក្អនក្អំ ពីរងបៀបបងងកើត Lists ក្នង HTML ៃិងវ ិ្ីទំង ៣ ក្នងការបងាាញព័ត៌ាៃជាទគមង់ lists ដែលរួមាៃ ៖   

Unnumbered lists or Unordered lists (bulleted) Number lists or Order lists Definition lists ងោក្អនក្្ួរជាទីចាប់អារមមណ៍ លឹះគតាដតងោក្អនក្ាៃសមតថភាពខាងរច្នា។

ក្នងការដ្ឋក្់រប ូ ភាពមក្ងលើ

ងយើងគតូវងគបើៃូវ

Webpage

Tag

ៃិង

Attribute

មួយច្ំៃួៃែូច្ខាងងគកាម ៖ ១. រអប្ៀប្ប្អងកើត List : ក្នងការបងងកើតទគមង់ list ្ឺ វាាៃលក្ខណៈងាយបំ្ត សូមងមើលជំហៃខាងងគកាម៖ ជំហៃទី ១៖ វាយៃូវ opening tag របស់គបងេទ list ្មួយដែលងោក្អនក្ច្ង់បងងកើត ជំហៃទី ២៖ វាយៃូវ <li> ៃិងវាយ list item ជំហៃទី ៣៖

បនាាប់ពីងោក្អនក្វាយៃូវ

list

item

រួច្រាល់ងហើយងោក្អនក្គតូវបិទ

tag

វ ិញ្ឺវាយ </li> ជំហៃទី ៤៖

ងោក្អនក្អាច្វាយ

<li>

បាៃងគច្ើៃងៅតាមតគមូវការរបស់ងោក្អនក្

បនាាប់មក្ងោក្អនក្គតូវបិទៃូវ tag របស់គបងេទ List វ ិញ។ Ex3-1: <html> <head> <title>List Tag</title> </head> <body> <ol> <li>Phnom Penh</li> <li>Sihanok Vill</li> </ol> </body> </html>

ែូច្ដែលងោក្អនក្បាៃង

ើញៃូ វក្នងឧទហរណ៍ខាងងលើរច្ ួ មក្ងហើយ

ែំបូងងោក្អនក្ចាំបាច្់គតូវដតវាយ បនាាប់មក្ងទើបងោក្អនក្អាច្វាយៃូវ

<ol> <li>បាៃ។

ដែលជាគបងេទរបស់ ច្ំងពាឹះច្ងនាាឹះ

ងោក្អនក្អាច្វាយៃូវឃ្លាង្សងៗដែលងោក្អនក្ច្ង់បងាាញ។

<li>

ច្ំងពាឹះ

list

ៃិង

</li> <li>

ងោក្អនក្អាច្វាយបាៃងគច្ើៃែងងៅតាមតគមូវការរបស់ងោក្អនក្ងពាល្ឺគ្នមៃដែៃក្ំណត់ ង

ើ យ។

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML

២. Unnumbered lists: <ul> ul ជាទគមង់ list គ្នមៃងលខលំដ្ឋប់ ដែលវាាៃលក្ខណៈែូច្ងៅៃរង Bullet ងៅក្នង Microsoft Word ដែរ។ ងយើងដតងគតូវការងគបើវាងគច្ើ ៃក្នងការរច្នាៃូ វង្ហទំ ព័រជាមួ យៃរង font tag ងែើ មបីបងាាញៃូ វធាតង្សងៗលក្ខណៈជា item។

ងោក្អនក្គតូវវាយៃូវ <ul>……………..</ul> ងៅច្ងនាាឹះ <ul> ៃិង </ul> ងោក្អនក្អាច្វាយ <li> បាៃងគច្ើៃ។ Ex3-2: <html> <head> <title>Font Tag</title> </head> <body> <ul> <li>Information Technology</li> <li>English</li> <li>Management</li> </ul> </body> </html>

៣. ្ប្អេទ Attribute រប្ស់ ul: Attribute type របស់ ul ងៃឹះាៃ attribute value បី ្ឺ disc, circle ៃិ ង square

ដែលងោក្អនក្អាច្ងគបើវាងែើមបីក្ំណត់គបងេទជាក្់ោក្់របស់ bullet ។ សូមងមើលឧទហរណ៍ខាងងគកាម៖ Ex3-3: <html> <head> <title>Font Tag</title> </head> <body> <ul type="disc"> <li>This is type of disc.</li> </ul> <ul type="circle"> <li>This is type of circle.</li> </ul> <ul type="square"> <li>This is type of square.</li> </ul> <ul> <li>Default</li> </ul> </body> </html>

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML ៤. Numbered List: <ol> ងយើងងគបើ

តាមលំដ្ឋប់ងលខងែើមបីង្វើការពៃយល់

list

ឬក្៏បងាាញពី រវ ិ្ីង្វើអីងវ ៅតាមជំ ហៃៗ។ ច្ំងពាឹះវ ិ្ីបងងកើតវ ិញ្ឺាៃលក្ខណៈគបហក្់គបដហលងៅៃរងការបងងកើត

list

ងដ្ឋយមិៃតាមលំដ្ឋប់ងលខដែរ។ Ex3-4: <html> <head> <title>ol tag</title> </head> <body> <ol> <li>Microsoft Word 2013.</li> <li>Microsoft Excel 2013.</li> <li>Microsoft PowerPoint 2013.</li> </ol> </body> </html>

៥. ្ប្អេទ Attribute រប្ស់ ol: ច្ំងពាឹះ

Order

List

ាៃ

ដែលងយើងងគបើវាសគាប់ដក្ដគបគបងេទរបស់ Attribute

Attribute List

ពីរ្ឺ

type

and

start

ៃិងតនមាចាប់ង្តើមរបស់លំដ្ឋប់ងលខ។

ងយើងងគបើងែើមបីផ្លាស់បូរគបងេទរបស់ ត លំដ្ឋប់ ងលខងៅជាទគមង់ ង្សងៗ

type

សូមងមើលតារាងខាងងគកាម៖

តនមារបស់ Attribute

អតថៃ័យ

អក្សរ្ំ (A, B, C, …)

អក្សរតូច្ (a, b, c, …)

ងលខរូាំង្ំ (I, II, III, …)

ងលខរូាំងតូច្ (i, ii, iii, …)

តនមាជាងលខ ងហើយវាជាតនមា Default របស់ List

Ex3-5: <html> <head> <title>ol tag</title> </head> <body> <ol type="A"> <li>Microsoft Word 2013.</li> <li>Microsoft Excel 2013.</li> <li>Microsoft PowerPoint 2013.</li>

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML </ol> <ol type="I"> <li>Information Technology</li> <li>English</li> <li>Management</li> <li>Marketing</li> </ol> </body> </html>

ច្ំដណក្ឯ Attribute start វ ិញ្ឺងយើងងគបើងែើ មបីក្ំណត់តនមាចាប់ង្តើមនៃលំដ្ឋប់ងលខ ឬ តួអក្សរ។ សូមងមើលឧទហរណ៍ខាងងគកាម៖ Ex3-6: <html> <head> <title>ol tag</title> </head> <body> <ol type="A" start="5"> <li>Microsoft Word 2013.</li> <li>Microsoft Excel 2013.</li> <li>Microsoft PowerPoint 2013.</li> </ol> <ol type="I" start="3"> <li>Information Technology</li> <li>English</li> <li>Management</li> <li>Marketing</li> </ol> </body> </html>

៦. ្ប្អេទ Attribute រប្ស់ li: សគាប់

Attribute

ក្៏ាៃតនមារបស់វាពីរដែរ្ឺ

លក្ខណៈងគបើគបាស់របស់វាែូ ច្ច្ំណច្ខាងងលើដែរ វ ិញ្ឺងយើងងគបើងែើមបីក្ំណត់ តនមារបស់ li ។ Ex3-7: <html> <head> <title>li tag</title> </head> <body> <ol> <li>Information Technology</li> <li type="a">English</li> <li type="I">Management</li> <li type="A" value="7">Marketing</li> </ol>

Prepared by Mr.Chanthol

017721080

type

ច្ំដណក្ឯ

ៃិង

value

។ value

មេម ៀនHTML </body> </html>

៧. ការអ្ប្ើ្ាស់ Definition List: <dl> ងោក្អនក្្ួរដតងគបើ

Definition

List

ងៅងពលដែលងោក្អនក្ង្វើការងអាយ

ៃិយមៃ័យងៅពាក្យ ឬក្៏ឃ្លា្មួយ។ សូមងមើលរងបៀបសរងសរែូច្ខាងងគកាម៖ <dl> <dt>គតូវវាយពាក្យ ឬ ឃ្លាដែលគតូវងអាយៃិ យមៃ័ យ</dt> <dd>វាយៃូ វៃិយមៃ័ យរបស់ពាក្យ ឬ ឃ្លា</dd> </dl> Ex3-8: <html> <head> <title>Definition List</title> </head> <body> <h1 align="center">Definition List</h1> <dl> <dt>HTML</dt> <dd>HTML(Hypertext Markup Language) is the basic language used to write web pages. HTML is a mark up language and not a full-blown propramming language so is therefore essentially static in nature.HTML is parsed by your web browser when a web page downloads and consists of tags (commands to tell the browser how to render the text, where to load in graphics etc on the web page) as well as the actual text.</dd> </dl> <dl> <dt>Markup Language</dt> <dd>Markup Language is a language that has codes for indicating layout and styling(such as boldface, italics, paragraphs, placement of graphics, etc) within a text file. Widely used markup languages include SGML(Standard General Markup Language) and HTML. </dd> </dl> </body> </html>

អមអរៀនទី ៤

ការដាក្់ពែ និង ងៅក្នងងមងរៀៃងៃឹះ

រ ូប្ភាពអៅក្នងអតថ ប្ទ (COLOR ុ AND IMAGE)

ជាែំបូងងយើងៃរងង្វើការបងាាញងោក្អនក្អំពីរប ូ មៃតនៃការងគបើពណ៌ខាឹះ ជាពិងសស្ឺ ងលខក្ូែរបស់ពណ៌ងៅក្នងអតថបទជា ៃិងច្ំៃច្បនាាប់មក្ងទៀតងយើងៃរងបងាាញងោក្អនក្អំ ពីការងគបើ រប ូ ភាពងៅក្នងអតថបទ Prepared by Mr.Chanthol

017721080

HTML

មេម ៀនHTML ការតគមរមរូបភាពជាមួយៃរងអតថបទ

ការយក្រូបភាពមក្ដ្ឋក្់ងលើ

រងបៀបងរ ើសគបងេទរូបភាពដែលអាច្ងគបើ ក្នង

ង្ហទំ ព័រ

Page

ៃិ ងការដ្ឋក្់ រប ូ ភាពងអាយងៅ

Background របស់អតថបទ។

១. តនមលរប្ស់ Color (Color Value) ងៅក្នង

HTML

ាៃធាតជាងគច្ើៃដែលអាច្ងគបើជាមួយៃរង

Attribute

color

ជាពិងសសជាមួយៃរងអតថបទ។ ច្ំងពាឹះការងគបើៃូវ Attribute color ងៃឹះ្ងដែរ្ឺតនមា (attribute value) របស់វា្ឺ ងោក្អនក្អាច្ដ្ឋក្់ ជាង្មឹះរបស់ក្៏បាៃ ឬក្៏ ដ្ឋក្់ ងលខក្ូ ែដតមតងក្៏ បាៃដែរ

។ ខាងងគកាមងៃឹះជាតារាងដែលបញ្ជ ា ក្់ពីង្មឹះ ៃិងងលខក្ូែរបស់ពណ៌ ៖ Name

RGB Value

Name

RGB Value

Aqua

#00FFFF

Navy

#000080

Black

#000000

Olive

#808000

Blue

#0000FF

Purple

#800080

Fuchsia

#FF00FF

Red

#FF0000

Gray

#808080

Silver

#C0C0C0

Green

#008000

Teal

#008080

Lime

#00FF00

White

#FFFFFF

Maroon

#800000

Yellow

#FFFF00

ច្ំងពាឹះការងគបើៃូវពណ៌ងៃឹះ្ងដែរ ៃិងពណ៌របស់

Background

ងោក្អនក្្ួរដតងគជើសងរ ើសៃូវពណ៌តួអក្សរ

ងអាយសីគ្នន

ងែើមបីងជៀសវាងការងគបើពណ៌ងគច្ើៃ

ដែលអាច្ប្ ត លងអាយ Website របស់អនក្ាៃភាពមិៃ្ួរងអាយទក្់ទញ។ ២. តនមលរប្ស់ RGB Color (RGB Color Value) ងៅក្នង Computer វា្ាក្ៃូវពណ៌ងម ៣សំខាៃ់្ឺ គក្ហម នបតង ៃិង ងខៀវ(Red, Green and

Blue)

ដែលាៃពាក្យកាត់្ឺ

។

RGB(#rrggbb)

គបសិៃងបើងោក្អនក្ច្ង់បាៃៃូវពណ៌ង្សងងទៀតងោក្អនក្គតូវយក្ពណ៌ងមទំងបីងៃឹះមក្ ោយគ្នន

(ក្ំណត់តនមារបស់ពណ៌ងមទំងបី)។

ងៅងពលដែលងោក្អនក្ងគបើងលខក្ូែងោក្អនក្គតូវដ្ឋក្់សញ្ជា ងហើយបនាាប់មក្ងទៀត្ឺងលខក្ូែ

(rrggbb)

ងៃឹះងៅពីខាងមខ

ដែលតនមារបស់វា្ឺងយើង្ិតជា

number ្ឺ ចាប់ ពី 00 រហូតែល់ FF ឧទហរណ៍ ពណ៌គក្ហមសទធ្ឺ FF0000។

៣. ការអ្ប្ើ្ាស់នូវរ ូប្ភាពក្នងអតថ ប្ទ ុ

Prepared by Mr.Chanthol

017721080

Hexadecimal

មេម ៀនHTML ក្នង Page

Page

គបសិៃងបើងោក្អនក្ងគបើពណ៌របស់តួអក្សរងអាយសីគ្ននងៅៃរងន្ារបស់

(Background)

ងនាឹះ

Page

របសងោក្អនក្រ រតដតាៃភាព្ួរងអាយទក្់ទញ

ដតគបសិៃងបើងោក្អនក្ច្ង់ងអាយវាកាៃ់ដតសាាតជាងងៃឹះងទៀត ងនាឹះងោក្អនក្ចាំបាច្់គតូវដតដ្ឋក្់រប ូ ភាព។

ខាងងគកាមងៃឹះ

ងោក្អនក្ៃរ ងបាៃដសវងយល់ពីគបងេទរបស់រប ូ ភាព ៃិ ងវ ិ្ី នៃការដ្ឋក្់រប ូ ភាព៖ ៣.១. ្ប្អេទរប្ស់រ ូប្ភាព រូបភាពដែលងយើងងគបើក្ងងពលបច្ច ន បបៃនាៃងគច្ើៃគបងេទ្ស់ ច្ំដណក្ឯគបងេទៃីមួយៗាៃលក្ខណៈពិងសសខសៗគ្ននដែរ ែូច្ជាគបងេទខាឹះាៃទំហំតូច្ដត្ណភាពមិៃសូវលា ឯគបងេទខាឹះងទៀតជាគបងេទរូបភាពដែលាៃច្លនា។

ងយើងអាច្សាាល់

គបងេទៃីមួយៗបាៃងដ្ឋយសារ Extension សូមងមើលតារាងខាងងគកាមដែលបញ្ជ ា ក្់ពីគបងេទ File ៃី មួយៗ៖ Description

Extension

GIF image

.gif

JPEG image

.jpg or .jpeg

Progressive JPEG image

.pjpg

Portable network graphic

.png

Computer Graphics Metafile

.cgm

Windows Bitmap image

.bmp

PICT image

.pict

Adobe Acrobat file

.pdf

Encapsulate PostScript

.eps

PostScript file

.ps

TIFF image

.tiff

XBM bitmap image

.xbm

៤. ការដាក្់រ ូប្ភាពក្នងអតថ ប្ទ ុ

ក្នងអតថបទងោក្អនក្អាច្ដ្ឋក្់ រប ូ ភាពគ្ប់ គបងេទទំងអស់ែូច្ជា

ឬក្៏រប ូ ភាពទំងមូលដតមតង។ បញ្ជ ា ងែើមបីងអាយ

logo

ក្នងការដ្ឋក្់ រប ូ ភាពងោក្អនក្ចាំបាច្់ គតូវវាយៃូ វ

Browser

យល់។

banner command

ខាងងគកាមងៃឹះ្ឺជារងបៀបនៃការងគបើ

ៃិងរងបៀបនៃការសរងសរ៖ <img src="Image Name" >ដែល Image Name គតូវរួមបញ្ូច លទំង extension របសវា្ង។

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML

សម្គាល់ ក្នងការងៅងៅរូបភាពយក្មក្ដ្ឋក្់ ងៅងលើ

Page

ងោក្អនក្គតូវាៃការគបុងគបយ័តនច្ំងពាឹះទីតាំងរបស់រប ូ ភាព (image path) ។ ាៃៃ័យថា គបសិៃងបើរប ូ ភាពសថិតក្នងទី តាំង

(Folder)

ដតមួយជាមួយៃរង

ងនាឹះងោក្អនក្ពំចាំបាច្់ដ្ឋក្់ទីតាំងង

ើយ្ឺដ្ឋក្់ដតង្មឹះដតបង្ណឹះ

file

html

ដតគបសិៃងបើ ឋិតងៅទីតាំងខសគ្ននវ ិញងោក្អនក្គតូវដ្ឋក្់បញ្ូច លទី តាំងដែលរូបភាពងនាឹះឋិត ងៅ ជាមួយ្ង។

Ex4-1: <html> <head> <title>Insert Image</title> </head> <body> <img src="1.JPG"> </body> </html>

ងោក្អនក្ក្៏អាច្ដ្ឋក្់ៃូវរូបភាពជាមួយៃរងអតថបទបាៃ្ងដែរ។ មិៃដតបង្ណឹះងោក្អនក្ក្៏អាច្តគមរមដ្មសងខាងរបស់វាបាៃងទៀត្ង។ សូមងមើលឧទហរណ៍ខាងងគកាម៖ Ex4-2: <html> <head> <title>Insert Image</title> </head> <body> <h2>Image Element</h2> HMTL support the ability to display embedded images within textual documents. The syntax for an embedded image is similar to het one used for links. The image itself is pointed to with a URL. Please see my picture that i use with text. <img src="2.jpg"> </body> </html>

៥. ត្មឹមណគមរប្ស់រ ូប្ភាពអៅជាមួយនឹងអក្សរ ងោក្អនក្អាច្ង្វើការតគមរមរូបភាពងៅខាងងឆ្វង

ឬក្៏ខាងសាតអ ំ ក្សរបាៃ។

ជា្មមតាងៅងពលដែលងោក្អនក្ដ្ឋក្់បញ្ូច លគ្ននរវាងអតថបទជាមួ យៃរងរូបភាពងោក្អនក្ ចាំបាច្់គតូវង្វើការតគមរមងៅខាងងឆ្វង

ឬក្៏ខាងសាតងំ ទើប

របស់ងោក្អនក្ងមើលងៅាៃលក្ខណៈសាាត

ៃិង្ួរជាទីចាប់អារមមណ៍។

តារាងខាងងគកាមបងាាញងោក្អនក្ អំពី attribute value របស់ align attribute ។

Prepared by Mr.Chanthol

017721080

Page

មេម ៀនHTML Value

អតថៃ័យ

Top

តគមរមអតថបទងៅពីងលើរប ូ ភាព

Middle

តគមរមអតថបទងៅក្្ ត លរូបភាព

Bottom

តគមរមអតថបទងអាយងសមើងៅៃរងជួរបនាាត់របស់រប ូ ភាព វា្ឺជាតនមា default

Left

តគមរមរូបភាពងៅដ្នក្ខាងងឆ្វងនៃផ្លាំង Windows

Right

តគមរមរូបភាពងៅដ្នក្ខាងសាតនំ ៃផ្លាំង Windows

សូមងមើលឧទហរណ៍ខាងងគកាម៖ Ex4-3: <html> <head> <title>Insert Image</title> </head> <body> <h2>Image Element</h2> <img src="2.jpg" align="right"> HMTL support the ability to display embedded images within textual documents. The syntax for an embedded image is similar to het one used for links. The image itself is pointed to with a URL. Please see my picture that i use with text. <h3>Align Attribute</h3> Browser generally display an embedded image with the bottom of the image aligned with the text in the document. For those of you who wish to align your images in some other manner, the IMG tag offers the ALIGN option. </body> </html>

៦. ការក្ាំែត់ទាំហរាំ ប្ស់រ ូប្ភាព ងៅងពលដែលងោក្អនក្យក្រូបភាពងៅដ្ឋក្់ក្នង ងដ្ឋយមិៃបាៃក្ំណត់ៃូវទទរង

Page

ឬក្៏បង្ ត យរបស់រប ូ ភាពងទងនាឹះ

Browser

ៃរងបងាាញតាមទំហំងែើមរបស់វា។ ទំហំងែើមាៃៃ័យថាជាទំហំពិតរបស់រប ូ ភាពងដ្ឋយមិៃាៃង្វើការដក្ដគប សូមបញ្ជ ា ក្់្ងដែរថា ទំហំរបស់រប ូ ភាពងៃឹះងោក្អនក្អាច្ង្វើការដក្ដគបងៅក្នងក្មមវ ិ្ី ង្សងៗែូច្ជា Photoshop,

Macromedia

Fireworks,…

ក្៏ បាៃ

ដតក្នង

Adobe HTML

ងោក្អនក្ក្៏ អាច្ង្វើការដក្ដគបបាៃ្ងដែរដតក្នងការដក្ដគបងៃឹះងោក្អនក្គតូវដតរក្ាភាពស ាាគតរវាង

បង្ ត យ

ៃិងទទរង

ងបើមិៃែូងចានឹះងទវាអាច្ង្វើងអាយរូបភាពរបស់

ងោក្អនក្ាៃបង្ ត យ ឬទទរងដវងងពក្ខស្មមតា។

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML ងែើមបីង្វើដក្ដគបៃូវទំហំរបស់រប ូ ភាពងោក្អនក្ចាំបាច្់គតូវងគបើៃូវ attribute ពីរ្ឺ width=n ៃិង height=n ដែល n ្ិតជា pixel។ Ex4-4: <html> <head> <title>Insert Image</title> </head> <body> <h2>Image Element</h2> <img src="2.jpg" align="right" width="250" height="300"> HMTL support the ability to display embedded images within textual documents. The syntax for an embedded image is similar to het one used for links. The image itself is pointed to with a URL. Please see my picture that i use with text. <h3>Align Attribute</h3> Browser generally display an embedded image with the bottom of the image aligned with the text in the document. For those of you who wish to align your images in some other manner, the IMG tag offers the ALIGN option. </body> </html>

គបសិៃងបើងោក្អនក្ច្ង់ពគងីក្ទំហំរប ូ ភាពរបស់ងោក្អនក្ងអាយសាាគត រវាងបង្ ត យ ៃិងទទរង ងនាឹះងោក្អនក្គតូវវាយដត width ឬក្៏ height ដតមួយបាៃងហើយ។ Ex4-5: <html> <head> <title>Insert Image</title> </head> <body> <h2>Image Element</h2> <img src="2.jpg" align="right" width="300"> HMTL support the ability to display embedded images within textual documents. The syntax for an embedded image is similar to het one used for links. The image itself is pointed to with a URL. Please see my picture that i use with text. </body> </html>

៧. ការអ្ប្ើនូវ Alternate text ាៃ browser ខាឹះវាមិៃអៃញ្ជាតងអាយរូបភាពបាៃបងាាញង

ើយ។ បដៃត browser

ខាឹះងទៀតក្៏អៃញ្ជាតងអាយាៃការបងាាញដែរែូច្ជា Netscape Internet Explorer… ជាងែើម។ ងោក្អនក្គតូវចាំថាការងគបើរប ូ ភាពងគច្ើៃ្ឺអាច្ជួយងលើក្ងសាេ័ណភាព របស់ងោក្អនក្

បដៃតការងគបើរប ូ ភាពងគច្ើៃងៃឹះ្ឺអាច្ង្វើងអាយ

របស់ងោក្អនក្យឺត។ Website

្មួយងហើយងោក្អនក្យក្

ើញាៃ

អក្សរមួយឃ្លាងលច្ងច្ញមក្អក្សរមួយឃ្លាងៃឹះងយើងងៅថា alternate text។ Prepared by Mr.Chanthol

Website

ងោក្អនក្គបដហលជាធាាប់ជួបងហើយ

ងៅងពលដែលងោក្អនក្ច្ូលងៅកាៃ់ ងៅដ្ឋក្់ពីងលើរប ូ ស្សាប់ដតង

Page

017721080

Mouse

មេម ៀនHTML ងែើមបីបងងកើត alternate text ងយើងគតូវសរងសរ៖ <img

src="Image

Name"

alt="text">ដែល

text

្ឺជាឃ្លាសគាប់បងាាញងៅងពលដែលងោក្អនក្យក្ Mouse ងៅដ្ឋក្់ពីងលើរប ូ ភាព។ Ex4-6: <html> <head> <title>Insert Image</title> </head> <body> <h2>Image Element</h2> <img src="2.jpg" alt="This is my funny picture." align="right" width="300"> HMTL support the ability to display embedded images within textual documents. The syntax for an embedded image is similar to het one used for links. The image itself is pointed to with a URL. Please see my picture that i use with text. </body> </html>

៨. ការប្អងកើតនូវគាំលាតលាំហរវាងរ ូប្ភាព និងតួអក្សរ រវាងរូបភាព

ៃិងតួអក្សរងោក្អនក្អាច្ង្វើការក្ំណត់ៃូវ្ំោតលំហបាៃ្ងដែរ។

ការង្វើងអាយរូបភាពៃរងតួអក្សរាៃ្ំោតពីគ្ននងៃឹះអាច្ជួយងអាយការងរៀបច្ំ អតថបទរបស់ងោក្អនក្ងៅក្នង

Page

ាៃភាពសាាត្ួរងអាយទក្់ទញ។

ការអៃវតតៃ៍

ជំហៃខាងងលើងោក្អនក្ចាំបាច្់គតូវងគបើគបាស់ៃូវ vspace ៃិង hspace ។ ខាងងគកាមងៃឹះ្ឺជាជំហៃនៃការងគបើ vspace ៃិង hspace ងៅក្នងHTML <img src="Image Name" vspace="x" hspace="y"> ដែល

x ្ិតជា pixel វា្ឺជា្ំោតលំហដ្នក្ខាងងឆ្វង ៃិងខាងសាតរំ ប ូ ភាព

y ្ិតជា pixel វា្ឺជា្ំោតលំហដ្នក្ខាងងលើ ៃិងខាងងគកាមរូបភាព

Ex4-7: <html> <head> <title>Insert Image</title> </head> <body> <h2>Image Element</h2> <img src="2.jpg" align="right" width="300" vspace="10" hspace="20"> HMTL support the ability to display embedded images within textual documents. The syntax for an embedded image is similar to het one used for links. The image itself is pointed to with a URL. Please see my picture that i use with text. <h3>Align Attribute</h3> Browser generally display an embedded image with the bottom of the image aligned with the text in the document. For those of you who wish to align your images in some other manner, the IMG tag offers the ALIGN option. Browser generally display an embedded image with the bottom of the image aligned with the text in the document. For those of you who wish to align your images in some other manner, the IMG tag offers the ALIGN option. </body>

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML </html>

អមអរៀនទី ៥

ការប្អងកើតតារាង (Table) ងៅក្នងងមងរៀៃងៃឹះងយើងៃរ ងបងាាញងោក្អនក្អំ ពីរងបៀបបងងកើតតារាងក្នង

HTML

ៃិងវ ិ្ីង្សងងទៀតជាងគច្ើៃក្នងការងៅធាតងទៀតមក្ដ្ឋក្់ក្នងតារាង។ តារាង្ឺជាធាតមួយែ៏សំខាៃ់ ងហើយងយើងងគបើញរក្ញាប់ បំ្តក្នងការបងងកើត Page ៃីមួយៗ មយងងទៀតក្នងងពលបច្ចបបៃនង្ពំ សូវងគជើ សងរ ើសយក្ Frame មក្ង្វើជា layout របស់ Page ងទ ងគពាឹះវាាៃ្លលំបាក្ងគច្ើ ៃងហើយពំសូវាៃងសាេ័ ណភាពងទៀត្ង ច្ំ ដណក្ឯតារាងវ ិញ ្ឺាៃភាពងាយស្សួល ងហើយពំសូវាៃភាពសាំញាគំ ពមទំងាៃងសាេ័ណភាពលាងទៀត្ង។ ងោក្អនក្អាច្ងគជើសងរ ើសយក្

មក្ងគបើ ងែើ មបី្ាក្

Table

ឬងរៀបច្ំទិៃនៃ័យង្សងៗងៅតាមតគមូវការរបស់ងោក្អនក្បាៃងដ្ឋយងាយ។ ១. វិធីប្អងកើតតារាង (Table) មៃៃរងងោក្អនក្បងងកើតតារាងងោក្អនក្ចាំបាច្់គតូវដត្ិតអំពីច្ំៃួៃជួរងែក្ ជួរឈរ

(Row

and

Column)

ងគពាឹះតារាងបាៃមក្ពី ការ្ាំ គ្ននរវាងជួរងែក្

ៃិង

ៃិ ងជួរឈរ

ែូងច្នឹះងហើយងបើងោក្អនក្ពំទៃ់ែរងអំពីជួរងែក្ ឬជួរឈរងនាឹះងទងោក្អនក្ពំអាច្បងងកើតតារាងបាៃង

ើ យ។

ជាែំបូងងយើងសូមង្វើការដណនាំៃូវ

Tag

មួយច្ំៃួៃដែលងោក្អនក្គតូវការចាំបាច្់ ក្នងការបងងកើតតារាង Table: Tag

ពាក្យងពញ

<table>

Table

<tr>

Table Row

អតថៃ័យ ងគបើងែើមបីបងងកើតតារាងដែលរាល់ធាតទំងអស់របស់ Table គតូវងៅច្ងនាាឹះ <table> ៃិ ង </table>

ងគបើងែើមបីបងងកើតជួរងែក្ ងគបើសគាប់បងងកើតច្ំណងងជើងរបស់ Column ៃីមួយៗ។

<th>

Table Header

<th> ខសពី

<td> គតង់ រាល់ទិៃនៃ័យដែលឋិតងៅក្នង

្ឺគតូវាៃទគមង់ជាអក្សរគកាស

<th>

ងហើយងៅច្ំក្្ ត ល Cell ងដ្ឋយសវ័យគបវតតិ <td>

Table Data

Prepared by Mr.Chanthol

ងគបើ ងែើ មបី្ាក្ទិៃនៃ័យ 017721080

មេម ៀនHTML

ងៅងពលដែលងោក្អនក្ចាប់ង្តើមបងងកើតតារាងងោក្ក្ំណត់ច្ំៃួៃ Row and Column ។

គបសិៃងបើងោក្អនក្ច្ង់បងងកើត

៣

Row

ងោក្អនក្គតូវងគបើ

<tr>

បីែង

ងែើមបីងអាយល់កាៃ់ដតច្ាស់សូមងមើលឧទហរណ៍ខាងងគកាម៖ Ex5-1: <html> <head> <title>Test Table</title> </head> <body> <table> <tr> <th>Determinate</th> <th>Indeterminate</th> </tr> <tr> <td>Beefsteak</td> <td>Red Pear</td> </tr> <tr> <td>Better Boy</td> <td>Sweet 100</td> </tr> <tr> <td>Early Girl</td> <td>Yellow Pear</td> </tr> </table> </body> </html>

២. ធាតុរប្ស់តារាង (Table Attribute) ក្នង Table ាៃធាតជាងគច្ើៃដែលងោក្អនក្អាច្ងគបើជាមួយបាៃ ងែើមបីង្វើការដក្ដគប ឬបដៃថមៃូវលក្ខណៈរូបរាងងៅងអាយ

Table។

ខាងងគកាមងៃឹះងយើងៃរងង្វើការបងាាញ

ងោក្អនក្អំពីរងបៀបងគបើគបាស់ ៃិងអតថៃ័យរបស់ Attribute ៃីមួយៗ ៖ -

Align:

ងគបើសគាប់ង្វើការក្ំណត់ទីតាំងរបស់តារាងថាងៅខាងងឆ្វង

ឬក្៏ក្្ ត ល។ Align Attribute ាៃ Attribute Value បី្ឺ center, left and right។ Ex5-2: <html> <head> <title>Test Table</title> </head> <body> <table align="center"> <tr> <th>Determinate</th> <th>Indeterminate</th> </tr> <tr>

Prepared by Mr.Chanthol

017721080

ខាងសាតំ

មេម ៀនHTML <td>Beefsteak</td> <td>Red Pear</td> </tr> <tr> <td>Better Boy</td> <td>Sweet 100</td> </tr> <tr> <td>Early Girl</td> <td>Yellow Pear</td> </tr> </table> </body> </html>

Background: ងគបើងែើមបីង្វើការក្ំណត់ន្ារបស់តារាងជារូបភាព។

Ex5-3: <html> <head> <title>Test Table</title> </head> <body> <table align="center" background="2.jpg"> <tr> <th>Determinate</th> <th>Indeterminate</th> </tr> <tr> <td>Beefsteak</td> <td>Red Pear</td> </tr> <tr> <td>Better Boy</td> <td>Sweet 100</td> </tr> <tr> <td>Early Girl</td> <td>Yellow Pear</td> </tr> </table> </body> </html>

Bgcolor: ងគបើងែើមបីក្ំណត់ពណ៌ងអាយងៅតារាង។

Ex5-4: <html> <head> <title>Test Table</title> </head> <body> <table align="center" bgcolor="blue"> <tr> <th>Determinate</th> <th>Indeterminate</th>

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML </tr> <tr> <td>Beefsteak</td> <td>Red Pear</td> </tr> <tr> <td>Better Boy</td> <td>Sweet 100</td> </tr> <tr> <td>Early Girl</td> <td>Yellow Pear</td> </tr> </table> </body> </html>

Border: ងគបើងែើមបីក្ំណត់ក្គាស់ស៊ារ៊ុំ បស់តារាង (border=n) ដែល n ្ិតជា pixel។

Ex5-5: <html> <head> <title>Test Table</title> </head> <body> <table align="center" border="5"> <tr> <th>Determinate</th> <th>Indeterminate</th> </tr> <tr> <td>Beefsteak</td> <td>Red Pear</td> </tr> <tr> <td>Better Boy</td> <td>Sweet 100</td> </tr> <tr> <td>Early Girl</td> <td>Yellow Pear</td> </tr> </table> </body> </html>

Bordercolor: ងគបើសគាប់ក្ំណត់ពណ៌ងអាយស៊ាតា ៊ុំ រាង។

Ex5-6: <html> <head> <title>Test Table</title> </head> <body> <table align="center" border="5" bordercolor="red"> <tr> <th>Determinate</th>

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML <th>Indeterminate</th> </tr> <tr> <td>Beefsteak</td> <td>Red Pear</td> </tr> <tr> <td>Better Boy</td> <td>Sweet 100</td> </tr> <tr> <td>Early Girl</td> <td>Yellow Pear</td> </tr> </table> </body> </html>

Cellspacing: ងយើងងគបើ attribute cellspacing ងែើមបីក្ំណត់្ំោត រវាងពី cell មួយងៅ cell មួយងទៀត។

Cellpadding: ងយើងងគបើ attribute cellpadding ងែើមបីក្ំណត់្ំោតរវាងពីដ្មរបស់ cell ងៅៃរងតួអក្សរ។

Ex5-7: <html> <head> <title>Test Table</title> </head> <body> <table align="center" border="3" cellspacing="5" cellpadding="5"> <tr> <th>Determinate</th> <th>Indeterminate</th> </tr> <tr> <td>Beefsteak</td> <td>Red Pear</td> </tr> <tr> <td>Better Boy</td> <td>Sweet 100</td> </tr> <tr> <td>Early Girl</td> <td>Yellow Pear</td> </tr> </table> </body> </html>

Frame:

Attribute

ងគបើសគាប់ ក្ំណត់ ដ្មជំវ ិញរបស់តារាង

ថាគតូវបងាាញឬក្៏អត់។ Prepared by Mr.Chanthol

017721080

(border)

មេម ៀនHTML ខាងងគកាមងៃឹះ្ឺជាតារាងដែលបងាាញពីការងគបើគបាស់ៃូវ attribute frame:

របស់

គ្នមៃដ្មជំវ ិញ ងហើយវា្ឺជាតនមា Default

above

ាៃដ្មដតដ្នក្ខាងងលើ

below

ាៃដ្មដតដ្នក្ខាងងគកាម

hsides

ាៃដ្មដតដ្នក្ខាងងលើ ៃិងខាងងគកាម

vsides

ាៃដ្មដតដ្នក្ខាងងឆ្វង ៃិងខាងសាតំ

lhs

ាៃដ្មដតដ្នក្ខាងងឆ្វងនែ

rhs

ាៃដ្មដតដ្នក្ខាងសាតនំ ែ

box or border

value

អតថៃ័យ

Attribute Value void

attribute

ាៃដ្មជំវ ិញតារាង

Ex5-8: <html> <head> <title>Test Table</title> </head> <body> <table align="center" border="3" bordercolor="blue" cellspacing="5" cellpadding="5" frame="void"> <tr> <th>Determinate</th> <th>Indeterminate</th> </tr> <tr> <td>Beefsteak</td> <td>Red Pear</td> </tr> <tr> <td>Better Boy</td> <td>Sweet 100</td> </tr> <tr> <td>Early Girl</td> <td>Yellow Pear</td> </tr> </table> </body> </html> Ex5-9: <html> <head> <title>Test Table</title> </head> <body>

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML <table align="center" border="3" bordercolor="blue" cellspacing="5" cellpadding="5" frame="rhs"> <tr> <th>Determinate</th> <th>Indeterminate</th> </tr> <tr> <td>Beefsteak</td> <td>Red Pear</td> </tr> <tr> <td>Better Boy</td> <td>Sweet 100</td> </tr> <tr> <td>Early Girl</td> <td>Yellow Pear</td> </tr> </table> </body> </html> Ex5-10: <html> <head> <title>Test Table</title> </head> <body> <table align="center" border="3" bordercolor="blue" cellspacing="5" cellpadding="5" frame="border"> <tr> <th>Determinate</th> <th>Indeterminate</th> </tr> <tr> <td>Beefsteak</td> <td>Red Pear</td> </tr> <tr> <td>Better Boy</td> <td>Sweet 100</td> </tr> <tr> <td>Early Girl</td> <td>Yellow Pear</td> </tr> </table> </body> </html>

Rules: ងគបើសគាប់ង្វើការដក្ដគបងៅងលើលក្ខណៈរូបរាងរបស់ Cell។ សូមងមើលតារាង attribute value ខាងងគកាម៖

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML Attribute Value

អតថៃ័យ

none

cell ៃី មួយៗ្ឺពំ ាៃដ្មជំ វ ិញង

rows

ាៃដ្មជំ វ ិញដតជួ រងែក្

cols

ាៃដ្មជំ វ ិញដតជួ រឈរ

all

ើយ

cell ៃី មួយៗ្ឺាៃដ្មជំ វ ិញទំងអស់

Ex5-11: <html> <head> <title>Test Table</title> </head> <body> <table align="center" border="3" bordercolor="blue" cellspacing="5" cellpadding="5" rules="none"> <tr> <th>Determinate</th> <th>Indeterminate</th> </tr> <tr> <td>Beefsteak</td> <td>Red Pear</td> </tr> <tr> <td>Better Boy</td> <td>Sweet 100</td> </tr> <tr> <td>Early Girl</td> <td>Yellow Pear</td> </tr> </table> </body> </html> Ex5-12: <html> <head> <title>Test Table</title> </head> <body> <table align="center" border="3" bordercolor="blue" cellspacing="5" cellpadding="5" rules="rows"> <tr> <th>Determinate</th> <th>Indeterminate</th> </tr> <tr> <td>Beefsteak</td> <td>Red Pear</td> </tr> <tr>

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML <td>Better Boy</td> <td>Sweet 100</td> </tr> <tr> <td>Early Girl</td> <td>Yellow Pear</td> </tr> </table> </body> </html> Ex5-13: <html> <head> <title>Test Table</title> </head> <body> <table align="center" border="3" bordercolor="blue" cellspacing="5" cellpadding="5" rules="cols"> <tr> <th>Determinate</th> <th>Indeterminate</th> </tr> <tr> <td>Beefsteak</td> <td>Red Pear</td> </tr> <tr> <td>Better Boy</td> <td>Sweet 100</td> </tr> <tr> <td>Early Girl</td> <td>Yellow Pear</td> </tr> </table> </body> </html> Ex5-14: <html> <head> <title>Test Table</title> </head> <body> <table align="center" border="3" bordercolor="blue" cellspacing="5" cellpadding="5" rules="all"> <tr> <th>Determinate</th> <th>Indeterminate</th> </tr> <tr> <td>Beefsteak</td> <td>Red Pear</td> </tr> <tr>

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML <td>Better Boy</td> <td>Sweet 100</td> </tr> <tr> <td>Early Girl</td> <td>Yellow Pear</td> </tr> </table> </body> </html>

ងយើងងគបើ

Width:

ងៃឹះងែើមបីក្ំណត់គបដវងទទរងរបស់តារាងដែលតនមារបស់វា្ិតជា

attribute pixel

ឬក្៏ជាភា្រយ ដតងបើងោក្អនក្ងគបើភា្រយាៃៃ័យថាជាភា្យក្ដែលង្ៀបងៅៃរង screen ។ Ex5-15: <html> <head> <title>Test Table</title> </head> <body> <table align="center" border="3" bordercolor="blue" cellspacing="5" cellpadding="5" width="80%"> <tr> <th>Determinate</th> <th>Indeterminate</th> </tr> <tr> <td>Beefsteak</td> <td>Red Pear</td> </tr> <tr> <td>Better Boy</td> <td>Sweet 100</td> </tr> <tr> <td>Early Girl</td> <td>Yellow Pear</td> </tr> </table> </body> </html>

៣. ដាក្់ចាំែងអ ើងតារាង (Captions) Captions ងគបើ ងែើ មបីដ្ឋក្់ ច្ំណងងជើ ងងអាយតារាង។ វាក្៏ ាៃ attribute ដែរ្ឺ align=”left, right, top and bottom” ។ Ex5-16: <html> <head> <title>Test Table</title>

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML </head> <body> <table align="center" border="3" bordercolor="blue" cellspacing="5" cellpadding="5" width="60%"> <caption align="right">FOOD AND DRINKING</caption> <tr> <th>Determinate</th> <th>Indeterminate</th> </tr> <tr> <td>Beefsteak</td> <td>Red Pear</td> </tr> <tr> <td>Better Boy</td> <td>Sweet 100</td> </tr> <tr> <td>Early Girl</td> <td>Yellow Pear</td> </tr> </table> </body> </html>

៤. ធាតុរប្ស់ cell (cell attribute) ងៅក្នង

ាៃ

cell

ជាងគច្ើៃដែលងយើងងគបើងែើមបីបដៃថមលក្ខណៈង្សងៗងៅងអាយ

attribute Cell។

ខាងងគកាមងៃឹះងយើងៃរងបងាាញងោក្អនក្អំពី attribute ៃិ ងវ ិ្ី ងគបើគបាស់របស់វា៖ -

align: ងយើងងគបើងែើមបីតគមរមតួអក្សរង្ៀបងៅៃរង cell ។ វាាៃ attribute value ជាងគច្ើៃែូច្ជា៖ អតថៃ័យ

Attribute Value left

តគមរមងអាយងសមើដ្មខាងងឆ្វង

right

តគមរមងអាយងសមើដ្មខាងសាតំ

center

តគមរមងអាយងសមើក្្ ត លង្ៀបងៅៃរង cell

justify

តគមរមងអាយងសមើដ្មសងខាងង្ៀបងៅៃរង cell

Ex5-17: <html> <head> <title>Test Table</title> </head> <body>

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML <table align="center" border="3" bordercolor="blue" cellspacing="7" cellpadding="7" width="60%"> <caption align="top">COMPUTER PART PRICES</caption> <tr> <th>Product</th> <th>Prices</th> </tr> <tr> <td align="right">CPU core i5-2450M</td> <td align="left">$ 250</td> </tr> <tr> <td align="justify">RAM DDR3 4GB</td> <td align="center">$ 50</td> </tr> <tr> <td align="center">Hardisk External 1T</td> <td>$ 100</td> </tr> </table> </body> </html>

bgcolor:

ងគបើសគាប់ដ្ឋក្់ពណ៌ងអាយន្ាខាងងគកាយរបស់

វាាៃលក្ខណៈែូច្ជា

bgcolor

ដែលងោក្អនក្អាច្ង្វើការក្ំណត់ពណ៌

cell

។

របស់តារាងដែរ ងដ្ឋយងគបើង្មឹះរបស់ពណ៌

ឬក្៏ងលខក្ូែរបស់ពណ៌ក្៏បាៃដែរ។ Ex5-18: <html> <head> <title>Test Table</title> </head> <body> <table align="center" border="3" bordercolor="blue" cellspacing="7" cellpadding="7" width="60%"> <caption align="top">COMPUTER PART PRICES</caption> <tr> <th bgcolor="green">Product</th> <th>Prices</th> </tr> <tr> <td align="right" bgcolor="red">CPU core i5-2450M</td> <td align="left" bgcolor="#00FF00">$ 250</td> </tr> <tr> <td align="justify">RAM DDR3 4GB</td> <td align="center">$ 50</td> </tr> <tr> <td align="center">Hardisk External 1T</td> <td bgcolor="silver">$ 100</td> </tr>

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML </table> </body> </html>

valign: ជាធាតមួយរបស់ cell ដែរ ងហើយងយើងងគបើវាសគាប់តគមរមែូច្ attribute align ដែរ

ដត

attribute

align

តគមរមង្ៀបងៅៃរងបនាាត់ងែក្

ច្ំដណក្ឯ

valign

វ ិញ្ឺ ង្ៀបងៅៃរ ងបនាាត់ឈរ។ ខាងងគកាមជាតារាងដែលពៃយល់ពី attribute value: អតថៃ័យ

Attribute Value top

រញអតថបទងអាយងៅដ្នក្ខាងងលើនៃ cell ងហើយវាជាតនមា Default

middle

រញអតថបទងអាយសថិតងៅច្ំក្្ ត លនៃ cell

bottom

រញអតថបទងអាយងៅដ្នក្ខាងងគកាមនៃ cell

baseline

រញអតថបទងអាយងៅដ្នក្ខាងងលើនៃ cell ងហើយគ្ប់ cell ទំងអស់នៃ row ្ឺវាែំងណើរការដតបនាាត់ែំបូងដតបង្ណឹះ

Ex5-19: <html> <head> <title>Test Table</title> </head> <body> <table align="center" border="3" bordercolor="blue" cellspacing="7" cellpadding="7" width="60%" height="60%"> <caption align="top">COMPUTER PART PRICES</caption> <tr> <th bgcolor="green">Product</th> <th>Prices</th> </tr> <tr> <td valign="top" bgcolor="red">CPU core i5-2450M</td> <td valign="middle" bgcolor="#00FF00">$ 250</td> </tr> <tr> <td valign="bottom">RAM DDR3 4GB</td> <td align="center">$ 50</td> </tr> <tr> <td valign="middle">Hardisk External 1T</td> <td valign="baseline" bgcolor="silver">$ 100</td> </tr> </table> </body> </html>

colspan: ងគបើងែើមបីក្ំណត់ច្ំៃួៃ column ដែលគតូវ Merge បញ្ូច លគ្នន។ តនមា Default របស់វា្ឺងសមើមួយ។

Ex5-20: <html>

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML <head> <title>Test Table</title> </head> <body> <table align="center" border="3" bordercolor="blue" cellspacing="7" cellpadding="7" width="70%"> <caption align="top">The Table Following is just simple</caption> <tr> <th>cell1</th> <th>cell2</th> <th>cell3</th> <th>cell4</th> </tr> <tr> <td colspan="2">Merge 5 and 6</td> <td>7</td> <td>8</td> </tr> <tr> <td colspan="3">Merge 9, 10 and 11</td> <td>12</td> </tr> <tr> <td>13</td> <td>14</td> <td colspan="2">Merge 15 and 16</td> </tr> <tr> <td>17</td> <td>18</td> <td colspan="2">Merge 19 and 20</td> </tr> </table> </body> </html>

rowspan: ងគបើងែើមបីក្ំណត់ច្ំៃួៃ row ដែលគតូវ Merge បញ្ូច លគ្នន។ តនមា Default របស់វា្ឺងសមើមួយ។

Ex5-21: <html> <head> <title>Test Table</title> </head> <body> <table align="center" border="3" bordercolor="blue" cellspacing="7" cellpadding="7" width="70%"> <caption align="top">The Table Following is just simple</caption> <tr> <th>cell1</th> <th>cell2</th> <th>cell3</th> <th>cell4</th>

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML </tr> <tr> <td rowspan="3">Merge 5, 9 and 13</td> <td>6</td> <td>7</td> <td rowspan="4">Merge 8, 12, 16 and 20</td> </tr> <tr> <td>10</td> <td>11</td> </tr> <tr> <td>14</td> <td>15</td> </tr> <tr> <td>17</td> <td>18</td> <td>19</td> </tr> </table> </body> </html>

  

Prepared by Mr.Chanthol

017721080

មេម ៀនHTML

    

Prepared by Mr.Chanthol

017721080