In HTML, we can easily make a footer in the document which is to be displayed on a web page using the following different two methods:
- Using the Html Tag
- Using an Internal CSS
Using Html Tag
If we want to make the footer in the Html document using the Html tag then we have to follow the steps which are given below. Using these steps, we can easily view the footer on a web page in the browser:
Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the Html for making a footer.
<!Doctype Html>
<Html>
<Head>
<Title>
Make a footer using Html tag
</Title>
</Head>
<Body>
Hello User!.... <br>
Html Tutorial <br>
This page helps us to understand how to make a footer. <br>
<br>
And, this section helps you to understand how to make a footer using Html tag.
You are at google Site....
</Body>
</Html> Step 2: Now, we have to place the cursor at the starting of that text which we want to insert in footer. And, then type the <footer> tag at that point.
<footer>
The Text which we want to insert in footer. Step 3: And, after that we have to close the </footer> tag.
<footer>
The Text which we want to insert in footer.
</footer> Step 4: And, at last, we have to save the Html file and then run the file in the browser.
<!Doctype Html>
<Html>
<Head>
<Title>
Make a footer using Html tag
</Title>
</Head>
<Body>
<header>
Html Tutorial <br>
This page helps us to understand how to make a footer. <br>
<br>
And, this section helps you to understand how to make a footer using Html tag.
</header>
<footer>
@Copyright JavaTpoint 2020- All Right Reserved.
</footer>
</Body>
</Html> The output of above Html code is shown in the following screenshot:
Using Internal CSS
If we want to make the footer in the Html document using the Internal Cascading style sheet then we have to follow the steps which are given below. Using these steps, we can easily make a stylish footer:
Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the Internal CSS for making a footer.
<!Doctype Html>
<Html>
<Head>
<Title>
Make a footer using Internal CSS and Html
</Title>
</Head>
<Body>
Hello User!.... <br>
Html Tutorial <br>
This page helps us to understand how to make a footer. <br>
<br>
And, this section helps you to understand how to make a footer using Internal Cascading Style Sheet and Html.
@Copyright JavaTpoint 2020- All Right Reserved.
</Body>
</Html> Step 2: Now, we have to place the cursor in the head tag, just after the closing of title tag in the Html document and then define the starting and closing tag of the <style> tag as shown in the following block.
<Head>
<Title>
Make a footer using Internal CSS and Html
</Title>
<style>
</style>
</Head> Step 3: Now, we have to make a footer class with the different properties.
<style>
.classname {
position: fixed;
left: 10px;
bottom: 5px;
right: 10px;
width: 95%;
background-color: gray;
color: white;
text-align: center;
}
</style> Step 4: And then, we have to define the same class in the <div> tag, which is made in Internal CSS.
<div class="classname">
The Text which we want to insert in footer.
</div> Step 5: And, at last, we have to save the Html file and then run the file in the browser.
<!Doctype Html>
<Html>
<Head>
<Title>
Make a footer using Internal CSS and Html
</Title>
<style>
.footer {
position: fixed;
left: 10px;
bottom: 5px;
right: 10px;
width: 95%;
background-color: gray;
color: white;
text-align: center;
}
</style>
</Head>
<Body>
Hello User!.... <br>
Html Tutorial <br>
This page helps us to understand how to make a footer. <br>
<br>
And, this section helps you to understand how to make a footer using Internal Cascading Style Sheet and Html.
<div class="footer">
@Copyright <a href=https://www.javatpoint.com/"> JavaTpoint </a> 2020- All Right Reserved.
</div>
</Body>
</Html> The output of above Html code is shown in the following screenshot:
