سرآیند و بدنه HTML

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

بخش اول سرآیند و بدنه HTML

بخش سرآیند (Head) در HTML وظیفه ارائه اطلاعات مرتبط با صفحه وب را دارد. این اطلاعات عمدتاً برای مرورگر و موتورهای جستجو مهم هستند. بعضی از اجزای بخش سرآیند عبارت‌اند از:

• عنوان (Title): عنوان صفحه وب را تعیین می‌کند که در نوار عنوان مرورگر نمایش داده می‌شود. این عنوان باید مختصر و معنادار باشد و باید موضوع و محتوای صفحه را به خوبی توصیف کند.

<title>صفحه اصلی وبسایت من</title>

متا تگ‌ها (Meta Tags): متا تگ‌ها اطلاعات مهمی را ارائه می‌دهند که برای موتورهای جستجو و بهینه‌سازی SEO مورد استفاده قرار می‌گیرند. این تگ‌ها عمدتاً در بخش سرآیند قرار دارند و شامل مواردی نظیر:

• تعیین کاراکتر (Character Set): با استفاده از تگ <meta> و ویژگی charset، می‌توانید تعیین کنید که متن صفحه با چه کاراکتری (مثل UTF-8) کدگذاری شود.

• تعیین زبان (Language): مشخص کردن زبان صفحه وب برای موتورهای جستجو و خوانندگان صفحه کمک می‌کند.

<meta charset="UTF-8">

• توضیحات (Description): توضیحات کوتاهی از محتوای صفحه ارائه می‌دهد و برای موتورهای جستجو بسیار مهم است.

<meta name="description" content="این یک صفحه نمونه برای HTML است.">

• کلمات کلیدی (Keywords): کلمات کلیدی مرتبط با محتوای صفحه را مشخص می‌کنند. این تگ به تعیین ترتیب در نتایج جستجو کمک می‌کند.

<meta name="keywords" content="HTML, توسعه وب, صفحه نمونه">

• متن جایگزین (Alternative Text): برای تصاویر، متن جایگزین برای مواردی است که تصویر بارگذاری نشود و به کاربرانی که از خوانندگان صفحه استفاده می‌کنند کمک می‌کند تا محتوای تصویر را درک کنند.

<meta name="image" content="توضیح تصویر">

لینک به فایل‌های خارجی: ممکن است نیاز باشد تا به فایل‌های خارجی مانند فایل‌های CSS یا JavaScript ارتباط برقرار کنید. این لینک‌ها در بخش سرآیند قرار می‌گیرند. مثلا:

<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js"></script>

لینک به آیکون (Favicon): آیکون صفحه وب که در نوار عنوان نمایش داده می‌شود و به عنوان نمادی از وبسایت شناخته می‌شود و در بخش سرآیند قرار می‌گیرد.

<link rel="icon" href="favicon.ico" type="image/x-icon">

تگ‌های دیگر: بخش سرآیند می‌تواند تگ‌های دیگری نیز داشته باشد. این تگ‌ها برای اهداف مختلفی مانند ارتباط با شبکه‌های اجتماعی یا اطلاعات تماس مفید هستند.

بخش بدنه (Body) در HTML

در قسمت دوم سرآیند و بدنه HTML وارد موضوع body خواهیم شد. بخش بدنه (Body) اساسی‌ترین بخش صفحه وب است که محتوای اصلی به نمایش در می‌آید. این بخش شامل عناصری مانند متن، تصاویر، لینک‌ها و سایر عناصر وب است. از مهمترین عناصر بخش بدنه می‌توان به موارد زیر اشاره کرد:

متن

متن یکی از مهمترین عناصر بخش بدنه است. می‌توانید متن‌های مختلف را در پاراگراف‌ها (با استفاده از تگ <p>)، عناوین (تگ‌های <h1> تا <h6>) و لیست‌ها (تگ‌های <ul> و <ol>) قرار دهید.

<h1>عنوان اصلی</h1>
<p>این یک متن نمونه است.</p>
<ul>
    <li>آیتم ۱</li>
    <li>آیتم ۲</li>
</ul>

تصاویر

تصاویر با استفاده از تگ <img> در بخش بدنه قرار می‌گیرند. این تصاویر می‌توانند اطلاعات بصری را به محتوا اضافه کنند و نمایش داده شوند.

<img src="image.jpg" alt="توضیح تصویر">

ویژگی src به مسیر تصویر اشاره دارد و ویژگی alt متن جایگزین تصویر را تعیین می‌کند.

لینک‌ها

با استفاده از تگ <a> می‌توانید لینک‌هایی به صفحات دیگر یا منابع خارجی ایجاد کنید. این لینک‌ها برای ایجاد ارتباطات بین صفحات وب بسیار مهم هستند

<a href="https://www.example.com">لینک به وبسایت نمونه</a>

ویژگی href به مسیر لینک اشاره دارد.

جداول

تگ‌های <table>، <tr>، <th> و <td> به شما امکان ایجاد جداول اطلاعات را می‌دهند. این جداول برای نمایش اطلاعات به صورت منظم و مرتب بسیار مفید هستند.

<table>
    <tr>
        <th>سرستون 1</th>
        <th>سرستون 2</th>
    </tr>
    <tr>
        <td>داده 1</td>
        <td>داده 2</td>
    </tr>
</table>

فرم‌ها

تگ <form> به شما امکان ایجاد فرم‌های تعاملی برای جمع‌آوری اطلاعات از کاربران را می‌دهد. عناصری مانند تگ‌های <input>، <textarea> و <select> برای ایجاد فیلدهای مختلف فرم به کار می‌روند.

<form>
    <label for="name">نام:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="ارسال">
</form>

عناصر چندرسانه‌ای

تگ‌های <audio> و <video> برای نمایش و پخش فایل‌های صوتی و ویدیویی به کار می‌روند. این امکان را فراهم می‌کنند تا محتوای چندرسانه‌ای متنوعی از وبسایت‌ها پخش شود و تجربه کاربر را تنوع بخشد.

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    پخش فایل صوتی
</audio>

ویژگی controls امکان کنترل پخش را فراهم می‌کند.

لیست‌ها در HTML

عناصر <ul> (فهرست‌های بدون ترتیب) و <ol> (فهرست‌های مرتب) برای نمایش اطلاعات به صورت فهرست‌ها کاربرد دارند.

<ul>
    <li>آیتم ۱</li>
    <li>آیتم ۲</li>
</ul>

عناصر شکل‌دهی HTML

تگ‌های <div> و <span> به شما اجازه می‌دهند تا عناصر را درون یک محیط گروهی به صورت دقیق‌تر شکل‌دهی کنید. این تگ‌ها به ترتیب برای شکل‌دهی بلوکی و عناصر متنی به کار می‌روند.

<div class="container">
    <p>متن درون شکل دهی شده با تگ div</p>
</div>
<span style="color: red;">متن شکل‌دهی شده با تگ span</span>

تگ‌ها و ویژگی‌ها (Tags and Attributes)

تگ‌ها با استفاده از علامت‌های < و > تعریف می‌شوند. به عنوان مثال: <p> برای تعریف پاراگراف متنی و <img> برای تصاویر استفاده می‌شوند. ویژگی‌ها (Attributes) اطلاعات اضافی را به تگ‌ها اضافه می‌کنند. مثلا: ویژگی src در تگ <img> به مسیر تصویر اشاره می‌کند.

<p class="highlighted">این یک متن مشخص شده با کلاس است.</p>
<img src="image.jpg" alt="توضیح تصویر">

ساختار و سلسه مراتب (Structure and Hierarchy)

HTML از ساختار و سلسه مراتب برای ترتیب عناصر استفاده می‌کند. این به معنای این است که عناصر داخلی درون عناصر بزرگتر قرار می‌گیرند و یک ساختار سلسله‌مراتبی ایجاد می‌شود. مثلا:

<div>
    <p>این یک پاراگراف است.</p>
    <ul>
        <li>آیتم ۱</li>
        <li>آیتم ۲</li>
    </ul>
</div>

کد بالا حاوی یک پاراگراف و یک فهرست غیرترتیبی است که درون یک tag بالاتر div هستند.

کامنت‌ها (Comments)

با استفاده از تگ <!-- و --> می‌توانید کامنت‌ها را به کد HTML اضافه کنید. کامنت‌ها برای توضیح کد و افزودن یادداشت‌های توسعه مفید هستند و در اجرای صفحه توسط مرورگر نمایش داده نمی‌شوند.

<!-- این یک کامنت است و برای توضیح کد استفاده می‌شود -->

اعتبارسنجی HTML

یکی از نکات مهم در بخش بدنه HTML اعتبارسنجی است. HTML توسط مرورگرها بر اساس استانداردهای تعیین‌شده توسط W3C (کنسرسیوم جهانی وب) تفسیر می‌شود. اطمینان از اعتبارسنجی صحیح کد HTML به بهبود قابلیت دسترسی و نمایش صفحات در مرورگرها کمک می‌کند. برای اعتبارسنجی HTML می‌توان از ابزارها و سرویس‌های آنلاین مانند W3C Validator استفاده کرد.