สิ่งที่สนใจ การเมืองการปกครอง













การเขียนเว็บไซต์เบื่องต้น

 

แนะนำก่อนเขียนภาษา HTML

สิ่งที่ต้องเตรียมเมื่อต้องการเขียนโฮมเพจ
ก่อนที่จะลงมือเขียนโปรแกรมภาษา HTML เพื่อสร้างเว็บเพจ หรือ โฮมเพจ ได้นั้น ต้อง เช็ค ความพร้อม ของอุปกรณ์ เครื่องมือ สำหรับการ สร้าง ก่อนว่า มีครบหรือไม่
1. เครื่องคอมพิวเตอร์ ขนาดตั้งแต่ 486 หรือ pentium ขึ้นไป
2. หน่วยความจำไม่น้อยกว่า 8 MB
3. พื้นที่ฮาร์ดดิสต์ขนาดไม่น้อยกว่า 20 MB
4. Mouse
5. โปรแกรม Internet Explorer Version 3.0 ขึ้นไป
6. โปรแกรม Netscape Navigator Version 3.0 ขึ้นไป
7. โปรแกรม Notepad

โปรแกรมทุกตัวต้องติดตั้งลงในฮาร์ดดิสต์เรียบร้อยและอยู่ในสภาพที่พร้อมจะใช้งานได้ตลอดเวลา ไฟล์ของโปรแกรม HTML เป็นแท็กซ์ ไฟล์ธรรมดา ที่ใช้ นามสกุลว่า .htm หรือ .html โดย เมื่อเรา เขียน คำสั่งต่าง ๆ ลงใน โปรแกรม Notepad แล้วเรา จะ Save ให้เป็น นามสกุลดังกล่าว ถ้าไม่เช่นนั้น เรา จะไม่สามารถ แสดงผล ได้ ทาง เบราเซอร์ และถ้ามีการแก้ไข หรือ เขียนโปรแกรม เราก็สามารถ ใช้โปรแกรม Notepad นี้เป็นตัวแก้ไขได้เลย

โครงสร้างพื้นฐานของ HTML
โครงสร้างของ HTML จะประกอบไปด้วยส่วนของคำสั่ง 2 ส่วน คือ ส่วนที่เป็น ส่วนหัว (Head) และส่วนที่เป็นเนื้อหา (Body) โดยมีรูปแบบคำสั่งดังนี้

<HTML>
<HEAD>
<TITLE> ชื่อโปรแกรมหรือข้อมูลที่ต้องการแสดงในส่วนหัว </TITLE>
</HEAD>
<BODY>
คำสั่งหรือข้อความที่ต้องการให้แสดง
</BODY>
</HTML>

การจัดโครงสร้างแฟ้มเอกสาร
ในความง่ายของภาษา HTML นั้นเพราะภาษานี้ไม่มีโครงสร้างใด ๆ มากำหนดนอก จากโครงสร้างพื้นฐานเท่านั้น หรือ แม้แต่จะไม่มีโครงสร้าง พื้นฐานอยู่ โปรแกรมที่เขียนขึ้นมานั้นก็สามารถทำงานได้เสมือนมี โครงสร้างทั่งนี้เป็นเพราะ ว่าตัวโปรแกรม เว็บเบราเซอร์ จะมองเห็นทุกสิ่งทุกอย่างในโปรแกรม HTML เป็นส่วนเนื้อหาทั้งสิ้น

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

การแสดงผลที่เว็บเบราเซอร์
หลังจากมีการพิมพ์โปรแกรมนี้เสร็จเรียบร้อยแล้ว ให้บันทึกเป็น ไฟล์ที่มีนามสกุล .htm หรือ .html จากนั้นให้เรียกโปรแกรมเว็บเบราเซอร์ขึ้นมาทำการทดสอบ ข้อมูลที่เราสร้างจะถูก นำมาที่ออกมาแสดงที่จอภาพ ถ้าไม่เขียนอะไรผิด บนจอภาพก็จะแสดงผลตามนั้น ถ้าเรามีการปรับปรุงแก้ไขข้อมูลในโปรแกรมเดิม ให้อยู่ในรูปของ โปรแกรมใหม่ ก็จำ เป็นต้องโหลดโปรแกรมขึ้นมาใหม่ เพียงแต่เลื่อนเมาส์ไปคลิกที่ปุ่ม Refresh โปรแกรมก็จะทำการ ประมวลผลและแสดงผลออกมาใหม่ ในคำสั่ง HTML ส่วนใหญ่ใช้ตัวเปิด เป็นเครื่องหมาย น้อยกว่า < ตามด้วยคำสั่ง และปิดท้ายด้วยเครื่องหมายมากกว่า > และมีตัวปิดที่มีรูปแบบเหมือนตัวเปิดเสมอ เพียงแต่จะมีเครื่อง หมาย / อยู่หน้าคำสั่งนั้น ๆ เช่น คำสั่ง <BODY> จะมี </BODY> เป็นคำสั่งปิด เมื่อใดที่ผู้เขียนลืมหรือพิมพ์คำสั่งผิด จะส่งผลให้การทำงานของโปรแกรมผิดพลาดทันที

คำสั่งเริ่มต้นสำหรับ HTML

คำสั่งหรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า <ตามด้วย ชื่อคำสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า>เป็นส่วนที่ทำหน้าที่ตกแต่งข้อความ เพื่อ การแสดงผลข้อมูล โดยทั่วไปคำสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบาง คำสั่งเท่านั้น ที่มีรูปแบบคำสั่งอยู่เพียงตัวเดียว ในแต่ละคำสั่ง จะมีคำสั่งเปิดและปิด คำสั่งปิดของแต่ละ คำสั่งจะมี รูปแบบเหมือนคำสั่งเปิด เพียงแต่จะเพิ่ม /(Slash) นำหน้าคำสั่ง ปิดให้ดู แตกต่าง เท่านั้น และในคำสั่งเปิดบางคำสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย ในการเขียน ด้วยตัวอักษร เล็กหรือใหญ่ ทั้งหมดหรือเขียนปนกันก็ได้ ไม่มีผลอะไร

คำสั่งเริ่มต้น
รูปแบบ <HTML>.....</HTML>
คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรม และ </HTML>เป็นคำสั่งจุดสิ้นสุดโปรแกรมเหมือนคำสั่ง Beign และ End ใน Pascal

คำสั่งการทำหมายเหตุ
รูปแบบ <!-- ..... -->
ตัวอย่าง <!-- END WEBSTAT CODE -->
ข้อความที่อยู่ในคำสั่งจะปรากฎอยู่ในโปรแกรมแต่ไม่ถูกแสดง บนจอภาพ

ส่วนหัว
รูปแบบ <HEAD>.....</HEAD>
ใช้กำหนดข้อความ ในส่วนที่เป็น ชื่อเรื่อง ภายในคำสั่งนี้ จะมีคำสั่งย่อย อีกหนึ่งคำสั่ง คือ <TITLE>

กำหนดข้อความในไตเติลบาร์
รูปแบบ <TITLE>.....</TITLE>

ตัวอย่าง <TITLE> บทเรียน HTML </TITLE>
เป็นส่วนแสดงชื่อของเอกสาร จะปรากฎ ขณะที่ไฟล์ HTML ทำงานอยู่ ข้อความ ที่กำหนด ในส่วนนี้ จะไม่ถูกนำไปแสดง ผลของ เว็บเบราเซอร์แต่จะปรากฎในส่วนของไตเติบาร์ (Title bar) ที่เป็นชื่อของวินโดว์ข้างบนไม่ควรให้ยา เกินไป เพียงให้รู้ว่าเว็บเพจที่กำลัง ใช้งานอยู่เกี่ยวข้องกับอะไร

ส่วนของเนื้อหา
รูปแบบ <BODY>.....</BODY>
ส่วนเนื้อหาของโปรแกรมจะเริ่มต้นด้วย คำสั่ง <BODY> และจบลงด้วย </BODY> ภายในคำสั่งนี้ คือ ส่วนที่จะ แสดงทางจอภาพ


การเติมสีสันให้เอกสาร

ผลการแสดง ที่เกิดขึ้น บน เว็บเพจ เราจะพบว่าเอกสาร ทั่วไปแล้วตัวอักษร ที่ปรากฎ บนจอภาพ จะเป็น ตัวอักษรสีดำ
บนพื้น สีเทา ถ้าเรา ต้องการ ที่จะ เปลี่ยนสี ของตัวอักษร หรือ สีของ จอภาพ เราสามารถ ทำ ได้โดย การกำหนด แอตทริบิวต์ (Attribute) ของตัวอักษร สิ่งที่ต้องการนี้ จะเป็น กลุ่มตัว เลขฐาน 16 จำนวน 3 ชุด โดยชุดที่ หนึ่ง ทำหน้าที่ แทนค่าสีแดง ชุดที่สอง ทำหน้าที่ แทนสีเขียว และชุดที่สาม ทำหน้าที่แทนสี น้ำเงิน ข้อมูล ในตาราง ต่อไปนี้จะแสดง สีพื้นฐาน และรหัสสี ที่สามารถแสดงได้ทุกเว็บเพจ


สี

รหัสสี

ขาว

#FFFFFF

ดำ

#000000

เทา

#BBBBBB

แดง

#FF0000

เขียว

#00FF00

น้ำเงิน

#0000FF


ในบางครั้งถ้าเราไม่ต้องการใส่รหัสสีเป็นเลขฐานเราก็สามารถใส่ชื่อ สีลงไปได้เลย ตัวอย่างต่อไปนี้ แสดงชื่อ สีที่ Internet Explorer สนับสนุนแต่ Netscape ไม่สนับสนุน

AQUA
BULE
GRAY
LIME
NAVY
PURPLE
SILVER
WHITE (สีขาว)
BLACK
FUCHSIA
GREEN
MAROON
OLTVE
RED
TEAL
YELLOW


สีของพื้นฉากหลัง
รูปแบบ BGCOLOR=#สีที่ต้องการ
ตัวอย่าง <BODY BGCOLOR="#FF0000">
เราใช้ BGCOLOR=#สีที่ต้องการ ให้เป็นส่วนหนึ่งของ <BODY> ซึ่งจะทำให้เกิดสีตามที่เราเลือก ลักษณะเป็นฉากสีอยู่ข้างหลัง

สีของตัวอักษรบนเว็บ
รูปแบบ Text=#รหัสสี
ตัวอย่าง <BODY TEXT="#00FF00">
เรากำหนดเช่นเดียวกับการทำสีของพื้นฉากหลังโดยให้เป็นส่วน หนึ่งของ <BODY> แต่ในการใส่รหัสสีนั้นเร าต้องดู ให้เหมาะสมกับฉากหลังด้วยเช่น <BODY TEXT="#00FF00"> ในการ ทำสีของ ตัวอักษรนี้สีจะปรากฎบนเว็บเปราเซอร์ เป็นสีเดียวตลอด

สีของตัวอักษรเฉพาะที่
รูปแบบ <FONT COLOR="#สีที่ต้องการ">...</FONT>
ตัวอย่าง <font color="#FF0000">สีแดง</font>
คำสั่งนี้เราใช้ในการเปลี่ยนสีของตัวอักษรในส่วนที่เราต้องการให้เกิดสีสันแตกต่างไปจากสีตัวอักษร อื่น ๆ เช่น <FONT COLOR="#FF0000">สีแดง</FONT>ตัวหนังสือคำว่าสีแดงก็จะเป็นสีแดงตามที่เราต้องการทันที

สีของตัวอักษรที่เป็นจุดคลิกเมาส์
รูปแบบ LINK="#รหัสสี" ALINK="#รหัสสี" VLINK"#รหัสสี"
ตัวอย่าง <BODY BGCOLOR="000000" TEXT="#F0F0F0" LINK="#FFFF00" ALIGN="#0077FF" VLINK="#22AA22">
กำหนดอยู่ในส่วนของ BODY โดยกำหนดให้
LINK = สีของตัวอักษรก่อนมีการคลิก
ALIGN = สีของตัวอักษรขณะถูกคลิก
VLINK = สีของอักษรหลังจากคลิกแล้ว
ตัวอย่างรหัสสี




การเชื่อมโยงข้อมูล (Link)

เป็นที่ ทราบดี อยู่ แล้วว่า การที่ อินเตอร์เนต ได้รับความนิยม อย่างกว้างขวางอยู่ทั่วโลกนั้นเป็ ผลมาจากความ สามารถในการเชื่อมโยงข้อมูล จากฐานข้อมูล หนึ่ง ไปยังอีก ฐานข้อ มูลหนึ่ง ได้อย่างรวดเร็ว โดยสามารถ เชื่อมโยงข้อความ ได้ทั้ง จากภายใน แฟ้มเอกสาร ข้อมูลของตัวเอง และแฟ้มเอกสารข้อมูลภายนอกที่ต่างเว็บไซต์กัน

ข้อความ ที่ถูกกำหนดให้เชื่อมโยงกับฐานข้อมูลอื่น ๆ บนเว็บเบราเซอร์จะแสดงผลเป็นตัวอักษร ที่มีสีแตกต่างจากอักษรทั่วไป และอาจจะมี ขีดเส้นใต้ข้อความนั้นด้วย โดยทั่วไป ตัวอักษรที่แสดง ผลอยู่บน เวบเบราเซอร์ จะมีสีดำ ปนขาว (หรือสีเทา) แต่สำหรับ ข้อความ ที่ใช้เป็นตัวเชื่อมข้อมูลนั้นจะเป็นตัวอักษร สีน้ำเงิน หรือ อย่างอื่น ตาม ที่สร้างขึ้นมาเมื่อเลื่อน เมาส์ ไปชี้ที่ ข้อความ ซึ่ มีการเชื่อมโยงของรูปแบบ ตัวชี้ จะเปลี่ยนจาก สัญลักษณ์ ลูกศร ไปเป็นรูป มือแทน และที่บริเวณแถบแสดงสถานะด้านล่าง จะแสดงถึงตำแหน่งของจุด หมายที่ ข้อความจะเชื่อมโยงไปให้เราเห็น

ประเภทการเชื่อมโยง
- การเชื่อมโยงภายในเว็บไซต์
- การเชื่อมโยงข้อมูลนอกเว็บไซต์
- การเชื่อมโยงข้อมูล FTP
- การเชื่อมโยงข้อมูล E-Mail

การเชื่อมโยงภายในเว็บไซต์
รูปแบบ <A HREF="ที่อยู่ไฟล์">ข้อความ</A>
ตัวอย่าง <A HREF="tipcomputer.asp">ทิปคอมพิวเตอร์</A>
*** หมายเหตุ ถ้าลิงค์อยุ่คนละโฟลเดอร์ <A HREF="../tipcomputer.asp">ทิปคอมพิวเตอร์</A>

การเชื่อมโยงข้อมูลนอกเว็บไซต์
รูปแบบ <A HREF="้http://www..........">ข้อความ</A>
ตัวอย่าง <A HREF="้http://www.bcoms.net">บีคอม</A>
*** หมายเหตุ คุณสามารถสั่งให้เบราเซอร์เปิดหน้าใหม่ได้โดยกำหนด target="_blank"
ตัวอย่าง <a href="http://www.driverzone.com" target="_blank"> Driver Zone </a>

การเชื่อมโยงข้อมูล FTP
รูปแบบ <FTP://HOSTNAME/FOLDER>ข้อความ</A>
HOSTNAME คือ ชื่อของศูนย์บริการ FTP Server
FOLDER คือ ชื่อไฟล์และไดเรกทอรี่ที่ผู้เข้ารับบริการสามารถเข้าไปใช้งานได้
ตัวอย่าง <A HREF=FTP://bcoms.net/download> Download </a>

การเชื่อมโยงข้อมูล E-Mail
รูปแบบ <A HREF="MAILTO:USERNAME@DOMAINNAME">ข้อความ</A>
ตัวอย่าง <a href="mailto: bcoms_net@hotmail.com">bcoms_net@hotmail.com</a>