اولین قدم عملی در یادگیری HTML این نیست که تعداد زیادی تگ را حفظ کنید؛ باید بتوانید یک فایل HTML واقعی بسازید، ساختار آن را بفهمید و نتیجه را در مرورگر ببینید.
در این آموزش از صفر یک فایل index.html میسازیم و در همان فایل با ساختار پایه سند HTML آشنا میشویم: DOCTYPE، عنصر html و دو بخش اصلی head و body. سپس فایل را در مرورگر باز میکنیم، چند تغییر در کد میدهیم و یاد میگیریم از کجا بفهمیم تغییرات درست اجرا شدهاند.
اگر هنوز درباره ماهیت HTML و نقشی که در ساخت صفحات وب دارد ابهام دارید، ابتدا راهنمای HTML چیست را بخوانید. در این مقاله فرض میکنیم تصویر کلی HTML را میشناسید و حالا میخواهید اولین سند واقعی خودتان را بسازید.
در پایان این آموزش یک فایل HTML خواهید داشت که خودتان آن را ساختهاید و میتوانید عنوان تب مرورگر، عنوان اصلی صفحه و محتوای آن را تغییر دهید و نتیجه را با چرخه ساده Save ← Refresh ← مشاهده خروجی بررسی کنید.
برای ساخت اولین فایل HTML به چه چیزی نیاز داریم؟
برای شروع کار با HTML به ابزار پیچیدهای نیاز ندارید. در این مقاله قرار است یک فایل واقعی بسازیم، چند خط HTML داخل آن بنویسیم و نتیجه را در مرورگر ببینیم. برای انجام این کار، فعلاً سه چیز کافی است:
- یک ویرایشگر متن یا کد برای نوشتن HTML؛
- یک مرورگر برای دیدن نتیجه؛
- یک پوشه روی کامپیوتر برای نگهداری فایل تمرینی.
برای نوشتن کد میتوانید از یک Code Editor مانند Visual Studio Code استفاده کنید. مزیت ویرایشگرهای کد این است که خواندن و ویرایش HTML را راحتتر میکنند؛ بااینحال، خود HTML وابسته به VS Code نیست و برای این درس لازم نیست وارد نصب افزونهها یا تنظیم محیط توسعه شویم.
مرورگر نقش متفاوتی دارد: کدی را که در فایل نوشتهایم میخواند و نتیجه آن را به شکل یک صفحه وب نمایش میدهد. در تمرینهای ابتدایی این مقاله، فایل HTML را مستقیماً از روی کامپیوتر در مرورگر باز میکنیم؛ بنابراین هنوز به هاست، دامنه، وردپرس یا حتی راهاندازی Local Server نیاز نداریم.
در مرحله بعد باید مشخص کنیم این فایل دقیقاً چه نوع فایلی است، چرا پسوند .html دارد و چرا معمولاً اولین فایل یک سایت را index.html نامگذاری میکنیم.
فایل HTML چیست و چرا پسوند .html دارد؟
یک صفحه HTML در سادهترین حالت، یک فایل متنی حاوی کدهای HTML است. شما این کدها را در ویرایشگر مینویسید و مرورگر آنها را تفسیر میکند تا ساختار و محتوای صفحه را نمایش دهد.
برای مثال، ممکن است داخل یک فایل چنین کدی داشته باشیم:
<h1>اولین صفحه من</h1>
<p>من در حال یادگیری HTML هستم.</p>
اگر این محتوا را در یک فایل HTML ذخیره و فایل را در مرورگر باز کنید، بهجای دیدن خود کدها، عنوان و پاراگراف را به شکل محتوای یک صفحه وب خواهید دید.
چرا فایل HTML پسوند .html دارد؟
پسوند فایل به سیستمعامل و نرمافزارها کمک میکند نوع فایل را تشخیص دهند. برای سندهای HTML معمولاً از پسوند .html استفاده میشود؛ مثلاً:
index.html
about.html
contact.html
بخش قبل از نقطه، نام فایل و بخش .html پسوند فایل است.
این موضوع در اولین تمرین اهمیت زیادی دارد. اگر بهاشتباه فایلی با نامی مانند زیر بسازید:
index.html.txt
در واقع یک فایل متنی ساختهاید، نه فایلی که با پسوند .html ذخیره شده باشد. این اتفاق بهخصوص زمانی گیجکننده میشود که سیستمعامل پسوند فایلهای شناختهشده را پنهان کرده باشد. به همین دلیل، هنگام ساخت اولین فایل بهتر است مطمئن شوید نام واقعی آن دقیقاً به .html ختم میشود.
index.html چیست و آیا باید حتماً همین نام را انتخاب کنیم؟
برای اولین فایل این مقاله از نام زیر استفاده میکنیم:
index.html
اما HTML شما را مجبور نمیکند هر فایل را index.html بنامید. فایلی با نام hello.html یا page.html نیز میتواند یک سند HTML معتبر باشد.
دلیل رایجبودن index.html این است که در بسیاری از وبسایتها و تنظیمات وبسرور، فایلی با نام index.html بهعنوان فایل پیشفرض یک پوشه در نظر گرفته میشود. برای مثال، وقتی بعداً یک سایت را روی وبسرور قرار میدهید، ممکن است با ورود به آدرس اصلی سایت، همین فایل بدون نوشتن نام آن در URL نمایش داده شود.
فعلاً لازم نیست وارد جزئیات وبسرور شویم. نکتهای که برای این درس باید به خاطر بسپارید این است:
index.html یک نام رایج و کاربردی برای صفحه ورودی است، اما نام اجباری برای تمام فایلهای HTML نیست.
حالا میدانیم چه فایلی قرار است بسازیم. مرحله بعد این است که ببینیم داخل یک سند HTML استاندارد چه بخشهایی قرار میگیرند و DOCTYPE، html، head و body چه رابطهای با یکدیگر دارند.
ساختار پایه یک سند HTML چگونه است؟
یک فایل HTML معمولاً فقط مجموعهای از تگهای پراکنده نیست. سند یک ساختار مشخص دارد که به مرورگر کمک میکند بخشهای مختلف صفحه را درست تشخیص دهد.
برای اولین فایل این مقاله، از ساختار زیر استفاده میکنیم:
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>اولین صفحه من</title>
</head>
<body>
<h1>سلام دنیا!</h1>
<p>این اولین فایل HTML من است.</p>
</body>
</html>
نکته: DOCTYPE پیش از عنصر html قرار میگیرد و بخشی از درخت عناصر HTML یا فرزند عنصر html نیست.
در نگاه اول ممکن است چند خط جدید همزمان جلوی شما قرار گرفته باشد، اما برای فهم این ساختار کافی است سند را به سه قسمت اصلی تقسیم کنیم:
- اعلان DOCTYPE در ابتدای فایل؛
- عنصر html که سند HTML را در بر میگیرد؛
- دو بخش اصلی داخل آن، یعنی head و body.
DOCTYPE در ابتدای سند چه کاری انجام میدهد؟
اولین خط فایل این است:
<!doctype html>
DOCTYPE یک تگ معمولی HTML مانند p یا h1 نیست. این اعلان در ابتدای سند قرار میگیرد تا مرورگر بداند صفحه را مطابق شیوه استاندارد HTML پردازش کند.
در اولین فایل خود کافی است همین شکل را در ابتدای سند قرار دهید:
<!doctype html>
فعلاً نیازی نیست جزئیات تاریخی و انواع قدیمیتر DOCTYPE را یاد بگیرید؛ این موضوع میتواند در آموزش مستقل خودش بررسی شود.
عنصر html چه نقشی دارد؟
بعد از DOCTYPE، عنصر اصلی سند را میبینیم:
<html lang="fa" dir="rtl">
...
</html>
تقریباً تمام محتوای سند HTML داخل این عنصر قرار میگیرد. به همین دلیل html را عنصر ریشه یا Root Element سند مینامیم.
در نمونه ما دو ویژگی نیز روی آن قرار گرفتهاند:
lang=”fa”
dir=”rtl”
lang=”fa” مشخص میکند زبان اصلی سند فارسی است و dir=”rtl” جهت نوشتار را راستبهچپ تعیین میکند. برای صفحه فارسی، استفاده از این اطلاعات باعث میشود ساختار سند از همان ابتدا با زبان محتوا هماهنگ باشد.
فعلاً هدف ما یادگیری Attributeها نیست؛ در اینجا فقط لازم است بدانید این دو مقدار اطلاعاتی درباره خود سند در اختیار مرورگر و ابزارهای دیگر قرار میدهند.
تفاوت head و body چیست؟
داخل عنصر html دو بخش اصلی داریم:
<head>
...
</head>
<body>
...
</body>
این دو بخش وظیفه یکسانی ندارند.
در تگ head معمولاً اطلاعاتی درباره خود سند قرار میگیرد؛ اطلاعاتی که برای تنظیم یا توصیف صفحه لازماند اما بیشتر آنها مستقیماً بهصورت محتوای صفحه نمایش داده نمیشوند.
در تگ body محتوایی قرار میگیرد که کاربر در صفحه وب میبیند؛ مانند عنوانها، پاراگرافها، تصاویر، لینکها و بخشهای دیگر صفحه.
در نمونه ما:
<body>
<h1>سلام دنیا!</h1>
<p>این اولین فایل HTML من است.</p>
</body>
بنابراین وقتی فایل را در مرورگر باز کنیم، عبارت «سلام دنیا!» و پاراگراف زیر آن داخل صفحه دیده میشوند.
داخل head اولین فایل ما چه چیزهایی قرار گرفتهاند؟
برای اولین سند، سه عنصر را داخل head قرار دادهایم:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>اولین صفحه من</title>
</head>
charset
این خط:
<meta charset="utf-8">
Encoding سند را مشخص میکند. استفاده از UTF-8 کمک میکند مرورگر حروف فارسی و طیف بزرگی از نویسههای دیگر را بهدرستی تفسیر کند.
viewport
خط بعدی:
<meta name="viewport" content="width=device-width, initial-scale=1">
در این نمونه، width=device-width به مرورگر میگوید عرض Viewport را با عرض دستگاه هماهنگ کند و initial-scale=1 مقیاس اولیه را ۱ در نظر بگیرد. در این درس فقط آن را بهعنوان بخشی از اسکلت اولیه نگه میداریم و جزئیات طراحی واکنشگرا را به آموزش CSS موکول میکنیم.
title
عنصر title عنوان خود سند را مشخص میکند:
<title>اولین صفحه من</title>
متن title معمولاً داخل محتوای اصلی صفحه نمایش داده نمیشود. هنگام بازکردن فایل، آن را روی تب مرورگر مشاهده میکنید.
این موضوع را با h1 اشتباه نگیرید:
<h1>سلام دنیا!</h1>
h1 داخل body قرار دارد و عنوانی است که در خود صفحه دیده میشود؛ اما title داخل head قرار دارد و عنوان سند را مشخص میکند.
رابطه عناصر این سند با یکدیگر چیست؟
اگر ساختار فایل را بدون جزئیات محتوا نگاه کنیم، رابطه اصلی آن به این شکل است:
html
├── head
│ ├── meta
│ ├── meta
│ └── title
└── body
├── h1
└── p
یعنی head و body هر دو داخل html قرار گرفتهاند و عناصر دیگری نیز داخل آنها قرار دارند.
به قرارگرفتن عناصر داخل یکدیگر در HTML nesting گفته میشود. فعلاً همین مدل ساده کافی است: وقتی عنصری را داخل عنصر دیگری باز میکنیم، باید ساختار باز و بستهشدن عناصر را منظم نگه داریم.
حالا دیگر اسکلت فایلی را که قرار است بسازیم میشناسیم. در مرحله بعد همین کد را از حالت نمونه خارج میکنیم و یک فایل واقعی با نام index.html روی کامپیوتر میسازیم.
اولین فایل index.html را گامبهگام بسازیم
حالا که ساختار پایه سند HTML را میشناسیم، وقت آن است همان ساختار را به یک فایل واقعی تبدیل کنیم. هدف این بخش ساده است: در پایان باید روی کامپیوتر خود فایلی با نام دقیق index.html داشته باشید که کد HTML داخل آن ذخیره شده باشد.
1. یک پوشه برای تمرین بسازید
ابتدا در محل دلخواه، مثلاً Desktop، یک پوشه جدید بسازید. نام پوشه میتواند چیزی ساده مثل این باشد:
my-first-html
قرار است فایلهای مربوط به این تمرین را داخل همین پوشه نگه داریم. این کار از همان ابتدا کمک میکند فایلهای پروژه با فایلهای دیگر سیستم مخلوط نشوند.
2. پوشه را در ویرایشگر کد باز کنید
اگر از Visual Studio Code استفاده میکنید، پوشهای که ساختهاید را داخل برنامه باز کنید.
در این مرحله باید چیزی شبیه این ساختار داشته باشید:
my-first-html/
هنوز فایلی داخل پوشه وجود ندارد.
استفاده از VS Code برای این آموزش اجباری نیست. اگر ویرایشگر دیگری دارید، همین مراحل را با آن انجام دهید. چیزی که اهمیت دارد این است که بتوانید یک فایل متنی بسازید و آن را با پسوند .html ذخیره کنید.
3. یک فایل با نام index.html بسازید
داخل پوشه یک فایل جدید ایجاد کنید و نام آن را دقیقاً اینطور قرار دهید:
index.html
به نقطه قبل از html توجه کنید. نام فایل نباید مثلاً به شکلهای زیر باشد:
index
index.txt
index.html.txt
فایل موردنظر ما باید واقعاً پسوند .html داشته باشد.
اگر از محیطی استفاده میکنید که پسوند فایلها را مخفی میکند، هنگام ذخیرهکردن فایل بیشتر دقت کنید تا فایل بهصورت ناخواسته با پسوند .txt ساخته نشود.
4. ساختار پایه HTML را داخل فایل قرار دهید
حالا فایل index.html را باز کنید و کد زیر را داخل آن بنویسید:
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>اولین صفحه من</title>
</head>
<body>
<h1>سلام دنیا!</h1>
<p>این اولین فایل HTML من است.</p>
</body>
</html>
این همان ساختاری است که در بخش قبل بررسی کردیم. تفاوت اینجاست که اکنون دیگر با یک نمونه جدا از محیط واقعی سروکار نداریم؛ این کد داخل فایل واقعی پروژه قرار گرفته است.
در این مرحله لازم نیست چیزی به کد اضافه کنید. بهتر است ابتدا همین نمونه ساده را اجرا کنیم و مطمئن شویم ساخت فایل درست انجام شده است.
5. فایل را ذخیره کنید
بعد از واردکردن کد، فایل را Save کنید.
این مرحله ساده به نظر میرسد، اما در ادامه اهمیت زیادی دارد. مرورگر نسخهای را میخواند که روی دیسک ذخیره شده است؛ بنابراین اگر بعداً کد را تغییر دهید ولی فایل را ذخیره نکنید، با Refresh کردن مرورگر نتیجه جدید را نخواهید دید.
در VS Code میتوانید از میانبر زیر هم استفاده کنید:
Ctrl + S
در macOS معمولاً میانبر ذخیرهکردن فایل:
Command + S
است.
6. ساختار پوشه را یکبار بررسی کنید
در پایان این مرحله، پروژه شما باید تقریباً چنین شکلی داشته باشد:
my-first-html/
└── index.html
و داخل index.html نیز باید همان سند HTML قرار گرفته باشد.
قبل از ادامه، این سه مورد را بررسی کنید:
- نام فایل دقیقاً index.html باشد؛
- کد HTML داخل همین فایل قرار گرفته باشد؛
- فایل بعد از نوشتن کد ذخیره شده باشد.
اگر هر سه مورد درست است، اولین فایل HTML خود را ساختهاید. هنوز فقط یک مرحله باقی مانده تا نتیجه را ببینیم: باید index.html را در مرورگر باز کنیم و بررسی کنیم مرورگر از این کد چه صفحهای میسازد.
فایل HTML را چگونه در مرورگر اجرا کنیم؟
بعد از ساخت و ذخیره index.html، برای دیدن نتیجه لازم نیست فعلاً سرور یا ابزار دیگری راهاندازی کنید. میتوانید همین فایل را مستقیماً در مرورگر باز کنید.
فایل index.html را در مرورگر باز کنید
به پوشهای بروید که فایل را داخل آن ساختهاید:
my-first-html/
└── index.html
حالا فایل index.html را با مرورگری مثل Chrome، Firefox، Edge یا Safari باز کنید. در بسیاری از سیستمها دوبار کلیک روی فایل کافی است؛ اگر فایل با برنامه دیگری باز میشود، میتوانید از گزینههایی مانند Open with استفاده کنید و مرورگر را انتخاب کنید.
اگر همهچیز درست باشد، باید داخل صفحه چیزی شبیه این ببینید:
سلام دنیا!
این اولین فایل HTML من است.
مرورگر کد زیر را بهصورت متن خام نمایش نمیدهد:
<h1>سلام دنیا!</h1>
<p>این اولین فایل HTML من است.</p>
بلکه تگها را تفسیر میکند و نتیجه آنها را به شکل محتوای صفحه نشان میدهد. این همان تفاوت مهم میان کدی که در فایل مینویسید و خروجیای که در مرورگر میبینید است.
title را کجا باید ببینیم؟
در کدی که نوشتیم، این خط داخل head قرار داشت:
<title>اولین صفحه من</title>
عبارت «اولین صفحه من» معمولاً داخل محتوای اصلی صفحه دیده نمیشود. به بالای مرورگر و عنوان تب نگاه کنید؛ آنجا باید همین متن را ببینید.
در مقابل، این کد:
<h1>سلام دنیا!</h1>
داخل body قرار دارد و متن «سلام دنیا!» را در خود صفحه نمایش میدهد.
پس در همین مثال میتوانیم تفاوت دو بخش سند را عملاً ببینیم:
- title ← عنوان سند در تب مرورگر
- h1 ← عنوان قابل مشاهده داخل صفحه
یک تغییر ایجاد کنید و نتیجه را ببینید
حالا به ویرایشگر کد برگردید و این خط:
<h1>سلام دنیا!</h1>
را مثلاً به این شکل تغییر دهید:
<h1>اولین صفحه HTML من</h1>
بعد فایل را ذخیره کنید.
اگر بلافاصله به مرورگر برگردید، ممکن است هنوز متن قبلی را ببینید. مرورگر باید دوباره فایل ذخیرهشده را بخواند؛ بنابراین صفحه را Refresh کنید.
بعد از Refresh باید عنوان داخل صفحه به این عبارت تغییر کرده باشد:
اولین صفحه HTML من
از اینجا به بعد یکی از مهمترین چرخههای کار هنگام یادگیری HTML را بارها تکرار خواهید کرد:
ویرایش کد ← Save ← Refresh ← بررسی خروجی
اگر تغییری در کد ایجاد کردید ولی نتیجه در مرورگر تغییر نکرد، قبل از هر چیز دو مورد را بررسی کنید:
- آیا فایل را Save کردهاید؟
- آیا همان صفحه را در مرورگر Refresh کردهاید؟
یک آزمایش دیگر با title
برای اینکه تفاوت head و body کاملاً ملموس شود، این بار مقدار title را تغییر دهید:
<title>تمرین HTML من</title>
فایل را ذخیره و صفحه را Refresh کنید.
این بار انتظار نداریم متن اصلی صفحه تغییر کند. باید عنوان تب مرورگر از «اولین صفحه من» به «تمرین HTML من» تغییر کرده باشد.
به این ترتیب میتوانید دو نتیجه متفاوت را بررسی کنید:
- تغییر عناصر داخل body معمولاً روی محتوای قابل مشاهده صفحه اثر میگذارد؛
- تغییر title روی عنوان سند در تب مرورگر دیده میشود.
در این مرحله اولین فایل HTML شما فقط ساخته نشده است؛ آن را اجرا کردهاید، بخشی از کد را تغییر دادهاید و نتیجه تغییر را نیز در مرورگر دیدهاید. حالا باید یک بررسی کوتاه انجام دهیم تا مطمئن شویم ساختار فایل و روند اجرای آن واقعاً درست است.
از کجا بفهمیم فایل HTML درست ساخته و اجرا شده است؟
تا اینجا فایل را ساختهایم، آن را در مرورگر باز کردهایم و نتیجه یک تغییر را هم دیدهایم. حالا چند نشانه را بررسی میکنیم تا مطمئن شویم فایل درست ساخته شده و چرخه ویرایش و مشاهده خروجی کار میکند.
این چکلیست موفقیت اجرای تمرین را بررسی میکند، نه اعتبار نحوی کامل سند. مرورگرها میتوانند بعضی خطاهای HTML را هنگام پردازش بازیابی کنند؛ بنابراین صرفِ نمایش صفحه تضمین نمیکند کد از نظر ساختاری کاملاً بیخطا است.
اگر همه موارد زیر برقرار باشند، تمرین این مرحله با موفقیت انجام شده است:
- نام فایل دقیقاً index.html است؛
- فایل با پسوند واقعی .html ذخیره شده است، نه مثلاً .txt؛
- فایل در مرورگر باز میشود؛
- متن داخل body روی صفحه دیده میشود؛
- مقدار title در عنوان تب مرورگر قابل مشاهده است؛
- بعد از تغییر کد و Save کردن فایل، با Refresh کردن صفحه نتیجه جدید را میبینید.
برای مثال، اگر داخل فایل این کد را دارید:
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>تمرین HTML من</title>
</head>
<body>
<h1>اولین صفحه HTML من</h1>
<p>این اولین فایل HTML من است.</p>
</body>
</html>
باید بتوانید دو نوع خروجی را جداگانه تشخیص دهید:
در تب مرورگر:
تمرین HTML من
داخل خود صفحه:
اولین صفحه HTML من
این اولین فایل HTML من است.
این تفاوت یک نشانه مهم است که ساختار پایه سند را درست فهمیدهاید: اطلاعات داخل head و محتوای داخل body نقش یکسانی ندارند.
یک آزمون کوتاه انجام دهید
برای اطمینان بیشتر، فقط متن پاراگراف را تغییر دهید:
<p>من توانستم اولین صفحه HTML خودم را اجرا کنم.</p>
سپس فایل را Save و صفحه را Refresh کنید.
اگر متن جدید در مرورگر نمایش داده شد، یعنی این چرخه را با موفقیت انجام دادهاید:
فایل HTML ← ویرایش کد ← ذخیره فایل ← Refresh مرورگر ← مشاهده نتیجه
در این مرحله لازم نیست ظاهر صفحه زیبا باشد یا قابلیت خاصی داشته باشد. هدف فعلاً این است که مطمئن شویم ساختار فایل، مسیر اجرای آن و ارتباط بین کد و خروجی مرورگر را درست فهمیدهاید.
اگر یکی از این نشانهها را نمیبینید، به معنی شکست تمرین نیست؛ معمولاً یک مشکل کوچک در نام فایل، ذخیرهکردن تغییرات یا ساختار کد وجود دارد. در بخش بعد، همین خطاهای رایج را یکییکی بررسی میکنیم.
اگر اولین فایل HTML درست کار نکرد چه چیزهایی را بررسی کنیم؟
اگر نتیجهای که در مرورگر میبینید با چیزی که انتظار داشتید متفاوت است، لازم نیست از ابتدا همهچیز را دوباره بنویسید. در اولین تمرین HTML، معمولاً کافی است فایل، محل کد و چرخه Save و Refresh را مرحلهبهمرحله بررسی کنید.
مطمئن شوید فایل واقعاً پسوند .html دارد
اول از همه نام واقعی فایل را بررسی کنید. فایل ما باید این نام را داشته باشد:
index.html
اگر فایل بهشکل زیر ذخیره شده باشد:
index.html.txt
در واقع پسوند نهایی آن .txt است.
اگر با دوبار کلیک روی فایل یک ویرایشگر متن باز میشود، این موضوع بهتنهایی ثابت نمیکند پسوند فایل اشتباه است؛ ممکن است ویرایشگر برنامه پیشفرض سیستم برای فایلهای HTML باشد. نام و پسوند واقعی فایل را جداگانه بررسی کنید و در صورت نیاز با گزینه Open with آن را در مرورگر باز کنید.
بررسی کنید تغییرات را Save کرده باشید
فرض کنید این کد را:
<h1>سلام دنیا!</h1>
به این شکل تغییر دادهاید:
<h1>اولین صفحه HTML من</h1>
اگر فایل را Save نکنید، مرورگر همچنان نسخه ذخیرهشده قبلی را میخواند.
بنابراین بعد از هر تغییر این ترتیب را حفظ کنید:
ویرایش کد ← Save ← برگشت به مرورگر ← Refresh
مطمئن شوید همان فایل را در مرورگر باز کردهاید
اگر چند نسخه از index.html در پوشههای مختلف ساخته باشید، ممکن است یک فایل را ویرایش کنید اما فایل دیگری در مرورگر باز باشد.
برای بررسی این موضوع، یک تغییر کاملاً قابل تشخیص ایجاد کنید؛ مثلاً:
<h1>تست فایل صحیح</h1>
فایل را Save و صفحه را Refresh کنید. اگر این عبارت نمایش داده نشد، مسیر فایل بازشده در مرورگر را با فایلی که در ویرایشگر تغییر میدهید مقایسه کنید.
محتوای قابل مشاهده را داخل body قرار دهید
در ساختار اولیه ما، محتوایی که قرار است داخل صفحه دیده شود در body قرار میگیرد:
<body>
<h1>اولین صفحه HTML من</h1>
<p>این اولین فایل HTML من است.</p>
</body>
اما head برای اطلاعات مربوط به سند استفاده میشود:
<head>
<title>تمرین HTML من</title>
</head>
اگر انتظار دارید متنی داخل خود صفحه دیده شود، آن را بهاشتباه داخل head قرار ندهید.
title را با h1 اشتباه نگیرید
این دو عنصر در مثال ما دو نتیجه متفاوت دارند:
<title>تمرین HTML من</title>
متن title را در عنوان تب مرورگر بررسی میکنیم.
اما:
<h1>اولین صفحه HTML من</h1>
داخل خود صفحه نمایش داده میشود.
بنابراین اگر مقدار title را تغییر دادهاید و دنبال آن وسط صفحه میگردید، ممکن است تصور کنید کد اجرا نشده است؛ درحالیکه باید تغییر را روی تب مرورگر بررسی کنید.
ساختار باز و بستهشدن عناصر را بررسی کنید
وقتی چند عنصر داخل یکدیگر قرار میگیرند، ساختار آنها را منظم نگه دارید. برای مثال:
<body>
<h1>اولین صفحه HTML من</h1>
<p>در حال یادگیری HTML هستم.</p>
</body>
در این نمونه، h1 و p هر دو داخل body قرار دارند و هرکدام در جای مشخص خود باز و بسته شدهاند.
اگر هنگام تغییر نمونه اولیه، تگها را جابهجا یا ناقص کردهاید، کد خود را دوباره با اسکلت اولیه مقایسه کنید:
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>تمرین HTML من</title>
</head>
<body>
<h1>اولین صفحه HTML من</h1>
<p>این اولین فایل HTML من است.</p>
</body>
</html>
در این مرحله هدف این نیست که همه خطاهای احتمالی HTML را یاد بگیرید. اگر مشکلی پیش آمد، ابتدا همین مسیر کوتاه را بررسی کنید:
- فایل واقعاً .html است؟
- همان فایل را ویرایش میکنید که در مرورگر باز شده است؟
- تغییرات را Save کردهاید؟
- صفحه را Refresh کردهاید؟
- محتوای قابل مشاهده داخل body قرار گرفته است؟
- ساختار عناصر با نمونه اولیه هماهنگ است؟
اگر این موارد درست باشند و تغییرات شما در مرورگر دیده شوند، محیط اولیه آماده است. حالا میتوانیم از حالت کپیکردن نمونه خارج شویم و با یک تمرین کوتاه بررسی کنیم که خودتان میتوانید بخشهای اصلی اولین صفحه را تغییر دهید.
تمرین: اولین صفحه HTML خودتان را تغییر دهید
تا اینجا یک فایل HTML ساختهاید، ساختار پایه آن را دیدهاید و میدانید چطور نتیجه تغییرات را در مرورگر بررسی کنید. حالا بهتر است بدون جایگزینکردن کل کد، چند بخش از همان فایل را خودتان تغییر دهید.
فایل index.html را باز کنید و سه تغییر زیر را انجام دهید.
1. عنوان تب مرورگر را تغییر دهید
مقدار title را به یک عنوان دلخواه تغییر دهید. برای مثال:
<title>صفحه تمرینی من</title>
بعد از Save و Refresh باید عبارت جدید را روی تب مرورگر ببینید، نه داخل محتوای صفحه.
2. عنوان اصلی صفحه را شخصیسازی کنید
متن داخل h1 را تغییر دهید:
<h1>من اولین صفحه HTML خودم را ساختم</h1>
این بار نتیجه باید مستقیماً داخل صفحه دیده شود.
3. یک پاراگراف جدید اضافه کنید
زیر پاراگراف فعلی، یک عنصر p دیگر قرار دهید:
<p>مرحله بعدی من یادگیری عناصر بیشتر HTML است.</p>
در پایان، بخش body فایل شما میتواند چیزی شبیه این باشد:
<body>
<h1>من اولین صفحه HTML خودم را ساختم</h1>
<p>این اولین فایل HTML من است.</p>
<p>مرحله بعدی من یادگیری عناصر بیشتر HTML است.</p>
</body>
حالا فایل را Save و صفحه را Refresh کنید.
اگر تمرین درست انجام شده باشد، باید بتوانید سه نتیجه را جداگانه پیدا کنید:
- عنوان جدید سند روی تب مرورگر؛
- متن جدید h1 داخل صفحه؛
- پاراگراف تازه زیر محتوای قبلی.
هدف این تمرین حفظکردن کد نیست. مهم این است که بتوانید تشخیص دهید هر تغییر را در کدام بخش سند انجام میدهید و نتیجه آن را کجا باید ببینید.
در این مرحله دیگر فقط یک نمونه HTML را مشاهده نکردهاید. شما یک فایل واقعی با پسوند .html ساختهاید، ساختار html، head و body را در آن به کار بردهاید، فایل را در مرورگر اجرا کردهاید و نتیجه تغییرات خودتان را دیدهاید.
این همان پایهای است که در آموزشهای بعدی HTML روی آن عناصر، محتوا و ساختارهای پیچیدهتر را اضافه خواهیم کرد.
جمعبندی: حالا یک سند HTML واقعی ساختهاید
در این آموزش از یک فایل خالی شروع کردیم و قدمبهقدم به یک صفحه HTML قابل اجرا رسیدیم. حالا میدانید فایلهای HTML با پسوند .html ذخیره میشوند، چرا برای اولین صفحه معمولاً از نام index.html استفاده میکنیم و ساختار پایه یک سند از چه بخشهایی تشکیل شده است.
همچنین تفاوت کلی head و body را در عمل دیدهاید: title را روی تب مرورگر پیدا کردهاید، محتوای داخل body را در خود صفحه دیدهاید و با تغییر کد، Save کردن فایل و Refresh مرورگر نتیجه جدید را بررسی کردهاید.
مهمتر از حفظکردن اسکلت اولیه این است که حالا رابطه میان فایل HTML، کدی که مینویسید و خروجیای که مرورگر نمایش میدهد برایتان قابل مشاهده است. در درسهای بعدی میتوانیم روی همین فایل عناصر بیشتری اضافه کنیم و هر بخش از ساختار HTML را با جزئیات بیشتری یاد بگیریم.
اگر میخواهید HTML را بهصورت منظم و پروژهمحور ادامه دهید، دوره تخصصی HTML مسیر کاملتری برای ادامه یادگیری در اختیار شما قرار میدهد.
سوالات متداول
خیر. HTML به Visual Studio Code وابسته نیست و میتوانید فایل HTML را با هر ویرایشگر متنی یا Code Editor مناسب بسازید. استفاده از یک ویرایشگر کد فقط نوشتن و مدیریت کد را راحتتر میکند.
خیر. فایلی مثل page.html یا hello.html هم میتواند یک فایل HTML باشد. index.html نام رایجی برای فایل ورودی یا صفحه پیشفرض یک پوشه در بسیاری از محیطهای وب است، به همین دلیل در آموزشهای ابتدایی زیاد از آن استفاده میشود.
ابتدا مطمئن شوید فایل را Save کردهاید و سپس صفحه را Refresh کنید. اگر هنوز تغییری نمیبینید، بررسی کنید همان فایلی را ویرایش میکنید که در مرورگر باز شده و پسوند واقعی فایل نیز .html است.
title داخل head قرار میگیرد و عنوان سند را مشخص میکند؛ معمولاً نتیجه آن را روی تب مرورگر میبینید. h1 داخل body قرار میگیرد و بهعنوان یک عنوان در محتوای خود صفحه نمایش داده میشود.
نه. در شروع مهمتر است بدانید هر بخش چه نقشی دارد و عناصر اصلی چگونه کنار هم قرار میگیرند. با ساخت چند فایل و تکرار این ساختار، اسکلت سند بهمرور برایتان آشنا میشود.
هنوز دیدگاهی ثبت نشده است.