ถนนสู่มาตรฐานเว็บ

ก่อนอื่น อย่าเพิ่งรีบเร่งที่จะเริ่ม! เตรียมจิตใจให้ดีก่อนทำอะไรก็ตาม นี่คือสิ่งที่สำคัญที่สุดสำหรับกระบวนการเรียนรู้ของคุณ:

การเรียนรู้ต้องใช้เวลาและต้องทำทีละขั้นตอน

จะมีความพ่ายแพ้ไปตลอดทาง

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

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

ดูเหมือนฉันจะนอกเรื่องนิดหน่อย

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

ตอนนี้ สิ่งแรกคือการสร้างแนวคิดของระบบอุดมการณ์ของ XHTML ไม่ว่าคุณจะเลือก HTML4.01 หรือ A งานบ้านที่ทำให้มึนงง ) เอกสารทั้งหมดจะเริ่มต้นด้วยการเลือก DOCTYPE การบอกเบราว์เซอร์ว่าเอกสารของคุณใช้ภาษามาร์กอัปใดจะป้องกันข้อผิดพลาดด้านประสิทธิภาพที่ไม่จำเป็น ซึ่งอาจทำให้คุณคลั่งไคล้กับผลลัพธ์การแสดงหน้าเว็บที่ไม่ดี เช่น ถ้าฉันต้องการบินไปชิคาโก ฉันต้องบอกบริษัทตัวแทนท่องเที่ยวว่าอยากไปที่ไหน ไม่เช่นนั้น ฉันอาจบินไปเวียนนาอย่างไร้จุดหมาย หากต้องการแสดง HTML หรือ XHTML คุณต้องบอกเบราว์เซอร์ก่อนว่าการตั้งค่า DOCTYPE ช่วยให้มั่นใจว่าฉันจะไปถึง "ปลายทาง"

เป้าหมายถัดไป: โลโก้ที่มีรูปแบบที่เข้มงวด นี่เป็นเรื่องง่ายมากที่จะเชี่ยวชาญ อ้างอิงแอตทริบิวต์ทั้งหมด (เช่น: <a href="link">); ปิดแท็กที่เปิดอยู่ทั้งหมด (เช่น: <input type="text" />) ต้องปิดโลโก้หรือองค์ประกอบทั้งหมด

หมายเหตุด่วน: ฉันไม่รู้ว่าเมื่อใดแท็กจึงกลายเป็นองค์ประกอบ พวกเขามีความหมายเหมือนกันแต่มีวิธีพูดที่แตกต่างกัน ไม่ว่าคุณจะเรียกมันว่าอะไร ชื่อที่ถูกต้องดูเหมือนจะเป็น "องค์ประกอบ" ในตอนแรก บางทีมันอาจจะเป็นอย่างนั้นในตอนแรก ฉันไม่รู้ และไม่มีใครบอกฉัน

ไม่ว่าองค์ประกอบทั้งหมดจะต้องปิดอย่างถูกต้องก็ตาม หากคุณใช้ HTML4.01 คุณสามารถละเว้นแต่ละองค์ประกอบได้ เช่น <br>, <hr> และ <input> หากคุณใช้ XHTML องค์ประกอบแต่ละรายการจะต้องถูกปิดด้วย โดยเพิ่มเครื่องหมายทับที่ส่วนท้าย เช่น: <br > กลายเป็น<br />.

ถัดไป มีกฎที่ค่อนข้างสับสนเกี่ยวกับแอตทริบิวต์ XHTML: คุณลักษณะทั้งหมดต้องมีค่า และหากไม่มีค่า ก็จะใช้ค่านั้นเอง ตัวอย่างเช่น <input type="radio"checked="checked" /> ใน HTML4.01 ไม่จำเป็นต้องใช้ค่าที่เลือก แต่ใน XHTML จำเป็นต้องใช้

สุดท้ายนี้ XHTML ต้องการให้คุณเขียนโค้ดทั้งหมดเป็นตัวพิมพ์เล็ก HTML ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ แต่ XHTML เป็นไปตามกฎของไวยากรณ์ XML

นั่นคือทั้งหมดที่เกี่ยวกับการเปลี่ยนแปลงโลโก้! คุณรู้หมดแล้ว! หายใจลึกๆ จิบเบียร์ และผ่อนคลาย เพราะนั่นเป็นเพียงก้าวแรก

ส่วนที่ 2
ตอนนี้เราเริ่มเรียนรู้ที่จะเขียน HTML/XHTMLL ที่ถูกต้อง และตรวจสอบความถูกต้องในเครื่องมือตรวจสอบขององค์กร W3 (เครื่องมือตรวจสอบ) หากคุณเขียนถูกต้อง คุณจะเห็นข้อความแสดงความสำเร็จพร้อมข้อความสีเหลืองบนพื้นหลังสีน้ำเงิน ลองชอบการผสมสี/แบบอักษรนี้ มันจะเป็นเพื่อนที่ดีที่สุดของคุณ

เหตุใดการตรวจสอบจึงมีความสำคัญมาก มันสำคัญไหม? เพราะโลโก้ที่เขียนไม่ดี (สุ่ม ไม่ชัดเจน) จะนำมาซึ่งความคาดเดาไม่ได้โดยสิ้นเชิง "ความเป็นและความตาย" ของเพจนั้นขึ้นอยู่กับวิธีจัดการข้อผิดพลาดของเบราว์เซอร์โดยสิ้นเชิง แม้ว่าเบราว์เซอร์ส่วนใหญ่จะสามารถรองรับโลโก้ที่เขียนไม่ดีได้ดี แต่นี่ก็เป็นพฤติกรรมที่ไม่ถูกต้อง สวัสดี อะไรทำให้เราคุ้นเคยกับสิ่งที่ไม่ได้มาตรฐาน เหตุผลแรกคือสงครามเบราว์เซอร์ ในปี 1995 Microsoft สามารถแข่งขันและได้รับส่วนแบ่งการตลาดจาก Netscape เนื่องจาก IE จัดการข้อผิดพลาดของหน้าเว็บเหมือนกับ Netscape ทุกประการ

อีกมุมมองหนึ่ง: การตรวจสอบความถูกต้องช่วยให้คุณค้นหาโค้ดที่ผิดพลาดและทำให้มั่นใจได้ว่าหน้าเว็บของคุณทำงานสม่ำเสมอมากขึ้น การตรวจสอบรหัสเป็นสิ่งแรกที่ฉันทำเมื่อแก้ไขจุดบกพร่องเลย์เอาต์ และฉันก็เชื่อว่าคุณก็ทำเช่นกัน

ตกลง เมื่อคุณยืนยันไซต์แรกของคุณเป็นครั้งแรก คุณอาจต้องทนต่อข้อความแสดงข้อผิดพลาดอันเหลือเชื่อเจ็ดสิบหรือแปดสิบข้อความที่ถูกป้อนกลับ น่าเสียดายที่ แม้ว่าเช็คซัมจะมีประโยชน์ แต่ก็ไม่ได้สมบูรณ์แบบและมีอาสาสมัครเพียงไม่กี่คนเท่านั้นที่ดูแล ข่าวดีก็คือว่าข้อผิดพลาดเหล่านั้นมีความเกี่ยวข้องกัน หากคุณพบว่าแท็ก </p> หายไปและแก้ไขได้ ข้อผิดพลาด 24 รายการถัดไปจะหายไป กล่าวโดยสรุป อาจดูเหมือนว่าผลการตรวจสอบไม่ดี แต่มักจะไม่ได้เป็นเช่นนั้น

ตอนนี้คุณได้ผ่านการตรวจสอบแล้วและรหัสของคุณเป็นไปตามข้อกำหนด ณ จุดนี้ คุณปฏิบัติตามแนวทางที่เข้มงวดแต่ยังขาดความเข้าใจอย่างถ่องแท้ว่าทำไมคุณจึงทำเช่นนี้ตั้งแต่แรก

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

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

ถึงเวลาที่ "เลเยอร์การนำเสนอ" จะปรากฏขึ้น การแสดงคือคำใบ้การจัดรูปแบบ ซึ่งบอกชื่อเรื่องของหน้าแรกให้เป็นสีแดง ตัวเอียง และขนาดตัวอักษรเป็น 150% ของแบบอักษรเนื้อหา เลเยอร์การนำเสนอเป็นเลเยอร์เพิ่มเติมเหนือเลเยอร์โครงสร้างเอกสาร CSS อยู่ในเลเยอร์การนำเสนอ และสามารถเปลี่ยนเอกสารให้เป็นรูปแบบที่น่าทึ่งได้ผ่านแท็กง่ายๆ บนเอกสาร - ไปที่ CSS Zen Garden เพื่อดูตัวอย่าง

ดังนั้นวิธีที่ดีที่สุดในการแยกประสิทธิภาพออกจากโครงสร้างคืออะไร? ลองใช้โค้ดแบบดั้งเดิมมาแสดงซึ่งประกอบด้วยองค์ประกอบ HTML หรือคุณลักษณะที่ใช้ในการนำเสนอ ถึงเวลาที่จะตัดแท็ก bgcolors และ <center> ออกไป เรามาทำการทดสอบแบบทั่วไปกันดีกว่า:

ในโค้ดสาธิตต่อไปนี้ ควรตัดแอตทริบิวต์และแท็กการนำเสนอใดออก

<center><h1><font face="Verdana">นี่คือเว็บไซต์แรกของฉัน</font></h1></center> <table border="0" cellpadding="0" cellspacing="0" > <body bgcolor="#ffffff" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"> <td bgcolor="#ffffff" valign="top" align="center">< p>พวกเขากำลังจะพาฉันไป...</p></td>
คุณพร้อมหรือยังกับคำตอบของคุณ? ตกลง ผลลัพธ์ที่ถูกต้องแสดงอยู่ด้านล่าง ซึ่งเป็นโค้ดที่มีโครงสร้างสะอาดและไม่มีร่องรอยของประสิทธิภาพ:

<h1>นี่เป็นเว็บไซต์แรกของฉัน</h1> <table> <body> <td><p>พวกเขากำลังจะพาฉันไป...</p></td>
นั่นคือทั้งหมดเหรอ? แค่นั้นแหละ.

แม้ว่ารหัสนี้จะไม่สอดคล้องกับข้อกำหนดใดข้อหนึ่งอย่างชัดเจน แต่สิ่งสำคัญยิ่งกว่าของการแยกนี้คือการใช้องค์ประกอบที่ถูกต้อง การใช้เค้าโครงตารางเป็นปัญหารอง ในตัวอย่างข้างต้น วิธีการใช้ตารางไม่ถูกต้อง จากมุมมองระยะยาวและรอบคอบ องค์ประกอบ <table> และ <td> ควรถูกลบออก แม้ว่าการใช้งานจะเลิกใช้แล้ว แต่ตารางก็ยังมีประโยชน์อย่างมาก และสามารถใช้งานได้ตามความเหมาะสม - บนข้อมูลที่จัดเรียงแบบตาราง

เราได้ถอดการจัดรูปแบบออกจากหน้าของเราแล้ว ไชโย! ตอนนี้คุณทำอะไรอีก? นั่นเหลือแต่องค์ประกอบ ข้อความ และบรรทัดที่น่าเกลียดในฟอนต์ Times-New-Roman ไม่ตลกเลยเพจที่สดใสและสวยงามที่เราสัญญาไว้อยู่ที่ไหน?

ย้อนกลับไปดูตัวอย่าง Zen Garden คุณเห็นดีไซน์น่ารักมั้ย? พวกเขาดูแตกต่างแค่ไหน? ประเด็นก็คือ: ภายใต้การออกแบบที่สวยงามนั้นมี XHTML แบบเดียวกับที่น่าเบื่อพอๆ กับเอกสารที่ไม่ได้ฟอร์แมตที่คุณเพิ่งสร้างขึ้น ใช่มั้ยล่ะ?

ในความเป็นจริง ความน่าเบื่อและน่าเกลียดนั้นมีรากฐานที่ดี คุณอาจสังเกตเห็นว่า HTML ที่ไม่ได้ฟอร์แมตนี้ดูแย่พอๆ กับเว็บในปี 1994 ด้วยข้อยกเว้นบางประการ องค์ประกอบเหล่านี้มีอายุเท่ากับเว็บ <h2> มีมาตั้งแต่สมัยของเบราว์เซอร์ Mosaic

สิทธิประโยชน์ไม่ได้สิ้นสุดเพียงแค่นั้นอย่างแน่นอน เนื่องจากใช้งานง่าย (สำหรับความต้องการพิเศษเหล่านั้น) SEO ในตัว ลดต้นทุนแบนด์วิดท์ และอื่นๆ Jeffrey Veen ได้เขียน "The Business Value of Web Standards" เมื่อปีที่แล้ว และ Roger Johansson ยังได้อธิบายเทคนิคและประโยชน์ของการออกแบบตามมาตรฐานใน "Developing with Web Standards" ล่าสุดของเขา

เบราว์เซอร์หลักๆ ทุกเบราว์เซอร์ในปัจจุบันรองรับ CSS เป็นอย่างดี และมีทรัพยากรจำนวนนับไม่ถ้วนที่จะช่วยเรียนรู้ไวยากรณ์ CSS เค้าโครงแบบ CSS และเทคนิคขั้นสูง ฉันขอแนะนำหลักสูตรดีๆ สองสามข้อ: westCiv เสนอหลักสูตร CSS ฟรีอย่างต่อเนื่อง ซึ่งจะช่วยให้คุณเริ่มต้นและเชี่ยวชาญได้อย่างรวดเร็ว Andrew Fernandez ได้สร้างรายการทรัพยากร CSS จำนวนมากที่จะเป็นประโยชน์ไม่ว่าคุณจะเพิ่งเริ่มใช้ CSS หรือไม่ก็ตาม Eric Meyer ได้เขียนหนังสือเป็นชุดที่คุณสามารถเก็บไว้บนโต๊ะและปรึกษาได้ตลอดเวลา หนังสือเหล่านี้ประกอบด้วย Eric Meyer ตามกรณีและปัญหาเกี่ยวกับ CSS และ More Eric Meyer เกี่ยวกับ CSS หนังสืออ้างอิง CSS: "The Definitive Guide to CSS" จัดพิมพ์โดย O'Reilly Publishing House ได้รับการเผยแพร่สำหรับฉบับพิมพ์ครั้งที่สอง และคุณควรเก็บไว้บนโต๊ะของคุณ นอกจากนี้ยังมี "The Designer's Edge" โดย Molly Holzschlag และ "Designing CSS Web Pages" โดย Chris Schmitt

การลงรายละเอียดการใช้ CSS และเค้าโครงอาคารอาจใช้เวลานานเกินไป ฉันจะไม่พูดมากอีกต่อไป คำแนะนำข้างต้นคือคำแนะนำที่ฉันสามารถมอบให้กับนักออกแบบที่กำลังเริ่มให้ความสนใจกับมาตรฐานเว็บได้ อ่านและแบ่งปันความคิดของคุณและมาเติบโตในฐานะชุมชน พวกเราหลายคนกำลังส่งเสริมมาตรฐานเว็บอย่างจริงจัง

หมายเหตุ 1. "การออกแบบด้วยมาตรฐานเว็บ" เป็นหนังสือที่เขียนโดย Zeldman เพื่อส่งเสริมมาตรฐานเว็บ ฉบับภาษาจีนได้รับการแนะนำและเผยแพร่ในเดือนพฤษภาคม พ.ศ. 2547 หนังสือเล่มนี้มีชื่อว่า "การสร้างเว็บไซต์ใหม่ - การออกแบบด้วยมาตรฐานเว็บ"