View
15
Download
0
Category
Preview:
Citation preview
การสรางเวบเพจโดยใช HTML5 และ CSS ขนตน
Part IV Multimedia, Table และ อน ๆ
ผศ.วนชย ขนต wanchai@tbs.tu.ac.th คณะพาณชยศาสตรและการบญช มธ.
http://www.bus.tu.ac.th/usr/wanchai/IS216
IS216 การพฒนาโปรแกรมประยกตโดยผใช
หวขอ
98
Multimedia Web pages
นอกจากใสขอความ ในหนาเวบแลว เรา อาจใสเนอหาทเปน สอประสม (multimedia content) ลงไปไดดวย
99
Multimedia Contentsเนอหาทเปนสอประสม (multimedia content) เชน
• รปภาพ ( format ทเบราวเซอรรจกและแสดงผลได)
• เสยง ( midi, wave file, mp3 , wma, ogg)
• ภาพวดทศน ( มหลาย format เชน mpg, wmv, mp4, ogg)
• กอน HTML5 การสรางภาพเคลอนไหวบนหนาเวบตองใช plugin เชน Adobe Flash, Real Player และตองเตรยมไฟลตามรปแบบของ plugin นน ๆ
• HTML5 รองรบการแสดงภาพกราฟฟกแบบ SVG โดยไมตองใช plugin
• HTML5 ม canvas สำหรบเขยนภาพดวยคำสงภาษา JavaScript
100
การใสรปภาพในเอกสาร HTML
101
ชนดของรปภาพทสามารถแสดงในหนาเวบ
• JPEG Joint Photographic Expert Group
• GIF Graphic Interchange Format
• PNG Portable Network Graphic
ภาพทง 3 ชนดนเหมาะกบการสงผานทางอนเทอรเนตเพราะสามารถบบอดขอมลใหเลกลงไดเพอประหยดเวลาในการสง
JPEG GIF PNG
102
คณสมบตของ JPEG• คณภาพระดบภาพถาย(Photograph-quality)
• 24 บตตอจดภาพ ได 16.7 ลานส
• บบอดไดดถาใชกบภาพถายหรอภาพวาดทมการไลเฉดสเหมอนธรรมชาตขนาดของแฟมมกจะเลกกวา GIF
• ไมเหมาะกบภาพลายเสนเชนการตน ขนาดของแฟมจะโต
• ไมเหมาะกบการซอนภาพอกษร บบอดไดไมด • Progressive JPEG files โหลดไดเรวกวา JPEG ธรรมดา
สกลของแฟมเปน .jpg
103
คณสมบตของ GIF• 8 bit ตอจดภาพ (pixel) แสดงได 256 ส • GIF24 ใช 24 bit ตอจดภาพแสดงได 16 ลานส • เหมาะสำหรบภาพทเปนสพน ไมไลเฉดส เชนโลโก ภาพลาย
เสน หรอรปทรงเรขาคณต
• รองรบการทำใหโปรงใส (Transparency)
• รองรบการทำ Interlacing
• รองรบการทำภาพเคลอนไหวAnimation
สกลของแฟมเปน .gif
104
คณสมบตของ PNG• สรางขนมาทดแทน GIF ซงสงวนลขสทธในการใช
• สามารถแสดงสได 16.7 ลานส • เหมาะสำหรบภาพทเปนสพน เชนโลโก ภาพลายเสน ภาพ
วาด หรอรปทรงเรขาคณต สามารถไลเฉดสไดดกวา GIF
• รองรบการทำใหโปรงใส (Transparency)
• รองรบการทำภาพเคลอนไหว (Animation) แตบางเบราวเซอรไมรองรบ
สกลของแฟมเปน .png
105
การวางรปภาพในเอกสาร HTML<html>
<head>
<title>Image Placement</title>
</head>
<body>
This is my picture
<img src="mypic.jpg" />
</body>
</html>
106
• Inline Image<img src="stat.gif" />
• hypertext linkYou can view <a href="mypic.jpg"> my picture</a>. my picture จะเปน link เมอคลกจะนำรป mypic.jpg มาแสดง
• hyperlink anchor<a href="target.html"><img src="stat.gif" /></a> รปภาพ stat.gif จะเปนลงค เมอคลกจะนำ target.html มาแสดง
• background image<body background="marble.gif"> จะนำภาพ marble.gif มาแสดงผลตอเรยงกนจนเตมหนาเอกสาร
รปแบบของ HTML สำหรบวางรปภาพ
‹#›
<img /> tag Attributes• src แหลงทอย (URL) ของแฟมรปภาพ • alt ขอความทตองการใหแสดงแทนรปภาพ • border จำนวน pixel ของเสนกรอบสเหลยมรอบรป (deprecated) • height กำหนดความสงของภาพหนวยเปน pixel • width กำหนดความกวางของภาพหนวยเปน pixel หรอ % • hspace เวนทวางดานซายและขวาของภาพ (pixel) (deprecated) • vspace เวนทวางดานบนและลางของภาพ (pixel) (deprecated) • ismap ทำ image map ประมวลผลท server • usemap ทำ image map ประมวลผลท browser • align ตำแหนงทตองการจดวางรปภาพ (deprecated)
108
Attribute align ของแทก img• top
• middle
• bottom
• left
• rightไมม center
Attribute align ถก Deprecated ใน HTML4 และไมรองรบใน HTML5
109
ตวอยางการใช img <img
src="mypic.jpg"
alt="my lovely picture"
height="100"
width="70"
/>
110
การ save ภาพจากเวบ (สำหรบผทไมทราบ)
• ใชเมาสชทรปภาพแลวคลกดวยปมขวาของเมาสจะปรากฎ pop up menu
• เลอกรายการ Save Picture As …
• เลอก drive / folder ทตองการsave แลวคลกปม save
111
ฝกปฏบตใสรปภาพ
เขยนเวบใหมการแสดงรปภาพลกษณะตาง ๆ เชน
• inline image
• hypertext anchor
• background
112
การนำเสนอไฟลวดโอ
<img dynsrc= ชอไฟลวดโอ loop = จำนวนรอบ | infinite />
การนำเสนอไฟลเสยง
<bgsound src= ชอไฟลเสยง
loop = จำนวนรอบ | infinite />หมายเหต
1. แทกเหลานเปนแทกสวนเพมของ IE ไมใชแทกทกำหนดในมาตรฐาน HTML 4.0 หรอ XHTML 1.0
2. การใสเสยงควรใชดวยความระมดระวง เพราะอาจรบกวนหรอสรางความรำคาญใหผชม
กอน HTML5
113
tag ใหมใน HTML5
114
The <audio> tagFunction: Define sound, such as music or other audio streams. Attributes: src url ของเสยงทตองการเลน
type ชนดของไฟลเสยง autoplay="autoplay" ถาระบจะเลนทนทถาพรอม
controls="controls" ถาระบจะมปมควบคมขนมาใหผใชบงคบ
loop="loop" ถาระบ จะวนซำ preload= auto|metadata|none ตองการใหโหลดไฟลเสยง
ทนทท เปดหนาเวบเพอเตรยมพรอมสำหรบการเลนหรอไม จะไมมผลถาระบ autoplay
End tag: </audio>
Contains: text ควรเปนขอความทบอกผใชในกรณทเบราวเซอรไมรองรบแทกน
115
ตวอยางการใสเสยง
<audio src="mysong.ogg" type="audio/ogg" src="mysong.mp3" type="audio/mp3" autoplay="autoplay" loop="loop" > Your browser does not support the audio tag. </audio>
หมายเหต เบราวเซอรแตละตวรองรบรปแบบของไฟลเสยงแตกตางกน สวนใหญรองรบ mp3 เพอแกปญหารปแบบไฟลเสยงทแตละเบราวเซอรรองรบไมเทากน เราอาจเตรยมแฟมเสยง มากกวา 1 แบบและใสตวบอกลกษณะประจำ (attribute) src หลายตว
116
The <video> tagFunction: Define video, such as a movie clip or other video streams. Attributes: src url ของวดทศนทตองการเลน
type ชนดของไฟลวดทศน autoplay="autoplay" ถาระบจะเลนทนทถาพรอม (บางเบราวเซอรไมรองรบ)
controls="controls" ถาระบจะมปมควบคมขนมาใหผใชบงคบ
height ความสง player หนวยเปน pixel
width ความกวางของ player หนวยเปน pixel preload="preload" ถาระบ จะโหลดวดทศนทนททเปดหนาเวบเพอ
เตรยมพรอมสำหรบการเลน End tag: </video>
Contains: text ควรเปนขอความทบอกผใชในกรณทเบราวเซอรไมรองรบแทกน
117
ตวอยางการใสวดทศน<video
src="movie.ogg" type="video/ogg" src="movie.mp4" type="video/mp4" autoplay="autoplay" controls="controls" height="300" width="450" > Your browser does not support the video tag. </video>
หมายเหต เบราวเซอรแตละตวรองรบรปแบบของไฟลวดทศนแตกตางกน สวนใหญรองรบ ไฟลตามมาตรฐาน h.264 เพอแกปญหาทเบราวเซอรตาง ๆ รองรบมาตรฐานขอมลวดทศนท แตกตางกน อาจตองเตรยมไฟลวดทศนหลายรปแบบ แลวระบ attribute src หลายตว
118
Scalable Vector Graphic (SVG)• เปนมาตรฐานภาพกราฟกทสามารถยอขยายได • กำหนดภาพกราฟก 2 มตดวยภาษา XML
• สามารถทำภาพเคลอนไหวได • เปนมาตรฐานแนะนำของ W3C
– SVG version 1.0 4 September 2001
– SVG Version 1.1 ปรบปรงใหม 16 August 2011
119
การแสดงภาพกราฟก SVG
• เบราวเซอรรนเกาตองตดตง plugin เชน Adobe SVG Viewer
• เบราวเซอรรนใหม (ทรองรบ HTML5) สวนใหญสามารถแสดงภาพกราฟก
SVG ไดโดยไมตองตดตง plugin
• ใช แทก <svg>
• รายละเอยดเรอง svg อยนอกขอบเขตวชาน แตตองการใหภาพคราว ๆ วาทำไดอยางไร
120
ตวอยางการใช SVG เขยนวงกลมซอนกน<!DOCTYPE html> <head> <title>SVG Demo</title> </head> <body> <h2>HTML5 SVG Circles</h2> <svg height="120" > <circle cx="50" cy="50" r="50" fill="red" /> <circle cx="50" cy="50" r="30" fill="green" /> <circle cx="50" cy="50" r="10" fill="blue" /> Your browser does not support SVG. </svg> </body> </html>
121
The <canvas> tagFunction: ใชสรางพนทสำหรบวาดภาพกราฟฟก ตองใชรวมกบสครปสำหรบเขยนโปรแกรมเชน
จาวาสครปท (JavaScript) Attributes: height ความสงของพนทสำหรบวาดภาพ หนวยเปน pixel
width ความกวางของพนทสำหรบวาดภาพ หนวยเปน pixel End tag:
</canvas>
Contains: text ควรเปนขอความทบอกผใชในกรณทเบราวเซอรไมรองรบแทกนหรอบรรจแทกอนสำหรบทำงาน
ทดแทน
การเขยนจาวาสครปท อยนอกขอบเขตวชาน
122
ตวอยางการใช <canvas><canvas id="animated_logo"
height="300" width="400"
>
<img src="static_logo.gif" height="300" width="400" />
</canvas>
id เปน attribute ทวไป ใชตงชอสำหรบการอางถงแทกตวใดตวหนง
เนองจากแทก <canvas> ตองใชรวมกบจาวาสครปจงจำเปนตองตงชอเพอใหจาวาสครปสามารถอางถงได
‹#›
การสรางตาราง
124
การสรางตาราง
มแทกทเกยวของตาง ๆ ดงน • <table> กำหนดตาราง • <th> กำหนดหวตาราง • <tr> กำหนดแถวของตาราง • <td> กำหนดขอมลของตาราง (เรยกวา cell) • <caption> ใชตงชอตาราง • <colgroup>กำหนดกลมของคอลมนเพอจดรปแบบ • <col /> กำหนดคา attribute ใหกบคอลมนของตาราง
ดรายละเอยดเพมเตมในเวบไซต http://www.bus.tu.ac.th/usr/wanchai/html/table.htm
125
A Simple Table<table border="1">
<tr>
<td>data1</td>
<td>data2</td>
</tr>
<tr>
<td>data3</td>
<td>data4</td>
</tr>
</table>
EX
126
สวนประกอบของ Table
แทกทเกยวของ
<table>
<caption>
<th> table head
<tr> table row
<td> table data
127
The <table > TagFunction:
สรางตารางสำหรบนำเสนอขอมลหรอจด layout Attributes: (ทกตวทกลาวถงตอไปนเลกใชใน HTML5)
align=left|center|right width ความกวางของตาราง หนวยเปน pixel
border ความหนาของเสนรอบตารางหนวยเปน pixel bgcolor สพนของตาราง End tag: </table>
Contains: <caption>, <tr>
ดคำอธบาย attribute เพมเตมและ ตวอยางในเวบ http://www.bus.tu.ac.th/usr/wanchai/html/ สามารถเขาดวยชอยอ j.mp/html_ex
128
The <tr> TagFunction:
จดขอมลในแตละแถวของตาราง
Attributes:
align=left|center|right
bgcolor สพนของเซลในบรรทด
End tag: </tr>
Contains: <th>, <td>
attribute ทกตว (มมากกวาน)เลกใชใน HTML5 ใหใช CSS แทน
129
The <td > TagFunction: บอกขอบเขตของขอมลทจะใสในเซลของตาราง Attributes: align=left|center|right
valign=top|middle|bottom
bgcolor สพนของเซล colspan = จำนวนคอลมนทตองการใหเซลนครอบคลม rowspan = จำนวนบรรทดทตองการใหเซลนครอบคลม
End tag: </td>
Contains: ขอความหรอแทกอน เชน <a> <img>
(deprecated)(deprecated)(deprecated)
130
The <th > TagFunction: ใชกำหนดเซลหวตาราง ใชเชนเดยวกบ <td> แตแสดงขอมลในเซลดวยตวหนา Attributes: align=left|center|right
valign=top|middle|bottom
bgcolor สพนของเซล colspan = จำนวนคอลมนทตองการใหเซลนครอบคลม rowspan = จำนวนบรรทดทตองการใหเซลนครอบคลม
End tag: </th>
Contains: ขอความหรอแทกอน เชน <a> <img>
(deprecated)(deprecated)(deprecated)
131<table>
<tr> ROW1 </tr>
<tr> ROW2 </tr>
</table>
<table>
<tr><th>Header1</th><th>Header2</th></tr>
<tr><td>row2col1</td><td>row2col2</td></tr>
<tr><td>row3col1</td><td>row3col2</td></tr>
</table>
ลำดบแถว
ลำดบแถว
ลำดบคอลมน หวคอลมน
132
ฝกสรางตาราง
ใหนกศกษาเขยนตารางใหมลกษณะดงตวอยางตอไปน
แถวแรกกนพนท 2 คอลมนตวเลขอยกลางเซล
133
การบงบอกลกษณะหรอสมบต หนาเวบโดยรวม
134
The <body> tag
Function: define global characteristics of the page Attributes: bgcolor กำหนดสพนของฉากหลง text กำหนดสของขอความทอยใน body link กำหนดสของ unvisited hypertext links alink กำหนดสของ active hypertext links vlink กำหนดสของ visited hypertext links background URL ของรปภาพทจะนำมาเปนฉากหลง
หมายเหต attribute เหลานถกยกเลก แนะนำใหใช CSS แทน
135
ตวอยางการใชแทก <body> ในการระบสขอความและภาพฉากหลง
<body bgcolor="blue">
<body bgcolor="black" text="white">
<body bgcolor="khaki" text="blue" background="woodtile.gif">
<body link="blue" alink="red" vlink="aqua">
หมายเหต ใช CSS ดกวา
136
meta tag สำหรบระบชดอกษรmeta เปนแทกสำหรบใหรายละเอยดบางอยางเพมเตม จะใสไวในสวนนำ
(head) ของเอกสาร html • ระบชดอกขระภาษาไทย<meta http-equiv="Content-Type" content="text/html; charset=tis-620" />
HTML5 ใหเขยนสน ๆ แบบนได <meta charset="tis-620" /> charset สำหรบชดอกษรไทยทใชไดม • tis-620
• windows-874
แนะนำใหใช UTF-8 กรณทใชหลายภาษา และ Editor รองรบการเซฟแฟมทมการเขารหสตวอกษรแบบนได
อยาลมปดเครองหมายคำพด
137
meta tag สำหรบระบคำสำคญการระบคำสำคญ (keyword)ในเอกสาร html เปนการอำนวย
ความสะดวกให search engine ทราบวาเราตองการใชคำใดเปนคำสำคญของเปาหมายในการคนบาง
<meta name="keywords" content=
"mango, pine apple, banana" />
138
The Meta Description Tag
แทก meta สามารถนำมาใชอธบายวาหนาเวบทเขยนเปนเรองเกยวกบอะไร ซง search engine มกนำขอความอธบายนไปโชวในหนาเวบของ search engine
<meta name= "description" content=
"เราขายมงคด กลวย และสปรด ผลไมชนยอด คณภาพด มคณคาทางโภชนาการสง" />
139
ตวอยางการใช meta tag ตาง ๆ
<html> <head> <title>IT knowledge</title> <meta charset="tis-620" /> <meta name="keywords" content="IT, ICT, Information Technology" />
<meta name="description" content="สาระนารเกยวกบไอท" />
</head> <body> ถาทานกำลงหาเวบไซตเกยวกบไอท ทานมาถกทแลว </body> </html>
143
140
การบอกชนดของเอกสาร (doctype) • ควรบอกชนดของเอกสารเพอใหบราวเซอรรวาเปนเอกสารชนดใด รนใด • กอนหนานการบอกชนดเอกสารคอนขางจำยากเชน xHTML ตองบอก
ดงน<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• พอเปน HTML5 สามารถบอกสน ๆ ไดดงน <!DOCTYPE HTML>
ถาจะใช HTM5 ควรบอก doctype เสมอเพอหลกเลยงปญญาบางเบราวเซอรไมทำงานอยางทคด เพราะ HTML มหลาย version ซงอาจทำงานตางกนในบาง version ถาไมบอก doctype เบราวเซอร อาจเดาวาเปน version ทแตกตางจากทคนเขยนตงใจกเปนได
142
Mobile Friendly Website• เปนการออกแบบเวบไซตใหเปนมตรกบผใชอปกรณพกพา เชนใชขนาดฟอนตใหเหมาะกบหนาจอขนาดเลก จด layout ไมแนนจนเกนไป
• แนวทางการออกแบบ • ออกแบบแยกกนไปเลยมกเปนคนละไซต (Adaptive Web Design) • ใชไซตเดยวแตเขยนเวบใหปรบตวใหเหมาะสมกบอปกรณแตละชนด
(Responsive Web Design)
กเกลใหความสำคญกบเวบไซตทเปนมตรกบอปกรณพกพา ถาคนดวยกเกลจะลสตเวบไซตทเปนมตรกบอปกรณพกพาขนกอน
143
Responsive Web Design (RWD)
• เปนการออกแบบเวบใหเหมาะกบอปกรณหลากหลายชนด นยมปรบเปลยน layout ใหเหมาะกบขนาดหนาจอโดยอตโนมต
• ใช ความสามารถของ CSS ในการตรวจสอบขนาดหนาจอแลวเลอกใช CSS style ทเตรยมไวแลวใหเหมาะสมกบขนาดหนาจอ
• อาจเตรยมรปไวหลายขนาดเพอใหเหมาะกบจอขนาดทตางกน
144
Mobile Friendly ดวย viewportดวยการใสแทก meta ไวใน head ดงน<meta name="viewport" content= "width=device-width, initial-scale=1.0, maximum-scale=1.0"
145
การ upload เวบเพจของนกศกษา• FTP ไฟลทตองการ upload ไปท server ชอ std.bus.tu.ac.th
โดยใช รหสนกศกษาเปน UserId และใช password ทแจกให (คนละตวกบการใชบรการอนเทอรเนต) โดยใชโปรแกรมสำหรบ FTP หรอใชความสามารถของวนโดวสในการ upload อานไดในเวบวชานhttp://www.bus.tu.ac.th/usr/wanchai/is216
• เขาเวบเพอดเอกสารท upload ไปแลวไดทhttp://std.bus.tu.ac.th/userid/filename
อานโจทย assignment HTML และ CSS ไดท http://www.bus.tu.ac.th/usr/wanchai/is216/
หรอเขาทางชอยอ http://bit.ly/tbsis216
146
การสอบทานเวซไซต• ตรวจวาเราเขยนถกตองตามหลกทดในการใช HTML หรอไม
https://validator.w3.org/ • ตรวจวาเขยนถกตองตามหลก CSS หรอไม
https://jigsaw.w3.org/css-validator/ • ตรวจวาเขยนลงคไมเหมาะสมหรอไม
https://validator.w3.org/checklink • ตรวจวาเปนมตรกบอปกรณพกพามากนอยเพยงใด
https://search.google.com/test/mobile-friendly
147เครองมอในการเขยนเวบ (Web Authoring Tools)
• Pure code-based editor
• Pure WYSIWYG (What You See Is What You Get) editor
• Compound editor (ผสมทง 2 แบบ เขาดวยกน) • web generator (ใชซอฟตแวรชวยสรางเวบ ไมตองเขยนเอง เชน
Microsoft Word สามารถแปลงไฟล word ใหเปน html ได) • Web Content Management System
148
Web Authoring Toolsโปรแกรมสำหรบชวยเขยนเวบ เพมผลตภาพในการเขยนเวบไดมาก แตมกตองซอซอฟตแวรราคาแพง บางโปรแกรมซบซอนมาก ตองใชเวลาในการเรยนรนาน เหมาะสำหรบผทเขยนเวบเปนอาชพ
ตวอยางโปรแกรมชวยเขยนเวบเชน • Adobe Dreamweaver $399
• Microsoft Expression $299
• Brackets Free ดาวนโหลดไดท http://brackets.io/
149
โปรแกรมสำหรบผลตเวบเฉพาะดาน
มโปรแกรมในทองตลาดทชวยผลต(generate หรอ build)เวบโดยไมตองเขยนเอง ผใชเพยงแคใหขอมลแลวโปรแกรมจะผลตหนาเวบให โดยทผใชโปรแกรมไมจำเปนตองรภาษา HTML กได แตถาผใชตองการดดแปลงแกไขหนาเวบทโปรแกรมผลตใหมกจำเปนตองมความรภาษา HTML จงจะแกไขหนาเวบทโปรแกรมผลตใหได ผใชโปรแกรมมกสามารถเลอกแมแบบ (template) แบบ (style) ตาง ๆ ทมเปนตวอยางใหเลอกได ตวอยางโปรแกรมประเภทน เชน
• โปรแกรมสำหรบสรางเวบไซตขายของ (E-commerce)
• โปรแกรมสำหรบอลบมรปภาพ
• โปรแกรมสำหรบสรางบทเรยนอเลกทรอนกส
ตวอยางโปรแกรมดในเวบไซตของวชาน
150
เวบสำหรบสรางหนาเวบ
• เวบยคแรกเปนเวบแบบนง ๆ (static web) ผชมเวบอานอยางเดยวไมสามารถโตตอบกบเวบได ผเขยนเวบตองมความรภาษา HTML
• ตอมามการพฒนาเวบใหสามารถโตตอบกบผชมได ผชมสามารถใสขอมลของตนเองเขาไปไดทางเบราวเซอรโดยไมจำเปนตองรภาษา HTML โปรแกรมททำงานอยทางฝงเครองแมขายจะรบขอมลทเราใสไปเกบไวในเครองแมขายและนำขอมลนนมาแปลงใหเปน HTML แลวสงไปใหเบราวเซอรแสดงผลเปนหนาเวบ ความสามารถของเวบททำแบบนไดนยมเรยกวา Web 2.0 ตวอยางของเวบแบบนเชน Facebook และ Wikipedia
151
Web Application ใชอะไรบาง• HTML (HyperText Markup Language)
• style sheet
• JavaScript
• DHTML (Dynamic HTML)
• CGI (Common Gateway Interface)
• XML (Extensible Markup Language)
• AJAX (Asynchronous JavaScript and XML)
✓✓
152
Web Fonts• Font ฟรสำหรบใชกบเวบท Google https://fonts.google.com/
วธใช https://developers.google.com/fonts/
Recommended