آموزش جامع HTML

مسیر یادگیری HTML از صفر تا صد برای طراحی وب‌سایت‌های مدرن

۶ درس ۳ ساعت مبتدی

HTML چیست؟

زبان پایه و اساسی برای ساخت تمام صفحات وب

HTML مخفف HyperText Markup Language (زبان نشانه‌گذاری ابرمتن) است. این زبان، اساس ساختار صفحات وب را تشکیل می‌دهد و به مرورگرها می‌گوید که محتوا چگونه نمایش داده شود.

با HTML می‌توانید:

ساختار صفحات وب را ایجاد کنید
متن، تصاویر، ویدیوها و سایر محتوا را در صفحه قرار دهید
لینک‌ها را برای ناوبری بین صفحات ایجاد کنید
فرم‌ها را برای جمع‌آوری اطلاعات از کاربران طراحی کنید
عناصر تعاملی مانند دکمه‌ها و منوها را ایجاد کنید

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

نقشه راه یادگیری HTML

برای یادگیری اصولی HTML، مسیر زیر را دنبال کنید:

درس‌های آماده

به زودی

مقدمات HTML

آشنایی با مفاهیم اولیه HTML و ساختار پایه صفحات وب

ساختار پایه یک صفحه HTML
تگ‌های HTML و ویژگی‌های آن‌ها
عناصر بلاک و اینلاین

شروع یادگیری

متن و قالب‌بندی

کار با متن و قالب‌بندی محتوا در HTML

عناوین و پاراگراف‌ها
قالب‌بندی متن (پررنگ، مورب، زیرخط‌دار)
لیست‌های مرتب و نامرتب

شروع یادگیری

لینک‌ها و تصاویر

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

ایجاد لینک‌های داخلی و خارجی
افزودن تصاویر و تنظیم ویژگی‌های آن‌ها
لینک‌های تصویری

شروع یادگیری

جداول

ایجاد و مدیریت جداول در HTML

ساختار پایه جداول
ادغام سلول‌ها (ردیف و ستون)
گروه‌بندی در جداول

شروع یادگیری

فرم‌ها

ایجاد فرم‌ها برای جمع‌آوری اطلاعات از کاربران

ساختار پایه فرم‌ها
انواع ورودی‌ها (متن، رمز عبور، چک‌باکس و...)
اعتبارسنجی فرم‌ها

شروع یادگیری

HTML5 و ویژگی‌های پیشرفته

آشنایی با ویژگی‌های جدید HTML5 و کاربردهای آن

عناصر معنایی HTML5
صوت و ویدیو در HTML5
Canvas و SVG

شروع یادگیری

شروع سفر یادگیری

آماده‌اید تا سفر هیجان‌انگیز یادگیری HTML را شروع کنید؟ از مبانی شروع کرده و گام به گام به سمت تسلط پیش بروید. پس از تکمیل این دوره، دنیای CSS در انتظار شماست!

شروع یادگیری دوره CSS

۶ درس

مناسب مبتدیان

رایگان

نمونه کد HTML

یک نمونه ساده از ساختار یک صفحه HTML:

این کد را می‌توانید به عنوان الگو استفاده کنید

index.php

<!DOCTYPE html>
            <html lang="fa" dir="rtl">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>عنوان صفحه من</title>
                <meta name="description" content="توضیحات صفحه برای موتورهای جستجو">
            </head>
            <body>
                <header>
                    <h1>به وبسایت من خوش آمدید</h1>
                    <nav>
                        <ul>
                            <li><a href="#">خانه</a></li>
                            <li><a href="#">درباره ما</a></li>
                            <li><a href="#">تماس با ما</a></li>
                        </ul>
                    </nav>
                </header>
                
                <main>
                    <section>
                        <h2>بخش اصلی</h2>
                        <p>این یک پاراگراف نمونه است.</p>
                        <img src="تصویر.jpg" alt="توضیح تصویر">
                    </section>
                </main>
                
                <footer>
                    <p>تمامی حقوق محفوظ است © 1402</p>
                </footer>
            </body>
            </html>

نکته مهم:

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