การเขียนเว็บด้วย html





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



เวบส่วนตัวของคุณเอง


สวัสดีครับ ยินดีต้อนรับสู่ โฮมเพจแรกของผม



เมื่อพิมพ์เสร็จแล้วขอให้ 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 เช่น นอกจากนี้ยังมี Tag ที่ไม่จำเป็นต้องมี Tag ปิดด้วย เช่น Tag ที่ใช้ขึ้นบรรทัดใหม่

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




เวบส่วนตัวของคุณเอง


สวัสดีครับ ยินดีต้อนรับสู่ โฮมเพจแรกของผม



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

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

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

ท่านจะได้รู้จักกับ Tag ต่างๆที่ใช้จัดรูปแบบข้อความ เช่นการขึ้นบรรทัดใหม่ การเว้นระยะระหว่างย่อหน้า และการทำลิสต์รายการ


การขึ้นบรรทัดใหม่ :

บทนี้เราจะเริ่มกันด้วย Tag ที่ง่ายที่สุดก่อนนั่นก็คือ
Tag นี้เป็น Tag ที่ไม่จำเป็นต้องมี Tag ปิด ใช้สำหรับขึนบรรทัดใหม่ เช่นถ้า code เป็นแบบนี้

aaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbb

ก็จะแสดงผลออกมาแบบนี้ครับ

aaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbb

การเว้นระยะระหว่างย่อหน้า :

,


แท็กนี้ใช้เพื่อกำหนดว่าภายในเป็นข้อความ 1 ย่อหน้ามีทั้ง Tag เปิด และปิด เช่น



เวบส่วนตัวของผม



สวัสดีครับ ยินดีต้อนรับสู่ โฮมเพจแรกของผม



เอ่อ... ยินดีที่ได้รู้จักครับ ยินดีต้อนรับเข้าสู่โฮมเพจแรกของผมครับ






นอกจากจะใช้แบบนี้แล้ว Tag

ยังสามารถใช้แบบไม่ต้องมี Tag ปิดได้ด้วย โดยผลที่ได้จะคล้ายการใช้
แต่ช่องว่าระหว่างบรรทัดจะกว้างกว่า

จัดเอาไว้ตรงกลางด้วย :
,

โดยปกติแล้วการจัดเนื้อหาจะจัดแบบชิดขอบซ้าย ซึ่งในบางกรณีเราต้องการให้เนื้อหาอยู่กึ่งกลาง ก็จะใช้ Tag
...
สำหรับจัดเนื้อหาไว้ตรงกลางหน้า เช่น (จากตัวอย่างที่แล้ว)


สวัสดีครับ ยินดีต้อนรับสู่ คุณทัศHomepage



ขอแค่นี้ก่อนแล้วกันวันหน้าจะเอามาลงใหม่ (มีเวลาน้อนนะ)



โดย : นาย ชัยทัศน์ ดุลภาคไพศาล, ว.ท. ฉะเชิงเทรา, วันที่ 21 กุมภาพันธ์ 2545