מהי שפת HTML וכיצד היא פועלת?

מבנה התגיות

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

מבנה תגית:

תגית היא תג שמוכר על ידי השפה, אשר תמיד נפתחת, ונסגרת.

<סגירה/> <פתיחה>

כל תגית צריכה להיפתח ולהיסגר, ישנם תגיות מיוחדות שנקראות self closing והם נסגרות ללא תגית סגירה נוספת למשל תגית תמונה.

תגית תמונה יכולה להיסגר בלי תגית סגירה ספציפית

<p> שלום חבר <p/>

מה אנחנו רואים כאן ? אנחנו רואים תגית בשם p המייצגת אלמנט paragraph , נפתחת ונסגרת כשורה, והתוכן שלה הוא המילה "שלום".

אז איזה תגיות הם חובה על מנת ליצור אתר אינטרנט בסיסי ?

• תגית html היא התגית הראשית והיא מסמלת היא תחילתו וסופו של המסמך.
• תגית head היא התגית ה"ראש" והיא תגיד שלא נרשם בתוכה שום דבר אשר יוצג למשתמש אלה רק תגיות אשר מתארות את המסמך, כמו תגית title ואף קישורים לקבצי חוץ.
• תגית body היא התגית היחידה שבתוכה נרשום את התוכן המוצג למשתמש! תגית זו היא החשובה העיקרית שעימה נעבוד ברוב הזמן.

מה זה HTML5 ?

מאיפה הגיע לנו 5 עכשיו ?

שפת HTML הביאה איתה גרסאות שונות, אחת הגרסאות המבוססות והחזקות ביותר היא גרסה מספר 5, הגרסה הזו הביאה איתה חדשנות רבה, עזרה משמעותית לתמוך ביצירה של אתרי אינטרנט רספונסיביים מותאמים לטלפונים ניידים, ועוד.

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

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

מה זה - DOM ? מסמך | אובייקט | מודל

כפי שלמדנו, אנחנו כותבים תגיות, הדפדפנים קוראים אותן ויודעים איך להציג למשתמש את האתר, אבל לפני שהם מציגים את האתר, הדפדפנים יוצרים אובייקט אשר מתאר בצורה של עץ איך האלמנטים שלנו מורכבים.

מה זה בעצם DOM , דום הוא קיצור של Document object Model, תבנית של אובייקט שמייצג מסמך. התבנית בנויה על סמך מתודולוגיה של תכנות מונחה עצמים, וכל אלמנט מייצג עצם בעץ. (ענף).

לאחר יצירת עץ העצמים (שמתארים את האלמנטים) נוצר גם עץ רינדור שמתאר איך כל עצם נראה. באמצעות CSS או inline style.

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

תהליך יצירת הדום הוא דיי בסיסי.

• ישנו מנוע לכל דפדפן, המנוע אחראי על תרגום קובץ ה html ולאחר מכן בניית ה - dom.
• כאשר ה - dom בנוי אנחנו יכולים לגשת ולשנות אותו באמצעות ג'אווה סקריפט.
• מעבר לדום, ישנו גם עץ שנקרא render tree, העץ הזה נבנה ומתעדכן מחדש כל פעם שאנחנו מייצרים שינוי באמצעות ג'אווה סקריפט.

בוא נראה דוגמא לאיך אנחנו יכולים להשתמש בג'אווה סקריפט על מנת לערוך אלמנט בתוך הדום, ניקח את דף ה html שכבר יצרנו בשם index.

כמו שאתם רואים הוספנו תגית ללא תוכן אבל שיש לה משתנה (אטריבוט) בשם id = name

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

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

ג'אווה סקריפט משתמשת במסמך, על המסמך יש פונקציות רבות אשר נחשפות לשימוש, אחת מהן היא תפיסת אלמנט שיש לו id שתואם לאלמנט שיצרנו. לאחר התפיסה אנחנו יכולים לשנות את הטקסט הפנימי, ולקבוע כי הוא יהיה הטקסט שהמשתמש הכניס.

נראה מגניב אני רוצה ללמוד עוד על HTML!

הגעתם למקום הנכון, דוקטור קוד מעלה בימים אלו קורס פולסטאק מלא, בקורס תוכלו ללמוד תכנות אתרים ואפליקציות שלמות כולל html css javascript react node and infrastructure

לסיכום

שפת html, היא הבסיסית מבין כל השפות.

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

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