เนื้อหาโดย จิรศักดิ์ พรอัครพันธุ์
HTML คือภาษาที่ใช้ในการเขียน โฮมเพจ ย่อมาจากคำว่า Hyper Text Makeup Language ซึ่งพัฒนามาจากภาษา SGML ซึ่งสามารถอ่านได้ด้วยโปรแกรม Web browser อย่างเช่น Internet Explorer หรือ Netscape Navigator ในเพจนี้จะสอนการสร้าง โฮมเพจด้วย ภาษา HTML โดยใช้โปรแกรม Text Editer ใดก็ได้ เช่น Notepad , Wordpad , Microsoft Word หรือแม้แต่โปรแกรม Edit ของ DOS ก็สามารถสร้าง file HTML ขึ้นได้ ใน windows นิยม save เป็น file.html ส่วนใน dos นั้นนิยม save เป็น file.htm เพราะว่าใน dos นั้นไม่สามารถ save นามสกุล file เกิน 3 ตัวอักษรได้
ในเพจนี้จะสอนการใช้ภาษา HTML ทุกขั้นตอน อย่างละเอียดทุกขั้นตอนรับรองว่าถ้าตั้งใจจะเขียนโฮมเพจจริง อ่านที่นี่สามารถเขียนโฮมเพจได้แน่นอนครับ
โครงสร้างของภาษา HTML
<html>
<head>
<title> ชื่อเรื่อง </title>
</head>
<body>
ข้อความและคำสั่ง ที่ต้องการให้ปรากฎบนหน้าจอ
</body>
</html>
ภาษา HTML จะประกอบไปด้วย 2 ส่วนใหญ่ๆคือ ส่วนหัว <head> คือส่วนที่จะ load เป็นอันดับแรก ใช้กำหนดชื่อเรื่อง และ คำสั่งที่ต้องการให้ load ก่อนส่วนอื่น
เนื้อหา <body> คือส่วนที่เอาไว้ใส่ข้อความ และ คำสั่งต่างๆที่ต้องการให้แสดงในหน้าจอ Webbrowser ส่วนที่เป็น <คำสั่ง> คือ tag สำหรับ เปิดคำสั่ง และ </คำสั่ง> คือ tag ที่ใช้ปิดคำสั่งนั้น เช่น <head> ก็ต้องปิดด้วย </head> ด้วยเสมอ
การกำหนดข้อความลงใน Title bar
<head>
<title> ข้อความที่ต้องการให้ปรากฏลงบน Title Bar </title>
</head>
การกำหนด background
<html>
<head>
<title>การกำหนด background ให้ Homepage</title>
</head>
<body bgcolor="color">
</body>
</html>
การกำหนดสีของ background ทำได้โดยการเพิ่มคำสั่ง bgcolor ลงใน <body> ดังตัวอย่างด้านบน ส่วนตัวแปร color คือ ชื่อสีหรือ code สีที่จะใช้กำหนดสีของ backgroundชื่อสีเช่น black white blue green red ฯลฯCode สี คือเลขฐาน16 คือ(0-9,A-F) 6 ตัวซึ่งแทนค่าในสีต่างๆ 2 ตัวแรกจะแทนค่าสีแดง 2 ตัวกลางจะแทนสีเขียว ส่วน 2 ตัวหลังจะแทนสีน้ำเงิน
การใช้ภาพเป็น Background
<html>
<head>
<title>การกำหนด background ให้ Homepage</title>
</head>
<body background="URL">
</body>
</html>
การใช้รูปภาพเป็น background ใช้การแทรกคำสั่งเข้าไปใน <body> เช่นเดียวกับการกำหนดสี background ตัวแปร URL คือ path ของ file รูปภาพเช่น
http://www.siamclub.com/bg.gif หรือถ้าหาก อยู่ใน directory เดียวกัน สามารถกำหนดเป็น ชื่อ file ได้เลยเช่น <body background="bg.gif">
หากต้องการกำหนดทั้งสีและภาพที่เป็น background ทำได้ดังตัวอย่าง
<body bgcolor="color" background="URL"> ไม่สามารถใช้ทั้ง <body bgcolor> และ <body background> แยกกันได้ เพราะว่า ภาษา html จะเลือก body เพียงอันเดียว ทำให้การ load อาจผิดพลาดได้
<body bgcolor="color" background="URL"> คำสั่งนี้จะใช้สำหรับ กรณีที่ภาพที่ใชัเป็น background มีขนาดใหญ่ browser จะ load สีพื้นหลังขึ้นมาก่อน
ภาษา HTML
การใส่ข้อความลงในโฮมเพจ
<html>
<head>
<title>การใส่ข้อความลงในโฮมเพจ</title>
</head>
<body>
ข้อความที่ต้องการ
</body>
</html>
การใส่ข้อความลงในโฮมเพจสามารถใส่ลงไประหว่าง <body> .... </body> ได้เลย ดังตัวอย่างด้านบน แต่โปรแกรม webbrowser จะไม่สามารถอ่านการเว้นวรรคของเราได้ เช่น ถ้าคุณพิมพ์ว่า
<html>
<head>
<title>การใส่ข้อความลงในโฮมเพจ</title>
</head>
<body>
HTML คือภาษาที่ใช้เขียนโฮมเพจ
</body>
</html>
กับ
<html>
<head>
<title>การใส่ข้อความลงในโฮมเพจ</title>
</head>
<body>
HTML
คือภาษาที่ใช้เขียนโฮมเพจ
</body>
</html>
ไม่ว่าเราจะเว้นวรรคยาวเท่าใด โปรแกรม Webbrowser จะอ่านได้ว่าคือการเว้นวรรคเพียง 1 วรรคเท่านั้น ถ้าเราต้องการจัดหน้ากระดาษแบบต่างๆเช่น เว้นบรรทัด จำเป็นต้องใช้คำสั่งต่างๆอีกมากมาย ซึ่งจะกล่าวในบทต่อๆไปครับ
การจัดหน้ากระดาษ
<center> text </center>
<center> ใช้สำหรับ จัดกึ่งกลางหน้ากระดาษ
ผลที่ได้ Example02.html
การจัดกั้นหน้า และ กั้นหลัง
</blockquote>...</blockquote>
<blockquote> ใช้สำหรับตั้งกั้นหน้า และกั้นหลัง โดยทั้ง 2 ฝั่งจะ ห่างจากขอบเท่ากัน หากต้องการให้กั้น หน้า และ หลัง แคบลงก็สามารถใช้ <blockquote> หลายๆครั้งซ้อนกันได้ครับ ถ้าอ่านแล้วยังไม่เข้าใจก็ลองดูตัวอย่างนะครับ
<html>
<head>
<title> การใช้ <blockquote></title>
</head>
<body>
<blockquote>Every night in my dremes. I see you. I feel you that is how I know you go on.
Far across the distance and spaces between us. You have come to show you go on. Near, Far,
wherever you are, I believe that the heart doses go on. Once more,you open the doorand you're here in my heart </blockquote>
</body>
</html>
ผลที่ได้ Example03.html
การย่อหน้า
<dd> ใช้สำหรับย่อหน้า หรือคำอธิบายรายละเอียด เป็นส่วนประกอบย่อย หรือคำสั่งย่อยของคำสั่ง <dt> ซึ่งเป็นข้อความแสดงรายละเอียดของคำสจำกัดความ
หรือข้อความที่กำหนดไว้ในคำสั่ง <dt>
รูปแบบคำสั่ง
<dl> Definition Lists
<dt>Definition trem
<dd>Definition
</dl>
เช่น
<html>
<head>
<title>การป้อนข้อมูลแบบรายการ</title>
</head>
<body>
<h2><b>ทดลองป้อนข้อมูลแบบรายการ</b></h2>
<dl>
<dt><b>ชุดที่ 1 </b>
<dd>รายการที่ 1
<dt><b>ชุดที่ 2</b>
<dd>รายการที่ 2
<dt><b>ชุดที่ 3</b>
<dd>รายการที่ 3
</dl>
</body>
</html>
ผลที่ได้ Example04.html
การกำหนดสีของ link
ตามปกติ browser จะแสดง link เป็นสีน้ำเงิน และ link ที่เคยไปแล้วจะเป็นสี ม่วง ดังนี้ Siamclub.com แต่ถ้าหาก background ของเราเป็นสีดำ หรือสีเข้ม การใช้ link สีน้ำเงิน จะทำให้มองไม่ชัด จึงควรเปลี่ยนสี link ให้เข้ากับ background ซึ่งสามารถทำได้โดยการเพิ่มคำสั่งลงใน <body> ดังนี้
<body bgcolor="black" link="ffffda" alink="ccffff" vlink="ffffff">
link = สีของ link ปกติ
vlink = สีของ link ที่เคยไปมาแล้ว
alink = สีของ link ที่เพิ่งเลือกไป
การเชื่อมโยงภายในเอกสาร
การ link ภายในเอกสาร เหมาะสำหรับ file HTML ที่มีความยาวมากๆ จำเป็นต้องมีการ link ภายในเอกสาร เพื่อไม่ให้ เกิดความยุ่งเหยิง สำหรับการ link ภายในเอกสารมีคำสั่งดังนี้
<a name="name">ข้อความที่ต้องการให้เป็นเป้าหมาย</a>
ใช้สำหรับกำหนดชื่อของตำแหน่งเป้าหมายโดยแทนลงไปในตัวแปร name
<a href="#เป้าหมาย">ข้อความที่ต้องการให้เป็น link</a>
ตัวอย่าง
<a href="#html1">HTML คืออะไร</a>
<a href="#html2">สอนเขียนโฮมเพจ</a>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<a name="html1">HTML</a>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<a name="html2">html</a><br><br><br><br><br><br>
ผลที่ได้ Example05.html
การเชื่อมโยงไปโฮมเพจอื่น
การ link ไปยังโฮมเพจอื่น ใช้คำสั่งดังนี้
<a href="URL">Text link</a>
กำหนด URL คือ URL ของโฮมเพจที่จะ link ไปเช่น
http://www.siamclub.com ส่วน Text link คือข้อความที่จะ link ไป
การกำหนดให้ link ขึ้นหน้าใหม่ ทำได้โดยการใช้คำสั่ง
<a href="URL" target="_blank">Text link</a>
การ link ไปยัง E-mail
<a href="mailto:E-mail ของเรา">Text link</a>
การเชื่อมโยงโดยใช้รูปภาพ
การชื่อมโยงโดยใช้รูปภาพ สามารถทำได้โดยใช้คำสั่งในการ link ร่วมกับ คำสั่งในการแสดงรูปภาพดังนี้
<a href="URL"><img src="URL"></a>
แต่การใช้รูปภาพเป็น link จะทำให้เกิดกรอบของรูปภาพขึ้นโดยอัดโนมัติ ถ้าหากไม่ต้องการให้รูปภาพมีกรอบ จะต้องกำหนด border ของรูป ให้เป็น 0 ดังนี้
<a href="URL"><img src="URL" border="0"</a>
พื้นฐานคำสั่งตาราง
การทำตารางมีประโยชน์ต่อการเขียนโฮมเพจมากเนื่องจากเป็นคำสั่งเดียวที่จะสามารถแบ่งข้อมูลออกเป็น 2 ฝั่งได้ ซึ่งเว็บไซต์ดังๆทั่วโลกนิยมใช้คำสั่งตารางกันมาก รูปแบบคำสั่งคือ
<table>
<caption>........</caption>
<tr><th> หัวข้อที่ 1</th><th> หัวข้อที่ 2</th><th> หัวข้อที่ 3</th></tr>
<tr><td> ข้อมูลที่ 1 แถว 1</td><td> ข้อมูลที่ 2 แถว 1</td><td> ข้อมูลที่ 3 แถว 1</td></tr>
<tr><td> ข้อมูลที่ 1 แถว 2</td><td> ข้อมูลที่ 2 แถว 2</td><td> ข้อมูลที่ 3 แถว 2</td></tr>
<tr><td> ข้อมูลที่ 1 แถว 3</td><td> ข้อมูลที่ 2 แถว 3</td><td> ข้อมูลที่ 3 แถว 3</td></tr>
</table>
คำสั่ง<caption>เป็นคำสั่งที่กำหนดคำหรือข้อความอธิบายตาราง
คำสั่ง<tr>(table row)เป็นคำสั่งที่กำหนดแถวในตารางประกอบด้วย 2 คำสั่งย่อย คือ <th>และ<td> มีคำสั่งปิดคือ </tr>
คำสั่ง <th> (Table Head) เป็นคำสั่งที่กำหนดหัวเรื่องของแต่ละในแต่ละคอลัมน์ จะมีคำสั่ง </th> เป็นคำสั่งปิดและเป็นคำสั่งย่อยของ <tr>
คำสั่ง <td> (Table data) เป็นคำสั่งที่แสดงข้อมูลในตารางจะมีคำสั่ง </td> เป็นคำสั่งปิดและเป็นคำสั่งย่อยของ <tr>
ผลที่ได้คือ
หัวข้อที่ 1 หัวข้อที่ 2 หัวข้อที่ 3
ข้อมูลที่ 1 แถว 1 ข้อมูลที่ 2 แถว 1 ข้อมูลที่ 3 แถว 1
ข้อมูลที่ 1 แถว 2 ข้อมูลที่ 2 แถว 2 ข้อมูลที่ 3 แถว 2
ข้อมูลที่ 1 แถว 3 ข้อมูลที่ 2 แถว 3 ข้อมูลที่ 3 แถว 3
การกำหนดกรอบของตาราง
การกำหนดกรอบของตารางสามารถทำได้โดยการเพิ่มคำสั่งลงใน <table> ดังนี้
<table border="ความหนาของเส้นตาราง">
หากเราไม่กำหนดเส้นตาราง ค่าจะเป็น 0 คือไม่มีกรอบ ดังตัวอย่างด้านบน จะเห็นว่า ตารางไม่มีกรอบ
<table border=2>
<caption>การกำหนดขอบให้กับตาราง</caption>
<tr><th> หัวข้อที่ 1</th><th> หัวข้อที่ 2</th><th> หัวข้อที่ 3</th></tr>
<tr><td> ข้อมูลที่ 1 แถว 1</td><td> ข้อมูลที่ 2 แถว 1</td><td> ข้อมูลที่ 3 แถว 1</td></tr>
<tr><td> ข้อมูลที่ 1 แถว 2</td><td> ข้อมูลที่ 2 แถว 2</td><td> ข้อมูลที่ 3 แถว 2</td></tr>
<tr><td> ข้อมูลที่ 1 แถว 3</td><td> ข้อมูลที่ 2 แถว 3</td><td> ข้อมูลที่ 3 แถว 3</td></tr>
</table>
ผลที่ได้คือ
การกำหนดขอบตาราง หัวข้อที่ 1 หัวข้อที่ 2 หัวข้อที่ 3
ข้อมูลที่ 1 แถว 1 ข้อมูลที่ 2 แถว 1 ข้อมูลที่ 3 แถว 1
ข้อมูลที่ 1 แถว 2 ข้อมูลที่ 2 แถว 2 ข้อมูลที่ 3 แถว 2
ข้อมูลที่ 1 แถว 3 ข้อมูลที่ 2 แถว 3 ข้อมูลที่ 3 แถว 3
การกำหนดขนาดพื้นที่ของการแสดงผลข้อมูลในตาราง CELLPADDING
รูปแบบคำสั่ง
<table border = "number" cellpadding ="number">
<caption>...........</caption>
<tr><th>...</th><th>....</th><th>....</th></tr>
<tr><th>...</th><th>....</th><th>....</th></tr>
<tr><th>...</th><th>....</th><th>....</th></tr>
</table>
ตัวอย่างเช่น
<table border=2 cellpadding = "10" >
<caption>การกำหนดขอบให้กับตาราง</caption>
<tr><th> หัวข้อที่ 1</th><th> หัวข้อที่ 2</th><th> หัวข้อที่ 3</th></tr>
<tr><td> ข้อมูลที่ 1 แถว 1</td><td> ข้อมูลที่ 2 แถว 1</td><td> ข้อมูลที่ 3 แถว 1</td></tr>
<tr><td> ข้อมูลที่ 1 แถว 2</td><td> ข้อมูลที่ 2 แถว 2</td><td> ข้อมูลที่ 3 แถว 2</td></tr>
<tr><td> ข้อมูลที่ 1 แถว 3</td><td> ข้อมูลที่ 2 แถว 3</td><td> ข้อมูลที่ 3 แถว 3</td></tr>
</table>
ผลที่ได้
การกำหนดcellpaddingให้กับตาราง หัวข้อที่ 1 หัวข้อที่ 2 หัวข้อที่ 3
ข้อมูลที่ 1 แถว 1 ข้อมูลที่ 2 แถว 1 ข้อมูลที่ 3 แถว 1
ข้อมูลที่ 1 แถว 2 ข้อมูลที่ 2 แถว 2 ข้อมูลที่ 3 แถว 2
ข้อมูลที่ 1 แถว 3 ข้อมูลที่ 2 แถว 3 ข้อมูลที่ 3 แถว 3
การกำหนดขนาดของเส้นภายในคาราง CELLSPACING
Cellspacing เป็นการกำหนดขนาดของเส้นภายในตารางข้อมูลโดยค่าตัวเลข = n และขนาดของเส้นภายในตาราง จะขึ้นอยู่กับค่าตัวเลข n ที่เรากำหนดโดยค่าตัวเลข n ยิ่งมาก
เส้นภายในตารางก็มากตามค่าตัวเลขที่เรากำหนด ซึ่งค่าปกติหรือค่า Default n เท่ากับ 0
รูปแบบคำสั่ง
<table border = "number" cellspacing="number">
<caption>...........</caption>
<tr><th>...</th><th>....</th><th>....</th></tr>
<tr><th>...</th><th>....</th><th>....</th></tr>
<tr><th>...</th><th>....</th><th>....</th></tr>
</table>
ตัวอย่างเช่น
<table border=2 cellspacing = "6" cellpadding = "20" >
<caption>การกำหนดcellspacingให้กับตาราง</caption>
<tr><th> หัวข้อที่ 1</th><th> หัวข้อที่ 2</th><th> หัวข้อที่ 3</th></tr>
<tr><td> ข้อมูลที่ 1 แถว 1</td><td> ข้อมูลที่ 2 แถว 1</td><td> ข้อมูลที่ 3 แถว 1</td></tr>
<tr><td> ข้อมูลที่ 1 แถว 2</td><td> ข้อมูลที่ 2 แถว 2</td><td> ข้อมูลที่ 3 แถว 2</td></tr>
<tr><td> ข้อมูลที่ 1 แถว 3</td><td> ข้อมูลที่ 2 แถว 3</td><td> ข้อมูลที่ 3 แถว 3</td></tr>
</table>
ผลที่ได้
การกำหนดcellspacingให้กับตาราง หัวข้อที่ 1 หัวข้อที่ 2 หัวข้อที่ 3
ข้อมูลที่ 1 แถว 1 ข้อมูลที่ 2 แถว 1 ข้อมูลที่ 3 แถว 1
ข้อมูลที่ 1 แถว 2 ข้อมูลที่ 2 แถว 2 ข้อมูลที่ 3 แถว 2
ข้อมูลที่ 1 แถว 3 ข้อมูลที่ 2 แถว 3 ข้อมูลที่ 3 แถว 3
การกำหนดความกว้าง และความสูงของตาราง
ใช้การเพิ่มคำสั่งลงใน <table> ดังนี้
<table width="ความกว้าง" height="ความสูง">
การกำหนดความกว้างสามารถกำหนดได้ทั้งเป็น % และเป็น pixel แต่ควรจะกำหนดเป็น % จะดีกว่า เนื่องจากจะทำให้คนที่ใช้หน้าจอ ความละเอียดไม่เท่ากัน จะสามารถดูได้ผลใกล้เคียงกันที่สุด
การกำหนดความกว้าง และความสูงของแถวตาราง
ใช้การเพิ่มคำสั่งลงใน <td> ดังนี้
<td width="ความกว้าง" height="ความสูง">
การกำหนดความกว้าง และความสูง ใช้การกำหนดเช่นเดียวกับ การกำหนดความกว้าง และ ความสูงให้กับตาราง
การกำหนดความกว้าง ของคอลัมน์ในตาราง
<td colspan="จำนวนคอลัมน์">.....</td>
<table border=2>
<tr><th> หัวข้อที่ 1</th><th> หัวข้อที่ 2</th><th> หัวข้อที่ 3</th></tr>
<tr><td colspan="2"> ข้อมูลที่ 1 แถว 1</td><td> ข้อมูลที่ 2 แถว 1</td><td>
<tr><td> ข้อมูลที่ 1 แถว 2</td><td> ข้อมูลที่ 2 แถว 2</td><td> ข้อมูลที่ 3 แถว 2</td></tr>
<tr><td> ข้อมูลที่ 1 แถว 3</td><td> ข้อมูลที่ 2 แถว 3</td><td> ข้อมูลที่ 3 แถว 3</td></tr>
</table>
ผลที่ได้คือ
หัวข้อที่ 1 หัวข้อที่ 2 หัวข้อที่ 3
colspan=2 ข้อมูลที่ 2 แถว 1
ข้อมูลที่ 1 แถว 2 ข้อมูลที่ 2 แถว 2 ข้อมูลที่ 3 แถว 2
ข้อมูลที่ 1 แถว 3 ข้อมูลที่ 2 แถว 3 ข้อมูลที่ 3 แถว 3
การกำหนดความกว้างของแถวในตาราง
<td rowspan = "จำนวนแถว">.....</td>
เช่น
<table border=2 celljpadding ="20" cellspacing = "6" >
<tr><th> หัวข้อที่ 1</th><th> หัวข้อที่ 2</th><th> หัวข้อที่ 3</th></tr>
<tr><td rowspan = "2"> ข้อมูลที่ 1 แถว 1</td><td> ข้อมูลที่ 2 แถว 1</td><td>
<tr><td> ข้อมูลที่ 1 แถว 2</td><td> ข้อมูลที่ 2 แถว 2</td><td> ข้อมูลที่ 3 แถว 2</td></tr>
<tr><td> ข้อมูลที่ 1 แถว 3</td><td> ข้อมูลที่ 2 แถว 3</td><td> ข้อมูลที่ 3 แถว 3</td></tr>
</table>
ผลที่ได้
ลำดับที่ 1 2 3 4
รายการ มอนิเตอร์ คีย์บอร์ด เมาส์ rowspan=2
ราคา 8,000 350 550
การกำหนด Background ให้ตาราง
ใช้การเพิ่มคำสั่งลงใน <table> , <tr> หรือ <td> ดังนี้
<table background="URL" bgcolor="code สี">
<tr background="URL" bgcolor="code สี">
<td background="URL" bgcolor="code สี">
การแบ่งพื้นที่จอภาพ (frame)
<html>
<head>
<title> .... </title>
</head>
<frameset.......... >
<frame src = "ไฟล์ที่เราต้องการให้แสดงผลในเฟรม" หรือ "URL" >
(คำสั่ง <frame src =...>นี้นั้น จะมีกี่ส่วนจะขึ้นอยู่กับว่าเราแบ่งพื้นที่ไว้กี่ส่วน)
</frameset>
</html>
จะเห็นว่า file นี้จะไม่มี <body> แต่จะมี <frameset> ขึ้นมาแทน เพราะว่าคำสั่งแบ่งหน้าจอนี้ จะใช้กำหนดเพื่อให้แสดงหน้าอื่นเท่านั้น
การแบ่งหน้าจอตามแนวตั้ง
<html>
<head>
<title> .... </title>
</head>
<frameset cols="L%,R%">
<frame src="URL ของ frame ด้านซ้าย" name="ชื่อของ frame">
<frame src="URL ของ frame ด้านขวา" name="ชื่อของ frame">
</frameset>
</html>
การแบ่ง frame ตามแนวตั้งคือการแบ่งแบบมีด้านซ้าย และด้านขวา โดยขนาดของ frame ด้านซ้ายกำหนดได้โดย กำหนดค่าลงบนตัวแปร L ควรมีหน่วยเป็น % เพื่อที่คนที่ใช้หน้าจอ ความละเอียดไม่เท่าเรา จะสามารถดูได้ และใส่ขนาดของ frame ด้านขวาในตัวแปร R เช่นเดียวกับ ตัวแปร L
การแบ่งหน้าจอตามแนวนอน
<html>
<head>
<title> .... </title>
</head>
<frameset rows="T%,B%">
<frame src="URL ของ frame ด้านบน">
<frame src="URL ของ frame ด้านล่าง">
</frameset>
</html>
การแบ่งจอตามแนวนอน สามารถทำได้เช่นเดียวกับ แนวตั้ง โดยการเปลี่ยน cols เป็น rows
การแบ่ง frame หลาย frame ซ้อนกัน
<html>
<head>
<title> .... </title>
</head>
<frameset rows="30%,50%,20%">
<frame src="
http://www.yahoo.com">
<frameset cols="50%,50%">
<frame src="
http://www.excite.com">
<frame src="
http://www.hotmail.com">
</frameset>
<frame src="
http://www.rocketmail.com">
</frameset>
</html>
การแบ่งหลายๆ frame ซ้อนกัน ก็ใช้ชุดคำสั่งเดียวกันกับคำสั่งแบ่ง frame ธรรมดา แต่นำคำสั่งมาซ้อนกัน ดังตัวอย่างด้านบน
การกำหนด scroll bar ให้ frame
<html>
<head>
<title> .... </title>
</head>
<frameset rows="30%,50%,20%">
<frame src="
http://www.yahoo.com" scrolling="no">
<frameset cols="50%,50%">
<frame src="
http://www.excite.com" scrolling="yes">
<frame src="
http://www.hotmail.com" scrolling="auto">
</frameset>
<frame src="
http://www.rocketmail.com" scrolling="no">
</frameset>
</html>
no = ไม่มี scroll bar
yes = มี scroll bar
auto = แล้วแต่ browser
คำสั่งที่กำหนดให้ไม่แสดงผลเฟรม
คำสั่งในการกำหนดไม่ให้แสดงผลเฟรม เป็นคำสั่งที่ใช้ในการยกเลิกการแสดงผลการแบ่งพื้นที่ในการทำงาน โดยการใช้คำสั่ง <noframes>
รูปแบบคำสั่ง
<noframes>...............</noframes>
การกำหนด frame ที่ต้องการให้แสดงข้อมูล
<a href="URL" target="ชื่อของ frame นั้น(name)">textlink</a>
ตามปกติ เราสามารถใช้คำสั่ง <a href......> เหมือนที่เคยกล่าวไว้แล้ว ซึ่งเมื่อเรา click ข้อความ(textlink) ที่ตามหลังคำสั่ง <a href....>ก็จะสามารถ link ไปยัง URL ที่ต้องการได้ แต่ในกรณีที่ homepage ของเรามีหลาย frame เราสามารถกำหนดให้ แสดงผลการ link ไปที่ frame ใด frame หนึ่งได้ โดยการเพิ่มคำสั่ง target ดังตัวอย่าง ชื่อของ frame ก็จะต้องกำหนดไว้ก่อนดังที่แสดงในตัวอย่างในหัวข้อ การแบ่งหน้าจอ ตามแนวตั้ง(ด้านบน) หากตัองการให้แสดงผลเต็มหน้าจอ(ออกจาก frame) ให้ใช้คำสั่ง
<a href="URL" target="_top">
การสร้างแบบสอบถามในโฮมเพจ
คำสั่งสร้างแบบสอบถามในโฮมเพจนั้น ควรจะต้องใช้ CGI เพื่อที่จะส่ง E-mail ไปที่ E-mail ของท่านโดยไม่เกิดการผิดพลาด ผมจึงนำ Free CGI Form mail ที่ผมใช้อยู่มาแจกให้ทุกท่านเอาไปใช้กันได้เลยครับ
<FORM METHOD=POST ACTION="
http://www.vpdev.com/freestuff/formmail">
<INPUT TYPE=HIDDEN NAME="recipient" VALUE="E-mail ของท่าน">
<INPUT TYPE=HIDDEN NAME="subject" VALUE="หัวข้อของ mail">
<INPUT TYPE=HIDDEN NAME="redirect" VALUE="
http://www.vpdev.com/freestuff/help/formmail.shtml">
<INPUT TYPE=HIDDEN NAME="print_config" VALUE="email,realname">
ข้อมูลแบบสอบถาม
</form>
ใส่หัวข้อของ mail และ E-mail ของท่านที่ต้องการให้ส่งไปถึง
ารสร้างช่องกรอกข้อมูลแบบต่างๆ
Text area
<form>
<textarea name="ชื่อข้อมูล" rows="จำนวนแถว" cols="จำนวนคอลัมน์">
ข้อความที่จะแสดงในกรอบ
</textarea>
</form>
เช่น
<html>
<head>
<title>การสร้างกรอบป้อนข้อมูล</title>
</head>
<body>
<b>Please let us know what you think fo our new web site! </b>
<form>
<p>
<textarea name = "feedback" rows = "5" cols = "60">
It's great!
</textarea>
</p>
</form>
</body>
</html>
Text Area คือกรอบป้อนข้อมูลแบบหลายบรรทัด สามารถกำหนดความกว้างยาว ของ Area ได้ดังตัวอย่าง ผลที่ได้คือ
Please let us know what you think fo our new web site!
It's great!
การสร้าง drop down list box
<form>
<select name="ชื่อข้อมูล">
<option selected value="ชื่อข้อมูลที่จะแสดงตอนแรก">ข้อมูลที่จะแสดงตอนแรก
<option value="ชื่อข้อมูล1"> ข้อมูลที่จะถูกแสดง 1
<option value="ชื่อข้อมูล2"> ข้อมูลที่จะถูกแสดง 2
<option value="ชื่อข้อมูล3"> ข้อมูลที่จะถูกแสดง 3
</select>
</form>
ผลที่ได้คือ
ข้อมูลที่จะแสดงตอนแรก ข้อมูลที่จะถูกแสดง 1 ข้อมูลที่จะถูกแสดง 2 ข้อมูลที่จะถูกแสดง 3
การสร้าง Input Text Box
<form>
ชื่อ<input type="text" name="ชื่อข้อมูล" size="ความยาว" maxlenght="ความยาวสูงสุดของข้อความ">
นามสกุล<input type="text" name="ชื่อข้อมูล" size="ความยาว" maxlenght="ความยาวสูงสุดของข้อความ">
</form>
ผลที่ได้คือ
ชื่อ นามสกุล
การสร้าง Check Box
<form>
<input type="checkbox" name="ชื่อข้อมูล">A
<input type="checkbox" name="ชื่อข้อมูล">B
<input type="checkbox" name="ชื่อข้อมูล">C
<input type="checkbox" name="ชื่อข้อมูล">D
<input type="checkbox" name="ชื่อข้อมูล">E
<input type="checkbox" name="ชื่อข้อมูล">F
</form>
ผลที่ได้คือ
A B C D E F
การสร้าง Radio Button
<form>
<input type="radio" name="ชื่อข้อมูล">A
<input type="radio" name="ชื่อข้อมูล">B
<input type="radio" name="ชื่อข้อมูล">C
<input type="radio" name="ชื่อข้อมูล">D
<input type="radio" name="ชื่อข้อมูล">E
<input type="radio" name="ชื่อข้อมูล">F
</form>
ผลที่ได้คือ
A B C D E F
การสร้าง ปุ่ม Submit และ reset
ที่มา:
http://www.ctc.ru.ac.th/ctc2_school/webteach/Html.html.html
Topic: HTML เบื้องต้น (Read 3492 times)
May 31, 2009, 12:04:57 AM
