HTML رو از صفر یاد بگیر! 🚀 آموزش جامع برای مبتدیان در سال 2025
آیا همیشه دوست داشتید بدونید وب‌سایت‌ها چطوری ساخته میشن؟ 🤔 آیا می‌خواید خودتون دست به کار بشید و اولین صفحه وب‌تون رو طراحی کنید؟ 😎 اگه جوابتون مثبته، این مقاله دقیقاً برای شما نوشته شده! ما توی این آموزش قدم به قدم HTML (زبان نشانه‌گذاری ابرمتن) رو بهتون یاد میدیم، زبانی که شالوده و اساس تمام وب‌سایت‌ها و برنامه‌های تحت وب امروزیه. پس با ما همراه باشید تا دنیای جذاب طراحی وب رو کشف کنیم!
HTML چیه و چرا باید یادش بگیریم؟ 🤔
HTML مثل یه زبان مادری برای مرورگرهاست. یعنی مرورگرها (مثل کروم، فایرفاکس و سافاری) از طریق HTML می‌فهمن که شما می‌خواید چه چیزی رو نشون بدید. هر چیزی که توی یه صفحه وب می‌بینید، از متن و تصویر گرفته تا ویدیو و لینک‌ها، همه‌شون با استفاده از HTML کدنویسی شدن.
یادگیری HTML به شما این امکان رو میده:
ساخت وب‌سایت شخصی: وب‌سایت خودتون رو طراحی کنید و ایده‌هاتون رو به دنیا نشون بدید. 🤩
تغییر و بهبود وب‌سایت‌های موجود: اگه یه وب‌سایت دارید، می‌تونید با HTML اون رو ویرایش و بهبود بدید. 🛠️
شروع یه مسیر شغلی جدید: HTML اولین قدم برای ورود به دنیای جذاب توسعه وب و برنامه‌نویسیه. 💻
اصول و مبانی HTML: از تگ‌ها تا ساختار صفحه 🧱
اولین قدم برای یادگیری HTML، آشنایی با تگ‌هاست. تگ‌ها کلماتی هستن که داخل علامت‌های `<` و `>` قرار می‌گیرن. هر تگ یه معنی خاص داره و به مرورگر میگه که با محتوای بین اون تگ چطوری رفتار کنه.
یه صفحه HTML معمولی از این عناصر اصلی تشکیل شده:
``: این خط به مرورگر میگه که داریم از HTML5 استفاده می‌کنیم.
``: این تگ، ریشه اصلی سند HTML رو مشخص میکنه و همه چیز داخل اون قرار می‌گیره.
``: این بخش شامل اطلاعات مربوط به صفحه وب میشه، مثل عنوان صفحه، توضیحات و لینک به فایل‌های CSS.
``: این بخش، محتوای اصلی صفحه وب رو شامل میشه، یعنی هر چیزی که کاربر توی صفحه می‌بینه.
مثال:
“`html
سلام دنیا!
این اولین پاراگراف من در HTML هست.
“`
توی این مثال:
`
` یه تگ برای عنوان اصلی صفحه است.
`
` یه تگ برای نشون دادن یه پاراگرافه.
درج تصاویر، ویدیوها و صدا در HTML 🖼️ 🎬 🔊
HTML فقط برای نشون دادن متن نیست! شما می‌تونید با استفاده از تگ‌های مختلف، تصاویر، ویدیوها و صدا رو هم به صفحه وب‌تون اضافه کنید.
تصاویر: از تگ `` برای درج تصاویر استفاده میشه. مهم‌ترین ویژگی این تگ، `src` (source) هست که آدرس تصویر رو مشخص میکنه.
ویدیوها: از تگ `
فرم‌های HTML: جمع‌آوری اطلاعات از کاربران 📝
فرم‌ها یکی از مهم‌ترین بخش‌های وب‌سایت‌ها هستن، چون به شما این امکان رو میدن که اطلاعات رو از کاربران جمع‌آوری کنید. فرم‌ها معمولاً شامل فیلدهای مختلفی هستن، مثل:
فیلدهای متنی: برای دریافت متن از کاربر (مثل نام و نام خانوادگی)
فیلدهای رمز عبور: برای دریافت رمز عبور از کاربر
فیلدهای ایمیل: برای دریافت آدرس ایمیل از کاربر
دکمه‌ها: برای ارسال اطلاعات فرم
برای ساخت فرم در HTML، از تگ `