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

سرویس فناوری جوان ایرانی به نقل از زومیت؛ بخش اخبار علم و فناوری:

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

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

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

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

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

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

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

نوشتن کد meta charset

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

راست به چپ کردن جهت متن:

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

مرحله اول: ابتدا تگ <p> یا تگ دلخواه را باز می‌کنیم. در این مثال ما باز هم تگ <p> را انتخاب کرده‌ایم.

<p>

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

<"; " = p style>

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

<p style = " direction: rtl ;" >

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

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

نکته: شما همچنین می‌توانید بدون نوشتن مشخصه Style کلمه dir را به صورت مستقیم هم در کنار نام المان بنویسید. این موضوع در تمامی مرورگرها قابل استفاده است. فقط دقت کنید که بعد از کلمه 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>

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

تغییر رنگ پس زمینه المان:

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

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

مرحله اول: ابتدا تگ <p> یا تگ دلخواه را باز می‌کنیم. در این مثال ما باز هم تگ <p> را انتخاب کرده‌ایم.

<p>

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

<"; " = p style>

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

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

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

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

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

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

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

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

<!DOCTYPE html>

<html>

<head>

<title>صفحه ای با تم قهوه ای</title>

</head>

<body style="background-color: brown">

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

</body>

</html>

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

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

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

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

نوبت شما

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

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

کلمات کلیدی :
نظرات بییندگان :

بهترین مشاغل و خدمات شهر خود را ، در سایت نشونه پیدا کنید.

مشاهده سایت نشونه