تگ frame در HTML

طراحی سایت

..تگ frame در HTML..
طراحی سایت

تگ frame در HTML

چگونه در صفحات وب یک فریم ایجاد کنیم؟ فریم چیست؟ چگونه در صفحات وب تقسیم بندی انجام دهیم؟ در این مقاله به آشنایی با فریم ها می‌پردازیم؛ البته خوب است که بدانید این تگ درحال حاضر در HTML5 پشتیبانی نمی‌شود، بنابراین این مقاله تنها جنبه آشنایی با این تگ را دارد که با توجه به عدم پشتیبانی در HTML5 از آن در کد‌هایتان استفاده نکنید تا جلوی رتبه منفی سئوی وب سایتتان را بگیرید.

سرفصل‌های پست

ساخت فریم (این تگ در HTML5 کاربردی ندارد)

در فصل قبل با تگ‌ های لیست در HTML آشنا شدیم. در این فصل می‌خواهیم کار با فریم‌ ها را بیاموزیم.

برای ایجاد یک فریم در صفحه وب از تگ <frameset> به جای تگ <body> استفاده می کنیم.همچنین تگ <frameset> تعیین می کند که چگونه صفحه وب را تقسیم کنیم. خاصیت rows موجود در frameset فریم های افقی و خاصیت cols فریم های عمودی را مشخص می کند. هر تگ <frame> بیانگر یک سند html است که می تواند در خود نمایش دهد.

نکته: تگ <frame> در html5 منقضی شده است. بنابراین از آن استفاده نکنید. به جای آن از تگ <iframe> استفاده کنید.

مثال :

مثال زیر یک مجموعه فریم های افقی را ایجاد می کند.

<!DOCTYPE html> <html> <head> <title>HTML Frames</title> </head> <frameset rows = "10%,80%,10%"> <frame name = "top" src = "/html/top_frame.htm" /> <frame name = "main" src = "/html/main_frame.htm" /> <frame name = "bottom" src = "/html/bottom_frame.htm" /> <noframes> <body>Your browser does not support frames.</body> </noframes> </frameset> </html>
مجموعه فریم های افقی
مجموعه فریم های افقی

مثال :

با تغییر خاصیت  rows به cols و تغییر مقدار آن می‌توانیم سه فریم عمودی ایجاد کنیم.

<!DOCTYPE html> <html> <head> <title>HTML Frames</title> </head> <frameset cols = "25%,50%,25%"> <frame name = "left" src = "/html/top_frame.htm" /> <frame name = "center" src = "/html/main_frame.htm" /> <frame name = "right" src = "/html/bottom_frame.htm" />  <noframes>  <body>Your browser does not support frames.</body>  </noframes> </frameset> </html>
سه فریم عمودی
سه فریم عمودی

خواص تگ <frameset>

خاصیت توضیح
cols تعیین کننده تعداد ستون های موجود در یک frameset است. مقادیر نسبت داده شده به cols برای تنظیم اندازه هر ستون استفاده می شود.
rows تعیین کننده تعداد ردیف های موجود در یک frameset است.

مقادیر نسبت داده شده به rows برای تنظیم اندازه هر ردیف استفاده می شود.

Broder این خاصیت پهنای حاشیه هر فریم را برحسب پیکسل تعیین می کند. به عنوان مثال border = “5” . مقدار 0 به معنای حذف حاشیه است.
Frameborder این خاصیت تعیین می کند آیا باید یک حاشیه سه بعدی در بین فریم ها نمایش داده شود یا خیر. مقادیر مورد قبول این خاصیت عبارت اند از : 1 برای نمایش حاشیه و 0 برای نمایش ندادن.
Framespacing همانطور که از نام آن پیداست این خاصیت فاصله بین هر فریم در داخل frameset را تعیین می کند. مقدار این خاصیت می تواند هر عدد صحیحی باشد. به عنوان مثال عدد 10 تعیین کننده 10 پیکسل فاصله بین هر فریم است

خواص cols و rows

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

راه اول استفاده از مقادیر مطلق است به عنوان مثال استفاده از مقدار “100,500,100” که مقادیر تعیین شده برحسب پیکسل هستند.

راه دوم استفاده از درصدی از اندازه صفحه است به عنوان مثال cols = “10%, 80% , 10%”

راه سوم استفاده از علامت * است. به عنوان مثال cols = “10%, * ,10%” که در این حالت دومین فریم از فاصله باقیمانده صفحه استفاده می کند.

و راه آخر استفاده از مقادیر وابسته است به عنوان مثال cols = “3* , 2* ,1*” . در این مثال جمع اعداد 6 می شود که برای تقسیم، صفحه به 6 تکه مساوی تبدیل می شود. هر فریم براساس سهم خود تعدادی از تکه ها را برمیدارد. این روش جایگزین مناسبی برای استفاده از درصد است.

خواص تگ <frame>

خواص موجود در جدول زیر از مهم ترین خواص تگ frame هستند.

خاصیت توضیح
Src از این خاصیت برای تعیین نام فایل html که باید در فریم بارگیری شود استفاده می شود. آدرس داده شده به این خاصیت می تواند یک آدرس مطلق یا وابسته باشد.
Name این خاصیت به شما اجازه می دهد تا یک نام برای فریم تعیین کنید. از این خاصیت برای انتخاب فریم برای بارگیری سند html می توان استفاده کرد. این خاصیت زمانی اهمیت پیدا می کند که قصد دارید لینک های استفاده شده در یک فریم دیگر باز کنید که در این حالت فریم دوم به یک نام برای تشخیص نیاز دارد.
Frameborder این خاصیت تعیین می کند آیا فریم باید حاشیه داشته باشد یا نه. این خاصیت بر خاصیت frameborder موجود در frameset ارجعیت دارد. مقدار این خاصیت می تواند 1 برای فعال سازی و 0 برای غیرفعال سازی حاشیه باشد.
Marginwidth این خاصیت فاصله بین چپ و راست حاشیه های فریم را برحسب پیکسل تعیین می‌کند.
marginheight تعیین فاصله بالا و پایین فریم برحسب پیکسل
noresize به صورت پیشفرض. کاربر می تواند هر فریم را با استفاده از درگ موس تغییر اندازه دهد. با قراردادن مقدار noresize در خاصیت noresize می توانید مانع تغییر اندازه فریم شوید.
scrolling توسط این خاصیت وضعیت نوار اسکرول فریم را تعیین می کنید. مقادیر این خاصیت می توانند yes, no و یا auto باشند. به عنوان مثال مقدار no باعث می شود فریم نوار اسکرول نداشته باشد.
Longdesc این خاصیت به شما اجازه می دهد لینکی برای تعیین توضیحات بلند در مورد محتویات فریم قرار دهید.
Html_code این خاصیت فقط در html5 وجود دارد. مقدار این خاصیت می تواند یک تکه کد html برای نمایش در فریم باشد.
Width تعیین کننده طول یک فریم
Height تعیین کننده ارتفاع یک فریم

پشتیبانی مرورگر ها از فریم

اگر کاربری در حال استفاده از یک مرورگر قدیمی یا هر مرورگری که استفاده از فریم ها را پشتیبانی نمی کند باشد، در این حالت باید تگ <noframes> به کاربر نمایش داده شود.

از این رو، شما باید یک تگ <body> را در داخل تگ <noframes> قرار دهید زیرا تگ <frameset> قرار است با تگ <body> عوض شود. اما اگر مرورگر تگ <frameset> را نتواند بخواند به سراغ تگ <body> که در داخل تگ <noframes> است می‌رود.

شما می‌توانید یک متن مناسب برای کاربرانی که از مرورگر های قدیمی استفاده می‌کنند بنویسید.

مثال:

<!DOCTYPE html> <html> <head> <title>HTML Target Frames</title> </head> <frameset cols = "200, *"> <frame src = "/html/menu.htm" name = "menu_page" /> <frame src = "/html/main.htm" name = "main_page" /> <noframes> <body>Your browser does not support frames.</body> </noframes> </frameset> </html>
مرورگر های قدیمی
مرورگر های قدیمی

تنظیمات پیشفرض استایل

بیشتر مرورگر ها فریم ها را به صورت پیشفرض با مقادیر زیر نمایش می دهند.

iframe:focus {    outline: none; }  iframe[seamless] {    display: block; }

نتیجه گیری

  • این تگ در HTML5 پشتیبانی نمی‌شود و به همین دلیل برای سئو می‌تواند مشکل ساز باشد.
  • برای استفاده از فریم ها در HTML5 می‌توانیم از تگ <iframe> استفاده کنیم.
  • برای اطلاعات بیشتر در رابطه با تگ‌ frame می‌توانید به وب سایت w3schools مراجعه کنید.

این مقاله نیز به پایان رسید. در مقاله بعدی به بررسی تگ iframe که تگ تعریف شده برای HTML5 می‌باشد، می‌پردازیم.

اگر سوال، انتقاد و پیشنهادی داشتید، حتما با من و دوستانم در میزفا به اشتراک بگذارید. ما همیشه پاسخگوی شما هستیم.

تا مقاله مربوط به iframe – فعلا…

7
01 آبان 1398
..نظرات..
..مقالات پربازدید..
طراحی سایت

آموزش قرعه کشی در اینستاگرام

  آموزش قرعه کشی در اینستاگرام   با سلام خدمت دوستان و کاربران گرامی . امروز با آموزش قرعه کشی در اینستاگرام برای کسانی که علاقه به ایجاد کمپین های تبلیغاتی دارند در خدمت شما هستیم . بحث قرعه کشی در اینستاگرام با توجه به فراگیر شدن این شبکه اجتماعی که البته امروزه زیرمجموعه فیسبوک مطرح میشود ، زیاد شده است . البته این احتمال وج...

6447
24 فروردین 1398
برنامه نویسی

ویژگی های جدید لاراول 5.8

تغییرات لاراول 5.8 LARAVEL ورژن بعدی فریم ورک لاراول با نسخه ۵.۸ در ماه فوریه سال ۲۰۱۹ منتشر میشه. در حال حاظر تنها مواردی که قطعی شده پشتیبانی لاراول ۵.۸ از کتابخانه carbon نسخه ۲ می باشد. و قابلیت امکان سوییچ بین هر دو نسخه یک و دو carbon مورد دیگر استفاده laravel 5.8 از vlucas/phpdotenv ورژن 3 برای فایل .env میباشد که اجازه استف...

611
08 اسفند 1397
برنامه نویسی

آموزش کار با افزونه دکان (چند فروشندگی)

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

542
04 دی 1397