โครงสร้างของภาษา HTML
HTML คืออะไร
HTML (Hyper Text Markup Language) เป็นภาษามาตรฐานสากลที่ใช้นำเสนอข้อมูลแบบผสมผสานในการสื่อสารแบบ World-Wide-Web :WWW ( Web) ซึ่งเป็นการเชื่อมต่อเครือข่ายของเครื่องคอมพิวเตอร์ทั่วโลก (Internet) รูปแบบหนึ่ง ข้อมูลในรูปแบบต่างๆ ไม่ว่าจะเป็นข้อความ รูปภาพ เสียง ภาพเคลื่อนไหว หรือ อื่นๆ จะถูกเชื่อมโยงเข้าหากัน ด้วยชุดคำสั่งต่างๆ เพื่อให้แสดงผลออกมาคล้ายกับ สิ่งพิมพ์ สไลด์ หรือ แบบมัลติมีเดีย
องค์ประกอบของภาษา HTML |
เอกสาร html จะมีองค์ประกอบหลักๆ อยู่ 2 ส่วน คือ
· ข้อความที่ต้องการให้แสดงบนจอภาพ
· ข้อความที่เป็นคำสั่ง
โดยคำสั่งในเอกสาร html นี้จะเรียกว่า แท็ก (Tag) โดยแท็กจะต้องขึ้นต้นด้วย < ตามด้วย ชื่อแท็ก ปิดท้ายด้วย > ดังนี้<Tag name>ซึ่งจะเรียกว่า แท็กเปิดแล้วจะต้องปิดท้ายข้อความด้วยแท็กปิด ซึ่งจะมีลักษณะดังนี้ </Tag name>เรามาดูรูปแบบเต็ม ๆ กัน
<Tag name> ข้อความที่ต้องการให้แสดง </Tag name> |
ชื่อแท็กต่างๆ สามารถพิมพ์ตัวใหญ่หรือตัวเล็กก็ได้ความหมายเหมือนกัน
โครงสร้างของภาษา HTML |
โครงสร้างของภาษา html จะประกอบด้วย 2 ส่วนด้วยกัน คือส่วนที่เป็นส่วนหัว (head) และส่วนเนื้อหา (body) โดยมีรูปแบบภาษาดังนี้
<html> <head> <title>ข้อความที่ต้องการให้แสดงบนไตเติ้ลบาร์ </title> </head> <body> คำสั่งและข้อความให้แสดงบน browser </body> </html> |
บล็อก <html> ... </html> |
เป็นบล็อกแรกที่จะต้องมีในเอกสาร และจะครอบคลุมบล็อกต่างๆ คือ เอกสาร html ทุกเอกสารจะต้องขึ้นต้นด้วย <html> และ ปิดท้ายด้วย </html> แต่ละ file และบล็อกอื่นๆ จะถูกเขียนอยู่ในบล็อกนี้ โดยจะมีบล็อกหลักๆ อยู่ 2 บล็อกก็คือ บล็อก head และ body
บล็อก <head> ... </head> |
เป็นส่วนหัวเรื่องของเอกสาร ภายในจำเป็นจะมี บล็อก <title>... </title> ซึ่งจะเป็นแท็กผู้เขียน html นั้นใช้ตั้งเป็นไตเติ้ลสำหรับบอกโดยรวมว่าเอกสารนั้นต้องการเสนออะไร แล้วเวลาที่จะ bookmark ชื่อที่จะ save คือชื่อที่อยู่ใน บล็อก title นี้ ชื่อไตเติ้ลนี้จะต้องมีความยาวไม่เกิน 64 ตัวอักษร
บล็อก <body> ... </body> |
เป็นบล็อกที่บรรจุข้อมูลต่างๆ ที่ต้องการให้แสดงบน browser ไม่ว่าจะเป็น ข้อความ รูป ตาราง หรือแท็กที่ใช้ในการกำหนดรูปแบบของเอกสาร
comment (หมายเหตุ) |
หลังจากที่ทำการเขียนโปรแกรมไปสักระยะหนึ่ง เราหรือเพื่อนอาจจะนำโปรแกรมที่เขียนขึ้นมานั้นไปพัฒนาต่อ ซึ่งอาจจะลืมเนื้อหาสาระสำคัญแล้วทำให้ดำเนินการเขียนต่อไม่ได้ จึงต้องมีการเขียน comment เพื่อช่วยเตือนความทรงจำได้
สำหรับคำสั่ง comment จะใช้ <! เป็นแท็กเปิด และใช้ > เป็นแท็กปิดข้อความที่อยู่ระหว่าง <!...> จะไม่ถูกแสดงบน เว็บบราวเซอร์
หลักการเขียนภาษา HTML แบบง่ายๆ
1. จัดให้คำสั่งเปิดและปิดในแต่ละชุดคำสั่งอยู่ใน column ตรงกัน
2. ข้อความที่ไม่ยาวมาก ถ้ามีคำสั่งเปิดและปิด ให้เขียนในบรรทัดเดียวกัน
3. คำสั่งที่มีตัวเปิดและปิด ให้เขียนตัวเปิด/ปิดให้เรียบร้อยก่อนที่จะเขียนข้อความลงไป
เช่น ต้องการเขียน"โฮมเพจของข้าพเจ้า My Homepage"ก็ควรเริ่มด้วย
เช่น ต้องการเขียน"โฮมเพจของข้าพเจ้า My Homepage"ก็ควรเริ่มด้วย
<H2> </H2>
<H2><B> </B></H2>
<H2><B>โฮมเพจของข้าพเจ้า My Homepage</B></H2>
วิธีการนี้จะช่วยให้ลดความผิดพลาดลงได้มาก
4. ข้อความที่อยู่ในคำสั่งเปิดและปิด ให้พิมพ์เยื้องไปทางขวา
5. คำสั่งใดที่อยู่ในคำสั่งเปิดและปิดของคำสั่งอื่น ให้พิมพ์เยื้องไปทางขวามากกว่าเดิมอีก เล็กน้อย
การกำหนดสี |
การกำหนดสีให้พื้นฉากหลัง background
การกำหนดสีของแบ๊คกราวด์ เราจะมีการเพิ่มคำว่า bgcolor = #รหัสสี เข้าไปในแท็ก <body> ดังนี้
การกำหนดสีของแบ๊คกราวด์ เราจะมีการเพิ่มคำว่า bgcolor = #รหัสสี เข้าไปในแท็ก <body> ดังนี้
<body bgcolor = #รหัสสี> |
โดยรหัสสีจะมีรูปแบบเป็นเลข 6 หลัก แต่ละหลักแทนด้วยเลขฐาน16 (0-9,A-F) โดยที่เลข 2 หลักแรกแทนค่า สีแดง สองหลักต่อมาแทนค่า สีเขียว สองหลักสุดท้ายแทนค่า สีน้ำเงิน เรามีตัวอย่างรหัสสีมาให้ดู ส่วนสีอื่นๆ ดูได้
สี | รหัสสี |
แดง | #FF0000 |
เขียว | #00FF00 |
น้ำเงิน | #0000FF |
ขาว | #FFFFFF |
ดำ | #000000 |
เทา | #BBBBBB |
การกำหนดสีให้กับตัวอักษร
ถ้า ต้องการที่จะกำหนดสีให้กับตัวอักษรทั้งเอกสาร เราจะเพิ่ม Text = #รหัสสี ไว้ในแท็ก body ดังนี้
ถ้า ต้องการที่จะกำหนดสีให้กับตัวอักษรทั้งเอกสาร เราจะเพิ่ม Text = #รหัสสี ไว้ในแท็ก body ดังนี้
<body Text = #รหัสสี> |
แต่ถ้าต้องการมีการกำหนดสีของ background อยู่ด้วย เขียนดังนี้
<body bgcolor = #รหัสสี text = #รหัสสี> |
แต่ถ้าต้องการกำหนดสีเพื่อที่จะเน้นข้อความบางข้อความให้แตกต่างจากข้อความอื่น จะมีรูปแบบดังนี้
<font color = #รหัสสี>ข้อความ</font> |
การกำหนดขนาดของตัวอักษร สามารถทำได้เช่นกัน รูปแบบดังนี้
<font size = ตัวเลข>ข้อความ </font>
ตัวเลขจะมีค่าจาก –7 ถึง 7 จากขนาดเล็กไปขนาดใหญ่ ค่ามาตรฐาน คือ +3
เช่น <FONT FACE="-JS Wansika"><FONT SIZE=+3><FONT COLOR="#FF0000">ข้อความ</FONT></FONT></FONT>
หมายเหตุ ถ้าไปดูเว็บไหนแล้วชอบใจเห็นมีลูกเล่นแปลกๆ ... อยากรู้ว่าเขาเขียนยังไง ลองดู source code ของ web นั้นดูได้ โดยที่เมนูของเบราเซอร์คลิกที่ View แล้วไปที่ Source หรือ Page source หรือ Document Source เบราเซอร์ จะแสดง source code ซึ่งก็คือ html ของเอกสารนั้น ลองดู แล้วก็เอามาศึกษาดูว่าถ้าจะเขียนแบบนั้นจะทำได้ยังไง |
การใส่รูปภาพ |
ในการนำรูปภาพมาใส่ในเวบนั้น เป็นวิธีหนึ่งที่จะทำให้ โฮมเพจของเราดูน่าสนใจยิ่งขึ้น แต่ว่าถ้ามีมากไปก็ไม่ไหว เพราะว่ามันจะทำให้โหลดช้าขึ้น คงจะไม่ทันใจสำหรับพวกใจร้อนทั้งหลาย สำหรับแท็กที่ใช้แทรกรูปภาพ จะมีรูปแบบดังนี้
<img src = ชื่อ file รูปภาพ width = ตัวเลข height = ตัวเลข > |
width = ตัวเลข : ตัวเลขในที่นี้หมายถึง ความกว้างของภาพ
height = ตัวเลข : ตัวเลขในที่นี้หมายถึง ความสูงของภาพ
แต่ไม่จำเป็นต้องระบุก็ได้เมื่อไม่ต้องการขยาย หรือย่อภาพนั้น คงจะเคยเห็น เมื่อเราเข้าไปบาง web ในขณะที่เรากำลังรอ load ภาพอยู่นั้น จะมีตัวหนังสืออยู่ตรงบริเวณภาพนั้น เพื่อบอกว่าภาพนั้นเป็นภาพอะไร เราก็ทำได้ เพียงแต่แทรก attribute นี้เข้าไป
height = ตัวเลข : ตัวเลขในที่นี้หมายถึง ความสูงของภาพ
แต่ไม่จำเป็นต้องระบุก็ได้เมื่อไม่ต้องการขยาย หรือย่อภาพนั้น คงจะเคยเห็น เมื่อเราเข้าไปบาง web ในขณะที่เรากำลังรอ load ภาพอยู่นั้น จะมีตัวหนังสืออยู่ตรงบริเวณภาพนั้น เพื่อบอกว่าภาพนั้นเป็นภาพอะไร เราก็ทำได้ เพียงแต่แทรก attribute นี้เข้าไป
alt = "ข้อความ" |
เช่น <IMG SRC="New.JPG" HEIGHT=120 WIDTH=102>
ต่อไปเรามาดูกันว่าเราจะเอารูปภาพมาเป็น background ได้ยังไง
การเอารูปภาพมาทำ background |
โดยแทรก attribute นี้เข้าไปที่ tag body
background=file รูปภาพ |
เช่น < body BACKGROUND="dao.gif">
เมื่อมี background รูปภาพแล้ว ก็น่าจะมี background เสียงด้วย
การเอาเพลง |
ถ้าเพื่อนๆ อยากให้มีตัว play กับ ตัว stop อยู่ที่ตรงไหนใน web ก็แทรก tag นี้เข้าไปได้เลย
<embed src=ชื่อ file เพลง autostart=true volum=10 height=25 width=100 controls=smallconsole></embed> |
เมื่อแทรกแท็กนี้เข้าไปใน page ไหน เมื่อเปิด page นั้นมา ก็จะได้ยินเพลงเลยถ้าอยากจะหยุดเพลงก็เพียงกดที่ตัว stop จะทำให้หยุดเสียง
เช่น <EMBED SRC="com9.mid" AUTOSTART="TRUE" HEIGHT="46" WIDTH="130"></EMBED>
การกำหนดขนาดของตัวอักษร |
การกำหนดขนาดของตัวอักษรหัวเรื่อง ¨ <Hn>...</Hn> ใช้กำหนดขนาดของหัวเรื่องมีอยู่ 6 ระดับ คือ H1,H2,H3,H4,H5 และ H6 โดยจะเรียงจากขนาดใหญ่ไปหาเล็ก |
การกำหนดขนาดของตัวอักษร¨ <FONT SIZE = n>...</FONT> ใช้กำหนดขนาดตัวอักษรคล้ายกับ <Hn> แต่ สามารถใช้คำสั่งนี้ เขียนอักษรหลายขนาด อยู่ในบรรทัดเดียวกันได้ โดย n แทนตัวเลขตั้งแต่ n = 1-7 โดยจะเรียงจากขนาดเล็กไปหาใหญ่ โดยทั่วไปหากไม่กำหนดขนาด ตัวอักษรจะมีค่า size=3 หรือ 12 pixel บางครั้งเราจะพบการกำหนดค่า <FONT SIZE = -n> หรือ <FONT SIZE = +n> |
¨ หากกำหนดค่าเป็น + หมายถึงเพิ่มขนาดขึ้น n ขั้น เมื่อเทียบกับขนาดที่ผู้ใช้กำหนดไว้ เช่น เมื่อผู้ใช้กำหนด MS Sans Serif ขนาด 12 pixel <FONT SIZE = +2> จะเท่ากับ size=5 (18 pixel) เมื่อผู้ใช้กำหนด AngsanaUPC ขนาด 18 pixel เมื่อผู้ใช้กำหนด MS Sans Serif ขนาด 12 pixel |
¨ หากกำหนดค่าเป็น + หมายถึงเพิ่มขนาดขึ้น n ขั้น เมื่อเทียบกับขนาดที่ผู้ใช้กำหนดไว้ เช่น เมื่อผู้ใช้กำหนด MS Sans Serif ขนาด 12 pixel <FONT SIZE = +2> จะเท่ากับ size=5 (18 pixel) เมื่อผู้ใช้กำหนด AngsanaUPC ขนาด 18 pixel <FONT SIZE = +2> จะเท่ากับ size=7 (36 pixel) |
การกำหนดชนิดของตัวอักษร |
รูปแบบ :<FONT FACE= ชื่อของ font SIZE=n>...</FONT>
การกำหนดชนิดและ ขนาดของตัวอักษรจะทำให้ผู้อ่านได้เห็นเว็บเพจ ในลักษณะที่ใกล้เคียงกับผู้เขียนต้องการมากที่สุด ทำให้ได้รับอรรถรสที่ผู้เขียนต้องการสื่อมากที่สุด โดยทั่วไปการกำหนดชนิดตัวอักษร อาจทำได้ครั้งละหลายชนิดโดย Browser จะไปหา ชนิดตัวอักษรที่เป็นชื่อแรกก่อน ต่อเมื่อไม่พบจึงจะไปหาตัวที่สอง สาม ต่อไปเรื่อยๆ หากไม่พบก็จะใช้ชนิดตัวอักษรที่ผู้อ่านกำหนดไว้แทน
ชนิดตัวอักษรที่กำหนดควรจะเป็นชนิดที่ผู้เขียนต้องการแสดง หรือเป็นชนิดที่ใช้กันอย่างแพร่หลาย สำหรับการกำหนดตัวอักษรไทยมักจะเป็นปัญหาเนื่องจาก ตัวอักษรไทยส่วนใหญ่มีขนาดความสูงน้อยกว่า ตัวอักษรภาษาอังกฤษ หากกำหนดขนาดใหญ่มักจะทำให้มองเห็นตัวอักษรภาษาอังกฤษ ใหญ่เกินไป
ชนิดตัวอักษรที่มักจะใช้กันก็คือ
· AngsanaUPC,CordiaUPC หรือ ชนิดตัวอักษร ที่ลงท้ายด้วยUPCตัวอื่น ขนาด 14 หรือ 18 pixel (size=4 หรือ 5)
· DB ThaiText ขนาด 14 หรือ 18 pixel (size=4 หรือ 5)
· MS Sans Serif ขนาด 10 หรือ 12 pixel (size=2 หรือ 3)
รูปแบบที่แนะนำ
· <FONT FACE= "MS Sans Serif" SIZE=-1>...</FONT>
· <FONT FACE= "CordiaUPC ,MS
· <FONT FACE= "Thonburi ,MS
รูปแบบตัวอักษร |
รูปแบบตัวอักษรแบบ Physical Style
· <B>...</B> สั่งให้แสดงตัวอักษรแบบหนา
· <I>...</I> สั่งให้แสดงตัวอักษรเอน
· <U>...</U> ช่วยเน้นข้อความด้วยการขีดเส้นใต้
· <TT>...</TT>สั่งให้แสดงตัวอักษรแบบตัวพิมพ์ดีด(มีความกว้างของแต่ละตัวอักษรเท่ากันหมด)
· <SUP>...</SUP>สั่งให้แสดงตัวอักษรยก(superscript)
· <SUB>...</SUB>สั่งให้แสดงตัวอักษรแบบห้อย(subscript)
รูปแบบตัวอักษรแบบ Logical Style ที่ใช้กันบ่อยๆ เช่น
n <ADDRESS>...</ADDRESS> กำหนดให้เป็นตัวอักษรเอน มักใช้กับที่อยู่
n <CITE>...</CITE>สั่งให้แสดงตัวอักษรเอน ในการอ้างอิง
n <VAR>...</VAR>สั่งให้แสดงตัวอักษรเอน ระบุตัวแปร
n <CODE>...</CODE>สั่งให้แสดงตัวอักษรแบบ monospace ในการเขียนรหัสโปรแกรม
n <SAMPLE>...</SAMPLE>สั่งให้แสดงตัวอักษรแบบ monospace ในการเขียนตัวอย่าง
n <STRONG>...</STRONG>สั่งให้แสดงตัวอักษรตัวเข้มมีค่าเหมือนกับ <B>...</B>
n <BLINK>...</BLINK>สั่งให้แสดงตัวอักษรกระพริบ (ใช้ได้เฉพาะกับ Netscape Navigator)
n <MARQUEE>...</MARQUEE>สั่งให้แสดงตัวอักษรวิ่ง (ใช้ได้เฉพาะกับ Internet Explorer)
รูปแบบตัวอักษรแบบ พิเศษ ใช้เมื่อเราต้องการ ให้แสดงสัญลักษณ์ที่เราต้องการซึ่งไม่สามารถใช้แป้นพิมพ์โดยตรงได้ ออกมาบนหน้าจอ
ตัวอักษร | เขียนแทนด้วย |
< > & " | < > & " |
คำสั่งจัดการเกี่ยวกับสี |
เราสามารถกำหนดค่าสีได้ 2 แบบ คือ 1. สี="#xxxxxx" ระบุเป็นเลขฐาน 16 (0-9 หรือ A-F โดย 0 มีค่าสีน้อยที่สุด และ F มีค่าสีมากที่สุด) ทั้งหมด 3 ชุด 1 ชุดแทนด้วยตัวอักษร 2 ตัว แสดงค่าของแม่สี แดง เขียว นํ้าเงิน (RGB)โดยเขียนตามหลังเครื่องหมาย # เช่น"#FFFFFF" จะให้ สีขาว ,"#000000" จะให้ สีดำ 2. สี=color ระบุสีลงไปเลย เช่น white,black,blue,red การประยุกต์ใช้ o ระบุสีของพื้นหลัง BGCOLOR = สี ใช้แทรกไว้ที่ <BODY> เพื่อกำหนดสีพื้นของ page | |
<BODY BGCOLOR = สี> ... </BODY> | |
ใช้แทรกไว้ที่ <TABLE> เพื่อกำหนดสีพื้นของ ตาราง | |
<TABLE BGCOLOR = สี> ... </TABLE> | |
ใช้แทรกไว้ที่ <TD> เพื่อกำหนดสีของ cell | |
<TD BGCOLOR = สี>...</TD> | |
o ระบุสีของวัตถุ COLOR = สี ใช้ในการกำหนดสี ให้กับตัวอักษร | |
<FONT COLOR = สี>...</FONT> | |
เทคนิคการจัดการรูปภาพ | |
รูปแบบ : <IMG SRC = "ไฟล์รูปภาพ" ALT = "ข้อความ"> · ALT ใช้แสดงข้อความแทนรูปสำหรับผู้ใช้ internet แบบ Text mode · LOWSRC ใช้แสดงรูปที่มีความละเอียดน้อย ก่อนแสดงรูปจริง · ALIGN วางตำแหน่งของรูปภาพ n ALIGN=TOP วางส่วนบนของรูปภาพ ไว้ที่ baseline ของบรรทัด n ALIGN=LEFT วางตำแหน่งของรูปภาพ ไว้ที่ด้านซ้ายของเอกสาร n ALIGN=RIGHT วางตำแหน่งของรูปภาพ ไว้ที่ด้านขวาของเอกสาร n ALIGN=ABSMIDDLE วางส่วนกลางของรูปภาพ ไว้ที่กลางบรรทัดของข้อความ n ALIGN=MIDDLE วางส่วนกลางของรูปภาพ ไว้ที baseline ของบรรทัด n ALIGN=BOTTOM วางส่วนล่างของรูปภาพ ไว้ที่ baseline ของบรรทัด n ALIGN=ABSBOTTOM วางส่วนของรูปภาพ ไว้ที่ baseline ของบรรทัด แต่ถ้ามี subscript จะวางไว้ระดับนั้น ซึ่งต่ำกว่า bottom · WIDTH กำหนดความกว้างของรูปภาพ · HEIGHT กำหนดความสูงของรูปภาพ · BORDER แสดงเส้นขอบรูป · VSPACE กำหนดระยะห่างทางด้านบน,ล่าง · HSPACE กำหนดระยะห่างทางด้านซ้าย,ขวา <BODY BACKGROUND = "ไฟล์รูป"> ใช้แสดงภาพที่ฉากหลัง (background) <IMG DYNSRC = "ไฟล์ภาพเคลื่อนไหว" LOOP=เวลา(วินาที)"> ใช้แสดงภาพเคลื่อนไหว( file *.avi) |
เทคนิคการเชื่อมโยงข้อมูลบนโฮมเพจ |
การเชื่อมโยงข้อมูล สามารถกำหนดขึ้นด้วยชุดคำสั่ง A (anchor) โดยที่ ชุดคำสั่ง A จะต้องใช้ร่วมกับ HREF หรือ NAME เสมอ มีรูปแบบการใช้คือ o <A HREF="xxx"> จะใช้เพื่อบอกว่าจะเชื่อมต่อไปที่ไหน o <A NAME="xxx"> ทำหน้าที่เป็นตำแหน่งอ้างถึงบนเอกสาร โครงสร้างของ HTML จะเป็นดังนี้ |
<A HREF=เป้าหมายที่จะไป> สิ่งที่จะถูกกำหนด ให้เป็น link</A> |
หรือองค์ประกอบเพิ่มเติมคุณสมบัติมีได้ ดังนี้ : รายละเอียดของคำสั่ง: 1. สิ่งที่อยู่ระหว่างชุดคำสั่ง<A HREF>...</A>คือสิ่งที่จะถูกกำหนด ให้เป็น link ซึ่งเป็นได้ทั้งข้อความ และรูปภาพ หากมีการระบุให้เป็น linkแล้ว เมื่อนำเมาส์ไปวางไว้ บน link นั้น สัญลักษณ์เมาส์ จะเปลี่ยน เป็นรูปมือชี้ หากจุด link เป็นข้อความ ก็จะเห็น ข้อความ มีขีดเส้นใต้ด้วย o หากใช้ข้อความ จะมีรูปแบบ คือ <A HREF=เป้าหมายที่จะไป>ข้อความ</A> o หากใช้รูปภาพ เป็นตัวเชื่อมโยงข้อมูล จะมีรูปแบบ คือ <A HREF = "เป้าหมาย"><IMG SRC = "ไฟล์ภาพ"></A> 2. การเชื่อมโยงข้อมูล มีอยู่ 2 ชนิดคือ 2.1 การเชื่อมโยงแบบสัมพัทธ์ (Relative URL) ใช้เชื่อมโยงข้อมูลบน เวบไซต์เดียวกัน หรือบน server เดียวกัน o <A HREF = "filename">...</A> ใช้สำหรับ Link ไปที่ filename นั้น ถ้า file อยู่ใน directory เดียวกันสามารถเขียนชื่อ file นั้นได้เลย แต่ถ้า อยู่คนละ directory ก็ใช้ / แทน การอ้างอิง directory ในระดับที่สูงกว่า และ ../ แทนระดับที่ต่ำกว่า เช่น <A HREF = "../test.html">TEST</A> หมายถึง Link ไฟล์ test.html ซึ่งไฟล์นี้อยู่ใน directory ที่ตำกว่า directory ปัจจุบัน o <A HREF = #เป้าหมาย>...</A> ใช้สำหรับ Link ข้อความ ที่อยู่บนเว็บเพจเดียวกัน ใช้สำหรับเพจที่ยาวๆ เมื่อ click link แล้วก็จะพาไปยังตำแหน่งที่ตั้งไว้ใน เพจเดียวกันทันที ใช้ <A NAME = ชื่อเป้าหมาย>...</A> เป็นตัวกำหนดตำแหน่ง เป้าหมาย o <A HREF = "filename#เป้าหมาย">...</A>ใช้สำหรับ Link ข้อความ ที่อยู่คนละหน้ากัน 2.2 การเชื่อมโยงแบบสัมบูรณ์ (Absolute URL) ใช้เชื่อมโยงข้อมูลที่อยู่ต่างไซต์กัน มีรูปแบบได้หลายอย่างดังนี้ · <A HREF="http://....">แบบนี้จะเชื่อมโยงไปยังเว็บเพจต่างๆ ตามที่ระบุ · <A HREF="ftp://....">แบบนี้จะเชื่อมโยงไปยัง FTPserver โดยทั่วไปมักจะเป็นจุดดาวน์โหลดไฟล์ต่างๆ หากเป็น FTP site ที่เป็นสาธารณะ ก็จะเข้าไปดูหรือเลือกไฟล์ได้เลย แต่ถ้าเป็น Private FTP site จะต้องระบุ username และ password ด้วย รูปแบบของ URL จะเปลี่ยนเป็นดังนี้ <HREF="ftp://username:password@domainname/dir1/dir2/ filename"> · <A HREF="gopher://....">แบบนี้จะเชื่อมโยงไปยัง gopher server · <A HREF="news://....">แบบนี้จะเชื่อมโยงไปยัง news server · <A HREF="mailto:yourname@domainname">แบบนี้จะโหลดโปรแกรม email และระบุชื่อผู้รับ mail ตามที่ระบุ 3. TARGET คือการระบุว่าจะให้แสดงเอกสารใหม่ที่เชื่อมถึง บนเฟรมไหน หรือ หน้าต่างไหน TARGET มีประโยชน์ ในกรณี ที่มีการใช้เฟรม หรือมี การเปิด browser หลายหน้าต่าง และมี reserve name ที่ควรรู้ดังนี้ · TARGET="_blank"หมายถึงจะแสดงเว็บเพจบนหน้าต่างที่เปิดขึ้นมาใหม่เสมอ · TARGET="_self"หมายถึงจะแสดงเว็บเพจบนหน้าต่างเดิมเสมอ · TARGET="_parent"หมายถึงจะแสดงเว็บเพจบนหน้าต่างที่อยู่ระดับเหนือขึ้นไปหนึ่งระดับ · TARGET="_top"หมายถึงจะแสดงเว็บเพจบนหน้าต่างที่อยู่ระดับบนสุด มีรูปแบบการใช้คือ |
<A HREF="URLเป้าหมาย" NAME="ชื่อ link" TARGET="ชื่อเฟรม/วินโดว์">สิ่งที่จะถูกกำหนด ให้เป็น link</A> |
เทคนิคเพิ่มเติมเกี่ยวกับการเชื่อมโยงข้อมูล เขียน option นี้ไว้ระหว่าง <BODY> <BODY LINK = color VLINK = color ALINK = color> LINK = color ใช้เพื่อกำหนดสีให้กับ ตัวเชื่อมโยงข้อมูลที่ยังไม่เคยไปดู VLINK = color ใช้เพื่อกำหนดสีตัวเชื่อมโยงข้อมูลที่เคยไปดูมาแล้ว ALINK = color ใช้เพื่อกำหนดสีของตัวเชื่อมโยง ขณะเลือก |
การเรียงลำดับรายการ (Lists) |
1. การเรียงลำดับรายการด้วยสัญลักษณ์ ใช้ชุดคำสั่ง <UL> <LI>รายการ <LI>รายการ <LI>รายการ </UL>อาจจะใช้ <UL TYPE=สัญลักษณ์ ></UL>เพื่อให้เกิดความหลากหลาย สัญลักษณ์ที่ใช้ ได้แก่ CIRCLE, SQUARE หรือ DISKเพื่อหลีกเลี่ยงปัญหาแสดงสัญลักษณ์ ซึ่งค่าปกติคือ DISK ผิดเพี้ยนไปเป็น ตัว ท ทหาร ใน Netscape 3.xx จึงควรระบุให้ใช้ CIRCLE ไปเลย 2. การเรียงลำดับรายการด้วยตัวเลข ใช้ชุดคำสั่ง <OL> <LI>รายการ <LI>รายการ <LI>รายการ </OL>อาจจะใช้ <OL TYPE=ตัวเลข หรือตัวอักษร ></OL>เพื่อให้เกิดความหลากหลาย ตัวเลข หรือตัวอักษรที่ใช้ ได้แก่ 1 , i ,I ,A หรือ a o อาจจะใช้ <OL START=ตัวเลข หรือตัวอักษรอื่นๆที่ไม่ใช่ค่าแรก> เช่น เริ่มที่ 3 หรือ d o อาจจะใช้ <LI VALUE=ตัวเลข หรือตัวอักษรอื่นๆที่ต้องการระบุ> ในกรณีที่ไม่อยากให้เรียงตามลำดับปกติ เป็นที่น่าเสียดายว่า ไม่สามารถใช้ ตัวเลข หรือตัวอักษรไทยนำหน้ารายการได้ 3. การเรียงลำดับรายการแบบเมนู ใช้ชุดคำสั่ง <MENU> ..........</MENU>มีผลเช่นเดียวกับ การเรียงลำดับรายการด้วยสัญลักษณ์ แต่จำกัดความยาวไม่เกิน 1 บรรทัดในแต่ละรายการ 4. การเรียงลำดับรายการแบบ DIRECTORYใช้ชุดคำสั่ง <DIR> ..........</DIR>มีผลเช่นเดียวกับ การเรียงลำดับรายการด้วยสัญลักษณ์ แต่จำกัดความยาวไม่เกิน 24 ตัวอักษรในแต่ละรายการ 5. การเรียงลำดับรายการแบบ นิยาม ใช้ชุดคำสั่ง <DL> <DT>คำศัพท์ <DD>ความหมาย </DL>บางครั้งอาจทำให้ข้อความกระชับขึ้นโดยใช้ <DL COMPACT> <DT>คำศัพท์ <DD>ความหมาย </DL> |
เทคนิคการสร้างตาราง |
<TABLE>...</TABLE> เป็นการคำสั่งการสร้างตาราง การแสดงรายการในตารางจะใช้คำสั่ง o <CAPTION ...> ... </CAPTION> ใช้ระบุชื่อหรือคำอธิบายของตาราง อาจมีส่วนขยาย ALIGN=TOP หรือ BOTTOM เพื่อวางตำแหน่งไว้เหนือหรือใต้ต่อตัวตาราง o <TR>...</TR> จัดการส่วนของแถว o <TD>...</TD> จัดการในส่วนของคอลัมน์ o <TH>...</TH> เป็นการเน้นตัวอักษรเข้มให้ตัวอักษรในช่องตารางที่กำหนด |
ส่วนขยายของชุดคำสั่งตาราง
ชุดคำสั่งต่างๆที่ใช้ในเอกสาร HTML มักจะมีส่วนขยาย เพื่อเพิ่มคุณสมบัติของชุดคำสั่งนั้นๆ สำหรับชุดคำสั่งตารางมีส่วนขยายที่ควรรู้ ดังนี้
ชุดคำสั่ง TABLE มีส่วนขยายที่สำคัญ ดังนี้ | |
BGCOLOR | ใช้สำหรับกำหนดสีพื้นตาราง [bgcolor = รหัสสี] ถ้าไม่กำหนดสีพื้นไว้ browser จะใช้ สีเดียวกับสีพื้นของเอกสาร |
BORDER | สำหรับกำหนดขนาดของเส้นรอบนอกของตาราง [border = ค่าตัวเลข] ค่าตัวเลขคือความหนาของเส้น ปกติมีค่า = 0 หมายถึงไม่เห็นเส้น ตารางที่เห็นนี้ กำหนด border=10 |
WIDTH | ใช้สำหรับกำหนดความกว้างของตาราง [width = ค่าตัวเลข หรือเปอร์เซนต์] หน่วยตัวเลขเป็น pixel หรือเปอร์เซนต์ของความกว้างที่มี ตารางที่เห็นนี้กำหนด width=600 |
HEIGHT | ใช้สำหรับกำหนดความสูงของตาราง [height = ค่าตัวเลข หรือเปอร์เซนต์] หน่วยเป็น pixel หรือเปอร์เซนต์ของความสูงที่มี |
CELLSPACING | สำหรับกำหนดขนาดของเส้นภายในของตาราง [cellspacing = ค่าตัวเลข] ค่าตัวเลขคือความหนาของเส้นหน่วยเป็นพิกเซล ตารางที่เห็นนี้กำหนด cellspacing=5 |
CELLPADDING | ใช้สำหรับกำหนดช่องว่าง(margin)ของแต่ละช่องตารางรอบข้อความ [cellpadding = ค่าตัวเลข] หน่วยเป็น pixel |
ชุดคำสั่ง TR สำหรับกำหนดแถวในตาราง มีส่วนขยายที่สำคัญ ดังนี้ | |
BGCOLOR | ใช้สำหรับกำหนดสีพื้นของแถวนั้นทั้งแถว [bgcolor = รหัสสี] |
ALIGN | ใช้สำหรับกำหนดชิดซ้าย ตรงกลาง หรือชิดขวาของทั้งแถว [align = left,center,right] แถวที่เห็นนี้กำหนด align = right ถ้าไม่มีการกำหนดจะชิดซ้ายเสมอ |
VALIGN | ใช้สำหรับกำหนดชิดบน ตรงกลาง ชิดล่าง หรือชิดแนวหลักของทั้งแถว [valign = top,middle,bottom,baseline] แถวนี้กำหนด valign=bottom ถ้าไม่มีการกำหนดจะจัดกึ่งกลางเสมอ |
ชุดคำสั่ง TD สำหรับกำหนดช่องตารางในแต่ละแถว มีส่วนขยายที่สำคัญ ดังนี้ | |
BGCOLOR | ใช้สำหรับกำหนดสีพื้นของช่องตาราง(เฉพาะช่องที่กำหนด) [bgcolor = รหัสสี]ถ้าไม่กำหนดสีพื้นไว้ browser จะใช้ สีเดียวกับสีพื้นของเอกสาร |
ALIGN | ใช้กำหนดการชิดซ้าย กึ่งกลาง หรือชิดขวา มีผลเฉพาะช่องตารางที่กำหนด |
VALIGN | ใช้กำหนดชิดบน กึ่งกลาง ชิดล่าง หรือตามแนวหลัก มีผลเฉพาะช่องตารางที่กำหนด |
WIDTH | ใช้กำหนดความกว้างของช่องตารางนั้น [width = ค่าตัวเลข] หน่วยเป็น pixel(*ระวัง! อย่ากำหนดเป็นเปอร์เซนต์ เพราะ IE จะใช้การกำหนดเป็น pixel เท่านั้น) |
ROWSPAN = n | [rowspan = ค่าตัวเลข] ตามที่เห็นนี้ช่องแรกกำหนด rowspan=2 |
COLSPAN = n : ด้วยการใช้ colspan=2 ทำให้แถวที่เห็นนี้ มีช่องตารางเดียว แต่ขยายเท่ากับสองช่อง | |
COLSTART = n : ใช้เพื่อระบุตำแหน่งช่องตารางร่วมกับคำสั่ง COLSPAN เมื่อ n คือคอลัมน์ที่ต้องการวางข้อความหรือรูปภาพ | |
ข้อควรจำ : การเขียนภาษาไทยในตาราง จะต้องกำหนดชุดคำสั่ง <FONT FACE = ตัวอักษรไทย> ..... </FONT> ในทุกๆช่องตาราง TD การเขียนชุดคำสั่ง Font คล่อมตารางทั้งตาราง ทำไม่ได้ | |
นอกจากนี้แล้วเรายังใช้คำสั่ง<CENTER>...</CENTER> จัดตารางให้อยู่กึ่งกลางหน้าต่างได้ด้วย
เทคนิคการสร้างเฟรมแบ่งพื้นที่หน้าต่าง |
<FRAMESET>...</FRAMESET>ใช้เขียนแทน <BODY>...</BODY> เพื่อแบ่งเฟรม <FRAME></FRAME>จะใช้เรียกไฟล์ HTML ขึ้นมาทำงาน ในแต่ละเฟรมที่ แบ่งเอาไว้ <NOFRAME></NOFRAME>ใช้สื่อสารกับ browser ที่ไม่สนับสนุนการใช้คำสั่ง frame |
ส่วนขยายของชุดคำสั่งเฟรม
ชุดคำสั่ง FRAMESET มีส่วนขยาย ดังนี้ | ||
COLS | การแบ่งเฟรมตามแนวตั้ง [cols=ชุดตัวเลข] ชุดตัวเลข อาจเป็นจำนวน pixel หรือเลขเปอร์เซนต์ หรือเครื่องหมายดอกจันทร์(*) หรือผสมกันก็ได้ โดยคั่นแต่ละตัวเลขด้วยเครื่องหมายจุลภาค(,) เช่น 30%,120,* จะเท่ากับการแบ่งเฟรมตามแนวตั้งสามเฟรม จำนวนเฟรมที่แบ่งได้ จะเท่ากับจำนวนเครื่องหมายจุลภาค + 1 | |
ROWS | การแบ่งเฟรมตามแนวนอน [rows=ชุดตัวเลข] เงื่อนไขการใช้เหมือนกับส่วนขยาย COLS ต่างกันเพียงเป็นการแบ่งตามแนวนอนเท่านั้น | |
BORDER | ความกว้างของเส้นขอบเฟรม [border=ตัวเลข] ส่วนขยายนี้ให้สำหรับ Netscape โดยค่าตัวเลข 0 เท่ากับไม่มีเส้นขอบ ค่าปกติ คือ 1 | |
FRAMEBORDER | เส้นขอบเฟรม [frameborder=yes/no] ส่วนขยายนี้ใช้สำหรับ IE no=ไม่ต้องการเส้นขอบเฟรมค่าปกติ คือ yes | |
BORDERCOLOR | สีของขอบเฟรม [bordercolor="#ค่าของสี"] ส่วนขยายนี้ช่วยทำให้เราตกแต่งสีของขอบเฟรมได้ | |
ชุดคำสั่ง FRAME มีส่วนขยายที่ควรรู้ ดังนี้ | ||
NAME | การกำหนดชื่อเฟรม [name=ชื่อสมมุติ] ส่วนขยายนี้ จะช่วยให้เรากำหนดชื่อสมมุติเพื่ออ้างอิงในการทำลิงค์หรืออื่นๆ หากไม่มีการกำหนดไว้ เฟรมจะถูกอ้างถึงด้วยชื่อ frame[0] – frame[..] โดยตัวเลขจะเริ่มจาก 0 และไล่เรียงลำดับจากซ้ายไปขวา และจากบนไปล่าง | |
SRC | ระบุชื่อไฟล์ที่จะถูกแสดงบนเฟรมนี้ [src=ชื่อไฟล์html] ส่วนขยายนี้จะต้องมีการกำหนดไว้เสมอ | |
MARGINHEIGHT | เอาไว้สำหรับกำหนดความสูง ของขอบเฟรม | |
MARGINWIDTH | เอาไว้สำหรับกำหนดความกว้าง ของขอบเฟรม | |
NORESIZE | โดยทั่วไป เฟรมที่สร้างขึ้นจะถูกเปลี่ยนขนาดได้ โดยใช้เมาส์คลิกแล้วลาก หากไม่ต้องการให้เปลี่ยนขนาดได้ ต้องเพิ่มส่วนขยาย noresize ลงไป | |
SCROLLING | กำหนดแถบสโครลบาร์ [scrolling=yes/no/auto] เลือกได้สามแบบ มี, ไม่มี, หรือมีเมื่อจำเป็น ค่าปกติ คือ auto | |
<frameset cols="20%,80%"> | ||
จากตัวอย่างนี้หมายความว่า เฟรมแบ่งตามแนวตั้งแบ่งเป็น 2 เฟรม โดยเฟรมแรกซึ่งเป็นเฟรมที่อยู่ด้านซ้าย มีขนาด 20% ของจอภาพและเฟรมที่ 2 ซึ่งอยู่ทางด้านขวา มีขนาด 80% ของจอภาพ
<frameset rows="*,*,*"> |
เป็นการแบ่งเฟรมตามแนวนอน 3 เฟรมโดยแต่ละเฟรมมีขนาดเท่ากัน
<frameset cols="120,*"> |
แบ่งเฟรมตามแนวตั้ง โดยเฟรมแรกซึ่งเป็นเฟรมที่อยู่ด้านซ้ายมีขนาด 120 พิกเซล ส่วนเฟรมที่สอง จะมีขนาดกว้างตามส่วนที่เหลือของจอภาพ
<frameset rows="*,2*"> |
แบ่งเฟรมตามแนวนอน โดยเฟรมล่างมีขนาดเป็น 2 เท่า ของเฟรมบน
<html> <frameset cols =”30,70”> <frame src=”ชื่อไฟล์ html ที่ต้องการให้แสดงในเฟรมหรือ URL”> <frame src=”ชื่อไฟล์ html ที่ต้องการให้แสดงในเฟรมหรือ URL”> </frameset> </html> |
การใช้ชุดคำสั่ง Form |
การใช้ชุดคำสั่ง Form (<FORM>..</FORM>)
รูปแบบ:
<FORM METHOD=... ACTION=... ENCTYPE=...>
...
<INPUT TYPE=SUBMIT VALUE="ส่งข้อความ">
<INPUT TYPE=RESET VALUE="แก้ไขใหม่">
</FORM>
...
<INPUT TYPE=SUBMIT VALUE="ส่งข้อความ">
<INPUT TYPE=RESET VALUE="แก้ไขใหม่">
</FORM>
องค์ประกอบในคำสั่งเปิด
· METHOD หมายถึง วิธีส่งข้อมูลมี 2 แบบ คือ GET หรือ POST
· ACTION หมายถึง ขบวนการส่งผ่านข้อมูล มี 2 แบบ คือ
· mailto:username@domain (ใช้ได้เฉพาะ Browser ตระกูล Netscape)
· ผ่าน CGI ไปยัง file ที่เตรียมไว้ โดยระบุ path บน server คือ .../cgi-bin/*.*
· ENCTYPE หมายถึง การเข้ารหัสข้อมูล มี 2 แบบเช่นกัน คือ
· application/x-www-form-urlenccoded หรือ อาจใช้ text/plain ซึ่งจะแปลง ข้อมูล(รวมทั้งช่องว่าง)เป็นตัวอักษรติดกันตลอด ใช้คู่กับ ACTION แบบ mailto:
· multipart/form-data ซึ่งจะส่งไปโดยแบ่งเป็นหลายๆส่วน แต่ไม่แปลงข้อมูล
องค์ประกอบภายในชุดคำสั่ง
· INPUT มี ส่วนขยายองค์ประกอบภายในชุดคำสั่งดังนี้
· TYPE=... ให้ระบุชนิดของข้อมูล
· TEXT กรอกคำ หรือวลี ชื่อ-สกุล เป็นข้อความแบบบรรทัดเดียว
<input type=text size=n1 name=fieldname maxiliength=n2 value="message">
Size | เป็น attribute ที่กำหนดขนาดของช่องว่างในการรับข้อความ |
n1 | เป็น เลขจำนวนเต็มของจำนวนตัวอักษรของกรอบการรับข้อความ |
Name | เป็น attribute ที่กำหนดชื่อของข้อมูลที่ใช้เก็บข้อมูล |
Fieldname | เป็น ชื่อฟิลด์ที่ใช้เก็บข้อมูลแต่ละรายการ |
Maxlength | เป็น attribute ที่กำหนดความยาวสูงสุดของข้อมูลที่รับมา |
n2 | เป็นเลขจำนวนเต็มของความยาวสูงสุดที่ต้องการกำหนด |
Value | เป็น attribute ที่กำหนดค่างที่ต้องการไว้แล้ว ซึ่งหากผู้ใช้ไม่ได้ป้อนค่า ใดๆ เข้ามาจะได้ค่าที่กำหนดไว้เป็นค่าปกติ (Default) |
Message | ข้อความที่กำหนดให้เป็นค่าปกติ |
· PASSWORD กรอกรหัสผ่าน
รูปบบที่รับข้อมูลคล้าย text แต่จะแสดงเป็นตัว * เมื่อเวลาจะรับข้อมูลที่เป็น รหัสผ่านต่างๆ มีรูปแบบการใช้งาน และ attribute ดังนี้
<input type=password size=n1 name=fieldname maxiliength=n2 |
· RADIO ให้เลือกเพียง หนึ่งในรายการทั้งหมด
รูปแบบการรับข้อมูลที่กำหนดทางเลือกไว้ให้ผู้ใช้เลือกทางใดทางหนึ่ง มีรูปแบบการใช้งานและ attribute ดังนี้
<input type=RADIO name=fieldname value="message" CHECKED> |
Name | เป็น attribute ที่กำหนดชื่อของข้อมูลที่ใช้เก็บข้อมูล |
Fieldname | เป็นชื่อฟิลด์ที่ใช้เก็บข้อมูลแต่ละรายการ หากรายการเลือกอยู่ในกลุ่มเดียวกันจะใช้ชื่อฟิลด์เดียวกัน |
Value | เป็นแอ็ททริบิวต์ที่กำหนดใช้กับแต่ละรายการใช้ผู้ใช้เลือก |
Message | เป็นค่าของรายการเลือกที่ถูกเลือก ค่าที่ได้จะเก็บไว้ในชื่อฟิลด์ที่ตั้งไว้ |
CHECKED | เป็นแอ็ททริบิวต์ที่กำหนดให้โปรแกรมบราวเซอร์ ใช้ค่าในรายการนั้นเป็นค่าปกติ จะมีได้เพียงรายการเดียวในแต่ละกลุ่มรายการ |
<B>เพศ</B>
<INPUT TYPE="RADIO" NAME="sex" VALUE="Male" checked>ชาย
<INPUT TYPE="RADIO" NAME="sex" VALUE="Female">หญิง
· CHECKBOX ให้เลือกได้หลายรายการ
รูปแบบการรับข้อมูลที่ให้ผู้ใช้เลือกตัวเลือกได้มากกว่า 1 รายการ
<input type=checkbox name=fieldname value="message"> |
· SUBMIT ปุ่มส่งข้อความ
รูปแบบการรับข้อมูลทั้งหมดในแบบฟอร์มโดยโปรแกรมบราวเซอร์จะสร้างปุ่มให้เอง ใช้เมื่อต้องการส่งข้อมูลออกไป
<input type=submit value="message"> |
· RESET ปุ่มยกเลิก หรือลบข้อมูลที่กรอกไปแล้วแต่ต้องการแก้ไข
รูปแบบการลบข้อมูลทั้งหมดในแบบฟอร์ม
<input type=reset value="message"> |
· BUTTON ปุ่มพิเศษ มีหน้าที่ตามที่เราจะมอบหมายให้
· NAME=... ใช้ระบุชื่อของข้อมูล มีประโยชน์ในกรณีที่มีข้อมูลหลายๆชุด
· VALUE=... ใช้ระบุค่าที่ต้องการส่งให้ประมวลผล
· TEXT AREA(<TEXTAREA>...</TEXTAREA>) กรอกข้อความหลายบรรทัด
เป็นแท็กที่ใช้สร้างรูปแบบข้อมูลนำเข้าที่ต้องการเป็นคำอธิบายหรือคำแนะนำข้อมูลต่าง ๆ ที่ต้องการ ให้ผู้ใช้ป้อนเข้ามา มีรูปแบบแท็กดังนี้
<textarea name=fieldname rows=n cols=m>ข้อความ</textarea> |
<B>คำแนะนำ</B><BR>
<TEXTAREA NAME="comment" ROWS=10 COLS=35></TEXTAREA>
· SELECTION (<SELECT>...</SELECT>) ให้เลือก หนึ่งในรายการทั้งหมดซึ่งมักจะมีมากกว่าใน RADIO
ลักษณะของข้อมูลที่สื่อสาร | คำสั่ง | ส่วนขยายที่ใช้ |
ให้กรอกข้อความ | INPUT | TYPE = TEXT |
TYPE = PASSWORD | ||
TEXTAREA | ||
ให้เลือกจากตัวเลือกที่กำหนดไว้ | INPUT | TYPE = RADIO |
TYPE = CHECKBOX | ||
SELECT | ||
ปุ่มกด | INPUT | TYPE = SUBMIT |
TYPE = RESET | ||
TYPE = BUTTON |
Image Map |
image map คือ การทำให้ภาพภาพเดียว สามารถที่จะ link ไปได้หลายที่ เช่น มีภาพแผนที่โลกอยู่ 1 ภาพ เมื่อเราคลิ๊กที่บริเวณทวีป Asia มันก็จะ link ไปยังรายละเอียดของทวีปเอเซีย ถ้าคลิ๊กไปที่ทวีปยุโรป มันก็จะ link ไปยังรายละเอียดของทวีปยุโรป เป็นต้น ซึ่งเราจะทำได้โดยกำหนดจุด co-ordinate ณ ตำแหน่งต่างๆ ของภาพ โดยด้านซ้ายบนสุดของภาพ จะกำหนดให้เป็นตำแหน่ง 0,0 การสร้าง image map ด้วยวิธีนี้ เราจะเรียกว่า CSIM (Client Side Image Map)
แท็กในการทำ Image Map |
แท็กที่ใช้กำหนด image map มีดังนี้
<img src="ชื่อไฟล์รูปภาพ" usemap="#ชื่อของการmap(เพื่อเรียกใช้)"> <map name="ชื่อของการmap"> <area shape ="รูปทรงของพื้นที่1" coords="พิกัดของพื้นที่1" href="ที่ที่เราต้องการlinkไป"> <area shape ="รูปทรงของพื้นที่2" coords="พิกัดของพื้นที่2" href="ที่ที่เราต้องการlinkไป"> ...... </map> |
รูปทรงของพื้นที่จะมีอยู่ 4 ลักษณะ
circle = วงกลม
point = จุด
polygon = หลายเหลี่ยม
rectangle = สี่เหลี่ยม
circle = วงกลม
point = จุด
polygon = หลายเหลี่ยม
rectangle = สี่เหลี่ยม
พิกัดของพื้นที่แต่ละรูปทรงจะเป็นดังนี้
circle= x1,y1,r1
point = x1,y1
ploygon = x1,y1,x2,y2, ... , xn , yn (รูป n เหลี่ยม)
rectangle = x1,y1,x2,y2
circle= x1,y1,r1
point = x1,y1
ploygon = x1,y1,x2,y2, ... , xn , yn (รูป n เหลี่ยม)
rectangle = x1,y1,x2,y2
ตัวอย่าง
<html> <body> <img src="map.gif" usemap="#sample"></center> <map name="sample"> <area shape="rectangle" coords="0,0,100,30" href="http://www.hunsa.com"> <area shape="rectangle" coords="100,0,200,30" href="http://www.pantip.com"> <area shape="rectangle" coords="200,0,300,30" href="http://www.sanook.com"> </map> </body> </html> |
