มาทำเว็บกันเถอะ

Special Column
Home X-Files Series Photo Gallely Lyric Joke MultiLinks Jkong Guest Book
บทความพิเศษ
มาทำเว็บกันเถอะ ชวนกันอ่านหนังสือ คุยเฟื่องเรื่องหนัง เรื่องราวของประเทศไทย ธรรมะเพื่อชีวิต
About Me
JK's Story ♨ JK's Friends JK! เจียจุ้น นายตี๋ นายพี นายอ๋อง นายเด่น นายเค นายเก๋ นายเริญ นายเปี๊ยก นายหนุ่ย เจ้ากัมป์ JK's Society JK's Diary JK 's Chatroom ขอบคุณครับ

คัมภีร์พื้นฐานลมปราณ HTML

ก่อนอื่นก็ต้องมาทำความเข้าใจกันก่อนครับ เพื่อน ๆ คนใหนมีพื้นฐานการเขียนโปรแกรมมาแล้วก็จะง่ายกันเข้าไปอีก ใช้เพียงแค่โปรแกรม Editer ตัวใดตัวหนึ่ง เขียนได้เลยทันที อาจจะเป็น Notepad ก็ได้ครับ ง่ายดี ขั้นตอนแรกก็แค่เปิดโปรแกรม Editer ขี้นมาแล้วก็พิมพ์คำสั่งพื้นฐานเหล่านี้ลงไปครับ

คำสั่งพื้นฐาน
1. <HTML> ...</HTML> เป็นคำสั่งเริ่มต้นที่ใช้สำหรับเขียนชุดคำสั่ง HTML เหมือนกับ Begin กับ End ในภาษาปาสคาล โดยมีแท็ก <HTML> ไว้บรรทัดแรกเพื่อเป็นแท็กเปิด และมี</HTML> ไว้บรรทัดสุดท้ายเพื่อเป็นแท็กปิด
2. <HEAD>...</HEAD> ใช้กำหนดส่วนของชื่อเรื่อง เป็นข้อความที่แสดงใจเว็บเพจ มักใช้คู่กับคำสั่ง <...TITLE>...</TITLE> ซึ่งเป็นส่วนกำหนดข้อความใน Title bar รูปแบบ <HEAD><...TITLE>Kong's memories</TITLE></HEAD> ซึ่งจะแสดงคำว่า Kong's memories ที่ Title bar
3. <! ข้อความ > ใช้เขียนหมายเหตุเพื่อเตือนความจำตามจุดต่าง ๆ ในส่วนนี้โปรแกรมจะไม่แสดงผลออกมา เหมือนคำสั่ง REM ในแบทต์ไฟล์ หรือ /* */ ในภาษาซี คอมแมนท์นี้จะเป็นเท็กเดี่ยว ไม่มีเท็กปิด </! ข้อความ >
4. <BODY>...</BODY> เป็นส่วนของชุดคำสั่งที่จะสั่งให้แสดงผลบนจอภาพ ซึ่งจะใส่หรือไม่ใส่ก็ได้ เพราะนอกเหนือจากชุดคำสั่งที่อยู่ใน <HEAD>...</HEAD> แล้ว บราวเซอร์จะมองเห็นส่วนที่เหลือเป็น Body เองอยู่แล้ว
ตัวอย่าง

<HTML>
<HEAD>
<...TITLE>Kong's memories</TITLE>
</HEAD>
<! ทดสอบเขียนชุดคำสั่ง HTML>
<BODY>
..........
..........
..........(คำสั่ง HTML ต่าง ๆ)
</BODY>
</HTML>

คำสั่งสำหรับกำหนดรูปแบบตัวอักษร
1. <BASEFONT> เป็นแท็กคำสั่งที่ใช้สำหรับกำหนดรูปแบบการแสดงผลของตัวอักษร ไม่ว่าจะเป็นลักษณะ ขนาด หรือสีให้กับเอกสาร HTML ทั้งหมด โดยที่แท็กนี้ส่วนใหญ่จะใส่อยู่ภายในส่วน <HEAD> แต่คุณ็สามารถจะเขียนภายในแท็ก <BODY> ได้ ซึ่งจะใช้กับ Attribute ต่อไปนี้
SIZE เป็น Attribute ที่ใช้กำหนดขนาดของตัวอักษร โดยมีรูปแบบ < Basefont Size=n> ซึ่ง n จะเป็นเลขตั้งแต่ 1-7 โดยขนาด size=1จะมีขนาดเล็กที่สุดหรือ 8 pt และขนาดsize=7 จะมีขนาดใหญ่ที่สุด หรือ 36 pt

FACE เป็น Attribute ที่ใช้กำหนดให้Browserแสดงผลด้วยFONTที่กำหนด มีรูปแบบคำสั่งดังนี้


COLOR เป็น Attribute ที่ใช้กำหนดสีของตัวอักษร มีรูปแบบคำสั่งดังนี้

ตัวอย่างการใช้
<HTML>
<HEAD>
<...TITLE>Kong's memories</TITLE>
<BASEFONT SIZE=5>
</HEAD>
<BODY>.................</BODY>
</HTML>

2. <Hn> ...</Hn> ใช้กำหนดขนาดของหัวข้อ โดยจะกำหนดจากใหญ่ไปหาเล็ก มี 6 ระดับ ซึ่ง n จะเป็นเลข 1-6 ตัวอย่าง
<body>
<h1>ขนาดของหัวข้อ Tag "H1" </h1>
<h2>กำหนดขนาดของหัวข้อด้วย Tag "H1" </h2>
<h3>กำหนดขนาดของหัวข้อด้วย Tag "H2" </h3>
<h4>กำหนดขนาดของหัวข้อด้วย Tag "H3" </h4>
<h5>กำหนดขนาดของหัวข้อด้วย Tag "H4" </h5>
<h6>กำหนดขนาดของหัวข้อด้วย Tag "H5" </h6>
</body>
ซึ่งผลที่จะปรากฏบนเว็บเพจจะเป็นดังนี้

ขนาดของหัวข้อ Tag "H1"

กำหนดขนาดของหัวข้อด้วย Tag "H2"

กำหนดขนาดของหัวข้อด้วย Tag "H3"

กำหนดขนาดของหัวข้อด้วย Tag "H4"

กำหนดขนาดของหัวข้อด้วย Tag "H5"

กำหนดขนาดของหัวข้อด้วย Tag "H6"
3. Font เป็นแท็กคำสั่งที่ใช้สำหรับกำหนดรูปแบบการแสดงผลของตัวอักษร ซึ่งจะใช้กับ Attribute ต่อไปนี้
SIZE เป็น Attribute ที่ใช้กำหนดขนาดของตัวอักษร เหมือนคำสั่ง<Hn></Hn> แต่ต่างกันตรงที่ คำสั่ง... สามารถกำหนดให้มีหลายขนาดในหนึ่งบรรทัดได้ ซึ่งคำสั่ง<Hn></Hn> จะกำหนดขนาดต่อบรรทัดให้เท่านั้น และสิ้นสุดแท็ก จะขึ้นบรรทัดใหม่ให้อัตโนมัติ มีรูปแบบคำสั่งดังนี้ ... โดยที่ n เท่ากับตัวเลขตั้งแต่ 1-7 และสามารถใช้ เครื่องหมาย + และ - ในการเพิ่มและลดขนาดได้ด้วย

FACE เป็น Attribute ที่ใช้กำหนดให้Browserแสดงผลด้วยFONTที่กำหนด มีรูปแบบคำสั่งดังนี้


COLOR เป็น Attribute ที่ใช้กำหนดสีของตัวอักษร มีรูปแบบคำสั่งดังนี้

ตัวอย่างการใช้
(ตัวอย่างต่อจากนี้ไปจะตัดโค๊ดส่วน
<HTML> <HEAD><...TITLE>Kong's memories</TITLE></HEAD>
<BODY>.................</BODY>
</HTML>ออก เพื่อละไว้ในฐานที่เข้าใจว่า โค๊ดทั้งหมดอยู่ภายใจแท็ก <BODY>.......</BODY> )

อักษร MS Sans Serif Size=1 
อักษร System Size=2 
อักษร AngsanaUPC Size=3 
อักษร Times New Roman Size=4 
อักษร BorwalliaUPC Size=5 
อักษร CordiaUPC Size=6 
อักษร Comic Sans MS Size=7 

ซึ่งคำสั่งนี้จะแสดงผลหน้าเว็บเพจดังต่อไปนี้

อักษร MS Sans Serif Size=1
อักษร System Size=2
อักษร AngsanaUPC Size=3
อักษร Times New Roman Size=4
อักษร BorwalliaUPC Size=5
อักษร CordiaUPC Size=6
อักษร Comic Sans MS Size=7

4. ....... ใช้สั่งให้แสดงตัวอักษรแบบ Bold ซึ่งเป็นอักษรแบบตัวหนา
....... ใช้สั่งให้แสดงตัวอักษรแบบ Italic ซึ่งเป็นอักษรแบบตัวเอน
....... ใช้สั่งให้แสดงตัวอักษรแบบ Undel line ซึ่งเป็นอักษรแบบขีดเส้นใต้

ตัวอย่างการใช้งาน

ตัวอักษรแบบ Bold อักษรแบบตัวหนา 
ตัวอักษรแบบ Italic อักษรแบบตัวเอน
ตัวอักษรแบบ Undel line อักษรแบบขีดเส้นใต้ 

ซึ่งจะแสดงผลบนเว็บเพจดังนี้

ตัวอักษรแบบ Bold อักษรแบบตัวหนา
ตัวอักษรแบบ Italic อักษรแบบตัวเอน
ตัวอักษรแบบ Undel line อักษรแบบขีดเส้นใต้

แท็กเหล่าหนี้สามารถใช้ร่วมกันได้ ตัวอย่าง

อักษรแบบตัวหนาเอียง 
อักษรแบบตัวเอนขีดเส้นใต้
อักษรแบบตัวหนาขีดเส้นใต้ 

ซึ่งจะแสดงผลหน้าเว็บเพจดังต่อไปนี้

ตัวอักษรแบบ Bold อักษรแบบตัวหนา
ตัวอักษรแบบ Italic อักษรแบบตัวเอน
ตัวอักษรแบบ Undel line อักษรแบบขีดเส้นใต้

คำสั่งสำหรับจัดการเกี่ยวกับสี
1. การกำหนดค่าสีเราสามารถกำหนดได้สองวิธีคือ
1.1 กำหนดด้วยค่าสี RGB ซึ่งจะใช้ตัวอักขระ # ตามด้วยเลขฐานสิบหก คือ ตัวเลขตั้งแต่ 0-9 และตัวอักษร A-F จำนวน 6 ตัวด้วยกัน ตัวอย่างเช่น
อักษรสีม่วง magenta
อักษรสีเขียว
1.2 กำหนดด้วยสีด้วยชื่อสีโดยตรง ตัวอย่างเช่น
อักษรสีม่วง magenta
อักษรสีเขียว
ซึ่งการแสดงผลหน้าจอจะออกมาเหมือนกันดังนี้
อักษรสีม่วง magenta
อักษรสีเขียว

2. ค่าสีจะถูกนำไปใช้กำคำสั่งจัดการเกี่ยวกับสีดังต่อไปนี้

Text=รหัสสี ใช้กำหนดสีตัวอักษรทั่วไปในเว็บเพจ
BGColor=รหัสสี ใช้กำหนดสีพื้นหลังในเว็บเพจ
... ใช้กำหนดสีตัวอักษรเฉพาะตัวที่ต้องการเน้นให้สีสันแตกต่างจากตัวอักษรอื่น ๆ
ตัวอย่าง
<BodyText=#FFFFFF BGColor="#6699FF">คำสั่งดังกล่าวจะแสดงพื้นหลังสีม่วงมาเจนต้าและตัวอักษรสีขาว

ตัวอย่างรหัสสี White #FF6633 #666699 #660000 #FFCC99 #CC3333

#CCCCCC #006699 #FFCC00 #0099CC #FFFFCC #6666FF
Blue
#999999

#CCCCFF #FF9966 Lime
Red
#FF6633 #660000 #CC9900 #00CCFF

#660066 #00CC00 #CCFFCC #009999 #99FF99 #006666 #006600 #FFCCCC

#CCFFFF #666666 #CCCC00 #FFCCFF
Yellow
#FF00FF #000000 #00CCCC

#33FF33 #6633FF #990000 #FFCC99
Plum
#3333CC #CCCC00 #FF66FF

Azure Lightblue Navy Gold
Ivory
Silver Snow Steelblue

คำสั่งจัดหน้าเอกสาร
1. ขึ้นย่อหน้าใหม่ และเว้นบรรทัดให้ 1 บรรทัด
2. ขึ้นต้นบรรทัดใหม่ เหมือนการกด Enter ในการพิมพ์เอกสารด้วย Word
3. <HR>กำหนดเส้นคั่นบรรทัด ซึ่งสามารถกำหนดขนาดใด้ด้วย WIDTH=หมายเลขหรือเปอร์เซนต์ เพื่อกำหนดความยาว และ Size=หมายเลข เพื่อกำหนดขนาดหรือความหนา ตัวอย่าง
<HR WIDTH=50% SIZE=10 > ซึ่งจะแสดงผลหน้าจอดังนี้

4. <HR Noshade>กำหนดเส้นคั่นบรรทัดแบบทึบ ตัวอย่าง
<HR WIDTH=50% SIZE=15 Noshade> ซึ่งจะแสดงผลหน้าจอดังนี้

5. <Align=Left>
<Align=Center>
<Align=Right>
ใช้สำหรับกำหนดตำแหน่งการจัดวางรูปภาพหรือข้อความในตำแหน่งที่ต้องการ ซึ่งสามารถจัดวางได้ในตำแหน่งด้านซ้าย กึ่งกลาง และด้านขวาของจอภาพตามลำดับ
ตัวอย่าง
<IMG Src="http://www.geocities.com/methipat/images/horror.jpg" Align=Left >
ซึ่งจะแสดงผลหน้าจอดังนี้

6. <Center> ...<Center> เป็นคำสั่งจัดข้อความทั้งหมดที่อยู่ภายในแท็ก ให้อยู่กึ่งกลางจอภาพ ตัวอย่าง
<Center>
น้องปิ๊ก 
น้องโค๊ช 
น้องแอน 
น้องแก้ว 
น้องต้อง 
แต่งงานกันหมดแล้ว 
</Center>
ซึ่งจะแสดงผลหน้าจอดังต่อไปนี้
น้องปิ๊ก
น้องโค๊ช
น้องแอน
น้องแก้ว
น้องต้อง
แต่งงานกันหมดแล้ว
7. <Blockquote> ...</Blockquote> เป็นคำสั่งจัดข้อความทั้งหมดที่อยู่ภายในแท็ก ให้อยู่ในตำแหน่งเยื้องมาด้านขวา 1 ย่อหน้า
ตัวอย่าง
<Blockquote>
น้องปิ๊ก 
น้องโค๊ช 
น้องแอน 
น้องแก้ว 
น้องต้อง 
แต่งงานกันหมดแล้ว 
</Blockquote>
ซึ่งจะแสดงผลหน้าจอดังต่อไปนี้

น้องปิ๊ก
น้องโค๊ช
น้องแอน
น้องแก้ว
น้องต้อง
แต่งงานกันหมดแล้ว

อ่านต่อตอน 2 ครับ

ขอพลังจงอยู่กับท่าน
:+: ขอพลังที่สร้างสรรค์จงอยู่กับท่านตลอดไป :+:
ขอพลังจงอยู่กับท่าน