آموزش کدنویسی HTML – صفر تا صد اچ تی ام ال کاملا رایگان + جزوه آموزشی

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

HTML چیست و چرا باید آن را یاد بگیریم؟

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

چرا یادگیری HTML مهم است؟

بنیان وب‌سازی: HTML پایه و اساس طراحی وب است.
درک بهتر وب: با دانستن HTML، می‌توانید بهتر درک کنید که صفحات وب چگونه کار می‌کنند.
سفارشی‌سازی وب‌سایت: می‌توانید وب‌سایت خود را مطابق با سلیقه و نیازهای خود طراحی کنید.
افزایش فرصت‌های شغلی: دانستن HTML به شما کمک می‌کند تا در بازار کار رقابت‌پذیرتر باشید.

ساختار یک صفحه HTML

یک صفحه HTML ساده از سه بخش اصلی تشکیل شده است:

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

مثال یک صفحه HTML ساده:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>اولین صفحه HTML من</title>
</head>
<body>
    <h1>سلام، این اولین صفحه وب من است!</h1>
    <p>این یک پاراگراف است.</p>
</body>
</html>

تگ‌های مهم در HTML

HTML از تگ‌هایی برای تعریف عناصر مختلف در یک صفحه وب استفاده می‌کند. برخی از مهم‌ترین تگ‌ها عبارتند از:

<h1> تا <h6>: برای ایجاد عناوین با سطوح مختلف
<p>: برای ایجاد پاراگراف‌ها
<img>: برای افزودن تصاویر
<a>: برای ایجاد لینک‌ها
<div>: برای ایجاد بخش‌های مختلف در صفحه
<span>: برای اعمال سبک‌های خاص روی بخش‌های کوچک از متن

مثال یک صفحه HTML ساده با توضیح:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحه    نمونه HTML</title>
    <style>
        body {
            font-family: Tahoma, sans-serif;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>سلام به دنیای HTML!</h1>
    <p>این یک پاراگراف نمونه است. در اینجا می توانید متن دلخواه خود را بنویسید.</p>

    <h2>لیست علاقه‌مندی‌ها</h2>
    <ul>
        <li>برنامه‌نویسی</li>
        <li>طراحی وب</li>
        <li>کتاب خواندن</li>
    </ul>

    <h2>جدول اطلاعات شخصی</h2>
    <table>
        <tr>
            <th>نام</th>
            <th>سن</th>
            <th>شهر</th>
        </tr>
        <tr>
            <td>علی</td>
            <td>30</td>
            <td>تهران</td>
        </tr>
    </table>

    <a href="https://www.topgim.com">بازدید از سایت توپگیم</a>

    <img src="image.jpg" alt="تصویر نمونه">

    <form>
        <label for="name">نام:</label>
        <input type="text" id="name" name="name">
        <br>
        <button type="submit">ارسال</button>
    </form>
</body>
</html>

توضیح المان‌ها:

<!DOCTYPE html>: اعلام نوع سند HTML
<html>: ریشه سند HTML
<head>: حاوی اطلاعات متا درباره صفحه
<meta charset=”UTF-8″>: مشخص کردن رمزگذاری کاراکترها
<meta name=”viewport”>: تنظیم نمایش صفحه در دستگاه‌های مختلف
<title>: عنوان صفحه
<style>: تعریف سبک‌های CSS
<body>: محتوای اصلی صفحه
<h1>: عنوان سطح یک
<p>: پاراگراف
<h2>: عنوان سطح دو
<ul>: لیست بدون شماره
<li>: آیتم لیست
<table>: جدول
<tr>: سطر جدول
<th>: سرستون جدول
<td>: سلول داده
<a>: لینک
<img>: تصویر
<form>: فرم
<label>: برچسب برای فیلدهای فرم
<input>: فیلد ورودی
<button>: دکمه

جمع‌بندی

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

آیا سوالی در مورد HTML دارید؟ در بخش نظرات از ما بپرسید.