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

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

دسته بندی موضوعات
سفارش تبلیغات

تصاویر در HTML

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 فایل ضمیمه رو دانلود کنید .

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

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

دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • علیرضا کریمی نژاد

    با سلام و عرض ادب
    در توضیح خاصیت های اصلی عنصر img خاصیت width به اشتباه with تایپ شده است.
    صرفا جهت اطلاع و ممنون از این مطلب خوبتون.

    • میترا رحیمی

      سلام دوست عزیز
      ممنون ، اصلاح شد : )
      موفق باشید

  • ij

    لطفاً از هر کد نمونه هم بزارید تا ما ببینیم.

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟