Get Adobe Flash player
דף הבית בסיס השפה הפרדת תוכן מעיצוב

 

HTML - עקרונות (המשך)

 

הפרדת תוכן מעיצוב

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

 

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

 

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

 

התשובה ניתנה באמצעות שפה חדשה שידעה "לדבר" עם ה HTML. שפה זו נקראת "גליונות סגנון מדורגים" (Cascaded Style Sheets) ובקיצור הידוע יותר: CSS.

 

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

 

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

 

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

 

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

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

 

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

 

אתר מודרני איכותי נמדד היום בין השאר גם ברמת הפרדת התוכן מהוראות העיצוב.

אל השיעור הקודם אל השיעור הבא