بک گراندها و رنگ ها در html
در این جلسه به آموزش بک گراندها و رنگ ها در زبان کد نویسی HTML خواهیم پرداخت. لطفا قبل از مشاهده این جلسه ابتدا جلسه ی قبل را از این لینک مشاهده کنید.
به طور پیش فرض رنگ زمینه ی صفحه ی وب شما سفید می باشد. ممکن است این زمینه را دوست نداشته باشید، اما نگرانی وجود ندارد. HTML دو روش مناسب زیر را ارائه می دهد تا زمینه ی صفحه وب خود را به دلخواه بیارایید.
زمینه ی HTML با رنگ ها
زمینه ی HTML با تصاویر.
اکنون اجازه بدهید هر دو روش را یکی یکی و با استفاده از مثال های مناسب بررسی کنیم.
زمینه ی HTML با رنگها
ویژگی bgcolor برای کنترل زمینه ی یک عنصر HTML ،به ویژه بدنه ی صفحه و زمینه ی جدول، استفاده می شود. در زیر ترکیب استفاده از bgcolor را با هر برچسب HTML می بینید.
<tagname bgcolor="color_value" ...>
این value- color می تواند به هرکدام از فرمت های زیر ارائه شود.
<!-- Format 1 - Use color name --> <table bgcolor="lime"> <!-- Format 2 - Use hex value --> <table bgcolor="#f1f1f1"> <!-- Format 3 - Use color value in RGB terms --> <table bgcolor="rgb(0,0,120)">
مثال
در اینجا مثالی را می بینید از تنظیم زمینه ی یک برچسب HTML.
<!DOCTYPE html> <html> <head> <title>HTML Background Colors</title> </head> <body> <!-- Format 1 - Use color name --> <table bgcolor="yellow" width="100%"> <tr> <td> This background is yellow </td> </tr> </table> <!-- Format 2 - Use hex value --> <table bgcolor="#6666FF" width="100%"> <tr> <td> This background is sky blue </td> </tr> </table> <!-- Format 3 - Use color value in RGB terms --> <table bgcolor="rgb(255,0,255)" width="100%"> <tr> <td> This background is green </td> </tr> </table> </body> </htm
بک گراندها و رنگ ها در html
زمینه ی HTML با تصاویر
ویژگی background همچنین می تواند برای کنترل زمینه ی یک عنصر HTML ،به ویژه بدنه ی صفحه و زمینه های جدول، استفاده شود. شما می توانید یک تصویر را به عنوان زمینه ی صفحه و یا جدول HTML خود استفاده کنید. در زیر ترکیب استفاده از ویژگی background را با هر عنصر HTML می بینید.
توجه ویژگی background به عنوان ویژگی خوبی تلقی نمی شود و توصیه می شود از sheet style برای تنظیم زمینه استفاده کنید.
<tagname background="Image URL" ...>
متداول ترین فرمت های مورد استفاده ی تصویر عبارتند از JPEG ،PNG و GIF
مثال
در اینجا مثال هایی را از تنظیم تصویر به عنوان زمینه ی جدول مشاهده می کنید.
<!DOCTYPE html> <html> <head> <title>HTML Background Images</title> </head> <body> <!-- Set table background --> <table background="/images/html.jpg" width="100%" height="400"> <tr> <td> This background is filled up with HTML image. </td> </tr> </table> </body> </html>
بک گراندها و رنگ ها در html
زمینه های طرح دار و شفاف
شما ممکن است الگوها و زمینه های شفاف بسیاری را در وب سایت های نختلف دیده باشید. این امر به راحتی و با استفاده از تصاویر طرح دار و شفاف در زمینه قابل دستیابی می باشد. توصیه می شود در هنگام ایجاد تصاویر طرح دار یا شفاف GIF یا PNG ،از کوچکترین ابعاد ممکن آنها استفاده کنید، حتی به کوچکی ۱×۱ برای جلوگیری از بارگذاری آهسته.
مثال
در اینجا مثالی از تنظیم یک الگوی زمینه برای یک جدول را مشاهده می کنید.
<!DOCTYPE html> <html> <head> <title>HTML Background Images</title> </head> <body> <!-- Set a table background using pattrern --> <table background="/images/pattern1.jpg" width="20%" height="100"> <tr> <td> This background is filled up with a pattern image. </td> </tr> </table> <!-- Another example on table background using pattrern --> <table background="/images/pattern2.jpeg" width="20%" height="100"> <tr> <td> This background is filled up with a pattern image. </td> </tr> </table> </body> </html>
رنگهای HTML
رنگ ها برای دادن یک ظاهر و احساس خوب به وب سایت شما بسیار مهم می باشند. شما می توانید رنگ ها را روی لایه ی صفحه با استفاده از برچسب <body> مشخص کنید، یا می توانید رنگ ها را برای برچسب های مجزا با استفاده از ویژگی bgcolor مشخص کنید.
برچسب <body> دارای ویژگی های زیر می باشد که می تواند برای تنظیم رنگ های مختلف استفاده شود.
bgcolor رنگی را برای زمینه ی صفحه تنظیم می کند.
text رنگی را برای متن تنظیم می کند.
alink رنگی را برای لینک های فعال یا انتخاب شده تنظیم می کند.
link رنگی را برای متن لینک شده تنظیم می کند.
رنگی را برای لینک های بازدید شده تنظیم می کند- یعنی برای متن لینک شده که روی آن کلیک کرده اید.
روش های کدگذاری رنگ HTML
در زیر سه روش متفاوت برای تنظیم رنگ در صفحه ی وب خود مشاهده می کنید
Color names – می توانید نام رنگ ها را به طور مستقیم تعیین کنید، به عنوان مثال سبز، قرمز، آبی و غیره.
Hex codes – یک کد شش رقمی که نشان دهنده ی مقدار آبی، قرمز و سبز سازنده ی رنگ، می باشد.
Color decimal or percentage values – -این مقدار با استفاده از ویژگی ( )rgb تعیین می شود. اکنون این روش های رنگ گذاری را یکی یکی بررسی خواهیم کرد.
رنگ های HTML – نام رنگ
می توانید برای تنظیم رنگ متن یا زمینه به طور مستقیم از نام رنگ استفاده کنید. W3C لیستی از ۱۱ رنگ پایه را دارد که توسط یک اعتباز سنج HTML ارزیابی می شود، اما نام بیشتر از ۲۱۱ رنگ مختلف وجود داردکه توسط مرورگرهای مهم پشتیبانی می شوند.
۱۶ رنگ استاندارد W3C
در اینجا نام ۱۶ رنگ استاندارد W3C را مشاهده می کنید، پیشنهاد می شود که از آنها استفاده کنید.
Black Gray Silver White Yellow Lime Aqua Fuchsia Red Green Blue Purple Maroon Olive Navy Teal
رنگ های HTML – کدهای Hex
هگزا دسیمال یک نمایش ۶ رقمی از یک رنگ می باشد. دو رقم اول یعنی RR نمایانگر رنگ قرمر (Red (می باشند، دو رقم بعدی (GG (مقدار سبز (green (را نشان می دهند و آخرین دو رقم (BB (نیز مقدار آبی (blue (را نشان می دهند.
هر کد هگزا دسیمال به وسیله ی یک علامت # دنبال می شود. در ادامه رنگ های مورد استفاده در نشانه گذاری هگزا دسیمال را مشاهده می کنید.
#۰۰۰۰۰۰ #FF0000 #00FF00 #0000FF #FFFF00 #00FFFF #FF00FF #C0C0C0 #FFFFFF
رنگ های HTML – مقادیر RGB
مقدار این رنگ با استفاده از ویژگی ( )rgb مشخص می شود. این ویژگی سه مقدار می گیرد که هر کدام برای سبز، قرمز و آبی می باشد. مقدار می تواند عددی بین ۰ و ۲۵۵ یا یک درصد باشد.
توجه همه ی مرورگرها ویژگی ( )rgb را پشتیبانی نمی کنند، بنابراین توصیه می شود ترجیحا از آن استفاده نکنید
در زیر لیستی از رنگ ها با مقادیر RGB را مشاهده می کنید.
rgb(0,0,0) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0) rgb(0,255,255) rgb(255,0,255) rgb(192,192,192) rgb(255,255,255)
ممنون که در این جلسه هم با ما همراه بودید. در این جلسه به یادگیری بک گراندها و رنگ ها در html پرداخته شد. در جلسه ی آینده نیز به نکات کلیدی و پرکاربردی خواهیم پرداخت.
پس حتما با ما همراه باشید و جلسات آینده را از دست ندهید! برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید. تمرین مستمر همواره تاثیر بسیار خوب و مهمی در یادگیری و تقویت مهارت های شما دارد پس حتما آن را جدی بگیرید.
دیدگاه ها