Viruses Explained What are Trojans? What are Worms? What are Rootkits? Free AntiVirus Latest Virus Threats Top 10 Anti Virus Malware Tutorials
Spyware Explained Malware Tutorials Free Anti Spyware Manual Tips
FREE Anti Virus FREE Anti Spyware FREE Online Scanners Definition Updates Manual Updates BootUp Anti Virus Portable Protection Rootkit Removal Top Security Tips
HTML Tutorial WORD Tutorial EXCEL Tutorial Computer Beginners Windows Registry Top Security Tips Malware Tutorials
Web Templates Word Templates Word Processing

Home Page
Free Anti Virus
Free Anti Spyware
Free Online Scanners
Free USB Anti Virus
Bootable Anti Virus
Rootkit Removal
Latest Virus Threats
Viruses Explained
Spyware Explained
Windows Registry
Top 10 Antivirus
Manual Updates
Definition Updates
Malware Tutorials

Computer Basics
HTML Tutorials
Free Web Templates
Word Tutorials
Excel Tutorials

CV Creation
Free CV Templates
Free CV Examples

   IP: 54.92.142.198

Beginners HTML   Beginners Plus HTML   CSS Style Sheets   <table> tag   <div> tag  
HTML Links   Free Web Templates  

Beginners HTML: LESSON 1


Hypertext Markup Language is a collection of tags with left and right brackets. The Web designer or creator then decides what goes between the tags.

Mainly You will have an opening tag and one that closes that particular tag, see html below in blue. Further in the lessons you will see that you can put variables into the tags to do different things.

<html>

   <head>
     Mainly for content at the top of your webpage.
   </head>

   <body>
     This would be the main body area of your webpage.
   </body>

</html>


To get started we will forget about the science and go straight to using HTML.

Step 1:
Open Notepad or Wordpad etc. Copy and Paste the HTML code seen in blue above into it or type it if you prefer. The spacing of each tag from the left hand side of the page will not matter.

Step 2:
Now you need to save this code as a html file. Go to File then Save As and save the file as first.html onto your desktop. The .html extension is essential. You should now see the file first.html as a browser icon on your desktop.

Step 3:
Open the file you have just created by double clicking it. A browser window should open with only the text between the tags <head> and <body>. (see below in blue)

Mainly for content at the top of your webpage. This would be the main body area of your webpage.

The reason only the text is showing and the tags do not is because the tags are there as commands for the computer to process and text between them is for the viewer of the webpage. Close the window.

Step 4:
Understand the concept that html code (tags) are used to manipulate the webpage into doing various things e.g. moving text, making it bigger or changing colour etc.

Step 5:
Opening your file to edit the html and plainly opening the html file are two fundamental differences. Opening the file to edit is to see your html code and opening the html file plain is to view it as a webpage etc. Right Click the icon on your desktop first.html and choose open with Notepad or Wordpad etc. Its now opened for editing. Close the file.

Step 6:
Now lets use html to change the look of the first.html file. The break tag <br> is used when you want to end a line and allow the text to begin on a new line or to put spaces between lines. So lets put a break between the two sentences that we have already created (shown in blue above).

As you can see below the break tag is in after the first sentence. So open your file to edit make the change as shown below, then save the file in its new state. Now open the file plainly by double clicking the icon and see the difference.

<html>

   <head>
     Mainly for content at the top of your webpage. <br>
   </head>

   <body>
     This would be the main body area of your webpage.
   </body>

</html>


See below in blue as to how the sentences should look.

Mainly for content at the top of your webpage.
This would be the main body area of your webpage.


You can practice opening the file to edit and make changes with the break tag and experiment. If your browser page looks like changes have not taken effect, remember to refresh the browser as changes are not automatic.

Beginners HTML: LESSON 2


There are some more technical parts to a webpage but we are going to keep it simple for now. In this lesson we are going to have a webpage name, subtitle, some main content etc. We will also use different colours and different sizes of text.

Step 1:
We need to make certain text bigger, like the title etc. So we will use a special tag called a header tag. These tags go from <h1> to <h6>, with <h1> showing the larger text. So we choose the webpage title and place it between these tags. Remember you use a start and an end tag the forward slash on the end tag. Also header tags will automatically make a break to the next line, so you wont need a <br> tag.

Copy and Paste the html below into notepad etc and SaveAs webpage.html onto your desktop. Go back to lesson 1 if you need to refresh on this.

<html>

   <head>
    <h1>My Webpage.</h1>
    <h2>My Webpage.</h2>
    <h3>My Webpage.</h3>
   </head>

   <body>
     This would be the main body area of your webpage.
   </body>

</html>


Step 2:
Open the file webpage.html that you have created for viewing by double clicking on it. It should look like the text below. See how each line of text differs in size and now look at the code in Step 1 in blue. Can you see whats happening?

My Webpage.

My Webpage.

My Webpage.

As you can see above there are three headings, so pick <h1> as your main title. Delete the others as they were only there as examples. You should only be left with <h1>My Webpage.</h1> between the <head> tags. Now use the <h3> tag to put two subheadings with content between the <body> tags. (See below) Feel free to put any Title, Subtitle or text inside these tags.

<html>

   <head>
    <h1>My Webpage.</h1>
   </head>

   <body>
    <h3>Webpage Subtitle1.</h3>
     This is content under Subtitle1, feel free to type your own content.<br>
     This is content under Subtitle1, feel free to type your own content.<br>
     This is content under Subtitle1, feel free to type your own content.<br>

    <h3>Webpage Subtitle2.</h3>
     This is content under Subtitle2, feel free to type your own content.<br>
     This is content under Subtitle2, feel free to type your own content.<br>
     This is content under Subtitle2, feel free to type your own content.<br>
   </body>

</html>


Remember the subtitle tags create their own breaks, but notice where we use the break tags to start the text on a new line. To finish Step 2, edit your webpage.html the same as the code above and save it. Or you could create a new file with the code above. (see Lesson 1). Open it to see how it looks in the browser.

Step 3:
Now lets put some format and colour into the webpage. The first thing to do is to make a background colour. To do this we need to edit the first <body> tag. <body bgcolor="orange"> you can use another common colour if you want. Customised colours are for a later lesson.

Also we can partition the Webpage title using a horizontal bar by using a <hr> tag. You can place this at the end of your webtitle code. (see below)
<h1>My Webpage.</h1><hr> You only need one tag at the end.

Now edit your last file to make these changes and see the difference in your page design. Feel free to experiment with different variations.

My Webpage


Webpage Subtitle1.

This is content under Subtitle1, feel free to type your own content.
This is content under Subtitle1, feel free to type your own content.
This is content under Subtitle1, feel free to type your own content.

Webpage Subtitle2.

This is content under Subtitle2, feel free to type your own content.
This is content under Subtitle2, feel free to type your own content.
This is content under Subtitle2, feel free to type your own content.

Step 4: This would be a good time to tell you that html can get much more advanced but just take it easy and get these main starting points out of the way.

Now lets insert an image into the page. This lesson is assuming that your html file is saved to the desktop. We need to save an image to your desktop.

If you float your mouse pointer to the top left hand side of this webpage over the top left image, then right click on it and Save Picture As. The name of the image will be "headimageleft.jpg" without the quotes. Of course you can use your own image. Save this to your desktop. Now we need the insert image tag (see below)
<img src="headimageleft.jpg">

Notice the tag has the image name inside. This is very important once the image is in the same directory as the html file, in your case they are both on the desktop, then the tag will insert the image. Put the image into the head section of your webpage, see below.

   <head>
    <img src="headimageleft.jpg">
    <h1>My Webpage.</h1>
   </head>


You can practice moving this image tag up and down your code.

Step 5: Now lets change the colour of some specific Text. We need the font tags <font> </font>. Lets change the colour of the title text. (See below)
<font color="blue"><h1>My Webpage.</h1></font> You should also realise at this stage that you can put a variable into a tag, in this case we put the variable "blue" into the font tag. Look below to see all the html code generated so far in your file webpage.html

<html>

   <head>
    <img src="headimageleft.jpg">
    <font color="blue"><h1>My Webpage.</h1></font><hr>
   </head>

   <body bgcolor="orange">
    <h3>Webpage Subtitle1.</h3>
     This is content under Subtitle1, feel free to type your own content.<br>
     This is content under Subtitle1, feel free to type your own content.<br>

    <h3>Webpage Subtitle2.</h3>
     This is content under Subtitle2, feel free to type your own content.<br>
     This is content under Subtitle2, feel free to type your own content.<br>
   </body>

</html>


At this stage you should now be able to look at this code and using your lessons, explain whats happening on each line of html code.

Beginners HTML: LESSON 3


This lesson is about creating multiple html files so as to link between them e.g. Home Page, Contact Page etc.

If we are going to be dealing with multiple files then its a good idea to create a folder to store them in. create a folder on your desktop called html. Now put the file webpage.html and the image headimageleft.jpg into it.

You can use your own images etc but be sure to put them in the folder and make sure the image tag is looking for that image.

Step 1:
To create links between pages you need to understand the two key areas. Firstly you need a tag with a link to another html file and the second thing is you need the file to exist. Lets explain the tag that will link to another file. See Below

<a href="contact.html">Contact </a>

Without going into to much detail above is a hyperlink format: (a) is the anchor tag, (href) is the link attribute, (contact.html) is the file to be linked to and the text (Contact) is the name that will appear in the webpage that will be the actual link.

Step 2:
Lets create four links Home Page, Contact Us, Services and Products. Also notice there are no break tags so in the actual webpage the links will appear horizontal. See code below.

<a href="webpage.html">Home Page</a>
<a href="contact.html">Contact Us</a>
<a href="services.html">Services</a>
<a href="products.html">Products</a>


We already have a file called webpage.html we will make this our Home Page and work from there. So we start by updating the code in webpage.html by inserting these four link tags. See below

<html>

   <head>
    <img src="headimageleft.jpg">
    <font color="blue"><h1>My Webpage.</h1></font><hr>
    <a href="webpage.html">Home Page</a>
    <a href="contact.html">Contact Us</a>
    <a href="services.html">Services</a>
    <a href="products.html">Products</a>
   </head>

   <body bgcolor="orange">
    <h3>Webpage Subtitle1.</h3>
     This is content under Subtitle1, feel free to type your own content.<br>
     This is content under Subtitle1, feel free to type your own content.<br>

    <h3>Webpage Subtitle2.</h3>
     This is content under Subtitle2, feel free to type your own content.<br>
     This is content under Subtitle2, feel free to type your own content.<br>
   </body>

</html>


Step 3:
Lets check to see what we should have so far: The folder html, inside this folder we should have the file webpage.html with all the code we have generated so far. We should also have an image with the same name as is in the image tag.

You could not wish for a better situation to use the SaveAS option on a computer as we will in this step. We will use the file webpage.html to create the 3 other files contact.html, services.html and products.html that we need.

Open the file webpage.html for editing e.g. you want to work on the code. Then change the first Subtitle to Contact Page see below
<h3>Contact Page.</h3>

Now use SaveAs to save that file as contact.html into the html folder. In your folder you should now have 2 html files webpage.html and contact.html

Now repeat this to generate services.html and products.html and remember to change the first Subheading in each to distinguish between each generated page.

Troubleshoot:
You should now have 4 pages with content all linked to each other and ready for you to do as you please. But lets check out possible problems.

When using html double check the code is correct, it needs to be precise.
When using the hyperlink tag, file name must be exact.
When using the image tag, image name must be exact
Images and files must be in the same folder, with this code.
Cross reference your code with code on this site.


If you practice and experiment with these lessons to get different effects, then you could be ready for Beginners Plus HTML.