آموزش تگ head در HTML به همراه تگ های داخلی تگ head
یاد گرفتیم که یک سند HTML معمولی دارای ساختار زیر است -
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
در این مقاله، قدری بیشتر به جزئیات بخش header در HTML می پردازیم. این بخش به وسیله ی برچسب< head> ساخته می شود. برچسب< head> حاوی برچسب های مهمی دیگری نیز می باشد که عبارتند از : <title>, <meta>, <link>, <base>, <style>, <script> و <noscript>.
تگtitle در HTML
از تگ <title> برای مشخص کردن عنوان سند در HTML استفاده می شود. در زیر یک مثال در مورد نحوه ی عنوان دادن به یک سند در HTML آورده شده است -
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Tag Example</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند -
تگ meta در HTML
از برچسب <meta> برای ارائه اطلاعات بیشتر در مورد سند HTML که شامل اطلاعاتی مربوط به انقضای صفحه، نویسنده صفحه، لیست کلمات کلیدی، توضیحات صفحه و غیره است، استفاده می شود.
در مثال زیر چند مورد از کاربردهای مهم برچسب <meta> درون یک سند HTML بیان شده است -
<!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
از تگ <base> برای مشخص کردن آدرس پایه برای همه URL های نسبی در یک صفحه استفاده می شود. این بدین معنی است که تمام URL های دیگر صفحه ، به URL پایه (base) متصل می شوند.
به عنوان مثال، در ابتدای آدرس تمام صفحات و تصاویر ی که در سند HTML مان وجود دارند ، URL داده شده در آدرس پایه یعنی https://clicksite.org / قرار می گیرد.
<!DOCTYPE html>
<html>
<head>
<title>HTML Base Tag Example</title>
<base href = "https://www.clicksite.org/" />
</head>
<body>
<img src = "/images/logo.png" alt = "Logo Image"/>
<a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a>
</body>
</html>
اما اگر شما URL اصلی را به چیز دیگری تغییر دهید، برای مثال، اگر آدرس پایه http://www.clicksite.org/home باشد، تصویر و سایر لینک های داده شده به صورت http://www.clicksite.org/home/logo.png و http://www.clicksite.org/home/html/index.htm نمایش داده خواهند شد.
تگ link در HTML
از برچسب <link> برای مشخص کردن ارتباط بین سند فعلی و منابع خارجی استفاده می شود. در زیر مثالی است که یک فایل style sheet خارجی که در زیر شاخه css موجود است را به web root لینک می کند -
<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<link rel = "stylesheet" type = "text/css" href = "/css/style.css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
تگ style در HTML
از برچسب <style> برای مشخص کردن style sheet، برای سندِ HTML استفاده می شود. در زیر، مثالی را مشاهده می کنید که در آن چند قاعده style sheet در داخل تگ <style> تعریف شده است -
<!DOCTYPE html>
<html>
<head>
<title>HTML style Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<style type = "text/css">
.myclass {
background-color: #aaa;
padding: 10px;
}
</style>
</head>
<body>
<p class = "myclass">Hello, World!</p>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند -
تگ script در HTML
تگ script>> برای استفاده از فایل های اسکریپت خارجی یا برای تعریف یک اسکریپت داخلی در سند HTML استفاده می شود. در مثال زیر، در قسمتی از سند HTML مان ، برای استفاده از جاوا اسکریپت یک تابع جاوا اسکریپت تعریف نموده ایم.
<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag Example</title>
<base href = "http://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "OK" />
</body>
</html>
این فصل در یک نگاه:
در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…
HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانهگذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشنها محسوب میشود. در واقع HTML را عنصر کلیدی صفحات وب می…این فصل در یک نگاه:
ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…
این مجموعه با تلفیقی از فریمورک bootstrap و کد های html و css ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…این فصل در یک نگاه:
در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…
در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…این فصل در یک نگاه:
طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…
توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…این فصل در یک نگاه:
مباحث تکمیلی فریم ورک لاراول…
فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…این فصل در یک نگاه:
مباحث مقدماتی فریم ورک react.js…
توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …این فصل در یک نگاه:
رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…
اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …