مشاوره رایگان
دریافت لینک های دانلود
دریافت پستی درب منزل
مبلغ کل:
تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید
آموزش تغییر بک گراند یا پس زمینه در صفحات HTML با مثال
به طور پیش فرض، پس زمینه (background) صفحه وب شما، به رنگ سفید می باشد و شما ممکن است آن را دوست نداشته باشید، اما نگران نباشید. HTML دو راه خوب برای تزئین پس زمینه ی صفحه وب شما ارائه می دهد.
- پس زمینه HTML با رنگ ها
- پس زمینه HTML با تصاویر
حال اجازه دهید هر دو روش را یک به یک و با استفاده از نمونه های مناسب بررسی کنیم.
پس زمینه HTML با رنگ (Html Background with Colors)
از ویژگی bgcolor، برای کنترل پس زمینه ی یک عنصر HTML، به ویژه پس زمینه ی بدنه صفحه (body) و پس زمینه جداول (table) استفاده می شود.
توجه - ویژگی bgcolor در HTML5 منسوخ شده است. بنابراین از این ویژگی استفاده نکنید.
در زیر نحوه استفاده از ویژگی bgcolor ، با تگ های مختلفی از HTML را مشاهده می کنید.
<tagname bgcolor = "color_value"...>
مقدار color_value می تواند به هر یک از فرمت های زیر ارائه شود -
<!-- 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)" >
مثال
در زیر مثالی را آورده ایم، که در آن نحوه ی تنظیم یک پس زمینه برای تگ table ، را بیان نموده ایم -
<!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>
</html>
کد فوق نتیجه زیر را تولید می کند-
پس زمینه HTML با تصاویر
ویژگی background ، برای کنترلِ پس زمینه ی یک عنصرِ HTML می تواند مورد استفاده قرار گیرد، به ویژه برای پس زمینه ی بدنه (body) صفحه و پس زمینه جداول (table). به وسیله ی این ویژگی، شما می توانید تصویری را برای پس زمینه ی صفحه (page) یا جدولِ (table) خود تنظیم کنید.
توجه - ویژگی پس زمینه در HTML5 نادیده گرفته شده است.بنابراین از این ویژگی استفاده نکنید.
در زیر نحوه ی استفاده از ویژگی پس زمینه (background) در تگ های مختلفِ HTML نشان داده شده است.
توجه داشته باشید - ویژگی background منسوخ شده است، بنابراین توصیه می شود از Style Sheet برای تنظیم پس زمینه (background) استفاده کنید.
<tagname background = "Image URL"...>
فرمت تصاویری که به منظور استفاده در background به کار برده می شوند اغلب، JPEG، GIF و PNG هستند.
مثال
در مثال زیر، نحوه ی تنظیمِ تصویر، برای پس زمینه (background) یک جدول، نشان داده شده است.
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set table background -->
<table background = "/images/html.gif" width = "100%" height = "100">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند -
پس زمینه طرح دار (Patterned) و شفاف (Transparent)
شما ممکن است پس زمینه های طرحدار (patterned) و یا شفاف (transparent) بسیاری را در وب سایت های مختلف دیده باشید. برای داشتن چنین پس زمینه هایی می توانید، از تصاویر طرحدار (patterned) و یا شفاف (transparent) استفاده نمایید.
پیشنهاد می شود که برای استفاده از تصاویر طرحدار یا شفاف (که به فرمت GIF یا PNG ارائه می شوند)، از کوچکترین ابعادِ ممکن آنها استفاده کنید. حتی اگر توانستید از ابعاد 1x1 استفاده کنید. این کار باعث می شود سرعت لود تصویرتان افزایش یابد.
مثال
در مثال زیر نحوه ی تنظیم یک الگو، برای پس زمینه (background) یک جدول را بیان نموده ایم -
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set a table background using pattern -->
<table background = "/images/pattern1.gif" width = "100%" height = "100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
<!-- Another example on table background using pattern -->
<table background = "/images/pattern2.gif" width = "100%" height = "100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند -
فصلِ:
5
,
تعداد قسمت ها:
177
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML
آموزش HTML5
این فصل در یک نگاه:
در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…
HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می…
فصلِ:
3
,
تعداد قسمت ها:
25
,
سطح:
صفر تا صد
این فصل در یک نگاه:
فصل سوم…
آموزش طراحی ریسپانسیو مدرن و جذابتر نسبت به بوتسرپ (همراه با ساخت صفحه اصلی و پنل یک آژانس مسافربری) آموزش پروژه محور فریمورک متریالایز برای اولین بار بین وب سایت های آموزشی آموزش تمامی …
فصلِ:
5
,
تعداد قسمت ها:
77
,
سطح:
متوسط
این فصل در یک نگاه:
ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…
این مجموعه با تلفیقی از فریمورک bootstrap و کد های html و css ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
فصلِ:
11
,
تعداد قسمت ها:
162
,
سطح:
صفر تا صد
این فصل در یک نگاه:
در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…
در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…
فصلِ:
4
,
تعداد قسمت ها:
240
,
سطح:
صفر تا صد
موضوعات:
آموزش PHP
آموزش Bootstrap
آموزش CSS
آموزش JQUERY
آموزش HTML
آموزش PHP MVC
آموزش Ajax
آموزش HTML5
این فصل در یک نگاه:
طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…
توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ:
4
,
تعداد قسمت ها:
368
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش ساخت فروشگاه اینترنتی
آموزش Bootstrap
آموزش Laravel
این فصل در یک نگاه:
مباحث تکمیلی فریم ورک لاراول…
فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ:
1
,
تعداد قسمت ها:
155
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش NodeJs
آموزش Bootstrap
آموزش Laravel
آموزش Symphony
این فصل در یک نگاه:
مباحث مقدماتی فریم ورک react.js…
توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
فصلِ:
1
,
تعداد قسمت ها:
15
,
سطح:
متوسط
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش ASP.NET
آموزش ASP.NET MVC
آموزش PHP MVC
آموزش Phyton
آموزش سئو
آموزش ساخت فروشگاه اینترنتی
آموزش HTML
آموزش ایمیل مارکتینگ
آموزش وردپرس
آموزش فروشگاه ساز اپن کارت
آموزش جوملا
آموزش Virtual Freer
آموزش WHMCS
این فصل در یک نگاه:
رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…
اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …
