מדריך | לימוד html מא' עד ת' - חלק ראשון - הקדמה והסבר על תגיות

מייבין במקצת

במדריך הזה אני יסביר מה זה שפת html ואיך מתחילים לכתוב איתה

לפני שנתחיל כדאי שתורידו את תוכנת notepad++.exe

זה גרסה ניידת

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

הקדמה

שפת HTML היא שפה שמיועדת לבניית אתרים

ביחד עם השפות CSS וJavaScript
שבהמשך נסביר מה התפקיד של כל אחת מהם

אז אנחנו לא נתחיל עם אתר ממש עם דומיין וכו'
אלא עם קובץ על המחשב

למי שרוצה להפוך את הקובץ הזה לאתר עם קישור
יש את המדריך שלי פה

את הקובץ נשמור בסיומת html
קבצים בסיומת html נפתחים על ידי הדפדפן

לבניית אתר צריך להשתמש בשפות css ,html, וJavaScript,
התפקיד של שפת html הוא לדוגמא לקבוע שיהיה כאן טקסט
התפקיד של שפת css הוא לדוגמא לצבוע את הטקסט להוסיף לו זוהר ואפקטים

או בקיצור: לעצב

התפקיד של שפת JavaScript הוא לדוגמא לחשב את הגימטרייה של הטקסט

אני יתמקד במדריכים בשפות html וcss בלבד

איך כותבים קוד בhtml - הסבר על תגיות

תגיות הם בעצם הוראות לדפדפן איך להציג את התוכן שבדף
לדוגמא התגית h1 היא תגית של כותרת ראשית
והיא בעצם אומרת לדפדפן להציג כאן כותרת ראשית

דוגמא לכותרת ראשית:

<h1>כותרת ראשית</h1>

לרוב התגיות יש מבנה קבוע שנראה ככה:

<סוף תגית/> תוכן <תחילת תגית>

יש לנו שתי סוגי תגיות:

1: תגית שבנויה מזוג תגיות - המבנה של רוב התגיות בנוי מזוג של תגיות

תגית פותחת ותגית סוגרת

שביחד הם מרכיבות את התג
התגית הפותחת מורכבת משם התג ממוקם בין סוגריים משולשים לדוגמא:

<h1>

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

</h1>

2: תגית שבנויה מתגית בודדת - חלק קטן מהתגיות בhtml לא מורכבות מזוג תגיות אלא מתגית בודדת
התגיות האלו הם תגיות שלא מכילות תוכן אלא התגית בעצמה היא התוכן
התגיות האלה בנויות משם התגית שנמצא בין סוגריים משולשות
בחלק מהתגיות האלה לפני הסוגר המשולש שסוגר את התגית יופיע לוכסן לדוגמא:

<br/>

תגית שמשמשת לירידת שורה באמצע טקסט

ובחלק מהתגיות האלה התגית תופיע כתגית בודדת לדוגמא:

<img>

שמשמשת לקישור לתמונה להצגה

מבנה בסיסי של דף html

המבנה הבסיסי של דף html הוא:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 </title>כותרת הדף<title>
</head>
<body>
<h1>זה כותרת ראשית</h1>
<p>זה פסקה כאן נכתוב את הטקסט שלנו</p>
</body>
</html>

הסבר:

השורה הראשונה התגית DOCTYPE חייבת לפתוח כל דף html
התפקיד שלה הוא להודיע לדפדפן באיזו גרסת html כתוב הדף שהוא הולך לקרוא
<DOCTYPE html!> זה צורת ההגדרה לhtml5 חשוב לשמור על אותיות גדולות וקטנות כמו בדוגמא

השורה השנייה התגית <html> מורה לדפדפן לפתוח מסמך מסוג html
התגית הזאת היא התגית הראשית במסמך
ובין התגית הפותחת שלו לתגית הסוגרת שלו ימוקמו כל תגי הhtml האחרים

השורה השלישית התגית <head> התגית הזאת משמשת אותנו בכדי להגדיר את אזור ראש הדף

head = ראש

בתוך תגית הhead יהיו רק תגים שמתארים את הדף וקובעים את התצורה שלו
חוץ מהתגית <title> שאר התגיות שימוקמו בתוכה הם לא תגיות של אלמנטים בדף
אלא לרוב הם תגיות שמכילות מידע שאינו מוצג במסך אבל משמשות להגדרת הדף על ידי מנועי החיפוש

התגית <title> משמשת להגדרת כותרת הדף כותרת הדף תוצג בראש הדפדפן בלשונית הכרטיסייה
התגית הזאת תהיה באופן קבוע בתוך תגית הhead

תגיות <meta> הם תגיות מיוחדות הם לא מציגות דבר בדף
אלא משמשים להעברת מידע על הדף לדפדפן של הגולש למנועי חיפוש וכיוצא בזה

נרחיב עליהם במדריך אחר

המאפיין charset מגדיר את אופן קידוד התווים בדף
קידוד התווים שקבענו בתגית הmeta בדוגמא הוא קידוד תווים עבור דף html
UTF-8 הוא בעצם קידוד שמגדיר את הדף שלנו לעבוד עם טקסטים לועזיים וטקסטים בעברית ביחד
אם לא נגדיר את זה הדפדפן יכול להציג לפעמים את האתר שלנו בג'יבריש במקום מה שרצינו

התגית <body> הוא גוף הדף

body = גוף

בתוכו ימוקמו כל התגים האחרים המוצגים בדף שזה בעצם אומר כל התוכן שיש בדף

התגיות <h1> ו<p> הם תגיות שמציגות תוכן נרחיב עליהם במדריך אחר....

עקרון ההזחה

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

לדוגמא:

שימו ️ בכתיבת קוד html כל תו ותו חשוב ביותר החסרה או הוספה של תו אחד
עלולה לשבש את האופן שבו הדפדפן קורא את הדף והוא לא יציג את הדף באופן הנדרש

בכתיבת קוד html צריך לכתוב את שמות התגיות והמאפיינים באותיות קטנות

למעט תגית הDOCTYPE

איך משתמשים בתוכנת הnotepad

דבר ראשון מגדירים בתפריט בלשונית Language את השפה שאנחנו כותבים בה

במקרה שלנו HTML

בוחרים באות H ואז בשפת HTML

דוגמא:

כותבים את הקוד ושומרים בלחיצה על Ctrl + s

בהצלחה!

איש פשוט מאוד

@מייבין-במקצת כתב במדריך | לימוד html מא' עד ת' - חלק ראשון - הקדמה והסבר על תגיות:

לפני שנתחיל כדאי שתורידו את תוכנת notepad++.exe

אני ממליץ על VSC
ובפרט עם רוצים להתקדם קצת מעבר ואז יש את התוספים שלו שעוזרים כמעט בכל נושא
ושם עם אתה עושה ! אז הוא בונה לך דף HTML בסיסי
ושם גם הוא מטפל לבד בהזחות

מייבין במקצת

@איש-פשוט-מאוד אני יותר חיפשתי משהו פשוט ומובן בגרסה ניידת
אבל כל אחד ומה שהוא אוהב

אלישי

@איש-פשוט-מאוד ל-VSC כמובן יש את המעלות שלו וכמובן שזה סביבת עבודה ופיתוח לכל דבר, אבל ב-notpad יש את המעלה שצריכים לכתוב את הכל לבד עם האצבעות ולא לעשות ! ואנטר ואז להשתמש עם AI ובסוף מה שיקרה זה שהמעוניין בכך לא ילמד כלל HTML, כי בתכלס' חייבים ללמוד עם האצבעות ולהקליד את כל התגיות ולא לתת למישהו לסגור לך אותם, ורק אחרי שהשקיעו זמן מה בכתיבה כזאת, מומלץ לעבור ל-VSC.
כמובן שניתן לעבוד עם VSC גם ללא הטריקים ואז המשתמש המתחיל לפחות לא יתקל בבעיות של אי סגירת תגית וכדומה, ולכן לדעתי לאחר שעבדו כמה שעות עם Notepad כדאי לעבור כבר ל-VSC.