এইচটিএমএল ব্যাকগ্রাউন্ড রং টিউটোরিয়াল (HTML Background Colors Tutorial in Bangla)
bgcolor এট্রিবিউট টি বিশেষভাবে ওয়েব পেজ এবং টেবিলের ব্যাকগ্রাউন্ড নিয়ন্ত্রন করে। Bgcolor এট্রিবিউট টিকে অনেক এইচটিএমএল ট্যাগ এর মধ্যে ব্যবহার করা যায় তবে সবচেয়ে ভাল হয় <body> এবং <table> ট্যাগ এর মধ্যে ব্যবহার করলে। অতিরিক্ত হিসাবে ব্যাকগ্রাউন্ড স্টাইল করতে চাইলে সিএসএস ব্যাকগ্রাউন্ড(CSS টিউটোরিয়ালে আরোচনা করা হয়েছে) দেখতে পারেন।
bbbbb
গঠন:
<tagname bgcolor =”value”>
1.<body bgcolor=”Silver”>
2.<p>We set the background of this paragraph to be silver. The body tag is
3.where you change the pages background. Now continue the lesson to
4.learn more about adding background colors in your HTML!
5.</p>
6.</body>
We set the background of this paragraph to be silver. The body tag is where you change the pages background. Now continue the lesson to learn more about adding background colors in your HTML!
টেবিলের ব্যাকগ্রাউন্ড এ কালার যোগ করা :
01.<table bgcolor=”lime” border=”1″><tr>
02.<td>A lime colored table background using color names.</td>
03.</tr></table>
04.
05.
06.<table bgcolor=”#ff0000″ border=”1″><tr>
07.<td>A red colored table background using hexadecimal values “#FF0000″.</td>
08.</tr></table>
09.
10.
11.<table bgcolor=”rgb(0, 0, 255)” border=”1″><tr>
12.<td>A blue colored table background using RGB values “rgb(0, 0, 255)”.</td>
13.</tr></table>
প্রদর্শন:
A lime colored table background using color names.
A red colored table background using hexadecimal values “#FF0000”.
A blue colored table background using RGB values “rgb(0, 0, 255)”.
টেবিলের সারি এবং কলামে কালার যোগ করা:
1.<table>
2.<tr bgcolor=”#FFFF00″><td>This Row is Yellow!</td></tr>
3.<tr bgcolor=”#AAAAAA”><td>This Row is Gray!</td></tr>
4.<tr bgcolor=”#FFFF00″><td>This Row is Yellow!</td></tr>
5.<tr bgcolor=”#AAAAAA”><td>This Row is Gray!</td></tr>
6.<tr bgcolor=”#FFFF00″><td>This Row is Yellow!</td></tr>
7.<tr bgcolor=”#AAAAAA”><td>This Row is Gray!</td></tr>
8.</table>
প্রদর্শন:
This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!
একত্রে ব্যাকগ্রাউন্ড color এবং font color:
1.<table bgcolor=”#000000″>
2.<tr><td bgcolor=”#009900″>
3.<font color=”#FFFF00″ align=”right”>Green Bay</font></td>
4.<td><font color=”#FFFFFF”>13</font></td></tr>
5.<tr><td bgcolor=”#0000FF”>
6.<font color=”#DDDDDD” align=”right”>New England</font></td>
7.<td><font color=”#FFFFFF”>27</font></td></tr>
8.</table>
প্রদর্শন:
Green Bay
13
New England
27
1.<table bgcolor=”#777777″>
2.<tr><td>
3.<p><font face=”Monotype Corsiva, Verdana” size=”4″ color=”#00FF00″>
4.This paragraph tag has…
5.</font></p>
6.</td></tr>
7.</table>
প্রদর্শন:
This paragraph tag has a gray background with green colored font. You should see Monotype Corsiva font if you have it installed, or Verdana as the backup. Both fonts are widely accepted as standard fonts.
এইচটিএমএল ব্যাকগ্রাউন্ড টিউটোরিয়াল (HTML Background Tutorial in Bangla)
ব্যাকগ্রাউন্ড এট্রিবিউট এর সাহায্যে এইচটিএমএল টেবিলে ইমেজকে ব্যাকগ্রাউন্ড ইমেজ হিসাবে দেখানো যায়।
1.<table height=”50″ width=”100″
2.background=”http://www.webcoachbd.com/images/stories/imagel.jpg” >
3.<tr><td>This table has a background image</td></tr>
4.</table>
bbbbb
প্রদর্শন:
This table has a background image
এইচটিএমএল ব্যাকগ্রাউন্ড রিপিট:
উপরের উদাহরনে দেখা গিয়েছে যে টেবিল এর আকার ছবির আকারের সমান বলে কোন সমস্যা হয় নি। যদি টেবিল এর আকার ছবির আকারের চেয়ে বড় হয় তবে ব্যাকগ্রাউন্ড ছবি রিপিট হবে।
1.<table height=”200″ width=”300″
2.background=”http://www.webcoachbd.com/images/stories/imagel.jpg
3.<tr><td>This table has a background image</td></tr>
4.</table>
প্রদর্শন:
This table has a background image
এইচটিএমএল প্যাটার্নড ব্যাকগ্রাউন্ড
বিভিন্ন ফটো এডিটিং সফ্টওয়ার দিয়ে বিভিন্ন প্যাটার্নের ব্যাকগ্রাউন্ড ছবি এরং ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড ছবি তৈরী করাযায়। ট্রান্সপারেন্ট ইমেজের ফাইলটিকে gif ফরমেটে রাখতে হবে jpeg ফরমেটে নয়।
view source
print?
1.<table height=”100″ width=”150″
2.background=”http://www.tizag.com/pics/htmlT/pattern.jpg” >
3.<tr><td>This table has a background patterned image</td></tr>
4.</table>
প্রদর্শন:
This table has a background patterned image
1.<table background=”http://www.tizag.com/pics/htmlT/transparent.gif” >
2.<tr><td>This table has a red transparent background image</td></tr>
3.</table>
প্রদর্শন:
This table has a red transparent background image
এইচটিএমএল ফ্রেম টিউটোরিয়াল (HTML Frame)
ফ্রেম এর মাধ্যমে একই সময় একই ব্রাউজার উইন্ডো তে অনেক গুলো এইচটিএমএল ডকুমেন্ট প্রদর্শন করা যায়।
এইচটিএমএল-a generic frame page:
ফ্রেমের বেশি ব্যবহার হল একটি ফ্রেম এ মেনু আর একটি ফ্রেম এ তার কনটেন্ট। যখন কেউ মেনু লিংকে ক্লিক করে তখন সেই ওয়েব পেজটি কনটেন্ট পেজে খোলে।
1.<html>
2.<head>
3.</head>
4.<frameset cols=”30%, *”>
5.<frame src=”/menu.html”>
6.<frame src=”/content.html”>
7.</frameset>
8.</html>
প্রদর্শন:
frameset – এটা একটা parent tag যা ফ্রেম page এর characteristics নির্দেশ করে। পৃথক পৃথক ফ্রেম frameset এর মধ্যে নির্দেশিত থাকে।
frameset cols=”#%, *”– Cols(column) যা ফ্রেম এর width নির্দেশ করে। উপরের উদাহরনে আমরা মেনু (1st column) নির্বাচন করেছি যা total page এর ৩০% এবং “*”, এর অর্থ total page এর ৭০% content(2nd column)নির্দেশিত হয়।
frame src=”/” ওয়েব পেজ এর লোকেশন ফ্রেমে লোড হয়।
ব্যনার বা টাইটেল যোগ করা:
1.<html><head></head>
2.<frameset rows=”20%, *”>
3.<frame src=”/title.html”>
4.<frameset cols=”30%, *”>
5.<frame src=”/menu.html”>
6.<frame src=”/content.html”>
7.</frameset>
8.</html>
frameset rows=”#%, *”-এর অর্থ frameset cols=”#%, *”– মতই।
FrameBorder and FrameSpacing:
আমি আইটি ব্লগ। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 6 বছর 11 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 24 টি টিউন ও 4 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 5 ফলোয়ার আছে এবং আমি টেকটিউনসে 10 টিউনারকে ফলো করি।
