کد آیفریم
سلام خیلی خوش امدید به مهراکت در این مطلب قصد داریم راجب موضوع ها ی کد آیفریم ونحوه استفاده از آی فریم در HTML وآی فریم ها یا Iframes در HTMLصحبت کنیم تا انتها با مهراکت همراه باشید.
آی فریم ها یا Iframes در HTML
آی فریم یا Iframe به یک پنجره یا قاب که بتوان در آن محتویاتی همچون تصویر،ویدئو و.. را به نمایش گذاشت
گفته می شو
. آی فریم ها در نوبه ی خودشون میتونن استفاده های زیادی داشته باشند.
برای مثال الان من سایت خودمو در قالب یک آی فریم در اینجا قرار دادم :

یک نمونه از استفاده آی فریم ها، در سایت های اشتراک ویدئو ( مثله سایت آپارات ) می باشد،
که به راحتی میتوان با استفاده از آی فریم ها ویدئوهای این سایت هارو در وبسایت خودمان یا درکل در یک صفحه وب به نمایش درآوریم.
پس بطور کلی ما با استفاده از آی فریم یا به انگلیسی Iframe میتونیم به راحتی یک سایت یا یک فایل یا یک تصویر و یا بطور کلی میتوان یک صفحه وب را درون یک صفحه ی وب دیگر قرار داد.
Free-Learn
نحوه استفاده از آی فریم در HTML
برای ایجاد یا استفاده از آی فریم ها یا Iframes در HTML ما باید از تگ <iframe>
استفاده نماییم
، شکل کلی برای استفاده از این تگ در HTMLافزونه WordPress Simple HTML Sitemap (که قبلا راجب ان توضیح دادیم) بصورت زیر می باشد.
1
|
<iframe src=“URL”></iframe>
|
که میتوانیم با وارد کردن آدرس فایل/سایت و.. مورد نظرمان در قسمت src
آن را در یک قاب یا آی فریم به نمایش دربیاوریم.
حال برای اینکه بطور کامل با این تگ آشنا شوید
لطفا به دستورات زیر توجه و همچنین برای مشاهده آنلاین دستورات بروی دکمه (امتحان کنید) کلیک نمایید.
1
2
3
4
5
|
<body>
<iframe src=“https://free-learn.ir”></iframe>
</body>
|
HTML5 چیست؟
HTML5 جدیدترین نسل از زبان hyper text market مورد استفاده در طراحی سایت بوده و مورد تایید کنسرسیوم شبکه جهانی اینترنت یا همان W3C می باشد. پیشنویس اولیه آن در سال 2008 ارائه شد ولی تا 2011 تغییرات خاصی در آن اعمال نشده بود. در سال 2011 HTML5 بصورت رسمی منتشر شد و از آن روز مورد استفاده برنامه نویسان قرار گرفت ولی در ابتدا مرورگرهای کمی این زبان جدید را پشتیبانی میکردند. امروزه تمام مرورگرهای اصلی مانند کروم، سافاری، فایرفاکس و اینترنت اکسپلورر زبان کدنویسی HTML5 را پشتیبانی میکنند و امکان استفاده از تمام ظرفیت های آن فراهم شده است.
تهیه و انتشار HTML5 با اهداف مشخصی صورت گرفت که مهمترین آنها عبارتند از:
- امکانات جدید باید بر پایه HTML، CSS، DOM و javascript بوده و همخوانی لازم را داشته باشد.
- نیاز به افزونه های خارجی و جانبی مانند فلش تا حد امکان کاهش یابد.
- رفع مشکلات و ارورها در HTML5 از نسخه های پیشین راحت تر باشد.
- استفاده از اسکریپت در کدنویسی این زبان با نشانه گذاری جایگزین شود.
- HTML5 باید مستقل از دستگاه باشد و بر روی هر توع کامپیوتر و گجتی قابل استفاده باشد.
- مراحل پیشرفت و بروزرسانی آن متن باز و در اختیار عموم باشد.
HTML5 چیست؟
تگ ای فریم قابل دید توسط گوگل خواهد بود و موجبات کاهش محبوبیت فراهم خواهد شد . اما از طرفی هم امکان noindex کردن قسمتی از متن نیست و در صورت استفاده از noindex در قسمتی از یک برگه ، کل برگه توسط گوگل ایندکس نخواهد شد که این هم برای ایندکس شدن سایت و برگه های آن ضرر دارد . پس روش صحیح چیست؟ ابتدا باید یک فایل php برای آی فریم خود بسازید و در پوشه قالبتان قرار دهید . سپس در همین فایل که کد آی فریم قرار میگیرد ، از متای زیر در بالای فایل و قبل از بسته شدن </head> استفاده کنید
: <meta name=”robots” content=”noindex,nofollow”> سپس با استفاده از include کردن آن فایل در بخشی از سایت و قالب خود می توانید آی فریم را به صورت کاملا مخفی از ربات های جستجوگرها استفاده کنید . توی نت ی آموزش دیگه هم بود که برای دوستان میذارم : گفته ، حتما تگ noframe رو در کنارش استفاده کنید. حالا این تگ کارش چیه؟ این تگ تو مایه های تگ alt برای تصاویر هست. یعنی اگه مرورگری از آی فریم پشتیبانی نکرد و اون را نمایش نداد، یک متن بجای اون نمایش داده بشه که بگه اینجا چی بوده.
<IFRAME src="3eo.html" width="400" height="500" scrolling="auto" frameborder="1"> [Your user agent does not support frames or is currently configured not to display frames. However, you may visit <A href="seo.html">the related document.</A>] </IFRAME>
الان تو کد بالا قرار تو یک آی فریم فایل ۳eo.html نمایش داده بشه و اگه مرورگر نتونست اون صفحه را لود کنه، کاربر با پیام Your user agent does not support frame … مواجه میشه من آموزش اول رو بیشتر ترجیح میدم و ازش استفاده کردم اما مشکل اصلی وقتی به وجود میاد که فایل single اجرا میشه و به این شگل در میاد : <head> <meta charset=”UTF-8″ /> <link rel=”profile” href=”https://gmpg.org/xfn/11″ /> <link rel=”pingback” href=”https://mixmedia.ir/xmlrpc.php” /> <title>دانلود آلبوم جدید گروه دارکوب نام نوکوب – میکس مدیا</title> <meta property=”og:title” content=”دانلود آلبوم جدید گروه دارکوب نام نوکوب”/> <meta property=”og:type” content=”article”/> <meta property=”og:description” content=” . . . </head> مشکل اینجاست که کد هد در پایین هم باز شده تا بتونه متاتگ nofollow / noindex رو نمایش بده <head> <meta
در ابن پست مطالب زیر را بیان کردیم:
- کد آیفریم
- نحوه استفاده از آی کد آیفریم در HTML
- HTML5 چیست؟
سپاس از این که وقت گذاشتین و با ما همراه بودید تا اخر این مطلب لطفا از بیقه پست ها هم دیدن فرمایید: