تنظیم صفحات فارسی
تنظیم صفحات فارسی در حوزههای مختلف نرمافزار همواره مشکلات همه بوده است. صفحاتی که دارای محتوای فارسی هستند نیاز به چیدمان خاصی از لحاظ ترازبندی متن و … دارند که باید قبل از شروع ساخت صفحات به آنها اهمیت داده شود.
حتما قبل از بررسی حروف فارسی در HTML نوشتهی مطالب قبلی این دورهی آموزشی را با هشتگ #دوره_آموزشی_HTML در سایت ما را مطالعه کنید.
تنظیم صفحات فارسی در اچتیامال
متاتگ ut8-8 در صفحات فارسی
یکی از اولین مسائلی که نیاز به رعایت آن دارید متاتگ utf-8 در صفحات فارسی شما است. البته این بخش در جلسهی پنجم این دوره ارائه شده است که از توضیح مجدد آن خودداری میکنیم.
راست چین کردن متن ها
همانطور که همه میدانیم متن2هایی که به زبان فارسی هستند از راست شروع خواهند شد پس باید قبل از نوشتن متون ابتدا اقدام به راست چین کردن آنها کرد؛ برای راست چین کردن متنها در 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 هم میتوانید در بین کدهای خود کامنت گذاری کنید. برای اضافه کردن کامنت در اچتیامال به شکل زیر عمل کنید:
<!DOCTYPE html> <html dir="rtl" lang="fa"> <head> <meta charset="utf-8"> <title>صفحه ی فارسی راست چین شده</title> </head> <body> <!-- کامنت در اچ تی ام ال --> </body> </html>
نکته: کامنتها در محتوای صفحات به کاربر نمایش داده نمیشوند ولی در بخش view source صفحات قابل مشاهده هستند. از این رو تنها در زمانی که صفحات خود را در حال طراحی هستید کامنتها نگه داری کنید و در زمانی که قصد انتقال آن صفحه در شبکهی اینترنت را دارید کامنتها را حذف کنید.
امیدوارم از این جلسه بهرهی کافی ببرید.
ممنون از مطلبتون اگه بخوایم در متن فارسی از تگ های strong و em و… استفاده کنیم باید چه کار کنیم؟ چون کلا پاراگراف همه چیش بهم میریزه وقتی وسط مثلا تگ یک کلمه رو بخوایم کنیم
احتمالا مشکلتون با ادیتورهاست وگرنه در حالت کلی گذاشتن تگ ها مشکلی نداره
از نرمافزارهایی مثل notepad++ یا vscode برای نوشتن کدها استفاده کنید
سایت خیلی خوبی دارید
امیدوارم موفق باشید
متشکریم که ما را انتخاب کردید
فرستادم خدمتتان
هنوز چیزی دریافت نشده لطفا مجددا بررسی کنید.
دوباره فرستادم خدمتتان
چیزی دریافت نشده.
پس ایمیل لطف کنید
info[at]camelcase.ir
با عرض سلام بنده یه قطعه کد نوشتم با Html,css,js این رو همین جوری در مرورگر خروجی میگیرم
درست نمایش میده
اما وقتی در وردپرس اجرا می کنم المان های برعکس میشود
چه طور بگم
تصاویر و نوشته های سمت چپ به راست میاد و بلعکس
کد کلا به هم می ریزه
خواهش میکنم راهنمایی کنید ؟؟؟
با سپاس
لطفا کد خودتون رو برای ما از بخش تماس با ما ارسال کنید.