سلام دوستان، در پست قبل، وبمون رو افتتاح کردیم و با برخی ویژگی های متن درHtml آشنا شدیم. ولی اگه با کدا کار کرده باشین، شاید متوجه شده باشید که اگه متن فارسی رو در زبان html بنویسید، ازش پشتیبانی نمیکنه و بهم میریزه. توو این پست علاوه بر اینکه یاد میگیریم که چطور در Html متون فارسی بنویسیم، با ویژگی های دیگر متن، مانند: سایز متن ، نوع فونت ، رنگ متن و رنگ پس زمینه وب و... آشنا خواهید شد...
فارسی نویسی در html :
کدهای لازم که در پست های قبل یاد گرفتید رو پیاده کنید و به جای متن انگلیسی، متن فارسی بنویسید. مثلاً:
<!DOCTYPE HTML>
<HTML>
<Head>
<title> Virus32 </title>
</Head>
<body>
<p><b> سلام </b></p>
<p><u> من مزاحم۳۲ هستم </u></p>
<p><i> امیدوارم حالتون خوب باشه </i></p>
<p><b><u><i> آرزومندم که این زبان و همه ی زبان های برنامه نویسی رو یاد بگیرید.</i></u></b></p>
</body>
</HTML>
حالا Save رو بزنید. توجه! : وقتی این ارور رو دیدید، Cancel رو بزنید.
وقتی با پنجره مقابل روبه رو شدید، کادر Encoding: رو به UTF-8 تغییر بدید تا از فارسی هم پشتیانی کنه، حالا Save کنید. و وب رو مشاهده کنید.
خروجی وب:
خوب اینم از فارسی نویسی با Html
کار با ویژگی های متن در html:
اولین نکته ای که دوست دارم بگم، اینه که، تگ <br> یک خط فاصله ایجاد میکنه، (مثل کلید اینتر توو Word و...)
و تگ <br> دیگه تگ انتهایی نداره و بین دو پاراگراف میتونین به تنهایی قرارش بدین!
مثلاً من میخوام بین دو پاراگراف Virus32 و Attacker32 فاصله ایجاد کنم:
<p> Virus32 </p><br>
<p>Attacker32 </p>
حالا میریم سراغ، چینش متن ها. برای چب چین یا راست چین و یا وسط چین کردن متن، هم میتونیم از زبان Css کمک بگیریم و هم با html بنویسیم. البته خیلی از کارها رو میشه با Css هم انجام داد، اما ما قراره اول با Html کارکنیم بعد بریم سراغ Css.
برای راست چین کردن از کد align استفاده می کنیم، برای این کار در بین تگ <p> کد align="Right" رو مینویسیم،
که میشه:
<p align="Right"> ویروس32 </p>
برای وسط چین کردن از خاصیت Center استفاده می کنیم، که میشه:
<p align="Center"> ویروس32 </p>
برای چب چین کردن از خاصیت Left استفاده می کنیم، که میشه:
<p align="Left"> ویروس32 </p>
حالا میریم سراغ سایز فونت، برای تغییر سایز فونت در تگ font از خاصیت Size استفاده می کنیم. اول اینکه مقدار مطلق سایز فونت باید بین 1 تا 7+ باشد. مثلاً میخوایم سایز فونت متن بالا رو بکنیم 7 ، ( سایز برحسب پیکسل px ) برای اینکار کد زیر رو می نویسیم.
توجه: تگ Font هم مانند تگ های قبل، تگ انتهایی داره که باید جای مناسبی بسته بشه:
<p align="Left"><font size="7"> ویروس32 </font></p>
خوب حالا نوبت نوع فونت هست، برای انتخاب نوع فونت از خاصیت face استفاده کنیم. مثلاً میخوایم نوع فونت متن بالا رو به فونت Tahoma تغییر بدیم، برای اینکار از کد زیر استفاده می کنیم.
<p align="Left"><font size="7", face="tahoma"> ویروس32 </font></p>
توجه: هرموقع میخواین در یک تگ، از دو یا چند خاصیت استفاده کنید، برای منظم بودن و راحتی کار ، بین هر خاصیت علامت , بزارید.
مثل بالا که بین خاصیت face و size از , استفاده کردیم.
خوب، حالا نوبت رنگ و لعابه :) میخوایم رنگ متن بالا رو قرمز کنیم، پس خوب به نکات پایین توجه کنید.
اول اینو بگم که برای رنگ دادن متن، در تگ Font باید از خاصیت Color استفاده کنیم.
برای تعیین رنگ ما میتوانیم از سه روش استفاده کنیم:
1- نوشتن نام رنگ: برای اینکار ما میتوانیم از 16 رنگ استاندارد زیر استفاده کنیم:
Black – Silver – Gray – White – Blue – Red – Green – Yellow – Maroon – Navy – Fushia – Lime – Olive – Teal – Aqua - Purple
2- استفاده از تابع RGB: این تابع به ترتیب به سه رنگ،" قرمز- سبز- آبی " مقداردهی می شود که یا از اعداد صحیح و یا درصد استفاده می شود،
(اعداد صحیح از صفر تا 255 معادل %100 می باشد). RGB(100%,0%,0%) یا RGB(255,0,0)
3- استفاده از مبنای هگزادسیمال (16) رنگ ها: در این روش برای تعیین رنگ ها، نیز از ترکیب سه رنگ،" قرمز- سبز- آبی " استفاده می شود. که حالت کلی آن به این صورت است: #000000 بعد از
علامت # از 6 رقم استفاده می کنیم، که دو رقم اول میزان قرمزی رنگ و دو رقم دوم میزان سبزی رنگ و
دو رقم سوم میزان آبی بودن رنگ را مشخص می کند. میتوانید از حروف A تا F هم استفاده کنید. که ما در کد پایین، میزان سبز و آبی بودن متن را برابر صفر قرار دادیم و میزان قرمز بودن را برابر dd قرار دادیم.
برای مثال، سه روش قرمز کردن متن بالا به صورت زیر است:
1- از روش نوشتن نام رنگ استفاده کنیم:
<p align="Left"><font size="7", face="tahoma", color="Red"> ویروس32 </font></p>
2- از روش تابع RGB استفاده کنیم:
<p align="Left"><font size="7", face="tahoma", color="RGB(100,00,00)"> ویروس32 </font></p>
3- از روش هگزا دسیمال استفاده کنیم:
<p align="Left"><font size="7", face="tahoma", color="#dd0000"> ویروس32 </font></p>
من خودم روش هگزا دسیمال رو بیشتر دوست دارم و بیشتر ازش استفاده میکنم. به شما هم همین روش رو پیشنهاد میکنم.
رنگ پس زمینه وب:
اگه شما هم از پس زمینه سفید وب خسته شدید، میتوانید رنگ اونو با یه تکه کد تغییرش بدید! خوب به نظر من اولین کدی که در تگ body قرار میدید، رنگ پس زمینه و اینا باشه، چون نظم بهتری بهش میده :) خوب برای تغییر رنگ پس زمینه وب، کد زیر رو در تگ body اضافه کنید...
که با کد زیر رنگش مشکی میشه:
<body bgcolor="Black">
یا (به روش هگزا دسیمال (فرقی نداره)):
<body bgcolor="#000000">
خوب، داریم کم کم پیشرفت میکنیم، و الان قادریم تا یه وب متنی با فونت و سایز و رنگ و ویژگی های دیگه... بنویسیم.
عجله نکنید، با همین کد ها کار کنید و باهاشون بازی کنید تا خوب اونا رو درک کنید، همونطور که دیدین، html زبان آسونیه :) ما تا اینجا میتونیم با متون صفحات زیبایی رو درحد خودمون درست کنیم. مثلاً من با همین کد هایی که یاد گرفتیم، یه صفحه برا خودمون درست کردم،
کد زیر رو تست کنید:)
<!DOCTYPE HTML><HTML>
<Head>
<title> Virus32 </title>
</Head>
<Body>
<body bgcolor="#(000000)">
<p align="right"><font size="4", face="tahoma", color="#(00dd00)"><b> ...به نام خدا </b> </font></p>
<p align="center"><font size="6", face="Arial", color="#(aa0000)"> World FamouS! </font><font size="7", face="Arial", color="#(ff0000)"><b> Virus 32 </b></font><font size="6", face="Arial", color="#(aa0000)"> WaS HeRe.</font></p>
<p align="center"><font size="4", face="tahoma", color="#(000006)"><b> .................................................................................. </b> </font></p>
<p align="center"><font size="5", face="tahoma", color="White"> Web:</font><font size="6", face="Arial", color="Lime "> Virus32.blog.ir </font></p>
<p align="center"><font size="5", face="tahoma", color="White"> Gmail:</font><font size="6", face="Arial", color="#(006000)"> Virus.32bat@gmail.com </font></p>
<p align="center"><font size="4", face="tahoma", color="#(000006)"><b> .................................................................................. </b> </font></p>
<p align="center"><font size="5", face="tahoma", color="#(ffccdd)"><b> gonbad-a-kabooos chBct <b></font></p>
<p align="center"><font size="3", face="tahoma", color="#(102030)"><b> Copyright 2019 <b></font></p>
<p align="center"><font size="6", face="tahoma", color="#(102030)"><b> :) <b></font></p>
</Body>
</HTML>
(اگه حال ندارین تستش کنین:) اینم عکسی از خروجی شه:
البته این نکته رو هم میگم که وقتی css رو یاد بگیریم، به بعضی از کارهامون میخندیم، ولی چون میخوام اول html رو خوب فرا بگیرید تا وقتی با css کار می کنید، کدارو بیشتر درک کرده باشین و لذت بیشتری ببرید و دانشتون کامل تر باشه؛) خوب این بخش رو همینجا تمومش میکنیم، امیدوارم لذت برده باشید. در بخش بعد کار با گرافیک، تصاویر و... آشنا خواهیم شد...
امیدوارم موفق باشید ...
Attacker 32 :
MR_C0D3R :