WEBVTT

00:00:00.271 --> 00:00:01.900
דיברנו על ארנבים

00:00:01.900 --> 00:00:05.800
עד עכשיו, תיארנו אותם בHTML עם פסקאות  ועם רשימות  או 

00:00:05.800 --> 00:00:09.228
אבל יכולנו פשוט לשים תמונה שלהם באתר

00:00:09.228 --> 00:00:12.060
אך למעשה יכולנו להראות איך ארנב נראה

00:00:12.400 --> 00:00:16.149
למעשה כדי להכניס תמונה באתר אנו משתמשים בתג 

00:00:16.149 --> 00:00:19.466
שאתם יכולים לנחש מגיע מהמילה image (תמונה)

00:00:19.466 --> 00:00:22.700
אם אנו סתם נרשום "image" , לא נראה שום דבר

00:00:22.700 --> 00:00:23.966
למה לא ?

00:00:23.966 --> 00:00:27.511
ובכן, לא אמרנו לדפדפן איזו תמונה להציג.

00:00:27.511 --> 00:00:29.284
יש מיליוני תמונות באינטרנט.

00:00:29.284 --> 00:00:31.949
ואנחנו בוודאות לא רוצים לבחור תמונה באופן אקראי.

00:00:31.949 --> 00:00:34.660
כי יכול להיות שתיבחר תמונה לא ראויה שלא נרצה אותה.

00:00:34.699 --> 00:00:37.766
וזאת בעצם תהיה תמונה שונה ממה שרצינו.

00:00:37.766 --> 00:00:40.925
אנו צריכים להגיד לדפדפן את הקישור (URL) אל התמונה

00:00:40.939 --> 00:00:43.073
הקישור זה מה שמוצג בראש הדף

00:00:43.073 --> 00:00:44.770
של הדפדפן במקום שנקרא "כתובת" (address)

00:00:44.770 --> 00:00:46.874
וזה בעצם מה שזה. זוהי כתובת.

00:00:46.874 --> 00:00:49.301
זוהי דרך למצוא משאבים מסוימים ברשת האינטרנט.

00:00:50.485 --> 00:00:52.413
וזה אומר שניתן להכניס תמונה רק אם

00:00:52.413 --> 00:00:54.552
היא בכלל נמצאת באיזו שהיא כתובת באינטרנט

00:00:54.552 --> 00:00:57.602
אי אפשר כך סתם להכניס תמונות שנמצאות רק במחשב שלנו.

00:00:58.233 --> 00:01:00.772
יש הרבה דרכים למצוא תמונות באינטרנט

00:01:00.772 --> 00:01:03.137
אבל אנו עושים זאת פשוט יותר באקדמיה כאן עבורך.

00:01:03.137 --> 00:01:06.037
על ידי "בוחר תמונות" (image picker) מתוך אוסף תמונות

00:01:06.246 --> 00:01:07.967
כדי שבוחר התמונות יופעל אנו צריכים להוסיף

00:01:07.967 --> 00:01:10.735
תכונה (attribute) לתג של התמונה(image)

00:01:10.735 --> 00:01:12.800
תכונה זה עוד קצת מידע

00:01:12.800 --> 00:01:14.772
על תכונות התמונה וזוהי בעצם

00:01:14.772 --> 00:01:17.106
התכונה הראשונה שאנו ראינו עד עכשיו

00:01:17.736 --> 00:01:19.714
כדי לאמור לדפדפן את הקישור לתמונה (URL) אנחנו

00:01:19.714 --> 00:01:22.945
צריכים להוסיף תכונה של שם(name) ומקור(source)

00:01:22.945 --> 00:01:26.490
ואז נוסיף רווח ואחרי כן נכתוב src

00:01:28.337 --> 00:01:30.866
כעת, זה מייצג מקור (source) אבל זה מאוד חשוב.

00:01:30.866 --> 00:01:32.733
אבל צריך לכתוב זאת src בגלל שהדפדפן

00:01:32.733 --> 00:01:35.333
יתעלם מזה אם נטעה בכתיבה

00:01:35.733 --> 00:01:38.700
כעת אני צריכה להוסיף סימן שוויון כך שאוכל

00:01:38.700 --> 00:01:41.400
להגיד לדפדפן מהי ערך התכונה

00:01:41.400 --> 00:01:44.925
ועכשיו אוסיף מירכאות (") והעורך

00:01:44.925 --> 00:01:47.286
ישלים באופן אוטומטי את המירכאות בסוף

00:01:47.286 --> 00:01:51.053
כלומר תכונות הן תמיד מוקפות במירכאות משני הצדדים - בהתחלה ובסוף

00:01:51.838 --> 00:01:55.833
אוקיי, עכשיו באופן רגיל זה המקום שאנו מתחילים להכניס את הURL

00:01:55.833 --> 00:01:57.600
אבל כאן, באקדמיית קהאן, זה הזמן שבו

00:01:57.600 --> 00:02:00.135
בוחר התמונות (image picker) יופיע מולנו.

00:02:00.135 --> 00:02:04.024
כעת נבחר תמונה , אני רוצה תמונה של ארנב

00:02:04.024 --> 00:02:06.630
אז נבחר את אזור החיות ונבחר את

00:02:06.630 --> 00:02:08.871
הארנב המקסים ביותר ונלחץ על okay

00:02:10.238 --> 00:02:13.089
האם אתם רואים איך יש כתובת URL בתוך המירכאות כעת ?

00:02:13.089 --> 00:02:16.300
והאם אתם רואים שה URL מתחיל עם http?

00:02:16.300 --> 00:02:17.666
וכך אנו יודעים שזה מצביע לאיזושהיא

00:02:17.666 --> 00:02:19.666
תמונה שנמצאת איפה שהוא באינטרנט

00:02:19.666 --> 00:02:22.134
הי, תיראו, יש ארנב באתר שלי.

00:02:23.226 --> 00:02:26.233
אבל מה יקרה אם השרת (server) שמחזיק את התמונה נפל

00:02:26.233 --> 00:02:28.133
ואז הדפדפן לא יוכל לטעון ממנו את התמונה ?

00:02:28.133 --> 00:02:31.092
איך המשתמשים יוכלו לדעת איך התמונה הנפלאה נראית?

00:02:31.092 --> 00:02:33.401
הם לא ייראו כלום ויתהו לגבי שאר

00:02:33.401 --> 00:02:35.367
החיים שלהם מה הם פיספסו

00:02:35.867 --> 00:02:39.433
זוהי הסיבה שבתג img יש גם תכונה (attribute) נוספת שנקראת alt

00:02:39.433 --> 00:02:41.066
בתכונה זו משתמשים כדי להגיד לדפדפנים

00:02:41.066 --> 00:02:44.108
מה הטקסט האלטרנטיבי כשתמונה לא יכולה להופיע

00:02:44.108 --> 00:02:46.579
כדי להוסיף תכונה נוספת אנו מוסיפים רווח (space)

00:02:46.579 --> 00:02:49.510
אחרי המרכאות הסופיות של התכונה הקודמת

00:02:49.510 --> 00:02:53.635
ואז נכתוב alt שווה למרכאות

00:02:53.635 --> 00:02:57.250
ובתוך המרכאות נכתוב טקסט שייתן

00:02:57.250 --> 00:02:58.922
מידע משמעותי על התמונה למשל

00:02:58.922 --> 00:03:03.746
"ארנב עם אוזניים שמוטות באסם"

00:03:04.858 --> 00:03:07.200
זה יכול גם לעזור לאנשים שצופים בדפי אינטרנט

00:03:07.200 --> 00:03:09.805
אבל למעשה לא רואים אותם כמו עיוורים

00:03:09.805 --> 00:03:11.496
הם יכולים להשתמש באפליקציה שנקראת "מקריא מסך"

00:03:11.496 --> 00:03:13.613
שהיא תקריא את התוכן של המסך בקול רם עבורם

00:03:13.613 --> 00:03:15.701
והיא תתאר כל תג עבורם

00:03:15.701 --> 00:03:18.478
וכשהיא תפגוש את תג התמונה (img) היא תקריא את הטקסט שכתוב בתכונה alt

00:03:18.478 --> 00:03:21.335
כי העיוור לא יכול לראות את התמונות

00:03:21.335 --> 00:03:24.317
ולכן אתם צריכים תמיד ,תמיד לשים את תכונת הalt

00:03:24.317 --> 00:03:28.076
כך שכל העולם יוכל לחוות את דף האינטרנט שלכם

00:03:28.900 --> 00:03:31.233
אוקיי, אז בחזרה לתמונה שאנו כן יכולים לראות

00:03:31.233 --> 00:03:32.893
היא קצת גדולה אז

00:03:32.893 --> 00:03:34.263
בואו נשנה לה קצת את הגודל

00:03:34.263 --> 00:03:36.206
אנו יכולים לעשות זאת עם עוד תכונות (attribute)

00:03:37.037 --> 00:03:38.960
עם התכונות רוחב (width) או גובה (height)

00:03:38.960 --> 00:03:43.159
בואו נגדיר שהרוחב שווה ל100

00:03:43.975 --> 00:03:47.171
וכעת רוחב התמונה שווה ל100 פיקסלים

00:03:47.171 --> 00:03:49.423
זה קצת קטן

00:03:49.423 --> 00:03:51.347
בואו נכניס את הסמן בפנים

00:03:51.347 --> 00:03:53.900
ונגדיל את המספרים כך שהתמונה תגדל

00:03:54.023 --> 00:03:56.572
אוקיי, זה נראה עכשיו כבר יותר טוב

00:03:56.572 --> 00:03:58.603
ועכשיו בואו נשים גם את הגובה (height)

00:03:58.603 --> 00:04:00.945
בואו ונגדיר שהגובה שווה ל ל50

00:04:00.945 --> 00:04:02.608
וואו

00:04:02.608 --> 00:04:05.401
מעכנו את הארנב, מסכנון

00:04:05.401 --> 00:04:08.764
וזוהי הסיבה שבדרך כלל משנים רק את

00:04:08.764 --> 00:04:10.969
הגובה או רק את הרוחב אבל לא את שניהם ביחד

00:04:10.969 --> 00:04:13.273
בגלל שאתם עלולים להשתמש בגדלים לא נכונים

00:04:13.273 --> 00:04:16.800
ותמעכו את הארנבונים שלכם,אז אני אומרת תנו לדפדפן

00:04:16.800 --> 00:04:20.884
לבצע את החישוב ולהחליט מהם שאר המימדים

00:04:20.884 --> 00:04:22.500
אז אני הולכת למחוק את הגובה

00:04:22.500 --> 00:04:25.266
וכעת כשהתחלתם להציג תמונות, תתחילו לחשוב

00:04:25.266 --> 00:04:27.971
איך לצרף את כל התגים שלמדתם אל תיבת כלים

00:04:27.971 --> 00:04:32.971
רשימות עם תמונות ועם פסקאות ועם 10 החיות המשונות ביותר

00:04:33.301 --> 00:04:35.833
רק אל תשימו יותר מדי תמונות באתר שלכם

00:04:35.833 --> 00:04:37.576
מכיון שהאדם שמסתכל על האתר שלכם

00:04:37.576 --> 00:04:40.006
יצטרך להמתין עד שכל התמונות ייטענו

00:04:40.006 --> 00:04:42.938
בכל זאת אפשר לעשות להרבה כיף.