استفاده از iframe در طراحی وب سایت

  • آبان ۱, ۱۳۹۴

در طراحی وب سایت روش های مختلفی برای ارائه محتوا وجود دارد زمانی که شما نیاز دارید یک صفحه اچ تی ام ال از سایت دیگر را در سایت خودتان نشان  دهید یکی از این راه ها استفاده از تگ iframe می باشد . در تگ iframe  شما می توانید براحتی یک صفحه اینترنتی از یک وب سایت دیگر را در وب سایت خودتان فراخوانی کنید . بطور مثال یکی از مشهور ترین روش ها برای نشان دادن یک صفحه اینترنتی یک وب سایت در وب سایت دیگر همان نماد اعتماد الکترونیکی است که یک iframe  است .

برای یاد گرفتن این موضوع ابتدا یک فایل بنام second-page.html درست نمایید . با محتویات زیر :

<!DOCTYPE html>
<html>
    
    <head>
        <metacharset="utf-8">
        <title>صفحه تستی</title>
    </head>
    
    <body>
        <h1>صفحه تستی</h1>
        <p>قرار است این صفحه تستی را داخل صفحه اصلی وب سایت دیگر نمایش دهیم</p>
    </body>
</html>
بعد میخواهیم یک صفجه اصلی بسازیم . محتویات صفحه اصلی هم بصورت زیر خواهدبود .
<!DOCTYPE html>
<html>
  
   <head>
       <metacharset="utf-8">
       <title>Netshahr</title>
   </head>
  
   <body>
       <iframesrc="second-page.html"width="400"height="200"></iframe>
   </body>
</html>
فایل  اصلی را با نام index.html ذخیره نمایید .

اگر به کد های نوشته شده توجه نمایید متوجه خواهید شد که در تگ <body> از تگی جدیدی بنام <iframe> استفاده شده است که در آن Attribute ای با نام src این کار را انجام می دهد تا مسیر فایلی که باید داخل تگ <iframe> مشاهده شود مشخص شود. همچنین به کمک دستورات width و height شما قادر خواهید بود ابعاد این تگ را انتخاب نمایید.

در کاربرد دیگر iframe شما می توانید سایت دیگری را در داخل صفحه اچ تی ام ال خودتان به نمایش بگذارید ، برای این کار کد بالا را باید بصورت زیر تغییر دهید . با این کار شما می توانید محتویات وب سایت دیگری را در وب سایت خودتان یا صفحه اچ تی ام ال خودتان به نمایش گذارید .
<body>
        <iframe src="http://www.inten.asia" width="300" height="200" frameborder="no"></iframe>
    </body>
مفید بود ؟

مشاوره رایگان طراحی سایت

مشاوره طراحی سایت

در صورتی که به دنبال راه اندازی کسب و کار خود در دنیای اینترنت هستید . عدد 21 را به شماره 09107585955 پیامک نمایید یا در لینک زیر فرم درخواست مشاوره را پر نمایید تا مشاوران اینتن با شما در تماس باشند . با اینتن بروز باشید.

بدون نظر
 
(No Ratings Yet)
Loading...