สำหรับบทความแนะนำนี้ ขอแนะนำให้ใช้เครื่องมือที่ใช้ง่ายที่สุดเช่น
Notepad (สำหรับ Windows) TextEdit (สำหรับ Mac) หรือ KEdit (สำหรับ
KDE)
เมื่อคุณเข้าใจหลักการแล้วคุณอาจสามารถเปลี่ยนมาใช้เครื่องมือขั้นสูงกว่าได้หรือใช้โปรแกรมที่นิยมใช้กันทั่วไปเช่น
Style Master Dreamweaver หรือ GoLive
อย่าใช้โปรแกรมเขียนเช่น Microsoft Word หรือ OpenOffice
เนื่องจากโปรแกรมเหล่านี้จะสร้างไฟล์ที่ เวบบราวเซอร์ไม่สามารถอ่านได้
สำหรับ HTML และ CSS นั้นเราต้องการไฟล์ข้อความที่มีความเรียบง่าย
ขั้นแรกก็คือให้เปิดโปรแกรมสร้างข้อความ (Notepad, TextEdit,
KEdit, หรืออะไรก็ตามที่คุณชอบใช้) เริ่มจากหน้าที่ว่างและพิมพ์
ข้อความต่อไปนี้ลงไป
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
</head>
<body>
<!-- Site navigation menu -->
<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="musings.html">Musings</a>
<li><a href="town.html">My town</a>
<li><a href="links.html">Links</a>
</ul>
<!-- Main content -->
<h1>My first styled page</h1>
<p>Welcome to my styled page!
<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere…
<p>There should be more here, but I don't know
what yet.
<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
by myself.</address>
</body>
</html>
ความจริงแล้วคุณไม่จำเป็นต้องพิมพ์เพียงแค่ก๊อปปี้ข้อความบนหน้านี้และนำไปวางไว้ในโปรแกรม
(ถ้าคุณใช้โปรแกรม TextEdit สำหรับ Mac อย่าลืมกำหนดใน TextEdit
ให้เป็นแค่ข้อความธรรมดาเท่านั้นโดยไปตรงเมนู Format และเลือก
"สร้างข้อความธรรมดา")
บรรทัดแรกของไฟล์ HTML ข้างต้นเป็นการบอกบราวเซอร์ว่าเป็น HTML
ประเภทใด (DOCTYPE หมายถึง DOCument TYPE) ในกรณีนี้คือ HTML
version 4.01
คำที่อยู่ภายใน < และ > เรียกว่า
tags
ดังที่คุณได้เห็นว่า เอกสารจะอยู่ภายใน <html> และ
</html> tags ระหว่าง <head>และ </head>
จะมีข้อมูลหลายรูปแบบที่ไม่แสดงผลบนหน้าจอ
ส่วนใหญ่แล้วจะประกอบไปด้วย title ของเอกสารแต่ภายหลังเราจะเพิ่ม CSS
style sheet ลงไปในส่วนนี้เช่นกัน
ส่วน <body>นั้นจะเป็นส่วนที่วางข้อความจริงๆในเอกสาร
ตามหลักการแล้วทุกอย่างที่อยู่ใน body tag
จะถูกแสดงบนบราวเซอร์ยกเว้นข้อความที่อยู่ระหว่าง<!-- และ -->
ซึ่งไว้ใช้ใส่คอมเมนต์สำหรับเราเอง
ซึ่งบราวเซอร์จะไม่อ่านค่าดังกล่าว
จาก tag ในตัวอย่าง <ul>จะใช้สำหรับ
"รายการที่ไม่ได้เรียงตามลำดับ"
เป็นรายการที่ไม่ได้เรียงตามหมายเลข tag <li>จะเป็นตัว
เริ่มต้นสำหรับสิ่งที่อยู่ในรายการ tag <p> ใช้สำหรับ
"ย่อหน้า" และ tag<a>ใช้สำหรับ “Anchor” ซึ่งไว้ใช้ในการลิงค์
ถ้าคุณอยากจะรู้ว่าชื่อที่อยู่ใน <…>มีความหมายว่าอะไร
ที่ๆเหมาะสำหรับการเริ่มต้นอ่านคือ
Getting started withHTML (เริ่มต้นด้วย
HTML) แต่ไม่ได้กล่าวถึงโครงสร้างของหน้า HTML มากนัก
- tag "ul" ใช้แสดงรายการที่เป็น link
ต่อรายการหนึ่งซึ่งในที่นี้ก็คือ "เมนู navigation ของเวบไซด์"
โดยใช้ลิงค์ไปยังหน้าอื่นๆภายในเวบไซด์
สมมติว่าทุกหน้าของเวบไซด์มีเมนูเหมือนกันหมด
- element "h1" และ "p"
ทำให้เกิดเนื้อหาที่มีลักษณะเด่นภายในหน้านี้ ในขณะที่
ลายเซ็นต์ในส่วนท้าย ("address") จะเหมือนกันในทุกๆหน้าของเวบไซด์
ข้อสังเกตก็คือไม่ได้มีการปิด tag ของ element “li” และ “p” ใน
HTML (แต่ไม่ใช่ใน XHTML) สามารถละ tag ปิด</li> และ
</p> ได้ซึ่งในที่นี้ได้ละไว้เพื่อให้ง่ายต่อการอ่าน
แต่คุณอาจจะใส่ 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
(หากไม่เป็นเช่นนั้นให้เปิดบราวเซอร์และลากไฟล์ดังกล่าวมาใส่ไว้)
คุณจะเห็นดังนี้ ซึ่งหน้าตานั้นดูค่อนข้างที่จะธรรมดาน่าเบื่อ
