NVIDIA درسال 2016 هیچ طرحی برای آپدیت GTX 970M و 980M ندارد
January 23, 2016
نیاز به ویندوز 10 برای کاربرد هرچه بیشتر CPU
January 24, 2016
در این جلسه از سری آموزش های گام به گام HTML مدیاسافت قصد داریم به معرفی تگ <iframe> و برخی از Attribute ها و خاصیت های آن بپردازیم. با مدیاسافت همراه باشید.
تگ <iframe> در HTML
از این تگ برای نمایش یک صفحه ی دیگر در صفحه ی جاری استفاده می شود. به این گونه که صفحه ی مورد نظر را در داخل کادری در صفحه ی جاری قرار می دهد.
قالب نوشتن تگ <iframe> به صورت زیر است :
<iframe src=”URL”></iframe>
از صفت src برای تعریف آدرس صفحه ی وبی که می خواهیم در iframe نمایش پیدا کند ، استفاده می کنیم. و URL آدرس صفحه ی مورد نظر است.
به مثال زیر توجه کنید
<!DOCTYPE html>
<html>
<body>
<iframe src=”http://mediasoft.ir/”></iframe>
</body>
</html>
خروجی
همانطور که مشاهده می کنید سایت Mediasoft.ir در داخل کادر iframe قرار گرفته است.
تعیین ارتفاع و عرض برای iframe
برای تگ <iframe> ، با استفاده از صفت های width و height ، می توان به ترتیب عرض و ارتفاع را تعیین کرد.
مقادیر این صفت ها به صورت پیش فرض برحسب پیکسل محاسبه می شوند، اما برای مقدار width ، می توان برحسب درصد استفاده کرد.مثلا width=”80%” . که باعث می شود عرض iframe به اندازه ی 80 درصد مرورگر باشد.
مثال
<!DOCTYPE html>
<html>
<body>
<iframe src=”http://mediasoft.ir/” width=”80%” height=”200″></iframe>
<br><br>
<iframe src=”http://mediasoft.ir/” width=”450″ height=”400″></iframe>
</body>
</html>
خروجی
همانطور که مشاهده می کنید ، در تگ <iframe> اول ، مقدار width را به صورت درصد نوشته ایم اما در تگ <iframe> دوم هر دو مقدار صفت های width و height بر حسب پیکسل نوشته شده است.
حذف یا تغییر حاشیه ی iframe در HTML
به صورت پیش فرض iframe دارای حاشیه است. شما می توانید با استفاده از صفت style و یک property یا خاصیت از نوع CSS این حاشیه را حذف کنید.
همچنین با CSS می توانید اندازه ، رنگ و سبک حاشیه ی iframe را تغییر دهید.
به مثال زیر توجه کنید.
در iframe اول ، حاشیه حذف شده است و در iframe دوم ، اندازه ، سبک و رنگ حاشیه را تغییر داده ایم.
<!DOCTYPE html>
<html>
<body>
<iframe src=”http://mediasoft.ir/” style=”border:none”></iframe>
<br><br>
<iframe src=”http://mediasoft.ir/” style=”border:10px dotted red”></iframe>
</body>
</html>
خروجی
استفاده از iframe به عنوان مکانی برای نمایش یک لینک
با استفاده از iframe می توانید کاری کنید که وقتی کاربر برروی یک لینک خاص کلیک کرد ، صفحه ی مورد نظر در iframe نمایش پیدا کند.
برای این کار ابتدا یک صفت به نام name به تگ <iframe> اضافه کرده و مقداری دلخواه مانند test برای آن در نظر می گیریم. سپس هیچ آدرسی را برای صفت src قرار نمی دهیم. سپس در تگ <a> که مقدار صفت target را برابر با مقدار صفت name در iframe قرار می دهیم.
به مثال زیر توجه کنید :
<!DOCTYPE html>
<html>
<body>
<iframe src=”” name=”test”></iframe>
<p><a href=”http://www.Mediasoft.ir” target=”test”>Mediasoft</a></p>
</body>
</html>
خروجی
پس از کلیک برروی Mediasoft سایت مدیاسافت در iframe نمایش پیدا خواهد کرد.
پایان جلسه دوازدهم
