Html
- 2. 1. กาหนด Font ที่ใช้ใน Webpage
2. การกาหนดรูปแบบของตัวอักษร
3. การกาหนดขนาดตัวอักษร
4. การเน้นสีให้กับข้อความหรือตัวอักษร
5. กาหนดสีตัวอักษร สีแบล็คกราว
6. การจัดวางตาแหน่งข้อความ
7. การจัดลาดับหัวข้อ และเนื้อหาโดย (UL)
8. การจัดลาดับหัวข้อ และเนื้อหาโดย (OL)
9. การจัดลาดับห้วข้อและเนื้อหาโดยใช้ DL
10. การใส่รูปภาพประกอบเว็บเพจ (ไม่มีกรอบ)
11. การใส่รูปภาพประกอบเว็บเพจ (มีกรอบ)
12. การจัดตาแหน่งรูปและข้อความ แบบ 1
13. การจัดตาแหน่งรูปและข้อความ แบบ 2
14. การทาฉากหลังในหน้าเว็บเพจ
15. ใส่เพลงในหน้าเว็บเพจ
16. การเชื่อมโยง Link ในหน้าเว็บเพจเดียวกัน
17. ทา link ไปยังหน้าเว็บเพจอื่น หรือเว็บไซต์อื่น
18. ทา link โดยใช้รูปภาพแทน
19. การทา link แบบเปิด windows ใหม่
20. ทา link เพื่อใช้ส่งอีเมล
21. การสร้างแบบสอบถาม แบบ 1 text
22. การสร้างแบบสอบถาม แบบ 2 REDIO
23. การสร้างแบบสอบถาม แบบ 3 CHECKBOX
24. ช่องรับข้อมูลชนิดพิเศษ (1) "<INPUT TYPE=PASSWORD">
25. ช่องรับข้อมูลชนิดพิเศษ (2) "TEXTAREA"
26. ช่องรับข้อมูลชนิดพิเศษ (3) "SELECT OPTION“
27. การสร้างปุ่ม ส่งข้อมูล และ ปุ่ม ลบพิมพ์ใหม่
- 3. กาหนด Font ที่ใช้ใน Webpage
<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<FONT FACE="AngsanaUPC">
Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
</FONT>
<FONT FACE="JasmineUPC">
Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
</FONT>
<FONT FACE="IrisUPC">
Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
</FONT>
</BODY>
</HTML>
- 4. • ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
อธิบายคาสั่ง
<FONT FACE="ชื่อฟ้อนต์ที่ใช้"> เป็นคาสั่งที่ใช้กาหนดฟ้อนต์ที่จะใช้ในเว็บเพจ
</FONT> เป็นคาสั่งปิดที่ต้องใช้คู่กันเสมอ
- 5. การกาหนดรูปแบบของตัวอักษร
<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
Hello World, นี่คือเว็บเพจแรกของฉัน<P>
<B> Hello World, นี่คือเว็บเพจแรกของฉัน</B><P>
<I> Hello World, นี่คือเว็บเพจแรกของฉัน</I><P>
<S> Hello World, นี่คือเว็บเพจแรกของฉัน</S><P>
<U> Hello World, นี่คือเว็บเพจแรกของฉัน</U><P>
ข้อความแบบ Super Script E=MC<SUP>2</SUP><P>
ข้อความแบบ Sub Script H<SUB>2</SUB>O<P>
</BODY>
</HTML>
- 6. • ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
ข้อความแบบ Super Script E=MC2
ข้อความแบบ Sub Script H2O
อธิบายคาสั่ง
<B></B> เป็นคาสั่งที่ใช้กาหนดรูปแบบตัวอักษร-ตัวเข้ม
<I></I> เป็นคาสั่งที่ใช้กาหนดรูปแบบตัวอักษร-ตัวเอียง
<S></S> เป็นคาสั่งที่ใช้กาหนดรูปแบบตัวอักษร-ตัวขีดฆ่า
<U></U> เป็นคาสั่งที่ใช้กาหนดรูปแบบตัวอักษร-ตัวขีดเส้นใต้
<SUP></SUP> เป็นคาสั่งที่ใช้กาหนดรูปแบบ Super Script
<SUB></SUB> เป็นคาสั่งที่ใช้กาหนดรูปแบบ Sub Script
- 7. การกาหนดขนาดตัวอักษร
<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<FONT SIZE=6>
Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
</FONT>
<FONT SIZE=5>
Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
</FONT>
<FONT SIZE=4>
Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
</FONT>
<FONT SIZE=2>
Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
</FONT>
</BODY>
</HTML>
- 8. • ผลลัพธ์ที่ได้
• Hello World, FONT SIZE = 6
• Hello World, FONT SIZE = 5
• Hello World, FONT SIZE = 4
• Hello World, FONT SIZE = 2
• อธิบายคาสั่ง
• <FONT SIZE=ขนาดตัวอักษร> เป็นคาสั่งที่ใช้กาหนดขนาดตัวอักษรที่จะใช้ในเว็บเพจ
• ขนาดตัวอักษร สามารถกาหนดได้ตั้งแต่ 1 - 7
• </FONT> เป็นคาสั่งปิดที่ต้องใช้คู่กันเสมอ
- 9. การเน้นสีให้กับข้อความหรือตัวอักษร
<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<FONT COLOR=RED>
Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
</FONT>
<FONT COLOR=GREEN>
Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
</FONT>
<FONT COLOR=BLUE>
Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
</FONT>
<FONT COLOR=VIOLET>
Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
</FONT>
<FONT COLOR=YELLOW>
Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
</FONT>
</BODY>
</HTML>
- 10. • ผลลัพธ์ที่ได้
• Hello World, นี่คือเว็บเพจแรกของฉัน
• Hello World, นี่คือเว็บเพจแรกของฉัน
• Hello World, นี่คือเว็บเพจแรกของฉัน
• Hello World, นี่คือเว็บเพจแรกของฉัน
• Hello World, นี่คือเว็บเพจแรกของฉัน
• อธิบายคาสั่ง
• <FONT COLOR="ชื่อสี"> เป็นคาสั่งที่ใช้กาหนดสีให้กับตัวอักษรที่จะใช้ในเว็บเพจ
• </FONT> เป็นคาสั่งปิดที่ต้องใช้คู่กันเสมอ
• ชื่อสีที่ใช้สามารถใช้ชื่อสีเช่น Blue, White, Red หรือจะใช้เป็นรหัสสีตามเลขฐาน 16 ก็ได้
• เช่น #66FFFF, FFFF99, FFCCFF เป็นต้น
- 11. กาหนดสีตัวอักษร สีแบล็คกราว
<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY TEXTCOLOR="black" BGCOLOR="lightblue">
Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
</BODY>
</HTML>
-------------------------------------------------------------------
อธิบายคาสั่ง
<BODY TEXTCOLOR="ชื่อสี" BGCOLOR="ชื่อสี">
TEXTCOLOR ใช้กาหนดสี Default ให้กับตัวอักษรทั้งหมดภายในเอกสาร
BGCOLORใช้กาหนดสีแบล็คกราวด์ของเอกสาร กาหนดได้เพียงครั้งละหนึ่งสี
- 12. การจัดวางตาแหน่งข้อความ
<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<P ALIGN=LEFT>Hello World, นี่คือเว็บเพจแรกของฉัน</P>
<P ALIGN=CENTER>Hello World, นี่คือเว็บเพจแรกของฉัน</P>
<P ALIGN=RIGHT>Hello World, นี่คือเว็บเพจแรกของฉัน</P>
</BODY>
</HTML>
---------------------------------------------
อธิบายคาสั่ง
<P> เป็นการสั่งให้ขึ้นย่อหน้าใหม่ (ปกติจะอยู่ชิดซ้ายเสมอ)
<P ALIGN=LEFT> กาหนดให้ข้อความอยู่ชิดด้านซ้าย
<P ALIGN=CENTER> กาหนดให้ข้อความอยู่กึ่งกลางเอกสาร
<P ALIGN=RIGHT> กาหนดให้ข้อความอยู่ชิดด้านขวา
</P> เป็นคาสั่งปิดที่ต้องใช้คู่กันเสมอ (เมื่อใช้ <P ALIGN>)
- 13. การจัดลาดับหัวข้อ และเนื้อหาโดย (UL)
<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
การจัดหัวข้อโดยใช้ <UL TYPE="disc"><BR>
<UL TYPE="disc">
<LI>INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner</LI>
<LI>CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สาคัญที่สุด</LI>
<LI>OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter</LI>
</UL>
การจัดหัวข้อโดยใช้ <UL TYPE="square"><BR>
<UL TYPE="square">
<LI>INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner</LI>
<LI>CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สาคัญที่สุด</LI>
<LI>OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter</LI>
</UL>
การจัดหัวข้อโดยใช้ <UL TYPE="circle"><BR>
<UL TYPE="circle">
<LI>INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner</LI>
<LI>CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สาคัญที่สุด</LI>
<LI>OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter</LI>
</UL>
</BODY>
</HTML>
- 14. • อธิบายคาสั่ง
• <UL> เริ่มต้นลาดับข้อมูล
• TYPE=".." เครื่องหมายลาดับข้อมูล ได้แก่ disc, square และ circle โดย
จะมี disc เป็นค่า Default
• <LI> เริ่มต้นข้อมูลใน List
• </LI> สิ้นสุดข้อมูลใน List
• </UL> สิ้นสุดการลาดับข้อมูล
- 15. การจัดลาดับหัวข้อ และเนื้อหาโดย (OL)
<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
การจัดหัวข้อโดยใช้ <OL><BR>
<OL>
<LI>INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner</LI>
<LI>CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สาคัญที่สุด</LI>
<LI>OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter</LI>
</OL>
การจัดหัวข้อโดยใช้ <OL TYPE="A"><BR>
<OL TYPE="A">
<LI>INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner</LI>
<LI>CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สาคัญที่สุด</LI>
<LI>OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter</LI>
</OL>
การจัดหัวข้อโดยใช้ <OL TYPE="I"><BR>
<OL TYPE="I">
<LI>INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner</LI>
<LI>CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สาคัญที่สุด</LI>
<LI>OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter</LI>
</OL>
</BODY>
</HTML>
- 16. ผลลัพธ์ที่ได้
การจัดหัวข้อโดยใช้ <OL>
1.INPUT UNITหรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner
2.CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สาคัญที่สุด
3.OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter
การจัดหัวข้อโดยใช้ <OL TYPE="A">
A.INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner
B.CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สาคัญที่สุด
C.OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter
องการจัดหัวข้อโดยใช้ <OL TYPE="I">
I.INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner
II.CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สาคัญที่สุด
III.OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter
อธิบายคาสั่ง
<OL> เริ่มต้นลาดับข้อมูล
กาหนดเครื่องหมายเพื่อใช้ในการลาดับข้อมูล ได้แก่ A, a, I, i ถ้าไม่กาหนด
TYPE="A" จะเริ่มต้นด้วย 1 เสมอ
<LI> เริ่มต้นข้อมูลใน List
</LI> สิ้นสุดข้อมูลใน List
</OL> สิ้นสุดการลาดับข้อมูล
- 17. การจัดลาดับห้วข้อและเนื้อหาโดยใช้ DL
<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
องค์ประกอบที่สาคัญของคอมพิวเตอร์ มีดังต่อไปนี้<BR>
<DL>
<DT>INPUT UNIT</DT>
<DD>หน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner</DD>
<DT>CENTRAL PROCESSING UNIT<DT>
<DD>CPU หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สาคัญที่สุด</DD>
<DT>OUTPUT UNIT</DT>
<DD>หน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter</DD>
</DL>
</BODY>
</HTML>
อธิบายคาสั่ง
<DL> เริ่มต้นลาดับข้อมูล
<DT> คาจากัดความ
<DD> ความหมายหรือคาอธิบาย
- 18. การใส่รูปภาพประกอบเว็บเพจ (ไม่มีกรอบ)
• <HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
•
<BODY>
<CENTER>
นี่คือภาพดาราคนโปรดของฉัน><BR>
<IMG SRC="mypic.gif" BORDER=0 WIDTH=120 HIGHT=120
ALT="Super Star"><BR>
ลองทายดูซิว่าเธอคือใคร<BR>
</CENTER>
•
</BODY>
</HTML>
- 19. การใส่รูปภาพประกอบเว็บเพจ (มีกรอบ)
• <HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
•
<BODY>
<CENTER>
นี่คือภาพดาราคนโปรดของฉัน><BR>
<IMG SRC="mypic.gif" BORDER=2 WIDTH=120 HIGHT=120
ALT="Super Star"><BR>
ลองทายดูซิว่าเธอคือใคร<BR>
</CENTER>
</BODY>
</HTML>
- 20. • อธิบายคาสั่ง..
•
<IMG> เป็นการบอกให้รู้ว่านี่คือแท็กรูปภาพ
SRC="ชื่อไฟล์รูปภาพ" ชื่อของรูปภาพที่จะนามาประกอบเว็บเพจ (ต้องระบุ)
BORDER=0 กาหนดให้มีหรือไม่มีเส้นขอบรอบรูปภาพ 0=ไม่มีเส้นขอบ (ค่าปกติ)
WIDTH=120 กาหนดขนาดความกว้างของรูปภาพ (Pixel) (ไม่ต้องกาหนดก็ได้)
HEIGHT=120 กาหนดขนาดความสูงของรูปภาพ (Pixcel) (ไม่ต้องกาหนดก็ได้)
ALT="คาอธิบาย" คาอธิบายนี้จะแสดงในกรณีที่ไม่สามารถแสดงรูปภาพได้ หรือเมื่อวางเมาส์บนรูปภาพ
การใช้แท็กแบบย่อ ๆ <IMG SRC="mypic.gif"> จะได้ผลลัพธ์คือไม่มีเส้นขอบ
- 21. การจัดตาแหน่งรูปและข้อความ แบบ 1
• <HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
•
<BODY>
<CENTER>
<IMG SRC="smicon7.gif" BORDER=0 ALIGN=LEFT>
<FONT COLOR="Blue">
ห้องสนทนา Chat คือแหล่งรวมชุมชนคนออนไลน์ ที่กลุ่มวัยรุ่นสมัยนี้มักจะนิยมกันมาก...แต่จะว่าไป
แล้วคนที่จะเข้าห้องสนทนาบ่อยๆ นั้นโดยมากจะต้องเป็นผูที่ช่างคิดช่างเจรจา และที่สาคัญจะต้อง
้
พิมพ์ดีดคล่องด้วย<BR>
</FONT>
</CENTER>
•
</BODY>
</HTML>
• ผลลัพธ์ที่ได้ รูปที่ (1) ALIGN=LEFT กาหนดให้รูปภาพอยู่ทางด้านซ้ายของข้อความ
- 22. การจัดตาแหน่งรูปและข้อความ แบบ 2
• <HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
•
<BODY>
<CENTER>
<IMG SRC="smicon7.gif" BORDER=0 ALIGN=RIGHT>
<FONT COLOR="Blue">
ห้องสนทนา Chat คือแหล่งรวมชุมชนคนออนไลน์ ที่กลุ่มวัยรุ่นสมัยนี้มักจะนิยมกันมาก...แต่จะว่าไปแล้วคนที่จะเข้าห้องสนทนา
บ่อยๆ นั้นโดยมากจะต้องเป็นผู้ที่ช่างคิดช่างเจรจา และที่สาคัญจะต้องพิมพ์ดีดคล่องด้วย<BR>
</FONT>
• </CENTER>
•
</BODY>
</HTML>
• --------------------------------------------------------------
• อธิบายคาสั่ง..
•
ALIGN=LEFT กาหนดให้รูปภาพอยู่ทางด้านซ้ายของข้อความ (Default)
ALIGN=RIGHT กาหนดให้รูปภาพอยู่ทางด้านขวาของข้อความ
ALIGN=TEXTTOP กาหนดให้ขอบบนของรูปภาพในอยู่ระดับเดียวกันกับขอบบนของข้อความ (ไม่ค่อยได้ใช้)
ALIGN=BOTTOM กาหนดให้ขอบล่างของรูปภาพในอยู่ระดับเดียวกันกับขอบบนของข้อความ (ไม่ค่อยได้ใช้)
- 23. การทาฉากหลังในหน้าเว็บเพจ
•
<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY BACKGROUND="paperln.gif">
• <-- ใส่เนื้อหาของเว็บเพจตรงนี้ครับ -->
• </BODY>
</HTML>
• ผลลัพธ์ที่ได้..
•
ตามตัวอย่างนี้ ท่านจะเห็นภาพฉากหลังที่เป็นเส้นสีฟ้า ๆ ครับ
• อธิบายคาสั่ง..
• BACKGROUND="ชื่อรูปภาพ" เป็นการกาหนดให้นารูปภาพมาเป็นฉากหลังในหน้าเว็บเพจ
- 24. ใส่เพลงในหน้าเว็บเพจ
• <HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
•
<BODY>
<BGSOUND SRC="nice.mid" LOOP="Infinite">
</BODY>
•
</HTML>
อธิบาย
เป็นแท็กคาสั่งเพื่อบอกให้เบราส์เซอร์รู้ว่าจะต้องดาวน์โหลด
BGSOUND เพลงมาบรรเลงประกอบหน้าเว็บเพจ
เป็นการกาหนดแหล่งที่เก็บและชื่อเพลงที่ต้องการให้เบราส์
SRC="ชื่อเพลง"
เซอร์ดาวน์โหลดมาบรรเลง
เป็นการกาหนดให้เบราส์เซอร์เล่นเพลงไปเรื่อยๆ ถ้าไม่
LOOP="infinite" ต้องการให้ลบข้อความนี้ออกไปครับ
- 25. การเชื่อมโยง Link ในหน้าเว็บเพจเดียวกัน
• HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
• กรุณาเลือกหัวข้อที่ต้องการ
• 1. <A HREF="#history">ประวัติความเป็นมา</A><br>
2. <A HREF="#operation">รูปแบบทั่วไปและลักษณะของ Web</A><br>
3. <A HREF="#referance">คาขอบคุณ</A><p>
• 1. <A NAME="history">ประวัติความเป็นมา</A><br>
ประมาณปลายปี พ.ศ. 2539 เมื่ออินเตอร์เน็ตเข้ามามีบทบาทในประเทศไทยมากขึ้น (อันที่จริงมีมาก่อนหน้านั้นแล้ว แต่จากัดอยู่ในวงแคบ) ข้าพเจ้า
(นายทะเบียน) ก็ได้เป็นผู้หนึ่งที่สนใจและเริ่มศึกษาวิธีการใช้งานตลอดจนวิธีการเขียนเว็บเพจโดยใช้ภาษา HTML จนสามารถมีเว็บไซต์เป็น ของตนเองได้ ซึ่ง
เว็บไซต์แรกที่ทาขึ้นนั้น เป็นเว็บไซต์ให้บริการดาวน์โหลดเพลงไทยเดิมในรูปแบบของ Midi (ตาหนักเพลงไทยเดิม) และรูปภาพต่าง ๆ ที่เกี่ยวกับประเทศไทย
โดยจัดทาเป็นภาษาอังกฤษ เพราะเมื่อ 3-4 ปีที่แล้ว Web Browser (IE) ยังแสดงผลภาษาไทยได้ไม่ค่อยดีนัก ....<p>
• 2. <A NAME="operation">รูปแบบทั่วไปและลักษณะของ Web</A><br>
รูปแบบของการนาเสนอโดยทั่วไป ส่วนใหญ่จะเน้นการให้ความรู้ และบริการ แด่สมาชิก ซึ่งได้แก่ การสอนเขียนเว็บเพจด้วย HTML, การทาเว็บ
เพจให้ดูมีชีวิตชีวาด้วย JavaScript, การสมัครขอพื้นที่ฟรีเพื่อจัดทาเว็บไซต์ (Hypermart), การจดโดเมนเนม, การย้ายโดเมนเนม (Hypermart)
การโปรโมทเว็บไซต์, การหารายได้จากเว็บไซต์, บริการเว็บเบสอีเมล์ฟรี, บริการส่งบัตรอวยพร, บริการกระดานข่าว, บริการกระดานซื้อ-ขาย, บริการ กระดานรับ
สมัครงาน, แหล่งรวมบริการฟรีต่าง ๆ สาหรับเว็บมาสเตอร์ และอื่นๆ อีกมากมาย...<p>
• 3. <A NAME="referance">คาขอบคุณ</A><br>
หากท่านเป็นอีกผู้หนึ่ง ที่รู้สึกชื่นชอบและสนับสนุนเว็บเพจภาษาไทย หรือต้องการเผยแพร่เว็บเพจภาษาไทยของท่านเอง ชมรมเว็บเพจไทย มีความ
ยินดีที่จะขอเชิญท่านร่วม สมัครเป็นสมาชิกฟรี โดยไม่เสียค่าใช้จ่ายอย่างใดทั้งสิ้น และหากท่าน ต้องการทราบข่าวสาร การอัพเดทไซท์ และข่าวสารอื่น ๆ ที่ เป็น
ประโยชน์ กรุณาแจ้ง ที่อยู่อีเมล์ ของท่านด้วยครับ (ชมรมฯ จะส่ง จดหมายข่าว ให้กับเฉพาะสมาชิกที่ต้องการ เท่านั้น) อนึ่งสาหรับท่านที่เป็นเว็บมาสเตอร์ ขอเชิญ
แลกเปลี่ยนลิงค์กันได้ครับ...<p>
• </BODY>
</HTML>
- 26. ส่วนที่ 1 กาหนดข้อความลิ้งค์ (ต้นทาง)
<A แท็กคาสั่งเริ่มต้นเพื่อบอกเบราส์เซอร์ให้รู้ว่านี่คือลิ้งค์
HREF="#ชื่อหัวข้อ" ชื่อหัวข้อหรือตาแหน่ง ของข้อความที่ต้องการลิ้งค์ (ต้องระบุ)
> อย่าลืมปิดท้ายด้วยเครื่องหมาย ">" นี้ทุกครั้ง
ข้อความ ข้อความที่ใช้แสดงว่านี่คือลิ้งค์
</A> แท็กปิดท้ายข้อความลิ้งค์
ส่วนที่ 2 กาหนดชื่อหรือตาแหน่งของลิ้งค์ (ปลายทาง)
<A แท็กคาสั่งเริ่มต้นเพื่อบอกเบราส์เซอร์ให้รู้ว่านี่คือลิ้งค์
NAME="ชื่อหัวข้อ" ชื่อหัวข้อหรือตาแหน่งปลายทางของลิ้งค์ (ต้องระบุ)
> อย่าลืมปิดท้ายด้วยเครื่องหมาย ">" นี้ทุกครั้ง
ข้อความ ข้อความที่ใช้แสดงเป็นหัวข้อและตาแหน่งปลายทาง
</A> แท็กปิดท้ายข้อความลิ้งค์
- 27. ทา link ไปยังหน้าเว็บเพจอื่น หรือเว็บไซต์อื่น
• <HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
•
<BODY>
• กรุณาเลือกหัวข้อทีท่านต้องการ<BR>
่
<UL>
<LI><A HREF="index.shtml">คุยกันก่อนหน้าแรก</A></LI>
<LI><A HREF="purpose.shtml">วัตถุประสงค์การก่อตั้งฯ</A></LI>
<LI><A HREF="http://wsabstract.com/cutpastejava.shtml">Free
JavaScripts!</A></LI>
<LI><A HREF="http://www.scriptsolutions.com/home.html">Script
Solutions</A></LI>
</UL>
• </BODY>
•
</HTML>
• ------------------------------------------------
• อธิบายคาสั่ง..
• <A แท็กคาสั่งเริ่มต้นเพื่อบอกเบราส์เซอร์ให้รู้ว่านีคือลิ้งค์
่
HREF="ชื่อไฟล์/ที่อยู่ URL" ชื่อไฟล์/ที่อยู่เว็บไซต์ปลายทางที่ต้องการเชื่อมโยงไปถึง (ต้องระบุ)
> อย่าลืมปิดท้ายด้วยเครื่องหมาย ">" นี้ทุกครั้ง
ข้อความ ข้อความที่ใช้แสดงว่านี่คือลิ้งค์
</A> แท็กปิดท้ายข้อความลิ้งค์
- 28. ทา link โดยใช้รูปภาพแทน
• <HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
• <!-- ลิ้งค์โดยใช้รูปภาพที่มีอยู่ในเว็บไซต์ของเราเอง -->
<A HREF="index.shtml"><IMG SRC="nav_home_off.gif"></A>
<A HREF="sitmap.shtml"><IMG SRC="nav_sitemap_off.gif"></A>
<!-- ลิ้งค์โดยใช้รูปภาพจากเว็บไซต์อื่นที่เป็นเว็บไซต์ปลายทาง -->
<A HREF="http://www.mthai.com"><IMG
SRC="http://www.mthai.com/mthai.gif"></A>
<A HREF="http://www.happy-box.com"><IMG SRC=http://www.happy-
box.com/box.gif"></A>
• </BODY>
</HTML>
<A แท็กคาสั่งเริ่มต้นเพื่อบอกเบราส์เซอร์ให้รู้ว่านี่คือลิ้งค์
HREF="ชื่อไฟล์/ที่อยู่ URL" ชื่อไฟล์/ที่อยู่เว็บไซต์ปลายทางที่ต้องการเชื่อมโยงไปถึง (ต้องระบุ)
> อย่าลืมปิดท้ายด้วยเครื่องหมาย ">" นี้ทุกครั้ง
รูปภาพ รูปภาพที่ใช้แสดงว่านี่คือลิ้งค์ (ดูรายละเอียดคาสั่ง IMG ในบทที่ 11)
</A> แท็กปิดท้ายข้อความลิ้งค์
- 29. การทา link แบบเปิด windows ใหม่
• <HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
• กรุณาเลือกหัวข้อที่ทานต้องการ<BR>
่
<UL>
<!-- ลิ้งค์ภายในเว็บไซต์เดียวกัน แต่เปิดเป็นหน้าต่างใหม่ -->
<LI><A HREF="javachart.shtml" TARGET="_blank">โรงเรียนวิเศษไชยชาญ"ตันติ
วิทยาภูมิ"</A></LI>
<LI><A HREF="seamsee.shtml" TARGET="_blank">เซียมซีเสี่ยงโชค
</A></LI>
<!-- ลิ้งค์ไปเว็บไซต์อื่น โดยเปิดเป็นหน้าต่างใหม่ -->
<LI><A
HREF="http://www.hunsa.com" TARGET="_blank">Hunsa.Com</A></LI
>
<LI><A
HREF="http://www.mthai.com" TARGET="_blank">Mthai.Com</A></LI>
</UL>
• </BODY>
</HTML>
- 30. ผลลัพธ์ที่ได้
กรุณาเลือกหัวข้อที่ท่านต้องการ
•โรงเรียนวิเศษไชยชาญ "ตันติวิทยาภูมิ"
•เซียมซีเสี่ยงโชค
•Hunsa.Com
•Mthai.Com
อธิบายคาสั่ง
<A แท็กคาสั่งเริ่มต้นเพื่อบอกเบราส์เซอร์ให้รู้ว่านี่คือลิ้งค์
HREF="ชื่อไฟล์/ที่อยู่ URL" ชื่อไฟล์/ที่อยู่เว็บไซต์ปลายทางที่ต้องการเชื่อมโยงไปถึง (ต้องระบุ)
กาหนดให้เปิดหน้าต่างเบราส์เซอร์ใหม่ เพื่อแสดงหน้าเว็บเพจ
TARGET="_blank" ปลายทาง (ตัวเลือก)
> อย่าลืมปิดท้ายด้วยเครื่องหมาย ">" นี้ทุกครั้ง
ข้อความ ข้อความที่ใช้แสดงว่านี่คือลิ้งค์
</A> แท็กปิดท้ายข้อความลิ้งค์
- 31. ทา link เพื่อใช้ส่งอีเมล
HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
แบบที่ 1 ลิ้งค์ข้อความธรรมดา<p>
<A HREF="Mailto:aeey12@thaimail.com">ส่งอีเมล์ถึงจักรกฤช</A>
แบบที่ 2 ใช้รูปภาพเป็นลิ้งค์ เพื่อเพิ่มความน่าสนใจ<p>
<A HREF="Mailto:aeey12@thaimail.com"><IMG SRC="mail2.gif" BORDER="0"></A>
</BODY>
</HTML>
ผลลัพธ์ที่ได้
แบบที่ 1 ลิ้งค์ข้อความธรรมดา
ส่งอีเมล์ถึงปราณี
แบบที่ 2 ใช้รูปภาพเป็นลิ้งค์ เพื่อเพิ่มความน่าสนใจ
อธิบายคาสั่ง
เป็นการสร้างลิ้งค์เพื่อส่งอีเมล์ โดยใช้โปรแกรมอีเมล์ในเครื่อง
Mailto:ที่อยู่อีเมล์@ปลายทาง
ของผู้ส่งเช่น Outlook Express
ถ้าในเครื่องคอมฯ ของคุณมีโปรแกรมนี้อยู่ ลองคลิ๊กลิ้งค์ดูนะ
ครับ จะได้เห็นการทางานที่แท้จริง
- 32. การสร้างแบบสอบถาม แบบ 1 text
• การสร้างแบบสอบถามในหน้าเว็บเพจนั้น เราสามารถทาได้ง่าย ๆ โดยการใช้แท็กคาสั่ง <FORM> เพื่อเริ่มต้นแบบสอบถาม และใช้แท็กคาสั่ง </FORM> เพื่อ
สิ้นสุด...แต่ลาพังแท็กคาสั่งเพียงคู่นี้คู่เดียว ยังไม่สามารถเป็นแบบสอบถามที่สมบูรณ์ได้ เราจะต้องมีช่องรับข้อมูล <INPUT TYPE> ที่มีรูปแบบต่าง ๆ กัน มา
ประกอบด้วย, <INPUT TYPE> ที่สามารถนามาใช้ในแบบสอบถามได้ มีดังต่อไปนี้ครับ
• แบบที่ 1 INPUT TYPE แบบ "TEXT"
• <FORM>
• Name: ชื่อ-นามสกุล<BR>
• <INPUT TYPE="text" NAME="name" SIZE="30" MAXLENGTH=30><BR>
• Site Url: ที่อยู่เว็บไซต์ของคุณ<BR>
• <INPUT TYPE="text" NAME="siteurl" SIZE="30" MAXLENGTH=30 VALUE="http://"><BR>
• </FORM>
• ----------------------------------------------------------------------
• อธิบายคาสั่ง
• <INPUT TYPE="text"> เป็นการกาหนดให้มีช่องรับข้อมูลแบบ TEXT
• NAME="name" ชื่อของช่องรับข้อมูล (จะต้องมีชื่อไม่ซ้ากันหากมีช่องรับข้อมูลมากกว่า 1 ช่อง)
• SIZE="20" เป็นการกาหนดความกว้างของช่องรับข้อมูล
• MAXLENGTH="30" เป็นการกาหนดความยาวสูงสุดของข้อมูล (จานวนตัวอักษร)
• VALUE="http://" เป็นการกาหนดค่าเบื้องต้นให้กับช่องรับข้อมูล
- 33. การสร้างแบบสอบถาม แบบ 2 REDIO
• แบบที่ 2 INPUT TYPE แบบ "REDIO"
• <FORM>
• คุณอายุเท่าใด:(เลือกเพียงข้อใดข้อหนึ่งเท่านั้น)<BR>
• <INPUT TYPE="radio" NAME="age" VALUE="20-30">20-30 ปี
• <INPUT TYPE="radio" NAME="age" VALUE="31-40" CHECKED>31-40 ปี
• <INPUT TYPE="radio" NAME="age" VALUE="41-50" DISABLED>41-50 ปี
• </FORM>
• ผลลัพธ์ที่ได้
• คุณอายุเท่าใด:(เลือกเพียงข้อใดข้อหนึ่งเท่านั้น)
• 20-30 ปี <-- ค่าปกติ
• 31-40 ปี <-- CHECKED
• 41-50 ปี <-- DISABLED
• อธิบายคาสั่ง
• <INPUT TYPE="redio"> เป็นการกาหนดให้มีช่องรับข้อมูลแบบ REDIO
• NAME="age" ชื่อของปุ่มรับข้อมูล (ต้องเป็นชื่อเดียวกันทุกปุ่ม)
• VALUE="20-30" เป็นกาหนดค่าหรือข้อมูลให้กับปุ่มรับข้อมูล
• CHECKED เป็นการกาหนดให้มีการเลือกปุ่มรับข้อมูลนี้เป็นเบื้องต้น
• DISABLED เป็นการกาหนดไม่ให้มีการเลือกปุ่มรับข้อมูลนี้
- 34. การสร้างแบบสอบถาม แบบ 3 CHECKBOX
• แบบที่ 3 INPUT TYPE แบบ "CHECKBOX"
• <FORM>
• หัวข้อใดที่คุณชื่นชอบเป็นพิเศษ (เลือกได้มากกว่า 1 ข้อ)<BR>
• <INPUT TYPE="checkbox" NAME="Members">ทะเบียนรายชื่อสมาชิก<BR>
• <INPUT TYPE="checkbox" NAME="New page" CHECKED>แนะนาเว็บเพ็จใหม่<BR>
• <INPUT TYPE="checkbox" NAME="Techno" DISABLED>วิชาการ/บทความ<BR>
• </FORM>
• ------------------------------------------------------------------------------------
• หัวข้อใดที่คุณชื่นชอบเป็นพิเศษ (เลือกได้มากกว่า 1 ข้อ)
• ทะเบียนรายชื่อสมาชิก <-- ค่าปกติ
• แนะนาเว็บเพ็จใหม่ <-- CHECKED
• วิชาการ/บทความ <-- DISABLED
• อธิบายคาสั่ง
• <INPUT TYPE="checkbox"> เป็นการกาหนดให้มีช่องรับข้อมูลแบบ CHECKBOX
• NAME="Member" ชื่อของปุ่มรับข้อมูล (จะต้องมีชื่อไม่ซ้ากันหากมีปุ่มรับข้อมูลมากกว่า 1 ปุ่ม)
• VALUE="20-30" เป็นกาหนดค่าหรือข้อมูลให้กับปุ่มรับข้อมูล
• CHECKED เป็นการกาหนดให้มีการเลือกปุ่มรับข้อมูลนี้เป็นเบื้องต้น
• DISABLED เป็นการกาหนดไม่ให้มีการเลือกปุ่มรับข้อมูลนี้
- 35. ช่องรับข้อมูลชนิดพิเศษ (1) "<INPUT TYPE=PASSWORD">
• <FORM>
• Username: ชื่อสมาชิก<BR>
• <INPUT TYPE="text" NAME="name" SIZE="30"><BR>
• Password: รหัสผ่านของคุณ<BR>
• <INPUT TYPE="password" NAME="password" SIZE="30"><BR>
• </FORM>
• ผลลัพธ์ที่ได้
• Username : ชื่อสมาชิก
•
• Password : รหัสผ่านของคุณ
• ---------------------------------------------------------------------------------------------------------------
• อธิบายคาสั่ง
• <INPUT TYPE="text"> เป็นการกาหนดให้มีช่องรับข้อมูลแบบ TEXT
• <INPUT TYPE="password"> เป็นการกาหนดให้มีช่องรับข้อมูลแบบ PASSWORD
• หมายเหตุ ในช่องรับข้อมูลแบบ PASSWORD เมื่อป้อนข้อมูลจะเห็นตัวอักษรเป็น ****
- 36. ช่องรับข้อมูลชนิดพิเศษ (2) "TEXTAREA"
• <FORM>
• คาแนะนาหรือติชม<BR>
• <TEXTAREA NAME="comment" COLS="50" ROWS="5"
WRAP="virtual"></TEXTAREA>
• </FORM>
• ผลลัพธ์ที่ได้
• คาแนะนาหรือติชม
• อธิบายคาสั่ง
• <TEXTAREA> เป็นการกาหนดให้มีช่องรับข้อมูลแบบ TEXTAREA
• NAME="comment" ชื่อของช่องรับข้อมูล (Field Name)
• COLS="50" เป็นกาหนดความกว้างของช่องรับข้อมูล
• ROWS="5" เป็นการกาหนดจานวนบรรทัดของช่องรับข้อมูล
• WRAP="vitual" เป็นการกาหนดให้มีการตัดคาของข้อมูลโดยอัตโนมัติ
• </TEXTAREA> แสดงจุดสิ้นสุดช่องรับข้อมูลแบบ TEXTAREA
- 37. ช่องรับข้อมูลชนิดพิเศษ (3) "SELECT OPTION"
• <FORM>
• <SELECT NAME="province" SIZE="1">
• <OPTION VALUE="กรุงเทพมหานคร">กรุงเทพมหานคร</OPTION>
• <OPTION VALUE="กระบี"่ >กระบี</OPTION> ่
• <OPTION VALUE="กาญจนบุรี" SELECTED>กาญจนบุรี</OPTION>
• <OPTION VALUE="กาฬสินธ์">กาฬสินธ์</OPTION>
• </SELECT>
• </FORM>
• ---------------------------------------------------------------------------------------------------------
• อธิบายคาสั่ง
• <SELECT> เป็นการกาหนดให้มีช่องรับข้อมูลแบบ SELECT
• NAME="province" ชื่อของช่องรับข้อมูล (Field Name)
• SIZE="1" เป็นกาหนดความกว้างของช่องรับข้อมูล (จานวนบรรทัด)
• ROWS="5" เป็นการกาหนดจานวนบรรทัดของช่องรับข้อมูล
• OPTION VALUE="กาญจนบุรี" เป็นการกาหนดตัวเลือกให้กบช่องรับข้อมูล
ั
• NAME="SELECTED" กาหนดให้เลือกข้อมูลนี้เป็นเบื้องต้น
• </SELECT> แสดงจุดสิ้นสุดช่องรับข้อมูลแบบ SELECT
•
- 38. การสร้างปุ่ม ส่งข้อมูล และ ปุ่ม ลบพิมพ์ใหม่
• <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" COLS="50" ROWS="5"
WRAP="virtual"></textarea><P>
• <INPUT TYPE="submit" VALUE="ส่งข้อมูล">
• <INPUT TYPE="reset" VALUE="ลบพิมพ์ใหม่">
• </FORM>
• ------------------------------------------------------------------------------
• Name : ชื่อ-นามสกุล
• E-mail : ที่อยู่อีเมล์ของคุณ
• คาแนะนา/เสนอแนะ/ติชม: (เพื่อการปรับปรุงเว็บไซท์ครั้งต่อไป)
- 39. เป็นการกาหนดให้ Browser ส่งข้อมูลใน
<INPUT TYPE="submit"> แบบสอบถามไปยัง Server
เป็นการกาหนดให้ Browser ลบข้อมูลที่พิมพ์ไว้
<INPUT TYPE="reset"> ออกไป
อธิบายคาสั่ง
VALUE="ข้อความ" เป็นการกาหนดข้อความที่ใช้แสดงบนปุ่มทั้งสอง
