تگ object در HTML
در این مطلب از آموزش html و css می خواهیم درباره تگ object در HTML صحبت کنیم. تگ object برای درج فایل های چند رسانه ای در یک صفحه وب می باشد. بنابراین لازم است که با ساختار و نحوه کدنویسی تگ object در HTML آشنا شوید و بدانید برای داشتن ارتباط درست یک شی به صفحات سایت چگونه کدنویسی کنید. بنابراین تا انتهای مطلب با ما همراه باشید تا تسلط کافی نسبت به این تگ پیدا کنید.
تگ Object در HTML چیست؟
تگ object در HTML یکی از مهمترین تگ های HTML می باشد. از تگ object برای ارتباط بین شی خارجی مثل فایل صوتی یا تصویری به صفحه html استفاده می شود. این تگ امکان ایجاد تغییر در اطلاعات را به برنامه نویس می دهد. همچنین با استفاده از تگ object می توان فایل درج شده را درج کرد. به طور کلی این تگ مانند یک ظرف یا اصطلاحا container می باشد که شما می توانید درون آن انواع فایل ها و اشیاء چند رسانه ای مانند فیلم، عکس، فایل های صوتی، فایل های فلش، فایل های PDF، فایل های ActiveX، اپلت های جاوا و حتی یک صفحه وب دیگر را قرار دهید. این نکته را به یاد داشته باشید برای نمایش تصاویر بهتر است از تگ img به جای تگ object استفاده کنید.
کاربرد تگ object در HTML
همانطور که بیان شد تگ object تگی است که به کمک آن می توان چیزهایی (مانند مانند صدا و فیلم) را درون یک سند HTML تعریف کرد. اما برای انتقال پارامترها به پلاگین هایی که با تگ object تعبیه شده اند، می توانید از تگ param استفاده کنید. تگ object در HTML می تواند در تگ Head و یا تگ Body قرار گیرد. متنی که بین تگ باز و بسته object می نویسید زمانی نمایش داده می شود که مرورگری از تگ object پشتیبانی نکند.
مثال از تگ object در HTML
مثال شماره ۱ : نمایش یک فایل PDF توسط تگ object در HTML
<body> <object data="files/test-object.pdf" width="500" height="300"></object> </body>
مثال شماره ۲ : نمایش یک فایل HTML
<body> <object data="files/test-object.html" width="500" height="300"></object> </body>
مثال شماره ۳ : نمایش عکس درون صفحه
<body> <object data="files/girls-1.jpg"></object> </body>
مثال شماره ۴ : قرار دادن سایت بی لرن در صفحه توسط تگ object در HTML
<body> <object data="https://belearn.ir/"></object> </body>
تگ object در HTML از چه مرورگرهایی پشتیبانی می کند؟
جدول صفات تگ object در HTML
| نام صفت | مقدار | توضیح |
|---|---|---|
| Data | URL | آدرس URL محتوایی که قرار است درون تگ Object نمایش داده شود. |
| Form | form_id | مشخص میکند که تگ Object متعلق به ۱ یا چند فرم می باشد. |
| Height | pixels | اندازه ارتفاع تگ Object را مشخص میکند. |
| Name | name | یک نام را برای تگ Object مشخص میکند. |
| Type | media_type | نوع رسانه ی محتوایی تگ Object را مشخص میکند. |
| Usemap | #mapname | نام یک نقشه تصویری را مشخص میکند. (برای ایجاد نقشه تصویری) |
| Width | pixels | اندازه عرض تگ Object را مشخص میکند. |
تفاوت تگ object در HTML 4.01 و HTML5
برخی از خصیصه های HTML 4.01 در HTML5 پشتیبانی نمی شوند. خصیصه form در HTML5 خصیصه جدیدی محسوب می شود. در HTML5، موارد مختلفی را می توان در فرم استفاده کرد و ارسال نمود. همچنین در HTML5 موارد مختلف چون صدا، تصویر، ویدیو و غیره نمی توانند در عنصر <head> یک سند ظاهر شوند.
خصوصیات ویژه تگ <object> در HTML5
| خصوصیت | مقدار | توضیحات |
|---|---|---|
| align | top bottom middle left right |
در HTML5 پشتیبانی نمی شود. تراز بندی عنصر <object> نسبت به عناصر اطراف را مشخص می کند. |
| archive | URL | در HTML5 پشتیبانی نمی شود. فضایی که لیستی از URL را برای بایگانی جدا می کند. بایگانی منابع مربوط به object است. |
| border | pixels | در HTML5 پشتیبانی نمی شود. پهنای border اطراف عنصر <object> را مشخص می کند. |
| classid | class_ID | در HTML5 پشتیبانی نمی شود. مشخص کننده مقدار Class ID برای شی مورد نظر، که در تنظیمات رجیستری ویندوز و یا در یک URL قرار گیرد. |
| codebase | URL | در HTML5 پشتیبانی نمی شود. مشخص می کند که code عنصر object کجا یافت می شود. |
| codetype | media_type | در HTML5 پشتیبانی نمی شود. نوع media برای کدی که اشاره به صفت classid دارد را مشخص می کند. |
| data | URL | مشخص کننده URL منابعی که برای object مورد استفاده قرار می گیرد. |
| declare | declare | در HTML5 پشتیبانی نمی شود. مشخص می کند که object فقط باید معرفی شود و تا زمانی که نیاز نیست ایجاد یا نصب نشود. |
| form | form_id | مشخص کننده یک یا بیشتر فرم هایی که object متعلق به آنهاست. |
| height | pixels | ارتفاع عنصر object را مشخص می کند. |
| hspace | pixels | در HTML5 پشتیبانی نمی شود. فضای خالی چپ و راست عنصر object را مشخص می کند. |
| name | name | یک name برای عنصر object مشخص می کند. |
| standby | text | در HTML5 پشتیبانی نمی شود. مشخص کننده متنی که هنگام لود شدن object نمایش داده می شود. |
| type | media_type | نوع media داده که در صفت data مشخص شده را تعریف می کند. |
| usemap | #mapname | مشخص کننده name برای نقشه تصویری سمت کاربر که با object مورد استفاده قرار می گیرد. |
| vspace | pixels | در HTML5 پشتیبانی نمی شود. فضای خالی بالا و پایین عنصر object را مشخص می کند. |
| width | pixels | عرض عنصر object را مشخص می کند. |
پشتیبانی تگ object در HTML از صفات و رویدادهای عمومی
تگ جدول از صفات عمومی (Global Attributes) و نیز از رویدادهای عمومی (Event Attributes) در HTML پشتیبانی می کند.
دستورات CSS پیش فرض ذز تگ object
معمولا مرورگرها تگ object را بصورت پیش فرض با دستورات CSS زیر نمایش می دهند:
object:focus {
outline: none;
}
تگ param در object چیست؟
تگ param درون تگ object در html استفاده می شود و کارش تعیین پارامترهای تنظیمی برای پلاگین اجرا کننده فایل موجود در تگ object می باشد. در مقابل ویژگی name در تگ param می‌توانید یک نام دلخواه برای پارامتر تنظیمی تعیین کنید. در مقابل ویژگی value نیز می توانید یک مقدار برای نامی که در ویژگی name تعریف شده مشخص نمایید. عبارت هایی که شما در مقابل ویژگی های name و value تعیین می کنید می تواند بسته به نوع فایل استفاده شده در تگ object متغیر باشد.
مثلا اگر فایل شما از نوع swf که مخصوص فایل های فلش است باشد، می توانید در مقابل ویژگی name عبارت src را نوشته و در مقابل ویژگی value هم آدرس فایل منبع را بنویسید. یا مثلا در مقابل ویژگی name عبارت quality به معنی کیفیت را نوشته و در مقابل ویژگی value هم یکی از مقادیر low (کم)، medium (متوسط) و یا high (زیاد) را وارد کنید. حتی می توانید در مقابل عبارت name عبارت loop به معنی تکرار را نوشته و در مقابل ویژگی value هم مقدار true جهت تکرار فایل یا false جهت عدم تکرار فایل را بنویسید.
مثال اول از نحوه کارکرد تگ param
<object data="helloworld.swf" width="300" height="300">
<param name="src" value="helloworld.swf" />
<param name="quality" value="low" />
<param name="loop" value="true" />
مرورگر شما از تگobjectپشتیبانی نمی کند </object>
فرض کنید فایل شما از نوع فایل های نمایشی مانند فیلم یا صدا باشد. در چنین حالتی می توانید در مقابل ویژگی name عبارت autoplay به معنی اجرای خودکار را نوشته و در مقابل ویژگی value نیز مقدار true جهت اجرای خودکار فایل و یا false جهت عدم اجرای خودکار فایل را بنویسید. یا مثلا می توانید در مقابل ویژگی name عبارت controller به معنی کنترل کننده را بنویسید و سپس در مقابل ویژگی value عبارت true جهت نمایش کنترل کننده های صوتی و تصویری و یا عبارت false جهت تعیین عدم نمایش کنترل کننده های صوتی و تصویری را بنویسید. یا حتی می توانید در مقابل ویژگی name عبارت scale به معنی مقیاس را نوشته و در مقابل ویژگی value هم یک عدد صحیح برای تعیین مقیاس بزرگ نمایی فیلم وارد کنید.
مثال دوم از نحوه کارکرد تگ param
<object data="helloworld.avi" width="300" height="300">
<param name="autoplay" value="true" />
<param name="controller" value="true" />
<param name="scale" value="6" />
مرورگر شما از تگ object پشتیبانی نمی کند
</object>
البته باید ذکر شود که این پارامترها زیاد هستند و شما می توانید آنها را در دنیای وب جستجو نمایید.
تگ embed در object چیست؟
تگ embed در اصل یک ظرف یا container برای یک فایل خارجی یا محتوای تعاملی مثل پلاگین است. از این تگ بیشتر جهت اجرای فایل های چند رسانه ای مانند فیلم، صدا، فایلهای فلش، فایل pdf و غیره استفاده می شود. این تگ از نوع تگ های Unpaired Tags یاغیرجفت بوده و در نتیجه در داخل آن نمی توانید مانند تگ object در html از متن جایگزین برای مرورگرهایی که این تگ را پشتیبانی نمی کنند، استفاده نمایید.
در کل کارکرد این تگ از تگ object در HTML آسان تر است، زیرا درون این تگ لازم نیست که شما از تگ param جهت تعیین پارامترهای تنظیمی برای پلاگین بهره ببرید. این تگ در HTML5 اضافه شده و استفاده از این تگ در HTML4 فاقد اعتبار است. برای اجرای فایل درون این تگ در سیستم کاربر باید پلاگین (Plug-in) مربوط به فایل در مرورگر کاربر نصب باشد.
معرفی ویژگی یا صفت src
مهمترین ویژگی تگ embed ویژگی src می باشد که در مقابل آن باید آدرس فایل چند رسانه ای را وارد نمایید.
مثال:
<embed src="myflashfile1.swf">
معرفی ویژگی یا صفت های width و height
همچنین به وسیله ویژگی های width و height در تگ <embed> می توانید به ترتیب پهنا و ارتفاع محدوده نمایش فایل را تعیین نمایید.
مثال:
<embed src="myflashfile1.swf" width="200" height="200" style="border:1px solid">
معرفی ویژگی یا صفت type
از ویژگی type در تگ <embed> جهت تعیین نوع فایلی که آدرس آن را در مقابل ویژگی src تعیین کردید، استفاده می شود.
مثال:
<embed src="myflashfile2.swf" type="application/x-shockwave-flash">
این تگ ویژگی های دیگری نیز دارد که امروزه منسوخ (Deprecated) شده اند.
سخن پایانی
در این مطلب به طور کامل درباره تگ object در HTML، ساختار و نحوه بکارگیری آن در یک سند به همراه چندین مثال صحبت کرده ایم. با مطالعه این مطلب تسلط کافی بر روی مبحث تگ تگ object و نحوه کدنویسی حالات مختلف آن خواهید داشت و می توانید فایل های صفحات وب خود را با کمک این تگ جاگذاری کنید.
برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید.
اگر از مطالعه این مطلب لذت بردید، می توانید آن را در شبکه های اجتماعی خود به اشتراک بگذارید تا دوستان شما نیز از آن بهره ببرند.
دیدگاهتان را بنویسید