HTML iframe: مثال و ویژگی های برنامه. نحوه درج iframe در HTML: مثال استفاده از کدام مرورگرها از تگ iframe پشتیبانی می کنند

دستورالعمل ها

زبان HTML(زبان نشانه گذاری HyperText - "زبان نشانه گذاری فرامتن") دو نوع فریم را ارائه می دهد. "شناور" انعطاف پذیرتر است و راحت تر در یک موجود قرار می گیرد. به طور کلی، ساختاری که قرار دادن یک پنجره با استفاده از یک قاب شناور را توصیف می کند، به صورت زیر است: در اینجا منبع داده این فریم سایت موجود (ویژگی src) است. همانطور که در ویژگی های عرض و ارتفاع مشخص شده است، در یک فریم به ابعاد 400 در 300 باز می شود. همچنین می توانید صفحه سایت خود را در ویژگی src مشخص کنید. در این مورد، کافی است یک آدرس نسبی (یعنی آدرسی نسبت به صفحه ای که قاب در آن درج شده است) مشخص شود: در این مثال، ارتفاع فریم مشخص نشده است، اما یک ویژگی id وجود دارد. با استفاده از آن می توانید با استفاده از CSS() ابعاد مورد نیاز را برای این قاب تنظیم کنید:

نوع دیگری از قاب ها - "کلاسیک" - به صفحه جداگانه ای نیاز دارد که حاوی توضیحات ساختار قاب ها باشد. خود فریم ها در صفحات جداگانه، شاید حتی در سایت های جداگانه قرار خواهند گرفت. کد HTML برای چنین صفحه کانتینری برای فریم ها ممکن است به شکل زیر باشد:




بدون بلوک ... و ... ، که برای صفحات معمولی مورد نیاز است، در این مثال، تگ کانتینر باز نیست حاوی ویژگی rows است - این بدان معنی است که فضای صفحه باید به صورت عمودی تقسیم شود و اولین فریم داده می شود قسمت بالا. اگر ردیف ها را با cols جایگزین کنید، تقسیم افقی خواهد بود. مقدار این ویژگی "*،*" نشان می دهد که نسبت های تقسیم برابر هستند - هر کدام 50٪. اگر مثلاً «20%*» را مشخص کنید، فقط 20 درصد به فریم اول داده می شود و بقیه فضا به فریم دوم داده می شود فریم ها را با ماوس، اما می توان این عمل را ممنوع کرد. برای این کار باید ویژگی noresize را به تگ یک فریم خاص اضافه کنید. همچنین می‌توانید اندازه حاشیه‌های عمودی و افقی را از فریم مجاور مشخص کنید (ویژگی‌های marginwidth و marginheight): امکان تنظیم قوانین رفتاری برای نوارهای اسکرول هر فریم به طور جداگانه وجود دارد. این کار با استفاده از ویژگی اسکرول انجام می شود که می تواند یکی از سه مقدار از پیش تعریف شده را داشته باشد. اگر scrolling="auto" را مشخص کنید، نوارهای پیمایش زمانی ظاهر می شوند که محتویات کادر در محدوده آن قرار نگیرد. اگر "بله" - نوارها به طور مداوم وجود خواهند داشت، صرف نظر از اینکه آیا آنها مورد نیاز هستند یا خیر. اگر "نه" - به این معنی است که نوارهای اسکرول برای این قاب غیرفعال هستند.

بر اساس اطلاعات ارائه شده در دو مرحله قبل، باید کد html را بسازید که برای حل مشکل شما مناسب تر باشد. پس از آن، تنها چیزی که باقی می ماند این است که آن را در کد منبع صفحه وارد کنید. برای انجام این کار، می توانید از ویرایشگر صفحه سیستم مدیریت سایت خود استفاده کنید - در آن باز کنید صفحه مورد نظر، به حالت ویرایش کد html بروید و کد خود را در محل مورد نظر در صفحه قرار دهید. میتونی فایل رو دانلود کنی؟ کد منبعمیزبانی مدیریت فایل منیجر صفحه یا سیستم مدیریت محتوا، آن را در آن باز کنید ویرایشگر متنو کد را در آن قرار دهید. و سپس از همان روش برای آپلود کد تغییر یافته به سرور استفاده کنید.

در ابتدای ساخت وب سایت، منابع وب به طور گسترده از فریم ها برای نمایش بخش های جداگانه صفحات استفاده می کردند. اما با ورود نسخه جدید HTML 5 همه چیز را تغییر داده است. عناصر نشانه گذاری<قاب>, <مجموعه قاب> و<نوفریم ها> منسوخ تلقی می شوند. آنها با یک برچسب جایگزین شدند -<iframe> نحوه اضافه کردن به html

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

عنصر .

توصیه:برای سفارشی کردن سبک یک عنصر

برچسب بسته شدن

ضروری.

ویژگی های

تراز کردنمنسوخ شده تعیین می کند که فریم چگونه لبه تراز شود و متن چگونه دور آن بپیچد. صفحه مجازبه قاب اجازه می دهد تا به حالت تمام صفحه برود. اجازه شفافیت بدهدنصب های سفارشی پس زمینه شفافکادری که پس زمینه صفحه از طریق آن قابل مشاهده است. چارچوبفقط HTML4 تعیین می کند که آیا حاشیه در اطراف قاب نمایش داده شود یا نه. ارتفاعارتفاع فریم HTML5 به پیکسل CSS، HTML4 به پیکسل یا درصد. hspaceحاشیه افقی از فریم به محتوای اطراف منسوخ شده است. ارتفاع حاشیهفقط HTML4 در بالا و پایین از محتوا تا حاشیه قاب قرار می‌گیرد. پهنای حاشیهفقط HTML4 از محتوا تا مرز قاب به چپ و راست اضافه می‌شود. نامنام قاب. جعبه شنی HTML5 به شما امکان می دهد تعدادی محدودیت برای محتوای بارگذاری شده در قاب تعیین کنید. پیمایشنحوه نمایش نوار اسکرول در یک قاب. بدون درز HTML5 مشخص می کند که محتویات فریم باید به گونه ای ارائه شوند که گویی بخشی از سند هستند. srcمسیر فایلی که محتویات آن در فریم بارگذاری می شود. srcdoc HTML5 محتویات یک فریم را مستقیماً در یک ویژگی ذخیره می کند. vspaceافست عمودی از فریم به محتوای اطراف منسوخ شده است. عرضعرض فریم HTML5 به پیکسل CSS، HTML4 به پیکسل یا درصد.

یک ظاهر طراحی پیش فرض

اکثر مرورگرها عنصر را نمایش می دهند

هر سبک های CSSسبک های اعمال شده بر روی یک عنصر والد برای محتوای منطقه درون خطی اعمال نمی شود، همچنین سبک های اعمال شده برای محتوای درون خطی برای آن اعمال نمی شود. عنصر والد.

می توانید اندازه منطقه درون خطی را با استفاده از ویژگی های اختیاری عرض و ارتفاع یا با استفاده از CSS تعیین کنید. معمولا اندازه پیش فرض عرض 300 پیکسل در ارتفاع 150 پیکسل است، اما بسته به مرورگر، اندازه ممکن است متفاوت باشد. اکثر مرورگرها محتوای عنصر را به صورت پیش فرض نمایش می دهند