آموزش کار با تصاویر در HTML

در این مقاله در ادامه مطالب آموزش طراحی سایت به آموزش کار با تصاویر در HTML می پردازیم.

تصاویر می توانند شکل و شمایل ظاهری یک وب سایت را زیبا کنند.

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

HTML آموزش کار با تصاویر در

برای اضافه کردن عکس به یک سند HTML از تگ img استفاده می شود و آدرس عکس به src داده می شود.

HTML آموزش

در این مثال، با استفاده از تگ img عکس به صفحه اضافه شده و مقدار alt (Alternative Name) یا همان نام مشابه عکس، به آن اضافه شده. همچنین با استفاده از width و height به عکس عرض و ارتفاع داده شده است. نتیجه کد بالا را می توانید در زیر مشاهده کنید:

آموزش طراحی سایت

قاعده ی نوشتاری تصاویر HTML

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

  • src - مسیر به عکس را مشخص می کند
  • alt - یک متن جایگزین به جای عکس مشخص می کند

HTML آموزش کار با تصاویر در

ویژگی src

ویژگی src، مسیر (URL)  عکس را مشخص می کند.

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

آموزش طراحی سایت

HTML آموزش کار با تصاویر در

ویژگی alt

این ویژگی یک متن جایگزین را برای عکس در صورتی که کاربر به دلایلی نتواند عکس را ببیند فراهم می کند، (بخاطر سرعت ضعیف اینترنت، یک ارور در src و یا وقتی که کاربر از یک screen reader استفاده می کند)

مقدار ویژگی alt باید عکس را عنوان کند.

اگر مرورگر قادر به پیدا کردن یک تصویر نباشد، مقدار ویژگی alt را نشان می دهد.

HTML آموزش کار با تصاویر در

HTML آموزش

سایز تصویر – عرض و ارتفا

شما می توانید از ویژگی style برای تنظیم کردن عرض و ارتفای یک تصویر استفاده کنید.

آموزش طراحی سایت

در مثال بالا، با استفاده از ویژگی style عرض و ارتفاع عکس مشخص شده اند که نتیجه آن را می توانید در زیر مشاهده کنید:

HTML آموزش

به جای آن می توانید از ویژگی های width و height هم استفاده کنید:

HTML آموزش کار با تصاویر در

HTML آموزش

ویژگی های width و height همیشه عرض و ارتفای تصویر را در پیکسل تعریف می کنند.

عرض و ارتفا یا Style؟

همه ی این ویژگی ها در HTML معتبر می باشند. اما در هر صورت، ما استفاده از ویژگی style را پیشنهاد می کنیم، زیرا این ویژگی از تغییر دادن سایز عکس ها توسط styles sheets جلوگیری می کند.

HTML آموزش Images در

HTML آموزش Images در

تصاویر یک پوشه دیگر

اگر شما تصاویر خود را در یک زیرپوشه در اختیار دارید، باید نام فولدر را در ویژگی src قرار دهید:

آموزش طراحی سایت

در این مثال، تصویر درون پوشه images است که با فرمت ذکر شده به آن دسترسی پیدا می کنیم.

HTML آموزش

تصاویر روی یک سرور دیگر

برخی از وب سایت ها تصاویر خود را در یک سرور دیگر نگه داری می کنند:

HTML آموزش

HTML آموزش

تصاویر انیمیشنی

HTML از GIF پشتیبانی می کند:

آموزش تصاویر

HTML آموزش

تصاویر بعنوان لینک

به منظور استفاده از یک تصویر به عنوان یک لینک، تگ img را داخل یک تگ a قرار دهید:

آموزش تصاویر

در این مثال، تگ img داخل تگ a تعریف شده که خاصیت لینک را به تصویر داده است. حال اگر کسی روی تصویر کلیک کند، به صفحه default.asp منتقل خواهد شد.

آموزش طراحی سایت

شناوری تصاویر

از مشخصه ی float برای شناور کردن تصویر به چپ و راست یک متن استفاده کنید:

HTML آموزش

با استفاده از float می توانیم هر تصویری را به صورت شناور در صفحه وب قرار دهیم. در این مثال تصویر از به سمت راست و تصویر دوم به سمت چپ شناور شده است و عرض و ارتفاع هر دو از طریق style تعیین شده است.

HTML آموزش

فرمت های متعارف تصاویر

این لیستی از متعارف ترین فرمت های تصویر می باشد که در تمام مرورگرها پشتیبانی می شوند:

آموزش طراحی سایت

همچنین در مقالات بعدی با یادگیری عناوینی مانند image map می توانید روی تصاویر خود نقاط قابل کلیک شدن ایجاد کنید، در مقاله تصاویر پس زمینه می توانید برای عناصر خود تصاویر پس زمینه بگذارید و با یادگیری Picture Element می توانید تصاویر خود را Responsive یا واکنش گرا کنید.

آموزش طراحی سایت آموزش HTML آموزش کار با تصاویر در HTML آموزش کار با IMAGES در HTML