ICT - 37
Styling
▪ width ▪ text-align
▪ height ▪ color
▪ font-family ▪ background-color
▪ font-size
▪ margin
▪ padding
▪ border
Style Tag & Style Attribute
<html> <!DOCTYPE html>
<head> <html>
<style>
<body>
h1 {color:red;}
p {color:blue;} <h1 style="color:blue; text-align:center;">
</style> This is a header
</head> </h1>
<body> <p style="color:green;">
This is a paragraph.
<h1>A heading</h1>
<p>A paragraph.</p> </p>
</body>
</body> </html>
</html>
<div></div> ট্যাগ
<html>
<head></head>
<body style="background-color:greenyellow">
<div style="width:200px; height:50px; background-color:green;
color:darkred; float:left; margin:5px; padding:5px;">
<p style="text-align:center">Hello</p>
</div>
<div style="width:200px; height:50px; background-color:lightblue;
color:darkred; float:left; margin:5px; padding:5px;">
Hello!
</div>
</body>
</html>
Styling & CSS
My First CSS Example
<!DOCTYPE html>
UDVASH ICT.
<html>
<head>
<style>
body { </head>
background-color:lightblue;
} <body>
h1 { <h1>My First CSS Example</h1>
color:white;
<p>UDVASH ICT.</p>
text-align:center;
} </body>
p{
</html>
font-family:verdana;
font-size:20px;
}
</style>
Page Color
<!DOCTYPE html>
<html>
<body><h1 style="background-
color:DodgerBlue;">
Hello World
</h1>
<p style="background-color:Tomato;">
Udvash ICT
</p>
</body>
</html>
Page Color
<!DOCTYPE html>
<html>
<body><h3 style="color:Tomato;">
Hello World
</h3>
<p style="color:DodgerBlue;">
Udvash ICT
</p>
<p style="color:MediumSeaGreen;">
HTML COLOR
</p>
</body>
</html>
Page Color
<body style =“background-Color:Blue”></body>
Color Name
RGB color code
Hexadecimal Color code
Page Color
Color Name
<!DOCTYPE html> Orange
<html> DodgerBlue
<body>
MediumSeaGreen
<h3 style="color:Tomato;">Hello World</h3>
Gray
<p style="color:DodgerBlue;">Udvash ICT</p>
StateBlue
<p style="color:MediumSeaGreen; ">HTML COLOR and</p>
</body> Violet
</html> LightGray
Page Color
RGB Color Code
rgb(255, 0, 0) rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113) rgb(0, 0, 255)
<!DOCTYPE html>
rgb(238, 130, 238)
<html>
rgb(106, 90, 205)
<body> rgb(60, 179, 113)
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1> rgb(238, 130, 238)
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238); ">rgb(238, 130, 238)</h1> rgb(106, 90, 205)
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205) </h1>
</body>
</html>
Page Color
Hexadecimal Color Code
<!DOCTYPE html> #ff0000 #ff0000
#0000ff
<html>
#3cb371
<body> #0000ff
#ee82ee
<h1 style="background-color:#ff0000;">#ff0000</h1>
#6a5acd
#3cb371
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
#ee82ee
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1> #6a5acd
</body>
</html>
Page Color
HTML Color Picker
ICT - 38
Hyperlink <a>
Targets::_self, _blank, _parent, _top
<html>
<head>
<title>Hyperlink</title>
</head>
<body>
<a href="https://www.udvash.com" target ="_self">UDVASH</a>
</body>
</html>
Quiz-01
❑ দুই বা তততাধিক ওতেব ডকুতেতের েিযকার ধরতেশনতক কী বতে?
(a) ধরতেশন
(b) অ্যাধিধবউট
(c) টযাগ
(d) হাইপারধেিংক
ছবি/িযানার য াগ করা
<img src="image_name.jpg‘’ alt=“image name”>
<img src=''image/banner.jpg''>
➢ Image & webpage (html file) same folder এ রাখা সুধবিাজনক।
Quiz-02
❑ ব্রাউজকারীর সেে বাাঁতে ককান টযাতগ?
(a) <br>
(b) <a>
(c) <li>
(d) <i>
Image <img>
Pic name (with location), Pic Size, Pic Alignment
<html>
<head>
<title>Image</title>
</head>
<body>
<img src="banner.jpg" width="300px" height="200px" align="center">
</body>
</html>
Quiz-03
❑ HTML-এ ইতেজ ধনিধারণ করার ধসনটযাক্স ককানধট?
(a) <img src = ''url''>
(b) <img src = ''url''> image name </img>
(c) <img source = ''url''>
(d) <img herf = ''url''> image name </img>
List <ul>, <ol>, <li>
❑ Unordered List ❑ Ordered List
• Rice 1. Apple
• Chicken 2. Mango
• Fish 3. Banana
Ordered List <ol>, <li>
<html>
<head>
<title>List</title>
</head>
<body>
<ol>
<li>Rice 1kg</li>
<li>Chicken 2.5kg</li>
<li>Beef 1kg</li>
<li>Oil 250ml</li>
<li>Onion 200gm</li>
</ol>
</body>
</html>
Ordered List <ol>, <li>
<html>
<head>
<title>List</title>
</head>
<body>
<ol type="I">
<li>Rice 1kg</li>
<li>Chicken 2.5kg</li>
<li>Beef 1kg</li>
<li>Oil 250ml</li>
<li>Onion 200gm</li>
</ol>
</body>
</html>
Types: i, I, a, A, 1
Ordered List <ol>, <li>
<html>
<head>
<title>List</title>
</head>
<body>
<ol type="a" start="4">
<li>Rice 1kg</li>
<li>Chicken 2.5kg</li>
<li>Beef 1kg</li>
<li>Oil 250ml</li>
<li>Onion 200gm</li>
</ol>
</body>
</html>
Start: any number
Unordered List <ul>, <li>
<html>
<head>
<title>List</title>
</head>
<body>
<ul>
<li>Rice 1kg</li>
<li>Chicken 2.5kg</li>
<li>Beef 1kg</li>
<li>Oil 250ml</li>
<li>Onion 200gm</li>
</ul>
</body>
</html>
Unordered List <ul>, <li>
<html>
<head>
<title>List</title>
</head>
<body>
<ul type="circle">
<li>Rice 1kg</li>
<li>Chicken 2.5kg</li>
<li>Beef 1kg</li>
<li>Oil 250ml</li>
<li>Onion 200gm</li>
</ul>
</body>
</html>
Types: disc, circle, square, none
