| | TOP | E-Mail | |
| เริ่มต้นเรียนภาษา HTML |
กรณีที่เราต้องการเขียนเว็บขึ้นมาสักเพจด้วยภาษา HTML นั้น ก่อนอื่นเราต้องมือเครื่องมือในการเขียนก่อน สำหรับครื่องมือในการเขียนเว็บนั้น เราสามารถหามาใช้ได้อย่างง่ายดาย โดยใช้โปรแกรมประเภท Text Editor ทั้งหลายนั่นแหละ แต่สำหรับมือใหม่อาจจะถามว่า....แล้วโปรแกรม Text Editor นั้นมันคืออะไรล่ะ ....คำตอบก็คือ โปรแกรมText Editor คือโปรแกรมประเภทที่เราสามารถพิมพ์ข้อความหรือตัวหนังสือได้นั่นแหละ เขาเรียกว่า Text Editor เช่น MS Word ,Note pad,Word pad เป็นต้น (นี่เป็นแบบพื้นฐานสำหรับมือใหม่ เพราะจริงๆแล้วมีเครื่องมือช่วยในการเขียนเว็บมีมากมาย แต่มือใหม่ควรฝึกกับโปรแกรมประเภทนี้ก่อนเพื่อเป็นการเรียนรู้การใช้คำสั่งขั้นพื้นฐาน เมื่อคล่องดีแล้วค่อยหาเครื่องมือ อื่น ๆ มาใช้)
ที่สำคัญก็คือ เมื่อเวลาเราต้องการจะ Save ข้อมูลนั้นเราจะต้องระบุลงไปด้วยว่าเป็นไฟล์ของ HTML ไฟล์นั้นถึงจะเป็นเว็บเพจ เช่น <ชื่อไฟล์>.html หรือ <ชื่อไฟล์>.htm ก็ได้ อย่างใดอย่างหนึ่ง ซึ่งเมื่อเราทำการ Save ไฟล์เป็น นามสกุลดังกล่าวแล้ว(.htm , .html) จะทำให้ โปรแกรม Browser อ่านข้อความของไฟล์นั้นได้
เครื่องมืออีกอย่างที่จะต้องมีก็คือ โปรแกรม Browser ที่ว่าเมื่อกี้นั่นแหละครับ ...มือใหม่อาจจะสงสัยอีกว่า โปรแกรม Browser คืออะไร .... โปรแกรม Browser ก็คือ โปรแกรมที่ใช้สำหรับดูเว็บเพจที่เราสร้างขึ้นมานั่นแหละ ถ้าไม่มีโปรแกรมประเภทนี้อยู่ที่เครื่องเรา เราก็ไม่สามารถจะดูเว็บที่เราสร้างขึ้นมาได้ โปรแกรม Browser ที่นิยมกันอยู่ตอนนี้(พ.ศ. 2543) ก็คือ Internet Explorer กับ Netscape ส่วนค่ายอื่นๆ ก็มีนะ แต่นิยมกันน้อย
เมื่อเราหาเครื่องมือในการเขียนเว็บเพจกันได้แล้ว เราก็มาเริ่มศึกษาคำสั่งที่ใช้ในการเขียนเว็บกันเลยดีกว่า......
|
| | TOP | E-Mail | |
| โครงสร้างของภาษา HTML |
|
โครงสร้างของ ภาษา HTML นั้น ประกอบไปด้วยส่วนต่าง ๆ ที่สำคัญดังนี้ คือ
<html>
<head>
<title> ชื่อเรื่อง </title>
</head>
<body>
ส่วนที่ปรากฎบนหน้าจอทั้งหมด
</body>
</html>
| | ผลลัพธ์ที่ได้ |
โดยแต่และส่วนสามารถอธิบายความหมายได้ดังนี้
|
<html> และ </html> เป็น tag ที่ใช้เพื่อกำหนดว่าเอกสารต่อไปนี้เป็นเอกสารที่ใช้ภาษา HTML เป็น Markup Language และจะไม่ปารกฏในโปรแกรม Web Browser
<head> และ </head> เป็น tag ที่ใช้กำหนดส่วนหัวของเอกสาร Head ไม่ได้เป็นส่วนของเอกสารภายใน แต่จะให้ข้อมูลเกี่ยวกับเอกสารฉบับนี้
<title> และ </title> เป็นการระบุข้อความที่ต้องการให้เป็นส่วนหัวของเอกสาร Title จะเป็นส่วนหนึ่งของ Head โดยข้อความที่อยู่ใน Title จะไปปรากฏอยู่ที่ส่วนบนสุดของ Web Browser
<body> และ </body> เป็น tag ที่บอกถึงลักษณะต่าง ๆ ของเอกสารฉบับนี้ ซึ่งใน Body จะมี Attributes ต่าง ๆ ได้แก่ BGCOLOR (หมายถึงการกำหนดสีพื้นด้านหลังของเอกสาร) , TEXT (หมายถึงการกำหนดสีของตัวอักษรในเอกสาร) เป็นต้น
|
หมายเหตุ :- <คำสั่ง> เรียกว่า tag เปิด </คำสั่ง> เรียกว่า Tag ปิด
|
| | TOP | E-Mail | |
| การกำหนด Background |
<html>
<head>
<title> การกำหนด background </title>
</head>
<body bgcolor="color">
</body>
</html>
|
เราสามารถกำหนดสีของ background ได้โดยการเพิ่มคำสั่ง bgcolor ลงใน tag <body> (ตัวอย่างด้านบน) ส่วนคำว่า color นั้น หมายถึง ชื่อสีหรือ code สีที่ใช้กำหนดสีของ background ตัวอย่างของชื่อสีดำ
ส่วน Code ของสี คือเลขฐาน16 คือ(0-9,A-F) ซึ่งจะมีทั้งหมาด 6 ตัว โดยจะแทนค่าในสีต่าง ๆ ดังนี้ 2 ตัวแรกจะแทนค่าสีแดง(R) 2 ตัวกลางจะแทนค่าสีเขียว(G ) ส่วน 2 ตัวสุดท้ายจะแทนค่าสีน้ำเงิน(B) ตัวอย่างของชื่อโค้ดสีดำ
ถ้าต้องการดู code สี คลิกที่นี่
|
| | TOP | E-Mail | |
| การกำหนดสีของ link |
|
ตามปกติ browser จะแสดง link เป็นสีน้ำเงิน และ link ที่เคยไปแล้วจะเป็นสี ม่วง ดังนี้ เว็บบอร์ดแสดงความคิดเห็น แต่ถ้าหาก background ของเราเป็นสีดำ หรือสีเข้ม การใช้ link สีน้ำเงิน จะทำให้มองไม่ชัด จึงควรเปลี่ยนสี link ให้เข้ากับ background ซึ่งสามารถทำได้โดยการเพิ่มคำสั่งลงใน <body> ดังนี้
<html>
<head>
<title>การกำหนดสีของ link</title>
</head>
<body bgcolor="black" link="ffffda" alink="ccffff" vlink="ffffff">
</body>
</html>
| | ผลลัพธ์ที่ได้ |
โดยที่คำสั่ง
link = สีของ link ปกติ
vlink = สีของ link ที่เคยไปมาแล้ว
alink = สีของ link ที่เพิ่งเลือกไป
|
| | TOP | E-Mail | |
| การใช้ภาพเป็น Background |
<html>
<head>
<title> การกำหนด background </title>
</head>
<body background="URL">
</body>
</html>
|
การใช้รูปภาพเป็น background คือการแทรกคำสั่งเข้าไปใน <body> เช่นเดียวกับการกำหนดสี background ตัวแปร URL คือ path ของ file รูปภาพเช่น
| <body background="http://www.sambaweb/thai-dev.com/46860banner03.gif">
| ผลลัพธ์ที่ได้ |
หรือถ้าหาก อยู่ใน directory เดียวกัน สามารถกำหนดเป็น ชื่อ file ได้เลยเช่น
และถ้าหากต้องการกำหนดทั้งสีและภาพ ที่เป็น background สามารถทำได้ดังตัวอย่าง ดังนี้
| <body bgcolor="color" background="URL">
|
ข้อควรจำ :
<body bgcolor="color" background="URL"> จะต้องมีเพียง หนึ่งเดียว ในแต่ละเพจ ไม่สามารถใช้ทั้ง<body bgcolor> และ <body background> ในเพจเดียวกัน เพราะว่า ภาษา html จะเลือก body เพียงอันเดียวเท่านั้น ซึ่งจะ ทำให้การตีความของ ภาษา HTML ผิดพลาด
|
| | TOP | E-Mail | |
| การกำหนด music background |
<html>
<head>
<title> การกำหนด music background </title>
</head>
<body bgsound src="URL" loop="จำนวนรอบ">
</body>
</html>
|
ทำได้โดยการ tag คำสั่ง <bgsound> ลงใน โฮมเพจ ดังตัวอย่างด้านบน URL คือที่อยู่ของ file เช่น
| <body bgsound src="http://www.oocities.org/supermix/java/pic/sound01.wav">
|
หรือ ถ้าอยู่ใน Directory เดียวกัน สามารถกำหนดเป็นชื่อ file ได้เลยเช่น
สำหรับตัวแปร จำนวนรอบ คือจำนวนรอบของการวนเพลง หากต้องการให้วนไปเรื่อยๆ ให้ใช้คำสั่ง | <body bgsound src="URL" loop="INFINITE">
|
หรือ ใช้ -1 แทน INFINITE ก็ได้
|
| | TOP | E-Mail | |
| การใส่ข้อความลงในโฮมเพจ |
<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>
|
| ผลลัพธ์ที่ได้ | |
ผลลัพธ์ที่ได้ |
ผลที่ได้ก็คือ ข้อความดังกล่าวจะเป็นบรรทัดเดียวกัน
|
| | TOP | E-Mail | |
| การขึ้นบรรทัดใหม่ |
<html>
<head>
<title>คำสั่งขึ้นบรรทัดใหม่</title>
</head>
<body>
HTML<br>
DHTML<br>
Java script<br>
Java applet<br>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
คำสั่งสำหรับขึ้นบรรทัดใหม่ใช้คำสั่ง <br> วางไว้ท้ายข้อความที่ต้องการ Webbrowser จะแสดงผลข้อความต่อจากนั้นในบรรทัดต่อไป
|
| | TOP | E-Mail | |
| การขึ้นย่อหน้าใหม่ |
<html>
<head>
<title>คำสั่งขึ้นย่อหน้าใหม่</title>
</head>
<body>
<p>HTML คือภาษาที่ใช้ในการเขียน โฮมเพจ ย่อมาจากคำว่า Hyper Text Makeup Language ซึ่งพัฒนามาจากภาษา SGML ซึ่งสามารถอ่านได้ด้วยโปรแกรม Web browser อย่างเช่น Internet Explorer หรือ Netscape Navigator</p>
<p>ในเพจนี้จะสอนการสร้าง โฮมเพจด้วย ภาษา HTML โดยใช้โปรแกรม Text Editer ใดก็ได้ เช่น Notepad , Wordpad , Microsoft Word หรือแม้แต่โปรแกรม Edit ของ DOS ก็สามารถสร้าง file HTML ขึ้นได้ ใน windows นิยม save เป็น file.html ส่วนใน dos นั้นนิยม save เป็น file.htm เพราะว่าใน dos นั้นไม่สามารถ save นามสกุล file เกิน 3 ตัวอักษรได้ </p>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
<p>......</p> คือคำสั่งที่ใช้สำหรับย่อหน้าใหม่
คำสั่งสำหรับจัดตำแหน่งของย่อหน้า <p align="ตำแหน่ง">
<html>
<head>
<title>คำสั่งสำหรับจัดตำแหน่งของย่อหน้า</title>
</head>
<body>
<p align="right">HTML คือภาษาที่ใช้ในการเขียน โฮมเพจ ย่อมาจากคำว่า Hyper Text Makeup Language ซึ่งพัฒนามาจากภาษา SGML ซึ่งสามารถอ่านได้ด้วยโปรแกรม Web browser อย่างเช่น Internet Explorer หรือ Netscape Navigator</p>
<p align="center">ในเพจนี้จะสอนการสร้าง โฮมเพจด้วย ภาษา HTML โดยใช้โปรแกรม Text Editer ใดก็ได้ เช่น Notepad , Wordpad , Microsoft Word หรือแม้แต่โปรแกรม Edit ของ DOS ก็สามารถสร้าง file HTML ขึ้นได้ ใน windows นิยม save เป็น file.html ส่วนใน dos นั้นนิยม save เป็น file.htm เพราะว่าใน dos นั้นไม่สามารถ save นามสกุล file เกิน 3 ตัวอักษรได้ </p>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
การกำหนดตำแหน่งของย่อหน้าทำได้โดยการเพิ่มคำสั่งลงใน <p> ดังตัวอย่าง ตัวแปร ตำแหน่ง คือ ตำแหน่งที่ต้องการ มีอยู่ 3 อย่างคือ
left = ชิดขอบซ้าย
right = ชิดขอบขวา
center = กลางหน้ากระดาษ
|
| | TOP | E-Mail | |
| คำสั่งขีดเส้นใต้ |
<html>
<head>
<title>คำสั่งขีดเส้นใต้</title>
</head>
<body>
HTML คือภาษาที่ใช้ในการเขียน โฮมเพจ ย่อมาจากคำว่า Hyper Text Makeup Language ซึ่งพัฒนามาจากภาษา SGML ซึ่งสามารถอ่านได้ด้วยโปรแกรม Web browser อย่างเช่น Internet Explorer หรือ Netscape Navigator<hr>
ในเพจนี้จะสอนการสร้าง โฮมเพจด้วย ภาษา HTML โดยใช้โปรแกรม Text Editer ใดก็ได้ เช่น Notepad , Wordpad , Microsoft Word หรือแม้แต่โปรแกรม Edit ของ DOS ก็สามารถสร้าง file HTML ขึ้นได้ ใน windows นิยม save เป็น file.html ส่วนใน dos นั้นนิยม save เป็น file.htm เพราะว่าใน dos นั้นไม่สามารถ save นามสกุล file เกิน 3 ตัวอักษรได้ <hr>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
<hr> คือคำสั่งที่ใช้สำหรับขีดเส้นใต้
การกำหนดความยาวของเส้น <hr width="ความยาว">
<html>
<head>
<title>การกำหนดความยาวของเส้น</title>
</head>
<body>
HTML <hr width="200">
HTML <hr width="400">
HTML <hr width="600">
HTML <hr width="800">
HTML <hr width="20%">
HTML <hr width="60%">
</body>
</html>
| | ผลลัพธ์ที่ได้ |
เราสามารถกำหนดความยาวของเส้นคั่นโดยใส่ค่าตัวเลข ความยาวที่ต้องการโดยหน่วยเป็น pixel หรือใส่เป็นขนาด % ต่อหน้าจอ ในตัวแปร ความยาว ดังตัวอย่างด้านบน
การกำหนดความหนาของเส้น <hr size="ความหนา">
<html>
<head>
<title>การกำหนดความหนาของเส้น</title>
</head>
<body>
HTML <hr size="2">
HTML <hr size="4">
HTML <hr size="6">
HTML <hr size="8">
</body>
</html>
| | ผลลัพธ์ที่ได้ |
เราสามารถกำหนดความหนาของเส้นคั่นโดยใส่ค่าตัวเลข ความยาวที่ต้องการโดยหน่วยเป็น pixel ในตัวแปร ความหนา ดังตัวอย่างด้านบน
การกำหนดเส้นทึบ <hr noshade>
ตัวอย่าง เช่น
การกำหนดตำแหน่งของของเส้นคั่น <hr align="ตำแหน่ง">
ทำได้โดยการเลือกตำแหน่งที่ต้องการ left right center เช่นเดียวกับ คำสั่ง <p>
ตัวอย่าง เช่น
การกำหนดสีของเส้นคั่น (เฉพาะ IE) <hr color="Code สี">
ทำได้โดยการเติม code สีที่ต้องการลงไปได้เลย
ตัวอย่าง เช่น
| <hr noshade size="10" align="center" color="#00FF00">
| ผลลัพธ์ที่ได้ |
|
| | TOP | E-Mail | |
| การกำหนดหัวเรื่อง |
<html>
<head>
<title>กำหนดหัวเรื่อง</title>
</head>
<body>
<h1>HTML</h1>
<h2>HTML</h2>
<h3>HTML</h3>
<h4>HTML</h4>
<h5>HTML</h5>
<h6>HTML</h6>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
<hn> คือคำสั่งที่ใช้สำหรับกำหนดหัวเรื่อง โดยการเติมตัวเลข 1-6 ลงในตัวแปร n โดย เลข 1 จะเป็นตัวใหญ่ที่สุด และ 2,3,4 รองลงมา จนถึง 6 จะเป็นหัวข้อที่เล็กที่สุด
|
| | TOP | E-Mail | |
| กำหนดขนาดตัวอักษร |
<html>
<head>
<title>กำหนดขนาดตัวอักษร</title>
</head>
<body>
<font size="-1">HTML</font>
<font size="-3">HTML</font>
<font size="-5">HTML</font>
<font size="-7">HTML</font>
<font size="1">HTML</font>
<font size="3">HTML</font>
<font size="5">HTML</font>
<font size="7">HTML</font>
<font size="+1">HTML</font>
<font size="+3">HTML</font>
<font size="+4">HTML</font>
<font size="+7">HTML</font>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
<font size="ขนาดตัวอักษร">HTML</font> คือคำสั่งที่ใช้สำหรับกำหนดขนาดตัวอักษร โดยการเติมตัวเลข -1 ถึง +7 โดยเลข -1 จะเล็กที่สุด และ +7 จะมีขนาดใหญ่ที่สุด
การกำหนดชื่อตัวอักษร <font face="ชื่อตัวอักษร">
<html>
<head>
<title>การกำหนดชื่อตัวอักษร</title>
</head>
<body>
<font face="Cordiaupc">HTML</font>
<font face="Ms sans serif">HTML</font>
<font face="AngsanaUPC">HTML</font>
<font face="arial">HTML</font>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
<font face="ชื่อตัวอักษร">HTML</font> คือคำสั่งที่ใช้สำหรับกำหนดชื่อตัวอักษร โดยการเติมชื่อตัวอักษรลงไปใน <font> ดังตัวอย่างข้างบน
หากท่านต้องการกำหนดทั้งชื่อตัวอักษรและ ขนาดตัวอักษรพร้อมกัน สามารถเขียนคำสั่งได้ดังนี้
|
<font size="ขนาดตัวอักษร" face="ชื่อตัวอักษร"<HTML</font>
|
การกำหนดสีตัวอักษร<font color="color"> text </font>
<html>
<head>
<title>การกำหนดสีตัวอักษร</title>
</head>
<body>
<font color="#ff0066"> text </font>
<font color="blue"> text </font>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
<font color="code สี"> ใช้สำหรับ กำหนดสีให้ตัวอักษร โดยการใช้ code สี กำหนดสีของตัวอักษร ดู code สี คลิกที่นี่
การกำหนดตัวเอียง ตัวหนา และ ตัวขีดเส้นใต้
<html>
<head>
<title>การกำหนดตัวเอียง ตัวหนา และ ตัวขีดเส้นใต้ </title>
</head>
<body>
<b>HTML</b>
<i>HTML</i>
<u>HTML</u>
<b><i><u>HTML</u></i></b>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
<b> = ตัวหนา
<i> = ตัวเอียง
<u> = ตัวขีดเส้นใต้
|
| | TOP | E-Mail | |
| การจัดหน้ากระดาษ |
<html>
<head>
<title>การจัดหน้ากระดาษ</title>
</head>
<body>
<center> text </center>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
<center> ใช้สำหรับ จัดกึ่งกลางหน้ากระดาษ
การใช้ preformatted text<pre>.....</pre>
<html>
<head>
<title>การใช้ preformatted text</title>
</head>
<body>
<pre>
HTML = Hyper Text Markup Language
--------------------------------------------------
Java Script
Java Applet
DHTML
</pre>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
<pre>.....</pre> preformatted text เป็นการจัดตัวอักษรที่ จะมีความกว้างเท่ากันทุกตัวโดยจะแสดงผลในรูปแบบของ fix font เราสามารถจัดหน้าจออย่างไรก็ได้ โดยไม่ต้องใช้ คำสั่ง HTML ใดๆเลย แต่จะสามารถแสดงได้แต่ ภาษาอังกฤษ และใน font ของ fix font เท่านั้น
การจัดกั้นหน้า และ กั้นหลัง<blockquote>
<html>
<head>
<title>การจัดกั้นหน้า และ กั้นหลัง</title>
</head>
<body>
<blockquote><blockquote><blockquote>
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 ทุกขั้นตอน รวมถึงการสมัคร free homepage และการ upload file อย่างละเอียดทุกขั้นตอน รับรองว่าถ้าท่านตั้งใจจะเขียนโฮมเพจจริง อ่านที่นี่สามารถเขียนโฮมเพจได้แน่นอนครับ
</blockquote></blockquote></blockquote>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
<blockquote> ใช้สำหรับตั้งกั้นหน้า และกั้นหลัง โดยทั้ง 2 ฝั่งจะ ห่างจากขอบเท่ากัน หากต้องการให้กั้น หน้า และ หลัง แคบลงก็สามารถใช้ <blockquote> หลายๆครั้งซ้อนกันได้ครับ ถ้าอ่านแล้วยังไม่เข้าใจก็ลองดูตัวอย่างนะครับ
การย่อหน้า<dd>
<html>
<head>
<title>การย่อหน้า</title>
</head>
<body>
<dd>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 ตัวอักษรได้
<dd>ในเพจนี้จะสอนการใช้ภาษา HTML ทุกขั้นตอน รวมถึงการสมัคร free homepage และการ upload file อย่างละเอียดทุกขั้นตอน รับรองว่าถ้าท่านตั้งใจจะเขียนโฮมเพจจริง อ่านที่นี่สามารถเขียนโฮมเพจได้แน่นอนครับ
</body>
</html>
| | ผลลัพธ์ที่ได้ |
<dd> ใช้สำหรับย่อหน้า
|
| | TOP | E-Mail | |
| รูปภาพที่ใช้บนเว็บ |
|
เมื่อเราท่องไปใน internet จะเห็นเว็บไซต์มากมายที่ประกอบด้วยรูปภาพ ซึ่งอาจเรียกได้ว่าเป็นจุดเด่นที่สุด และสำคัญที่สุด ของเว็บไซต์ นั้น อาจจะเป็นโลโก้ ภาพถ่าย หรือแม้แต่ background ซึ่งจะช่วยสร้างสีสันให้ โฮมเพจได้มาก ซึ่งภาพเหล่านั้นก็ได้มาจากการ scan หรือการออกแบบด้วยโปรแกรม graphic ต่างๆเช่น Photoshop , CorelDraw หรือ Paint shop pro สิ่งแรกที่ต้องพิจารณา คือ ชนิดของรูป Graphic ซึ่ง file แต่ละชนิดจะมีขนาด และ ความละเอียดแตกต่างกัน เราจึงต้องเลือก file Graphic ที่เหมาะกับ ภาพที่เรานำมา เพราะถ้า file graphic มีขนาดใหญ่ไป จะทำให้ โฮมเพจ ของเรา load ช้ามาก และทำให้คนอาจไม่เข้าโฮมเพจเราอีก file ที่จะนำมาไว้ในโฮมเพจ ควรมีขนาดไม่เกิน 20KB เพราะถ้ามากกว่านั้นจะทำให้ load ช้ามาก
file graphic ที่ใช้กันทั่วไปในการแสดงใน โฮมเพจ มีอยู่ 2 ชนิดคือ .GIF และ .JPG ซึ่ง file 2 ชนิดนี้มีข้อดีและข้อเสียต่างกัน ควรเลือกให้ดีก่อนจะนำมาไว้ในโฮมเพจ
ไฟล์ GIF (Compuserve Graphic Interchange Format) มีนามสกุล .gif สามารถเก็บความละเอียดได้ไม่เกิน 8 bit มีความละเอียดสูงสุด 64000 x 64000 จุด มีการบีบย่อข้อมูลมาก ทำให้ file.gif มีขนาดไม่ใหญ่มาก แต่สามารถแสดงสีได้สูง สุดเพียง 256 สีเท่านั้น ซึ่งส่วนมากจะใช้สำหรับภาพที่ออกแบบขึ้นเอง ภาพการ์ตูน เพราะจะมีความละเอียดไม่มากนัก และยังสามารถทำเป็นภาพเคลื่อนไหวได้โดยการใช้โปรแกรม Gif animate ต่างๆซึ่งหาได้มากมาย
ไฟล์ JEPG (Joint Photographic Experts Group) มีนามสกุลเป็น .jpg เหมาะสำหรับใช้งาน ภาพ graphic ที่มี ความละเอียดสูงมาก สามารถเก็บรายละเอียดได้ถึง 24 bit สามารถแสดงสีได้สูงสุด ถึง 16.7 ล้านสี file.jpg สามารถกำหนดระดับในการบีบอัดข้อมูลได้ หากต้องการภาพที่มีความละเอียดมากก็ต้อง ใช้ภาพที่มีขนาดใหญ่มาก
เนื่องจาก file.jpg เป็นไฟล์ที่บีบย่อข้อมูลมาก จึงใช้เวลาในการคลายภาพกลับมาใช้ได้ช้ากว่า file.gif file.jpg จะมีขนาด เล็กกว่า file.gif มาก เพราะฉะนั้นจึงนิยมใช้ file.gif สำหรับภาพที่มีขนาดเล็ก และใช้ file.jpg สำหรับภาพที่มีขนาดใหญ่
คำสั่งแสดงรูปภาพ
<img src="URL"> ใช้สำหรับ แสดงรูปภาพในโฮมเพจ โดย ใส่ URL ของรูปภาพลงไป เช่น
<html>
<head>
<title>คำสั่งแสดงรูปภาพ</title>
</head>
<body>
<img src="logo.gif">
<img src="http://www.siamclub.com/logo.gif">
</body>
</html>
| | ผลลัพธ์ที่ได้ |
<img src="logo.gif"> = ในกรณีที่อยู่ใน directory (folder) เดียวกัน สามารถกำหนดชื่อ file ลงไปได้เลย
<img src="http://www.siamclub.com/logo.gif"> = ในกรณีที่ดึงรูปภาพจากโฮมเพจอื่น จำเป็นต้องใส่ URL ให้ครบถ้วน
คำสั่งอธิบายรูปภาพ
<img src="URL" alt="คำอธิบาย"> ใช้สำหรับ อธิบายรูปภาพ เมื่อนำ mouse ไปชี้ที่รูปภาพจะขึ้นคำอธิบาย เช่น
<html>
<head>
<title>คำสั่งอธิบายรูปภาพ</title>
</head>
<body>
<img src="logo.gif" alt="เป็น logo โฮมเพจของผมเองครับ">
</body>
</html>
| | ผลลัพธ์ที่ได้ |
การกำหนดตำแหน่งของรูปภาพ กับ ตัวหนังสือ
<img src="URL" align="ตำแหน่งที่ต้องการ"> คือคำสั่งสำหรับจัด ตัวหนังสือให้พอดีกับรูปภาพ เช่น รูปภาพอยู่ทางซ้ายตัวหนังสือ ก็จะอยู่ด้านขวา ตัวหนังสืออยู่ด้านซ้ายรูปภาพก็จะอยู่ด้านขวา ดังตัวอย่าง
<html>
<head>
<title>การกำหนดตำแหน่งของรูปภาพ กับ ตัวหนังสือ</title>
</head>
<body>
<p><img src="images/ff10.jpg" align="top"> align TOP </p>
<p><img src="images/ff10.jpg" align="absmiddle"> align ABSMIDDLE </p>
<p><img src="images/ff10.jpg" align="middle"> align MIDDLE </p>
<p><img src="images/ff10.jpg" align="absbottom"> align ABSBOTTOM </p>
<p><img src="images/ff10.jpg" align="bottom"> align BOTTOM </p>
<p><img src="images/ff10.jpg" align="left"> align LEFT </p>
<p><img src="images/ff10.jpg" align="right"> align RIGHT </p>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
การกำหนดขนาดรูปภาพ
<img src="URL" width="ความกว้าง" height="ความสูง"> โดยมีหน่วยเป็น pixel หรือความกว้างสามารถกำหนดเป็น % ของจอภาพเพื่อ ให้เป็นสัดส่วนพอดีกับขนาดจริง
<html>
<head>
<title>การกำหนดขนาดรูปภาพ</title>
</head>
<body>
<p><img src="images/ff10.jpg" width="200" height="200"></p>
<p><img src="images/ff10.jpg" width="100" height="300"></p>
<p><img src="images/ff10.jpg" width="250" height="250"></p>
<p><img src="images/ff10.jpg" width="20%"></p>
<p><img src="images/ff10.jpg" width="50%"></p>
<p><img src="images/ff10.jpg" width="200%"></p>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
การกำหนดกรอบรูปภาพ
<img src="URL" border="ความหนาของกรอบ"> โดยมีหน่วยเป็น pixel
<html>
<head>
<title>การกำหนดกรอบรูปภาพ</title>
</head>
<body>
<p><img src="images/ff10.jpg" border="1"></p>
<p><img src="images/ff10.jpg" border="2"></p>
<p><img src="images/ff10.jpg" border="3"></p>
<p><img src="images/ff10.jpg" border="4"></p>
<p><img src="images/ff10.jpg" border="5"></p>
<p><img src="images/ff10.jpg" border="6"></p>
<p><img src="images/ff10.jpg" border="7"></p>
<p><img src="images/ff10.jpg" border="8"></p>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
|
| | TOP | E-Mail | |
| การแสดงผลแบบ list |
การแสดงผลแบบ list แบบมีตัวเลขกำกับ
สำหรับคำสั่งแสดงรายการ แบบมีตัวเลขกำกับนั้น จะใช้ <ol> และใช้ <li> เป็นตัวแสดงข้อมูล หากไม่ได้กำหนดรูปแบบสัญลักษณ์ browser จะแสดงเป็น 1,2,3 ไปเรื่อยๆ
<html>
<head>
<title>การแสดงผลแบบ list แบบมีตัวเลขกำกับ</title>
</head>
<body>
<ol>
<li>HTML
<li>DHTML
<li>JAVA
</ol>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
<ol> ใช้คู่กับ <li> ในการแสดงผลแบบรายการ
เราสามารถกำหนดจุดเริ่มต้นของการนับได้ โดยใช้ <ol type="จำนวนที่ต้องการให้เริ่ม">
<html>
<head>
<title>การแสดงผลแบบ list แบบมีตัวเลขกำกับ</title>
</head>
<body>
<ol type="A">
<li>HTML
<li>DHTML
<li>JAVA
</ol>
<ol type="I">
<li>HTML
<li>DHTML
<li>JAVA
</ol>
<ol type="a">
<li>HTML
<li>DHTML
<li>JAVA
</ol>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
การแสดงผลแบบ list ใช้สัญลักษณ์กำกับ
สำหรับคำสั่งแสดงรายการ แบบมีสัญลักษณ์กำกับนั้น จะใช้ <ul> และใช้ <li> เป็นตัวแสดงข้อมูล เช่นเดียวกับการแสดงข้อมูลแบบมีตัวเลขกำกับ หากไม่ได้กำหนดรูปแบบสัญลักษณ์ browser จะแสดงเป็น จุดทึบสีดำ ดังตัวอย่าง
<html>
<head>
<title>การแสดงผลแบบ list ใช้สัญลักษณ์กำกับ</title>
</head>
<body>
<ul>
<li>HTML
<li>DHTML
<li>JAVA
</ul>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
เราสามารถกำหนดรูปแบบสัญลักษณ์ได้โดยใช้คำสั่ง <ul type="สัญลักษณ์ที่ต้องการ">
<html>
<head>
<title>การแสดงผลแบบ list ใช้สัญลักษณ์กำกับ</title>
</head>
<body>
<ul type="disc">
<li>HTML
<li>DHTML
<li>JAVA
</ul>
<ul type="circle">
<li>HTML
<li>DHTML
<li>JAVA
</ul>
<ul type="square">
<li>HTML
<li>DHTML
<li>JAVA
</ul>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
สัญลักษณ์ต่างๆมีดังนี้
disc = จุดกลมทึบ
circle = จุดกลมใหญ่ ไม่ทึบ
square = สี่เหลี่ยมทึบ
|
| | TOP | E-Mail | |
| การเชื่อมโยงภายในเอกสาร |
การ link ภายในเอกสาร เหมาะสำหรับ file HTML ที่มีความยาวมากๆ จำเป็นต้องมีการ link ภายในเอกสาร เพื่อไม่ให้ เกิดความยุ่งเหยิง สำหรับการ link ภายในเอกสารมีคำสั่งดังนี้
<a href="#เป้าหมาย">.....</a> ข้อความที่ต้องการให้เป็น link
<a name="name">.....</a>ใช้สำหรับกำหนดชื่อของตำแหน่งเป้าหมายโดยแทนลงไปในตัวแปร name
<html>
<head>
<title>การเชื่อมโยงภายในเอกสาร</title>
</head>
<body>
<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> คือภาษาที่ใช้ในการเขียน โฮมเพจ ย่อมาจากคำว่า 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 ตัวอักษรได้
<br><br><br><br><br><br><br><br><br><br><br><br>
<a name="html2">ในเพจนี้จะสอนการใช้ภาษา HTML</a> ทุกขั้นตอน รวมถึงการสมัคร free homepage และการ upload file อย่างละเอียดทุกขั้นตอน รับรองว่าถ้าท่านตั้งใจจะเขียนโฮมเพจจริง อ่านที่นี่สามารถเขียนโฮมเพจได้แน่นอนครับ
<br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
การเชื่อมโยงไปโฮมเพจอื่น
การ link ไปยังโฮมเพจอื่น ใช้คำสั่งดังนี้
<a href="URL">Text link</a> กำหนด URL คือ URL ของโฮมเพจที่จะ link ไปเช่น http://www.siamclub.com ส่วน Text link คือข้อความที่จะ link ไป
<html>
<head>
<title>การเชื่อมโยงไปโฮมเพจอื่น</title>
</head>
<body>
<a href="http://www.siamclub.com">siamclub</a>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
การกำหนดให้ link ขึ้นหน้าต่างใหม่
ทำได้โดยการใช้คำสั่ง<a href="URL" target="blank">Text link</a>
<html>
<head>
<title>การเชื่อมโยงไปโฮมเพจอื่น</title>
</head>
<body>
<a href="http://www.siamclub.com" target="blank">siamclub</a>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
การ link ไปยัง E-mail
ทำได้โดยการใช้คำสั่ง <a href="mailto:E-mail ของเรา">Text link</a>
<html>
<head>
<title>การ link ไปยัง E-mail</title>
</head>
<body>
<a href="mailto:naykeng@hotmail.com">เขียนถึงผม คลิกที่นี่</a>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
การเชื่อมโยงโดยใช้รูปภาพ
การชื่อมโยงโดยใช้รูปภาพ สามารถทำได้โดยใช้คำสั่งในการ link ร่วมกับ คำสั่งในการแสดงรูปภาพดังนี้
<a href="URL"><img src="URL"></a>
<html>
<head>
<title>การเชื่อมโยงโดยใช้รูปภาพ</title>
</head>
<body>
<a href="http://www.finalfantasy.com"><img src="images/ff10.jpg"></a>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
|
| | TOP | E-Mail | |
| พื้นฐานคำสั่งตาราง |
|
การทำตารางมีประโยชน์ต่อการเขียนโฮมเพจมากเนื่องจากเป็นคำสั่งเดียวที่จะสามารถแบ่งข้อมูลออกเป็น 2 ฝั่งได้ ซึ่งเว็บไซต์ดังๆทั่วโลกนิยมใช้คำสั่งตารางกันมาก รูปแบบคำสั่งคือ
<html>
<head>
<title>พื้นฐานคำสั่งตาราง</title>
</head>
<body>
<table>
<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>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
โดยที่
<table> คือคำสั่งสร้างตาราง
<tr> คือคำสั่งกำหนด แถว ของตารางโดยมีคำสั่งย่อยคือ <th> คือหัวข้อของ ข้อมูลใน คอลัมน์ นั้นๆ และ <td> คือข้อมูลในคอลัมน์ นั้น
การกำหนดกรอบของตาราง
การกำหนดกรอบของตารางสามารถทำได้โดยการเพิ่มคำสั่งลงใน <table> ดังนี้
<table border="ความหนาของเส้นตาราง"> หากเราไม่กำหนดเส้นตาราง ค่าจะเป็น 0 คือไม่มีกรอบ ดังตัวอย่างด้านบน จะเห็นว่า ตารางไม่มีกรอบ
<html>
<head>
<title>การกำหนดกรอบของตาราง</title>
</head>
<body>
<table border="2">
<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>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
การกำหนดความกว้าง และความสูงของตาราง
ใช้การเพิ่มคำสั่งลงใน <table> ดังนี้
<table width="ความกว้าง" height="ความสูง"> การกำหนดความกว้างสามารถกำหนดได้ทั้งเป็น % และเป็น pixel แต่ควรจะกำหนดเป็น % จะดีกว่า เนื่องจากจะทำให้คนที่ใช้หน้าจอ ความละเอียดไม่เท่ากัน จะสามารถดูได้ผลใกล้เคียงกันที่สุด
<html>
<head>
<title>การกำหนดความกว้าง และความสูงของตาราง</title>
</head>
<body>
<table width="80%" height="40%">
<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>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
การกำหนดความกว้าง และความสูงของแถวตาราง
ใช้การเพิ่มคำสั่งลงใน <td> ดังนี้
<td width="ความกว้าง" height="ความสูง"> การกำหนดความกว้าง และความสูง ใช้การกำหนดเช่นเดียวกับ การกำหนดความกว้าง และ ความสูงให้กับตาราง
การกำหนดความกว้าง ของคอลัมน์ในตาราง
<td colspan="จำนวนคอลัมน์">
<html>
<head>
<title>การกำหนดความกว้าง ของคอลัมน์ในตาราง</title>
</head>
<body>
<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></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>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
การกำหนด Background ให้ตาราง
ใช้การเพิ่มคำสั่งลงใน <table> , <tr> หรือ <td> ดังนี้
<table background="URL" bgcolor="code สี">
<tr background="URL" bgcolor="code สี">
<td background="URL" bgcolor="code สี">
|
| | TOP | E-Mail | |
| การแบ่งพื้นที่จอภาพ (frame) |
<html>
<head>
<title>การแบ่งพื้นที่จอภาพ (frame)</title>
</head>
<frameset>
คำสั่ง
</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>การแบ่ง frame หลาย frame ซ้อนกัน</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>การกำหนด scroll bar ให้ frame</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
การกำหนด frame ที่ต้องการให้แสดงข้อมูล
ตามปกติ เราสามารถใช้คำสั่ง <a href......> เหมือนที่เคยกล่าวไว้แล้ว ซึ่งเมื่อเรา click ข้อความ(textlink) ที่ตามหลังคำสั่ง <a href....> ก็จะสามารถ link ไปยัง URL ที่ต้องการได้ แต่ในกรณีที่ homepage ของเรามีหลาย frame เราสามารถกำหนดให้ แสดงผลการ link ไปที่ frame ใด frame หนึ่งได้ โดยการเพิ่มคำสั่ง target ดังตัวอย่าง
<a href="URL" target="ชื่อของ frame นั้น(name)">textlink</a>
ชื่อของ frame ก็จะต้องกำหนดไว้ก่อนดังที่แสดงในตัวอย่างในหัวข้อ การแบ่งหน้าจอ ตามแนวตั้ง(ด้านบน) หากตัองการให้แสดงผลเต็มหน้าจอ(ออกจาก frame) ให้ใช้คำสั่ง
<a href="URL" target="top">textlink</a>
|
| | TOP | E-Mail | |
| การสร้างแบบสอบถาม (form) และการกำหนดรูปแบบของช่องรับข้อมูล ชนิดต่าง ๆ |
| การสร้างแบบสอบถามในหน้าเว็บเพจนั้น เราสามารถทำได้ง่าย ๆ โดยการใช้แท็กคำสั่ง <form> เพื่อเริ่มต้นแบบสอบถาม และใช้แท็กคำสั่ง </form> เพื่อสิ้นสุด...แต่ลำพังแท็กคำสั่งเพียงคู่นี้คู่เดียว ยังไม่สามารถเป็นแบบสอบถามที่สมบูรณ์ได้ เราจะต้องมีช่องรับข้อมูล <input type> ที่มีรูปแบบต่าง ๆ กัน มาประกอบด้วย , <input type> ที่สามารถนำมาใช้ในแบบสอบถามได้ มีดังต่อไปนี้ครับ
แบบที่1 การสร้าง Input Type แบบ Text
<html>
<head>
<title>การสร้าง Input Type แบบ Text</title>
</head>
<body>
<form>
Name : ชื่อ - นามสกุล<br>
<input type="text" name="name" size="20" maxlenght="30"><br>
Site URL : ที่อยู่เว็บไชต์ของคุณ<br>
<input type="text" name="site" size="20" maxlenght="30" value="http://"><br>
</form>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
อธิบายคำสั่ง
| <input type="text"> | เป็นการกำหนดให้มีช่องรับข้อมูลแบบ Text |
| name="name" | ชื่อของช่องรับข้อมูล (จะต้องมีชื่อไม่ซ้ำกันหากมีช่องรับข้อมูลมากกว่า 1 ช่อง) |
| size="20" | เป็นการกำหนดความกว้างของช่องรับข้อมูล |
| maxlenght="30" | เป็นการกำหนดความยาวสูงสุดของข้อมูล (จำนวนตัวอักษร) |
| value="http://" | เป็นการกำหนดค่าเบื้องต้น ให้กับช่องรับข้อมูล
|
แบบที่2 การสร้าง Input Type แบบ Checkbox
<html>
<head>
<title>การสร้าง Input Type แบบ Checkbox</title>
</head>
<body>
<form>
หัวข้อใดที่เกี่ยวข้องกับโฮมเพจของคุณ (เลือกได้มากกว่า1 ข้อ)<br>
<input type="checkbox" name="homepage" checked >เกี่ยวกับโฮมเพจ<br>
<input type="checkbox" name="picture">เกี่ยวกับรูปภาพ<br>
<input type="checkbox" name="media">เกี่ยวกับบันเทิง<br>
<input type="checkbox" name="news">เกี่ยวกับข่าว<br>
<input type="checkbox" name="techno" disabled >เกี่ยวกับวิชาการ<br>
<input type="checkbox" name="sex" disabled >เกี่ยวกับรูปโป็<br>
</form>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
อธิบายคำสั่ง
| <input type="checkbox"> | เป็นการกำหนดให้มีช่องรับข้อมูลแบบ Checkbox |
| name="homepage" | ชื่อของปุ่มรับข้อมูล (จะต้องมีชื่อไม่ซ้ำกันหากมีปุ่มรับข้อมูลมากกว่า 1 ปุ่ม) |
| checked | เป็นการกำหนดให้มีการเลือกปุ่มรับข้อมูลนี้โดยอัตโนมัติ |
| disabled | เป็นการกำหนดไม่ให้มีการเลือกปุ่มรับข้อมูลนี้ |
แบบที่3 การสร้าง Input Type แบบ Radio
<html>
<head>
<title>การสร้าง Input Type แบบ Radio</title>
</head>
<body>
<form>
คุณอายุเท่าใด (เลือกเพียงข้อใดข้อหนึ่งเท่านั้น)<br>
<input type="radio" name="age" value="16-20" checked>16-20 ปี<br>
<input type="radio" name="age" value="21-25">21-25 ปี<br>
<input type="radio" name="age" value="26-30">26-30 ปี<br>
<input type="radio" name="age" value="31-35">31-35 ปี<br>
<input type="radio" name="age" value="36-40">36-40 ปี<br>
<input type="radio" name="age" value="41-45">41-45 ปี<br>
<input type="radio" name="age" value="46-50" disabled>46-50 ปี<br>
</form>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
อธิบายคำสั่ง
| <input type="radio"> | เป็นการกำหนดให้มีช่องรับข้อมูลแบบ Radio |
| name="age" | ชื่อของปุ่มรับข้อมูล (ต้องเป็นชื่อเดียวกันทุกปุ่ม) |
| value="16-20" | เป็นการกำหนดค่าหรือข้อมูลให้กับปุ่มรับข้อมูล |
| checked | เป็นการกำหนดให้มีการเลือกปุ่มรับข้อมูลนี้เป็นเบื้องต้น |
| disabled | เป็นการกำหนดไม่ให้มีการเลือกปุ่มรับข้อมูลนี้
|
การสร้างช่องรับข้อมูลชนิดพิเศษ
นอกเหนือจากช่องรับข้อมูลทั้ง 3 ชนิดแล้ว เรายังสามารถกำหนดช่องรับข้อมูลชนิดพิเศษได้ อีก3 แบบ ซึ่งก็คือ <input type="password"> , <textarea> และ <select> ซึ่งช่องรับข้อมูลชนิดพิเศษนี้ จะช่วยทำให้แบบสอบถามทำงานได้อย่างมีประสิทธิภาพมากยิ่งขึ้น
การสร้างช่องรับข้อมูลชนิดพิเศษ แบบที่1 Input type แบบ Password
<html>
<head>
<title>การสร้างช่องรับข้อมูลชนิดพิเศษ แบบที่1 Input type แบบ Password</title>
</head>
<body>
<form>
Username : ชื่อสมาชิก<br>
<input type="text" name="name" size="30" ><br>
Password : รหัสผ่านของคุณ<br>
<input type="password" name="pass" size="30" ><br>
</form>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
อธิบายคำสั่ง
| <input type="text"> | เป็นการกำหนดให้มีช่องรับข้อมูลแบบ Text |
| <input type="password"> | เป็นการกำหนดให้มีช่องรับข้อมูลแบบ Password |
| หมายเหตุ : | ในช่องรับข้อมูลแบบ Password เมื่อป้อนข้อมูลจะเห็นตัวอักษรเป็น ****
|
การสร้างช่องรับข้อมูลชนิดพิเศษ แบบที่2 Textarea
<html>
<head>
<title>การสร้างช่องรับข้อมูลชนิดพิเศษ แบบที่2 Textarea</title>
</head>
<body>
<form>
คำแนะนำหรือติชม<br>
<textarea name="comment" rows="5" cols="50" wrap="virtual">
ข้อความที่จะแสดงในกรอบ
</textarea>
</form>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
อธิบายคำสั่ง
| <textarea> | เป็นการกำหนดให้มีช่องรับข้อมูลแบบ Textarea |
| name="comment" | ชื่อของช่องรับข้อมูล (Field Name) |
| rows="5" | เป็นการกำหนดจำนวนบรรทัดของช่องรับข้อมูล |
| cols="50" | เป็นการกำหนดความกว้างชองช่องรับข้อมูล |
| wrap="virtual" | เป็นการกำหนดให้มีการตัดคำของข้อมูลโดยอัตโนมัติ |
| </textarea> | แสดงจุดสิ้นสุดของช่องรับข้อมูลแบบ Textarea
|
การสร้างช่องรับข้อมูลชนิดพิเศษ แบบที่3 Select Option
<html>
<head>
<title>การสร้างช่องรับข้อมูลชนิดพิเศษ แบบที่3 Select Option</title>
</head>
<body>
<form>
<select name="city" size="1">
<option value="น่าน">น่าน</option>
<option value="กรุงเทพ" selected>กรุงเทพ</option>
<option value="กระบี่">กระบี่</option>
<option value="แพร่">แพร่</option>
</select>
</form>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
อธิบายคำสั่ง
| <select> | เป็นการกำหนดให้มีช่องรับข้อมูลแบบ Select |
| name="city" | ชื่อของช่องรับข้อมูล (Field Name) |
| size="1" | เป็นการกำหนดความกว้างของช่องรับข้อมูล (จำนวนบรรทัด) |
| <option value="น่าน"> | เป็นการกำหนดตัวเลือกให้กับช่องรับข้อมูล |
| selected | เป็นการกำหนดให้เลือกข้อมูลนี้เป็นอันดับแรก |
| </select> | แสดงจุดสิ้นสุดของช่องรับข้อมูลแบบ Select
|
การสร้างปุ่ม ส่งข้อมูล (submit) และปุ่ม ลบพิมพ์ใหม่ (reset)
หลังจากที่ได้เรียนรู้เกี่ยวกับวิธีการสร้างแบบสอบถาม <FORM> และการใช้ช่องรับข้อมูล <TYPE> แบบต่างๆ เรียบร้อยแล้ว เราจะมาเรียนรู้ถึงวิธีการสร้างปุ่ม ส่งข้อมูล (ส่งข้อมูลในแบบสอบถามไปยัง Server เพื่อทำการประมวลผล โดยโปรแกรม CGI หรือ ส่งข้อมูลในแบบสอบถามมาให้เราทางอีเมล์ เป็นต้น) และ ปุ่ม ลบพิมพ์ใหม่ โดยในตัวอย่างต่อไปนี้ จะยังไม่มีการส่งข้อมูล ออกไปจริง ๆ เพียง แต่เป็นการสาธิตให้เห็นถึงวิธีการสร้างปุ่มเท่านั้น แต่อย่างไรก็ตามคุณสามารถทดสอบการทำงานของปุ่มทั้งสองนี้ได้ครับ ส่วนผลลัพธ์ก็คือ ถ้าคุณคลิ๊กที่ปุ่ม ส่งข้อมูล Browser จะทำการ Refresh/Reload เว็บเพจหน้านี้ ใหม่ (เพื่อแสดงให้ทราบว่าข้อมูลถูกส่งไปแล้ว - ส่งปลอม ๆ) และถ้าคุณคลิ๊กที่ปุ่ม ลบพิมพ์ใหม่ ข้อมูลที่คุณพิมพ์ไว้ในแบบสอบถามจะถูกลบออกไปครับ
<html>
<head>
<title>การสร้างปุ่ม ส่งข้อมูล (submit) และปุ่ม ลบพิมพ์ใหม่ (reset)</title>
</head>
<body>
<form>
Name : ชื่อ - นามสกุล<br>
<input type="text" name="name" size="30"><br>
E-mail : ที่อยู่อีเมล์ของคุณ<br>
<input type="text" name="email" size="30"><br>
คำแนะนำ/เสนอแนะ/ติชม : (เพื่อปรับปรุงเว็บไซต์ครั้งต่อไป)<br>
<textarea name="comment" rows="5" cols="50" wrap="virtual">
</textarea><p>
<input type="submit" value="ส่งข้อมูล">
<input type="reset" value="ลบพิมพ์ใหม่">
</form>
</body>
</html>
| | ผลลัพธ์ที่ได้ |
อธิบายคำสั่ง
| <input type="submit"> | เป็นการกำหนดให้ Browser ส่งข้อมูลในแบบสอบถาม ไปยัง Server |
| <input type="reset"> | เป็นการกำหนดให้ Browser ลบข้อมูลที่พิมพ์ทั้งหมด |
| value="ส่งข้อมูล" | เป็นการกำหนดข้อความที่ใช้แสดงปุ่ม
|
|