آموزش برنامه نویسی زبان های مختلف

آموزش برنامه نویسی HTML – قسمت ۵

banner
آموزش برنامه نویسی HTML – قسمت ۵
امتیاز دهی!

در آموزش قبل با با تگ های عنوان و سرفصل و پاراگراف و همچنین طریقه تنظیم جهت نوشتار آشنا شدیم. در این آموزش قصد داریم طریقه کار کردن با تگ فونت و انواع رنگ و اندازه متن را توضیح داده و به کار ببریم .
در HTML تگی به نام Font وجود دارد که به تنهایی هیچ کاربردی ندارد بلکه با عناصر آن معنا پیدا میکند، فرم کلی تگ به شکل <font> و </font> است.
۱
<font>این متن من است</font>
  این متن من است
همانطور که مشاهده میکنید تگ فونت به تنهایی هیچ تغییری را بر روی متن اعمال نمیکند بنابراین به سراغ عناصر می رویم :
درون تگ فونت عنصر Size قرار می گیرد که به وسیله آن میتوانیم اندازه متن را مشخص کرده و متن را به اندازه دلخواه در آوریم، مانند :
۱
۲
۳
۴
۵
۶
۷
۸
۹
<font size=“+4”>این متن من است</font>
<font size=“+3”>این متن من است</font>
<font size=“+2”>این متن من است</font>
<font size=“+1”>این متن من است</font>
<font size=“-1”>این متن من است</font>

این متن من است

این متن من است

این متن من است

این متن من است

این روش یک روش متفاوت با تگ H1 تا H6 می باشد که امروزه ۹۹ % افراد برای تعیین اندازه از کدهای CSS استفاده میکنند که در آموزش های بعد به آن موضوع می پردازیم.
و اما رنگ …
جهت تعیین رنگ متن درون تگ فونت از عنصر Color به همان معنای کلمه رنگ استفاده میکنیم .
که به سه روش رنگ ها در HTML و همچنین در CSS تعیین می گردند:
  • استفاده از نام رنگ مانند Black , Red که در کل از ۱۴۷ نام رنگ تعریف شده در CSS و Html استفاده می شود.
  • استفاده از کد ترکیبی (عدد دهدهی) در این روش از کد رنگ به صورت (rgb(r,g,b است که r و g و b به ترتیب شدت رنگ های قرمز ، سبز و آبی را نشان می دهند و که هر کدام مقادیری بین ۰ تا ۲۵۵ را می توانند بپذیرند و هر چه عدد انتخاب شده بیشتر باشد شدت آن رنگ در ترکیب قرمز سبز آبی رنگ بیشتر است .
  • استفاده از کد ترکیبی (عدد مبنای ۱۶) در این روش که بدلیل کوتاه و ساده بودن کد رنگ بیشترین استفاده رو داره رنگ به صورت rrggbb# نشان داده می شود و تنها تفاوت آن با روش قبل استفاده از اعداد مبنای ۱۶ (HexaDecimal) به جای اعداد دهدهی است . که rr و gg و bb به ترتیب مقدار عددی شدت رنگ های قرمز ، سبز و آبی رو نشون میده و مقادیر هگزادسیمال بین ۰۰ تا FF که معادل همون ۰ تا ۲۵۵ دهدهی هست رو میتونه بگیره .
قاعدتاً استفاده از روش اول باعث ایجاد محدودیت ۱۴۷ رنگی و است و همچنین به خاطر سپردن ۱۴۷ نام رنگ کار سختی است، استفاده از روش دوم سخت است ولی روش سوم بهترین روش قابل استفاده است زیرا شما به راحتی میتوانید کد رنگ را از طریق نرم افزار های مختلف و Color picker ها بدست بیاورید.
جدول زیر نشان دهنده نام رنگ ها و کد هگزادسیمال و همچنین کد آر-جی-بی رنگ ها می باشد.
ColornameHEXRGB
AliceBlueF0F8FF۲۴۰,۲۴۸,۲۵۵
AntiqueWhiteFAEBD7۲۵۰,۲۳۵,۲۱۵
Aqua۰۰FFFF۰,۲۵۵,۲۵۵
Aquamarine۷FFFD4۱۲۷,۲۵۵,۲۱۲
AzureF0FFFF۲۴۰,۲۵۵,۲۵۵
BeigeF5F5DC۲۴۵,۲۴۵,۲۲۰
BisqueFFE4C4۲۵۵,۲۲۸,۱۹۶
Black۰۰۰۰۰۰۰,۰,۰
BlanchedAlmondFFEBCD۲۵۵,۲۳۵,۲۰۵
Blue۰۰۰۰FF۰,۰,۲۵۵
BlueViolet۸A2BE2۱۳۸,۴۳,۲۲۶
BrownA52A2A۱۶۵,۴۲,۴۲
BurlyWoodDEB887۲۲۲,۱۸۴,۱۳۵
CadetBlue۵F9EA0۹۵,۱۵۸,۱۶۰
Chartreuse۷FFF00۱۲۷,۲۵۵,۰
ChocolateD2691E۲۱۰,۱۰۵,۳۰
CoralFF7F50۲۵۵,۱۲۷,۸۰
CornflowerBlue۶۴۹۵ED۱۰۰,۱۴۹,۲۳۷
CornsilkFFF8DC۲۵۵,۲۴۸,۲۲۰
CrimsonDC143C۲۲۰,۲۰,۶۰
Cyan۰۰FFFF۰,۲۵۵,۲۵۵
DarkBlue۰۰۰۰۸B۰,۰,۱۳۹
DarkCyan۰۰۸B8B۰,۱۳۹,۱۳۹
DarkGoldenRodB8860B۱۸۴,۱۳۴,۱۱
DarkGrayA9A9A9۱۶۹,۱۶۹,۱۶۹
DarkGreen۰۰۶۴۰۰۰,۱۰۰,۰
DarkKhakiBDB76B۱۸۹,۱۸۳,۱۰۷
DarkMagenta۸B008B۱۳۹,۰,۱۳۹
DarkOliveGreen۵۵۶B2F۸۵,۱۰۷,۴۷
DarkOrangeFF8C00۲۵۵,۱۴۰,۰
DarkOrchid۹۹۳۲CC۱۵۳,۵۰,۲۰۴
DarkRed۸B0000۱۳۹,۰,۰
DarkSalmonE9967A۲۳۳,۱۵۰,۱۲۲
DarkSeaGreen۸FBC8F۱۴۳,۱۸۸,۱۴۳
DarkSlateBlue۴۸۳D8B۷۲,۶۱,۱۳۹
DarkSlateGray۲F4F4F۴۷,۷۹,۷۹
DarkTurquoise۰۰CED1۰,۲۰۶,۲۰۹
DarkViolet۹۴۰۰D3۱۴۸,۰,۲۱۱
DeepPinkFF1493۲۵۵,۲۰,۱۴۷
DeepSkyBlue۰۰BFFF۰,۱۹۱,۲۵۵
DimGray۶۹۶۹۶۹۱۰۵,۱۰۵,۱۰۵
DodgerBlue۱E90FF۳۰,۱۴۴,۲۵۵
FireBrickB22222۱۷۸,۳۴,۳۴
FloralWhiteFFFAF0۲۵۵,۲۵۰,۲۴۰
ForestGreen۲۲۸B22۳۴,۱۳۹,۳۴
FuchsiaFF00FF۲۵۵,۰,۲۵۵
GainsboroDCDCDC۲۲۰,۲۲۰,۲۲۰
GhostWhiteF8F8FF۲۴۸,۲۴۸,۲۵۵
GoldFFD700۲۵۵,۲۱۵,۰
GoldenRodDAA520۲۱۸,۱۶۵,۳۲
Gray۸۰۸۰۸۰۱۲۸,۱۲۸,۱۲۸
Green۰۰۸۰۰۰۰,۱۲۸,۰
GreenYellowADFF2F۱۷۳,۲۵۵,۴۷
HoneyDewF0FFF0۲۴۰,۲۵۵,۲۴۰
HotPinkFF69B4۲۵۵,۱۰۵,۱۸۰
IndianRed CD5C5C۲۰۵,۹۲,۹۲
Indigo ۴B0082۷۵,۰,۱۳۰
IvoryFFFFF0۲۵۵,۲۵۵,۲۴۰
KhakiF0E68C۲۴۰,۲۳۰,۱۴۰
LavenderE6E6FA۲۳۰,۲۳۰,۲۵۰
LavenderBlushFFF0F5۲۵۵,۲۴۰,۲۴۵
LawnGreen۷CFC00۱۲۴,۲۵۲,۰
LemonChiffonFFFACD۲۵۵,۲۵۰,۲۰۵
LightBlueADD8E6۱۷۳,۲۱۶,۲۳۰
LightCoralF08080۲۴۰,۱۲۸,۱۲۸
LightCyanE0FFFF۲۲۴,۲۵۵,۲۵۵
LightGoldenRodYellowFAFAD2۲۵۰,۲۵۰,۲۱۰
LightGrayD3D3D3۲۱۱,۲۱۱,۲۱۱
LightGreen۹۰EE90۱۴۴,۲۳۸,۱۴۴
LightPinkFFB6C1۲۵۵,۱۸۲,۱۹۳
LightSalmonFFA07A۲۵۵,۱۶۰,۱۲۲
LightSeaGreen۲۰B2AA۳۲,۱۷۸,۱۷۰
LightSkyBlue۸۷CEFA۱۳۵,۲۰۶,۲۵۰
LightSlateGray۷۷۸۸۹۹۱۱۹,۱۳۶,۱۵۳
LightSteelBlueB0C4DE۱۷۶,۱۹۶,۲۲۲
LightYellowFFFFE0۲۵۵,۲۵۵,۲۲۴
Lime۰۰FF00۰,۲۵۵,۰
LimeGreen۳۲CD32۵۰,۲۰۵,۵۰
LinenFAF0E6۲۵۰,۲۴۰,۲۳۰
MagentaFF00FF۲۵۵,۰,۲۵۵
Maroon۸۰۰۰۰۰۱۲۸,۰,۰
MediumAquaMarine۶۶CDAA۱۰۲,۲۰۵,۱۷۰
MediumBlue۰۰۰۰CD۰,۰,۲۰۵
MediumOrchidBA55D3۱۸۶,۸۵,۲۱۱
MediumPurple۹۳۷۰DB۱۴۷,۱۱۲,۲۱۹
MediumSeaGreen۳CB371۶۰,۱۷۹,۱۱۳
MediumSlateBlue۷B68EE۱۲۳,۱۰۴,۲۳۸
MediumSpringGreen۰۰FA9A۰,۲۵۰,۱۵۴
MediumTurquoise۴۸D1CC۷۲,۲۰۹,۲۰۴
MediumVioletRedC71585۱۹۹,۲۱,۱۳۳
MidnightBlue۱۹۱۹۷۰۲۵,۲۵,۱۱۲
MintCreamF5FFFA۲۴۵,۲۵۵,۲۵۰
MistyRoseFFE4E1۲۵۵,۲۲۸,۲۲۵
MoccasinFFE4B5۲۵۵,۲۲۸,۱۸۱
NavajoWhiteFFDEAD۲۵۵,۲۲۲,۱۷۳
Navy۰۰۰۰۸۰۰,۰,۱۲۸
OldLaceFDF5E6۲۵۳,۲۴۵,۲۳۰
Olive۸۰۸۰۰۰۱۲۸,۱۲۸,۰
OliveDrab۶B8E23۱۰۷,۱۴۲,۳۵
OrangeFFA500۲۵۵,۱۶۵,۰
OrangeRedFF4500۲۵۵,۶۹,۰
OrchidDA70D6۲۱۸,۱۱۲,۲۱۴
PaleGoldenRodEEE8AA۲۳۸,۲۳۲,۱۷۰
PaleGreen۹۸FB98۱۵۲,۲۵۱,۱۵۲
PaleTurquoiseAFEEEE۱۷۵,۲۳۸,۲۳۸
PaleVioletRedDB7093۲۱۹,۱۱۲,۱۴۷
PapayaWhipFFEFD5۲۵۵,۲۳۹,۲۱۳
PeachPuffFFDAB9۲۵۵,۲۱۸,۱۸۵
PeruCD853F۲۰۵,۱۳۳,۶۳
PinkFFC0CB۲۵۵,۱۹۲,۲۰۳
PlumDDA0DD۲۲۱,۱۶۰,۲۲۱
PowderBlueB0E0E6۱۷۶,۲۲۴,۲۳۰
Purple۸۰۰۰۸۰۱۲۸,۰,۱۲۸
RebeccaPurple۶۶۳۳۹۹۱۰۲,۵۱,۱۵۳
RedFF0000۲۵۵,۰,۰
RosyBrownBC8F8F۱۸۸,۱۴۳,۱۴۳
RoyalBlue۴۱۶۹E1۶۵,۱۰۵,۲۲۵
SaddleBrown۸B4513۱۳۹,۶۹,۱۹
SalmonFA8072۲۵۰,۱۲۸,۱۱۴
SandyBrownF4A460۲۴۴,۱۶۴,۹۶
SeaGreen۲E8B57۴۶,۱۳۹,۸۷
SeaShellFFF5EE۲۵۵,۲۴۵,۲۳۸
SiennaA0522D۱۶۰,۸۲,۴۵
SilverC0C0C0۱۹۲,۱۹۲,۱۹۲
SkyBlue۸۷CEEB۱۳۵,۲۰۶,۲۳۵
SlateBlue۶A5ACD۱۰۶,۹۰,۲۰۵
SlateGray۷۰۸۰۹۰۱۱۲,۱۲۸,۱۴۴
SnowFFFAFA۲۵۵,۲۵۰,۲۵۰
SpringGreen۰۰FF7F۰,۲۵۵,۱۲۷
SteelBlue۴۶۸۲B4۷۰,۱۳۰,۱۸۰
TanD2B48C۲۱۰,۱۸۰,۱۴۰
Teal۰۰۸۰۸۰۰,۱۲۸,۱۲۸
ThistleD8BFD8۲۱۶,۱۹۱,۲۱۶
TomatoFF6347۲۵۵,۹۹,۷۱
Turquoise۴۰E0D0۶۴,۲۲۴,۲۰۸
VioletEE82EE۲۳۸,۱۳۰,۲۳۸
WheatF5DEB3۲۴۵,۲۲۲,۱۷۹
WhiteFFFFFF۲۵۵,۲۵۵,۲۵۵
WhiteSmokeF5F5F5۲۴۵,۲۴۵,۲۴۵
YellowFFFF00۲۵۵,۲۵۵,۰
YellowGreen۹ACD32۱۵۴,۲۰۵,۵۰
توجه » شما میتوانید از عناصر مختلف در یک تگ فونت به طور همزمان استفاده نمایید.
نمونه هایی از روش استفاده از کد رنگ را ببینیم :
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
<font size=“+2” color=“YellowGreen”>این متن من است</font>
<br>
<font size=“+2” color=“#9ACD32”>این متن من است</font>
<br>
<font size=“+2” color=“SteelBlue”>این متن من است</font>
<br>
<font size=“+2” color=“4682B4”>این متن من است</font>
<br>
<font size=“+2” color=“Red”>این متن من است</font>
<br>
<font size=“+2” color=“FF0000”>این متن من است</font>
 این متن من است
این متن من است
این متن من است
این متن من است
این متن من است
این متن من است
خب ما به طور کلی در این آموزش کار کردن با تگ فونت و انواع رنگ و اندازه متن آشنا شدیم ، در آموزش بعد به توضیح و روش استفاده از کاراکتر های خاصی که با کیبورد قابل نوشتن نیستیم میپردازیم.
 
موفق باشید.

http://code-amooz.ir

سلام، حسین اسعدی هستم طراح و برنامه نویس وب، 3 سالی هست با وردپرس اشنا هستم و این آشنایی کماکان داره بیشتر میشه! امیدوارم در کدآموز بتونم مطالب و مقالات مفیدی براتون قرار بدم! اگر سوالی دارید میتونید به تلگرامم پیام بدید @hossin_asaadi 💌💐💐💐

    دیدگاه خود را بیان کنید

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *