بخش های اصلی

آموزش HTML 5

آموزش HTML - عکس‌ ها (HTML Images)

عکس‌ها ظاهر و مفهوم بسیاری در مفاهیم را در صفحات وب بهبود می‌بخشند.

گذاشتن عکس در فایل HTML

وب فقط متنی نیست، بلکه چندرسانه‌ای است و ویژگی چندرسانه‌ایِ HTML به شما امکان اضافه کردن عکس‌ها، کلیپ‌های صوتی، کلیپ‌های تصویری و دیگر عناصر چندرسانه‌ای را در صفحات وب می‌دهد.

تگ برای اضافه کردن عکس‌ها به فایل HTML استفاده می‌شود. این تگ جزء تگ‌های خالی (empty tags) بوده و فقط خصیصه می‌گیرد. شکل دستوری تگ می‌تواند بصورت زیر باش:

 

مثال زیر سه عکس، به صفحه‌ی وب اضافه می‌کند:

مثال

 

نکته: مثل تگ
، عنصر نیز یک عنصر خالی (empty element) است و تگ پایان ندارد. در XHTML این تگ بطور خودکار با “/>” بسته می‌شود.

خصیصه Src از عکس‌ها (Images)

هر عکس دارای یک خصیصه src است (src مخفف کلمه source (منبع)است). خصیصه src به مرورگر می‌گوید که عکسی که می‌خواهید نمایش دهید را از کجا بیابد. مسیر عکس (URL) از طریق مقدارِ خصیصه src، (که به مکان قرارگیریِ جایی که عکس ذخیره شده، اشاره می‌کند)، فراهم می‌شود. برای مثال ، عکسی با نام “sky.jpg”، که در مستقیماً در پوشه “images” و در www.softskill.ir گرفته دارای مسیر (URL) : http://www.softskill.ir/images/sky.jpg است.

 

خصیصه Alt از عکس‌ها

خصیصه alt یک توضیح جایگزین برای عکس است، البته درصورتی‌که عکس نمایش داده نشود. مقدار (value) خصیصه alt یک متنی است که توسط نویسنده تعریف می‌شود.

 

نکته: زمانیکه کاربر بنابه هر دلیلی مثل سرعت پایین اینترنت، خطا در خصیصه src یا اگر کاربر از صفحه‌خوان استفاده کند (screen reader)، نتواند عکس را ببیند، خصیصه ضروری alt، اطلاعات جایگزین را نشان می‌دهد.

تنظیم عرض و ارتفاع (width and height) عکس

خصیصه‌های width و height برای تعیین عرض و ارتفاع عکس به کار می‌روند. مقادیر (value) خصیصه‌ها معمولاً با واحد پیکسل (pixel) تعریف می‌شوند.

مثال

 

نکته: استفاده از هر دو خصیصه width و height برای یک عکس تمرین خوبی است. بدون این خصیصه‌ها، عکس با سایز اصلی خودش بارگذاری می‌شود و ممکن است باعث ناهماهنگی یا بد نمایش داده شدن در پیش‌نمایشِ وب‌سایتتان شود.

تگ‌های عکس (image) HTML

تگ

توضیحات

 

یک عکس را تعریف می‌کند.

 

یک image-map را تعریف می‌کند.

یک ناحیهِ قابل کلیک کردن داخل image-map تعریف می‌کند.

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

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش HTML 5

Learn HTML 5

سرفصل ها

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد