مشاوره رایگان
دریافت لینک های دانلود
دریافت پستی درب منزل
مبلغ کل:
تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید
آشنایی با تگ head و بررسی کامل زیر تگ های آن
یک داکیومنت HTML به طور کلی ، از شمای زیر پیروی میکند :
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
در این مقاله به بررسی تگ head و تگ های مهم داخل آن میپردازیم . تگ head بعد از تگ html و قبل از تگ body قرار میگیرد. (همانطور که در تصویر واضح است)
تگ head میتواند حاوی تگ های مهمی باشد از جمله : تگ base ، تگ title ، تگ link ، تگ اسکریپت ، و غیره
در ادامه راجع به این تگ ها اطلاعات جامعی به شما منتقل خواهد شد.
اولین تگ که مورد بررسی قرار خواهد گرفت تگ title است.
معرفی تگ title در html :
وجود تگ <title> در همه سند های HTML الزامی است و عنوان سند را مشخص می کند.اهمیت این تگ ها ، هم برای کاربران و بازدید کننده های سایت ، و هم برای جستجوگر های وب می باشد . متنی که داخل این تگ قرار می گیرد عنوان صفحه را مشخص میکند که در title bar مرورگر به کاربران نشان داده می شود. سه کار مهمی که تگ title در سند html شما انجام میدهد به شرح زیر است :
- یک عنوان را در نوار ابزار مرورگر تعریف می کند.
- هنگامی که می خواهید صفحه ای را به لیست favorite (مورد علاقه) اضافه نمایید از محتویات عنصر title برای این منظور استفاده می شود.
- نتایج موتور های جستجو بر اساس محتویات عنصر title گزارش می شود.
برای درک بیشتر به تصویر زیر دقت کنید :
.png)
همانطور که در تصویر بالا میبینید ، محتویات تگ title در قسمتی که پیکان به آن اشاره کرده ، نمایش داده خواهد شد .اهمیت تگ های title در این است که یک فاکتور تاثیر گذار در جهت کمک به موتور های جستجو هستند تا آنها بفهمند که صفحه وب شما در مورد چه محتوایی است .در واقع متنی که داخل این تگ قرار میگیرد اولین تصوری است که کاربر از صفحه شما بدست می آورد پس بهتر است به آن دقت کنید .
مثال :
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Tag Example</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
متا تگ ها در html :
این تگ برای ارائه ی متا دیتا در مورد داکیومنت HTML استفاده می شود که اطلاعاتی از قبیل انقضا صفحه، گردآورنده ی صفحه، لیست کلمات کلیدی، توصیف صفحه و غیره ارائه می دهد.
تگ <meta> عموما برای مشخص کردن نویسنده ، کلمات کلیدی ، آخرین تغییرات، توضیحاتی در مورد صفحه و دیگر داده های Meta استفاده می شوند. داده های meta (متا دیتا) توسط مرورگر ها (جهت نحوه نمایش محتویات یا بار گذاری مجدد صفحه)، موتور های جستجو (جهت تعیین کلمات کلیدی) و دیگر سرویس های وب استفاده می شود.
متا تگ ها انواع مختلفی دارند به طوری که حدود سی متا تگ وجود دارد. متا تگ ها نقش پررنگی در مسائل مربوط به سئو ایفا میکنند.
سه نمونه از پرکاربردترین و مهمترین متا تگ ها به شرح زیر است :
متا تگ های توصیفی (Description meta Tags) :
در این متا تگ توضیحاتی راجع به وبسایت شما قرار میگیرد. شاید این کار بنظر شما بیهوده باشد ، اما این توضیحات ، مورد توجه موتور های جست و جو از جمله گوگل و یاهو قرار میگیرد. این تگ و توضیحاتی که در آن درج می کنید در آمار بازدید شما تاثیر چشمگیری خواهد گذاشت .
متا تگ کلمات کلیدی (Keywords meta Tags) :
این تگ ، کاربردی مشابه تگ قبل دارد با این تفاوت که در این تگ به جای توضیحات ، کلمات کلیدی وبسایت را قرار می دهید. این تگ کمک می کند تا موتور های جست و جو موضوع و محتوای وبسایت شما را بفهمند و مورد توجه قرار دهند.
متا تگ HTTP-EQUIV :
این متا تگ مهمترین و کاربردی ترین متا تگ می باشد ، کاربرد این تگ بیشتر برای وبسایت های فارسی می باشد ، این تگ به موتور های جست و جو می فهماند که این وبسایت دارای متن فارسی است تا موتور های جست و جو ، متن این وبسایت را ، بهم ریخته ، و نامنظم به نمایش نگذارد.
یک نمونه از سینتکس این متا تگ به صورت زیر است :
<meta http-equiv="Content-Language" content="fa"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
به مثال زیر توجه کنید :
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>
<!-- Provide list of keywords -->
<meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">
<!-- Provide description of the page -->
<meta name = "description" content = "Simply Easy Learning by Tutorials Point">
<!-- Author information -->
<meta name = "author" content = "Tutorials Point">
<!-- Page content type -->
<meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<!-- Page refreshing delay -->
<meta http-equiv = "refresh" content = "30">
<!-- Page expiry -->
<meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">
<!-- Tag to tell robots not to index the content of a page -->
<meta name = "robots" content = "noindex, nofollow">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
تگ base در html :
این تگ برای اتصال URL پایه (base URL) به همه ی URL های وابسته (relative URLs ) در صفحه استفاده می شود. برای استفاده از این تگ به سه نکته ی زیر توجه کنید :
- تگ <base> را به عنوان اولین عنصر در داخل عنصر <head> قرار دهید
- اگر تگ <base> وجود داشته باشد، باید دارای یک خاصیت href یا یک خاصیت target ، یا هر دو باشد .
- در یک سند حداکثر از یک تگ base استفاده میشود
اگر با این توضیحات هنوز مفهوم کارکرد تگ base را درک نکرده اید ، توضیحات زیر با دقت بیشتری بخوانید :
با استفاده از این تگ می توانید آدرس پیش فرض لینک های خود و یا خاصیت "target" انها را مشخص کنید .مثلا شما میخواهید یک قالب وبلاگ طراحی کنید و در این قالب از عکس های زیادی استفاده خواهد شد.این تگ کار را ساده کرده و فقط کافیست ادرس پوشه ای که عکس ها در ان قرار دارند را در تگ <base> قرار دهید و در بخش هایی که نیاز دارید عکسی از این پوشه را فراخوانی کنید ، فقط نام عکس را فراخوانی میکنید .
مثال زیر را در نظر بگیرید :
<!DOCTYPE html>
<html>
<head>
<title>HTML Base Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
</head>
<body>
<img src = "/images/logo.png" alt = "Logo Image"/>
<a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a>
</body>
</html>
تگ link در html :
با کمک این تگ می توانید بین یک صفحه ی html و یک منبع خارجی پیوند برقرار کنید . مهمترین کاربرد این تگ برای برقراری ارتباط بین داکیومنت html و css است.
نکات زیر را در باب تگ link در نظر بگیرید :
- تگ <link> فقط یک تگ باز دارد، و تگ بسته ندارد. (این تگ ، empty tag است)
- از تگ link به هر تعداد که نیاز داشته باشید می توانید استفاده کنید.
- بین تگ باز و تگ بسته محتوایی قرار نمی گیرد.
تگ لینک میتواند مشخصه های زیر را دارا باشد :
- blank : با استفاده از این ویژگی ،بعد از کلیک روی لینک صفحه وب در یک پنجره جدید باز می شود.
-
rel : این مشخصه جزو ویژگی های اجباری بوده و بیانگر این است که رابطه بین صفحه اچ تی ام ال و لینک را تعیین کند.
- parent : لینک در قاب اصلی باز خواهد شد.
- target: این ویژگی محل بارگذاری لینک را مشخص میکند
- self : لینک در همان پنجره یا قابی که کلیک شده است باز می شود.
- top : لینک در همان پنجره ای که کلیک شده است به طور کامل باز خواهد شد.
به مثال زیر توجه کنید :
<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag Example</title>
<base href = "https://www.clicksite.org/" />
<link rel = "stylesheet" type = "text/css" href = "/css/style.css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
تگ <style> در html :
از این تگ برای استایل دهی ظاهری وبسایت استفاده می شود. به طور کلی تغییرات ظاهری روی وبسایت با این تگ انجام می پذیرد. همچنین قوانین css داخل تگ style درج می شوند که این کارکرد جزو مهمترین کارکرد های این تگ است .
<!DOCTYPE html>
<html>
<head>
<title>HTML style Tag Example</title>
<base href = "https://www.clicksite.org/" />
<style type = "text/css">
.myclass {
background-color: #aaa;
padding: 10px;
}
</style>
</head>
<body>
<p class = "myclass">Hello, World!</p>
</body>
</html>
تگ script در html :
این تگ برای ضمیمه کردن فایل اسکریپت خارجی و یا تعریف فایل اسکریپت داخلی برای یک داکیومنت HTML استفاده می شود. به زبان ساده تر برای قرار دادن اسکریپت داخل یک داکیومنت html از تگ اسکریپت کمک گرفته میشود کاربرد این تگ برای برنامه نویسی سمت کاربر رواج دارد (مانند جاوا اسکریپت)
تگ script به دو صورت استفاده می شود:
- با نوشتن دستورات درون تگ script
- به صورت یک فایل script خارجی که با خصوصیت src در سند HTML مشخص می شود
به مثال زیر دقت کنید :
<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag Example</title>
<base href = "http://www.clicksite.org/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "OK" />
</body>
</html>
فصلِ:
5
,
تعداد قسمت ها:
177
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML
آموزش HTML5
این فصل در یک نگاه:
در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…
HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب میشود. در واقع HTML را عنصر کلیدی صفحات وب می…
فصلِ:
5
,
تعداد قسمت ها:
77
,
سطح:
متوسط
این فصل در یک نگاه:
ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…
این مجموعه با تلفیقی از فریمورک bootstrap و کد های html و css ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
فصلِ:
11
,
تعداد قسمت ها:
162
,
سطح:
صفر تا صد
این فصل در یک نگاه:
در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…
در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…
فصلِ:
4
,
تعداد قسمت ها:
240
,
سطح:
صفر تا صد
موضوعات:
آموزش PHP
آموزش Bootstrap
آموزش CSS
آموزش JQUERY
آموزش HTML
آموزش PHP MVC
آموزش Ajax
آموزش HTML5
این فصل در یک نگاه:
طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…
توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ:
4
,
تعداد قسمت ها:
368
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش ساخت فروشگاه اینترنتی
آموزش Bootstrap
آموزش Laravel
این فصل در یک نگاه:
مباحث تکمیلی فریم ورک لاراول…
فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ:
1
,
تعداد قسمت ها:
155
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش NodeJs
آموزش Bootstrap
آموزش Laravel
آموزش Symphony
این فصل در یک نگاه:
مباحث مقدماتی فریم ورک react.js…
توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
فصلِ:
1
,
تعداد قسمت ها:
15
,
سطح:
متوسط
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش ASP.NET
آموزش ASP.NET MVC
آموزش PHP MVC
آموزش Phyton
آموزش سئو
آموزش ساخت فروشگاه اینترنتی
آموزش HTML
آموزش ایمیل مارکتینگ
آموزش وردپرس
آموزش فروشگاه ساز اپن کارت
آموزش جوملا
آموزش Virtual Freer
آموزش WHMCS
این فصل در یک نگاه:
رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…
اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …
