آموزش کار با عنصر Head در HTML
در جلسه شانزدهم از مقالات آموزش اچ تی ام ال در خدمت شماییم با آموزش کار با عنصر Head در HTML از وب سایت آموزش برنامه نویسی سورس باران.طراحی وب سایت استاندارد معمولا اصول و ترفندهایخود را دارد که هرچه با این ترفند و نکات ها بیشتر آشنا شوید قطعا در این زمینه می توانید بصورت حرفه ای تر عمل نمایید. لطفا تا انتها با ما همراه باشید…
عنصر Head در HTML
عنصر <head> در واقع محفظه‌ای برای متا دیتا (metadata) است و بین تگ <html> و تگ <body> قرار میگیرد. متا دیتا در HTML داده‌ای در مورد سند HTML است اما نمایش داده نمی‌شود. معمولا متا دیتا عنوان، مجموعه کاراکترها، استایل‌ها، لینک‌ها، اسکریپت‌ها و دیگر اطلاعات متا را تعریف میکند. تگ‌های <title>، <style>، <meta>، <link>، <script> و <base> اجزایی هستند که متا دیتا را توصیف می‌کنند.
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and other meta information.
The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.
عنصر <title> در HTML
عنصر <title> عنوان سند HTML را مشخص میکند و در تمام اسناد HTML و XHTML اجباری است.
عنصر <title> :
- عنوانی را برای تب مرورگر تعریف میکند.
- عنوانی را برای صفحه فراهم می آورد که در مورد علاقه ها در مرورگر ها استفاده میشود.
- عنوانی را برای صفحه تعریف میکند که در نتایج موتور های جستجو نمایش داده میشود.
یک سند ساده ی HTML را در زیر مشاهده می نمایید
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> The content of the document...... </body> </html>
پیشنمایش
عنصر <style> در HTML
از عنصر <style> برای تعریف استایل یک صفحه ی HTML استفاده میشود :
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>پیشنمایش
عنصر <link> در HTML
<link rel="stylesheet" href="mystyle.css">پیشنمایش
عنصر <meta> در HTML
عنصر <meta> برای مشخص کردن نوع کارکترست، توضیح صفحه، کلمات کلیدی، نویسنده، و دیگر اطلاعات استفاده میشود. متا دیتا ها به وسیله مرورگر ها (چطور محتوا را نمایش دهند) ، موتور های جستجو (کلمات کلیدی) ، و دیگر سرویس های وب استفاده میشوند.
تعریف charset در HTML که مورد استفاده قرار میگیرد :
<meta charset="UTF-8">تعریف متا description یا توضیحی برای صفحه در HTML
<meta name="description" content="Free Web tutorials">تعریف متا keywords یا کلمات کلیدی برای موتور های جستجو در HTML
<meta name="keywords" content="HTML, CSS, XML, JavaScript">تعریف متا author یا نوسنده صفحه در HTML
<meta name="author" content="John Doe">
متا refresh یا بارگذاری دوباره سند در هر ۳۰ ثانیه در HTML
<meta http-equiv="refresh" content="30">
مثالی از تگ های متا در HTML
<meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="John Doe">پیشنمایش
تنظیم Viewport در HTML
نسخه HTML5 روشی ارائه میدهد که طراحان وب با استفاده از آن می‌توانند از طریق تگ <meta> روی viewport کنترل داشته باشند. viewport ناحیه قابل مشاهده از یک صفحه وب توسط کاربر است که در دستگاه‌های مختلف فرق داشته و روی گوشی‌های موبایل کوچک‌تر از صفحات کامپیوتر شخصی است. شما باید عنصر <meta> مربوط به viewport که در زیر آمده است را در تمام صفحات وب خود وارد کنید:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
یک تگ <meta> برای viewport ،دستورالعمل هایی را برای چگونگی نمایش صفحه، ابعاد و بزرگ و کوچک شدن آن در اختیار مرورگر قرار میدهد.
قسمت width=device-width مشخص میکند که طول صفحه باید از طول صفحه نمایش دستگاه پیروی کند (که بسته به نوع دستگاهی که صفحه روی آن نمایش داده میشود تغییر میکند).
قسمت initial-scale=1.0 مشخص میکند که بزرگنمایی اولیه، هنگامی که صفحه برای بار اول در مرورگر لود میشود باید مقدار ۱ باشد.
به دو نمونه مثال زیر که یکی داری تگ متای Viewport بوده و دیگری فاقد آن است دقت کنید و نحوه ی نمایش آنها را در دستگاه موبایل مشاهده کنید :
نکته : لینک ۱ و لینک ۲ رو باز نمایید تفاوت بین دو صفحه را میتوانید در موبایل و تبلت مشاهده کنید(در صفحه کامپیوتر خانگی تفاوتی را نخواهید دید). در صورتی که به موبایل و تبلت دسترسی ندارید از شبیه ساز موبایل و تبلت در Inspect مرورگر کروم استفاده کنید.
عنصر <script> در HTML
از عنصر <script> برای تعریف جاوااسکریپت های سمت کاربر استفاده میشود. کد جاوا اسکریپت زیر عبارت “Hello JavaScript!” در عنصری با شناسه ی “id=”demo قرار میدهد :
<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
پیشنمایش
عنصر <base> در HTML
عنصر <base> ، URL و target پایه را برای تمام آدرس های نسبی در صفحات مشخص میکند(دقت کنید در صورتی که از base استفاده نکنیم URL پایه همان نام دامنه ما خواهد بود که در اینجا : www.sourcebaran.com) :
<base href="https://www.sourcebaran.com/images/" target="_blank">
در مثال بالامرورگر تصویر html5.gif در آدرس https://www.sourcebaran.com/images/ جستجو خواهد کرد.
شاید برایتان جذاب باشد : فیلم آموزش کامل Html به زبان فارسی و بصورت رایگان
حذف تگ های <html> ، <head> و <body> از صفحه HTML
طبق استاندارد html5، تگ‌های <html>، <body> و <head> می‌توانند حذف شوند. کد زیر طبق استاندار html5 معتبر است:
<!DOCTYPE html> <title>Page Title</title> <h1>This is a heading</h1> <p>This is a paragraph.</p>پیشنمایش
نکته مهم : حذف تگ های فوق از صفحه ممکن است باعث برور خطا در نسخه های قدیمی تر اینترنت اکسپلورر شود پس پیشنهاد میشود تا آنجای ممکن از حذف آنها اجتناب کنید.
منبع : W3Schools
لیست جلسات قبل آموزش Html
- آموزش اصول اولیه و عناصر HTML
- آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
- آموزش کار با پاراگراف و استایل در Html
- آموزش کار با قالب بندی متن در Html
- آموزش کار با کامنت در HTML
- آموزش کار با کامنت در HTML
- آموزش کار با رنگ ها در HTML
- آموزش کار با تصاویر در HTML
- آموزش کار با لینک در HTML
- آموزش کار با جدول در HTML
- آموزش کار با لیست ها در HTML
- آموزش کار با عناصر Block و Inline در HTML
- آموزش کار با عنصر Class در HTML
- آموزش Html؛ آموزش iframe در HTML
- آموزش Html؛ آموزش جاوا اسکریپت در HTML
The post آموزش کار با عنصر Head در HTML appeared first on آموزش برنامه نویسی.
