Home មេរៀនស្តីអំពី HTML​ & HTML5

មេរៀនស្តីអំពី HTML​ & HTML5

by Sophal
មេរៀនស្តីអំពី HTML​ & HTML5

អត្ថបទផ្សេងៗ ដែលបង្រៀនអំពី HTML & HTML5 ។ ដើម្បីឈានទៅរៀនបង្កើត កម្មវិធីវេប អ្នកចាំបាច់ត្រូវចេះ HTML។

មូលដ្ឋានគ្រឹៈ របស់ HyperText Markup Language (HTML)

htmlHTML គឺជាភាសាមួយដែលគេប្រើសំរាប់បង្កើតវេបសាយ។ ដើម្បីឈានទៅសិក្សាភាសាកុំព្យូទ័រសំរាប់បង្កើត វេបសាយផ្សេងទៀត អ្នកត្រូវតែចេះ HTML ជាមុន។ អត្ថបទនេះនឹងបង្ហាញពីមូលដ្ឋានគ្រឹៈរបស់ HTML មុននឹងសិក្សាសុីជំរៅលើផ្នែកផ្សេងៗទៀតរបស់ HTML។

 

 

របៀបបង្កើតតារាងនៅក្នុង HTML

htmlតារាងមានសារៈសំខាន់ណាស់ក្នុងការបែកចែកបង្ហាញព័ត៌មានអ្វីមួយ ដើម្បីងាយស្រួលយល់។ ក្នុងអត្ថបទនេះនឹងបង្ហាញពីរបៀបបង្កើតរាតាងនៅក្នុងអត្ថបទ HTML ។  ប្រសិនបើមិនទាន់សិក្សាពីមូលដ្ឋានគ្រឹៈរបស់ HTML សូមអាននៅទំព័រនេះជាមុន។ <table> ប្រើសំរាប់បង្កើតតារាងនៅក្នុងអត្ថបទ HTML ដូចនៅបន្ទាត់ទី៩ ហើយបិទមកវិញនៅបន្ទាត់ទី១៩ ដែលមានន័យថាតារាងបញ្ចប់ត្រឹមនេះ។ <tr> សំរាប់កំណត់ចំនួនជួរពីលើចុះក្រោម ចំណែកឯ <td> ប្រើសំរាប់កំណត់ចំនួនជូរពីឆ្វេងមកស្តាំ។

 

របៀបបង្កើត Form នៅក្នុង HTML5

html5_badge_512HTML5 គឺជាការធ្វើឱ្យទាន់សម័យនឹងធ្វើឲ្យប្រសើរជាងមុននៃបច្ចេកវិទ្យារបស់ HTML។ ហើយ Form ត្រូវបានគេប្រើសំរាប់ទទួលទិន្នន័យពីអ្នកប្រើ។ អត្ថបទនេះនឹងលើកយកវិធីសាស្រ្តក្នុងការបង្កើត FORM ជាមួយ HTML5។

 

 

វិធីបង្ហាញរូបភាព និងភ្ជាប់ទំព័រនៅក្នុង HTML

htmllinkimageនៅពេលបង្កើតវេបសាយអ្នកត្រូវយល់ដឹងពីរបៀប ដាក់រូបភាព និងការភ្ជាប់ពីទំព័រមួយទៅទំព័រមួយទៀត ឬពីវេបសាយមួយទៅវេបសាយមួយទៀត។ អត្ថបទនេះនឹងបង្ហាញពីរបៀបដាក់បង្ហាញរូបភាព និងភ្ជាប់ទំព័រនៅក្នុង HTML។  ប្រសិនបើមិនទាន់សិក្សាពីមូលដ្ឋានគ្រឹៈរបស់ HTML សូមអាននៅទំព័រនេះជាមុន។ <img src=”flag.jpg” /> បង្ហាញពីរបៀបបង្ហាញរូបភាព ហើយ flag.jpg គឺជាឈ្មោះរូបភាព ។ ប្រភេទរូបភាពដែលគេនិយមប្រើគឺ jpg png និង gif។

 

របៀបបង្កើតរូបភាពផែនទី (Image Map) នៅក្នុង HTML

image-mapនៅក្នុងHTMLយើងអាចបង្កើតផែនទីនៅលើរូបភាពបានដើម្បីធ្វើកំណត់គោលដៅនៃទីតាំងណាមួយបានដើម្បីមានភាពងាយស្រួលសំរាប់អ្នកប្រើប្រាស់ក្នុងការស្វែងរកទីតាំងនោះ។នៅបន្ទាត់ទី៩គឺសំរាប់ដាក់រូបភាពដែរមានទទឹង៥០%និងបណ្តោយ៥០%ហើយនៅក្នុងនោះមានពាក្យ usemap=”#khmermap” គឺជា id សំរាប់យកទៅប្រើជាមួយcodeសំរាប់បង្កើតរូបភាពផែនទី(map tag  HTML)។

 

ភាពខុសគ្នារវាង DIV និង SPAN

div-and-spanនៅក្នុង HTML បើសិនជាយើងចង់ធ្វើការខ្ចប់រាល់បណ្តា Element ឲ្យទៅជាបណ្តុំតែមួួយគឺយើងមានជំរើសពីរក្នុងការធ្វើឲ្យរាល់បណ្តា Element នោះទៅជាក្រុមតែមួយដោយប្រើ DIV និង SPAN ។ DIV ត្រូវបានគេប្រើប្រាស់សំរាប់ធ្វើការខ្ចប់រាល់ HTML Element ឲ្យទៅជាក្រុមតែមួយហើយរាល់ការបញ្ចប់នូវ DIV នីមួយៗត្រូវបានចុះបន្ទាត់ដោយស្វ័យប្រវត្តិទោះបីជាយើងខំសរសេរ DIV បន្តគ្នាមិនចុះដើមបន្ទាត់យ៉ាងណាក៏ដោយក៏វាចុះបន្ទាត់ឲ្យយើងដែរ (Block Level Element) ។

របៀបបំលែងឯកសារ HTML ទៅជា PDF ជាមួយនឹង wkhtmltopdf

htmltopdfថ្ងៃនេះ 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)

hmtls-listបញ្ជីមិនតាមលំដាប់ (Unordered lists)នៅក្នុង HTML5 ត្រូវបានប្រើស្លាក <ul>។ ធាតុបញ្ជីនីមួយៗចាប់ផ្តើមដោយស្លាក <li>។ តាមលំនាំដើមបញ្ជីធាតុទាំងអស់នឹងត្រូវបានសម្គាល់ជា bullet (រង្វង់ខ្មៅតូច) ។

 

 

តើអ្វីទៅជា iframe នៅក្នុុង HTML5 ?

iframe-in-html5អត្ថបទនេះ Techfree នឹងបង្រៀនអ្នកទាំងអស់គ្នា ពីរបៀបបញ្ចូលគេហទំព័រចូលទៅក្នុងគេហទំព័រវិញម្តងដោយប្រើ Iframe នៅក្នុង HTML5។ ដើម្បីអោយកាន់តែច្បាស់ខ្ញុំសុំលើកយក Attribute ចំនូន៣ ដែកភាគច្រើនដែលត្រូវធ្វើការជាមួយ Iframeមកបង្ហាញ៖

១) src attribute សំរាប់កំណត់ URL នៃគេហទំព័រផ្សេងទៀត ។
២) height attribute សំរាប់កំណត់ប្រវែងបញ្ឈរ ។
៣) width attribute សំរាប់កំណត់ប្រវែងផ្ដេក ។

ស្វែងយល់ពី Section នៅក្នុង HTML5

sectionHTML5 គឺជាជំនាន់ទី 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

image_article_feacture1HTML5 គឺជាភាសាមូលដ្ឋានគ្រិះសម្រាប់ធ្វើការបង្កើតគេហទំព័រដែលមានលក្ខណៈមិនសូវផ្លាស់ប្តូរ (Static) ។ ក្នុងចំនុចនេះ Techfree នឹងលើក article tag  ថ្មីរបស់ HTML5 មកបង្ហាញ។ article គឺជា Tag នៅក្នុង html 5 ដែលអាចបញ្ជាក់ឯករាជ្យមាតិកាខ្លួនឯងផ្ទាល់។ article ប្រើសំរាប់បំបែកអត្តបទជាផ្នែកៗនៅលើ វេបសាយ។

 

 

របៀបប្រើប្រាស់ Progress Tag នៅក្នុង HTML5

tag_progress_html5អត្ថបទនេះនឹង និយាយអំពីរបៀបនៃការប្រើប្រាស់ Tag <progress> នៅក្នុងភាសា HTML 5  ដែល Tag <progress>នេះយើងប្រើវាសម្រាប់ធ្វើការបង្ហាញទៅកាន់អ្នកប្រើប្រាស់ ថាវាកំពុងតែដំណើរការទៅលើសកម្មភាពអ្វីមួយ។ សម្រាប់ Tag <progress>នៅក្នុងភាសា HTML គេនិយមប្រើវានៅកន្លែងដែលមានសកម្មភាព ទាញយក (Download) និង សកម្មភាព ចូលទៅកាន់កន្លែងណាមួយ(Log in) ។ ក្នុងការប្រើប្រាស់ Tag <progress> HTML5 វាតម្រូវអោយមាន Attributes ពីរគឺ Max និង Value ព្រមទាំងតំលៃរបស់ Attributes ទាំងពីរនោះផងដែរ។

របៀបប្រើប្រាស់ ASIDE នៅក្នុង HTML5

aside_html5ASIDEគឺជាស្លាករបស់ HTML5 ដែរមានលក្ខណៈស្រដៀងគ្នាទៅនិង DIV ដែរតែ ASIDE ត្រូវបានប្រើប្រាស់សំរាប់ពន្យល់ន័យទៅឲ្យអត្ថបទណាដែរទាក់ទងនិងគ្នាឬសំរាប់ពន្យល់ន័យទៅឲ្យមាតិការ ។

នៅបន្ទាត់ទី១០ដល់បន្ទាត់ទី១៥នេះគេបានប្រើប្រាស់ ASIDE សំរាប់ពន្យល់អត្ថន័យឲ្យទៅ SECTION គឺជាការពន្យល់ន័យទៅឲ្យចំណងជើងនៃអត្ថបទនោះផងដែរ ។

 

របៀប Drag និង Drop នៅក្នុង HTML5

dndDrag and Drop មានន័យថាការទាញនិងទំលាក់ហើយវាគឺជាសារៈប្រយោជន៏មួយសំរាប់អ្នកប្រើប្រាស់នៅលើគេហទំព័រដែលត្រូវបានសរសេរដោយប្រើប្រាស់ភាសា HTML5 ដែលវាមានលក្ខណៈងាយស្រួលនៅក្នុងការ ថតចម្លង (copy)។ ម្យ៉ាងវិញទៀតនោះវារឹតតែមានភាពងាយស្រួលទៅទៀតនៅពេលដែលអ្នកចង់ផ្លាស់ប្ដូរទីតាំងរបស់ធាតុអ្វីមួយគឺគ្រាន់តែចុចទៅលើ mouse ឲ្យជាប់រួចទាញទៅដាក់ត្រង់កន្លែងដែលអ្នកចង់ដាក់នោះជាការស្រេច ។

 

ស្វែងយល់ពី figure និង figcaption នៅក្នុង HTML5

figcaption<figure> ត្រូវបានគេប្រើសំរាប់ស្រោប រូបភាព ដ្យាក្រាម ឬ ឯកសារណាមួយ។ ចំណែក <figcaption> ប្រើសំរាប់នៅក្នុង<figure> សំរាប់ធ្វើជាចំណងជើងពន្យល់ពីរូបភាព ដ្យាក្រាម ឬ ឯកសារនោះ។

 

 

របៀបប្រើប្រាស់ Canvas នៅលើ HTML5

canvascanvas គឺជាធាតុស្លាក (tag element) នៅក្នុង HTML5 ដែលប្រើសំរាប់គូរក្រាហ្វិកបានយ៉ាងលឿននៅលើវេបសាយតាមរយះ JavaScript។ នៅក្នុងអត្ថបទនេះ Techfree នឹងលើកយកអំពី របៀបប្រើប្រាស់ Canvas មកបង្ហាញជូនអ្នកទាំងអស់គ្នា។ ដើម្បីចាប់ផ្តើមជាមួយនឹង Canvas អ្វីដែលអ្នកទាំងអស់គ្នាត្រូវការគឺ Editor សំរាប់សរសេរកូដនិងកម្មវិធីមើលវេបសាយ (Browser)  ជាមូយ HTML5 ។ ខ្ញុំសូមលើកយក Editor Sublime និងកម្មវិធីមើលវេបសាយ (Browser) Google Chrome មកបង្ហាញ

 

SVG នៅក្នុង HTML5

svg-newSVG ពាក្យពេញ Scalable Vector Graphics ហើយវាគឺជាភាសាសម្រាប់រៀបរាប់អំពី 2D ក្រាហ្វិក និងកម្មវិធីក្រាហ្វិកនៅក្នុង XML ។ SVG ភាគច្រើនមានប្រយោជន៍សម្រាប់បង្កើតវ៉ិចទ័រប្រភេទជាដ្យាក្រាម ដូចជា Pie charts, ក្រាហ្វិកដែលមានពីរវិមាត្រ (Two-dimensional graphs) ដែល X , Y ជាប្រព័ន្ធកូអរដោណេ (coordinate system)។ SVG ត្រូវបានកំណត់ស្តង់ដារដោយ W3C នៅឆ្នា១៩៩៩ ហើយអ្នកអាចពិនិត្យមើលកំណែចុងក្រោយបំផុតនៃការបញ្ជាក់របស់ SVG នៅក្នុង SVG Specification

 

របៀបប្រើប្រាស់ Geolocation ក្នុង HTML5

feature_background3នៅក្នុងចំនុចនេះ Techfree សូមលើកយកពីរបៀបប្រើប្រាស់ Geolocation មកបង្ហាញអ្នកទាំងអស់គ្នា។ តើអ្វីទៅជា Geolocation ? Geolocation API គឺ អនុញ្ញាតឱ្យអ្នកប្រើដើម្បីផ្តល់នូវព័ត៌មានទីតាំងរបស់អ្នកប្រើ។ អត្ថបទនេះនឹងបង្ហាញពីរបៀបចាប់យក latitude និង longitude តាមរយះកម្មវិធីមើលវេបសាយដោយផ្ទាល់។ ប្រើវិធីសាស្ត្រ getCurrentPosition () ដើម្បីទទួលបាននូវទីតាំងរបស់អ្នកប្រើ។ ឧទាហរណ៍ខាងក្រោមនេះគឺជាឧទាហរណ៍ទីតាំងភូមិសាស្ដ្រសាមញ្ញមួយដោយប្រើ latitude និង longitude នៃទីតាំងរបស់អ្នកប្រើ។

 

របៀបប្រើប្រាស់ MathML នៅក្នុង HTML5

mathmlMathML មានបំណងដើម្បីជួយសម្រួលដល់ការសរសេររូបមន្តគណិតវិទ្យា នៅលើវេបសាយ។ អត្ថបទនេះនឹងលើកយករបៀបសរសេរ MathML នៅក្នុង HTML5។

កម្មវិធីមើលវេបសាយ (web browsers) ភាគច្រើនអាចបង្ហាញស្លាក MathML បាន។ ប្រសិនបើកម្មវិធីមើលវេបសាយរបស់អ្នកមិនអាចបង្ហាញស្លាក MathML ទេ អ្នកត្រូវប្រើកំណែចុងក្រោយបំផុតរបស់ Firefox  ។

 

របៀបដាក់បង្ហាញវីដេអូសំលេងជាមួយ HTML5

hmtl5video-thumbនៅក្នុងអត្ថបទនេះ Techfree នឹងលើកបង្ហាញពីរបៀបដាក់បង្ហាញវីដេអូសំលេងជាមួយ HTML5។ ដើម្បីអាចដាក់វីដេអូសំលេងបាន យើងត្រូវស្វែងយល់ពីតំលៃ (value) ខ្លះៗ ដែលត្រូវយកប្រើប្រាស់ក្នុងវីដេអូសំលេងនេះ ដូចជា៖

 

 

របៀបបង្កើត Media Player HTML5 with VideoJs

feature_image1នៅអត្ថបទនេះ Techfree នឹងធ្វើការបង្រៀនលោកអ្នកពីរបៀបបង្កើត Media Player ជាមួយ HTML5 ដែលធ្វើការភ្ចាប់ជាមួយ Videojs។ Videojs គឺជា Player Framework មួយដែលគេបង្កើតឡើងសំរាប់ធ្វើការជាមួយ វីដេអូ ហើយវាមានភាពងាយស្រូល ក្នុងការកំនត់ទៅលើវាដោយមិនមានភាពស្មុកស្មាញឡើយ។ Videojs វាមានសារៈសំខាន់សំរាប់អ្នក បង្កើតវេបសាយដែល ចង់យកវីដេអូយកមកដាក់លើវេបសាយដែលមានលក្ខណះស្រស់ស្អាតជាងមុននោះ។

 

ការដាក់បង្ហាញឯកសារជា PDF នៅលើគេហទំព័រ

Display File pdf on web siteនៅលើវេបសាយរបស់យើង អាចបង្ហាញឯកសារជា អត្ថបទ រូបភាព ហើយសូម្បីតែឯកសារ PDF បានយ៉ាងងាយស្រួលដោយការប្រើកូដ HTML សាមញ្ញក្នុងការតភ្ជាប់ទៅកាន់ឯកសារ PDF ។ ធ្វើការ Upload ទៅលើគេហទំព័រ ឬ Drive ណាមួយដែលយើងចង់ទុក ដូចជា Dropbox , OneDrvie ជាដើម។

 

ការផ្ទុកទិន្នន័យតាមរយៈ Local storage ជាមួយ HTML5

local-storageLocal storage: ត្រូវបានគេបង្កើតឡើងសំរាប់ធ្វើការផ្ទុកទិន្នន័យដោយផ្ទាល់ជាមួយកម្មវិធីមើលវេបសាយ (Browser)។ តាមរយៈបច្ចេកទេស Local storage គេអាចរក្សាទិន្នន័យផ្សេងៗជាមួយកម្មវិធីមើលវេបសាយ ហើយក៏អាចប្រើទិន្នន័យទាំងនោះ នៅពេលមិនមានអុីនធឺណិត។ បើសិនជាយើងចង់លុប Local Storage មួយណាគឺយើងចាំបាច់ត្រូវប្រើ localStorage.remove(‘key’) ។  key គឺជា key នៃឈ្មោះដែលបានកំណត់ ដូចឧទាហរណ៍ខាងលើ key គឺ hits។

 

កម្មវិធី Framework សំខាន់ៗប្រើសំរាប់បង្កើត HTML5 ហ្គេម

html5gameHTML5 ត្រូវបានគេប្រើសំរាប់បង្កើតវេបសាយផ្សេងៗនាពេលបច្ចុប្បន្ន។ ហើយ HTML5 ក៏អាចប្រើសំរាប់បង្កើតហ្គេម បានដែរ។ ដើម្បីបង្កើត HTML5 ហ្គេម អ្នកត្រូវស្វែងយល់ពី Canvas និង WebGL ដែលជាផ្នែកមួយនៃ HTML5 ហើយនិង Javascript បន្ថែមទៀត។ ខាងក្រោមគឺជា Framework សំខាន់ៗមួយចំនួនដែលអ្នកអាចប្រើជាជំនួយក្នុងការបង្កើត HTML5 ហ្គេមបានលឿន និងងាយស្រួល។