מדריך HTML מספר 12 - מתוה דף אינטרנט ( layouts and div tags)

Steps

1. 1

   Step 1

   הlayout הראשון שנדבר עליו הוא layout טבלאות סטנדרטי ובסיסי בו יש לדף האינטרנט תפריט מצד שמאל, הדר (החלק העליון header),פוטר (החלק התחתון - footer), וגוף (החלק שמכיל את התוכן - body). הנה דוגמא לlayout כזה:
2. 2

   Step 2

   
   Header or banner Navigation bar
   First link
   Second link
   Third link Body and content Site footer
3. 3

   Step 3

   
   בסופו של דבר זה יראה כך. שימו לב שבדוגמא השתמשתי במאפיין הstyle בתגית הtd. מאפיין זה מאפשר לי לשים את כל תכונות העיצוב תחת מאפיין אחד כאשר כל תכונה מקבלת את ערך שלה לאחר הנקודותיים, לדוגמא: width:600px והם מופרדים אחד מהשני בעזרת נקודה פסיק ; . הערה: אמנם השתמשתי בתגית הh1 בהדגמה זו אך כאשר תכתבו את האתר שלכם זה אינו מומלץ להכניס את התגית הזאת על טקסט שאינו הכותרת הראשית שלכם.
4. 4

   Step 4

   טבלאות זה נחמד, אבל הדרך הנכונה לעשות layout היא בעזרת תגית הdiv. תגית זו מאפשרת לחלק אלמנטים באתר לקבוצות (divide) - זה מאפשר לעשות הפרדה של חלקים באתר, לדוגמא, להפריד תפריט מתוכן:
5. 5

   Step 5

   
   HOME | CONTACT US | FUN LINK

   Content is king!

   Your content should be placed here, divided from the menu.

6. 6

   Step 6

   
   שימו לב ששמנו את התפריט עם כל הקישורים שלו שמנו בdiv אחד ואת התוכן שמנו בdiv נוסף. כל div קיבל id משלו בכדי שנוכל להתייחס אליו אח"כ. הרבה הרבה יותר קל לעבוד עם div מאפשר עם טבלאות, ניתן להוסיף לכל div אלמנטים חדשים ללא מאמץ.
7. 7

   Step 7

   את אותו הlayout שעשינו בעזרת טבלאות ניתן לעשות גם בעזרת תגיות הdiv:
8. 8

   Step 8

   
   Header or banner

   Navigation bar
   First link
   Second link
   Third link

   Main body

   Site footer
9. 9

   Step 9

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