طراحی سایت تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
02188471521   ۰۲۱۴۰۸۸۱۰۳۸

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

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

در بخش نهم آموزش HTML با مباحث زیر آشنا خواهیم شد:

  • Ifram: خواهیم دید که iframe چیست و چه کاربردی دارد.
  • تگ <head>: در ادامه با این تگ و اطلاعاتی که در آن قرار می گیرد آشنا خواهیم شد.

آشنایی با Iframes

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

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

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

حال می خواهیم صفحه بالا را در یک iframe نمایش دهیم. توجه کنید که آدرسی را که در src می نویسیم، آدرس نسبی صفحه دوم نسبت به صفحه اصلی است و این فایلی است که درون سیستم موجود است. با آدرس دهی مطلق، می توان سایت دیگری را در iframe نمایش داد. برای این کار آدرس کامل سایت مورد نظر را همراه با http:// در خصیصه src قرار می دهیم.

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

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

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

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

می توان پنجره iframe را به عنوان پنجره هدف برای باز شدن لینک تعیین کرد. برای این کار ابتدا باید یک نام را برای المان iframe با استفاده از خصیصه name انتخاب کرد. حال در لینک مورد نظر، مقدار خصیصه target را، نام تعیین شده برای iframe می دهیم.

در مثال زیر اسم iframe را anyname انتخاب کرده ایم و مقدار تارگت را anyname می دهیم تا لینک در پنجره iframe باز شود:

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

تگ <head>

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

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

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

تگ <title>

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

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

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

تگ <style>

گفتیم که با استفاده از این تگ، می توانیم سبک دهی المان ها را به صورت درونی انجام دهیم:

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

تگ <link>

دیدیم زمانی که دستورات CSS را در فایلی خارجی می نویسیم، با استفاده از این المان ها، فایل مورد نظر را به سند HTML متصل می کنیم.

کدهای CSS:

کدهای HTML:

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

در جلسه پنجم آموزش HTML با این تگ آشنا شدیم.

تگ <meta>

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

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

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

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

معرفی منتشر کننده صفحه وب:

یکی دیگر از مهم ترین متادیتاها المان <script>  می باشد. با استفاده از این تگ می توان کدهای جاوااسکریپت را در صفحه نوشت.

تگ <base>

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

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

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

صفحه اصلی:

نمونه کارها:

مقالات جدید:

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

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

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

در این مثال، لینک را بررسی کردیم. می توان این کار را برای عکس ها نیز انجام داد. یعنی زمانی که می خواهیم چندین عکس را از یک پوشه انتخاب کنیم، یک بار در تگ <base>  آدرس پوشه را بنویسیم و در هر تگ <img>  در خصیصه src فقط نام عکس را بنویسیم. اما طول و عرض را نمی توان در تگ <base>  تنظیم کرد.

مثلا در سیستم ما، عکس ها در پوشه images قرار دارند. حال می خواهیم دو عکس را انتخاب نماییم و در محتوایمان قرار دهیم:

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

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

نوشته های مرتبط

دیدگاه ‏خود را بنویسید