אז מה זה HTML?
נכתב על ידי שחר | בתאריך January 1, 2023
אז בקצרה HTML הוא הקוד בו אנחנו משתמשים כדי ליצור את המבנה הבסיס של כל דפי האינטרנט והתוכן בתוכם.
הקוד מפורש על ידי דפדפני אינטרנט כמו כרום(Chrome) או פיירפוקס(Firefox) אשר בהם אנחנו משתמשים כדי לגלוש. כאשר משתמש מבקר באתר, הדפדפן שלו קורא את קוד ה-HTML ומציג את התוכן בדף, טקסטים, תמונות ומדיה אחרת. קוד ה HTML מאפשר למי שכותב אותו ליצור מבנה פשוט של דף שלא רחוק מהמראה של קובץ Word. בסופו של היום הסטנדרט של שפה הוא מאוד פשוט ומגדיר מעט מאוד כללים כמו איך יוצרים כותרות , איך מציגים תמונות או רשימות ומצרפים משאבים אחרים לאותו קובץ. המטרה של המאמר הבא לתת לכם את המידע הבסיסי כדי להבין איךHTML עובד ואיך להשתמש בו 🙂
אז איך זה עובד?
שפת HTML מורכבת מסדרה של אלמנטים (elements). אלמנטים בנויים מסוגים שונים של תגים (tags) אשר מגדרים את סוג האלמנט. לדוגמא תיבת טקסט תמונה או סרטון. ככה אנחנו למעשה מגדירים את מבנה התוכן של דף. אלמנטים והתגים האלו נכתבים בצורת סימון מסויימת וקבועה אשר יחודית לקבצי HTML. נשמע מסובך? נכון ? לא באמת 😁
לדוגמא: אלמנט סטנדרטי של טקסט שאומר שהחתול שלי עצבני 😾
<p>My cat is very grumpy</p>
תגית פתיחה היא מה שמגדיר לדפדפן איזה סוג אלמנט אנחנו רוצים להציג. חשוב לדעת שהשם של התגיות הוא קבוע! בHTML5 יש בערך כ110 סוגים שונים של תגיות שאפשר להשתמש בהן. לכן חשוב לדייק בשם התגית אותה אנחנו רוצים להציג. למרות שתגיות חייבת להיות מאוייתות באופן ספציפי זה לא משנה אם אנחנו נכתוב אותם באותיות גדולות או קטנות. כמו הדוגמא שכתבה למעלה כל תגית צריכה להתחיל עם סימן “קטן מ >“ ולהסתיים עם סימן גדול מ <“ בסוף התגית. ובניהם יהיה כתוב את השם התגית. הסימנים האילו קיימים כדי שהדפדפן יזהה את התגית בתור אלמנט.
תגית סגירה לא תמיד תהיה קיימת בכל אלמנט. לדוגמא אלמנט של תמונה <IMG> לא צריך תגית סגירה משום שהוא לא מכיל שום תוכן בתוכו חוץ מהתמונה. אילו יהיה סוגי האלמנטים שלא יהיה להם תגית סגירה. תגית סגירה היא גם פשוטה כמו תגית פתיחה רק לפני שאנחנו כותבים את שם האלמנט נצטרך להוסיף לוכסן “/” לפני בהתחלה וככה תראה תגית סגירה של של כותרת לדוגמא <title/> וזה כל מה שיש לדעת על תגית סגירה!😊
תוכן: החלק החשוב באמת בשלב הזה אתם בטח שואלים את עצמכם “אבל בשביל מה התגיות האילו בכלל? או למה אני צריך תגית פתיחה ותגית סגירה?” והתשובה היא כדי להציג את התוכן שבין התגיות האלו בתור האלמנט שאתם בוחרים להציג. התוכן או הטקסט שבפנים יכול להיות מוצג בהרבה דרכים. הנה כמה אלמנטים לדוגמא.
חושב לציין שHTML היא לא באמת שפת תכנות.
עובדה חשובה מאוד לגבי HTML היא שזו לא שפת תכנות. היא סטנדרט סימון או שפת סימון אך היא בעצמה לא בעלת יכולות ליצור את עמודי האינטרנט שאנחנו מכירים. אם תכתבו קובץ HTML לבד ואז תפתחו אותו בדפדפן מה שאתם תראו זה דף לבן עם טקסט שחור כמה כותרת ואולי תמונות. בשביל שדף יראה מעוצב עם צבעים שונים. רקעים עמודת ניווט ועד נצטרך להוסיף לקבוץ הHTML שלנו קוד CSS עוד שפת סימון אשר אחראית על נראות הדף או היישומי אינטרנט.
במקרה ונרצה שבדף שלנו יהיו אלמנטים אינטראקטיביים עם לוגיקה כמו משחק, צ’אט אן מחשבון כלשהו נצטרך להוסיף לדף קוד JavaScript שזו שפה העיקרית אשר אחראית ללוגיקה והתנהגות בדפי האינטרנט של היום.
שלושת השפות האילו JavaScript ו-CSS, HTML משמשים כבסיס לדפי האינטרנט שאנחנו מכירים היום. לכן אם אתם רוצים ללמוד איך לבנות אתר. HTML הוא בסיס אחרי זה CSS זה הנראות ובסוף JavaScript כדי והוסיף קצת עניין 😉
עובדה מעניינת וקצת היסטוריה
HTML פותח לראשונה על ידי הפיזיקאי טים ברנרס-לי ב-1989 בזמן שעבד ב-CERN, הארגון האירופי למחקר גרעיני. הוא יצר HTML כדרך לחלוק מחקר ומידע מדעיים עם עמיתיו. האתר הראשון שנוצר אי פעם התארח במחשב של ברנרס-לי והוקדש לספק מידע על פרויקט World Wide Web. HTML עבר מספר עדכונים גדולים מאז הקמתו. הגרסה העדכנית ביותר, HTML5, שוחררה בשנת 2014 וכוללת תכונות חדשות כמו הפעלת וידאו ויכולת לאחסן נתונים מקומית בדפדפן של המשתמש.