រៀន HTML5 ដោយខ្លួនឯង

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

a

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 ដែល​មាន​ជំនាញ​ដូចជា​:
-កម្មវិធី Adob​​e Dreamweaver
– បណ្ដាញ​ម៉ៃក្រូសូហ្វ​ Frontpage
–  CoffeeCup កម្មវិធី​សរសេរកូដរបស់ HTML
ជំហាន​ទី 1​: ចាប់ផ្តើម Notepadដើម្បី​ចាប់ផ្ដើម Notepad សូម​ចូល​ទៅ​កាន់​:
ចាប់ផ្តើម
កម្មវិធី​ទាំងអស់
គ្រឿង
Notepad
ជំហាន​ទី 2​: កែសម្រួល HTML របស់​អ្នក​ជាមួយ​នឹង Notepad
សូម​វាយ​បញ្ចូល​​កូដ HTML របស់​អ្នក​ចូល​ទៅ​ក្នុង Notepad ​:
a

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

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

ធាតុ​ថ្មី​នៅ​ក្នុង 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>
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​:
a

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

បង្កើត​ canvas ​មួយ canvas ​គឺ​ជា​តំបន់​ចតុកោណ​នៅ​លើ​ទំព័រ HTML មួយ​ហើយ​វា​ត្រូវ​បាន​បញ្ជាក់​ជា​មួយ​នឹង​ធាតុ <canvas> នេះ​។
ចំណាំ​: តាម​លំនាំដើម​ធាតុ <canvas> មាន​ព្រំដែន​នោះ​ទេ​ហើយ​គ្មាន​មាតិកា​។ markup ដែល​មើល​ទៅ​ដូច​នេះ​:

<canvas id=”myCanvas” width=”200″ height=”100″></canvas>

ដើម្បី​បន្ថែម​នៅ​តាម​ព្រំដែន​ជា​មួយ​, ប្រើ​គុណលក្ខណៈ​រចនាបទ:

ឧ​ទា​ហរ​ណ៏

<canvas id=”myCanvas” width=”200″ height=”100″
style=”border:1px solid #000000;”>
</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 របស់​វា​:
a

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();a

ដើម្បី​គូរ​រង្វង់​មួយ​ដែល​នៅ​លើ​ 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();

aCanvas សរសេរជា- អត្ថបទ ដើម្បី​គូរ​អត្ថបទ​នៅ​លើ​ផ្ទាំង​ក្រណាត់​មួយ​ដែល​ជា​ទ្រព្យ​ស​ម្ប​ត្ដិ​ដ៏​សំខាន់​បំផុត​និង​ជា​វិធី​សា​ស្រ្ត​នោះ​គឺ​:
– ពុម្ព​អក្សរ – កំណត់​លក្ខណៈ​សម្បត្តិ​សម្រាប់​ពុម្ព​អក្សរ​អត្ថបទ
– 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);

a

ប្រើកូដJavaScript​:

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

aCanvas ជម្រាល ជម្រាល ​អាច​ត្រូវ​បាន​ប្រើ​ដើម្បី​បំពេញ​ចតុកោណកែង​, រង្វង់​បន្ទាត់​អត្ថបទ​រាង​ល​នៅ​លើ​ផ្ទាំង​ក្រណាត់​មិន​ត្រូវ​បាន​កំណត់​ទៅ​ ជា​ពណ៌​រឹង​។មាន​ពីរ​ប្រភេទ​ផ្សេង​គ្នា​នៃ​ជម្រាល​គឺ​:
– 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);

a

ឧ​ទា​ហរ​ណ៏ បង្កើត​ជម្រាល​មូល / រាង​ជា​រង្វង់​។ បំពេញ​ចតុកោណកែង​ជាមួយ​ជម្រាល​នេះ​:
កូដ 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);

a
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>

ល​ទ្ឋ​ផល​:
a

ភាព​ខុសគ្នា​រវាង 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

ឧ​ទា​ហរ​ណ៏

បង្ហាញ​ថា​ទម្រង់​គឺ​មិន​ត្រូវ​បាន​ធ្វើ​ឱ្យ​មាន​សុពលភាព​នៅ​លើ​ដាក់​ជូន​:

<form action=”demo_form.asp” novalidate>
E-mail: <input type=”email” name=”user_email”>
<input type=”submit”>
</form>

គុណលក្ខណៈ <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>
a

ធាតុ 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>

About khmerlaor

Loveខែ្មរល្អ
This entry was posted in Website. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s