تگ 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;
}

پایانترم

[box type=”info” class=”question-from-users” width=””]

سوال:

به دلخواه یکی از تگ هایی که تا امروز یاد گرفتید را تعریف کنید.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

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

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

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

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

فیلم آموزشی asp.net core 2

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

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

7 نظر

7 پاسخ

  1. جواب سوال:
    تگ div برای جدا کردن یک قسمت از سند html برای استایل دهی اختصاصی و یا اعمال سایر دستورات برای آن قسمت کاربرد دارد و از تگ های blocklevel است

  2. سلام
    ببخشید من یک سوال داشتم .
    شما یک نوار زرد رنگ در بالای سایت خود قرار داید که با تمام شدن مطالب در جای مورد نظر به آخر سمت چپ می رسد . می شود آموزش ایجاد این نوار را قرار دهید.

    1. درود بر شما
      در گوگل سرچ کنید
      reading progress bar codepen
      کلی نمونه های خوب به همراه کد میتونید مشاهده کنید.

  3. پاسخ سوال :
    تگ
    با استفاده از آن یک فریم در صفحه وب ایجاد می کنیم.
    تعیین می کند که چگونه صفحه وب را تقسیم کنیم.
    خاصیت rows فریم های افقی و خاصیت cols فریم های عمودی را تعیین می کند.
    این تگ در نسخه HTML5 ساپورت نمی شود و از تگ iframe استفاده می شود.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=