آموزش طراحی سایتآموزش 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 – فعلا…

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر