آموزش HTML - تگ iframe
در این آموزش و با استفاده از تگ iframe روش نمایش یک صفحه وب درون صفحه ی دیگر وب را قرار خواهیم داد . با ما همراه باشید .
همانطور که از نام تگ iframe که به معنای قالب می باشد پیداست با این تگ میتوان یک قالب در سایت ایجاد کرد و محتوای یک صفحه ی دیگر را درون این قالب قرار داد .
روش صیح نوشتن تگ iframe بدین صورت می باشد : <iframe src="/URL"></iframe>
در این تگ خصوصیت src ما را به url مورد نظر خواهد برد و آنرا درون قالب مورد نظرمان قرار میدهد .
یکی از خصوصیات مهم این تگ تنظیم ارتفاع و طول این تگ میباشد .
با استفاده از خصوصیت height و width میتوان طول و عرض قالب مورد نظر را مشخص کرد . خصوصیت height و Width را میتوان بر حسب پیکسل و یا درصد ایجاد نمود .
در مثال زیر با این تگ بهتر آشنا خواهید شد :
<!DOCTYPE html>
<html>
<body>
<iframe src="http://int-net.ir" width="400" height="300"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>
با استفاده از این تگ بخشی از صفحه موجود در url را درون صفحه ی خود قرار دادیم .
مثال بالا در مروگر بصورت زیر نمایش داده خواهد شد :
Some older browsers don't support iframes.
If they don't, the iframe will not be visible.
Some older browsers don't support iframes.
If they don't, the iframe will not be visible.
روش حذف فریم و یا border تگ iframe :
در تگ iframe خصوصیت frameborder برایمان مشخص خواهد کرد که حاشیه ی تگ iframe نمایش داده شود یا خیر .
زمانی که مقدار این خصوصیت را به اندازه ی 0 صفر تغییر دهیم حاشیه یا border این تگ نمایش داده نخواهد شد .
در مثال زیر بهتر با این موضوع آشنا خواهید شد .
<!DOCTYPE html>
<html>
<body>
<iframe src="http://int-net.ir" frameborder="0"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>
مثال بالا در مرورگر بصورت زیر نمایش داده خواهد شد :
Some older browsers don't support iframes.
If they don't, the iframe will not be visible.
استفاده از تگ iframe به عنوان مقصد یک لینک :
در این بخش به منظور نمایش یک لینک در فریم مورد نظر ابتدا باید target موجود در لینک مورد نظر با خصویت name در تگ iframe یکسان باشند .
در مثال زیر با این موضوع بهتر آشنا خواهید شد :
<!DOCTYPE html>
<html>
<body>
<iframe src="http://int-net.ir" name="iframe_a"></iframe>
<p><a href=" http://int-net.ir/catarticle/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-HTML" target="iframe_a">web design int-net.ir</a></p>
<p><b>Note:</b> Because the target of the link matches the name of the iframe, the link will open in the iframe.</p>
</body>
</html>
بنابراین زمانی که در داخل تگ iframe یک صفحه ای در حال نمایش باشد و بخواهیم با کلیک بر روی لینک مورد نظر محتویات داخل تگ iframe تغییر کند از خصوصیت name در تگ iframe استفاده میکنیم و نام مورد نظر را برای خصوصیت target لینک درج میکنیم .
مثال بالا را بصورت زیر مشاهده خواهید کرد :
web design int-net.ir
Note: Because the target of the link matches the name of the iframe, the link will open in the iframe.
با گروه طراحی سایت INT و با اجرای متد های ساده و کامل میتوانید طراحی سایت حرفه ای را فراگیری نمایید .
در آموزش بعدی شما را با رنگ ها در html آشنا خواهیم کرد .
درس بعدی »»» آموزش HTML - رنگ ها