آموزش HTML Layout و Iframes
در این جلسه به آموزش HTML Layout و Iframes در زبان کد نویسی HTML خواهیم پرداخت. لطفا قبل از مشاهده این جلسه ابتدا جلسه ی قبل را از این لینک مشاهده کنید.
Layout برای یک صفحه ی وب بسیار مهم است، چرا که دید بهتری نسبت به وب سایت شما ارائه می دهد. طراحی Layout خوب با منظره و حس خوب برای یک وب سایت زمان فوق العاده زیادی می گیرد. این روزها همه ی وب سایت های مدرن از چارچوب هایی بر اساس جاوا اسکریپت و CSS استفاده میکنند تا به وب سایت های پاسخگو و داینامیک پیروز شوند، اما کار یک Layout در صفحه ی وب شما، صرفا از HTML و ویژگی های آن استفاده می کند.
Layout HTML – استفاده از جدول ها
ساده ترین و محبوب ترین راه برای ایجاد Layout ها، استفاده از برچسب <table> در HTML می باشد. این جدول ها در ردیف ها و ستون ها منظم می شوند که شما می توانید از این ردیف ها و ستون ها به هر طریقی که می خواهید استفاده کنید.
مثال
برای مثال، نمونه Layout HTML زیر از طریق استفاده ی یک جدول با سه ردیف و دو ستون به دست می آید، اما عنوان و پاورقی ستون هر دو ستون را با استفاده از ویژگی colspan احاطه می کند.
<!DOCTYPE html> <html> <head> <title>HTML Layout using Tables</title> </head> <body> <table width="100%" border="0"> <tr> <td colspan="2" bgcolor="#b5dcb3"> <h1>This is Web Page Main title</h1> </td> </tr> <tr valign="top"> <td bgcolor="#aaaa" width="50"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td bgcolor="#eeee" width="100" height="200"> Technical and Managerial Tutorials </td> </tr> <tr> <td colspan="2" bgcolor="#b5dcb3"> <center> </center> </td> </tr> </table> </body> </html>
Layout چند ستونی – استفاده از جدول ها
شما می توانید صفحه ی وب خود را طوری طراحی کنید تا محتوای وب خود را در چند صفحه قرار دهید. می توانید محتوای خود را در ستون وسط قرار دهید و از ستون سمت چپ برای قرار دادن منو و از ستون سمت راست برای تبلیغ یا موارد دیگر استفاده کنید.
در اینجا مثالی را از ایجاد یک Layout سه ستونی می بینید.
<!DOCTYPE html> <html> <head> <title>Three Column HTML Layout</title> </head> <body> <table width="100%" border="0"> <tr valign="top"> <td bgcolor="#aaaa" width="20%"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td bgcolor="#b5dcb3" height="200" width="60%"> Technical and Managerial Tutorials </td> <td bgcolor="#aaaa" width="20%"> <b>Right Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> </tr> </table> </body> </html>
آموزش HTML Layout و Iframes
Layout های HTML – استفاده از DIV و Span
عنصر <div> یک عنصر level block می باشد که برای گروه بندی عناصر HTML استفاده می شود. در حالیکه این عنصر یک عنصر level block است، عنصر <span> برای گروه بندی عناصر در یک سطح درون خطی استفاده می شوند.
گرچه می توانیم با جدول های HTML ، Layout های بسیار زیبایی به دست آوریم، اما جدول ها در واقع به عنوان ابزار Layout طراحی نشده اند، و بیشتر برای نمایش داده های جدولی استفاده می شوند.
توجه
این مثال از CSS استفاده می کند، بنابراین قبل از درک این مثال، بهتر است درک بهتری از چگونگی کار CSS داشته باشید.
مثال
در اینجا سعی می کنیم با استفاده از برچسب <div> همراه با CSS همان نتیجه ای را به دست اوریم که هنگام استفاده از برچسب <table> در مثال قبل به دست آوردیم.
<!DOCTYPE html> <html> <head> <title>HTML Layouts using DIV, SPAN</title> </head> <body> <div style="width:100%"> <div style="background-color:#b5dcb3; width:100%"> <h1>This is Web Page Main title</h1> </div> <div style="background-color:#aaa; height:200px;width:100px;float:left;"> <div><b>Main Menu</b></div> HTML<br /> PHP<br /> PERL... </div> <div style="background-color:#eee; height:200px;width:350px;float:left;"> <p>Technical and Managerial Tutorials</p> </div> <div style="background-color:#aaa; height:200px;width:100px;float:right;"> <div><b>Right Menu</b></div> HTML<br /> PHP<br /> PERL... </div> <div style="background-color:#b5dcb3;clear:both"> <center> Copyright © ۲۰۲۱ learnparsi.com </center> </div> </div> </body> </html>
شما می توانید با استفاده از DIV و SPAN به همراه CSS ،Layout های بهتری طراحی کنید. اگر متوجه کد های css نمیشوید جای نگرانی نیست, به زودی دوره ی آموزشی css در وبسایت لرن پارسی برگزار میشود.
آموزش Iframes
شما می توانید یک frame درون خطی را با استفاده از برچسب <iframe> مربوط به HTML تعریف کنید. این برچسب به برچسب <frameset> ارتباطی ندارد، در عوض می تواند در هرجایی در داکیومنت شما ظاهر شود.
برچسب <iframe> یک محدوده ی مستطیلی را در داخل داکیومنت تعریف می کند که در آن مرورگر می تواند یک داکیومنت مجزا را ارائه دهد، مانند نوارهای اسکرول و حاشیه ها.
ویژگی src برای مشخص کردن URL مربوط به داکیومنتی استفاده می شود که حاوی frame درون خطی می باشد.
مثال
در زیر مثالی را می بینید که چگونگی استفاده از <iframe> را توضیح می دهد.
<!DOCTYPE html> <html> <head> <title>HTML Iframes</title> </head> <body> <p>Document content goes here...</p> <iframe src="https://learnparsi.com/" width="555" height="200"> Sorry your browser does not support inline frames. </iframe> <p>Document content also go here...</p> </body> </html>
این مثال نتیجه زیر را ایجاد میکند
Sorry your browser does not support inline frames.
ویژگی های برچسب <iframe>
بسیاری از ویژگی های برچسب <iframe> شامل نام، گروه، حاشیه، id ،longdesk ،طول حاشیه، عرض حاشیه، نام، اسکرول کردن، روش و تیتر، درست مانند ویژگی های متناظر با برچسب <frame> رفتار می کنند.
۱. src
این ویژگی برای نام گذاری فایلی استفاده می شود که باید در frame بارگذاری شود. مقدار آن می تواند هر URL باشد. برای مثال “htm.frame_top/html=”/src فایل HTML موجود در مسیر html را بارگذاری خواهد کرد.
۲. name
این ویژگی به شما اجازه می دهد تا یک frame را نامگذاری کنید. این ویژگی نشان می دهد که یک داکیومنت در کدام frame باید بارگذاری شود. هنگامی که می خواهید لینک هایی را در یک frame ایجاد کنید که صفحاتی را در یک frame دیگر بارگذاری می کند، که در این مورد دومین frame برای تشخیص خود به عنوان هدف لینک به نام نیاز دارد، در اینجا این ویژگی بسیار مهم است.
۳. frameborder
این ویژگی مشخص می کند که آیا حاشیه های frame نشان داده شوند یا خیر. این ویژگی مقدار داده شده به ویژگی frameborder روی برچسب <frameset> را می گیرد، البته اگر مقداری مشخص شده باشد، این مقدار می تواند ۱ بله و یا ۰ خیر باشد
۴. marginwidth
این ویژگی به شما اجازه می دهد تا عرض فضای بین حاشیه های چپ و راست frame و محتوای آن را مشخص کنید. مقدار به پیکسل داده می شود. برای مثال .marginwidth=”۱۰″
۵. marginheight
این ویزگی به شما اجازه می دهد تا طول فضای بین بالا و پایین حاشیه ی frame و محتوای آن را مشخص کنید. مقدار به پیکسل داده می شود. برای مثال marginheight=”۱۰”
۶. noresize
به طور پیش فرض هر frame را با کلیک کردن و درگ کردن روی حاشیه های آن می توانید تغییر اندازه دهید. ویژگی noresize مانع تغییر اندازه ی frame توسط یوزر می شود. برای مثال “noresize=”noresize.
۷. scrolling
این ویژگی ظاهر نارهای اسکرول نمایان شده در frame را کنترل می کند. این ویزگی مقادیر “no”, “yes “یا “auto “را می گیرد. برای مثال “no=”scrolling به معنای نبودن نوارهای اسکرول می باشد.
۸. longdesc
این ویژگی به شما اجازه می دهد. تا یک لینک به صفحه ای حاوی یک توصیف طولانی از محتوای frame ،ارائه بدهید.
برای مثال “htm.framedescription=”longdesc
ممنون که در این جلسه هم با ما همراه بودید.در این جلسه به یادگیری آموزش HTML Layout و Iframes پرداخته شد. در جلسه ی آینده نیز به نکات کلیدی و پرکاربردی خواهیم پرداخت.
پس حتما با ما همراه باشید و جلسات آینده را از دست ندهید! برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید. تمرین مستمر همواره تاثیر بسیار خوب و مهمی در یادگیری و تقویت مهارت های شما دارد پس حتما آن را جدی بگیرید.
دیدگاه ها