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