אתרי אינטרנט הם בניגוד למדיום התקשורת שהגיע לפניהם. אחד הדברים העיקריים להגדיר אתרי אינטרנט מלבד פורמטים מדיה קודמים כמו להדפיס, רדיו, ואפילו הטלוויזיה היא הקונספט של " היפר ".
היפר, הידוע גם גם בשם "קישורים", הם מה שהופך את האינטרנט כל כך דינמי. שלא כמו פרסום מודפס שיכול להפנות מאמר אחר או משאב אחר, אתרי אינטרנט יכולים להשתמש בקישורים אלה למעשה לשלוח מבקרים לאותם דפים ומשאבים אחרים. אין אמצעי שידור אחר שיכול לעשות זאת. אתה יכול לשמוע מודעה ברדיו או להציג בטלוויזיה, אבל אין קישורים שיכולים לקחת אותך לחברות באותן מודעות כמו האתר יכול בקלות לעשות. קישורים הם כלי תקשורת ואינטראקציה מדהימים!
לעתים קרובות, הקישורים הנמצאים באתר הם תוכן טקסט שמפנה מבקרים לדפים אחרים של אותו אתר. ניווט באתר הוא דוגמה אחת לקישורים טקסט בפועל אבל קישורים לא צריך להיות מבוסס טקסט. אתה יכול גם בקלות לקשר תמונות באתר האינטרנט שלך. בואו נסתכל איך זה נעשה, ואחריו כמה מקרים שבהם אתה רוצה להשתמש מבוססי תמונה היפר.
כיצד לקשר תמונה
הדבר הראשון שאתה צריך לעשות הוא למקם את התמונה עצמה במסמך ה- HTML שלך. שימוש נפוץ בקישור המבוסס על תמונות הוא גרפיקת הלוגו של האתר, המקושרת חזרה לדף הבית של האתר. בקוד לדוגמה שלהלן, הקובץ שבו אנו משתמשים הוא SVG עבור הלוגו שלנו. זוהי בחירה טובה שכן היא תאפשר תמונה שלנו בקנה מידה עבור החלטות שונות, תוך שמירה על איכות התמונה ואת גודל הקובץ הכולל קטן.
כך תמקם את התמונה שלך במסמך HTML:
סביב תג התמונה, כעת תוסיף את הקישור עוגן, פתיחת אלמנט העוגן לפני התמונה וסגירת העוגן לאחר התמונה. זה דומה איך היית מקשר טקסט, רק במקום לעטוף את המילים שאתה רוצה להיות קישור עם תגי עוגן, אתה לעטוף את התמונה. בדוגמה שלנו למטה, אנו מקשרים לדף הבית של האתר שלנו, שהוא "index.html".
בעת הוספת HTML זה לדף שלך, אל תוסיף רווחים בין תג העוגן לתג התמונה. אם תעשה זאת, דפדפנים מסוימים יוסיפו מעט טיקים ליד התמונה, אשר ייראה מוזר.
תמונת הלוגו עכשיו גם לשמש לחצן דף הבית, שהוא די הרבה תקן אינטרנט בימים אלה. שים לב שאנו לא כוללים סגנונות חזותיים, כגון הרוחב והגובה של התמונה, בסימון ה- HTML שלנו. אנו נשאיר סגנונות חזותיים אלה ל- CSS ונשמור על הפרדה נקייה בין מבנה HTML לבין סגנונות CSS.
ברגע שאתה מקבל CSS, סגנונות לכתוב למקד את הלוגו הגרפי הזה יכול לכלול שינוי גודל התמונה, כולל סגנונות תגובה עבור תמונות מרובות מכשיר ידידותי, כמו גם כל חזותיים אתה רוצה להוסיף את התמונה / קישור, כמו גבולות או CSS טיפה צללים. אתה יכול גם לתת את התמונה או קישור תכונה בכיתה אם אתה צריך עוד "ווים" להשתמש עם סגנונות CSS שלך.
השתמש במקרים עבור קישורים לתמונות
אז הוספת קישור התמונה היא די קלה. כפי שראינו זה עתה, כל שעליכם לעשות הוא לעטוף את התמונה בתגי העוגן המתאימים. השאלה הבאה שלך עשויה להיות "מתי אתה באמת עושה את זה בפועל מלבד האמור לעיל הלוגו / דף הקישור למשל?"
הנה כמה מחשבות:
- תמונות ממוזערות בגלריה המקשרות לגרסאות גדולות יותר של תמונות אלה.
- תמונות המשמשות לבד לייצוג תוכן, כגון תמונות מוצרים עבור אתר מסחר אלקטרוני.
- תמונות טיזר שהן חלק מתוכן אחר, כמו מאמר בלוג או הודעה לעיתונות, שמפתות אנשים לשים לב שתוכן מעניק להם אזור יעד להקיש או ללחוץ כדי לקרוא את המאמר המלא.
- תמונות סמל המשמשות כפתורים לחיבור לפונקציונליות או לדפים ספציפיים בתוך האתר.
- מדיה חברתית קישורים המשתמשים לוגו לזיהוי של אתרי מדיה חברתית שונים שחשובים לאותו אתר או חברה.
- תמונות המשמשות לחצנים עבור פונקציונליות מסוימת, כגון הגשות טופס (הערה מומלצת - מתוך פרספקטיבה ביצועי האתר, לחצנים מנוסח אך ורק עם CSS הם בחירה טובה יותר מאשר לחצני תמונה).
תזכורת בעת שימוש בתמונות
תמונות יכולות למלא תפקיד חשוב בהצלחת האתר. אחת הדוגמאות שהוזכרו לעיל באמצעות תמונות לצד תוכן אחר כדי למשוך תשומת לב לתוכן זה לגרום לאנשים לקרוא אותו.
בעת שימוש בתמונות, עליך להיות מודע לבחירת התמונה הנכונה עבור הצרכים שלך , זה כולל את הנושא הנכון תמונה הנושא, פורמט, וגם מוודא כי כל התמונות שאתה משתמש באתר האינטרנט שלך מותאמות כראוי עבור משלוח האתר . זה אולי נראה כמו הרבה עבודה רק כדי להוסיף תמונות, אבל את התמורה שווה את זה! תמונות באמת יכול להוסיף כל כך הרבה להצלחה של האתר.
אל תהסס להשתמש בתמונות המתאימות באתר שלך, ולקשר אותם תמונות בעת הצורך כדי להוסיף קצת אינטראקטיבי לתוכן שלך, אבל גם להיות זהיר של שיטות עבודה מומלצות תמונה זו ולהשתמש אלה גרפיקה / קישורים בצורה נכונה ואחראית בעבודתך עיצוב אתרים.