HTML/הוספת תמונות

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

מאפיינים של תגים

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

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

לאחר שם התג מוסיפים רווח, כותבים את שם המאפיין, מוסיפים סימן שווה '=' ובתוך גרשיים כותבים את ערך המאפיין. בדוגמה הבאה property - הוא שם המאפיין. ו-value הוא ערך המאפיין.

<tagname property = "value">
תוכן
</tagname>

<emptytag property = "value" />

הוספת תמונה

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

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

מכיוון שהתג img הוא תג ריק, חשוב לזכור להוסיף רווח ולוכסן בסוף התג. הדגמה:

<img src="http://upload.wikimedia.org/wikipedia/commons/8/80/Polygonia_c-album_DePanne.jpg" alt="פרפרים" />

פלט:

הערה: ויקי אינה מאפשרת הצגת תמונות באופן פשוט כמו ב-HTML, ולכן התמונה לעיל מוקטנת.

התג img הוא תג מסוג שורה ולכן אינו יכול להיות צאצא ישיר של body, אלא רק של אלמנט מסוג גוש, כמו p. להלן דוגמה של התג img בתוך מבנה מסמך html. תוכל להעתיק את הדוגמה ולבדוק אותה בעצמך.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="he" xml:lang="he" dir="rtl">
  <head>
    <title>פרפרים</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="content-language" content="he" />
  </head>
  <body>
   <p>
     <img src="http://upload.wikimedia.org/wikipedia/commons/8/80/Polygonia_c-album_DePanne.jpg" alt="פרפרים" />
   </p>
  </body>
</html>

הרחבה

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

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

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

גודל התמונה

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="he" xml:lang="he" dir="rtl">
  <head>
    <title>פרפרים</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="content-language" content="he" />
  </head>
  <body>
   <p>
     <img src="http://upload.wikimedia.org/wikipedia/commons/8/80/Polygonia_c-album_DePanne.jpg" width="250px" alt="פרפרים" />
   </p>
  </body>
</html>

ניווט

הפרק הקודם:
שבירת שורה וקו אופקי

הוספת תמונות
תרגילים

הפרק הבא:
הוספת קישורים