کد قاب Iframe و Frame - چه هستند و بهترین روش استفاده از فریم ها در Html

عنصر

قاب ها

چه کار می کند

تفاوت اصلی بین

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

فریم ها عناصر HTML هستند که به شما امکان می دهند یک پنجره مرورگر وب را به چندین پنجره مستقل تقسیم کنید که هر کدام می توانند یک سند HTML جداگانه را بارگذاری کنند. هر یک از این پنجره ها (قاب) می تواند نوارهای اسکرول خود را داشته باشد و مستقل از سایر پنجره های مستقل عمل کند یا برعکس، محتوای آنها را کنترل کند. می توان از آنها برای سازماندهی منویی استفاده کرد که دائماً در یک پنجره قرار دارد، در حالی که خود اطلاعات در پنجره دیگری قرار دارد. کاربران می توانند در هر زمان و بدون نیاز به بازگشت به منو به آن دسترسی داشته باشند صفحه قبلبرای انتخاب یکی دیگر از آیتم های منو استفاده از فریم‌ها به شما این امکان را می‌دهد که تصاویر یا سایر عناصر رابط ثابت را به پنجره مرورگر «پین» کنید، در حالی که بقیه صفحه در قاب اسکرول می‌شود.
با این حال، شایان ذکر است که این روزها فریم ها ابزاری منسوخ تلقی می شوند و سایت های دارای فریم در حال حاضر نامعتبر تلقی می شوند، زیرا وب مسترهای حرفه ای هرگز از فریم در پروژه های خود استفاده نمی کنند. قاب ها تعدادی از مشکلات بدنام دارند. برای مثال، موتورهای جستجو را گیج می کنند، زیرا صفحات حاوی محتوا به اسناد دیگر پیوند نمی دهند. اگر می خواهید بازدیدکنندگان را از موتورهای جستجو، قاب ها را فراموش کنید. برای کاربر غیرممکن است که صفحه ای را که دوست دارد در بخش نشانک های مرورگر قرار دهد، زیرا فریم ها آدرس صفحه ای را که در آن قرار دارد پنهان می کنند و همیشه فقط آدرس وب سایت را نشان می دهند. به همین دلیل هنگام ردیابی تاریخچه برای مرورگرها مشکل ایجاد می کنند و همچنین با اندازه های مختلف صفحه نمایش و دستگاه های تلفن همراه سازگاری زیادی ندارند.
علیرغم اینکه پروژه های دارای قاب در وب جهانیبه طور فزاینده ای نادر، یادگیری HTML بدون پوشش موضوع فریم ها ناقص خواهد بود. قاب ها در کنار معایب خود دارای مزایایی نیز هستند که به ما اجازه نمی دهد این فناوری را غیرقابل امید تلقی کنیم.

ایجاد فریم

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

مثال: ساختار سند HTML با فریم

• خودت امتحان کن »

در مثال بالا، صفحه شامل سه ناحیه است که هر کدام در ابتدا با اسناد HTML frame_top.html، frame_left.html و frame_right.html بارگذاری می شوند. علاوه بر اسناد HTML، یک فریم می تواند شامل گرافیک نیز باشد. برای انجام این کار، باید آدرس تصویر مربوطه را در ویژگی مشخص کنید src، به عنوان مثال src="image.gif". لطفا توجه داشته باشید که عنصر بدون برچسب بسته شدن استفاده می شود.
داخل ظرف فقط می تواند حاوی برچسب باشد یا مجموعه دیگری از فریم های پوشیده شده توسط برچسب ها و .
برچسب بزنید دارای ویژگی های زیر است:

• ردیف ها- نحوه تقسیم یک صفحه به خطوط را شرح می دهد:
• cols- توضیح می دهد که چگونه یک صفحه به ستون ها تقسیم می شود:

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

• cols = "20٪، 80٪"- پنجره مرورگر با استفاده از ویژگی به دو ستون تقسیم می شود cols، ستون سمت چپ 20% و سمت راست 80% از پنجره مرورگر را اشغال می کند.
• ردیف = "100، *"پنجره مرورگر با استفاده از ویژگی به دو پنجره افقی تقسیم می شود ردیف ها، پنجره بالا 100 پیکسل و پنجره پایین فضای باقیمانده مشخص شده توسط علامت ستاره را اشغال می کند.

همانطور که از این مثال مشخص است، ظرف با صفت ردیف هاابتدا دو قاب افقی ایجاد می کند و فریم دوم را با یکی دیگر جایگزین می کند که قاب افقی پایین را با استفاده از ویژگی به دو ستون تقسیم می کند cols، ستون سمت چپ 20% و سمت راست 80% از پنجره مرورگر را اشغال می کند.
اگر مرورگر از فریم ها پشتیبانی نمی کند، پنجره متنی را که بین تگ ها قرار دارد نمایش می دهد </b>و <b> . همه چیز بین تگ ها </b>و <b> ، توسط مرورگرهایی که از فریم ها پشتیبانی می کنند نادیده گرفته می شود. بنابراین، توسعه‌دهنده باید کدی بنویسد که محتویات فریم‌ها را با روش‌های دیگری کپی کند و این کد را در یک ظرف قرار دهد. </b>، سپس همه کاربران می توانند صفحه وب آن را ببینند. <br>همانطور که قبلا ذکر شد، یک تگ جفت نشده برای درج یک فریم جداگانه در یک سند استفاده می شود <b><frame> </b>. صفت <b>src</b>سندی را که باید در این قاب نمایش داده شود را مشخص می کند، به عنوان مثال: <frame src="frame_top.html">. اگر صفت <b>src</b>از دست رفته، یک قاب خالی نمایش داده می شود.</p> <h2>حاشیه یا فاصله بین قاب ها</h2> <p>به‌طور پیش‌فرض، مرورگر یک مرز خاکستری، معمولاً سه‌بعدی بین فریم‌ها نمایش می‌دهد که بازدیدکنندگان می‌توانند از آن برای تنظیم اندازه قاب استفاده کنند. <br>حاشیه فریم را می توان مانند هر عنصر فریم دیگری دستکاری کرد. چندین ویژگی عنصر برای این وجود دارد <b><frameset> </b>، به شما امکان می دهد مرزهای فریم را سفارشی کنید. ضخامت خط مرزی توسط ویژگی تعیین می شود <b>مرز</b>. مقدار ضخامت حاشیه پیش فرض پنج است. <br>برای پنهان کردن مرز یک فریم، باید مقدار عرض حاشیه را صفر کنید یا مقدار "no" یا "0" را روی ویژگی تنظیم کنید. <b>چارچوب</b>. صفت <b>چارچوب</b>فقط دو معنی متضاد می تواند داشته باشد. اگر مقدار ویژگی <b>چارچوب</b>برابر "بله" یا "1" است، سپس حاشیه فریم نمایش داده می شود، و اگر "0" یا "خیر"، نه. لطفاً توجه داشته باشید که مقادیر ویژگی <b>چارچوب</b>برای <a href="https://ermake.ru/fa/kak-vklyuchit-cookies-v-raznyh-brauzerah-chto-takoe-faily-i-kak-ustanovit/">مرورگرهای مختلف</a>. برای حل این مشکل دو بار از ویژگی استفاده کنید <b>چارچوب</b>و برای برخی از مرورگرها نیز باید ویژگی را اضافه کنید <b>فاصله فریم</b>با مقدار "0":</p><p> <frameset frameborder="0" framespacing="0" frameborder="no" border="0"> </p><p>در مثال زیر مرز بین فریم ها را حذف می کنیم:</p> <h3>مثال: حذف مرز بین فریم ها</h3> <ul><li>خودت امتحان کن »</li> </ul><table><tr><td style="width: 10px;background-color:green;color: white;">frame_left</td> <td style="width: 90%;background-color:lime;color: white;">فریم_راست</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>قاب های بدون حاشیه</title> </head> <frameset cols="100,*" frameborder="0" framespacing="0" frameborder="no" border="0"> <frame src="frame_left.html" name=" frame_left" > <frame src="frame_right.html" name="frame_right" > </frameset> </html></p> <p>اگر مرز بین فریم ها را بردارید، بازدیدکنندگان نمی توانند اندازه قاب را در مرورگر تغییر دهند. همچنین می توانید با حفظ حاشیه ها با استفاده از ویژگی از تغییر اندازه قاب جلوگیری کنید <b>noresize</b>:</p><p> <frame src="frame_left.html" noresize> </p><p>با استفاده از ویژگی <b>رنگ حاشیه</b>می توانید رنگ حاشیه قاب را تغییر دهید، فقط باید کد یا نام رنگ رزرو شده مربوطه را مشخص کنید. <br>در زیر نمونه‌ای از یک صفحه HTML است که حاوی ویژگی‌های کنترل حاشیه قاب است که در بالا توضیح داده شد: رنگ حاشیه قرمز است، اندازه قاب بالایی را نمی‌توان تغییر داد:</p> <h3>مثال: Frame Border Control</h3> <ul><li>خودت امتحان کن »</li> </ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid red;background-color:blue;color: white;" colspan="2">frame_top</td> </tr><tr><td style="border-right: 4px solid red;width: 20%;background-color:green;color: white;">frame_left</td> <td style="width: 80%;background-color:lime;color: white;">فریم_راست</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>چارچوب مدیریت مرز</title> </head> <frameset rows="150, *" border="10" bordercolor="red" frameborder="1" frameborder="yes"> <frame src="frame_top.html" noresize> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html"> </frameset> </frameset> </html></p> <p>اگر می خواهید صفحه نمایش داده شده در داخل کادر را نزدیک به مرزهای آن قرار دهید، یا برعکس، آن را دورتر ببرید، ویژگی ها را تغییر دهید. <b>ارتفاع حاشیه</b>و <b>پهنای حاشیه</b>برچسب زدن <b><frame> </b>. صفت <b>ارتفاع حاشیه</b>بالشتک بین محتویات قاب و مرزهای بالا و پایین آن را مشخص می کند. نحو:</p><p> <frame marginheight="число"> </p><p>صفت <b>پهنای حاشیه</b>بالشتک بین محتویات قاب و مرزهای راست و چپ آن را مشخص می کند. نحو:</p><p> <frame marginwidth="число"> </p><p>برای مثال، این خط html، صفحه نمایش داده شده را نزدیک به مرز قاب قرار می دهد:</p> <p>اگر صفحه نوار پیمایشی را نشان می‌دهد که شما نمی‌خواهید، می‌توانید با مشخص کردن ویژگی مشکل را حل کنید. <b>پیمایش</b>"نه" در برچسب <b><frame> </b>. اما در نظر داشته باشید که اگر فریم به اندازه کافی بزرگ نباشد تا کل محتوای صفحه را نمایش دهد، بازدیدکننده راهی برای اسکرول صفحه نمایش داده شده نخواهد داشت.</p> <h2>لینک های داخل قاب ها</h2> <p>دنبال کردن یک پیوند در یک سند HTML معمولی به صورت زیر انجام می شود: روی پیوند کلیک کنید و سند فعلی با یک مورد جدید در پنجره فعلی یا در یک پنجره مرورگر جدید جایگزین می شود. هنگام استفاده از فریم ها، طرح بارگیری اسناد HTML با حالت معمول متفاوت است و تفاوت اصلی در توانایی بارگذاری یک سند HTML در یک فریم از فریم دیگر است. <br>برای بارگذاری یک سند در یک قاب خاص، از ویژگی استفاده کنید <b>هدف</b>برچسب زدن <b><a> </b>. به عنوان یک مقدار مشخصه <b>هدف</b>نام فریمی که سند مشخص شده توسط ویژگی در آن بارگذاری می شود استفاده می شود <b>نام</b>برچسب زدن <b><frame> </b>. همچنین شایان ذکر است که نام قاب باید با یک عدد یا یک حرف لاتین شروع شود. نام های زیر به عنوان نام های رزرو شده استفاده می شوند:</p> <p>برای پیوندهای خارجی، باید ویژگی هدف را روی _top یا _blank تنظیم کنید تا مطمئن شوید که پروژه های شخص ثالث در فریم های شما ظاهر نمی شوند، بلکه کل پنجره مرورگر را پر می کنند.</p> <p>مثال زیر یک سند HTML را نشان می دهد که در آن قاب سمت راست صفحه را از پیوندی که در فریم بالا قرار داده شده بارگیری می کند. پیوند به سندی که در کادر سمت راست باز می شود:</p><p> <a href="http://www.google.com" target="frame_right">گوگل</a> </p><p>قاب سمت راست یک نام داده می شود <i>فریم_راست</i>:</p><p> <frame src="frame_right.html" name="frame_right"> </p><p>برای بارگذاری یک سند در یک قاب مشخص، از ساختار استفاده کنید <i>target="frame_right"</i>، همانطور که در مثال نشان داده شده است:</p> <h3>مثال: پیوند به فریم دیگری</h3> <ul><li>خودت امتحان کن »</li> </ul><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>پیوند به فریم دیگری</title> </head> <frameset rows="100, *"> <frame src="frame_topic.html"> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html" name="frame_right"> </frameset> <noframes> <p>مرورگر شما فریم ها را نمایش نمی دهد</p>