آشنای با حداقل تگ های یک فایل اچ تی ام ال

ارسال شده توسط: سید محمد قائمی تاریخ ارسال: 26 آذر, 1394

آشنای با حداقل تگ های یک فایل اچ تی ام ال

هر زبان برنامه نویسی از تعدادی Keyword یا “کلید واژه” تشکیل شده است که این کلید واژگان توسط طراحان آن زبان برنامه نویسی مشخص شده اند و هر کدام کار خاصی انجام می دهند و غیر قابل تغییر هستند.
 در زبان اچ تی ام ال این کلید واژگان تحت عنوان Tag یا تگ شناخته می شوند. هر تگ اچ تی ام ال داخل علامت < > قرار می گیرد و این در حالی است که اکثر تگ های اچ تی ام ال به صورت جفت استفاده می شوند. برای روشن شدن مطلب کد زیر را مد نظر قرار می دهیم:
<DOCTYPE html!>
<html>
    <head>
        <title>Title of Your Page</title>
    <head/>
    <body>
    <body/>
<html/>
در این کد بعد از تگ مربوط به نسخه اچ تی ام ال که در قسمت قبل توضیح داده شد، می بینیم که تگ <html> نوشته شده است. در واقع این تگ یکی از کلید واژه های زبان اچ تی ام ال است. نکته ای که در مورد این تگ همواره می بایست مد نظر قرار دهیم این است که این تگ هیچ وقت به تنهایی مورد استفاده قرار نمی گیرد. تگ <html> تگ آغازین نامیده می شود و هر تگ آغازین نیازمند یک تگ پایانی می باشد. برای نوشتن تگ های پایانی فقط نیاز است تا یک علامت / قبل از کلید واژه مد نظر داخل علامت های < > قرار دهیم. بنابراین تگ پایانی <html> برابر است با </html> که در کد فوق هم مشاهده می شود.
 بعد از تگ آغازین <html> تگی داریم تحت عنوان <head> که این وظیفه را دارا است تا اطلاعاتی در مورد این صفحه از اچ تی ام ال را در خود ذخیره سازد. به عبارت دیگر کلیه چیزهایی که مابین تگ آغازین <head> و تگ پایانی </head> قرار می گیرند از دید کاربر پنهان خواهد بود (لازم به ذکر است که اطلاعاتی که داخل این تگ قرار می گیرند اختیاری بوده و عدم کامل کردن این تگ مشکلی در صفحه وب سایت ما ایجاد نخواهد کرد اما این در حالی است که طراحی حرفه صفحات وب نیازمند برخورداری از این تگ می باشد. علاوه بر این گاهی اوقات نیازمند تگ هایی مثل meta هستیم که حتما بایستی در صفحه خود از آن ها استفاده کنیم که در غیر این صورت به طور مثال صفحه ما از نمایش کاراکترهای فارسی ناتوان خواهد بود).
 همانطور که در کد فوق می بینیم داخل تگ های <head> و </head> دو تگ دیگر تحت عنوان <title> و </title> قرار دارند. معنوی لغوی واژه title عبارت است از “لقب، عنوان” و در زبان اچ تی ا ال هم چنین معنایی دارد. زمانی که در دنیای اینترنت گشت می زنیم، می بینیم که هر صفحه دارای یک عنوان است که در Tab مرتبط با آن صفحه در مرورگر به نمایش در می آید:
همانطور که در تصویر فوق می بینیم عنوان Amazon.com: Online Shopping داخل<title> و </title> صفحه اصلی سایت آمازون قرار گرفته است.
 تگ <title> از اهمیت بسزایی برخوردار است. به عبارت دیگر عنوان صفحات اچ تی ام ال توسط موتور های جستجو مورد بررسی قرار گرفته و در نتایج جستجوی کاربران اینترنتی به نمایش در می آیند. بنابراین توصیه می شود که هیچ صفحه وب سایت خود را بدون عنوان روی اینترنت قرار ندهید چرا که این کار باعث می شود وب سایت شما از یک سو غیر حرفه به نظر برسد و از سوی دیگر موتورهای جستجویی مثل گوگل و بینگ نخواهند توانست آن صفحه را به راحتی شناسایی کنند بنابراین این صفحه رتبه ای از دید موتورهای جستجو اخذ نخواهد کرد.
 چنانچه کد فوق را پس از ذخیره کردن در یک مرورگر به نمایش درآوریم، می بینیم که عنوان Title of your page در بالای مرورگر به نمایش در می آید:
پس از تگ پایانی </head> تگ آغازین <body> را می بینیم که با تگ پایانی </body> به اتمام می رسد. به طور کلی یک سند اچ تی ام ال را می توان به دو بخش کلی تقسیم بندی کرد: بخش اول که داخل تگ های <head> و </head> قرار می گیرد و بخش دوم که مابین تگ های <body> و </body> قرار می گیرد. هر آنچه که در بخش head قرار گیرد در مرورگر به نمایش در نخواهد آمد اما هر آنچه که در بخش body قرار گیرد در صفحه مرورگر به نمایش در خواهد آمد. به طور مثال هم اکنون که مشغول مطالعه این آموزش هستید، کلیه عکس ها، پاراگراف ها و … داخل تگ های <body> و </body> این صفحه قرار گرفته اند.
منبع: نت شهر