អត្ថបទផ្សេងៗ ដែលបង្រៀនអំពី HTML & HTML5 ។ ដើម្បីឈានទៅរៀនបង្កើត កម្មវិធីវេប អ្នកចាំបាច់ត្រូវចេះ HTML។
មូលដ្ឋានគ្រឹៈ របស់ HyperText Markup Language (HTML)
HTML គឺជាភាសាមួយដែលគេប្រើសំរាប់បង្កើតវេបសាយ។ ដើម្បីឈានទៅសិក្សាភាសាកុំព្យូទ័រសំរាប់បង្កើត វេបសាយផ្សេងទៀត អ្នកត្រូវតែចេះ HTML ជាមុន។ អត្ថបទនេះនឹងបង្ហាញពីមូលដ្ឋានគ្រឹៈរបស់ HTML មុននឹងសិក្សាសុីជំរៅលើផ្នែកផ្សេងៗទៀតរបស់ HTML។
តារាងមានសារៈសំខាន់ណាស់ក្នុងការបែកចែកបង្ហាញព័ត៌មានអ្វីមួយ ដើម្បីងាយស្រួលយល់។ ក្នុងអត្ថបទនេះនឹងបង្ហាញពីរបៀបបង្កើតរាតាងនៅក្នុងអត្ថបទ HTML ។ ប្រសិនបើមិនទាន់សិក្សាពីមូលដ្ឋានគ្រឹៈរបស់ HTML សូមអាននៅទំព័រនេះជាមុន។ <table> ប្រើសំរាប់បង្កើតតារាងនៅក្នុងអត្ថបទ HTML ដូចនៅបន្ទាត់ទី៩ ហើយបិទមកវិញនៅបន្ទាត់ទី១៩ ដែលមានន័យថាតារាងបញ្ចប់ត្រឹមនេះ។ <tr> សំរាប់កំណត់ចំនួនជួរពីលើចុះក្រោម ចំណែកឯ <td> ប្រើសំរាប់កំណត់ចំនួនជូរពីឆ្វេងមកស្តាំ។
HTML5 គឺជាការធ្វើឱ្យទាន់សម័យនឹងធ្វើឲ្យប្រសើរជាងមុននៃបច្ចេកវិទ្យារបស់ HTML។ ហើយ Form ត្រូវបានគេប្រើសំរាប់ទទួលទិន្នន័យពីអ្នកប្រើ។ អត្ថបទនេះនឹងលើកយកវិធីសាស្រ្តក្នុងការបង្កើត FORM ជាមួយ HTML5។
វិធីបង្ហាញរូបភាព និងភ្ជាប់ទំព័រនៅក្នុង HTML
នៅពេលបង្កើតវេបសាយអ្នកត្រូវយល់ដឹងពីរបៀប ដាក់រូបភាព និងការភ្ជាប់ពីទំព័រមួយទៅទំព័រមួយទៀត ឬពីវេបសាយមួយទៅវេបសាយមួយទៀត។ អត្ថបទនេះនឹងបង្ហាញពីរបៀបដាក់បង្ហាញរូបភាព និងភ្ជាប់ទំព័រនៅក្នុង HTML។ ប្រសិនបើមិនទាន់សិក្សាពីមូលដ្ឋានគ្រឹៈរបស់ HTML សូមអាននៅទំព័រនេះជាមុន។ <img src=”flag.jpg” /> បង្ហាញពីរបៀបបង្ហាញរូបភាព ហើយ flag.jpg គឺជាឈ្មោះរូបភាព ។ ប្រភេទរូបភាពដែលគេនិយមប្រើគឺ jpg png និង gif។
របៀបបង្កើតរូបភាពផែនទី (Image Map) នៅក្នុង HTML
នៅក្នុងHTMLយើងអាចបង្កើតផែនទីនៅលើរូបភាពបានដើម្បីធ្វើកំណត់គោលដៅនៃទីតាំងណាមួយបានដើម្បីមានភាពងាយស្រួលសំរាប់អ្នកប្រើប្រាស់ក្នុងការស្វែងរកទីតាំងនោះ។នៅបន្ទាត់ទី៩គឺសំរាប់ដាក់រូបភាពដែរមានទទឹង៥០%និងបណ្តោយ៥០%ហើយនៅក្នុងនោះមានពាក្យ usemap=”#khmermap” គឺជា id សំរាប់យកទៅប្រើជាមួយcodeសំរាប់បង្កើតរូបភាពផែនទី(map tag HTML)។
នៅក្នុង HTML បើសិនជាយើងចង់ធ្វើការខ្ចប់រាល់បណ្តា Element ឲ្យទៅជាបណ្តុំតែមួួយគឺយើងមានជំរើសពីរក្នុងការធ្វើឲ្យរាល់បណ្តា Element នោះទៅជាក្រុមតែមួយដោយប្រើ DIV និង SPAN ។ DIV ត្រូវបានគេប្រើប្រាស់សំរាប់ធ្វើការខ្ចប់រាល់ HTML Element ឲ្យទៅជាក្រុមតែមួយហើយរាល់ការបញ្ចប់នូវ DIV នីមួយៗត្រូវបានចុះបន្ទាត់ដោយស្វ័យប្រវត្តិទោះបីជាយើងខំសរសេរ DIV បន្តគ្នាមិនចុះដើមបន្ទាត់យ៉ាងណាក៏ដោយក៏វាចុះបន្ទាត់ឲ្យយើងដែរ (Block Level Element) ។
របៀបបំលែងឯកសារ HTML ទៅជា PDF ជាមួយនឹង wkhtmltopdf
ថ្ងៃនេះ Techfree នឹងលើកយកកម្មវិធីមួយដែលអាចបំលែងឯកសារ HTML ទៅជា ឯកសារ PDF ដែលមានឈ្មោះថា wkhtmltopdf ។ តើអ្វីទៅជា wkhtmltopdf? wkhtmltopdf គឺជាកម្មវិធីបើកចំហរមួយ(Open Source LGPLv3) ដែលអាចឲ្យយើងបំលែងឯកសារ HTML ទៅជា ឯកសារ PDF។ ដើម្បីប្រើ wkhtmltopdf បានដំបូងយើងត្រូវតំលើងកម្មវិធីនេះជាមុនសិន។ សម្រាប់ Windows 64bit ដោនឡូតត្រង់នេះសម្រាប់ Windows 32 bit ដោនឡូតត្រង់នេះ តែសម្រាប់ Ubuntu វិញដើម្បីតំលើងអ្នកត្រូវវាយពាក្យនៅក្នុង Terminal របស់អ្នក sudo apt-get install wkhtmltopdf
បញ្ជីនៅក្នុង HTML5 (HTML5 Lists)
បញ្ជីមិនតាមលំដាប់ (Unordered lists)នៅក្នុង HTML5 ត្រូវបានប្រើស្លាក <ul>។ ធាតុបញ្ជីនីមួយៗចាប់ផ្តើមដោយស្លាក <li>។ តាមលំនាំដើមបញ្ជីធាតុទាំងអស់នឹងត្រូវបានសម្គាល់ជា bullet (រង្វង់ខ្មៅតូច) ។
តើអ្វីទៅជា iframe នៅក្នុុង HTML5 ?
អត្ថបទនេះ Techfree នឹងបង្រៀនអ្នកទាំងអស់គ្នា ពីរបៀបបញ្ចូលគេហទំព័រចូលទៅក្នុងគេហទំព័រវិញម្តងដោយប្រើ Iframe នៅក្នុង HTML5។ ដើម្បីអោយកាន់តែច្បាស់ខ្ញុំសុំលើកយក Attribute ចំនូន៣ ដែកភាគច្រើនដែលត្រូវធ្វើការជាមួយ Iframeមកបង្ហាញ៖
១) src attribute សំរាប់កំណត់ URL នៃគេហទំព័រផ្សេងទៀត ។
២) height attribute សំរាប់កំណត់ប្រវែងបញ្ឈរ ។
៣) width attribute សំរាប់កំណត់ប្រវែងផ្ដេក ។
ស្វែងយល់ពី Section នៅក្នុង HTML5
HTML5 គឺជាជំនាន់ទី 5 របស់ HTML ដែលមានពាក្យពេញថា Hyper Text Markup Language ដែលប្រើសំរាប់បង្កើតគ្រោងឆ្អឹងរបស់គេហទំព័រ ហើយនៅក្នុង HTML5 មានស្លាក (Tag) ជាច្រើនប្រើសំរាប់បង្កើតគេហទំព័រមានដូចជា ៖ <div>, <section>, <table>,<span> … ។ល។ ប៉ុន្តែថ្ងៃនេះ TechFree សូមបង្ហាញអំពីការប្រើប្រាស់ស្លាកមួយរបស់ HTML5 គឺ <section></section> ។ HTML5 គឺជាជំនាន់ទី 5 របស់ HTML ដែលមានពាក្យពេញថា Hyper Text Markup Language ដែលប្រើសំរាប់បង្កើតគ្រោងឆ្អឹងរបស់គេហទំព័រ
ស្វែងយល់ពី article នៅក្នុង HTML5
HTML5 គឺជាភាសាមូលដ្ឋានគ្រិះសម្រាប់ធ្វើការបង្កើតគេហទំព័រដែលមានលក្ខណៈមិនសូវផ្លាស់ប្តូរ (Static) ។ ក្នុងចំនុចនេះ Techfree នឹងលើក article tag ថ្មីរបស់ HTML5 មកបង្ហាញ។ article គឺជា Tag នៅក្នុង html 5 ដែលអាចបញ្ជាក់ឯករាជ្យមាតិកាខ្លួនឯងផ្ទាល់។ article ប្រើសំរាប់បំបែកអត្តបទជាផ្នែកៗនៅលើ វេបសាយ។
របៀបប្រើប្រាស់ Progress Tag នៅក្នុង HTML5
អត្ថបទនេះនឹង និយាយអំពីរបៀបនៃការប្រើប្រាស់ Tag <progress> នៅក្នុងភាសា HTML 5 ដែល Tag <progress>នេះយើងប្រើវាសម្រាប់ធ្វើការបង្ហាញទៅកាន់អ្នកប្រើប្រាស់ ថាវាកំពុងតែដំណើរការទៅលើសកម្មភាពអ្វីមួយ។ សម្រាប់ Tag <progress>នៅក្នុងភាសា HTML គេនិយមប្រើវានៅកន្លែងដែលមានសកម្មភាព ទាញយក (Download) និង សកម្មភាព ចូលទៅកាន់កន្លែងណាមួយ(Log in) ។ ក្នុងការប្រើប្រាស់ Tag <progress> HTML5 វាតម្រូវអោយមាន Attributes ពីរគឺ Max និង Value ព្រមទាំងតំលៃរបស់ Attributes ទាំងពីរនោះផងដែរ។
របៀបប្រើប្រាស់ ASIDE នៅក្នុង HTML5
ASIDEគឺជាស្លាករបស់ HTML5 ដែរមានលក្ខណៈស្រដៀងគ្នាទៅនិង DIV ដែរតែ ASIDE ត្រូវបានប្រើប្រាស់សំរាប់ពន្យល់ន័យទៅឲ្យអត្ថបទណាដែរទាក់ទងនិងគ្នាឬសំរាប់ពន្យល់ន័យទៅឲ្យមាតិការ ។
នៅបន្ទាត់ទី១០ដល់បន្ទាត់ទី១៥នេះគេបានប្រើប្រាស់ ASIDE សំរាប់ពន្យល់អត្ថន័យឲ្យទៅ SECTION គឺជាការពន្យល់ន័យទៅឲ្យចំណងជើងនៃអត្ថបទនោះផងដែរ ។
របៀប Drag និង Drop នៅក្នុង HTML5
Drag and Drop មានន័យថាការទាញនិងទំលាក់ហើយវាគឺជាសារៈប្រយោជន៏មួយសំរាប់អ្នកប្រើប្រាស់នៅលើគេហទំព័រដែលត្រូវបានសរសេរដោយប្រើប្រាស់ភាសា HTML5 ដែលវាមានលក្ខណៈងាយស្រួលនៅក្នុងការ ថតចម្លង (copy)។ ម្យ៉ាងវិញទៀតនោះវារឹតតែមានភាពងាយស្រួលទៅទៀតនៅពេលដែលអ្នកចង់ផ្លាស់ប្ដូរទីតាំងរបស់ធាតុអ្វីមួយគឺគ្រាន់តែចុចទៅលើ mouse ឲ្យជាប់រួចទាញទៅដាក់ត្រង់កន្លែងដែលអ្នកចង់ដាក់នោះជាការស្រេច ។
ស្វែងយល់ពី figure និង figcaption នៅក្នុង HTML5
<figure> ត្រូវបានគេប្រើសំរាប់ស្រោប រូបភាព ដ្យាក្រាម ឬ ឯកសារណាមួយ។ ចំណែក <figcaption> ប្រើសំរាប់នៅក្នុង<figure> សំរាប់ធ្វើជាចំណងជើងពន្យល់ពីរូបភាព ដ្យាក្រាម ឬ ឯកសារនោះ។
របៀបប្រើប្រាស់ Canvas នៅលើ HTML5
canvas គឺជាធាតុស្លាក (tag element) នៅក្នុង HTML5 ដែលប្រើសំរាប់គូរក្រាហ្វិកបានយ៉ាងលឿននៅលើវេបសាយតាមរយះ JavaScript។ នៅក្នុងអត្ថបទនេះ Techfree នឹងលើកយកអំពី របៀបប្រើប្រាស់ Canvas មកបង្ហាញជូនអ្នកទាំងអស់គ្នា។ ដើម្បីចាប់ផ្តើមជាមួយនឹង Canvas អ្វីដែលអ្នកទាំងអស់គ្នាត្រូវការគឺ Editor សំរាប់សរសេរកូដនិងកម្មវិធីមើលវេបសាយ (Browser) ជាមូយ HTML5 ។ ខ្ញុំសូមលើកយក Editor Sublime និងកម្មវិធីមើលវេបសាយ (Browser) Google Chrome មកបង្ហាញ
SVG ពាក្យពេញ Scalable Vector Graphics ហើយវាគឺជាភាសាសម្រាប់រៀបរាប់អំពី 2D ក្រាហ្វិក និងកម្មវិធីក្រាហ្វិកនៅក្នុង XML ។ SVG ភាគច្រើនមានប្រយោជន៍សម្រាប់បង្កើតវ៉ិចទ័រប្រភេទជាដ្យាក្រាម ដូចជា Pie charts, ក្រាហ្វិកដែលមានពីរវិមាត្រ (Two-dimensional graphs) ដែល X , Y ជាប្រព័ន្ធកូអរដោណេ (coordinate system)។ SVG ត្រូវបានកំណត់ស្តង់ដារដោយ W3C នៅឆ្នា១៩៩៩ ហើយអ្នកអាចពិនិត្យមើលកំណែចុងក្រោយបំផុតនៃការបញ្ជាក់របស់ SVG នៅក្នុង SVG Specification។
របៀបប្រើប្រាស់ Geolocation ក្នុង HTML5
នៅក្នុងចំនុចនេះ Techfree សូមលើកយកពីរបៀបប្រើប្រាស់ Geolocation មកបង្ហាញអ្នកទាំងអស់គ្នា។ តើអ្វីទៅជា Geolocation ? Geolocation API គឺ អនុញ្ញាតឱ្យអ្នកប្រើដើម្បីផ្តល់នូវព័ត៌មានទីតាំងរបស់អ្នកប្រើ។ អត្ថបទនេះនឹងបង្ហាញពីរបៀបចាប់យក latitude និង longitude តាមរយះកម្មវិធីមើលវេបសាយដោយផ្ទាល់។ ប្រើវិធីសាស្ត្រ getCurrentPosition () ដើម្បីទទួលបាននូវទីតាំងរបស់អ្នកប្រើ។ ឧទាហរណ៍ខាងក្រោមនេះគឺជាឧទាហរណ៍ទីតាំងភូមិសាស្ដ្រសាមញ្ញមួយដោយប្រើ latitude និង longitude នៃទីតាំងរបស់អ្នកប្រើ។
របៀបប្រើប្រាស់ MathML នៅក្នុង HTML5
MathML មានបំណងដើម្បីជួយសម្រួលដល់ការសរសេររូបមន្តគណិតវិទ្យា នៅលើវេបសាយ។ អត្ថបទនេះនឹងលើកយករបៀបសរសេរ MathML នៅក្នុង HTML5។
កម្មវិធីមើលវេបសាយ (web browsers) ភាគច្រើនអាចបង្ហាញស្លាក MathML បាន។ ប្រសិនបើកម្មវិធីមើលវេបសាយរបស់អ្នកមិនអាចបង្ហាញស្លាក MathML ទេ អ្នកត្រូវប្រើកំណែចុងក្រោយបំផុតរបស់ Firefox ។
របៀបដាក់បង្ហាញវីដេអូសំលេងជាមួយ HTML5
នៅក្នុងអត្ថបទនេះ Techfree នឹងលើកបង្ហាញពីរបៀបដាក់បង្ហាញវីដេអូសំលេងជាមួយ HTML5។ ដើម្បីអាចដាក់វីដេអូសំលេងបាន យើងត្រូវស្វែងយល់ពីតំលៃ (value) ខ្លះៗ ដែលត្រូវយកប្រើប្រាស់ក្នុងវីដេអូសំលេងនេះ ដូចជា៖
របៀបបង្កើត Media Player HTML5 with VideoJs
នៅអត្ថបទនេះ Techfree នឹងធ្វើការបង្រៀនលោកអ្នកពីរបៀបបង្កើត Media Player ជាមួយ HTML5 ដែលធ្វើការភ្ចាប់ជាមួយ Videojs។ Videojs គឺជា Player Framework មួយដែលគេបង្កើតឡើងសំរាប់ធ្វើការជាមួយ វីដេអូ ហើយវាមានភាពងាយស្រូល ក្នុងការកំនត់ទៅលើវាដោយមិនមានភាពស្មុកស្មាញឡើយ។ Videojs វាមានសារៈសំខាន់សំរាប់អ្នក បង្កើតវេបសាយដែល ចង់យកវីដេអូយកមកដាក់លើវេបសាយដែលមានលក្ខណះស្រស់ស្អាតជាងមុននោះ។
ការដាក់បង្ហាញឯកសារជា PDF នៅលើគេហទំព័រ
នៅលើវេបសាយរបស់យើង អាចបង្ហាញឯកសារជា អត្ថបទ រូបភាព ហើយសូម្បីតែឯកសារ PDF បានយ៉ាងងាយស្រួលដោយការប្រើកូដ HTML សាមញ្ញក្នុងការតភ្ជាប់ទៅកាន់ឯកសារ PDF ។ ធ្វើការ Upload ទៅលើគេហទំព័រ ឬ Drive ណាមួយដែលយើងចង់ទុក ដូចជា Dropbox , OneDrvie ជាដើម។
ការផ្ទុកទិន្នន័យតាមរយៈ Local storage ជាមួយ HTML5
Local storage: ត្រូវបានគេបង្កើតឡើងសំរាប់ធ្វើការផ្ទុកទិន្នន័យដោយផ្ទាល់ជាមួយកម្មវិធីមើលវេបសាយ (Browser)។ តាមរយៈបច្ចេកទេស Local storage គេអាចរក្សាទិន្នន័យផ្សេងៗជាមួយកម្មវិធីមើលវេបសាយ ហើយក៏អាចប្រើទិន្នន័យទាំងនោះ នៅពេលមិនមានអុីនធឺណិត។ បើសិនជាយើងចង់លុប Local Storage មួយណាគឺយើងចាំបាច់ត្រូវប្រើ localStorage.remove(‘key’) ។ key គឺជា key នៃឈ្មោះដែលបានកំណត់ ដូចឧទាហរណ៍ខាងលើ key គឺ hits។
កម្មវិធី Framework សំខាន់ៗប្រើសំរាប់បង្កើត HTML5 ហ្គេម
HTML5 ត្រូវបានគេប្រើសំរាប់បង្កើតវេបសាយផ្សេងៗនាពេលបច្ចុប្បន្ន។ ហើយ HTML5 ក៏អាចប្រើសំរាប់បង្កើតហ្គេម បានដែរ។ ដើម្បីបង្កើត HTML5 ហ្គេម អ្នកត្រូវស្វែងយល់ពី Canvas និង WebGL ដែលជាផ្នែកមួយនៃ HTML5 ហើយនិង Javascript បន្ថែមទៀត។ ខាងក្រោមគឺជា Framework សំខាន់ៗមួយចំនួនដែលអ្នកអាចប្រើជាជំនួយក្នុងការបង្កើត HTML5 ហ្គេមបានលឿន និងងាយស្រួល។