وب سایت ها بر خلاف هر گونه رسانه ارتباطی که قبل از آنها بود، بر خلاف آن است. یکی از اصلی ترین مواردی که وبسایتها را از فرمت های رسانه ای قبلی مانند چاپ، رادیو و حتی تلویزیون جدا می کند، مفهوم « لینک » است.
لینک های hyperlinks، که معمولا به عنوان "لینک ها" شناخته می شوند، باعث می شوند که وب پویا باشد. بر خلاف یک نشریه چاپی که می تواند یک مقاله یا منابع دیگر را ارجاع دهد وب سایت ها می توانند از این لینک ها برای ارسال بازدیدکنندگان به صفحات و منابع دیگر استفاده کنند. هیچ رسانه پخش دیگر نمی تواند این کار را انجام دهد. شما می توانید آگهی در رادیو و یا مشاهده در تلویزیون را بشنوید، اما هيچگونه پيوندهايی وجود ندارد که بتواند شما را به شرکتها در اين آگهی ها بسپارد، به طوری که وب سايت بتواند به آسانی انجام دهد. لینک ها واقعا ابزار ارتباطی و تعامل شگفت انگیز هستند!
اغلب لینک هایی که در یک وب سایت یافت می شوند، محتوای متن هستند که بازدیدکنندگان را به صفحات دیگر آن سایت هدایت می کند. ناوبری وب سایت یک نمونه از پیوندهای متنی در عمل است اما پیوندها نیازی به متنی ندارند. شما همچنین می توانید تصاویر را به راحتی در وب سایت خود پیوند دهید. بیایید نگاه کنیم چگونه این کار انجام می شود، و بعضی از مواردی که شما می خواهید از لینک های مبتنی بر تصویر استفاده کنید.
نحوه پیوند یک تصویر
اولین چیزی که باید انجام دهید این است که تصویر خود را در سند HTML خود قرار دهید. استفاده معمول از یک لینک مبتنی بر تصویر، لوگوی سایت است که پس از آن به صفحه اصلی سایت پیوند دارد. در مثال زیر کد زیر، فایل مورد استفاده ما یک لوگو SVG است . این یک انتخاب خوب است زیرا اجازه می دهد که تصویر ما برای قطعنامه های مختلف در مقیاس بزرگ باشد و در عین حال حفظ کیفیت تصویر و اندازه فایل کلی کوچک باشد.
در اینجا نحوه قرار دادن تصویر خود را در سند HTML قرار می دهیم:
در اطراف تگ تصویر، شما هم اکنون لینک لنگر را اضافه می کنید، عنصر لنگر را قبل از تصویر باز کنید و لنگر را پس از تصویر بسته کنید. این شبیه نحوه پیوند متن است، فقط به جای تعویض کلمات که میخواهید پیوند با برچسبهای لنگر باشد، تصویر را قرار دهید. در مثال ما در زیر، ما به صفحه اصلی سایت ما، که "index.html" است، لینک می کنیم.
هنگام اضافه کردن این HTML به صفحه خود، فاصله بین تگ لنگر و تگ تصویر قرار ندهید. اگر شما انجام دهید، بعضی از مرورگرها علامت های کوچکی را در کنار تصویر قرار می دهند که به نظر عجیب و غریب خواهد رسید.
این لوگوی تصویر هم اکنون نیز به عنوان یک دکمه صفحه اصلی عمل می کند، که امروزه به اندازه ای استاندارد وب است. توجه داشته باشید که ما در هرکدام از نشانه های HTML ما هیچ سبک بصری، مانند عرض و ارتفاع تصویر را شامل نمی شود. ما این سبک های بصری را به CSS ترک خواهیم کرد و تمیز جدا سازی ساختار HTML و سبک های CSS را حفظ خواهیم کرد.
هنگامی که شما CSS را می گیرید، سبک هایی که می نویسید برای هدف قرار دادن این گرافیک آرم می تواند شامل اندازه گیری تصویر، از جمله سبک های پاسخگو برای تصاویر چند منظوره و همچنین تصاویری که دوست دارید به تصویر / لینک اضافه کنید، مانند مرزها یا CSS سایه افتادن شما همچنین می توانید تصویر خود و یا ویژگی کلاس را پیوند دهید اگر شما نیاز به "قلاب" اضافی برای استفاده با سبک های CSS خود را.
از موارد برای لینک های تصویر استفاده کنید
بنابراین اضافه کردن یک لینک تصویر بسیار آسان است. همانطور که قبلا مشاهده کردیم، همه چیزهایی که باید انجام دهید این است که تصویر را با برچسب های لنگر مناسب تعبیه کنید. سؤال بعدی شما ممکن است "هنگامی که شما در واقع در عمل علاوه بر پیوند فوق الذکر / صفحه اصلی، این کار را انجام دهید"؟
در اینجا چند اندیشه وجود دارد:
- تصاویر کوچک در یک گالری که به نسخه های بزرگتر از آن تصاویر پیوند دارند.
- تصاویری که به تنهایی برای نمایش محتوای استفاده می شود، مانند عکس های محصول برای یک وب سایت تجارت الکترونیک.
- تصاویر تیزر که بخشی از محتوای دیگر هستند، مانند یک مقاله وبلاگ یا انتشار مطبوعاتی که مردم را جذب می کند تا متوجه شوند که محتوا به آنها یک منطقه هدف برای ضربه زدن یا کلیک برای خواندن مقاله کامل می دهد.
- تصاویر آیکون که به عنوان دکمه برای اتصال به قابلیت های خاص و یا صفحات در سایت استفاده می شود.
- لینک های رسانه های اجتماعی که از آرم های شناخته شده سایت های رسانه های اجتماعی مختلف استفاده می کنند که برای این سایت یا شرکت مهم هستند.
- تصاویر استفاده شده به عنوان دکمه برای برخی از قابلیت ها، مانند فرم ارسال (بهترین شیوه توجه - از دیدگاه عملکرد وب سایت، دکمه های کاملا سفارشی با CSS انتخاب بهتر از دکمه های تصویر).
یادآوری هنگام استفاده از تصاویر
تصاویر می توانند نقش مهمی در موفقیت وب سایت داشته باشند. یکی از نمونه هایی که در بالا ذکر شد، با استفاده از تصاویر همراه با دیگر محتویات، به منظور جلب توجه به آن محتوا و به مردم آن را خواند.
هنگام استفاده از تصاویر، باید به انتخاب تصویر مناسب برای نیازهای خود احتیاج داشته باشید ، این شامل موضوع تصویر درست، فرمت و همچنین اطمینان از اینکه تصاویری که در وب سایت شما استفاده می کنید به درستی برای تحویل وب سایت بهینه شده اند . این ممکن است به نظر کارهای زیادی برای اضافه کردن تصاویر بپردازد اما بازپرداخت ارزش آن است! تصاویر واقعا می تواند به موفقیت یک سایت اضافه کنید.
با استفاده از تصاویر مناسب در سایت خود دریغ نکنید و تصاویری را که نیاز دارید برای اضافه کردن برخی از تعاملی به محتوای خود پیوند دهید، پیگیری کنید، همچنین از این بهترین شیوه های تصویری اطمینان حاصل کنید و از این گرافیک / لینک ها به طور صحیح و مسئولانه در طراحی وب سایت خود استفاده کنید.