تنظیم صفحات فارسی در حوزه های مختلف نرم افزار همواره مشکلات همه بوده است.
صفحاتی که دارای محتوای فارسی می باشند نیاز به چیدمان خاصی از لحاظ ترازبندی متن و … دارند که باید قبل از شروع ساخت صفحات به آنها اهمیت داده شود.
حتما قبل از بررسی حروف فارسی در HTML نوشته ی مطالب قبلی این دوره ی آموزشی را با هشتگ #دوره_آموزشی_HTML در سایت ما را مطالعه کنید.
متاتگ ut8-8 در صفحات فارسی :
یکی از اولین مسائلی که نیاز به رعایت آن دارید متاتگ utf-8 در صفحات فارسی شما می باشد.
البته این بخش در جلسه ی پنجم این دوره ارائه شده است که از توضیح مجدد آن خودداری می کنیم.
جلسه پنجم دوره آموزشی HTML : حروف فارسی در اچ تی ام ال
راست چین کردن متن ها :
همانطور که همه می دانیم متن هایی که به زبان فارسی هستند از راست شروع خواهند شد پس باید قبل از نوشتن متون ابتدا اقدام به راست چین کردن آنها کرد؛
برای راست چین کردن متن ها در HTML به روش زیر عمل می کنیم:
<p dir="rtl">متن فارسی برای تست</p>
در کد بالا همانطور که مشاهده می کنید با استفاده از خصیصه ی dir ( مخفف عبارت direction که به معنی جهت می باشد ) متن داخل پاراگراف راست چین می شود.
یعنی نوشته ی شما از سمت راست شروع و تا جایی که محدوده ی آن است به سمت چپ پر شده و سپس به خط بعد خواهد رفت.
نکته : مقدار rtl که در خصیصه ی dir است مخفف عبارت right to left می باشد؛
البته متضاد این عبارت ltr یا left to right می باشد.
نکته : البته اینکار با استفاده از css هم امکان پذیر می باشد اما به علت اینکه این دوره آموزش html می باشد از بررسی راه حل راست چین کردن متن های فارسی در css پرهیز خواهیم کرد.
راست چین کردن کل محتوای صفحه ی فارسی :
همانطور که در بالا بیان شد شما توانستید محتوای داخل یک پاراگراف را راست به چپ کنید.
اما زمانی که کل صفحه باید راست چین باشد به صرفه نیست برای هر تگ خصیصه ی dir استفاده شود زیرا این عملیات زمانبر می شود و حجم صفحات را هم افزایش خواهد شد. ( افزونگی کدها )
برای اینکه کل صفحه به یکباره راست چین شود به شکل زیر عمل کنید:
<!DOCTYPE html>
<html dir="rtl" lang="fa">
<head>
<meta charset="utf-8">
<title>صفحه ی فارسی راست چین شده</title>
</head>
<body>
<p>پاراگراف راست چین می باشد</p>
.
.
.
تمامی محتوای این صفحه ی به صورت راست به چپ نمایان خواهد شد
</body>
</html>
راست چین کردن صفحات با استفاده از خصیصه های تگ html انجام شده است که در خط دوم قطعه کد بالا مشاهده می کنید.
در بالا نقش خاصیت dir را که در تنظیم صفحات فارسی بسیار مهم است مشاهده کردید.
خب این جلسه به پایان رسید اما دو بخش کوچک هم در این دوره باید اضافه می شد که از ذکر آنها به عنوان یک جلسه پرهیز می کنیم.
با این حال می توانید به راحتی از این دوره لذت ببرید.
رنگ صفحات در اچ تی ام ال :
گاهی اوقات شما نیاز به تغییر رنگ صفحه ی اچ تی ام ال خود را دارید تا کمی جذاب تر شوند؛
البته معمولا تغییرات دیداری و … در اچ تی ام ال انجام نخواهد شد و به css منتقل خواهد شد اما لازم دانستیم که کمی در این باره توضیح دهیم.
برای تغییر رنگ صفحه به شکل زیر عمل می کنیم:
<!DOCTYPE html>
<html dir="rtl" lang="fa">
<head>
<meta charset="utf-8">
<title>صفحه ی آبی رنگ</title>
</head>
<body style="background-color:blue;">
رنگ صفحه به آبی خواهد شد.
</body>
</html>
شاید بگویید صفحه ی آبی رنگ که زیبا نیست ولی این رنگ متغیر است و از رنگ های دیگر هم می توانید استفاده کنید.
ایجاد کامنت در بین کدها :
در تمامی زبان های برنامه نویسی و نشانه گذاری و … معمولا افرادی که دست به کدنویسی می کنند.
بین کدهای خود کامنت هایی می گذارند تا خوانایی کدهایی آنها بالا برود و یا زمانی که مدتی آن کدها را کنار گذاشتند و دوباره قصد ادامه داشتند با مشکل عدم فهم کدهای خود مواجه نشوند.
در html هم می توانید در بین کدهای خود کامنت گذاری کنید. برای اضافه کردن کامنت در html به شکل زیر عمل کنید:
<!DOCTYPE html>
<html dir="rtl" lang="fa">
<head>
<meta charset="utf-8">
<title>صفحه ی فارسی راست چین شده</title>
</head>
<body>
<!-- کامنت در اچ تی ام ال -->
</body>
</html>
نکته : کامنت ها در محتوای صفحات به کاربر نمایش داده نمی شوند ولی در بخش view source صفحات قابل مشاهده هستند.
از این رو تنها در زمانی که صفحات خود را در حال طراحی هستید کامنت ها نگه داری کنید و در زمانی که قصد انتقال آن صفحه در شبکه ی اینترنت را دارید کامنت ها را حذف کنید.
امیدوارم از این جلسه بهره ی کافی ببرید؛
در صورت وجود هرگونه سوال یا ابهام در ارتباط با تنظیم صفحات فارسی در اچ تی ام ال از بخش نظرات این نوشته با ما در تعامل باشید.
موفق و پیروز باشید.