ไม่ว่าคุณจะเป็นคนที่ไม่คุ้นเคยกับอุตสาหกรรมเว็บหรือประสบการณ์เก๋าก็ตามการดูแหล่งข้อมูล HTML ของหน้าเว็บที่แตกต่างกันคือสิ่งที่คุณน่าจะทำหลายครั้งตลอดช่วงเวลาในอาชีพของคุณ
สำหรับผู้ที่ยังใหม่กับการออกแบบเว็บการดูซอร์สโค้ดของไซต์เป็นวิธีที่ง่ายที่สุดในการดูว่ามีบางสิ่งที่ทำอย่างไรเพื่อให้คุณสามารถเรียนรู้จากงานชิ้นนี้และเริ่มใช้โค้ดหรือเทคนิคบางอย่างในการทำงานของคุณเอง ในฐานะนักออกแบบเว็บคนอื่น ๆ ที่ทำงานในวันนี้โดยเฉพาะผู้ที่เคยเข้าร่วมงานตั้งแต่วันแรก ๆ ของอุตสาหกรรมและเป็นเดิมพันที่ปลอดภัยที่พวกเขาบอกว่าพวกเขาได้เรียนรู้ HTML เพียงแค่ดูแหล่งที่มาของหน้าเว็บที่พวกเขาเห็นและรู้สึกทึ่ง โดย นอกเหนือจากการอ่านหนังสือการออกแบบเว็บหรือเข้าร่วมการประชุมระดับมืออาชีพการดูซอร์สโค้ดของไซต์เป็นวิธีที่ดีสำหรับผู้เริ่มต้นในการเรียนรู้ HTML
มากกว่า HTML
สิ่งหนึ่งที่ต้องจดจำก็คือไฟล์ต้นฉบับอาจมีความซับซ้อนมาก (เว็บไซต์ที่คุณกำลังดูซับซ้อนมากขึ้นคือรหัสของไซต์มีความซับซ้อนมากขึ้น) นอกเหนือจากโครงสร้าง HTML ที่สร้างขึ้นในหน้าที่คุณกำลังดูแล้วยังมี CSS (cascading styles sheets) ที่กำหนดลักษณะที่ปรากฏของไซต์นั้นด้วย นอกจากนี้เว็บไซต์จำนวนมากในวันนี้จะมีไฟล์สคริปต์รวมอยู่ใน HTML ด้วย
มีแนวโน้มว่าจะมีไฟล์สคริปต์หลายชุดซึ่งในความเป็นจริงแต่ละไฟล์มีการเปิดใช้งานแง่มุมต่างๆของไซต์ ตรงไปตรงมาซอร์สโค้ดของไซต์อาจดูเหมือนล้นหลามโดยเฉพาะอย่างยิ่งหากคุณยังใหม่กับการทำเช่นนี้ อย่าหงุดหงิดหากไม่สามารถรู้ได้ว่าเกิดอะไรขึ้นกับไซต์นั้นทันที การดูแหล่งข้อมูล HTML เป็นเพียงขั้นตอนแรกในกระบวนการนี้ ด้วยประสบการณ์เพียงเล็กน้อยคุณจะเริ่มทำความเข้าใจได้มากขึ้นว่าชิ้นส่วนเหล่านี้พอดีกันเพื่อสร้างเว็บไซต์ที่คุณเห็นในเบราว์เซอร์ของคุณอย่างไร เมื่อคุ้นเคยกับโค้ดคุณจะสามารถเรียนรู้ได้มากขึ้นจากเนื้อหานี้และดูเหมือนว่าจะไม่ทำให้รู้สึกแย่กับคุณ
ดังนั้นคุณจะดูซอร์สโค้ดของเว็บไซต์ได้อย่างไร? ต่อไปนี้เป็นคำแนะนำแบบทีละขั้นตอนโดยใช้เบราว์เซอร์ Google Chrome
คำแนะนำทีละขั้นตอน
-
เปิด เว็บเบราเซอร์ Google Chrome (ถ้าคุณยังไม่ได้ติดตั้ง Google Chrome คุณสามารถดาวน์โหลดได้ฟรี)
-
ไปที่ หน้าเว็บที่คุณต้องการตรวจสอบ.
-
คลิกขวา หน้า และมองไปที่เมนูที่ปรากฏ จากเมนูนั้นคลิก ดูแหล่งที่มาของหน้า.
-
รหัสแหล่งที่มาสำหรับหน้านั้นจะปรากฏเป็นแท็บใหม่ในเบราเซอร์
-
หรือคุณสามารถใช้แป้นพิมพ์ลัดของ CTRL + U บนพีซีเพื่อเปดหนาตางดวยรหัสที่มาของไซต์ ใน Mac ทางลัดนี้คือ Command + Option + U.
เครื่องมือสำหรับนักพัฒนา
นอกเหนือจากความเรียบง่าย ดูแหล่งที่มาของหน้า ที่ Google Chrome เสนอคุณยังสามารถใช้ประโยชน์จากเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ยอดเยี่ยมของพวกเขาเพื่อเจาะลึกลงไปในไซต์ได้อีกด้วย เครื่องมือเหล่านี้จะช่วยให้คุณสามารถดู HTML ได้ไม่เพียง แต่ CSS ที่ใช้เพื่อดูองค์ประกอบในเอกสาร HTML เท่านั้น
ในการใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome ให้ทำดังนี้
-
เปิด Google Chrome.
-
นำทางไปยัง หน้าเว็บที่คุณต้องการตรวจสอบ.
-
คลิก ไอคอนที่มีสามบรรทัด ที่มุมบนขวาของหน้าต่างเบราเซอร์
-
จากเมนูให้วางเมาส์เหนือ เครื่องมือเพิ่มเติม แล้วคลิกตกลง เครื่องมือสำหรับนักพัฒนา ในเมนูที่ปรากฏขึ้น
-
ซึ่งจะเปิดหน้าต่างที่แสดงซอร์สโค้ด HTML ที่ด้านซ้ายของบานหน้าต่างและ CSS ที่เกี่ยวข้องด้านขวา
-
หรือหากคุณคลิกขวา องค์ประกอบในเว็บเพจ และเลือก ตรวจ จากเมนูที่ปรากฏเครื่องมือช่วยสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome จะปรากฏขึ้นและองค์ประกอบที่แน่นอนที่คุณเลือกไว้จะได้รับการเน้นใน HTML ด้วย CSS ที่เกี่ยวข้องซึ่งแสดงอยู่ทางด้านขวา นี่เป็นประโยชน์มากหากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีสร้างชิ้นงานเฉพาะชิ้นหนึ่งชิ้น
กำลังดูรหัสต้นฉบับใช่หรือไม่?
ในช่วงหลายปีที่ผ่านมาเรามีนักออกแบบเว็บรายใหม่หลายคนตั้งคำถามว่าจะยอมรับรหัสแหล่งที่มาของไซต์หรือไม่และใช้สำหรับการศึกษาและในที่สุดสำหรับงานที่พวกเขาทำ ในขณะที่การคัดลอกโค้ดของไซต์เป็นการขายส่งและส่งผ่านไปเป็นของคุณเองในไซต์ไม่สามารถยอมรับได้โดยใช้รหัสนั้นเป็นกระดานกระโดดเพื่อเรียนรู้จากความเป็นจริงว่ามีการก้าวหน้ามากน้อยเพียงใดในอุตสาหกรรมนี้
ตามที่เรากล่าวถึงในตอนต้นของบทความนี้คุณจะพยายามหาเว็บมืออาชีพที่ทำงานในปัจจุบันซึ่งยังไม่ได้เรียนรู้อะไรจากการดูแหล่งที่มาของไซต์! ใช่การดูซอร์สโค้ดของไซต์เป็นไปตามกฎหมาย ใช้รหัสที่เป็นทรัพยากรในการสร้างสิ่งที่คล้ายกันนี้ยังดี รับโค้ดตามที่เป็นและส่งผ่านไปเนื่องจากงานของคุณเป็นจุดเริ่มต้นที่คุณพบปัญหา
ในตอนท้ายผู้เชี่ยวชาญด้านเว็บจะได้เรียนรู้จากกันและกันและมักจะปรับปรุงผลงานที่พวกเขาเห็นและได้รับแรงบันดาลใจด้วยดังนั้นอย่าลังเลที่จะดูซอร์สโค้ดของไซต์และใช้เป็นเครื่องมือการเรียนรู้
