דיברנו על ארנבים
עד עכשיו, תיארנו אותם בHTML עם פסקאות ועם רשימות או
אבל יכולנו פשוט לשים תמונה שלהם באתר
אך למעשה יכולנו להראות איך ארנב נראה
למעשה כדי להכניס תמונה באתר אנו משתמשים בתג
שאתם יכולים לנחש מגיע מהמילה image (תמונה)
אם אנו סתם נרשום "image" , לא נראה שום דבר
למה לא ?
ובכן, לא אמרנו לדפדפן איזו תמונה להציג.
יש מיליוני תמונות באינטרנט.
ואנחנו בוודאות לא רוצים לבחור תמונה באופן אקראי.
כי יכול להיות שתיבחר תמונה לא ראויה שלא נרצה אותה.
וזאת בעצם תהיה תמונה שונה ממה שרצינו.
אנו צריכים להגיד לדפדפן את הקישור (URL) אל התמונה
הקישור זה מה שמוצג בראש הדף
של הדפדפן במקום שנקרא "כתובת" (address)
וזה בעצם מה שזה. זוהי כתובת.
זוהי דרך למצוא משאבים מסוימים ברשת האינטרנט.
וזה אומר שניתן להכניס תמונה רק אם
היא בכלל נמצאת באיזו שהיא כתובת באינטרנט
אי אפשר כך סתם להכניס תמונות שנמצאות רק במחשב שלנו.
יש הרבה דרכים למצוא תמונות באינטרנט
אבל אנו עושים זאת פשוט יותר באקדמיה כאן עבורך.
על ידי "בוחר תמונות" (image picker) מתוך אוסף תמונות
כדי שבוחר התמונות יופעל אנו צריכים להוסיף
תכונה (attribute) לתג של התמונה(image)
תכונה זה עוד קצת מידע
על תכונות התמונה וזוהי בעצם
התכונה הראשונה שאנו ראינו עד עכשיו
כדי לאמור לדפדפן את הקישור לתמונה (URL) אנחנו
צריכים להוסיף תכונה של שם(name) ומקור(source)
ואז נוסיף רווח ואחרי כן נכתוב src
כעת, זה מייצג מקור (source) אבל זה מאוד חשוב.
אבל צריך לכתוב זאת src בגלל שהדפדפן
יתעלם מזה אם נטעה בכתיבה
כעת אני צריכה להוסיף סימן שוויון כך שאוכל
להגיד לדפדפן מהי ערך התכונה
ועכשיו אוסיף מירכאות (") והעורך
ישלים באופן אוטומטי את המירכאות בסוף
כלומר תכונות הן תמיד מוקפות במירכאות משני הצדדים - בהתחלה ובסוף
אוקיי, עכשיו באופן רגיל זה המקום שאנו מתחילים להכניס את הURL
אבל כאן, באקדמיית קהאן, זה הזמן שבו
בוחר התמונות (image picker) יופיע מולנו.
כעת נבחר תמונה , אני רוצה תמונה של ארנב
אז נבחר את אזור החיות ונבחר את
הארנב המקסים ביותר ונלחץ על okay
האם אתם רואים איך יש כתובת URL בתוך המירכאות כעת ?
והאם אתם רואים שה URL מתחיל עם http?
וכך אנו יודעים שזה מצביע לאיזושהיא
תמונה שנמצאת איפה שהוא באינטרנט
הי, תיראו, יש ארנב באתר שלי.
אבל מה יקרה אם השרת (server) שמחזיק את התמונה נפל
ואז הדפדפן לא יוכל לטעון ממנו את התמונה ?
איך המשתמשים יוכלו לדעת איך התמונה הנפלאה נראית?
הם לא ייראו כלום ויתהו לגבי שאר
החיים שלהם מה הם פיספסו
זוהי הסיבה שבתג img יש גם תכונה (attribute) נוספת שנקראת alt
בתכונה זו משתמשים כדי להגיד לדפדפנים
מה הטקסט האלטרנטיבי כשתמונה לא יכולה להופיע
כדי להוסיף תכונה נוספת אנו מוסיפים רווח (space)
אחרי המרכאות הסופיות של התכונה הקודמת
ואז נכתוב alt שווה למרכאות
ובתוך המרכאות נכתוב טקסט שייתן
מידע משמעותי על התמונה למשל
"ארנב עם אוזניים שמוטות באסם"
זה יכול גם לעזור לאנשים שצופים בדפי אינטרנט
אבל למעשה לא רואים אותם כמו עיוורים
הם יכולים להשתמש באפליקציה שנקראת "מקריא מסך"
שהיא תקריא את התוכן של המסך בקול רם עבורם
והיא תתאר כל תג עבורם
וכשהיא תפגוש את תג התמונה (img) היא תקריא את הטקסט שכתוב בתכונה alt
כי העיוור לא יכול לראות את התמונות
ולכן אתם צריכים תמיד ,תמיד לשים את תכונת הalt
כך שכל העולם יוכל לחוות את דף האינטרנט שלכם
אוקיי, אז בחזרה לתמונה שאנו כן יכולים לראות
היא קצת גדולה אז
בואו נשנה לה קצת את הגודל
אנו יכולים לעשות זאת עם עוד תכונות (attribute)
עם התכונות רוחב (width) או גובה (height)
בואו נגדיר שהרוחב שווה ל100
וכעת רוחב התמונה שווה ל100 פיקסלים
זה קצת קטן
בואו נכניס את הסמן בפנים
ונגדיל את המספרים כך שהתמונה תגדל
אוקיי, זה נראה עכשיו כבר יותר טוב
ועכשיו בואו נשים גם את הגובה (height)
בואו ונגדיר שהגובה שווה ל ל50
וואו
מעכנו את הארנב, מסכנון
וזוהי הסיבה שבדרך כלל משנים רק את
הגובה או רק את הרוחב אבל לא את שניהם ביחד
בגלל שאתם עלולים להשתמש בגדלים לא נכונים
ותמעכו את הארנבונים שלכם,אז אני אומרת תנו לדפדפן
לבצע את החישוב ולהחליט מהם שאר המימדים
אז אני הולכת למחוק את הגובה
וכעת כשהתחלתם להציג תמונות, תתחילו לחשוב
איך לצרף את כל התגים שלמדתם אל תיבת כלים
רשימות עם תמונות ועם פסקאות ועם 10 החיות המשונות ביותר
רק אל תשימו יותר מדי תמונות באתר שלכם
מכיון שהאדם שמסתכל על האתר שלכם
יצטרך להמתין עד שכל התמונות ייטענו
בכל זאת אפשר לעשות להרבה כיף.