דוגמה
עדניים
נסה זאת בעצמך - דוגמאות
הוסף תמונות HTML
דוגמה זו ממחישה כיצד להציג תמונות בדף אינטרנט שלכם.
הוסף תמונות ממקומות שונים HTML
דוגמה זו ממחישה כיצד להציג תמונות מתיקיות שונות או משרת אחר בדף אינטרנט שלכם.
(אתם יכולים למצוא עוד דוגמאות בתחתית עמוד זה )
תג תמונה ותכונה src
ב-HTML, תמונות מוגדרות עם תג <img> .
<img> תג ריק, מה שאומר שהוא מכיל תכונות בלבד, אין לו תג הסגירה.
כדי להציג תמונה בדף, אתם צריכים להשתמש בתכונה src. Src מיועד "מקור". ערך של תכונה src הוא URL של תמונה אם אתם רוצים להציג אותה בדף שלכם.
התחביר של הגדרת תמונה:
| <img src="url" /> |
URL מצביע למקור אחסון של התמונה.
תמונה בשם "boat.gif" נמצאת בתיקיה "images" ב- "www.xhtml.co.il"
יש לה URL: http://www.xhtml.co.il/images/boat.gif.
דפדפן שם מתונה היכן תג תמונה נמצא במסמך. אם אתם שמים תג תמונה בין שתי פסקאות, הדפדפן מציג פיסקה ראשונה, אחרי זה תמונה, ואחר כך פיסקה השניה.
תכונה Alt
בתכונה alt משתמשים כדי להגדיר "טקסט חלופי" ("alternate text") לתמונה. ערך של תכונה alt מוגדר על ידי המחבר:
| <img src="boat.gif" alt="סירה גדולה " /> |
תכונה "alt" אומרת לקורא מה הוא / היא מפספס/ת על הדף אם דפדפן לא יכול לטעון תמונות.
הדפדפן יציג את טקסט חלופי במקום התמונה.
זה הרגל טוב לכלול תכונה "alt" לכל תמונה בדף, כדי לשפר את תצוגת והתועלת של המסמך עבור אנשים שיש להם דפדפני טקסט בלבד .
הערות בסיסיות - טיפים שימושים
אם קובץ HTML מכיל עשרה תמונות - אחד-עשרה קבצים נדרשים להיות מוצגים לדף הזה.טענת תמונות לוקחת זמן, לכן העצה הכי טובה שלנו היא: להשתמש בתמונות בזהירות.
יותר דוגמאות
תמונת רקע HTML
דוגמה זו ממחישה כיצד להוסיף תמונת רקע לדף HTML.
יישור תמונות HTML
דוגמה זו ממחישה כיצד ליישר תמונה ביחס לטקסט.
תנו לתמונה לגלוש HTML
דוגמה זו ממחישה כיצד לתת לתמונה לגלוש ימינה או שמאלה של פיסקה.
התאימו תמונות לגדולים שונים HTML
דוגמה זו ממחיש כיצד להתאים תמונות לגדלים שונים.
הצגת טקסט חלופי עבור תמונות HTML
דוגמה זו ממחישה כיצד להציג טקסט חלופי לתמונה.
תכונה "alt" אומרת לקורא מה הוא / היא מפספס/ת על הדף אם דפדפן לא יכול לטעון תמונות.
הדפדפן יציג את טקסט חלופי במקום התמונה.
זה הרגל טוב לכלול תכונה "alt" לכל תמונה בדף, כדי לשפר את תצוגת והתועלת של המסמך עבור אנשים שיש להם דפדפני טקסט בלבד .
תמונה כקישור HTML
דוגמה זו ממחישה כיצד להשתמש בתמונה כמו קישור.
תמונת-מפה, עם איזורים שניתן ללחוץ עליהם
דוגמה זו ממחישה כיצד ליצור תמונת מפה, עם איזורים שניתן ללחוץ עליהם. כל איזור כזה יהיה קישור.
להפוך תמונה לתמונת מפה HTML
דוגמה זו ממחישה כיצד להפוך תמונה לתמונת מפה.אתם יכולים לראותכשה אתם מעבירים עכבר על התמונה, את הקואורדינטות יוצגו בשורת המצב.
תגי תמונות
| תג | תיאור |
|---|---|
| <img> | מגדיר תמונה |
| <map> | מגדיר תמונת מפה |
| <area> | מגדיר איזור שניתן ללחוץ אליו בתוך תמונת מפה |
האם מידע זה היה מועיל?
