การใช้ HTML รวมถึงการจัดการเว็บไซต์ของคุณได้ง่ายขึ้น
ไปที่เว็บไซต์ใด ๆ และนำทางจากหน้าหนึ่งไปยังอีกหน้าหนึ่งและคุณจะรู้ได้อย่างรวดเร็วว่าในขณะที่แต่ละหน้าเว็บเหล่านั้นอาจแตกต่างกันในหลาย ๆ ด้าน แต่ก็มีความคล้ายคลึงกันในหลาย ๆ ด้าน เกือบทุกเว็บไซต์รวมถึงองค์ประกอบของการออกแบบที่ทำซ้ำในทุกๆหน้าในไซต์ ตัวอย่างขององค์ประกอบไซต์ที่สามารถพบได้ในทุกๆหน้าจะเป็นส่วนหัวของโลโก้ที่ใช้อยู่การนำทางและส่วนท้าย
องค์ประกอบที่ทำซ้ำในไซต์ช่วยให้ผู้ใช้มีประสบการณ์ในการใช้งานที่สม่ำเสมอ ผู้เข้าชมไม่จำเป็นต้องค้นหาการนำทางในทุกๆหน้าเพราะเมื่อพบแล้วผู้ใช้จะทราบว่าจะไปที่ไหนในหน้าอื่น ๆ ของไซต์ที่พวกเขาเข้าชม
วิธีการรวมการออกแบบเว็บให้มีประสิทธิภาพมากขึ้น
ในฐานะที่เป็นบุคคลที่ได้รับมอบหมายให้จัดการเว็บไซต์พื้นที่เหล่านี้ซ้ำ ๆ จึงมีความท้าทาย เกิดอะไรขึ้นถ้าคุณจำเป็นต้องเปลี่ยนแปลงอะไรบางอย่างในพื้นที่นั้น? ตัวอย่างเช่นหากส่วนท้ายของคุณ (ซึ่งอยู่ในทุกๆหน้าของไซต์) รวมถึงคำแถลงลิขสิทธิ์พร้อมกับปีสิ่งที่เกิดขึ้นเมื่อปีนั้นมีการเปลี่ยนแปลงและคุณต้องแก้ไขวันที่? เนื่องจากส่วนดังกล่าวอยู่ในทุกๆหน้าตอนนี้คุณจำเป็นต้องแก้ไขทุกๆหน้าของเว็บไซต์ของคุณเองเพื่อทำการเปลี่ยนแปลงนั้นหรือคุณทำอะไร?
เนื้อหาที่รวมไว้จะช่วยลดความจำเป็นในการแก้ไขหน้าเว็บไซต์ของคุณทุกครั้งสำหรับเนื้อหาที่ทำซ้ำนี้ แต่คุณเพียงแก้ไขไฟล์หนึ่งไฟล์และเว็บไซต์ทั้งหมดของคุณและทุกๆหน้าจะได้รับการอัพเดท!
ลองดูวิธีการบางอย่างที่คุณสามารถเพิ่มฟังก์ชันนี้ลงในไซต์ของคุณและรวมไฟล์ HTML ไว้ในหลาย ๆ
ซ้ำเนื้อหาในระบบการจัดการเนื้อหา
หาก เว็บไซต์ของคุณใช้ CMS อาจมีแนวโน้มว่าจะใช้เทมเพลตหรือธีมบางอย่างเป็นส่วนหนึ่งของซอฟต์แวร์ดังกล่าว แม้ว่าคุณจะสร้างเทมเพลตนี้จากหน้าเว็บไซต์ แต่ก็ยังใช้กรอบงานนี้สำหรับเฟรมต่อไป
ด้วยเหตุนี้เทมเพลต CMS เหล่านี้จะมีพื้นที่ของไซต์ที่มีการทำซ้ำในทุกๆหน้า คุณเพียงเข้าสู่แบ็กเอนด์ของ CMS และแก้ไขเทมเพลตที่จำเป็น หน้าเว็บทั้งหมดของไซต์ที่ใช้เทมเพลตนั้นจะได้รับการอัปเดต
แม้ว่าคุณจะไม่มีระบบการจัดการเนื้อหาสำหรับไซต์ของคุณ แต่คุณยังสามารถใช้ประโยชน์จากไฟล์ที่มีอยู่ได้ ใน HTML มีการช่วยให้สามารถจัดการพื้นที่เทมเพลตเหล่านี้ในไซต์ของคุณได้ง่ายขึ้น
สิ่งที่ HTML มี?
ส่วนที่รวมเป็นส่วนหนึ่งของ HTML ที่ไม่ใช่เอกสาร HTML แบบเต็ม ๆ ด้วยตัวเอง แต่เป็นส่วนหนึ่งของหน้าเว็บอื่นที่สามารถแทรกลงในการเขียนโปรแกรมเว็บเบราเซอร์ได้เต็มรูปแบบ ส่วนใหญ่รวมถึงไฟล์เป็นรายการที่กล่าวมาข้างต้นซ้ำ ๆ ในหลาย ๆ หน้าของเว็บไซต์ ตัวอย่างเช่น:
- การเดินเรือ
- ข้อมูลเกี่ยวกับลิขสิทธิ์
- ส่วนหัว
- ส่วนท้าย
มีประโยชน์ที่จะมีพื้นที่เหล่านี้ซ้ำ ๆ รวมอยู่ในหน้าเว็บ ขออภัยขั้นตอนการแทรกไฟล์ไม่ใช่สิ่งที่สามารถเกิดขึ้นได้กับ HTML เพียงอย่างเดียวดังนั้นคุณจำเป็นต้องมีโปรแกรมหรือสคริปต์บางประเภทที่จะเพิ่มไฟล์ที่คุณใส่ลงในเว็บเพจของคุณ
ใช้ฝั่งเซิร์ฟเวอร์รวม
Server Side Includes หรือที่เรียกว่า SSI ได้รับการพัฒนาขึ้นเป็นครั้งแรกเพื่อให้นักพัฒนาเว็บสามารถ "รวม" เอกสาร HTML ภายในหน้าอื่น ๆ
โดยทั่วไปตัวอย่างที่พบในเอกสารหนึ่งจะรวมอยู่ในอีกเมื่อหน้าเว็บถูกเรียกใช้ที่เซิร์ฟเวอร์และส่งไปยังเว็บเบราเซอร์
SSI ถูกรวมไว้ในเว็บเซิร์ฟเวอร์ส่วนใหญ่ แต่คุณอาจต้องเปิดใช้งานเพื่อให้สามารถใช้งานได้ ถ้าคุณไม่ทราบว่าเซิร์ฟเวอร์ของคุณสนับสนุน SSI หรือไม่ให้ติดต่อ ผู้ให้บริการโฮสติ้ง ของคุณ
นี่คือตัวอย่างของวิธีที่คุณสามารถใช้ SSI เพื่อรวมตัวอย่าง HTML ในหน้าเว็บทั้งหมดของคุณ:
- บันทึก HTML สำหรับองค์ประกอบทั่วไปของไซต์ของคุณเป็นไฟล์แยกต่างหาก ตัวอย่างเช่นส่วนการนำทางของคุณอาจถูกบันทึกเป็น navigation.html หรือ navigation.ssi
- ใช้ รหัส SSI ต่อไปนี้เพื่อรวมโค้ดของเอกสาร HTML ไว้ในแต่ละเพจ ( แทนเส้นทางและชื่อไฟล์ของคุณระหว่างเครื่องหมายคำพูด ) {C}
- เพิ่มรหัสนี้ในทุกๆหน้าที่คุณต้องการรวมไฟล์
การใช้ PHP รวม
PHP เป็นภาษาสคริปต์ระดับเซิร์ฟเวอร์ สามารถทำได้หลายอย่าง แต่การใช้งานทั่วไปอย่างหนึ่งคือการรวมเอกสาร HTML ไว้ในหน้าเว็บของคุณเช่นเดียวกับที่เราเพิ่งได้รับการคุ้มครองโดย SSI
เช่นเดียวกับ SSI PHP เป็นเทคโนโลยีระดับเซิร์ฟเวอร์ หากคุณไม่แน่ใจว่าคุณมีฟังก์ชัน PHP ในเว็บไซต์ของคุณหรือไม่ให้ติดต่อผู้ให้บริการโฮสติ้งของคุณ
นี่เป็นสคริปต์ PHP ง่ายๆที่คุณสามารถใช้เพื่อรวมตัวอย่าง HTML บนเว็บเพจที่เปิดใช้งาน PHP:
- บันทึก HTML สำหรับองค์ประกอบทั่วไปของไซต์ของคุณเช่นการนำทางไปยังไฟล์ที่แยกต่างหาก ตัวอย่างเช่นส่วนการนำทางของคุณอาจถูกบันทึกเป็น navigation.html หรือ navigation.ssi
- ใช้โค้ด PHP ต่อไปนี้เพื่อรวม HTML ไว้ในแต่ละหน้า ( แทนเส้นทางและชื่อไฟล์ของคุณระหว่างเครื่องหมายคำพูด ) navigation.php ");?>
- เพิ่มรหัสเดียวกันนี้ในทุกๆหน้าที่คุณต้องการรวมไฟล์
รวม JavaScript
JavaScript เป็นอีกวิธีหนึ่งในการใส่ HTML ภายในหน้าเว็บในไซต์ของคุณ ข้อดีของการไม่ต้องใช้การเขียนโปรแกรมระดับเซิร์ฟเวอร์ แต่ซับซ้อนมากขึ้นเล็กน้อยและทำงานได้อย่างเห็นได้ชัดสำหรับเบราว์เซอร์ที่อนุญาตให้ใช้จาวาสคริปต์ซึ่งส่วนใหญ่จะทำจนกว่าผู้ใช้จะปิดการใช้งาน
ต่อไปนี้เป็นวิธีที่คุณสามารถ ใส่ข้อมูลโค้ด HTML โดยใช้ JavaScript :
- บันทึก HTML สำหรับองค์ประกอบทั่วไปของไซต์ของคุณลงในไฟล์ JavaScript HTML ที่เขียนในไฟล์นี้ต้องพิมพ์ลงในหน้าจอด้วยฟังก์ชัน document.write
- อัปโหลดไฟล์ดังกล่าวลงในเว็บไซต์ของคุณ
- ใช้