כיצד לכלול קובץ HTML אחד לאחר

מאמר זה מסביר כיצד פועל "כולל" ומספק שלבים לשימוש כולל בצד השרת כולל, כולל PHP וכולל JavaScript.

שימוש בצד השרת כולל

Server Side Includes פותח לראשונה כדי לאפשר למפתחי אתרים "לכלול" מסמכי HTML בתוך עמודים אחרים. בעיקרון, קטע שנמצא במסמך אחד כלול במסמך אחר כאשר הדף מופעל בשרת ונשלח לדפדפן האינטרנט.

SSI כלול ברוב שרתי האינטרנט, אך ייתכן שיהיה עליך להפעיל אותו על מנת לגרום לו לעבוד. אם אינך יודע אם השרת שלך תומך ב- SSI, פנה אל ספק אירוח.

הנה דוגמה כיצד ניתן להשתמש ב- SSI כדי לכלול קטע HTML בכל דפי האינטרנט שלך:

1. שמור את ה- HTML עבור האלמנטים הנפוצים באתר שלך כקבצים נפרדים. לדוגמה, ייתכן שמקטע הניווט שלך נשמר כ- navigation.html אוֹ navigation.ssi.

2. השתמש בקוד ה- SSI הבא כדי לכלול את קוד מסמך ה- HTML בכל עמוד.

   
   אוֹ.
   

   ה לִכלוֹל ההנחיה מקבלת שני פרמטרים. וירטואלי מניח ששם הקובץ הוא יחסית לשורש המסמך של האתר, ואילו קוֹבֶץ מקבל נתיב קבצים מוחלט.

instagram viewer

3. הוסף קוד זה בכל עמוד שברצונך לכלול את הקובץ.

שימוש ב- PHP כולל

כמו SSI, PHP הינה טכנולוגיה ברמת השרת. אם אינך בטוח שיש לך פונקציונליות PHP באתר שלך, פנה לספק האירוח שלך.

הנה סקריפט PHP פשוט שבו אתה יכול להשתמש כדי לכלול קטע HTML בכל דף אינטרנט התומך ב- PHP:

1. שמור את ה- HTML עבור האלמנטים הנפוצים באתר שלך, כגון ניווט, כדי להפריד קבצים. לדוגמה, ייתכן שמקטע הניווט שלך נשמר כ- navigation.html אוֹ navigation.ssi.

2. השתמש בקוד ה- PHP הבא כדי לכלול את ה- HTML בכל עמוד (החלפת הנתיב והשם של הקובץ בין המרכאות).

3. הוסף את אותו קוד בכל עמוד שתרצה לכלול את הקובץ.

JavaScript כולל

JavaScript היא דרך נוספת לכלול HTML בתוך דפי האתר שלך. טכניקה זו אינה דורשת תכנות ברמת השרת, אך היא קצת יותר מסובכת - וזה ברור שהוא עובד עבור דפדפן המאפשר Javascript, שרובם עושים זאת אלא אם המשתמש מחליט להשבית אותו זה.

כך תוכל לכלול קטע HTML באמצעות JavaScript:

שמור את ה- HTML עבור האלמנטים הנפוצים באתר שלך בקובץ JavaScript. כל HTML שנכתב בקובץ זה חייב להיות מודפס על המסך עם ה- document.write פוּנקצִיָה.

1. העלה את הקובץ לאתר שלך.

2. תשתמש ב 

3. השתמש באותו קוד בכל עמוד שתרצה לכלול את הקובץ.

מה כולל HTML?

הכללה היא קטע של HTML שאינו מסמך HTML מלא בפני עצמו. במקום זאת, זהו חלק מדף אחר שניתן להכניס לדף אינטרנט מלא באמצעות תכנות. רוב הקבצים כוללים את הפריטים הנ"ל שחוזרים על עצמם בכמה עמודים באתר. לדוגמה:

• ניווט
• מידע זכויות יוצרים
• אזורי כותרת
• אזורי כותרת תחתונה

כיצד 'כולל' הופך את עיצוב האתרים ליעיל יותר

כמעט כל אתרי האינטרנט כוללים אלמנטים של העיצוב החוזרים על עצמם בכל עמוד באתר, כולל אזור הכותרת שבה נמצא הלוגו, תפריט הניווט ואזור הכותרת התחתונה.

אלמנטים חוזרים באתר מאפשרים עקביות בחוויית המשתמש. מבקר אינו צריך לאתר את הניווט בכל עמוד מכיוון שברגע שהוא מצא אותו, הוא יודע היכן הוא יהיה בדפים אחרים באתר בו הוא מבקר.

תוכן כלול מבטל את הצורך לערוך כל עמוד באתר שלך עבור תוכן חוזר זה. במקום זאת, אתה עורך קובץ אחד ואז האתר שלך וכל דף בו מקבלים את העדכון.

תוכן חוזר במערכות ניהול תוכן

אם האתר שלך משתמש ב- CMS, סביר להניח שהוא משתמש בתבניות מסוימות או בערכות נושא שהם חלק מאותה תוכנה. גם אם אתה בונה אישית את התבניות האלה מאפס, האתר עדיין ממנף את המסגרת הזו לדפים. ככאלה, תבניות CMS אלה מכילות את האזורים באתר החוזרים על עצמם בכל עמוד. אתה פשוט נכנס לחלק האחורי של CMS וערוך את התבניות הדרושות. כל דפי האתר המשתמשים בתבנית זו יעודכנו.

גם אם אינך משתמש במערכת ניהול תוכן עבור האתר שלך, אתה עדיין יכול לנצל את הקבצים הכלולים. ב- HTML, כולל עזור להקל על ניהול אזורי התבנית האלה באתר שלך.

שיטות אחרות כוללות

ישנן מספר דרכים אחרות לכלול HTML בדפים שלך. חלקן מסובכות יותר מאחרות, ורבות מהן מיושנות למעשה בסטנדרטים של ימינו.

• CGI כולל: אתה יכול להשתמש פרל או שפת תכנות אחרת כדי ליצור את הדפים שלך ואז לכלול את כל מה שתרצה, בין אם כקבצי "דרוש" או על ידי קריאתם ידנית.
• פלאש כולל: אם אתה בונה את האתר שלך לחלוטין ב- Adobe Flash, תוכל להשתמש בו כדי לכלול אלמנטים של האתר. שיטה זו מיושנת ואתרי פלאש מלאים הם דבר נדיר ברשת בימינו.
• מסגרות כוללות: במקום להשתמש באותם אלמנטים שוב ושוב על פני מספר עמודים, צור אתר ממוסגר שבו המסגרות הן החלקים המשוכפלים של האתר. עם זאת, למעט אלמנט iframe, מסגרות מיושנות ב- HTML5.
• כולל כלי ניהול תוכן: תבניות הן אחת מנקודות המכירה העיקריות של CMS, ובאמת כיצד מטפלים בעבודה זו ברוב האתרים כיום.