آموزش HTML - بخش نهم: نوشتن فارسی در اچ تی ام ال

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

مراحل فارسی نویسی به‌طور خلاصه: 

۱. ابتدا کد  <"meta charset="utf-8> را در بین تگ قرار می‌دهیم. این کار باعث می‌شود تا حروف فارسی دیده شوند و انکودینگ صفحه به‌صورت کامل و صحیح انجام شود. 

۲. با یکی از روش‌هایی که در این مطلب آموزش خواهیم داد، المان‌های خود را از راست به چپ بنویسید. 

حالا در ادامه هر کدام از این مراحل را با جزئیات بیشتری برایتان شرح خواهیم داد. 

نوشتن کد meta charset

نکته بسیار مهمی که در هنگام نوشتن فارسی یا عربی دقت داشته باشید که حتما کد <"meta charset="utf-8> را در بین تگ  قرار دهید. در غیر این صورت حروف شما به‌صورت ناخوانا و به هم ریخته نمایش داده می‌شوند.

برای نوشتن فارسی در اچ تی ام ال باید به صفحه بگویید که قصد این کار را دارید. یکی از خصیصه هایی که از آن برای این کار استفاده می‌شود direction است. با کمک این المان شما می‌توانید المان‌های خود را از راست به چپ یا از چپ به راست مرتب کنید. 

مرحله اول: ابتدا تگ

یا تگ دلخواه را باز می‌کنیم. در این مثال ما باز هم تگ  را انتخاب کرده‌ایم.

<p>

مرحله دوم: در مرحله دوم مشخصه استایل style را به تگ  اضافه می‌کنیم و بلافاصله بعد از آن " "=  قرار می‌دهیم.

<";    "  =   p style>

مرحله سوم: در این مرحله بین دو " " استایل مدنظر  = direction را انتخاب می‌کنیم. روبروی direction; کلمه rtl برای نوشتن از راست به چپ (فارسی و عربی ) و ltr (انگلیسی و ...) برای نوشتن از چپ به راست را درج می‌کنیم.

<p style = " direction: rtl   ;" >

مرحله پایانی: تگ را می‌بندیم.

  style= "direction: rtl; ">متن از راست به چپ نوشته می‌شود 

نکته: شما همچنین می‌توانید بدون نوشتن مشخصه Style کلمه dir را به‌صورت مستقیم هم درکنار نام المان بنویسید. این موضوع در تمامی مرورگرها قابل استفاده است. فقط دقت کنید که بعد از کلمه dir، علامت مساوی و دابل کوتیشن (""=) قرار دارد. این در حالی است که شیوه نوشتن استایل متفاوت است.

 dir = "rtl" >متن از راست به چپ نوشته می‌شود 

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

    </span>صفحه ای راست به چپ<span style="color: #99cc00;">

تمامی المان‌های صفحه به‌صورت راست به چپ ایجاد می‌شود

 شاید الان پیش خودتان بگویید اگر قرار باشد برای نوشتن فارسی در صفحه  برای هر تگ متن از این استایل استفاده کنیم که خیلی سخت می‌شود. حق با شما است! این روشی که ما درحال‌حاضر به شما آموزش داده‌ایم، به inline CSS مشهور است.(پس چند خطی هم CSS یادگرفته‌اید!) اما CSS قابلیت‌های دیگری دارد که تمامی کارهای شما را بسیار آسان می‌کند و مشکلات شما را از این بابت برطرف خواهد کرد. پس برای راحت شدن از این دوباره کاری‌ها، منتظر شروع دوره CSS بمانید.

تغییر رنگ پس‌زمینه تقریبا در تمامی المان‌های اچ تی ام ال, از متن گرفته تا جداول و... امکان‌پذیر است. یک راه برای تغییر رنگ پس‌زمینه استفاده از کلمه background-color درکنار المان است. بدین ترتیب که کلمه background-color را درکنار حرف المان در تگ شروع می‌نویسیم  و در مقابل آن رنگ مورد نظرمان را بین دو علامت " " قرار می‌دهیم. اما ما قصد داریم به‌جای این کار, همانند قبل از المان Style استفاده کنیم. پس با ما همراه شوید.

به‌عنوان مثال برای تغییر رنگ پس‌زمینه المان p در صفحه زیر این گونه می نویسیم:

مرحله اول: ابتدا تگ

یا تگ دلخواه را باز می‌کنیم. در این مثال ما باز هم تگ  را انتخاب کرده‌ایم.

<p>

مرحله دوم: در مرحله دوم مشخصه استایل style را به تگ  اضافه می‌کنیم و بلافاصله بعد از آن " "=  قرار می‌دهیم.

<";    "  =   p style>

مرحله سوم: در این مرحله بین دو " " استایل مدنظر, یعنی background-color را انتخاب می‌کنیم. روبروی background-color نام یا رنگ کد مدنظر خود را قرار می‌دهیم.

 "رنگ مدنظر به‌صورت کد یا اسم"= background-color 

مرحله پایانی: تگ

را می‌بندیم.

 style="background-color: red;">متن با پشت زمینه قرمز

در صورت استفاده از این استایل, متن شما با رنگ پشت زمینه قرمز دیده خواهد شد. 

متن با رنگ پشت زمینه قرمز به نمایش در آمده است.

مثال دوم: در مثال بعدی می‌خواهیم که رنگ پس‌زمینه صفحه را به‌طور کامل به رنگ قهوه‌ای در بیاوریم.

ازآنجاکه این کار نیز مشابه المان‌های دیگر است، مثال آن را برایتان قرار داده‌ایم و از توضیح بیشتر خودداری کرده‌ایم! چرا که دوست داریم خودتان روش آن را کشف کنید و با ما در میان بگذارید!

صفحه ای با تم قهوه ای

 style="background-color: brown">

باقی المان های صفحه در پشت زمینه قهوه‌ای دیده خواهند شد.

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

پیشنهاد می‌کنیم همین حالا دست به کار شوید و خودتان این موضوع را آزمایش کنید.

خلاصه قسمت نهم:

در این قسمت چیزهایی که یادگرفته‌ایم را به‌صورت کاملا خلاصه مرور می‌کنیم.

• در نهمین قسمت از سری آموزش HTML  با نحوه تغییر در استایل صفحه با کمک اتریبیوت استایل آشنا شدیم.
•  background-color در تگ Body به شما کمک می‌کند تا رنگ پشت زمینه هر المان اچ تی ام ال را به رنگ دلخواه در بیاوریم. مثلا اگر المان body رنگ بدهیم پشت زمینه کل صفحه به رنگ جدید در می‌آید. 
•  background-color در مشخصه استایل برای تگ پاراگراف بدان‌ها رنگ دلخواه می‌دهد و نتیجه کد همانند هایلات کردن متن است. 
• dir در مشخصه استایل در تگ‌های متن به کار می‌رود و بدین ترتیب امکان نوشتن از راست به چپ را در کل صفحه فراهم می‌کند.
• در پاسخ به این سؤال که که کدام راه‌حل برای فارسی نوشتن در وب بهتر است، راستش را بخواهید بهترین راه استفاده از CSS است و توسط غالب مراجع این روش توصیه می‌شود. 

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