אחרי שהקמנו את דף ה-HTML שלנו וסידרנו את העברית, כעת נעבור לשלב המעניין – העיצוב. כיום ישנו תקן קוד שמדרג את איכות הקוד שלכם ולפיו גם תקודמו במנועי חיפוש. התקן דורש שכל האלמנטים הקשורים לעיצוב האתר יהיו בתוך קוד CSS, ראשי תיבות של Cascading Style Sheets.
נכון, ניתן להגדיר אלמנטיים עיצוביים כגון צבע או יישור למרכז של טקסט דרך קוד ה-HTML באופן ישיר,
כאשר במאפיין style ניתן להשתמש על מנת לתת מאפיינים עיצוביים לתגית:
style="color:red" style="background-color:blue" style="font-family:verdana" style="text-align:center" style="direction:rtl" style="font-size:300%"
אך שימוש ב-CSS מקנה כמה יתרונות – למשל קביעת עיצוב אחד קבוע למספר של תגיות, כך שלאחר מכן כאשר אנו נרצה לשנות את גודל הגופן בכל הכותרות באתר לא ניאלץ לעבור שורה-שורה ולחפש את תגיות ה-H, אלא לשנות במקום אחד בלבד.
כעת הדף שלנו נראה פשוט אז בואו נערוך אותו מעט.
CSS, HTML והתגית Style
ישנן שתי אפשרויות שימוש ב-CSS – יצירת קובץ נפרד או הוספת הקוד לתוך דף ה-HTML שלכם.
היתרון ביצירת קובץ נפרד הוא שכאשר תרצו לשנות דבר מה לא תצטרכו לעשות זאת בכל הדפים באתר שלכם, אלא רק בקובץ ה-CSS.
אך אנו נמצאים בתרגול ראשוני ולכן אנו נכתוב את הקוד אל תוך דף index.html שיצרנו ובשלב מאוחר יותר, כאשר נכתוב את הדפים הנוספים של האתר שלנו, נעביר את הקוד לקובץ נפרד.
אני משתמש בשיטה זו על מנת שתוכלו ללמוד את שתי השיטות כמובן.
את קוד ה-CSS שאנו נכתוב נכניס בין תגיות HEADER ממש מתחת לתגית ה-META שלנו.
תחילה אנו נעטוף את הקוד שאנו הולכים לכתוב בתוך תגית STYLE:
<style> </style>
כאמור יש להכניס תגיות אלו מתחת לתגית META ומעל לתגית סוגרת /HEAD.
כאן בעצם הכרזנו בפני הדפדפן שאנו הולכים לכתוב קוד CSS.
כתיבת קוד ב-CSS יותר קרובה לתכנות ומתבצעת בצורה הבאה: אנו מתייחסים לאובייקט שאנו רוצים לשנות, פותחים סוגריים מסולסלים { בסוף כל שורה מוסיפים – ; ולאחר מכן סוגרים את הסוגריים המסלוסלים }.
הנה דוגמא לקוד שישנה את גודל הגופן של כל תגיות ה-H1 בדף שלנו:
h1 {
font-size: 50px;
}
נסו זאת בדף שלכם. הנה הקוד המלא של הדף עם ה-CSS:
<html dir="rtl">
<head>
<title>שמיים כחולים - אומנות, שירה ותמונות יפות</title>
<meta charset="windows-1255">
<style>
h1 {
font-size: 50px;
}
</style>
</head>
<body>
<h1>ברוכים הבאים לשמיים כחולים</h1>
<p>אומנות, שירה ותמונות יפות</p>
</body>
</html>
שמרו את הקובץ ותרעננו את הדף ותראו כיצד הכותרת גדלה.
האלמנט הבא שנלמד עליו הוא body.
מדובר באלמנט בסיס שמשפיע על העיצוב של האתר – גודל הגופן הכללי, צבע הרקע של הדף, צבע הגופנים, מידות וגדלים ועוד.
בואו נוסיף אותו תוך התייחסות לצבע הרקע של האתר.
body {
background-color: blue;
}
לאחר שתשמרו ותרעננו את הדף תגלו שהאתר שלכם הפך להיות בצבע כחול מזעזע.
שימו לב לדבר הבא: הצבע הכחול יכול להיקרא בקוד blue וגם #0000ff – הדפדפנים שלכם מבינים HEX ולכן ניתן להגדיר להם כל אחד מכמה מיליוני צבעים.
נסו להיכנס לאתר הבא: https://htmlcolorcodes.com ולבחור צבע.
לאחר מכן סמנו את קוד ה-HEX שמופיע למעלה כולל הסולמית (#) והעתיקו אותו לקוד במקום blue.
אני בחרתי בצבע #FBEBFF שהוא ורוד\סגול בהיר וזה הקוד והתוצאה:
body {
background-color: #FBEBFF;
}
מרכוז הדף ב-CSS
כעת נלמד למרכז את הטקסט למרכז הדף.
ב-CSS ניתן לשנות תגיות HTML בסיסיות וגם ניתן ליצור תגיות CSS מותאמות אישית.
לצורך מרכוז הטקסט לאמצע הדף אנו ניצור תגית חדשה שלא קיימת ב-HTML והיא תהיה קיימת רק בפרויקט זה.
הוסיפו את הקוד הבא בתוך תגיות ה-style:
.centerText {
text-align: center;
}
כעת עטפו את הכותרת והפסקת טקסט בתגית DIV המכילה קישור לקלאס centerText:
<div class="centerText"> <h1>ברוכים הבאים לשמיים כחולים</h1> <p>אומנות, שירה ותמונות יפות</p> </div>
שימו לב כי זה הוא CLASS ולכן ניתן להשתמש בו במקרים מרובים – למשל בפסקאות אחרות.
חשוב לזכור שניתן להשתמש במספר קלאסים בתוך תגית אחת, למשל:
<div class="centerText blueBackground wrapper">
וזאת בניגוד ל-ID, בו ניתן להשתמש רק פעם אחת בלבד בכל מופע ה-HTML.
בחלק הבא של המדריך נלמד על סימוני טקסט.
לקריאה נוספת על CSS יש ללחוץ כאן
