آشنایی با Head در HTML قسمت اول
آشنایی با Head در HTML
تگ title در HTML
چگونه عنوان برای صفحات HTML ایجاد کنیم؟
تگ title چیست؟ محل استفاده از تگ title کجاست؟ آیا محدودیتی در استفاده از تگ <title> در سند HTML وجود دارد؟ در این مقاله به صورت کامل با تگ <title> که یکی از ساده ترین ولی در عین حال از مهم ترین تگ های موجود در HTML می‌باشد، آشنا می شویم.
1 تگ title
- 1.1 ارتباط تگ title با سئو
- 1.2 مثال
- 1.3 نکات
آشنایی با Head در HTML
تگ title
تگ <title> در همه اسناد HTML الزامی است. این تگ عنوان سند را مشخص می کند.
به طور کلی تگ <title> عنوان صفحه را در بخش تولبار مرورگر مشخص می کند همچنین در هنگام اضافه شدن صفحه به بخش مورد علاقه ها (Bookmark) از این تگ برای عنوان استفاده می شود.
در کنار تاثیرات تگ <title> در مرورگر، این تگ در نتایج موتور های جستجو نمایش داده خواهد شد.
ارتباط تگ title با سئو
همانطور که گفته شد در موتور های جستجو عنوان نتایج نمایش داده شده با استفاده از تگ title امکان پذیر است. بنابر این تگ <title> مستقیما با سئو صفحه شما در ارتباط است و برای اینکه موتور های جستجوگر مانند گوگل بتوانند در نتایج صفحات شما را نمایش دهند می‌بایست عنوان مناسبی را در تگ <title> قرار دهید.
مثال
یک نمونه از استفاده از تگ <title> و نحوه صحیح استفاده از آن را برای شما آورده ایم:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>faraznetwork Head tag sample</title> </head> <!-- This Sample Page is Completely --> <!-- For faraznetwork Blog --> <body> </body> </html>
در مثال بالا مشاهده می‌کنید که عنوان صفحه ما faraznetwork Head Tag Sample قرار گرفته است و برای قرار دادن عنوان ، آن را بین تگ باز و بسته title قرار داده ایم.
نکات
در زیر نکات مهمی که می‌بایست در مورد تگ title بدانید را ذکر کرده ام خوبه که توجه کنید بهشون :
نکته شماره ۱ :
شما نمی توانید بیش از یک تگ <title> در هر سند html داشته باشید. همچنین اگر از تگ <title> استفاده نکنید، سند HTML شما معتبر نخواهد بود.
نکته شماره ۲ :
برای استفاده از تگ <title> می‌بایست حتما آن را در داخل تگ <head> قرار دهید.
اگر با جستجو وارد این قسمت از آموزش شدید و مقالات آموزشی دیگر من در رابطه با HTML را بررسی نکردید یا به طور کلی اطلاعات در مورد ساختار صفحات HTML را فراموش کرده‌اید، پیشنهاد می‌کنم مقاله ساختار صفحات در HTML را مطالعه کنید.
در این مقاله با تگ title آشنا شدیم و نحوه استفاده از آن را بررسی کردیم. امیدوارم مطالب این جلسه براتون مفید بوده باشه و اهمیت این تگ را به صورت کامل قابل درک توضیح داده باشم.
آشنایی با Head در HTML
تگ style در HTML
استایل بندی درون صفحه ای با تگ style
تگ style چیست؟ چگونه در صفحات html استایل بندی کنیم؟ در این مقاله به صورت کامل با تگ style که کاملا مربوط بهCSS می‌شود آشنا می‌شویم.
- 1 تگ Style
- 1.1 مثال
- 2 خاصیت های تگ style
آشنایی با Head در HTML
تگ Style
تگ <style> برای تعیین اطلاعات استایل در یک سند HTML مورد استفاده قرار می گیرد. در داخل این تگ شما تعیین می کنید عناصر HTML چگونه و با چه استایلی در مرورگر نمایش داده شود. به طور کلی استفاده از تگ style زمانی است که می‌خواهیم به صورت داخلی کدهای css خود را در صفحات html معرفی کنیم.
هر سند HTML می تواند حاوی چندین تگ style باشد.
مثال
در مثال زیر ما تگ <style> را درون تگ head قرار داده ایم که یک نمونه از استفاده از این تگ می‌باشد. با اینحال شما می‌توانید از این تگ در بخش body صفحه خود نیز استفاده کنید.
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
می‌بینید که در مثال بالا تگ h1 به رنگ قرمز و تگ p رنگ آبی در آمده است و همانطور که گفتیم، این بخش با کد های CSS تکمیل می‌شود، برای یادگیری CSS پیشنهاد می‌کنم که مقالات آموزش CSS ما در فرازنتورک را بخوانید.
آشنایی با Head در HTML
خاصیت های تگ style
در جدول زیر خاصیت های اختصاصی تگ style را می‌بینید.
| خاصیت | مقدار | توضیحات |
| Media | کوئری مدیا | تعیین کننده نوع دستگاه یا رسانه ای که منبع رسانه ای برای بهینه سازی مورد استفاده قرار می گیرد |
| Type | Text/css | تعیین کننده نوع رسانه تگ <style> |
این تگ با توجه به اینکه به صورت پنهان از دید کاربران است نیازی به استفاده از خاصیت های عمومی ندارد، با اینحال از خاصیت های عمومی و رویدادی (Event) پشتیبانی می‌کند.
توضیحاتی اولیه را در رابطه با تگ style در این مقاله خواندیم و با آن آشنا شدیم.در آموزش های CSS یک مقاله کامل در رابطه اتصال داخلی کدهای CSS نوشته شده است که از نظر پیاده سازی و مزایا و معایب این نوع اتصال را بررسی کرده است، با توجه به استفاده از تگ style برای اتصال داخلی کدهای CSS پیشنهاد می‌کنم ، این مقاله را بررسی کنید.
آشنایی با Head در HTML
تگ link در HTML
معرفی کتابخانه ها و فایل های مختلف به سند HTML
تگ link چیست ؟ چه کارایی دارد؟ آیا می‌توانیم فایل های خارجی را وارد صفحات وبمان کنیم؟ در این مقاله ما با تگ link و خاصیت های آن آشنا می‌شویم.
- 1 آشنایی با تگ Link
- 1.1 مثال تگ link
- 1.2 تفاوت تگ <link> بین نسخه HTML 4 و HTML 5
- 1.3 تفاوت تگ <link> بین HTML و XHTML
- 1.4 خاصیت ها
آشنایی با تگ Link
تگ link پیوند بین یک سند و یک منبع بیرونی را مشخص می کند. همچنین از این تگ برای لینک کردن فایل های css به داخل صفحه وب استفاده می شود.
تگ link یک تگ خالی است از این رو بر روی خواص موجود تکیه دارد.
مثال تگ link
نمونه استفاده از تگ link را در زیر مشاهده می‌کنید:
<head> <link rel="stylesheet" type="text/css" href="theme.css"> </head>
در مثال بالا با استفاده از تگ link یک فایل css به نام Theme.css را وارد سند کرده‌ایم.
همچنین در نظر داشته باشید که این نوع استفاده از تگ لینک در اتصال خارجی CSS اتفاق می‌افتد
تفاوت تگ <link> بین نسخه HTML 4 و HTML 5
در نسخه 5 بعضی از خواص موجود در نسخه 4 پشتیبانی نمی شوند.
خاصیت sizes در نسخه 5 اضافه شده است.
تفاوت تگ <link> بین HTML و XHTML
در HTML تگ پایانی برای بستن ندارد.
در XHTML تگ <link> باید بسته شود.
خاصیت ها
| خاصیت | مقدار | توضیح |
| charset | نوع کدگذاری | تعیین کننده نوع encode لینک مقصد است، در نسخه HTML5 پشتیبانی نمی شود. |
| crossorigin | Anonymous use-credential |
تعیین کننده نحوه مدیریت درخواست های منشا متقابل است |
| Href | url | آدرس فایل مقصد |
| Hreflang | کد زبان | کد زبان استفاده شده در فایل مقصد |
| Media | کوئری مدیا | تعیین کننده نوع دستگاهی که محتویات لینک در آن قابل نمایش است |
| Rel | alternate author dns-prefetch help icon license next pingback preconnect prefetch preload prerender prev search stylesheet |
تعیین کننده رابطه بین صفحه فعلی و فایل لینک شده، استفاده از این خاصیت الزامی است |
| Rev | reversed
relationship |
تعیین کننده رابطه بین صفحه فعلی و فایل لینک شده، در نسخه HTML5 پشتیبانی نمی شود. |
| Sizes | HeightxWidth any |
تعیین کننده اندازه آیکون فایل لینک شده، فقط در هنگام استفاده از rel=icon |
| Target | _blank _self _top _parent frame_name |
تعیین کننده نحوه بارگیری لینک، در نسخه HTML5 پشتیبانی نمی شود. |
| type | media | تعیین کننده نوع رسانه فایل لینک شده |
همانطور که در مقاله خواندیم، تگ link یک تگ برای پیوند دادن سند به فایل های خارجی است. همچنین به علت اینکه تگ خالیست به خاصیت های خود تکیه می‌کند.
این مقاله نیز به پایان رسید. امیدوارم خوب بوده باشد.
جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.
جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.
نویسنده:راحله تبریزی
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.