آموزش HTML به زبان ساده جلسه دوم

تاریخ انتشار: 19 اردیبهشت 1402

بازدید: 253 بازدید

آموزش HTML به زبان ساده جلسه دوم

فهرست محتوای مطلب نمایش

در این جلسه از سری آموزش های HTML به زبان ساده به سراغ تگ <head> و زیر تگ هایی که داخل آن استفاده میشود رفته و تمامی آنها را با ذکر مثال بررسی خواهیم کرد پس در ادامه با فایل گپ همراه باشید .

اموزش تگ <head> در html

تگ <head> در HTML برای قرار دادن اطلاعاتی مانند عنوان صفحه، لینک های استایلی، اسکریپت ها و متا دیتاها به کار می‌رود. این تگ در بخش اول صفحه و قبل از تگ <body> قرار می‌گیرد.

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

مثال های زیادی برای استفاده از تگ <head> در HTML وجود دارد. اما به طور کلی، یک مثال ساده برای استفاده از این تگ به صورت زیر است:

<!DOCTYPE html>
<html>
<head> 
<title>عنوان صفحه</title>
<meta charset="UTF-8">
<meta name="description" content="توضیحات صفحه">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- محتوای صفحه -->
</body>
</html>

در این مثال، تگ <head> شامل چندین المان است که هر کدام برای مقاصد مختلفی استفاده شده‌اند.

تگ <title> برای قرار دادن عنوان صفحه به کار رفته است.
المان <meta> شامل دو ویژگی charset و description است. charset برای تعیین کدبندی صفحه و description برای قرار دادن توضیحات صفحه به کار رفته‌اند.
تگ <link> برای قرار دادن لینک های استایلی به کار رفته است.

تگ `<title>`

تگ <title> برای قرار دادن عنوان صفحه به کار می‌رود. این عنوان در نوار بالای مرورگر نمایش داده می‌شود و برای جلب توجه کاربران به صفحه، بسیار مهم است.

<head>
<title>صفحه اصلی وب سایت</title>
</head>

در این مثال، عنوان صفحه “صفحه اصلی وب سایت” تعیین شده است. این عنوان در نوار بالای مرورگر نمایش داده می‌شود و کاربران به سرعت متوجه محتوای صفحه و عنوان وب سایت می‌شوند.

تگ `<link>`

تگ <link> برای قرار دادن لینک های استایلی و در کل اعمال به فایل خارجی در صفحه وب به کار می‌رود مثلا با استفاده از این تگ، شما می‌توانید به صفحه خود استایلی مناسب بدهید و آن را زیباتر و جذاب تر کنید.

بیشتر بخوانید ارزش‌گذاری محصول و تاثیر آن بر فروش

تگ <link> در HTML برای ارتباط دادن صفحات HTML با فایل‌های دیگر مانند فایل‌های CSS، فونت‌ها و غیره به کار می‌رود. این تگ به صورت تگ خالی (self-closing tag) درون تگ <head> قرار می‌گیرد.

مثالی از استفاده از تگ <link> در HTML به این صورت است:

<head>
<title>صفحه اصلی وب سایت</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

در این مثال، تگ <link> برای ارتباط دادن صفحه HTML با یک فایل CSS به نام style.css استفاده شده است. ویژگی rel برای تعیین نوع رابطه بین صفحه HTML و فایل CSS به کار می‌رود. در این مثال، نوع رابطه “stylesheet” برای اتصال فایل CSS به صفحه HTML تعیین شده است. ویژگی type برای تعیین نوع فایل به کار می‌رود، و در این مثال، نوع فایل “text/css” است. و در نهایت، ویژگی href برای تعیین مسیر فایل به کار می‌رود.

تگ <link> همچنین برای اتصال صفحات HTML به فونت‌ها، آیکون‌ها و موارد دیگر نیز استفاده می‌شود. به عنوان مثال، برای اتصال یک فایل آیکون به صفحه HTML، کد زیر را می‌توان به کار برد:

<link rel="icon" href="favicon.ico" type="image/x-icon">

در این مثال، نوع رابطه “icon” برای اتصال فایل آیکون به صفحه HTML تعیین شده است. ویژگی type برای تعیین نوع فایل به کار می‌رود، و در این مثال، نوع فایل “image/x-icon” است. و در نهایت، ویژگی href برای تعیین مسیر فایل به کار می‌رود.

ویژگی `type`

ویژگی type در تگ <link> برای تعیین نوع فایل استفاده می‌شود. این ویژگی به مرورگر اطلاع می‌دهد که فایل مربوطه چه نوع فایلی است. به عنوان مثال، برای اتصال یک فایل CSS به صفحه HTML، نوع فایل “text/css” در ویژگی type تعیین می‌شود. به این ترتیب، مرورگر می‌داند که فایل مربوطه یک فایل CSS است و باید به درستی پردازش شود.

برخی از انواع type که در تگ <link> استفاده می‌شوند عبارتند از:

text/css: برای فایل‌های CSS
text/javascript: برای فایل‌های جاوااسکریپت
image/png: برای تصاویر PNG
image/jpeg: برای تصاویر JPEG
image/gif: برای تصاویر GIF
application/pdf: برای فایل‌های PDF

ویژگی `rel`

ویژگی rel نیز برای تعیین نوع رابطه بین صفحه HTML و فایل دیگر استفاده می‌شود. این ویژگی به مرورگر اطلاع می‌دهد که فایل مربوطه چه نوع رابطه با صفحه HTML دارد. به عنوان مثال، برای اتصال یک فایل CSS به صفحه HTML، نوع رابطه “stylesheet” در ویژگی rel تعیین می‌شود. به این ترتیب، مرورگر می‌داند که فایل CSS برای استفاده در قالب یک استایل برای صفحه HTML استفاده خواهد شد.

برخی از انواع rel که در تگ <link> استفاده می‌شوند عبارتند از:

stylesheet: برای فایل‌های CSS
icon: برای فایل‌های آیکون
preconnect: برای اتصال به یک منبع پیش‌فرض برای بارگیری سریع‌تر صفحه
dns-prefetch: برای پیش‌بارگیری DNS یک منبع برای بارگیری سریع‌تر صفحه
next: برای اطلاع رسانی به مرورگر که صفحه بعدی در یک سری صفحات وجود دارد و ممکن است کاربر به آن نیاز داشته باشد.

بیشتر بخوانید سئو چیست ، مفهوم سئو به زبان ساده

با استفاده از این دو ویژگی rel و type، صفحات HTML با فایل‌های دیگر مانند فایل‌های CSS، فونت‌ها، آیکون‌ها و غیره ارتباط برقرار می‌کنند و مرورگر به درستی آن‌ها را پردازش می‌کند.

المان `<meta>`

المان <meta> شامل اطلاعاتی است که برای موتورهای جستجو و دیگر وب سرویس ها مفید هستند. به عنوان مثال، ویژگی charset برای تعیین کدبندی صفحه به کار می‌رود و description برای قرار دادن توضیحات صفحه استفاده می‌شود. همچنین، می‌توانید ویژگی های دیگری مانند keywords برای قرار دادن کلمات کلیدی به کار ببرید.

این المان به صورت تگ باز و تگ بسته درون تگ <head> قرار می‌گیرد و می‌تواند شامل ویژگی های مختلفی باشد.

مثالی از استفاده از المان <meta> در HTML به این صورت است:

<head>
<meta charset="UTF-8">
<meta name="description" content="توضیحات صفحه">
<meta name="keywords" content="کلمات کلیدی، HTML">
</head>

charset: ویژگی charset برای تعیین کدبندی صفحه به کار می‌رود. در مثال بالا، کدبندی UTF-8 برای صفحه تعیین شده است.
description: ویژگی description برای قرار دادن توضیحات صفحه استفاده می‌شود. در مثال بالا، توضیحات صفحه به “توضیحات صفحه” تعیین شده است.
keywords: ویژگی keywords برای قرار دادن کلمات کلیدی به کار می‌رود. در مثال بالا، کلمات کلیدی “کلمات کلیدی” و “HTML” برای صفحه تعیین شده است.

Viewport در المان `<meta>`

Viewport در المان <meta> یکی از ویژگی های مهم است که برای تعیین نحوه نمایش صفحه در دستگاه های مختلف استفاده می‌شود. این ویژگی معمولاً در وب سایت هایی که به صورت ریسپانسیو طراحی شده اند، استفاده می‌شود تا صفحه به درستی در دستگاه های مختلف نمایش داده شود.

viewport به صورت زیر تعریف می‌شود:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width: این ویژگی به مرورگر اجازه می‌دهد تا عرض صفحه را برابر با پهنای دستگاه قرار دهد. به عبارت دیگر، صفحه به عرض دستگاه تطبیق پیدا می‌کند.
initial-scale=1.0: این ویژگی نسبت اندازه صفحه را به اندازه اولیه تنظیم می‌کند.

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

برخی از ویژگی‌های مهم المان <meta> عبارتند از:

charset: برای تعیین مجموعه کاراکتری صفحه، مانند UTF-8
name: برای تعیین نام مشخصی برای المان <meta>، مانند description یا keywords
content: برای تعیین مقدار مربوط به ویژگی name، مانند توضیحات صفحه یا کلمات کلیدی
http-equiv: برای تعیین یک ویژگی HTTP به صفحه، مانند تعیین نوع مجموعه کاراکترهای صفحه یا تعیین Refresh برای تازه‌سازی خودکار صفحه
property: برای تعیین خصوصیت‌های مشخص شده در Open Graph Protocol، مانند نام و توضیحات صفحه برای اشتراک گذاری در شبکه‌های اجتماعی

بیشتر بخوانید آموزش HTML به زبان ساده "معرفی"

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

به عنوان مثال، المان <meta> می‌تواند برای تعیین توضیحات صفحه استفاده شود. برای این کار، ویژگی name را برابر با “description” قرار می‌دهیم و مقدار مربوط به آن را در ویژگی content قرار می‌دهیم. به این ترتیب، موتورهای جستجو می‌توانند توضیحات صفحه را بهتر درک کنند و در نتایج جستجو نمایش دهند.

<meta name="description" content="این صفحه درباره خودروهای الکتریکی است">

همچنین، المان <meta> می‌تواند برای تعیین کلمات کلیدی صفحه استفاده شود. برای این کار، ویژگی name را برابر با “keywords” قرار می‌دهیم و مقادیر مربوط به آن را در ویژگی content با استفاده از کاما جدا می‌کنیم. به این ترتیب، موتورهای جستجو می‌توانند کلمات کلیدی صفحه را درک کنند و در نتایج جستجو نمایش دهند.

<meta name="keywords" content="خودرو الکتریک, اتومبیل, پایداری زمین">

در نهایت، المان <meta> می‌تواند برای تعیین خصوصیات صفحه در Open Graph Protocol استفاده شود. برای این کار، ویژگی property را برابر با خصوصیت مورد نظر قرار می‌دهیم و مقدار مربوط به آن را در ویژگی content قرار می‌دهیم. به این ترتیب، صفحات وب ما در شبکه‌های اجتماعی بهتر نمایش داده خواهند شد.

<head>
<meta property="og:title" content="خودروهای الکتریک: آینده حمل و نقل">
<meta property="og:description" content="مقاله‌ای درباره خودروهای الکتریک و تاثیر آن‌ها بر حمل و نقل و پایداری زمین">
<meta property="og:image" content="https://example.com/images/electric-car.jpg">
</head>

به طور کلی، المان <meta> به عنوان یک وسیله مفید برای بهبود SEO و بهینه سازی صفحات وب استفاده می‌شود.

همچنین، شما می‌توانید اسکریپت های مختلف را درون تگ <head> قرار داده و از آن‌ها در صفحه خود استفاده کنید. به عنوان مثال، اسکریپت های جاوااسکریپت را معمولاً درون تگ <head> قرار می‌دهیم.

تا این مرحله از سری آموزش های HTML به زبان ساده توانستیم اکثر ویژگی ها و المان های مورد استفاده در داخل تگ <head> و همچنین تمامی کاربرد های آن را بررسی کنیم . شما نیز میتوانید تجربیات و سوالات خود را با ما و سایر کاربران فایل گپ از طریق بخش نظرات در میان بگذارید .

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