មេរៀន html(1 6)

មេម ៀនHTML

Prepared by Mr.Chanthol 017721080

ការណែនាអោយសគា លព HTML

HTML ជាពាកយកាតនៃ Hypertext Markup Language ដែលជាភាសាែបង ឬភាសាមលដឋា ៃគ រះនៃការបងងកើតងហទពរ(Website)។ រាលការបងងកើតៃវងហទពរទងអសគតវបាៃបងងកើតង ើងជាមយៃរង HTML ជាៃចច។ ែចងៃះអនកគតវងវើការសកាដសវងយលអពភាសាមយងៃះឲយបាៃស ជងគៅងទើបចាបងតើមងគបើគបាសបាៃ។ សគាបងោកអនកដែលាៃបណងចងងចះ ៃងសសោញងៅងលើជនាញ Web ងនាះ ងោកអនករដតងចះៃវភាសា HTML។ ងៅកន ងភាសា HTML ងោកអនកអាចបងងកើតអតថបទ(Formatting 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)។



ងគកាយងពលដែលងោកអនកបាៃ 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



Attribute ជាធាត របស Tag ។ ងយើងងគបើ Attribute ងែើមបដកដគបៃវលកខណៈរបរាងរបស Tag ែចជា ៖

<font color>

tag space

Attribute



ងយើងងគបើ 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 <p align=”Justify“> - Justify ជា Attribute Value <img scr=”Flower.jpg“> - 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



មយ ឬ ចងរកឯកសារមយងៅងលើ Internet Visitor គតវវាយៃវ Address Ex: http://www.yahoo.com Address ទងអសងៃះងយើងងៅថា URL ។ ដនកទ ១ របសURL ងយើងងៅថា Scheme។ Scheme វាជាអនកគបាបងៅែល Browser ថាងតើគតវងវើែចងមតចចងពាះ File ដែលបគមងៃរងងបើកងនាះ។ Scheme ដែលងោកអនកធាា បង ើញញរកញាបជាងងងនាះ HTTP (Hypertext Transfer Protocol) ។ ងហើយវាគតវបាៃង Set ជា Default ងៅកន ង Browser របសងយើង ែងចនះ ងហើយបាៃជាងៅងពលដែលងោកអនកវាយ Address មយរបស website មយ ងយើងព ចាបាចវាយ http:// ពម ខ www.yahoo.com ង ើយ ដតងៅងពលដែលងោកអនកវាយចបងហើយវាយ Key Enter សសាបដតង ើញ http:// ងៅពម ខែដែល។

មេម ៀនទ១

១. ការកាែតបលង ងែើមបអាចបងងកើត Website មយដែលាៃលកខណៈគបគជងងគជាយ ងហើយព ាៃភាពរងញ រនញ ងនាះ ងោកអនកគតវដតកណតបាងជាម ៃសៃ។ កន ងការកណតបាងគតវឆាងកាតៃវជហា ៃែចខាងងគកាម ៖

1) កណតពងគនលបណងនៃការបងងកើត Website

2) គបមលៃវទៃនៃយ (data) ដែលគតវយកមកដឋកងលើ Website ទងអស។

3) ដបងដចកទៃនៃយងៅតាមគបងេទខ សៗគនន ៃងចាបងតើមងរៀបចៃវាតកា (Menu)។

4) កណតចៃៃ Page ទងអសដែលរាៃកន ង Website របសងោកអនក។

ការចាបអតើម Web Page ដាបង

http://www.yahoo.com/

http://www.yahoo.com/



5) រសបាង Website របសងោកអនកងៅងលើគកដឋសជាម ៃសៃ (កណតថាងតើ Page Link ភាា បងៅកាៃ Page )។

6) ចណ ចច ងងគកាយងនាះងោកអនករដតដឋកង ម ះ File, File របភាពងសងៗ ងៅតាមគបងេទការងារ ៃងដឋកកន ង Folder ងសងៗគនន ងជៀសវាងការគចល ៃងរងញ រនញ ។

២. រអបៀបននការសរអសរ HTML

Webpage ភាងគចើៃគតវបាៃដបងដចកជាពរតបៃៗ head ៃង body។ តបៃ head

ជាតបៃដែលងយើងងគបើងែើមបដឋកៃវចណងងជើងរបស Page។ ងោកអនកកអាចងគបើវាងដែរសគាបជាជៃយកន ងការ Search engines

ៃងសគាបសរងសរៃវ Script (JavaScript, VB Script…) ។ ចដណកឯតបៃ body វញ ជាតបៃដែលងយើងងគបើសគាបសរងសរៃវរាល Code របស HTML

ទងមលដែលបងគមើឲយការរចនារបសងោកអនក។ ការសរងសរៃវ Code របស HTML

ងោកអនកគតវអៃ វតតងៅតាមទគមងែចខាងងគកាម ៖

<html>

<head>

<title>…………….</title>

</head>

<body>

…………………

…………………

</body>

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

ាៃតនមាព ១ងៅែល ៦។ កាល n ាៃតនមាកាៃដតតច ចណងងជើងអតថបទរបសងោកអនកកាៃដត។

សមងមើលឧទហរណខាងងគកាម៖

Ex1-1:

<html>

<head>

<title>Test Heading</title>

</head>

<body>

<h1>This is Heading 1</h1>






</body>

</html>

កន ង tag <hn> ងោកអនកអាចងគបើៃវ attribute មយចៃៃែចជា Align

ដែលងគបើសគាបកណតចណ ចចាបងតើមពខាងមយ (ងឆវង សាត ក ត ល ឬតគមរមទងសងខាង)។ 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>



<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

ជាមមតាងៅកន ងអតថបទជាភាសាអងងាសងដតងដតដចកងចញជា Paragraph

ដែលាៃៃយជាភាសាដខមរថា កថាខណឌ ចដណកឯងៅកន ង HTMLវញកអៃ ញជា តងអាយងោកអនកដចកអតថបទងៅងលើ 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!



How are you today?

I'm pretty well.

</body>

</html>



Ex1-5:

<html>

<head>


</head>

<body>

Hello!<br>

How are you today?<br>

I'm pretty well.

</body>

</html>

៦. ការគសបនា ត កន ង HTML ព ាៃ Tool

មយដែលអៃ ញជា តឲយងោកអនកទញបនាា តយកមកសែច Microsoft Word

ងនាះង ើយ ែងចនះងហើយគបសៃងបើងោកអនកចងស ងោកអនកគតវងគបើ <hr> tag ។

<hr align=”left, right, center “ size= “x” width= “y” color= “colorname or colorcode”>

- Size ជាកគាសរបសបនាា ត ដែល x តជា pixel

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

- Color ងគបើសគាបដឋកពណងអាយបនាា ត ងោកអនកអាចដឋកង ម ះ ឬកងលខកែរបសពណកបាៃដែរ (Red or #FFOOBB)។

Ex1-7:

<html>

<head>


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


<p align="justify"> Writing up a research for publication is good for both ourselves and others









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>



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


groupings and move them around in your word document to create a nice "flow" of information.

</center>

</body>

</html>

៩. Address: (address)

ជាមមតាងយើងងគបើៃវ <address> tag

ងៃះងែើមបដឋកៃវអាសយដឋា ៃងសងៗងៅកន ងទពររបសងោកអនក។ ងយើងងគចើៃសរងសរវាង ើងងៅច ងបញច បនៃទពរៃមយៗរបសងហទពរែចជា ង ម ះអនកៃពៃធ អាសយដឋា ៃ email ឬងលខទរសពាជាងែើម។ ងៅងពលដែលងោកអនកងគបើ Tag ងៃះ browser ៃរងបងាា ញទគមងជាអកសរងគទត។

Ex1-11:

<html>

<head>

<title> Address</title>

</head>

<body>


<p align="justify"> Writing up a research for publication is good for both ourselves and others







we need to start sketch, an outline of what we want to talk about in the paper it mean that. </p>


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: [email protected]



</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 ងែើមបងវើការកណតៃវពណរបសតអកសរ។ ងែើមបបតរៃវពណរបសតអកសរងោកអនកគតវ៖

<font color= “ColorName or ColorCode”>……..text………</font>

Ex2-2:

<html>

<head>


ការអរៀបចាអតថបទ



</head>

<body>

<font color="blue">





</font>

<br>

<br>

<font face="Lucida Handwriting" color="red">




public again.

</font>

</body>

</html>

៣. ការផលល សបតរទាហាតអកសរៈ Size Attribute

ងោកអនកអាចងគបើ size attribute ងែើមបងវើការផលា សបតរៃវទហតអកសរ។ ជាទងៅតនមាទហរបសតអកសរឋតងៅចងនាា ះព ១ ងៅែល ៧។

រងបៀបសរងសរ៖

<font size= “n”>………text……..</font>

ដែល n ជាចៃៃតាៃតនមាចាបព ១ ងៅែល ៧។

Ex2-3:

<html>

<head>


</head>

<body>

<font color="blue" size="5">





</font>

<br>

<br>

<font face="Lucida Handwriting" color="red" size="2">




public again.

</font>

</body>

</html>

Ex2-4:

<html>

<head>




</head>

<body>

<font size="1">1</font>













</body>

</html>

៤. ការអបើ tag big and small:

+ <big> ងគបើសគាបបងងកើៃទហតអកសរជាងអកសរដែលងៅជ វញវា។

+ <small> ងគបើសគាបបញច ះទហតអកសរងអាយតចជាងអកសរដែលងៅជ វញវា។

Ex2-6:

<html>

<head>


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



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

មមមមមមម ម



មេម ៀនទ៣

ងៅកន ងងមងរៀៃងៃះងយើងៃរងបងាា ញងោកអនកអពរងបៀបបងងកើត 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> ដែលជាគបងេទរបស list បនាា បមកងទើបងោកអនកអាចវាយៃវ <li>បាៃ។ ចងពាះចងនាា ះ <li> ៃង </li>

ងោកអនកអាចវាយៃវឃលា ងសងៗដែលងោកអនកចងបងាា ញ។ ចងពាះ <li>

ងោកអនកអាចវាយបាៃងគចើៃែងងៅតាមតគមវការរបសងោកអនកងពាលគនម ៃដែៃកណតង ើយ។

List



២. Unnumbered lists: <ul>

ul ជាទគមង list គនម ៃងលខលដឋបដែលវាាៃលកខណៈែចងៅៃរង Bullet ងៅកន ង Microsoft Word ដែរ។ ងយើងដតងគតវការងគបើវាងគចើៃកន ងការរចនាៃវងហទពរជាមយៃរង font

tag ងែើមបបងាា ញៃវធាត ងសងៗលកខណៈជា item។

ងោកអនកគតវវាយៃវ <ul>……………..</ul> ងៅចងនាា ះ <ul> ៃង </ul>

ងោកអនកអាចវាយ <li> បាៃងគចើៃ។

Ex3-2:

<html>

<head>


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


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



៤. 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 ពរ type and start

ដែលងយើងងគបើវាសគាបដកដគបគបងេទរបស List ៃងតនមាចាបងតើមរបសលដឋបងលខ។ Attribute type ងយើងងគបើងែើមបផលា សបតរគបងេទរបសលដឋបងលខងៅជាទគមងងសងៗ សមងមើលតារាងខាងងគកាម៖

តនមារបស Attribute អតថៃយ A អកសរ (A, B, C, …) a អកសរតច (a, b, c, …) I ងលខរាង (I, II, III, …) i ងលខរាងតច (i, ii, iii, …) L តនមាជាងលខ ងហើយវាជាតនមា Default របស List

Ex3-5:

<html>

<head>


</head>

<body>

<ol type="A">






</ol>

<ol type="I">


<li>English</li>

<li>Management</li>

<li>Marketing</li>

</ol>

</body>

</html>

ចដណកឯ Attribute start វញងយើងងគបើងែើមបកណតតនមាចាបងតើមនៃលដឋបងលខ ឬ តអកសរ។


Ex3-6:

<html>

<head>


</head>

<body>

<ol type="A" start="5">




</ol>

<ol type="I" start="3">


<li>English</li>

<li>Management</li>

<li>Marketing</li>

</ol>

</body>

</html>

៦. បអេទ Attribute របស li: សគាប Attribute li កាៃតនមារបសវាពរដែរ type ៃង value ។ លកខណៈងគបើគបាសរបសវាែចចណ ចខាងងលើដែរ ចដណកឯ value

វញងយើងងគបើងែើមបកណតតនមារបស li ។

Ex3-7:

<html>

<head>

<title>li tag</title>

</head>

<body>

<ol>


<li type="a">English</li>

<li type="I">Management</li>

<li type="A" value="7">Marketing</li>

</ol>



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

អមអរៀនទ ៤

ងៅកន ងងមងរៀៃងៃះ

ជាែបងងយើងៃរងងវើការបងាា ញងោកអនកអពរបមៃតនៃការងគបើពណខាះ ជាពងសសងលខកែរបសពណងៅកន ងអតថបទជា HTML

ៃងចៃ ចបនាា បមកងទៀតងយើងៃរងបងាា ញងោកអនកអពការងគបើរបភាពងៅកន ងអតថបទ

ការដាកពែ នង របភាពអៅកនងអតថបទ (COLOR

AND IMAGE)



ការតគមរមរបភាពជាមយៃរងអតថបទ ការយករបភាពមកដឋកងលើ 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) ដែលតនមារបសវាងយើងតជា Hexadecimal

number ចាបព 00 រហតែល FF ឧទហរណ ពណគកហមស ទធ FF0000។

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



កន ង 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 banner

ឬករបភាពទងមលដតមតង។ កន ងការដឋករបភាពងោកអនកចាបាចគតវវាយៃវ command

បញជា ងែើមបងអាយ Browser យល។ ខាងងគកាមងៃះជារងបៀបនៃការងគបើ ៃងរងបៀបនៃការសរងសរ៖

<img src="Image Name" >ដែល Image Name គតវរមបញច លទង extension របសវាង។



សមគា ល

កន ងការងៅងៅរបភាពយកមកដឋកងៅងលើ 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>


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

៥. តមមណគមរបសរបភាពអៅជាមយនងអកសរ ងោកអនកអាចងវើការតគមរមរបភាពងៅខាងងឆវង ឬកខាងសាត អកសរបាៃ។ ជាមមតាងៅងពលដែលងោកអនកដឋកបញច លគនន រវាងអតថបទជាមយៃរងរបភាពងោកអនក ចាបាចគតវងវើការតគមរមងៅខាងងឆវង ឬកខាងសាត ងទើប Page

របសងោកអនកងមើលងៅាៃលកខណៈសាា ត ៃងរជាទចាបអារមមណ។ តារាងខាងងគកាមបងាា ញងោកអនក អព attribute value របស align attribute ។



Value អតថៃយ Top តគមរមអតថបទងៅពងលើរបភាព Middle តគមរមអតថបទងៅក ត លរបភាព Bottom តគមរមអតថបទងអាយងសមើងៅៃរងជរបនាា តរបសរបភាព

វាជាតនមា default Left តគមរមរបភាពងៅដនកខាងងឆវងនៃផលា ង Windows Right តគមរមរបភាពងៅដនកខាងសាត នៃផលា ង Windows


Ex4-3:

<html>

<head>


</head>

<body>


<img src="2.jpg" align="right">




<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

ៃរងបងាា ញតាមទហងែើមរបសវា។ ទហងែើមាៃៃយថាជាទហពតរបសរបភាពងដឋយមៃាៃងវើការដកដគប សមបញជា កងដែរថាទហរបសរបភាពងៃះងោកអនកអាចងវើការដកដគបងៅកន ងកមមវ ងសងៗែចជា Adobe

Photoshop, Macromedia Fireworks,… កបាៃ ដតកន ង HTML

ងោកអនកកអាចងវើការដកដគបបាៃងដែរដតកន ងការដកដគបងៃះងោកអនកគតវដតរកាភាពសាាគតរវាង បង ត យ ៃងទទរង ងបើមៃែងចាន ះងទវាអាចងវើងអាយរបភាពរបស ងោកអនកាៃបង ត យ ឬទទរងដវងងពកខ សមមតា។



ងែើមបងវើដកដគបៃវទហរបសរបភាពងោកអនកចាបាចគតវងគបើៃវ attribute ពរ width=n

ៃង height=n ដែល n តជា pixel។

Ex4-4:

<html>

<head>


</head>

<body>


<img src="2.jpg" align="right" width="250" height="300">








</body>

</html>

គបសៃងបើងោកអនកចងពគងកទហរបភាពរបសងោកអនកងអាយសាាគត រវាងបង ត យ ៃងទទរង ងនាះងោកអនកគតវវាយដត width ឬក height ដតមយបាៃងហើយ។

Ex4-5:

<html>

<head>


</head>

<body>


<img src="2.jpg" align="right" width="300">




</body>

</html>

៧. ការអបើនវ Alternate text

ាៃ browser ខាះវាមៃអៃ ញជា តងអាយរបភាពបាៃបងាា ញង ើយ។ ប ដៃត browser

ខាះងទៀតកអៃ ញជា តងអាយាៃការបងាា ញដែរែចជា Netscape Internet Explorer… ជាងែើម។ ងោកអនកគតវចាថាការងគបើរបភាពងគចើៃអាចជយងលើកងសាេណភាព Page

របសងោកអនក ប ដៃតការងគបើរបភាពងគចើៃងៃះអាចងវើងអាយ Website

របសងោកអនកយត។ ងោកអនកគបដហលជាធាា បជបងហើយ ងៅងពលដែលងោកអនកចលងៅកាៃ Website មយងហើយងោកអនកយក Mouse

ងៅដឋកពងលើរបសសាបដតង ើញាៃ អកសរមយឃលា ងលចងចញមកអកសរមយឃលា ងៃះងយើងងៅថា alternate text។



ងែើមបបងងកើត alternate text ងយើងគតវសរងសរ៖

<img src="Image Name" alt="text">ដែល text

ជាឃលា សគាបបងាា ញងៅងពលដែលងោកអនកយក Mouse ងៅដឋកពងលើរបភាព។

Ex4-6:

<html>

<head>


</head>

<body>


<img src="2.jpg" alt="This is my funny picture." align="right" width="300">




</body>

</html>

៨. ការបអងកើតនវគាលាតលាហរវាងរបភាព នងតអកសរ រវាងរបភាព ៃងតអកសរងោកអនកអាចងវើការកណតៃវោតលហបាៃងដែរ។ ការងវើងអាយរបភាពៃរងតអកសរាៃោតពគនន ងៃះអាចជយងអាយការងរៀបច អតថបទរបសងោកអនកងៅកន ង Page ាៃភាពសាា តរងអាយទកទញ។ ការអៃ វតតៃ ជហៃខាងងលើងោកអនកចាបាចគតវងគបើគបាសៃវ vspace ៃង hspace ។

ខាងងគកាមងៃះជាជហៃនៃការងគបើ vspace ៃង hspace ងៅកន ងHTML

<img src="Image Name" vspace="x" hspace="y"> ដែល

- x តជា pixel វាជាោតលហដនកខាងងឆវង ៃងខាងសាត របភាព

- y តជា pixel វាជាោតលហដនកខាងងលើ ៃងខាងងគកាមរបភាព Ex4-7:

<html>

<head>


</head>

<body>


<img src="2.jpg" align="right" width="300" vspace="10" hspace="20">











</body>



</html>

អមអរៀនទ ៥

ងៅកន ងងមងរៀៃងៃះងយើងៃរងបងាា ញងោកអនកអពរងបៀបបងងកើតតារាងកន ង HTML

ៃងវ ងសងងទៀតជាងគចើៃកន ងការងៅធាត ងទៀតមកដឋកកន ងតារាង។ តារាងជាធាត មយែសខាៃងហើយងយើងងគបើញរកញាបប តកន ងការបងងកើត Page ៃមយៗ មយ ងងទៀតកន ងងពលបចច បបៃនងព សវងគជើសងរ ើសយក Frame មកងវើជា layout របស Page ងទ ងគពាះវាាៃលលបាកងគចើៃងហើយព សវាៃងសាេណភាពងទៀតង ចដណកឯតារាងវញ ាៃភាពងាយសសល ងហើយព សវាៃភាពសាញា គពមទងាៃងសាេណភាពលាងទៀតង។ ងោកអនកអាចងគជើសងរ ើសយក Table មកងគបើងែើមប ា ក ឬងរៀបចទៃនៃយងសងៗងៅតាមតគមវការរបសងោកអនកបាៃងដឋយងាយ។

១. វធបអងកើតតារាង (Table)

ម ៃៃរងងោកអនកបងងកើតតារាងងោកអនកចាបាចគតវដតតអពចៃៃជរងែក ៃងជរឈរ (Row and Column) ងគពាះតារាងបាៃមកពការា គនន រវាងជរងែក ៃងជរឈរ ែងចនះងហើយងបើងោកអនកព ទៃែរងអពជរងែក ឬជរឈរងនាះងទងោកអនកព អាចបងងកើតតារាងបាៃង ើយ។ ជាែបងងយើងសមងវើការដណនាៃវ Tag

មយចៃៃដែលងោកអនកគតវការចាបាចកន ងការបងងកើតតារាង Table:

Tag ពាកយងពញ អតថៃយ

<table> Table ងគបើងែើមបបងងកើតតារាងដែលរាលធាត ទងអសរបស Table គតវងៅចងនាា ះ <table> ៃង </table>

<tr> Table Row ងគបើងែើមបបងងកើតជរងែក

<th> Table Header

ងគបើសគាបបងងកើតចណងងជើងរបស Column ៃមយៗ។ <th> ខ សព <td> គតងរាលទៃនៃយដែលឋតងៅកន ង <th> គតវាៃទគមងជាអកសរគកាស ងហើយងៅចក ត ល Cell ងដឋយសវយគបវតត

<td> Table Data ងគបើងែើមបា កទៃនៃយ

ការបអងកើតតារាង (Table)



ងៅងពលដែលងោកអនកចាបងតើមបងងកើតតារាងងោកកណតចៃៃ 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>


</head>

<body>

<table align="center">

<tr>



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


</tr>

</table>

</body>

</html>

- Background: ងគបើងែើមបងវើការកណតនារបសតារាងជារបភាព។ Ex5-3:

<html>

<head>


</head>

<body>

<table align="center" background="2.jpg">

<tr>



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


</tr>

</table>

</body>

</html>

- Bgcolor: ងគបើងែើមបកណតពណងអាយងៅតារាង។ Ex5-4:

<html>

<head>


</head>

<body>

<table align="center" bgcolor="blue">

<tr>





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


</tr>

</table>

</body>

</html>

- Border: ងគបើងែើមបកណតកគាសសា របសតារាង (border=n) ដែល n តជា pixel។ Ex5-5:

<html>

<head>


</head>

<body>

<table align="center" border="5">

<tr>



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


</tr>

</table>

</body>

</html>

- Bordercolor: ងគបើសគាបកណតពណងអាយសា តារាង។ Ex5-6:

<html>

<head>


</head>

<body>

<table align="center" border="5" bordercolor="red">

<tr>





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


</tr>

</table>

</body>

</html>

- Cellspacing: ងយើងងគបើ attribute cellspacing ងែើមបកណតោត រវាងព cell មយងៅ cell

មយងទៀត។

- Cellpadding: ងយើងងគបើ attribute cellpadding ងែើមបកណតោតរវាងពដមរបស cell

ងៅៃរងតអកសរ។ Ex5-7:

<html>

<head>


</head>

<body>

<table align="center" border="3" cellspacing="5" cellpadding="5">

<tr>



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


</tr>

</table>

</body>

</html>

- Frame: Attribute ងគបើសគាបកណតដមជ វញរបសតារាង (border)

ថាគតវបងាា ញឬកអត។



ខាងងគកាមងៃះជាតារាងដែលបងាា ញពការងគបើគបាសៃវ attribute value របស attribute frame:

Attribute Value អតថៃយ void គនម ៃដមជ វញ ងហើយវាជាតនមា Default

above ាៃដមដតដនកខាងងលើ below ាៃដមដតដនកខាងងគកាម hsides ាៃដមដតដនកខាងងលើ ៃងខាងងគកាម vsides ាៃដមដតដនកខាងងឆវង ៃងខាងសាត

lhs ាៃដមដតដនកខាងងឆវងនែ rhs ាៃដមដតដនកខាងសាត នែ

box or border ាៃដមជ វញតារាង

Ex5-8:

<html>

<head>


</head>

<body>

<table align="center" border="3" bordercolor="blue" cellspacing="5" cellpadding="5"

frame="void">

<tr>



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


</tr>

</table>

</body>

</html>

Ex5-9:

<html>

<head>


</head>

<body>




frame="rhs">

<tr>



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


</tr>

</table>

</body>

</html>

Ex5-10:

<html>

<head>


</head>

<body>


frame="border">

<tr>



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


</tr>

</table>

</body>

</html>

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



Attribute Value អតថៃយ none cell ៃមយៗព ាៃដមជ វញង ើយ rows ាៃដមជ វញដតជរងែក cols ាៃដមជ វញដតជរឈរ all cell ៃមយៗាៃដមជ វញទងអស

Ex5-11:

<html>

<head>


</head>

<body>


rules="none">

<tr>



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


</tr>

</table>

</body>

</html>

Ex5-12:

<html>

<head>


</head>

<body>


rules="rows">

<tr>



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


</tr>

</table>

</body>

</html>

Ex5-13:

<html>

<head>


</head>

<body>


rules="cols">

<tr>



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


</tr>

</table>

</body>

</html>

Ex5-14:

<html>

<head>


</head>

<body>


rules="all">

<tr>



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


</tr>

</table>

</body>

</html>

- Width: ងយើងងគបើ attribute

ងៃះងែើមបកណតគបដវងទទរងរបសតារាងដែលតនមារបសវាតជា pixel

ឬកជាភារយ ដតងបើងោកអនកងគបើភារយាៃៃយថាជាភាយកដែលងៀបងៅៃរង screen ។

Ex5-15:

<html>

<head>


</head>

<body>


width="80%">

<tr>



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


</tr>

</table>

</body>

</html>

៣. ដាកចាែងអ ើងតារាង (Captions)

Captions ងគបើងែើមបដឋកចណងងជើងងអាយតារាង។ វាកាៃ attribute ដែរ align=”left,

right, top and bottom” ។

Ex5-16:

<html>

<head>




</head>

<body>


width="60%">

<caption align="right">FOOD AND DRINKING</caption>

<tr>



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


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


</head>

<body>




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: ងគបើសគាបដឋកពណងអាយនាខាងងគកាយរបស cell ។ វាាៃលកខណៈែចជា bgcolor របសតារាងដែរ ដែលងោកអនកអាចងវើការកណតពណ ងដឋយងគបើង ម ះរបសពណ ឬកងលខកែរបសពណកបាៃដែរ។

Ex5-18:

<html>

<head>


</head>

<body>


width="60%">


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


</tr>

<tr>

<td align="center">Hardisk External 1T</td>

<td bgcolor="silver">$ 100</td>

</tr>



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


</head>

<body>


width="60%" height="60%">


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


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



<head>


</head>

<body>


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>


</tr>

<tr>

<td>17</td>

<td>18</td>


</tr>

</table>

</body>

</html>

- rowspan: ងគបើងែើមបកណតចៃៃ row ដែលគតវ Merge បញច លគនន ។ តនមា Default

របសវាងសមើមយ។ Ex5-21:

<html>

<head>


</head>

<body>


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



Documents

មេរៀន html(1 6)