آموزش فریم ها در HTML
آموزش فریم ها در HTML
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش فریم ها در HTML خواهیم پرداخت.
از فریم های HTML برای تقسیم پنجره مرورگر شما به چند بخش استفاده می شود که هر بخش می تواند یک سند HTML جداگانه بارگیری کند. مجموعه ای از فریم ها در پنجره مرورگر به عنوان frameset شناخته می شود. پنجره به روشی مشابه جدولها به دو بخش و ستونها تقسیم می شوند.
معایب فریم ها
با استفاده از فریم ها اشکال کمی وجود دارد، بنابراین هرگز توصیه نمی شود که از فریم ها در صفحات وب خود استفاده کنید –
- بعضی از دستگاه های کوچکتر نمی توانند اغلب با فریم ها کنار بیایند زیرا صفحه نمایش آنها به اندازه کافی بزرگ نیست که بتواند تقسیم شود.
- بعضی اوقات صفحه شما به دلیل وضوح تصویر متفاوت در رایانه های مختلف متفاوت نشان داده می شود.
- دکمه برگشت مرورگر ممکن است همانطور که کاربر امیدوار است کار نکند.
- هنوز تعداد کمی از مرورگرها هستند که از فناوری فریم پشتیبانی نمی کنند.
ایجاد فریم ها در HTML
برای استفاده از فریم ها در یک صفحه ما از تگ <frameset> به جای تگ <body> استفاده می کنیم. تگ <frameset> نحوه تقسیم پنجره به فریم ها را مشخص می کند. ویژگی سطرهای تگ <frameset> فریمهای افقی و ویژگی cols فریم های عمودی را تعریف می کند. هر فریم با تگ <frame> نشان داده می شود و مشخص می کند که کدام سند HTML باید در قاب باز شود.
توجه – تگ <frame> در HTML5 منسوخ شد. از این عنصر استفاده نکنید
مثال
در زیر مثالی برای ایجاد سه فریم افقی آورده شده است –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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> |
خروجی
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Home Jobs Current Affairs UPSC Notes Login Packages tutorialspoint Top Frame Previous Page Print PageNext Page Advertisements Tutorials Point About us Refund Policy Terms of use Privacy Policy FAQ's Contact © Copyright 2020. All Rights Reserved. |
مثال
بیایید مثال فوق را به صورت زیر قرار دهیم، در اینجا ما ویژگی های سطرها را با cols جایگزین کردیم و عرض آنها را تغییر دادیم. با این کار هر سه فریم به صورت عمودی ایجاد می شود
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!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>
در زیر ویژگی های مهم تگ <frameset> وجود دارد –
-
cols
مشخص می کند که تعداد ستون ها در ستون فریم و اندازه هر ستون وجود دارد. می توانید عرض هر ستون را به یکی از چهار روش مشخص کنید –
مقادیر مطلق در پیکسل. به عنوان مثال ، برای ایجاد سه فریم عمودی ، از cols = “100، 500، 100” استفاده کنید.
درصدی از پنجره مرورگر. به عنوان مثال، برای ایجاد سه فریم عمودی ، از cols = “10٪، 80٪، 10٪” استفاده کنید.
با استفاده از نماد wildcard. به عنوان مثال ، برای ایجاد سه فریم عمودی ، از cols = “10٪، *، 10٪” استفاده کنید. در این حالت ، wildcard باقی مانده از پنجره را می گیرد.
به عنوان عرض های نسبی پنجره مرورگر. به عنوان مثال ، برای ایجاد سه فریم عمودی ، از cols = “3 *، 2 *، 1 *” استفاده کنید. این گزینه ای برای درصد است. می توانید از عرض های نسبی پنجره مرورگر استفاده کنید.
-
rows
این ویژگی دقیقاً مانند ویژگی cols کار می کند و مقادیر یکسانی را می گیرد ، اما برای مشخص کردن ردیف ها در مجموعه فریم استفاده می شود. به عنوان مثال، برای ایجاد دو قاب افقی ، از rows = “10٪، 90٪” استفاده کنید. می توانید ارتفاع هر سطر را به همان روشی که در بالا برای ستون ها توضیح داده شده است، تعیین کنید.
-
border
این ویژگی عرض حاشیه هر فریم را به پیکسل مشخص می کند. به عنوان مثال ، border = “5”. مقدار صفر به معنای عدم حاشیه است.
- frameborder
این ویژگی مشخص می کند که آیا یک مرز سه بعدی باید بین فریم ها نمایش داده شود. این ویژگی مقدار 1 (yes) یا 0 (no) دارد. به عنوان مثال frameborder = “0” هیچ حاشیه ای را مشخص نمی کند.
-
framespacing
این ویژگی میزان فاصله بین فریم ها را در یک مجموعه فریم مشخص می کند. این می تواند از هر مقدار عدد صحیح استفاده کند. به عنوان مثال framespacing = “10” به این معنی است که بین هر فریم باید 10 پیکسل فاصله باشد.
ویژگی های تگ <frame>
در زیر ویژگی های مهم برچسب <frame> آورده شده است –
-
src
این ویژگی برای دادن نام پرونده ای که باید در کادر بارگیری شود استفاده می شود. مقدار آن می تواند هر URL باشد. به عنوان مثال ، src = “/html/top_frame.htm” یک فایل HTML موجود در فهرست html را بارگیری می کند.
-
name
این ویژگی به شما امکان می دهد نامی به یک فریم بدهید. برای نشان دادن اینکه کدام سند باید در کدام قاب بارگیری شود استفاده می شود. این امر به ویژه هنگامی اهمیت دارد که بخواهید لینک هایی را در یک فریم ایجاد کنید که صفحات را در قاب دیگری بارگیری کند، در این صورت فریم دوم به یک نام نیاز دارد تا خود را به عنوان هدف لینک مشخص کند.
-
frameborder
این ویژگی مشخص می کند که آیا مرزهای آن قاب نشان داده می شود یا نه. اگر یک داده شود ، مقدار داده شده در ویژگی frameborder تگ <frameset> را لغو می کند و این می تواند مقادیر 1 (yes) یا 0 (no) را بدست آورد.
-
marginwidth
این ویژگی به شما امکان می دهد عرض فضای بین چپ و راست مرزهای فریم و محتوای فریم را مشخص کنید. این مقدار به پیکسل داده می شود. به عنوان مثال marginwidth = “10”.
-
marginheight
این ویژگی به شما امکان می دهد ارتفاع فضای بین بالا و پایین مرزهای فریم و محتوای آن را مشخص کنید. این مقدار به پیکسل داده می شود. به عنوان مثال marginheight = “10”.
-
noresize
به طور پیش فرض ، می توانید با کلیک و کشیدن بر روی مرزهای یک فریم، اندازه هر فریم را تغییر دهید. ویژگی noresize از امکان تغییر اندازه فریم توسط کاربر جلوگیری می کند. به عنوان مثال noresize = “noresize”.
-
scrolling
این ویژگی ظاهر نوارهای پیمایشی را که در فریم نشان داده می شوند کنترل می کند. این مقادیر یا “yes”, “no”یا “auto” را می گیرد. به عنوان مثال پیمایش = “no” به این معنی است که نباید میله های پیمایشی داشته باشد.
-
longdesc
این ویژگی به شما امکان می دهد پیوندی به صفحه دیگر حاوی شرح طولانی از محتویات فریم است، ارائه دهید. به عنوان مثال longdesc = “framedescription.htm”
پشتیبانی مرورگر از فریم ها
اگر کاربری از مرورگر قدیمی یا مرورگری استفاده می کند که از فریم پشتیبانی نمی کند، عنصر <noframes> باید برای کاربر نمایش داده شود.
بنابراین شما باید یک عنصر <body> را در داخل عنصر <noframes> قرار دهید زیرا عنصر <frameset> قرار است جایگزین عنصر <body> شود ، اما اگر یک مرورگر از عنصر <frameset> نمی فهمد، پس باید بفهمد که داخل عنصر چیست عنصر <body> که در عنصر <noframes> وجود دارد.
می توانید پیام خوبی برای کاربر خود که دارای مرورگرهای قدیمی است ارسال کنید. مثلا ببخشید !! مرورگر شما از چهارچوب ها پشتیبانی نمی کند. همانطور که در مثال بالا نشان داده شده است.
نام و ویژگی های فریم ها در HTML
قرار دادن میله های ناوبری در یک فریم و سپس بارگیری صفحات اصلی در یک فریم جداگانه، یکی از محبوب ترین کاربردهای فریم ها است.
بیایید مثال زیر را مشاهده کنیم که در آن یک فایل test.htm دارای کد زیر است –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!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> |
در اینجا، ما دو ستون ایجاد کرده ایم تا با دو فریم پر شود. فریم اول 200 پیکسل عرض دارد و حاوی نوار منوی پیمایش است که توسط فایل menu.htm پیاده سازی شده است. ستون دوم فضای باقیمانده را پر می کند و قسمت اصلی صفحه را شامل می شود و توسط فایل main.htm پیاده سازی می شود. برای هر سه لینک موجود در نوار منو، ما قاب هدف را به عنوان main_page ذکر کرده ایم، بنابراین هر وقت روی هر یک از لینک های موجود در نوار منو کلیک کنید، پیوند موجود در صفحه اصلی باز می شود.
در زیر محتوای فایل menu.htm آمده است
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Live Demo <!DOCTYPE html> <html> <body bgcolor = "#4a7d49"> <a href = "http://www.google.com" target = "main_page">Google</a> <br /> <br /> <a href = "http://www.microsoft.com" target = "main_page">Microsoft</a> <br /> <br /> <a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a> </body> </html> |
خروجی
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body bgcolor = "#4a7d49"> <a href = "http://www.google.com" target = "main_page">Google</a> <br /> <br /> <a href = "http://www.microsoft.com" target = "main_page">Microsoft</a> <br /> <br /> <a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a> </body> </html> |
وقتی فایل test.htm را بارگذاری می کنیم ، نتیجه زیر ایجاد می شود
اکنون می توانید لینک های موجود در پانل سمت چپ را کلیک کرده و نتیجه را ببینید. همچنین targetattribute می تواند یکی از مقادیر زیر را به خود اختصاص دهد –
-
self_
صفحه را در فریم فعلی بارگیری می کند.
-
blank_
یک صفحه را در یک پنجره مرورگر جدید بارگیری می کند. باز کردن یک پنجره جدید
-
parent_
صفحه را در پنجره اصلی بارگیری می کند، که در مورد یک فریم تنها پنجره اصلی مرورگر است.
-
top_
صفحه را در پنجره مرورگر بارگیری کرده و فریمهای فعلی را جایگزین می کند.
-
targetframe
صفحه را در یک چارچوب هدف مشخص بارگذاری می کند.
- معرفی HTML
- نگاهی کلی به HTML
- آموزش تگ های پایه در HTML
- آموزش عناصر در HTML
- مفهوم ویژگی ها در HTML
- آموزش قالب بندی در HTML
- آموزش تگ های عبارت در HTML
- آموزش متا تگ ها در HTML
- آموزش کامنت ها در HTML
- تصاویر در HTML
- آموزش جداول در HTML
- آموزش لیست ها در HTML
- آموزش لینک های عکس در HTML
- آموزش لینک های ایمیل در HTML
.svg)
دیدگاه شما