האם אי פעם חשבתם איך אתרי האינטרנט שאתם אוהבים כל כך נוצרים? כל פעם שאתם נכנסים לאתר האהוב עליכם, מסתכלים בסרטונים ביוטיוב, קוראים חדשות, או אפילו משחקים במשחקי רשת, הכל נעשה בעזרת קוד ו-HTML הוא חלק בלתי נפרד ממנו.
כששואלים אותנו, אנחנו נוהגים להסביר שקוד הוא מן שפה מיוחדת שמחשבים מבינים. זאת הדרך שלנו לבקש מהם לעשות משהו, והם אם הכל כתוב נכון ומובן, מבצעים.
בדיוק כמו שאנחנו מדברים עברית או אנגלית, המחשבים “מדברים” בשפות שונות של קוד, ובמדריך שכאן נדבר על אחת השפות הכי חשובות ובסיסיות בעולם האינטרנט – שפת HTML!
זו השפה הראשונה שלומדים כשרוצים להבין איך יוצרים אתרי אינטרנט, והיא בעצם.. אם חושבים על זה.. הבסיס לכל מה שאתם רואים באינטרנט. ממש ככה.
מהי HTML?
HTML (קיצור של HyperText Markup Language) היא השפה הבסיסית שבה משתמשים כדי ליצור דפי אינטרנט.
כל אתר שאתם גולשים אליו נבנה עם HTML.
בגדול, השפה הזאת אומרת לדפדפן שלכם (למשל כרום) איך להציג את התוכן של האתר – דוגמת טקסט, תמונות וקישורים.
יש ל-HTML מאפיין מאוד מאוד מובהק, והוא שמדובר בשפה שבנויה מתגיות (tags). כל תגית היא כמו הוראה קטנה למחשב שמסבירה לו איך להציג חלק מסוים של הדף. הנה כמה דוגמאות לתגיות חשובות:
תגית | מה המשמעות של התגית הזאת? |
<html> | זוהי התגית הראשונה שמספרת לדפדפן שמה שיש בתוכה זה קוד HTML. |
<head> | בתוך התגית הזאת יש מידע חשוב על הדף, כמו הכותרת שלו. |
<title> | כאן נכתוב את הכותרת של הדף שתופיע בראש הדפדפן. |
<body> | כל מה שנמצא בתוך התגית הזאת זה מה שנראה על המסך של האתר. |
<h1> | כותרת גדולה שמופיעה בראש הדף (ממש כמו הכותרת של המאמר הזה). |
<p> | פסקה של טקסט (ממש כמו כל אחת ואחת מן הפסקאות שבמאמר). |
וכמובן שאנחנו לא יכולים בלי דוגמה:
<!DOCTYPE html>
<html>
<head>
<title>האתר הראשון שלי</title>
</head>
<body>
<h1>ברוכים הבאים לאתר הראשון שלי!</h1>
<p>זהו פסקה ראשונה שלי. HTML זה ממש כיף!</p>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/www.shchackim.co.il\/wp-admin\/admin-ajax.php","nonce":"4fded93cd2","url":"https:\/\/www.shchackim.co.il\/%d7%91%d7%9c%d7%95%d7%92\/\u05de\u05d4-\u05d6\u05d4-\u05e9\u05e4\u05ea-html-\u05de\u05d3\u05e8\u05d9\u05da-\u05dc\u05d9\u05dc\u05d3\u05d9\u05dd","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>
אז מה קורה כאן בעצם?
- <!DOCTYPE html>: מספר לדפדפן שאנחנו משתמשים בגרסה הכי חדשה של HTML.
- <html> ו-</html>: התחלה וסוף של דף ה-HTML שלנו. כלומר כל פעם שיש לנו / בתוך התגית, הוא מסמל סוף של משהו.
למשל: <html> הנה אנחנו מספרים משהו וסוגרים אותו </html> - <head> ו-</head>: התחלה וסוף של החלק שבו יש מידע על הדף.
- <title> ו-</title>: כותרת הדף, שתופיע בלשונית של הדפדפן.
- <body> ו-</body>: התחלה וסוף של החלק המרכזי של הדף, שבו נמצא התוכן שרואים.
- <h1> ו-<h1>: כותרת גדולה.
- <p> ו-<p>: פסקה של טקסט.
וזו השפה הבסיסית והחשובה מכול
כיף להיות יצירתיים, ואתם יכולים ליצור אתרי אינטרנט מגניבים משלכם עם שפת HTML.
אולם חשוב לציין שהיא שפה מאוד בסיסית ולצדה חשוב לדעת שפות נוספות דוגמת CSS ו-JavaScript. נקודה מרכזית בה היא שהיא מפתחת מיומנויות טכניות, ולמעשה מהווה כבסיס לכל מה שקשור לתכנות אתרים.
כמכללה ללימודי קוד לילדים שמלמדת טכנולוגיות קוד מתקדמות, אנו כאן כדי להרגיע ולספר ש-HTML היא שפה שילדים יכולים ללמוד וליהנות ממנה. קל ונוח ליצור איתה אתרי אינטרנט בסיסיים.
אבל איך מתחילים?
הדרך הכי טובה להתחיל ללמוד HTML היא פשוט להתחיל לכתוב קוד! יש המון אתרים ויישומים שמאפשרים לכם לתרגל ולהתנסות. למשל, אתם יכולים לנסות אתרים כמו CodePen או אפילו כתבן פשוט במחשב שלכם.
ואם מתחשק לכם להעמיק בשפה זו באופן הרבה יותר מקצועי ויחד עם טכנולוגיות קוד נוספות, במכללת שחקים סייבר נשמח להזמין אתכם להתרשם מן הקורסים השונים שאנו מציעים לתכנות לילדים.
תכנות באמצעות מיינקראפט המשלב יחד עם לימודי סקראצ’ ו-JavaScript ועד ללימודי האקינג ואבטחת מידע שכוללים בין היתר את שפת ה-HTML כחלק מפרויקט לבניית אתר אינטרנט (ולאחר מכן אנחנו לומדים גם איך לפרוץ אותו בתור האקרים מיומנים).
בכל שאלה והתייעצות, נשמח לעמוד לשירותכם עם יועצי הלימודים של מכללת שחקים.
