היי ילדים! אנחנו מניחים שאם הגעתם אלינו, זה סימן שכבר יצא לכם לשמוע פעם או פעמיים על HTML. יודעים מה, גם אם לא, זה בסדר – הצוות של שחקים סייבר ערך כאן עבורכם מדריך קליל שיסביר לכם איך להתחיל ליצור דברים מדהימים עם מה שאנחנו קוראים לו טכנולוגיית קוד.
כבר יצא לכם להתנסות בעבר? אל תמהרו לדלג. יש מצב שתמצאו כאן כמה דברים מגניבים. מעולם לא כתבתם קוד קודם לכן? אל תדאגו, זה ממש פשוט, ומה שתצטרכו כדי להתחיל זה רק מחשב או טאבלט ודפדפן כמו גוגל כרום.
מה זה בכלל HTML?
HTML הן ראשי תיבות של “HyperText Markup Language”, וזאת בעצם שפה שמספרת לדפדפן איך האתר שלכם ייראה.
במילים אחרות – זאת השפה הבסיסית ביותר שאיתה בונים אתרים. תדעו HTML? יש לכם את היסודות הראשוניים לבניית אתרים.
עם כתיבת קוד ב-HTML אתם יכולים ליצור כותרות, תמונות, פסקאות, קישורים ועוד המון דברים כיפיים שהופכים את מה שאתם רואים בדפדפן, לבסיס של אתר אינטרנט.
איך מתחילים?
כדי להתחיל לכתוב את הקוד שלכם, תצטרכו לפתוח את מה שנקרא “עורך טקסט”. זאת יכולה להיות אפליקציה פשוטה כמו “פנקס רשימות” (Notepad) במחשב או אפילו עורך טקסט כמו Visual Studio Code שאפשר להוריד בחינם.
כשתכתבו את הקוד שלכם בעורך הטקסט, אתם יכולים לשמור את הקובץ בשם כלשהו אבל חשוב לסיים אותו ב- .html. למשל, אפשר לקרוא לקובץ שלכם “האתר_שלי.html”.
“אבל רגע, איך אנחנו נראה את מה שיצרנו?”
אחרי שתכתבו את הקוד ותשמרו אותו, פשוט לחצו על הקובץ פעמיים והוא ייפתח בדפדפן האינטרנט שלכם, שם תוכלו לראות איך האתר שלכם נראה!
אין כיף גדול מזה, זה כמו קסם – מה שכתבתם בקוד הופך לדף אינטרנט.
בואו נכתוב את הקוד הראשון שלנו!
כדי שתתחילו בקלות, הנה קוד לדף HTML פשוט. תעתיקו את הקוד ותשימו אותו בקובץ שלכם:
<!DOCTYPE html>
<html>
<head>
<title>האתר הראשון שלי!</title>
</head>
<body>
<h1>ברוכים הבאים לאתר שלי</h1>
<p>זה הדף הראשון שיצרתי עם HTML. אני כבר מתרגש!</p>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="תמונה מגניבה" data-lazy-src="https://www.example.com/image.jpg"><noscript><img decoding="async" src="https://www.example.com/image.jpg" alt="תמונה מגניבה"></noscript>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/www.shchackim.co.il\/wp-admin\/admin-ajax.php","nonce":"eb3d0480b4","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-html","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>
לפני שנסביר מה הקוד הזה עושה, בואו נסביר את התחביר שרואים כאן
console.log( 'Code is Poetry' );
- <!DOCTYPE html> – זוהי הצהרת המסמך שמופיעה בתחילת כל דף HTML. היא מספרת לדפדפן שהקוד נכתב ב-HTML5, שזה התקן העדכני ביותר של HTML. אין לה תגית סגירה כי זו רק הצהרה.
- <html> … </html> – זוהי התגית הראשית שמקיפה את כל התוכן של הדף. כל הקוד שלכם צריך להיות בין תגיות ה- <html> ו- </html>. היא מציינת לדפדפן שכל מה שבתוכה הוא דף HTML.
- <head> … </head> – תגית ה- <head> מכילה מידע על הדף שאינו מוצג ישירות בדף עצמו, כמו הגדרות ואפשרויות מתקדמות. כאן נמצאת גם תגית הכותרת (<title>).
- <title> … </title> – הכותרת היא מה שתופיע למעלה בכרטיסיית הדפדפן (לא בגוף הדף). במקרה שלנו, זה הטקסט “האתר הראשון שלי!”. הכותרת עוזרת גם למנועי חיפוש להבין על מה הדף מדבר.
- <body> … </body> – כל מה שכתוב בין תגיות ה- <body> זה התוכן שמוצג בפועל על המסך. כאן נמצאים כל הכותרות, הפסקאות, התמונות, ועוד.
- <h1> … </h1> – התגית <h1> היא כותרת גדולה, והיא משמשת לכותרת הראשית של הדף. יש רמות כותרות שונות מ- <h1> עד <h6>, כאשר <h1> היא הכותרת הגדולה והמשמעותית ביותר, ו- <h6> היא הקטנה ביותר.
- <p> … </p> – תגית ה- <p> מייצגת פסקה. כל טקסט שתכתבו בין תגיות ה- <p> ו- </p> יופיע כבלוק של טקסט, כמו פסקה במסמך רגיל.
- <img src=”…” alt=”…”> – התגית <img> משמשת להוספת תמונה לדף. יש לה כמה מאפיינים (attributes):
src: מציין את כתובת התמונה (source). כאן אפשר לכתוב כתובת URL או כתובת מקומית של תמונה במחשב.
alt: הוא טקסט שמופיע אם התמונה לא נטענת, וגם משמש לתיאור תמונה עבור עיוורים שמשתמשים בקוראי מסך.
חשוב לציין שתגית <img> היא תגית בודדת ואין לה תגית סגירה כמו לתגיות אחרות.
מה הקוד הזה עושה?
הקוד מתחיל ב- <html>, שמספר לדפדפן שהקוד הוא HTML.
בתוך ה- <head> אנחנו מוסיפים את הכותרת שתופיע למעלה בדפדפן (מה שמופיע בכרטיסייה).
בתוך ה- <body>, אנחנו מוסיפים כותרת גדולה עם <h1>, פסקה קצרה עם <p>, ותמונה עם <img>.
איפה מוצאים תמונות ואיך מוסיפים אותן?
אם אתם רוצים להוסיף תמונה משלכם, פשוט מצאו קובץ תמונה במחשב שלכם, ואז שנו את הכתובת בקוד (src) לכתובת של התמונה שלכם. למשל
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="התמונה שלי" data-lazy-src="C:/Users/YourName/Downloads/my-image.jpg"><noscript><img decoding="async" src="C:/Users/YourName/Downloads/my-image.jpg" alt="התמונה שלי"></noscript>
יאללה, איך זה נראה בפועל?
קודם כל תראו איך שמרנו את ה-Notepad:
עכשיו שמרנו אותו יחד עם סיומת html וכך הוא נראה לאחר מכן בשולחן העבודה:
שמרנו תמונה בכתובת מסוימת, כתבנו אותה בקוד, וכך האתר נראה כשאנחנו מקליקים עליו:
בהצלחה!
באיזה קורס אנחנו לומדים HTML בשחקים סייבר?
במכללת שחקים תוכלו ללמוד HTML ועוד מספר טכנולוגיות קוד נוספות במסגרת קורסי ההאקרים ואבטחת המידע שלנו.
תלמדו כיצד לבנות אתר אינטרנט שלם, ולאחר מכן כיצד להפיל את אתר האינטרנט באמצעות פריצות קוד וטכניקות לוחמת סייבר.
מעוניינים ורוצים לקבל פרטים נוספים? נשמח לשוחח אתכם, עם ההורים שלכם, ולבחון יחד אתכם את הקורסים השונים.
[ולחובבי המיינקראפט שבינינו, יש לנו קורס מיינקראפט מקיף שבו תוכלו ללמוד כיצד לתכנת את מיינקראפט עם מודינג]
