0

بلاگ

خدمات شبکه فراز نتورک > دانلود رایگان > وب مستر > آموزش HTML & CSS > کار با فریم ها در HTML قسمت اول

کار با فریم ها در HTML قسمت اول

2021/01/17
ارسال شده توسط
آموزش HTML & CSS
1.02k بازدید
کار با فریم ها در HTMLقسمت اول

کار با فریم ها در HTML

تگ frame در HTML

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

  • 1 ساخت فریم (این تگ در HTML5 کاربردی ندارد)
  • 2 خواص تگ <frameset>
  • 3 خواص cols و rows
  • 4 خواص تگ <frame>
  • 5 پشتیبانی مرورگر ها از فریم
  • 6 تنظیمات پیشفرض استایل

کار با فریم ها در HTML

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

برای ایجاد یک فریم در صفحه وب از تگ <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>

کار با فریم ها در 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>
کار با فریم ها در HTML

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

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

iframe:focus { 
  outline: none;
}

iframe[seamless] { 
  display: block;
}

نتیجه گیری

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

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

 

جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.

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

نویسنده:راحله تبریزی



 

							


			


			


							

اشتراک گذاری: 
        
            
        
        
            
        
        
            
        
      
		
                
			
		


		
				


					

						برچسب ها:
											

		

		


								
			





                            
                                


                                    
                                        
                                        
                                        
                                    
                                

                                

                                    در تلگرام

                                  کانال ما را دنبال کنید!
                                

                            





                            
                                

                                  
                                      
                                      
                                      
                                      
                                  
                                

                                

                                    در اینستاگرام

                                  ما را دنبال کنید!
                                

                            











			
			
			

	

			

	        
مطالب زیر را حتما مطالعه کنید

	    


			

					

							


                                      

                      
                    

									                    

                      
                    

									                    

                      
                    

									                    

                      
                    

									                    

                      
                    

									                    

                      
                    

																

					

			

	




			

			


	


                


					

		

							
					


		

							
					

	

	
				                    
					



	

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