שיעור 9: תמונות
האם זה לא יהיה ענק אם תוכל להוסיף תמונה של השחקן והזמר האגדי דוד אסלהוף ממש במרכז הדף שלך?
זה נשמע כמו אתגר קטן...
אולי, אבל למעשה זה מאוד פשוט. כל מה שאתה צריך זה אלמנט:
דוגמה 1:
<img src="david.jpg" alt="David" />
בדפדפן זה יראה כך:
כל מה שאתה צריך לעשות זה קודם כל להגיד לדפדפן שלך שאתה רוצה להכניס תמונה (img) ואז היכן היא ממוקמת (src, קיצור של "source"). האם קיבלת את התמונה?
שים לב איך האלמנט img נפתח ונסגר באמצעות אותו תג. כמו התג </ br>, גם הוא אינו מתייחס לקטע טקסט.
"david.jpg" זה שם קובץ התמונה שאתה רוצה להכניס לדף שלך. "jpg." זהו קובץ מסוג תמונה. בדיוק כמו שהסיומת "htm." מציינת שקובץ הוא מסמך HTML, כך הסיומת "jpg." אומרת לדפדפן שהקובץ הוא תמונה. ישנם שלושה סוגי קבצי תמונה שאתה יכול להכניס לדפים שלך:
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
תמונות GIF בדרך כלל טובות יותר לגרפיקה וציור, בעוד שתמונות JPEG בדרך כלל טובות יותר לתמונות. יש לזה שתי סיבות: הראשונה, תמונות GIF כוללות 256 צבעים בלבד, בעוד שתמונות JPEG מכילות מיליוני צבעים והשנייה, תבנית GIF טובה יותר מתבנית JPEG בדחיסה של תמונות פשוטות מאחר ותבנית JPEG מתאימה לתמונות מורכבות יותר. ככל שהדחיסה תהיה טובה יותר, כך גודל קובץ התמונה יהיה קטן יותר ודף האינטרנט יטען מהר יותר. כפי שאתה בוודאי יודע מניסיונך האישי, דפים 'כבדים' שלא לצורך יכולים להיות מאוד לא נוחים לגולש.
כרגיל, התבניות GIF ו-JPEG היו שתי סוגי התמונות המקובלות, אבל לאחרונה, תבנית PNG הפכה מקובלת יותר ויותר (בעיקר בהשוואה לשימוש בתבנית GIF). תבנית PNG כוללת במובנים רבים את הטוב שבשתי התבניות JPEF ו-GIF: מיליוני צבעים ואפשרות לדחיסה יעילה.
מהיכן אני מקבל את התמונות שלי?
כדי להכין תמונות משלך, אתה צריך תוכנה לעריכת תמונות. תוכנה לעריכת תמונות היא אחד מהכלים החיוניים ביותר שתצטרך כדי ליצור אתר אינטרנט יפה.
למרבה הצער, מערכת ההפעלה חלונות לא כוללת תוכנה טובה לעריכת תמונות. לכן, אולי כדאי שתשקול רכישה של אחת מהתוכנות - Paint Shop Pro, PhotoShop או Macromedia Firework - שהן מהתוכנות הטובות ביותר לעריכת תמונות שקיימות היום בשוק.
בכל אופן, כפי שאמרנו קודם, להשלמת הלימוד של מדריך זה אין צורך ברכישה של תוכנה יקרה. בשלב זה, אתה יכול להוריד תוכנה מעולה לעריכת תמונות בשם IfranView שהיא תוכנה חופשית ולכן אינה עולה כסף.
או שאתה פשוט יכול להשאיל תמונות מאתר אחר על ידי הורדתן. אבל חשוב! היזהר שלא להפר זכויות יוצרים בעצם השימוש בתמונות שהורדת. בכל אופן, חשוב שתדע איך להוריד תמונה ולכן הנה ההסבר:
- הקש במקש ימין של העכבר על התמונה שאתה רוצה להוריד.
- בחר באפשרות "...Save Picture As" בתפריט שיופיע.
- בחר במיקום לשמירת התמונה במחשב שלך ולחץ על "Save".
עשה זאת עם התמונה הבאה ושמור אותה במחשב שלך באותו מקום בו שמורים מסמכי ה-HTML שלך. (שים לב שהלוגו נשמר כקובץ logo.png-PNG):
עכשיו אתה יכול להכניס את התמונה לאחד הדפים שלך. נסה זאת.
זה כל מה שאני צריך לדעת על תמונות?
ישנם מספר דברים נוספים שאתה צריך לדעת על תמונות.
ראשית, אתה יכול להכניס בקלות תמונה הממוקמת בספרייה אחרת, או אפילו תמונה שממוקמת באתר אינטרנט אחר:
דוגמה 2:
<img src="images/logo.png" />
דוגמה 3:
<img src="http://www.html.net/logo.png" />
שנית, ניתן לקשר תמונות:
דוגמה 4:
<a href="http://www.html.net">
<img src="logo.png" /></a>
בדפדפן זה יראה כך (נסה להקיש על התמונה):
האם יש מאפיינים נוספים שאני צריך להכיר?
אתה תמיד צריך להשתמש במאפיין src, אשר אומר לדפדפן היכן התמונה ממוקמת. חוץ מזה, ישנם מספר מאפיינים נוספים שיכולים להיות שימושיים כשמכניסים תמונות.
המאפיין alt משמש למתן תיאור חלופי לתמונה אם מסיבה כלשהי התמונה אינה מוצגת למשתמש. זה חשוב במיוחד למשתמשים עם מגבלת ראייה, או אם הדף נטען לאט. לכן, השתמש תמיד במאפיין alt:
דוגמה 5:
<img src="logo.gif" alt="HTML.net logo" />
חלק מהדפדפנים מציגים את הטקסט של המאפיין alt בתיבת pop-up קטנה כשהמשתמש ממקם את סמן העכבר מעל התמונה. שים לב שבשימוש במאפיין alt, הכוונה היא לספק תיאור חלופי לתמונה. אנא, אל תשתמש במאפיין alt ליצירת הודעות קופצות מאחר ומשתמשים עם ליקויי ראייה ישמעו את ההודעה מבלי יכולת לדעת מה היא התמונה.
המאפיין title יכול לשמש להוספת מידע לתמונה:
דוגמה 6:
<img src="logo.gif" title="למד HTML באתר HTML.net" />
בדפדפן זה יראה כך:
אם תמקם את הסמן מעל התמונה מבלי להקיש, אתה תראה את הטקסט "למד HTML באתר HTML.net" מופיע כתיבה קופצת.
שני מאפיינים חשובים אחרים הם width ו-height:
דוגמה 7:
<img src="logo.png" width="141" height="32" />
בדפדפן זה יראה כך:
המאפיינים width ו- height יכולים לשמש לקביעת הרוחב והגובה בפיקסלים. פיקסלים הם יחידות מידה למדידת רמת ההפרדה (רזולוציה) של מסכים. (רמת ההפרדה המקובלת ביותר במסכים היא 768 x1024). שלא כמו סנטימטרים, פיקסלים הם יחידות מידה יחסיות שתלויות ברמת ההפרדה של המסך. למשתמש עם מסך בהפרדה גבוה, 25 פיקסלים יתאימו לקטע של 1 סנטימטר על גבי המסך, בעוד שלמשתמש עם מסך בהפרדה נמוכה, אותם 25 פיקסלים יתאימו ל-1.5 סנטימטרים על גבי המסך.
אם אתה לא קובע את הרוחב והגובה, התמונה תוכנס לדף בגודלה האמיתי. אבל עם רוחב וגובה יש באפשרותך להשפיע על גודלה:
דוגמה 8:
<img src="logo.gif" width="32" height="32" />
בדפדפן זה יראה כך:
בכל אופן, כדאי להיות מודע לכך שללא קשר לגודל התמונה המוצגת בדף, בפועל, גודל התמונה בקילובייטים נשאר אותו הדבר והמשמעות היא שהזמן הדרוש לטעינת הדף בדפדפן ישאר זהה. לכן, אל תשנה את הגודל הפיסי של התמונה על ידי המאפיינים רוחב וגובה. למטרה זו, עליך להשתמש תמיד בתוכנה לעריכת תמונות וכך להפוך את הדף שלך ל'קל' יותר ומהיר יותר לטעינה.
ואחרי הכל, עדיין זה רעיון טוב להשתמש במאפיינים רוחב וגובה, מאחר וכך הדפדפן יוכל לגלות כמה מקום התמונה תופסת בדף עוד לפני שהתמונה נטענת במלואה וזה מאפשר לדפדפן להתאים את הדף שלך מהר ויפה יותר.
די לעכשיו עם התמונה של דוד אסלהוף ותמונות בכלל.