מהי שפת HTML וכיצד היא פועלת?
יסודות שפת HTML
שפת HTML הומצאה ב….רגע זה לא כזה מעניין כל ההיסטוריה הזו שדוחפים לנו בכל מאמר, אנחנו לא ויקיפדיה, בואו נדלג.
Hyper Text Markup Language
או בקיצור, HTML, היא שפת תכנות שכותבים אותה באמצעות תגיות, את השפה הזו קוראים הדפדפנים השונים, לדוגמה כרום או פיירפוקס, ולמעשה התגיות מסבירות לדפדפן מה עליו להציג למשתמש, איזה טקסטים איזה גדלים יש לטקסטים האלו, איזה תמונות יש להציג,טבלאות, קישורים ועוד.
שפת HTML אף מאפשרת להטמיע בעמוד מוסיקה, סרטונים ואף לוגיקות מסובכות באמצעות שימוש בג'אווה סקריפט.
כיצד לקודד ב-HTML - סקירה כללית ותחביר בסיסי
בואו נקפוץ ישר למים ונראה כמה זה קל, בואו נפתח קובץ בכל מקום במחשב שלנו, נקרא לו index כן הסיומת של הקבצים צריכה להיות html.
כדי לערוך את הקובץ נצטרך עורך טקסט, אתם יכולים להוריד עורך טקסט מיוחד לעריכת קבצי HTML או אפילו לערוך את הקובץ עם הכתבן של מערכת ההפעלה שלכם, אנחנו ממליצים לעבוד עם עורך התוכן המקצועי והחינמי vscode, תמצאו להורדה בחינם כאן.
נעתיק את הקוד הנ"ל ונדביק בתוך המסמך.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>כותרת העמוד</title>
</head>
<body>
<div>זהו עמוד לדוגמא</div>
</body>
</html>
איך מריצים את הקובץ? פשוט דאבל קליק, או גרירה לתוך אחד מהדפדפנים הפתוחים, מיד נוכל לראות כי הדפדפן מציג כעת את האתר שרשמנו.
מבנה התגיות
ישר ולעניין, תגיות הם בעצם הוראות עבור הדפדפן ליצור אלמנט ולהציג אותו, כמובן, שאת התגיות המשתמש קצה לא רואה, משמע התוכן שבתוך התגיות בלבד, הוא זה שיוצג.
מבנה תגית:
תגית היא תג שמוכר על ידי השפה, אשר תמיד נפתחת, ונסגרת.
מה זה אומר נפתחת ונסגרת? תגית שהשם שלה מוקף ב <> לדוגמא <div></div>
כל תגית צריכה להיפתח ולהיסגר, ישנם תגיות מיוחדות שנקראות self closing והם נסגרות ללא תגית סגירה נוספת למשל תגית תמונה.
תגית תמונה יכולה להיסגר בלי תגית סגירה ספציפית
<img src=photo.jpg/>
</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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>כותרת העמוד</title>
</head>
<body>
<div>השם שלי הוא</div>
<div id="name"></div>
</body>
<script>
const username = prompt('please enter your name')
document.querySelector('#name').innerHTML = username
</script>
</html>
כמו שאתם רואים הוספנו תגית ללא תוכן אבל שיש לה משתנה (אטריבוט) בשם id = name
נתנו לתגית הזו בעצם שם מיוחד, כדי שבהמשך נוכל לתפוס אותה באמצעות השם הזה, ולערוך עליה שינויים.
בסוף תגית הגוף, נוסיף תגית קוד, שבתוכה נוסיף לוגיקה בסיסי בג'אווה סקריפט, שאומרת בכללי, תציג למשתמש איזושהי הודעה ותדרוש ממנו להכניס קלט, לאחר מכן תפוס את האלמנט עם המזהה שיצרנו ותשנה את הטקסט הפנימי לטקסט שהמשתמש הכניס.
ג'אווה סקריפט משתמשת במסמך, על המסמך יש פונקציות רבות אשר נחשפות לשימוש, אחת מהן היא תפיסת אלמנט שיש לו id שתואם לאלמנט שיצרנו. לאחר התפיסה אנחנו יכולים לשנות את הטקסט הפנימי, ולקבוע כי הוא יהיה הטקסט שהמשתמש הכניס.
נראה מגניב אני רוצה ללמוד עוד על HTML!
הגעתם למקום הנכון, דוקטור קוד מעלה בימים אלו קורס פולסטאק מלא, בקורס תוכלו ללמוד תכנות אתרים ואפליקציות שלמות כולל html css javascript react node and infrastructure
לסיכום
שפת html, היא הבסיסית מבין כל השפות.
לפני שאתם רצים הלאה לקראת ג'אווה סקריפט וסביבות עבודה מסובכות יותר היה כדאי שתכירו לעומק את שפת התגיות העתיקה הזו ותשלטו בה היטב.
אבל כדאי מאד להכיר את החוקים השונים הקיימים כדי לדעת לפתח אתרים מהירים, דינאמיים ומוצלחים. יש המון אספקטים שונים בפיתוח אתרים ושימוש נכון בתגיות השונות, כדאי היה לקרוא על קידום אתרים ואיך נכון להשתמש בתגיות השונות על מנת לקדם את האתר שלכם בצורה הכי טובה מבחינת גוגל.
רוצים ייעוץ חינם מהדוקטור?
צרו איתי קשר לכל שאלה ואשמח לעזור!
לכל המעוניינים ללמוד תכנות
אני שמח להזמין אתכם להצטרף לקהילת הלומדים שלי, שם תוכלו ליהנות מהנחיה צמודה בלימודי תכנות ופיתוח, חומרי לימוד איכותיים, ועזרה הדדית של חברי הקהילה.
אל תהססו להצטרף ולקחת חלק - יחד נוכל לקדם את כישורי התכנות שלכם ולהגיע להישגים מרשימים! שאלות ובקשות נוספות יתקבלו בברכה.
