In HTML, creating a footer for a webpage can be achieved through two distinct methods:
- Utilizing the HTML tag
- Implementing an Internal CSS styling approach
Using Html Tag
To create a footer in an HTML document using the HTML tag, the following steps need to be followed. By following these steps, the footer can be displayed on a webpage in a web browser:
To begin, the initial step is to input the HTML code into a text editor or access an already existing HTML file in the text editor where we intend to incorporate the HTML for creating 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 C# Tutorial Site....
</Body>
</Html>
Step 2: Next, position the cursor at the beginning of the text intended for insertion in the footer. Subsequently, input the <footer> tag at that location.
<footer>
The Text which we want to insert in footer.
Step 3 involves the subsequent action of closing the </footer> tag.
<footer>
The Text which we want to insert in footer.
</footer>
Step 4: Finally, it is necessary to save the HTML file and subsequently execute it in a web 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 C# Tutorial 2020- All Right Reserved.
</footer>
</Body>
</Html>
The screenshot below displays the result generated by the HTML code above:
Using Internal CSS
To create a footer in an HTML document with an Internal Cascading Style Sheet (CSS), we need to adhere to the following guidelines. By following these instructions, we can effortlessly design an attractive footer:
In the initial step, the Html code needs to be entered into a text editor or an already existing Html file should be opened in the text editor where Internal CSS will be applied to create 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 C# Tutorial 2020- All Right Reserved.
</Body>
</Html>
Step 2: Next, it is necessary to position the cursor within the head tag, immediately following the closure of the title tag within the HTML document. Subsequently, proceed to specify both the opening and closing tags for the <style> tag, as illustrated in the ensuing code snippet.
<Head>
<Title>
Make a footer using Internal CSS and Html
</Title>
<style>
</style>
</Head>
Step 3: Next, it is necessary to create a footer class that contains various properties.
<style>
.classname {
position: fixed;
left: 10px;
bottom: 5px;
right: 10px;
width: 95%;
background-color: gray;
color: white;
text-align: center;
}
</style>
Next, in order to proceed, it is necessary to define the identical class within the <div> element created in the Internal CSS section.
<div class="classname">
The Text which we want to insert in footer.
</div>
Step 5: Finally, it is essential to save the HTML file and proceed to execute the file in a web 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="> C# Tutorial </a> 2020- All Right Reserved.
</div>
</Body>
</Html>
The displayed result of the HTML code above can be observed in the screenshot below: