המדריך הבסיסי ל-HTML – חלק ג' – קצת צבע לחיים עם CSS

הזמינו אותי לכוס קפה
buy me coffee

אחרי שהקמנו את דף ה-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>
HTML Style Exeple
HTML Style Exeple

שימו לב כי זה הוא CLASS ולכן ניתן להשתמש בו במקרים מרובים – למשל בפסקאות אחרות.
חשוב לזכור שניתן להשתמש במספר קלאסים בתוך תגית אחת, למשל:

<div class="centerText blueBackground wrapper">

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

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

רוצים לשתף את המדריך?

אהבתכם את המדריך? פתר לכם תקלה?

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

כתיבת תגובה

אהבתכם את המדריך? פתר לכם תקלה? הזמינו את כותב המדריך לכוס קפה

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