شروع کار با HTML؛ ابزارهای لازم و ساخت اولین صفحه وب

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

حالا وقت آن رسیده است که از توضیحات مقدماتی عبور کنیم و اولین قدم عملی را برداریم.

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

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

برای شروع کار با HTML به چه ابزارهایی نیاز داریم؟

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

برای نوشتن و اجرای اولین صفحه HTML فقط به این موارد نیاز داریم:

• یک کامپیوتر
• یک ویرایشگر متن یا کد
• یک مرورگر وب

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

ویرایشگر کد چیست؟

فایل HTML در اصل یک فایل متنی است. بنابراین از نظر فنی حتی می‌توانیم کدهای HTML را با یک برنامه ساده مانند Notepad ویندوز بنویسیم.

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

ویرایشگرهای کد امکاناتی در اختیار ما قرار می‌دهند که نوشتن و مدیریت کد را بسیار ساده‌تر می‌کنند؛ برای مثال:

• رنگ‌بندی کدها
• تکمیل خودکار دستورات
• شماره‌گذاری خطوط
• نمایش بهتر ساختار فایل
• مدیریت فایل‌ها و پوشه‌های پروژه
• جستجو و جایگزینی در کدها
• شناسایی برخی خطاهای نوشتاری

برای HTML از چه ویرایشگری استفاده کنیم؟

ویرایشگرهای مختلفی برای طراحی وب وجود دارند، اما در این مجموعه آموزشی از Visual Studio Code یا به اختصار VS Code استفاده می‌کنیم.

VS Code یک ویرایشگر کد رایگان و قدرتمند است و برای یادگیری HTML، CSS، JavaScript و بسیاری از زبان‌ها و فناوری‌های دیگر مناسب است.

البته استفاده از VS Code اجباری نیست. اگر از ویرایشگر دیگری استفاده می‌کنید، تقریباً تمام کدهایی که در این آموزش می‌نویسیم بدون تغییر قابل استفاده خواهند بود.

مرورگر چه نقشی در اجرای HTML دارد؟

برای مشاهده نتیجه کدهای HTML به یک مرورگر وب نیاز داریم.

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

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

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Safari

در این آموزش تفاوت مهمی ندارد که از کدام مرورگر استفاده می‌کنید. اگر Google Chrome یا Microsoft Edge روی سیستم شما نصب است، برای شروع کاملاً مناسب خواهد بود.

ساخت پوشه برای تمرین‌های HTML

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

برای مثال می‌توانید در یکی از بخش‌های کامپیوتر خود پوشه‌ای با نام زیر ایجاد کنید:

html-tutorial

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

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

ساخت اولین پروژه HTML

تا اینجا ابزارهای مورد نیاز برای شروع کار با HTML را آماده کرده‌ایم و حالا می‌توانیم اولین پروژه واقعی خود را ایجاد کنیم.

داخل پوشه html-tutorial یک پوشه جدید برای اولین تمرین ایجاد کنید.

برای مثال:

first-html-page

ساختار پوشه‌های ما فعلاً به شکل زیر خواهد بود:

html-tutorial
└── first-html-page

حالا پوشه first-html-page را در VS Code باز کنید.

در VS Code می‌توانید از منوی File گزینه Open Folder را انتخاب کنید و پوشه مورد نظر را باز کنید.

ساخت اولین فایل HTML

حالا در پوشه پروژه یک فایل جدید ایجاد کنید و نام آن را به شکل زیر قرار دهید:

index.html

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

چرا فایل را index.html نام‌گذاری می‌کنیم؟

نام index.html در طراحی وب بسیار رایج است.

در بسیاری از وب‌سایت‌ها و وب‌سرورها، فایلی با نام index.html می‌تواند به عنوان فایل اصلی یک پوشه یا صفحه در نظر گرفته شود.

البته فایل HTML می‌تواند نام‌های دیگری نیز داشته باشد؛ برای مثال:

about.html
contact.html
products.html

اما برای صفحه اصلی پروژه معمولاً از نام index.html استفاده می‌کنیم.

نوشتن اولین کد HTML

فایل index.html را در VS Code باز کنید و کد زیر را داخل آن بنویسید:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>اولین صفحه HTML من</title>
</head>
<body>

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

    <p>این اولین صفحه HTML من است.</p>

</body>
</html>

بعد از وارد کردن کد، فایل را ذخیره کنید.

در ویندوز معمولاً می‌توانید با کلیدهای ترکیبی زیر فایل را ذخیره کنید:

Ctrl + S

اولین صفحه HTML خود را اجرا کنیم

حالا به پوشه first-html-page بروید و روی فایل index.html دوبار کلیک کنید.

اگر همه چیز درست باشد، فایل در مرورگر پیش‌فرض سیستم باز می‌شود.

در صفحه باید چیزی شبیه این مشاهده کنید:

سلام دنیا!

این اولین صفحه HTML من است.

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

آیا برای اجرای HTML به اینترنت نیاز داریم؟

خیر.

برای تمرین‌های اولیه HTML نیازی به اینترنت یا حتی نصب وب‌سرور ندارید.

مرورگر می‌تواند فایل‌های HTML ذخیره‌شده روی کامپیوتر شما را مستقیماً باز و نمایش دهد.

به همین دلیل می‌توانیم بخش زیادی از آموزش‌های HTML و CSS را به صورت آفلاین تمرین کنیم.

آیا برای HTML به XAMPP یا WAMP نیاز داریم؟

برای HTML ساده خیر.

برنامه‌هایی مانند XAMPP و WAMP معمولاً زمانی کاربرد بیشتری پیدا می‌کنند که بخواهیم با فناوری‌های سمت سرور مانند PHP، پایگاه داده یا سیستم‌هایی مانند وردپرس کار کنیم.

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

کد اولین صفحه ما چه معنایی دارد؟

در اولین فایل HTML چند خط مختلف نوشته‌ایم:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>اولین صفحه HTML من</title>
</head>
<body>

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

    <p>این اولین صفحه HTML من است.</p>

</body>
</html>

در این مرحله لازم نیست تمام این دستورات را حفظ کنید.

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

اما برای اینکه تصویر کلی داشته باشید، به صورت بسیار خلاصه:

• <!DOCTYPE html> نوع سند را مشخص می‌کند.
• <html> عنصر اصلی سند HTML است.
• <head> شامل اطلاعات مربوط به سند است.
• <title> عنوان صفحه را مشخص می‌کند.
• <body> شامل محتوایی است که در صفحه مرورگر نمایش داده می‌شود.
• <h1> یک عنوان اصلی ایجاد می‌کند.
• <p> برای ایجاد پاراگراف استفاده می‌شود.

در درس‌های بعد همه این بخش‌ها را با جزئیات و مثال بررسی می‌کنیم.

تغییر محتوا و مشاهده نتیجه در مرورگر

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

مثلاً متن داخل تگ h1 را تغییر دهید:

<h1>به وب‌سایت من خوش آمدید</h1>

و پاراگراف را نیز به شکل زیر تغییر دهید:

<p>من در حال یادگیری HTML هستم.</p>

حالا فایل را با Ctrl + S ذخیره کنید.

سپس به مرورگر برگردید و صفحه را Refresh کنید.

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

F5

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

یک تمرین ساده انجام دهید

قبل از رفتن به درس بعد، بهتر است همین مثال ساده را کمی تغییر دهید.

داخل قسمت body کدهای زیر را قرار دهید:

<h1>معرفی من</h1>

<p>سلام! من در حال یادگیری طراحی وب هستم.</p>

<h2>هدف من</h2>

<p>می‌خواهم HTML، CSS و JavaScript را یاد بگیرم.</p>

فایل را ذخیره کنید و نتیجه را در مرورگر ببینید.

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

نمایش پسوند فایل‌ها در ویندوز

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

در غیر این صورت ممکن است تصور کنید فایلی با نام index.html ساخته‌اید، در حالی که نام واقعی فایل چیزی شبیه این باشد:

index.html.txt

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

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

تفاوت نام فایل و عنوان صفحه چیست؟

این دو موضوع را با یکدیگر اشتباه نگیرید.

نام فایل ما:

index.html

است، اما داخل بخش head نوشته‌ایم:

<title>اولین صفحه HTML من</title>

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

آیا باید تمام کدها را حفظ کنیم؟

خیر.

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

مهم‌تر از حفظ کردن، این است که بدانید:

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

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

اشتباه کردن هنگام نوشتن HTML طبیعی است

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

این موضوع کاملاً طبیعی است.

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

به همین دلیل بهتر است تمام مثال‌های دوره را خودتان تایپ کنید و فقط به خواندن کدها اکتفا نکنید.

در این درس چه چیزهایی یاد گرفتیم؟

در این آموزش اولین قدم عملی برای یادگیری HTML را برداشتیم و یاد گرفتیم:

• برای شروع HTML به چه ابزارهایی نیاز داریم.
• ویرایشگر کد چیست.
• چرا از VS Code استفاده می‌کنیم.
• مرورگر چگونه فایل HTML را نمایش می‌دهد.
• چگونه یک پوشه برای پروژه HTML بسازیم.
• چگونه فایل index.html ایجاد کنیم.
• چگونه اولین کد HTML را بنویسیم.
• چگونه فایل HTML را در مرورگر اجرا کنیم.
• چگونه کد را تغییر دهیم و نتیجه را مشاهده کنیم.

جمع‌بندی

برای شروع کار با HTML به ابزار پیچیده‌ای نیاز نداریم. یک ویرایشگر کد مانند VS Code و یک مرورگر برای شروع کافی است.

در این درس اولین فایل index.html را ساختیم، چند خط کد HTML داخل آن نوشتیم و نتیجه را مستقیماً در مرورگر مشاهده کردیم.

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

درس قبلی: HTML چیست؟ آشنایی با HTML و کاربرد آن در طراحی سایت

درس بعدی: ساختار اصلی سند HTML؛ آشنایی با DOCTYPE، html، head و body