نویسنده:
بازدید: 231 بازدید

آموزش HTML به زبان ساده جلسه اول

تگ در زبان HTML

تگ‌ها در HTML به کلماتی گفته می‌شوند که با علامت کوچکتر و بزرگتر (<>) شروع و پایان می‌یابند و برای تعریف محتوای وب‌سایت استفاده می‌شوند. هر تگ شامل یک نام و ممکن است شامل ویژگی‌هایی همچون مقدار، سبک و غیره باشد.

برای مثال، تگ <p> برای تعریف یک پاراگراف استفاده می‌شود و تگ <img> برای تعریف یک تصویر به کار می‌رود. همچنین، تگ‌ها می‌توانند به صورت تودرتو باشند و در این صورت، تگ داخلی درون تگ خارجی قرار می‌گیرد.

در ادامه لیستی از تگ‌های HTML را می‌بینید:

  • <!DOCTYPE html>: تعریف نوع سند HTML
  • <html>: شروع محتوای HTML
  • <head>: اطلاعات سربرگ سند
  • <title>: عنوان سند
  • <body>: بدنه سند
  • <h1> تا <h6>: عناوین اصلی
  • <p>: پاراگراف
  • <a>: لینک
  • <img>: تصویر
  • <ul>: لیست نامرتب
  • <ol>: لیست مرتب
  • <li>: مورد لیست
  • <table>: جدول
  • <tr>: ردیف جدول
  • <td>: سلول جدول
  • <th>: سرستون جدول
  • <form>: فرم
  • <input>: ورودی فرم
  • <button>: دکمه فرم
  • <label>: برچسب فرم
  • <select>: جعبه‌انتخاب فرم
  • <option>: گزینه جعبه‌انتخاب فرم

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

تگ <!DOCTYPE html>

تگ <!DOCTYPE html> در HTML5 برای تعریف نوع سند HTML استفاده می‌شود. این تگ به مرورگر اطلاع می‌دهد که سندی که در حال باز کردن آن هستید، به زبان HTML5 نوشته شده است. همچنین با استفاده از این تگ، می‌توانید به مرورگر بگویید که چگونه باید سند را پردازش کند.

مثال استفاده از تگ <!DOCTYPE html> در یک سند HTML5 به صورت زیر است:

<!DOCTYPE html>
<html>
<head>
<title>صفحه اصلی</title>
</head>
<body>
<h1>سلام دنیا</h1>
<p>این یک پاراگراف است.</p>
</body>
</html>

در این مثال، با استفاده از تگ <!DOCTYPE html>، نوع سند HTML5 تعریف شده است. سپس با استفاده از تگ‌های <html>، <head> و <body>، ساختار اصلی سند HTML تعریف شده است. در انتها با استفاده از تگ <h1> و <p>، یک عنوان و یک پاراگراف به صفحه اضافه شده است.

استفاده از تگ <!DOCTYPE html> بسیار مهم است، زیرا با استفاده از آن، مرورگر می‌تواند بفهمد که چگونه باید سند را پردازش کند. به عنوان مثال، اگر شما از تگ <!DOCTYPE html> استفاده نکنید، ممکن است مرورگر به جای پردازش سند به درستی، سعی کند آن را با استفاده از موارد قدیمی‌تر HTML پردازش کند.

تگ <html>

تگ <html> در زبان برنامه نویسی HTML برای تعریف شروع و پایان سند HTML استفاده می‌شود. تمامی محتوای سند HTML باید داخل این تگ قرار گیرد. همچنین، با استفاده از این تگ، می‌توانید مشخص کنید که سند HTML شما به چه زبانی نوشته شده است.

مثال:

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>صفحه اصلی</title>
</head>
<body>
<h1>سلام دنیا</h1>
<p>این یک پاراگراف است.</p>
</body>
</html>

در این مثال، با استفاده از تگ <!DOCTYPE html>، نوع سند HTML5 تعریف شده است. سپس با استفاده از تگ <html>، ساختار اصلی سند HTML تعریف شده است. با تعیین مقدار lang برابر با "fa"، زبان سند به فارسی تعیین شده است. همچنین، با استفاده از تگ‌های <head> و <body>، اطلاعات سربرگ و بدنه سند قرار داده شده‌اند. در انتها با استفاده از تگ <h1> و <p>، یک عنوان و یک پاراگراف به صفحه اضافه شده است.

تگ <html> در ساختار صفحات وب بسیار ضروری است و نمی‌توان آن را حذف کرد. تمامی محتوای سند HTML باید داخل این تگ قرار گیرد. بنابراین، حذف و یا عدم درج این تگ می‌تواند باعث بروز مشکلات جدی در رندر صفحه وب شما توسط مرورگر شود.

در جلسه بعد از سری آموزش های HTML به زبان ساده به سراغ تگ پرکاربرد و کلیدی <head> و زیر تگ هایی که در داخل آن استفاده می شود خواهیم رفت . پس در جلسات بعدی با ما همراه باشید .