สร้างเว็บหน้าแรก เริ่มต้น xhtml

สร้างเว็บหน้าแรก เริ่มต้น xhtml

เรามาเริ่มกันที่ ภาษา XHTML ซึ่งจริงๆก็ทำงานเหมือน HTML นั่นแหล่ะ แต่ต่างกันตรงไหนไม่กล่าวในรายละเอียดแล้วกัน แล้วจริงๆตอนนี้ก็มี HTML5 มาแล้ว แต่เชื่อเหลือเกินว่า 2 ปีนับจากนี้ ก็ยังไม่มีการนำเอามาใช้อย่างเต็มตัวหรอกครับ ดังนั้นเราก็อิงตามค่านิยมในปัจจุบันไปก่อน

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

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

การสร้างเว็บ การเขียนเว็บ มันเริ่มต้นได้จากตัวหนังสือที่เราเขียนให้มันนั่นเอง โดยเราจะต้องเตรียมความพร้อมเครื่องเราเล็กน้อยดังนี้ครับ คือเปิดให้เครื่องแสดงนามสกุลของไฟล์

จากนั้น ให้เราเปิดโปรแกรมที่ชื่อ notepad ขึ้นมาครับ เราจะเริ่มกันแล้ว

ให้พิมพ์ลงไปว่า "สวัสดีชาวโลก" แล้ว save as เลยครับ

ให้เราตั้งชื่อว่า firstpage.html จากนั้นโอเค

แล้วเราลองดับเบิ้ลคลิกเพื่อเปิดไฟล์นี้ครับ ถ้า windows ถามว่าจะเปิดด้วยโปรแกรมอะไรให้เราเลือกโปรแกรมที่เป็น browser ครับเช่น internet explorer , firefox , chrome หรืออื่นๆตามที่ท่านใช้

ก็จะพบหน้าเว็บที่พึ่งเขียนเมื่อตะกี้เลยครับ

เสร็จแล้วครับ ง่ายมั้ยครับ เว็บหน้าแรกของทุกท่าน ไม่ยากหรอกครับ ที่เราจะเริ่มทำอะไรสักอย่าง

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

สำหรับ XHTML จะมีโค้ดพื้นฐานที่เป็น standard ดังนี้ครับ

<!DOCTYPE html       PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">    <head>     <title>เว็บทดสอบ</title>   </head>   <body>     <p>บทความ เขียนเว็บ <a href="http://web.meewebfree.com/">บทความ</a>.</p>   </body> </html>

ลอง copy ทั้งหมดไปวางในไฟล์เมื่อสักครู่ save แล้ว refresh ดูผลก็ได้ครับ ถ้าไม่มีอะไรเปลี่ยนแปลงกด ctrl+f5 ทีนึง เท่านี้เราก็จะมีหน้าเว็บ ที่ถูกต้องตรงตามมาตรฐานแล้วครับ โดยมาตรฐานดังกล่าว เราจะเรียกว่า XHTML version 1.0 แบบ Transition ครับ ซึ่งเป็นที่นิยม ใช้งานง่าย และใช้กันมากครับ

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

เรามาทำความรู้จัก xhtml 1.0 ตามที่เราเขียนไปเมื่อกี้ดีกว่า 

ส่วนแรก คือส่วน head คือทั้งหมดที่อยู่ในคำสั่งที่เปิด head และ ปิด head

  <head>     <title>เว็บทดสอบ</title>   </head>

จากโค้ดข้างต้น ส่วนที่เป็น head คือทั้งหมด หลังจาก คำสั่ง <head> ยาวจนกระทั่ง ก่อนถึงคำสั่ง </head> เราจะเรียกทั้งหมดนี้ว่า head ของเว็บครับ ง่ายๆ เข้าใจไม่ยากแค่นี้เอง

ส่วนที่สอง คือส่วน body คือทั้งหมดที่อยู่ในคำสั่ง เปิด body และ ปิด body 

  <body>     <p>บทความ เขียนเว็บ <a href="http://web.meewebfree.com/">บทความ</a>.</p>   </body>

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

ข้อกำหนดหลักที่ควรปฏิบัติตามเป็นอย่างยิ่งคือ เปิด syntag อะไรแล้วต้องปิดด้วยเสมอ สังเกตได้ เช่น

<title>เว็บทดสอบ</title>

เป็นการเปิดด้วย syntag title และปิดด้วย title ครับ เป็นของคู่กันเสมอ แล้วต้องปิดจาก syntag ย่อยไปหาใหญ่ เช่น

  <head>     <title>เว็บทดสอบ</title>   </head>

จะเห็นว่าที่ย่อยกว่าคือ title ก็ต้องปิดให้เรียบร้อยก่อน แล้วค่อยปิด head อีกที โดยเราจะเห็นได้ชัดเลยว่า title เป็นส่วนย่อยของ head อีกที เพราะว่ามี head คลุมหัวท้ายอยู่นั่นเอง

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

Create: Modify : 2010-04-25 22:22:11 Read : 16180 URL :