تگ های مرتبط با کار با تصاویر در html

تگ های مرتبط با کار با تصاویر در html

در جلسه نهم آموزش جامع html سایت بیست آموز به به یکی از پرکاربردترین و مهم ترین مباحث html یعنی کار با تصاویر در html می رسیم.

  • استفاده از تصاویر در صفحات وب کاربرد بسیار زیادی در جذابیت بخشی به مطالب دارد.
  • در صورتیکه شما از تصاویر به صورت بهینه و مناسب استفاده نمایید ، می توانید علاوه بر جذاب تر و کاربرپسندتر کردن مطالب ، باعث افزایش محبوبیت سایتتان در رتبه بندی یا SEO موتورهای جستجو داشته باشید.
  • تا می توانید از تصاویر خوب و با کیفیت و در عین حجم پایین در صفحات وب استفاده نمایید.

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

تگ های مرتبط با کار با تصاویر در html

بخش اول – فرمت های تصویری قابل استفاده در صفحات وب

  • انواع فرمت های تصویری که می توانیم در طراحی سایت استفاده کنیم.
  • کدام فرمت تصویری برای استفاده در صفحات وب مناستر است؟
  • مقایسه کیفی و کمی فرمت های تصویری پرکاربرد در صحات وب

هشدار-اصلی-فیلم

درحال بارگذاری...

بخش دوم- معرفی روش های بهینه سازی تصاویر

  • دلیل بهینه سازی یا Optimize کردن تصاویر
  • معرفی سایت های برتر بهینه سازی تصاویر

هشدار-اصلی-فیلم

درحال بارگذاری...

بخش سوم- کار با تگ <img>

  • معرفی تگ <img> 
  • آشنایی با صفت src در تگ img
  • آشنایی با روش های مختلف مسیردهی فایل در زمان اضافه کردن تصاویر
  • آشنایی با صفت alt در تگ img
  • معرفی صفت های width و height جهت تعیین پهنا و ارتفاع تصاویر
  • دستورات پرکاربرد css در زمان کار با تصاویر
  • آشنایی با صفت title در تگ img

هشدار-اصلی-فیلم

درحال بارگذاری...

بخش چهارم – تصاویر پیوند دار (liked Images) و تنظیم حاشیه کادر برای تصاویر

  • نحوه ایجاد تصاویر پیوند دار (liked Images) در طراحی صفحات وب
  • روش ایجاد حاشیه دور کادر تصاویر با استفاده از دستورات css
  • روش ایجاد حاشیه گرد برای دور کادر تصاویر با استفاده از دستورات css

هشدار-اصلی-فیلم

درحال بارگذاری...

بخش پنجم – شناور سازی تصاویر یا (image Floating)

  • دلیل استفاده از شناور سازی تصاویر در صفحات وب
  • روش شناور سازی تصاویر با استفاده از دستور float در css

هشدار-اصلی-فیلم

درحال بارگذاری...

بخش ششم- نحوه ایجاد نقشه تصویر یا Image Map در html

  • دلیل استفاده از نقشه تصویر یا Image Map در صفحات وب
  • معرفی تگ باز و بسته ی <map></map>
  • معرفی صفت name در تگ map
  • معرفی تگ باز و بسته ی <area></area> 
  • معرفی صفت shape در تگ area
  • معرفی صفت coords در تگ area
  • معرفی صفت alt  در تگ area
  • معرفی صفت href در تگ area
  • معرفی روش آسان تعیین مختصات تصاویر جهت استفاده در نقشه تصویر یا Image Map

هشدار-اصلی-فیلم

درحال بارگذاری...

بخش هفتم – نحوه تعیین رنگ یا تصویر پشت زمینه در صفحات وب

  • دلیل استفاده از رنگ یا تصویر پشت زمینه در صفحات وب
  • معرفی دستورات مهم کار با تصاویر در css
  • معرفی دستور background-image
  • معرفی دستور background-color

هشدار-اصلی-فیلم

درحال بارگذاری...

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

  • نحوه ایجاد تصاویر واکنش گرا با استفاده از دستورات css
  • ضعف واکنش گرایی تصاویر با استفاده از دستورات css
  • معرفی تگ باز و بسته ی <picture></picture>
  • دلیل استفاده از تگ picture
  • معرفی تگ باز و بسته ی <source></source>

هشدار-اصلی-فیلم

درحال بارگذاری...

بخش نهم- کار با تگ های <figure></figure>و <figcation></figcaption>

  • معرفی تگ باز و بسته ی <figure></figure>
  • دلیل استفاده از تگ figure
  • روش صحیح استفاده از تگ figure
  • معرفی تگ <figcaption></figcaption>  و روش استفاده صحیح از آن.

هشدار-اصلی-فیلم

درحال بارگذاری...