מדריך שגרירים לבניית אתרים - הוספה ועיצוב תמונות

הוספת תמונות לאתר ועיצובן

בניית אתר ללא אף תמונה, זה כמו לבנות בית עם קירות לבנים ללא שום תמונה או קישוט. כדאי תמיד שתהיה לפחות תמונה אחת בכל דף, אפילו אם זה רק לוגו - זה עושה את כל ההבדל. אז איך מכניסים תמונה לדף?

כותבים את הקוד הבא במקום בו רוצים שהתמונה תופיע (אחרי משפט מסוים, לפני הכל או אחרי הכל):

את שם הקובץ, במקרה זה snake.jpg, מחליפים בשם של התמונה, שהוא כתובת יחסית או מוחלטת (כמו שלמדנו בנושא שעבר). במקרה זה, התמונה שמורה באותה תיקייה בה שמור הדף הזה, לכן השתמשתי בשם התמונה בלבד. והתוצאה:

גלישת טקסט

טקסט שכתוב אחרי תמונה שלא מציינים מעבר שורה מיד אחריה , פשוט יופיע ליד התמונה, בקו התחתון, למשל:

נכון שהנחש חמוד?

אם רוצים שהתמונה תקבל שורה שלמה לעצמה, יש לכתוב אחריה או .

אם, לעומת זאת, רוצים שהטקסט יגלוש ליד התמונה, או בגובה מסוים לידה, צריך לכתוב בתוך התג של התמונה align="left/right/bottom/top/middle" (בחרו באפשרות המתאימה).

הערכים bottom, top, middle קובעים שתופיע רק שורה אחת של טקסט ליד התמונה, ושהיא תופיע צמוד לתחתית התמונה, לראש התמונה, או לאמצע התמונה. לדוגמא:

<img src="snake.jpg" align="top">
אני למעלה 
אני כבר לא ליד התמונה

אני למעלה
אני כבר לא ליד התמונה

הערכים left, right קובעים שהטקסט יגלוש לכל אורך התמונה, כלומר מספר שורות אם זה מתאפשר, ובאיזה צד של הדף תופיע התמונה.

<img src="snake.jpg" align="right">
אפשר לכתוב 
כמה שורות 
וכולן יהיו מימין לתמונה

אפשר לכתוב
כמה שורות
וכולן יהיו מימין לתמונה

מסגרת לתמונה

אם רוצים לתת לתמונה מסגרת, פשוט מוסיפים את הקוד border="מספר".

ומקבלים מסגרת מסביב לתמונה בעובי שקבענו:

הגדרת גודל תמונה

לפעמים תמונה תהיה גדולה יותר מהגודל שאתם רוצים שיופיע בדף (אם למשל אתם מקשרים לתמונה מאתר אחר). אפשר להקטין (או להגדיל - אבל זה לא מומלץ כי התמונה נהיית מטושטשת) תמונות ע"י הגדרת הגודל שלהן. בד"כ מספיק לקבוע רק את הרוחב או הגובה, כיוון שהדפדפן יתאים לבד את המימד השני, אבל אפשר גם לקבוע את שניהם. משתמשים בקוד height="מספר" width="מספר" בתוך התג של התמונה. המספר יכול להיות מספר רגיל (בפיקסלים) או אחוז (ואז נכתוב אותו כך: 80%). אחוז הוא אחוז מרוחב המקטע בו התמונה נמצאת, בד"כ רוחב הדף או הטבלה.

הסבר על תמונה - alt

לא כל האנשים גולשים עם האפשרות לראות תמונות מופעלת, כל אחד מסיבותיו שלו. זה מנומס לאפשר להם לדעת מה הם מפסידים, לכן אפשר להשתמש בתג alt. יש לכך עוד יתרון הרבה יותר חשוב - מנועי החיפוש, שלא מבינים תמונות, יכולים לדעת מה התמונה שלכם מראה, וזה משפר את הדירוג של האתר.

תג alt נכתב בתוך התג של התמונה:

נחש צהוב

אם תניחו את העכבר על הנחש הנ"ל, תראו שמופיע כיתוב שמסביר מה הוא.

למעבר לנושא הבא - שינוי הרקע של הדף - לחצו כאן.

חזרה לדף html הראשי...