9. סימון מבני עם דפי סגנון גולשים

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

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

צורה אחרי פונקציונליות

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

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

בשיא הכנות, כמה פעמים יצא לכם לסמן אלמנט כנוטה italic בשימוש <I> ?
לדעתי, ככל הנראה, יותר משימושכם באלמנט (מודגש) <EM>. מה ההבדל? ובכן, אם תשתמשו בגישה של האותיות הנוטות, אתם עושים, מה שנקרא, סימון ייצוגי (presentational markup)אתם אומרים לדפדפן כיצד אמור האלמנט להופיע. אך מדוע הטקסט הזה הוא באותיות נוטות? צריכה להיות לכך סיבה טובה. האם זה לצורך הדגשה? האם זה לצורך ציטוט? האם זו מילה זרה המשמשת באנגלית? מדוע שלא נפשט את כוונותיכם? בצורה זו, אובייקט מטופש כמו מחשב יכול להבין את המסמכים שלכם, כמו ישויות חכמות (כמו בני-אדם).

HTML אינו מצוייד בקבוצת אלמנטים עשירה כדי להביע את תכולת המסמך. יש רק מספר אלמנטים, כמו :
<EM> , <STRONG> ו <CITE> > שניתן להשתמש בהם בצורה זו. ואולם, HTML 4.0 (הגירסה האחרונה של השפה) מספק מנגנון בכדי לעשות משהו דומה. למרות שאנו "תקועים" עם האלמנטים (קבוצת תגים) שכבר הוגדרו, אנו יכולים לתת לכל אלמנט תכונה קבוצתית . הדבר דומה לסיווג פיסקה מסויימת, כותרת או כל אלמנט אחר השייך לקבוצה, שאתם, כסופרים, יכולים להגדיר.

בואו נבדוק דוגמא קונקרטית ואז נלמד כיצד לעשות אותה:

ספר בישול (A Cookbook)

חישבו על סוגי המידע השונים בספר בישול. אנו יכולים להבחין בקלות בסיפור (תיאורים, הקדמות וכו'), הוראות ורכיבי המתכון ומרכיבים אחרים, מבלי לנסות יותר מדיי.

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

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

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

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

אז מה יותר טוב? בעזרת מעבד המילים אנו ניצור סגנון נהוג ואז נסמן את המסמך עם סגנון זה. בעזרת CSSים אנו עושים משהו דומה.

קבוצות מידע

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

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

תרגיל מס' 1

חישבו על הדפים האלה. אילו קבוצות של מידע אתם יכולים למצוא בהם?

התשובות בתחתית, כרגיל.

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

בכדי לתת לאלמנט תכונת קבוצה, אנו מוסיפים את הקוד הבא לתג של האלמנט:

class="class-name"

לדוגמא, כדי ליצור פיסקה של הוראות קבוצה, ניקח את הפסקה, למשל

<P>First separate the whites of the egg</P>

ונוסיף :

<P class="instruction">First separate the whites of the egg</P>

תרגיל מס' 2

אנו רוצים לתרגל שיוך קבוצה לאלמנטים בעמוד.

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

עכשיו הגיע הזמן לסמן את הדף עם המידע המסווג הזה.

הוסיפו לכל אלמנט את תכונת הקבוצה, כמו שראינו למעלה. שימו לב ששמות הקבוצות יכולים לכלול רק אותיות, מספרים ומקפים ("-"), וחייבים להתחיל עם אות.

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

בינתיים, נחזור ל-CSSים

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

תרגיל מס' 3

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

התשובות בתחתית, כרגיל.

כעת, רגע האמת, האם זה עובד? קחו את הדף שלכם לבדיקה בדפדפן שלך (וודאו ששמרתם קודם כל את הדף ואת ה-CSS).

שלב הבא

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

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

תשובות לתרגיל מס' 1

מבלי לחשוב יותר מדיי:

• דוגמאות של קודים
  
• הערות
  
• הוראות

האם אתם מסוגלים לחשוב על עוד דברים?

תשובות לתרגיל מס' 2

<HTML>
<HEAD>
<TITLE>Choux Stuff</TITLE>
</HEAD>
<BODY>
<H1>Classic Patisserie Recipes</H1>
<H2>Pastry Cream</H2>
<P class="description" >Also known as creme patissiere, this is the traditional filling
for fresh fruit tarts. It is also used to fill choux puffs.</P>
<H3>Ingredients</H3>
<P class="ingredient" >2 cups milk</P>
<P class="ingredient" >1 vanilla bean</P>
<P class="ingredient" >6 egg yolks</P>v <P class="ingredient" >175g castor sugar</P>
<P class="ingredient" >50g cornflour</P>
<P class="method" >Scald milk with vanilla bean. Beat egg yolks with cornflour until
thick. Pour in milk and whisk until quite smooth.</P>
<H1>More Information</H1>
<P>to contact the author, email me on
<A HREF="mailto:john@masterchef.org">john@masterchef.org</A></P>
<P>to download all my recipes in acrobat format,
<A HREF="ftp://ftp.masterchef.org/recipes.pdf">click here</A></P>
<P>for other recipes, see biodynamic recipes from
<A HREF="http://www.biodyn.nu">http://www.biodyn.nu</A></P>
</BODY>
</HTML>

Answer to Exercise 3

description
{
font-style: italic;
/*note how to make something italicized */
font-family: "Minion Web", Times, "Times New Roman", serif
}

ingredient
{
font-family: Verdana, Arial, Helvetica, sans-serif
}

.method
{
font-family: "Minion Web", Times, "Times New Roman", serif
}