קורס [HTML] | שיעור רביעי - תגי עיצוב טקסט

קורס HTML / אוראל – שיעור רביעי: תגי עיצוב טקסט

כמה הבהרות לפני:
* בגרסאות עתידיות של HTML יוסר השימוש בתגיות הנלמדות בפרק זה, ויהיה צורך להשתמש בשפת CSS שאלמד אתכם בהמשך. בכל אופן, השימוש בשפת CSS, מבחינתי, הוא חובה, ויש להמעיט כמה שאפשר בשימוש בתגיות האלה – ואף מומלץ לא להשתמש בהם בכלל, יש CSS (עד שנלמד CSS תשתמשו בהם).
* לא בכל תג שגם נותן עיצוב לא טוב להשתמש; יש תגים סמנטיים שמאוד מומלץ להשתמש בהם. אבל... לא ב-XHTML, אלא ב-HTML רגיל, או HTML 5 - מומלץ בהחלט!
אולי נלמד על תגים סמנטיים וכאלה שמחליפים כמה שכתובים פה, אבל באחד השיעורים האחרים או במדריך נפרד.
* הפעם, אני אכתוב שורות קוד ואתם תעתיקו למסמך HTML ותראו איך זה נראה בדפדפן.

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

בתג זה ניתן להשתמש תמיד גם לאחר שנלמד CSS.

<b> הדגשה
התג <b> (Bold מודגש) מדגיש את הטקסט.

<i> הטיה
התג <i> (נטוי - Italic) מטה את הטקסט.

<u> קו תחתון
התג <u> (קו תחתון - Underline) עושה קו מתחת לטקסט.

<sub> טקסט מונמך
התג <sub> (טקסט מונמך - subtext) מנמיך את הטקסט.

<sup> טקסט מוגבה
התג <sup> (טקסט מוגבה - supertext) מגביה את הטקסט.

<big> הגדלת הטקסט
התג <big> (גדול - big) מגדיל את הטקסט.

<small> הקטנת הטקסט
התג <small> (קטן - small) מקטין את הטקסט.

<tt> מכונת כתיבה
התג <tt> (טקסט מכונת כתיבה - Typewriter Text) הופך את הטקסט לטקסט ברוחב אחיד, טקסט של מכונת כתיבה.

<div> תיחום איזור
עוד נלמד בהמשך על אלמנט זה, ואם לא במדריך HTML, נלמד זאת בCSS.
רציתי להראות לכם עכשיו את המאפיין שלו, align. מאפיין זה מקבל אחד מהערכים הבאים: left, right, center. (שמאל, ימין, מרכז)
למשל,

יישר את התמונה שבכתובת http://mysite.myserver/myimage.jpeg למרכז הדף.
את המאפיין align ניתן להכניס גם לתג p. מכיוון שב-p יש טקסט, יש למאפיין זה ערך נוסף: justify (מיישר את הטקסט לשני הצדדים).
(תזכורת: אין להשתמש באלה! חובה להשתמש בשפת CSS לעיצוב!)

עוד תראו בהמשך שאין אפשרות כמעט לא להשתמש ב-div, והוא עצמו חלק מעיצוב ב-CSS. מה שכן, אין להשתמש במאפיין align שלו. הוא עצמו מותר, מומלץ ואפילו חובה!


תרגול
1. מצאו את כל השגיאות (8) בקוד הבא, כמובן שרק לפי מה שלמדנו:

2. כתבו מסמך HTML בעברית, מיושר מימין לשמאל, הכותרת שלו היא "אוראל הנוב" (אל תחששו ), כותרת h1 עם הטקסט "אוראל הוא נוב, אוראל היה נוב, אוראל יהיה נוב לתמיד", פסקה עם הטקסט הבא כשהוא מוטה "אוראל הוא נער מתבגר בן 13 העוסק בחקר המדע העוסק בחפירות. אוראל עובד בחברה אב"י (O.B.Y) חפירות בע"מ ובעצם המנכ"ל שלה. הוא קיבל פרס נובל על פריצת דרך בתחום החפירות הנקראת: 'אב"י חפירות גרסה 2.0'. בזמנו הפנוי אוראל קורא ספרים, משתעמם להנאתו ואיך לא – חופר.", אח"כ סמל של תוכנה כלשהי בגודל 100X100 פיקסלים מיושרת לשמאל (כתבו את שם התוכנה במאפיין alt).
3. כתבו שלד דף HTML והסבירו לגבי כל דבר מה תפקידו (בלי לעיין שוב בשיעור המדבר על כך).

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

זה הכל לפעם הזאת.