در این قسمت از سری آموزش های html با پردیس وردپرس به طریقه صحیح فارسی نویسی در صفحات وب می پردازیم. معمولا تازه کارها با این بخش مشکلاتی دارند. در این جلسه با استایل های بیشتری که در صفحات وب قابل استفاده هستند آشنا می شویم. ابتدا فارسی نویسی و سپس رنگ های پس زمینه را خواهیم داشت.
فارسی نویسی در html
مراحل فارسی نویسی به صورت زیر می باشد:
- ابتدا کد <“meta charset=”utf-8> را در بین تگ <head></head> قرار می دهیم. این کار باعث می شود تا حروف فارسی توسط مرورگر پردازش شوند.
- با یکی از روش هایی که توضیح خواهیم داد المان های خود را راست چین یا راست به چپ کنید.
راست چین کردن جهت متن
با استفاده از المان direction می توانیم سایر المان ها را راست چین یا چپ چین کنیم. مثال:
- ابتدا تگ دلخواه خود را باز کنید. در این جا ما تگ p را باز می کنیم.
- در مرحله دوم استایل را به تگ اضافه می کنیم.
- خصوصیت direction را به استایل اضافه می کنیم و عبارت rtl را در مقابل آن قرار می دهیم. rtl برای راست چین و ltr برای چپ چین می باشد.
- تگ p را می بندیم.
<p style=”direction:rtl;”>متن</p>
نکته: شما می توانید بدون نوشتن استایل کلمه dir را در کنار المان مورد نظرتان به کار ببرید.
<p dir=”rtl”>متن</p>
راست چین کردن کل صفحه
شما می توانید با استفاده از به کار بردن خاصیت dir در تگ html کل صفحه را راست به چپ کنید. با این کار تمام المان های صفحه راست چین می شود. به مثال زیر توجه کنید.
<!DOCTYPE html>
<html dir="rtl" lang="fa">
<head>
<meta charset="utf-8">
<title>صفحه راست به چپ</title>
</head>
<body>
تمامی المان‌های صفحه به صورت راست به چپ ایجاد می‌شود
</body>
</html>
تغییر رنگ پس زمینه المان ها
تغییر رنگ پس زمینه تقریبا در تمام المان ها امکان پذیر است. یک روش برای تغییر رنگ پس زمینه استفاده از خاصیت background-color در کنار المان است. مثال:
<p style=”background-color:red;”>متن با پس زمینه قرمز</p>
در مثال بعدی رنگ پس زمینه صفحه را به طور کامل خاکستری می کنیم:
<!DOCTYPE html> <html> <head> <title>صفحه با تم خاکستری</title> </head> <body style="background-color: gray"> باقی المان های صفحه در پشت زمینه خاکستری دیده خواهند شد </body> </html>
پایان قسمت نهم