آموزش HTML – بخش نهم

آموزش HTML – بخش نهم

این قسمت از آموزش HTML را به آموزش Iframe و آشنایی با تگ <head> اختصاص داده ایم. در این قسمت خواهید آموخت که iframe چیست و چگونه در صفحه وارد میشود و از آنچه استفاده می‌شود؟ بعدازآن به صورت کامل با تگ <head> آشنا میشویم و می‌بینیم که چه اطلاعاتی و چگونه در آن قرار خواهد گرفت.

آشنایی با Iframes

در زبان HTML برای نمایش یک صفحه وب درون صفحه دیگر، iframe را به کار میبریم. با استفاده از این تگ، پنجره‌ای درون صفحه اصلی ایجاد میکنیم که صفحه مورد نظر درون آن پنجره در صفحه اصلی نمایش داده میشود. تگ <iframe> یک زوج تگ می‌باشد؛ یعنی هم تگ آغاز و هم تگ پایان دارد. آدرس صفحه‌ای را که می‌خواهیم درون آن نمایش داده شود را با استفاده از اتریبیوت src درون تگ آغاز وارد میکنیم. همچنین میتوانیم با استفاده از اتریبیوتهای height و width، طول و عرض پنجره iframe را با پیکسل و یا درصد، تعیین کنیم.

ابتدا یک صفحه جدید ایجاد میکنیم و آن را ذخیره میکنیم. این صفحه را با نام index2.html و در کنار فایل اصلی یعنی index.html ذخیره کرده ایم.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

                   <p> فرض کنید این یک وبسایت است، و می‌خواهیم درون سایت دیگری نمایش داده شود </p>

          </body>

</html>

آموزش HTML – بخش نهم | آموزش Iframe در html | تگ head در html

اکنون کدهایی را برای افزودن iframe می‌نویسیم و صفحه بالا را در آن نمایش می‌دهیم. توجه کنید که آدرسی را که در src می‌نویسیم، آدرس نسبی صفحه دوم نسبت به صفحه اصلی است و این فایلی است که درون سیستم موجود است. یعنی نمی‌توان URL سایت دیگری را قرارداد. ( در آینده با قرار دادن سایت دیگر در iframe آشنا میشویم. )

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

                   <iframe src="index2.html" width="600px" height="200px"> </iframe>

 

          </body>

</html>

آموزش HTML – بخش نهم | آموزش Iframe در html | تگ head در html

همانطور که در عکس بالا مشاهده می‌کنید، در اطراف پنجره‌ی iframe ، حاشیه‌هایی به صورت دیفالت قرار دارد. در اینجا نیز style اتریبیوتیست که میتوان با آن تغییراتی را بر روی حاشیه ایجاد کرد.

در مثال زیر چند iframe را در یک صفحه قرار می‌دهیم و خواهیم دید که چگونه حاشیه را میتوان به دلخواه تغییر داد.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

                   <style>

                             div { float: left;

                                        margin: 50px;

                                       }

                   </style>

          </head>

          <body style="background-color: cyan;">

                   <div>

                             <p> این قسمت به صورت دیفالت است و تغییراتی را بر روی حاشیه ایجاد نکرده‌ایم </p>

                             <iframe src="index2.html" width="250" height="250"> </iframe>

                   </div>

                   <div>

                             <p> حاشیه را در این قسمت از بین برده ایم. به مقداری که به استایلی داده‌شده توجه کنید: </p>

                             <iframe src="index2.html" width="250" height="250" style="border: none;"></iframe>

                   </div>

                   <div>

                             <p> در این قسمت حاشیه آبی و ۳ پیکسل را ایجاد کرده ایم </p>

                             <iframe src="index2.html" width="250" height="250" style="border: 3px solid blue"></iframe>

                   </div>

 

          </body>

</html>

آموزش HTML – بخش نهم | آموزش Iframe در html | تگ head در html

قبلا با اتریبیوت target در یک لینک آشنا شدیم و گفتیم که با این اتریبیوت تعیین میکنیم که لینک ایجادشده چگونه باز شود و با دادن دو مقدار self و blank صفحه جدید به ترتیب در خود تب و یا در تب جدید باز میشد.

میتوان پنجره iframe را به عنوان تارگت لینک معرفی کرد تا با کلیک بر روی لینک، صفحه مقصد در iframe باز شود. برای این کار باید در تگ آغاز iframe اتریبیوت name را بنویسیم و به آن مقداری دلخواهی بدهیم. یعنی یک اسم برای iframe تعریف کنیم. بهتر است این اسم معنادار باشد. در این مواقع معمولا مقدار اتریبوت name را همان iframe_a می‌دهیم. بدین معنی که iframe مرتبط با تگ <a> است.

وقتی‌که نامی را برای iframe تعیین کردید باید در تگ آغاز تگ <a> مقدار اتریبیوت target را نامی که برای iframe تعیین کرده اید بدهید. در مثال زیر اسم iframe را anyname انتخاب کرده ایم و مقدار تارگت را anyname داده ایم.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

                   <style>

 

                   </style>

          </head>

          <body>

                   <iframe src="index2.html" width="1200" height="400" name="anyname"></iframe>

                   <p> وقتی بر روی <a href="http://www.sitesazan.net" target="anyname"> این لینک </a> کلیک کنید، صفحه اصلی سایت سازان در پنجره بالا نمایش داده میشود </p>

          </body>

</html>

آموزش HTML – بخش نهم | آموزش Iframe در html | تگ head در html

آشنایی با تگ <head>

قبلا به صورت مختصر با تگ <head> آشنا شدیم و گفتیم که در این تگ اطلاعاتی قرار میگیرند که در مرورگر نمایش داده نمیشوند و این اطلاعات را متا دیتا میگوییم. یعنی اطلاعاتی هستند که در مورد اطلاعات سند HTML هستند. اطلاعات اصلی که در تگ قرار میگیرند عبارتند از :

  • عنوان صفحه: همان‌طور که در مثال‌های مختلف مشاهده کردید، عنوان صفحه را درون تگ <title> قراردادیم.
  • Character set: این دیتا را با تگ متا <meta> می‌نوشتیم و معمولا از UTF-8 استفاده می‌کردیم.
  • Style: در این تگ با انتخاب اجزاء مختلف صفحه، CSS های دلخواه را به آن‌ها اعمال می‌کردیم.
  • لینک: در قسمت آشنایی با CSS دیدیم که یک روش اعمال CSS نوشتن کدها در فایلی جداگانه و سپس لینک دادن آن صفحه به سند موجود بود. از طریق تگ <link> این کار را انجام می‌دادیم.
  • Script: با استفاده از تگ <script> میتوان اسکریپتهایی را به سند اضافه کرد.

در ادامه با این متادیتا ها بیشتر آشنا خواهید شد.

آشنایی با تگ <title>

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

یکی دیگر از موارد کاربرد عنوان صفحه را هنگامی میبینید که می‌خواهید یک صفحه وب را به صفحات مورد علاقه تان ( یا همان favorite ) اضافه کنید، این صفحه به صورت دیفالت، با نام عنوانی که شما تعیین کرده اید ذخیره می‌شود.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

                   <style>

 

                   </style>

          </head>

          <body>

                   <p> عنوان صفحه را در هر تب میتوانید ببینید. در انتخاب عنوان خیلی حساسیت به خرج دهید و عنوانی که مرتبط با محتوای صفحه است انتخابب کنید. </p>

          </body>

</html>

آموزش HTML – بخش نهم | آموزش Iframe در html | تگ head در html

آشنایی با تگ <style>

با استفاده از این تگ، CSS هایی را برای همان سند HTML که در آن قرار داریم تعریف میکنیم. همانطور که میدانید این روش اعمال CSS را internal میگوییم و نمی‌توانیم CSS ها را به صفحات دیگر اعمال کنیم.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

                   <style>

                             body { background-color: cyan; }

                             p { color: blue; }

                   </style>

          </head>

          <body>

                   <p> هر سی اس اس را که بخواهید به اجزاء این سند اعمال کنید، درون تگ استایل قرار می‌گیرد. </p>

          </body>

</html>

آموزش HTML – بخش نهم | آموزش Iframe در html | تگ head در html

آشنایی با تگ <link>

این تگ زمانی استفاده می‌شود که CSS را به روش external اعمال میکنیم و با این تگ فایل CSS را به سندمان متصل میکنیم.

کدهای CSS:

body {

    background-color: yellow;

}

h1 {

    color: red;

}

p {

    color: green;

}

کدهای HTML:

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                    <title> عنوان صفحه </title>

                   <link rel="stylesheet" href="style.css">

          </head>

          <body>

                   <h1> یک عنوان دلخواه </h1>

                   <p> سی اس اس را به روش اکسترنال اعمال کرده ایم </p>

          </body>

</html>

آموزش HTML – بخش نهم | آموزش Iframe در html | تگ head در html

برای آشنایی بیشتر به قسمت پنجم آموزش HTML مراجعه فرمایید.

آشنایی با تگ <meta>

در این تگ اطلاعاتی قرار میگیرند که به وسیله آن توضیحاتی در مورد صفحه، کلمات کلیدی و اطلاعات دیگر داده میشود. این اطلاعات نیز باید با دقت وارد شوند. زیرا موتورهای جستجو از این اطلاعات استفاده می‌کنند تا صفحه‌ای را ایندکس کنند. همچنین مرورگرها برای نمایش محتوا از این اطلاعات استفاده می‌کنند. به عنوان تمرین، یک متن فارسی را در ویرایشگر کد نوشته و در تگ متا charset=”UTF-8” را حذف کنید و نتیجه را مشاهده کنید.

در ادامه با چند متا دیتا آشنا میشویم:

توضیحی در مورد صفحه وب:

<meta name:”description” content=”Web Design Tutorial”>

تعیین کلمات کلیدی که در محتوا به‌کاررفته اند:

<meta name=”keywords” content=” کلمات کلیدی استفاده‌شده در متن “>

تعین به وجود آورنده صفحه وب:

<meta name=”author” content=” sitesazan “>

یکی دیگر از مهم‌ترین متادیتاها <script> می‌باشد.  این تگ برای افزودن اسکریپتا به کار میرود که در آموزش جاوا اسکریپت به طور کامل با آن آشنا خواهید شد.

آشنایی با تگ <base>

بعضی وقت‌ها در مطالبی که درسایت منتشر میکنیم لینکهای زیادی را قرار می‌دهیم و می‌خواهیم که مخاطب را به یک سایت منتقل کنیم و هرکدام از این لینکها به صفحه‌ای جداگانه از یک سایت لینک زده‌شده‌اند. یعنی آدرس اصلی لینکها، مشترک است. برای اینکه برای تک‌تک لینکها تمام آدرس URL را در href ننویسیم، قسمت اصلی آدرس را در تگ base مینویسیم و ادامه آدرس صفحه مربوطه را در لینک مینویسیم.

برای درک بهتر مثال زیر را باهم بررسی میکنیم.

وبسایت سایت سازان از صفحات مختلفی تشکیل‌شده است. نمونه کارها، مقالات، بهینه‌سازی وبسایت، آموزش طراحی سایت. هر کدام از این صفحات دارای آدرسی است. قسمتی که در این آدرسها مشترک است http://www.sitesazan.net/ است. اگر ما بخواهیم مطلبی را در سایتمان قرار دهیم و در آن چندین لینک قرار دهیم تا مخاطبمان را به قسمت‌های مختلف سایت هدایت کنیم، برای هر لینک باید آدرس کاملی را بنویسیم که عبارتند از:

صفحه اصلی:

http://www.sitesazan.net/

نمونه کارها:

http://www.sitesazan.net/نمونه-کارها/

مقالات جدید:

http://www.sitesazan.net/مقالات-جدید/

و به همین ترتیب می‌بینید که در همه آدرسها، http://www.sitesazan.net/ مشترک است. برای اینکه در هر لینک این آدرس کامل را ننویسیم، در تگ <base> قسمت مشترک را قرار می‌دهیم و در لینکهایی که در متن قرار می‌دهیم، فقط قسمت‌های مربوط به همان صفحه را می‌نویسیم. همچنین برای اینکه در هر لینک target را ننویسیم، در همین تگ base تارگتی را تعیین میکنیم تا به‌کل لینکها اعمال شود. به مثال زیر توجه کنید:

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

                   <base href="http://www.sitesazan.net/" target="_blank">

          </head>

          <body>

                   <p> با کلیک بر روی <a href=""> این لینک </a> به صفحه اصلی منتقل می‌شوید </p>

                   <p> با کلیک بر روی <a href="نمونه-کارها/"> این لینک </a> به نمونه کارها منتقل می‌شوید </p>

                   <p> با کلیک بر روی <a href="مقالات-جدید/"> این لینک </a> به مقالات جدید منتقل می‌شوید </p>

                   <p> با کلیک بر روی <a href="بهینه-سازی-وب-سایت-سئو-۲/"> این لینک </a> به بهینه سازی وب سایت سئو منتقل می‌شوید </p>

                   <p> با کلیک بر روی <a href="آموزش-طراحی-سایت/"> این لینک </a> به آموزش طراحی سایت منتقل می‌شوید </p>

                   <p> با کلیک بر روی <a href="درباره-ما/"> این لینک </a> به درباره ما منتقل می‌شوید </p>

          </body>

</html>

آموزش HTML – بخش نهم | آموزش Iframe در html | تگ head در html

همانطور که در مثال بالا مشاهده کردید، برای هر لینک، قسمت مشترک آدرس را ننوشتیم و فقط آدرس همان صفحه را نوشتیم. همچنین برای تک‌تک لینکها تارگت تعریف نکردیم و فقط برای تگ <base> تارگت را تعریف کردیم که به تمام لینکها اعمال شد.

در این مثال، لینک را بررسی کردیم. میتوان عکسهای مختلفی را در سایت قرارداد و برای آدرس‌دهی برای موتورهای جستجو و یا مرورگرها، فقط یک‌بار در تگ <base> قسمت مشترک آدرس ( پوشه ای که عکس‌ها در آن قرار دارند ) را تعریف کنیم. مثلا در پوشه images درون سیستمتان که در کنار فایل index.html است چندین عکس‌دارید که می‌خواهید همه آنها را وارد صفحه کنید. یک‌بار در تگ <base> آدرس را تعریف کنید و برای هر عکس نام مربوط به هر عکس را بنویسید. اما نمی‌توان طول و عرض عکس را در تگ base تعیین کرد. ( برای تمرین این کار را یک‌بار انجام دهید. )

مثلا در سیستم ما، عکس‌ها در پوشه images هستند و دو تا از آن‌ها را در صفحه قرار می‌دهیم.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

                   <base href="images/">

                   <style>

                             img { width: 400px;

                                        height: 300px;

                                        float: left;

                                        margin: 20px; }

                   </style>

          </head>

          <body>

                   <img src="image01.jpg" alt="سایت سازان">

                   <img src="sitesazan.jpg" alt="سایت سازان">

          </body>

</html>

آموزش HTML – بخش نهم | آموزش Iframe در html | تگ head در html

[rating itemreviewed=”آموزش HTML – بخش نهم” rating=”9.5″ reviewer=”سایت سازان” dtreviewed=”23/11/2016″ best=”10″ worst=”0″]این قسمت از آموزش HTML و طراحی سایت با html به آموزش Iframe در html و آشنایی با تگ head در html اختصاص داده ایم.برای آموزش html5 فارسی با ما همراه باشید و..[/rating]

برای پرسش سوالات خود و کسب اطلاعات بیشتر در مورد طراحی سایت ، سئو ، طراحی نرم افزار موبایل و آشنایی با فرآیند انجام کار با مشاوران گروه سایت سازان در ارتباط باشید.

دسته بندی طراحی سایت در سایت سازان