HTML به زبان ساده (قسمت۴: فارسی نویسی و ویژگی های متن) :: V i R u s Ʒ²

V i R u s Ʒ²

هک و امنیت

V i R u s Ʒ²

هک و امنیت

Virus 32

💢 دوستانم بی دفاع و دشمنانم بی جواب نخواهند ماند 💢

-->
آخرین نظرات
  • ۲۹ بهمن ۰۰، ۱۸:۳۹ - امانوئل ویکتور
    رمز

سلام دوستان، در پست قبل، وبمون رو افتتاح کردیم و با برخی ویژگی های متن در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 کار می کنید، کدارو بیشتر درک کرده باشین و لذت بیشتری ببرید و دانشتون کامل تر باشه؛) خوب این بخش رو همینجا تمومش میکنیم، امیدوارم لذت برده باشید. در بخش بعد کار با گرافیک، تصاویر و... آشنا خواهیم شد...


امیدوارم موفق باشید ...


نظر (۹)

آقا دمت گرم، کارت حرف نداره، واقعاً این پستات مثل نون شب واجبه :)
Virus32 Attacker 32 :
سلام عزیز، قربونت، لطف داری.
امیدوارم موفق باشی :)
عالی 
خسته نباشی
Virus32 Attacker 32 :
قربانت، موفق باشی
  • Virus32
  • روح الله عبداللهی
  • دمت گرم
    واقعا ممنونم
    فقط یه چیزی اینو ادامه نمیدین
    Virus32 MR_C0D3R ‌ :
    چرا ادامه داره....
    بزودی....
    فعلا بچه ها یه خرده مشغول کار و شخمن D:
    ادامه بدی حاجی ویروس ;)
    عالییییییی
    Virus32 MR_C0D3R ‌ :
    رو چشش :)
    آقا ویروس شرمنده اگه میشه کار با مبنای هگزادسیمال رو توضیح بده مرسی :)
    Virus32 MR_C0D3R ‌ :
    تو قسمت کار با رنگ ها
    تو مورد سوم بهش اشاره و به خوبی هم توضیح داده شده....
    سلام حاجی همین طوری ادامه بده
    من علاقه مند برنامه نویسی ام

    ممنون
    Virus32 Attacker 32 :
    سلام عزیز، چشم حتماً
    داداش ویروس قسمت 5 کی میاد پس

    Virus32 Attacker 32 :
    سلام عزیز، اینو براتو نوشتم ;)
    مثلا تو ورد خط اول نمیخوای اول صفحه باشه اینتر میزنی خط میاد پایینتر 
    برای html باید چه تگ استفاده کرد؟
    Virus32 Attacker 32 :
    از تگ <br> استفاده می کنیم که انتهایی نداره!  توو همین پست اون بالا  در موردش گفتم و با مثال توضیح دادم دیه...
    مثلا ده تا خط فاصله اونوقت باید ده تا  <br> 
    یا روش دیگه ای هست؟
    Virus32 Attacker 32 :
    باید ده بار از همین تگ استفاده کنی ولی میتونی یه کار دیگه هم بکنی که با استفاده از زبان css یه کد بنویسی که فاصله بین خطوط زیاد شه که برای اینکار در بخش Style باید از کد زیر استفاده  کنی:

    body { 

    line-height: 10px;

    }

    موفق باشی
    ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
    شما میتوانید از این تگهای html استفاده کنید:
    <b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
    تجدید کد امنیتی