آموزش طراحی وب

تصاویر در HTML

در این جلسه ی آموزشی در رابطه با تصاویر در صفحات وب و Image map صحبت می کنیم .

img

فصل سوم ( معرفی ساختار  HTML4 )

جلسه هفتم (تصاویر در HTML )

سلام خدمت همراهان عزیز مدرسه مجازی ایرانیان

در این جلسه راجع به تصاویر در HTML صحبت می کنیم . گاهی اوقات نیاز داریم که تصاویر متعددی رو به صفحات وب اضافه کنیم یا تصاویری رو به صفحات دیگه لینک بدیم و یا حتی روی قسمت های مختلف یک تصویر لینک های متعدد ایجاد کنیم . خوب همه ی این موارد رو تواین جلسه بررسی می کنیم .

 درج تصویر در صفحه وب

با استفاده از عنصر <img> شما می تونید به راحتی هر تصویری که دلتون میخواد به صفحه ی وبتون اضافه کنید . دستور کلی این عنصر به شکل زیر هست :

 

این عنصر ۴ خاصیت اصلی داره :

خاصیت src : اصلی ترین خاصیت این عنصر ، src هست که آدرس تصویر رو مشخص میکنیم .

خاصیت alt : خاصیت پرکاربرد و مهم این عنصر هست که توضیحاتی رو در رابطه با تصویر در این خاصیت قرار میدیم . زمانی که صفحه لود بشه اما تصویر با مشکل مواجه بشه و مشخص نباشه چه تصویری پشت صحنه هست ، توضیحات این خاصیت هست که کاربر و راهنمایی می کنه که چه تصویری در این مکان قرار داره . مثلا شما یک عکس از یک اسب داخل صفحه ی وبتون درج می کنید ، مقدار خاصیت alt رو با متن ” تصویر اسب ” پر می کنید . حالا اگر لود تصویر با مشکل مواجه بشه و کاربر اون تصویر رو نبینه ، نوشته ای رو میبینه با عنوان ” تصویر اسب ” و متوجه میشه این تصویری که لود نشده ، تصویر یک اسب هست .

خاصیت title : متن title زمانی به کاربر نمایش داده میشه ، که کاربر موس رو روی تصویر نگه داره ، همچنین مقدار این خاصیت تاثیر بسیار زیادی با سئوی تصاویر داره . تصاویر چون متن نیستن توی گوگل هم ایندکس نمیشن و توی نتایج جستجوها نمایش داده نمیشن . فقط در یک صورت این تصاویر در نتایج جستجو ظاهر میشن که دارای خاصیت title باشن .

خاصیت width : عرض تصویر رو مشخص میکنه .

خاصیت height : ارتفاع تصویر رو مشخص میکنه.

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

برای لینک کردن تصاویر ، میتونید خیلی راحت از عنصر <a> استفاده کنید :

 

لینک بخش های مختلف تصویر به صفحات دیگر

برای لینک  کردن قسمت های مختلف یک تصویر ، باید از map و area استفاده کنیم . به کد زیر دقت کنید :

 

ما یک تصویر تو صفحه قرار دادیم با خاصیت هایی که در ابتدای جلسه گفتم . تنها تفاوت این تصویر دارا بودن خاصیت usemap هست . اتصال بین عنصر <map> و عنصر <img> با خاصیت usemap و  مقدار id عنصر map انجام میشه .

درون عنصر map عنصری به نام area وجود داره که محیط رو بر اساس مختصات انتخاب می کنه و به مقصد مورد نظر لینک می کنه ؛ دارای خاصیت های زیر هست :

Alt : متن جایگزین برای اون ناحیه رو مشخص می کنید .

Coords : مختصات ناحیه رو مشخص می کنید .

Download : لینک دانلود رو مشخص می کنید .

Href : لینک مقصد رو مشخص می کنید .

Hreflang : زبان لینک مقصد رو مشخص می کنید .

Rel : رابطه بین سند جاری و URL مورد نظر رو تعیین می کنید .

Shape : نوع اشکال ناحیه رو مشخص می کنید . این خاصیت دارای ۴ مقدار زیر هست :

  • Default : شکل پیشفرض
  • rect : مستطیل
  • circle : دایره
  • poly : اشکال نامنظم

Target : نحوه باز شدن پنجره ی صفحه ی مقصد رو مشخص می کنید . این خاصیت دارای ۴ مقدار زیر هست :

_blank , _parent , _self , _top :  توضیحات هر کدوم و تو جلسه قبل دادم .

خوب حالا چطور میتونیم این مختصات رو مشخص کنیم ؟ شما به راحتی میتونید توسط نرم افزار Dreamweaver هر تصویری که میخواین رو تقسیم بندی کنید و برای هر قسمت لینک ایجاد کنید . میتونید تو تصویر زیر ScreenShot این بخش رو ببینید:

dreamweaver

برای درک بهتر از image map فایل ضمیمه رو دانلود کنید .

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

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۵

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین