Web Development Tutorial for Beginners (P-2, Part-5) – How to build webpages with HTML, CSS.

 

code: index.html

<!DOCTYPE html>
<html>
<head>
<title>bksit_project_2</title>
<meta name=”author” content=”your name”/>
<meta name=”description” content=””/>
<link rel=”stylesheet” href=”style.css” type=”text/css”/>
<meta charset =”utf-8″>
</head>
<body>
<div id=”page”>
<div id=”logo”>
<div id=”login”>
<h4><a href=”/”>login/logout</a></h4>
</div>
<h1><img src=”logo.png” width=”148″ height=”46″ alt=””/>
</div>
<div id=”nav”>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”index.html”>About us</a></li>
<li><a href=”index.html”>Programme</a></li>
<li><a href=”index.html”>Gallery</a></li>
<li><a href=”index.html”>contact</a></li>
</div>
<div id=”hederimage”>
<h1><img src=”emotionheader_4.jpg” width=”1309″ height=”574″ alt=””/></h1>
</div>
<div id=”content”>
<h2>Let’s go to Programming Schoolh2>
<div id=”sidebar”>
<h4>Latest Tutorial</h4>
</body>
</html>

code: style.css

p{line-heigh: 1em;}
h1,h2, h3, h4{
line-heigh:1.1em;
margin:00:5em 0;
}
h1{}
h2{}
a{
color: black;
text-decoration: none;
}
body{
font-family: arial;
font-size: 80%;
font-weight:normal;
line-heigh:1.2em;
width: 100%;
margin:0;
background:#eee;
}
#page{margin: 20px;}
#login{
width: 35%;
margin-top: 5px;
text-align: right;
float: right;
padding:5px;
text-shadow: #E1070B;
color:grey;
} #login a{
text-align:right;
text-transform: uppercase;
font-size: 80%;
color: #000000;
}
#logo{
width:97%;
margin-top:5px;
display: inline-block;
background:#6DE1F4;
padding: 20px;
}
#nav{
width:100%;
text-align:left;
float: left;
heigh: 43px;
background: #03073e;
}
#nav ul{}
#nav ul li{
display: inline-block;
height:15px;
}
#nav ul li a{
padding: 15px;
background: #569F0B;
color: white;
}
#nav ul li a:hover{
background-color: #03073e;
box-shadow: 0px 1px 1px #666;
}
#nav ul li a: active{
background-color: #ff8f00;
}
#hederimage{
width: 100%;
}

This Blog Just Shared all about C, C++, Algorithm Design, Visual Basic, Sql, HTML, CSS, PHP, Java, My SQL, programming logic coding and Tutorial Videos. If you want to get more tutorials and update, please subscribe our site.

 

Leave a Reply

Your email address will not be published. Required fields are marked *