HTML مخفف (HyperText Markup Language ) زبان اصلی ساخت صفحات وب است که به مرورگرها می‌گوید چگونه محتوای سایت را نمایش دهند. این زبان ساختاردهی اطلاعات وب را ممکن می‌کند و پایه‌ای برای تعامل با فناوری‌های دیگر مانند CSS و JavaScript است. در ادامه به دوره متنی HTML قسمت اول شروع کار و آشنایی با تگ body ، head و html می پردازیم.
دوره متنی HTML قسمت اول | تاریخچه HTML HTML اولین بار در سال 1991 توسط "تیم برنرز لی" معرفی شد. این زبان در ابتدا بسیار ساده بود و تنها برای ساخت صفحات وب ابتدایی استفاده می‌شد. اما با گذشت زمان و توسعه وب، نسخه‌های جدیدتری از آن ارائه شد. آخرین نسخه، HTML5، امکانات پیشرفته‌ای مانند پشتیبانی از ویدئو، صدا، گرافیک برداری و تگ‌های معنایی را فراهم کرده است.
چرا HTML مهم است؟
- سادگی یادگیری: HTML یکی از ساده‌ترین زبان‌های برنامه‌نویسی است که حتی مبتدیان هم می‌توانند آن را یاد بگیرند.
- ساختاردهی محتوای وب: HTML به شما امکان می‌دهد متن، تصاویر، ویدئوها و سایر محتواها را به شکلی منظم و قابل فهم در صفحات وب سازماندهی کنید.
- پایه‌ای برای سایر تکنولوژی‌ها: HTML اغلب همراه با CSS برای طراحی ظاهری و با JavaScript برای افزودن تعامل به صفحات وب استفاده می‌شود.
دوره متنی HTML قسمت اول طرز شروع کار با HTML
برای شروع کار با HTML و مشاهده‌ی خروجی در مرورگر، باید مراحل زیر را انجام دهید:
ایجاد یک فایل HTML
ابتدا باید یک فایل HTML بسازید و کدهای خود را داخل آن بنویسید. برای این کار:
استفاده از ویرایشگر متن
✅ Notepad (ویندوز) / TextEdit (مک) → ساده ولی کاربردی ✅ Visual Studio Code (VS Code) → پیشنهاد حرفه‌ای
مراحل ساخت فایل HTML
یک پوشه‌ی جدید بسازید مثلاً به نام (MyWebsite) یک فایل جدید درون این پوشه ایجاد کنید. نام فایل را مثلاً (index.html) بگذارید پسوند html ضروری است فایل را در ویرایشگر متن باز کنید و کدهای HTML را درون آن بنویسید.
نوشتن کد HTML در فایل
داخل index.html کد زیر را بنویسید:
این کد یک صفحه ساده HTML ایجاد می‌کند که دارای یک عنوان (<h1>) و یک پاراگراف (<p>) است.
مشاهده‌ی صفحه در مرورگر
بعد از ذخیره‌ی index.html، روی فایل کلیک راست کنید و گزینه‌ی "Open with" → "Google Chrome" یا مرورگر دلخواه شمارا انتخاب کنید.
✅اگر فایل به‌درستی باز شد، خروجی را می‌بینید:
استفاده از قابلیت "Live Server" در VS Code (روش سریع‌تر)
اگر از Visual Studio Code (VS Code) استفاده می‌کنید، می‌توانید افزونه‌ی Live Server را نصب کنید تا تغییرات را لحظه‌ای (بدون نیاز به رفرش کردن صفحه) مشاهده کنید.
نصب Live Server
- VS Code را باز کنید.
- در نوار کناری سمت چپ، روی Extensions کلیک کنید.
- عبارت Live Server را جستجو کرده و آن را نصب کنید.
- بعد از نصب، روی فایل index.html کلیک راست کنید و گزینه‌ی "Open with Live Server"را بزنید.
✅حالا هر تغییری که در فایل ایجاد کنید، به‌صورت خودکار در مرورگر اعمال می‌شود!🚀
مشاهده و بررسی صفحه در مرورگر
ابزار "Inspect" برای مشاهده و ویرایش کد HTML
در مرورگر (Chrome, Firefox, Edge) می‌توانید روی صفحه کلیک راست کنید و گزینه‌ی "Inspect"یا "بررسی"را بزنید. 🔍این ابزار به شما کمک می‌کند که ساختار HTML، استایل‌ها (CSS) و کنسول (JavaScript)را بررسی کنید.
بررسی تغییرات به‌صورت زنده
اگر در بخش Inspect، روی المان‌های HTML کلیک کنید، می‌توانید متن، رنگ و اندازه آن‌ها را تغییر دهید و نتیجه را فوراً مشاهده کنید.
نکات مهم هنگام کار با HTML
✅ همیشه فایل را با پسوند .html ذخیره کنید. ✅ مرورگرهای مدرن (Chrome, Firefox, Edge) بهترین پشتیبانی از HTML دارند. ✅ اگر تغییرات در مرورگر نمایش داده نشد، از کلید Ctrl + R یا F5 برای رفرش استفاده کنید. ✅ می‌توانید از "Live Server" در VS Code برای مشاهده‌ی آنی تغییرات استفاده کنید.
ساختار یک سند HTML و آشنایی با تگ body ، head و html
هر سند HTML شامل بخش‌هایی است که وظایف مختلفی را انجام می‌دهند. ساختار یک سند استاندارد به این صورت است:
- اعلان نوع سند (DOCTYPE) :اولین خط کد مشخص می‌کند که از کدام نسخه HTML استفاده شده است. در HTML5، به صورت <!DOCTYPE html> نوشته می‌شود.
- تگ <html> :تمام محتوای صفحه باید در این تگ قرار گیرد.
- بخش <head> :اطلاعاتی درباره صفحه مانند عنوان، متا دیتا، و لینک به فایل‌های CSS یا JavaScript در این قسمت قرار می‌گیرند.
- بخش <body> : محتوای اصلی صفحه شامل متن‌ها، تصاویر، ویدئوها و فرم‌ها در این بخش نمایش داده می‌شود.
حال که دوره متنی HTML قسمت اول شروع کار و آشنایی با تگ body ، head و html را مطالعه کردید می توانید دیگر بخش های این دوره را نیز از سایت ایوولرن مشاهده کنید.