Lesson4.html :
<!DOCTYPE html>
<html>
<head>
<title>Web Designing Course Lesson4, External-page css</title>
<link rel="stylesheet"type="text/css"href="styles.css"media="screen">
</head>
<body>
<header>
<hgroup>
<h1>Web Designing Course Lesson4</h1>
<h2>Learn HTML 5 and CSS 3</h2>
</hgroup>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About us</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h1>This is my first article -Lesson4</h1>
<p>This is a Tvs Tree Technologies world-wide website,
In this we can learn different technologies</p>
<p>In this website you can learn both front-end and back-end technologies</p>
</article>
</section>
<footer>Copyright © www.tvstreetechnologies.blogspot.com</footer>
</body>
</html>
styles.css:
body{
font-family:arial,sans-serif;
background-color:#C3DDDD;
}
header{
width:80%;
background-color:#094462;
color:white;
margin-left:auto;
margin-right:auto;
padding:10px;
overflow:hidden;
}
h1{
line-height:5px;
font-size:1.5em;
}
hgroup h1{
font-size:2em;
}
hgroup h2{
font-size:1.2em;
}
hgroup{
width:70%;
float:left;
}
nav{
width:30%;
float:right;
}
nav ul{
list-style-type:none;
}
nav li{
float:left;
margin-right:10px;
}
section{
width:80%;
background-color:white;
margin-left:auto;
margin-right:auto;
border-width:5px;
border-style:solid;
border-color:#094462;
padding:5px;
}
footer{
width:80%;
background-color:#094462;
color:white;
margin-left:auto;
margin-right:auto;
padding:10px;
}
Other sub topics:
A Element.html :
<!DOCTYPE html>
<html>
<head>
<title>Web Designing Course Lesson 4</title>
</head>
<body>
<a href="List Types.html">Go to list types</a>
</body>
</html>
List Types.html :
<!DOCTYPE html>
<html>
<head>
<title>Web Designing Course Lesson 4</title>
</head>
<body>
<h3>Names of My friends(Un-order list) :</h3>
<ul>
<li>Vijay</li>
<li>Pavan</li>
<li>Raju</li>
<li>Vikram</li>
</ul>
<h2>Names of Months(Order list) :</h2>
<ol>
<li>Jan</li>
<li>Feb</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
</ol>
</body>
</html>
navigation.html :
<!DOCTYPE html>
<html>
<head>
<title>Web Designing Course Lesson 4</title>
</head>
<body>
<ul>
<li><a href="#"> Home</a> </li>
<li><a href="#"> Contact</a> </li>
<li><a href="#"> About us</a> </li>
</ul>
</body>
</html>
Output:
No comments:
Post a Comment