រៀន HTML5 ធ្វើខ្លួនឯង

HTML5 គឺជាស្តង់ដារ HTML ដែលថ្មីបំផុតដែលផ្គត់ ផ្គងដំណើរការជាមួយ Smartphone ប្រើ Android បាន ប្រសើរជាង HTML។

HTML5

* ធាតុ លក្ខណៈថ្មី
* ជំនួយ CSS3
* វីដេអូនិងអូឌីយ៉ូ, ក្រាហ្វិក 2D/3D
* មូលដ្ឋានទិន្នន័យ SQL
* កម្មវិធីបណ្តាញ
ជាមួយកម្មវិធីរបស់ HTML យើងអ្នកអាចកែសម្រួល HTML ។ ឧទាហរណ៏
<!DOCTYPE HTML>
<html>
<body>
<video width=”320″ height=”240″ controls>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>
</body>
</html>

HTML5 គឺជាអ្វី? មានអ្វីថ្មី? HTML5 នឹងស្តង់ដាថ្មីសម្រាប់ជា HTML ។ កំណែថ្មីនៃ HTML, HTML បាន 4 មានក្នុងឆ្នាំ 1999 ។ ត្រូវបានផ្លាស់ប្តូរជាច្រើនចាប់តាំងពីពេលនោះមក។ HTML5 គឺនៅតែតែ អភិវឌ្ឍន៍។ ទោះជាយ៉ាងណាមានកម្មវិធីរុករកដ៏ធំគាំទ្រជាច្រើននៃធាតុ HTML5 ថ្មីនិង APIs ។
តើ HTML5 ចាប់ផ្តើមដោយរបៀបណា?
ក្បួនមួយចំនួនសម្រាប់ HTML5 ត្រូវបានបង្កើតឡើង:
- លក្ខណៈពិសេសថ្មីផ្អែកលើ HTML គឺជា CSS, របស់ DOM, និង JavaScript
- កាត់បន្ថយតម្រូវការសម្រាប់កម្មវិធីជំនួយខាងក្រៅ (ដូច Flash),
- ការគ្រប់គ្រងកំហុសក្នុងកាន់តែប្រសើរ
- មានកូដបន្ថែមទៀតដើម្បីជំនួសស្គ្រីប
- HTML5 គួរតែជាឧបករណ៍ឯករាជ្យ
- ដំណើរការអភិវឌ្ឍន៍អាចមើលឃើញដល់សាធារណៈ
HTML5 នេះ <! DOCTYPE>
<! doctype> នៅក្នុង HTML5 មានតែមួយប៉ុណ្ណោះគឺការប្រកាសហើយវាសាមញ្ញ:

<!DOCTYPE html>
ខាងក្រោមនេះឯកសារ HTML5 ធម្មតាគឺជាមួយនឹងអប្បបរមានៃស្លាកដែលត្រូវការ:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document……
</body>
</html>
លក្ខណៈពិសេសថ្មី HTML5
លក្ខណៈពិសេសថ្មីគួរឱ្យចាប់អារម្មណ៍បំផុតនៅក្នុង HTML5 គឺ:
១.ធាតុ <canvas> សម្រាប់គំនូរ 2D
២. ធាតុ <video> និង <audio> សម្រាប់ព័ត៌មាន ចាក់សារថ្មី
៣. ការគាំទ្រសម្រាប់ការផ្ទុកមូលដ្ឋាន
៤. ធាតុមាតិកាជាក់លាក់ថ្មីដូចជា <article>, <footer>, <header>, <nav>, <section>
៥. វត្ថុបញ្ជាសំណុំបែបបទថ្មីដូចជាប្រតិទិនកាលបរិច្ឆេទពេលវេលាអ៊ីមែល URL ស្វែងរក
ការគាំទ្រសម្រាប់ HTML5 កម្មវិធីរុករក HTML5 គឺមិនទាន់មានស្ដង់ដារមួយជាផ្លូវការនិងប្រើកម្មវិធីរុករក បណ្ដាញគ្មានមានការគាំទ្រ HTML5 ពេញ លេញ នៅឡើយ។ ប៉ុន្ដែមានកម្មវិធីរុករកដ៏ធំ (Safari, Chrome, Firefox , Opera សម្រាប់ប្រើ អ៊ិនធឺ ណិរុករក) បន្តដើម្បីបន្ថែមលក្ខណៈពិសេសថ្មីរបស់ HTML5 ទៅកំណែចុងក្រោយបំផុតរបស់ពួកគេ។
HTML សរសេរដោយប្រើ Notepad ឬ TextEdit កម្មវិធីHTML ត្រូវបានកែសម្រួលដោយប្រើកម្មវិធីសរសេររបស់ HTML ដែលមានជំនាញដូចជា:
-កម្មវិធី Adobe Dreamweaver
- បណ្ដាញម៉ៃក្រូសូហ្វ Frontpage
- CoffeeCup កម្មវិធីសរសេរកូដរបស់ HTML
ជំហានទី 1: ចាប់ផ្តើម Notepadដើម្បីចាប់ផ្ដើម Notepad សូមចូលទៅកាន់:
ចាប់ផ្តើម
    កម្មវិធីទាំងអស់
        គ្រឿង
            Notepad
ជំហានទី 2: កែសម្រួល HTML របស់អ្នកជាមួយនឹង Notepad
សូមវាយបញ្ចូលកូដ HTML របស់អ្នកចូលទៅក្នុង Notepad :

ជំហានទី 3: HTML ដែលរក្សាទុកជ្រើស រក្សាទុកជា .. នៅក្នុងម៉ឺនុយឯកសារ Notepad របស់។ នៅពេលដែលអ្នករក្សាទុកជាឯកសារ HTML អ្នកអាចប្រើដោយ Save ជា file មានកន្ទុយ htm ។

ជំហានទី 4: HTML ដែលរត់នៅក្នុងកម្មវិធីរុករករបស់អ្នក: ចាប់ផ្តើមកម្មវិធីរុករកបណ្ដាញរបស់អ្នកនិងបើកឯកសារ html របស់អ្នកពី ឯកសារ :បានរក្សា ទុករួចហើយចុចទ្វេដងលើឯកសារ HTML របស់អ្នក។ លទ្ធផលគួរតែមើលទៅច្រើនដូចនេះ:

ធាតុថ្មីនៅក្នុង HTML5 អ៊ិនធើណិនិង ការប្រើប្រាស់អ៊ីនធឺណិតនោះបានផ្លាស់ ប្តូរជាច្រើនចាប់តាំងពី 4 HTML ដែលបានក្លាយជាស្ដង់ដារនៅក្នុងឆ្នាំ 1999 នេះ។ សព្វថ្ងៃនេះធាតុជាច្រើនក្នុង HTML 4 គឺគេលែងប្រើហើយ, មិនត្រូវបានប្រើ។ ធាតុទាំងអស់ទាំងនោះត្រូវបានយកចេញឬ សរសេរនៅក្នុង HTML5 វិញ។ ដើម្បី ឱ្យកាន់តែប្រសើរឡើងដោះ ស្រាយ ការប្រើ ប្រាស់អ៊ិនធឺណិនាពេលបច្ចុប្បន្ននេះរបស់ HTML5 ផងដែររួមបញ្ចូលទាំងធាតុថ្មីសម្រាប់ក្រាហ្វិកដែលបន្ថែម មាតិកាប្រព័ន្ធផ្សព្វផ្សាយរចនាសម្ព័ន្ធទំព័រល្អប្រសើរជាងមុន, ការដោះស្រាយសំណុំបែបបទល្អប្រសើរជាងមុននិង APIs ជាច្រើនដើម្បីអូស / ទម្លាក់ធាតុ, រកឃើញទីតាំងភូមិសាស្ដ្រ, រួមបញ្ចូលទាំងការផ្ទុកបណ្ដាញ។

ធាតុ <canvas> ថ្មី
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
Media ថ្មី

Tag	Description
<audio>	Defines sound content
<video>	Defines a video or movie
<source>	Defines multiple media resources for <video> and <audio>
<embed>	Defines a container for an external application or interactive content (a plug-in)
<track>	Defines text tracks for <video> and <audio>

ធាតុសំណុំបែបថ្មី

Tag	Description
<datalist>	Specifies a list of pre-defined options for input controls
<keygen>	Defines a key-pair generator field (for forms)
<output>	Defines the result of a calculation

ធាតុ Semantic / រចនាសម្ព័ន្ធថ្មី HTML5 ផ្តល់នូវធាតុថ្មីមួយសម្រាប់រចនាសម្ព័ន្ធប្រសើរជាងមុន:

Tag	Description
<article>	Defines an article
<aside>	Defines content aside from the page content
<bdi>	Isolates a part of text that might be formatted in a different direction from other text outside it
<command>	Defines a command button that a user can invoke
<details>	Defines additional details that the user can view or hide
<dialog>	Defines a dialog box or window
<summary>	Defines a visible heading for a <details> element
<figure>	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption>	Defines a caption for a <figure> element
<footer>	Defines a footer for a document or section
<header>	Defines a header for a document or section
<hgroup>	Groups a set of <h1> to <h6> elements when a heading has multiple levels
<mark>	Defines marked/highlighted text
<meter>	Defines a scalar measurement within a known range (a gauge)
<nav>	Defines navigation links
<progress>	Represents the progress of a task
<ruby>	Defines a ruby annotation (for East Asian typography)
<rt>	Defines an explanation/pronunciation of characters (for East Asian typography)
<rp>	Defines what to show in browsers that do not support ruby annotations
<section>	Defines a section in a document
<time>	Defines a date/time
<wbr>	Defines a possible line-break

ធាតុបានយកចេញ
នេះដូចខាងក្រោម 4,01 ធាតុរបស់ HTML ត្រូវបានយកចេញពី HTML5:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

HTML5 Canvas ធាតុ <canvas> ត្រូវបានប្រើដើម្បីគូរក្រាហ្វិកនៅលើរហ័សនៅលើទំព័របណ្តាញមួយ ។ គូរចតុកោណកែងពណ៌ក្រហមចតុកោណកែងជម្រាលជាចតុកោណកែង multicolor និងខ្លះអត្ថបទដែលបាន multicolor ដាក់លើ Canvas:

canvas គឺជាអ្វី? ធាតុ <canvas> HTML5 គឺត្រូវបានប្រើដើម្បីគូរក្រាហ្វិកនៅលើរហ័សនោះតាមរយៈការសរសេរ ស្គ្រីប (ជាធម្មតាការអនុញ្ញាត JavaScript) ។ ធាតុ <canvas> គឺគ្រាន់តែជាឧបករណ៍ផ្ទុកសម្រាប់ក្រាហ្វិកមួយ។ អ្នក ត្រូវតែប្រើស្គ្រីបដើម្បីពិតជាគូរក្រាហ្វិក។ canvas មានវិធីសាស្រ្តជាច្រើនសម្រាប់ផ្លូវគំនូរ, ប្រអប់, រង្វង់, តួអក្សរនិងរូបភាពបានបន្ថែម។
ការគាំទ្រកម្មវិធីរុករក រុករកអ៊ិនធឺណិ 9 + Firefox មាន, របស់ Opera, Chrome និង Safari គាំទ្រធាតុ <canvas> នេះ។

ចំណាំ: កំណែថ្មីរបស់កម្មវិធីរុករកអ៊ិនធឺណិ 8 និងមុននេះ, មិនគាំទ្រធាតុ <canvas> នេះ។
បង្កើត canvas មួយ canvas គឺជាតំបន់ចតុកោណនៅលើទំព័រ HTML មួយហើយវាត្រូវបានបញ្ជាក់ជាមួយនឹងធាតុ <canvas> នេះ។
ចំណាំ: តាមលំនាំដើមធាតុ <canvas> មានព្រំដែននោះទេហើយគ្មានមាតិកា។ markup ដែលមើលទៅដូចនេះ:
<canvas id=”myCanvas” width=”200″ height=”100″></canvas>
ដើម្បីបន្ថែមនៅតាមព្រំដែនជាមួយ, ប្រើគុណលក្ខណៈរចនាបទ:
ឧទាហរណ៏

គូរលើcanvas ដោយមាន JavaScript នេះ គំនូរនៅលើផ្ទាំងក្រណាត់ទាំងអស់ត្រូវតែត្រូវបានធ្វើនៅខាងក្នុងការអនុញ្ញាត JavaScript ថា:
ឧទាហរណ៏
<script>
var c=document.getElementById(“myCanvas”);

var ctx=c.getContext(“2d”);
ctx.fillStyle=”#FF0000″;
ctx.fillRect(0,0,150,75);
</script> ឩទាហរណ៍ពន្យល់:

ជាដំបូងរកឃើញធាតុ <canvas>
var c=document.getElementById(“myCanvas”);
បន្ទាប់មក, ហៅ getContext (របស់ខ្លួន) វិធីសាស្ត្រ (អ្នកត្រូវតែកូសខ្សែអក្សរ “2D” ដើម្បី getContext នេះ () វិធីសាស្ត្រ):
var ctx=c.getContext(“2d”);

វត្ថុ getContext (“2D”) គឺជាការបង្កើតក្នុងវត្ថុ HTML5 ជាមួយនឹងលក្ខណៈសម្បត្តិជាច្រើននិងវិធីសាស្រ្តសំរាប់ផ្លូវការ គូរប្រអប់រង្វង់, អត្ថបទ, រូបភាពនិងច្រើនទៀត។ បន្ទាប់ពីរបន្ទាត់គូរចតុកោណកែងពណ៌ក្រហមមួយ:

ctx.fillStyle=”#FF0000″;
ctx.fillRect(0,0,150,75);

លក្ខណៈសម្បត្តិ fillStyle អាចជាពណ៌ជា CSS, ជម្រាលឬលំនាំមួយ។ fillStyle លំនាំដើមគឺ # 000000 (ពណ៌ខ្មៅ) ។

ការ fillRect ( X, Y, ទទឹងកម្ពស់ វិធីសាស្ត្រ) គូរចតុកោណដែលបានបំពេញជាមួយរចនាប័ទ្មបំពេញបច្ចុប្បន្ននេះ។
ផ្ទាំងក្រណាត់កូអរដោនេ ផ្ទាំងក្រណាត់ នេះគឺជាក្រឡាចត្រង្គដែលមានពីរវិមាត្រ។ ជ្រុងខាងលើឆ្វេងនៃផ្ទាំងក្រណាត់មានកូអរដោនេ (0,0) ដូច្នេះ fillRect នេះ () វិធីសាស្រ្តខាងលើបានប៉ារ៉ាម៉ែត្រ (0,0,150,75) ។ នេះមានន័យថា: ចាប់ផ្តើមនៅជ្រុងខាងលើឆ្វេង (0,0) និងគូរចតុកោណដែលជាភីកសែល 150×75 ។
ឩទាហរណ៍សំរបសំរួល កណ្តុរនៅលើចតុកោណ កែងខាងក្រោមដើម្បីមើលកូអរដោនេ x និង Y របស់វា:

Canvas ផ្លូវ ដើម្បីគូរបន្ទាត់ត្រង់នៅលើផ្ទាំងក្រណាត់ មួយ ដែលយើងនឹងប្រើវិធីសាស្រ្តពីរដូចខាងក្រោម:
- moveTo ( X, Y ) កំណត់ជាចំណុចចាប់ផ្តើមនៃបន្ទាត់
- lineTo ( X, Y ) កំណត់ចំណុចដែលបញ្ចប់នៃបន្ទាត់
ប្រើកូដ JavaScript:

var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

ដើម្បីគូររង្វង់មួយដែលនៅលើ Canvas មួយដែលយើងនឹងប្រើវិធីសាស្ដ្រដូចខាងក្រោម:
- ធ្នូ (x Y, r,, ការចាប់ផ្តើមបញ្ឈប់ការ)
ដើម្បីគូររង្វង់តាមពិតយើងត្រូវតែប្រើវិធីសាស្រ្ត មួយនៃ “ទឹកថ្នាំ”, () ឬបំពេញ () ។ បង្កើតរង្វង់មួយដែលមានវិធីសាស្ត្រធ្នូ ():
ការប្រើ JavaScript:

var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Canvas សរសេរជា- អត្ថបទ ដើម្បីគូរអត្ថបទនៅលើផ្ទាំងក្រណាត់មួយដែលជាទ្រព្យសម្បត្ដិដ៏សំខាន់បំផុតនិងជាវិធីសាស្រ្តនោះគឺ:
- ពុម្ពអក្សរ – កំណត់លក្ខណៈសម្បត្តិសម្រាប់ពុម្ពអក្សរអត្ថបទ
- fillText ( អត្ថបទ, X, Y ) – គូរអត្ថបទ “បានបំពេញ” នៅលើផ្ទាំងក្រណាត់
- strokeText ( អត្ថបទ, X, Y ) – គូរអត្ថបទនៅលើផ្ទាំងក្រណាត់ (គ្មានបំពេញ) ការប្រើ fillText ():
ឧទាហរណ៏ សរសេរអត្ថបទមួយដែលបានបំពេញ 30px ខ្ពស់នៅលើផ្ទាំងក្រណាត់នោះដោយប្រើពុម្ពអក្សរ “Arial”:
កូដJavaScript:

var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.font=”30px Arial”;
ctx.fillText(“Hello World”,10,50);

ប្រើកូដJavaScript:
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.font=”30px Arial”;
ctx.strokeText(“Hello World”,10,50);

Canvas ជម្រាល ជម្រាល អាចត្រូវបានប្រើដើម្បីបំពេញចតុកោណកែង, រង្វង់បន្ទាត់អត្ថបទរាងលនៅលើផ្ទាំងក្រណាត់មិនត្រូវបានកំណត់ទៅ ជាពណ៌រឹង។មានពីរប្រភេទផ្សេងគ្នានៃជម្រាលគឺ:
- createLinearGradient ( X, Y, x1, y1 ) – បង្កើតជម្រាលលីនេអ៊ែរ
- createRadialGradient ( X, Y, r,, x1, y1, r1 ) – បង្កើតជម្រាលមូល / រាងជារង្វង់នៅពេលដែលយើងមានវត្ថុជម្រាលមួយយើងត្រូវតែបន្ថែមពីរឬច្រើនជាងនេះឈប់ពណ៌។ addColorStop នេះ () វិធីសាស្ត្របញ្ជាក់ឈប់ពណ៌និងជំហររបស់ខ្លួននៅតាមជម្រាលនោះទេ។ ជម្រាលអាចត្រូវបានគ្រប់ទីកន្លែងរវាង 0 ទៅ 1 ។ ដើម្បីប្រើជម្រាលដែលបានកំណត់លក្ខណៈសម្បត្តិ fillStyle ឬ strokeStyle ទៅជម្រាលហើយបន្ទាប់មកគូររូបរាងដូចចតុកោណអត្ថបទឬបន្ទាត់មួយ។ ការប្រើ createLinearGradient ():

ឧទាហរណ៏ បង្កើតជម្រាលលីនេអ៊ែរ។ បំពេញចតុកោណកែងជាមួយជម្រាលនេះ:
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,”red”);
grd.addColorStop(1,”white”);
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

ឧទាហរណ៏ បង្កើតជម្រាលមូល / រាងជារង្វង់។ បំពេញចតុកោណកែងជាមួយជម្រាលនេះ:
កូដ JavaScript:

var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”); // Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,”red”);
grd.addColorStop(1,”white”);
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Canvas ដាក់រូបភាព
ដើម្បីគូររូបភាពនៅលើផ្ទាំងក្រណាត់មួយដែលយើងនឹងប្រើវិធីសាស្ដ្រដូចខាងក្រោម: drawImage ( រូបភាព, X, Y )
កូដ
c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
var img=document.getElementById(“chhunnan”);
ctx.drawImage(img,10,10);
មេរៀន HTML5 Inline SVG
HTML5 មានការគាំទ្រសម្រាប់ក្នុង SVG ។
SVG គឺជាអ្វី?
-SVG ឈរសម្រាប់ក្រាហ្វិកវ៉ិចទ័រដែលអាចធ្វើមាត្រដ្ឋាន
-SVG ត្រូវបានប្រើដើម្បីកំណត់ក្រាហ្វិកវ៉ិចទ័រដែលមានមូលដ្ឋានសម្រាប់បណ្ដាញ
-SVG កំណត់ក្រាហ្វិកនៅក្នុងទ្រង់ទ្រាយ XML
ក្រាហ្វិក SVG ធ្វើមិនបាត់បង់គុណភាពណាមួយប្រសិនបើពួកគេត្រូវបានពង្រីកឬប្តូរទំហំ
ធាតុរៀងរាល់និងគុណលក្ខណៈទាំងអស់នៅក្នុង-ឯកសារ SVG អាចត្រូវបាន animated
- SVG គឺជាអនុសាសន៍ W3C
គុណសម្បត្តិ SVG អត្ថប្រយោជន៍នៃការប្រើ SVG ជាងទ្រង់ទ្រាយរូបភាពផ្សេងទៀត (ដូចជា JPEG, GIF ម្ដងទៀតនិងការ) គឺ:
-រូបភាព SVG អាចត្រូវបានបង្កើតឡើងនិងបានកែសម្រួលដោយប្រើកម្មវិធីនិពន្ធអត្ថបទណាមួយ
-រូបភាព SVG អាចត្រូវបានស្វែងរកសន្ទស្សន៍ស្គ្រីបនិងការបង្ហាប់
-រូបភាព SVG គឺប្រែព្រួល
-រូបភាព SVG អាចត្រូវបានបោះពុម្ពដោយមានគុណភាពខ្ពស់នៅក្នុងដំណោះស្រាយណាមួយទេ
-រូបភាព SVG គឺ zoomable (និងរូបភាពដែលអាចត្រូវបានពង្រីកដោយមិនចាំបាច់មានការរិចរិល)
SVG ដោយផ្ទាល់ទៅក្នុងទំព័រ HTML & # នៅក្នុង HTML5 អ្នកអាចបង្កប់ធាតុ SVG ដោយផ្ទាល់ទៅក្នុងទំព័រ HTML របស់អ្នក:
ឧទាហរណ៏
<!DOCTYPE html>
<html>
<body>
<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″ height=”190″>
<polygon points=”100,10 40,180 190,60 10,60 160,180″
style=”fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;”>
</svg>
</body>
</html>
លទ្ឋផល:

ភាពខុសគ្នារវាង SVG និងCanvas
SVG គឺជាភាសាសម្រាប់ពណ៌នាក្រាហ្វិក 2D នៅក្នុង XML ដែលមួយ។ Canvas គូរក្រាហ្វិក 2D នៅលើលឿន (ដោយមានការប្រើ JavaScript មួយ) ។
SVG គឺមានមូលដ្ឋានលើ XML មានដែលមានន័យថាជារៀងរាល់គឺជាធាតុដែលអាចរកបាននៅក្នុង SVG របស់ DOM ។ អ្នកអាចភ្ជាប់កម្មវិធីដោះស្រាយព្រឹត្តិការណ៍ការប្រើ JavaScript សម្រាប់ធាតុមួយ។ នៅក្នុង SVG, នីមួយរូបរាងត្រូវបានដកចេញត្រូវបានគេចងចាំថាជាវត្ថុមួយ។ ប្រសិនបើគុណលក្ខណៈ SVG នៃវត្ថុមួយដែលត្រូវបានផ្លាស់ប្តូរកម្មវិធីរុករកដោយស្វ័យ ប្រវត្តិអាច re-បង្ហាញរូបរាង។
Canvas ត្រូវបានបង្ហាញភីកសែលដោយភីកសែល។ នៅក្នុងCanvas , នៅពេលដែលត្រូវបានគូរក្រាហ្វិក, វាត្រូវបានគេបំភ្លេចចោលដោយកម្មវិធីរុករក។ ប្រសិនបើជំហររបស់ខ្លួនគួរតែត្រូវបានផ្លាស់ប្តូរនោះជាកន្លែង ទាំងមូលត្រូវ redrawn រួមទាំងវត្ថុណាមួយដែលអាចនឹងត្រូវបានគ្របដណ្តប់ដោយក្រាហ្វិក ។
មេរៀន HTML5 Drag និង Drop
Drag និង Drop អូសនិងទម្លាក់គឺជាលក្ខណៈពិសេសមួយ ដែលមានញឹកញាប់ណាស់។ វាគឺជាពេលដែលអ្នក “ចាប់” វត្ថុមួយនិងអូសវាទៅទីតាំងផ្សេងគ្នា។ នៅក្នុង HTML5, អូសនិងទម្លាក់គឺជាផ្នែកមួយនៃស្តង់ដារនិងធាតុណាមួយដែលអាច ទាញបាន ។
ឧទាហរណ៏

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
} function drag(ev)
{
ev.dataTransfer.setData(“Text”,ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id=”div1″ ondrop=”drop(event)”
ondragover=”allowDrop(event)”></div>
<img id=”drag1″ src=”img_logo.gif” draggable=”true”
ondragstart=”drag(event)” width=”336″ height=”69″>
</body>
</html>

ធ្វើឱ្យ Draggable ធាតុមួយ
ជាដំបូងនៃការទាំងអស់: ដើម្បីធ្វើឱ្យ draggable ធាតុមួយកំណត់គុណលក្ខណៈ draggable ទៅ true:
<img draggable=”true”>
តើអ្វីទៅ – ondragstart និង setData ()
បន្ទាប់មកបញ្ជាក់អ្វីដែលគួរកើតឡើងនៅពេលដែលធាតុត្រូវបានអូស។ នៅក្នុងឧទាហរណ៍ខាងលើគុណលក្ខណៈ ondragstart បានហៅមុខងារអូស (ព្រឹត្តិការណ៍) ដែលបញ្ជាក់ពីអ្វីដែលទិន្នន័យត្រូវបានអូស។ dataTransfer.setData នេះ () វិធីសាស្រ្តកំណត់ប្រភេទទិន្នន័យនិងតម្លៃនៃទិន្នន័យដែលបានអូស នេះ:
function drag(ev)
{
ev.dataTransfer.setData(“Text”,ev.target.id);
}
កន្លែងដែលត្រូវដាក់ – ondragover
ព្រឹត្តិការណ៍ ondragover បញ្ជាក់កន្លែងដែលទិន្នន័យអាចត្រូវបានអូសធ្លាក់ចុះ។តាមលំនាំដើម ទិន្នន័យ / ធាតុមិនអាចត្រូវបានធ្លាក់ចុះនៅក្នុងធាតុផ្សេងទៀត។ ដើម្បីអនុញ្ញាតឱ្យមានការធ្លាក់ចុះមួយដែលយើងត្រូវតែការពារការ ដោះស្រាយលំនាំដើមនៃធាតុនេះ។
event.preventDefault () វិធីសាស្ត្រសម្រាប់ព្រឹត្តិការណ៍ ondragover នេះ:
event.preventDefault()
តើដាក់នៅ – ondrop
នៅពេលដែលទិន្នន័យត្រូវបានធ្លាក់ចុះបានអូសព្រឹត្តិការណ៍ទម្លាក់កើតឡើង។
នៅក្នុងឧទាហរណ៍ខាងលើគុណលក្ខណៈ ondrop បានហៅអនុគមន៍មួយ, ការធ្លាក់ចុះ (ព្រឹត្តិការណ៍):
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(data));
}
មេរៀន HTML5 ទីតាំងភូមិសាស្ដ្រGeolocation
រកទីតាំងទីតាំងរបស់អ្នកប្រើ
ទីតាំងភូមិសាស្ដ្រ នេះ បាន HTML5 API គឺត្រូវបានប្រើដើម្បីទទួលបាននូវទីតាំងភូមិសាស្រ្តនៃអ្នកប្រើ។
ចាប់តាំងពីពេលនេះអាចនឹងប៉ះពាល់ដល់ភាពឯកជន របស់អ្នកប្រើទីតាំងនេះគឺមិនអាចធ្វើបានទេលុះត្រាតែអ្នកប្រើ ដែលបានយល់ព្រម។
HTML5 – ការប្រើទីតាំងភូមិសាស្ដ្រ ប្រើវិធីសាស្ត្រ getCurrentPosition () ដើម្បីទទួលបាននូវទីតាំងរបស់អ្នកប្រើ។ ឧទាហរណ៏ខាងក្រោមនេះគឺជាឧទាហរណ៏មួយទីតាំងភូមិសាស្ដ្រសាមញ្ញ ប្រើ latitude និង longitude នៃទីតាំងរបស់អ្នកប្រើ:
ឧទាហរណ៏
<script>
var x=document.getElementById(“demo”);
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML=”Geolocation is not supported by this browser.”;}
}
function showPosition(position)
{
x.innerHTML=”Latitude: ” + position.coords.latitude +
“<br>Longitude: ” + position.coords.longitude;
}
</script>
កំហុសការគ្រប់គ្រងនិងការបដិសេធ ប៉ារ៉ាម៉ែត្រ វិធីសាស្ត្រទីពីរនៃ getCurrentPosition () គឺត្រូវបានប្រើដើម្បីដោះស្រាយកំហុស។ វាបញ្ជាក់ពីមុខងារដើម្បីរត់ប្រសិនបើវាបានបរាជ័យដើម្បីទទួលបាន នូវទីតាំងរបស់អ្នកប្រើមួយ:
ឧទាហរណ៏
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML=”User denied the request for Geolocation.”
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML=”Location information is unavailable.”
break;
case error.TIMEOUT:
x.innerHTML=”The request to get user location timed out.”
break;
case error.UNKNOWN_ERROR:
x.innerHTML=”An unknown error occurred.”
break;
}
}
បង្ហាញលទ្ធផលនៅក្នុងផែនទី ដើម្បីបង្ហាញ លទ្ធផលនៅក្នុងផែនទីមួយដែលអ្នកត្រូវការចូលដំណើរការទៅកាន់សេវា ផែនទីមួយដែលអាចប្រើ latitude និង longitude ដូចផែនទីរបស់ Google:
ឧទាហរណ៏
function showPosition(position)
{
var latlon=position.coords.latitude+”,”+position.coords.longitude;
var img_url=”http://maps.googleapis.com/maps/api/staticmap?center=”
+latlon+”&zoom=14&size=400×300&sensor=false”;
document.getElementById(“mapholder”).innerHTML=”<img src=’”+img_url+”‘>”;
}

ពត៌មានទីតាំងជាក់លាក់
ទំព័រនេះបង្ហាញពីរបៀបដើម្បីបង្ហាញពីទីតាំងរបស់អ្នកប្រើនៅលើ ផែនទី។ ទោះជាយ៉ាងណាក៏ទីតាំងភូមិសាស្ដ្រនេះគឺមានប្រយោជន៍ខ្លាំងណាស់ សម្រាប់ព័ត៌មានទីតាំងជាក់លាក់។
ឧទាហរណ៏:
-ឡើងលើដើម្បីកាលបរិច្ឆេទពត៌មានមូលដ្ឋាន
-បង្ហាញពីចំណុចនៃការចាប់អារម្មណ៍នៅជិតអ្នកប្រើ
-បើកដោយវេន-រុករក (GPS)

វិធីសាស្រ្ត getCurrentPosition នេះ () – ទិន្នន័យត្រឡប់ទៅរក
getCurrentPosition នេះ () វិធីសាស្ត្រត្រឡប់វត្ថុមួយបើវាគឺទទួលបានជោគជ័យ។ លក្ខណៈសម្បត្តិ latitude នេះ longitude និងភាពត្រឹមត្រូវត្រូវបានត្រឡប់មកវិញជានិច្ច។ លក្ខណៈសម្បត្តិផ្សេងទៀតនៅខាងក្រោមនឹងត្រូវបានត្រឡប់មកវិញ ប្រសិនបើអាចប្រើបាន។

Property	Description
coords.latitude	The latitude as a decimal number
coords.longitude	The longitude as a decimal number
coords.accuracy	The accuracy of position
coords.altitude	The altitude in meters above the mean sea level
coords.altitudeAccuracy	The altitude accuracy of position
coords.heading	The heading as degrees clockwise from North
coords.speed	The speed in meters per second
timestamp	The date/time of the response

វត្ថុទីតាំងភូមិសាស្ដ្រ – វិធីសាស្រ្ត interesting ផ្សេងទៀត
watchPosition () – ត្រឡប់ទីតាំងបច្ចុប្បន្នរបស់អ្នកប្រើហើយបន្តទៅវិលត្រឡប់មក ទីតាំងដែលបានធ្វើឱ្យទាន់សម័យជាផ្លាស់ទីអ្នកប្រើ (ដូចជា GPS នៅក្នុងរថយន្តមួយ) ។ clearWatch () – បញ្ឈប់ watchPosition នេះ () វិធីសាស្ដ្រ។ ឧទាហរណ៏ដូចខាងក្រោមនេះបង្ហាញពីវិធីសាស្រ្ត watchPosition នេះ () ។ អ្នកត្រូវការឧបករណ៍ GPS ត្រឹមត្រូវដើម្បីសាកល្បងនេះ (ដូចជាទូរស័ព្ទ iPhone):
ឧទាហរណ៏
<script>
var x=document.getElementById(“demo”);
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML=”Geolocation is not supported by this browser.”;}
}
function showPosition(position)
{
x.innerHTML=”Latitude: ” + position.coords.latitude +
“<br>Longitude: ” + position.coords.longitude;
}
</script>
មេរៀន HTML5 Video

វីដេអូនៅលើបណ្តាញ
រហូតមកដល់ពេលបច្ចុប្បន្ននេះមានបានមិនត្រូវបានស្តង់ដារសម្រាប់ បង្ហាញវីដេអូមួយ / ខ្សែភាពយន្តនៅលើទំព័របណ្តាញមួយ។សព្វថ្ងៃនេះវីដេអូភាគច្រើនគឺ ត្រូវបានបង្ហាញតាមរយៈកម្មវិធីជំនួយក្នុង (ដូចជា Flash) ។ ទោះជាយ៉ាងណាមានកម្មវិធីរុករកផ្សេងគ្នាអាចមានភាពខុសគ្នាដោត -ins ។ HTML5 កំណត់ធាតុថ្មីដែលបញ្ជាក់ពីវិធីដែលជាស្តង់ដារដើម្បីបង្កប់វីដេអូ / ខ្សែភាពយន្តនៅលើទំព័របណ្តាញមួយ: ធាតុ <video> នេះ។
របៀបដែលវាធ្វើការ
ដើម្បីបង្ហាញវីដេអូនៅក្នុង HTML5 មួយនេះគឺជាអ្វីទាំងអស់ដែលអ្នកត្រូវការ:
ឧទាហរណ៏
<video width=”320″ height=”240″ controls>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>

ធ្វើទ្រង់ទ្រាយវីដេអូនិងផ្តល់ជំនួយកម្មវិធីរុករក
MP4 បាន WebM, Ogg និង: បច្ចុប្បន្នមាន 3 ទ្រង់ទ្រាយវីដេអូការគាំទ្រសម្រាប់ធាតុ <video> គឺ:

Browser	MP4	WebM	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	NO	YES	YES
Safari 5+	YES	NO	NO
Opera 10.6+	NO	YES	YES

ប្រភេទ MIME សម្រាប់ការធ្វើទ្រង់ទ្រាយវីដេអូ

rmat	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

HTML5 <video> – វិធីសាស្រ្តនិងលក្ខណៈសម្បត្តិរបស់ DOM
HTML5 មានវិធីសាស្រ្តរបស់ DOM នេះ អចលន ទ្រព្យនិងព្រឹត្តិការណ៍សំរាប់ <video> និងធាតុ <audio> ។
វិធីសាស្រ្តទាំងនេះ មានលក្ខណៈសម្បត្តិនិងព្រឹត្តិការណ៍អនុញ្ញាតឱ្យអ្នករៀបចំធាតុ <video> និង <audio> ដោយប្រើការអនុញ្ញាត JavaScript ។
និងការផ្ទុកសម្រាប់ឧទាហរណ៏និងមានលក្ខណសម្បត្តិ (ដូចជារយៈពេលនិងកម្រិតសំឡេង) ។ វាក៏មានព្រឹត្តិការណ៍របស់ DOM ដែលអាចផ្ដល់ដំណឹងដល់អ្នកនៅពេលដែលធាតុ <video> ចាប់ផ្តើមលេងគឺត្រូវបានផ្អាកត្រូវបានបញ្ចប់
មេរៀន HTML5 Audio
អូឌីយ៉ូនៅលើបណ្តាញ
រហូតមកដល់ពេល បច្ចុប្បន្ន នេះមានបានស្តង់ដារត្រឹមត្រូវសម្រាប់ចាក់ឯកសារអូឌីយ៉ូនៅលើទំព័របណ្តាញមួយ។
សព្វថ្ងៃនេះឯកសារអូឌីយ៉ូដែលបានច្រើនបំផុតត្រូវបានចាក់តាមរយៈកម្មវិធីជំនួយក្នុង (ដូចជា Flash) ។
HTML5 កំណត់ធាតុថ្មីដែលបញ្ជាក់ពីវិធីដែលជាស្តង់ដារដើម្បីបង្កប់ឯកសារ អូឌីយ៉ូនៅលើទំព័របណ្តាញមួយ: ធាតុ <audio> នេះ។
របៀបដែលវាធ្វើការ
ដើម្បីចាក់ឯកសារអូឌីយ៉ូនៅក្នុង HTML5, នេះគឺជាអ្វីទាំងអស់ដែលអ្នកត្រូវការ:
ឧទាហរណ៏
<audio controls>
<source src=”horse.ogg” type=”audio/ogg”>
<source src=”horse.mp3″ type=”audio/mpeg”>
Your browser does not support the audio element.
</audio>
ទ្រង់ទ្រាយអូឌីយ៉ូនិងករផ្តល់ជំនួយកម្មវិធីរុករក
MP3 បាន WAV, និង Ogg: បច្ចុប្បន្នមាន 3 ទ្រង់ទ្រាយឯកសារការគាំទ្រសម្រាប់ធាតុ <audio> គឺ

owser	MP3	Wav	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	NO	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	NO	YES	YES

MIME សម្រាប់ការធ្វើទ្រង់ទ្រាយអូឌីយ៉ូ

Format	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

មេរៀន HTML5 Input Types

បញ្ចូល HTML5 ប្រភេទថ្មី
HTML5 មានប្រភេទព័ត៌មានបញ្ចូលជាច្រើនដែលថ្មីសម្រាប់ទម្រង់។ ទាំងនេះជាលក្ខណៈពិសេសថ្មីអនុញ្ញាតឱ្យត្រួតពិនិត្យការបញ្ចូលបាន ល្អប្រសើរនិងត្រឹមត្រូវ។
ពណ៌
កាលបរិច្ឆេត
datetime
datetime-មូលដ្ឋាន
អ៊ីម៉ែល
ខែ
ចំនួន
ជួរ
ស្វែងរក
ទូរស័ព្ទ
ពេលវេលា
URL
សប្តាហ៍
បញ្ចូលប្រភេទពណ៌
Select your favorite color: <input type=”color” name=”favcolor”>
បញ្ចូលប្រភេទកាលបរិច្ឆេទ
Birthday: <input type=”date” name=”bday”>
បញ្ចូលប្រភេទdatetime
Birthday (date and time): <input type=”datetime” name=”bdaytime”>
បញ្ចូលប្រភេទdatetime-មូលដ្ឋាន
Birthday (date and time): <input type=”datetime-local” name=”bdaytime”>
បញ្ចូលប្រភេទអ៊ីម៉ែល
E-mail: <input type=”email” name=”email”>
បញ្ចូលប្រភេទខែ
Birthday (month and year): <input type=”month” name=”bdaymonth”>
បញ្ចូលប្រភេទចំនួន
Quantity (between 1 and 5): <input type=”number” name=”quantity” min=”1″ max=”5″>
បញ្ចូលប្រភេទជួរ
<input type=”range” name=”points” min=”1″ max=”10″>
បញ្ចូលប្រភេទស្វែងរក
Search Google: <input type=”search” name=”googlesearch”>
បញ្ចូលប្រភេទទូរស័ព្ទ
Telephone: <input type=”tel” name=”usrtel”>
បញ្ចូលប្រភេទពេលវេលា
Select a time: <input type=”time” name=”usr_time”>
បញ្ចូលប្រភេទURL
Add your homepage: <input type=”url” name=”homepage”>
បញ្ចូលប្រភេទសប្តាហ៍

Select a week: <input type=”week” name=”week_year”>
មេរៀន HTML5 Form Elements
HTML5 ថ្មីធាតុទម្រង់
HTML5 មានដូចខាងក្រោមធាតុសំណុំបែបបទថ្មី:
<datalist>
<keygen>
<output>
ចំណាំ: មិនមែនទាំងអស់ដែលមានកម្មវិធីរុករកដ៏ធំគាំទ្រទាំងអស់ធាតុសំណុំ បែបថ្មីនោះទេ។ ទោះជាយ៉ាងណាអ្នកអាចចាប់ផ្តើមរួចទៅហើយដោយប្រើប្រសិនបើពួក គេចូលប្រើមិនកើត ដូចជាវាលអត្ថបទមើលមិនឃើញ។
ធាតុ HTML5 <datalist>
ធាតុ <datalist> បញ្ជាក់បញ្ជីរបស់ជម្រើសដែលបានកំណត់ជាមុនសម្រាប់ធាតុ <input> មួយ។
ធាតុ <datalist> ត្រូវបានប្រើដើម្បីផ្ដល់នូវលក្ខណៈពិសេស “ស្វ័យប្រវត្តិ” នៅលើធាតុ <input> ។ អ្នកប្រើប្រាស់នឹងឃើញបញ្ជីនៃជម្រើសដែលបានកំណត់ជាមុនជាការ បញ្ចូលទិន្នន័យរបស់ពួកគេ។
ប្រើគុណលក្ខណៈបញ្ជីធាតុ <input> របស់វាទៅចងរួមគ្នាជាមួយធាតុមួយ <datalist> ។ របស់ OperaSafariChromeFirefox មានកម្មវិធីរុករក អ៊ិនធឺណិ ឧទាហរណ៏
ធាតុ <input> មួយជាមួយនឹងតម្លៃដែលបានកំណត់មុននៅក្នុង <datalist> មួយ:
<input list=”browsers”>
<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>
ធាតុ HTML5 <keygen>
គោលបំណងនៃធាតុ <keygen> នេះគឺដើម្បីផ្តល់ជាវិធីដ៏មានសុវត្ថិភាពដើម្បីផ្ទៀងផ្ទាត់ភាព ត្រឹមត្រូវរបស់អ្នកប្រើ។ ស្លាក <keygen> បញ្ជាក់វាលម៉ាស៊ីនភ្លើងគ្រាប់ចុចគូនៅក្នុងសំណុំបែបបទ។

សំណុំបែបបទជាមួយវាល keygen មួយ:
<form action=”demo_keygen.asp” method=”get”>

Username: <input type=”text” name=”usr_name”>
Encryption: <keygen name=”security”>
<input type=”submit”>
</form>

ធាតុ HTML5 <output>
ធាតុ <output> តំណាងឱ្យលទ្ធផលនៃការគណនា (ដូចជាមួយដែលបានអនុវត្តដោយស្គ្រីប) មួយ។
របស់ OperaSafariChromeFirefox មានកម្មវិធីរុករកអ៊ិនធឺណិ
ឧទាហរណ៏
អនុវត្តការគណនាមួយនិងបង្ហាញលទ្ធផលនៅក្នុងធាតុ <output> ថា:
<form oninput=”x.value=parseInt(a.value)+parseInt(b.value)”>0
<input type=”range” id=”a” value=”50″>100 +
<input type=”number” id=”b” value=”50″>=
<output name=”x” for=”a b”></output>
</form>

មេរៀន Form Attributes
HTML5 ថ្មីគុណលក្ខណៈទម្រង់
HTML5 មានគុណលក្ខណៈថ្មីជាច្រើនសម្រាប់ការ <form> និង <input> ។
គុណលក្ខណៈថ្មីសម្រាប់ <form>:
ស្វ័យប្រវត្តិ
novalidate
គុណលក្ខណៈថ្មីសម្រាប់ <input>:

-ស្វ័យប្រវត្តិ
-autofocus
-សំណុំបែបបទ
-formaction
-formenctype
-formmethod
-formnovalidate
-formtarget
-កម្ពស់និងទទឹង
-បញ្ជី
-នាទីនិងអតិបរមា
-ច្រើន
-លំនាំ (regexp)
-កន្លែងដាក់
-តម្រូវឱ្យមាន
-ក្នុងចម្ការ
-<form> / <input>ស្វ័យប្រវត្តិ
គុណលក្ខណៈស្វ័យប្រវត្តិបញ្ជាក់ថាតើវាលសំណុំបែបបទឬបញ្ចូលគួរតែ មាននៅលើស្វ័យប្រវត្តិបិទឬបើក។នៅពេលដែលស្វ័យប្រវត្តិគឺនៅលើ កម្មវិធីរុករកដោយស្វ័យប្រវត្តិតម្លៃពេញលេញដែលមានមូលដ្ឋានលើ តម្លៃដែលអ្នកប្រើបានមុនពេលដែលបានបញ្ចូល
ឧទាហរណ៏
មួយសំណុំបែបបទ HTML ជាមួយស្វ័យប្រវត្តិនៅលើ (និងបិទសម្រាប់វាលបញ្ចូលមួយ):
<form action=”demo_form.asp” autocomplete=”on”>
First name:<input type=”text” name=”fname”><br>
Last name: <input type=”text” name=”lname”><br>
E-mail: <input type=”email” name=”email” autocomplete=”off”><br>
<input type=”submit”>
</form>
-គុណលក្ខណៈ <form> novalidate
ឧទាហរណ៏
បង្ហាញថាទម្រង់គឺមិនត្រូវបានធ្វើឱ្យមានសុពលភាពនៅលើដាក់ជូន:

គុណលក្ខណៈ <input> autofocus

នៅពេលបច្ចុប្បន្ននេះវាបញ្ជាក់ថាធាតុ <input> មួយដោយស្វ័យប្រវត្តិគួរទទួលបានការផ្តោតអារម្មណ៍នៅពេលដែលផ្ទុក ទំព័រ។ របស់ OperaSafariChromeFirefox មានកម្មវិធីរុករកអ៊ិនធឺណិ
ឧទាហរណ៏
សូមឱ្យបាន “ឈ្មោះដំបូង” វាលបញ្ចូលដោយស្វ័យប្រវត្តិនៅពេលដែលទទួលបានផ្តោតការផ្ទុកទំព័រ:
First name:<input type=”text” name=”fname” autofocus>

គុណលក្ខណៈសំណុំបែបបទ <input>
ឧទាហរណ៏
វាលបញ្ចូលមួយដែលមានទីតាំងស្ថិតនៅខាងក្រៅសំណុំបែបបទរបស់ HTML (ប៉ុន្តែនៅតែជាផ្នែកមួយនៃសំណុំបែបបទមួយ):
<form action=”demo_form.asp” id=”form1″>
First name: <input type=”text” name=”fname”><br>
<input type=”submit” value=”Submit”>
</form>
Last name: <input type=”text” name=”lname” form=”form1″>
គុណលក្ខណៈ formaction <input>

គុណលក្ខណៈ formaction បញ្ជាក់ URL នៃឯកសារមួយដែលនឹងដំណើរការត្រួតពិនិត្យការបញ្ចូលនៅពេលដែលសំណុំ បែបបទនេះត្រូវបានដាក់ជូន។
គុណលក្ខណៈគុណលក្ខណៈ formaction បានបដិសេធសកម្មភាពនៃធាតុ <form> នេះ។
ឧទាហរណ៏
មួយសំណុំបែបបទ HTML ជាមួយពីរប៊ូតុងដាក់ស្នើដោយមានសកម្មភាពផ្សេងគ្នា:
<form action=”demo_form.asp”>
First name: <input type=”text” name=”fname”><br>
Last name: <input type=”text” name=”lname”><br>
<input type=”submit” value=”Submit”><br>
<input type=”submit” formaction=”demo_admin.asp”
value=”Submit as admin”>
</form>
គុណលក្ខណៈ <input> formenctype
គុណលក្ខណៈ formenctype បញ្ជាក់អំពីរបៀបដែលសំណុំបែបបទទិន្នន័យគួរតែត្រូវបានដាក់ស្នើនៅ ពេលដែលអ៊ីនកូដវាទៅម៉ាស៊ីនបម្រើ (សម្រាប់តែសំណុំបែបបទជាមួយវិធីសាស្ត្រ = “ប្រកាស”)
គុណ លក្ខណៈគុណលក្ខណៈ formenctype បដិសេធ enctype នៃធាតុ <form> នេះ។
ឧទាហរណ៏
<form action=”demo_post_enctype.asp” method=”post”>
First name: <input type=”text” name=”fname”><br>
<input type=”submit” value=”Submit”>
<input type=”submit” formenctype=”multipart/form-data”
value=”Submit as Multipart/form-data”>
</form>
គុណលក្ខណៈ <input> formmethod
គុណលក្ខណៈ formmethod កំណត់វិធីសាស្ត្រ HTTP សម្រាប់ការផ្ញើសំណុំបែបបទទិន្នន័យទៅជា URL សកម្មភាព។ គុណលក្ខណៈគុណលក្ខណៈ formmethod បដិសេធវិធីសាស្ត្រនៃធាតុ <form> នេះ។
ឧទាហរណ៏
<form action=”demo_form.asp” method=”get”>
First name: <input type=”text” name=”fname”><br>
Last name: <input type=”text” name=”lname”><br>
<input type=”submit” value=”Submit”>
<input type=”submit” formmethod=”post” formaction=”demo_post.asp”
value=”Submit using POST”>
</form>
គុណលក្ខណៈ <input> formnovalidate
គុណលក្ខណៈគុណលក្ខណៈ novalidate គឺជាប៊ូលីន។ នៅពេលបច្ចុប្បន្ននេះវាបញ្ជាក់ថាធាតុ <input> មិនគួរត្រូវបានធ្វើឱ្យមានសុពលភាពនៅពេលដែលត្រូវបានដាក់ស្នើ។
ឧទាហរណ៏
<form action=”demo_form.asp”>
E-mail: <input type=”email” name=”userid”><br>
<input type=”submit” value=”Submit”><br>
<input type=”submit” formnovalidate value=”Submit without validation”>
</form>
គុណលក្ខណៈ formtarget <input>
គុណលក្ខណៈ formtarget បញ្ជាក់ឈ្មោះឬពាក្យគន្លឹះដែលបានចង្អុលបង្ហាញកន្លែងដែលត្រូវ បង្ហាញការឆ្លើយតបដែលត្រូវបានទទួលបន្ទាប់ពីការដាក់ស្នើសំណុំ បែបបទនេះ។
ឧទាហរណ៏
<form action=”demo_form.asp”>
First name: <input type=”text” name=”fname”><br>
Last name: <input type=”text” name=”lname”><br>
<input type=”submit” value=”Submit as normal”>
<input type=”submit” formtarget=”_blank”
value=”Submit to a new window”>
</form>
<input> កម្ពស់និងទទឹងគុណលក្ខណៈ
គុណលក្ខណៈកម្ពស់និងទទឹងបញ្ជាក់កម្ពស់និងទទឹងនៃធាតុ <input> មួយ។
ឧទាហរណ៏
<input type=”image” src=”img_submit.gif” alt=”Submit” width=”48″ height=”48″>
គុណលក្ខណៈបញ្ជី <input>
បញ្ជីគុណលក្ខណៈនេះសំដៅទៅលើធាតុមួយ <datalist> ថាមានជម្រើសដែលបានកំណត់ជាមុនសម្រាប់ធាតុ <input> មួយ។
របស់ OperaSafariChromeFirefox មានកម្មវិធីរុករកអ៊ិនធឺណិ
ឧទាហរណ៏
<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>
<input> នាទីនិងអតិបរមាគុណលក្ខណៈ
នាទីនិងគុណលក្ខណៈអតិបរមាបញ្ជាក់តម្លៃអប្បរមានិងអតិបរមាសម្រាប់ធាតុ <input> មួយ។
ឧទាហរណ៏
Enter a date before 1980-01-01:
<input type=”date” name=”bday” max=”1979-12-31″>
Enter a date after 2000-01-01:
<input type=”date” name=”bday” min=”2000-01-02″>
Quantity (between 1 and 5):
<input type=”number” name=”quantity” min=”1″ max=”5″>
<input> គុណលក្ខណៈច្រើន
Select images: <input type=”file” name=”img” multiple>

គុណលក្ខណៈលំនាំ <input>
ឧទាហរណ៏
Country code: <input type=”text” name=”country_code” pattern=”[A-Za-z]{3}” title=”Three letter country code”>
គុណលក្ខណៈកន្លែងដាក់ <input>
<input type=”text” name=”fname” placeholder=”First name”>
<input> គុណលក្ខណៈដែលបានទាមទារ
Username: <input type=”text” name=”usrname” required>
គុណលក្ខណៈជំហាន <input>
<input type=”number” name=”points” step=”3″>

មេរៀន HTML5 Semantic Elements

តើធាតុ Semantic អ្វីជា និងមានអ្វីខ្លះ?
ធាតុ semantic យ៉ាងច្បាស់ពណ៌នាពីអត្ថន័យរបស់វាទៅកម្មវិធីរុករកទាំងពីរនិងការអភិវឌ្ឍ។
ឧទាហរណ៏នៃការ មិនមែន-semantic ធាតុ: <div> និង <span> – សុំអ្វីបន្តិចសោះអំពីមាតិការបស់វា។
ឧទាហរណ៏នៃការ semantic ធាតុ: <form>, <table> និង <img> – ច្បាស់កំណត់មាតិការបស់វា។
Semantic ធាតុថ្មីនៅក្នុង HTML5
មនុស្សជាច្រើននៃតំបន់បណ្ដាញដែលមានស្រាប់នាពេលបច្ចុប្បន្ននេះ មានកូដ HTML ដូចនេះ: <div id=”nav”>, <div> ឬ <div id=”footer”> ដើម្បីចង្អុលបង្ហាញតំណការណែនាំ, បឋមកថានិងបាតកថា។ HTML5 ផ្តល់នូវធាតុ semantic ថ្មីដើម្បីកំណត់យ៉ាងច្បាស់នូវភាពខុសគ្នាផ្នែកនៃទំព័របណ្ដាញ:
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

ធាតុ HTML5 <section>
ធាតុ <section> កំណត់ផ្នែកនៅក្នុងឯកសារមួយ។
ឧទាហរណ៏
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is….</p>
</section>
ធាតុ HTML5 <article>
ធាតុ <article> បញ្ជាក់ឯករាជ្យមាតិកាខ្លួនឯងមាន។
ឧទាហរណ៏មួយនៃកន្លែងដែលធាតុ <article> មួយដែលអាចត្រូវបានប្រើ:
-ការប្រកាសវេទិកា
-ការប្រកាសកំណត់ហេតុបណ្ដាញ
-រឿងរ៉ាវពត៌មាន
-Comment
ឧទាហរណ៏
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT…..</p>
</article>
ធាតុ HTML5 <nav>
ធាតុ <nav> កំណត់សំណុំនៃតំណរុករក។
ធាតុ <nav> ត្រូវបានបម្រុងទុកសម្រាប់ប្លុកដ៏ធំនៃតំណរុករក។ ទោះជាយ៉ាងណាមិនមែនជាតំណភ្ជាប់ទាំងអស់នៅក្នុងឯកសារមួយដែលគួរ តែមាននៅខាងក្នុងធាតុ <nav> មួយ!
ឧទាហរណ៏
<nav>
<a href=”/html/”>HTML</a> |
<a href=”/css/”>CSS</a> |
<a href=”/js/”>JavaScript</a> |
<a href=”/jquery/”>jQuery</a>
</nav>
ធាតុ HTML5 <aside>
ធាតុ <aside> កំណត់មាតិកាមួយចំនួនឡែកពីមាតិកាដែលវាត្រូវបានដាក់ក្នុង (ដូចជារបារចំហៀងមួយ) នោះទេ។
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
ធាតុ HTML5 <header>
ធាតុ <header> បញ្ជាក់បឋមកថាសម្រាប់ឯកសារមួយឬជាផ្នែកមួយ។
ធាតុ <header> គួរតែត្រូវបានប្រើជាឧបករណ៍ផ្ទុកសម្រាប់ការមាតិកាណែនាំមួយ។
អ្នកអាចមានធាតុ <header> មួយចំនួននៅក្នុងឯកសារមួយ។
ឧទាហរណ៏
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime=”2011-03-15″></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT…..</p>
</article>
ធាតុ HTML5 <footer>
ធាតុ <footer> បញ្ជាក់បាតកថាសម្រាប់ឯកសារមួយឬជាផ្នែកមួយ។
ធាតុ <footer> មួយគួរតែមានព័ត៌មានអំពីធាតុដែលមានរបស់វា។
ឧទាហរណ៏
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime=”2012-03-01″></time></p>
</footer>
<figure> HTML5 និងធាតុ <figcaption>
ស្លាក <figure> បញ្ជាក់មាតិកាខ្លួនឯងមានដូចជា Illustrator, ដ្យាក្រាម, រូបថត, បញ្ជីលេខកូដល
ខណៈពេលដែលមាតិកានៃធាតុ <figure> ត្រូវបានទាក់ទងទៅនឹងលំហូរមេជំហររបស់ខ្លួនគឺឯករាជ្យនៃលំហូរមេ ហើយប្រសិនបើបានយកចេញវាមិនគួរប៉ះពាល់ដល់លំហូរនៃឯកសារ។
ឧទាហរណ៏
<figure>
<img src=”img_pulpit.jpg” alt=”The Pulpit Rock” width=”304″ height=”228″>
<figcaption>Fig1. – The Pulpit Pock, Norway.</figcaption>
</figure>
ចាប់ផ្តើមដោយការប្រើធាតុ Semantic ទាំងនេះ?
ធាតុផ្សំដែលបានពន្យល់ខាងលើគឺជាធាតុទាំងអស់ប្លុក (លើកលែងតែ <figcaption>) ។
header, section, footer, aside, nav, article, figure
{
display: block;
}
មានបញ្ហាជាមួយនឹងកម្មវិធីរុករកអ៊ិនធឺណិ 8 និងមុននេះ
IE8 និងមុននេះមិនដឹងពីរបៀបដើម្បីបង្ហាញជា CSS នៅលើធាតុដែលវាមិនស្គាល់។ អ្នកអាច <header> រចនាប័ទ្មមិន <section>, <footer>, <aside>, <nav>, <article>, <figure> ឬធាតុផ្សេងទៀត HTML5 ថ្មី។
ដើម្បីបើក HTML5 Shiv (បន្ទាប់ពីទាញយក) បញ្ចូលលេខកូដដូចខាងក្រោមចូលទៅក្នុងធាតុ <head> ថា:
<!–[if lt IE 9]>
<script src=”html5shiv.js”></script>
<![endif]–>
មេរៀន HTML5 Web Storage
HTML5 បណ្តាញគឺជាអ្វី?
ជាមួយនឹង HTML5 ទំព័របណ្តាញអាចរក្សាទុកក្នុងមូលដ្ឋានទិន្នន័យនៅក្នុងកម្មវិធីរុករករបស់អ្នកប្រើ។
localStorage និង sessionStorage
វាមានពីរវត្ថុថ្មីសម្រាប់រក្សាទុកទិន្នន័យនៅលើម៉ាស៊ីន ភ្ញៀវគឺ: localStorage – ទិន្នន័យហាងដែលមានកាលបរិច្ឆេទផុតកំណត់មិនមាន
sessionStorage – ទិន្នន័យហាងលក់សម្រាប់សម័យមួយមុនពេលប្រើការផ្ទុកបណ្ដាញពិនិត្យ មើលការគាំទ្រសម្រាប់កម្មវិធីរុករក localStorage និង sessionStorage:
if(typeof(Storage)!==”undefined”)
{
// Yes! localStorage and sessionStorage support!
// Some code…..
}
else
{
// Sorry! No web storage support..
}

វត្ថុ localStorage
វត្ថុ localStorage រក្សាទុកទិន្នន័យដែលមានកាលបរិច្ឆេទផុតកំណត់ទេ។ ទិន្នន័យនេះនឹងមិនត្រូវបានលុបនៅពេលដែលកម្មវិធីរុករកត្រូវបាន គេបិទហើយនឹងអាចរកបាននៅថ្ងៃបន្ទាប់ក្នុងសប្តាហ៍ឬឆ្នាំ។
ឧទាហរណ៏
localStorage.lastname=”Smith”;
document.getElementById(“result”).innerHTML=”Last name: ”
+ localStorage.lastname;
ឩទាហរណ៍បានពន្យល់ថា:
បង្កើត គូ កូនសោ / តម្លៃ localStorage ជាមួយនឹងកូនសោ = “lastname” តម្លៃនិង = “ស្ម៊ីធ”
ទៅយក តម្លៃនៃគ្រាប់ចុច “lastname” ហើយបញ្ចូលវាទៅក្នុងធាតុដែលមានលេខសម្គាល់ = “លទ្ធផល”
ព័ត៌មានជំនួយ: គូសោ / តម្លៃត្រូវបានរក្សាទុកជាខ្សែអក្សរ។ ចងចាំបម្លែងពួកវាទៅជាទ្រង់ទ្រាយមួយផ្សេងទៀតនៅពេលដែលចាំបាច់។
ឧទាហរណ៏
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById(“result”).innerHTML=”You have clicked the button ” + localStorage.clickcount + ” time(s).”;
វត្ថុ sessionStorage
វត្ថុ sessionStorage គឺមានចំនួនស្មើទៅនឹងវត្ថុ localStorage, លើកលែងតែ ថាវារក្សាទុកទិន្នន័យសម្រាប់តែសម័យមួយប៉ុណ្ណោះ។ ទិន្នន័យនឹងត្រូវបានលុបនៅពេលដែលអ្នកប្រើបិទបង្អួចកម្មវិធី រុករក។
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById(“result”).innerHTML=”You have clicked the button ” + sessionStorage.clickcount + ” time(s) in this session.”;
មេរៀន HTML5 Application Cache

HTML5 ណែនាំឃ្លាំងសម្ងាត់កម្មវិធីដែលមានន័យថាកម្មវិធីដែលតំបន់បណ្ដាញ មួយនេះត្រូវបានដាក់ហើយអាចចូលដំណើរការដោយគ្មានការតភ្ជាប់អ៊ី ធឺណិត។
ឃ្លាំងសម្ងាត់កម្មវិធីដែលផ្តល់នូវកម្មវិធីមួយទាំងបីគុណសម្បត្តិ:
-រកមើលក្រៅបណ្ដាញ – អ្នកប្រើប្រាស់អាចប្រើកម្មវិធីនៅពេលដែលពួកគេស្ថិតនៅក្រៅបណ្ដាញ
-ល្បឿន – ដាក់ក្នុងឃ្លាំងសម្ងាត់ធនធានផ្ទុកលឿនជាងមុន
-កាត់បន្ថយការផ្ទុកម៉ាស៊ីនបម្រើ – កម្មវិធីរុករកតែប៉ុណ្ណោះនឹងត្រូវទាញយកធនធានដែលបានធ្វើឱ្យ ទាន់សម័យ / ផ្លាស់ប្តូរពីម៉ាស៊ីនបម្រើ
ឩទាហរណ៍ HTML5 សម្ដែង Cache
ឧទាហរណ៏
<!DOCTYPE HTML>
<html manifest=”demo.appcache”>
<body>
The content of the document……
</body>
</html>
សម្ដែងមូលដ្ឋាន Cache
ឃ្លាំងសម្ងាត់ដើម្បីបើកកម្មវិធីដែលមានរួមបញ្ចូលគុណលក្ខណៈសម្ដែងនៅក្នុងស្លាក <html> របស់ឯកសារនេះ:
<!DOCTYPE HTML>
<html manifest=”demo.appcache”>
…
</html>
បង្ដើតថ្មីឃ្លាំងសម្ងាត់
នៅពេលដែលកម្មវិធីនេះត្រូវបានដាក់ក្នុងឃ្លាំងសម្ងាត់នេះវានៅតែមានរហូតដល់មួយដូចខាងក្រោមដែលកើតឡើងនៅ:
-អ្នកប្រើដែលជម្រះឃ្លាំងសម្ងាត់កម្មវិធីរុករករបស់
-ឯកសារសម្ដែងនេះត្រូវបានកែប្រែ (សូមមើលចំណុចខាងក្រោម)
-ឃ្លាំងសម្ងាត់កម្មវិធីនេះត្រូវបានធ្វើឱ្យទាន់សម័យកម្មវិធី
ឧទាហរណ៏
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
មេរៀន HTML5 Web Workers
បណ្ដាញ Web Workersគឺជាអ្វី?
នៅពេលដែលការប្រតិបត្តិស្គ្រីបនៅក្នុងទំព័រ HTML មួយទំព័រដែលបានក្លាយជាព្រងើយកន្តើយរហូតដល់ស្គ្រីបដែលត្រូវ បានបញ្ចប់។ បុគ្គលិក បណ្តាញ គឺជាការអនុញ្ញាត JavaScript ដែលរត់ក្នុងផ្ទៃខាងក្រោយដែលឯករាជ្យរបស់ស្គ្រីបរបស់អ្នកផ្សេងទៀត ដោយមិនបង្កផលប៉ះពាល់ដល់ការអនុវត្តនៃទំព័រនេះ។ អ្នកអាចបន្តធ្វើអ្វីដែលអ្នកចង់បាន: ចុចជ្រើសអ្វីលខណៈពេលដែលWeb Workers រត់ក្នុងផ្ទៃខាងក្រោយ។
HTML5 បណ្តាញឧទហរណ៍
Count numbers:
ពិនិត្យមើលការគាំទ្រWeb Workers
បុគ្គលិកមុនពេលការបង្កើតបណ្តាញមួយដែលពិនិត្យមើលថាតើកម្មវិធីរុករករបស់អ្នកប្រើគាំទ្រវា:
if(typeof(Worker)!==”undefined”)
{
// Yes! Web worker support!
// Some code…..
}
else
{
// Sorry! No Web Worker support..
}
បង្កើតឯកសារWeb Workers
ឥឡូវនេះអនុញ្ញាតឱ្យបុគ្គលិករបស់លោកបង្កើតបណ្ដាញរបស់ ពួកយើងនៅក្នុងការអនុញ្ញាត JavaScript ខាងក្រៅ។ នៅទីនេះយើងបង្កើតស្គ្រីបដែលរាប់បមួយ។ ស្គ្រីបគឺត្រូវបានទុកនៅក្នុងឯកសារ “demo_workers.js”:
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout(“timedCount()”,500);
}
timedCount();

បង្កើតវត្ថុWeb Workers
ឥឡូវពួកយើងមានឯកសារបណ្តាញកម្មករដែលយើងត្រូវការដើម្បីហៅវាពីទំព័រ HTML មួយ។
បន្ទាត់ដូចខាងក្រោមពិនិត្យប្រសិនបើបុគ្គលិកដែលមានរួចហើយ ប្រសិនបើមិនបាន – វាបង្កើតជាបណ្តាញវត្ថុថ្មីបុគ្គលិកនិងការរត់កូដនៅក្នុង “demo_workers.js” នេះ:
if(typeof(w)==”undefined”)
{
w=new Worker(“demo_workers.js”);
}
ការផ្តាច់Web Workers
នៅពេលដែលវត្ថុបុគ្គលិកបណ្តាញត្រូវបានបង្កើតវានឹងបន្ត ដើម្បីស្តាប់សម្រាប់សារ (សូម្បីតែបន្ទាប់ពីស្គ្រីបខាងក្រៅត្រូវបានបញ្ចប់) រហូតដល់វាត្រូវបានបញ្ចប់។
ដើម្បីបញ្ឈប់បុគ្គលិកបណ្តាញនិងធនធានរបស់កម្មវិធីរុករក / កុំព្យូទ័រឥតគិតថ្លៃប្រើបញ្ចប់ () វិធីសាស្ដ្រ:
w.terminate();
កូដឧទាហរណ៍ពេញ
យើងបានឃើញរួចហើយកូដកម្មករនៅក្នុងនោះ។ ឯកសារ js ។ ខាងក្រោមនេះជាកូដសម្រាប់ទំព័រ HTML គឺ:
ឧទាហរណ៏
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id=”result”></output></p>
<button onclick=”startWorker()”>Start Worker</button>
<button onclick=”stopWorker()”>Stop Worker</button>
<br><br>
<script>
var w;
function startWorker()
{
if(typeof(Worker)!==”undefined”)
{
if(typeof(w)==”undefined”)
{
w=new Worker(“demo_workers.js”);
}
w.onmessage = function (event) {
document.getElementById(“result”).innerHTML=event.data;
};
}
else
{
document.getElementById(“result”).innerHTML=”Sorry, your browser does not support Web Workers…”;
}
}
function stopWorker()
{
w.terminate();
}
</script>
</body>
</html>

Total Items:
SubTotal:
Tax Cost:
Shipping Cost:
Final Total:

ទឹកអំពៅ

រៀន HTML5 ធ្វើខ្លួនឯង

Related product you might see:

Post a Comment

Shopping Cart

Labels

Most View Product

Labels

Category List

Blog Archive

Blogroll