พักเรื่อง cms (ระบบจัดการเนื้อหาเว็บไซต์) และ เรื่องเกี่ยวกับเว็บโฮสต์ มาดูเรื่อง กระดูกสันหลังของเว็บ กันดีกว่าครับ คือ HTML (Hyper Text Markup Language) นั่นเอง

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

HTML เป็นภาษาที่ตรงไปตรงมามากๆ คือ สั่งยังไงได้อย่างนั้น (ยกเว้นเราจะเขียนมาร์คอัพหรือแท็คผิด) และแต่ละแท็ค (Elements) ใน HTML ก็ถูกกำหนดให้มีหน้าที่และลักษณะเฉพาะของมันอยู่แล้ว เช่น <h1> ก็ใช้กับ heading หรือ หัวข้อใหญ่ระดับ 1 (ใหญ่สุด) หรือ <p> ก็ใช้กับย่อหน้าหรือ paragraph ทั่วๆไป และ HTML ก็ไม่ใช่ภาษาโปรแกรม ที่ต้องคำนวณหรือประมวลผลในฝั่งเซิร์ฟเวอร์ (อย่างพวก php, asp, python, ruby ฯลฯ) มันเลยไม่ตั้งแง่และเล่นตัวเหมือนภาษาโปรแกรมพวกนั้น คุณยังไม่ต้องไปสนใจเรื่องทางเทคนิคพวกนี้หรอกนะครับ เพราะตอนนี้เรากำลังจะเขียนหน้าเว็บ (webpage) โดยไม่ต้องอาศัยความสามารถของภาษาโปรแกรมในฝั่งเซิร์ฟเวอร์ และยังไม่ต้องยุ่งเกี่ยวกับอินเตอร์เน็ตด้วย (ว่าแต่ว่า คุณเข้ามาอ่านตรงนี้ได้ยังไง ถ้าคุณไม่ได้ต่อเน็ต?)

ผมคิดว่า HTML นั้นจำเป็นมาก สำหรับงานออกแบบเว็บไซต์ ไม่ว่าจะเป็นการออกแบบเทมเพลตแบบ Static Page หรือเทมเพลตสำหรับ CMS ก็ตาม เพราะโดยส่วนตัวผมจะไม่เริ่มออกแบบเลย์เอาต์หน้าเว็บในโปรแกรมกราฟิค แต่จะลงมือซัดเป็น HTML + CSS เลย เพราะรู้สึกว่าการออกแบบหน้าเว็บเป็นไฟล์กราฟิคก่อน มันเสียเวลามาก! และเป็นการทำงานซ้ำซ้อน แถมสิ่งที่ได้ในภาพกราฟิค ก็ไม่มีทางเหมือนหน้าเว็บจริง เพราะเราไม่ได้สัมผัสถึงข้อจำกัดและลักษณะเฉพาะของหน้าเว็บไงครับ เช่น เรื่องเกี่ยวกับลิงค์ เรื่องฟอนต์ ฯลฯ

และแน่นอน... ผมไม่ได้มามือเปล่า หรือ เขียนๆบ่นๆแล้วก็จากไป โดยไม่มีตัวอย่างไว้ให้พวกเราได้ลองเล่นสนุกกัน (Happy Ohweb! เน้นความสนุกสนานอยู่แล้นนน!) ผมตั้งใจจะรวบรวมตัวอย่างโค้ดและหน้าเว็บไว้ให้ดูด้วย แต่จะเน้นที่เรื่องการเขียนเอกสาร HTML กับ การจัดโครงร่างและตกแต่งหน้าเว็บด้วย CSS (Cascading Style Sheets) ก่อนนะครับ ส่วนเรื่องยากๆหรือทฤษฎีต่างๆ อย่าง หลักการออกแบบเว็บไซต์ (ทั้ง Web Design Principles, Usability, Accessibility, Semantic Web และอื่นๆอีกมากมาย) ขอให้ทำใจข้ามไปก่อน แต่จะพยายามสอดแทรกไว้เท่าที่จะทำได้ เพราะจริงๆแล้วหลักการพวกนี้สำคัญมากในงานออกแบบเว็บไซต์ เพื่อให้ผู้คนในวงกว้างสามารถใช้งานเว็บไซต์ของเราได้อย่างที่เราคาดการณ์ไว้ล่วงหน้า

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

แต่ก่อนที่เราจะเริ่มต้นทำตัวเป็น เว็บดีไซเนอร์ (เรียกตัวเองเท่ๆเข้าไว้ ต่อไปคุณจะได้ออกแบบเว็บไซต์เองแน่ๆ) คุณควรจะมีสิ่งเหล่านี้ก่อนครับ

1. คอมพิวเตอร์ซักเครื่อง : จะใช้รุ่นไหนก็ได้ ตัวเครื่องจะเก่าหรือใหม่ หรือมีรอยขีดข่วนก็ไม่ว่ากัน แต่ถ้าใครยังใช้ Windows95 หรือ MacOS8 อยู่ โปรดพิจารณาอัพเกรดโดยด่วน! เพราะเรากำลังจะเขียนหน้าเว็บสำหรับคนใน ศตวรรษที่ 21 ได้ดูกันแบบแจ่มๆนะครับ!
2. โปรแกรมเว็บบราวเซอร์ : หรือโปรแกรมเล่นเน็ตที่ส่วนมากมีกันทุกเครื่องนั่นเอง เช่น Internet Explorer (IE), FireFox, Safari, Opera ฯลฯ ตอนนี้ใช้แค่ตัวเดียวก่อนก็ได้ครับ และ ปกติใน Windows จะมี IE ,ใน Mac จะมี Safari และใน Linux อย่าง Ubuntu จะมี FireFox ติดตั้งไว้ให้เราใช้อยู่แล้ว
3. โปรแกรมแก้ไขข้อความ : โปรแกรมพิมพ์ข้อความสามัญประจำเครื่องนั่นแหละ ซึ่งคงมีอยู่แล้วในเครื่องของคุณ เช่น Notepad, TextEdit, Gedit ฯลฯ แต่ไม่ต้องใช้ Microsoft Word นะครับ มันไม่เหมาะกับการเขียนเว็บ และยังไม่ต้องไปสนใจ โปรแกรมแพงๆอย่าง Dreamweaver ด้วย เพราะมันแสนรู้เกินไป ทำให้เราขี้เกียจทำความเข้าใจโค้ดที่เราเขียน และถ้าคุณต้องการความสะดวกในการเขียนโค้ดขึ้นมาหน่อย ก็ดาวน์โหลดโปรแกรมที่มันสามารถไฮไลต์หรือแยกสีในโค้ดให้คุณได้ เช่น Notepad2 สำหรับ Windows และ TextWrangler สำหรับ MacOS ส่วน Linux อย่าง Ubuntu รู้สึกว่า Gedit มันจะทำไฮไลต์ให้อยู่แล้วนะ โปรแกรมพวกนี้ฟรีครับ ดาวน์โหลดมาติดตั้งในเครื่องได้เลย

เอาล่ะ... ท่าทางผมจะบ่นมากเกินไปแล้ว เดี๋ยวคราวหน้าผมจะทยอยนำวิธีการเขียนเว็บเพจด้วย HTML + CSS มาเป็นของกำนัลนะครับ