មាតិកាមេរៀន
- មេរៀនទី១៖ ការណែនាំអំពីការអភិវឌ្ឍវេប
- មេរៀនទី២៖ លក្ខណៈទូទៅនៃវេបសាយមួយ
- មេរៀនទី៣៖ មូលដ្ឋាននៃ HTML
ពីសប្ដាហ៍មុននោះ ខ្ញុំបានសរសេរអត្ថបទចំនួនពីរមកហើយដែលនិយាយអំពីមូលដ្ឋាននៃការអភិវឌ្ឍវេបនិងលក្ខណៈទូទៅនៃវេបសាយមួយ។ ប៉ុន្តែសំណួរសួរថា តើយើងត្រូវបង្កើតវាយ៉ាងដូចម្ដេច? ខ្ញុំជឿជាក់ថាអត្ថបទពីរដំបូងនោះ បានផ្ដល់ជាគំនិតមូលដ្ឋាននានាដល់អ្នកក្នុងការចាប់ផ្ដើមការធ្វើវេបសាយមួយ។ បើមិនទាន់បានអានទេ សូមមើលតំណក្នុងផ្នែកមាតិកាខាងលើ។
ចម្លើយនៃសំណួរខាងលើអាចយកទៅបកស្រាយបានច្រើនបែបណាស់ ប៉ុន្តែដោយឈរនៅលើទស្សនៈ “មូលដ្ឋាន” ដូច្នេះហើយខ្ញុំនឹងបកស្រាយទៅតាមបែបមូលដ្ឋានដែលអ្នកចាប់ផ្ដើមធ្វើវេបគួរតែបានដឹងជាចាំបាច់ រួមទាំងវេបសាយផ្សេងៗទៀតដែលអ្នកត្រូវរៀនដោយខ្លួនឯង។
សេចក្ដីផ្ដើម
នៅក្នុងមូលដ្ឋាននៃការធ្វើវេបសាយមួយ គេតែងតែបង្កើតវាដោយមានសមាសភាគសំខាន់ៗយ៉ាងហោចណាស់ចំនួន២គឺ៖ HTML និង CSS។ ហើយមានសមាសភាគទី៣ទៀតគឺ JavaScript។ CSS និង JavaScript នឹងត្រូវយកមកបង្ហាញច្រើននៅមេរៀនបន្តបន្ទាប់ខាងមុខ។ នៅពេលនេះយើងនឹងជជែកត្រួសៗអំពីពួកវាសិន។
HTML ជាពាក្យកាត់មកពី Hyper-text Markup Language។ យើងអាចហៅវាថាជាភាសាមួយដែលគេប្រើសម្រាប់រៀបចំធាតុផ្សេងៗនៅក្នុងទំព័រវេប ហើយវាក៏ជាភាសាសម្រាប់បរិយាយអំពីរចនាសម្ព័ន្ធនៃទំព័រវេបដែរ។ សូមសាកល្បងចុច Ctrl + U (Mac: Command + U) នោះអ្នកនឹងឃើញផ្ទាំងថ្មីមួយលេចឡើង។ អក្សរដែលអ្នកឃើញនោះអាចមាន HTML, CSS, និង JavaScript។ ដើម្បីឲ្យស្គាល់សញ្ញាណវាបន្តិច សូមមើលត្រង់កន្លែងណាដែលមានប្រើសញ្ញា < និង > ។ ខ្ញុំដឹងថាវាមានច្រើនកន្លែង។ នោះហើយជារូបរាងនៃធាតុនៅក្នុង HTML។
CSS ពាក្យពេញរបស់វាគឺ Cascading Stylesheet។ គេប្រើវាសម្រាប់រៀបចំស្ទីលទៅឲ្យ HTML ពីព្រោះដូចបានបញ្ជាក់ពីខាងលើហើយថា HTML គ្រាន់តែសម្រាប់បរិយាយអំពីរចនាសម្ព័ន្ធនៃទំព័រវេបប៉ុណ្ណោះ ឯរឿងស្ទីល (ពណ៌, ទីតាំង, ទំហំ, …) ផ្សេងៗ ត្រូវអាស្រ័យលើ CSS ។
JavaScript គេអាចហៅវាថាជាភាសាកម្មវិធីនៅ client-side។ ជាទូទៅគេប្រើវាសម្រាប់បង្កើតចលនា (animation), បន្ថែមមុខងារទៅឲ្យធាតុណាមួយក្នុង HTML, ការបង្កើតជាកម្មវិធីវេប។ល។
ទំព័រវេបសាមញ្ញមួយ
1 2 3 4 5 6 7 8 9 |
<html> <head> <title>My First Web</title> </head> <body> <p>អត្ថបទដំបូងរបស់ខ្ញុំ។</p> <p><b>អក្សរក្រាស់</b>របស់ខ្ញុំ។</p> </body> </html> |
អត្ថបទដំបូងរបស់ខ្ញុំ។
អក្សរក្រាស់របស់ខ្ញុំ។
កម្មវិធីសរសេរកូដ
អ្នកប្រាកដជាឆ្ងល់ហើយថាតើត្រូវប្រើកម្មវិធីអ្វីដើម្បីសរសេរកូដ? ខ្ញុំសុំណែនាំឲ្យប្រើ Atom Github សម្រាប់ការសរសេរកូដ។
រចនាសម្ព័ន្ធទូទៅនៃ HTML
ដើម្បីបង្កើតទំព័រវេប HTML មួយ យើងចាំបាច់ត្រូវស្គាល់រចនាសម្ព័ន្ធទូទៅឬរចនាសម្ព័ន្ធមូលដ្ឋានរបស់វា នោះទើបយើងអាចយល់អំពីវាបានច្បាស់។
1 2 3 4 5 6 7 8 |
<html> <head> <!-- Header Block --> </head> <body> <!-- Main Content --> </body> </html> |
នៅក្នុងរចនាសម្ព័ន្ធនេះមានចំណុចបីជាមូលដ្ឋានគឺ៖
- html – ជាធាតុប្រាប់ឲ្យដឹងថាជាឯកសារ HTML ហើយវាគឺជាធាតុមេគេបង្អស់(root)ដែលក្ដោបធាតុដទៃទៀត។ https://dev.w3.org/html5/html-author/#the-html-element
- head – ជាធាតុមួយដែលស្ថិតនៅក្នុងធាតុ html ហើយជាអ្នកផ្ទុករាល់ទិន្នន័យមេតា(metadata)របស់ឯកសារ HTML នោះ។ វាគឺធាតុដំបូងគេនៅក្នុងធាតុ html។ https://dev.w3.org/html5/html-author/#the-head-element
- title – ជាធាតុសម្រាប់កំណត់ចំណងជើងបង្ហាញនៅក្នុងផ្ទាំងប្រោវស័រ
- body – ជាធាតុប្រើសម្រាប់ផ្ទុកមាតិកាចម្បងរបស់ឯកសារ HTML។ និយាយឲ្យចំទៅគឺអ្វីៗដែលត្រូវបង្ហាញនៅលើអេក្រង់គឺត្រូវទុកនៅក្នុងធាតុ body នេះ។ https://dev.w3.org/html5/html-author/#the-body-element
ធាតុនៅក្នុង HTML
នៅក្នុង HTML មានធាតុជាច្រើន ហើយពួកវានីមួយៗធ្វើកិច្ចការឬតំណាងមុខងារខុសៗគ្នា។ ធាតុនីមួយៗសុទ្ធតែមានឈ្មោះសម្គាល់ដូចដែលយើងឃើញពីលើស្រាប់ មានដូចជាធាតុ html, head, body ជាដើម។ មានធាតុផ្សេងៗទៀតដូចជាធាតុ p តំណាងឲ្យ paragraph, b គឺ bold, img គឺ image។ល។ ធាតុនីមួយៗត្រូវបានតំណាងដោយស្លាក ហើយរចនាសម្ព័ន្ធនៃធាតុមួយជាទូទៅតែងមានស្លាកបើក(start tag), មាតិកា(content), និងស្លាកបិទ(end tag)។
ឧទាហរណ៍៖
1 2 |
This is my content <b>My bold text</b> |
HTML Tags
គេអាចសម្គាល់ធាតុនីមួយៗបានដោយប្រើប្រាស់ស្លាក(tag) ហើយស្លាកនេះមានបីប្រភេទគឺ៖
- ស្លាកបើក – ឧ.
<p>
ជាស្លាកបើកតំណាងឲ្យធាតុ p។ ស្លាកបើកមានទ្រង់ទ្រាយ<tag_name>
។ - ស្លាកបិទ – ឧ.
</p>
ជាស្លាកបិទតំណាងឲ្យធាតុ p។ កាលណាមានស្លាកបើកនោះក៏ត្រូវមានកន្លែងបិទ។ ស្លាកបិទមានទ្រង់ទ្រាយស្រដៀងស្លាកបើក ដោយគ្រាន់បន្ថែមសញ្ញា “/” នៅពីមុខឈ្មោះស្លាក</tag_name>
។ - ស្លាកបិទខ្លួនឯង – មានធាតុមួយចំនួនទៀតមិនប្រើស្លាកបិទនោះទេ ពីព្រោះវាមិនមានផ្ទុកមាតិកា(content)។ ឧ.
<img src="example.png">
ដែលស្លាកនេះតំណាងឲ្យការបង្ហាញរូបភាព ដោយផ្ដល់ទីតាំងរូបភាពនៅក្នុងលក្ខណៈកំណត់(attribute)។
សរសេរកូដឲ្យស្រួលមើល
ដើម្បី សរសេរកូដឲ្យងាយស្រួលមើល ឲ្យដឹងថាធាតុណានៅក្នុងណា គឺចាំបាច់ត្រូវខិតធាតុចូលបន្ទាត់ (Indentation)។ សូមមើលកូដដែលខ្ញុំសរសេរពីខាងលើមក ខ្ញុំតែងតែចូលបន្ទាត់។ ឧ. <html> ជាស្លាកនៅក្រៅគេ មិនត្រូវការចូលបន្ទាត់ទេ ប៉ុន្តែ <head> និង <body> វាជាស្លាកនៅក្នុង <html> ដូច្នេះត្រូវចូលបន្ទាត់។ ធ្វើបែបនេះយើងអាចដឹងថាវាស្ថិតនៅក្នុង <html>។ អ្នកអាចខិតចូលបន្ទាត់ដោយចុច Tab។
HTML Attributes
អ្នកប្រាកដជាបានឃើញខ្ញុំបញ្ជាក់អំពីលក្ខណៈកំណត់ស្លាក(attribute)នៅចំណុចខាងលើ។ ខ្ញុំគិតថាពាក្យលក្ខណៈនេះ វាជាន័យត្រង់រួចស្រេចទៅហើយ គឺវាជាការកំណត់ព័ត៌មានបន្ថែមទៅឲ្យស្លាកមួយថាត្រូវអនុវត្តមុខងារយ៉ាងដូចម្ដេច។
ដូចយើងឃើញខាងលើនោះ ខ្ញុំបានលើកឡើងអំពីធាតុ img
ដែលមានលក្ខណៈមួយឈ្មោះថា src
ប្រើសម្រាប់កំណត់ទីតាំងរូបភាពដែលត្រូវបង្ហាញ ហើយមានតម្លៃ "example.png"
។
មានលក្ខណៈមួយចំនួនជាលក្ខណៈកំណត់សកល ហើយលក្ខណៈខ្លះទៀតមានតែចំពោះស្លាកជាក់លាក់ណាមួយនោះទេ។ មើលទីនេះសម្រាប់លក្ខណៈកំណត់សកល។
ស្លាកមួយចំនួន
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
.:: Headings ::. <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <hr> .:: Links ::. <br><br/> <a href="http://sovichet.info">Sovichet.info</a><br> <a href="http://google.com">Google</a><br> <hr> .:: Paragraphs ::. <p><u>This is the</u> <i>content</i> in <b>Paragraph</b>.</p> <hr> .:: Images ::. <br> <img width="120" src="http://vignette3.wikia.nocookie.net/cartoonnetwork/images/c/c8/Chowder.jpg"> <hr> .:: Unordered List ::. <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> <hr> .:: Ordered List ::. <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ol> <hr> .:: Table ::. <br><br> <table border="1" cellpadding="5"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Location</th> </tr> </thead> <tbody> <tr> <td>K12</td> <td>Sokha</td> <td>Phnom Penh</td> </tr> <tr> <td>K18</td> <td>Kanha</td> <td>Kampong Chhnang</td> </tr> <tr> <td>K20</td> <td>Bopha</td> <td>Kampong Cham</td> </tr> </tbody> </table> |
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
.:: Links ::.
.:: Paragraphs ::.
This is the content in Paragraph.
.:: Images ::.
.:: Unordered List ::.
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
.:: Ordered List ::.
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
.:: Table ::.
ID | Name | Location |
---|---|---|
K12 | Sokha | Phnom Penh |
K18 | Kanha | Kampong Chhnang |
K20 | Bopha | Kampong Cham |
អ្នកប្រាកដជាឃើញមានស្លាកខ្លះវាចូលគ្នាបីបួនជាន់ នេះក៏ព្រោះតែជាករណីដែលគេបានកំណត់មកយ៉ាងដូច្នេះឯង។ ខ្ញុំសុំលើកយកឧទាហរណ៍ស្លាក ul
និង ol
មកនិយាយ។ ul
គឺជាស្លាកសម្រាប់ Unordered List (បញ្ជីគ្មានលំដាប់) ចំណែកឯ ol
គឺសម្រាប់ Ordered List (បញ្ជីមានលេខរៀង)។ នៅក្នុងពួកវាសុទ្ធតែមានស្លាកកូន li
។ ស្លាក li
(List Item) នេះប្រើសម្រាប់បញ្ជាក់ថាជាធាតុរបស់បញ្ជី ពីព្រោះបើគ្មានស្លាក li
ទេ នោះបញ្ជីទាំងពីរប្រភេទនេះវាមិនដឹងថាតើវាមានធាតុអ្វីខ្លះទេ។ ក៏ដូចគ្នាទៅនឹង table
ដែលវាមានការកំណត់ស្មុគស្មាញបន្តិច ដោយសារវាត្រូវចែកចេញជាក្បាលតារាង តួតារាង ហើយវាក៏មានបាតតារាង (tfoot
) ដែរ។
ការបង្កើត Form
ក្រៅអំពីធាតុទាំងប៉ុន្មានដែលមានបង្ហាញនៅខាងលើ (ទាំងស្លាកនិងលទ្ធផល) នៅមានសមាសភាគមួយសំខាន់ទៀតគឺ Form។ វាជាសមាសភាគដែលស្ទើរតែមិនអាចខ្វះបាននៅក្នុងវេបសាយមួយ។ អ្នកប្រាកដជាធ្លាប់បានឃើញ Form ពីមុនមកហើយដូចជានៅ៖ ទំព័រចុះឈ្មោះ, ទំព័រចូលគណនី, ទំព័របំពេញព័ត៌មានទិញទំនិញ, ប្រអប់ស្វែងរក។ល។ ទាំងអស់ហ្នឹងកើតចេញមកដោយសមាសភាគ Form។
នៅក្នុងការបង្កើត Form មួយត្រូវការមានរចនាសម្ព័ន្ធបែបនេះ៖
1 2 3 |
<form> <!-- Form Elements --> </form> |
ធាតុ input
ធាតុដែលសំខាន់បំផុតនៅក្នុងការបង្កើត Form គឺធាតុ input
។ ធាតុនេះវាមានតួនាទីបង្ហាញវាលសម្រាប់បំពេញព័ត៌មាន ហើយវាចាំបាច់ត្រូវស្ថិតនៅខាងក្នុងធាតុ form
។ ប្រភេទ input
មានច្រើន ដែលកំណត់ដោយលក្ខណៈកំណត់ (attribute) type
។ ប្រភេទ input ចំនួន៥ដែលឧស្សាហ៍ប្រើគឺ៖
- text – ជាប្រភេទ input សម្រាប់បញ្ចូលតួអក្សរ
- password – ជាប្រភេទ input សម្រាប់បញ្ចូលពាក្យសម្ងាត់ (ដោយមានបាំង)
- checkbox – ជាប្រភេទ input សម្រាប់បង្កើតប្រអប់ធីក
- radio – ជាប្រភេទ input សម្រាប់បង្កើតជម្រើសដែលជ្រើសបានតែមួយ
- submit – កំណត់ប៊ូតុងសម្រាប់ដាក់ស្នើ
ប្រភេទ text
1 2 3 4 5 6 |
<form> <b>ទីក្រុង:</b><br> <input type="text"><br> <b>ប្រទេស:</b><br> <input type="text"> </form> |
ប្រភេទ password
1 2 3 4 |
<form> <b>ពាក្យសម្ងាត់:</b><br> <input type="password"><br> </form> |
ប្រភេទ checkbox
1 2 3 4 5 6 |
<form> <b>សៀវភៅដែលអ្នកចូលចិត្ត</b> <input type="checkbox" name="book" value="self-dev"> ការអភិវឌ្ឍខ្លួន<br> <input type="checkbox" name="book" value="history"> ប្រវត្តិសាស្ត្រ<br> <input type="checkbox" name="book" value="math"> គណិតវិទ្យា </form> |
ប្រភេទ radio
1 2 3 4 5 |
<form> <b>ភេទ</b> <input type="radio" name="gender" value="male"> ប្រុស<br> <input type="radio" name="gender" value="female"> ស្រី </form> |
ប្រភេទ submit
1 2 3 4 5 6 7 |
<form> <b>សៀវភៅដែលអ្នកចូលចិត្ត</b> <input type="checkbox" name="book" value="self-dev"> ការអភិវឌ្ឍខ្លួន<br> <input type="checkbox" name="book" value="history"> ប្រវត្តិសាស្ត្រ<br> <input type="checkbox" name="book" value="math"> គណិតវិទ្យា<br> <input type="submit" value="Submit"> </form> |
ឯកសារត្រូវមើលបន្ថែម
ដូចដែលខ្ញុំបានប្រាប់ពីខាងលើមកថា រាល់អត្ថបទដែលខ្ញុំសរសេរគឺគ្រាន់តែជាការពន្យល់ទៅលើគោលគំនិតសំខាន់ជាមូលដ្ឋានប៉ុណ្ណោះ មិនមានចេតនាពន្យល់លម្អិតទាំងអស់នោះទេ ដូច្នេះហើយវាតោងអាស្រ័យឲ្យអ្នកទាំងអស់គ្នាត្រូវចូលទៅអានបន្ថែមដោយខ្លួនឯងនៅក្នុងវេបសាយផ្សេងៗទៀត ដែលគេបានរៀបចំមាតិកាមេរៀនបានយ៉ាងល្អ។
ឧទាហរណ៍
បញ្ជីម៉ឺនុយ (មានតំណភ្ជាប់)
1 2 3 4 5 6 7 |
<ul> <li><a href="http://google.com">Google</a></li> <li><a href="http://facebook.com">Facebook</a></li> <li><a href="http://github.com">Github</a></li> <li><a href="http://github.info">Sovichet.info</a></li> <li><a href="http://wordpress.org">WordPress</a></li> </ul> |
បង្កើតប្រអប់ចូលគណនី
1 2 3 4 5 6 7 |
<form> <b>ឈ្មោះ:</b><br> <input type="text"><br> <b>ពាក្យសម្ងាត់:</b><br> <input type="password"><br> <button type="submit">ចូល</button> </form> |
សេចក្ដីបញ្ចប់
ទាំងអស់នេះគ្រាន់តែជាការរៀបរាប់យ៉ាងត្រួសៗអំពី HTML ប៉ុណ្ណោះ ដូច្នេះហើយខ្ញុំសង្ឃឹមថាអ្នកនឹងស្វះស្វែងរៀនបន្ថែមតាមវេបសាយពីរដែលខ្ញុំឲ្យពីខាងលើ ឬរៀនពីវេបសាយផ្សេងៗទៀតដែលអ្នកស្គាល់។ នៅពេលបន្ទាប់ យើងនឹងជជែកអំពី CSS ម្ដង គឺយើងនឹងយកថ្នាំមកលាបផ្ទះ HTML របស់យើង។
សាកល្បងល្បងធ្វើទំព័រ៖
- ទំព័រផ្ទាល់ខ្លួន (ប្រវត្តិរូបផ្ទាល់ខ្លួន)
- តារាងឈ្មោះនិស្សិត (មានដាក់ប្រអប់ធីកនៅជួរដេក)
- ទំព័របំពេញព័ត៌មានការដឹកជញ្ជូនទំនិញណាមួយ