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, ולכן התמונה לעיל מוקטנת, ולחיצה עליה מובילה לעמוד אחר. כאשר תנסה תעתיק את הדוגמה הבאה, היא תתנהג כמו 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>
[עריכה] ניווט
| הפרק הקודם: שבירת שורה וקו אופקי |
הוספת תמונות תירגול |
הפרק הבא: הוספת קישורים |
