אהלן ילדים! קודם כל, אם הגעתם אלינו קודם לכאן, אז כדאי שתדעו שיש לכם גם מדריך קודם שבו הסברנו על HTML. אתם בטח מכירים את האינטרנט ואת כל האתרים המגניבים שאתם אוהבים לבקר בהם, נכון? אבל ידעתם שמה שגורם לאתרים להיראות כל כך יפים וצבעוניים הוא לא רק התמונות? כאן נכנס לתמונה CSS!
CSS (קיצור של Cascading Style Sheets) הוא כמו אמן שעוזר לעצב את האתר. בזמן ש-HTML אחראי על המבנה של האתר (כמו לתת כותרות וטקסטים), ה-CSS אחראי על איך הדברים נראים – הצבעים, הגודל של הטקסטים, ואפילו היכן כל דבר ממוקם בדף. בלי CSS, האתרים היו נראים מאוד פשוטים ומשעממים.
איפה כותבים את הקוד?
אז איך כותבים CSS ואיפה רואים את התוצאות שלו?
יש כמה דרכים לעשות את זה. הכי פשוט להתחיל עם קובץ HTML ולשלב בו קצת CSS. הנה איך עושים את זה:
- פותחים עורך טקסט: אפשר להשתמש בעורכי טקסט פשוטים כמו Notepad במחשב שלכם (או TextEdit במק) או בעורכי קוד כמו VS Code שיותר מיועדים לתכנות.
- יוצרים קובץ HTML: ראשית, צריך לכתוב קובץ HTML בסיסי. הנה דוגמה:
<!DOCTYPE html>
<html lang="he">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>אתר קסם</title>
<style>
/* כאן נכתוב את ה-CSS שלנו */
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
h1 {
color: purple;
text-align: center;
}
p {
font-size: 18px;
color: darkgreen;
}
</style>
</head>
<body>
<h1>ברוכים הבאים לאתר הקסם שלי!</h1>
<p>זה דוגמה לאתר שמשתמש ב-CSS לעיצוב.</p>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/www.shchackim.co.il\/wp-admin\/admin-ajax.php","nonce":"7deb99072b","url":"https:\/\/www.shchackim.co.il\/%d7%91%d7%9c%d7%95%d7%92\/\u05d1\u05d5\u05d0\u05d5-\u05e0\u05db\u05d9\u05e8-\u05e8\u05d2\u05e2-\u05de\u05d4-\u05d6\u05d4-css","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://www.shchackim.co.il/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>
קודם כל, מה אנחנו רואים פה בכללי?
ממש כמו שעשינו במדריך ה-HTML, בואו נעבור רגע על הדברים ונבין את המבנה שלנו כאן.
תחביר:
קודם כל שימו לב שזאת שפה שמבוססת על תגיות.
יש לנו תגית פתיחת שמתחילה כך <text>
ומסתיימת כך: <text/>
השימוש שלנו ב-text הוא מקרי. אין לכם מה להסתמך על המילה text כדוגמה לפקודת קוד.
<!DOCTYPE html>
זוהי השורה הראשונה שמופיעה בכל קובץ HTML.
היא אומרת לדפדפן שאנחנו עובדים עם הגרסה המודרנית של HTML.
<html lang=”he”>
התגית <html> מתחילה את כל הדף שלנו. היא כמו קופסה שמחזיקה את כל התוכן של הדף.
ה-lang=”he” אומר לדפדפן שהשפה של הדף היא עברית.
<head>
החלק הזה מכיל מידע חשוב על הדף שאינו מוצג ישירות למשתמש, כמו שם הדף והגדרות אחרות. נפרט מה יש בו:
<meta charset=”UTF-8″>
קוד זה אומר לדפדפן באיזה תווים להשתמש. UTF-8 הוא הקידוד הנפוץ שמאפשר לנו להשתמש בכל התווים, כולל עברית.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
שורה זו עוזרת לדף להיראות טוב גם על מחשבים וגם על טלפונים ניידים.
<title>אתר קסם</title>
התגית <title> מגדירה את שם הדף שיופיע בחלק העליון של הדפדפן. כאן קראנו לדף “אתר קסם”.
<style>
בתגית הזו נכתוב את ה-CSS שמעצבת את הדף. כאן הגדרנו צבע רקע, צבעים של טקסט, וכיצד הטקסט ייראה.
<body>
כל מה שנמצא בתוך תגית ה-<body> זה מה שיוצג על המסך של הגולש. פה אנחנו שמים את כל התוכן האמיתי של האתר.
<h1>
זו תגית של כותרת. הכותרות הן גדולות ובולטות יותר מטקסט רגיל.
ה-<h1> היא הכותרת הראשית, וכאן כתבנו בה “ברוכים הבאים לאתר הקסם שלי!”.
<p>
זו תגית לפסקה. כל טקסט שאנחנו כותבים בתוך תגית <p> יופיע כפסקה רגילה באתר. כאן כתבנו את הטקסט “זה דוגמה לאתר שמשתמש ב-CSS לעיצוב.”
</body> ו-</html>
רק כדי שנחזק את ההבנה לגבי תגית פתיחה ותגית סגירה. הסימנים האלו סוגרים את התגיות.
כשאתם רואים את הסימן /, זה אומר שהתוכן של התגית נגמר כאן.
בואו נמשיך - איפה קוד ה-CSS נכנס לתמונה?
אז למעשה, יש לנו קובץ HTML עם חלק פנימי של CSS.
כל מה שנמצא בתוך תגית ה-<style> זה ה-CSS שלנו, והנה כמה דברים פשוטים שעשינו שם:
שינינו את צבע הרקע של הדף ל-תכלת בהיר (lightblue).
הכותרת שלנו (ה-<h1>) בצבע סגול (purple) ומרוכזת באמצע הדף.
הטקסט בפסקה (<p>) בצבע ירוק כהה (darkgreen) וגודלו קצת יותר מהרגיל (18px).
איך רואים את התוצאה בפועל?
אחרי שכותבים את הקוד, צריך לשמור את הקובץ עם סיומת .html (למשל: index.html).
לאחר מכן, צריך לפתוח אותו בדפדפן שלכם (כמו Chrome או Firefox), ועכשיו אתם יכולים לראות איך הקוד שלכם הופך לדף אינטרנט אמיתי!
אם תשאלו אותנו, CSS הוא דרך ממש כיפית לעצב אתרים ולעשות אותם צבעוניים ומגניבים! אפשר לשנות צבעים, גדלים, ולמקם דברים בדיוק איפה שרוצים בדף.
באיזה קורס אנחנו לומדים CSS בשחקים סייבר?
במכללת שחקים תוכלו ללמוד CSS ושפות קוד נוספות עם קורסי ההאקרים שלנו.
מטרת הקורס היא להכשיר אתכם כהאקרים ומומחי אבטחת מידע. אבל כמובן שאין חכם כבעל ניסיון – אתם תלמדו גם לבנות אתר אינטרנט לבדכם, והוא יתבסס בין היתר על HTML ו-CSS. אחרי שתבנו את האתר, תלמדו איך להפיל אותו עם טכניקות שלא יביישו האקרים מיומנים ;).
מוזמנים להתייעץ איתנו בכל שאלה.
