If you’re on a quest trying to learn how to make a web page then you have come to the right place. Making a basic web page is easy, but just like anything else, its only easy if you already know how to do it.
You don’t need any special software to make a web page. You can use Notepad which comes already installed with all Windows operating systems so most people already have it and are familiar with it. Using a program dedicated to creating a web page can make like much easier but it is recommended that you get the basics down first. Understanding the basics will help you in the long run when working with other programs to know where errors are occurring and if extra code is unnecessarily being thrown in.
First thing you want to do, obviously, is start up Notepad. Once you have Notepad started you will want to save the page. Nothing is worse than working on a project only to lose all your hard work. Create a folder for all your work and save your file as index.html. We want to use index.html since it is the default web page that a browser will look for when coming to your web site. There are a couple different ways you can save your web page depending on the technology you want to use. Browsers will look for the default web page in this order:
index.htm – Can’t find it, so looks for…
index.html – Can’t find this, so looks for…
index.shtml – Not finding this either, so looks for…
index.php
I only mention this to help you avoid frustration. Many times someone will have the index.htm file already in their folder and then upload an index.html file and not be able to figure out why their page isn’t showing up.
Once you have saved the web page and added some code to it you will be able to fire up your browser, navigate to where you saved your page and open and view your work on your web page. Each time you make a change to the code in Notepad and save it, you can refresh your browser to see your latest changes.
There are two main tags you need to start your web page:
<html>
</html>
As you can see there are two tags. The first tag is the opening tag. The second tag is the closing tag. You can see that there is a backlash before the html in the closing tag. This backlash will be in all closing tags. It is a signal that the tag is complete. All tags must have an open and closing tag. Though html is more forgiving if you forget a closing tag. It can often cause problems and it is a good habit to make sure all your tags are closed properly.
So now we have our two main tags that identify this page as a web page. Next we need to include the head tag.
<html>
<head>
</head>
</html>
As you can see the head tag also has its closing tag and it is located inside the html tag. The html tag will always be the first and last tag on your web page.
The head tag can contain various other tags. Some of which include the Title, Meta Name Description and Meta Name Keywords.
Most of these tags are included more to identify what the page is about to the search engines. The only tag that will show up on the web page is the Title tag. This tag will show up in the title bar of the user’s web browser.
<html>
<head>
<title> My Awesome Web Page </title>
</head>
</html>
Now most of your work is going to be inside of the body tag. The body tag comes after the head tag and contains all your page’s content.
<html>
<head>
<title> My Awesome Web Page </title>
</head>
<body>
</body>
</html>
As you have probably noticed, the head and the body tag all have their closing tags to show they are finished their work.
Now, within the body tag is where you will be doing most of your work. The majority of your text will be placed with in the paragraph tag <p> </p>
<html>
<head>
<title> My Awesome Web Page </title>
</head>
<body>
<p> My first awesome paragraph</p>
</body>
</html>
Now html has a way of giving a higher importance to some of your text. This is done by using the header tags. The header tags run from h1 to h6 with h1 being the most important tag. This allows you to tell the search engines and users what your page is all about. The H tag will normally precede the text in your paragraph tag.
<html>
<head>
<title> My Awesome Web Page </title>
</head>
<body>
<h1> My First Awesome Header Tag </h1>
<p> My first awesome paragraph</p>
</body>
</html>
If you had some sub paragraphs they would look as follows.
<html>
<head>
<title> My Awesome Web Page </title>
</head>
<body>
<h1> My First Awesome Header </h1>
<p> My first awesome paragraph</p>
<h1> My Second Awesome Header </h1>
<p> My second awesome paragraph</p>
<h1> My Third Awesome Header </h1>
<p> My third awesome paragraph</p>
</body>
</html>
These are the minimal basics on how to make a web page. This will get you started and soon we will move on to making your web page look a little livelier with colors, fonts and images.
