اضافه کردن تصاویر به صفحات وب

امروز به هر صفحه وب آنلاین نگاه کنید و متوجه خواهید شد که موارد خاصی را به اشتراک می گذارند. یکی از این صفات مشترک تصاویر است. تصاویر مناسب برای نمایش وب سایت بسیار زیاد است. بعضی از این تصاویر، مانند لوگوی شرکت، به نام تجاری سایت کمک می کند و آن واحد دیجیتال را به شرکت فیزیکی خود متصل می کند.

برای اضافه کردن یک تصویر، نماد یا گرافیک به صفحه وب شما، باید از این برچسب در کد HTML صفحه استفاده کنید. شما برچسب IMG را در HTML خود قرار می دهید دقیقا جایی که می خواهید گرافیک را نمایش دهید. مرورگر وب که در حال ارائه کد صفحه است، این تگ را با یک گرافیک مناسب جایگزین می کند. به عقب بر گردیم به عنوان مثال لوگوی ما، در اینجا این است که چگونه می توانید آن تصویر را به سایت خود اضافه کنید:

ویژگی های تصویر

با نگاه کردن به کد HTML بالا، خواهید دید که عنصر شامل دو ویژگی است. هر یک از آنها برای تصویر لازم است.

اولین ویژگی "src" است. این به معنای واقعی کلمه فایل تصویری است که می خواهید روی صفحه نمایش داده شود. در مثال ما از یک فایل با نام "logo.png" استفاده می کنیم. این گرافیکی است که مرورگر وب هنگام ارائه این سایت نمایش می دهد.

شما همچنین متوجه خواهید شد که قبل از نام این فایل، ما برخی از اطلاعات اضافی، "/ تصاویر /" اضافه کردیم. این مسیر فایل است. اسلش در ابتدا به سرور می گوید که به ریشه دایرکتوری نگاه می کند. سپس یک پوشه به نام "تصاویر" و در نهایت فایل با نام "logo.png" جستجو خواهد شد. با استفاده از یک پوشه به نام "تصاویر" برای ذخیره تمام گرافیک سایت یک عمل معمول است، اما مسیر فایل شما تغییر خواهد کرد به هر چیزی که مربوط به سایت شما است.

دومین ویژگی مورد نیاز، متن "alt" است. این "متن متناوب" است که نشان داده شده است اگر تصویر به دلایل بارگیری نشد این متن که در مثال ما "لوگو شرکت" نمایش داده می شود اگر تصویر نتواند بارگذاری شود. چرا این اتفاق می افتد؟ به دلایل مختلف:

این تنها چند دلیل برای اینکه چرا تصویر مشخص شده ما ممکن است از دست رفته باشد. در این موارد، متن alt ما به جای آن نمایش داده می شود.

متن آل متن نیز توسط نرم افزار خواننده روی صفحه استفاده می شود تا "خواندن" تصویر را به بازدید کننده ای که دچار اختلال بینایی است. از آنجا که آنها نمیتوانند تصویر را مانند ما ببینند، این متن به آنها اجازه می دهد تا بدانند که تصویر چیست. به همین دلیل است که متن ALT مورد نیاز است و چرا باید به وضوح تصویر آن را مشخص کند.

سوء تفاهم معمولی از متن alt این است که آن را برای اهداف موتور جستجو در نظر گرفته شده است. این درست نیست. در حالی که گوگل و سایر موتورهای جستجو این متن را برای تعیین تصویر (به یاد داشته باشید، آنها هم نمیتوانند "تصویر شما" را ببینند) را بخوانند، شما نباید متن alt را فقط برای موتور جستجو جستجو کنید. نویسنده متن روشن متن را که برای انسانها در نظر گرفته شده است. اگر شما همچنین می توانید برخی از کلمات کلیدی را به تگ اضافه کنید که به موتورهای جستجو مراجعه می کنند، خوب است، اما همیشه اطمینان حاصل کنید که متن alt در خدمت هدف اصلی خود است، بیان اینکه چه تصویری برای هر کسی که نمی تواند فایل گرافیکی را ببیند.

ویژگی های دیگر

برچسب IMG همچنین دارای دو ویژگی دیگر است که شما ممکن است در استفاده از زمانی که شما قرار دادن گرافیک بر روی صفحه وب خود را - عرض و ارتفاع. برای مثال، اگر از یک ویرایشگر WYSIWYG مانند Dreamweaver استفاده کنید، این اطلاعات به صورت خودکار این اطلاعات را برای شما اضافه می کند. در اینجا یک مثال است:

ویژگی های WIDTH و HEIGHT به مرورگر اندازه تصویر می دهند. سپس مرورگر دقیقا می داند که چقدر فضا در طرح برای تخصیص است، و می تواند به عنصر بعدی در صفحه در حالی که دانلود تصویر حرکت می کند. مشکل استفاده از این اطلاعات در HTML شما این است که همیشه نمیتوانید تصویر خود را در اندازه دقیق نمایش دهید. به عنوان مثال، اگر یک وبسایت پاسخگو دارید که تغییر اندازه آن بر اساس صفحه نمایش بازدید کننده و اندازه دستگاه، شما همچنین می خواهید تصاویر خود را انعطاف پذیر کنید. اگر شما در HTML خود چه اندازه ثابت را مشخص می کنید، با استفاده از پرس و جو های رسانه ای پاسخگو CSS بسیار دشوار می شوید. به همین دلیل، و برای حفظ جدایی از سبک (CSS) و ساختار (HTML)، توصیه می شود که ویژگی های عرض و ارتفاع خود را به کد HTML اضافه نکنید.

یک نکته: اگر شما این دستورالعمل های اندازه گیری را خاموش کرده و یک اندازه را در CSS مشخص نکنید، مرورگر تصویر را به طور پیش فرض، اندازه بومی آن را نشان می دهد.

ویرایش توسط جرمی جیرارد