ในตอนแรก บางคนอาจคิดว่านี่ไม่ใช่เครื่องมือที่จำเป็นเลย แต่การดูโค้ด HTML ทั้งหมดของไซต์นั้นดีในการค้นหาองค์ประกอบที่จำเป็นในโค้ด ซึ่งอาจเป็นลิงก์ แท็ก เมตาแท็ก แอตทริบิวต์ และองค์ประกอบอื่นๆ .

การรวมปุ่มลัด +เปิดหน้าต่างค้นหาในเบราว์เซอร์ Chrome จะปรากฏที่ด้านบนขวา:

รูปที่ 3 ค้นหาตามรหัสไซต์

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

รูปที่ 4 ค้นหาด้วยโค้ดไซต์ HTML

คำแนะนำที่ 2: วิธีดูและแก้ไขโค้ด HTML และ CSS ของไซต์ในเบราว์เซอร์ Google Chrome

ตอนนี้เป็นส่วนที่สำคัญที่สุด ซึ่งฉันจะแสดงให้คุณเห็นว่าคุณสามารถแก้ไขโค้ด HTML และ CSS ของเว็บไซต์ในเบราว์เซอร์ได้อย่างไร จากนั้นโอนการเปลี่ยนแปลงไปยังเบราว์เซอร์

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

ขนาด สีขององค์ประกอบที่สำคัญบางอย่างของบล็อก เช่น ชื่อบล็อกหรือโพสต์ แท็กเพิ่มเติม และอื่นๆ ฉันค้นหาโค้ดที่ต้องการด้วยตนเอง โดยทดลองกับโดเมนทดสอบ โดยอิงจากบทความที่เขียนในภายหลัง

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

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

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

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

วิธีค้นหาและเปลี่ยนโค้ด html และ css ของไซต์

หากคุณไม่ชอบบทความยาวๆ เรื่องนี้เหมาะสำหรับคุณ ในตอนท้ายของบทความวิดีโอสอนที่บอกวิธีที่คุณสามารถดูโค้ด html ของเว็บไซต์โดยใช้ Notepad++ และทำการเปลี่ยนแปลงการออกแบบเทมเพลตต่างๆ โดยใช้ตัวอย่างวิธีเปลี่ยนสีแบบอักษร ในวิดีโอมีรายละเอียดปลีกย่อยอื่นๆ ในการจัดการบล็อก และสำหรับผู้ที่ใกล้ชิดและเข้าใจข้อความมากขึ้น ด้านล่างคือการวิเคราะห์หัวข้อโดยละเอียดพร้อมภาพหน้าจอ
httpv://youtu.be/uIlVvwCt2ho

ข้อกำหนดและแนวคิด

ตั้งชื่อบทความจะแม่นยำกว่า” วิธีค้นหาโค้ด CSS“ แต่ฉันตัดสินใจหยุดใช้ชื่อที่ "ผิด" เพราะโดยพื้นฐานแล้วคำตอบสำหรับคำถามนี้ค้นหาใน html CSS และ HTML เป็นสิ่งที่แตกต่างกันมาก แม้ว่าจะเป็นสองส่วนของระบบเดียวกันก็ตาม มีบทความทางเทคนิคมากมายบนอินเทอร์เน็ต ซึ่งก็เพียงพอแล้วสำหรับเราที่จะเข้าใจว่า:

• HTML— รับผิดชอบโครงสร้างของไซต์ (อะไรตามอะไร ตามลำดับอะไร ฯลฯ) นี่คือพื้นฐานในการสร้างไซต์ ถ้าเราเปรียบเทียบกับบ้านแล้วนี่คือแผนผังการจัดห้อง
• ซีเอสเอส— รับผิดชอบในการออกแบบ (แบบอักษร ขนาด สี ฯลฯ) นี่คือสไตล์ทั่วไปของบ้านและสไตล์ของห้องแต่ละห้อง: จะมีวอลเปเปอร์ประเภทใด, โคมไฟ, ผ้าม่าน, เฟอร์นิเจอร์ ดังนั้นเอกสารที่ระบุว่า รหัส CSSเรียกว่า "สไตล์ชีต"

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

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

วันหนึ่งฉันดูว่าอาจารย์ทำอะไรกันแน่ ฉันยังไม่รู้ว่าฟิวส์ทำงานอย่างไร แต่ฉันรู้ว่าจะต้องเปลี่ยนที่ไหน) ฉันจะไม่ซ่อมมอเตอร์ด้วยตัวเอง และการเปลี่ยนฟิวส์ก็ไม่ใช่เรื่องยาก เช่นเดียวกับเว็บไซต์

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

คุณจำเป็นต้องเป็นผู้เชี่ยวชาญในทุกสิ่งหรือไม่?

มักจะมีการพูดคุยกันในบล็อก SEO ว่าผู้เริ่มต้นจำเป็นต้องมีความเข้าใจอย่างลึกซึ้งเกี่ยวกับ HTML หรือดีกว่านั้นคือเรียนรู้วิธีเขียนเว็บไซต์ด้วยตนเองเพื่อให้ทุกอย่างมีเอกลักษณ์เฉพาะตัว. ฉันไม่รู้ - สำหรับเขาแต่ละคน และนี่คือสิ่งที่ใกล้กว่าใครอยู่ใกล้กว่ากัน ฉันสนใจมากกว่านี้อีกหน่อย ตอนนี้ฉันจึงเรียนรู้เพิ่มเติมจากวลาดิมีร์ ในเดือนพฤศจิกายนของปีนี้ Vladimir เปิดบล็อกของตัวเอง บล็อกของเขาสร้างขึ้นจากเทมเพลตที่เรียบง่ายและฟรี เขาปรับเปลี่ยนเพียงเล็กน้อยเพื่อให้เหมาะกับตัวเอง

หลังจากผ่านไป 10 วันบล็อกก็ขึ้นอันดับที่ 104 ในการจัดอันดับไซต์ Runet ทั้งหมดโดยมีปริมาณการเข้าชมประมาณ 1.5 พันคนต่อวัน ในอีก 10 วัน แล้วมีเรื่องอะไรล่ะ? Vladimir เชี่ยวชาญเรื่อง HTML เป็นอย่างดี และสามารถสั่งซื้อและซื้อเทมเพลตที่เป็นเอกลักษณ์ให้ตัวเองได้ ดังนั้นคุณต้องเข้าใจว่า ความลับไม่ได้อยู่ในเทมเพลต แต่อยู่ที่ประโยชน์ของข้อมูล

รหัส html ซ่อนอยู่ที่ไหน?

ขออภัยที่พูดนอกเรื่อง กลับไปที่รหัสของเรากันดีกว่า) สมมติว่าคุณต้องการเปลี่ยนสีตัวอักษรของชื่อบล็อก ลองดูตัวอย่างไซต์ทดสอบของฉัน

1. เปิดไซต์ในเบราว์เซอร์ Google Chrome (ถ้าคุณยังไม่ได้ใช้ ให้ติดตั้งเลย - มันถูกออกแบบมาอย่างดีสำหรับการทำงานกับเว็บไซต์ มีเครื่องมือในตัวมากมาย)
2. เราเลื่อนเคอร์เซอร์ของเมาส์ไปที่องค์ประกอบที่เรากำลังจะเปลี่ยนแปลง - ในกรณีนี้ - ชื่อของบล็อก เราคลิกขวาที่มันและในหน้าต่างที่ปรากฏขึ้นให้เลือก VIEW ELEMENT CODE

สิ่งสำคัญ: อย่าสับสนกับการดูรหัสหน้า! ตอนนี้เราไม่ต้องการทั้งหน้าแล้ว แค่มีองค์ประกอบแยกต่างหาก

คลิกที่มัน - หน้าต่างดูโค้ดจะปรากฏขึ้นที่ด้านล่างของเบราว์เซอร์:

บรรทัดโค้ดที่เรากำลังเปลี่ยนแปลงจะถูกเน้นด้วยสีแดง

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

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

หลักการทั่วไปในการหาสิ่งของ:

ชื่อแบบอักษร - ในบรรทัด FONT FAMILY

ขนาดตัวอักษร - ในบรรทัดขนาดตัวอักษร

สีตัวอักษร - ในบรรทัด COLOR

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

ความสนใจ:

เส้นที่เราจะคัดลอกจะถูกเน้นด้วยสีแดงในรูป

เพื่อให้คุณสามารถค้นหาได้ในสไตล์ชีตในภายหลัง

4. คัดลอกบรรทัด- เนื่องจากในตัวอย่างนี้ เราต้องการเปลี่ยนสีของชื่อไซต์ ฉันจึงคัดลอกเส้นที่เน้นในสี่เหลี่ยมสีแดงในภาพที่สอง ในเทมเพลตของฉัน มีหน้าที่เปลี่ยนสีชื่อไซต์:

#header h1 a, #header h1 a:visited (

ค้นหาบรรทัดที่ต้องการในไฟล์ “สไตล์ชีต (style.css)” สิ่งนี้ทำไปแล้วในแผงผู้ดูแลระบบ ฉันขออย่างยิ่งว่า แม้ว่าจะไม่มีความมั่นใจและความเข้าใจที่สมบูรณ์ แต่การทดลองทั้งหมดควรดำเนินการบนโดเมนย่อยทดสอบเพื่อที่จะยกเว้น

ไปที่แผงผู้ดูแลระบบ: คอนโซล - ลักษณะที่ปรากฏ - เครื่องมือแก้ไข ในแถบด้านข้างขวาเราจะพบไฟล์ STYLE TABLE (STYLE.CSS) ให้เปิดขึ้นมา

ตอนนี้เปิดบรรทัดค้นหาโดยใช้ปุ่ม CTRL + F: หน้าต่างบรรทัดว่างจะปรากฏในหน้าต่างด้านบน เราวางลงในบรรทัดที่เราคัดลอกไว้ในขั้นตอนที่ 4

และคุณจะเห็นว่าเส้นนี้จะถูกเน้นในสไตล์ชีตอย่างไร (เป็นสีส้มในภาพ):

เราทำการเปลี่ยนแปลงองค์ประกอบ ในกรณีของเรา เรากำลังเปลี่ยนสีตัวอักษร ดังนั้นในบรรทัด COLOR เราจึงแทนที่ค่าอื่น - สีที่เราต้องการ ในตัวอย่างสีคือสีดำ ความหมายคือ:

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

หากไม่แสดงการเปลี่ยนแปลงในชั่วโมงที่ผ่านมาและไปที่หน้าอีกครั้ง - คราวนี้ทุกอย่างควรแสดง

ใช้เวลานานในการอธิบาย แต่ในทางปฏิบัติทุกอย่างเสร็จเร็ว โดยเฉพาะเมื่อทักษะเริ่มแรกปรากฏขึ้น

รายละเอียดเพิ่มเติมเกี่ยวกับวิธีเปลี่ยนองค์ประกอบบางอย่าง:

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

ฉันขอแนะนำให้ดูวิดีโอของ Artem Abramovich เกี่ยวกับวิธีการค้นหาและค้นหาคำหรือองค์ประกอบใด ๆ ในธีม/เทมเพลตใด ๆ สำหรับกลไกใด ๆ (wordpress, joomla ฯลฯ ) และแทนที่ด้วยสิ่งที่คุณต้องการ:

กรุณาแบ่งปันถ้าคุณชอบมัน:

คุณอาจสนใจที่จะรู้:

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

ซอร์สโค้ดของไซต์คือชุดของมาร์กอัป HTML, สไตล์ CSS และสคริปต์ JavaScript ที่เบราว์เซอร์ได้รับจากเว็บเซิร์ฟเวอร์

วิดีโอเพิ่มเติมในช่องของเรา - เรียนรู้การตลาดทางอินเทอร์เน็ตกับ SEMANTICA

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

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

• มาร์กอัป HTML;
• สไตล์ชีตหรือลิงก์ไฟล์
• โปรแกรมที่เขียนด้วย JavaScript หรือลิงก์ไปยังไฟล์ที่มีโค้ด

เบราว์เซอร์ทั้งสามส่วนนี้ประมวลผล สำหรับเซิร์ฟเวอร์ นี่เป็นเพียงข้อความที่ต้องส่งเพื่อตอบสนองต่อคำขอ

ทำไมเราอาจต้องศึกษาซอร์สโค้ด

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

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

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

วิธีดูซอร์สโค้ดของไซต์

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

เลือกตัวเลือก "ดูโค้ดหน้า" และรับรายการทั้งหมดบนแท็บแยกต่างหาก

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

วิธีค้นหาซอร์สโค้ดของหน้าเว็บไซต์

คลิกที่ไอคอนเมนูในเบราว์เซอร์ ส่วนใหญ่มักจะอยู่ทางด้านขวาและดูเหมือนจุดหรือแถบสามจุด

ในส่วนเครื่องมือเพิ่มเติม เลือก "เครื่องมือสำหรับนักพัฒนา"

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

ในแท็บ "แหล่งที่มา" คุณสามารถดูเนื้อหาของไฟล์บางไฟล์ได้: สคริปต์ แบบอักษร รูปภาพ

ในแท็บ "ความปลอดภัย" คุณสามารถตรวจสอบใบรับรองของเว็บไซต์ได้

แท็บ “การตรวจสอบ” จะช่วยคุณตรวจสอบทรัพยากรที่โพสต์บนโฮสติ้ง

หากตำแหน่งของแผงทางด้านขวาไม่สะดวกคุณสามารถคลิกจุดสามจุดแล้วเปลี่ยนโดยเลือกรายการที่ต้องการ

วิธีดูเมตาแท็ก

เอกสาร HTML ทุกฉบับมีแท็กโครงสร้าง นี่คือบางส่วนของพวกเขา:

1. Html – เอกสารทั้งหมด
2. ส่วนหัว – ส่วนของส่วนหัวบริการ
3. ชื่อเรื่อง – ชื่อหน้า (แสดงบนแท็บ)
4. เนื้อความ – เนื้อความของเอกสาร
5. H1-H6 – ส่วนหัวของข้อความหน้า
6. บทความ – บทความ.
7. ส่วน - ส่วน
8. เมนู – เมนู
9. Div – บล็อก
10. สแปน – สตริง
11. P – ย่อหน้า
12. โต๊ะ – โต๊ะ

องค์ประกอบได้รับการออกแบบเพื่อแบ่งเขตส่วนต่างๆ บนเพจตามตรรกะ หากจำเป็น องค์ประกอบเหล่านี้จะได้รับการออกแบบโดยใช้สไตล์ มีข้อความที่ปรากฏอยู่บนหน้า แต่แท็ก Head มีข้อมูลบริการ เมตาแท็กใช้เพื่อระบุ ทุกสิ่งที่เขียนในนั้นมีไว้สำหรับเซิร์ฟเวอร์และเครื่องมือค้นหา

เนื้อหาของพวกเขาไม่สามารถค้นพบได้ด้วยวิธีอื่นใด

มาดูแท็ก Link กันดีกว่า ด้วยความช่วยเหลือ จะมีการระบุลิงก์ไปยังไฟล์ที่รวมอยู่ภายนอก หากต้องการคุณสามารถดูเนื้อหาและบันทึกลงดิสก์ได้ เมื่อต้องการทำเช่นนี้ ให้เลื่อนตัวชี้ไปยังที่อยู่แล้วกด RMB เลือก "เปิดในแท็บใหม่"

ไฟล์ที่ระบุจะเปิดขึ้นในแท็บใหม่ ซึ่งคุณสามารถดูหรือบันทึกได้

วิธีดูซอร์สโค้ดของเพจเพื่อดีบักสคริปต์

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

สามารถดูไวยากรณ์ได้โดยตรงในโค้ด นี่คือสิ่งที่แท็บ "แหล่งที่มา" มีไว้เพื่อ

วิธีดูโค้ดขององค์ประกอบเฉพาะ

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

หน้าต่างเดียวกันจะเปิดขึ้น แต่โฟกัสไปที่วัตถุที่เลือก

ประวัติย่อ

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

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

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

คำแนะนำ

1. ในเบราว์เซอร์ Mozilla FireFox ให้ขยายส่วน "มุมมอง" ในเมนูแล้วคลิก "เริ่มต้น" รหัส หน้า- รายการเดียวกันนี้ยังอยู่ในเมนูบริบทที่ปรากฏขึ้นหากคุณคลิกขวาที่ข้อความ หน้า- คุณยังสามารถใช้คีย์ผสม CTRL + U ได้ Mozilla FireFox ไม่ได้ใช้โปรแกรมภายนอก - เริ่มต้น รหัส หน้าด้วยการเน้นไวยากรณ์จะเปิดขึ้นในหน้าต่างเบราว์เซอร์แยกต่างหาก

2. ใน Internet Explorer คลิกเมนูไฟล์แล้วเลือกแก้ไขใน Notepad แทนที่จะใช้ชื่อ Notepad คุณสามารถเขียนโปรแกรมอื่นที่คุณกำหนดไว้ในการตั้งค่าเบราว์เซอร์เพื่อดูค่าเริ่มต้นได้ รหัสก. เมื่อคลิก หน้าด้วยปุ่มเมาส์ขวาเมนูบริบทจะปรากฏขึ้นซึ่งมีรายการที่ให้คุณเปิดเริ่มต้นได้ รหัส หน้าในโปรแกรมภายนอก – “ดู HTML- รหัสเอ".

3. ในเบราว์เซอร์ Opera ให้เปิดเมนูไปที่ส่วน "หน้า" และคุณจะมีโอกาสเลือกรายการ "เริ่ม" ในส่วนย่อย "เครื่องมือสำหรับการพัฒนา" รหัส"หรือรายการ"เริ่มต้น รหัสเฟรม" ปุ่มลัด CTRL + U และ CTRL + SHIFT + U ถูกกำหนดให้กับการเลือกนี้ตามลำดับ ในเมนูบริบทเชื่อมโยงกับการคลิก หน้าคลิกขวายังมีรายการ "เริ่มต้น รหัส- Opera เปิดแหล่งที่มา หน้าในโปรแกรมภายนอกที่กำหนดในระบบปฏิบัติการหรือในการตั้งค่าเบราว์เซอร์สำหรับการแก้ไขไฟล์ HTML

4. ไม่ต้องสงสัยเลยว่าเบราว์เซอร์ Google Chrome มีองค์กรที่ดีที่สุดในการดูครั้งแรก รหัสก. โดยการคลิกขวาที่เพจคุณสามารถเลือกดูได้ รหัสก หน้า"จากนั้นซอร์สโค้ดที่มีการเน้นไวยากรณ์จะเปิดขึ้นในแท็บแยกต่างหาก หรือคุณอาจต้องการบรรทัด "มุมมอง" ในเมนูเดียวกัน รหัสองค์ประกอบ” และเบราว์เซอร์ในแท็บเดียวกันจะเปิดเฟรมเพิ่มเติมอีกสองเฟรมซึ่งคุณสามารถตรวจสอบ HTML และ CSS ได้ รหัสทุกองค์ประกอบ หน้า- เบราว์เซอร์จะตอบสนองต่อเคอร์เซอร์ที่เคลื่อนที่ข้ามบรรทัด รหัสและการเน้นองค์ประกอบบนหน้าที่สอดคล้องกับส่วนนี้ของ HTML รหัสก.

5. ในเบราว์เซอร์ Apple Safari ให้ขยายส่วนมุมมองและเลือกดู HTML รหัสเอ". ในเมนูที่ปรากฏขึ้นเมื่อคุณคลิกขวาเปิด หน้ารายการที่เกี่ยวข้องเรียกว่า "ดูแหล่งที่มา" การดำเนินการนี้ได้รับการกำหนดปุ่มลัด CTRL + ALT + U เริ่มต้น รหัสเปิดในหน้าต่างเบราว์เซอร์แยกต่างหาก

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

ตัวอย่างที่ 4.1 ซอร์สโค้ดของหน้าเว็บ

หัวเรื่อง

ย่อหน้าแรก.

ย่อหน้าที่สอง

คัดลอกเนื้อหาของตัวอย่างนี้และบันทึกไว้ในโฟลเดอร์ c:\www\ เป็น example41.html หลังจากนั้นให้เปิดเบราว์เซอร์และเปิดไฟล์ผ่านรายการเมนู ไฟล์ > เปิดไฟล์ (Ctrl+O)- ในกล่องโต้ตอบการเลือกเอกสาร ให้เลือกไฟล์ example41.html หน้าเว็บที่แสดงในรูปที่ 1 จะเปิดขึ้นในเบราว์เซอร์ 4.1.

ข้าว. 4.1. ผลลัพธ์ของการรันตัวอย่าง

องค์ประกอบมีวัตถุประสงค์เพื่อระบุประเภทของเอกสารปัจจุบัน - DTD (คำจำกัดความประเภทเอกสารคำอธิบายของประเภทเอกสาร) นี่เป็นสิ่งจำเป็นเพื่อให้เบราว์เซอร์เข้าใจวิธีตีความหน้าเว็บปัจจุบัน เนื่องจาก HTML มีอยู่หลายเวอร์ชัน นอกจากนี้ยังมี XHTML (EXtensible HyperText Markup Language) ซึ่งคล้ายกับ HTML แต่แตกต่างจากในรูปแบบไวยากรณ์ เพื่อให้บราวเซอร์ไม่สับสนและเข้าใจตามมาตรฐานในการแสดงหน้าเว็บจึงจำเป็นต้องตั้งโค้ดในบรรทัดแรก .

มีหลายประเภทซึ่งจะแตกต่างกันไปขึ้นอยู่กับเวอร์ชันของ HTML ที่กำหนดเป้าหมาย ในตาราง 4.1. มีการระบุประเภทเอกสารหลักพร้อมคำอธิบาย

ความแตกต่างระหว่างคำอธิบายเอกสารแบบเข้มงวดและแบบเปลี่ยนผ่านคือแนวทางที่แตกต่างในการเขียนโค้ดเอกสาร HTML ที่เข้มงวดต้องปฏิบัติตามข้อกำหนด HTML อย่างเคร่งครัดและไม่อาจให้อภัยได้ Transitional HTML จะผ่อนคลายมากขึ้นเกี่ยวกับข้อบกพร่องของโค้ดบางประการ ดังนั้นจึงควรใช้ประเภทนี้ในบางกรณี

ตัวอย่างเช่น ใน HTML และ XHTML ที่เข้มงวด จำเป็นต้องมีแท็ก

แท็ก