Responsive Website Using HTML5 and CSS

Hello there! Here I am going to show you the tutorial for making a Responsive Website Using CSS and HTML5. As we know that HTML5 helps in making the structure of our website and CSS helps in designing it. With just a few lines of CSS code, you will be able to make a simple and good looking website.

So let us see how I have written this code.

Making a Responsive Website using HTML5 and CSS

Firstly, we write <!DOCTYPEHTML> tag which defines the page for you. Then comes the most important tag <HTML> which defines the complete page structure. Above all, HTML is not case-sensitive so caps or small does not matter.

Here, you can see how we created our title. We use the <title> tag to give the title of our website. We write headings in <h1> tag. <font> tag helps us to make changes in the font like font size, font style, etc.

Styling the page:

Secondly, we use <style> tag to give style to our HTML document. <style> tag is used to specify how HTML elements would appear when we open our web page in a browser. Likewise, we can put many <style> tags in our HTML document. Moreover, using CSS, we can write different elements with their properties in it. For instance, I have written a background-image element to put a background-image on the page.

body {
background-image: url('cup.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center;
height=100%;
width=100%;
}

Image can be edited as per our choice. In other words, we can change the size of the background image and its alignment. A fixed attribute tells that our background would not move even if we scroll the page.

Putting Header and Footer:

Similarly, we can put elements like header, footer, give margins, the padding on our page too. <Header> defines how the top of the page would like. It is written in <body> tag. After that, Footer is used referring to a section located at the bottom.
Finally, we have designed our background setup. Similarly, we can set properties in the links too. For example, I have used Hover so that when we take our mouse cursor there, it would get highlighted and would look different. This would make the user feel that this is some special link.

a {
color: black;
font-weight:bold;
}

Now we make our navigation tab. This helps us to navigate to different pages of the website made. Therefore, we use <nav> tag for it. Meanwhile, we can put color and font-style to our navigation bar also.

<Li><A HREF="#">HOME </A></LI><br>
<LI><A HREF="#">ABOUT </A></LI><br>
<LI> <A HREF="#">GALLERY </A></LI><br >
<LI> <A HREF="#">CONTACT </A></LI></br ></br ></br >

Login Form

Lastly, you can see that I have made a Login Form. Mostly, it is in present in places where you need to login into the website to see other aspects of the websites. We use <form> tag to make form to put login details in it. In addition to <form> tag we put <fieldset> tag to make an outline box.

<fieldset class="ff">
<LEGEND>
LOGIN FORM
</LEGEND>
<FORM>
USERNAME:<INPUT TYPE="TEXT"><BR>
PASSWORD:<INPUT TYPE="PASSWORD"><BR>
GENDER:<INPUT TYPE="RADIO" NAME="R1">MALE
<INPUT TYPE="RADIO" NAME="R1">FEMALE <BR>
ADDRESS:&nbsp;&nbsp;
<TEXTAREA>
</TEXTAREA>
<INPUT TYPE="SUBMIT">
</FORM>
</FIELDSET>
<div class="footer">
<p>ALL RIGHTS ARE RESERVED</p>
</div>
</HTML>

There can be elements like these in <form> tag :-

<input>
<textarea>
<button>
<select>
<button>

For instance, I have made radio-buttons for gender. Similarly I have made text-box for putting name and address.More importantly, we can add any other thing in this form if we want. <Legend> tag is used to write the name of the form.

CONCLUSION

In conclusion, I want to say that this is a simple way to create a responsive website using HTML5 and CSS. We can make our website even better and good-looking by adding more and more tags and attributes. By this tutorial, you can also make your responsive website.