תזכורת על מה דיברנו שיעור שעבר? בנינו אתר אינטרנט עם כותרות בעיית הרשת טופלה. נשמור את האתר ברשת. ניצור תיקייה עם השם שלנו ב K >> שנתון י >> מדעי מחשב
קביעת הדף הראשון שיוצג באתר בתוך סייר הקבצים נלחץ קליק ימני על הדף html שיצרנו >> set as start page אתר ללימוד html http://www.w3schools.com/
צפייה בקוד html של אתר מסויים קליק ימני על נקודה כלשהי ע"ג הדף >> view source
המאפיין style (עיצוב) אחד המאפיינים שעוזר לנו להפריד בין עיצוב הדף, לתוכן שלו. את המאפיין style יש לשייך לאיזור המבוקש בדף. למשל לתוך התג body , div או hi. ניתן להוסיף כמה תכונות, מופרדות בנקודה פסיק (;). לכל תכונה ניתן ערך. <body style=“תכונה3;תכונה2;תכונה1”> טקסט מסויים שיוצג בעיצוב הנ'ל </body> צבע גופן color <div style=“color: צבע מתוך רשימה”>
צבע רקע background color <div style=“background-color: צבע מתוך רשימה”> יישור טקסטtext-align טקסט יכול להיות מיושר לימין, לשמאל ולמרכז <div style=“text-align: center”>
מעברי שורות וחלוקה לפסקאות על מנת לעבור לשורה הבאה בדף, נשתמש בתג <br/> שימו לב, אין לו תג פותח ותג סוגר. כדי לפתוח פסקה חדשה, נשתמש ב <p> ונסיים ב </p> נסו זאת בעצמכם! חלקו את הדף לפסקאות והוסיפו צבעי פונט ורקע. נא לשמור בדיסק און קי.
תמונת רקע: המאפיין background-image background-image : url(‘כתובת אינטרנט או שם קובץ’) על מנת לעבוד עם תמונה, קודם כל נשמור את קובץ התמונה בתוך התיקייה בה שמור האתר ונרענן את הפרוייקט בויזואל סטודיו נוסיף עיצוב לתג body ניתן גם להשתמש בתמונה השמורה באתר אינטרנט, תוך שימוש ב http://
מאפיינים נוספים של תמונת רקע background-position: מיקום תמונת הרקע בדף התמונה יכולה להתמקם במרכז, מימין, משמאל, מלמעלה או מלמטה. background-repeat: התאמת מימדי התמונה למימדי דף האינטרנט קביעת תצוגת התמונה בהתאם לגודל הדף. אם התמונה קטנה מדף האינטרנט, יש אפשרות לשכפל אותה (repeat) כך שתמלא את כל המסך או להשאיר חלל ריק בדף (no-repeat).
המאפיין display של style ניתן לקבוע עיצוב מסוים אך בפועל לא להציג את האלמנטים עצמם תרגול: הוסיפו תמונת רקע ממורכזת ולא משוכפלת ואל תציגו את הפסקאות הטקסט הפנימי לא מוצג בדף ברירת המחדל היא display:block כלומר האלמנטים מוצגים.