ต้องการดูว่าหน้าเว็บถูกสร้างขึ้นอย่างไร ลองดูซอร์สโค้ด
การดูแหล่งที่มา HTML ของหน้าเว็บเป็นหนึ่งในวิธีที่ง่ายที่สุด (และยังมีประสิทธิภาพมากที่สุด) ในการเรียนรู้ HTML โดยเฉพาะอย่างยิ่งสำหรับผู้เชี่ยวชาญด้านเว็บรุ่นใหม่ ๆ ที่เพิ่งเริ่มต้นใช้งานในอุตสาหกรรม หากคุณเห็นบางสิ่งบางอย่างในเว็บไซต์และต้องการทราบวิธีการดำเนินการนี้ให้ดูซอร์สโค้ดสำหรับไซต์นั้น
ถ้าคุณชอบเค้าโครงของเว็บไซต์ดูแหล่งที่มาเพื่อดูว่ารูปแบบนั้นประสบความสำเร็จจะช่วยให้คุณเรียนรู้และปรับปรุงผลงานของคุณเองได้อย่างไร ในช่วงหลายปีที่ผ่านมานักออกแบบเว็บไซต์และนักพัฒนาซอฟต์แวร์ได้เรียนรู้ HTML เป็นจำนวนมากเพียงแค่ ดูแหล่งที่มา ของหน้าเว็บที่พวกเขาเห็น เป็นวิธีที่ยอดเยี่ยมสำหรับผู้เริ่มต้นในการเรียนรู้ HTML และสำหรับมืออาชีพเว็บเก๋าเพื่อดูว่ามีการนำเทคนิคใหม่ ๆ มาใช้กับไซต์อย่างไร
โปรดจำไว้ว่าไฟล์ต้นฉบับอาจมีความซับซ้อนมาก พร้อมกับมาร์กอัป HTML สำหรับหน้าเว็บอาจมีไฟล์ CSS และสคริปต์จำนวนมากที่ใช้ในการสร้างรูปลักษณ์และฟังก์ชันการทำงานของไซต์ดังกล่าวดังนั้นอย่าทำให้ผิดหวังหากไม่สามารถทราบได้ว่าเกิดอะไรขึ้นในทันที การดูแหล่งข้อมูล HTML เป็นเพียงขั้นตอนแรก หลังจากนั้นคุณสามารถใช้เครื่องมือต่างๆเช่นส่วนขยาย Web Developer ของ Chris Pederick เพื่อดู CSS และสคริปต์รวมทั้งตรวจสอบองค์ประกอบเฉพาะของ HTML
หากคุณใช้เบราว์เซอร์ Safari ต่อไปนี้คือวิธีที่คุณสามารถดูซอร์สโค้ดของเพจเพื่อดูว่ามีการสร้างขึ้นอย่างไร
วิธีการดูที่มา HTML ใน Safari
- เปิด Safari
- ไปที่หน้าเว็บที่คุณต้องการตรวจสอบ
- คลิกที่เมนู Develop (พัฒนา ) ในแถบเมนูด้านบน หมายเหตุ: หากไม่เห็นเมนู Develop ให้ไปที่ Preferences ในส่วน Advanced และเลือก Show Develop ในเมนูบาร์
- คลิก แสดงแหล่งที่มาของหน้า ซึ่งจะเปิดหน้าต่างข้อความพร้อมด้วยแหล่งที่มา HTML ของหน้าเว็บที่คุณกำลังดูอยู่
เคล็ดลับ
- ในหน้าเว็บส่วนใหญ่คุณสามารถดูแหล่งที่มาได้ด้วยการคลิกขวาที่หน้าเว็บ (ไม่ได้อยู่ในภาพ) และเลือก Show Page Source การดำเนินการนี้จะปรากฏเฉพาะเมื่อมีการเปิดใช้งานเมนู Develop ใน Preferences
- Safari ยังมีแป้นพิมพ์ลัดสำหรับดูแหล่งข้อมูล HTML - กดปุ่มคำสั่งและคีย์ตัวเลือกค้างไว้และกด U (Cmd-Opt-U)
กำลังดูรหัสต้นฉบับใช่หรือไม่?
ในขณะที่การคัดลอกโค้ดของไซต์เป็นการขายส่งและส่งผ่านไปเป็นของคุณเองในไซต์ไม่สามารถยอมรับได้โดยใช้รหัสนั้นเป็นกระดานกระโดดเพื่อเรียนรู้จากความเป็นจริงว่ามีการก้าวหน้ามากน้อยเพียงใดในอุตสาหกรรมนี้ ในความเป็นจริงคุณจะกดยากที่จะหาเว็บมืออาชีพที่ทำงานในวันนี้ที่ยังไม่ได้เรียนรู้บางสิ่งบางอย่างโดยการดูแหล่งที่มาของเว็บไซต์!
ในตอนท้ายผู้เชี่ยวชาญด้านเว็บจะได้เรียนรู้จากกันและกันและมักจะปรับปรุงผลงานที่พวกเขาเห็นและได้รับแรงบันดาลใจด้วยดังนั้นอย่าลังเลที่จะดูซอร์สโค้ดของไซต์และใช้เป็นเครื่องมือการเรียนรู้