تصاویر در HTML

در این مقاله خواهید آموخت که چگونه در طراحی صفحات وب، بتوانید تصاویر را به کار بگیرید و بتوانید در طراحی سایت خودتان، از تصاویر استفاده کرده و آن ها را به سند HTML وارد کنید. برای درک بهتر، ابتدا به نمونه کد html زیر دقت کنید:

[html]
<html>
<body>
<p>
An image:
<img src="smiley.gif" alt="Smiley face" width="32" height="32" />
</p>
<p>
A moving image:
<img src="hackanm.gif" alt="Computer man" width="48" height="48"/ >
</p>
<p>
Note that the syntax of inserting a moving image is no different from a non-moving image.
</p>
< / body>
</html>
[/html]

تگ  < img> و صفت  Src :

در HTML ، تصاویر با تگ <img> تعریف می شوند.

تگ <img> خالی می باشد، بدین معنی است که این تگ  فقط حاوی موجودیت ها (مانند آدرس عکس و …) می باشد و تگ پایانی ندارد.

از صفت  Src ،   برای نمایش تصویر در یک صفحه، استفاده می شود. SRC مخفف “source” است. مقدار این صفت، همان آدرس تصویری است که میخواهید آن را در صفحه ی وب خودتان داشته باشید.

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

</”img src=”url” alt=”some_text>

در تعریف فوق، URL اشاره  به محلی دارد که در آن تصویر ذخیره شده است. به عنوان مثال، یک تصویر با نام Logo-web-design.png ، واقع در دایرکتوری  images بر روی دامنه ی اصلی www.onliner.ir دارای این url  است :

https://www.onliner.ir/images/Logo-web-design.png

مرورگرها تصاویر را بر مبنای تگ img نشان می دهند. اگر شما تگ تصویر را بین دو پاراگراف قرار دهید، مرورگر ابتدا پاراگراف اول ، سپس تصویر را نشان می دهد و سپس پاراگراف دوم نشان داده می شود.

آدرس دهی مطلق و آدرس دهی نسبی در طراحی صفحات وب:

در طراحی صفحات وب، جهت استفاده از تصاویر نیاز به دانستن انواع روش های آدرس دهی دارید. برای آشنایی با این روش ها، حتما راجع به آدرس دهی مطلق و آدرس دهی نسبی، تحقیق مناسبی داشته باشید.

عکس ها درHTML ، صفت  Alt:

در صورتی که بنا به هر دلیلی، اعم از پاک شدن تصویر و یا تنظیمات مرورگر، تصویر قابل نمایش نباشد، با استفاده از صفت  Alt می توان یک متن را جایگزین یک تصویر کرد.

به عنوان مثال:

[html]
< img src="boat.gif" alt="Big Boat"/>
[/html]

در این مثال اگر تصویر به هر دلیلی لود نشود مقدار صفت alt یعنی Big Boat نشان داده می شود.

صفت Alt اطلاعات جایگزین یک تصویر را برای مواقعی که  تصویر برای کاربر قابل نما یش نیست (به دلیل اتصال کند و یا سرعت پایین اینترنت، خطا در صفت  Srcو…)را فراهم می کند.

نکته ی سئو:

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

تنظیم ارتفاع و عرض تصویر(Height and width):

صفات height و width به ترتیب ارتفاع و عرض تصویر را مشخص می کنند. این مقادیر به طور پیش فرض با پیکسل  مشخص می شوند.
به عنوان مثال:

</” img src=”pulpit.jpg” alt=”Pulpit rock” width=”304″ height=”228>

که مثال بالا تصویری با عرض 304 و ارتفاع 228 پیکسل را نمایش خواهد داد.

اگر صفت های  ارتفاع و پهنای یک تصویر تنظیم شوند ، هنگامی که صفحه لود می شود فضای مورد نیاز برای تصویر محفوظ است. با این حال، بدون این صفات، مرورگر، اندازه تصویر را نمی داند.

اندازه ی حقیقی و اندازه ی حالت نمایش تصاویر

یکی از مسائل واقعا با اهمیت در طراحی صفحات وب، بیان وجه تمایز میان اندازه ی واقعی تصاویر و اندازه ای است که تصاویر به نمایش در می آیند. بعنوان مثال، ممکن است تصویر شما در ابعاد 800*600 پیکسل باشد، اما در اندازه ی 150*200 پیکسل به نمایش در بیاید، و این در حالیست که اندازه ی تصویری که لود شده است، همان تصویر 600*800 هست؛ یعنی به همان اندازه لود سایت طول می کشد و به همان اندازه از منابع و پهنای باند سرور میزبان سایت استفاده می شود. اندازه ی حالت نمایش تصاویر را می توان به وسیله ی css و یا صفت های html در تگ img کنترل کرد؛ اما تغییر اندازه ی حقیقی نمایش تصاویر، یا باید قبل از آپلود شدن تصاویر و توسط برنامه های گرافیکی ای مانند فتوشاپ انجام شود و یا بعد از آپلود شدن، توسط اسکریپت نویسی های تحت سرور مانند برنامه نویسی با php انجام بشود.

آنلاینر این نوع خدمات (تغییر اندازه ی حقیقی تصاویر با اسکریپت نویسی) را برای طراحی سایت های سرویس طلایی خودش انجام می دهد. شما نیز می توانید سفارش طراحی سایت خودتان را به آنلاینر بسپارید.

نکات پایه ای — اطلاعات مفید

توجه: اگر یک فایل HTML حاوی ده تصاویرباشد — یازده فایل برای درست نشان دادن صفحه مورد نیاز است. بارگذاری تصاویر طول می کشد ، بنابراین بهترین توصیه من این است از تصاویر به دقت استفاده کنید.

توجه: هنگامی که یک صفحه وب بارگذاری می شود ، این مرورگر است که در واقع در آن لحظه، تصویر را از وب سرور دریافت و آن را در صفحه درج می کند. بنابراین ، مطمئن شوید که تصاویر در همان نقطه در ارتباط با صفحه وب باقی مانده، در غیر این صورت بازدید کنندگان شما یک آیکون لینک خراب را دریافت می کنند. در صورتی که مرورگر نتواند تصویر را پیدا کند آیکون لینک خراب نشان داده می شود.

به این صفحه رتبه دهید

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشاوره رایگان
Scroll to Top