• پاسخگویی سوالات در خصوص خرید هاست و ثبت دامنه
  • 013-32625682
اپ وباپ وباپ وباپ وب
  • صفحه اصلی
  • هاست (میزبانی وب)
    • هاست سی پنل ایران
    • هاست سی پنل آلمان
    • هاست وردپرس اختصاصی
    • هاست پایتون و Node js
    • هاست ارزان و اقتصادی
    • هاست نمایندگی
    • هاست ویندوز
  • هاست ابری
  • سرور مجازی
    • سرور مجازی ایران
    • سرور مجازی آلمان
    • سرور مجازی فنلاند
  • قالب رایگان وردپرس
    • فروشگاهی
    • شرکتی
    • همه گروه ها
  • دامنه
    • جستجو و ثبت دامنه
    • خرید دامنه
    • گواهینامه SSL
  • پشتیبانی
    • ارسال درخواست پشتیبانی
    • ارتباط با ما / درباره ما
    • آموزش هاستینگ
    • آموزش HTML
    • قوانین
    • کسب درآمد در آپ وب
ورود به سایت
✕

آموزش استفاده از تگ Head در HTML بصورت جامع

اموزش html

تگ Head چیست؟

هد یا head در زبان انگلیسی به معنی سر و قسمت بالایی وب سایت است. با توجه به همین معنی می توان به اهمیت تگ هد پی برد.

تگ head، یکی از مهمترین تگ های html است که می توان به آن، مغز اصلی صفحه وب نیز گفت.

تگ head برای نشان دادن بخش هد سند HTML و اطلاعات عمومی (metadata) در مورد سند استفاده می شود

و باید شامل یک عنوان برای سند باشد و همچنین میتواند اسکریپت ها، استایل ها، اطلاعات متا و … را نیز در بربگیرد.

تگ Head در Html

بین دو تگ <html> و <html/> تگ‌های جدیدی با اسم تگ باز <head> و تگ بسته <head/> قرار می‌گیرند.

تگ <head> و <head/> در برگیرنده اطلاعات ابتدایی را در رابطه با صفحه html است.

مثلا می‌گوید نویسنده این صفحه چه کسی است یا توضیحاتی در رابطه با خود سایت ارائه می‌کند.

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

تگ های زیر می توانند داخل تگ head قرار گیرند:

  1. تگ title:این تگ برای مشخص کردن عنوان یک صفحه ی وب بوده، و برای ربات های جتسجوگر بسیار مهم است.
  2. تگ style:برای اضافه کردن یکسری اطلاعات اضافی در مورد یک صفحه وب بوده و برای مرورگرها و موتورهای جستجوگر مهم است.
  3. تگ base:برای مشخص کردن یک لینک پایه برای تمامی لینک های موجود در یک صفحه ی وب.
  4. تگ link:برای فراخوانی فایل های خارجی مثل css در یک صفحه ی وب به کار می رود.
  5. تگ meta:برای اضافه کردن یکسری اطلاعات اضافی در مورد یک صفحه وب بوده و برای مرورگرها و موتورهای جستجوگر مهم است.
  6. تگ script:برای اضافه کردن دستورات جاوا اسکریپت به صفحه ی وب استفاده می شود.

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

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

عنصر head در یک سند HTML بعد از تگ HTML و قبل از تگ body قرار می گیرد. این تگ با کمک دو تگ باز و بسته <head></head> بین دو تگ اصلی <html> و <html/> می‌گیرد. به این عمل, یعنی قرار دادن یک تگ در دل تگ دیگر ، nest می‌گویند.

مثال

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
  این قسمت می شود هد یک صفحه وب
</head>
<body>
<p>www.upweb.ir</p>
</body>
</html>

تگ title در Html

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

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

مثال

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
  <title>A Meaningful Page Title</title>
</head>
<body>
 
<p>The content of the body element is displayed in the browser window.</p>
<p>The content of the title element is displayed in the browser tab, in favorites and in search-engine results.</p>
 
</body>
</html>

 

تگ <style> در Html

این عنصر برای تعریف کردن style های عناصر یک صفحه وب مورد استفاده قرار می گیرد.

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

مثال

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style>
    body {background-color: powderblue;}
    h1 {color: red;}
    p {color: blue;}
  </style>
</head>  
<body>
 
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
  
<p>The content of the body element is displayed in the browser window.</p>
<p>The content of the title element is displayed in the browser tab, in favorites and in search-engine results.</p>
 
</body>
</html>

استفاده از تگ link موجود در عنصر head در HTML

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

مثال

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="mystyle.css">
</head>
<body>
 
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
  
</body>
</html>

نتیجه

metadata در HTML

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

عنصر <meta> معمولاً برای تعیین مجموعه کاراکترها، توضیحات صفحه، کلمات کلیدی، نویسنده سند و تنظیمات viewport استفاده می شود.

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

مثال

1.تعریف مجموعه کاراکتر مورد استفاده :

1
<meta charset="UTF-8">


2.تعریف کلمات کلیدی برای موتورهای جستجو:

1
<meta name="keywords" content="HTML, CSS, JavaScript">


3.تعریف توضیحی برای صفحه وب:

1
<meta name="description" content="Free Web tutorials">


4.تعریف نویسنده صفحه:

1
<meta name="author" content="John Doe">


5.بازخوانی سند هر 30 ثانیه:

1
<meta http-equiv="refresh" content="30">


6.تنظیم Viewport برای زیبا جلوه دادن وب سایت شما در همه دستگاه ها:

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


 

تنظیم viewport با تگ <meta>

Viewport ناحیه قابل مشاهده کاربر از یک صفحه وب است. با دستگاه متفاوت است – در تلفن همراه کوچکتر از صفحه رایانه خواهد بود.

شما باید عنصر <meta> زیر را در تمام صفحات وب خود بگنجانید:

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

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

قسمت width=device-width  عرض صفحه را طوری تنظیم می کند که از عرض صفحه دستگاه پیروی کند (که بسته به دستگاه متفاوت است).

زمانی که صفحه برای اولین بار توسط مرورگر بارگیری می شود، قسمت initial-scale=1.0  سطح بزرگنمایی اولیه را تعیین می کند.

در اینجا یک مثال از یک صفحه وب بدون متا تگ viewport و همان صفحه وب با متا تگ viewport آورده شده است.

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

تگ  <script> در HTML

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

مثال-نمایش عبارت “Hello JavaScript!” در عنصری با  “id=”demo:

1
2
3
4
5
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

عنصر <base> در html

عنصر <base> آدرس URL پایه را برای تمام URL های مرتبط در یک صفحه مشخص می کند:

مثال:

1
2
3
4
5
6
7
8
<head>
<base href="https://www.upweb.ir/" target="_blank">
</head>
 
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>

امیدواریم این آموزش مورد توجه شما واقع شده باشد

Related posts

26 خرداد 1403

آموزش متصل کردن دامنه به کلودفلر (CloudFlare) بصورت جامع


Read more
22 خرداد 1403

آموزش احراز هویت دامنه ir در ایرنیک بصورت جامع


Read more
1 اردیبهشت 1403

مقایسه وردپرس و بلاگر بصورت جامع


Read more
اموزش html
28 آبان 1402

رمزگذاری در HTML-آموزش Charset در HTML به زبان ساده


Read more

آپ وب خانه امن رویاهای آنلاین شما


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

نماد اعتماد الکترونیکی


مجوز وزارت صنعت و معدن

خرید هاست



ارسال تیکت

ارتباط با ما


شماره تماس: 32625682-013
[email protected]

نیاز به پشتیبانی دارید؟

اگر سوالی دارید از طریق تیکت به پشتیبان مطرح نمایید.


ارتباط با ما

خرید هاست

هاست لینوکس

هاست سی پنل

هاست وردپرس

هاست اقتصادی

هاست نمایندگی

هاست ویندوز

سایر خدمات

ثبت دامنه ملی و بین المللی

سرور مجازی آلمان

سرور مجازی فنلاند

گواهینامه SSL

قالب آماده وردپرس رایگان

© تمام حقوق برای شرکت هاستینگ آپ وب محفوظ می باشد.
ورود به سایت