1. ก้าวแรกที่ต้องปรับปรุง
เพิ่ม DOCTYPE ที่ถูกต้องลงในเพจ
DOCTYPE เป็นตัวย่อของประเภทเอกสาร ส่วนใหญ่ใช้เพื่อระบุเวอร์ชันของ XHTML หรือ HTML ที่ใช้ เบราว์เซอร์ตีความโค้ดของหน้าตาม DTD (คำจำกัดความประเภทเอกสาร) ที่กำหนดโดย DOCTYPE
(1) หัวต่อหัวเลี้ยว (หัวต่อหัวเลี้ยว)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2) เข้มงวด
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3)ประเภทเฟรม (เฟรมเซ็ต)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
ตั้งค่าเนมสเปซ (เนมสเปซ)
เพิ่มรหัสต่อไปนี้โดยตรงหลังการประกาศ DOCTYPE:
<html XMLns="http://www.w3.org/1999/xhtml" >
เนมสเปซคือ DTD แบบละเอียดที่รวบรวมประเภทองค์ประกอบและชื่อแอตทริบิวต์ การประกาศเนมสเปซทำให้คุณสามารถระบุเนมสเปซของคุณผ่านตัวชี้ที่อยู่ออนไลน์ เพียงกรอกรหัสตามปกติ
ประกาศภาษาการเขียนโค้ดของคุณ
เพื่อให้เบราว์เซอร์ตีความได้อย่างถูกต้องและผ่านการตรวจสอบมาร์กอัป เอกสาร XHTML ทั้งหมดจะต้องประกาศภาษาการเข้ารหัสที่พวกเขาใช้ รหัสมีดังนี้:
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
ภาษาการเขียนโค้ดที่ประกาศที่นี่คือภาษาจีนตัวย่อ GB2312 หากคุณต้องการสร้างเนื้อหาภาษาจีนตัวเต็ม คุณสามารถกำหนดเป็น BIG5
เขียนป้ายกำกับทั้งหมดด้วยตัวอักษรพิมพ์เล็ก
XML คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ ดังนั้น XHTML จึงต้องคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ด้วย ชื่อองค์ประกอบและแอตทริบิวต์ XHTML ทั้งหมดจะต้องเป็นตัวพิมพ์เล็ก มิฉะนั้นเอกสารของคุณจะถือว่าไม่ถูกต้องโดยการตรวจสอบ W3C ตัวอย่างเช่นรหัสต่อไปนี้ไม่ถูกต้อง:
<TITLE>ประวัติบริษัท</TITLE>
วิธีเขียนที่ถูกต้องคือ:
<title>ประวัติบริษัท</title> ในทำนองเดียวกัน เปลี่ยน <P> เป็น <p>, <B> เป็น <b> ฯลฯ ขั้นตอนการแปลงนี้เป็นเรื่องง่าย
เพิ่มแอตทริบิวต์ alt ให้กับรูปภาพ
เพิ่มแอตทริบิวต์ alt ให้กับรูปภาพทั้งหมด แอตทริบิวต์ alt ระบุว่าข้อความแทนที่จะแสดงขึ้นเมื่อไม่สามารถแสดงรูปภาพได้ ซึ่งเป็นสิ่งที่แจกจ่ายได้สำหรับผู้ใช้ทั่วไป แต่เป็นสิ่งสำคัญสำหรับเบราว์เซอร์แบบข้อความเท่านั้นและผู้ใช้ที่ใช้โปรแกรมอ่านหน้าจอ เมื่อมีการเพิ่มแอตทริบิวต์ alt เท่านั้น รหัสจะผ่านการตรวจสอบความถูกต้องของ W3C โปรดทราบว่าเราจำเป็นต้องเพิ่มแอตทริบิวต์ alt ที่มีความหมาย การเขียนดังต่อไปนี้ไม่มีความหมาย:
<img src="logo_unc_120x30.gif" alt="logo_unc_120x30.gif">
วิธีเขียนที่ถูกต้อง:
<img src="logo_unc_120x30.gif" alt="โลโก้บริษัท UNC คลิกเพื่อกลับสู่หน้าแรก">
อ้างอิงค่าแอตทริบิวต์ทั้งหมด
ใน HTML คุณไม่จำเป็นต้องอ้างค่าแอตทริบิวต์ แต่ใน XHTML จะต้องอ้างอิงค่าเหล่านั้น
ตัวอย่าง: height="100" ไม่ใช่ height=100
ปิดแท็บทั้งหมด
ใน XHTML ทุกแท็กที่เปิดอยู่จะต้องปิด แบบนี้:
<p>ทุกแท็บที่เปิดอยู่จะต้องปิด </p> <b>HTML ยอมรับแท็กที่ไม่ปิดได้ แต่ XHTML ไม่สามารถทำได้ </ข>
กฎนี้สามารถหลีกเลี่ยงความสับสนและปัญหา HTML ได้ ตัวอย่างเช่น หากคุณไม่ปิดแท็กรูปภาพ คุณอาจประสบปัญหาในการแสดง CSS ในบางเบราว์เซอร์ ใช้วิธีนี้เพื่อให้แน่ใจว่าเพจปรากฏขึ้นตามที่คุณออกแบบ ควรสังเกตว่าแท็กว่างจะต้องปิดด้วย ใช้เครื่องหมายทับ "/" ที่ส่วนท้ายของแท็กเพื่อปิดตัวเอง ตัวอย่างเช่น:
<br /> <img src="webstandards.gif" />
หลังจากได้รับการประมวลผลตามกฎเจ็ดข้อข้างต้น โดยพื้นฐานแล้วหน้าเว็บจะตรงตามข้อกำหนดของ XHTML1.0 แต่เรายังต้องตรวจสอบว่าเป็นไปตามมาตรฐานจริงหรือไม่ เราสามารถใช้ W3C เพื่อให้บริการตรวจสอบความถูกต้องฟรี (http://validator.w3.org/) แก้ไขข้อผิดพลาดทีละรายการหลังจากค้นพบแล้ว
2. ขั้นตอนที่สองของการปรับปรุง
การปรับปรุงครั้งต่อไปของเราส่วนใหญ่อยู่ที่การแยกโครงสร้างและประสิทธิภาพ ขั้นตอนนี้ไม่ใช่เรื่องง่ายที่จะบรรลุผลเหมือนขั้นตอนแรก เราต้องการการเปลี่ยนแปลงแนวคิด เช่นเดียวกับการเรียนรู้และการประยุกต์ใช้เทคโนโลยี CSS2 แต่การเรียนรู้สิ่งใหม่ต้องใช้เวลาใช่ไหม? เคล็ดลับคือการเรียนรู้ด้วยการลงมือทำ หากคุณใช้เค้าโครงตารางมาโดยตลอดและไม่เคยใช้ CSS เลย ไม่จำเป็นต้องรีบเร่งที่จะบอกลาเค้าโครงตาราง คุณสามารถแทนที่แท็กแบบอักษรด้วยสไตล์ชีตได้ เมื่อคุณเรียนรู้มากขึ้น คุณสามารถทำอะไรได้มากขึ้น เอาล่ะ มาดูสิ่งที่เราต้องทำกัน:
กำหนดลักษณะที่ปรากฏขององค์ประกอบด้วย CSS
เราได้พัฒนานิสัยในการเขียนโลโก้ เมื่อเราต้องการให้แบบอักษรใหญ่ขึ้น เราใช้ <h1> และเมื่อเราต้องการเพิ่มสัญลักษณ์จุดข้างหน้า เราก็ใช้ <li> เรามักจะคิดว่า <h1> มีขนาดใหญ่ <li> เป็นจุด และ <b> เป็น "ข้อความตัวหนา" ในความเป็นจริง <h1> สามารถเป็นอะไรก็ได้ที่คุณต้องการ เมื่อใช้ CSS <h1> อาจกลายเป็นแบบอักษรขนาดเล็ก <p> ข้อความอาจมีขนาดใหญ่และหนา และ <li> สามารถกลายเป็นรูปภาพ และอื่นๆ เราไม่สามารถบังคับองค์ประกอบโครงสร้างให้บรรลุการนำเสนอได้ เราควรใช้ CSS เพื่อกำหนดลักษณะที่ปรากฏขององค์ประกอบเหล่านั้น ตัวอย่างเช่น เราสามารถทำให้ส่วนหัวระดับ 6 เริ่มต้นดั้งเดิมดูมีขนาดเท่ากันได้:
h1, h2, h3, h4, h5, h6{ ตระกูลแบบอักษร: 宋体, ขนาดตัวอักษร: 12px;
แทนที่ขยะที่ไม่มีความหมายด้วยองค์ประกอบที่มีโครงสร้าง
หลายๆ คนอาจไม่เคยรู้ว่าองค์ประกอบ HTML และ XHTML ได้รับการออกแบบมาเพื่อแสดงโครงสร้าง พวกเราหลายคนเริ่มคุ้นเคยกับการใช้องค์ประกอบเพื่อควบคุมการนำเสนอ แทนที่จะเป็นโครงสร้าง ตัวอย่างเช่น รายการอาจถูกทำเครื่องหมายดังนี้:
ประโยคที่ 1<br /> ประโยคที่ 2<br /> ประโยคที่ 3<br />
จะดีกว่าถ้าเราใช้รายการที่ไม่เรียงลำดับแทน:
<ul> <li>ประโยคที่ 1</li> <li>ประโยคที่ 2</li> <li>ประโยคที่ 3</li> </ul>
คุณอาจพูดว่า "แต่ <li> แสดงจุด และฉันไม่ต้องการใช้จุด" ที่จริงแล้ว CSS ไม่ได้ระบุว่าองค์ประกอบมีลักษณะอย่างไร คุณสามารถปิดจุดได้โดยใช้ CSS
เพิ่มรหัสลงในแต่ละตารางและแบบฟอร์ม
จัดทำตารางหรือสร้างมาร์กอัปที่มีโครงสร้างเฉพาะตัว เช่น
<table id="เมนู">
ขั้นต่อไป เมื่อเขียนสไตล์ชีต คุณสามารถสร้างตัวเลือก "เมนู" และเชื่อมโยงกับกฎ CSS ที่จะบอกเซลล์ตาราง ป้ายกำกับข้อความ และองค์ประกอบอื่นๆ ทั้งหมดถึงวิธีการแสดง ด้วยวิธีนี้ ไม่จำเป็นต้องแนบแอตทริบิวต์เลเยอร์การนำเสนอที่ซ้ำซ้อนและใช้แบนด์วิดท์ เช่น ความสูง ความกว้าง การจัดตำแหน่ง และสีพื้นหลัง ให้กับแต่ละแท็ก <td> เพียงแนบแท็ก (แท็ก ID ที่ติดแท็ก "เมนู") คุณสามารถดำเนินการนำเสนอเฉพาะกิจเพื่อให้ได้มาร์กอัปโค้ดที่สะอาดตาและกะทัดรัดภายในสไตล์ชีตที่แยกต่างหาก
สำหรับการปรับปรุงขั้นกลาง เราจะแสดงรายการสามประเด็นหลักที่นี่ก่อน แต่มีเนื้อหาและประเด็นความรู้จำนวนมาก ซึ่งเราต้องเรียนรู้และฝึกฝนทีละขั้นตอนจนกว่าเราจะบรรลุเค้าโครงโดยใช้ CSS โดยสมบูรณ์โดยไม่ต้องใช้ตารางใดๆ