บทที่ 5 การสร้างตารางและการการสร้างเสียงดนตรีเว็บเพจ

1. บทที่ 5
การสร้างตารางและการการสร้าง
เสียงดนตรีเว็บเพจ

2. การสร้างตาราง
การสร้างตารางลงในเว็บเพจมีประโยชน์มหาศาลสามารถประยุกต์นาไปใช้ได้หลายอย่าง เพื่อเป็นการเพิ่มสีสันความสวยงาม
ของเว็บเพจก็ไม่แตกต่างจาการสร้างบนแผ่นกระดาษทั่วๆไป เคยทาตารางอย่างไรก็สามารถสั่งให้เว็บเพจทางานนั้นได้โดยมีรายละเอียด
ดังนี้
โครงสร้างตาราง
<TABLE>
<TR>
<TH>ใช้เฉพาะหัวข้อตาราง
</TD>รายละเอียดย่อย
<TH>ใช้เฉพาะหัวข้อตาราง
</TD>รายละเอียดย่อย
</TR>
</TABLE>
รูปแบบ <TABLE>…</TABLE>
<TR>
<TH>ใช้เฉพาะหัวข้อตาราง
</TD>

3. คาอธิบายตาราง
รูปแบบ <CAPTION>ข้อความ</CAPTION>
อธิบาย ใช้แสดงคาอธิบายหรือข้อความประกอบตาราง ทั้งด้านบนหรือด้านล่างของตารางนั้นๆ โดยจะต้องอยู่ภายในคาสั่ง <TABLE> เช่น
<TABLE BORDER>
<CAPTION> สรุปงบประมาณรายจ่าย </CAPTION>
<TR><TH> รุ่น </TH><TH> บาท </TH></TR>
<TR> <TD> TR-500 </TD> <TD> 50,000 </TD> </TR>
</TABLE>
ตารางแสดงคุณสมบัติของตาราง
รูปแบบ
<TABLE ALIGN=align-type BACKGROUND=url BORDER=n CELLPADDING=n CELLSPACING=n WIDTH=n HEIGHT=n>
อธิบาย
ALIGN กาหนดตาแหน่งตารางโดย
LEFT=กาหนดตารางให้อยู่ทางซ้าย
RIGHT=กาหนดตารางให้อยู่ทางขวา
BACKGROUND ใส่ภาพกราฟฟิคเป็นพื้นหลังตาราง url เป็นตาแหน่งภาพ
BGCOLOR กาหนดสีให้ตาราง
BORDER เส้นขอบตาราง n เป็นค่าความหนาของขอบตาราง
BORDERCOLOR กาหนดสีให้ขอบตารางโดยสัมพันธ์กับ BORDER
CELLPADDING กาหนดระยะห่างระหว่างตัวหนังสือและเส้นแบ่งตาราง
CELLSPACING กาหนดขนาดของเส้นตาราง
WIDTH กาหนดความกว้างของตารางเป็นตัวเลขและเป็น%
HEIGHT กาหนดความสูงของตารางเป็นตัวเลขและเป็น%

4. รูปแบบ
<TR ALIGN=aling-type BACKGROUND=url BGCOLOR=color BORDERCOLOR=color VALIGN=align-
type>
อธิบาย
ALIGN กาหนดตาแหน่งข้อความในแถวตามแนวนอนโดย
LEFT=อยู่ทางซ้าย
CENTER=อยู่ตรงกลาง
RIGHT=อยู่ทางขวา
BACKGROUND ใส่ภาพกราฟฟิก เป็นพื้นหลังแถว url เป็นตาแหน่งภาพ
BGCOLOR กาหนดสีที่เป็นฉากหลังให้แถว
BORDERCOLOR กาหนดสีให้ขอบตาราง
VALIGN จัดตาแหน่งข้อมูลในแนวตั้งโดย
TOP=จัดอยู่ข้างบน
MIDDLE=จัดอยู่ตรงกลาง
BATTOM=จัดอยู่ข้างล่าง

5. รูปแบบ
<TH ALIGN = align-type BACKGROUND = url BGCOLOR = color BORDERCOLOR = color COLSPAN = n ROWSPAN
= n VALIGN = align-type>
อธิบาย
ALIGN กาหนดตาแหน่งข้อความในแถวตามแนวนอน โดย
LEFT=อยู่ทางซ้าย
CENTER=อยู่ตรงกลาง
RIGHT=อยู่ทางขวา
BACKGROUND ใส่ภาพกราฟฟิคเป็นพื้นหลังแถว url เป็นตาแหน่งภาพ
BGOCLOR กาหนดสีที่เป็นฉากหลังให้แถว
BORDERCOLOR กาหนดสีให้ขอบตาราง
COLSPAN ปรับขนาดของคอลัมน์ให้มีขนาดเป็นเท่าของความกว้าง
ปกติสูงสุดเท่ากับจานวนคอลัมน์ที่มี
ROWSPAN ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ
สูงสุดเท่ากับจานวนแถวที่มี
VALIGN จัดตาแหน่งข้อมูล แถวตั้งโดย
Top=จัดอยู่ข้างบน
MIDDLE=จัดอยู่ตรงกลาง
BATTOM=จัดอยู่ข้างล่าง

6. การสร้างเสียงดนตรีบนเว็บเพจ
การสร้างเสียงดนตรีโฮมเพจจะมีสีสันมากขึ้น สามารถทาได้โดยการใส่เสียงทาให้มีชีวิต ความไพเราะของ
เสียงดนตรีและส่วนประกอบอื่น ๆ อีกมากมายมีรายละเอียดในการใช้คาสั่ง ดังนี้
แบบ Background Sound
รูปแบบ <BGSOUND SRC= “…” LOOP=n>
อธิบาย เป็นการบรรเลงเพลงทาเป็น Background ให้กับโฮมเพจ เมื่อชม web site จะทาการโหลดเพลงให้โดย
อัตโนมัติโดยใช้ไฟล์ใน
รูปแบบต่าง ๆ เช่น WAV, AU, MIDE ฯลฯ
BGSOUND เป็นรูปแบบการบรรเลงเพลงของ Microsoft Internet Explorer
SRC ใส่ตาแหน่งที่อยู่ของบรรเลงเสียงเพลงที่ต้องการ
LOOP จานวนรอบที่ต้องการให้เล่นถ้าต้องการให้เล่นไปเรื่อย ๆ ให้ใส่ Infinite
ตัวอย่าง <BGSOUND SRC= “sound.mid” LOOP= “5”>

7. แบบ EMBED
รูปแบบ <EMBED SRC = “...” HIDDEN = TRUE HIGHT = n WIDTH = n CONTROLS =
COLSOLE/SMALLCONSOLE AUTOSTART = TRUE LOOP = TRUE/n>
อธิบาย เป็นการใส่เสียงเพลงทาเป็น background ให้กับโฮมเพจของ Netscape Navigator โดย
EMBED เป็นรูปแบบการบรรเลงเพลงของ Netscape
SRC ใส่ตาแหน่งที่อยู่ของไฟล์เสียงเพลงที่ต้องการ
HIDDEN เป็นการซ้อมปุ่มควบคุมการเล่นเพลง ถ้าไม่ต้องการก็ไม่ต้อง ใส่เข้าไปเลยเมื่อใส่คาสั่งนี้แล้ว คาสั่ง
อื่นคือ
Hight, width, controls ก็ไม่ต้องใส่เข้าไป
HIGHT เป็นการกาหนดความสูงให้กับแผงควบคุม
WIDTH เป็นการกาหนดความกว้างให้แผงควบคุม
CONTROLS กาหนดรูปแบบแผงควบคุม โดย smale เป็นแบบอย่างย่อ ส่วน console เป็นเต็มรูปแบบ
AUTOSTAET กาหนดการเล่นเพลงโดยอัตโนมัติ (TRUE) ถ้าไม่ต้องการให้ลบทิ้งไปได้เลย
LOOP จานวนรอบที่ต้องการให้เล่นถ้าต้องการให้เล่นไปเรื่อย ๆ ให้ใส่ TRUE แต่ถ้าต้องการ กาหนดจานวน
รอบก็ใส่เป็น ตัวเลขเข้าไป เมื่อไม่ต้องการ ไม่ให้วนให้ใส่ FALSE (ไม่จาเป็นต้องใส่ก็ได้ เพราะ
ค่าปกติเป็น FALSE อยู่แล้ว)
ตัวอย่าง <EMBED SRC= "sound.mid” HIGHT=60 WIDTH=144 CONTROLS-COLSOLE
AUTOSTART=TRUE LOOP=TRUE>

8. แบบกาหนดตัวเชื่อม
รูปแบบ <A HREF= “...” คาอธิบาย </A>
อธิบาย เป็นการใส่เพลงโดยการกาหนดตัวเชื่อม ในช่องว่าง ๆ ให้ใส่ตาแหน่ง ไฟล์เสียงลงไป ส่วนตรง “คาอธิบาย”
ให้ใส่ข้อความที่สื่อความหมายให้รู้ว่าตัวเชื่อมนี้เป็นไฟล์เพลง เช่น “เพลง” ตัวอย่าง <A HREF= “sound.mid ฟังเพลง
กดตรงนี</A>
แบบ META
รูปแบบ <META HTTP-EQUIV= “Refresh” CONTENT= “1;URL=...”>
อธิบาย การใช้คาสั่ง meta เพื่อเป็นการโหลดไฟล์ออดิโอและเล่นเพลงนั้น ๆ โดย อัตโนมัติทันที เมื่อเว็บเพจถูก
โหลดขึ้นมาใช้จะได้ทั้ง IE และ NS โดย
คาสั่ง <META ใส่อยู่ระหว่างคาสั่ง IHEAD>..</HEAD> HTTP-EQUIV= “Refresh” กาหนดการโหลดไฟล์
เพลงโดยอัตโนมัติ
CONTENT= “1;URL=…” เป็นการกาหนดเวลาที่จะโหลดเพลงเมื่อ เว็บเพจถูกโหลดขึ้นมาโดย URL เป็นชื่อ
เพลงที่ต้องการให้ โหลด เช่น
<HEAD>
<META HTTP-EQUIV="Refresh” COMTENT="1;URL=sound.mid">
</HEAD>

9. ใส่ไฟล์วีดิโอให้เว็บเพจ (E)
รูปแบบ <IMG DYNSRC= “...” SRC= “...” ALT= “…” START=FILEOPEN/MOUSEOVER CONTROLS>
อธิบาย เป็นรูปแบบการใส่ไฟล์วีดิโอของ Internet Explorer โดยมีลักษณะคาสั่งดังนี้
DYNSRC= “…” ให้ใส่ชื่อไฟล์วีดิโอลงไป เช่น video.avi
SRC= “…” ให้ใส่ไฟล์รูปภาพไว้เป็นตัวแทน ไฟล์วีดิโอนั้น ๆ เมื่อ has เบราเซอร์ผู้ใช้ไม่สนับสนุน
ALT= “…” ใส่ข้อความใด ๆ ก็ได้ลงไปเพื่อให้ผู้ใช้ที่ไม่สามารถควีดิโอ สามารถรู้ข้อมูลได้
LOOP (n) กาหนดจานวนครั้งที่จะให้ วีดิโอเล่น ใส่เป็นตัวเลขหรือ infinite ก็ได้
START=FILEOPEN/MOUSEOVER โดย fileopen เป็นการกาหนดให้ เริ่มเล่นทันทีที่ไฟล์วีดิโอโหลดเสร็จ
(ปกติแล้ววีดิโอจะถูกเล่นทันทีที่ดาวน์โหลดเสร็จ ดังนั้น STRAT-FILEOPEN จึงไม่ต้อง ใส่ก็ได้)
mouseover เป็นการกาหนดให้เล่นวีดิโอเมื่อเอาเมาส์ไปวางบนวีดิโอนั้นๆ เช่น
<IMG DYNSRC= “SPORT.AVI” SRC=PICTURE.GIF ALT= “ทดสอบการใช้ไฟล์วีดิโอ (IE)” LOOP= “2”>

10. ใส่ไฟล์วิดิโอให้เว็บเพจ (NS)
รูปแบบ (EMBED SRE= “...” LOOP= “TRUE/FALSE WIDTH=pixels HEIGHT=pixels ALİGN="...">
อธิบาย เป็นรูปแบบการใส่ไฟล์วีดิโอของ Netscape จะยุ่งยากตรงที่ต้องรู้ขนาด ของไฟล์วีดิโอ
ว่ามีขนาดยาวปีพิกเซล ตามขนาดมาตรฐานแล้ว (height x width) จะมีอัตราส่วนเป็น 3-4 ขนาด
มาตรฐาน ได้แก่ 90x120, 120x160, 180x240, และ 240x320 โดยมีลักษณะคาสั่งดังนี้
SRC= “ ” ให้ใส่ชื่อไฟล์วีดิโอลงไป sport.avi
LOOP ถ้ากาหนดเป็น true จะทาให้วีดิโอเล่นไปเรื่อย ๆ ถ้าต้องการให้เล่นครั้งเดียวไม่ต้องใส่ก็ได้
WIDTH กาหนดขนาดความกว้างของวีดิโอตามมาตรฐาน
HEIGHT กาหนดความสูงของวีดิโอตามมาตรฐาน
ALIGN= “” เป็นการกาหนดตาแหน่งดังนี้ top, bottom, center,baseline, left, right, เช่น
<EMBED SRC=sport.avi WIDTH=240 HEIGHT=180>