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

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.

תמונות בHTML

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

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

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

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

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

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

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

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

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

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

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

סיכום

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

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

כתיבת תגובה

האימייל לא יוצג באתר.