Design A homepage using html and CSS
hi everyone,
I’m here with very basic thing in web designing. Today I’m going to explain how to create and design the home page with html and CSS. For the absolute beginners ,following html code displays the basic structure of html file.
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html
Here <html></html> tags informs computer that this is a html file and all other tags are nested inside these two tags. Next <title></title>tags are nested inside<head></head>tags .After the </head> tag <body> tag starts and it terminates just before </html> tag.
ok, I’m moving to my today task. For this task you just want to have only a text editor and a web browser. Here I’m going to do this just using notepad.
At very beginning you have to create a new folder in your computer and rename it as you want. Then inside that folder create a new text file and rename it by using any name with html extension. I’m going to rename it as “home.html”. Then let’s give a title to our web page. It can be done using following codes.
<html>
<head>
<title> Designing a home page</title>
</head>
</html>Here I have given title as “Designing a home page”. Next I’m going to add the navigation bar. Here I’m going to link 3 web pages with home page as about Us, Services and Contact Us. Following codes are used to do that.
<body>
<div class=”navigation”>
<ul>
<li ><a href=”#” >Home</li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Services</a></li>
<li ><a href=”#”>Contact Us</a></li>
</ul>
</div >
</body> Now go to you html file and open it in your favorite browser,
Then you can see your web page as shown in figure 1.
Now I’m going to add a background image .for that I’m going to create another text file in the folder I created at the beginning and rename that text file as “ home.css”. You can use any name with CSS extension. Before starting coding in CSS page I link this CSS file with html file as follows.
<link rel=”stylesheet” href=”home.css”>In CSS file I’m first going to set padding and margin for the home page as follows.
*
{
margin: o;
padding: 0;
}Next I’m going to set a background image and font family for my home page. Relevant code for that is,( Here I have save the background image I’m going to use in the same folder which html and CSS files were created.
body
{
background-image:url(home2.jpg);
background-size:cover;
background-position:center;
box-sizing:border-box;
font-family:sans-serif;
}Now refresh you web page. You can see your web page as follows.
My next step is to design the navigation bar in attractive way. You also can do it by using following CSS codes.
.navigation
{
background:blue;
text-align:center;
}
.navigation li
{
display:inline-flex;
list-style:none;
color:white;
width:120px;
margin:15px;
padding:15px;
}
.navigation ul li a
{
text-decoration:none;
color:black;
}Now web page looks like in figure 3.
Next, I’m going to active home page link in my html file as follows.
<li class=”active”><a href=”#” >Home</a></li>And to design this active key in CSS file ,
.active
{
background:white;border-radius:3px;
}
Then I’m adding hover effect to the navigation bar by using followink codes in the CSS file.
.navigation a:hover{
background:white;
}Ok then, today task is over. Here is our home page finally.
Ok everyone, That’s over for today. See you next time with another part of designing of web page. Till then bye.
