สำหรับบทความแนะนำนี้ ขอแนะนำให้ใช้เครื่องมือที่ใช้ง่ายที่สุดเช่น Notepad (สำหรับ Windows) TextEdit (สำหรับ Mac) หรือ KEdit (สำหรับ KDE) เมื่อคุณเข้าใจหลักการแล้วคุณอาจสามารถเปลี่ยนมาใช้เครื่องมือขั้นสูงกว่าได้หรือใช้โปรแกรมที่นิยมใช้กันทั่วไปเช่น Style Master Dreamweaver หรือ GoLive
อย่าใช้โปรแกรมเขียนเช่น Microsoft Word หรือ OpenOffice เนื่องจากโปรแกรมเหล่านี้จะสร้างไฟล์ที่ เวบบราวเซอร์ไม่สามารถอ่านได้ สำหรับ HTML และ CSS นั้นเราต้องการไฟล์ข้อความที่มีความเรียบง่าย
ขั้นแรกก็คือให้เปิดโปรแกรมสร้างข้อความ (Notepad, TextEdit, KEdit, หรืออะไรก็ตามที่คุณชอบใช้) เริ่มจากหน้าที่ว่างและพิมพ์ ข้อความต่อไปนี้ลงไป
My first styled page
Welcome to my styled page!
It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere…
There should be more here, but I don't know
what yet.
by myself.
ความจริงแล้วคุณไม่จำเป็นต้องพิมพ์เพียงแค่ก๊อปปี้ข้อความบนหน้านี้และนำไปวางไว้ในโปรแกรม
(ถ้าคุณใช้โปรแกรม TextEdit สำหรับ Mac อย่าลืมกำหนดใน TextEdit ให้เป็นแค่ข้อความธรรมดาเท่านั้นโดยไปตรงเมนู Format และ เลือก "สร้างข้อความธรรมดา")
บรรทัดแรกของไฟล์ HTML ข้างต้นเป็นการบอกบราวเซอร์ว่าเป็น HTML ประเภทใด (DOCTYPE หมายถึง DOCument TYPE) ในกรณี นี้คือ HTML version 4.01
คำที่อยู่ภายใน < และ > เรียกว่า tags ดังที่คุณได้เห็นว่า เอกสารจะอยู่ภายใน และ tags ระหว่าง และ จะมีข้อมูลหลายรูปแบบที่ไม่แสดงผลบนหน้าจอ ส่วนใหญ่แล้วจะประกอบไปด้วย title ของเอกสารแต่ภายหลังเราจะเพิ่ม CSS style sheet ลงไปในส่วนนี้เช่นกัน
ส่วน นั้นจะเป็นส่วนที่วางข้อความจริงๆในเอกสาร ตามหลักการแล้วทุกอย่างที่อยู่ใน body tag จะถูกแสดงบนบราวเซอร์ยกเว้น ข้อความที่อยู่ระหว่าง ซึ่งไว้ใช้ใส่คอมเมนต์สำหรับเราเอง ซึ่งบราวเซอร์จะไม่อ่านค่าดังกล่าว
จาก tag ในตัวอย่าง
- จะใช้สำหรับ "รายการที่ไม่ได้เรียงตามลำดับ" เป็นรายการที่ไม่ได้เรียงตามหมายเลข tag
- จะเป็นตัว เริ่มต้นสำหรับสิ่งที่อยู่ในรายการ tag และ ได้ ซึ่งในที่นี้ได้ละไว้เพื่อให้ง่ายต่อการอ่าน แต่คุณอาจจะใส่ tag ปิดก็ได้ถ้าคุณต้องการ
สมมติว่าหน้านี่เป็นหนึ่งหน้าของเวบไซด์ที่มีหน้าอื่นๆที่คลายคลึงกัน ดังเช่นหน้าเวบปัจจุบันทั่วๆไปเวบนี้มีเมนูเพื่อลิงค์ไปยังหน้าอื่นๆในเวบ ที่เราสมมติขึ้นมานี้ซึ่งมีลายเซ็นต์และเนื้อหาที่มีลักษณะเฉพาะ
ทีนี้ลองเลือก “Save As…” จาก เมนู file และเลือกแฟ้มเก็บเอกสารที่คุณต้องการจะเซฟเก็บไว้ (หรือเซฟไว้บน เดสก์ทอปก็ได้) และให้ เซฟไฟล์ดังกล่าวเป็น “mypage.html” แต่อย่าเพิ่งปิดโปรแกรมดังกล่าว เราจะต้องใช้งานมันอีก
(หากคุณใช้โปรแกรม TextEdit สำหรับ Mac OS X ก่อนเวอร์ชั่น 10.4 คุณจะพบว่ามี option ให้เลือกว่า อย่าแนบ .txt ต่อท้ายในการเซฟ ให้เลือก option ดังกล่าว เนื่องจากชื่อ “mypage.html” นั้นมีสกุลต่อท้ายอยู่แล้ว เวอร์ชั่นใหม่ของ TextEdit จะสังเกตเห็นว่ามี .html ต่อท้ายอยู่แล้วโดยอัตโนมัติ)
ต่อไป ให้เปิดไฟล์ใน บราวเซอร์ คุณสามารถเลือกทำได้ดังต่อไปนี้ ค้นหาไฟล์ที่เซฟไว้ด้วย ไฟล์เมเนเจอร์ (Windows Explorer, Finder หรือ Konqueror) และให้คลิกหรือดับเบิ้ลคลิกไฟล์ “mypage.html” ซึ่งน่าที่จะเปิดในบราวเซอร์ที่ตั้งไว้เป็น default (หากไม่เป็นเช่นนั้น ให้เปิดบราวเซอร์และลากไฟล์ดังกล่าวมาใส่ไว้)
คุณจะเห็นดังนี้ ซึ่งหน้าตานั้นดูค่อนข้างที่จะธรรมดาน่าเบื่อ
ขั้นที่2: การใส่สีเพิ่มเติม
คุณอาจจะเห็นว่ามีข้อความสีดำอยู่บนพื้นหลังสีขาวแต่ทั้งนี้ก็ขึ้นอยู่กับการอ่านค่าของบราวเซอร์ ดังนั้นวิธีที่ง่ายวิธีหนึ่งที่เราสามารถสร้างสไตล์ ให้กับหน้าเวบได้คือการใส่สี (ให้เปิดบราวเซอร์ทิ้งไว้เพราะเราจะต้องใช้อีกภายหลัง)
เราจะเริ่มต้นจาการใส่ style sheet ที่อยู่ในไฟล์เดียวกันกับ HTML ก่อน ภายหลังเราจะแยกไฟล์ HTML กับ CSS ออกจากกัน การแยกไฟล์ นั้นมีข้อดีเนื่องจากเราสามารถนำ style sheet เดียวกันมาใช้กับไฟล์ HTML ได้หลายไฟล์ได้ง่ายโดยที่เขียน style sheet เพียงแค่ครั้งเดียว แต่สำหรับขั้นตอนนี้ เราจะเก็บทุกอย่างไว้ในไฟล์เดียวกัน
เราต้องใส่ element
[etc.]
บรรทัดแรกบอกไว้ว่า style sheet ดังกล่าวเขียนขึ้นใน CSS (“text/css”) บรรทัดที่สองบอกว่าเราได้เพิ่ม style ลงไปใน element “body” บรรทัดที่สามเป็นตัวกำหนดสีของข้อความให้เป็นสีม่วงและบรรทัดถัดไปเป็นตัวกำหนดพื้นหลังให้เป็นสีประมาณเหลืองอมเขียว
Style sheets ใน CSS นั้นสร้างขึ้นมาจากกฎ กฏแต่ละกฏประกอบไปด้วยสามส่วนดังนี้
selector (จากตัวอย่างคือ “body”) ซึ่งเป็นตัวบอกบราวเซอร์ว่าส่วนใดของเอกสารที่มีการนำกฏมาใช้
property (จากตัวอย่างคือ 'color' และ 'background-color' ซึ่งเป็น property ทั้งสองตัว) ซึ่งเป็นตัวบอกว่าเราจะกำหนด layout ในรูปแบบไหน
และ value ('purple' and '#d8da3d')ซึ่งเป็นตัวบอกค่า value ของ style property
ตัวอย่างข้างล่างนี้แสดงให้เห็นการรวมกันของกฏ เราได้กำหนด property ไว้สองตัวดังนั้นเราจึงได้แยกกฏออกมาเป็น 2 กฏดังนี้
body { color: purple }
body { background-color: #d8da3d }
แต่เนื่องจากกฎทั้งสองใช้กับ body ทั้งคู่ดังนั้นเราจะเขียน “body” แค่เพียงครั้งเดียวเท่านั้นและใส่ propert และ value ไว้ด้วยกัน สำหรับเรื่องเกี่ยวกับ selector ให้อ่านเพิ่มได้ในบทที่2 ของ Lie & Bos.
นอกจากนี้พื้นหลังของ element body ยังเป็นพื้นหลังของเอกสารทั้งหมด หากเราไม่ได้กำหนดพื้นหลังที่เฉพาะให้กับ element อื่นๆ เช่น (p, li, address…) ตามค่า default แล้วก็จะไม่มีค่าพื้นหลัง (หรืออาจจะเป็นแบบโปร่งแสง) ค่า property 'color' จะเป็นตัวกำหนด สีของข้อความสำหรับ element body แต่สำหรับ element อื่นๆที่อยู่ภายใน body จะมีสีตามค่า body เช่นกันยกเว้นว่าจะมีการกำหนด ค่าไว้ต่างหาก (ซึ่งเราจะเพิ่มสีอื่นๆเข้าไปในภายหลัง)
ตอนนี้ให้เซฟไฟล์ดังกล่าวไว้ (โดยใช้คำสั่ง “Save” จากเมนู File) และกลับไปยังหน้าบราวเซอร์หากคุณกดปุ่ม “Reload” หน้าตา ของเวบจะเปลี่ยนไปจากหน้าตาที่ธรรมดาและน่าเบื่อเป็นหน้าที่มีสี (แต่ก็ยังดูค่อนข้างหน้าเบื่อ) นอกจากรายชื่อของลิงค์ด้านบน ตอนนี้ ข้อความควรจะเป็นสีม่วงซึ่งตัดกับสีพื้นหลังคือสีเหลืองอมเขียว
ภาพตัวอย่างเป็นการแสดงให้เห็นว่าบราวเซอร์แสดงผลอย่างไรเมื่อได้มีการเพิ่มสีเข้าไปบางส่วน
เราสามารถกำหนดสีใน CSS ได้หลายวิธี ตัวอย่างข้างต้นได้แสดงไว้ทั้งสองวิธีคือใช้ทั้งชื่อ (“purple”) และค่าโคด hexadecimal (“#d8da3d”) สามารถใช้ชื่อสีได้ประมาณ 140 ชื่อและ ค่าโคด hexadecimal สามารถใช้สีได้มากกว่า 16 ล้านสี ในส่วนของการเพิ่มสไตล์ ได้มี การอธิบายเกี่ยวกับส่วนนี้ไว้
ขั้นที่ 3: การเพิ่มฟอนท์
อีกสิ่งหนึ่งที่สามารถทำได้อย่างง่ายคือการแยกความแตกต่างบางส่วนให้กับฟอนท์ในแต่ละ element ของหน้า ดังนั้นให้ลองกำหนด ข้อความโดยใช้ฟอนท์ “Georgia” ยกเว้น h1 ซึ่งเราจะใช้ฟอนท์ “Helvetica” แทน
เมื่อแสดงบนเวบแล้วเราไม่สามารถมั่นใจได้เลยว่าผู้อ่านจะมีฟอนท์อะไรบ้างในเครื่องคอมพิวเตอร์ของเขาดังนั้นเราควรจะต้องเพิ่มทางเลือก บางอย่างเข้าไปด้วยเช่นกัน ถ้าผู้อ่านไม่มีฟอนท์ Georgia อาจจะใช้ Times New Roman หรือ Times แทนก็ได้และหากไม่มีฟอนท์ ทั้งสองเลยบราวเซอร์จะเลือกฟอนท์ใดๆก็ตามที่อยู่ในตระกูล serifs หากไม่มี Helvetica ก็ใช้ Geneva Arial และ SunSans-Regular ที่มี ลักษณะคล้ายกันแทนแต่หากไม่สามารถใช้ได้เลย บราวเซอร์ก็จะเลือกฟอนท์อื่นที่ไม่ใช่ serif
ในโปรแกรมแก้ไขให้เพิ่มบรรทัดต่อไปนี้เข้าไป (lines 7-8 and 11-13)
[etc.]
หากคุณเซฟไฟล์นี้อีกครั้งและกดปุ่ม “Reload” ในบราวเซอร์ ตอนนี้ฟอนท์ที่ปรากฎควรจะมีหน้าตาที่เปลี่ยนไปทั้งในส่วน heading และ ข้อความอื่นๆ
