آموزش کار با تگ Head در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با تگ Head در HTML با من همراه باشید.

آموزش کار با تگ Head در HTML

Free-Learn

تگ Head در HTML

هد یا Head یا سَر یکی از مهمترین و اساسی ترین بخش یک صفحه ی وب و یا بطور کلی یک صفحه ی HTML می باشد، بطور کلی میتونیم بگیم که Head یک صفحه ی وب مغز آن صفحه می باشد.

که در این Head یا سَر یکسری اطلاعات مربوط به صفحه ی وبمان قرار میگیرد، مثلا عنوان صفحه ما برای نمایش در مرورگرها در قسمت هِد قرار میگیرد.

یا مثلا برای اضافه کردن دستورات CSS به یک صفحه ی وب ما باید دستورات CSS رو در قسمت هِد یا Head یک صفحه ی وب قرار دهیم و دیگر مواردی که در ادامه با آنها آشنا خواهید شد.

همچنین متاداده ها یا metadata نیز در قسمت Head یک صفحه ی وب قرار میگیرند، متاداده ها در HTML در واقع اطلاعاتی را در مورد یک صفحه وب به مرورگرها و موتورهای جستجوگر ارائه می دهند.

عنصر یا تگ <head> در یک صفحه ی وب بعد از تگ <html> و قبل از تگ <body> قرار میگیرد، لطفا به دستورات زیر و محل قرار گیری عنصر یا تگ <head> در یک صفحه ی وب توجه نمایید.

اگر میخواهید یک محتوا،متن،تصویر و.. در مرورگرها نمایش داده شود باید آن را در قسمت body یک صفحه ی وب وارد کرد نه قسمت هِد یا Head.



Free-Learn

کار با تگ Head در HTML

همونطور که کمی بالاتر ذکر کردم، ما نباید هیچوقت یک محتوا مثلا متن یا تصویر یا جدول یا هرچیز دیگه ای رو برای نمایش در مرورگرها در قسمت Head یک صفحه ی وب قرار دهیم.

چون که همیشه این رو بدونید در قسمت هِد یا Head یک صفحه ی وب فقط مواردی قرار میگیرند که اطلاعاتی یا یکسری ویژگی هایی رو به صفحه ی وب ما اضافه میکنند.

تگ ها یا عناصری که میتوانند یکسری اطلاعات و امکانات رو به یک صفحه ی وب اضافه کنند موارد زیر می باشند :

نام تگ توضیح
<title> برای مشخص کردن عنوان یک صفحه ی وب (ضروری می باشد)
<style> برای اضافه کردن دستورات سی اس اس به یک صفحه ی وب
<link> برای اضافه کردن فایل های خارجی به یک صفحه ی وب
<meta> برای اضافه کردن یکسری اطلاعات در مورد یک صفحه وب برای مرورگرها و موتورهای جستجوگر
<script> برای اضافه کردن دستورات جاوا اسکریپت به یک صفحه ی وب
<base> برای مشخص کردن یک لینک پایه برای تمامی لینک های موجود در یک صفحه ی وب

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

Free-Learn

نحوه استفاده از تگ <title> در HTML

عنصر یا تگ <title> یکی از مهمترین تگ های HTML و بطور کلی یکی از تگ های اصلی در یک صفحه وب می باشد که هیچوقت نباید آنرا فراموش کرد چون وجود این تگ در یک صفحه ی وب ضروری می باشد.

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

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

Free-Learn

نحوه استفاده از تگ <style> در HTML

اگر فری لرن رو در بخش های قبلی دنبال کرده باشید، میدانید که من بطور کامل آموزش نحوه استفاده از صفت <Style> رو آموزش دادم که در صورت تمایل میتوانید این بخش را از اینجا مشاهده نمایید.

با استفاده از این تگ ما در قسمت هد یا head یک صفحه ی HTML به راحتی میتوانیم دستورات CSS مان را اضافه نماییم.

لازم به ذکر است که با استفاده از این تگ ما میتوانیم فقط و فقط برای یک صفحه HTML استایل یا دستورات سی اس اس تعریف نماییم.


امتحان کنید

Free-Learn

نحوه استفاده از تگ <link> در HTML

کمی بالاتر ما با استفاده از تگ <style> میتوانستیم به راحتی دستورات سی اس اس مان را به یک صفحه HTML اضافه نماییم، ولی همانطور که در قسمت بالا هم گفتم در آن حالت ما فقط برای یک صفحه از وبسایت مان میتوانیم استایل تعریف نماییم.

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

در اینصورت دیگه محدودیتی برای استفاده از دستورات CSS نداریم، چرا که ما به راحتی میتوانیم یک فایل CSS که بصورت مجزا ایجاد شده است را به چندین فایل HTML متصل نماییم.

از اینجا میتوانید آموزش نحوه استفاده از CSS در HTML و همچنین آموزش ساخت فایل CSS بصورت مجزا را مشاهده نمایید.


امتحان کنید

Free-Learn

نحوه استفاده از تگ های <meta> در HTML

عنصر یا تگ <meta> متاداده هایی برای مشخص کردن یکسری اطلاعات مربوط به یک صفحه وب، برای مرورگرها و موتورهای جستجوگر می باشد که در ادامه با این متاداده ها آشنا خواهید شد.

  • تعریف نوع کاراکترهای مورد استفاده در یک صفحه وب :

اگر شما یک صفحه HTML را ایجاد کرده اید و در آن یک متن فارسی را نوشته اید ولی وقتی آن را اجرا مینمایید در مرورگر متن شما بصورت عجیب غریب نمایش داده می شود، بدانید که از متای charset استفاده نکرده اید.

حال برای رفع این مشکل کافیست تکه کد زیر را در قسمت هد یا Head صفحه ی HTML تان قرار دهید.

امتحان کنید

  • یک توضیح کوتاه یا شرحی درباره یک صفحه وب برای موتورهای جستجوگر :

امتحان کنید

  • مشخص کردن کلمات کلیدی یک صفحه وب برای موتورهای جستجوگر :

امتحان کنید

  • مشخص کردن نویسنده یک صفحه وب برای موتورهای جستجوگر :

امتحان کنید

Free-Learn

نحوه استفاده از تگ <script> در HTML

با استفاده از این تگ در قسمت هد یا Head یک صفحه وب، میتوان دستورات جاوا اسکریپت را قرار داد.

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


امتحان کنید

Free-Learn

نحوه استفاده از تگ <base> در HTML

با استفاده از این تگ در قسمت Head یک صفحه وب میتوان بیس یا پایه اصلی مقصد تمامی لینک های موجود در یک صفحه وب را مشخص کرد.

بزارید کمی بیشتر در مورد این تگ توضیح دهم، همانطور که میدانید در بخش های قبلی ما یاد گرفتیم که با استفاده از تگ <a> میتوانیم یک لینک را ایجاد نماییم، و همچنین با استفاده از صفت src میتوانیم آدرس مقصد را برای لینک مان مشخص نماییم.

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

برای مثال لطفا به دستورات زیر توجه نمایید و همچنین بروی دکمه (امتحان کنید) برای مشاهده خروجی بصورت آنلاین کلیک نمایید.

امتحان کنید

لطفا برای اینکه بهتر و بطور کامل متوجه این موضوع شوید حتما خودتان تمرین نمایید و به دلخواه خودتان یک لینک پایه ایجاد نمایید سپس درون صفحه وبتان یک لینک ایجاد نمایید و نتیجه را ببینید.

Free-Learn

  • خلاصه ی این بخش
  • قسمت Head یک صفحه با تگ های Heading فرق میکند، Head یا سَر ،یک بخش از یک صفحه ی HTML می باشد که در این بخش ما میتونیم یکسری اطلاعات درباره صفحه ی وبمون به مرورگرها و موتورهای جستجوگر بدهیم ولی تگ های Heading صرفا تگ هایی می باشند که با استفاده از آنها میتوان عنوان یا تیترهای مطالب سایت را مشخص کرد.
  • بخش یا قسمت Head یک صفحه ی وب، با استفاده از تگ <head> مشخص میشود که این تگ بلافاصله بعد از تگ <html> و قبل از تگ <body> قرار میگیرد.
  • با استفاده از تگ <title> میتوان عنوان یک صفحه ی وب را در مرورگرها و موتورهای جستجوگر مشخص کرد.
  • با استفاده از تگ <style> میتوان از دستورات سی اس اس درون یک فایل HTML استفاده کرد. (فقط برای یک صفحه)
  • برای فراخوانی یا متصل کردن فایل های خارجی مثله سی اس اس که بصورت مجزا ایجاد شده اند باید از تگ <link> استفاده کرد.
  • با استفاده از تگ <meta> میتوان یکسری اطلاعات مثله (توضیحات کوتاه درباره صفحه،نام نویسنده صفحه،کلیدواژه های صفحه و..) را به مرورگرها و موتورهای جستجوگر ارائه داد.
  • با استفاده از تگ <script> میتوان از دستورات جاوااسکریپت درون یک فایل HTML استفاده کرد. (فقط برای یک صفحه)
  • با استفاده از تگ <base> میتوان یک لینک پایه برای تمامی لینک های موجود در یک صفحه مشخص کرد.
  • اگر یک فایل HTML ایجاد کرده اید و از حروف فارسی در آن استفاده کرده اید ولی در مرورگر حروف بصورت ناخوانا و یا عجیب غریب نمایش داده می شود، باید از متای <meta charset=”UTF-8″> در قسمت Head استفاده نمایید.
  • دانلود PDF این آموزش
  • برای دانلود فایل PDF این آموزش کلیک نمایید