- <div> tag
- id (#para1)
- Class(.)
- margin
- Photo Gallery
Example of <div> tag:
<!DOCTYPE html>
<html>
<body>
<div style="width:500px;">
<div style="background-color:yellow; text-align:center;">
This is Header
</div>
<div style="background-color:pink; width:100px; height:200px; float:left; text-align:center;">
<b>Menu</b> </br>
Option 1 </br>
Option 2 </br>
Option 3 </br>
Option 4 </br>
</div>
<div style="background-color:orange; width:400px; height:200px; float:right;text-align:center;">
This is content elemet.
</div>
<div style="background-color:red; width: 500px;text-align:center;">
This is footer
</div>
</div>
</body>
</html>
|
Example of ID:
<!DOCTYPE html>
<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
}
#para2
{
text-align:right;
color:green;
}
</style>
</head>
<body>
<p> This is a simple paragraph. </p>
<p id="para1"> This is a Formatted paragraph (Para1). </p>
<p id="para2"> This is a Formatted paragraph (Para2). </p>
</body>
</html>
|
Example of class:
<!DOCTYPE html>
<html>
<head>
<style>
.center
{
text-align:center;
color:red;
}
.right
{
text-align:right;
color:green;
}
</style>
</head>
<body>
<p> This is a simple paragraph. </p>
<p class="center"> This is a Formatted paragraph (Para1). </p>
<p class="right"> This is a Formatted paragraph (Para2). </p>
<h1 class="center"> This is a heading </h1>
</body>
</html>
|
Example of margin:
<!DOCTYPE html>
<html>
<head>
<style>
p
{
background: yellow;
color:red;
}
p.margin
{
margin-top:100px;
margin-bottom:100px;
margin-left:100px;
margin-right:200px;
}
</style>
</head>
<body>
<p> This is a paragraph </p>
<p class="margin"> This is formatted text </p>
</body>
</html>
|
Example of Photo Gallery:
<!DOCTYPE html>
<html>
<head>
<style>
div.img
{
margin:5px;
padding:5px;
border:2px solid black;
float:left;
text-align:center;
}
div.img img
{
margin:5px;
border:2px solid black;
}
div.img a:hover img
{
border:2px solid blue;
}
div.desc
{
text-align:center;
width:120px;
margin:5px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="http://wordlesstech.com/wp-content/uploads/2013/11/Qatar-2022-FIFA-World-Cup-Stadium-by-Zaha-Hadid-2.jpg">
<img src="http://wordlesstech.com/wp-content/uploads/2013/11/Qatar-2022-FIFA-World-Cup-Stadium-by-Zaha-Hadid-2.jpg" width="110px" height="90px"/>
</div>
<div class="desc">
Add a description of the image
</div>
<div class="img">
<a target="_blank" href="http://d.ibtimes.co.uk/en/full/1382212/fifa-world-cup-2014.jpg">
<img src="http://d.ibtimes.co.uk/en/full/1382212/fifa-world-cup-2014.jpg" width="110px" height="90px"/>
</div>
<div class="desc">
Add a description of the image
</div>
<div class="img">
<a target="_blank" href="http://d1mxyp5ceukbya.cloudfront.net/images/2014-world-cup-logo.jpg">
<img src="http://d1mxyp5ceukbya.cloudfront.net/images/2014-world-cup-logo.jpg" width="110px" height="90px"/>
</div>
<div class="desc">
Add a description of the image
</div>
<div class="img">
<a target="_blank" href="http://www.bobswatches.com/rolex-blog/wp-content/uploads/2014/06/World-Cup-2014-Stadiums.jpg">
<img src="http://www.bobswatches.com/rolex-blog/wp-content/uploads/2014/06/World-Cup-2014-Stadiums.jpg" width="110px" height="90px"/>
</div>
<div class="desc">
Add a description of the image
</div>
</body>
</html>
|
No comments:
Post a Comment