در این آموزش با ساختار اولیه یک سند HTML آشنا می‌شوید و یاد می‌گیرید چگونه کد منبع (Source Code) صفحات HTML را در مرورگر مشاهده کنید.

HTML زبانی است که برای نشانه‌گذاری (Markup) صفحات وب استفاده می‌شود و به مرورگر دستور می‌دهد محتوای صفحه را چگونه نمایش داده و تفسیر کند. برای مثال، HTML مشخص می‌کند کدام متن به‌عنوان عنوان (Heading) و کدام متن به‌صورت پاراگراف (Paragraph) نمایش داده شود. همچنین از HTML برای افزودن تصاویر و ایجاد لینک روی متن یا تصاویر استفاده می‌شود.

این دستورها از طریق تگ‌های HTML منتقل می‌شوند که به شکل زیر نوشته می‌شوند:

<tagname>

بیشتر تگ‌های HTML دارای یک تگ آغازین (Opening Tag) و یک تگ پایانی (Closing Tag) هستند که محتوای موردنظر را در بر می‌گیرند، اگرچه برخی تگ‌ها مانند <img> به تگ پایانی نیاز ندارند.

نگاهی به یک نمونه کد HTML

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

<h1>نمونه HTML پارمین</h1>

<p>این کد نمونه‌ای از نحوه نوشتن HTML است.</p>

<p>در این مثال از تگ‌های HTML برای ساختاربندی متن استفاده شده است.</p>

<p>همچنین یک <a href="https://digitalocean.com/community">لینک</a> به صفحه اضافه شده است.</p>

<p>و در نهایت یک تصویر نیز نمایش داده می‌شود:</p>

<img src="https://html.sammy-codes.com/images/small-profile.jpeg">

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

اکنون با نحوه نمایش کد HTML در مرورگر آشنا شده‌اید. در ادامه یاد می‌گیریم چگونه کد منبع (Source Code) هر صفحه وب را مشاهده کنیم.

مشاهده کد منبع (Source Code) یک صفحه وب

تقریباً تمام صفحات وبی که مشاهده می‌کنید با HTML ساخته شده‌اند. مرورگرهایی مانند Firefox و Google Chrome این امکان را فراهم می‌کنند که کد HTML هر صفحه را مشاهده کنید.

مشاهده Source Code در Firefox

اگر از مرورگر Firefox استفاده می‌کنید:

1. صفحه موردنظر را باز کنید.
2. از منوی Tools گزینه Web Developer را انتخاب کنید.
3. سپس روی Page Source کلیک کنید.

همچنین می‌توانید از میانبر صفحه‌کلید زیر استفاده کنید:

macOS

Command + U

مشاهده Source Code در Google Chrome

در مرورگر Chrome نیز مراحل تقریباً مشابه است:

1. صفحه موردنظر را باز کنید.
2. از منوی View گزینه Developer را انتخاب کنید.
3. روی View Source کلیک کنید.

همچنین می‌توانید از میانبر زیر استفاده کنید:

macOS

Option + Command + U

بررسی کد صفحات وب

سعی کنید کد منبع وب‌سایتی را که در طول این مجموعه آموزش خواهیم ساخت مشاهده کنید. احتمالاً تعداد بسیار زیادی تگ HTML خواهید دید که نسبت به مثال ساده بالا بسیار بیشتر هستند.

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

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

جمع‌بندی

در این آموزش با ساختار کلی یک سند HTML آشنا شدید و یاد گرفتید چگونه کد منبع (Source Code) صفحات وب را در مرورگر مشاهده کنید. همچنین با نحوه نمایش کد HTML در مرورگر آشنا شدید و دانستید که می‌توانید ساختار هر صفحه وب را بررسی کنید.

در آموزش بعدی با عناصر HTML (HTML Elements) که اجزای اصلی تشکیل‌دهنده صفحات وب هستند، به‌صورت کامل آشنا خواهید شد.