Basic HTML

บทที่ 1 มาหัดทำเวบกันเถอะ

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

เริ่มจากเวบส่วนตัวของคุณก่อนแล้วกัน

เอาล่ะครับ ในการเรียน HTML จำเป็นต้องมีตัวอย่างซึ่งผมขอแนะนำให้ท่านลองทำเวบส่วนตัวของท่านดู อาจจะมีเนื้อหา เกี่ยวกับเรื่องอะไรก็ได้ครับ จะเป็นเวบแนะนำตัวท่านเองก็ได้ ท่านจะได้พัฒนาตัวอย่างนี้ในการเรียนตลอดทั้ง 10 บทจนเป็น เวบเพจจริงๆ และเราจะสอนวิธี upload ขึ้นไปบน Server

เมื่อพร้อมแล้วก็ขอให้เปิดโปรแกรม Notepad (อยู่ที่ Start/Program/Accessories/Notepad) แล้วพิมพ์โค้ดข้างล่างนี้ลงไปครับ

<html> <head> <title>เวบส่วนตัวของสรวุฒิ</title> </head> <body> สวัสดีครับ ยินดีต้อนรับสู่ สรวุฒิ Homepage </body> </html> เมื่อพิมพ์เสร็จแล้วขอให้ Save ใว้ในไฟล์ชื่อ mypage.html แล้วลองเปิดดูด้วย Internet Explorer หรือ browser อะไรก็ได้ โดยการเลือกที่เมนู File/Open แล้ว browse ไฟล์ที่เรา save ไว้มาดู

ผลที่ได้จะเป็นแบบนี้ครับ

สำหรับคำอธิบาย ขอให้อ่านต่อไปก่อนครับ (^o^)

โครงสร้างของภาษา HTML

ภาษา HTML (HyperText Markup Language) เป็นภาษาที่ใช้คำสั่งที่เรียกว่า Tag มีทั้งเปิดและปิด เพื่อกำหนดบริเวณที่มีผลของคำสั่ง คำสั่งภาษา HTML จะเริ่มมีผลที่บริเวณ Tag เปิด และจะสิ้นสุดผลของคำสั่งนั้นเมื่อถึง Tag ปิด เมื่อเวบเพจถูกเรียกให้แสดงผล Browser จะอ่านภาษา HTML และแปลความหมายของคำสั่งแล้วนำมาแสดงผล

Tag จะมีลักษณะเป็น ชื่อ Tag คร่อมด้วยเครื่องหมาย <...>ภายในเครื่องหมายนี้ อาจมีการกำหนดลักษณะพิเศษของ Tag หรือที่เรียกว่า Attribute ด้วยหรือไม่ก็ได้ Tag มีทั้ง Tag เปิด และ Tag ปิด โดย Tag ปิดจะมีเครื่องหมาย / นำหน้าชื่อ Tag เช่น </html> นอกจากนี้ยังมี Tag ที่ไม่จำเป็นต้องมี Tag ปิดด้วย เช่น Tag ที่ใช้ขึ้นบรรทัดใหม่

ตอนนี้เราก็รู้จัก Tag แล้ว ทีนี้เรามาดูกันดีกว่าว่าเมื่อกี้เราใช้ Tag อะไรบ้าง

<html> <head> <title>เวบส่วนตัวของสรวุฒิ</title> </head> <body> สวัสดีครับ ยินดีต้อนรับสู่ สรวุฒิ Homepage </body> </html>

อันดับแรก ที่บรรทัดแรกและบรรทัดสุดท้าย จะมี Tag <html> และ </html> ใช้บอกให้ Browser รู้ว่าส่วนที่อยู่ตรงกลางเป็นภาษา HTML ดังนั้น เวบเพจที่เป็น HTML ทั้งหมดในโลกนี้จะต้องมี Tag นี้รวมอยู่ด้วยเสมอ

Tag <head> และ </head> ใช้เพื่อบอกว่า เป็นส่วนหัวของเวบเพจ ส่วนหัวไม่ใช่ส่วนที่แสดงอยู่ด้านบนนะครับ แต่เป็นส่วนที่บอกคุณสมบัติของเวบเพจ ซึ่งส่วนใหญ่จะไม่ถูกนำมาแสดงผล ภายในนี้ท่านจะพบ Tag <title> และ </title> ซึ่งใช้บอกชื่อของเวบเพจนี้ไงครับ

และส่วนที่สำคัญที่สุด นั่นก็คือเนื้อหาของเวบเพจจะถูกบรรจุอยู่ใน Tag <body> และ </body> ในนี้จะบรรจุเนื้อหาทั้งหมดซึ่งอาจจะมีทั้งข้อความ รูปภาพ ตัวเชื่อม ตาราง ที่ท่านจะได้เรียนรู้ในบทต่อๆไปครับ

		© copyright 2001 Sorrawut Korsuwansiri