โครงสร้างของภาษา HTML
HTML คืออะไร
HTML (Hyper Text Markup Language) เป็นภาษามาตรฐานสากลที่ใช้นำเสนอข้อมูลแบบผสมผสานในการสื่อสารแบบ World-Wide-Web :WWW ( Web) ซึ่งเป็นการเชื่อมต่อเครือข่ายของเครื่องคอมพิวเตอร์ทั่วโลก (Internet) รูปแบบหนึ่ง ข้อมูลในรูปแบบต่างๆ ไม่ว่าจะเป็นข้อความ รูปภาพ เสียง ภาพเคลื่อนไหว หรือ อื่นๆ จะถูกเชื่อมโยงเข้าหากัน ด้วยชุดคำสั่งต่างๆ เพื่อให้แสดงผลออกมาคล้ายกับ สิ่งพิมพ์ สไลด์ หรือ แบบมัลติมีเดีย
เอกสาร html จะมีองค์ประกอบหลักๆ อยู่ 2 ส่วน คือ
· ข้อความที่ต้องการให้แสดงบนจอภาพ
· ข้อความที่เป็นคำสั่ง
โดยคำสั่งในเอกสาร html นี้จะเรียกว่า แท็ก (Tag) โดยแท็กจะต้องขึ้นต้นด้วย < ตามด้วย ชื่อแท็ก ปิดท้ายด้วย > ดังนี้<Tag name>ซึ่งจะเรียกว่า แท็กเปิดแล้วจะต้องปิดท้ายข้อความด้วยแท็กปิด ซึ่งจะมีลักษณะดังนี้ </Tag name>เรามาดูรูปแบบเต็ม ๆ กัน
<Tag name> ข้อความที่ต้องการให้แสดง</Tag name>
|
ชื่อแท็กต่างๆ สามารถพิมพ์ตัวใหญ่หรือตัวเล็กก็ได้ความหมายเหมือนกัน
โครงสร้างของภาษา html จะประกอบด้วย 2 ส่วนด้วยกัน คือส่วนที่เป็นส่วนหัว (head)และส่วนเนื้อหา (body) โดยมีรูปแบบภาษาดังนี้
<html>
<head>
<title>ข้อความที่ต้องการให้แสดงบนไตเติ้ลบาร์ </title>
</head>
<body>
คำสั่งและข้อความให้แสดงบน browser
</body>
</html>
|
เป็นบล็อกแรกที่จะต้องมีในเอกสาร และจะครอบคลุมบล็อกต่างๆ คือ เอกสาร html ทุกเอกสารจะต้องขึ้นต้นด้วย <html> และ ปิดท้ายด้วย </html> แต่ละ file และบล็อกอื่นๆ จะถูกเขียนอยู่ในบล็อกนี้ โดยจะมีบล็อกหลักๆ อยู่ 2 บล็อกก็คือ บล็อก head และbody
เป็นส่วนหัวเรื่องของเอกสาร ภายในจำเป็นจะมี บล็อก <title>... </title> ซึ่งจะเป็นแท็กผู้เขียน html นั้นใช้ตั้งเป็นไตเติ้ลสำหรับบอกโดยรวมว่าเอกสารนั้นต้องการเสนออะไร แล้วเวลาที่จะ bookmark ชื่อที่จะ save คือชื่อที่อยู่ใน บล็อก title นี้ ชื่อไตเติ้ลนี้จะต้องมีความยาวไม่เกิน 64 ตัวอักษร
เป็นบล็อกที่บรรจุข้อมูลต่างๆ ที่ต้องการให้แสดงบน browser ไม่ว่าจะเป็น ข้อความ รูป ตาราง หรือแท็กที่ใช้ในการกำหนดรูปแบบของเอกสาร
หลังจากที่ทำการเขียนโปรแกรมไปสักระยะหนึ่ง เราหรือเพื่อนอาจจะนำโปรแกรมที่เขียนขึ้นมานั้นไปพัฒนาต่อ ซึ่งอาจจะลืมเนื้อหาสาระสำคัญแล้วทำให้ดำเนินการเขียนต่อไม่ได้ จึงต้องมีการเขียน comment เพื่อช่วยเตือนความทรงจำได้
สำหรับคำสั่ง comment จะใช้ <! เป็นแท็กเปิด และใช้ > เป็นแท็กปิดข้อความที่อยู่ระหว่าง <!...> จะไม่ถูกแสดงบน เว็บบราวเซอร์
หลักการเขียนภาษา HTML แบบง่ายๆ
1. จัดให้คำสั่งเปิดและปิดในแต่ละชุดคำสั่งอยู่ใน column ตรงกัน
2. ข้อความที่ไม่ยาวมาก ถ้ามีคำสั่งเปิดและปิด ให้เขียนในบรรทัดเดียวกัน
3. คำสั่งที่มีตัวเปิดและปิด ให้เขียนตัวเปิด/ปิดให้เรียบร้อยก่อนที่จะเขียนข้อความลงไป
เช่น ต้องการเขียน"โฮมเพจของข้าพเจ้า My Homepage"ก็ควรเริ่มด้วย
<H2> </H2>
<H2><B> </B></H2>
<H2><B>โฮมเพจของข้าพเจ้า My Homepage</B></H2>
วิธีการนี้จะช่วยให้ลดความผิดพลาดลงได้มาก
4. ข้อความที่อยู่ในคำสั่งเปิดและปิด ให้พิมพ์เยื้องไปทางขวา
5. คำสั่งใดที่อยู่ในคำสั่งเปิดและปิดของคำสั่งอื่น ให้พิมพ์เยื้องไปทางขวามากกว่าเดิมอีก เล็กน้อย
การกำหนดสีให้พื้นฉากหลัง background
การกำหนดสีของแบ๊คกราวด์ เราจะมีการเพิ่มคำว่า bgcolor = #รหัสสี เข้าไปในแท็ก<body> ดังนี้
โดยรหัสสีจะมีรูปแบบเป็นเลข 6 หลัก แต่ละหลักแทนด้วยเลขฐาน16 (0-9,A-F) โดยที่เลข 2 หลักแรกแทนค่า สีแดง สองหลักต่อมาแทนค่า สีเขียว สองหลักสุดท้ายแทนค่า สีน้ำเงิน เรามีตัวอย่างรหัสสีมาให้ดู ส่วนสีอื่นๆ ดูได้
สี
|
รหัสสี
|
แดง
|
#FF0000
|
เขียว
|
#00FF00
|
น้ำเงิน
|
#0000FF
|
ขาว
|
#FFFFFF
|
ดำ
|
#000000
|
เทา
|
#BBBBBB
|
การกำหนดสีให้กับตัวอักษร
ถ้า ต้องการที่จะกำหนดสีให้กับตัวอักษรทั้งเอกสาร เราจะเพิ่ม Text = #รหัสสี ไว้ในแท็ก body ดังนี้
แต่ถ้าต้องการมีการกำหนดสีของ 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 นี้เข้าไป
เช่น <IMG SRC="New.JPG" HEIGHT=120 WIDTH=102>
ต่อไปเรามาดูกันว่าเราจะเอารูปภาพมาเป็น background ได้ยังไง
การเอารูปภาพมาทำ background
|
โดยแทรก attribute นี้เข้าไปที่ tag body
เช่น < body BACKGROUND="dao.gif">
เมื่อมี background รูปภาพแล้ว ก็น่าจะมี background เสียงด้วย
การเอาเพลง MIDI มาทำ 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
¨ หากกำหนดค่าเป็น – หมายถึงลดขนาดลง n ขั้น เมื่อเทียบกับขนาดที่ผู้ใช้กำหนดไว้ เช่น
เมื่อผู้ใช้กำหนด MS Sans Serif ขนาด 12 pixel
<FONT SIZE = -1> จะเท่ากับ size=2 (10 pixel)
เมื่อผู้ใช้กำหนด AngsanaUPC ขนาด 18 pixel
<FONT SIZE = -1> จะเท่ากับ size=4 (14 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 Sans Serif" SIZE=-1>...</FONT>
· <FONT FACE= "Thonburi,MS Sans Serif" SIZE=-1>...</FONT>
รูปแบบตัวอักษรแบบ 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% ของจอภาพ
เป็นการแบ่งเฟรมตามแนวนอน 3 เฟรมโดยแต่ละเฟรมมีขนาดเท่ากัน
แบ่งเฟรมตามแนวตั้ง โดยเฟรมแรกซึ่งเป็นเฟรมที่อยู่ด้านซ้ายมีขนาด 120 พิกเซล ส่วนเฟรมที่สอง จะมีขนาดกว้างตามส่วนที่เหลือของจอภาพ
แบ่งเฟรมตามแนวนอน โดยเฟรมล่างมีขนาดเป็น 2 เท่า ของเฟรมบน
<html>
<frameset cols =”30,70”>
<frame src=”ชื่อไฟล์ html ที่ต้องการให้แสดงในเฟรมหรือ URL”>
<frame src=”ชื่อไฟล์ html ที่ต้องการให้แสดงในเฟรมหรือ URL”>
</frameset>
</html>
|
การใช้ชุดคำสั่ง Form (<FORM>..</FORM>)
รูปแบบ:
<FORM METHOD=... ACTION=... ENCTYPE=...>
...
<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 คือ การทำให้ภาพภาพเดียว สามารถที่จะ link ไปได้หลายที่ เช่น มีภาพแผนที่โลกอยู่ 1 ภาพ เมื่อเราคลิ๊กที่บริเวณทวีป Asia มันก็จะ link ไปยังรายละเอียดของทวีปเอเซีย ถ้าคลิ๊กไปที่ทวีปยุโรป มันก็จะ link ไปยังรายละเอียดของทวีปยุโรป เป็นต้น ซึ่งเราจะทำได้โดยกำหนดจุด co-ordinate ณ ตำแหน่งต่างๆ ของภาพ โดยด้านซ้ายบนสุดของภาพ จะกำหนดให้เป็นตำแหน่ง 0,0 การสร้าง image map ด้วยวิธีนี้ เราจะเรียกว่า CSIM (Client Side 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= 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>
|
| 
ไม่มีความคิดเห็น:
แสดงความคิดเห็น