HTML چیست؟ آموزش کامل زبان HTML به زبان ساده همراه با مثال

HTML یا HyperText Markup Language زبان پایه‌ای طراحی وب است که ساختار اصلی همه وب‌سایت‌ها را شکل می‌دهد. همان‌طور که اسکلت برای بدن ضروری است، HTML هم برای صفحات وب حیاتی است. بدون آن، متنی برای نمایش، لینکی برای حرکت بین صفحات یا حتی تصویری برای دیدن وجود نخواهد داشت.

در این مقاله بررسی می‌کنیم که HTML چیست، چه کاربردهایی دارد، چرا زبان برنامه‌نویسی محسوب نمی‌شود و چه نسخه‌هایی از آن تا امروز عرضه شده است. همچنین با مزایا، معایب و برخی از تگ‌های پرکاربرد این زبان آشنا می‌شوید.

HTML چیست؟

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

ویژگی‌ها و کاربردهای HTML:

1. ساختاردهی محتوا: HTML به کاربران این امکان را می‌دهد که محتوای خود را با استفاده از عناصر مختلفی مانند عناوین، پاراگراف‌ها، لیست‌ها و جداول سازماندهی کنند.
2. لینک‌ها: با استفاده از HTML می‌توان لینک‌هایی به صفحات وب دیگر ایجاد کرد که این ویژگی باعث اتصال صفحات مختلف به یکدیگر می‌شود.
3. ادغام رسانه‌ها: HTML این امکان را فراهم می‌کند که تصاویر، ویدئوها و صداها را در صفحات وب گنجانده و نمایش دهد.
4. طراحی وب: با ترکیب HTML و CSS (Cascading Style Sheets)، طراحان وب می‌توانند ظاهر صفحات وب را به طور کامل کنترل کنند.
5. دسترس‌پذیری: HTML به وب‌سایت‌ها این امکان را می‌دهد که برای افراد با نیازهای خاص، مانند نابینایان یا افرادی که از تکنولوژی‌های کمکی استفاده می‌کنند، قابل دسترسی باشد.

نسخه‌های HTML:

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

• HTML4: نسخه‌ای که در دهه ۱۹۹۰ معرفی شد و به مدت طولانی استاندارد وب باقی ماند.
• XHTML: نسخه‌ای از HTML که از XML (eXtensible Markup Language) پیروی می‌کند و قوانین بیشتری برای نشانه‌گذاری دارد.
• HTML5: آخرین نسخه HTML که ویژگی‌های جدیدی مانند پشتیبانی از ویدئو و صدا، API‌های جدید و بهبودهای مربوط به گرافیک را معرفی کرده است.

در کل، HTML ابزار اصلی برای ایجاد و طراحی وب‌سایت‌ها و وب‌اپلیکیشن‌ها محسوب می‌شود و درک آن برای هر کسی که به وب‌سایت‌ها و توسعه وب علاقه دارد، ضروری است.

تاریخچه HTML

تولد HTML به سال ۱۹۹۰ برمی‌گردد. وقتی که یک تیم حرفه‌ای از cern (مرکز اروپایی تحقیقات هسته‌ای) به رهبری فردی، به نام تیم برنرز، یک زبان ساده ابداع کردند که با آن بتوانند، اطلاعات را روی وب ایجاد و ارائه کنند. این زبان ساده با پنج نسخه ارائه شد که امروزه، استانداردترین و بهترین نوع آن‌ها نسخه‌ی پنجم آن است.

چرا HTML یک زبان برنامه نویسی نیست؟

HTML (HyperText Markup Language) یک زبان نشانه‌گذاری (markup language) است و نه یک زبان برنامه‌نویسی. دلایل زیر به وضوح این تفاوت را توضیح می‌دهند:

1. هدف و عملکرد

• HTML: هدف اصلی HTML ایجاد ساختار و قالب‌بندی برای تولید محتوا برای وب است. این زبان به توسعه‌دهندگان وب اجازه می‌دهد که عناصر مختلف صفحات وب (متن، تصاویر، لینک‌ها و غیره) را تعریف و سازمان‌دهی کنند.
• زبان‌های برنامه‌نویسی: زبان‌های برنامه‌نویسی مانند Python، Java و JavaScript به‌منظور نوشتن الگوریتم‌ها و ایجاد منطق برنامه‌نویسی طراحی شده‌اند. این زبان‌ها قابلیت اجرای دستورات، کنترل جریان برنامه (مانند حلقه‌ها و شرط‌ها) و مدیریت داده‌ها را دارند.

2. عدم وجود منطق

• HTML به خودی خود فاقد قابلیت‌های منطقی و کنترلی است. شما نمی‌توانید با HTML محاسبات انجام دهید، تصمیم‌گیری کنید یا داده‌ها را پردازش کنید. این ویژگی‌ها برای زبان‌های برنامه‌نویسی ضروری هستند.

3. عدم قابلیت اجرا

• کدهای HTML به‌طور مستقیم در مرورگرها نمایش داده می‌شوند و هیچ‌گونه عمل خاصی را مانند اجرای یک الگوریتم یا پردازش داده انجام نمی‌دهند. در عوض، زبان‌های برنامه‌نویسی می‌توانند به‌عنوان یک سری دستورات اجرا شوند.

4. افزودن با JavaScript

• برای اضافه کردن رفتار به صفحات وب، توسعه‌دهندگان معمولاً از زبان‌های برنامه‌نویسی مانند JavaScript استفاده می‌کنند. HTML به‌تنهایی نمی‌تواند عملکردهای پیچیده‌ای مانند تعامل با کاربر یا پردازش داده‌ها را انجام دهد.

5. ساختار و قالب‌بندی

• HTML صرفاً به تعریف ساختار و ظاهر صفحات وب مربوط می‌شود. مثلاً شما می‌توانید با HTML متن را به‌صورت عنوان، پاراگراف و لیست نمایش دهید، اما نمی‌توانید با آن منطق برنامه‌نویسی ایجاد کنید.

بنابراین، به‌خاطر عدم وجود منطق، قابلیت‌های کنترلی و اجرایی، HTML یک زبان برنامه‌نویسی نیست بلکه یک زبان نشانه‌گذاری است که برای ساختاردهی به محتوا در وب طراحی شده است.

کاربرد HTML چیست؟

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

• ساختار دهی محتوا: یکی از مهم‌ترین کاربردهای اچ تی ام ال در ساختاردهی محتوا است. برای مثال شما با اچ تی ام ال می‌توانید صفحه‌ی خود را به چند بخش تقسیم کنید، در یک بخش اخبار، بخش دیگر تبلیغات و در نهایت در یک بخش بزرگ‌تر محتوای اصلی را قرار دهید.
• قرار دادن تصاویر و محتوا: در نسخه‌های جدیدتر اچ تی ام ال شما می‌توانید انواع تصاویر، ویدئوها و محتوا را در ثفحه‌ی خود قرار دهید و خلاقیت خود را به کار گیرید.
• قرار دادن ویزگی‌های تزئینی: در اچ تی ام ال شما می‌توانید به صورت محدودی از انواع انیمیشن‌ها و ادیت‌های خاص استفاده کنید و تکر قرار است که این‌کار را به صورت شخصی سازی شده انجام دهید، باید به برنامه نویسی روی بیاورید!

ساختار HTML و تگ‌ها

ساختار HTML و تگ‌ها یکی از مهم‌ترین مباحث در طراحی وب است. HTML (HyperText Markup Language) به‌عنوان زبان نشانه‌گذاری استاندارد وب، برای ایجاد و ساختاردهی محتوا در صفحات وب استفاده می‌شود. در اینجا به توضیح ساختار کلی HTML و تگ‌های مهم آن می‌پردازیم.

1. ساختار کلی HTML

یک صفحه HTML معمولاً دارای ساختاری مشابه زیر است:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عنوان صفحه</title>
    <link rel="stylesheet" href="styles.css"> <!-- لینک به فایل CSS -->
</head>
<body>
    <header>
        <h1>عنوان اصلی صفحه</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#section1">بخش 1</a></li>
            <li><a href="#section2">بخش 2</a></li>
        </ul>
    </nav>
    <main>
        <section id="section1">
            <h2>بخش 1</h2>
            <p>متن مربوط به بخش 1.</p>
        </section>
        <section id="section2">
            <h2>بخش 2</h2>
            <p>متن مربوط به بخش 2.</p>
        </section>
    </main>
    <footer>
        <p>کپی رایت © 2024</p>
    </footer>
</body>
</html>

2. تگ‌های اصلی HTML

در زیر به برخی از تگ‌های اصلی HTML و کاربردهای آن‌ها اشاره می‌کنیم:

2.1 تگ‌های ساختاری

• <!DOCTYPE html>: مشخص می‌کند که این سند HTML5 است.
• <html>: تگ اصلی که نشان‌دهنده شروع و پایان یک سند HTML است.
• <head>: بخش سرصفحه که شامل اطلاعات متا، عنوان و لینک به فایل‌های CSS است.
• <body>: بخش محتوا که شامل تمام عناصری است که در صفحه نمایش داده می‌شوند.

2.2 تگ‌های متا

• <meta>: تگ‌هایی برای ارائه اطلاعات متا، مانند تنظیمات charset و viewport.
• <title>: عنوان صفحه که در نوار عنوان مرورگر نمایش داده می‌شود.

2.3 تگ‌های عنوان

• <h1> تا <h6>: تگ‌های عنوان که از <h1> (بزرگترین) تا <h6> (کوچکترین) برای ساختاردهی متن استفاده می‌شوند.

2.4 تگ‌های پاراگراف و متن

• <p>: تگ برای ایجاد پاراگراف.
• <a>: تگ لینک که برای ایجاد پیوند به صفحات دیگر یا منابع خارجی استفاده می‌شود.
• <img>: تگ برای نمایش تصاویر. این تگ خود بسته است و به صورت <img src="url" alt="توضیح تصویر"> نوشته می‌شود.
• <ul> و <ol>: تگ‌های لیست نامرتب و مرتب، به همراه <li> برای هر مورد در لیست.

2.5 تگ‌های فرم

• <form>: برای ایجاد فرم‌ها.
• <input>: برای گرفتن ورودی از کاربر.
• <textarea>: برای ایجاد فضای متنی بزرگتر.
• <button>: برای ایجاد دکمه‌ها.

2.6 تگ‌های بخش‌بندی

• <header>: برای مشخص کردن بخش سرصفحه.
• <nav>: برای ایجاد منوهای ناوبری.
• <main>: برای محتوای اصلی صفحه.
• <section>: برای بخش‌بندی محتوا.
• <article>: برای محتواهایی که می‌توانند به‌طور مستقل منتشر شوند.
• <footer>: برای قسمت پایین صفحه که معمولاً شامل اطلاعات کپی رایت یا لینک‌های دیگر است.

HTML به‌عنوان زبان نشانه‌گذاری وب، نقش مهمی در ساختاردهی و ارائه محتوا دارد. با استفاده از تگ‌های مختلف، می‌توان وب‌سایت‌هایی تعاملی و کاربرپسند ایجاد کرد. فهم صحیح ساختار و تگ‌های HTML به توسعه‌دهندگان کمک می‌کند تا محتوای خود را به‌خوبی سازماندهی و مدیریت کنند.

مزایا و معایب HTML چیست؟

HTML (HyperText Markup Language) زبان اصلی برای ایجاد صفحات وب است و مانند هر فناوری دیگر، دارای مزایا و معایب خاص خود است. در اینجا به بررسی مزایا و معایب HTML می‌پردازیم.

مزایای HTML

1. سادگی و آسانی یادگیری:
   • HTML زبانی نسبتاً ساده و آسان برای یادگیری است. حتی افراد مبتدی نیز می‌توانند با مطالعه مستندات و منابع آموزشی، به سرعت آن را فرا بگیرند.
2. ساختاردهی محتوا:
   • HTML امکان ساختاردهی و سازماندهی محتوا را به شکلی منظم و قابل فهم برای مرورگرها و کاربران فراهم می‌کند. این ساختاردهی به بهبود دسترسی و جستجوی محتوا کمک می‌کند.
3. پشتیبانی گسترده:
   • HTML توسط تمامی مرورگرهای وب و دستگاه‌های مختلف پشتیبانی می‌شود، به این معنا که می‌توان به راحتی از آن برای ایجاد صفحات وب استفاده کرد.
4. قابلیت دسترسی:
   • HTML به توسعه‌دهندگان این امکان را می‌دهد که صفحات وب قابل دسترسی‌تری برای افراد با ناتوانی‌های مختلف ایجاد کنند. استفاده از تگ‌های مناسب، مانند تگ‌های متا و توضیحات تصاویر، می‌تواند دسترسی را بهبود بخشد.
5. سازگاری با دیگر فناوری‌ها:
   • HTML به‌راحتی با CSS و JavaScript ترکیب می‌شود، که به توسعه‌دهندگان این امکان را می‌دهد که صفحات وب زیباتر و تعاملی‌تری ایجاد کنند.
6. SEO Friendly:
   • HTML به خوبی برای بهینه‌سازی موتورهای جستجو (SEO) طراحی شده است. استفاده صحیح از تگ‌های عنوان، متا تگ‌ها و ساختار لینک‌ها می‌تواند به بهبود رتبه صفحات در نتایج جستجو کمک کند.

برای ایجاد یک وب‌سایت فروشگاهی حرفه‌ای، تسلط بر HTML و استفاده از خدمات طراحی سایت فروشگاهی اهمیت زیادی دارد.

معایب HTML

1. عدم قابلیت برنامه‌نویسی:
   • HTML یک زبان نشانه‌گذاری است و فاقد قابلیت‌های برنامه‌نویسی مانند منطق شرطی و حلقه‌ها است. برای ایجاد صفحات وب تعاملی و پویا، نیاز به زبان‌های برنامه‌نویسی مانند JavaScript دارید.
2. ایستا بودن محتوا:
   • HTML به خودی خود قادر به ایجاد محتوای پویا نیست. برای به‌روزرسانی محتوا به صورت خودکار یا بر اساس ورودی کاربر، نیاز به استفاده از زبان‌های سمت سرور یا فناوری‌های دیگر دارید.
3. محدودیت در طراحی:
   • در حالی که HTML امکان ساختاردهی محتوا را فراهم می‌کند، اما برای طراحی زیبا و جذاب، به CSS نیاز است. بدون CSS، صفحات HTML ممکن است از نظر ظاهری ساده و کسل‌کننده به نظر برسند.
4. مدیریت محتوا:
   • برای پروژه‌های بزرگ، مدیریت محتوای HTML می‌تواند دشوار شود. با افزایش تعداد صفحات و عناصر، نگهداری و بروزرسانی محتوا ممکن است زمان‌بر و پیچیده شود.
5. مشکلات سازگاری:
   • برخی از تگ‌ها و ویژگی‌های HTML ممکن است در مرورگرهای مختلف به‌درستی نمایش داده نشوند. این موضوع می‌تواند به مشکلات سازگاری منجر شود و نیاز به آزمایش‌های اضافی برای اطمینان از عملکرد صحیح در همه مرورگرها دارد.

تگ های متداول HTML

شاید تا اینجای مطلب، برای‌تان این سوال پیش آمده که تگ در HTML چیست و چه کاربردی دارد؟ تگ‌ها در زبان اچ تی ام ال بخش از ساختار ایجاد عناصر بصری هستند که معمولا با <> نشان داده می‌شوند. مثلا تگ ویدئو در صفحه اینگونه نوشته می‌شود: <video>.

نوشتن این تگ‌ها در کدهای اچ تی ام ال موجب به وجود آمدن بخش، فایل یا لینک مورد نظر شما می‌شود. چند نمونه تگ متداول در اچ تی ام ال داریم که در این بخش آن‌ها را معرفی می‌کنیم.

• <!–…–>: این تگ معمولا برای اضافه کردن کامنت در بخش مورد نظر استفاده می‌شود.
• <!DOCTYPE>: این تگ که کوتاه شده‌ی Document type است. به معنای اضافه کردن یک سند یا فایل است.
• <a>: این تگ برای اضافه کردن هایپر لینک‌ها است. هایپر لینک‌ها در واقع همان لینک‌هایی هستند که در بین مطلب در صفحات مختلف اضافه می‌شوند و کلیک بر روی آن‌ها شما را به صفحه‌ای دیگر منتقل خواهد کرد.
• <abbr>: این تگ زمانی استفاده می‌شود که شما نیاز دارید که چیزی را به صورت خلاصه بنویسید و بعدا با نگه داشتن موس روی آن کامل سده‌ی آن عبارت یا کلمه به مخاطب نشان داده شود.
• <address>: این تگ نشان دهنده‌ی نویسنده، منابع یا هر اطلاعات آدرس مانند دیگر است.

برای مشاهده لیست کامل تگ‌های HTML وارد سایت w3schools.com شوید.

یک پروژه کوچک برای تمرین کد زدن به زبان HTML

حالا وقت این است که با هم تمرین کنیم! یکی از بهترین پروژه‌های تمرینی برای کد زدن به زبان اچ تی ام ال این است که یک صفحه‌ی وب طراحی کنید. برای طراحی یک صفحه‌ی وب معمولی، معمولا باید بخش‌ها و عناصر زیر را در نظر بگیرید. البته قبل از همه‌ی این‌ها بهتر است که ویژوال استودیو یا ویژوال استودیو کد را در رایانه‌ی خود نصب کنید و کدها را روی ان اعمال کنید. برای دریافت طراحی وب سایت حرفه ای از خدمات طراحی وب‌رمز استفاده کنید.

1. Head: بخش <head> شامل اطلاعات مربوط به صفحه وب است که به صورت مستقیم در بخش بالایی صفحه نمایش داده می‌شود. این بخش با نام هدر هم شناخته می‌شود که در آن منوها و سایر اطلاعات قرار می‌گیرد.
2. عنوان (Heading): عنوان‌ها در صفحه وب برای سازماندهی و سلسله‌مراتب بندی محتوا استفاده می‌شوند. از عناصر <h1> تا <h6> برای عناوین اصلی و فرعی استفاده می‌شود، که <h1> عنوان اصلی و <h6> عنوان فرعی است.
3. بدنه (Body): بخش <body> شامل محتوای قابل نمایش در صفحه است. عناصری مانند متن، تصاویر، لینک‌ها، جداول، فرم‌ها و سایر عناصر HTML در این بخش قرار می‌گیرند. پس فقط کافی است که محتوای اصلی خود را در این بخش کپی پیست کنید.
4. تصاویر (Images): برای نمایش تصاویر در صفحه وب از عنصر <img> استفاده می‌شود. با استفاده از ویژگی src مسیر تصویر مشخص می‌شود و با ویژگی‌های مختلفی مانند alt و width می‌توان جزئیات دیگری را مشخص کرد.
5. جداول (Tables): بهتر است برای تمرین از جدول‌ها هم استفاده کنید. برای نشان دادن آن‌ها از عنصر <table> استفاده می‌شود. جدول شامل ردیف‌ها (<tr>) و ستون‌ها (<td>) است.
6. فرم‌ها (Forms): استفاده از فرم‌ها و کد زدن آن‌ها کمی سخت است و گویی موضوع آن‌ها کاملا فرق می‌کند. اما شما می‌توانید در صفحه‌ی خود از غرم‌ها هم استفاده‌ کنید. عناصری مانند <input>و<select> و<button> معمولا برای ساختن فرم‌ها استفاده می‌شوند.

برای مثال فرم زیر یک نمونه از یک فرم ثبت نام ساده است:

<!DOCTYPE html>

<html>

<head>

<title>فرم ثبت نام</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

background-color: #f2f2f2;

}

form {

display: inline-block;

margin-top: 50px;

}

label {

display: block;

margin-bottom: 10px;

}

input[type="text"], input[type="email"], input[type="password"] {

padding: 5px;

width: 200px;

}

input[type="submit"] {

padding: 8px 20px;

background-color: #4CAF50;

color: white;

border: none;

cursor: pointer;

}

</style>

</head>

<body>

<h1>فرم ثبت نام</h1>

<form action="submit.php" method="post">

<label for="name">نام:</label>

<input type="text" id="name" name="name" placeholder="نام خود را وارد کنید" required>

<label for="email">ایمیل:</label>

<input type="email" id="email" name="email" placeholder="ایمیل خود را وارد کنید" required>

<label for="password">رمز عبور:</label>

<input type="password" id="password" name="password" placeholder="رمز عبور خود را وارد کنید" required>

<input type="submit" value="ثبت نام">

</form>

</body>

</html>

در این مثال، یک فرم ساده برای ثبت نام تعریف شد. فرم دارای سه فیلد است: نام (`<input type=”text”>`)، ایمیل (`<input type=”email”>`) و رمز عبور (`<input type=”password”>`). همچنین، یک دکمه (`<input type=”submit”>`) برای ارسال فرم نیز وجود دارد. در بخش `<style>`، استایل‌های ساده‌ای برای ظاهر فرم تعریف شده است. با استفاده از CSS، می‌توانید ظاهر فرم را به دلخواه خود تغییر دهید.

جمع بندی

HTML ستون فقرات دنیای وب است. این زبان با وجود سادگی و یادگیری آسان، امکان ساختاردهی، نمایش متن، تصاویر و محتوای چندرسانه‌ای را در صفحات وب فراهم می‌کند. از نسخه اولیه تا HTML5.3، این زبان به‌طور مداوم تکامل یافته و به یکی از پایه‌های اصلی توسعه وب مدرن تبدیل شده است.

اگرچه HTML به تنهایی کافی نیست و برای امکانات پیشرفته باید در کنار CSS و JavaScript استفاده شود، اما بدون آن هیچ وب‌سایتی وجود نخواهد داشت. یادگیری HTML اولین قدم برای ورود به دنیای طراحی و توسعه وب است. برای یادگیری بیشتر، بلاگ آموزش طراحی سایت وب‌رمز را دنبال کنید.

منابع
w3schools