HTML กับหน้าเว็บที่ Perfect ที่สุดในโลก!
เนื้อหาและตัวอย่างโค้ดส่วนใหญ่ที่ผมนำมาเขียนในที่นี้ มาจากการทดลองและประสบการณ์ส่วนตัวนะครับ ถ้าส่วนไหนผมนึกออกว่าไปจำคนอื่นมาใช้ ผมก็จะทำลิงค์อ้างอิงไว้ให้ เผื่อใครสนใจจะได้เข้าไปศึกษาเพิ่มเติมเอง สำหรับคนที่เพิ่งเข้ามาอ่าน ขอให้คุณเตรียมเครื่องไม้เครื่องมือ ในการเขียนเว็บเพจให้พร้อมซะก่อน (ดูใน โพสต์ที่แล้ว) ส่วนคนที่มีพื้นฐานการเขียนหน้าเว็บมาบ้างแล้ว ก็ขออภัยที่เนื้อหาอาจจะเยิ่นเย้อเกินไปสำหรับคุณ เพราะผมพยายามเขียนรายละเอียดไว้ให้ มือใหม่ สามารถทำตามได้แบบไม่ยากเย็นเกินไป เพราะบางเรื่องทีี่บางคนคุ้นเคย ก็อาจจะเป็นเรื่องที่หลายคนไม่เคยรู้มาก่อนก็ได้
(เอาล่ะ ไม่ต้องตื่นเต้น หายใจเข้าและออกลึกๆ ถ้าทำใจได้แล้วค่อยอ่านต่อ โอเคป่ะ? ^^)
สิ่งที่ผมอยากให้คุณทำได้ หลังจากอ่านบทความชุดนี้ใน OHWEB ไปเรื่อยๆ คือ หน้าเว็บ HTML ที่จัดองค์ประกอบด้วย CSS และไม่มีไฟล์กราฟิคใดๆในนั้นเลย ประมาณรูปด้านล่างนี้ (คลิ๊กที่ภาพเพื่อดูขนาดขยายได้ครับ) และเราจะจัดเลย์เอาต์แบบอื่นด้วย CSS อีก 4-5 แบบ ส่วนหน้าเว็บจริงของรูปที่เห็นก็เข้าไปดูได้ที่ ลิงค์นี้
แต่ช้าก่อน! ผมได้ยินบางคนบ่นในใจว่า ผมขี้จุ๊ !!! เพราะ รูปภาพด้านบน กับ หน้าเว็บจริง ไม่เห็นจะเหมือนกัน!
อืมม... จะว่าผมโกหกก็ได้ เพราะเว็บบราวเซอร์ที่จะแสดง หน้าเว็บจริง กับ รูปภาพด้านบน ให้คุณเห็นเหมือนกันได้ ตอนนี้ก็มีแต่ web content engine อย่าง Webkit และ เว็บบราวเซอร์หรูหรา อย่าง Safari3 เท่านั้นแหละครับ (Safari ไม่ได้มีเฉพาะในเครื่อง Mac นะครับ ตอนนี้คุณสามารถดาวน์โหลด Safari3 มาใช้บน Windows ได้แล้ว ใช้ได้ตั้งแต่ Safari2 แล้วมั้ง? และอันที่จริง webkit ก็ไม่ใช่เว็บบราวเซอร์นะครับ แต่เป็นเหมือน "ยาบำรุงกำลัง" ที่นักพัฒนา Safari ของ Apple ปล่อยออกมา ให้ผู้คนได้ทดสอบความสามารถใหม่ๆในการแสดงผลหน้าเว็บ เช่น รองรับคุณสมบัติใหม่ๆของ HTML5 และ CSS3) หรือถ้าจะให้ใกล้เคียงหน่อย ก็ต้องใช้ FireFox3 ที่เริ่มรองรับ CSS3 ที่ผมนำมาใช้บ้างแล้ว ตอนนี้เรามาสนใจเรื่องที่สำคัญกว่าเรื่องบราวเซอร์ดีกว่า นั่นคือ การเขียนหน้าเว็บ
เริ่มที่ส่วน เนื้อหา กันก่อน เพราะเว็บเพจที่ไม่มีเนื้อหา ก็คงจะเรียกว่าเป็นเว็บเพจไม่ได้ เดี๋ยวเราจะ หัดเขียนเรียงความเป็นหน้าเว็บกัน คราวต่อไปค่อยมาตกแต่งมันด้วย CSS นะครับ (ผมจะไม่อธิบายการใช้แท็คทีละอันนะครับ เพราะมันน่าเบื่อ แต่จะมีตัวอย่างโค้ดให้เอาไปใช้ได้เลย เพราะเราจะจำวิธีการเขียนแท็คได้เอง ถ้าเราใช้งานมันบ่อยๆ จากนั้นคุณก็คงรู้เองว่ามันทำหน้าที่หรือมีลักษณะยังไง)
เอาล่ะ... เพื่อไม่ให้คุณต้องพะวงกับเรื่องเทคนิคก่อนเวลาอันควร ก็จัดการก็อปปี้โค้ดด้านล่างนี้ไปใส่ในโปรแกรมแก้ไขข้อความก่อนเลยครับ แล้วก็ Save As เป็นไฟล์ชื่อ index.html อย่าลืมพิมพ์นามสกุล .html ต่อท้ายไปด้วยนะครับ ไม่งั้นเราจะไม่ได้ไฟล์เว็บเพจ และก็สร้างโฟลเดอร์ไว้เก็บมันเฉพาะด้วยจะดีมาก เราจะได้รวมไฟล์อื่นๆที่จะเขียนเพิ่มทีหลังไว้ในที่เดียวกัน หลังจากเซฟแล้วก็ยังไม่ต้องปิดโปรแกรมนะครับ เดี๋ยวเราต้องกลับมาใช้มันอีก
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="th" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>เขียนเว็บเองก็ได้ ง่ายจัง!</title>
</head>
<body>
</body>
</html>
จากนั้นไปที่โฟลเดอร์ที่คุณเซฟไฟล์ index.html เอาไว้ แล้วก็เปิดมันด้วยโปรแกรมเว็บบราวเซอร์ (ปกติดับเบิ้ลคลิ๊กได้เลย ถ้ามันนามสกุล .html เว็บบราวเซอร์ของคุณจะรู้ว่าเป็นหน้าที่ของมันที่ต้องเปิดไฟล์นี้ให้คุณ แต่ถ้ามันไม่รู้ ก็คลิ๊กขวาเลือก Open With แล้วก็เลือกโปรแกรมเว็บบราวเซอร์ที่จะเปิดมัน)
นั่นไง! คุณเห็นอะไรมั้ย?
คุณจะไม่เห็นตัวหนังสือใดๆปรากฏบนหน้าเว็บที่คุณเพิ่งเปิดไป ยกเว้นส่วนหัวและแท็บของเว็บบราวเซอร์ จะมีคำว่า เขียนเว็บเองก็ได้ ง่ายจัง! ปรากฏอยู่ ซึ่งมาจาก element หรือ แท็คคู่ title นั่นเอง โดยแท็คเปิดจะอยู่ใน เครื่องหมาย < กับ > ส่วนแท็คปิดจะมี เครื่องหมาย / อยู่ด้านหน้าชื่อแท็คด้วย แบบด้านล่างนี้ครับ
แต่ถ้าคุณเห็นตัวอักษรใดๆในหน้าเว็บโล่งๆนั้น แปลว่า คุณลอกโค้ดไปแบบขาดๆเกินๆครับ! จัดการแก้ไขแล้วก็เซฟใหม่ซะ แล้วก็ Reload
แท็คคู่ title ใช้สำหรับแนะนำชื่อเว็บเพจให้เว็บบราวเซอร์รับทราบครับ และแท็คต่างๆที่ถูกห่อไว้ระหว่าง แท็คคู่ head จะไม่แสดงผลในหน้าเว็บ
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>เขียนเว็บเองก็ได้ ง่ายจัง!</title>
</head>
ถ้าเราต้องการแสดงเนื้อหาใดๆในหน้าเว็บ ก็ต้องเขียนมันให้อยู่ใน แท็คคู่ body อย่างเช่น
<h1>เขียนเว็บเองก็ได้ ง่ายจัง!</h1>
<p>
<em>ใครว่าเขียน HTML เป็นเรื่องเชย?</em>
ถ้าคิดจะออกแบบเว็บไซต์
แล้วเขียน HTML ไม่ได้
ก็เหมือน <strong>คนมีปืน แต่ไม่มีกระสุน!</strong>
</p>
<p>
เดี๋ยวเราจะพิสูจน์ให้เห็น ว่า
<strong>มันเจ๋งขนาดไหน!</strong>
</p>
</body>
ลองพิมพ์หรือก็อปปี้โค้ดด้านบนเพิ่มลงไประหว่าง แท็คคู่ body ในไฟล์ index.html แล้วเซฟนะครับ จากนั้นก็ Reload บราวเซอร์ คุณก็จะเห็นข้อความบางอย่างบนบราวเซอร์แล้ว... เย้!!!
อ่า... ผมรู้ครับว่า หน้าเว็บที่คุณเห็นนั้น มันดูเห่ย! แต่ใจเย็นๆเดี๋ยวเราค่อยมาตกแต่งมันทีหลัง ตอนนี้เราต้องหัดเขียนเรียงความกันก่อน เดี๋ยวผมจะให้โค้ดตัวอย่างไว้เป็นการบ้านนะครับ
ไปที่ http://ohweb.info/html/sample/perfect-webpage.html แล้ว View Source เพื่อดูซอร์สโด้ดของหน้าเว็บนั้นนะครับ (ถ้าใครไม่เคยดูซอร์สโค้ดมาก่อน ให้เลือกที่เมนู View ของบราวเซอร์ แล้วมองหาคำว่า Page Source หรือ View Source ดูนะครับ หรือ คลิ๊กขวาแล้วเลือก View Source ก็ได้ หรือ Control+U ก็ได้) แล้วก็จัดการลอกโค้ดที่เห็นไปแก้ไขเล่นได้เลย ผมใส่คำอธิบายการใช้งาน Elements หรือ แท็ค ที่จำเป็นต้องใช้กันบ่อยๆไว้ในนั้นแล้ว โดยใส่เป็นคอมเมนต์ไว้ในซอร์สโค้ดเลย และขอให้ลองสังเกตลักษณะเฉพาะของแต่ละแท็คดู แล้วคุณจะรู้ว่า HTML นั้นเข้าใจได้ไม่ยาก เพราะมันเป็นภาษาที่กำหนดการใช้งานไว้สำหรับคุณแล้วนั่นเอง แล้วคราวหน้าเราค่อยมาละเลงสีบนหน้าเว็บด้วย CSS กัน (มันส์ อย่าบอกใครเชียว!)
Guide
Blog Tags
แสดงความคิดเห็น