และ CSS ขั้นต้น ·...
Transcript of และ CSS ขั้นต้น ·...
![Page 1: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/1.jpg)
การสรางเวบเพจโดยใช HTML5 และ CSS ขนตน
Part IV Multimedia, Table และ อน ๆ
ผศ.วนชย ขนต [email protected] คณะพาณชยศาสตรและการบญช มธ.
http://www.bus.tu.ac.th/usr/wanchai/IS216
IS216 การพฒนาโปรแกรมประยกตโดยผใช
หวขอ
![Page 2: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/2.jpg)
98
Multimedia Web pages
นอกจากใสขอความ ในหนาเวบแลว เรา อาจใสเนอหาทเปน สอประสม (multimedia content) ลงไปไดดวย
![Page 3: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/3.jpg)
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
![Page 4: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/4.jpg)
100
การใสรปภาพในเอกสาร HTML
![Page 5: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/5.jpg)
101
ชนดของรปภาพทสามารถแสดงในหนาเวบ
• JPEG Joint Photographic Expert Group
• GIF Graphic Interchange Format
• PNG Portable Network Graphic
ภาพทง 3 ชนดนเหมาะกบการสงผานทางอนเทอรเนตเพราะสามารถบบอดขอมลใหเลกลงไดเพอประหยดเวลาในการสง
JPEG GIF PNG
![Page 6: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/6.jpg)
102
คณสมบตของ JPEG• คณภาพระดบภาพถาย(Photograph-quality)
• 24 บตตอจดภาพ ได 16.7 ลานส
• บบอดไดดถาใชกบภาพถายหรอภาพวาดทมการไลเฉดสเหมอนธรรมชาตขนาดของแฟมมกจะเลกกวา GIF
• ไมเหมาะกบภาพลายเสนเชนการตน ขนาดของแฟมจะโต
• ไมเหมาะกบการซอนภาพอกษร บบอดไดไมด • Progressive JPEG files โหลดไดเรวกวา JPEG ธรรมดา
สกลของแฟมเปน .jpg
![Page 7: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/7.jpg)
103
คณสมบตของ GIF• 8 bit ตอจดภาพ (pixel) แสดงได 256 ส • GIF24 ใช 24 bit ตอจดภาพแสดงได 16 ลานส • เหมาะสำหรบภาพทเปนสพน ไมไลเฉดส เชนโลโก ภาพลาย
เสน หรอรปทรงเรขาคณต
• รองรบการทำใหโปรงใส (Transparency)
• รองรบการทำ Interlacing
• รองรบการทำภาพเคลอนไหวAnimation
สกลของแฟมเปน .gif
![Page 8: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/8.jpg)
104
คณสมบตของ PNG• สรางขนมาทดแทน GIF ซงสงวนลขสทธในการใช
• สามารถแสดงสได 16.7 ลานส • เหมาะสำหรบภาพทเปนสพน เชนโลโก ภาพลายเสน ภาพ
วาด หรอรปทรงเรขาคณต สามารถไลเฉดสไดดกวา GIF
• รองรบการทำใหโปรงใส (Transparency)
• รองรบการทำภาพเคลอนไหว (Animation) แตบางเบราวเซอรไมรองรบ
สกลของแฟมเปน .png
![Page 9: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/9.jpg)
105
การวางรปภาพในเอกสาร HTML<html>
<head>
<title>Image Placement</title>
</head>
<body>
This is my picture
<img src="mypic.jpg" />
</body>
</html>
![Page 10: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/10.jpg)
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 สำหรบวางรปภาพ
![Page 11: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/11.jpg)
‹#›
<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)
![Page 12: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/12.jpg)
108
Attribute align ของแทก img• top
• middle
• bottom
• left
• rightไมม center
Attribute align ถก Deprecated ใน HTML4 และไมรองรบใน HTML5
![Page 13: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/13.jpg)
109
ตวอยางการใช img <img
src="mypic.jpg"
alt="my lovely picture"
height="100"
width="70"
/>
![Page 14: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/14.jpg)
110
การ save ภาพจากเวบ (สำหรบผทไมทราบ)
• ใชเมาสชทรปภาพแลวคลกดวยปมขวาของเมาสจะปรากฎ pop up menu
• เลอกรายการ Save Picture As …
• เลอก drive / folder ทตองการsave แลวคลกปม save
![Page 15: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/15.jpg)
111
ฝกปฏบตใสรปภาพ
เขยนเวบใหมการแสดงรปภาพลกษณะตาง ๆ เชน
• inline image
• hypertext anchor
• background
![Page 16: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/16.jpg)
112
การนำเสนอไฟลวดโอ
<img dynsrc= ชอไฟลวดโอ loop = จำนวนรอบ | infinite />
การนำเสนอไฟลเสยง
<bgsound src= ชอไฟลเสยง
loop = จำนวนรอบ | infinite />หมายเหต
1. แทกเหลานเปนแทกสวนเพมของ IE ไมใชแทกทกำหนดในมาตรฐาน HTML 4.0 หรอ XHTML 1.0
2. การใสเสยงควรใชดวยความระมดระวง เพราะอาจรบกวนหรอสรางความรำคาญใหผชม
กอน HTML5
![Page 17: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/17.jpg)
113
tag ใหมใน HTML5
![Page 18: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/18.jpg)
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 ควรเปนขอความทบอกผใชในกรณทเบราวเซอรไมรองรบแทกน
![Page 19: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/19.jpg)
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 หลายตว
![Page 20: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/20.jpg)
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 ควรเปนขอความทบอกผใชในกรณทเบราวเซอรไมรองรบแทกน
![Page 21: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/21.jpg)
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 หลายตว
![Page 22: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/22.jpg)
118
Scalable Vector Graphic (SVG)• เปนมาตรฐานภาพกราฟกทสามารถยอขยายได • กำหนดภาพกราฟก 2 มตดวยภาษา XML
• สามารถทำภาพเคลอนไหวได • เปนมาตรฐานแนะนำของ W3C
– SVG version 1.0 4 September 2001
– SVG Version 1.1 ปรบปรงใหม 16 August 2011
![Page 23: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/23.jpg)
119
การแสดงภาพกราฟก SVG
• เบราวเซอรรนเกาตองตดตง plugin เชน Adobe SVG Viewer
• เบราวเซอรรนใหม (ทรองรบ HTML5) สวนใหญสามารถแสดงภาพกราฟก
SVG ไดโดยไมตองตดตง plugin
• ใช แทก <svg>
• รายละเอยดเรอง svg อยนอกขอบเขตวชาน แตตองการใหภาพคราว ๆ วาทำไดอยางไร
![Page 24: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/24.jpg)
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>
![Page 25: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/25.jpg)
121
The <canvas> tagFunction: ใชสรางพนทสำหรบวาดภาพกราฟฟก ตองใชรวมกบสครปสำหรบเขยนโปรแกรมเชน
จาวาสครปท (JavaScript) Attributes: height ความสงของพนทสำหรบวาดภาพ หนวยเปน pixel
width ความกวางของพนทสำหรบวาดภาพ หนวยเปน pixel End tag:
</canvas>
Contains: text ควรเปนขอความทบอกผใชในกรณทเบราวเซอรไมรองรบแทกนหรอบรรจแทกอนสำหรบทำงาน
ทดแทน
การเขยนจาวาสครปท อยนอกขอบเขตวชาน
![Page 26: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/26.jpg)
122
ตวอยางการใช <canvas><canvas id="animated_logo"
height="300" width="400"
>
<img src="static_logo.gif" height="300" width="400" />
</canvas>
id เปน attribute ทวไป ใชตงชอสำหรบการอางถงแทกตวใดตวหนง
เนองจากแทก <canvas> ตองใชรวมกบจาวาสครปจงจำเปนตองตงชอเพอใหจาวาสครปสามารถอางถงได
![Page 27: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/27.jpg)
‹#›
การสรางตาราง
![Page 28: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/28.jpg)
124
การสรางตาราง
มแทกทเกยวของตาง ๆ ดงน • <table> กำหนดตาราง • <th> กำหนดหวตาราง • <tr> กำหนดแถวของตาราง • <td> กำหนดขอมลของตาราง (เรยกวา cell) • <caption> ใชตงชอตาราง • <colgroup>กำหนดกลมของคอลมนเพอจดรปแบบ • <col /> กำหนดคา attribute ใหกบคอลมนของตาราง
ดรายละเอยดเพมเตมในเวบไซต http://www.bus.tu.ac.th/usr/wanchai/html/table.htm
![Page 29: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/29.jpg)
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
![Page 30: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/30.jpg)
126
สวนประกอบของ Table
แทกทเกยวของ
<table>
<caption>
<th> table head
<tr> table row
<td> table data
![Page 31: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/31.jpg)
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
![Page 32: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/32.jpg)
128
The <tr> TagFunction:
จดขอมลในแตละแถวของตาราง
Attributes:
align=left|center|right
bgcolor สพนของเซลในบรรทด
End tag: </tr>
Contains: <th>, <td>
attribute ทกตว (มมากกวาน)เลกใชใน HTML5 ใหใช CSS แทน
![Page 33: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/33.jpg)
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)
![Page 34: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/34.jpg)
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)
![Page 35: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/35.jpg)
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>
ลำดบแถว
ลำดบแถว
ลำดบคอลมน หวคอลมน
![Page 36: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/36.jpg)
132
ฝกสรางตาราง
ใหนกศกษาเขยนตารางใหมลกษณะดงตวอยางตอไปน
แถวแรกกนพนท 2 คอลมนตวเลขอยกลางเซล
![Page 37: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/37.jpg)
133
การบงบอกลกษณะหรอสมบต หนาเวบโดยรวม
![Page 38: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/38.jpg)
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 แทน
![Page 39: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/39.jpg)
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 ดกวา
![Page 40: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/40.jpg)
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 รองรบการเซฟแฟมทมการเขารหสตวอกษรแบบนได
อยาลมปดเครองหมายคำพด
![Page 41: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/41.jpg)
137
meta tag สำหรบระบคำสำคญการระบคำสำคญ (keyword)ในเอกสาร html เปนการอำนวย
ความสะดวกให search engine ทราบวาเราตองการใชคำใดเปนคำสำคญของเปาหมายในการคนบาง
<meta name="keywords" content=
"mango, pine apple, banana" />
![Page 42: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/42.jpg)
138
The Meta Description Tag
แทก meta สามารถนำมาใชอธบายวาหนาเวบทเขยนเปนเรองเกยวกบอะไร ซง search engine มกนำขอความอธบายนไปโชวในหนาเวบของ search engine
<meta name= "description" content=
"เราขายมงคด กลวย และสปรด ผลไมชนยอด คณภาพด มคณคาทางโภชนาการสง" />
![Page 43: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/43.jpg)
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
![Page 44: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/44.jpg)
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 ทแตกตางจากทคนเขยนตงใจกเปนได
![Page 45: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/45.jpg)
![Page 46: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/46.jpg)
142
Mobile Friendly Website• เปนการออกแบบเวบไซตใหเปนมตรกบผใชอปกรณพกพา เชนใชขนาดฟอนตใหเหมาะกบหนาจอขนาดเลก จด layout ไมแนนจนเกนไป
• แนวทางการออกแบบ • ออกแบบแยกกนไปเลยมกเปนคนละไซต (Adaptive Web Design) • ใชไซตเดยวแตเขยนเวบใหปรบตวใหเหมาะสมกบอปกรณแตละชนด
(Responsive Web Design)
กเกลใหความสำคญกบเวบไซตทเปนมตรกบอปกรณพกพา ถาคนดวยกเกลจะลสตเวบไซตทเปนมตรกบอปกรณพกพาขนกอน
![Page 47: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/47.jpg)
143
Responsive Web Design (RWD)
• เปนการออกแบบเวบใหเหมาะกบอปกรณหลากหลายชนด นยมปรบเปลยน layout ใหเหมาะกบขนาดหนาจอโดยอตโนมต
• ใช ความสามารถของ CSS ในการตรวจสอบขนาดหนาจอแลวเลอกใช CSS style ทเตรยมไวแลวใหเหมาะสมกบขนาดหนาจอ
• อาจเตรยมรปไวหลายขนาดเพอใหเหมาะกบจอขนาดทตางกน
![Page 48: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/48.jpg)
144
Mobile Friendly ดวย viewportดวยการใสแทก meta ไวใน head ดงน<meta name="viewport" content= "width=device-width, initial-scale=1.0, maximum-scale=1.0"
![Page 49: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/49.jpg)
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
![Page 50: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/50.jpg)
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
![Page 51: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/51.jpg)
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
![Page 52: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/52.jpg)
148
Web Authoring Toolsโปรแกรมสำหรบชวยเขยนเวบ เพมผลตภาพในการเขยนเวบไดมาก แตมกตองซอซอฟตแวรราคาแพง บางโปรแกรมซบซอนมาก ตองใชเวลาในการเรยนรนาน เหมาะสำหรบผทเขยนเวบเปนอาชพ
ตวอยางโปรแกรมชวยเขยนเวบเชน • Adobe Dreamweaver $399
• Microsoft Expression $299
• Brackets Free ดาวนโหลดไดท http://brackets.io/
![Page 53: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/53.jpg)
149
โปรแกรมสำหรบผลตเวบเฉพาะดาน
มโปรแกรมในทองตลาดทชวยผลต(generate หรอ build)เวบโดยไมตองเขยนเอง ผใชเพยงแคใหขอมลแลวโปรแกรมจะผลตหนาเวบให โดยทผใชโปรแกรมไมจำเปนตองรภาษา HTML กได แตถาผใชตองการดดแปลงแกไขหนาเวบทโปรแกรมผลตใหมกจำเปนตองมความรภาษา HTML จงจะแกไขหนาเวบทโปรแกรมผลตใหได ผใชโปรแกรมมกสามารถเลอกแมแบบ (template) แบบ (style) ตาง ๆ ทมเปนตวอยางใหเลอกได ตวอยางโปรแกรมประเภทน เชน
• โปรแกรมสำหรบสรางเวบไซตขายของ (E-commerce)
• โปรแกรมสำหรบอลบมรปภาพ
• โปรแกรมสำหรบสรางบทเรยนอเลกทรอนกส
ตวอยางโปรแกรมดในเวบไซตของวชาน
![Page 54: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/54.jpg)
150
เวบสำหรบสรางหนาเวบ
• เวบยคแรกเปนเวบแบบนง ๆ (static web) ผชมเวบอานอยางเดยวไมสามารถโตตอบกบเวบได ผเขยนเวบตองมความรภาษา HTML
• ตอมามการพฒนาเวบใหสามารถโตตอบกบผชมได ผชมสามารถใสขอมลของตนเองเขาไปไดทางเบราวเซอรโดยไมจำเปนตองรภาษา HTML โปรแกรมททำงานอยทางฝงเครองแมขายจะรบขอมลทเราใสไปเกบไวในเครองแมขายและนำขอมลนนมาแปลงใหเปน HTML แลวสงไปใหเบราวเซอรแสดงผลเปนหนาเวบ ความสามารถของเวบททำแบบนไดนยมเรยกวา Web 2.0 ตวอยางของเวบแบบนเชน Facebook และ Wikipedia
![Page 55: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/55.jpg)
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)
✓✓
![Page 56: และ CSS ขั้นต้น · การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV Multimedia, Table และ](https://reader033.fdokument.com/reader033/viewer/2022060310/5f0a88e07e708231d42c1bca/html5/thumbnails/56.jpg)
152
Web Fonts• Font ฟรสำหรบใชกบเวบท Google https://fonts.google.com/
วธใช https://developers.google.com/fonts/