ایجاد صفحات فارسی

🎯 اهداف یادگیری

شناخت ساختار پایه HTML
آشنایی با عناصر و صفات اصلی HTML
یادگیری ایجاد صفحات سازگار با زبان فارسی
آشنایی با تگ‌های معنایی HTML5

📌 ساختار پایه یک سند HTML

هر صفحه HTML با ساختار پایه زیر شروع می‌شود:

html

            <!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>
</head>
<body>
    <h1>سند فارسی</h1>
    <p>این یک پاراگراف نمونه است که متن فارسی در آن به درستی راست‌چین شده است.</p>
</body>
</html>

            

امتحان کنید

توضیح اجزای اصلی:

<!DOCTYPE html>: نوع سند را مشخص می‌کند (HTML5)
<html lang="fa">: زبان صفحه را فارسی تعیین می‌کند
<meta charset="UTF-8">: برای نمایش صحیح کاراکترهای فارسی ضروری است
تگ‌های <head> و <body>: به ترتیب برای اطلاعات متا و محتوای صفحه استفاده می‌شوند

📌 عناصر (Elements) و صفات (Attributes) در HTML

هر عنصر HTML از سه بخش اصلی تشکیل شده است:

html

            <tagname attribute="value">محتوا</tagname>

انواع عناصر HTML:

عنصر	توضیح	مثال
عناصر بلوکی	یک خط جدید شروع می‌کنند و تمام عرض را می‌گیرند	<div>, <p>, <h1>-<h6>
عناصر درون‌خطی	درون متن قرار می‌گیرند و خط جدید ایجاد نمی‌کنند	<span>, <a>, <img>
عناصر خالی	محتوایی ندارند و تگ بسته نیاز ندارند	<br>, <img>, <hr>

صفات پرکاربرد HTML:

html

            <a href="https://example.com" target="_blank" title="توضیح لینک">متن لینک</a>
<img src="image.jpg" alt="توضیح تصویر" width="300">
<div class="container" id="main">...</div>

امتحان کنید

href: آدرس مقصد برای لینک‌ها
src: مسیر فایل برای تصاویر و اسکریپت‌ها
alt: متن جایگزین برای تصاویر
class: برای انتخاب عناصر در CSS و JavaScript
id: شناسه منحصر به فرد برای عناصر
style: استایل‌های درون‌خطی CSS

📌 ایجاد صفحات فارسی در HTML

برای پشتیبانی صحیح از زبان فارسی در صفحات وب، باید نکات زیر را رعایت کنید:

۱. تنظیمات اولیه

html

            <!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

            

۲. فونت‌های فارسی

css

            body {
    font-family: "B Nazanin", "B Mitra", "Tahoma", sans-serif;
    line-height: 1.8;
    text-align: right;
    direction: rtl;
}

            

۳. اعداد فارسی

javascript

            function toPersianNumber(enNum) {
    const persianDigits = '۰۱۲۳۴۵۶۷۸۹';
    return enNum.toString().replace(/[0-9]/g, function(w) {
        return persianDigits[w];
    });
}

            

📌 تمرین عملی

صفحه html زیر را برای نمایش فارسی بهینه کنید

html

            
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>عنوان صفحه</title>
</head>
<body>
  <h1>سلام دنیا!</h1>
</body>
</html>

            

📌 قدم بعدی

در درس بعدی با استایل دهی به html آشنا خواهیم شد!

❮ بخش قبلی بخش بعدی ❯