XHTML

សេចក្តីផ្តើម

ថ្វីបើអ្នក ជាអ្នកដំបូង(Beginners) មិនដែលចេះអ្វីសោះ អំពីភាសាវ៉ែប ឬ ចេះប្រើប្រាស់ ខំព្យូរើហើយក្តី ប៉ុន្តែ មិនទាន់យល់អ្វីថា ជាភាសាវ៉ែប, ខ្មែរអាយធី សំរាប់អ្នក នឹងណែនាំអ្នក អោយស្គាល់ពិភព(World) XHTMLនិងCSS, នឹងណែនាំអ្នក អោយហាត់ប្រើប្រាស់វា ជាបណ្តើរៗ លុះត្រាបានរឹងដៃជើង អាចហិចហើរប្រើប្រាស់ XHTMLនិងCSS ដោយខ្លួនឯង។ ប៉ុន្តែ!! ត្រូវការសេចក្តីព្យាយាម របស់អ្នកផងដែរ!! ។ ខ្មែរអាយធី សំរាប់អ្នក សង្ឃឹមថា ចំណេះរបស់អ្នក នឹងបំរើអោយខ្លួនអ្នក និងអោយផលប្រយោជ ប្រជាពលរដ្ឋខ្មែរ!! មក៍ យើងចាប់ផ្តើម!!!

មនុស្សប្រើភាសា ជាសំលេង, ជាកាយវិការ ឬ ជាអក្សរ... ដើម្បីអាចឆ្លើយឆ្លងយល់គ្នា។ រីឯ មនុស្សនិងខំព្យូរើ អាចឆ្លើយឆ្លងគ្នាបាន តាមរយះភាសា ដែលបានកំណត់ស្រាប់។ ជាច្រើនពាន់ភាសា ដែលបាន ចាប់កំណើតចេញមក តាំងពីភាសា Fortran, Qbasic, Pascal, C, C++, Visual C, Visual Basic, Java, PHP... XHTML, CSS ដើម្បីសំរួលការឆ្លើយឆ្លង រវាងមនុស្សនិងខំព្យូរើ, រវាងខំព្យូរើនិងខំព្យូរើ។ មើលផងដែរ ១ ២

ភាសា XHTML, CSS ជាភាសាមិនខ្វះបាន សំរាប់ឆ្លើយឆ្លង ក្នុងទំព័រវ៉ែប។ តើ XHTML ជាអ្វី? ចុះ CSS វិញ? បើចេះប្រើប្រាស់វា តើអាចធ្វើអ្វីបាន? XHTML : ជាពាក្យកាត់ នៃ eXtensible HyperText Markup Language។ គេប្រើវាសំរាប់វាយ បញ្ចូលខ្លឹមសារ ទៅលើមួយទំព័រវ៉ែបសៃថ៍។ CSS : ជាពាក្យកាត់ នៃ Cascading Style Sheets (សន្លឹកក្បាច់ល្បាក់)។ គេប្រើវាសំរាប់ រៀបទំរង់ទំព័រវ៉ែប។ ដោយសារវា ទើបអាចបង្កើតទាន់ចិត្ត និង ងាយស្រួល ការដាក់ទំរង់ ទំព័រវ៉ែបសៃថ៍។

   ភាសាទាំងពីរនេះ បំពេញគ្នាទៅវិញទៅមក ដើម្បីទីបញ្ចប់ បង្កើតមួយវ៉ែបសៃថ៍ថិរវន្ត(Static Web) ដែលជា ប្រភេទ វ៉ែបសៃថ៍មិប្រែប្រួល។ 
  បើចេះប្រើប្រាស់វា អ្នកនឹងអាចរចនាទំព័រវ៉ែប របស់អ្នកតាមចិត្តចង់។ ថ្វីបើមានកម្មវិធីជាច្រើន សំរាប់ប្រើប្រាស់តែង ទំព័រវ៉ែប ប៉ុន្តែអ្នកត្រូវតែចេះ ប្រើប្រាស់ភាសាវ៉ែប  XHTML/CSS ព្រោះវានឹងជួយអ្នក កែកុនទំព័រវ៉ែប តាមចិត្តចង់។

ភាសាវ៉ែប XHTML/CSS ងាយស្រួលរៀន និងងាយស្រួលប្រើប្រាស់ ជាទីបំផុត ព្រោះវាដូចតែ រៀនភាសាធម្មតា អ៊ីចឹងដែរ។

មួយវ៉ែបសៃថ៍(a website)ជា មួយសំណុំទំព័រអេឡិចត្រូនិច (an assembly of electronic pages) ជាទូទៅ កើតឡើងដោយ ភាសាHTML(Hypertext Markup Language) និងភាសា CSS។ ជាការពិត បើមិនមាន អ្នកជួយបង្កើតទេ វ៉ែបសៃថ៍ក៏មិនអាច មានរូបរាងបានដែរ។ តើត្រូវការឧបករអ្វីខ្លះ ដើម្បីប្រើប្រាស់សរសេរ ភាសា XHTML (eXtensible Hypertext Markup Language) និងភាសា CSS អោយមួយទំព័រវ៉ែបសៃថ៍? មានច្រើនសន្ធឹក ឧបករជាផ្នែកទន់(Softwares) ប៉ុន្តែលើកយកតែ ឧបករចាំបាច់ និង ប្រសិទ្ធិភាព មកបង្ហាញ៖

មួយប្រព័ន្ធខំព្យូរើ (មួយប្រដាប់ខំព្យូរើ)
ផ្នែកទន់ឈ្មោះ NVU (អានថា អែនវ្យាវ: Nview) បើមិនមានភ្ជាប់អិនរើណែត
ប្លករបស់អ្នក បើមានភ្ជាប់អិនរើណែត
ប្រាជ្ញាឆ្នៃប្រឌិត របស់ម្ចាស់ប្លក ឬ អ្នកតែងរំលេច វ៉ែបសៃថ៍(Web designer)
ឧបករស្វែងរក(Browser)៖ អិនរើណែតអិចក្សផ្លរើ(Internet Explorer) ឬ កញ្ជ្រោងភ្លើង (Firefox)

មួយប្រព័ន្ធខំព្យូរើចាស់ មិនចាំបាច់ទំនើបអ្វីទេ ឧទាហរ៖ ផែនស៊្យាម III ជាដើម ព្រោះ NVU មិនត្របាក់ ច្រើនសតិ(Memories) ដូចករណីប្រើប្រាស់ កាត់តរូបភាព ឬ កាត់តរូបវិដេអូ នោះទេ។
- មានច្រើនសន្ធឹក ផ្នែកទន់គិតថ្លៃ/ឥតគិតថ្លៃ សំរាប់សរសេរ XHTML និងCSS ដូចជា Dreamweaver, Frontpage, NVU, Notepad, Notepad++, ...។ NVU ជាផ្នែកទន់ចាំបាច់បំផុត សំរាប់ប្រជាពលរដ្ឋខ្មែរ សរសេរភាសាវ៉ែប ព្រោះវាមាន ច្រើនចំណុចពិសេស៖
អាចវាយអក្សរខ្មែរយូនីកូដ-នីដា ដោយរលូន
ងាយប្រើប្រាស់ ដោយសារបង្ហាញភ្លាម លទ្ធផលនៃភាសាវ៉ែប
ជាផ្នែកទន់ឥតគិតថ្លៃ មានអនុភាពខ្លាំង និងប្រសិទ្ធិភាពខ្ពស់

(ទាញយក NVU តាម http://nvudev.com/index.php)

ទំព័រដំបូង XHTML របស់អ្នក

ធាតុ XHTML (XHTML elements)

ប្លាក (Tags) និង សេចក្តីកំណត់(Attributes)របស់វា

ជាធម្មតា គ្រប់របស់របរប្រើប្រាស់ សុទ្ធសឹងមានប្លាក(label) សំគាល់ ដូចជាប្លាក ក្រុមហ៊ុនNokia ឬ Ericcson បិទជាប់ លើទូរស័ព្ទដៃ, ប្លាកក្រុមហ៊ុន Toyota, BMW, Honda បិទជាប់ លើឡានម៉ូតូ ជាដើម។ អ្វីៗ សុទ្ធតែមានប្លាកសំគាល់, មួយទំព័រ XHTML ក៏ដូច្នោះដែរ។ ឈ្មោះប្លាក(Tags names) ត្រូវបានប្រើប្រាស់ ពីដើមទំព័រ រហូតដល់ចុងទំព័រវ៉ែប ដែលអ្នកតែងតែជួប ប្រទះច្រើនសញ្ញា < និង > ក្នុងមួយទំព័រ XHTML ។ < > ជាសញ្ញាសំគាល់ប្លាក។ ឈ្មោះប្លាក ថិតនៅ ពីក្នុង < > ។ ឧទាហរ៖ <Head> ជាប្លាកឈ្មោះ Head ។ ប្លាក(Tags) មានតួនាទី បង្ហាញអ្វីៗជាពត៌មាន ទៅឧបករស្វែងរក (Browser) 1-ប្លាក (Tags) មានពីរប្រភេទ ប្លាក(Tags) ក្នុងមួយទំព័រវ៉ែប៖ ប្លាកដើរជាគូ និង ប្លាកដើរតែឯង៖

ប្លាកដើរជាគូ ៖ ជាប្លាក ត្រូវបានប្រើប្រាស់ ញឹកញាប់បំផុត ក្នុងមួយទំព័រវ៉ែប។

	ឧទាហរ៖ <title>ស្វាគម វ៉ែបសៃថ៍របស់ខ្មែរ!</title>
	     <title> ជាប្លាកបើក,	</title> ជាប្លាកបិទ	 
*ប្លាកដើរតែឯង ៖  ជាប្លាក ដែលមិនមានប្លាកបិទ  ប៉ុន្តែមានសញ្ញាបិទ /  ។ 
ឧទាហរ៖ <img /> ជា មួយប្លាកដើរតែឯង ដែលបើកដោយ <img ហើយបិទដោយ />  
ចំណាំ៖ 
* ប្លាកដើរតែឯង ឬ ប្លាកដើរជាគូរ សុទ្ធសឹងមានប្លាកបើក 
* ប្លាកដើរតែឯង មិនមានប្លាកបិទទេ ប៉ុន្តែមានសញ្ញាបិទ /
	2 – សេចក្តីកំណត់(attrinutes)
បន្ថែមសេចក្តីកំណត់អោយប្លាក ជាមធ្យោបាយ ផ្តល់ភាពជាក់លាក់ ទៅលើប្លាកនោះ។
ចំពោះប្លាកដើរជាគូ៖ ឧទាហរ៖  <span style="color: rgb(246, 7, 43);">ស្វាគម វ៉ែបសៃថ៍ខ្មែរ!</span>     ក្នុងនោះ style សំគាល់សេចក្តីកំណត់ ដែលមានតំលៃ "color: rgb(246, 7, 43);"  ជាឈ្មោះនៃការកំណត់ 
ចំពោះប្លាកដើរតែងឯង៖ ឧទាហរ៖  <img scr=”images/CambodiaChildren.jpg” />    ក្នុងនោះ scr សំគាល់សេចក្តី កំណត់  ដែលមានតំលៃ ”images/CambodiaChildren.jpg” មានន័យថា រូបថតចង់បញ្ចូល ក្នុងទំព័រវ៉ែប មានឈ្មោះ CambodiaChildren.jpg 
ចំណាំ៖ 
- សេចក្តីកំណត់  នៃប្លាកដើរជាគូ ឬ ប្លាកដើរជាតែឯង ត្រូវបានដាក់ក្នុងប្លាកបើក,  មិនត្រូវដាក់វា ទៅក្នុងប្លាកបិទនោះទេ

បណ្តាប្លាក គ្រឹះ (Basic Tags)

ប្លាក  <!DOCTYPE>, <head>, <title>,<html>, <body> ជាប្លាក ដែលទំព៍រវ៉ែបនីមួយៗ ទាមទារអោយមាន។ ដើម្បីងាយយល់ អ្នកគួរមើលទំព័រវ៉ែបនេះ៖
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
  នេះគឺ ចំណងជើង នៃទំព័រ
</title>
</head>
<body>
  តួអត្ថបទ ដាក់នៅទីនេះ
</body>
</html> 
<!DOCTYPE>  មិនចំជាធាតុ(element) នៃ XHTML នោះទេ, វាជា មួយអត្តសញ្ញាណ សំរាប់ទំព័រវ៉ែប។ ដើម្បីបង្កើតមួយឯកសារ XHTML បាន ទាល់តែមានវានៅទីនោះដែរ។  មានបីប្រភេទ DTD គួរត្រូវបានប្រើប្រាស់៖
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
នេះគឺ ចំតួជា DTD 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
នេះគឺ អន្តរកាល DTD;   វាអាចប្រើប្រាស់បានល្អចំពោះ ស្ទើរតែគ្រប់វ៉ែបសៃថ៍
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
នេះគឺ អន្តរកាល DTD; វាអាចប្រើប្រាស់បានល្អចំពោះ ស្ទើរតែគ្រប់វ៉ែបសៃថ៍។ នេះជា ប្រដាប់ស៊ុម នៃ DTD; អ្នកគួរប្រើ ប្រាស់វា បើអ្នកចង់ដាក់ទំរង់ជាទំព័រស៊ុម
<html>  ជាប្លាកទីមួយ ដែលវ៉ែបសៃថ៍ណាក៏ត្រូវការវា។ វាជាអ្នកប្រាប់ ទៅឧបករស្វែងរក(browser) ថា វាមានអត្ថបទ ដាក់ជា ទំរង់ XHTML នឹងបង្ហាញអោយទស្សនិកជន។ ប្លាកបិទរបស់វាគឺ </html>
<head>  ត្រូវប្រើសំរាប់ ផ្តល់អត្ថន័យ នៃពត៌មាន ទៅឧបករស្វែងរក(Browser)។ គ្រប់ប្លាកដែលអាច ថិតនៅក្នុងផ្នែក <head> បាន គឺ <title>, <meta>, <script>, និង <style>។ ប្លាកបិទ 
របស់វា គឺ </head>។
<title>  ជារបស់ ផ្នែក<head> នៃឯកសារ XHTML ។ វាជាចំណងជើង នៃមួយទំព័រវ៉ែប ដែលត្រូវបានបង្ហាញ នៅផ្នែកលើ នៃ ឧបករស្វែងរក(Browser)។ ប្លាកបិទរបស់វា គឺ</title>
<body>  ជាទីដាក់ពត៌មាន HTML របស់អ្នក។ វាជាផ្នែកសំខាន់ នៃទំព័រវ៉ែប។ អាចបន្ថែម សេចក្តីកំណត់ (attributes) ទៅក្នុង ប្លាក<body> ដូចជា ពណ៌ផ្ទៃខាងក្រោយ (background) 
អោយទំព័រវ៉ែប, ពណ៌អត្ថបទ, ពណ៌តំណភ្ជាប់, ពណ៌តំណភ្ជាប់ ដែលបានទស្សនា, ...។ លាកបិទរបស់វា គឺ</body>

ចាត់ចែងមួយអត្ថបទ (Organizing a text )

    ផ្នែកនេះ នឹងណែនាំអ្នក អោយចេះបង្កើត កថាខណ្ឌ - វិធីចុះបន្ទាត់ - ដាក់ចំណងជើង - អក្សរដិត – អក្សរទ្រេត - អក្សរស្វ័យគុណ - អក្សរក្រោម - ការរៀបរាប់ - អក្សរកាត់ ។ អ្នកត្រូវសរសេរពួកវា ដាក់នៅចន្លោះប្លាក <body>    </body>។
ឈ្មោះប្លាក (Tag names)
ពន្យល់ន័យ
<p>     </p>
 p: pararaph ។ វិធីសរសេរ ជាកថាខណ្ឌ ដាក់ក្នុងទំព័រXHTML។ មួយកថាខណ្ឌ ស្មើនឹង មួយការចុះបន្ទាត់
<br/>
br: break ជាប្លាកដើរតែឯង ប្រើប្រាស់សំរាប់ចុះបន្ទាត់។ អ្នកត្រូវដាក់វា នៅចុងបន្ទាន់ 
<h1>     </h1>
h1: header 1ប្រើសំរាប់ ដាក់ក្បាលអក្សរក្នុង body។ h មាន ៦លំដាប់៖ h1 h2 h3 h4  h5 h6
<strong>     </strong>
strong  ប្រើសំរាប់ ដាក់អក្សរដិត។ ដាក់អក្សរដិត ចំពោះពាក្យដែលសំខាន់
<em>     </em>
em: emphasis  ប្រើសំរាប់ដាក់អក្សរទ្រេត។ អក្សរទ្រេត ចំពោះពាក្យដែលមិនសូវសំខាន់
<sup>     </sup>
sup: superscript ប្រើសំរាប់ ដាក់អក្សរលើ ឬ អក្សរស្វ័យគុណ
<sub>     </sub>
Sub: subscript  ប្រើសំរាប់ ដាក់អក្សរក្រោម
<q>     </q>
q :quote ប្រើសំរាប់ ដាក់ធ្មេញកណ្តុរ “ " 
<blockquote>     </blockquote>
blockquote  ប្រើសំរាប់ ដាក់ឃ្លាអក្សរ ជាប្លុក (block) ឬ ជាដុំ
<acronyme>     </acronyme>
acronyme  ប្រើសំរាប់ ដាក់អក្សរកាត់

ឧទាហរគំរូ(example)

ឧទាហរគំរូ ៖ អ្នកចូលទៅ NVU ឬ ប្លករបស់អ្នក។ អ្នកត្រូវចំលងបិទភ្ជាប់ (Copy n Paste) គំរូខាងក្រោម ដាក់ក្នុងទំព័រ Source នៃ Nvu ឬ លើប្លករបស់អ្នក, ហើយអ្នកចុច Preview ដើម្បីមើល លទ្ធផលនៃឧទាហរគំរូ ស៊ីគ្នានឹងមេរៀន ដែលទើបតែបានរៀនចប់។

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title> This is a text model </title></head>
<body>
ការប្រើប្រាស់ខំព្យូរើ និងអិនរើណែត ជារឿងសាមញ្ញ និងជាចំណីបញ្ញា ប្រចាំថ្ងៃរបស់មនុស្សជាតិ។
<p> បច្ចេកវិទ្យាពត៌មាន បានជ្រាបចូលទៅ ដល់ការងារគ្រប់ប្រភេទ នៃ<strong>មនុស្សជាតិ</strong> តាំងពីការងារ<em>កសិកម្ម</em>រហូតដល់ការបង្ហោះ <em>យានអវកាស</em> ទៅភពដទៃទៀត ដូចជា ភពផ្កាយព្រះអង្គារ និង ភពព្រះច័ន្ទជាដើម។ អិនរើណែត ក៏បានជ្រាបចូលផងដែរ ទៅគ្រប់ស្រទាប់មនុស្ស និងគ្រប់ប្រទេស ដែលធ្វើអោយ អ្នកដឹកនាំផ្តាច់ការ(ភូមា, ចិន, យួន, លាវ, កូរេខាងជើង, គុយបា, កម្ពុជា) មានការព្រួយបារម្ភ ព្រោះជនផ្តាច់ការទាំងនោះ មិនអាចបន្តបានងាយស្រួល អំពើផ្តាច់ការ តាមតែចិត្តទៀត</p>
បញ្ជាក់៖ ពិភពលោកចាត់ទុក ពួកប្រទេសកម្មុយនិស្ត ជាពួកប្រទេសផ្តាច់ការ ដោយយោងលើ រចនាសម្ព័ន្ធ ដឹកនាំប្រទេស និងសិទ្ធិមនុស្ស នៅប្រទេសទាំងនោះ។
<h1>សកលភាវូបនីយកម្ម</h1>
ពាក្យ <strong>សកលភាវូបនីយកម្ម</strong>(Globalisation) ទើបតែចាប់ផ្តើមប្រើប្រាស់ ក្នុងអំឡុងទសវត្ស៍ចុងឆ្នាំ៨០ ដែលជាឆ្នាំកំណើត <br/> នៃកម្មវិធី មៃក្រូសហ្វវិនដោស្ស 3.0 ។
<h2>អត្ថន័យនៃពាក្យសកលភាវូបនីយកម្ម</h2>
ជាដំបូង គេប្រើប្រាស់ពាក្យ<q>សកលភាវូបនីយកម្ម</q> គឺចង់សំដៅពត៌មាន ជាពិសេសអិនរើណេត បានន័យថា បើអិនរើណែតទៅដល់ណា ពត៌មានទៅដល់នោះ ហើយអ្វីៗក៏ទៅ តាមក្រោយដែរ ដូចជាការអប់រំ ទំនាក់ទំនង រវាងមនុស្ស អំពីព្រឹត្តិការអ្វីមួយ ពាណិជ្ជកម្ម សេដ្ឋកិច្ច ...ល ...។ <br/>
និយាយអំពីបច្ចេកវិទ្យាទំនើប នឹកដល់កាលនៅកុមារភាព ដែលបានរៀន រូបមន្តគណិតដំបូង (a+b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup> និង ចំនួនអថេរ x<sub>1</sub>  x<sub>2</sub> ត្រូវនឹងអនុគម y<sub>1</sub> y<sub>2</sub> ជាដើម។
</body>
</html>