آموزش HTML - معرفی

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

قبل از نوشتن هر کدی، لازم است درک کنید که HTML چیست و چرا بدون توجه به زبان برنامه‌نویسی مورد استفاده، سنگ بنای تک‌تک وب‌سایت‌هایی است که در اینترنت مشاهده می‌کنید.

HTML چیست؟

کلمه HTML مخفف HyperText Markup Language (زبان نشانه‌گذاری ابرمتن) است. HTML یک زبان برنامه‌نویسی نیست، بلکه یک زبان نشانه‌گذاری است که برای ایجاد ساختار و محتوای یک صفحه وب استفاده می‌شود.

• ابرمتن (HyperText): به «لینک‌ها» یا پیوندهایی اشاره دارد که صفحات وب را به هم متصل می‌کنند و به شما امکان می‌دهند در اینترنت پیمایش کنید.
• زبان نشانه‌گذاری (Markup Language): به استفاده از «تگ‌ها» (مانند <h1> یا <p>) برای تعیین چیدمان و عناصر محتوای شما اشاره دارد.

تگ HTML اسکلت صفحه است که به هر وب‌سایت شکل و ساختار می‌دهد.

درباره HTML بیشتر بخوانید

چرا یادگیری HTML ضروری است؟

یادگیری HTML اولین و حیاتی‌ترین مهارت برای هر کسی است که علاقه‌مند به فعالیت حرفه‌ای در زمینه توسعه یا طراحی وب است.

• ساخت وب‌سایت‌ها: HTML بلوک ساختمانی اصلی همه وب‌سایت‌ها است. همان‌طور که نمی‌توانید بدون فونداسیون خانه‌ای بسازید، بدون HTML هم نمی‌توانید وب‌سایتی ایجاد کنید.
• شروع مسیر شغلی در توسعه یا طراحی وب: درک عمیق HTML برای نقش‌هایی مانند توسعه‌دهنده فرانت‌اند (Front-End)، طراح وب، توسعه‌دهنده فول‌استک (Full-Stack) و حتی توسعه‌دهنده ایمیل ضروری است.
• درک سایر زبان‌ها: دانستن HTML، یادگیری فناوری‌های مکمل آن یعنی CSS (برای استایل‌دهی و ظاهر) و JavaScript (برای عملکرد و رفتار) را بسیار آسان‌تر می‌کند.

ساخت اولین صفحه HTML خود را یاد بگیرید

بیایید از تئوری به عمل برویم. در ادامه نحوه ایجاد و مشاهده اولین صفحه وب شما آمده است.

آنچه نیاز دارید

• یک ویرایشگر متن: هر ویرایشگر متن ساده‌ای کارساز خواهد بود (مانند Notepad در ویندوز، TextEdit در مک، یا ویرایشگرهای پیشرفته‌تر مثل VS Code).
• یک مرورگر وب: گوگل کروم، فایرفاکس یا هر مرورگر مدرن دیگری برای مشاهده صفحه شما.

نمونه سند پایه HTML

• ویرایشگر متن خود را باز کنید.
• کد زیر را کپی کرده و در ویرایشگر قرار دهید.
• فایل را با پسوند html. ذخیره کنید، به عنوان مثال: my.html.
• برای دیدن نتیجه کار خود، فایل را در رایانه پیدا کرده و روی آن دوبار کلیک کنید. این فایل در مرورگر وب پیش‌فرض شما باز می‌شود.

ویرایشگر آنلاین و رایگان HTML ما را امتحان کنید

عناصر ساختار پایه HTML

بیایید بررسی کنیم که هر تگ در آن مثال چه کاری انجام می‌دهد.

<!DOCTYPE html>

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

<html>...</html>

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

<head>...</head>

بخش <head> حاوی متاداده‌ها و اطلاعاتی است که مستقیماً در صفحه نمایش داده نمی‌شوند، مانند عنوان صفحه یا لینک به استایل‌شیت‌های CSS.

<title>...</title>

تگ <title> عنوان صفحه وب را تنظیم می‌کند. این همان چیزی است که در تب مرورگر می‌بینید و موتورهای جستجو از آن به عنوان عنوان اصلی در نتایج جستجو استفاده می‌کنند.

<body>...</body>

تگ <body> شامل تمام محتوای قابل مشاهده صفحه وب شما است—عنوان‌ها، پاراگراف‌ها، تصاویر، لینک‌ها و غیره.

عناصر ضروری HTML (تگ‌ها)

عناصر، بلوک‌های سازنده HTML هستند. در ادامه رایج‌ترین تگ‌هایی که هر روز با آن‌ها سروکار دارید آورده شده است.

عنوان‌ها: <h1> تا <h6>

زبان HTML شش سطح از عنوان‌ها را ارائه می‌دهد. تگ <h1> مهم‌ترین عنوان (عنوان اصلی محتوای شما) و <h6> کم‌اهمیت‌ترین آن‌ها است.

<h1>Main Title</h1> <h2>A Sub-heading</h2>

پاراگراف‌ها: <p>

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

<p>This is a paragraph of text. You can write multiple sentences here.</p>

لینک‌ها: <a>

تگ <a> (یا anchor) یک ابرپیوند ایجاد می‌کند. ویژگی href آدرس URLی را که لینک به آن اشاره دارد مشخص می‌کند.

<a href="https://www.google.com">Click here to visit Google</a>

توضیحات (کامنت‌ها): <!-- ... -->

می‌توانید برای یادداشت‌گذاری جهت استفاده خود یا دیگران، کامنت‌هایی به کد اضافه کنید. مرورگر کامنت‌ها را نادیده می‌گیرد.

<!--This is a comment-->

درباره توضیحات در HTML بیشتر بخوانید

HTML معنایی (Semantic HTML)

همان‌طور که پیشرفت می‌کنید، هنگام طراحی یا توسعه یک صفحه وب، از عناصر معنایی مانند <header>، <footer>، <nav> و <article> استفاده کنید تا معنای بیشتری به محتوای خود ببخشید. این کار دسترسی‌پذیری و سئو (SEO) را بهبود می‌بخشد.

درباره تگ‌های پایه HTML بیشتر بخوانید

ابزارها و منابع HTML

• ویرایشگر آنلاین HTML: برای تمرین بدون نیاز به ساخت فایل، می‌توانید از یک ویرایشگر آنلاین استفاده کنید که پیش‌نمایش زنده کد شما را تقریباً بلافاصله نشان می‌دهد. – ویرایشگر آنلاین و رایگان HTML ما را امتحان کنید
• تمرین بیشتر: زمانی که تسلط کافی پیدا کردید، دانش خود را با منابعی مانند برگه تقلب HTML (Cheat Sheet)، سوالات مصاحبه شغلی و کوییزها بسنجید.

سوالات متداول (FAQ) درباره HTML

سوال ۱: آیا HTML یک زبان برنامه‌نویسی است؟

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

سوال ۲: جدیدترین نسخه HTML چیست؟

جدیدترین نسخه اصلی HTML5 است که بسیاری از ویژگی‌های مدرن مانند <video>، <audio> و عناصر معنایی را معرفی کرد.

سوال ۳: تفاوت بین <head> و <header> چیست؟

بخش <head> برای متاداده‌های مرورگر و سئو (مانند <title>) است که در صفحه قابل مشاهده نیستند. اما <header> یک عنصر معنایی است که داخل <body> استفاده می‌شود تا محتوای معرفی یا لینک‌های پیمایش را که در صفحه قابل مشاهده هستند تعریف کند.

سوال ۴: چگونه یک فایل HTML را ذخیره کنیم؟

در ویرایشگر متن خود، به مسیر "File" -> "Save As" بروید و سند خود را با یک نام دلخواه همراه با پسوند .html (به عنوان مثال index.html) ذخیره کنید.