Get Adobe Flash player
דף הבית כתיבת טקסט עיצוב הפסקה

 

HTML - עיצוב פסקה

 

מהי פסקה?

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

 

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

 

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

 

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

 

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

 

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

 

תג <p>

מטרה: פתיחת פיסקה ומתן הנחייה למיקום טקסט בשורה ויישורו.

 

תג <P> פותח פיסקה חדשה. הביטוי הוויזואלי המיידי הוא ירידת 2 שורות (פתיחת שורה חדשה תוך השארת רווח של שורה נוספת), וביטול תכונות היישור (אם היו) של הפסקה הקודמת. תג <p> הינו תג מכולה ויש לבטלו בסוף הפסקה.

 

אל תג <P> מצטרפת תכונת align. תכונה זו מקנה לתג את תכונות השליטה ביישור הפיסקה.

 

לתכונה align יש מספר ערכים נלווים:

יישור לימין: align ="right"

יישור לשמאל: align ="left"

יישור למרכז: align ="center"

יישור דו צדדי: align ="justify"

דוגמא לשימוש בתג פסקה:

 

<p align= "center">תת-כותרת</p>

תרגול: נא לפתוח את קובץ הדוגמא לתג <p>, בחן אותו, ובנה קובץ HTML דומה. קרא לקובץ p.html.

 

תג <div>

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

 

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

דוגמא למקטע <div>:

<div align= "right" dir= "rtl">
   <p align= "left">
פסקה המיושרת לשמאל</p>
   <p>פסקה מיושרת לימין</p>
   <p align= "center">פסקה המיושרת למרכז</p>
</div>

תג </ br>

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

 

יש פעמים שעיצוב הטקסט דורש את הפעולה ההפוכה – מניעת שבירת שורה, גם אם הטקסט הגיעה לקצה המסך. תג <NOBR> יבטיח זאת. טקסט לאחר תג זה לא ישבור את השורה, ופס גלילה אופקי יווצר באופן אוטומטי בתחתית המסך (מעל שורת המצב). התג מופיע בצמדים ויש לסגרו ע"י </NOBR>. אם מעונינים לשבור שורת טקסט או פסקה בתוך קטע מוגן ע"י <NOBR>, יש להשתמש ב <WBR> בתוך הקטע.

 

הערה: בתג <NOBR> משתמשים באתרים עבריים המשתמשים בקידוד Visual לפתרון בעיית ירידת שורה לא מבוקרת.

 

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

 

תרגול: נא לפתוח את קובץ הדוגמא ל- BR, בחן אותו, ובנה קובץ HTML דומה. קרא לקובץ br.html.

 

תגי כותרת <h1><h2>...

את הכותרת הראשית בדף, תכתוב בתוך תג <h1>. תג זה מתנהג כפסקה, וככזה ניתן להוסיף לו את התכונה align לצורך יישור למרכז, לימין או לשמאל.  

 

תג זה מעניק לגופן גם עיצובים ויזואליים: גודלו נקבע כמקביל ל size="6", והוא מקבל עיבוי (<b>).

 

לכתיבת כותרת משנית, השתמש ב- <h2>. תג זה זהה לגמרי לתג h1 למעט גודלו העומד על size="5".

 

תת כותרת (הכותרת השלישית בחשיבותה) תיכתב בתוך תג <h3> שיקטין את גודל הגופן ויעמידו על 4, וכך הלאה עד תג <h6> שיעמיד את גודל הגופן על 1.

הערה חשובה:

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

ובכל זאת, חשוב מאוד להשתמש בתגי כותרת (את העיצוב ניתן לשנות באמצעות CSS).

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

 

כותרת ראשית

<h1 align="center"> כותרת ראשית</h1>

כותרת משנית

<h2 align="center">כותרת משנית</h2>

תת-כותרת

<h3 align="center">תת-כותרת</h3>

כותרת רביעית

<h4 align="center">כותרת רביעית</h4>
כותרת חמישית
<h5 align="center">כותרת חמישית</h5>
כותרת שישית
<h6 align="center">כותרת שישית</h6>

 

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