chapter 1 ภาษา html 1.pdf · 2018-01-08 · • ปัจจุบันเป็น...
TRANSCRIPT
![Page 1: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/1.jpg)
ธระยทธ ทองเครอ
ภาษา HTMLChapter 1
![Page 2: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/2.jpg)
HTML: Hypertext Markup Language• HTML คอ ภาษาทใชจดโครงสรางของหนาเวบ
• ปจจบนเปน Version 5.2
• ภาษา HTML ใชวธการแทก หรอ ก ากบ (Markup) สวนตาง ๆ ของหนาเวบ เพอก าหนดโครงสรางเวบ เชน สวนหว สวนเนอหา สวนรายการ
2
![Page 3: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/3.jpg)
แทก (Tag)• Tag ใชในการแบงโครงสรางเอกสารออกจากเนอหา• Tag จะอยภายใตเครองหมาย < > เชน <body>• Tag ทมเนอหาจะประกอบดวย Tag เปด และ Tag ปด• รปแบบของ Tag
<tag> content </tag>
3
![Page 4: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/4.jpg)
แทก (Tag)• เนอหาทถกก ากบดวย Tag จะแสดงผลบน Browser ตามมาตรฐานภาษา HTML
<b>Web Programming</b>
• Tag ทไมมเนอหา จะไมม Tag ปด เรยกวา "Empty Tag" Responsive Design<br> by CSS
4
แทก b คอ bold หมายถง ก ากบใหเนอหาสวนนแสดงผลดวยตวหนา
ก าหนดวาใหขนบรรทดใหม
![Page 5: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/5.jpg)
แทก (Tag)• Tag สามารถเขยนซอนกนได
<p>Web <b>Programming</b></p>
หรอ
5
<p>
Web <b>Programming</b>
</p>
![Page 6: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/6.jpg)
แอตทรบวต (Attribute)• Attribute คอ สวนทใชระบค าอธบายเพมเตมใหกบ Tag ซงประกอบดวย– Attribute Name คอ ชอคณสมบต– Attribute Value คอ คาของคณสมบต อยภายใต "…" หรอ ' … '
<img src="header.jpg">
6
Attribute Name Attribute Value
![Page 7: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/7.jpg)
อลเมนต (Element)• Element คอ การก าหนดค าสงในภาษา HTML ซงประกอบดวย Tag, Attribute และเนอหา ซงอาจจะมทง 3สวนหรอไมครบกได
<div id="p1" class="red-alert">Web Programming</div>
7
1 Element
tag เปด
attribute เนอหา
tag ปด
![Page 8: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/8.jpg)
HTML เปน case-insensitive• ค าสงในภาษา HTML จะใชตวพมพเลก หรอตวพมพใหญ กได
<br> หรอ <BR> หรอ <Br>
• ใชชอ Tag เปนตวพมพเลกทงหมด ชวยใหอานงาย
8
![Page 9: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/9.jpg)
จะเขยนเวบตองมอะไรบาง• Text Editor
– Notepad, Sublime, Atom, Visual Studio Code
• Web browser ใชทดสอบเวบ– Chrome, Edge, Firefox, Safari, IE
• คมอภาษา HTML (HTML reference) เชน– https://developer.mozilla.org/en/docs/Web/HTML/Element
• Software ตางๆ เชน PhotoShop, FileZilla
9
![Page 10: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/10.jpg)
โครงสรางของเวบ 1 หนา
10
html
head
title, meta, script
body
Tag และเนอหาตางๆ
ก าหนดขอมลทเกยวของกบเวบจะท างานกอนการแสดงผลเสมอ
สวนแสดงผลหนาเวบทงหมด
![Page 11: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/11.jpg)
ตวอยาง
11
ระบชนดของไฟลหรอเอกสาร
<!doctype html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<b>Web Application Development</b>
</body>
</html>
![Page 12: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/12.jpg)
กจกรรม• เปดโปรแกรม NotePad• พมพค าสง HTML• บนทกไฟลเปน "test.html" • ดบเบลคลกทชอไฟล เบราวเซอรจะถกเปดและแสดงผลลพธของเอกสาร HTML
12
![Page 13: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/13.jpg)
<head> Element• <head> คอ Element ทบรรจ
– สวนของโคดโปรแกรม หรอ Script– ค าสงในการให browser ไปหาไฟลรปแบบ (style sheets)– เตรยมขอมลเพมเตมของเอกสาร HTML (Meta Information)
• แทกทอยภายใต <head> ไดแก <title>, <style>, <meta>, <link>, <script>
13
![Page 14: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/14.jpg)
<title> Element• ใชแทก <title> ในการนยามชอ Tab บน browser
• ขอความทอยภายในแทก title จะถกใชเปน– ชอเรยกบน Bookmark– หวขอในผลลพธของ Search Engine
14
![Page 15: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/15.jpg)
<meta> Element• Metadata คอ ขอมลทอธบายขอมล (Information about data)• แทก <meta> จะไมแสดงผลใดๆ ใหคนเหน แตมเปาหมายเพอใหเครองหรอโปรแกรมอานเทานน
• ใชในการเขยนค าอธบาย, ก าหนด keyword, ก าหนดชอผเขยนเวบ, วนทปรบปรง,
• Metadata จะถกใชโดย browser หรอ Search Engines• แทก <meta> จะอยในสวน <head> เทานน
15
![Page 16: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/16.jpg)
ตวอยางการใช <meta>• ก าหนด Keyword
<meta name="keywords" content="เดกภาคคอม, cs kku,ขอนแกน">• ก าหนดค าอธบาย
<meta name="description" content="เดกภาคคอมคณะอะไรซกอยาง ม.ขอนแกน">• ก าหนดชอผสรางเวบ
<meta name="author" content="บญหลาย">• ก าหนดใหมการรโหลดหนาใหมทกๆกวนาท
<meta http-equiv="refresh" content="30">16
![Page 17: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/17.jpg)
ขอมลทถกดงไปแสดงบน Search Engine
17
![Page 18: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/18.jpg)
Character Sets• การแสดงผลขอความบนเวบจะแสดงไดถกตองเมอ Browser รจกชดของอกขระ (Character Sets)
• Character Sets ในปจจบน เชน – UTF-8 รองรบทกภาษาทวโลก– TIS-620 รองรบเฉพาะภาษาไทย
• ตวอยางการก าหนด Character Sets<meta charset="UTF-8">
18
![Page 19: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/19.jpg)
Comment• การใสค าอธบายใหกบสวนตางๆของเอกสาร จะชวยใหงายตอความเขาใจ มรปแบบดงน
<!-- This is a comment -->
• สามารถใสไดในทกสวนของเอกสาร HTML
• Browser จะไมน าสวนนไปแสดงผล19
![Page 20: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/20.jpg)
หวขอ• การก าหนดหวขอจะใช <h1> ถง <h6>
• ใช Heading ในการก าหนดโครงสรางหวขอภายในเวบตามล าดบความส าคญ <h1> ส าคญทสด <h6> นอยทสด
• ไมควรใชเพอขยายขนาดตวอกษร เพราะ Search Engine จะใชแทก Heading ในการท าดชน (Indexing)
20
![Page 21: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/21.jpg)
Paragraph• ยอหนานยามดวย <p>
21
![Page 22: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/22.jpg)
Line Break• ใชแทก <br> ในการขนบรรทดใหม
22
![Page 23: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/23.jpg)
รปแบบตวอกษร• ตวหนา ใช <b> หรอ <strong>• ตวเอยง ใช <i> หรอ <em>• ตวหอย ใช <sub>, ยกก าลง ใช <sup>
23
![Page 24: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/24.jpg)
Character Entity• Character Entity คอ ค าสงทใชในการแสดงอกขระทไมมใน
แปนพมพ หรออกขระทถกน าไปใชเปนค าสงใน HTML แลว เชน < >
• การแสดงอกขระเหลานบนหนาเวบ จะใช Character Entity ซงมรปแบบ ดงน
&entity_name; หรอ &#entity_number;เชน < หรอ < แทนเครองหมาย <
© หรอ © แทนเครองหมาย ©
http://dev.w3.org/html5/html-author/charref 24
![Page 25: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/25.jpg)
ชองวางในเอกสาร HTML• การใช Space, Tab, Enter ในโคด HTML จะไมท าใหแสดงผลบน Browser เปนไปตามนน เชน
บนเอกสารใช Hello World ผลลพธบน Browser Hello World
• หากตองการใช Enter จะตองใชค าสง <br> เชนบนเอกสารใช Hello<br> Worldผลลพธบน Browser Hello
World• หากตองการใช Space จะตองใชค าสง เชน
บนเอกสารใช Hello Worldผลลพธบน Browser Hello World
25
![Page 26: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/26.jpg)
การบงคบใหแสดงชองวางตามทก าหนด
26
![Page 27: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/27.jpg)
Unordered List• Unordered List คอ List ทไมมการก าหนดล าดบ จะครอบดวยแทก <ul> โดยอธบายแตละรายการดวยแทก <li>
27
![Page 28: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/28.jpg)
Ordered List• Ordered List คอ List ทมการก าหนดล าดบ จะครอบดวยแทก <ol> โดยอธบายแตละรายการดวยแทก <li>
28
![Page 29: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/29.jpg)
Description List• Description List คอ List จ ากดความ มกถกน ามาใชในการจ ากดความ เชน ในพจนานกรม รปแบบ List แบงออกเปน 2 สวน สวนแรก คอ ค าศพท (Term) ใช <dt> สวนทสองคอค าจ ากดความ ใช <dd> โดยทงหมดจะครอบดวยแทก <dl>
29
![Page 30: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/30.jpg)
List ซอน List
30
![Page 31: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/31.jpg)
กจกรรม• จงสรางรายการทมรปแบบดงน
31
![Page 32: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/32.jpg)
ตาราง• ใช <table> ในการก าหนดตาราง• ตารางจะแบงออกเปน แถว (แทก <tr>) ในแถวจะแบงเปนคอลมน (แทก <td>)
• แทก <td> คอ ขอมล 1 ชอง• ขอมลใน <td> จะเปนตวอกษร, ภาพ, Link, ฟอรมกได
32
![Page 33: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/33.jpg)
ตวอยางตาราง
<table border="1"><tr>
<td>row 1, cell 1</td><td>row 1, cell 2</td>
</tr><tr>
<td>row 2, cell 1</td><td>row 2, cell 2</td>
</tr></table>
33
- ถาไมมการก าหนด Attribute border ตารางจะไมมกรอบ- Attribute border ถกยกเลกใชแลว ใน HTML version 5
![Page 34: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/34.jpg)
การก าหนดหวตาราง• ใชแทก <th> ในการก าหนดแถวทเปนหวของตาราง• Browser จะแสดงขอมลในแทก <th> เปนตวหนา และอยกงกลางเซลล
34
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
![Page 35: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/35.jpg)
การผสานเซลลในตาราง• การผสานในแนวนอนใช Attribute colspan• การผสานในแนวตงใช Attribute rowspan
35
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
![Page 36: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/36.jpg)
กจกรรม• จงสรางตารางทมรปแบบดงน
36
![Page 37: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/37.jpg)
รปภาพ• รปแบบ
<img src="url หรอ ชอไฟล" width="ความกวางภาพ" height="ความสงภาพ">
• ตวอยาง<img src="smiley.gif" width="32" height="32">
37
ระบชอไฟลภาพ หรออางองเปน URL
ระบความกวางและความยาวสามารถก าหนดเพยงคาใดคาหนงกได
![Page 38: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/38.jpg)
ชนดของไฟลภาพส าหรบเวบ• .gif สามารถใชสไดสงสด 256 ส ภาพทมจ านวนสนอยขนาดไฟลจะยงเลกไปดวย เหมาะกบ การตน โลโกตางๆ ทมสไมมากนก และเหมาะกบการท า Animation
• .png ปรบปรงขอจ ากดของไฟล .gif ในหลายดาน เชน เพมจ านวนส ลดขนาดไฟล
• .jpg หรอชนด Jpeg สามารถแสดงสไดสงสด 16.7 ลานส มการบบอดเพอลดขนาดภาพ เหมาะกบภาพถายทวไป
38
![Page 39: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/39.jpg)
แหลงรวมไฟลภาพ• https://www.pexels.com
• https://stocksnap.io
• https://unsplash.com
• http://www.gratisography.com39
![Page 40: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/40.jpg)
วดโอ• ไฟลวดโอทสามารถท างานบน browser ไดแก MP4, WebMและ OGV
• การแทรกวดโอบนหนาเวบ<video src="podcast.mp4" width="320" height="240" controls></video>
40
![Page 41: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/41.jpg)
Attribute ของ <video> ชอ Attribute คา Attribute ค าอธบาย
src URL ระบต าแหนงของไฟลวดโอ
autoplay ก าหนดใหวดโอเลนเมอเปดหนาเวบ
controls แสดงปมควบคมการเลนวดโอ
height pixels ก าหนดความสงของวดโอ
width pixels ก าหนดความกวางของวดโอ
loop ก าหนดใหเลนซ าเมอเลนวดโอจบแลว
muted ก าหนดใหปดเสยง
poster URL ระบต าแหนงของภาพทจะน ามาแสดงขณะทก าลงโหลดวดโอ หรอจนกระทงผใชคลกปม Play
preload auto, metadata, none
ก าหนดการเรมตนโหลดวดโอauto - ใหดาวนโหลดวดโอทนททมการเขาหนาเวบmetadata – ดาวนโหลดเฉพาะขอมลเกยวกบวดโอ เชน ระยะเวลา เฟรมแรกnone – ไมตองดาวนโหลด จนกวาผใชจะเรมด
41
![Page 42: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/42.jpg)
การก าหนดวดโอทางเลอกส ารอง• การรองรบชนดวดโอของแตละ Browser ไมเหมอนกน ดงนนจง
ควรใชแทก <source> เพอก าหนดวดโอชนดตางๆ โดยเมอเปดดวย Browser ใดทไมรองรบจะคนหาวดโอในแทก <source> ตามล าดบ
<video controls><source src="podcast.mp4" type="video/mp4"><source src="podcast.webm" type="video/webm"><source src="podcast.ogv" type="video/ogg">
</video>
42
![Page 43: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/43.jpg)
แหลงรวมไฟลวดโอ• https://videos.pexels.com
• https://pixabay.com
43
![Page 44: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/44.jpg)
เสยง• ไฟลเสยงทสามารถท างานบน browser ไดแก MP3, WAV และ OGG
• การแทรกเสยงบนหนาเวบ<audio src="song.mp3" controls></audio>
44
![Page 45: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/45.jpg)
Attribute ของ <audio>
ชอ Attribute คา Attribute ค าอธบาย
src URL ระบต าแหนงของไฟลเสยง
autoplay ก าหนดใหเลนเสยงเมอเปดหนาเวบ
controls แสดงปมควบคมการเลนเสยง
loop ก าหนดใหเลนซ าเมอเลนจบแลว
muted ก าหนดใหปดเสยง
preload auto, metadata, none
ก าหนดการเรมตนโหลดเสยงauto - ใหดาวนโหลดทนททมการเขาหนาเวบmetadata – ดาวนโหลดเฉพาะขอมลเกยวกบเสยง เชน ระยะเวลาnone – ไมตองดาวนโหลด จนกวาผใชจะเรมด
45
![Page 46: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/46.jpg)
การก าหนดไฟลเสยงทางเลอกส ารอง
<audio controls><source src="song.mp3" type="audio/mp3"><source src="song.ogg" type="audio/ogg">
</audio>
46
![Page 47: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/47.jpg)
<iframe> Element• การน าเวบเพจอนมาแสดงซอนในเวบเพจของตนเองจะใชแทก <iframe>
• ก าหนดความกวางและสงดวย Attribute width และ height• ตวอยาง
<iframe src="https://www.kku.ac.th" width="500" height="200" frameborder="0"></iframe>
47
![Page 48: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/48.jpg)
การแทรกคลปจาก YouTube• ตวอยาง
<iframe width="560" height="315" src="https://www.youtube.com/embed/MyWyvUje2Mw" frameborder="0" allowfullscreen></iframe>
48
ใช URL จาก YouTube ทตองการน ามาแสดง
อนญาตใหดแบบเตมจอได
![Page 49: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/49.jpg)
Hyperlinks (Links)• Hyperlinks คอ จดหนงบนเวบทสามารถคลก และเปดเวบในหนาท
ตองการเชอมโยง
• ใชแทก <a> ในการก ากบสวนทตองการใหผใชคลกได
• แทก <a>….</a> จะครอบขอความ หรอรปภาพกได
• สวนทครอบดวยแทก <a> ตวชจะเปลยนจากลกศรเปนรปมอแทน49
![Page 50: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/50.jpg)
Hyperlinks (Links)• รปแบบ
<a href="url หรอ ชอไฟล">Link text</a>
• ตวอยาง<a href="http://www.cs.kku.ac.th">Computer Science KKU</a><a href="detail.html">More…</a><a href="myPhoto.jpg">My Photo</a><a href="gallery.zip">Download</a>
50
ระบปลายทาง ขอความหรอภาพ
![Page 51: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/51.jpg)
Hyperlinks (Links)• ก าหนดวธการเปด Link ดวย Attribute target
<a href="http://www.cs.kku.ac.th" target="_blank">CS KKU</a>
• _blank คอ การเปด Link ทระบบน Tab ใหม• กรณทไมมการก าหนด Attribute target จะเปดทหนาเดม
51
![Page 52: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/52.jpg)
การสราง Link ดวยรปภาพ• ใชแทก <img> ซอนภายใตแทก <a>
<a href="http://www.google.com"><img src="google.jpg"></a>
52
![Page 53: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/53.jpg)
ชนดของ URL• Absolute URL - URL แบบเตม ใชในการอางองหนาเวบภายนอก
• Relative URL - URL แบบยอ ใชในการอางองหนาเวบทอยภายในเวบไซตตวเอง
53
http://www.cs.kku.ac.th/comsc/index.php
/comsc/index.php
![Page 54: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/54.jpg)
การอางองไฟลดวย Relative URL• การอางไฟลภาพดวยแทก <img> และ Link ไปยงไฟล html ดวยแทก <a> จากหนาเวบปจจบนไปยงไฟลทอยในเวบไซตเดยวกน ไมควรอางองโดยใช URL เตม แตควรใช Relative URL แทน
• ประโยชนของ Relative URL– สน เพราะไมตองอางอง path ทงหมด– เมอมการเปลยน domain ไมตองตามไปแกไขทงหมด– ทดสอบการท างานไดแมไมไดอยบนอนเทอรเนต
54
![Page 55: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/55.jpg)
การอางองไฟลดวย Relative URL
ขนตนดวย ความหมาย ค าอธบาย ตวอยาง
./ Current Folder* ไปยงต าแหนงโฟลเดอรปจจบน ./image/dog.jpg
../ Parent Folder ออกจากโฟลเดอรปจจบนไปยงโฟลเดอรแม ../project/chart.png
/ Root Folder เปนตวแทนของโฟลเดอรระดบบนสด หรอเปนตวแทนของชอ domain
/index.html
55
* การใช ./ มคาเทากบการไมใชอะไรเลย เชน ./image/dog.jpg สามารถเขยนเปน image/dog.jpg กได
![Page 56: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/56.jpg)
ตวอยางRelative URL
ไฟลทหนาเวบE ลงคไปยง D
<a href="contact.html">
ไฟลทหนาเวบE ดงภาพ C
<img src="image/logo.jpg">
ไฟลทหนาเวบA ลงคไปยง B
<a href="../profile.html">
ไฟลทหนาเวบA ลงคไปยง D
<a href="../../contact.html">
ไฟลทหนาเวบB ดงภาพ C
<img src="../image/logo.jpg">
56
A
B
C
D
E
![Page 57: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/57.jpg)
ตวอยาง
57K
A
B
C
D
E
GF
H
IJ
Relative URL
C ลงคไปยง A final_project/page1.html
G ลงคไปยง A SkyJohn/final_project/page1.html
C ลงคไปยง G ../index.html
H ลงคไปยง J ../../index.html
J ดงภาพ E ../dayclass/SmithMary/images/picture.jpg
C ดงภาพ E ../SmithMary/images/photo.jpeg
![Page 58: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/58.jpg)
กจกรรม
58K
A
B
C
D
E
GF
H
IJ
Relative URL
G ลงคไปยงหนา F
F แสดงภาพ D บนเวบ
H ลงคไปยงหนา B
K แสดงภาพ E บนเวบ
H ลงคไปยงหนา K
![Page 59: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/59.jpg)
กจกรรม• download "ไฟลประกอบแลป 1.1" ทเวบวชา
• Extract ไฟลไวท Desktop
• เปดไฟล index.html ภายในจะมโจทยใหท าเกยวกบการอางอง Relative Path
59
![Page 60: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/60.jpg)
กจกรรม• สมคร Server/Host ฟร เชน https://th.000webhost.com• download "ไฟลประกอบแลป 1.2" ทเวบวชา• Extract ไฟลไวท Desktop • Upload ขน Server ฟรทฝากไว
60
![Page 61: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/61.jpg)
A
B
C
D
E
กจกรรม• จงเขยน URL ของไฟลท Upload ขน Server โดยเขยนไฟลทจด B
ถง D ซงสามารถทดสอบความถกตองดวยการเปดบนเบราวเซอร
61
http://[โดเมนทสมคร]/about/company/service.html
http://[โดเมนทสมคร]/index.html
โฟลเดอรยอย
ไฟลทเกบในโฟลเดอร
URL ส าหรบเขาถงไฟลนบน Web Server
โฟลเดอรระดบบนสดบน Web Server
![Page 62: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/62.jpg)
แบบฟอรมบนเวบ• แบบฟอรม คอ การรบขอมลจากผใชผานหนาเวบ เพอสงไปยง Web Server
62
![Page 63: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/63.jpg)
HTML Form• เวบเพจแตละหนาจะมกฟอรมกได แตในแตละฟอรมจะตองครอบดวย <form> แยกสวนกน
<form><!-- แทก input ตางๆ -->
</form>
63
![Page 64: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/64.jpg)
Text Field• <input type="text"> ใชในการรบ input ขอความแบบบรรทดเดยว
64
![Page 65: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/65.jpg)
Submit Button• Submit Button คอ ปมส าหรบสงใหเรมสงขอมลทผใชกรอกหรอเลอกในแบบฟอรมไปยง Server โดยไฟลทคอยรบขอมลทอยบน Server จะระบไวใน Attribute action
65
![Page 66: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/66.jpg)
Button• Button คอ ปมทวไปทใชในการก าหนดใหท างานเมอมการใชเมาสคลกทปม
66
![Page 67: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/67.jpg)
Password• <input type="password"> ใชในการรบ input ทเปน
password
67
![Page 68: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/68.jpg)
email• <input type="email"> ใชในการรบขอมลทอยในรปแบบอเมลเทานน
68
![Page 69: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/69.jpg)
URL• <input type="url"> ใชในการรบขอมลทอยในรปแบบ URLเทานน
69
![Page 70: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/70.jpg)
Number• <input type="number"> ใชในการรบขอมลทเปนตวเลขเทานน ประกอบดวย Attribute ดงน
max - คาสงสด min - คาต าสดstep - ชวงหางแตละคา
70
![Page 71: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/71.jpg)
Radio Buttons• <input type="radio"> ใชในการรบ input แบบตวเลอกอยางใดอยางหนง ซงเรยกวา radio button
71
![Page 72: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/72.jpg)
Checkbox• <input type="checkbox"> ใชในการรบ input แบบตวเลอกซงมการเลอกตงแต 0 ตวเลอกขนไป
72
![Page 73: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/73.jpg)
File• <input type="file"> ใชในการรบ input ทเปนไฟล
73
![Page 74: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/74.jpg)
Drop-Down List• Drop-Down List คอ การแสดงรายการใหผใชเลอก
74
![Page 75: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/75.jpg)
การจดกลม Drop-Down List• ใช <optgroup> ในการก าหนดชอกลมทอยในรายการของ
Drop-Down List
75
![Page 76: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/76.jpg)
Data List• ใชในการแสดงรายการทอยในรปแบบ Text Field โดยจะแสดงรายการเมอผใชใสตวอกษรทตรงตามรายการทมอย ซงการท างานสวนนจะเปนแบบเดยวกบ autocomplete
76
![Page 77: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/77.jpg)
Textarea• ใชในการรบ input ขอความแบบหลายบรรทด
77
![Page 78: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/78.jpg)
Range• ใชในการรบคาตวเลข โดยวธเลอนเลอกตามชวงทก าหนด• Attribute ทเกยวของ
max - คาสงสด, min - คาต าสดstep - ชวงหางแตละคาvalue – คาเรมตน
78
![Page 79: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/79.jpg)
Color• ใชในการรบคาส โดยใหผใชเลอกสทตองการ
79
![Page 80: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/80.jpg)
Date• ใชในการรบคาวนท โดยใหผใชเลอกวนทตองการจากปฏทน
80
![Page 81: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/81.jpg)
Fieldset• Fieldset คอ การจดกลมของ input ตางๆ ดวยการตกรอบและเขยนค าอธบาย
81
![Page 82: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/82.jpg)
Attribute ทใชใน <form> และ <input>• required• placeholder• autocomplete• novalidate• autofocus• multiple
82
![Page 83: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/83.jpg)
required• ก าหนดใหตองกรอก หรอตองเลอก input นน
83
![Page 84: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/84.jpg)
placeholder• แสดงค าอธบายใหกบ Text Field ชนดตางๆ
84
![Page 85: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/85.jpg)
autocomplete• ใชในการระบใน <form> หรอ <input> เพอเปดหรอปด
autocomplete
<form 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>
85
![Page 86: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/86.jpg)
novalidate• ใชในการปดตรวจสอบคาในฟอรมทงหมด
<form novalidate>E-mail: <input type="email" name="user_email"><input type="submit">
</form>
86
![Page 87: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/87.jpg)
autofocus• ก าหนดให Focus ไปท Input
First name: <input type="text" name="fname" autofocus>
87
![Page 88: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/88.jpg)
multiple• ก าหนดให File หรอ Email สามารถกรอกหรอเลอกไดหลายคา
<form>Select images: <input type="file" name="img" multiple="multiple"><input type="email" multiple><input type="submit">
</form>
88
![Page 89: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/89.jpg)
89
![Page 90: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/90.jpg)
การก าหนดรปแบบของ input• ใช attribute pattern เพอก าหนดรปแบบของ input ซงจะใช
Regular Expression ในการก าหนด
90
![Page 91: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/91.jpg)
Regular Expression• Regular Expression เรยกยอๆวา Regex คอ ประโยคสญลกษณทใชระบรปแบบ (Pattern) ทตองการ
• ประโยชนของ Regular Expression เชน– ตรวจสอบ input จากผใช วาถกตองตามตองการหรอไม เชน เบอรโทรศพท รหสไปรษณย
– ตรวจสอบวาขอความนนมค าสง HTML ปะปนมาดวยหรอไม
91
![Page 92: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/92.jpg)
Literal Characters• Pattern ก าหนดใหเปนตวอกษรตามทตองการเทานน
92
Regex : is
Input : this
Regex : is
Input : is
Regex : KK
Input : kK
Regex : KK
Input : KK
- ไมถกตองตามกฎ
- ถกตองตามกฎ
![Page 93: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/93.jpg)
อกขระพเศษ• อกขระทสงวนส าหรบการเขยนกฎ regex จะตองน าหนาดวยเครองหมาย \
93
Regex : 1\+1=2
Input : 1+1=2
Regex : 1+1=2
Input : 1+1=2
![Page 94: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/94.jpg)
Period• สญลกษณจด . แทนอกขระ 1 ตว
94
Regex : a.boy
Input : a boy
Regex : a.boy
Input : aboy
![Page 95: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/95.jpg)
Character Classes• Character Classes คอ การ Match กบอกขระตวใดตวหนงทอยภายในเครองหมาย [ ]
95
Regex : [Gg]r[ae]y
Input : Gray
Regex : [Gg]r[ae]y
Input : Ggry
Regex : [Gg]r[ae]y
Input : grey
Regex : [Gg]r[ae]y
Input : rey
![Page 96: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/96.jpg)
Character Classes• ใชเครองหมายลบ – ภายในเครองหมาย [ ] เพอก าหนดชวง
96
Regex : [0-9a-fA-F]
Input : A
Regex : [0-9a-fA-F]
Input : 0a
Regex : cus[0-9]
Input : cus1
Regex : cus[0-9]
Input : cus
![Page 97: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/97.jpg)
Character Classes• ใช [^ ] เพอ Match กลมค าทไมตองการใหมในขอความ
97
Regex : q[^u]
Input : qi
Regex : q[^u]
Input : qu
![Page 98: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/98.jpg)
Shorthand Character Classes• การก าหนดรปแบบของ Character Classes อาจใชสญลกษณอนได
\d – แทน [0-9]\w – แทน [A-Za-z0-9_]\s – แทน whitespace หรอ [ \t\r\n] (space, tab, CR, LF)
98
Regex : \d\s\w
Input : 1 a
Regex : \d\s\w
Input : 1 a3
![Page 99: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/99.jpg)
Shorthand Character Classes• การก าหนดรปแบบของ Character Classes อาจใชสญลกษณอนได
\D – แทน [^\d]\W – แทน [^\w]\S – แทน non-whitespace หรอ [^\s]
99
Regex : \D\D\d
Input : mp3
Regex : \D\D\d
Input : k25
![Page 100: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/100.jpg)
Repetition• ใชสญลกษณ * เพอบอกจ านวนอกขระวามไดตงแต 0 ตวขนไป
100
Regex : [A-Za-z][A-Za-z0-9]*5
Input : Html5
Regex : [A-Za-z][A-Za-z0-9]*5
Input : Html57
![Page 101: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/101.jpg)
Repetition• ใชสญลกษณ + เพอบอกจ านวนอกขระวาตองมตงแต 1 ตวขนไป
101
Regex : [A-Za-z][A-Za-z0-9]+
Input : h1
Regex : [A-Za-z][A-Za-z0-9]+
Input : h
![Page 102: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/102.jpg)
Repetition• ใชสญลกษณ ? เพอบอกจ านวนอกขระวามไดเพยง 0 ตว หรอ 1 ตวเทานน
102
Regex : [A-Za-z][A-Za-z0-9]?
Input : i
Regex : [A-Za-z][A-Za-z0-9]?
Input : Hat
![Page 103: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/103.jpg)
Anchors• ใช ^ เพอ Match โดยเรมจากจดเรมตนของขอความ
103
Regex : ^vac
Input : vacation
Regex : ^vac
Input : evacuation
![Page 104: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/104.jpg)
Anchors• ใช $ เพอ Match โดยเรมจากจดสนสดของขอความ
104
Regex : $tion
Input : evacuation
Regex : $tion
Input : national
![Page 105: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/105.jpg)
Alternation• ใช | คนขอความ 2 ขอความขนไป เมอมตวเลอก Matchหลายตว
105
Regex : (cat|dog)+
Input : dog
Regex : (cat|dog)+
Input : catastrophe
![Page 106: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/106.jpg)
Limiting Repetition• ก าหนดจ านวนการเกดอกขระดวย { }
106
Regex : \d{2,4}
Input : 111
Regex : \d{2,4}
Input : 1
Regex : \w{2,}
Input : you
Regex : \w{2,}
Input : y
Regex : \w{3}
Input : rat
Regex : \w{3}
Input : bigga
![Page 107: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/107.jpg)
จงเขยน Regex ตามรปแบบทก าหนด
รปแบบทตองการ Regex
เปนสระในภาษาองกฤษเทานน และมได 3 ตว
ขนตนดวยตวพมพใหญตวแรก ทเหลอเปนตวอกษรพมพเลกตงแต 1 ตวขนไป
ขนตนดวย ord หรอ order ลงทายดวยตวเลข 5 ตว
เปนค าวา frog หรอ blog หรอ clog เทานน
107
![Page 108: Chapter 1 ภาษา HTML 1.pdf · 2018-01-08 · • ปัจจุบันเป็น Version 5.2 • ภาษา HTML ใช้วิธีารแท็ หรือ ก](https://reader033.vdocuments.us/reader033/viewer/2022042104/5e819521db702f087769b672/html5/thumbnails/108.jpg)
จงเขยนขอความทถกตองตามกฎ RegexRegex ตวอยางขอความทถกตองตามกฎ
ABC
[A-Z]
[0-9]
[09]
[0][9]
[A-Z][a-z]
…
[0-9A-Z].555
108