location_on تهران ، خیابان آزادی خیابان شهیدان (روبروی مترو حبیب اله ) برج زیتون local_phone 66073800 021
بازگشت به لیست مقالات » | چهارشنبه 17 آذر 1395 در ساعت 15 : 12 دقیقه | نظرات کاربران ( 0 )

آموزش 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  - رنگ ها

ارسال نظر

عنوان نظر :
نام شما :
ایمیل :
آموزش HTML  - کاراکترهای رزرو شده

آموزش HTML - کاراکترهای رزرو شده

آموزش HTML  - کاراکترهای رزرو شده یکسری از کارکتر ها و علائم در html  وجود دارند که به تنهایی نمیتوانند در داخل صفحات  html قرار گیرند و ممکن است حتی در کیبرد کامپیوتر ها وجود نداشته ب ...

آموزش html  -  جاوا اسکریپت

آموزش html - جاوا اسکریپت

آموزش html  -  جاوا اسکریپت تگ script  در html  : این تگ به منظور برنامه نویسی سمت کاربر مانند جاوا اسکریپت  javascript  مورد استفاده قرار میگیرد . عنصر <script > ...

آموزش html  تگ head

آموزش html تگ head

 آموزش html  تگ head عنصر head  یکی از مهمترین تگ های html  می باشد که تگ های اساسی و اصلی سایت را در خود جای میدهد . عناصری که درون تگ head  قرار میگیرند میتوانند شامل اسکری ...

آموزش HTML  - اعلان Doctype

آموزش HTML - اعلان Doctype

آموزش HTML  - اعلان Doctype یکسری از اعلان ها در html  می باشند که کمک میکنند مرورگر بهتر و سریعتر نوع صفحات را تشخیص دهد . اعلان <!doctype> یکی از آنها می باشد که در ابتدای سند های h ...

آموزش html  - مروری بر html مقدماتی

آموزش html - مروری بر html مقدماتی

    آموزش HTML  - خلاصه ای از مراحل مقدماتی با همراهی شما تا این بخش آموزش HTML  را بصورت مقدماتی پشت سر گذاشتیم . از این پس آموزش های حرفه ای و پیشرفته ی HTML  را شروع خوا ...

آموزش html – نام رنگ ها

آموزش html – نام رنگ ها

آموزش html – نام رنگ ها تمامی مرورگر ها از نام رنگ ها بصورت کامل پشتیبانی میکنند . با استفاده از رنگ ها در html میتوان رنگ عناصر و یا پس زمینه عناصر html  را تغییر داد .در بخش زیر نام 147 ...

آموزش html - رنگها

آموزش html - رنگها

آموزش html  - رنگها : رنگها  یکی از مهمترین بخش در طراحی سایت می باشند .در طراحی سایت از رنگ ها به 3 طریق استفاده خواهد شد . 1.  از طریق نام رنگ : این روش از انتخاب رنگ بسیار محدود بو ...

آموزش HTML  - تگ iframe

آموزش HTML - تگ iframe

آموزش HTML  - تگ iframe در این آموزش و با استفاده از تگ iframe روش نمایش یک صفحه وب درون صفحه ی دیگر وب را قرار خواهیم داد . با ما همراه باشید . همانطور که از نام تگ iframe  که به معنای قا ...

آموزش HTML فرم ها

آموزش HTML فرم ها

آموزش HTML  فرم ها یکی از عناصر مهم در HTML  فرم ها می باند . فرم ها مسثول نگهداری اطلاعات از جانب کاربران می  باشد .به کمک فرم ها میتوان دریافت و ارسال اطلاعات را به سمت سرور انجام د ...

آموزش HTML  - صفحه بندی

آموزش HTML - صفحه بندی

آموزش HTML  - صفحه بندی یکی از مهم ترین بخش های طراحی سایت نحوه ی صفحه بندی و چیدمان المان ها و عناصر HTML  می باشد . چیدمان سایت ها تقریبا مشابه چیدمان مجلات و روزنامه ها حاوی ستون ها و س ...

آموزش HTML  - تگ SPAN

آموزش HTML - تگ SPAN

آموزش HTML  - تگ SPAN تگ span  یکی از عناصر inline level  و درون خطی می باشد که در مقالات قبلی در مورد آن شرح دادیم . تفاوت تگ های inline level  و block level   یک عنصر inli ...

آموزش html  - تگ DIV

آموزش html - تگ DIV

آموزش html  - تگ DIV عنصر های HTML  را از طریق تگ های DIV  و یا SPAN  گروهبندی می شوند . تگ  div  یک عنصر بلاک لول است  .( Block level ) به این معنی که درصورتی که ...

expand_less