הקדמה
אתם מעוניינים ללמוד ולהתחיל להבין איך נבנים אתרים? או שאתם כבר מפתחים אתרים באמצעות אלמנטור אבל רוצים להשתדרג קצת יותר ולדעת איך בנויה כותרת או כפתור ואתם רוצים לבנות בעצמכם לבד? המדריך הזה הוא בשבילכם, כתבתי אותו בצורה פשוטה ועניינית בשביל שאפילו אנשים שאין להם בכלל רקע יוכלו להתחיל להבין איך יוצרים עמוד אינטרנט בצורה פשוטה ביותר.
המדריך בנוי בשלבים שבכל שלב נסביר על נושא אחר שמקדם לכתיבת עמוד שלם מתגיות בסיס, תגיות meta ועד תגיות תוכן.. אז באהבה גדולה ממני אליכם.. ואל תשכחו להנות😉
מבוא
שפת Html היא שפת תגיות HyperText Markup Language ובתרגום "שפת סימני עריכה לתמליל על". הכוונה שכל התחביר של השפה הזו מבוסס על תגיות ובשביל ליצור עמוד אינטרנט אני צריך לכתוב תגיות שכל אחת יש לה תפקיד לייצג אלמנט או נתון אחר בעמוד.
בשונה משפות אחרות, Html היא לא שפה פונקציונלית. לעומת זאת היא יוצרת מבנה. כלומר, היא זו שתיצור את מבנה הכפתור ואפילו להוסיף בו קישור. אבל אם נרצה שהכפתור יעבוד בהתנייה מסויימת, אנחנו נצטרך להשתמש בשפה אחרת או במקרה של פיתוח עמוד web נשתמש לדוגמא ב Java Script.
לחידוד הדברים, אם נרצה ליצור עמוד אינטרנט אזי נשתמש ב html בשביל ליצור את המבנה של העמוד. בcss בשביל לעצב את המבנה. ובJava Script בשביל ליצור פונקציונליות.
התחלה
בשביל להתחיל לעבוד, אתם צריכים ״כותב קוד״. יש המון אופציות אבל אמליץ לכם על מה שאני עובד עליו.. אין לי דעה מה טוב יותר ומה פחות (אני לא חושב שיש בזה באמת דעה ומה שחשוב באמת זו הנוחות שלכם) בכל אופן ההמלצה שלי כרגע היא על Visual Studio Code. פשוט תלחצו כאן ותורידו את התכנה למחשב.
לאחר מכן, תיכנסו לעמוד ההרחבות ככה האייקון שלו נראה: 
. ותחפשו את התוסף Live Preview. תורידו אותו ולאחר מכן שנתחיל לעבוד תיהיה לכם צפייה בלייב על מה אנחנו עושים בפועל.. בעמוד הזה תוכלו לקבל הדרכה איך להוריד ואיך להפעיל את התוסף.
פתיחת מסמך HTML
בשביל לפתוח מסמך חדש, תלחצו ראשית על …New File ותשמרו אותו על שם file.html (כמובן השם file הוא רק לדוגמא, תוכלו לרשום איך שתרצו) ושימו דגש על הסיומת html. היות וזה סוג הקובץ שאנחנו פותחים ולא קובץ בשפת תכנות אחרת.
לאחר מכן בתוך המסמך, תוסיפו סימן קריאה ! ותלחצו enter. מה שיקרה, התוכנה בעצם תייצר לנו תבנית ראשונית של HTML. וכך נוכל להתחיל לעבוד (בנוסף התבנית הזו חשובה לצורך קריאה טובה יותר של גוגל את המסמך שלנו | חוקי גוגל).
זוהי התבנית הראשונה למסמך HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>פתיחה וסגירה של תגיות
תגיות html מונחות להיות בצורה של פתיחה וסגירה וכל מה שבניהם הוא מוגדר לאותה תגית לדוגמא: אם אני רוצה לכתוב כותרת אז אפתח את השורה בתגית <h1> ואסגור אותה באותה תגית אבל בתוספת לוכסן <h1/>
<h1>זוהי הכותרת הראשית שלי</h1>ישנן תגיות, שלא צריכות סגירה ונקראות תגיות יחידות שאינן צריכות סגירה אלא רק לכתוב אותה והתגית פועלת לדוגמא תגית <br> שמגדירה לטקסט לקפוץ לשורה הבאה וישנן עוד כאלה שבהמשך נלמד אותם.. אבל רוב התגיות בhtml הם תגיות שחייבות סגירה ומגדירות את התוכן בשין הפתיחה לסגירה.
תגיות בסיס
בתבנית הראשונית שVisual Studio Code יצרה לנו, ישנן תגיות שנקראות תגיות בסיס ולהלן הסברם:
תגית DOCTYPE
<!DOCTYPE html>זוהי תגית שלא קשורה לשפת התכנות HTML אלא היא תגית שאומרת לדפדפן שלנו באיזה שפה המסמך נכתב. לדוגמא כאן מוגדר html שזה אומר לדפדפן שהשפה היא html5.
הסיבה שאנחנו צריכים אותה היא בשביל שהדפדפן יוכל לרנדר את המסמך בהרבה יותר יעילות ויציג אותו צורה טובה יותר.
תגית HTML
<!DOCTYPE html>
<html>
</html>זוהי תגית שמגדירה את הפתיחה של המסמך והסגירה שלו. כלומר שכל מה שבפנים לאותה תגית הוא בעצם שפת התכנות html, לצורך העניין אם נכתוב מעל התגית <html> או מתחת לתגית הסגירה שלו <html/>, זה לא יהיה שייך בכלל לקוד שאותו אני רוצה לכתוב ובעצם לא יכלל בתוך העמוד שלנו או לחילופין יצור לנו שגיאה.
לכן בכל מסמך html אני אתחיל אותו בתגית <html> ויסגור אותו בתגית סגירה <html/>.
תגית HEAD
<!DOCTYPE html>
<html>
<head>
</head>
</html>העמוד באתר אינטרנט מוגדר בשתי חלקים תגית <head> ותגית <body>. תגית <head> כשמה כן היא, תגית הראש שבתוכה אנחנו מגדירים את כל ההגדרות ההתחלתיות של העמוד שלנו. (על תגית <bode> נדבר בהמשך) תגית ה <head> לא תוצג לנו בעמוד באופן ויזואלי אלא רק מוגדרת בהגדרות העמוד.
תגית META
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
</html>בעצם כל תגיות ה meta שהם בעצם תגיות ההגדרות שלנו, אנחנו נכתוב בתוך תגית ה<head> ולא בתוך תגית <bode>. כי שם כמו שכתבנו ההגדרות של העמוד או של האתר החדש שאנחנו בונים.
התגית meta הראשונה שמוגדרת לנו היא: <meta charset="UTF-8">, שזה אומר בגדול לכל הדפדפנים שהאתר שלנו עומד בתקן שתומך בכל השפות, עברית, ערבית וכו׳ גם לסמארטפונים וגם למסכי המחשב.
תגית meta השניה שמוגדרת לנו בתבנית היא: <meta name="viewport" content="width=device-width, initial-scale=1.0">. שחשובה מאוד לצורך התאמה מיטבית באופן רספונסיבי וכזה שמוגדר בכל סוגי המסכים בצורה תקינה. ובמאמר הזה תוכלו לראות הסבר נרחב יותר על התגית meta הזו.
וכאן המקום להגדיר עוד ועוד הגדרות או תגיות meta אחרות ובהמשך ההדרכה אנחנו נוסיף ונדבר עליהם.
תגית TITLE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
</html>תגית title וכמו שהיא מוצגת בקוד: <title>Document</title>. הינה תגית שמגדירה את השם של העמוד ובמקרה שלנו Document. השם הזה יופיע בלשונית בדפדפן והיא חשובה מאוד גם לגוגל בכל נושא קידום האתר במנוע החיפוש.
לתגית זו ישנן תגיות נוספות שמצטרפות אליה שבהמשך נדבר עליהם.
תגית BODY
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>בשונה מתגית <head>, תגית <bode> בעצם מכניסה בתוכה את כל מה שהמשתמש או הגולש באתר שלנו, יראה בפועל. אם זה הכותרות ואם זה הפסקאות, תמונות, כפתורים ועוד. בתוך התגית הזו אני לא יגדיר נתונים לעמוד אלא יבנה את התוכן של העמוד.
מתעדכן…
