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

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

فارسی نوشتن در HTML:

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

۱. ابتدا کد   را در بین تگ

قرار می‌دهیم. این کار باعث می‌شود تا حروف فارسی دیده شوند و انکودینگ صفحه به‌صورت کامل و صحیح انجام شود. 

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

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

نوشتن کد 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 است.  بدین ترتیب کل صفحه شما از راست به چپ چیده می‌شود. یعنی با استفاده از این قابلیت، جداول و تمامی المان‌های شما به‌صورت پیش‌فرض از راست به چپ ایجاد می‌شود.

   

    صفحه ای راست به چپ

     

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

   

 شاید الان پیش خودتان بگویید اگر قرار باشد برای نوشتن فارسی در صفحه  برای هر تگ متن از این استایل استفاده کنیم که خیلی سخت می‌شود. حق با شما است! این روشی که ما درحال‌حاضر به شما آموزش داده‌ایم، به 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 را برگزیده‌ایم. دلیل انتخاب این المان را در بخش اول توضیح داده‌ایم. اگر یادتان نمی‌آِید مشکلی نیست، ما یکبار دیگر برایتان مرور می‌کنیم. درواقع این المان تمامی صفحه و هر آنچه در میان آن است را در برمی‌گیرد و همه چیز در زیر چتر او قرار دارد. پس روش مرسوم تغییر رنگ کامل پشت زمینه در یک صفحه استفاده از این المان است. 

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

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

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

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

به این پست امتیاز دهید.
بازدید : 234 views بار دسته بندی : مجله برنامه نویس تاريخ : 2 جولای 2021 به اشتراک بگذارید :
دیدگاه کاربران
    • دیدگاه ارسال شده توسط شما ، پس از تایید توسط مدیران سایت منتشر خواهد شد.
    • دیدگاهی که به غیر از زبان فارسی یا غیر مرتبط با مطلب باشد منتشر نخواهد شد.

برچسب ها