HTML آموزش

در اين درس با چگونگی تعيين تصاوير و رنگ پس زمينه (Background) آشنا خواهيد شد. رنگ و يا تصوير پس زمينه فاکتور بسيار مهمی در طراحی صفحات اچتمل بوده و استفاده از رنگ و يا تصوير مناسب نقشی تعيين کننده در خوانا بودن صفحات دارد.

مثالها:

رنگ متن و زمينه متناسب
انتخاب رنگ مناسب متون و پس زمينه به خوانا بودن متن کمک شايان توجهی خواهد کرد.

رنگ متن و زمينه نامتناسب
مثالی از انتخاب نامناسب رنگ متن و پس زمينه

مثالهای بيشتر

رنگ و تصوير زمينه در صفحات اچتمل:

تگ <body> دارای دو شناسه مهم برای تعيين رنگ و تصوير پس زمينه ميباشد. پس زمينه صفحات اچتمل رنگ و يا يک تصوير ميتواند باشد.

شناسه bgcolor برای رنگ پس زمينه (background color)

شناسه bgcolor رنگ پس زمينه را تعيين ميکند. مقدار رنگ پس زمينه ميتواند نام رنگ (مثل red يا blue ) ، مقدار آن بر اساس استاندارد RGB و يا حتی مقدار هگزادسيمال (Hexadecimal) باشد.

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

در تمامی مثالهای بالا با کمک شناسه bgcolor رنگ زمينه صفحه "سياه" تعيين ميشود.

شناسه Background برای تصوير پس زمينه:

برای تعيين تصويری که به عنوان پس زمينه صفحه نمايش داده ميشود از شناسه background استفاده ميشود.مقدار اين شناسه URL يا آدر س تصوير (image) ميباشد.اگر ابعاد تصوير کوچکتر از ابعاد صفحه مرورگر باشد، تصوير زمينه تکثير خواهد شد تا حدی که تمام صفحه نمايش از تصوير زمينه پوشانده شود.

<body background="bg.gif">
<body background="http://www.aviny.com/images/b_logo.gif">

در مثال اول از آدرس دهی نسبی (relative) برای تعيين URL يا آدرس تصوير استفاده شده و در واقع در اين مثال فايل اچتمل و تصوير bg.gif بايد در يک دايرکتوری قرار گيرند. در مقابل مثال دوم از آدرس دهی مطلق (absolute) برای تعيين آدرس تصوير استفاده شده است و همانطور که ميدانيد آدرس تصوير در هر نقطه از فضای وب ميتواند باشد.

نکات مهم: اگر از تصاوير پس زمينه در صفحات اچتمل استفاده ميکنيد به نکات زير توجه کنيد :

هرتصويری با فرمت gif و يا jpg قابل استفاده به عنوان تصوير زمينه ميباشد.
از تصاوير بزرگتر از ده کيلوبايت ظرفيت به هيچ وجه استفادا نکنيد، در غير اين صورت سرعت load صفحه بشدت پايين خواهد آمد.
از تصاوير زمينه هماهنگ با ديگرتصاوير صفحه استفاده کنيد.
از تصاوير زمينه هماهنگ با متون صفحه استفاده کنيد.
در رزولوشنهای مختلف به ديدن و آزمايش تصاوير پس زمينه بپردازيد.
پر مصرف ترين رنگهای زمينه وب سايتها، رنگهای سفيد، سياه و خاکستری ميباشند.
اغلب سايتهای وب از تصاوير پس زمينه استفاده نمی کنند! مثلا همين سايت!!!

نکته مهم در سازگاری با نسخه های جديد اچتمل و XHTML

شناسه های bgcolor و background در تگ <body> در نسخه 4 اچتمل و XHTML پشتيبانی نميشوند و در واقع از رده خارج محسوب ميشوند. در عوض کنسرسيوم W3C استفاده از Style Sheet ها را توصيه ميکند و در واقع در نسخه 4 اچتمل و استاندارد جديد XHTML تمامی اطلاعات مربوط به نمايش يا presentation و layout بايد در style sheet ها قرار گيرند.

مثالهای بيشتر

استفاده مناسب از تصوير زمينه 1
در اين مثال بدلیل استفاده از تصوير مناسب برای زمينه، نوشته های صفحه کاملا خوانا هستند.

استفاده مناسب از تصوير زمينه 2
در اين مثال در اثر استفاده از تصوير مناسب برای زمينه، نوشته های صفحه کاملا خوانا هستند.

استفاده نامناسب از تصوير زمينه
در اين مثال نوشته های صفحه خوانا نيستند.

استفاده از تصوير زمينه با آدرس مطلق
در اين مثال آدرس تصوير زمينه بصورت مطلق و کامل آورده شده است.

تعيين رنگ زمينه با Style Sheet ها
در اين مثال چگونگی استفاده از Style Sheet ها برای تعيين رنگ زمينه آورده شده است.