*/
  • mahdee
  • ranking : สมาชิกทั่วไป
  • email : mahdee_021@hotmail.com
  • วันที่สร้าง : 2007-04-28
  • จำนวนเรื่อง : 178
  • จำนวนผู้ชม : 339968
  • จำนวนผู้โหวต : 94
  • ส่ง msg :
  • โหวต 94 คน
<< เมษายน 2009 >>
อา พฤ
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    

[ Add to my favorite ] [ X ]


คุณคิดอย่างไรเกี่ยวกับความรุนแรง ไฟใต้ในปัจจุบัน
ดีขึ้นมาก
28 คน
ดีขึ้น
23 คน
ปานกลาง
17 คน
แย่ลง
91 คน

  โหวต 159 คน
วันอังคาร ที่ 21 เมษายน 2552
Posted by mahdee , ผู้อ่าน : 92890 , 12:03:57 น.  
หมวด : วิทยาศาสตร์/ไอที

พิมพ์หน้านี้
โหวต 0 คน

โครงสร้างของภาษา 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"ก็ควรเริ่มด้วย


<H2>  </H2>

<H2><B> </B></H2>


<H2><B>
โฮมเพจของข้าพเจ้า My Homepage</B></H2>

วิธีการนี้จะช่วยให้ลดความผิดพลาดลงได้มาก

4.      ข้อความที่อยู่ในคำสั่งเปิดและปิด ให้พิมพ์เยื้องไปทางขวา

5.   คำสั่งใดที่อยู่ในคำสั่งเปิดและปิดของคำสั่งอื่น ให้พิมพ์เยื้องไปทางขวามากกว่าเดิมอีก  เล็กน้อย

 

การกำหนดสี

การกำหนดสีให้พื้นฉากหลัง background
การกำหนดสีของแบ๊คกราวด์ เราจะมีการเพิ่มคำว่า bgcolor = #รหัสสี เข้าไปในแท็ก <body> ดังนี้

<body bgcolor = #รหัสสี>

โดยรหัสสีจะมีรูปแบบเป็นเลข 6 หลัก แต่ละหลักแทนด้วยเลขฐาน16 (0-9,A-F) โดยที่เลข 2 หลักแรกแทนค่า สีแดง สองหลักต่อมาแทนค่า สีเขียว สองหลักสุดท้ายแทนค่า สีน้ำเงิน เรามีตัวอย่างรหัสสีมาให้ดู ส่วนสีอื่นๆ ดูได้

สี

รหัสสี

แดง

#FF0000

เขียว

#00FF00

น้ำเงิน

#0000FF

ขาว

#FFFFFF

ดำ

#000000

เทา

#BBBBBB

 

การกำหนดสีให้กับตัวอักษร
ถ้า ต้องการที่จะกำหนดสีให้กับตัวอักษรทั้งเอกสาร เราจะเพิ่ม 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 นี้เข้าไป

alt = "ข้อความ"

เช่น <IMG SRC="New.JPG" HEIGHT=120 WIDTH=102>

ต่อไปเรามาดูกันว่าเราจะเอารูปภาพมาเป็น background ได้ยังไง

การเอารูปภาพมาทำ background

โดยแทรก attribute นี้เข้าไปที่ tag body

background=file รูปภาพ

เช่น < 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)

รูปแบบตัวอักษรแบบ พิเศษ
ใช้เมื่อเราต้องการ ให้แสดงสัญลักษณ์ที่เราต้องการซึ่งไม่สามารถใช้แป้นพิมพ์โดยตรงได้ ออกมาบนหน้าจอ

ตัวอักษร

เขียนแทนด้วย

<
>
&
"

&lt;
&gt;
&amp;
&quot;

 

คำสั่งจัดการเกี่ยวกับสี

 

เราสามารถกำหนดค่าสีได้ 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>

องค์ประกอบในคำสั่งเปิด

·       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= 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>

 


อ่านความคิดเห็น

ความคิดเห็นที่ 2 (0)
ITPro วันที่ : 21/04/2009 เวลา : 21.48 น.
http://oknation.nationtv.tv/blog/itpro


ขอบคุณมากครับ

ความคิดเห็นที่ 1 (0)
ลูกเสือหมายเลข9 วันที่ : 21/04/2009 เวลา : 12.36 น.
http://oknation.nationtv.tv/blog/chai
<<==แวะไปทัก..แล้วคุณจะรักหนุ่มคนนี้

พยายามศึกษาครับ
ขอบคุณนะครับ

แสดงความคิดเห็น


ถึง บล็อกเกอร์ ทุกท่าน โปรดอ่าน
   ด้วยทาง บริษัท จีเอ็มเอ็ม แกรมมี่ จำกัด (มหาชน) ได้ติดต่อขอความร่วมมือ มายังเว็บไซต์และเว็บบล็อกต่าง ๆ รวมไปถึงเว็บบล็อก OKnation ห้ามให้มีการเผยแพร่ผลงานอันมีลิขสิทธิ์ ของบริษัท จีเอ็มเอ็ม แกรมมี่ฯ บนเว็บ blog โดยกำหนดขอบเขตของสิ่งที่ห้ามทำ และสามารถทำได้ ดังนี้
ห้ามทำ
- การใส่ผลงานเพลงต้นฉบับให้ฟัง ทั้งแบบควบคุมเพลงได้ หรือซ่อนเป็นพื้นหลัง และทั้งที่อยู่ใน server ของคุณเอง หรือ copy code คนอื่นมาใช้
- การเผยแพร่ file ให้ download ทั้งที่อยู่ใน server ของคุณเอง หรือฝากไว้ server คนอื่น
สามารถทำได้
- เผยแพร่เนื้อเพลง ต้องระบุชื่อเพลงและชื่อผู้ร้องให้ชัดเจน
- การใส่เพลงที่ร้องไว้เอง ต้องระบุชื่อผู้ร้องต้นฉบับให้ชัดเจน
จึงเรียนมาเพื่อโปรดปฎิบัติตาม มิเช่นนั้นทางบริษัท จีเอ็มเอ็ม แกรมมี่ฯ จะให้ฝ่ายดูแลลิขสิทธิ์ ดำเนินการเอาผิดกับท่านตามกฎหมายละเมิดลิขสิทธิ์
OKNATION



กฎกติกาการเขียนเรื่องและแสดงความคิดเห็น
1 การเขียน หรือแสดงความคิดเห็นใด ๆ ต้องไม่หมิ่นเหม่ หรือกระทบต่อสถาบันชาติ ศาสนา และพระมหากษัตริย์ หรือกระทบต่อความมั่นคงของชาติ
2. ไม่ใช้ถ้อยคำหยาบคาย ดูหมิ่น ส่อเสียด ให้ร้ายผู้อื่นในทางเสียหาย หรือสร้างความแตกแยกในสังคม กับทั้งไม่มีภาพ วิดีโอคลิป หรือถ้อยคำลามก อนาจาร
3. ความขัดแย้งส่วนตัวที่เกิดจากการเขียนเรื่อง แสดงความคิดเห็น หรือในกล่องรับส่งข้อความ (หลังไมค์) ต้องไม่นำมาโพสหรือขยายความต่อในบล็อก และการโพสเรื่องส่วนตัว และการแสดงความคิดเห็น ต้องใช้ภาษาที่สุภาพเท่านั้น
4. พิจารณาเนื้อหาที่จะโพสก่อนเผยแพร่ให้รอบคอบ ว่าจะไม่เป็นการละเมิดกฎหมายใดใด และปิดคอมเมนต์หากจำเป็นโดยเฉพาะเรื่องที่มีเนื้อหาพาดพิงสถาบัน
5.การนำเรื่อง ภาพ หรือคลิปวิดีโอ ที่มิใช่ของตนเองมาลงในบล็อก ควรอ้างอิงแหล่งที่มา และ หลีกเลี่ยงการเผยแพร่สิ่งที่ละเมิดลิขสิทธิ์ ไม่ว่าจะเป็นรูปแบบหรือวิธีการใดก็ตาม 6. เนื้อหาและความคิดเห็นในบล็อก ไม่เกี่ยวข้องกับทีมงานผู้ดำเนินการจัดทำเว็บไซต์ โดยถือเป็นความรับผิดชอบทางกฎหมายเป็นการส่วนตัวของสมาชิก
คลิ้กอ่านเงื่อนไขทั้งหมดที่นี่"
OKnation ขอสงวนสิทธิ์ในการปิดบล็อก ลบเนื้อหาและความคิดเห็น ที่ขัดต่อความดังกล่าวข้างต้น โดยไม่ต้องชี้แจงเหตุผลใดๆ ต่อเจ้าของบล็อกและเจ้าของความคิดเห็นนั้นๆ
   

กลับไปหน้าที่แล้ว กลับด้านบน