چگونه در صفحات وب یک فریم ایجاد کنیم؟ فریم چیست؟ چگونه در صفحات وب تقسیم بندی انجام دهیم؟ در این مقاله به آشنایی با فریم ها میپردازیم؛ البته خوب است که بدانید این تگ درحال حاضر در 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 – فعلا…
7 پاسخ
جواب سوال:
تگ div برای جدا کردن یک قسمت از سند html برای استایل دهی اختصاصی و یا اعمال سایر دستورات برای آن قسمت کاربرد دارد و از تگ های blocklevel است
سلام امیر ممنون از تعاملت.
سلام
ببخشید من یک سوال داشتم .
شما یک نوار زرد رنگ در بالای سایت خود قرار داید که با تمام شدن مطالب در جای مورد نظر به آخر سمت چپ می رسد . می شود آموزش ایجاد این نوار را قرار دهید.
درود بر شما
در گوگل سرچ کنید
reading progress bar codepen
کلی نمونه های خوب به همراه کد میتونید مشاهده کنید.
عالی بود .
ممنون خیلی کمک کرد .
پاسخ سوال :
تگ
با استفاده از آن یک فریم در صفحه وب ایجاد می کنیم.
تعیین می کند که چگونه صفحه وب را تقسیم کنیم.
خاصیت rows فریم های افقی و خاصیت cols فریم های عمودی را تعیین می کند.
این تگ در نسخه HTML5 ساپورت نمی شود و از تگ iframe استفاده می شود.
سلام محمد، ممنون درست گفتی.