![Page 1: HTML Chapter XIV · 2016. 3. 15. · HTML 5 & Dreamwaver Chapter XIV រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨](https://reader035.vdocuments.net/reader035/viewer/2022062606/601d25985bad10384f643acb/html5/thumbnails/1.jpg)
HTML 5 & Dreamwaver
Chapter XIV
រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨ អុ៊ីមែេៈ [email protected]
HTML
1
![Page 2: HTML Chapter XIV · 2016. 3. 15. · HTML 5 & Dreamwaver Chapter XIV រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨](https://reader035.vdocuments.net/reader035/viewer/2022062606/601d25985bad10384f643acb/html5/thumbnails/2.jpg)
HTML 5
គោលការណ៍ខ្លះៗននការបគ ក្ើតគ ើ្ននភាសា HTML 5 • លក្ខណៈថមីៗគួរតតអាស្រ័យគៅគលើ HTML, CSS, និ្ JavaScript • កាត់បនថយតំរវូការ plugins (ដូចជា flash ជាគដើម) • បតនថមលក្ខណៈតុបតត្គដើមបីជំនួរ ពពួក្ script • ដំគនើរការបគ ក្ើតរតូវដាក់្ឲ្យគរបើជាគដាយគររ ី
2
![Page 3: HTML Chapter XIV · 2016. 3. 15. · HTML 5 & Dreamwaver Chapter XIV រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨](https://reader035.vdocuments.net/reader035/viewer/2022062606/601d25985bad10384f643acb/html5/thumbnails/3.jpg)
<audio>: គរបើររាប់ play audio file Attribute តដលគរបើជាមួយ Audio
• Autoplay(autoplay): ររាប់កំ្ណត់ឲ្យគពលគបើក្ page មក្ វាគធវើការ play auto • controls(controls): ររាប់កំ្ណត់ឲ្យបង្ហា ញ player ឬអត់ • loop(loop): ររាប់កំ្ណត់ឲ្យវា play មត្គទៀត • preload(auto,metadata,none): កំ្ណត់ឲ្យវាបង្ហា ញ stream ឬអត់ • src: ររាប់កំ្ណត់ទីតំ្នន ចគរមៀ្តដល play
HTML 5
3
![Page 4: HTML Chapter XIV · 2016. 3. 15. · HTML 5 & Dreamwaver Chapter XIV រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨](https://reader035.vdocuments.net/reader035/viewer/2022062606/601d25985bad10384f643acb/html5/thumbnails/4.jpg)
HTML 5 ឧទាហរណ៍ៈ គយើ្អាចដាក់្ audio គដាយវធីិមយ៉្គទៀតគដាយគរបើ tag <source> <source> ររាប់ដាក់្នូវ audio បានគរចើនរបគភទររាប់ឲ្យ browser គរជើរយក្ file តដលវា support មក្ play
Attribute គរបើជាមួយានដូចជា • src : បញ្ជា ក់្ពីទីតំ្នន media តដលរតូវយក្មក្ដាក់្ • type : បញ្ជា ក់្ពីរបគភទ media តដលយក្មក្ដាក់្
4
![Page 5: HTML Chapter XIV · 2016. 3. 15. · HTML 5 & Dreamwaver Chapter XIV រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨](https://reader035.vdocuments.net/reader035/viewer/2022062606/601d25985bad10384f643acb/html5/thumbnails/5.jpg)
• ឧទាហរណ៍ៈ
HTML 5
5
![Page 6: HTML Chapter XIV · 2016. 3. 15. · HTML 5 & Dreamwaver Chapter XIV រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨](https://reader035.vdocuments.net/reader035/viewer/2022062606/601d25985bad10384f643acb/html5/thumbnails/6.jpg)
HTML 5 Input Type: color ររាប់ឲ្យគយើ្អាចគរជើរគរ ើរយក្ពណ៌បាន។ ចំណំៈ ដំគណើ ការគៅគលើ Grome និ្ Opera
6
![Page 7: HTML Chapter XIV · 2016. 3. 15. · HTML 5 & Dreamwaver Chapter XIV រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨](https://reader035.vdocuments.net/reader035/viewer/2022062606/601d25985bad10384f643acb/html5/thumbnails/7.jpg)
HTML 5 Input Type: date ររាប់ឲ្យគយើ្អាចគរជើរគរ ើរនថៃតខ្គចញពី របតិទិនតតមត្។ Input Type: date ររាប់ឲ្យគយើ្អាចគរជើរគរ ើរនថៃ តខ្គចញពី របតិទិនតតមត្។
7
![Page 8: HTML Chapter XIV · 2016. 3. 15. · HTML 5 & Dreamwaver Chapter XIV រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨](https://reader035.vdocuments.net/reader035/viewer/2022062606/601d25985bad10384f643acb/html5/thumbnails/8.jpg)
HTML 5 Input Type: email ររាប់រាគ ល់ format Email វាដំគណើ រការ គពល form submit។ Input Type: number ។ Attribute តដលគរបើជាមួយានដូចជា • max : កំ្ណត់គលខ្ធំបំផុត • min : កំ្ណត់គលខ្តូចបំផុត • step : កំ្ណត់ចំនួនគលខ្តដលរតូវបដូរ • value : កំ្ណត់គលខ្តដលរតូវបង្ហា ញគពលគបើក្ Page
8
![Page 9: HTML Chapter XIV · 2016. 3. 15. · HTML 5 & Dreamwaver Chapter XIV រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨](https://reader035.vdocuments.net/reader035/viewer/2022062606/601d25985bad10384f643acb/html5/thumbnails/9.jpg)
HTML 5 ឧទាហរណ៍ៈ
Input Type: range Attribute តដលគរបើជាមួយានដូចជា • max : កំ្ណត់គលខ្ធំបំផុត • min : កំ្ណត់គលខ្តូចបំផុត • step : កំ្ណត់ចំនួនគលខ្តដលរតូវបដូរ • value : កំ្ណត់គលខ្តដលរតូវបង្ហា ញគពលគបើក្ Page
9
![Page 10: HTML Chapter XIV · 2016. 3. 15. · HTML 5 & Dreamwaver Chapter XIV រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨](https://reader035.vdocuments.net/reader035/viewer/2022062606/601d25985bad10384f643acb/html5/thumbnails/10.jpg)
HTML 5 ឧទាហរណ៍ៈ
Input Type: search បគ្កើតជា box search
10
![Page 11: HTML Chapter XIV · 2016. 3. 15. · HTML 5 & Dreamwaver Chapter XIV រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨](https://reader035.vdocuments.net/reader035/viewer/2022062606/601d25985bad10384f643acb/html5/thumbnails/11.jpg)
HTML 5 Datalist: ររាប់បង្ហា ញជា list គៅក្នុ្ Textbox
11
![Page 12: HTML Chapter XIV · 2016. 3. 15. · HTML 5 & Dreamwaver Chapter XIV រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨](https://reader035.vdocuments.net/reader035/viewer/2022062606/601d25985bad10384f643acb/html5/thumbnails/12.jpg)
HTML 5 meter: ររាប់បង្ហា ញជាលក្ខណៈវារ់រទ្ ់
Attribute តដលគរបើជាមួយានដូចជា • high: កំ្ណត់នូវតំនលគលខ្តដលធំបំផុតគៅចគ ល្ ះតនមល max min • low: កំ្ណត់នូវតំនលគលខ្តដលតូចបំផុតគៅចគ ល្ ះតនមល max min • max : កំ្ណត់គលខ្ធំបំផុត • min : កំ្ណត់គលខ្តូចបំផុត • step : កំ្ណត់ចំនួនគលខ្តដលរតូវបដូរ • value : កំ្ណត់គលខ្តដលរតូវបង្ហា ញគពលគបើក្ Page
12
![Page 13: HTML Chapter XIV · 2016. 3. 15. · HTML 5 & Dreamwaver Chapter XIV រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨](https://reader035.vdocuments.net/reader035/viewer/2022062606/601d25985bad10384f643acb/html5/thumbnails/13.jpg)
HTML 5 ឧទាហរណ៍ៈ
13
![Page 14: HTML Chapter XIV · 2016. 3. 15. · HTML 5 & Dreamwaver Chapter XIV រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨](https://reader035.vdocuments.net/reader035/viewer/2022062606/601d25985bad10384f643acb/html5/thumbnails/14.jpg)
HTML 5 <video> ជា tag តដលគរបើររាប់ play video ។ Attribute តដលានដូចជា
• autoplay : កំ្ណត់ឲ្យ Play auto គពលគបើ page • controls= controls: កំ្ណត់ឲ្យ player បង្ហា ញ control (play/pause) ឬអត់ • height: កំ្ណត់ក្មពរ់ video player • width: កំ្ណត់ទទឹ្នន video player • loop: កំ្ណត់ឲ្យ video play មដ្គហើយមត្គទៀត • src: ររាប់កំ្ណត់ទីតំ្នន video តដល play • poster: កំ្ណត់ឲ្យវាបង្ហា ញ របូភាពគពលតដល video មិនទាន់ Play • muted=muted : កំ្ណត់ឲ្យ Player គបើក្មក្ គឺ mute
14
![Page 15: HTML Chapter XIV · 2016. 3. 15. · HTML 5 & Dreamwaver Chapter XIV រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨](https://reader035.vdocuments.net/reader035/viewer/2022062606/601d25985bad10384f643acb/html5/thumbnails/15.jpg)
HTML 5 ឧទាហរណ៍ៈ
គយើ្អាចដាក់្ video គដាយវធីិមយ៉្គទៀតគដាយគរបើ tag <source>
15
![Page 16: HTML Chapter XIV · 2016. 3. 15. · HTML 5 & Dreamwaver Chapter XIV រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨](https://reader035.vdocuments.net/reader035/viewer/2022062606/601d25985bad10384f643acb/html5/thumbnails/16.jpg)
HTML 5 <progress> ជា tag ររាប់បង្ហា ញ progress bar ដូច គពល copy Attribute តដលគរបើានដូចជា
• max : កំ្ណត់តនមលធំបំផុតរបរ់របារតដលវារតូវរត់ • value : កំ្ណត់ទីតំ្តដលវារថិតគៅ
16
![Page 17: HTML Chapter XIV · 2016. 3. 15. · HTML 5 & Dreamwaver Chapter XIV រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨](https://reader035.vdocuments.net/reader035/viewer/2022062606/601d25985bad10384f643acb/html5/thumbnails/17.jpg)
HTML 5 <detail> ជា tag ររាប់បគ្កើតនូវ content គហើយអាចលាក់្ និ្ បង្ហា ញបាន Attribute តដលគរបើានដូចជា
• open=open : កំ្ណត់ឲ្យវាបង្ហា ញ content របរ់ detail គពលគបើក្ Page
17
![Page 18: HTML Chapter XIV · 2016. 3. 15. · HTML 5 & Dreamwaver Chapter XIV រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨](https://reader035.vdocuments.net/reader035/viewer/2022062606/601d25985bad10384f643acb/html5/thumbnails/18.jpg)
HTML 5 ក្រណីច្់ជំនួរពាក្យ Detail គដាយពាក្យគផេ្រតូវគរបើ <summary> <summary> ជា tag ររាប់កំ្ណត់ header គៅឲ្យ content ក្នុ្ <detail>
<mark> ជា tag ររាប់ highlight តផនក្ណមួយនន Text
18
![Page 19: HTML Chapter XIV · 2016. 3. 15. · HTML 5 & Dreamwaver Chapter XIV រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨](https://reader035.vdocuments.net/reader035/viewer/2022062606/601d25985bad10384f643acb/html5/thumbnails/19.jpg)
HTML 5 <wbr> ជា tag ររាប់ឲ្យវាបំតបក្ពាក្យតដលានលក្ខណៈតវ្គហើយគយើ្មិនច្់ឲ្យវាចុះប ទ្ ត់ពាក្យទំា្មូល។
19
![Page 20: HTML Chapter XIV · 2016. 3. 15. · HTML 5 & Dreamwaver Chapter XIV រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨](https://reader035.vdocuments.net/reader035/viewer/2022062606/601d25985bad10384f643acb/html5/thumbnails/20.jpg)
បង្កើត Website ថ្មី បង្កើត Layout ង្រើសង ើស Templates បង ក្ើត Site ថ្មី និ្ ងបើក Site ដែលមានស្រាប់ ង្បើ្ាស់ Dreamwaver កនុ្កា ស ងស Code
Dreamwaver
20