HTML چیست؟ بهترین منابع رایگان برای یادگیری + نوشتن اولین کد اچ تی ام ال

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

1. HTML چیست و چه کاربرد هایی دارد؟‌
2. چگونه اولین کد HTML خود را بنویسید؟
3. بهترین منابع رایگان برای یادگیری HTML چیست؟

تعریف HTML به زبان ساده

HTML یا اچ تی ام ال، مخفف عبارت Hyper Text Markup Language است که در فارسی به آن «زبان نشانه‌گذاری ابرمتن» می‌گویند. کار اصلی آن توصیف ساختار و معنای محتوای یک صفحهٔ وب است؛ مثلاً مشخص می‌کند کدام بخش عنوان است، کدام پاراگراف و کدام لینک. منظور از ابرمتن هم متنی است که می‌تواند از طریق لینک به مطالب دیگر وصل شود.

HTML به مرورگر کمک می‌کند نوع و نقش محتوا را تشخیص دهد. مرورگر برای این اجزا ظاهر پیش‌فرضی دارد، اما تعیین رنگ، اندازه، فاصله‌ها و چیدمان معمولاً بر عهدهٔ CSS است. توضیح HTML در MDN هم بر همین نقش ساختاری تأکید دارد. البته فناوری‌های مختلفی کنار هم قرار می‌گیرند تا یک وب‌سایت مثل بلو وب کلاب کار کند.

مطالعه تکمیلی: برای آشنایی بیشتر با سایر اجزای وب و داشتن درکی بهتر از نقش HTML در کارکرد وب،‌ پیشنهاد می‌کنیم مقاله وب چیه و چطور کار می‌کنه؟ را مطالعه کنید.

زبان برنامه نویسی HTML، یک باور نادرست

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

ابزاری برای نشانه گذاری اجزای صفحات وب

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

تگ‌ چیست

تگ‌ها یکی از اصلی‌ترین مفاهیم در اچ تی ام ال هستند. درواقع می‌توانیم تگ‌ها را ستون‌های سازنده المنت‌های مختلفی که در یک صفحه وب قرار دارند درنظر بگیریم. هر تگ متشکل از یک کلمه از پیش تعیین شده است که بین علامت های کوچک‌تر و بزرگ‌تر (<>) احاطه می‌شود و نشان‌دهنده نوع محتوای یک المنت است. برای مثال، تگ <p> برای نشان‌دادن شروع یک پاراگراف استفاده می‌شود. هر تگ در زبان HTML می تواند به دوشکل مورد استفاده قرار گیرد. البته در مورد بعضی تگ ها استثنا نیز وجود دارد.

تگ باز

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

<tagname>

تگ بسته

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

</tagname>

در «تگ‌های بسته» یک کاراکتر (/) پیش از نام تگ قرار دارد.

المنت‌ چیست

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

1. تگ باز (Opening Tag): نشان‌دهنده شروع یک المنت
2. محتوا(در صورت وجود)
3. تگ بسته (Closing Tag): نشان‌دهنده پایان یک المنت

برای مثال یک پاراگراف در اچ تی ام ال شامل یک تگ باز، متن پاراگراف و تگ بسته می باشد.

المنت های توخالی

بعضی المنت‌ها نمی‌توانند متن یا المنت دیگری درون خود داشته باشند و تگ بسته هم ندارند. به این‌ها المنت توخالی یا void element می‌گویند. <img> برای قراردادن تصویر، یکی از آن‌هاست:

<img src="cat.jpg" alt="گربه‌ای کنار پنجره">

در این مثال، src مسیر تصویر است. اگر فایل cat.jpg کنار فایل HTML باشد، مرورگر می‌تواند آن را پیدا کند. alt هم توضیح متنی تصویر است که برای کاربران صفحه‌خوان و وقتی تصویر نمایش داده نمی‌شود کاربرد دارد. تصویر بین دو تگ قرار نمی‌گیرد؛ مرورگر آن را از مسیر مشخص‌شده بارگذاری می‌کند. «توخالی» بودن به معنای بی‌اثر یا نامرئی بودن نیست.

<br> برای رفتن به خط بعد و <meta> برای اطلاعاتی دربارهٔ سند هم از همین نوع‌اند. برای این المنت‌ها تگ بسته نمی‌نویسیم. مرجع المنت‌های توخالی در MDN

المنت‌های تو در تو

گاهی یک المنت داخل المنت دیگری قرار می‌گیرد. مثلاً یک پاراگراف می‌تواند شامل لینک باشد:

<p>مطالب بیشتر را در <a href="https://bluewebclub.com">بلو وب کلاب</a> بخوانید.</p>

در اینجا کل جمله یک پاراگراف است، اما فقط عبارت «بلو وب کلاب» لینک شده است.

ترتیب بستن تگ‌ها مهم است: ابتدا پاراگراف را باز کرده‌ایم، بعد لینک را؛ پس اول لینک را با </a> می‌بندیم و بعد پاراگراف را با </p>. المنت داخلی باید پیش از پایان المنت بیرونی بسته شود.

البته هر المنتی را نمی‌توان داخل هر المنت دیگری گذاشت. برای شروع، همین مثال پاراگراف و لینک الگوی مناسبی است.

اتربیوت ها در HTML

اتریبیوت یا attribute، ویژگی‌ای است که اطلاعات بیشتری دربارهٔ یک المنت می‌دهد و در تگ باز نوشته می‌شود. مثلاً برای ساختن لینک، فقط متن آن کافی نیست؛ باید مقصد لینک را نیز مشخص کنیم:

<a href="https://bluewebclub.com">بلو وب کلاب</a>

در اینجا المنت <a> یک لینک می‌سازد. عبارت «بلو وب کلاب» متن قابل‌مشاهدهٔ لینک است و اتریبیوت href آدرس مقصد را مشخص می‌کند. می‌توانید آدرس را عوض کنید تا لینک به جای دیگری برود. مرجع لینک در MDN کاربردهای دیگر آن را هم توضیح می‌دهد.

در این مثال، نام اتریبیوت بعد از یک فاصله آمده و مقدار آن پس از = داخل کوتیشن قرار گرفته است.

چند اتریبیوت رایج دیگر هم هستند: class برای دسته‌بندی المنت‌ها، id برای شناسهٔ یکتا در صفحه، src برای مسیر منبعی مثل تصویر و alt برای متن جایگزین تصویر. فعلاً لازم نیست همه را یاد بگیرید؛ هنگام استفاده با آن‌ها آشنا می‌شویم.

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

برای این تمرین فقط به یک ویرایشگر متن ساده و مرورگر نیاز دارید؛ فعلاً خبری از خرید دامنه یا هاست نیست.

۱. فایل را بسازید. یک پوشه ایجاد کنید و در آن فایلی به نام index.html بسازید. فایل باید متن ساده با کدگذاری UTF-8 باشد، نه سند Word. دقت کنید نامش اشتباهی index.html.txt نشده باشد.

۲. این کد را داخل فایل بنویسید و ذخیره کنید:

<!doctype html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>اولین صفحه من</title>
</head>
<body>
    <h1>سلام دنیا!</h1>
    <p>این اولین صفحه HTML من است.</p>
    <a href="https://bluewebclub.com">بلو وب کلاب</a>
</body>
</html>

۳. فایل را با مرورگر باز کنید. روی آن دوبار کلیک کنید یا از گزینهٔ «باز کردن با» مرورگر را انتخاب کنید. باید عنوان «سلام دنیا!»، یک پاراگراف و یک لینک ببینید.

اجزای تازهٔ این سند:

• <!doctype html> باعث می‌شود مرورگر سند را در حالت استاندارد پردازش کند.
• <html> عنصر اصلی سند است؛ lang="fa" زبان فارسی و dir="rtl" جهت راست‌به‌چپ را مشخص می‌کند.
• <head> اطلاعات مربوط به سند را نگه می‌دارد.
• <meta charset="UTF-8"> کدگذاری متن را مشخص می‌کند تا حروف فارسی درست خوانده شوند.
• <title> عنوان زبانهٔ مرورگر است.
• <body> محتوای قابل‌مشاهدهٔ صفحه را در بر می‌گیرد و <h1> عنوان اصلی آن است.

۴. تغییرش بدهید. «سلام دنیا!» را با عنوان دلخواهتان عوض کنید، فایل را ذخیره کنید و صفحهٔ مرورگر را تازه‌سازی کنید. حالا یک پاراگراف دیگر اضافه کنید.

همین فایل یک صفحهٔ وب است؛ فعلاً فقط روی دستگاه شماست. برای مرور دوبارهٔ اجزای سند، راهنمای ساخت محتوا در MDN هم در دسترس است.

کاربرد HTML چیست؟

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

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

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

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

بهترین منابع رایگان برای یادگیری HTML چیست؟

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

• MDN Web Docs: برای یادگیری منظم و مراجعه به توضیحات دقیق مناسب است. اگر می‌خواهید بفهمید یک المنت چه کاربردی دارد و چطور درست از آن استفاده کنید، مرجع خوبی است.
• freeCodeCamp: برای کسی که با تمرین بهتر یاد می‌گیرد. آموزش‌های تعاملی و پروژه‌محور دارد و شما را وادار می‌کند خودتان کد بنویسید. می‌توانید با تمرین مقدماتی HTML شروع کنید.
• W3Schools: برای توضیح کوتاه، مثال قابل‌ویرایش و تمرین سریع مفید است. می‌توانید کد مثال را در مرورگر تغییر بدهید و نتیجه را ببینید.

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

بعد از HTML چه چیزی یاد بگیریم؟

بعد از یادگیری مبانی HTML، لازم نیست تمام تگ‌ها را حفظ کنید. اگر می‌توانید یک صفحهٔ ساده بسازید، متن، لینک و تصویر اضافه کنید و ساختار کلی یک سند HTML را بفهمید، آمادهٔ رفتن به مرحلهٔ بعد هستید. هر زمان هم تگ یا ویژگی خاصی را فراموش کردید، می‌توانید با مراجعه به منابعی مثل W3Schools آن را سریع پیدا کنید. قدم بعدی CSS است که با آن می‌توانید ظاهر همان صفحه را تغییر دهید و روی فونت‌ها، رنگ‌ها، فاصله‌ها و چیدمان کار کنید. بعد از HTML و CSS، نوبت JavaScript است تا به صفحه رفتار و تعامل اضافه کنید؛ مثلاً با فشردن یک دکمه بخشی از صفحه تغییر کند یا اطلاعات واردشده در یک فرم بررسی شود.

وقتی با هر سه آشنا شدید، آن‌ها را در پروژه‌های کوچک کنار هم استفاده کنید. یک صفحهٔ معرفی شخصی، یک مقاله، فرم ثبت اطلاعات یا حتی یک بازی سادهٔ مرورگری می‌تواند تمرین خوبی باشد. لازم نیست از همان ابتدا سراغ پروژه‌های بزرگ بروید؛ ساخت پروژه‌های کوچک کمک می‌کند ارتباط HTML، CSS و JavaScript را در عمل بهتر بفهمید.

پس مسیر اولیهٔ یادگیری توسعهٔ وب می‌تواند به این شکل باشد:

اگر هنوز نمی‌دانید این صفحات چگونه از سرور به مرورگر می‌رسند یا اصلاً مرورگر و سرور چه نقشی در وب دارند، مقالهٔ «وب چیه و چطور کار می‌کنه؟» می‌تواند تصویر کلی‌تری به شما بدهد. اما برای ادامهٔ مسیر عملی، فعلاً کافی است همان صفحه‌ای را که با HTML ساخته‌اید نگه دارید و در مرحلهٔ بعد ظاهر آن را با CSS تغییر دهید.