در نهمین قسمت از آموزش HTML، قصد داریم تا سراغ مشکلی که بسیاری از افراد در شروع با آن روبه رو هستند برویم! نوشتن صحیح فارسی در صفحات وب! پس در این جلسه شما را با استایل‌های بیشتری که در صفحه قابل استفاده است آشنا کنیم و همچنین برای نوشتن صحیح فارسی در اچ‌تی‌ام‌ال راه حل‌هایی را به شما ارائه خواهیم کرد. پس با ما همراه باشید.
در ادامه با کافه دوستی همراه باشید.
در این قسمت می‌خواهیم استایل‌های متفاوتی را در صفحه ایجاد نماییم و رنگ و بوی متفاوتی به صفحات HTML خود ببخشیم. اول نوشتن فارسی را آموزش می‌دهیم و سپس سراغ تغییر رنگ پس زمینه در اچ‌تی‌ام‌ال می‌رویم.
فارسی نوشتن در HTML:
مراحل فارسی نویسی به طور خلاصه:
1. ابتدا کد <"meta charset="utf-8> را در بین تگ <head></head> قرار می‌دهیم. این کار باعث می‌شود تا حروف فارسی دیده شوند و انکودینگ صفحه به صورت کامل و صحیح انجام شود.
2. با یکی از روش‌هایی که در این مطلب آموزش خواهیم داد، المان‌های خود را از راست به چپ بنویسید.
حالا در ادامه هر کدام از این مراحل را با جزئیات بیشتری برایتان شرح خواهیم داد.
نوشتن کد meta charset
نکته بسیار مهمی که در هنگام نوشتن فارسی یا عربی دقت داشته باشید که حتما کد <"meta charset="utf-8> را در بین تگ <head></head> قرار دهید. در غیر این صورت حروف شما به صورت ناخوانا و به هم ریخته نمایش داده می‌شوند.
راست به چپ کردن جهت متن:
برای نوشتن فارسی در اچ تی ام ال باید به صفحه بگویید که قصد این کار را دارید. یکی از خصیصه هایی که از آن برای این کار استفاده می‌شود direction است. با کمک این المان شما می‌توانید المان‌های خود را از راست به چپ یا از چپ به راست مرتب کنید.
مرحله اول: ابتدا تگ <p> یا تگ دلخواه را باز می‌کنیم. در این مثال ما باز هم تگ <p> را انتخاب کرده‌ایم.
<p>
مرحله دوم: در مرحله دوم مشخصه استایل style را به تگ <p> اضافه می‌کنیم و بلافاصله بعد از آن " "= قرار می‌دهیم.
<"; " = p style>
مرحله سوم: در این مرحله بین دو " " استایل مورد نظر = direction را انتخاب می‌کنیم. روبروی direction; کلمه 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 را برگزیده‌ایم. دلیل انتخاب این المان را در بخش اول توضیح داده‌ایم. اگر یادتان نمی‌آِید مشکلی نیست، ما یکبار دیگر برایتان مرور می‌کنیم. در واقع این المان تمامی صفحه و هر آنچه در میان آن است را در برمی‌گیرد و همه چیز در زیر چتر او قرار دارد. پس روش مرسوم تغییر رنگ کامل پشت زمینه در یک صفحه استفاده از این المان است.
پیشنهاد می‌کنیم همین حالا دست به کار شوید و خودتان این موضوع را آزمایش کنید.
خلاصه قسمت نهم:
در این قسمت چیزهایی که یادگرفته‌ایم را به صورت کاملا خلاصه مرور می‌کنیم.
- در نهمین قسمت از سری آموزش HTML با نحوه تغییر در استایل صفحه با کمک اتریبیوت استایل آشنا شدیم.
- background-color در تگ Body به شما کمک می‌کند تا رنگ پشت زمینه هر المان اچ تی ام ال را به رنگ دلخواه در بیاوریم. مثلا اگر المان body رنگ بدهیم پشت زمینه کل صفحه به رنگ جدید در می‌آید.
- background-color در مشخصه استایل برای تگ پاراگراف <p> بدان‌ها رنگ دلخواه می‌دهد و نتیجه کد همانند هایلات کردن متن است.
- dir در مشخصه استایل در تگهای متن به کار می‌رود و بدین ترتیب امکان نوشتن از راست به چپ را در کل صفحه فراهم می‌کند.
-
در پاسخ به این سوال که که کدام راه حل برای فارسی نوشتن در وب بهتر است، راستش را بخواهید بهترین راه استفاده از CSS است و توسط غالب مراجع این روش توصیه می‌شود.
امیدواریم که نهمین بخش از آموزش اچ‌تی‌ام‌ال به سبک زومیت که حاصل تلاش وبلاگ کافه دوستی هست، موفق به جلب رضایت شما کافه دوستی عزیز شده باشد. تجربیات، پیشنهادات و نظرات شما بدون شک در ادامه این مقالات آموزشی تاثیر بسزایی خواهد داشت و قدردانی ما را هم به همراه خواهد داشت. پس لطفا با ما در ارتباط باشید. قسمت بعدی پنج شنبه اضافه می شود.
از لینک های آماده شده زیر می توانید به قسمت های قبلی دسترسی داشته باشید.
تایم لپس چیست ؟ طرز کار تصاویر Time Lapse شارژ کردن گوشی با شارژر های مختلف آپدیت جدید تلگرام: بخش استیکرهای محبوب، فضای شخصی نامحدود و موار گلکسی نوت 7 به طور رسمی معرفی شداسکنر عنبیه چشم و 4 گیگابایت حاف جوانسازی پوست فقط در 28 روز !؟ سارقان مسلح از بازی Pokemon Go برای به دام انداختن قربانیان استف عملکرد سنسور عنبیه گلکسی نوت 7 فاش شد این تکنیک آرایشی به سرعت جوش های صورت تان را می پوشاند!!! جرم گرفتن دندان به دلیل 7 خطا