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

HTML چیست؟

HTML مخفف عبارت: HyperText Markup Language است.

اگر بخواهیم خیلی ساده توضیح دهیم:

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

برای مثال، فرض کنید می‌خواهیم یک صفحه شامل این موارد داشته باشیم:

سلام!

به سایت من خوش آمدید.

من در حال یادگیری طراحی وب هستم.

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

اما HTML یک زبان برنامه‌نویسی به معنای معمول نیست.

در HTML ما بیشتر ساختار و نوع محتوا را مشخص می‌کنیم.

مثلاً به مرورگر می‌گوییم:

این قسمت یک عنوان است.
این قسمت یک پاراگراف است.
این قسمت یک لینک است.
این قسمت یک تصویر است.

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

HTML چگونه کار می‌کند؟

برای ساخت یک صفحه HTML معمولاً یک فایل با پسوند:

.html

ایجاد می‌کنیم.

برای مثال:

index.html

فایل index.html می‌تواند شامل کدهای HTML صفحه ما باشد.

مرورگر این فایل را باز می‌کند و کدهای HTML آن را پردازش می‌کند.

برای مثال اگر داخل فایل بنویسیم:

<h1>سلام دنیا</h1>

مرورگر آن را به صورت یک عنوان نمایش می‌دهد.

یعنی:

کد HTML
    ↓
مرورگر
    ↓
محتوای قابل مشاهده

تگ HTML چیست؟

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

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

تگ معمولاً داخل علامت‌های:

<
>

نوشته می‌شود.

برای مثال:

<h1>عنوان صفحه</h1>

در این مثال:

<h1>

یک تگ HTML است.

و:

</h1>

تگ پایانی آن است.

متنی که بین این دو قرار گرفته:

عنوان صفحه

محتوای عنصر است.

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

برای مثال:

<h1>عنوان</h1>

در اینجا:

<h1>

تگ باز است.

و:

</h1>

تگ بسته است.

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

مثلاً:

<p>

تگ باز است.

و:

</p>

تگ بسته است.

بنابراین می‌توانیم ساختار کلی را این‌گونه تصور کنیم:

تگ باز
   ↓
<h1>عنوان</h1>
             ↑
          تگ بسته

محتوا نیز بین این دو قرار می‌گیرد.

چند تگ مهم HTML

در ادامه مسیر با تگ‌های بسیار زیادی آشنا خواهیم شد.

اما در حال حاضر چند مورد ساده و پرکاربرد را بشناسید.

تگ عنوان

<h1>عنوان اصلی</h1>

تگ پاراگراف

<p>این یک پاراگراف است.</p>

تگ لینک

<a href="https://example.com">مشاهده سایت</a>

تگ تصویر

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

فعلاً لازم نیست همه قسمت‌های این مثال‌ها را یاد بگیرید.

برای مثال در تگ لینک، هنوز لازم نیست بدانید href دقیقاً چیست.

در مقاله‌های بعدی هرکدام از این مفاهیم را جداگانه و با تمرین یاد خواهیم گرفت.

چرا HTML به ساختار صفحه نیاز دارد؟

فرض کنید فقط یک فایل متنی داشته باشیم:

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

برای انسان ممکن است تشخیص بعضی قسمت‌ها آسان باشد.

اما ما می‌خواهیم مرورگر نیز بداند هر قسمت چه نقشی دارد.

مثلاً:

آموزش طراحی وب
      ↓
عنوان

HTML یکی از مهم‌ترین فناوری‌های وب است.
      ↓
پاراگراف

شروع یادگیری
      ↓
لینک یا دکمه

HTML این ساختار را برای مرورگر مشخص می‌کند.

آیا HTML سخت است؟

خیر.

HTML یکی از بهترین گزینه‌ها برای شروع یادگیری طراحی وب است.

دلیل آن این است که ساختار اولیه آن نسبتاً ساده و قابل فهم است.

مثلاً:

<h1>سلام</h1>

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

اما ساده بودن HTML به این معنی نیست که مطالب پیشرفته‌ای ندارد.

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

بنابراین بهتر است از همان ابتدا مفاهیم پایه را درست یاد بگیریم.

آیا HTML به تنهایی برای ساخت سایت کافی است؟

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

برای مثال:

HTML
ساختار صفحه

CSS
طراحی و ظاهر صفحه

JavaScript
تعامل و رفتار صفحه

فرض کنید HTML یک ساختمان را ایجاد می‌کند.

CSS می‌تواند ظاهر، رنگ، اندازه و چیدمان قسمت‌های مختلف آن را مشخص کند.

JavaScript نیز می‌تواند باعث شود قسمت‌های مختلف ساختمان رفتارهای تعاملی داشته باشند.

البته این فقط یک تشبیه ساده برای درک بهتر موضوع است.

HTML را با چه نرم‌افزاری بنویسیم؟

برای نوشتن HTML به ابزار پیچیده‌ای نیاز نداریم.

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

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

برای مثال:

• Visual Studio Code

• Visual Studio

• Sublime Text

پیشنهاد بنو، یکی از انتخاب‌های محبوب برای شروع، Visual Studio Code است.

یک نکته مهم برای یادگیری HTML

هنگام یادگیری HTML فقط کدها را حفظ نکنید.

مثلاً هدف این نیست که فقط بدانید:

<h1>...</h1>

وجود دارد.

باید بدانید چه زمانی و چرا از آن استفاده می‌شود.

همین موضوع درباره تمام تگ‌های HTML صدق می‌کند.

یادگیری واقعی زمانی اتفاق می‌افتد که بتوانید با توجه به نیاز صفحه، تگ مناسب را انتخاب کنید.

جمع‌بندی

در این مقاله با مبانی HTML آشنا شدیم.

یاد گرفتیم که:

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

• فایل‌های HTML معمولاً با پسوند .html ذخیره می‌شوند.

• مرورگر فایل HTML را پردازش کرده و نتیجه آن را نمایش می‌دهد.

• HTML از تگ‌های مختلف تشکیل شده است.

• بسیاری از تگ‌ها دارای تگ باز و بسته هستند.

• تگ‌هایی مانند h1 برای عنوان و p برای پاراگراف استفاده می‌شوند.

• HTML به تنهایی مسئول زیباسازی کامل صفحه نیست.

• CSS برای طراحی ظاهر و JavaScript برای ایجاد تعامل و رفتار استفاده می‌شوند.

در مقاله بعدی وارد یکی از مهم‌ترین مباحث HTML می‌شویم:

ساختار تگ‌ها، عناصر و ویژگی‌ها در HTML

در آنجا دقیق‌تر بررسی می‌کنیم که تگ چیست، عنصر چیست، ویژگی یا Attribute چیست و کدهای HTML دقیقاً چگونه نوشته می‌شوند.