How to add Simple html Page in our website: A few pages for each website that play a very important role. If our website belongs to a company or organization then these pages are very important for that website. Or if you are a blogger, you are for blogging then these pages of your blogging post website are very important.
If you are creating a blog post website, you want to earn money by monetizing Google AdSense on your website. Then all these pages are very important for your website. Because if all these pages are not on your website i.e. your blog post website then Google will never approve AdSense for your website. How to add Simple html Page in our website.
Also Read: Insert html form Data to mysqli Database using PHP
Also Read: Website Design and Website Development-Full Guideline, Step-1
So friends, through today’s article we will learn how to create Simple html Page? on a website and how to add it with the menu bar? html website example. Friends, if you know how to create a menu bar?, you can see the STEP-2 article in our web design and development session.
We learned in the previous two steps of this website design and website development session how to create pages, that is, how to create HTML files. All the pages that are very important for our website should be created in the same way. We will create one or two example pages in this article. You can customize the pages to suit your needs.
How Create Simple html Page?
Friends, I hope you remember where we will create all the HTML files of our website. We all know the place where we need to create all the files that are needed for our website, not just HTML. Similarly, to create all the pages we need today, we need to login to our web hosting cPanel.
After logging in to cPanel we need to open the file manager option then from there we need to open the folder of public_html.
After login in to cPanel -> Click file manager -> Click public_html -> Click on +File from menu bar -> Enter file name -> Click Create New File.
How Create Simple html Page?
How Create Simple About us html Page?
Of all the important pages on the website, the About Us page is the most important for a website. It contains all the details of a website, for example, if the website belongs to a company or an organization, then all the details of that organization or company are given in it. How to add Simple html Page in our website.
If your website belongs to a company organization then you must make this about page. When a user visits your website, they first look for your About page. If the user does not find it, the user will leave the website
This page is very important for Google AdSense. Without this, Google AdSense will never approve of your website. So be sure to create About page before applying for AdSense.
Below are the steps of how to create about page –
After login in to cPanel -> Click file manager -> Click public_html -> Click on +File from menu bar -> Enter file name (about.html) -> Click Create New File.
How Create Simple About Us html Page?
After creating the About Us page, we will add some text to this page to see if it works properly. Then run the page to see if the page is working properly. We already know how to edit different types of files. Follow the option below.
Right click on About file -> Click Edit option -> Again click Edit option -> Then This CSS file editor open new tab.
How to edit About Us html page?
I wrote a few lines in the About Page for example. You can write your own lines in the page according to your needs. “Blogging Post, We are one of the best website for Different types of Articles, Like Education, Insurance, loan, Cryptocurrency, Tips & Tricks and more, Guidance and helping everyone with sharing awesome article daily.“.
After writing a few lines in the About page, click on the Save Change option at the top right which will save the page.
To run the page, type your domain into your browser and add the name of your page or file with / to it. For example – https://www.yourdomain.com/about.html or http://yourdomain.com/about.html
You can see the results but we can see that the text looks too small so we have to use a tag of HTML to make the text bigger. Let’s learn how to use this tag. This is the name of the tag <font>. We can use this to make the size of any text on the HTML page bigger and smaller, for example–
<html>
<title>About us</title>
<body>
<font size='5'>
Blogging Post, We are one of the best website for Different types of Articles, Like Education, Insurance, loan, Cryptocurrency, Tips & Tricks and more, Guidance and helping everyone with sharing awesome article daily.
</font>
</body>
</html>“Friends, one thing to keep in mind is that the thing we have already discussed is that if you open an html tag, you must close it, otherwise there will be problems in HTML coding.“
For example – you can see here I have opened the <font> tag at the beginning of the text and at the end of the text I am closing that </font> tag.
Let’s reload our page once again to see if the text size has increased –
How Create Simple Contact us html Page?
Friends, for another example, we will create a contact us page. This page is very important for a website just like the About page. This page is very important for Google AdSense. Also, if your website is an organization of a company, then of course this page will be needed for users to communicate. How to add Simple html Page in our website.
After login in to cPanel -> Click file manager -> Click public_html -> Click on +File from menu bar -> Enter file name (contact.html) -> Click Create New File.
How Create Simple Contact Us html Page?
After creating the contact page, we need to edit this page to add all the contact information. We can add email ID, mobile number, address etc. as a line of communication in this page. Now we will run the page by adding some contact examples to see if the page is working properly.
Right click on Contact file -> Click Edit option -> Again click Edit option -> Then This CSS file editor open new tab.
How to edit About Us html page?
<html>
<title>Contact us</title>
<body>
<font size='5'>
Name - Blogging Post<br>
Mobile No - 00 9999 99 9999<br>
Email - yourwebsiteemail@yourdomain.com<br>
Address - Your Office Address
</font>
</body>
</html>To run the page, type your domain into your browser and add the name of your page or file with / to it. For example – https://www.yourdomain.com/contact.html or http://yourdomain.com/contact.html
You can see the results after running this page –
How to link to each page in the menu bar?
Friends, we see that we have to use the URL of our page to run each page. To resolve this issue, we need to associate each page with the navigation menu bar. I hope you remember, We coded the HTML code in our navigation menu bar with our index.html file.
In order to associate our pages with the navigation menu bar, we need to make some minor changes to the navigation menu bar HTML code in our index.html file. So let’s make the change.
Right click on Index html file -> Click Edit option -> Again click Edit option -> Then This CSS file editor open new tab.
How to edit Index html page for add page link
Here we add the names of all the pages in our navigation menu bar. All we have to do is add the extension to the file name we created (about.html or contact.html). The code below shows how to do this.
<!DOCTYPE html>
<html lang="en">
<title>Welcome to Blogging Post</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="menubar.css">
<div class="topnavmanu" id="myTopnav">
<a href="" class="active">Home</a>
<a href="">News</a>
<a href="contact.html">Contact</a> <!-- Check here -------------->
<a href="about.html">About</a> <!-- Check here -------------->
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
Menu
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnavmanu") {
x.className += " responsive";
} else {
x.className = "topnavmanu";
}
}
</script>
<body>
<center><h1>This is my first webpage welcome to Blogging Post.com</h1></center>
<center>
<font size="6" color="green">Home page working successfully</font>
</center>
</body>
</html>Now you open your website in the domain browser and click on these two pages to see if your two pages are opening properly. How to add Simple html Page in our website.
The last few words
Friends, I hope you enjoyed today’s article. You may have missed a lot of this article, so if you think you do not understand something, please let us know in the comment box. You must share this article with your friends and family.
If you have any queries regarding this article please let us know in the comment box and we will try to resolve your comment as soon as possible.