Return to Video

תמונות בדף הHTML

  • 0:00 - 0:02
    דיברנו על ארנבים
  • 0:02 - 0:06
    עד עכשיו, תיארנו אותם בHTML עם פסקאות ועם רשימות או
  • 0:06 - 0:09
    אבל יכולנו פשוט לשים תמונה שלהם באתר
  • 0:09 - 0:12
    אך למעשה יכולנו להראות איך ארנב נראה
  • 0:12 - 0:16
    למעשה כדי להכניס תמונה באתר אנו משתמשים בתג
  • 0:16 - 0:19
    שאתם יכולים לנחש מגיע מהמילה image (תמונה)
  • 0:19 - 0:23
    אם אנו סתם נרשום "image" , לא נראה שום דבר
  • 0:23 - 0:24
    למה לא ?
  • 0:24 - 0:28
    ובכן, לא אמרנו לדפדפן איזו תמונה להציג.
  • 0:28 - 0:29
    יש מיליוני תמונות באינטרנט.
  • 0:29 - 0:32
    ואנחנו בוודאות לא רוצים לבחור תמונה באופן אקראי.
  • 0:32 - 0:35
    כי יכול להיות שתיבחר תמונה לא ראויה שלא נרצה אותה.
  • 0:35 - 0:38
    וזאת בעצם תהיה תמונה שונה ממה שרצינו.
  • 0:38 - 0:41
    אנו צריכים להגיד לדפדפן את הקישור (URL) אל התמונה
  • 0:41 - 0:43
    הקישור זה מה שמוצג בראש הדף
  • 0:43 - 0:45
    של הדפדפן במקום שנקרא "כתובת" (address)
  • 0:45 - 0:47
    וזה בעצם מה שזה. זוהי כתובת.
  • 0:47 - 0:49
    זוהי דרך למצוא משאבים מסוימים ברשת האינטרנט.
  • 0:50 - 0:52
    וזה אומר שניתן להכניס תמונה רק אם
  • 0:52 - 0:55
    היא בכלל נמצאת באיזו שהיא כתובת באינטרנט
  • 0:55 - 0:58
    אי אפשר כך סתם להכניס תמונות שנמצאות רק במחשב שלנו.
  • 0:58 - 1:01
    יש הרבה דרכים למצוא תמונות באינטרנט
  • 1:01 - 1:03
    אבל אנו עושים זאת פשוט יותר באקדמיה כאן עבורך.
  • 1:03 - 1:06
    על ידי "בוחר תמונות" (image picker) מתוך אוסף תמונות
  • 1:06 - 1:08
    כדי שבוחר התמונות יופעל אנו צריכים להוסיף
  • 1:08 - 1:11
    תכונה (attribute) לתג של התמונה(image)
  • 1:11 - 1:13
    תכונה זה עוד קצת מידע
  • 1:13 - 1:15
    על תכונות התמונה וזוהי בעצם
  • 1:15 - 1:17
    התכונה הראשונה שאנו ראינו עד עכשיו
  • 1:18 - 1:20
    כדי לאמור לדפדפן את הקישור לתמונה (URL) אנחנו
  • 1:20 - 1:23
    צריכים להוסיף תכונה של שם(name) ומקור(source)
  • 1:23 - 1:26
    ואז נוסיף רווח ואחרי כן נכתוב src
  • 1:28 - 1:31
    כעת, זה מייצג מקור (source) אבל זה מאוד חשוב.
  • 1:31 - 1:33
    אבל צריך לכתוב זאת src בגלל שהדפדפן
  • 1:33 - 1:35
    יתעלם מזה אם נטעה בכתיבה
  • 1:36 - 1:39
    כעת אני צריכה להוסיף סימן שוויון כך שאוכל
  • 1:39 - 1:41
    להגיד לדפדפן מהי ערך התכונה
  • 1:41 - 1:45
    ועכשיו אוסיף מירכאות (") והעורך
  • 1:45 - 1:47
    ישלים באופן אוטומטי את המירכאות בסוף
  • 1:47 - 1:51
    כלומר תכונות הן תמיד מוקפות במירכאות משני הצדדים - בהתחלה ובסוף
  • 1:52 - 1:56
    אוקיי, עכשיו באופן רגיל זה המקום שאנו מתחילים להכניס את הURL
  • 1:56 - 1:58
    אבל כאן, באקדמיית קהאן, זה הזמן שבו
  • 1:58 - 2:00
    בוחר התמונות (image picker) יופיע מולנו.
  • 2:00 - 2:04
    כעת נבחר תמונה , אני רוצה תמונה של ארנב
  • 2:04 - 2:07
    אז נבחר את אזור החיות ונבחר את
  • 2:07 - 2:09
    הארנב המקסים ביותר ונלחץ על okay
  • 2:10 - 2:13
    האם אתם רואים איך יש כתובת URL בתוך המירכאות כעת ?
  • 2:13 - 2:16
    והאם אתם רואים שה URL מתחיל עם http?
  • 2:16 - 2:18
    וכך אנו יודעים שזה מצביע לאיזושהיא
  • 2:18 - 2:20
    תמונה שנמצאת איפה שהוא באינטרנט
  • 2:20 - 2:22
    הי, תיראו, יש ארנב באתר שלי.
  • 2:23 - 2:26
    אבל מה יקרה אם השרת (server) שמחזיק את התמונה נפל
  • 2:26 - 2:28
    ואז הדפדפן לא יוכל לטעון ממנו את התמונה ?
  • 2:28 - 2:31
    איך המשתמשים יוכלו לדעת איך התמונה הנפלאה נראית?
  • 2:31 - 2:33
    הם לא ייראו כלום ויתהו לגבי שאר
  • 2:33 - 2:35
    החיים שלהם מה הם פיספסו
  • 2:36 - 2:39
    זוהי הסיבה שבתג img יש גם תכונה (attribute) נוספת שנקראת alt
  • 2:39 - 2:41
    בתכונה זו משתמשים כדי להגיד לדפדפנים
  • 2:41 - 2:44
    מה הטקסט האלטרנטיבי כשתמונה לא יכולה להופיע
  • 2:44 - 2:47
    כדי להוסיף תכונה נוספת אנו מוסיפים רווח (space)
  • 2:47 - 2:50
    אחרי המרכאות הסופיות של התכונה הקודמת
  • 2:50 - 2:54
    ואז נכתוב alt שווה למרכאות
  • 2:54 - 2:57
    ובתוך המרכאות נכתוב טקסט שייתן
  • 2:57 - 2:59
    מידע משמעותי על התמונה למשל
  • 2:59 - 3:04
    "ארנב עם אוזניים שמוטות באסם"
  • 3:05 - 3:07
    זה יכול גם לעזור לאנשים שצופים בדפי אינטרנט
  • 3:07 - 3:10
    אבל למעשה לא רואים אותם כמו עיוורים
  • 3:10 - 3:11
    הם יכולים להשתמש באפליקציה שנקראת "מקריא מסך"
  • 3:11 - 3:14
    שהיא תקריא את התוכן של המסך בקול רם עבורם
  • 3:14 - 3:16
    והיא תתאר כל תג עבורם
  • 3:16 - 3:18
    וכשהיא תפגוש את תג התמונה (img) היא תקריא את הטקסט שכתוב בתכונה alt
  • 3:18 - 3:21
    כי העיוור לא יכול לראות את התמונות
  • 3:21 - 3:24
    ולכן אתם צריכים תמיד ,תמיד לשים את תכונת הalt
  • 3:24 - 3:28
    כך שכל העולם יוכל לחוות את דף האינטרנט שלכם
  • 3:29 - 3:31
    אוקיי, אז בחזרה לתמונה שאנו כן יכולים לראות
  • 3:31 - 3:33
    היא קצת גדולה אז
  • 3:33 - 3:34
    בואו נשנה לה קצת את הגודל
  • 3:34 - 3:36
    אנו יכולים לעשות זאת עם עוד תכונות (attribute)
  • 3:37 - 3:39
    עם התכונות רוחב (width) או גובה (height)
  • 3:39 - 3:43
    בואו נגדיר שהרוחב שווה ל100
  • 3:44 - 3:47
    וכעת רוחב התמונה שווה ל100 פיקסלים
  • 3:47 - 3:49
    זה קצת קטן
  • 3:49 - 3:51
    בואו נכניס את הסמן בפנים
  • 3:51 - 3:54
    ונגדיל את המספרים כך שהתמונה תגדל
  • 3:54 - 3:57
    אוקיי, זה נראה עכשיו כבר יותר טוב
  • 3:57 - 3:59
    ועכשיו בואו נשים גם את הגובה (height)
  • 3:59 - 4:01
    בואו ונגדיר שהגובה שווה ל ל50
  • 4:01 - 4:03
    וואו
  • 4:03 - 4:05
    מעכנו את הארנב, מסכנון
  • 4:05 - 4:09
    וזוהי הסיבה שבדרך כלל משנים רק את
  • 4:09 - 4:11
    הגובה או רק את הרוחב אבל לא את שניהם ביחד
  • 4:11 - 4:13
    בגלל שאתם עלולים להשתמש בגדלים לא נכונים
  • 4:13 - 4:17
    ותמעכו את הארנבונים שלכם,אז אני אומרת תנו לדפדפן
  • 4:17 - 4:21
    לבצע את החישוב ולהחליט מהם שאר המימדים
  • 4:21 - 4:22
    אז אני הולכת למחוק את הגובה
  • 4:22 - 4:25
    וכעת כשהתחלתם להציג תמונות, תתחילו לחשוב
  • 4:25 - 4:28
    איך לצרף את כל התגים שלמדתם אל תיבת כלים
  • 4:28 - 4:33
    רשימות עם תמונות ועם פסקאות ועם 10 החיות המשונות ביותר
  • 4:33 - 4:36
    רק אל תשימו יותר מדי תמונות באתר שלכם
  • 4:36 - 4:38
    מכיון שהאדם שמסתכל על האתר שלכם
  • 4:38 - 4:40
    יצטרך להמתין עד שכל התמונות ייטענו
  • 4:40 - 4:43
    בכל זאת אפשר לעשות להרבה כיף.
Title:
תמונות בדף הHTML
Description:

תמונות באתר האינטרנט
more » « less
Video Language:
English
Duration:
04:45

Hebrew subtitles

Revisions

Our website uses cookies for analysis purposes.