HTML 5 & Dreamwaver

Chapter XIV

រ ៀបរ ៀងរោយៈ សុង លាងហុក រេខទូ សព្ទៈ ០៩២ ៣៤៨៥៨៨ អុ៊ីមែេៈ songleanghok@yahoo.com

HTML

1

HTML 5

គោលការណ៍ខ្លះៗននការបគ ក្ើតគ ើ្ននភាសា HTML 5 • លក្ខណៈថមីៗគួរតតអាស្រ័យគៅគលើ HTML, CSS, និ្ JavaScript • កាត់បនថយតំរវូការ plugins (ដូចជា flash ជាគដើម) • បតនថមលក្ខណៈតុបតត្គដើមបីជំនួរ ពពួក្ script • ដំគនើរការបគ ក្ើតរតូវដាក់្ឲ្យគរបើជាគដាយគររ ី

2

<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

HTML 5 ឧទាហរណ៍ៈ គយើ្អាចដាក់្ audio គដាយវធីិមយ៉្គទៀតគដាយគរបើ tag <source> <source> ររាប់ដាក់្នូវ audio បានគរចើនរបគភទររាប់ឲ្យ browser គរជើរយក្ file តដលវា support មក្ play

Attribute គរបើជាមួយានដូចជា • src : បញ្ជា ក់្ពីទីតំ្នន media តដលរតូវយក្មក្ដាក់្ • type : បញ្ជា ក់្ពីរបគភទ media តដលយក្មក្ដាក់្

4

• ឧទាហរណ៍ៈ

HTML 5

5

HTML 5 Input Type: color ររាប់ឲ្យគយើ្អាចគរជើរគរ ើរយក្ពណ៌បាន។ ចំណំៈ ដំគណើ ការគៅគលើ Grome និ្ Opera

6

HTML 5 Input Type: date ររាប់ឲ្យគយើ្អាចគរជើរគរ ើរនថៃតខ្គចញពី របតិទិនតតមត្។ Input Type: date ររាប់ឲ្យគយើ្អាចគរជើរគរ ើរនថៃ តខ្គចញពី របតិទិនតតមត្។

7

HTML 5 Input Type: email ររាប់រាគ ល់ format Email វាដំគណើ រការ គពល form submit។ Input Type: number ។ Attribute តដលគរបើជាមួយានដូចជា • max : កំ្ណត់គលខ្ធំបំផុត • min : កំ្ណត់គលខ្តូចបំផុត • step : កំ្ណត់ចំនួនគលខ្តដលរតូវបដូរ • value : កំ្ណត់គលខ្តដលរតូវបង្ហា ញគពលគបើក្ Page

8

HTML 5 ឧទាហរណ៍ៈ

Input Type: range Attribute តដលគរបើជាមួយានដូចជា • max : កំ្ណត់គលខ្ធំបំផុត • min : កំ្ណត់គលខ្តូចបំផុត • step : កំ្ណត់ចំនួនគលខ្តដលរតូវបដូរ • value : កំ្ណត់គលខ្តដលរតូវបង្ហា ញគពលគបើក្ Page

9

HTML 5 ឧទាហរណ៍ៈ

Input Type: search បគ្កើតជា box search

10

HTML 5 Datalist: ររាប់បង្ហា ញជា list គៅក្នុ្ Textbox

11

HTML 5 meter: ររាប់បង្ហា ញជាលក្ខណៈវារ់រទ្ ់

Attribute តដលគរបើជាមួយានដូចជា • high: កំ្ណត់នូវតំនលគលខ្តដលធំបំផុតគៅចគ ល្ ះតនមល max min • low: កំ្ណត់នូវតំនលគលខ្តដលតូចបំផុតគៅចគ ល្ ះតនមល max min • max : កំ្ណត់គលខ្ធំបំផុត • min : កំ្ណត់គលខ្តូចបំផុត • step : កំ្ណត់ចំនួនគលខ្តដលរតូវបដូរ • value : កំ្ណត់គលខ្តដលរតូវបង្ហា ញគពលគបើក្ Page

12

HTML 5 ឧទាហរណ៍ៈ

13

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

HTML 5 ឧទាហរណ៍ៈ

គយើ្អាចដាក់្ video គដាយវធីិមយ៉្គទៀតគដាយគរបើ tag <source>

15

HTML 5 <progress> ជា tag ររាប់បង្ហា ញ progress bar ដូច គពល copy Attribute តដលគរបើានដូចជា

• max : កំ្ណត់តនមលធំបំផុតរបរ់របារតដលវារតូវរត់ • value : កំ្ណត់ទីតំ្តដលវារថិតគៅ

16

HTML 5 <detail> ជា tag ររាប់បគ្កើតនូវ content គហើយអាចលាក់្ និ្ បង្ហា ញបាន Attribute តដលគរបើានដូចជា

• open=open : កំ្ណត់ឲ្យវាបង្ហា ញ content របរ់ detail គពលគបើក្ Page

17

HTML 5 ក្រណីច្់ជំនួរពាក្យ Detail គដាយពាក្យគផេ្រតូវគរបើ <summary> <summary> ជា tag ររាប់កំ្ណត់ header គៅឲ្យ content ក្នុ្ <detail>

<mark> ជា tag ររាប់ highlight តផនក្ណមួយនន Text

18

HTML 5 <wbr> ជា tag ររាប់ឲ្យវាបំតបក្ពាក្យតដលានលក្ខណៈតវ្គហើយគយើ្មិនច្់ឲ្យវាចុះប ទ្ ត់ពាក្យទំា្មូល។

19

បង្កើត Website ថ្មី បង្កើត Layout ង្រើសង ើស Templates បង ក្ើត Site ថ្មី និ្ ងបើក Site ដែលមានស្រាប់ ង្បើ្ាស់ Dreamwaver កនុ្កា ស ងស Code

Dreamwaver

20