درس از مسیر HTML
HTML چیست و چه کاری انجام می‌دهد؟
پاسخ کوتاه: HTML زبان نشانه‌گذاری برای ساختن استخوان‌بندی صفحه وب است؛ یعنی مشخص می‌کند هر بخش صفحه چه چیزی است: عنوان، پاراگراف، تصویر، لینک یا فرم.
توضیح کامل
آموزش این درس
HTML مخفف HyperText Markup Language است. این زبان به مرورگر می‌گوید محتوای صفحه چه ساختاری دارد و هر قطعه از محتوا چه نقشی ایفا می‌کند.
HTML یک زبان برنامه‌نویسی به معنای رایج نیست؛ یعنی منطق و محاسبه ندارد. کار آن توصیف ساختار و معنای محتوا است.
رابطه HTML با CSS و JavaScript
- •HTML ساختار و محتوای صفحه را می‌سازد.
- •CSS ظاهر و چیدمان آن را تعیین می‌کند.
- •JavaScript رفتار و تعامل صفحه را اضافه می‌کند.
هر سند HTML از عنصرها (element) تشکیل شده است. هر عنصر معمولاً یک تگ باز و یک تگ بسته دارد و محتوای میان آن‌ها قرار می‌گیرد.
مثال کد
نمونه عملی
<h1>سلام دنیا</h1>
<p>این اولین پاراگراف من در HTML است.</p>عنصر h1 یک عنوان اصلی و عنصر p یک پاراگراف معمولی می‌سازد.
خروجی: در مرورگر یک عنوان بزرگ و زیر آن یک خط متن معمولی نمایش داده می‌شود.
اشتباهات رایج
مراقب این موارد باشید
- •فراموش کردن بستن تگ‌ها، مثلاً نوشتن
<p>بدون</p>. - •تصور اینکه HTML برای استایل‌دهی است؛ استایل کار CSS است.
- •استفاده از چند h1 بی‌دلیل در یک صفحه به‌جای یک عنوان اصلی روشن.
نکته‌های کاربردی
نکته‌های مهم
- •ابتدا ساختار محتوا را با HTML درست بسازید، سپس سراغ ظاهر بروید.
- •از تگ‌های معنادار استفاده کنید تا صفحه برای مرورگر و موتور جستجو قابل فهم باشد.
تمرین
تمرین: اولین صفحه
- 1یک عنوان اصلی با تگ h1 بنویسید.
- 2زیر آن دو پاراگراف با تگ p اضافه کنید.
- 3مطمئن شوید همه تگ‌ها به‌درستی بسته شده‌اند.
پروژه‌های آموزشی
تمرین‌های مرتبط با این مسیر
یک فرم تماس تمیز و ساختارمند بسازید تا تمرین واقعی روی ساختار HTML و فرم‌ها داشته باشید.
یک کارت محصول زیبا و ریسپانسیو بسازید و تمرین کنید چطور HTML و CSS را کنار هم به کار ببرید.
پروژه آموزشی فرم تعاملی با JavaScript
یک فرم با اعتبارسنجی ساده در مرورگر بسازید و تعامل کاربر را با JavaScript تمرین کنید.
این پروژه به‌زودی فعال می‌شود.
نیاز به طراحی سایت حرفه‌ای دارید؟
پروژه شما را با همین استانداردها می‌سازیم
اگر می‌خواهید به‌جای ساخت دستی، سایت آماده و حرفه‌ای داشته باشید، تیم ما کنار شماست.