این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ object در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ object در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Object در HTML
تگ object که در لغت به معنای [ شی ٔ ] می باشد، تگی است که با استفاده از آن میتوان یک شی ( منظور از شی در اینجا چیزی است که در خارج از یک صفحه وب قرار دارد ) را درون یک صفحه وب قرار داد.
مثلا یه سایت ، عکس ، ویدئو ، فایل PDF و.. را میتوان با استفاده از این تگ درون یک صفحه وب دیگر قرار داد.
در کل میشه عکس ، ویدئو ، سایت و.. رو از طریق این تگ درون یک صفحه وب قرار داد، ولی خب بهتره ازش استفاده نکنید چون تاحدودی نیاز نیست، مثلا برای عکس گذاشتن در صفحه خب باید از تگ img استفاده کنیم یا مثلا برای گذاشتن آهنگ و ویدئو باید از تگ های audio و video استفاده کرد، یا مثلا برای قرار دادن فریم در سایت باید از تگ iframe استفاده کرد.
Free-Learn
مثال از تگ object در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : نمایش یک فایل PDF
|
1 2 3 4 5 |
<body> <object data="files/test-object.pdf" width="500" height="300"></object> </body> |
مثال شماره ۲ : نمایش یک فایل HTML
|
1 2 3 4 5 |
<body> <object data="files/test-object.html" width="500" height="300"></object> </body> |
مثال شماره ۳ : نمایش عکس درون صفحه
|
1 2 3 4 5 |
<body> <object data="files/girls-1.jpg"></object> </body> |
مثال شماره ۴ : قرار دادن سایت آموزشی فری لرن در صفحه
|
1 2 3 4 5 |
<body> <object data="https://free-learn.ir/"></object> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ object در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ 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 را مشخص میکند |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ object از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- تگ
objectباید درون تگ body قرار بگیرد و هر متنی که در بین این تگ قرار بگیرد، اگر مرورگر کاربر از تگ object پشتیبانی نکند آن متن به نمایش در خواهد آمد. ( مثله کد زیر )
|
1 2 3 |
<object data="MyFile.pdf"> شرمنده مثله اینکه مرورگر شما از این تگ پشتیبانی نمی کند. </object> |
- تگ object فایل های PDF رو داخل صفحه نمایش های بزرگ ( کامپیوتر ، لپ تاپ ) نشون میده ولی در برخی از گوشی های موبایل نشون نمیده، پس بهترین کار اینه از تگ Iframe برای نمایش فایل های PDF استفاده کنید. ( مثال )
- ویدئو بزاری داخل صفحه ( از تگ video استفاده کن ) ( مثال )
- آهنگ بزاری داخل صفحه ( از تگ audio استفاده کن ) ( مثال )
- یک سایت بزاری داخل صفحه ( از تگ iframe استفاده کن ) ( مثال )
- یک فایل pdf بزاری داخل صفحه ( بهترین گزینه استفاده از تگ iframe ) ( مثال )
- عکس بزاری داخل صفحه ( از تگ img استفاده کن ) ( مثال )
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ object را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
object:focus { outline: none; } |
