Basic HTML Web Page Example Code (HTML tags for First Web Site)

Basic HTML Code / Tags

For Simple Web Page

This page is a very simple basic webpage tutorial to show 'how a web page works' i.e. 'how to create a 'first' basic simple HTML page'.

For an alternate start, some prefer A Basic HTML Generator (HTML editor) - or more advanced users may prefer the newer CSS Template Generator or the complete PHP (includes) Template Tutorial - followed by a complete php / css / html combination Template Code Maker.

This page shows how to practice / make changes on your local computer. After the index.html file has been created, it can be uploaded to the host server with FTP software (Such as: WS-FTP LE Tutorial.)

To create a simple web page, the first step is to learn a few HTML tags. And copy n paste, the HTML tags into a file using a text editor (such as WordPad or notepad). Then save the file as an ASCII (DOS text) file with the name index.html. BTW: index.html is the default name for the homepage on most web host.

Here are some basic HTML tags that show how a web page is created. For a fast start, just copy n paste this code into a text editor - save as index.html. Then read the 'practice' tips on this page.

<html>

<head>
<title> favorites / bookmark title goes here </title>
</head>

<body text="blue">

<h1> My first page </h1>

This is my first web page and I can say anything I want in here - I do that by putting text or images in the body section - where I'm typing right now :)

</body>

</html>
Notes:

Most HTML tags require an 'opening' and 'closing'
A web page requires an opening and closing HTML tag i.e. <html> .. web page here.. </html>
The top section of the web page requires a 'head' section i.e. <head> ... </head>
Inside the 'head' you can place a title (which will be the name you see when you add the site to your favorites / bookmarks) i.e. <head> <title> ..text for favorites..</title></head>
After closing the <head>, the next section is the <body> In other words the body is inside the <html> and </html> but it's below the <head> ... </head> section.

Summary:
<html>
<head><title> ... favorites title ... </title></head>
<body>
.... all the web page is here ...
</body>
</html>

That's really all you need for a web page e.g :

Just put in a title (favorite bookmark)
Add some text or images in the body section
Save the file as ASCII (text) file with the name index.html
Then upload the index.html file to the public_html (www) directory

Practice:
Now Practice Practice Practice before you upload / publish your web page. In other words, it is better to practice and finalize your web page on your local computer. To do this with MSIE browser:

Locate your index.html file on the hard drive (i.e. know the path)
Open MSIE browser (either work offline or online)
From MSIE, use 'file' 'open' and 'browse' to the location of the index.html - then 'open' - 'ok'
Now that the web page is open on your screen, just minimize it so you can edit / make changes.
Open up a text editor (such as WordPad / notepad) and load the index.html file. Make changes to the file such as adding more text or use the <font> tag with a closing = </font>
Save the new index.html i.e. just use save to overwrite the old index.html.
Now restore (bring back up) the MSIE browser window and click on refresh. The new reworked web page will now appear.

Summary: By saving the index.html file - then opening it in MSIE browser - then switching back to the text editor - making changes to the info between the body tags - saving the changes - restore the MSIE view - use refresh. Using this 'back n forth' procedure you can design - finalize the web page - all on the local computer. Then when it's finished just upload it to your web host.

Second Example (more tags :)

After playing with the tags in the first example, here a few more to 'practice' with:

<html>

<head>
<title> favorites / bookmark title goes here </title>
</head>

<body text="blue">

<h2> second page - smaller heading e.g. h2 </h2>

This is my second web page with a few more HTML tags.
Let's start with a tag for a horizontal line = <hr>

Now let's put in an image (that is in the same folder as this file so we don't have to put the full path / URL

<img src="/img/spacer.gif">

</body>

</html>

This example only added two new tags but it shows how to improve you page as you learn new HTML tags. Also keep in mind that a lot of HTML tags have more attributes. For example, the <hr> tag in this example could be changed to <hr size=4>

Now that you know the basic 'structure' of a web page all you need to do is start learning HTML tags (and their attributes) to use in the <body> ......... </body> sections.