วันอังคารที่ 10 กรกฎาคม พ.ศ. 2555
การสร้างตาราง
ตารางและการประยุกต์ใช้
บทนี้เป็นการเรียนรู้วิธีสร้างตารางโดยเริ่มที่วิธีสร้างตารางแบบง่าย ๆ ต่อด้วยการปรับแต่งตารางในรูปแบบ
ต่างๆ จนกระทั่งถึงการนำตารางไปประยุกต์ใช้ในข้อมูลและจัดหน้าเว็บเพจ รวมทั่งใช้แก้ไขปัญหาที่ผู้ใช้งานอาจตั้งค่าความละเอียด
ของหน้าจอไม่เท่ากันจนทำให้เว็บเพจปรากฏต่อสายตาผู้ใช้แต่ละคนแตกต่างกัน
วิธีสร้างตาราง
ในแต่ละครั้งที่สร้างตารางขึ้นมานั้นจำเป็นจะต้องใช้ <TABLE>,<TR>และ <TD>
เพื่อกำหนดขอบเขตของตาราง กำหนดจำนวนแถว และกำหนดจำนวนคอลัมน์ในแต่ละแถวตามลำดับ
ขอบเขตของตาราง
เราใช้ <TABLE>ในการกำหนดขอบเขตของตาราง รวมทั้งใช้แอตทริบิวต์ต่างๆ ของแท็กนี้ในการกำหนด
ลักษณะของตารางให้แตกต่างไปจากปกติ ซึ่งลักษณะของตารางปกติจะเป็นตารางที่ไม่มีขอบ ไม่มีสีใด ๆ ทั้งสิ้น ดังนั้น สีหรือ
ลักษณะที่เห็นจะเป็นเช่นเดียวกับพื้นหลังของเว็บเพจหน้านั้น
รูปแบบการใช้งาน <TABLE> เป็นดังนี้
ชื่อแท็ก: TABLE
รูปแบบ: <TABLE>แท็กที่เกี่ยวข้องกับตารางและข้อมูลในตาราง</TABLE>
ตัวอย่างการใช้: <table><tr> <td>ช่องที่ 1 ของแถวที่ 1 </td>…</tr>…</table>
ตำแหน่งที่ใช้: ระหว่าง <BODY>…</BODY>
จำนวนแถวในตาราง
วิธีการกำหนดจำนวนแถวในตารางทำได้ด้วยการใช้ <TR>โดยมีหลักการคือ ต้องการกี่แถวก็ให้ใช้ <TR>
เท่ากับจำนวนแถวที่ต้องการ
ชื่อแท็ก: TR
รูปแบบ: <TR>แท็กที่เกี่ยวข้องกับตารางและข้อมูลในตาราง</TR>
ตัวอย่างการใช้: <tr> <td>ช่องที่ 1 ของแถวที่ 1 </td>…</tr>
<tr> <td>ช่องที่ 1 ของแถวที่ 2 </td>…</tr>
ตำแหน่งที่ใช้: ระหว่าง <TABLE>…</TABLE>
จำนวนคอลัมน์ในแต่ละแถว
เมื่อต้องการแบ่งแต่ละแถวออกเป็นคอลัมน์เราจะใช้หลักการเดียวกับการกำหนดจำนวนแถวในตารางคือ
ต้องการให้มีกี่คอลัมน์ก็ให้ใช้ <TD> เท่ากับจำนวนคอลัมน์ที่ต้องการ
ชื่อแท็ก: TD
รูปแบบ: <TD>ข้อมูลในตาราง</TD>
ตัวอย่างการใช้: <td>ช่องที่ 1 ของแถวที่ 1 </td>
<td>ช่องที่ 2 ของแถวที่ 1 </td>
<td>ช่องที่ 3 ของแถวที่ 1</td>
ตำแหน่งที่ใช้: ระหว่าง <TR>…</TR>
สร้างตารางที่มี 3 แถว แถวละ 2 คอลัมน์
ขั้นตอนต่อไปนี้จะช่วยให้เราทราบว่าการที่จะสร้างตารางขึ้นมาสักหนึ่งตารางนั้นมีวิธีการอย่างไร
1 กำหนดขอบเขตของตารางด้วย <TABLE>
2 แบ่งตารางออกเป็น 3 แถวโดยใช้ <TR> จำนวน 3 แท็ก
3 ในแต่ละ <TR>คือ แต่ละแถวให้แบ่งออกเป็น 2 คอลัมน์ด้วย <TD>จำนวนแถวละ 2 แท็ก
4 ข้อมูลที่ต้องการแสดงในแต่ละช่องของตารางให้ใส่ไว้ระหว่าง <TD>…</TD>
วิธีควบคุมลักษณะของตารางด้วย <TABLE>
วิธีในการเปลี่ยนแปลงลักษณะต่างๆ ของตารางที่จะกล่าวถึงต่อไปนี้เป็นวิธีที่สามารถทำได้โดยใช้แอตทริบิวต์
ของ <TABLE> ซึ่งมีอยู่ด้วยกันหลากหลายวิธีเลยที่เดียว ตัวอย่าง เช่น การกำหนดลักษณะต่างๆ ของเส้นขอบ การกำหนด
ขนาดของตารางไม่ว่าจะเป็นความกว้างและความสูง แม้แต่การกำหนดตำแหน่งของตารางที่ปรากฏในหน้าเว็บเพจเราก็สามารถ
ทำได้เช่นเดียวกัน วิธีการกำหนดลักษณะต่างๆ ที่ไดกล่าวถึงรวมทั้งลักษณะอื่นๆ สามรถกำหนดได้ดังต่อไปนี้
กำหนดให้ขอบตารางปรากฏ
โดยปกติเราจะไม่เห็นขอบตาราง (ลักษณะปกติ) แต่ถ้าเราต้องการให้เส้นขอบของตารางปรากฏก็เป็นสิ่งที่
กำหนดได้ โดยเส้นขอบของตารางจะมีอยู่ 2 แบบคือ เส้นขอบด้านนอกของตารางและเส้นขอบของแต่ละช่องในตาราง
การกำหนดขนาดของเส้นขอบจะมีผลกับเส้นขอบทั้งสองแบบพร้อมกัน
ชื่อแอตทริบิวต์ : BORDER
รูปแบบ: <TABLE BORDER=”ขนาดของพิกเซล”>… </TABLE>
ตัวอย่างการใช้: <table border=”1”>… </table>
ตำแหน่งที่ใช้: ภายในแท็กเปิดของ <TABLE>…</TABLE>
เมื่อต้องการกำหนดให้เส้นขอบมีขนาดเป็น 1 พิกเซลให้เราทำตามขั้นตอนดังนี้
1. กำหนดค่าให้แอตทริบิวต์ BORDER เป็น 1
เปลี่ยนสีขอบของตาราง
เราสามารถเปลี่ยนสีของเส้นที่เป็นขอบของตารางจากสีดำเป็นสีอื่นได้โดยใช้แอตทริบิวต์
BORDERCOLOR ซึ่งมีรูปแบบการใช้งานเป็นดังนี้
ชื่อแอตทริบิวต์: BORDECOLOR
รูปแบบ: <TABLE BORDECOLOR=”ชื่อสีหรือค่าสี”>… </TABLE>
ตัวอย่างการใช้: <table bordercolor=”green”>…</table>
ตำแหน่งที่ใช้: ภายในแท็กเปิดของ <TABLE>
ตัวอย่างต่อไปนี้เป็นการกำหนดสีขอบของตารางโดยจะกำหนดให้เป็นสีเขียวด้วยการกำหนดด้วยชื่อสี GREEN
ผลลัพธ์ที่จะทำให้เส้นขอบด้านนอกของตาราง และเส้นขอบของแต่ละช่องในตารางเปลี่ยนเป็นสีที่ต้องการเมื่อเปิดดูโปรแกรม
Internet Explorer
1.กำหนดชื่อสีหรือค่าสีที่ต้องการให้กับแอตทริบิวต์ BORDERCOLOR ในตัวอย่างได้กำหนดให้เป็น
“green”
กำหนดขนาดของตาราง
ขนาดของตารางสามารถกำหนดให้ทั้งความกว้างและความสูง โดยที่ลักษณะทั้งสองของตารางจะกำหนดได้
ด้วยแอตทริบิวต์ WIDTH และ HEIGHT ตามลำดับ
ชื่อแอตทริบิวต์: WIDTH, HEIGHT
รูปแบบ : <TABLE WIDTH=”ความกว้างเป็นเปอร์เซ็นต์หรือพิกเซล”HEIGHT=”ความสูง
เป็นเปอร์เซ็นต์หรือพิกเซล”>…</TABLE>
ตัวอย่างการใช้: <table width=”45%” height=”150”>…</table>
ตำแหน่งที่ใช้: ภายในแท็กเปิดของ <TABLE>
เราจะกำหนดให้ตารางมีความกว้างเป็น 45 เปอร์เซ็นของความกว้างเว็บเพจ และกำหนดให้ตารางมีความสูงเป็น 150 พิกเซลดังนี้
1.กำหนดค่าให้แอตทริบิวต์ WIDTH เท่ากับ 45%
2.กำหนดค่าให้แอตทริบิวต์ HEIGHT เป็น 150
ตำแหน่งของตารางในหน้าเว็บเพจ
ถ้าเราสร้างตารางขึ้นมาครั้งแรกตำแหน่งของตารางจะถูกบราวเซอร์จัดให้ชิดด้านซ้ายของหน้าเว็บเพจเช่นเดียวกับข้อความในเว็บเพจ
แต่เราสามารถเปลี่ยนตำแหน่งของตารางได้ด้วยการใช้แอตทริบิวต์ ALIGN
ชื่อแอตทริบิวต์: ALIGN
รูปแบบ: <TABLE ALIGN=”left หรือ right หรือ center”>…</TABLE>
ตัวอย่างการใช้: <table align=”center”>…</table>
ตำแหน่งที่ใช้: ภายในแท็กเปิดของ <TABLE>
หากว่าเราต้องการจัดตำแหน่งของตารางให้อยู่กลางหน้าเว็บเพจให้เราทำตามขั้นตอนดังนี้
1.กำหนดค่าให้แอตทริบิวต์ ALIGN เป็น CENTER
กำหนดสีพื้นหลังให้ตาราง
ลักษณะของการกำหนดรูปแบบพื้นหลังให้กับตารางนั้นคล้ายคลึงกับการกำหนดรูปแบบพื้นหลังของเว็บเพจ
มากคือสามารถกำหนดได้ทั้งสีพื้นและรูปพื้นหลัง โดยการกำหนดสีพื้นนั้นกำหนดได้ด้วยแอตทริบิวต์ BGCOLOR ดังนี้
ชื่อแอตทริบิวต์ : BGCOLOR
รูปแบบ: <TABLE BGCOLOR=”ชื่อสีหรือค่าสี”>…</TABLE>
ตัวอย่างการใช้: <table bgcolor=”cyan”>…</table>
ตำแหน่งที่ใช้: ภายในแท็กเปิดของ <TABLE>
ในกรณีที่ต้องการกำหนดให้ตารางมีสีพื้นหลังเป็นสี pink เราก็สามารถทำได้ง่าย ๆ โดยกำหนดให้แอตทริบิวต์
BGCOLOR มีค่าเป็น “pink” ดังขั้นตอนด้านล่าง
1.กำหนดค่าเป็น “pink” ให้แอตทริบิวต์ BGCOLOR
การสร้างจุดเชื่อมโยง
การสร้างจุดเชื่อมโยงวิธีลิงค์ (Link) เว็บเพจเข้าด้วยกัน
สร้างจุดลิงค์ไปยังเว็บเพจอื่น
การสร้างลิงค์เชื่อมโยงไปยังหน้าต่าง ในเว็บไซต์เป็นสิ่งที่เกิดขึ้นมาพร้อมๆ กับบริการเว็บเลยทีเดียว โดยการสร้าง
จุดลิงค์นั้นคือ การใช้ <A> ดังนี้
ชื่อแท็ก: A
ชื่อแอตทริบิวต์: HREF
รูปแบบ: <a HREF=”ที่อยู่ของเว็บเพจ“> จุดลิงค์ </A>
ตัวอย่างการใช้: <a href=”product.htm”> คลิกที่นี่ !!!</a>
ตำแหน่งที่ใช้: <A> จะถูกใช้ระหว่าง <BODY>…</BODY>
การใช้งาน <A> จะต้องใช้คู่กับแอตทริบิวต์ HREF เสมอ เนื่องจากเราต้องระบุปลายทางที่จะเชื่อมโยง
ไปในกรณีที่ต้องการลิงค์ไปยังเว็บเพจที่อยู่ในเว็บไซต์เดียวกัน เราสามารถกำหนดปลายทางด้วยพาธและชื่อไฟล์ HTMLได้ทันที
ลิงค์ไปนอกเว็บไซต์
การลิงค์ไปนอกเว็บไซต์คือ การลิงค์ไปยังเว็บไซต์อื่นนั่นเอง วิธีที่ใช้จะเหมือนการสร้างจุดลิงค์ซึ่งได้ศึกษามาแล้ว ยกเว้นการ
กำหนดปลายทางซึ่งจะต้องกำหนดเป็นชื่อ URL
สร้างจุดลิงค์ไปยังเว็บไซต์อื่น
เราจะมาสร้างจุดลิงค์ไปยังเว็บไซต์ของ Google ดังนี้
1.เพิ่ม <A>
2.กำหนดค่าให้แอตทริบิวต์ HREF เป็น “http://www.google.com”
สร้างจุดลิงค์ไปยังเว็บเพจในเว็บไซต์อื่น
ในกรณีที่เราเจาะจงชื่อเว็บเพจที่เป็นปลายทางในเว็บไซต์อื่น เราก็สามารถทำได้ง่ายๆ เช่นเดียวกับการพิมพ์ชื่อ
URL ที่ระบุชื่อไฟล์ด้วยดังนี้
1.เปลี่ยนค่าที่กำหนดให้แอตทริบิวต์ HREF เป็น
”http://www.infopress2000.com/tip.html”
สร้างจุดลิงค์ไปยังส่วนย่อยของเว็บเพจ
วิธีในการลิงค์ภายในเว็บเพจเดียวกันจะแตกต่างจากทั้งสองวิธีข้างต้น โดยจะมีขั้นตอนในการกำหนด
ตำแหน่งที่เป็นปลายทางในเว็บเพจหน้านั้นๆ เพิ่มขึ้นมาโดยใช้แอตทริบิวต์อีก 1 ตัวของ <A>คือ แอตทริบิวต์ NAME
ชื่อแอตทริบิวต์: NAME
รูปแบบ: <A NAME=”ชื่อปลายทาง”> ปลายทางของลิงค์ </A>
ตัวอย่างการใช้: <a name=”address”></a>
ตำแหน่งที่ใช้: ภายในแท็กเปิดของ <A>
ต่อไปนี้คือ ตัวอย่างในการสร้างลิงค์เพื่อให้ผู้ใช้งานสามารถกระโดดข้ามเนื้อหาทั้งหมดของเว็บเพจ มายังส่วนที่เป็นชื่อ
และที่อยู่ของผู้จัดทำเว็บไซต์ที่อยู่ด้านล่างสุดของเว็บเพจได้
1.สร้างจุดปลายทางก่อนโดยกำหนดให้แอตทริบิวต์ NAME ของ <A> มีค่าเป็น address
(หรือชื่ออื่นที่ต้องการ)
2.กำหนดจุดลิงค์ตามปกติแต่เปลี่ยนการอ้างถึงปลายทางให้อยู่ในรูปแบบ “#address”
สร้างจุดลิงค์ไปยังส่วนย่อยของเว็บเพจหน้าอื่น
ไม่เพียงแต่เราจะสามารถลิงค์ไปยังส่วนย่อยของเว็บเพจหน้าเดียวกันเท่านั้น เพราะเรายังสามรถลิงค์ไปยังส่วน
ย่อยของเว็บเพจหน้าอื่นได้อีกด้วย แค่เรารู้ว่าเว็บเพจหน้านั้นได้ตั้งชื่อส่วนที่เป็นปลายทางไว้ว่าอย่างไรก็พอตัวอย่างนี้จะเป็น
การลิงค์ไปยังส่วนย่อยของเว็บเพจ “product.htm”ดยส่วนดังกล่าวได้ตั้งชื่อไว้แล้วว่า “part2”ด้วยวิธีการใช้
แอตทริบิวต์ NAME
1.กำหนดให้แอตทริบิวต์ HREF มีค่าเป็น “product.htm#part2”
ลิงค์ไปยังอีเมลแอดเดรส
ถ้าต้องการกำหนดให้ลิงค์ไปยังอีเมลแอดเดรสก็ให้กำหนดค่าแอตทริบิวต์ HREF (ปลายทางของลิงค์) ในรูปแบบ
“mailto: ชื่ออีเมลแอดเดรส”โดยมีขั้นตอนที่ต้องทำดังนี้
1.กำหนดค่าให้แอตทริบิวต์ HREF เป็น ”mailto: chodokwat@thaimail.com”
ลิงค์ไปยัง FTP Server
ทำได้โดยกำหนดชื่อ URL ให้อยู่ในรูปแบบ “ftp://ชื่อของ FTP Server”
ตามขั้นตอนต่อไปนี้
1.กำหนดค่าให้แอตทริบิวต์ HREF เป็น “ ftp://ftp.chula.ac.th”
ลิงค์ไปยัง News Server
เราสามารถกำหนดได้ง่ายๆ โดยต้องให้อยู่ในรูปแบบ “news://ชื่อของ News Server”
1.กำหนดค่าให้แอตทริบิวต์ HREF เท่ากับ “news://news.man.torun.pl”
การตกแต่งเว็บเพจ
เทคนิคและวิธีใช้รูปภาพบนเว็บ
ไฟล์รูปภาพประเภทใดบ้างที่นำมาใช้บนเว็บ
ไฟล์รูปภาพนั้นมีหลายประเภท หลายนามสกุล แต่ก็มีเพียงไม่กี่ประเภทเท่านั้นที่เราสามารถนำมา
ใช้งานบนเว็บได้ ซึ่งได้แก่ * .gif, * .jpg และ * .png ถ้าเรามีรูปภาพที่สวยถูกใจแต่ไฟล์รูปภาพ
ดังกล่าวไม่ได้อยู่ในประเภทที่นำมาใช้งานบนเว็บได้ไม่ต้องกลุ้มใจ เพราะเราสามารถนำไฟล์รูปภาพไปแปลงให้เป็นประเภท
ที่ต้องการได้ด้วยโปรแกรมกราฟิกหรือโปรแกรมสำหรับดูภาพกราฟิก GIF (Graphic Interchange Format)
ไฟล์ประเภทนี้เป็นที่นิยมใช้กันมากเนื่องจากมีขนาดไฟล์ที่เล็ก และโดยส่วนใหญ่รูปภาพบนเว็บเพจก็จะเป็น
รูปภาพที่ไม่ต้องใช้สีมากนักคือ ไม่เกิน 256 สี (8 บิต) ซึ่งไฟล์ GIF สามารถรองรับได้พอดี ตัวอย่างของรูปภาพที่
เหมาะกับไฟล์ประเภทนี้คือ รูปการ์ตูน รูปโลโก้ รูปไอคอน รูปตัวหนังสือ และรูปปุ่มต่างๆ ซึ่งสามรถเห็นได้ในเว็บไซต์
ทุกแห่ง ไฟล์ GIF มีอยู่ 2รูปแบบเรียกว่า GIF87และ GIF89a โดยไฟล์ GIFที่เราใช้กันอยู่ก็คือ GIF89a
ซึ่งมีคุณสมบัติเพิ่มขึ้นจาก GIF87 ดังนี้
Interlaced
ไฟล์ GIFใดที่มีคุณสมบัตินี้จะทำให้รูปภาพที่ปรากฏบนเว็บเพจค่อยๆ ปรากฏจากรูปภาพที่มีความ
ละเอียดต่ำจนกระทั่งได้รูปภาพที่มีความละเอียดปกติซึ่งจะช่วยให้ผู้ใช้รู้สึกว่าเวลาที่จะต้องรอให้รูปภาพปรากฏอย่างสมบูรณ์นั้น
สั้นลงและรู้สึกว่าบราวเซอร์กำลังดาวน์โหลดรูปภาพมาแสดงให้เห็นโดยที่บราวเซอร์ไม่ได้แฮ็งค์หรือการเชื่อมต่อกับอินเตอร์
เน็ตมีปัญหา แต่ข้อเสียของคุณสมบัตินี้ก็คือ จะทำให้ไฟล์ที่ได้มีขนาดใหญ่ขึ้น
Transparency
คุณสมบัตินี้จะช่วยทำให้พื้นหลังของรูปภาพไม่ปรากฏจึงมีประโยชน์มากในการแสดงรูปภาพบนเว็บเพจที่มีรูปพื้นหลังเป็นลวดลาย หรือใช้รูปภาพที่มีรูปร่างไม่ใช่สีเหลี่ยมเพื่อทำให้ผู้ใช้มองไม่เห็นขอบเขตของรูปส่งผลให้การนำรูปภาพไปตกแต่งเว็บเพจมี
ความสวยงามมากขึ้น
GIF Animation
GIF Animation ก็คือ รูปภาพที่เคลื่อนไหวได้โดยใช้วิธีเก็บรูปภาพจำนวนหนึ่งซึ่งเป็นรูปภาพ
ที่มีการกระทำต่อเนื่องกันเป็นขั้นตอนไว้ในไฟล์เดียว (เรียกว่า 1ไฟล์มีหลายเฟรม)โดยมีการกำหนดเวลาในการหมุนเวียน
กันขึ้นมาแสดงและแสดงในลักษณะวนซ้ำ JPG,JPEG (joint photographic Expert Group)
ไฟล์ JPG เป็นอีกทางเลือกหนึ่งของนักสร้างเว็บเมื่อต้องการแสดงภาพเหมือนจริงหรือภาพภายในเว็บเพจ
เนื่องจากไฟล์ JPG มีคุณสมบัติที่สามรถแสดงสีได้ถึง 16.7 ล้านสี (24 บิต)โดยมีขนาดไฟล์ไม่ใหญ่มากนัก
เนื่องจากใช้เทคนิคบีบอัดขนาดไฟล์เข้ามาช่วย ซึ่งเราก็สามารถกำหนดไว้ว่าต้องการมากน้อยแค่ไหนมีคุณภาพของไฟล์เป็น
ปัจจัยที่ต้องการพิจารณาร่วมด้วย เพราะยิ่งกำหนดให้บีบอัดมากเท่าใดคุณภาพของรูปที่ได้ก็จะลดลงเท่านั้น คุณสมบัติที่หน้า
สนใจของไฟล์ JPG ก็คือ คุณสมบัติ Progressive ซึ่งมีลักษณะการทำงานเหมือนคุณสมบัติ Interlaced
ในไฟล์ GIF
PNG( portable Network Graphics )
สำหรับไฟล์ประเภทนี้เรายังไม่ค่อยได้เห็นว่ามีการนำมาใช้งานบนเว็บเพจกันมากนัก อาจจะเป็นเพราะว่าเป็น
ไฟล์ที่เกิดขึ้นมาได้ไม่นาน ดังนั้นจึงมีปัญหากับผู้ใช้ที่ยังใช้บราวเซอร์เวอร์ชั่นเก่า ๆ อยู่ สำหรับจุดประสงค์ในการสร้างไฟล์
PNG ขึ้นมาก็คือ เพื่อนำมาใช้ทดแทนไฟล์ GIF ซึ่งมีข้อเสียตรงที่ผู้พัฒนาโปรแกรมกราฟิกจะต้องเสียค่าลิขสิทธิ์เพื่อให้
มีสิทธิ์ใช้ไฟล์ GIF ไฟล์ PNG มีคุณสมบัติ Interlaced และ Transparency เช่นเดียวกับไฟล์
GIF และยังได้รับการพัฒนาความสามารถอื่นๆ เพิ่มเติมให้เหนือกว่าไฟล์ GIF อีกด้วย เช่น สามารถแสดงสีได้มากถึง
16.7 ล้านสี (24 บิด) เช่นเดียวกับไฟล์ JPG และถ้าเราลองแปลงไฟล์จาก GIF เป็น PNG จะพบว่าบาง
ครั้งขนาดไฟล์ของรูปภาพที่ได้จะลดลงจากเดิมแต่ทั้งนี้ก็ขึ้นอยู่กับว่าเราได้เลือกใช้โปรแกรมใดในการแปลงไฟล์ด้วย จุดที่ไฟล์
PNG ด้อยกว่าไฟล์ GIF ก็มีเช่นนั้นคือ ไฟล์ PNG ไม่มีคุณสมบัติ Animation นั่นเอง
แสดงรูปภาพบนหน้าเว็บเพจ
การกำหนดให้รูปภาพปรากฏในหน้าเว็บเพจนั้นเป็นวิธีหนึ่งที่ช่วยตกแต่งให้เว็บเพจของเราดูหน้าสนใจมากขึ้น
อีกทั้งรูปภาพยังช่วยให้การนำเสนอข้อมูลที่มีเนื้อหาเกี่ยวกับการอธิบายเรื่องราวเป็นไปโดยง่ายอีกด้วย
แท็กที่ใช้สำหรับแสดงรูปภาพก็คือ <IMG> ซึ่งมีรูปแบบการใช้งานดังนี้
ชื่อแท็ก: IMG
รูปแบบ: <IMG SRC=”ชื่อไฟล์รูปภาพ”> </img>
ตัวอย่างการใช้: <img src=”office.gif”> </img>
ตำแหน่งที่ใช้: ระหว่าง <BODY>…</BODY>
1.ใช้ <IMG> เพื่อกำหนดให้แสดงรูปภาพที่ต้องการ โดยเราจะพิมพ์ <IMG>ไว้ระหว่าง<BODY>…</BODY>
2.กำหนดชื่อไฟล์รูปภาพที่ต้องการให้กับแอตทริบิวต์ SRC
การปรับแต่ง <IMG>
เราได้ทราบแล้วว่าการกำหนดให้รูปภาพปรากฏบนเว็บเพจนั้นได้ด้วย <IMG> ซึ่งมีรูปแบบการใช้ดังนี้
รูปแบบ : <IMG SRC=”ชื่อไฟล์รูปภาพ”></IMG>
ตัวอย่างการใช้ : <img src=”cat.jpg”></img>
ผลจากการกำหนดด้วยรูปแบบข้างต้นจะทำให้รูปภาพปรากฏขึ้นมาในขนาดจริง ซึ่งถ้าเราต้องการปรับแต่ง
ขนาดหรือลักษณะอื่นๆ ก็สามารถทำได้โดย
กำหนดขนาดของรูปภาพ
ความกว้างและความสูงของรูปภาพสามารถกำหนดได้ด้วยแอตทริบิวต์ WIDTH และ HEIGHT ของ <IMG> โดยถ้ากำหนดเพียงขนาดด้านใดด้านหนึ่ง ขนาดในด้านที่ไม่ได้กำหนดก็จะเพิ่มขึ้นหรือลดลงเป็นสัดส่วนกับขนาดในด้านที่กำหนด
ชื่อแอตทริบิวต์: WIDTH, HEIGHT
รูปแบบ: <IMG WIDTH=”เปอร์เซ็นต์หรือิกเซล”HEIGHT=”เปอร์เซ็นต์หรือกเซล”> </IMG>
ตัวอย่างการใช้: <img width=”90%” height=”150”></img>
ตำแหน่งที่ใช้: ภายในแท็กเปิดของ <IMG>
การกำหนดทั้งความกว้างและความสูงทำได้โดย
1.เมื่อกำหนดชื่อไฟล์รูปภาพที่ต้องการแล้วกำหนดความกว้างเป็น “75%” ของความกว้างบราวเซอร์ในขณะนั้น
2.กำหนดความสูงเป็น 100 พิกเซล
จัดตำแหน่งของรูปภาพรวมกับข้อความ
ชื่อแอตทริบิวต์: ALIGN
รูปแบบ: <IMG ALIGN=”top หรือ middle หรือ bottom หรือ
left หรือ right”></IMG>
ตัวอย่างการใช้: <img align=”left”></img>
ตำแหน่งที่ใช้: ภายในแท็กเปิดของ <IMG>
ขั้นตอนการกำหนดตำแหน่งของรูปภาพรวมกับข้อความทำได้ดังนี้
1.กำหนดให้รูปภาพอยู่ด้านซ้ายข้อขอความโดยกำหนดค่า “left” ให้แอตทริบิวต์ ALIGN
ปรับระยะห่างระหว่างรูปภาพกับข้อความ
เราสามารถกำหนดขนาดของช่องว่างระหว่างรูปภาพกับข้อความได้ทั้งแนวตั้งและแนวนอนในรูปแบบดังนี้
ชื่อแอตทริบิวต์: VSPACE ,HSPACE
รูปแบบ: <IMG VSPACE=”ระยะห่างในแนวตั้ง “HSPACE=”ระยะห่างใน
แนวนอน “></IMG>
ตัวอย่างการใช้: <img vspace=”10” hspace=”20”></img>
ตำแหน่งที่ใช้: ภายในแท็กเปิดของ <IMG>
กำหนดเส้นขอบของรูปภาพ
โดยปกติรูปภาพจะไม่มีเส้นขอบล้อมรอบ แต่ถ้าเราต้องการให้เส้นขอบปรากฏก็สามารถทำได้โดยใช้แอตทริบิวต์ BORDER
ในรูปแบบ
ชื่อแอตทริบิวต์: BORDER
รูปแบบ: <IMG BORDER=”ขนาดเป็นพิกเซล”></IMG>
ตัวอย่างการใช้: <img border=”7”></img>
ตำแหน่งที่ใช้: ภายในแท็กเปิดของ <IMG>
ถ้าต้องการให้ปรากฏเส้นขอบขนาด 7 พิกเซลล้อมรอบรูปภาพให้ทำดังนี้
1.กำหนดค่าให้แอตทริบิวต์ BORDER เท่ากับ “7”
แสดงข้อความแทนเมื่อรูปภาพไม่ปรากฏ
นอกจากรูปหรือสัญลักษณ์ที่ปรากฏขึ้นมาเองแล้วเรายังสามารถเพิ่มข้อความเข้าไปได้อีกโดยแอตทริบิวต์ ALT
ชื่อแอตทริบิวต์: ALT
รูปแบบ: <IMG ALT=”ข้อความที่ต้องการ “></IMG>
ตัวอย่างการใช้: <img alt=” ลูกสุนัขที่น่ารัก“></img>
ตำแหน่งที่ใช้: ภายในแท็กเปิดของ <IMG>
การจัดรูปแบบตัวอักษร
หลากหลายวิธีจัดการตัวอักษร
รูปแบบตัวอักษรโดยทั่ว ๆ ไป
การปรับแต่งตัวอักษรให้มีลักษณะต่างไปจากปกติโดยที่เราเป็นคนกำหนดเองว่าต้องการให้ตัวอักษรมีลักษณะใด
เพิ่มเติมขึ้นมานั้นสามารถทำได้หลากหลายรูปแบบดังต่อไปนี้
กำหนดความหนา
เราใช้ <B> เพื่อกำหนดให้ตัวอักษรมีความหนามากกว่าปกติ ซึ่งการใช้ <B> มีรูปแบบดังนี้
ชื่อแท็ก: B
รูปแบบ: <B>ตัวอักษรที่ต้องการเพิ่มความหนา</B>
ตัวอย่างการใช้: เมื่อกรอกชื่อเรียบร้อยแล้ว ให้เรา<b>คลิก</b>ที่ปุ่ม OK
ตำแหน่งที่ใช้: ระหว่าง <BODY>…</BODY>
กำหนดให้ตัวอักษรเอียง
ต่อไปนี้คือ รูปแบบการใช้งาน < I > ซึ่งเป็นแท็กที่ใช้ในการกำหนดให้ตัวอักษรเอียง
ชื่อแท็ก: I
รูปแบบ: <I>ตัวอักษรที่ต้องการกำหนดให้มีลักษณะเอียง</I>
ตัวอย่างการใช้: จะมีข้อความปรากฏขึ้นมาว่า <i>”ยินดีต้อนรับสมาชิกใหม่…”</i>
ตำแหน่งที่ใช้: ระหว่าง <BODY>…</BODY>
ขีดเส้นใต้ที่ตัวอักษร
เราสามารถเน้นข้อความหรือกำหนดหัวข้อให้เด่นได้ด้วยการขีดเส้นใต้โดยใช้ <U>
ซึ่งรูปแบบการใช้งาน <U> เป็นดังนี้
ชื่อแท็ก: U
รูปแบบ: <U> ตัวอักษรที่ต้องการขีดเส้นใต้ </U>
ตัวอย่างการใช้: กรุณาคลิกที่ปุ่ม <U> Login </U> เพื่อเข้าสู่ระบบ
ตำแหน่งที่ช้: ระหว่าง <BODY>…</BODY>
เลือกฟอนต์ให้ตัวอักษรบางกลุ่ม
เมื่อเราต้องการให้บราวเซอร์ใช้ฟอนต์ที่เรากำหนดแทนฟอนต์ที่ผู้ใช้งานเว็บเพจกำหนดไว้ในบราวเซอร์ เราสามารถ
ใช้แอตทริบิวต์ FACE ของ <FONT> ได้โดยมีรูปแบบดังนี้
ชื่อแท็ก: FONT
ชื่อแอตทริบิวต์: FACE
รูปแบบ: <FONT FACE=”ชื่อฟอนต์”>ตัวอักษร</FONT>
ตัวย่างการใช้: <font face=”freesiaUPC”>เมื่อกรอกชื่อเรียบร้อยแล้ว
ให้เราคลิกที่ปุ่ม OK </font>
ตำแหน่งที่ใช้: <FONT> จะถูกใช้ระหว่าง <BODY>…</BODY>
เลือกฟอนต์ให้ตัวอักษรเหมือนกันทั้งหน้า
จากวิธีการกำหนดของฟอนต์ที่ผ่านมา เราได้กำหนดเฉพาะตัวอักษรบางตัวที่อยู่ระหว่าง <FONT>…</FONT>
เท่านั้น ถ้าเราต้องการกำหนดให้ตัวอักษรทั้งหน้าเว็บเพจใช้ฟอนต์ชนิดเดียวกัน ถึงแม้ว่าเราจะสามารถทำได้ด้วย <FONT>
แต่จะไม่สะดวกสบายเท่ากับการกำหนดด้วย <BASEFONT> ซึ่งมีรูปแบบการใช้งานดังนี้
ชื่อแท็ก: BASEFONT
รูปแบบ: <BASEFONT>ตัวอักษร
ตัวอย่างการใช้: <basefont>เมื่อกรอกชื่อเรียบร้อยแล้ว…
ตำแหน่งที่ใช้: ระหว่าง <BODY>…</BODY>
ปรับขนาดตัวอักษร
ขนาดของตัวอักษรสามารถเปลี่ยนแปลงได้โดยวิธีให้เลือกใช้หลายวิธี แต่วิธีที่ทำให้เราสามารถกำหนดขนาด
ได้ตามต้องการโดยสามารถทำได้ทั้งการกำหนดขนาดเข้าไปได้โดยตรง และการกำหนดขนาดโดยเปรียบเทียบกับขนาด
ของตัวอักษรปกตินั้นจะเป็นการใช้แอตทริบิวต์ SIZE ของ <FONT> โดยมีรูปแบบดังนี้
ชื่อแอตทริบิวต์: SIZE
รูปแบบ: <FONT SIZE=”1-7 หรือขนาดที่เทียบกับปกติ”>ตัวอักษร</FONT>
ตัวอย่างการใช้: <font size=”5”>”ยินดีต้อนรับสมาชิกใหม่…”</font>หรือ
<font size=”+2”>”ยินดีต้อนรับสมาชิกใหม่…”</font> หรือ
<font size=”-1”>”ยินดีต้อนรับสมาชิกใหม่…”</font>
ตำแหน่งที่ใช้: ภายในแท็กเปิดของ <FONT>
โครงสร้างภาษา HTML
การเขียนภาษา HTML ด้วยโปรแกรม Notepad
โครงสร้างภาษา HTML
HTML ย่อมาจากคำว่า Hypertext Markup Language เป็นภาษาที่ใช้สำหรับ
สร้างเว็บเพจ โดยคำสั่งในภาษา HTML จะทำหน้าที่ควบคุมการแสดงผลของข้อมูลในเว็บเพจ ซึ่งเราสามารถควบคุมได้ทั้งสีสัน รูปภาพ ตลอดจนตำแหน่งของสิ่งต่าง ๆ ที่อยู่บนเว็บเพจ คำสั่งที่ใช้ควบคุมการแสดงผลใน HTMLนั้นถูกเรียกว่าแท็ก (Tag) ซึ่งมีอยู่มากมายหลายสิบชนิด แต่ละแท็กก็จะมีหน้าที่แตกต่างกันออกไป เช่น บางแท็กใช้สำหรับกำหนดแสดงรูปภาพ บางแท็กใช้สำหนับกำหนดสีฟอนต์หรือขนาดให้กับตัวอักษร การเรียนรู้ภาษา HTML จึงเป็นการเรียนรู้ที่จะใช้งานแท็กในการสร้างเว็บเพจให้ได้ดังใจนึกนั่นเอง
ลักษณะของแท็กในภาษา HTML แท็ก 1 แท็ก จะประกอบด้วยส่วนเริ่ม และส่วนปิดท้าย ซึ่งทั้งสองส่วนจะถูกเรียกว่า Tag เปิด และTag ปิด
<HTML> เรียกว่าแท็กเปิด
</HTML> เรียกว่าแท็กปิด
แท็กที่เห็นข้างต้นเรียกว่าแท็ก HTML ซึ่งชื่อของแท็กนั้นมาจากคำที่อยู่ระหว่างเครื่องหมาย < และเครื่องหมาย > โดยบรรทัดแรกคือ แท็กเปิดของ <HTML> จะสังเกตเห็นว่า แท็กปิดจะต่างจากแท็กเปิด ตรงที่มีเครื่องหมาย / เพิ่มขึ้นมาหน้าชื่อแท็ก แท็กนี้จะถูกนำมาใช้งานเสมอในเว็บเพจต่างๆ เนื่องจากเป็นแท็ก ที่ใช้สำหรับกำหนดขอบเขตของเอกสาร HTML เรียกได้ว่ามีเว็บเพจก็ต้องมี <HTML> เอกสาร HTML หรือเว็บเพจ
หน้าหนึ่ง ๆ จะถูกแบ่งออกเป็น 2 ส่วนคือ HEAD และส่วน BODY ด้วย <HEAD> และ<BODY> ตามลำดับโดย <HEAD>และ <BODY> จะอยู่ระหว่าง HTML>..</HTML> อีกทีหนึ่ง เราจะมาดูกันว่าทั้ง 2 ส่วนนี้มีหน้าที่แตกต่างกันอย่างไร
ส่วน HEAD
ได้แก่ส่วนที่อยู่ระหว่าง <HEAD>….</HEAD> ซึ่งเป็นส่วนที่ใช้สำหรับกำหนดการทำงานหรือกำหนดคุณสมบัติพิเศษบางประการของเว็บเพจ เช่น เราจะกำหนดชื่อ Title ซึ่งเป็นชื่อที่ปรากฏบน Title bar ของบราวเซอร์ที่ส่วน HEAD โดยถ้าเราไม่กำหนดอะไรในส่วนนี้เลยก็ไม่มีผลเสียหายแต่อย่างใด
ส่วน BODY
คือ ส่วนที่อยู่ระหว่าง <BODY>…… </BODY> ส่วนนี้จะเป็นที่เราจะใส่ข้อความต่าง ๆ ที่เป็นเนื้อหาของเว็บเพจเข้าไป และเรายังสามารถกำหนดคุณสมบัติพื้นฐานของเว็บเพจ เช่น รูปแบบของพื้นหลัง สีของตัวอักษรธรรมดา และตัวอักษรที่เป็นจุดลิงค์โดยใช้ <BODY>ได้อีกด้วย
กำหนดคุณสมบัติของหน้าเว็บเพจ
เว็บเพจแต่ละหน้าจะมีคุณสมบัติบางประการเฉพาะตัว ซึ่งเราสามารถสังเกตเห็นได้เมื่อเราเปิดเว็บเพจหน้านั้น ๆ และคุณสมบัติดังกล่าวก็มีทั้งที่กำหนดไว้ในส่วน HEAD และส่วน BODY โดยคุณสมบัติพื้นฐานของเว็บเพจแต่ละหน้าประกอบไปด้วย
ชื่อ Title
เมื่อเราเปิดเว็บเพจหรือเว็บไซต์แต่ละแห่งขึ้นมา จะพบว่าที่ Title bar ซึ่งเป็นส่วนที่อยู่ด้านบนสุดของบราวเซอร์จะปรากฏข้อความขึ้นมาแตกต่างกัน โดยส่วนใหญ่จะเป็นชื่อหรือคำจำกัดความของเว็บไซหรือเว็บเพจนั้น ๆ
ข้อความที่เราเห็นเกิดจากการกำหนดด้วย <TITLE> ซึ่งมีรูปแบบการใช้งานดังนี้
ชื่อแท็ก: TITLE
รูปแบบ: <TITLE>ชื่อ TITLE</TITLE>
ตัวอย่างการใช้: <TITLE> ยินดีต้อนรับสู่……บทเรียน TITLE>
ตำแหน่งที่ใช้: ระหว่าง <HEAD>….</HEAD>
ตั้งชื่อ TITLE ให้เว็บเพจ
เมื่อราต้องการกำหนดชื่อ TITLE ให้กับเว็บเพจ เราสามารถทำได้ง่าย ๆ โดย
1. หลังจากเปิดโปรแกรม Notepad ขึ้นมา พิมพ์ <HTML>, <HEAD> และ<BODY>เข้าไปแล้วก็ให้เราเพิ่ม
<TITLE> เข้าไประหว่าง<HEAD>…</HEAD>
2. พิมพ์ชื่อ TITLE ที่ต้องการเข้าไประหว่าง<TITLE>…</TITLE>
3. เมื่อบันทึกไฟล์เรียบร้อย ให้เราเปิดไฟล์ดังกล่าวขึ้นมาด้วยบราวเซอร์ จะเห็นชื่อ TITLE ปรากฏที่ Title bar
4. เปิดโค้ด HTML ที่ทำให้ปรากฏชื่อ Title โดยคลิกขวาที่พื้นที่แสดงผลของบราวเซอร์
5. คลิกคำสั่ง View Source
6. โค้ดที่ทำให้ปรากฏชื่อ Title คือ <title> ยินดีต้อนรับสู่……บทเรียน </title>
ข้อควรจำ
ในการกำหนดชื่อ Title แม้เราจะไม่สามารถทำให้ชื่อสะดุดตาด้วยการทำให้ตัวอักษรมีลักษณะหนา เอียง หรือถูกขีดเส้นใต้ได้
แต่เราก็สามารถทำให้ชื่อสะดุดตาได้ด้วยการจัดเรียงตัวอักษรให้แปลกไปกว่าปกติดังนี้
<title> ยิ น ดี ต้ อ น รั บ สู่ . . . . . บ ท เ รี ย น </title>
หลังจากที่เราแก้ไขข้อความที่อยู่ระหว่าง <TITLE>….</TITLE> เรียบร้อยแล้วเมื่อเปิดดูบราวเซอร์จะเห็นผลเป็
ทำอย่างไรเมื่อไม่ต้องการตั้งชื่อ Title
การไม่กำหนดชื่อ Title ก็คือ การไม่ใช้ <TITLE> หรือใช้แต่ไม่กำหนดข้อความใด ๆ ระหว่าง <TITLE> เราสามารถเลือกที่จะ
ไม่กำหนดชื่อ Title ได้ โดยที่ไม่ก่อให้เกิดผลกระทบกับเว็บเพจแต่อย่างใด ( ถ้าไม่ได้นำเว็บเพจไปลงทะเบียนกับ Search Engine)
วิธีการทำนั้นมีขั้นตอนดังนี้
1. ไม่ต้องใช้ <TITLE> โดยลบ <TITLE> ออกไป หรือถ้าเป็นเอกสาร HTML ที่สร้างขึ้นมาใหม่ก็ไม่ต้องพิมพ์ <TITLE>
เข้าไประหว่าง <HEAD>…..</HEAD>
2. หลังจากที่แก้ไขเสร็จ และเปิดไฟล์ที่ได้แก้ไขขึ้นมาด้วยบราวเซอร์ (ต้องบันทึกไฟล์ก่อน) จะพบว่าที่ Title bar ได้ปรากฏ
พาธและชื่อไฟล์ HTML ขึ้นมาแทน โดยพาธก็คือ เส้นทางสู่ที่อยู่ของเว็บเพจหรือไดเร็คทอรีที่จะต้องผ่านเมื่อต้องการจะ
เปิดเว็บเพจนั่นเอง
ตั้งชื่อ TITLE ให้เว็บเพจ
เมื่อราต้องการกำหนดชื่อ TITLE ให้กับเว็บเพจ เราสามารถทำได้ง่าย ๆ โดย
1. หลังจากเปิดโปรแกรม Notepad ขึ้นมา พิมพ์ <HTML>, <HEAD> และ<BODY>เข้าไปแล้วก็ให้เราเพิ่ม
<TITLE> เข้าไประหว่าง<HEAD>…</HEAD>
2. พิมพ์ชื่อ TITLE ที่ต้องการเข้าไประหว่าง<TITLE>…</TITLE>
3. เมื่อบันทึกไฟล์เรียบร้อย ให้เราเปิดไฟล์ดังกล่าวขึ้นมาด้วยบราวเซอร์ จะเห็นชื่อ TITLE ปรากฏที่ Title bar
4. เปิดโค้ด HTML ที่ทำให้ปรากฏชื่อ Title โดยคลิกขวาที่พื้นที่แสดงผลของบราวเซอร์
5. คลิกคำสั่ง View Source
6. โค้ดที่ทำให้ปรากฏชื่อ Title คือ <title> ยินดีต้อนรับสู่……บทเรียน </title>
ข้อควรจำ
ในการกำหนดชื่อ Title แม้เราจะไม่สามารถทำให้ชื่อสะดุดตาด้วยการทำให้ตัวอักษรมีลักษณะหนา เอียง หรือถูกขีดเส้นใต้ได้
แต่เราก็สามารถทำให้ชื่อสะดุดตาได้ด้วยการจัดเรียงตัวอักษรให้แปลกไปกว่าปกติดังนี้
<title> ยิ น ดี ต้ อ น รั บ สู่ . . . . . บ ท เ รี ย น </title>
ทำอย่างไรเมื่อไม่ต้องการตั้งชื่อ Title
การไม่กำหนดชื่อ Title ก็คือ การไม่ใช้ <TITLE> หรือใช้แต่ไม่กำหนดข้อความใด ๆ ระหว่าง <TITLE> เราสามารถเลือกที่จะไม่กำหนดชื่อ Title ได้ โดยที่ไม่ก่อให้เกิดผลกระทบกับเว็บเพจแต่อย่างใด ( ถ้าไม่ได้นำเว็บเพจไปลงทะเบียนกับ Search Engine) วิธีการทำนั้นมีขั้นตอนดังนี้
1. ไม่ต้องใช้ <TITLE> โดยลบ <TITLE> ออกไป หรือถ้าเป็นเอกสาร HTML ที่สร้างขึ้นมาใหม่ก็ไม่ต้องพิมพ์ <TITLE> เข้าไประหว่าง <HEAD>…..</HEAD>
2. หลังจากที่แก้ไขเสร็จ และเปิดไฟล์ที่ได้แก้ไขขึ้นมาด้วยบราวเซอร์ (ต้องบันทึกไฟล์ก่อน) จะพบว่าที่ Title bar ได้ปรากฏ
พาธและชื่อไฟล์ HTML ขึ้นมาแทน โดยพาธก็คือ เส้นทางสู่ที่อยู่ของเว็บเพจหรือไดเร็คทอรีที่จะต้องผ่านเมื่อต้องการจะเปิดเว็บเพจนั่นเอง
แอตทริบิวต์คืออะไร
แอตทริบิวต์ (Attribute) ของแท็กคือ รูปแบบหรือลักษณะที่กำหนดเข้าไปในแท็กนั้น ๆ โดยจะกำหนดหรือไม่ก็ได้ ขึ้นอยู่กับรูปแบบการใช้งานของแต่ละแท็ก ตัวอย่าง เช่น แอตทริบิวต์ BGCOLOR ซึ่งใช้กำหนดเพิ่มขึ้นไปใน <BODY>เพื่อเปลื่ยนสีพื้นหลังของเว็บเพจ <body bgcolor= “black”>….</body>
ปกติการใช้แอตทริบิวต์จะเกิดผลโดยตรงกับข้อความที่ถูกแท็กนั้นกำหนด แต่บางครั้งก็จะเกิดผลกับเว็บเพจหน้านั้น เช่น แอตทริบิวต์ต่าง ๆ ของ <BODY>
วิธีการใช้แอตทริบิวต์ (Attribute)
หลักในการใช้งานแอตทริบิวต์ของแท็กต่าง ๆ นั้นทำได้ด้วยการใส่ชื่อแอตทริบิวต์ไว้หลังชื่อแท็กในแท็กเปิด โดยจะต้องเว้นช่องว่างระหว่างชื่อแท็ก และชื่อแอตทริบิวต์ด้วยและถ้าหากว่ามีการใช้แอตทรบิวต์ของแท็กนั้นหลายตัว เราก้ต้องเว้นช่องว่างระหว่างแอตทริบิวต์แต่ละตัวด้วยเช่นกันดังตัวอย่าง
รูปแบบ: <ชื่อแท็ก แอตทริบิวต์ตัวที่หนึ่ง แอตทริบิวต์ตัวที่สอง…>…</ชื่อแท็ก>
ตัวอย่างการใช้: <body bgcolor=”black” background=”16h.gif”>…</body>
แบบทดสอบก่อนเรียนเ หลังเรียนรื่องการสร้างตาราง
แบบทดสอบก่อนเรียน หลังเรียนรื่องการสร้างตาราง
1. โครงสร้างของตารางโดยทั่วไปจะประกอบไปด้วยอะไรบ้าง
ก. แถว และ ข้อความ
ข. แถว และ คอลัมน์
ค. คอลัมน์ และข้อความ
ง. คอลัมน์ และ ดัชนี
2. คำสั่งในข้อใดเป็นคำสั่งเปิดและปิดในการสร้างตาราง
ก. คำสั่ง <Table> และคำสั่ง </Table>
ข. คำสั่ง <Caption> และคำสั่ง </Caption>
ค. คำสั่ง <Tr> และคำสั่ง </Tr>
ง. คำสั่ง <Td> และคำสั่ง </Td>
3. คำสั่งใดที่ใช้สำหรับกำหนดช่องข้อมูลที่ทำหน้าที่เป็นหัวเรื่องของคอลัมน์
ก. คำสั่ง <Tr>
ข. คำสั่ง <Td>
ค. คำสั่ง <Th>
ง. คำสั่ง <Table>
4. คำสั่งในข้อใดเป็นการกำหนดข้อมูลคอลัมน์ในตาราง
ก. คำสั่ง <Tr>
ข. คำสั่ง <Td>
ค. คำสั่ง <Th>
ง. คำสั่ง <Table>
5. การกำหนดเส้นขอบของตารางใช้คำสั่งใดเป็นตัวกำหนด
ก. คำสั่ง HR
ข. คำสั่ง BR
ค. คำสั่ง Border
ง. ถูกทั้งข้อ ก. และข้อ ข.
6. ข้อใดเป็นการกำหนดไม่ให้มีเส้นขอบของตาราง
ก. <Table Hr= 0>
ข. <Table Br= 0>
ค. <Table Border = 0>
ง. <Table Border = no>
7. คำสั่ง Bordercolor เป็นคำสั่งในข้อใด
ก. กำหนดสีขอบของพื้นตาราง
ข. กำหนดสีของเส้นขอบตาราง
ค. การเพิ่มสีของตัวอักษรภายในตาราง
ง. การทำลวดลายของเส้นขอบตาราง
8. คำสั่ง Cellpadding เป็นคำสั่งในข้อใด
ก. กำหนดให้มีการเว้นระยะขอบของเส้นขอบตาราง
ข. กำหนดให้มีการเว้นระยะขอบภายในเซลข้อมูล
ค. กำหนดให้มีการเว้นระยะของตัวอักษรในแต่ละเซล
ง. กำหนดให้มีการเว้นช่องว่างของแถวและคอลัมน์
9. ในการกำหนดให้ตารางอยู่กึ่งกลางของจอภาพต้องใช้คำสั่งในข้อใด
ก. <Table> Align=Middle </Table>
ข. <Table> Align=Center </Table>
ค. <Table Align=Middle> </Table>
ง . <Table Align=Center> </Table>
10. การกำหนดสีพื้นของตารางใช้คำสั่งในข้อใด
ก. คำสั่ง Backgroundcolor
ข. คำสั่ง Bordercolor
ค. คำสั่ง Bgcolor
ง. ถูกทั้งข้อ ก และข้อ ค
แบบทดสอบ เรื่อง การตกแต่งเว็บเพจด้วยรูปภาพ
แบบทดสอบก่อนเรียน หลังเรียนเรื่อง การตกแต่งเว็บเพจด้วยรูปภาพ
1. แฟ้มข้อมูลรูปภาพในข้อใด นิยมใช้ประกอบในการสร้างเว็บเพจ
ก. .JPEG
ข. .GIF
ค. .BMP
ง. ถูกทั้งข้อ ก และ ข้อ ข
2. ข้อใดไม่ใช่ไฟล์ข้อมูลรูปภาพ
ก. Sample.jpg
ข. Computer.gif
ค. Mouse.bmp
ง. printer.html
3. ข้อใดเป็นคำสั่งที่ใช้สำหรับแทรกรูปภาพในเอกสารเว็บ
ก. <img src=”computer.gif”>
ข. <src=”computer.gif”>
ค. <img src> “computer.gif” </src>
ง. <img src> computer.gif </img>
4. ข้อใดคือคำสั่งของการกำหนดข้อความอธิบายรูป
ก. คำสั่ง Lowsrc
ข. คำสั่ง Align
ค. คำสั่ง Alt
ง. คำสั่ง Border
5. คำสั่งใดเป็นการกำหนดแฟ้มข้อมูลรูปภาพ โดยแสดงผลให้มีความละเอียดต่ำด้วย
ก. <IMG src=”computer.gif” alt=”notebook.gif”>
ข. <IMG src=”computer.gif” lowsrc=”notebook.gif”>
ค. <IMG src=”computer.gif” align=”notebook.gif”>
ง. <IMG alt=”notebook.gif”>
6. หากต้องการแสดงผลข้อความให้อยู่ระดับกึ่งกลางของรูปภาพ จะต้องใช้คำสั่งตรงกับข้อใด
ก. <IMG src=”plam.jpg” align=”center”>
ข. <IMG src=”plam.jpg” align=”top”>
ค. <IMG src=”plam.jpg” align=”half”>
ง. <IMG src=”plam.jpg” align=”middle”>
7. หากต้องการกำหนดความสูงของรูปภาพที่แสดงผลในเอกสารให้มีความสูง 200 พิกเซล จะต้องใช้งานคำสั่งตรงกับข้อใด
ก. <IMG src=”plam.jpg” width=”200”>
ข. <IMG src=”plam.jpg” height=”200”>
ค. <IMG src=”plam.jpg” border=”200”>
ง. <IMG src=”plam.jpg” align=”200”>
8. ข้อใดเป็นการกำหนดไม่ให้มีกรอบรูปภาพ
ก. <IMG src=”computer.gif” Border=0>
ข. <IMG src=”computer.gif” Border=no>
ค. <IMG src=”computer.gif” frame=0>
ง. <IMG src=”computer.gif” frame=no>
9. คำสั่งในข้อใด คือคำสั่งสำหรับกำหนดพื้นหลังของเอกสารเว็บให้เป็นรูปภาพได้ถูกต้อง
ก. <Html Background=”bg1.jpg”>
ข. <Title Background=”bg1.jpg”>
ค. <Body Background=”bg1.jpg”>
ง. <Img Background=”bg1.jpg”>
10. ในการกำหนดพื้นหลังของเอกสารเว็บให้เป็นรูปภาพ หากไม่ต้องการให้พื้นหลังเลื่อนตามการเลื่อนแถบเลื่อนทางแนวตั้ง (Vertical Scrollbar) ต้องกำหนดใช้คำสั่ง <BODY> ตรงกับข้อใด
ก. <Body Background=”bg1.jpg”Noresize>
ข. <Body Background=”bg1.jpg” Page=Fixed>
ค. <Body Background=”bg1.jpg bgsize=Fixed>
ง. <Body Background=”bg1.jpg” Bgproperties=Fixed>
สมัครสมาชิก:
บทความ (Atom)