آموزش زیبا کردن متن در html

سلام دوستان 

در این مطلب قصد داریم با استفاده از نمونه های ساده و موارد ابتدایی و حرفه ای به شما عزیزان یاد بدیم چطور میتونید یه متن رو زیبا کنید و چگونه با پیوند دادن عناصر یک صفحه به همدیگه یک شاهکار برنامه نویسی و طراحی سایت خلق کنید

پیش از شروع آموزش ایجاد تغییرات در متن سایت مواردی هستند که به طور خلاصه توضیح میدهیم

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

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

فرض را بر آن میگیرم که پس زمینه را رنگ سفید انتخاب کردیم و در آن چند خط متن ساده داریم به شکل زیر:

الّلهُمَّ صَلِّ عَلَی مُحَمَّدٍ وَآلِ مُحَمَّدٍ ذکات علم آموختن آن به دیگران است ، علم و عمل کنار یکدیگر معنا میگیرند. عالم بی عمل مانند زنبور بی عسل است. ارزش هرکس به قدر علم اوست. آموزش زیبا کردن صفحه سایت و متن های آن.

ابتدا یک فونت دلخواه و زیبا انتخاب کنید. فونت های رایج در صفحات وب فونت های تاهما ، نازنین ، Arial و sans-serif هستند که ما در اینجا از Arial استفاده میکنیم. بعد از فونت مهم ترین عامل رنگ و سایز متن میباشد. فونت سایز عمده سایت ها 14px یا 10pt میباشد و بهترین رنگ ها در زمینه سفید نیز رنگ مشکی و یا کمی روشن تر از آن است و ما در اینجا رنگ متن را کمی روشن تر از مشکی ( طوسی ) انتخاب کردیم  با فونت سایز 10pt که حد نرمال متن سایت است.

مثال :

الّلهُمَّ صَلِّ عَلَی مُحَمَّدٍ وَآلِ مُحَمَّدٍ ذکات علم آموختن آن به دیگران است ، علم و عمل کنار یکدیگر معنا میگیرند. عالم بی عمل مانند زنبور بی عسل است. ارزش هرکس به قدر علم اوست. آموزش زیبا کردن صفحه سایت و متن های آن.

بسیار خب توجه کردید که متن حالت رسمی تری به خودش گرفت

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

الّلهُمَّ صَلِّ عَلَی مُحَمَّدٍ وَآلِ مُحَمَّدٍ ذکات علم آموختن آن به دیگران است ، علم و عمل کنار یکدیگر معنا میگیرند. عالم بی عمل مانند زنبور بی عسل است. ارزش هرکس به قدر علم اوست. آموزش زیبا کردن صفحه سایت و متن های آن.

همانطور که میبینید زیبایی خاصی به بخش عربی متن داده شد که البته این مورد برای متون فارسی زیبا نیست و اکثرا برا ی متون عربی استفاده میشود.

حالا میخوایم به متن سایه بدیم و کمی متفاوتش کنیم

برای این کار کافیه در استایل متن مورد نظر از قابلیت text-shadow استفاده کنیم و مقدار ان را برابر با 2px 2px 2px greenقرار بدیم

در مقدار دهی بالا مقدار اول برای تعیین فاصله سایه متن از خود متن نسبت به محور طول متن است یعنی هرچه بیشتر باشد سایه بیشتر به سمت راست و هرچه کمتر باشد سایه بیشتر به سمت چپ میرود و مقدار دوم نیست برای تعیین فاصله ی سایه از خود متن نسبت به محور عرض است یعنی هرچه بیشتر باشد سایه  نسبت به متن  پایین تر میرود هرچه کمتر باشد سایه نسبت به متن بالا تر میرود و مقدار سوم در مقدار دهی بالا نشان دهنده ی میزان blur سایه است که به زبان ساده تر وضوح سایه را تعیین میکند هرچه مقدارش بیشتر باشد وضوح کمتر میشود هرچه کمتر باشد وضوح کمتر میشود و سایه هم با کمو زیاد شدن مقدار blur کوچک و بزرگ میشود و مقدار سوم که معادل کلمه ی green در نظر گرفته شده نیز رنگ سایه را تعیین میکند که میتوانید آن را هر رنگی که دوست داشتید قرار دهید

در قسمتی که متن عربی است استایل به این شکل تنظیم شده است:

style="font:Arial: text-shadow:2px 2px 2px green;"

در قسمتی که متن فارسی است استایل به این شکل تنظیم شده است:

style="font: Arial; text-shadow:1px 1px 15px purple;"

در متن زیر نمونه ای از تغییراتی که گفتیم را میبینید.

الّلهُمَّ صَلِّ عَلَی مُحَمَّدٍ وَآلِ مُحَمَّدٍ ذکات علم آموختن آن به دیگران است ، علم و عمل کنار یکدیگر معنا میگیرند. عالم بی عمل مانند زنبور بی عسل است. ارزش هرکس به قدر علم اوست. آموزش زیبا کردن صفحه سایت و متن های آن.

بسیار خوب دوستان امیدوارم آموزش زیبا کردن متن در html براتون مفید واقع شده باشه و ازش استفاده کنید تا آموزش بعدی بدرود

چگونه یک div را در وسط صفحه قرار دهیم؟ + آموزش کار با div

در برنامه نویسی html برای استایل دهی به div ها نکات بسیار زیادی وجود دارد که حین کار با دیو ها به آن ها برمیخورید و اگر آن نکات را ندانید باعث ازبین رفتن ظرافت کار شما میشود یکی از رایج ترین نکات که تمام برنامه نویسان وب به آن میخورند مشکل وسط قرار دادن یک div است که برای برنامه نویسان با تجربه کار بسیار ساده و پیش پا افتاده ای نیز هست.

برای وسط قرار دادن یک دیو ( div ) کافیه مقدار margin اون رو برابر با 0 و auto  قرار بدید به شکل زیر

<html>     <div style="margin: 0 auto; width:200px; background:aqua;">         <p>این متن دقیقا در وسط صفحه قرار گرفته</p>     </div> </html>

درنمونه کد بالا شما شما فقط قسمت ( margin:0 auto ) را برای قراردادن یک دیو در وسط نیاز دارید باقی کد ها برای پویا نمایی دیو بود و البته ناگفته نماند اگر به دیو خودتون اندازه تعیین نکنید دیو شما در وسط قرار نخواهد گرفت.