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

מצד שני, אם אתה משתמש בתוכנית לעריכת תמונות בכדי ללכוד טקסט בגופן מפואר ולפרסם אותו כ- GIF או JPEG באתר שלך, כל מבקר יראה אותו בדיוק כפי שהתכוונת אליו - מכיוון שהוא כעת תמונה של טקסט ולא הטקסט עצמו. זה יכול לשחרר אותך להשתמש בגופנים מפוארים בכותרות שלך ולקבץ אותם בדרכים חריגות.

התג הבסיסי המשמש להצגת תמונות הוא הבא:



הקוד שלמעלה יעבוד בצורה מושלמת ב- HTML. אם אתה משתמש ב- XHTML או שאתה רוצה להיות בטוח שהאתר שלך מוכן ל- XHTML, עליך להוסיף נטוי לסגירת התג, מכיוון שב- XHTML אינך יכול להשתמש בתגים פתוחים:



'Src' הוא קיצור למקור, ותשתמש בו כדי לציין את נתיב הקובץ לתמונה שלך - או במילים אחרות, להגיד לדפדפן שלך היכן ניתן למצוא את התמונה באתר שלך. אם אתה שומר את התמונות שלך באותה תיקיה כמו דפי האינטרנט שלך, אינך צריך לרשום את התיקיה בטקסט 'src' - אתה יכול פשוט להקליד את שם קובץ התמונה.

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

טקסט חלופי כאן

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

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



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

יישור התמונה מוגדר כך:

טקסט חלופי כאן

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

כהערה צדדית, אתה יכול לכלול את תכונות התמונה שלך (src, יישור, alt וכו ') בכל סדר בתגיות התמונה. העדפה אישית שלי היא לרשום תחילה את התכונה 'src', מכיוון שזו התכונה הבסיסית ביותר וצריך לכלול אותה בכל תג תמונה, אך אתה יכול להשתמש בכל רצף שמרגיש הכי טבעי עבורך.

הוראות וידאו: תמונות HTML (מרץ 2024).