תחביר בסיסי ב-HTML

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

HTML מבוא

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

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

ניקח לדוגמה את הטקסט הבא:

See the Pen line of content by guerrilla.co.il (@guerilla) on CodePen.

אם נרצה שהוא יוצג כפסקה בפני עצמה למשל נוכל לעשות זאת על יד שנעטוף אותו בתגית <p></p>, אם לעומת זאת נרצה להציג את אותו הטקסט ככותרת ראשית למאמר נעטוף אותו בתגית <h1></h1> המשמשת להצגת טקסט ככותרת ראשית.

See the Pen p tag and h1 tag by guerrilla.co.il (@guerilla) on CodePen.

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

מבנה האלמנטים בHTML

החלקים העיקריים של האלמנט למעלה הם כדלהלן:

• תג פותח
• תג סוגר
• התוכן
• האלמנט

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

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

 התוכן מכיל את תוכן האלמנט (כמה מפתיע…) במקרה שלנו – טקסט.

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

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

אטריביוט נראה כך:

אטריביוט הוא למעשה זוג המורכב משם וערך בדוגמה שלנו שם האטריביוט הוא class והערך של האטריביוט הוא my-head.

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

אטריביוט תמיד יצמד לחוקיות התחבירית הבאה:

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

קינון אלמנטים (Nesting)

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

See the Pen Nesting elements by guerrilla.co.il (@guerilla) on CodePen.

כאשר מקוננים אלמנטים חשוב לעשות זאת כהלכה ולסגור (באמצעות תג סוגר) את האלמנט המקונן הפנימי (בדוגמה שלנו mark) לפני שסוגרים את האלמנט העוטף (בדוגמה שלנו h1), כלומר זה צריך להראות כך <h1><mark></mark></h1> ולא כך <h1><mark></h1></mark>.

אלמנט ריק

לכמה מהאלמנטים בHTML אין תוכן ולכן הם נקראים אלמנטים ריקים למשל האלמנט <img>

See the Pen Empty elements by guerrilla.co.il (@guerilla) on CodePen.

בדוגמה שלפנינו לאלמנט <img>  ישנם שתי אטריביוטים (src ו alt) אך אין לו תג סוגר – <img/> זאת מכיוון שאין שום תוכן שהוא אמור להשפיע עליו, מטרת האלמנט img היא לא להשפיע על תוכן אלא להטמיע בתוך מסמך הHTML תמונה היכן שמוצב האלמנט.

מבנה הדף בHTML

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

כעת נבחן את דוגמת הקוד הבאה המכילה את המסגרת, את השלד הבסיסי של כל דף HTML.

See the Pen Basic page by guerrilla.co.il (@guerilla) on CodePen.

• <DOCTYPE html!> – בזמנים עברו כאשר שפת הHTML הייתה בחיתוליה הפתיח DOCTYPE שהוא היחיד במסמך שאינו אלמנט HTML נועד לשמש כקישור לסט של חוקים שהדף היה אמור להתחקות אחריהם כדי להחשב מסמך HTML תקני.
  בעבר, טרום HTML5 הפתיח היה יותר ארוך והכיל בתוכו את הקישורים הנ”ל. כיום כל זה אינו רלוונטי ולמעשה כיום תפקיד הפתיח הזה הוא ליידע את הדפדפן שקורא את המסמך שמדובר במסמך HTML5.דוגמה לפתיח doctype מ HTML4 בו ניתן לראות שבעבר הdoctype הכיל קישורים לקביעת תקינות המסמך.
• <html></html> – האלמנט html הוא האלמנט העוטף את כל התוכן של המסמך ונקרא אלמנט השורש – root element.
• <head></head>  – האלמנט head מהווה את ראש המסמך, המוח, ופועל כמסגרת שמכילה בתוכה את כל הדברים שאנחנו מעוניינים לכלול בדף אבל בלי שיוצגו ויזואלית לגולש.
  למשל אלמנטים המגדירים מילות מפתח למנועי חיפוש או את תיאור הדף שיוצג במנועי החיפוש, חוקי Css שיקבעו את העימוד והעיצוב של הדף, הגדרת הקידוד של המסמך (לאיזה תווים יתורגמו האותיות שאנחנו מקלידים – מה שמונע את הצגת הדף כג’יבריש) וכו.
• <body></body> – האלמנט body מתפקד כגוף המסמך והוא יכיל את כל מה שאנחנו מעוניינים להציג ויזואלית לגולש, כמו תוכן טקסט, וידאו, אוידו, תמונות, טפסי יצירת קשר וכל דבר אחר.
• <“meta charset=”utf-8> – האלמנט הזה מכונה אלמנט מטא כיוון שהוא מכיל מידע על, מידע כללי על המסמך למשל במקרה שלנו meta charset קובע באיזה סט תווים יוצג המסמך, אלמנט זה יופיע בכל מסמך HTML שאנחנו כותבים וזה חשוב כדי שהמסמך יופיע באוסף התווים מקבוצת utf-8 ולא יוצג לנו תוכן ג’יבריש.
• <title></title> – האלמנט <title> המופיע בhead (מקונן בתוך הhead) קובע את שם הכותרת שתופיע על הכרטיסייה בדפדפן שמציגה את הדף שלנו, כמו כן הוא קובע את השם שיופיע ברשימת המועדפים במקרה ונשמור את הדף למועדפים.

תמונות בHTML

נחזור אחורה מעט לדוגמה שהבאנו לעיל לגבי האלמנט <img> ונרחיב מעט יותר.

See the Pen Empty elements by guerrilla.co.il (@guerilla) on CodePen.

כפי שאמרנו מקודם האלמנט <img> מטביע תמונה בדף היכן שהוא ממוקם, הוא עושה זאת באמצעות האטריביוט src שמכיל את הקישור או את הנתיב למיקום של התמונה.

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

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

אלמנטים בסיסיים בHTML

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

•  כותרות (headings)  – האלמנט head  מאפשר לקבוע חלקים מסוימים מהטקסט ככותרות, כמו שבספר יש את כותרת הספר, ובכל פרק יש את כותרת הפרק ובכל פרק יש כותרות משנה, כך אמור להראות מסמך HTML לכל דף יש את הכותרת הראשית המיוצגת ע”י התגית <h1> לאחר מכן יש את הכותרת ברמה עליונה המיוצגת ע”י התגית <h2> לאחר מכן התגית <h3> מייצגת כותרת משנה, התגית <h4> מייצגת תת כותרת משנה וכן הלאה עד התגית <h6>.
  בדרך כלל השימוש הנפוץ הוא בשלושת או ארבעת תגיות הכותרת הראשונות.

See the Pen Headings by guerrilla.co.il (@guerilla) on CodePen.

• פסקאות (Paragraphs) – האלמנט <p> מאפשר לאגד קבוצת טקסט כפסקה, כל פסקה אוטומטית תרד לשורה חדשה והאלמנט שיופיע אחריה גם כן יבוא לאחר ירידת שורה.

See the Pen Paragraphs by guerrilla.co.il (@guerilla) on CodePen.

• רשימות (Lists) – הרבה מהתוכן באינטרנט הוא רשימות לHTML יש אלמנטים המיוחדים לכך, תיוג תוכן במסמך כרשימה יכיל לפחות שני אלמנטים כפי שנראה להלן.
  ישנם שני סוגי רשימות נפוצות, רשימה ממוספרת ורשימה לא ממוספרת.
  ברשימה לא ממוספרת נשתמש לרשימה שבה אין חשיבות לסדר כמו רשימת מכולת וברשימה ממוספרת נשתמש לרשימה בה הסדר עקרוני כמו מתכון בישול.
  התגית <ul> (קיצור של Unordered lists) תשמש כתגית רשימה ראשית לרשימה לא ממוספרת. התגית <ol> (קיצור של Ordered lists) תשמש כתגית ראשית לרשימה ממוספרת לאחר מכן בתוך כל תגית רשימה ראשית נקונן את התגית <li> (קיצור של list item) שמשמת לאגד כל פריט ברשימה.

See the Pen Lists by guerrilla.co.il (@guerilla) on CodePen.

• קישורים (Links) – הקישורים הם מה שהופכים את האינטרנט למה שהוא ולכן החשיבות שלהם רבה. בכדי ליצור קישור נשתמש בתגית <a> (קיצור של anchor).
  נבחר טקסט כלשהו לאחר מכן נעטוף אותו בתגית <a>, לתגית a נוסיף את האטריביוט href (קיצור של hypertext reference – הפניה להיפר-טקסט), לאטריביוט href ניתן כערך את כתובת הדף אליה אנו מעוניינים להפנות (כולל הקידומת http או https).

See the Pen Links by guerrilla.co.il (@guerilla) on CodePen.

סיכום

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

See the Pen Conclusion page by guerrilla.co.il (@guerilla) on CodePen.