และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ

การสรางเวบเพจโดยใช HTML5 และ CSS ขนตน

Part IV Multimedia, Table และ อน ๆ

ผศ.วนชย ขนต [email protected] คณะพาณชยศาสตรและการบญช มธ.

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/

Documents

และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ