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

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

วันนี้เราจะพูดถึงวิธีเปิดโค้ดของเพจ องค์ประกอบบางอย่าง และเรียนรู้วิธีใช้ทักษะนี้เพื่อประโยชน์ของคุณ

ความรู้พื้นฐานเกี่ยวกับโค้ด

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

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

นี่คือวิธีการสร้างเว็บไซต์คุณภาพสูง หากคุณต้องการเข้าไปมีส่วนร่วมในเรื่องนี้และศึกษามัน หากคุณไม่ต้องการจะไม่มีใครบังคับคุณได้

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

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

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

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

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

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

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

อีกไม่นาน ฉันจะแสดงตัวอย่างที่เฉพาะเจาะจงให้คุณดู

ดูโค้ด

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

วิธีที่ดีที่สุด

วิธีที่ฉันจะอธิบายก่อนนั้นซับซ้อนเล็กน้อยสำหรับผู้เริ่มต้น แต่เป็นคำแนะนำให้อ่าน เปิดหน้าและคลิกที่ปุ่มเมาส์ขวา เลือก “บันทึกเป็น...”

บันทึกหน้าเว็บทั้งหมด อย่างที่คุณเห็นในภาพหน้าจอ ฉันได้ดาวน์โหลดทุกอย่างล่วงหน้าแล้ว ที่นี่เรามีสองโฟลเดอร์

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

นี่คือกูเกิลโครม

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

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

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

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

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

อย่างไรก็ตาม หากคุณสนใจวิธีการทำงานที่นี่ คุณสามารถดูลิงก์ไปยังรูปภาพด้านล่างได้ นี่คือคำตอบของคุณ

มอซซิลา ไฟร์ฟอกซ์

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

เมื่อคุณวางเมาส์เหนือองค์ประกอบ คุณสามารถเปิดโค้ดของมันได้

ที่นี่ข้อมูลจะแสดงที่ด้านล่างของหน้าจอ แต่อย่างอื่นทุกอย่างจะเหมือนกันทุกประการ

เบราว์เซอร์ยานเดกซ์

ในเบราว์เซอร์ Yandex ทุกอย่างเหมือนกับในสองตัวเลือกก่อนหน้าทุกประการ เปิดหน้า คลิกขวา ดูโค้ดของหน้า

เราวางเคอร์เซอร์ไว้เหนือองค์ประกอบหากเราต้องการค้นหารหัสของมันอย่างชัดเจน

ทุกอย่างจะแสดงที่นี่เหมือนกับใน Chrome ทุกประการ

โอเปร่า

และสุดท้าย โอเปร่า

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

สำหรับองค์ประกอบ: Ctrl+Shift+C

นี่คือสิ่งที่ผลลัพธ์ดูเหมือน

สิ่งนี้จะน่าสนใจสำหรับผู้เริ่มต้น

ตอนนี้ดูว่าทุกอย่างทำงานอย่างไร คุณพบเว็บไซต์และชอบองค์ประกอบบางอย่างมาก ตัวอย่างเช่นอันนี้ คุณรู้วิธีเปิดโค้ดองค์ประกอบแล้ว

ตอนนี้คัดลอกมัน

ฉันใช้มันวางรหัสนี้ลงในรหัสใหม่ ไฟล์ htmlลงในแท็ก body (body เป็นภาษาอังกฤษ)

ตอนนี้เรามาดูกันว่ามันจะมีลักษณะอย่างไรในเบราว์เซอร์

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

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

หากคุณทนไม่ไหว แต่ต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ html และ css ตอนนี้ ฉันสามารถแนะนำหลักสูตรการฝึกอบรมฟรีให้คุณได้

นี่คือ 33 บทเรียนที่จะช่วยให้คุณเชี่ยวชาญ html - "หลักสูตรฟรีเกี่ยวกับ HTML" .

และที่นี่ ข้อมูลครบถ้วนเกี่ยวกับซีเอส - “หลักสูตรฟรีเกี่ยวกับ CSS (45 บทเรียนวิดีโอ!)” .

ตอนนี้คุณรู้เพิ่มเติมอีกเล็กน้อยแล้ว ฉันขอให้คุณประสบความสำเร็จในความพยายามของคุณ แล้วพบกันใหม่!

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

ซอร์สโค้ดของหน้าคืออะไร

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

ซอร์สโค้ดหรือที่เรียกว่าโค้ดเพจ HTML เป็นข้อความในภาษา Hyper Text Markup Language (HTML) ประกอบด้วยเนื้อหาของหน้าจริง (ข้อความ ตาราง) และแท็ก ส่วนหลังทำหน้าที่เป็นคำแนะนำสำหรับเบราว์เซอร์: วิธีแสดงเนื้อหา, ประเภทของการจัดรูปแบบที่จะใช้, ตำแหน่งที่จะแทรกไฮเปอร์ลิงก์หรือไฟล์มีเดีย สำหรับเราซึ่งเป็นโปรแกรมเมอร์มือใหม่ ซอร์สโค้ดเป็นพื้นที่ฝึกอบรมที่ดีที่สุด: เราพบไซต์ที่น่าสนใจและสอดแนมมัน บันทึก และใช้แฟรกเมนต์ที่ประสบความสำเร็จ ยังไง?

วิธีดูซอร์สโค้ดในหน้าเบราว์เซอร์ Google Chrome

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

1. คลิกที่ไอคอน เมนูที่มุมขวาบนของเบราว์เซอร์แล้วเลือก “ เครื่องมือเพิ่มเติม- มีตัวเลือก "ดูซอร์สโค้ด" บอกตามตรงว่าฉันไม่ค่อยได้ใช้มัน วิธีนี้: มีการเคลื่อนไหวที่ไม่จำเป็นมากมาย มันสามารถทำให้ง่ายยิ่งขึ้นไปอีก
2. กดคีย์ผสม Ctrl+U– หน้าต่างใหม่พร้อมซอร์สโค้ดจะเปิดขึ้น
3. สำหรับผู้ชื่นชอบเมนูตามบริบท: คลิกขวาที่หน้าแล้วเลือกตัวเลือก "ดูโค้ดหน้า"

เราจัดการกับงานในการดูโค้ด HTML ของเพจในเบราว์เซอร์ เรามาดูขั้นตอนที่น่าสนใจที่สุดกันดีกว่า

วิธีแก้ไขและบันทึกซอร์สโค้ด

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

ตัวเลือก 1. “ด้วยตนเอง”

หลังจากที่เราเปิดซอร์สโค้ดของหน้าแล้ว ให้เรียกเมนูบริบทแล้วเลือกตัวเลือก "บันทึกเป็น" แล้วบันทึกไฟล์ไปที่ ฮาร์ดไดรฟ์- เราแก้ไขไฟล์ใน Notepad หรือ Notepad บันทึกการเปลี่ยนแปลงและเปิดผ่านเบราว์เซอร์ ผลลัพธ์ของการเปลี่ยนแปลงของเรา (สำเร็จและไม่สำเร็จ) จะปรากฏในหน้าต่างเบราว์เซอร์

ตัวเลือกที่ 2. สำหรับมืออาชีพ

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

Ctrl+U

ฉันจะดูซอร์สโค้ดขององค์ประกอบได้อย่างไร

คลิกขวาที่องค์ประกอบของหน้าที่สนใจ

กูเกิลโครม: “ดูรหัสองค์ประกอบ”

โอเปร่า: “ตรวจสอบองค์ประกอบ”

ไฟร์ฟอกซ์: “วิเคราะห์องค์ประกอบ”

ในเบราว์เซอร์อื่นๆ ให้มองหารายการเมนูที่มีความหมายคล้ายกัน

สวัสดีทุกคน!

โดยเฉพาะอย่างยิ่งฉันได้วางประเด็นทั้งหมดไว้ในตอนต้นของบทความสำหรับผู้ที่กำลังมองหาคำตอบอย่างรวดเร็ว

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

ในอนาคตคุณจะได้ศึกษาซอร์สโค้ดของหน้าและองค์ประกอบแต่ละอย่างอย่างแน่นอน

เรามาดูกันดีกว่า ตัวอย่างที่เฉพาะเจาะจงคุณจะใช้การดูซอร์สโค้ดของเพจได้อย่างไร

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

โดยการเปรียบเทียบ คุณสามารถค้นหาและศึกษาส่วนย่อยของโค้ดอื่นๆ ได้

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

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

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

คำแนะนำ

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

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

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

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

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

แหล่งที่มา:

• วิธีเปลี่ยนคีย์ที่กำหนดใน Firefox

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

คุณจะต้อง

• อินเทอร์เน็ต

คำแนะนำ

ลองพิจารณาวิธีแรกโดยใช้ตัวอย่างยอดนิยม http://chemax.ru- หากต้องการค้นหารหัสสำหรับเกมใดเกมหนึ่ง ให้คลิกที่แท็บ "รหัสโกง" จากนั้นเลือก "สำหรับ" ในหน้าต่างที่เปิดขึ้นคุณสามารถป้อนชื่อเกมลงในชื่อพิเศษ (ซึ่งจะอำนวยความสะดวกในกระบวนการค้นหา) หรือคลิกที่ตัวอักษรภาษาอังกฤษหรือรัสเซียที่ชื่อเกมเริ่มต้น หลังจากเลือกเกมแล้ว คุณจะเห็นรายการรหัสที่เป็นไปได้ทั้งหมด

หากต้องการดาวน์โหลดฐานข้อมูลรหัสโกง คุณต้องไปที่เว็บไซต์ http://chemax.ruและเลือกแท็บ "CheMax" - "CheMax Rus" ฐานข้อมูลรหัสโกงนี้เป็นภาษารัสเซียและมีเกมให้เลือกมากมาย เมื่อติดตั้งคุณควรเลือกภาษารัสเซียและตำแหน่งของโปรแกรมในไฟล์ . หลังจากที่คุณเปิดโปรแกรมคุณจะต้องป้อนชื่อเกมในบรรทัดพิเศษซึ่งคุณจะได้รับรหัสโกงที่จำเป็นทั้งหมด

วิดีโอในหัวข้อ

โปรดทราบ

อย่าลืมอัพเดตด่วนๆ นะครับ โปรแกรมนี้เพื่อให้มีฐานโค้ดที่สมบูรณ์ที่สุด

คำแนะนำที่เป็นประโยชน์

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

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

คุณจะต้อง

• คำแนะนำในการดูซอร์สโค้ดของหน้า

คำแนะนำ

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

สำหรับ Internet Explorer ให้เลือกแท็บ "มุมมอง" จากนั้นเลือก "ดั้งเดิม" รหัส หน้า»หรือสามารถเลือกรายการได้โดยคลิกปุ่มเมาส์ขวา จะถูกเข้ารหัสโดยนักพัฒนา รหัสในนี้เราไปที่เมนู "บริการ" จากนั้น "เครื่องมือสำหรับนักพัฒนา" คลิกลูกศรเลือกองค์ประกอบที่ต้องการและ รหัสกลายเป็น . จากนั้นคลิกที่ไอคอนและ รหัสวี รูปแบบข้อความและคัดลอกจากส่วนประกอบลงใน html

เบราว์เซอร์มอซซิลา Firefox ให้ความสามารถในการดูโดยใช้คำสั่งง่ายๆ “Ctrl+U” หรือในเมนู “เครื่องมือ” ให้เลือกสตริงย่อย “ดูแหล่งที่มา” รหัส- ดูข้อมูลที่เข้ารหัสใน มอซซิลา ไฟร์ฟอกซ์คุณสามารถติดตั้ง Web Developer พิเศษได้ โดยเลือกจากเมนู “ รหัส" สตริง "สร้างขึ้น รหัส" และด้านล่าง หน้าคุณค่าของต้นฉบับปรากฏขึ้น รหัสก. คัดลอกไฟล์ไปยังคลิปบอร์ดหรือบันทึกด้วยนามสกุล page.htm

ที่ ใช้ Google Chrome ในเมนูหลัก "เครื่องมือ" เลือกสตริงย่อย "ดูซอร์ส" รหัส" จากนั้นใช้ปุ่มเมาส์ขวาเพื่อเปิดรายการ "view รหัสก หน้า» หรือใช้ปุ่ม "Ctrl + U"

สำหรับ เบราว์เซอร์ซาฟารีในเมนูเราจะพบ "ดู html- รหัส"โดยการคลิกขวาเปิดสตริงย่อย "แหล่งที่มาของมุมมอง" หรือใช้แป้นพิมพ์ลัด "Ctrl + Alt + U"

โปรดทราบ

ความสามารถในการดูข้อมูลที่เข้ารหัสเกี่ยวกับซอร์สโค้ดนั้นดำเนินการโดยใช้เบราว์เซอร์สองตัว

คำแนะนำที่เป็นประโยชน์

หากคุณไม่ใช่นักพัฒนาไซต์ คุณสามารถเปลี่ยนเพจเพื่อการใช้งานของคุณเองเท่านั้น

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

คุณจะต้อง

• ซอฟต์แวร์ CheMax

คำแนะนำ

หากต้องการค้นหารหัสที่นักพัฒนาซอฟต์แวร์เคยใช้ระหว่างการทดสอบ ไม่จำเป็นต้องเปิดไฟล์ exe ทั้งหมดของผลิตภัณฑ์เกมโดยใช้โปรแกรมแก้ไข HEX คุณเพียงแค่ต้องไปที่ไซต์เฉพาะสำหรับการโกงโดยใช้ลิงก์ต่อไปนี้ http://chemax.ru

บนหน้าที่โหลดแล้ว ให้เลื่อนเคอร์เซอร์ไปที่แถบเมนู ได้แก่ ส่วน "รหัสโกง" และในรายการที่ปรากฏขึ้น ให้เลือก "ในภาษา" บน หน้าถัดไปกรอกชื่อเกมในช่องค้นหา จากนั้นคลิกปุ่ม “ค้นหา” ขอแนะนำให้ป้อนชื่อที่สมบูรณ์ที่สุดซึ่งสามารถคัดลอกได้จากคุณสมบัติทางลัด โดยไปที่เดสก์ท็อปแล้วคลิกขวาที่ทางลัดของเกม ในเมนูบริบทเลือก "คุณสมบัติ" และคัดลอกชื่อโดยใช้แป้นพิมพ์ลัด Ctrl + C หรือ Ctrl + Insert

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

การเข้าถึงเว็บไซต์อย่างต่อเนื่องเพื่อรับโค้ดที่จำเป็นนั้นเป็นงานที่ยาวมาก เพราะ... ปล่อย โปรแกรมพิเศษ(CheMax) เร็วกว่าหลายเท่า โดยไปที่เมนูด้านบนของ CheMax แล้วเลือก CheMax Rus ในหน้าดาวน์โหลดโปรแกรม คลิกที่ “ตัวติดตั้ง” หรือ “ แฟ้มเอกสาร RAR" และระบุตำแหน่งที่จะบันทึกไฟล์ปฏิบัติการ

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

วิดีโอในหัวข้อ

แหล่งที่มา:

• จะทราบรหัสแบนเนอร์ได้อย่างไร?

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

คุณจะต้อง

• - โปรแกรมสำหรับเปิดซอร์สโค้ด

คำแนะนำ

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

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

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

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

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

วิดีโอในหัวข้อ

คำแนะนำที่เป็นประโยชน์

ตรวจสอบแหล่งที่มาของซอฟต์แวร์ฟรี

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

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

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

วิธีดูโค้ดหน้า?

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

• กลับ;
• ซึ่งไปข้างหน้า;
• รีบูต;
• บันทึกเป็น;
• ผนึก;
• แปลเป็นภาษารัสเซีย;
• ดูรหัสหน้า;
• ดูโค้ด

เราจำเป็นต้องคลิกที่ ดูรหัสหน้าและโค้ด html ของหน้าเว็บไซต์จะเปิดต่อหน้าเรา

การดูโค้ดหน้า: ต้องใส่ใจอะไร?

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

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

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

ตัวอย่างเช่น:

//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

เราจะเห็นรูปแบบตัวอักษร CSS ของหน้า ในกรณีนี้จะใช้แบบอักษร สามารถดูได้ที่นี่ - ตระกูลฟอนต์: 'Source Sans Pro'

ไซต์นี้ได้รับการปรับให้เหมาะสมโดยใช้ปลั๊กอิน Yoast SEO สิ่งนี้สามารถเห็นได้จากส่วนที่แสดงความคิดเห็นของโค้ดนี้:

ไซต์นี้ได้รับการปรับให้เหมาะสมด้วยปลั๊กอิน Yoast SEO v3.4.2 - https://yoast.com/wordpress/plugins/seo/

ข้อมูลทั้งหมดที่อยู่ในแท็กเนื้อหาจะแสดงโดยเบราว์เซอร์บนหน้าจอมอนิเตอร์ ที่นี่เราเห็นโค้ด html ของหน้า และที่ด้านล่างสุดคือโค้ดสคริปต์ Yandex Metrics ล้อมรอบด้วยแท็กแสดงความคิดเห็นพร้อมข้อความ:

/ตัวนับ Yandex.Metrika

มาสรุปกัน

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

• ซีเอ็มเอส เวิร์ดเพรส;
• แบบอักษร Google แหล่งที่มา Sans Pro;
• ธีม WordPress – ซิดนีย์;
• ปลั๊กอิน Yoast;
• ตัวนับเมตริก Yandex

ตอนนี้หลักการวิเคราะห์ รหัสเอชทีเอ็มหน้าเว็บไซต์ค่อนข้างชัดเจน ไม่จำเป็นเลยที่จะต้องเปิดหน้าเว็บที่คุณกำลังค้นหาไว้ในเบราว์เซอร์ คุณสามารถบันทึกโค้ดเพจลงในคอมพิวเตอร์ของคุณโดยใช้คีย์ผสม ctrl+a, ctrl+c, ctrl+v วางลงในอันใดก็ได้ โปรแกรมแก้ไขข้อความ(ควรเป็น Notepad++) และบันทึกด้วยส่วนขยาย html ดังนั้นคุณสามารถศึกษาให้ลึกซึ้งยิ่งขึ้นและค้นหาข้อมูลที่เป็นประโยชน์เพิ่มเติมสำหรับตัวคุณเองได้ตลอดเวลา