فیلم آموزشی تگ head در HTML

در این فیلم آموزشی ابتدا به معرفی تگ head در HTML می پردازیم. همچنین بررسی می کنیم که متا تگ (تگ meta در HTML) چیست و چه کاربردی دارد.

در ادامه این فیلم توضیحاتی در مورد متاتگ title و اهمیت آن خواهیم داد.

سپس به متا تگ های مهم از جمله متا تگ های سئو، متا تگ دیسکریپشن (description) نیز اشاراتی می کنیم.

در نهایت با متا تگ viewport و اینکه تگ meta name viewport چه کاربردی دارد، آشنا می شویم.

تگ head در HTML چیست

مقدمه: فیلم آموزشی تگ head در HTML

در این ویدئو آموزشی ابتدا عنصر head در HTML را معرفی می کنیم. این فیلم آموزشی قسمت چهارم از آموزش رایگان HTML در سایت وبمستر وردپرس می باشد.

آموزش دوره HTML را با معرفی زبان HTML و تاریخچه ی آن شروع کردیم.

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

در ادامه این آموزش کابرد تگ head در HTML رابررسی می کنیم.

سپس متا تگ های کاربردی همانند title tag (متاتگ title) و متا تگ های سئو را معرفی می کنیم.

در تمامی این بخش ها ما با استفاده از inspector مروگر کروم، متا تگ های مهم را آموزش می دهیم.

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

بعضی از قسمت های این دوره، به صورت رایگان در سایت وبمستر وردپرس در دسترس عموم خواهد بود و سایر آن ها را می توانید با مراجعه به سایت کلوپ وبمستران وردپرس ، دریافت نمایید.

توجه: پیشنیاز برای یادگیری HTML

در نظر داشته باشید برای اینکه بتوانید بر مفاهیم HTML مسلط شوید، باید بدانید که وب از چه اجزایی ساخته شده است و چگونه کار می کند.

در واقع می توان گفت برای وبمستر حرفه ای شدن و وارد شدن به سایر مباحث همچون HTML می باید بر مفاهیم وب و نحوه کار اجزا آن باهم آشنا شوید. به همین منظور، پیشنیاز درک بهتر این دوره، دوره آموزش مقدمات وب می باشد.

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

دوره آموزشی HTML کاربردی برای وبمستران

در کمتر از ۹ ساعت مثل یک برنامه نویس حرفه ای به HTML مسلط شوید!!!

اگر وبمستر، سئوکار، دیجیتال مارکتر یا صاحب کسب و کار آنلاین هستید، اولین چیزی که باید با آن آشنا باشید، یادگیری HTML می باشد. در غیر این صورت از پس هیچ کدام از کارهای وبمستری خود بر نخواهید آمد. برای ثبت نام در دوره کاربردی HTML در کمتر از ۹ ساعت، از لینک روبرو استفاده کنید.
دوره آموزشی HTML کاربردی برای وبمستران

نمایش فیلم آموزشی کاربرد تگ head در HTML

در ادامه می توانید فیلم آموزشی رایگان عنصر head در HTML را که به همراه توضیح و مثال می باشد، در زیر مشاهده فرمایید. در صورتی که نیاز به دانلود آن دارید، می توانید از لینک های پایین صفحه استفاده نمایید:

تگ در HTML

توجه : پیشنیاز آموزش « عنصر head در HTML »

برای درک دقیق و عمیق آموزش تگ head در HTML، باید بدانید که تگ در HTML چیست و ساختار کلی آن به چه شکلی می باشد. اگر با تگ در HTML آشنایی ندارید جای نگرانی ندارد، می توانید به قسمت دوم از سری آموزش های HTML مراجعه کرده یا از طریق لینک روبرو با تگ در HTML آشنا شوید.

تگ در HTML

فیلم آموزش «دستور head در HTML» شامل چه بخش هایی می باشد؟

فیلم آموزشی رایگان تگ head در HTML ، دارای بخش هایی به شرح زیر می باشد:

تگ head در HTML چیست ؟

در قسمت ابتدایی فیلم، به توضیح تگ head می پردازیم:

تگ head وظیفه نگهداری متادیتا (Metadata) یا اطلاعات متای مرتبط با صفحه را دارد. عموماً متادیتاها در مرورگر نمایش داده نمی شوند. مانند: کاراکتر ست (Character Sets)

فرم کلی آن ها معمولاً به شکل است:

meta name = "value"
  • charset چیست؟

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

  • utf-8 چیست؟

    در حال حاضر کاراکتر ست UTF-8 ، رایج ترین شیوه کدگذاری در بین سایت‌ها است. در این روش می توان، تمامی‌کاراکترهای موجود در یونیکد را، کدگذاری کرد.

 <meta charset="UTF-8">
tag head چیست

متا تگ چیست و چه کاربردی دارد؟

تگ meta در html یا همان متا تگ ها (meta tags) عناصری هستند که قسمتی از محتوای صفحه وب را تشکیل می دهند و فقط موتورهای جستجو قادر به مشاهده آن ها می باشند.

  • متا تگ ها چه ویژگی هایی دارند؟

    متا تگ ها دارای ۲ خاصیت نام (Name) و محتوا (Content) هستند. که خاصیت name نوع متا تگ و خاصیت Content مقدار متا تگ را نشان می دهد.

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

متا تگ چیست

تگ title در HTML

تگ title در HTML یا متاتگ عنوان (meta tags title) نام وب سایت ما را در مرورگر نمایش می دهد. در حقیقت توضیح کوتاهی از محتوای وب سایت ما می باشد. و فرم کلی آن به صورت زیر است:

<head> 
   <title>وبمستر وردپرس</title>
</head>
  • ما با استفاده از ویرایشگرهای HTML همانند Phpstorm و Visual studio می توانیم متاتگ title را تغییر دهیم.

  • متاتگ title تاثیر فراوانی در سئو سایت دارد. بنابراین استفاده ازین متاتگ حائز اهمیت است.

  • هنگام ذخیره کردن صفحه در Bookmark از این متا تگ در عنوان استفاده می شود.

  • متاتگ title در نتایج موتورهای جستجو (SERP) نمایش داده می شود.

متاتگ title

معرفی متا تگ دیسکریپشن (Meta Description)

متا تگ دیسکریپشن (Meta Description) توضیحی کوتاه و اجمالی در مورد صفحه می دهد. همچنین جزو مهم ترین متاتگ های سئو بشمار می رود.

 <meta name="description" content="توضیح کوتاه در مورد صفحه">
متا تگ description

Viewport چیست و چه کاربردهایی دارد؟

در fixed size بودن بعضی از عناصر در Screen های بزرگ مشکلاتی وجود داشت. به عبارت دیگر، در device هایی با Screen کوچکتر، آن ها خیلی بزرگ به نمایش در می آمدند. برای رفع این مشکل، متا تگ viewport معرفی شد.

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

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • متا تگ viewport چه کاربردهایی دارد؟

  • استفاده ازین متاتگ سبب شد تا مرورگر خودش Scale یا بزرگنمایی عناصر fixed size را تنظیم کند. به عبارت دیگر، متا تگ viewport به مرورگر می گوید که چگونه باید صفحه را Scale کرده و اندازه آن را تنطیم کند.

  • برای طراحی سایت واکنش‌گرا یا ریسپانسیو از viewport meta tag استفاده می کنیم و این موضوع برای موتورهای جستجو اهمیت فراوانی دارد. در نتیجه برای سئو وبسایت نیز مفید می باشد.

viewport چیست

پیشنهاد برای مطالعه بیشتر

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

فراخوانی CSS در HTML

نتیجه گیری برای فیلم آموزش «تگ head در HTML»

در این بخش به معرفی تگ head در HTML می پردازیم.

متادیتاها و نحوه معرفی آن ها در یک صفحه HTML بیان می کنیم.

همچنین با تگ های مهم این بخش همچون title و تگ های معروف چون description آشنا می شویم.

در نهایت با متا تگ viewport و کاربرد های آن آشنا می شویم.

ممکن است به نظر شما بعضی از موارد درست نبوده و یا شما موارد بیشتری را بدانید که ما فراموش کرده ایم تا در این فیلم آموزشی، قرار دهیم.

اگر شما از این موارد آگاه هستید، حتما در بخش نظرات عنوان کنید تا آن را به این مقاله اضافه کنیم. در ضمن اگر این مقاله را مفید دیدید، حتما آن را به دوستان خود معرفی کرده یا در شبکه های اجتماعی به اشتراک بگذارید.

نظر شما در مورد این مقاله چیست؟

در ساخت و تهیه این مطلب فیلم آموزش مقدمات وبمستری از مراجع زیر استفاده شده است. شما می توانید با مراجعه به آن ها، اطلاعات بیشتری را بدست آورید:

راهنما برای خواندن سایر مقالات سایت به صورت دسته بندی شده:

شما می توانید از طریق لینک های کاربردی زیر به سایر مقالات سایت که کاملا بصورت طبقه بندی شده وجود دارد، مراجعه نموده و از آن ها استفاده کنید:

بازگشت به صفحه بلاگ وبمستر وردپرس