html چیست ؟
02
ژانویه

HTML چیست و کاربردهای HTML

زبان HTML یک زبان نشانه گذاری می باشد که مخفف Hyper Text Markup Language که به معنای زبان علامتگذاری متن می باشد . زبان اچ تی ام ال به هیچ عنوان زبان برنامه نویسی نیست و یک زبان نشانه گذاری است .

چرا HTML زبان برنامه نویسی نیست ؟

اگر تازه وارد مسیر یادگیری طراحی سایت شده اید و در حال یاد گیری html هستید شاید با خود فکر می کنید این زبان یک زبان برنامه نویسی می باشد . اما این چنین نیست در پاسخ به این سوال که چرا html زبان برنامه نویسی نیست باید گفت زبان های برنامه نویسی ویژگی هایی نظیر دستورات شرطی ، حلقه ها ، توابع ، متغییر ها و مواردی از این قبیل هستند .

اما شما در زبان html هیچ کدام از این موارد را مشاهده نمی کنید و صرفا با زبانی سروکار دارید که از تگ های مختلفی تشکیل شده اند که به کمک آن ها می توانید ساختار کلی سایت خود را ایجاد کنید .

کاربردهای html چیست ؟

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

html اسکلت سایت

html دقیقا حکم همین اسکلت را دارد و ساختار اصلی سایت شما را شکل می دهد . اما برای اینکه بتوانید ظاهر سایت خود را ویرایش کنید و زیبایی های لازم را در آن ایجاد کنید نیاز به کد نویسی css دارید . در نهایت ترکیب html با css ساختار زیبایی به سایت شما خواهد داد و تا نهایی کردن ظاهر سایت می توانید کار انجام طراحی سایت خود را با همین دو زبان کد نویسی پیش ببرید .

نمونه ای کد نویسی در html

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

هر تگ در زبان html مفهوم خاصی دارد و برای کاربرد خاصی به وجود آمده شما با شناخت تگ ها می توانید سایت مورد نظر خود را ایجاد کنید .

مفهوم تگ های html چیست ؟

پرکاربرد ترین تگ های html که مورد استفاده قرار می گیرند از جمله تگ div یا تگ a و همچنین تگ p هستند البته زبان html از تگهای بسیار زیادی تشکیل شده که شاید یک برنامه نویس از تعداد زیادی از این تگ ها استفاده نکند .

اما اگر می خواهید بدانید تگ های html چگونه کار می کنند به مثالی که در قطعه کد زیر برای شما آماده کرده ایم دقت کنید .

<!doctype html>
<html lang="1">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="
Work-with-us">
        <a href="#" style="color: white;text-decoration: none">
        <li style="width: 100% ;background-color: #616161;list-style: none;padding: 12px 10px">
          همکاری باما
        </li>
        </a>
    </div>
</div>
</body>
</html>

توضیح جزئیات تگ های html

اگر به قطعه کد بالا دقت کنید در اولین خط تگ html را مشاهده می کنید ، زمانی که می خواهید کد نویسی html را شروع کنید ابتدا باید با باز کردن تگ html کار خود را آغاز کنید .

هر تگ به این صورت <> باز می شود و برای بستن تگ مربوطه از این ساختار </>استفاده می شود .

در قدم بعدی متا تگ head را می بینید که در این متا تگ منابعی که می خواهید در صفحه لود کنید یا تعیین کد زبان صفحه با کمک تگ meat و قابلیت هایی نظیر این موارد قابل انجام است .

همچنین در تگ head تگ title نیز قرار دارد این تگ عنوان صفحه سایت ما را مشخص خواهد کرد و برای تغییر عنوان صفحه سایت خود باید از این تگ استفاده کنید .

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

پس از آن در تگ body تگ div را مشاهده می کنید این تگ برای بخش بندی سایت مورد استفاده می گیرد که در نسخه های قدیم html از تگ table استفاده می شد و با اضافه شدن تگ div کار بسیار ساده تر شد و در حال حاضر برای بخش بندی سایت از تگ div استفاده می شود .

اگر با دقت به تگ div نگاه کنید متوجه خواهید شد که در آن کلاسی به نام Work-with-us تعریف شده . زبان اچ تی ام ال به شما این امکان را می دهد تگ های خود را کلاس بندی کنید و استایل های خود را برای این تگ ها سفارشی کنید .

همچنین در خط بعد اگر به تگ li دقت کنید می بینید که در ان style تعریف شده و مشخصاتی داده شده است که این کدهای استایل درواقع همان کدهای css هستند که ظاهر سایت شما را ایجاد می کنند . اگر می خواهید بیشتر با زبان css آشنا شود به لینک css چیست؟ مراجعه کنید .

اگر می خواهید کورس های آموزشی html را به صورت رایگان و حرفه ای آموزش ببینید توصیه می کنم به سایت w3schools مراجعه کنید .

html زبانی ساده و پرکاربرد

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

مزایا و معایب html چیست ؟

زبان html در کنار css و همچنین javascript هسته اصلی در بخش ظاهر سایت شما را تشکیل می دهند و در واقع فرانت اند سایت شما را می سازند . اما html چه مزیت هایی دارد که باعث شده همچنان برترین زبان طراحی سایت محسوب شود ؟

  • یادگیری بسیار آسان و روان
  • پشتیبانی در تمام مروگرها
  • قابلیت تعاملی با زبان های سمت سرور مانند php

اما در کنار مزایای ارزشمندی که html دارد معایبی نیز دارد

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

چگونه معایب html را پوشش دهیم ؟

باتوجه به معایبی که در بالا ذکر شد شاید با خود بگویید آیا واقعا باید برای طراحی هر صفحه مجدد کد نویسی کنیم ؟

در پاسخ به این سوال باید بگوییم واقعا اینطور نیست و به دلیل اینکه زبان html را به راحتی می توان با زبان های سمت سرور مانند php ترکیب کرد و می توان از منطق های شرطی php استفاده کرد به راحتی می توان این مشکل را برطرف کرد . اگر می خواهید با php آشنا شوید به مقاله php چیست ؟ سربزنید .