หลักสูตรเค้าโครง - การตรวจสอบความถูกต้องของหน้า การตรวจสอบความถูกต้องของข้อมูล การตรวจสอบความถูกต้องของรหัส
ทำการตรวจสอบรหัสของคุณหลายครั้ง สิ่งสำคัญ:
โปรดทราบว่าสิ่งเหล่านี้เป็นการตรวจสอบเชิงตรรกะ และไม่สำคัญว่าเครื่องมือตรวจสอบจะใช้งานอย่างไร หากการตรวจสอบล้มเหลวอย่างน้อยหนึ่งรายการ HTML จะถือว่าไม่ถูกต้อง และในนั้นปัญหาก็อยู่ที่อาร์กิวเมนต์หลักสำหรับการตรวจสอบ HTML คือความเข้ากันได้ข้ามเบราว์เซอร์ แต่ละเบราว์เซอร์มี parser ของตัวเอง และการป้อนสิ่งที่เบราว์เซอร์ทั้งหมดเข้าใจเป็นวิธีเดียวที่จะทำให้แน่ใจว่าโค้ดของคุณจะทำงานได้อย่างถูกต้องในทุกเบราว์เซอร์ เนื่องจากแต่ละเบราว์เซอร์มีกลไกการแก้ไขข้อผิดพลาด HTML ของตัวเอง คุณจึงไม่สามารถพึ่งพาโค้ดที่ไม่ถูกต้องได้ ข้อโต้แย้งหลักที่ต่อต้านการตรวจสอบความถูกต้องคือ มีความเข้มงวดเกินไปและไม่สอดคล้องกับวิธีการทำงานของเบราว์เซอร์จริงๆ ใช่ HTML อาจไม่ถูกต้องได้ แต่เบราว์เซอร์ทั้งหมดสามารถจัดการโค้ดที่ไม่ถูกต้องบางโค้ดได้ในลักษณะเดียวกัน ถ้าฉันพร้อมที่จะรับผิดชอบรหัสผิด
ซึ่งผมเขียนไว้ก็ไม่ต้องกังวลเรื่องการตรวจสอบ สิ่งเดียวที่ฉันต้องกังวลก็คือมันใช้งานได้โดยทั่วไป ปัญหาในการตรวจสอบที่ใหญ่ที่สุดของฉันคือการตรวจสอบ #4 (สำหรับองค์ประกอบภายนอก) ฉันสนับสนุนการใช้แอตทริบิวต์ที่กำหนดเองในแท็ก HTML เพื่อจัดเก็บข้อมูลเมตาเพิ่มเติมที่เกี่ยวข้องกับองค์ประกอบเฉพาะ ตามความเข้าใจของฉัน นี่คือการเพิ่มแอตทริบิวต์ foo เมื่อฉันมีข้อมูล (แถบ) ที่ฉันต้องเชื่อมโยงกับองค์ประกอบเฉพาะ บางครั้งผู้คนใช้แอตทริบิวต์ที่มีอยู่มากเกินไปเพื่อวัตถุประสงค์เหล่านี้เพียงเพื่อผ่านการตรวจสอบ แม้ว่าแอตทริบิวต์นั้นจะถูกนำมาใช้เพื่อวัตถุประสงค์อื่นก็ตาม มันไม่สมเหตุสมผลสำหรับฉัน
ความลับของเบราว์เซอร์คือไม่เคยตรวจสอบว่าโค้ด HTML ตรงกับ DTD ที่ระบุหรือไม่ Doctype ที่คุณระบุไว้ในเอกสารจะสลับ parser ของเบราว์เซอร์เป็นโหมดที่กำหนด แต่การดำเนินการนี้จะไม่โหลด Doctype และตรวจสอบโค้ดว่าสอดคล้องกับโหมดนั้นหรือไม่ นั่นคือ ตัวแยกวิเคราะห์ของเบราว์เซอร์จะประมวลผล HTML ด้วยสมมติฐานบางอย่างที่ไม่ถูกต้อง เช่น แท็กที่ปิดตัวเองและองค์ประกอบบล็อกภายในองค์ประกอบแบบอินไลน์ (ฉันแน่ใจว่ายังมีองค์ประกอบอื่นๆ อยู่)
ในกรณีของแอตทริบิวต์ที่กำหนดเอง เบราว์เซอร์ทั้งหมดจะแยกวิเคราะห์และรับรู้แอตทริบิวต์ที่ถูกต้องตามหลักไวยากรณ์ว่าถูกต้อง ทำให้สามารถเข้าถึงคุณลักษณะดังกล่าวผ่าน DOM โดยใช้ Javascript แล้วเหตุใดฉันจึงต้องกังวลเกี่ยวกับความถูกต้อง? ฉันจะใช้แอตทริบิวต์ของฉันต่อไป และฉันดีใจมากที่ HTML5 ทำให้มันเป็นทางการ
ตัวอย่างที่ดีที่สุดของเทคโนโลยีที่ส่งผลให้ HTML ไม่ถูกต้องแต่สร้างความแตกต่างอย่างมากคือ ARIA ARIA ทำงานโดยการเพิ่มคุณลักษณะใหม่ให้กับ HTML 4 คุณลักษณะเหล่านี้ให้ความหมายเชิงความหมายเพิ่มเติมแก่องค์ประกอบ HTML และเบราว์เซอร์สามารถถ่ายทอดความหมายนี้ไปยังอุปกรณ์ช่วยเหลือเพื่อช่วยเหลือผู้ทุพพลภาพ เบราว์เซอร์หลักๆ ทั้งหมดรองรับมาร์กอัป ARIA แล้ว อย่างไรก็ตาม หากคุณใช้แอตทริบิวต์เหล่านี้ คุณจะมี HTML ที่ไม่ถูกต้อง
สำหรับแท็กที่กำหนดเอง ฉันคิดว่าไม่มีอะไรผิดในการเพิ่มแท็กใหม่ที่ถูกต้องทางไวยากรณ์ให้กับหน้าเว็บ แต่ฉันไม่เห็นคุณค่าในทางปฏิบัติมากนัก
เพื่อให้จุดยืนของฉันชัดเจน: ฉันเชื่อว่าการตรวจสอบ #1 และ #2 มีความสำคัญมากและควรทำเสมอ ฉันยังถือว่าตรวจสอบ #3 สำคัญด้วย แต่ไม่สำคัญเท่ากับสองรายการแรก ตรวจสอบ #4 เป็นเรื่องที่น่าสงสัยสำหรับฉันมากเนื่องจากส่งผลต่อแอตทริบิวต์ที่กำหนดเอง ฉันเชื่อว่าในผลการตรวจสอบความถูกต้องสูงสุด ควรทำเครื่องหมายแอตทริบิวต์ที่กำหนดเองเป็นคำเตือน (แทนที่จะเป็นข้อผิดพลาด) เพื่อที่ฉันจะได้ตรวจสอบได้ว่าฉันป้อนชื่อแอตทริบิวต์ไม่ถูกต้องหรือไม่ การทำเครื่องหมายแท็กที่กำหนดเองว่าเป็นข้อผิดพลาดอาจเป็นความคิดที่ดี แต่ก็มีปัญหาบางอย่างเช่นกัน เช่น เมื่อฝังเนื้อหาในมาร์กอัปอื่น - SVG หรือ MathML
การตรวจสอบเพื่อประโยชน์ในการตรวจสอบ? ฉันคิดว่าการตรวจสอบเพื่อประโยชน์ในการตรวจสอบความถูกต้องนั้นโง่มาก HTML ที่ถูกต้องเท่านั้นหมายความว่าการตรวจสอบทั้ง 4 รายการผ่านโดยไม่มีข้อผิดพลาด มีสิ่งสำคัญหลายประการที่ไม่รับประกันว่า HTML ที่ถูกต้อง:- HTML ที่ถูกต้องไม่รับประกันความสามารถในการเข้าถึง
- HTML ที่ถูกต้องไม่รับประกัน UX ที่ดี (ประสบการณ์ผู้ใช้)
- HTML ที่ถูกต้องไม่รับประกันว่าเว็บไซต์จะทำงานได้
- HTML ที่ถูกต้องไม่รับประกันการแสดงผลที่ถูกต้องของเว็บไซต์
ฉันรู้ว่านี่เป็นหัวข้อที่สร้างข้อขัดแย้งสำหรับหลาย ๆ คน ดังนั้นโปรดอย่าแสดงความคิดเห็นโดยใช้อารมณ์ล้วนๆ
UPD: ขอบคุณสำหรับกรรม ฉันย้ายไปที่เรื่องเฉพาะเรื่องแล้ว ฉันจะพูดซ้ำคำพูดของผู้เขียน: ฉันเข้าใจว่านี่เป็นหัวข้อที่มีการโต้เถียง แต่โปรดงดเว้นจากการแสดงความคิดเห็นทางอารมณ์ล้วนๆและให้ข้อโต้แย้ง
สวัสดีทุกคน วันนี้เป็นบทเรียนสุดท้ายของหลักสูตรเค้าโครง HTML/CSS
ตามที่ฉันสัญญาไว้ ในบทนี้เราจะได้เรียนรู้วิธีตรวจสอบความถูกต้องของเพจ เรามาดูกันว่ามันคืออะไร จำเป็นสำหรับอะไร และมีเครื่องมือและบริการอะไรบ้าง
การตรวจสอบหน้าคืออะไรเรามาเริ่มกันด้วยว่าแท้จริงแล้วการตรวจสอบหน้าคืออะไร การตรวจสอบความถูกต้องของเพจคือการตรวจสอบโค้ด HTML และ CSS ว่าสอดคล้องกับมาตรฐานเว็บ รวมถึงประเภทเอกสารที่เลือก มาตรฐานที่เป็นปัญหานั้นกำหนดโดย W3C แค่นั้นเอง เบราว์เซอร์ที่ทันสมัยพยายามติดตามพวกเขา
หากการตรวจสอบความถูกต้องสำเร็จ นั่นคือ เอกสารถูกต้อง จากนั้นมีความน่าจะเป็นสูงที่เอกสารจะแสดงอย่างเท่าเทียมกันในทุกเบราว์เซอร์)
รูปแบบที่ถูกต้องมักจะเป็นโค้ดที่ "สะอาด" สวยงาม ซึ่งเหนือสิ่งอื่นใดคือ "ชอบ" โดยเครื่องมือค้นหา ดังนั้นการตรวจสอบความถูกต้องของโค้ดจึงเป็นขั้นตอนบังคับเมื่อสร้างเว็บไซต์
การตรวจสอบความถูกต้องของเว็บไซต์จะตรวจสอบความถูกต้องของเว็บไซต์ได้อย่างไร? วิธีที่ง่ายที่สุดหากต้องการตรวจสอบเว็บไซต์ว่าเป็นไปตามมาตรฐานเว็บหรือไม่ ให้ใช้เครื่องมือตรวจสอบออนไลน์ สามารถตรวจสอบความถูกต้องของ html ได้ที่: http://validator.w3.org/ อย่าลืมใช้บริการนี้เพื่อค้นหาข้อผิดพลาดในโค้ด HTML ของคุณ
การตรวจสอบ CSS ทำได้โดยใช้เครื่องมือตรวจสอบ CSS ซึ่งอยู่ที่: http://jigsaw.w3.org/css-validator/
ฉันแสดงรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการทำงานกับบริการเหล่านี้ในวิดีโอด้านล่าง
นอกจากนี้ การตรวจสอบความถูกต้องของโค้ดสามารถทำได้โดยใช้ปลั๊กอินเพื่อตรวจสอบความถูกต้องของโค้ด ตัวอย่างเช่น ฉันจะใช้มันได้สะดวกกว่า เนื่องจากช่วยให้คุณตรวจสอบความถูกต้องได้ทันที
นี่คือวิดีโอสอน:
สวัสดีทุกคน! วันนี้ผมจะมาเล่าให้ฟังว่า Code ของเว็บไซต์คืออะไร เหตุใดจึงต้องมี และวิธีตรวจสอบและแก้ไขโดยใช้ต่างๆ บริการออนไลน์เครื่องมือตรวจสอบ W3C (html, CSS) เรามาเริ่มด้วยทฤษฎีกันก่อน คำนี้คืออะไรกันแน่?
ความถูกต้องของโค้ดคือระดับที่โค้ดเว็บไซต์ของคุณสอดคล้องกับมาตรฐานสากลที่เป็นที่ยอมรับ ซึ่งเรียกโดยย่อว่า W3C กล่าวอีกนัยหนึ่งเมื่อนานมาแล้วจำนวนหนึ่ง กฎทั่วไปในการเขียนโค้ดซึ่งหากไม่เป็นไปตามมาตรฐาน W3C อาจส่งผลให้การแสดงผลไซต์ของคุณไม่ถูกต้องในคอมพิวเตอร์และเบราว์เซอร์มือถือต่างๆ นอกจากนี้ ในบางกรณีที่เกิดขึ้นไม่บ่อยนัก สิ่งนี้อาจนำไปสู่การคว่ำบาตรจากเสิร์ชเอ็นจิ้น เช่นเดียวกับการกำหนดตัวกรองต่าง ๆ ที่อาจชะลอการพัฒนาโครงการของคุณ แต่สิ่งนี้เกิดขึ้นน้อยมากเนื่องจากแม้แต่ยานเดกซ์และ Google เองก็มีรหัสที่ไม่ถูกต้อง 100% นั่นคือมันมีข้อผิดพลาด
จริงๆ แล้ว คุณอาจมีคำถาม: ทำไมฉันต้องใช้เวลาแก้ไขโค้ดของเว็บไซต์ของฉันเองเพื่อให้โค้ดนั้นใช้งานได้ ถ้ามันไม่มีผลกระทบอะไรอยู่แล้ว ตามที่ฉันได้เขียนไว้ข้างต้น สิ่งนี้จำเป็นเพื่อให้แน่ใจว่าไซต์ของคุณแสดงอย่างถูกต้อง (โดยไม่มีจุดบกพร่องและข้อผิดพลาด) ในเบราว์เซอร์ต่างๆ อย่างที่คุณทราบทุกวันนี้พวกเขากำลังได้รับความนิยมมากขึ้นเรื่อยๆ ประเภทต่างๆรุ่นโทรศัพท์: iPhone, Android, สมาร์ทโฟนและอื่น ๆ ที่ประชากรทั้งหมดของโลกใช้อยู่แล้ว วันนี้บุคคลที่สามทุกคนมีของเขาเอง โทรศัพท์มือถือซึ่งเขาสามารถออนไลน์และเยี่ยมชมเว็บไซต์ของคุณได้ ซึ่งมากกว่าผู้ที่มีคอมพิวเตอร์ แล็ปท็อป แท็บเล็ตเป็นของตัวเองประมาณ 20-30 เท่า
นั่นคือคุณได้รับประเด็น ผู้ชมที่ใช้อุปกรณ์เคลื่อนที่เป็นกลุ่มที่ใหญ่ที่สุด ซึ่งเป็นสิ่งที่เราต้องกำหนดเป้าหมาย และถ้าคุณจำได้ว่ามีเหตุการณ์เกิดขึ้นมากมายในช่วง 10 ปีที่ผ่านมา อุปกรณ์เคลื่อนที่และมีรุ่นใหม่จำนวนเท่าใดที่ยังคงเปิดตัวทุก ๆ หกเดือนเป็นที่ชัดเจนว่าการพลาดการเข้าชม (ผู้เยี่ยมชม) ดังกล่าวคงโง่มาก นอกจากนี้ เทคโนโลยีใหม่ไม่หยุดนิ่ง และด้วยการถือกำเนิดของภาษา html5 ที่อัปเดต เว็บไซต์เก่าของคุณที่สร้างขึ้นในปี 200 อาจกลายเป็นคนกลุ่มใหญ่ที่อยู่เบื้องหลังเครือข่ายทั่วโลก
จะตรวจสอบความถูกต้องของโค้ด html และ CSS ของเว็บไซต์ของคุณได้อย่างไร?มีบริการดังกล่าวมากมายบนอินเทอร์เน็ต แต่เกือบทั้งหมดนั้นทุจริตและแม้กระทั่งบริการดังกล่าว ภาษาอังกฤษโดยที่แม้จะเข้าใจสิ่งที่กำลังพูดอยู่ก็ไม่ง่ายนัก แต่ถึงกระนั้นก็มีสิ่งหนึ่งที่เป็นเรื่องปกติมากกว่าซึ่งไม่เพียงแต่ให้คำอธิบายเท่านั้น แต่ยังแสดงให้เห็นว่ามีข้อผิดพลาดอยู่ที่บรรทัดใด มาทำความรู้จักกัน - jigsaw.w3.org
เมื่อเยี่ยมชมไซต์นี้ คุณสามารถตรวจสอบความถูกต้องของโค้ดไซต์ของคุณได้สามวิธี ในแท็บ "การตรวจสอบ URI" ให้ป้อนที่อยู่เว็บไซต์ของคุณ จากนั้นบริการจะให้รายการข้อผิดพลาดทั้งหมดที่พบในรหัสเฉพาะใน หน้าแรก- เช่นฉัน หากคุณไม่มีความรู้เกี่ยวกับโค้ดมากนัก และเมื่อดูโค้ดของไซต์ของคุณ คุณไม่พบบรรทัดที่ต้องแก้ไข คุณก็สามารถอัปโหลดไฟล์สไตล์ CSS ของคุณ (การออกแบบไซต์) ในส่วน "ตรวจสอบไฟล์ที่อัปโหลด" ” แท็บ
ในกรณีนี้ คุณจะรู้อยู่แล้วว่าคุณต้องใส่โค้ดในไฟล์ใด โดยวิธีการนี้คุณสามารถทำได้ง่ายยิ่งขึ้น หากเว็บไซต์ของคุณใช้กลไกบางอย่าง คุณจะต้องไปที่แผงผู้ดูแลระบบบล็อกใน “ รูปร่าง» “ตัวแก้ไข” เลือกไฟล์ เช่น ส่วนหัว (header.php) คัดลอกโค้ดและวางลงในบริการในแท็บ “ตรวจสอบข้อความที่พิมพ์” นี่คือวิธีที่ฉันตรวจสอบบล็อกของฉันเป็นการส่วนตัว
ดังนั้น โดยส่วนตัวแล้วไซต์ของฉันมีข้อผิดพลาด 44 ข้อ ซึ่งน้อยมากเมื่อเทียบกับไซต์อื่น ๆ อย่างไรก็ตามลุงยานเดกซ์มีข้อผิดพลาดมากถึง 155 ข้อ ah-ah-ah โอเค เราจะไม่พูดถึงเรื่องเศร้าอีกต่อไป
เพื่อให้ง่ายต่อการแก้ไขความไม่ถูกต้องเหล่านี้ในรหัส ฉันจะแสดงตัวอย่างบางส่วนในบล็อกของฉันเป็นการส่วนตัว ขั้นแรก ให้ใส่ใจกับคำจารึกบรรทัดที่ 26 ซึ่งระบุถึงบรรทัดของโค้ด หากต้องการค้นหาอย่างรวดเร็ว ให้วางโค้ดนี้ที่คุณแทรกไว้ในบริการ jigsaw.w3.org ในตัวแก้ไข html ใด ๆ ป้ายกำกับบรรทัดจะปรากฏขึ้น
โปรดสังเกตว่าแท็กบางแท็กจะถูกเน้นด้วยสีแดงเสมอในโค้ด นี่คือที่ที่คุณต้องค้นหาและแก้ไขโค้ด โดยส่วนใหญ่แล้วจะต้องลบออกทั้งหมดหรือต้องเพิ่มแท็กที่หายไปลงไป นอกจากนี้ในชื่อและที่ด้านล่างของคำจารึกยังมีคำแนะนำเป็นภาษาอังกฤษเกี่ยวกับสิ่งที่ต้องทำเพื่อแก้ไขข้อผิดพลาด
ตัวอย่างที่ 1 ที่นี่คุณจะต้องลบเครื่องหมายคำพูดที่เน้นด้วยสีแดง ไม่ควรอยู่ภายในโค้ดซึ่งมีอยู่แล้วทั้งตอนต้นและตอนท้าย
ตัวอย่างที่ 2 ไม่มีแท็กปิด /> ที่ส่วนท้ายของโค้ด โปรดทราบว่าหากที่ด้านบนของโค้ดมีอีกบรรทัดหนึ่งซึ่งมีแท็กที่ไม่ได้ปิดอยู่ด้วย ก็จะต้องปิดแท็กนั้นด้วย ไม่เช่นนั้นข้อผิดพลาดจะไม่หายไป
ตัวอย่างที่ 3 ที่นี่คุณเพียงแค่ต้องลบบรรทัดซ้ำ: “ href=""> .
อย่างไรก็ตาม คุณควรแก้ไขข้อผิดพลาดก่อนอื่น โดยมีเครื่องหมายกากบาทกำกับไว้ และไม่ใช่เครื่องหมายอัศเจรีย์ เนื่องจากข้อผิดพลาดเหล่านี้ไม่สำคัญนัก นอกจากนี้ ก่อนที่คุณจะแก้ไขสิ่งใด ให้ทำเช่นนี้ เนื่องจากมีความเป็นไปได้สูงที่คุณจะพัง หลังจากที่คุณล้างโค้ดเรียบร้อยแล้ว ฉันขอแนะนำให้ดูว่าไซต์ของคุณแสดงผลอย่างไรในเบราว์เซอร์ต่างๆ บนพีซีและแพลตฟอร์มโทรศัพท์ที่แตกต่างกัน บริการออนไลน์ฟรี browsershots.org สามารถช่วยคุณได้
คุณจะตรวจสอบความถูกต้องของโค้ด html และ CSS ของเว็บไซต์ของคุณได้อย่างรวดเร็วได้อย่างไรหาก jigsaw.w3.org ยังไม่เพียงพอสำหรับคุณ นี่คืออีกสองสามอย่างสำหรับคุณ บริการเพิ่มเติมเพื่อตรวจสอบความถูกต้อง รหัสเอชทีเอ็มเว็บไซต์: www.validome.org, watson.addy.com,
โดยสรุปฉันอยากจะบอกว่าหากคุณพบข้อผิดพลาดสองสามประการในตัวเองก็ไม่ต้องกังวลเพราะทุกวันนี้มันไม่สำคัญขนาดนั้น โดยทั่วไปแล้ว การทดลองในหัวข้อนี้ดำเนินการมาเป็นเวลานาน ซึ่งเป็นที่ชัดเจนว่าโค้ดที่ถูกต้องไม่ดีไม่ส่งผลกระทบต่อผลการค้นหาของไซต์ แต่อนิจจา อินเทอร์เน็ตเป็นสภาพแวดล้อมที่ทุกสิ่งเปลี่ยนแปลงอย่างรวดเร็ว วันนี้มันอาจไม่สำคัญ แต่พรุ่งนี้ยานเดกซ์จะเพิ่มอัลกอริธึมเพิ่มเติมนี้ให้กับตัวเองและตำแหน่งการค้นหาอาจลดลง (ตก) ดังนั้น หากคุณมีเวลาเหลือเฟือในการแก้ไขโค้ดของไซต์ของคุณ ก็ควรทำตอนนี้เลยจะดีกว่า
วลาด เมอร์เซวิช
มีหลายวิธีและหลายวิธีในการตรวจสอบข้อผิดพลาดและความคิดเห็นของหน้าเว็บ ตามอัตภาพพวกเขาจะแบ่งออกเป็นออนไลน์และท้องถิ่น ออนไลน์ได้รับการออกแบบมาเพื่อตรวจสอบหน้าเว็บโดยใช้เบราว์เซอร์ผ่านอินเทอร์เน็ต และเว็บในเครื่องจะใช้เพื่อตรวจสอบเอกสารในคอมพิวเตอร์ปัจจุบัน ต่อไปเราจะพิจารณาวิธีการตรวจสอบเอกสารที่เป็นที่นิยม
validator.w3.org กำลังติดตั้งส่วนขยายหลังจากดาวน์โหลดไฟล์แล้ว คุณสามารถติดตั้งส่วนขยายได้หลายวิธี
1. ผ่านตัวจัดการส่วนขยาย
เปิด Firefox และไปที่เครื่องมือ > ส่วนขยาย ลากไฟล์ที่ดาวน์โหลด (มีนามสกุล xpi) ลงในหน้าต่างที่เปิดขึ้น ถัดไปส่วนขยายจะถูกติดตั้งโดยอัตโนมัติ
2. โดยการเปิดไฟล์
เลือก ไฟล์ > เปิดไฟล์... จากเมนู Firefox และระบุเส้นทางไปยังไฟล์ที่มีนามสกุล เบราว์เซอร์จะดำเนินการเพิ่มเติมเอง
3. คัดลอกไฟล์ไปยังโฟลเดอร์นามสกุล
เปิดโฟลเดอร์บนดิสก์ที่ติดตั้ง Firefox (เช่น c:\Program Files\Mozilla Firefox) และค้นหาโฟลเดอร์ย่อยของส่วนขยายในนั้น เพื่อคัดลอกส่วนขยายไป หลังจากเปิดตัวเบราว์เซอร์แล้ว การติดตั้งเพิ่มเติมจะเกิดขึ้นอย่างอิสระ
วิธีการติดตั้งข้างต้นทั้งหมดจำเป็นต้องรีสตาร์ทเบราว์เซอร์หลังจากติดตั้งส่วนขยาย เครื่องมือตรวจสอบ HTML จะเริ่มทำงานทันทีหลังจากที่คุณรีสตาร์ท Firefox
ถ้า วิธีการเหล่านี้ด้วยเหตุผลบางอย่างไม่ได้ช่วยคุณสามารถไปที่ไซต์สนับสนุนเบราว์เซอร์ Mozilla Firefox และอ่านทั้งหมดได้ วิธีการที่เป็นไปได้การติดตั้งส่วนขยายที่
http://forum.mozilla-russia.org/doku.php?id=general:extensions_installing
เมื่อคุณเปิดหน้าเว็บ เครื่องมือตรวจสอบ HTML จะเริ่มทำงานทันที และผลลัพธ์ของการตรวจสอบจะแสดงในแถบสถานะที่มุมขวาล่างในรูปแบบรูปภาพขนาดเล็ก รูปภาพขึ้นอยู่กับสถานะการตรวจสอบและแสดงในรูป 14.6.
ข้าว. 14.6. ประเภทของรูปภาพที่แสดงเมื่อตรวจสอบเอกสาร
วงกลมที่มีเครื่องหมายถูก (รูปที่ 14.6a) แสดงว่าเอกสารนั้นถูกต้อง สามเหลี่ยมสีเหลืองที่มีเครื่องหมายอัศเจรีย์ (รูปที่ 14.6b) บ่งบอกว่ามีความคิดเห็นในโค้ดที่สามารถแก้ไขได้โดยอัตโนมัติ และวงกลมสีแดงที่มีกากบาท (รูปที่ 14.6c) เตือนว่ามีข้อผิดพลาดร้ายแรง
มีสองวิธีในการดูข้อผิดพลาดทั้งหมด ขั้นแรก ดูโค้ด HTML ของเอกสารผ่านเมนู View > Page Source Code หรือคลิกขวาแล้วเลือก View จากเมนูบริบท ซอร์สโค้ดหน้า (รูปที่ 14.7)
ข้าว. 14.7. เมนูบริบทพร้อมตัวเลือกการเลือกซอร์สโค้ด
หน้าต่างซอร์สโค้ดของหน้าเว็บแบ่งออกเป็นสามส่วน (รูปที่ 14.8) โดยที่บล็อกด้านบนประกอบด้วยโค้ด HTML จริง บล็อกด้านซ้ายล่างแสดงรายการข้อผิดพลาดและความคิดเห็นหรือข้อความข้อมูลในกรณีของเอกสารที่ถูกต้อง บล็อกขวาล่างมีไว้สำหรับคำแนะนำเครื่องมือโดยละเอียดเกี่ยวกับความคิดเห็นปัจจุบัน
ข้าว. 14.8. ผลลัพธ์ของส่วนขยาย HTML Validator
บางทีทุกคนที่สนใจอย่างจริงจังในการพัฒนาและส่งเสริมเครื่องมือค้นหาของแหล่งข้อมูลทางอินเทอร์เน็ตอาจเคยพบคำว่า "ความถูกต้องของรหัสของไซต์" อย่างน้อยหนึ่งครั้ง ดังนั้นวลีลึกลับเมื่อเห็นแวบแรกหมายถึงอะไร?
รหัสที่ถูกต้องหมายถึงการใช้ภาษามาร์กอัปไฮเปอร์เท็กซ์ (HTML) บนไซต์ที่ปฏิบัติตามกฎและมาตรฐานทั้งหมดของ World Wide Web Consortium (หรือเรียกสั้น ๆ ว่า W3C)
การปฏิบัติตามกฎและมาตรฐานเหล่านี้อย่างเข้มงวดทำให้ไซต์มีข้อได้เปรียบหลายประการ กล่าวคือ: ความเข้ากันได้ข้ามเบราว์เซอร์ (การแสดงหน้าไซต์ที่ถูกต้องในเบราว์เซอร์ยอดนิยมทั้งหมด) เพิ่มความเร็วในการโหลดหน้าเว็บ การรับรู้เชิงบวกต่อทรัพยากรโดยเครื่องมือค้นหาและ ปัจจัยอื่นๆ
ด้วยการพัฒนาด้านอิเล็กทรอนิกส์ซึ่งใน ปีที่ผ่านมากำลังดำเนินไปอย่างก้าวกระโดด ข้อกำหนดด้านความถูกต้องเป็นหนึ่งในเกณฑ์คุณภาพสำหรับทรัพยากรทางอินเทอร์เน็ตมีความเข้มงวดมากขึ้นเรื่อยๆ สาเหตุหลักมาจากการเกิดขึ้นของอุปกรณ์เคลื่อนที่จำนวนมากพร้อมจอแสดงผลขนาดต่างๆ และดำเนินไปโดยไม่ได้บอกว่าเว็บไซต์ที่มีรหัสที่ถูกต้องควรแสดงอย่างถูกต้องที่สุดบนสมาร์ทโฟนหรือแท็บเล็ต
จะตรวจสอบความถูกต้องของรหัสไซต์ได้อย่างไร?ในการตรวจสอบโค้ดเพื่อดูโครงสร้างและความบริสุทธิ์ (ความถูกต้อง) คุณควรใช้ตัวตรวจสอบออนไลน์ (ตัวตรวจสอบความถูกต้อง) ตัวใดตัวหนึ่ง คุณสามารถตรวจสอบความถูกต้องของรหัสไซต์ได้จากเว็บไซต์อย่างเป็นทางการของ World Wide Web Consortium:
validator.w3.org สำหรับความถูกต้องของ HTML และ jigsaw.w3.org/css-validator สำหรับความถูกต้องของ CSS
บริการ validator.w3.org ช่วยให้สามารถตรวจสอบความถูกต้องของภาษามาร์กอัปไฮเปอร์เท็กซ์ของไซต์ด้วยวิธีใดวิธีหนึ่งจากสามวิธีที่เสนอ:
ในการเลือกวิธีการตรวจสอบความถูกต้องของรหัสที่ต้องการ คุณเพียงแค่ต้องสลับไปที่แท็บที่เหมาะสม:
ด้านล่างนี้ ฉันจะสาธิตผลลัพธ์ของการตรวจสอบความถูกต้องของทรัพยากรยอดนิยมในหมู่นักพัฒนาและ SEO เช่น Habrahabr โดยใช้ตัวอย่างที่ชัดเจนด้านล่าง ในการดำเนินการนี้ ให้แทรก URL ของไซต์ลงในฟิลด์เครื่องมือตรวจสอบที่เหมาะสม และคลิกที่ปุ่มตรวจสอบ เอาล่ะ! เพียงไม่กี่วินาที เครื่องมือตรวจสอบความถูกต้องจะให้ผลลัพธ์แก่เรา:
ผลลัพธ์ที่ได้นั้นดีมาก เนื่องจากเมื่อตรวจสอบความถูกต้องของไซต์ส่วนใหญ่ จะมีข้อผิดพลาดนับร้อยและบางครั้งก็เป็นพัน
จะแก้ไขข้อผิดพลาดของรหัสได้อย่างไร?หากเมื่อตรวจสอบความถูกต้องของรหัสทรัพยากรของคุณพบว่า จำนวนมากความผิดพลาดคุณไม่ควรอารมณ์เสียไม่ว่าในกรณีใด หากเพียงเพราะมีเว็บไซต์ไม่มากนักที่ปฏิบัติตามกฎและมาตรฐานของ W3C อย่างเต็มที่ และข้อผิดพลาดทั้งหมดสามารถแก้ไขได้ค่อนข้างรวดเร็ว และบ่อยครั้งที่สิ่งนี้สามารถทำได้แม้จะไม่ได้รับความช่วยเหลือจากภายนอกก็ตาม
เมื่อตรวจสอบโค้ดของหน้าเว็บเสร็จแล้ว เครื่องมือตรวจสอบจะออกรายการข้อผิดพลาดและภัยคุกคามทั้งหมดพร้อมคำอธิบายโดยละเอียดและคำแนะนำในการกำจัดข้อผิดพลาดเหล่านั้น ทั้งหมดนี้มาพร้อมกับตัวอย่าง ดังนั้นการแก้ไขข้อผิดพลาดของโค้ดจึงไม่ใช่เรื่องยากแม้แต่สำหรับผู้เริ่มต้น
ความถูกต้องของรหัสส่งผลต่อการปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือการค้นหาหรือไม่ความถูกต้องของโค้ดเป็นหนึ่งในตัวบ่งชี้คุณภาพของไซต์ ไม่เพียงเพราะรับประกันความเข้ากันได้ของทรัพยากรข้ามเบราว์เซอร์ ความเร็วในการโหลดที่เพิ่มขึ้น และอื่นๆ ความจริงก็คือโค้ด HTML ที่สะอาดและมีโครงสร้างเป็นหนึ่งในองค์ประกอบที่สำคัญที่สุดของการเพิ่มประสิทธิภาพเว็บไซต์ภายในที่มีความสามารถ และเหตุผลนี้ค่อนข้างชัดเจน:
- เครื่องมือค้นหาในอัลกอริธึมการจัดอันดับสิ่งอื่น ๆ ทั้งหมดเท่าเทียมกันให้ความสำคัญกับไซต์ที่มีคุณภาพสูงกว่า
- รหัสที่ถูกต้องได้รับการประมวลผลอย่างง่ายดายและรวดเร็ว และโอกาสที่บอทค้นหาจะอ่านผิดนั้นมีน้อยมาก
ไม่ต้องสงสัยเลยว่าคุณต้องแก้ไขข้อผิดพลาดในโค้ด แต่ข้อผิดพลาดอาจแตกต่างกัน ไม่ใช่ทั้งหมดอาจทำให้อันดับเว็บไซต์ไม่ดี หากคุณไม่มีข้อผิดพลาด +100500 ขึ้นไปก็ไม่ใช่เหตุผลที่ต้องกังวล! แก้ไขสิ่งที่คุณ (ในฐานะเจ้าของไซต์ของคุณ) พิจารณาว่าเป็นอันตรายที่สุด นี่เป็นความเห็นส่วนตัวของผม และไม่อาจแบ่งปันความคิดเห็นของผู้อ่านคนใดได้
และนี่คือสิ่งที่ Google คิดเกี่ยวกับความถูกต้องของโค้ดเว็บไซต์ ตำแหน่งอย่างเป็นทางการของเครื่องมือค้นหาเกี่ยวกับผลกระทบของความถูกต้องของโค้ดต่อการเพิ่มประสิทธิภาพกลไกค้นหาถูกนำเสนอในวิดีโอสั้น ๆ นี้