រៀនទាន់ចិត្តដោយខ្លួនឯង ភាសាវ៉ែប XHTML និង CSS ៖ ( ភាគ I)
វីបើអ្នក ជាអ្នកដំបូង(Beginners) មិនដែលចេះអ្វីសោះ អំពីភាសាវ៉ែប ឬ ចេះប្រើប្រាស់ ខំព្យូរើហើយក្តី ប៉ុន្តែ មិនទាន់យល់អ្វីថា ជាភាសាវ៉ែប, នឹងណែនាំអ្នក អោយស្គាល់ពិភព(World) ភាសា XHTML និង CSS, បង្ហាត់់អ្នក អោយប្រើប្រាស់វា ជាបណ្តើរៗ លុះត្រា អ្នកបានរឹងដៃជើង អាចហិចហើរប្រើប្រាស់យ៉ាងរំភើយ ភាសា XHTML និងភាសា CSS ដោយខ្លួនឯង។ ប៉ុន្តែ!! ... ត្រូវការសេចក្តីព្យាយាម របស់អ្នកផងដែរ!! ... ។ សង្ឃឹមថា ចំណេះរបស់អ្នក នឹងបំរើអោយខ្លួនអ្នក និងបំរើអោយផលប្រយោជ ប្រជាពលរដ្ឋខ្មែរ!! មក៍ យើងចាប់ផ្តើម!!!
មនុស្សម្នាប្រើប្រាស់ភាសា ជាសំលេង, ជាកាយវិការ ឬ ជាអក្សរ... ដើម្បីអាចឆ្លើយឆ្លងយល់គ្នា រវាងមនុស្សនិងមនុស្ស។ រីឯ មនុស្សនិងខំព្យូរើ អាចឆ្លើយឆ្លងគ្នាបាន ក៏អាស្រ័យដែរ ទៅលើភាសា ដែលបានកំណត់ស្រាប់។ ច្រើនពាន់ភាសា បានត្រូវបង្កើតចេញមក ជាហូរហែរ ដូចជាភាសា Fortran, Qbasic, Pascal, C, C++, Visual C, Visual Basic, Java, PHP... XHTML, CSS ដើម្បីសំរួលការឆ្លើយឆ្លង រវាងមនុស្សនិងខំព្យូរើ, រវាងខំព្យូរើនិងខំព្យូរើ។ មើលផងដែរ ១ ២ ។
XHTML និង CSS ជាភាសាមិនអាចខ្វះបាន សំរាប់ឆ្លើយឆ្លង ក្នុងទំព័រវ៉ែប។ តើ XHTML ជាអ្វី? ចុះ CSS វិញ? បើចេះប្រើប្រាស់វា តើអាចធ្វើអ្វីបាន?
XHTML និង CSS ជាភាសាមិនអាចខ្វះបាន សំរាប់ឆ្លើយឆ្លង ក្នុងទំព័រវ៉ែប។ តើ XHTML ជាអ្វី? ចុះ CSS វិញ? បើចេះប្រើប្រាស់វា តើអាចធ្វើអ្វីបាន?
- XHTML : ជាពាក្យកាត់ នៃ eXtensible HyperText Markup Language។ គេប្រើប្រាស់វាសំរាប់ វាយបញ្ចូល ខ្លឹមសារទៅលើ មួយទំព័រវ៉ែបសៃថ៍។
- CSS : ជាពាក្យកាត់ នៃ Cascading Style Sheets (សន្លឹករចនាបថដោយល្បាក់)។ គេប្រើប្រាស់វា សំរាប់ រៀបទំរង់ទំព័រវ៉ែប។ ដោយសារវា ទើបអាចដាក់ទំរង់ ទាន់ចិត្ត និង ងាយស្រួល ទំព័រវ៉ែបសៃថ៍។
- មួយប្រព័ន្ធខំព្យូរើ (មួយប្រដាប់ខំព្យូរើ)
- ផ្នែកទន់ឈ្មោះ Nvu (អានថា អែនវ្យាវ: Nview) បើមិនមានភ្ជាប់អិនរើណែត
- ប្លករបស់អ្នក បើមានភ្ជាប់អិនរើណែត
- បញ្ញាឆ្នៃប្រឌិត របស់អ្នក ដែលជាម្ចាស់ប្លក ឬ ជាអ្នកតែងរំលេច វ៉ែបសៃថ៍(Web designer)
- ឧបករស្វែងរក(Browser)៖ អិនរើណែតអិចក្សផ្លរើ (Internet Explorer), មេខលា(Mekhala) ឬ កញ្ជ្រោងភ្លើង (Firefox)
- អាចវាយអក្សរខ្មែរយូនីកូដ-នីដា ដោយរលូន
- ងាយប្រើប្រាស់ ដោយសារបង្ហាញភ្លាម លទ្ធផលនៃភាសាវ៉ែប
- ជាផ្នែកទន់ឥតគិតថ្លៃ មានអានុភាពខ្លាំង និងប្រសិទ្ធិភាពខ្ពស់
 |  | |
ផ្ទាំង Interface របស់ Nvu។ អ្នកត្រូវ ដាក់ភាសា XHTML លើផ្ទាំង នៃ ប្រអប់ Source
|
ផ្ទាំង Interface របស់ Blogger។ អ្នក ត្រូវដាក់ភាសា XHTML លើផ្ទាំង នៃ ប្រអប់ Edit Html
|
ក - ទំព័រដំបូង XHTML របស់អ្នក
ក១- បណ្តាធាតុ នៃ XHTML (XHTML elements)
ក១.១ - ប្លាក (Tags) និង សេចក្តីកំណត់(Attributes)របស់វា
ជាធម្មតា គ្រប់របស់របរប្រើប្រាស់ សុទ្ធសឹងមានប្លាក(label) សំគាល់ ដូចជាប្លាក ក្រុមហ៊ុនNokia ឬ Ericcson បិទជាប់លើទូរស័ព្ទដៃ, ប្លាកក្រុមហ៊ុន Toyota, BMW, Honda បិទជាប់លើឡានម៉ូតូ ជាដើម។ អ្វីៗ សុទ្ធតែមានប្លាកសំគាល់, មួយទំព័រ XHTML ក៏ដូច្នោះដែរ។ ឈ្មោះប្លាក(Tags names) ត្រូវបានប្រើប្រាស់ ពីដើមទំព័រវ៉ែប រហូតដល់ ចុងទំព័រវ៉ែប ដែលអ្នកតែងតែ ជួបប្រទះច្រើនសញ្ញា < និង > ក្នុងមួយទំព័រ XHTML ។ < > ជាសញ្ញា សំគាល់ប្លាក។ ឈ្មោះប្លាក ថិតនៅពីក្នុង < > ។ ឧទាហរ៖ <Head> ជាប្លាកឈ្មោះ Head ។ ប្លាក(Tags) មានតួនាទី បង្ហាញអ្វីៗជាពត៌មាន ទៅឧបករស្វែងរក (Browser)
ជាធម្មតា គ្រប់របស់របរប្រើប្រាស់ សុទ្ធសឹងមានប្លាក(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>, <html>, <head>, <title>,<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។ អ្នកអាចប្រើប្រាស់វា ដើម្បីដាក់ទំរង់ជាទំព័រស៊ុម
- <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: header1 ប្រើប្រាស់សំរាប់ ដាក់អក្សរក្បាលអត្ថបទក្នុង 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 ប្រើប្រាស់សំរាប់ ដាក់អក្សរកាត់
|
ដើម្បីអនុវត្តសាកល្បងភាសា XHTML, អ្នកចូលទៅ Nvu ឬ ប្លករបស់អ្នក។ អ្នកត្រូវចំលងបិទភ្ជាប់ (Copy n Paste) ឧទាហរគំរូ ដាក់ក្នុងទំព័រ Source នៃ Nvu ឬ ដាក់ក្នុងទំព័រ Edit Html នៃប្លករបស់អ្នក ហើយ អ្នកចុច Preview ដើម្បីមើល លទ្ធផលនៃឧទាហរគំរូ ដែលស៊ីគ្នានឹង មេរៀនទើបតែ បានរៀនចប់។
ឧទាហរគំរូ ៖
|
ក៣. តំណភ្ជាប់ (Links)
តំណភ្ជាប់ គឺជា មួយអត្ថបទ ដែលគេចុចលើវា ដើម្បីចូលទៅមួយទំព័រដទៃ ដែលបានកំណត់ទុក។ គេអាចបង្កើតតំណភ្ជាប់ ពីមួយទំព័រ a.html ទៅមួយទំព័រ b.html ហើយក៏អាច បង្កើតតំណភ្ជាប់ ចូលទៅវ៉ែបសៃថ៍ ដទៃទៀតដែរ (ឧទាហរ៖www.khmeritforyou.blogspot.com ជាដើម)។
- -តំណភ្ជាប់ដាច់ខាត ជាតំណភ្ជាប់ ទៅអាស័យដ្ឋានវ៉ែបសៃថ៍ ដទៃទៀត (ឧទាហរ៖ តំណភ្ជាប់ទៅwww.kimedia.blogspot.com ឬ តំណភ្ជាប់ទៅ មួយឯកសារជាក់លាក់ នៃមួយវ៉ែបសៃថ៍ ដូចជា http://slknews.blogspot.com/2007/11/slknews-number-555.html
- a ជាពាក្យកាត់របស់ anchor ប្រែថាយុថ្កា ឬ ស្នឹង
- href ជាពាក្យកាត់របស់ hyper reference ប្រែថា ឯកសារពិគ្រោះ
ប្រើប្រាស់ ប្លាកតំណភ្ជាប់
|
ពន្យល់ន័យ
|
<a href=�http://slknews.blogspot.com�>ស្រឡាញ់ខ្មែរ</a>
|
តភ្ជាប់ទៅវ៉ែបសៃថ៍ http://slknews.blogspot.com
|
<a href=�http://slknews.blogspot.com� title=�កាសែត�> ស្រឡាញ់ខ្មែរ</a>
|
តភ្ជាប់ទៅវ៉ែបសៃថ៍ http://slknews.blogspot.com មានអក្សរប៉ឺតប៉ោង "កាសែត" ពេលដាក់ កណ្តុរ(mouse) ទៅក្បែរ
|
<a href=�mailto:kendy2007@gmail.com�>អ៊ីមែវល៍មកខ្ញុំ</a>
|
តភ្ជាប់ទៅ អាស័យដ្ឋានអ៊ីមែវល៍
|
<h2 id=�#my_anchor�>ចំណងជើង</h2>
|
បង្កើតទីតាំងយុថ្កា ដើម្បីជាដៅចំណុច
|
<a href=�#my_anchor�>ចូលទៅឈ្មោះយុថ្កា</a>
|
ចូលទៅទីតាំងយុថ្កា ក្នុងទំព័រតែមួយ
|
<a href=�index.html#my_anchor�>ចូលទៅឈ្មោះយុថ្កា</a>
|
ចូលទៅទីតាំងយុថ្កា ក្នុងទំព័រដទៃទៀត
|
ក៤. រូបភាព (Images)
បញ្ចូលមួយរូបភាព ទៅក្នុងទំព័រវ៉ែប ជាការងាយស្រួលបំផុត! គេច្រើនប្រើប្រាស់ វិធីតំណភ្ជាប់ប្រែប្រួល។
មានច្រើនផ្នែកទន់ ដែលអាចរក្សាទុករូបភាព តាមទំរង់ផ្សេងៗគ្នា ទៅតាមតំរូវការ ប៉ុន្តែ ទំហំ និង គុណភាពរូបភាព ក៏ប្រែប្រួល ទៅតាមទំរង់ នីមួយៗដែរ។ ផ្នែកទន់ ដែលសាមញ្ញ មានស្រាប់ក្នុងខំព្យូរើ សំរាប់រក្សារូបភាព គឺ Paint (នៅក្នុង Programs>Accessories>Paint)។ ត្រូវដឹងថា គ្រប់រូបភាព ដែលដាក់លើ អិនរើណែត មានចំណុចរួមដូចគ្នា គឺត្រង់រូបភាពទាំងនោះ បានត្រូវបង្ហាប់ បានន័យថា ខំព្យូរើបានធ្វើអោយ រូបភាពទាំងនោះ មិនមានទំហំធំ ដើម្បីបង្កើនល្បឿន ប្រើប្រាស់។
មានបីទំរង់រូបភាព ត្រូវបានប្រើប្រាស់ ញឹកញាប់ លើវែបសៃថ៍៖ JPEG, PNG, GIF
ក៤.១ - បញ្ចូលមួយរូបភាព ទៅលើវ៉ែបសៃថ៍
គេប្រើប្រាស់ ប្លាកដើរតែឯង <img/> និង ច្រើនសេចក្តីកំណត់(attributes) ប៉ុន្តែ ពីរសេចក្តីកំណត់ ដែលមិនអាចខ្វះបាន គឺ៖ src និង alt
ប្រើប្រាស់ ប្លាកបញ្ចូលរូបភាព
|
ពន្យល់ន័យ
|
<img src=��images/Phnom_Penh.jpg alt=�Picture of Khmer's smile� />
|
បញ្ចូលរូបភាព
|
<img src=��images/Phnom_Penh.jpg alt=�Picture of Khmer's smile� title=�ស្នាមញញឹមកូនខ្មែរ� />
|
បញ្ចូលរូបភាព មានអក្សរប៉ឺតប៉ោង
|
បញ្ចូលរូបភាព អាចចុចបាន
|
ឧទាហរគំរូ ៖
ពាក្យដែលបានប្រើប្រាស់៖
ពាក្យដែលបានប្រើប្រាស់៖
- Tag : ប្លាក, ស្លាក
- Attribute : សេចក្តីកំណត់
- Static web : វ៉ែបថិរវ័ន្ត
- CSS (Cascade Style Sheets) : សន្លឹករចនាបថដោយល្បាក់
- Browser : ឧបករស្វែងរក
- blog : ប្លក
- block : ប្លុក
ដើម្បីបង្កើតគេហទំព័រមួយ តើចាំបាច់ត្រូវដឹងអំពីអ្វីខ្លះ?
សួស្ដីប្រិយមិត្តគេហទំព័រ IT4Ug.net ។ តើសុខសប្បាយដែរឬទេ? គេហទំព័រនេះមិនសូវមានការផ្សាយអត្ថបទញឹកញាប់ដូចមុនទេ តាមតែអ្នកដឹងរួចមកហើយ ក៏ព្រោះតែយើងខ្ញុំរវល់ជាមួយកិច្ចការផ្ទាល់ខ្លួន និងកិច្ចការសិក្សាផងដែរ។ ដូច្នេះនៅថ្ងៃនេះ ខ្ញុំមានអត្ថបទមួយ ជូនដល់អ្នកទាំងអស់គ្នា ដែលមានបំណងចង់រៀនបង្កើតគេហទំព័រ។ អត្ថបទនេះ ខ្ញុំសរសេរឡើងតាមគំនិត និងបទពិសោធន៍ដែលខ្ញុំធ្លាប់ឆ្លងកាត់រួចមកហើយ ដូច្នេះប្រសិនបើមានចំណុចខ្វះខាតត្រង់ណា សូមមេត្តាអភ័យទោស និងជួយកែតម្រូវផង។
ជាទូទៅហើយ អ្នកប្រើអ៊ីនធឺណិតទាំងអស់សុទ្ធសឹងតែបានស្គាល់ថា អ្វីទៅគឺជាគេហទំព័រ។ គេហទំព័រ ប្រៀបបានទៅនឹងផ្ទះ, ការិយាល័យព័ត៌មាន, ទីផ្សារ, ក្រុមហ៊ុន ។ល។ រីឯការបង្កើតគេហទំព័រនេះទៀតសោត ត្រូវបានស្ថាបនិកជ្រើសរើសមធ្យោបាយស្ថាបនាតាមតែពួកគេចង់បាន ដូចជាការប្រើប្រាស់ ប្រព័ន្ធគ្រប់គ្រងមាតិកាអត្ថបទ (CMS) , ការសរសេរកូដផ្ដើមពីបន្ទាត់ទី១ ហើយពេលខ្លះក៏មានការបង្កើតដោយប្រើប្រាស់ត្រឹមតែរូបភាពដែរ។
ក៏ប៉ុន្តែដើម្បីចូលទៅដល់ការបង្កើតគេហទំព័រមួយបានយ៉ាងល្អ យើងចាំបាច់ត្រូវធ្វើការសិក្សាតាមដំណាក់កាល។ អត្ថបទនេះនឹងបង្ហាញអ្នកតាំងពីចំណុចដំបូង រហូតដល់ចំណុចកម្រិតខ្ពស់។ ដូច្នេះតើចំណុចដំបូងបំផុត ដែលយើងគួរដឹងនោះជាអ្វីដែរទៅ?
១. ប្រភេទនៃគេហទំព័រ និងផ្នែកបង្កើតគេហទំព័រ
គេហទំព័រមានពីរប្រភេទធំៗគឺ
- គេហទំព័រ Static
- គេហទំព័រ Dynamic
រីឯផ្នែកបង្កើតគេហទំព័រ ជាទូទៅត្រូវបានគេចែកចេញជាពីរបន្ថែមទៀតគឺ៖
- អ្នករចនាគេហទំព័រ (Web Designer) , មានតួនាទីក្នុងការរចនាគេហទំព័រ និងបង្កើតជាគេហទំព័រធម្មតាមួយ ជាមួយនឹងកូដ HTML និង CSS (ពេលខ្លះក៏មាន Javascript) ដែលគេហៅថាជា “គេហទំព័រ Static”។
- ស្ថាបនិកគេហទំព័រ (Web Developer), មានតួនាទីក្នុងការយកគេហទំព័រដែលបានបង្កើតដោយ អ្នករចនាគេហទំព័រ ដើម្បីមកធ្វើជាគេហទំព័រដែលមានភាពបត់បែន និងជាប្រភេទ”គេហទំព័រ Dynamic” ។
២. HTML (HyperText Markup Language)
កូដ HTML មានតួនាទីយ៉ាងសំខាន់ក្នុងការបង្កើតគេហទំព័រ ព្រោះកូដមួយប្រភេទនេះប្រៀបបានទៅនឹងផ្ទះ ដែលយើងទើបតែសាងសង់រួច តែមិនទាន់បានលាបពណ៌ និងតុបតែងរួច។ ចំណែកឯន័យមួយទៀតគឺ ការសិក្សា HTML ប្រៀបបានទៅនឹងការរៀនរៀបចំប្លង់ផ្ទះ ព្រោះយើងចាំបាច់ត្រូវចេះរៀបចំផ្នែកៗនៃទំព័ររបស់យើង។ ដូចគ្នានេះដែរ ពេលដែលយើងសរសេរត្រឹមតែកូដ HTML សុទ្ធនោះ យើងនឹងទទួលបានតែអក្សរដែលយើងសរសេរប៉ុណ្ណោះ ដោយពុំមានការតុបតែងរូប ពណ៌ និងរូបផ្ទៃក្រោយណាមួយឡើយ។
បច្ចុប្បន្ននេះ HTML បានផ្សាយចេញកំណែទី ៥ របស់ខ្លួន ដែលមានសមត្ថភាពខ្ពស់ជាងកំណែចាស់ៗទៅទៀត។ ប្រសិនបើយើងច្បាស់ក្នុងការសរសេរកូដ HTML នោះការបង្កើតគេហទំព័ររបស់យើងពិតជាភាពល្អខ្លាំងណាស់។ សមត្ថភាពពិសេសមួយទៀតនៃ HTML5 គឺយើងអាចយកវាទៅសរសេរជាកម្មវិធីវែប ដោយបូកផ្សំជាមួយនឹងកូដផ្សេងៗទៀត។
៣. CSS (Cascading Style Sheets)
តាមការបកស្រាយនៅក្នុងផ្នែក HTML ខ្ញុំបានសរសេរថា HTML ប្រៀបបានទៅនឹងផ្ទះដែលសង់រួច តែពុំទាន់មានការលាបពណ៌ និងការតុបតែងផ្សេងៗ។ ដូច្នេះហើយដើម្បីឲ្យមានការតុបតែង យើងត្រូវប្រើកូដម្យ៉ាងទៀតដែលមានឈ្មោះថា CSS ។ CSS ក៏មានតួនាទីសំខាន់ណាស់ដែរក្នុងការបង្កើតគេហទំព័រ គឺយើងស្ទើរតែមិនអាចចោលវាបាន។ CSS នេះអាចធ្វើការរៀបចំទំហំផ្នែកនិមួយៗនៃគេហទំព័រ, អាចចាក់ពណ៌ទៅក្នុងផ្នែកណាមួយ, កំណត់គម្លាត, ទំហំ, ដាក់រូបភាព និងផ្សេងៗទៀត។
បច្ចុប្បន្ននេះដែរ CSS ក៏បានផ្សាយចេញកំណែថ្មីរបស់ខ្លួនផងដែរ គឺកំណែទី 3 ដែលមានសមត្ថភាពកាន់តែអស្ចារ្យក្នុងការរចនាគេហទំព័រ ដូចជាការធ្វើឲ្យរូបមួយមានចលនា, ការរចនាផ្នែកមួយចំនួននៃគេហទំព័រ ដោយពុំចាំបាច់ត្រូវការរូបមកជាជំនួយដូចមុនទេ។
៤. រចនារូបរាងគេហទំព័រ
ម្យ៉ាងវិញទៀត អ្នកក៏ត្រូវមានជំនាញខ្លះៗផងដែរ ក្នុងការរចនារូបរាងគេហទំព័រ។ អ្នកចាំបាច់ត្រូវចេះប្រើកម្មវិធីរចនារូបមួយចំនួន មានដូចជា៖ Gimp ឬ Photoshop ឬ Inkscape ។ល។ ព្រោះការរចនាទាំងនេះ នាំឲ្យអ្នកអាចបង្កើតគេហទំព័របានងាយស្រួល ដោយសារអ្នកបានបង្កើតនូវរូបរាងសម្រាប់មើលរួចទៅហើយ។
៥. JavaScript
បន្ទាប់ពីការសិក្សាចេះនូវកូដទាំងពីរប្រភេទខាងលើហើយ ចំណុចបន្ទាប់ដែលយើងត្រូវសិក្សាគឺ JavaScript ។ JavaScript ជាកូដមួយបែបដែលមានអត្ថប្រយោជន៍យ៉ាងច្រើនក្នុងការរៀបចំគេហទំព័រយើងឲ្យមានភាពល្អបន្ថែមទៀត ដូចជាធ្វើចលនាលើផ្នែកណាមួយ, ការធ្វើឈុតរូបភាព (slideshow), ហើយម្យ៉ាងទៀតយើងក៏អាចប្រើ JavaScript ដើម្បីសរសេរកម្មវិធីវែបដែរ គឺយើងអាចប្រើវាបូកផ្សំជាមួយនឹង HTML 5។
JavaScript មានលក្ខណៈស្មុគស្មាញជាង HTML និង CSS ។ ព្រោះ JavaScript មានបែបផែននៃការសរសេរកូដដូចទៅនឹងកូដកម្មវិធីកុំព្យូទ័រផងដែរ គ្រាន់តែគេប្រើ JavaScript សម្រាប់វែប។
៦. PHP, MySQL, Apache …
នេះគឺជាចំណុចកម្រិតខ្ពស់ ហើយក៏ជាកម្រិតសម្រាប់អ្នកដែលចង់ក្លាយទៅជាស្ថាបនិកគេហទំព័រ។ ព្រោះ PHP និង MySQL គឺជាមុខវិជ្ជាសម្រាប់បង្កើត គេហទំព័រ Dynamic។ សូមអានអត្ថបទលម្អិត នៅទីនេះ។
៧. phpMyAdmin
phpMyAdmin គឺជាកម្មវិធីវែបមួយដែលមានតួនាទីក្នុងការគ្រប់គ្រង មូលដ្ឋានទិន្នន័យ (database) នៃគេហទំព័រនិមួយៗ។ ហើយកម្មវិធីមួយនេះ ត្រូវបានទទួលការពេញនិយមយ៉ាងខ្លាំង ព្រោះវាមានភាពទូលំទូលាយ, អាចប្រើបានមិនគិតប្រាក់ …
៨. ការប្រើប្រាស់ CMS
នៅពេលដែលអ្នកចេះចំណុចទាំងប៉ុន្មានខាងលើហើយ ពេលនោះអ្នកនឹងអាចធ្វើការជាមួយ CMS ។ CMS គឺជាកម្មវិធីវែបមួយ ដែលត្រូវបានគេបង្កើតមកស្រាប់ៗ ដោយយើងគ្រាន់តែយកវាទៅប្រើប្រាស់ និងកែច្នៃបន្តិចបន្តួច យើងនឹងអាចបង្កើតគេហទំព័រជាមួយវាបានហើយ។ ហើយយើងក៏ចាំបាច់ត្រូវសរសេរកូដតាំងពីទំព័រទី១ មកដែរ។ សូមអានទីនេះ សម្រាប់ព័ត៌មានលម្អិត។
ចំណុចផ្សេងៗទៀត
ក្រៅអំពីចំណុចទាំងឡាយនៅផ្នែកខាងលើ ខ្ញុំចង់ប្រាប់អំពីគន្លឹះមួយចំនួនទៀត ដើម្បីឲ្យគេហទំព័រដែលយើងបង្កើត ដើរបានលឿន និងមិនមានភាពរញ៉េរញ៉ៃ។
- មើលគំរូគេហទំព័រនានា ដែលមានភាពល្បីល្បាញ ឬក៏ មើលគំរូសំបកគេហទំព័រដែលគេដាក់ឲ្យទាញយកទៅមើលដោយសេរី
- ការរៀបចំចំនួនរូបភាព ដែលត្រូវប្រើប្រាស់ក្នុងការបង្កើតគេហទំព័រ និងប្រភេទរូបភាពដែលត្រូវប្រើប្រាស់ (និយាយត្រឹមតែសំបកគេហទំព័រប៉ុណ្ណោះ)
- ការរៀបចំប្លង់ទំព័រឲ្យមានភាពត្រឹមត្រូវ មិនស្មុគស្មាញ និងទូលាយងាយស្រួលមើល
តើអ្នកសម្រេចចិត្តហើយឬនៅ?
តើអ្នកទាំងអស់គ្នាបានសម្រេចចិត្តហើយឬនៅថា នឹងជ្រើសរើសយកផ្នែកណាមួយ? ជាអ្នករចនាគេហទំព័រ ឬក៏ជា ស្ថាបនិកគេហទំព័រ?
ជាចុងក្រោយ ខ្ញុំសូមជូនពរដល់អ្នកដែលចង់សិក្សា និងកំពុងចាប់ផ្ដើមសិក្សាការបង្កើតគេហទំព័រនេះ ឲ្យមានភាពជោគជ័យក្នុងការសិក្សាលើផ្នែកនេះ។ ប្រសិនបើអ្នកមានចម្ងល់បន្ថែមទៀត សូមដាក់មតិនៅខាងក្រោមអត្ថបទនេះ ខ្ញុំនឹងព្យាយាមឆ្លើយតាមតែសមត្ថភាពដែលខ្ញុំមាន។ ម្យ៉ាងទៀតបើអ្នកមានចំណាប់អារម្មណ៍លើអត្ថបទនេះ សូមអ្នកដាក់មតិនៅក្រោមអត្ថបទនេះក៏បានដែរ។
របៀបដាក់ Facebook Like Box សម្រាប់ Blogspot
មានអ្នកឆ្ងល់ជាច្រើន ចង់ដឹងអំពីរៀបដាក់ រូបរបស់អ្នកចុច Like នៅលើ ប្លក / វ៉ែបសាយ របស់ពួកគេ ដើម្បីទាក់ទាញអ្នកចូលមើល និង ចង់ដឹងថាខ្លួនមានចំណាប់អារម្មណ៍ប៉ុនណាដែរចំពោះអ្នកទស្សនា ជាពិសេសសំរាប់អ្នកទើបតែបង្កើត ប្លក/វ៉ែបសាយ ថ្មីៗក្តៅៗហ៊ុយៗ។ តែលោកអ្នកដែរជាម្ចាស់ ប្លក / វ៉ែបសាយ ទាំងអស់គិតសិនថា ការដាក់ Facebook Like Box
នេះធ្វើអោយដំណើរការបើកមើល ប្លក / វ៉ែបសាយ មានសភាពយឺតជាងពេលដែរយើងមិនទាន់ដាក់វា ចុះបើ ប្លក / វ៉ែបសាយ របស់អ្នក មានរូបស្កេះស្កះហើយថែមដាក់ Like Box ទៀត ហេស ហេ ???។ តែដើម្បីភាពទាក់ទាញ និង ទំនើបនោះ ខ្ញុំសូមបង្ហាញអំពីរបៀបដាក់ Facebook Like Box នៅលើ Blogspot អោយអ្នកទាំងអស់បានដឹង និងអនុវត្តន៍ទាំងអស់គ្នា៖
នេះធ្វើអោយដំណើរការបើកមើល ប្លក / វ៉ែបសាយ មានសភាពយឺតជាងពេលដែរយើងមិនទាន់ដាក់វា ចុះបើ ប្លក / វ៉ែបសាយ របស់អ្នក មានរូបស្កេះស្កះហើយថែមដាក់ Like Box ទៀត ហេស ហេ ???។ តែដើម្បីភាពទាក់ទាញ និង ទំនើបនោះ ខ្ញុំសូមបង្ហាញអំពីរបៀបដាក់ Facebook Like Box នៅលើ Blogspot អោយអ្នកទាំងអស់បានដឹង និងអនុវត្តន៍ទាំងអស់គ្នា៖
1- ចូលទៅក្នុងគណនី Facebook របស់អ្នក រួច Scroll ចុះទៅក្រោមបំផុត នោះនឹងឃើញពាក្យថា បង្កើត មួយទំព័រ ។ (មើលរូបខាងក្រោមនេះ)
ការបង្តើត មួយទំព័រ មិនមានការលំបាក់អីទេ :D សូមធ្វើដោយខ្លួនឯងចុះ
2- បន្ទាប់ពីបង្កើត ទំព័ររួចហើយ ត្រូវចំលង URL របស់ទំព័រនោះទុកសិន (មើលរូបខាងក្រោមនេះ)
3- ចូលទៅកាន់ http://developers.facebook.com/docs/plugins/ ចុចលើ Like Box (មើលរូបខាងក្រោមនេះ)
-នោះលោកអ្នកនឹងឃើញដូចរូបខាងក្រោមនេះដែរមាន URL របស់ Facebook ទុកអោយអ្នក លៃលក កែតម្រូវសិន មុននឹង Paste URL របស់ទំព័រអ្នក (សូមមើលរូបខាងក្រោម)
ពន្យល់មុខងាររបស់ Facebook Like Box ខ្លះៗ៖
-Facebook Page URL : ជាកន្លែងសម្រាប់ ដាក់បញ្ចូល URL របស់លោកអ្នក
-Width : កំណត់ទំហំទទឹង Like Box បើចង់ដាក់ រូបអ្នកចុច Like
-Facebook Page URL : ជាកន្លែងសម្រាប់ ដាក់បញ្ចូល URL របស់លោកអ្នក
-Width : កំណត់ទំហំទទឹង Like Box បើចង់ដាក់ រូបអ្នកចុច Like
- ដាក់មួយជួរបាន 3 ត្រូវដាក់ប្រហែល 183
- ដាក់មួយជួរបាន 4 ត្រូវដាក់ប្រហែល 237
- ដាក់មួយជួរបាន 5 ត្រូវដាក់ប្រហែល 292
-Color Scheme : កំណត់ពណ៌ មានពីរជំរើស (Light = ពណ៌ស) , (Dark = ពណ៌ក្រម៉ៅ(ខ្មៅ))
-Show Faces : គឺជាការបង្ហាញរូបអ្នកចុច Like បើយើងមិន ធីកយក នោះវាមិនបង្ហាញរូបតូចៗ ទេ។ ត្រូវតែ ធីកយក ទើបវាត្រូវនឹងប្រធានបទ របស់យើងដែរនិយាយអំពី ការដាក់រូបអ្នកចុច Like
-Border Color : ការដាក់ពណ៌ ព័ទ្ធជុំវិញ (យើងអាចដាក់ពណ៌ដោយដាក់ជាតម្លៃ មានជាអក្សរនិងលេខចំនួន 6 ខ្ទុង) សួរថាអ្នកណាដឹងថាពណ៌អីតាងអោយតម្លៃ អក្សរនិងលេខ អ្វីនោះ? មានតែប្រើកម្មវិធី Adobe Photoshop ឬកម្មវិធីផ្សេងៗ ដែរមានមុខងារដែរអាចប្រាប់តម្លៃពណ៌បាន ។ យល់ល្អ មិនបាច់ខ្វល់ពី Border Color នេះទេ។
-Stream : គឺជាការបង្ហាញ ដំណឹងផ្សេងៗពី ទំព័រដែរយើងដាក់ ខ្ញុំសូមមិន ធីកយកទេ ។
-Header : គឺជាការកំណត់អោយបង្ហាញឬលាក់ពាក្យ ស្វែងរកយើងនៅលើ Facebook ។
4- បន្ទាប់ពីកំណត់រួចរាល់ហើយ Paste URL របស់ទំព័រដែលអ្នកទើបបានបង្កើត ចូលក្នុងប្រលោះ រូចចុចប៊ូតុង Get Code បន្ទាប់មក ចម្លង (Copy) កូដនៅក្នុងតាប IFRAME (ដូចរូបខាងក្រោម)
5- ចូលទៅក្នុងគណនី Blogspot របស់លោកអ្នក រួចចូលទៅ Layout >> Add a Gadget នៅទីតាំងណាមួយដែរចង់ដាក់ ជាទូទៅដាក់នៅ Gadget ខាងស្តាំ ឬ ខាងឆ្វេង។
6- ស្វែងរកមើល Gadget ដែរមានឈ្មោះ HTML/JavaScript (មើលរូបខាងក្រោមនេះ)
7- បន្ទាប់ពីស្វែងរកឃើញហើយ Paste កូដ ដែរ Copy ចេញពីតាប IFRAME យកមកដាក់ ក្នុង Gadget តែមិនត្រូវដាក់ឈ្មោះត្រង់កន្លែង Title ទេ រួចចុច SAVE (មើលរូបខាងក្រោមនេះ)
8- នៅមិនទាន់រួចរាល់ទេ ត្រូវចុចប៊ូតុង Save arrangement ដែរនៅផ្នែកស្តាំខាងលើ ទើបប្លករបស់លោកអ្នកវាទទួលចងចាំ សូមរីករាយជាមួយ Facebook Like Box ៕ :D
-Show Faces : គឺជាការបង្ហាញរូបអ្នកចុច Like បើយើងមិន ធីកយក នោះវាមិនបង្ហាញរូបតូចៗ ទេ។ ត្រូវតែ ធីកយក ទើបវាត្រូវនឹងប្រធានបទ របស់យើងដែរនិយាយអំពី ការដាក់រូបអ្នកចុច Like
-Border Color : ការដាក់ពណ៌ ព័ទ្ធជុំវិញ (យើងអាចដាក់ពណ៌ដោយដាក់ជាតម្លៃ មានជាអក្សរនិងលេខចំនួន 6 ខ្ទុង) សួរថាអ្នកណាដឹងថាពណ៌អីតាងអោយតម្លៃ អក្សរនិងលេខ អ្វីនោះ? មានតែប្រើកម្មវិធី Adobe Photoshop ឬកម្មវិធីផ្សេងៗ ដែរមានមុខងារដែរអាចប្រាប់តម្លៃពណ៌បាន ។ យល់ល្អ មិនបាច់ខ្វល់ពី Border Color នេះទេ។
-Stream : គឺជាការបង្ហាញ ដំណឹងផ្សេងៗពី ទំព័រដែរយើងដាក់ ខ្ញុំសូមមិន ធីកយកទេ ។
-Header : គឺជាការកំណត់អោយបង្ហាញឬលាក់ពាក្យ ស្វែងរកយើងនៅលើ Facebook ។
4- បន្ទាប់ពីកំណត់រួចរាល់ហើយ Paste URL របស់ទំព័រដែលអ្នកទើបបានបង្កើត ចូលក្នុងប្រលោះ រូចចុចប៊ូតុង Get Code បន្ទាប់មក ចម្លង (Copy) កូដនៅក្នុងតាប IFRAME (ដូចរូបខាងក្រោម)
6- ស្វែងរកមើល Gadget ដែរមានឈ្មោះ HTML/JavaScript (មើលរូបខាងក្រោមនេះ)
សុខភាពរាងកាយសំខាន់ជាងអ្វីៗទាំងអស់ ដូចនេះការយកចិត្តទុកដាក់ជាពិសេសចំពោះសុខភាពគឺជាកត្តាចំបងបំផុត ។ ការហាត់ប្រាណគឺជាយុទ្ធសាស្ត្រមួយក្នុងការកាត់បន្ថយជាតិខ្លាញ់ក្នុងខ្លួន ជំរុញដំណើរការរំលាយអាហារ និងអាចសម្រកទំងន់បានយ៉ាងប្រសើរ ។
