آموزش HTML

HTML (اچ تی ام ال) مخفف Hyper Text Markup Language یک زبان نشانه گذاری فرامتنی است که برای طراحی صفحات اینترنت مورد استفاده قرار می گیرد. اولین نسخه این زبان در سال 1991 میلادی معرفی شد و در واقع بدنه تمام سایت ها از HTML ساخته شده است. اگر تمایل به طراحی سایت دارید در ابتدا باید HTML را یاد بگیرید.

HTML

فرض کنید می خواهید ساختمانی بسازید. در ابتدا پی را می کنید و در ادامه ستون و سقف بنا را کامل می کنید. حالا فرض کنید می خواهید سایتی بسازید در ابتدا باید پیکربندی سایت را طراحی کنید پس HTML حکم همان آرماتور بندی در ساختمان را دارد! شاید با خودتان بگویید ساختمان که فقط ستون و سقف دارد که کامل نیست و زیبایی ندارد! بله حرفتان درست است یادگیری HTML برای شروع کار است و برای زیبایی سایت و رنگ و لعاب آن از زبان CSS استفاده می کنیم.

نمونه کد HTML

در مثال زیر قطعه کد به زبان html را مشاهده می کنید.

کد:

<!DOCTYPE html>
<html>
  <head>
    <title>CodeUni.Ir</title>
  </head>
  <body>
    <h1>Hi</h1>
    <p>CodeUni.Ir</p>
  </body>
</html>

اجرا

همان طور که در کد بالا مشاهده می کنید تمامی کد ها در تگی به نام html قرار دارند و درون این تگ، دو تگ دیگر به نام های head و body قرار دارد.

تگ head

اکثر کدهایی که در این قسمت قرار داده می شوند در بدنه سایت قابل مشاهده نیست. در واقع این کدها، تنظیماتی را اعمال می کنند تا قالب سایت طراحی شده به درستی اجرا شود و یا اطلاعاتی را به مرورگرها و موتورهای جستجوگر می دهد. مانند عنوان صفحه، توضیحات، کد های css و javascript  و ...

کد:

<head>
  <meta charset="UTF-8">
  <title>عنوان</title>
  <meta name="description" content="توضیحات" />
  <meta name="robots" content="index, follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

در کد بالا مثالی از کد های درون تگ head نوشته شده است.

کد زیر charset را روی UTF-8 تنظیم می کند تا از زبان فارسی پشتیبانی شود.

<meta charset="UTF-8">

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

<title>عنوان</title>

کد زیر توضیحی از متن صفحه را ارائه می کند. موتورهای جستجو این متاتگ را می خوانند.

<meta name="description" content="توضیحات" />

برای ایندکس شدن یا نشدن صفحه در موتور های جستجو از کد زیر استفاده می کنیم.

<meta name="robots" content="index, follow" />

متاتگ viewport برای نمایش صفحه سایت، متناسب با اندازه نمایشگر های مختلف نظیر کامپیوتر، تبلت، موبایل و ... استفاده می شود. (طراحی واکنش گرا)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

برای فراخوانی فایل های css از کد زیر استفاده می شود.

<link rel="stylesheet" href="style.css" />

برای فراخوانی فایل های جاوا اسکریپت از کد زیر استفاده می کنیم.

<script src="script.js"></script>

تگ body

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

کد:

<body>
  <h1>عنوان</h1>
  <p>متن</p>
</body>

در ادامه با آموزش های ما همراه باشید.

آخرین مطالب منتشر شده