آموزش HTML - بخش هشتم: تغییرات رنگ و اندازه و نوع فونت

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

نحوه‌ی استفاده از اتریبیوت استایل نیز بسیار ساده است و تنها کافی است تا کلمه Style را درکنار نام تگ در تگ شروع کننده بنویسیم. همانند زیر:

محتوا با استایل دلخواه

برای درک بهتر در مثال زیر ما می‌خواهیم  روی المان P تغییراتی را ایجاد نماییم.

مرحله اول: تگ اچ‌تی‌ام‌ال مدنظر را آغاز می‌کنیم؛ مثلا قصد تغییر در المان را داریم.

مرحله دوم: اتریبیوت استایل style را به المان مدنظر اضافه می‌کنیم و بعد از آن یک علامت  ""=   می‌گذاریم :

<"استایل‌های مدنظر"= p style>

مرحله سوم: حالا در بین دو علامت  " "  آن چیزهایی که می‌خواهیم در المان ما تغییر کند می‌نویسیم. مثلا در پاراگراف نوع فونت یا اندازه فونت را می‌نویسیم.

در این مثال برای تغییر فونت از font-family استفاده می‌کنیم و در روبروی آن، نوع فونت دلخواه را می‌نویسیم.  مثلا برای فونت (Tahoma) می‌نویسیم: <;p style = "font-family: Tahoma> .

بعد از نوشتن هر استایل و نوع آن حتما از علامت ; استفاده می‌کنیم. این علامت درواقع بین تمامی استایل‌ها قرار می‌گیرد و آن‌ها را از هم جدا می‌کند. دقت داشته باشید که استفاده از این علامت به‌طور کلی اهمیت زیادی دارد و به صفحه می‌فهماند که شما در حال تغییر استایل‌های صفحه هستید. 

به مثال زیر توجه کنید:

</h1> متن قرار گرفته در اینجا آبی رنگ خواهد شد <  "  ; h1 style =  "  color  :  blue> 

در این مثال با h1 را با اتریبیوت استایل به رنگ آبی در آورده‌ایم. درنتیجه رنگ نهایی آن آبی خواهد شد.

حالا که با نحوه کلی استفاده از اتریبیوت style آشنا شدیم، قصد داریم تا استایل‌های قابل استفاده بیشتری را در مشخصه فونت  برایتان معرفی کنیم:

اگر قصد تغییر نوع فونت را دارید, با استفاده از این استایل می‌توانید نوع فونت (مثلا tahoma، Times New Roman و ...) را تغییر دهید. همچنین امکان اضافه کردن فونت‌های دلخواه به صفحه ازطریق CSS نیز وجود دارد که ما این کار را به دوره آموزشی CSS موکول کرده‌ایم. در صورتی که نام فونت را اشتباه بزنید، امکان عدم نمایش فونت شما وجود دارد و در این حالت مرورگر فونت پیش‌فرض را جایگزین خواهد کرد. 

متن اینجا با فونت Tahoma ایجاد خواهد شد.<" ; p style = "  font-family  : Tahoma>

اندازه‌ی فونت بر حسب پیکسل (مثلا 10px یا 12 px و ...) بیان می‌شود. البته مقیاس‌های دیگری به غیر از پیکسل نیز وجود دارند که از جمله آن‌ها می‌توان به em اشاره کرد. در کل پیشنهاد می‌شود که برای ابعاد فونت از مقیاس پیکسل استفاده کنید.

مرحله اول: ابتدا تگ یا که مربوط به متن است را می‌نویسیم.

مرحله دوم: در مرحله بعد اتریبیوت استایل را به تگ مدنظر اضافه می‌کنیم.

مرحله سوم: در استایل باز شده کلمه ابعاد مدنظر:font-size را می‌نویسیم.

مرحله پایانی: متن مدنظر را در بین دو تگ می‌نویسیم. مشاهده خواهید که متن شما با اندازه دلخواه به نمایش در خواهد آمد.

متن اینجا با فونت 10px ایجاد خواهد شد.<" ; p style = "  font-size: 10px >

color - رنگ فونت :

رنگ متن‌ها را در اچ تی ام ال به دو شکل می‌توان تعیین کرد. در حالت اول, رنگ نوشته‌ها را با رنگ‌های پیش‌فرض (مثلا blue، yellow یا ...) مشخص می‌کنند. در این حالت انتخاب‌ها به رنگ‌های از پیش تعریف شده محدود می‌شود, ولی اگر قصد استفاده از رنگ خاصی را دارید باید از کد شش رقمی آن‌ها  درکنار علامت #  استفاده کنید. مثلا 888888# رنگ سفید یا FF330A# رنگ نارنجی است.  برای به دست آوردن کد رنگ‌ها می‌توانید از نرم‌افزارهای گرافیکی همچون فوتوشاپ یا سرویس‌های آنلاین همچون HTML Color یا HTML Color picker استفاده کنید. 

به مثال زیر نگاه کنید تا نحوه‌ی تغییر رنگ المان در اچ تی ام ال را بیاموزید.

مرحله اول: ابتدا تگ یا که مربوط به متن است را می‌نویسیم.

مرحله دوم: در مرحله بعد اتریبیوت استایل را به تگ مدنظر اضافه می‌کنیم.

مرحله سوم: در استایل باز شده کلمه color: رنگ مدنظر را می‌نویسیم. رنگ مدنظر یا کد شش رقمی رنگ است یا اسم رنگ همانند(yellow, Blue یا ...)

 style="color:  #11111;  font-family: tahoma;">متن با فونت تاهما و رنگ سفید

مرحله پایانی: متن مدنظر را در بین دو تگ می‌نویسیم. مشاهده خواهید که متن شما با رنگ دلخواه به نمایش در خواهد آمد.

هم تراز کردن - text-align: 

یکی دیگر از موارد قابل استفاده در اتریبیوت استایل در متن‌ها text-align است. این خصوصیت به شما کمک می‌کند تا متن‌هایتان را چپ چین, راست چین یا وسط چین کنید. نوشتن این مولفه‌ها نیز کاملا مشابه قبلی‌هاست و تنها کافی است همانند قبل مراحل زیر را طی کنید.

مرحله اول: ابتدا تگ یا که مربوط به متن است را می‌نویسیم.

مرحله دوم: در مرحله بعد اتریبیوت استایل را به تگ مدنظر اضافه می‌کنیم.

مرحله سوم: در استایل باز شده کلمه text-align:center را برای وسط چین می‌نویسیم. 

مرحله پایانی: متن مدنظر را در بین دو تگ

متن سمت راست صفحه قرار  می‌گیرد

متن سمت چپ صفحه قرار  می‌گیرد

style="text-align:center"> متن وسط صفحه قرار  می‌گیرد

style="text-align:right"> متن سمت راست صفحه قرار  می‌گیرد

style="text-align:left"> متن سمت چپ صفحه قرار  می‌گیرد

متن وسط صفحه قرار  می‌گیرد 

متن سمت راست صفحه قرار  می‌گیرد 

متن سمت چپ صفحه قرار  می‌گیرد 

گاهی پیش می‌آید که بخواهیم بخشی از متن را پررنگ‌تر کنیم تا توجه بیشتری از کاربران جلب کند. برای این کار بهترین کار استفاده از تگ‌هایی است که متن را بولد (bold) می‌کند. برای این کار باید کلمه‌ یا متنی که می‌خواهیم پر رنگ شود را در بین دو تگ قرار دهیم. البته تگ  نیز دقیقا کار مشابهی را انجام می‌دهد. توجه داشته باشید که کل متن را بولد نکنید چون نه‌تنها این کار باعث توجه کاربر نمی‌شود، بلکه ممکن است از  زیبایی طرح شما کاسته شود. همچنین تگ برای موتورهای جست‌وجو ملاک محسوب می‌شود.

برای مثال ما می‌خواهیم کلمه اچ تی ام ال را در متن زیر پر رنگ نماییم.

ما در حال یادگیری اچ تی ام ال هستیم

برای این کار دور کلمه اچ تی ام ال تگ قرار دهیم.

هستیماچ تی ام ال ما در حال یادگیری   

italic کردن که حروف را حالت مورب می‌کند (مثال: متن ایتالیک) نیز با تگ متن انجام می‌شود. برای این کار مشابه قبل ابتدا متن را در تگ پاراگراف می‌نویسید و سپس بخشی از آن را که می‌خواهید ایتالیک کنید در بین دو تگ  قرار می‌دهیم.

I am so tired.

استآسان بسیار  اچ تی ام ال یادگیری 

یادگیری اچ تی ام ال بسیار آسان است

همان‌طور که مشاهده می‌کنید، در بین متن با استفاده از تگ‌های b و e,m موفق شدیم تا بخش دلخواهمان را به‌صورت بولد و پررنگ یا ایتالیک در بیاوریم. حالا در ادامه خلاصه‌ای از آنچه در این جلسه گفته شده است را با هم مرور خواهیم کرد. 

در این قسمت چیزهایی که یادگرفته‌ایم را به‌صورت کاملا خلاصه مرور می‌کنیم.

• در هشتمین قسمت از سری آموزش HTML و سی‌اس‌اس با نحوه تغییر در فونت‌ها با کمک اتریبیوت استایل آشنا شدیم.
•  اتریبیوت استایل خواص بسیار دیگری نیز دارد و در تگ‌های دیگر هم به کار می‌رود.
• اتریبیوت استایل برای تگ پاراگراف دارای مولفه‌هایی از جمله font-family, font-size و color است. 
• مثال یک پاراگراف با استایل دلخواه:    متن با رنگ قرمز, فونت با اندازه 10px و Tahoma است. <" ; p style = "  font-family  : Tahoma ; font-size  : 10px;  color: red >
• برای چپ چین یا راست چین یا وسط چین کردن متن از کلمه text-align استفاده می‌کنیم و در آن کلمه center, left یا right برای چپ وسط یا راست قرار دادن متن به کار می‌بریم.
• برای پر رنگ کردن متن‌ها نیز تنها باید از تگ یا  استفاده کرد. 
• برای ایتالیک(مورب کردن متن)  باید از تگ

تهیه شده توسط زومیت