آموزش پس زمینه در HTML

4 سال پیش

امتیاز دهید post

آموزش پس زمینه در HTML

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش پس زمینه در HTML خواهیم پرداخت.

به طور پیش فرض، پس زمینه صفحه وب شما سفید است. شاید از آن خوشتان نیاید اما جای نگرانی نیست. HTML برای تزئین پس زمینه صفحه وب خود دو روش خوب را برای شما فراهم می کند.

پس زمینه HTML با رنگ
پس زمینه HTML با تصاویر

حال بیایید هر دو رویکرد را با استفاده از مثالهای مناسب یکی یکی ببینیم.

پس زمینه HTML با رنگ

از ویژگی bgcolor برای کنترل پس زمینه یک عنصر HTML، به ویژه زمینه صفحه و پس زمینه جدول استفاده می شود.

توجه – ویژگی bgcolor در HTML5 منسوخ شد. از این ویژگی استفاده نکنید

در زیر نحو استفاده از ویژگی bgcolor با هر تگ HTML آورده شده است.

&lt;tagname bgcolor = "color_value"...&gt;

1	<tagname bgcolor = "color_value"...>

این مقدار_ رنگ را می توان در هر یک از قالب های زیر ارائه داد –

&lt;!-- Format 1 - Use color name --&gt;
&lt;table bgcolor = "lime" &gt;
 
&lt;!-- Format 2 - Use hex value --&gt;
&lt;table bgcolor = "#f1f1f1" &gt;
 
&lt;!-- Format 3 - Use color value in RGB terms --&gt;
&lt;table bgcolor = "rgb(0,0,120)" &gt;

مثال

در اینجا مثالهایی برای تنظیم پس زمینه یک تگ HTML آورده شده است –

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;HTML Background Colors&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;!-- Format 1 - Use color name --&gt;
      &lt;table bgcolor = "yellow" width = "100%"&gt;
         &lt;tr&gt;
            &lt;td&gt;
               This background is yellow
            &lt;/td&gt;
         &lt;/tr&gt;
      &lt;/table&gt;
 
      &lt;!-- Format 2 - Use hex value --&gt;
      &lt;table bgcolor = "#6666FF" width = "100%"&gt;
         &lt;tr&gt;
            &lt;td&gt;
               This background is sky blue
            &lt;/td&gt;
         &lt;/tr&gt;
      &lt;/table&gt;
 
      &lt;!-- Format 3 - Use color value in RGB terms --&gt;
      &lt;table bgcolor = "rgb(255,0,255)" width = "100%"&gt;
         &lt;tr&gt;
            &lt;td&gt;
               This background is green
            &lt;/td&gt;
         &lt;/tr&gt;
      &lt;/table&gt;
   &lt;/body&gt;
   
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>HTML Background Colors</title>

</head>

<body>

<tr>

<td>

This background is yellow

</td>

</tr>

</table>

<tr>

<td>

This background is sky blue

</td>

</tr>

</table>

<tr>

<td>

This background is green

</td>

</tr>

</table>

</body>

</html>

خروجی

This background is yellow
This background is sky blue
This background is green

This background is yellow

This background is sky blue

This background is green

پس زمینه HTML با تصاویر

از ویژگی پس زمینه نیز می توان برای کنترل پس زمینه یک عنصر HTML، به ویژه زمینه صفحه و پس زمینه جدول استفاده کرد. می توانید برای تنظیم پس زمینه صفحه یا جدول HTML خود یک تصویر مشخص کنید.

توجه – ویژگی پس زمینه در HTML5 منسوخ شد. از این ویژگی استفاده نکنید

در زیر نحوه استفاده از ویژگی پس زمینه با هر تگ HTML آورده شده است.

توجه – ویژگی پس زمینه منسوخ شده است و توصیه می شود برای تنظیم پس زمینه از Style Sheet استفاده کنید.

&lt;tagname background = "Image URL"...&gt;

1	<tagname background = "Image URL"...>

بیشترین فرمت های تصویری مورد استفاده تصاویر JPEG ،GIF و PNG است.

مثال

در اینجا مثالهایی برای تنظیم تصاویر پس زمینه یک جدول آورده شده است.

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;HTML Background Images&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;!-- Set table background --&gt;
      &lt;table background = "/images/html.gif" width = "100%" height = "100"&gt;
         &lt;tr&gt;&lt;td&gt;
            This background is filled up with HTML image.
         &lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
   &lt;/body&gt;
   
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>HTML Background Images</title>

</head>

<body>

This background is filled up with HTML image.

</td></tr>

</table>

</body>

</html>

خروجی

1

پس زمینه های شفاف و طرح دار

شما ممکن است بسیاری از زمینه های طرح دار یا شفاف را در وب سایت های مختلف دیده باشید. با استفاده از تصویر طرح دار یا تصویر شفاف در پس زمینه می توان به این مهم دست یافت.

پیشنهاد می شود ضمن ایجاد الگوها یا تصاویر شفاف GIF یا PNG ، از کوچکترین ابعاد ممکن حتی به اندازه 1×1 برای جلوگیری از بارگیری کند استفاده کنید.

مثال

در اینجا مثالهایی برای تنظیم الگوی پس زمینه جدول وجود دارد –

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;HTML Background Images&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;!-- Set a table background using pattern --&gt;
      &lt;table background = "/images/pattern1.gif" width = "100%" height = "100"&gt;
         &lt;tr&gt;
            &lt;td&gt;
               This background is filled up with a pattern image.
            &lt;/td&gt;
         &lt;/tr&gt;
      &lt;/table&gt;

      &lt;!-- Another example on table background using pattern --&gt;
      &lt;table background = "/images/pattern2.gif" width = "100%" height = "100"&gt;
         &lt;tr&gt;
            &lt;td&gt;
               This background is filled up with a pattern image.
            &lt;/td&gt;
         &lt;/tr&gt;
      &lt;/table&gt;
   &lt;/body&gt;
   
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>HTML Background Images</title>

</head>

<body>

<tr>

<td>

This background is filled up with a pattern image.

</td>

</tr>

</table>

<tr>

<td>

This background is filled up with a pattern image.

</td>

</tr>

</table>

</body>

</html>

خروجی

This background is filled up with a pattern image.
This background is filled up with a pattern image.

1 2	This background is filled up with a pattern image. This background is filled up with a pattern image.

منبع.

لیست جلسات قبل آموزش HTML

امتیاز دهید post

نویسنده مطلب saber

آموزش پس زمینه در HTML

آموزش پس زمینه در HTML

پس زمینه HTML با رنگ

مثال

پس زمینه HTML با تصاویر

مثال

پس زمینه های شفاف و طرح دار

مثال

لیست جلسات قبل آموزش HTML

دیدگاه شما

بدون دیدگاه

آموزش پس زمینه در HTML

پس زمینه HTML با رنگ

مثال

پس زمینه HTML با تصاویر

مثال

پس زمینه های شفاف و طرح دار

مثال

لیست جلسات قبل آموزش HTML

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه