Basic HTML Tutorial

Basic HTML Tutorial
Simple HTML Tutorial Basic Lessons

Added: 2008-01-06 00:56:20

Html Help

Html Starting Tags

To make a webpage true html 4.01 you require certain tags, in future tutorials i will explain about validating html 4.01, but for now ill just show you the basic's.

The following is a standard layout of a true html 4.01 page:

<html>
<head>
<title>My Webpage</title>
</head>
<body>
</body>
</html>

You should notice all the tags above are opened and closed (/) respectively.
Please take a minute to observe the order in which tags are opened and closed (/)

Tags explained:

<html> - This tag basicly tells the client web browser that it should expect to read some html after this tag. This tag is closed with </html> at the very end of the page to tell the client web browser that theres no more html to check out! Simple hurr?

<head> - The head tag always appears at the top of the page just under <html> the head tag defines to the client browser some aspects of your page i.e. the site title <title>My Webpage</title> . There are other tags such as <meta> which we will cover in lata tutorials, for now just use the head tag for placing your site title. The head tag is closed with its respective </head> .

Moving swiftly on!!

<title> - This tag is self explained, it tell's the client web browser what your page title is! It always appears within the <head> tag. Get it hurrr?

<body> - The body tag is the bit where all your lovely content will go! The body tag can have attributes to define certain things about your page anything from the color of your page background (bgcolor=#000000 i.e. Black Background n.b. in the attribute bgcolor note color this is not a spelling error, remember html was writen by an american hence the american english spelling) to colour or face of your default font! Ok that may have confussed you a bit but dont worry, we will cover attributes of tags in a later tutorial and I will go over them in detail. The Body is closed as all the others with its respective </body> .

Ok, now take some deep breathes, and just mull over what we have learned so far. You should now be able to create and understand a basic html template for all your webpage designs. If you havent quite grasped it yet, have a second read bearing in mind you could teach a monkey html if your had the patience!! Lol!

And on with the show - Some common tags to get you started

Ok heres some commonly used html tags, that we will use within our <body> tag

Firstly lets look at the tag, this tag along with its atributes will allow us to format our text.

The following is a few examples of using the font tag:

Hello World Output would be " Hello World " (with out the ")

Hello World Output would be " Hello World " (with out the ")

Hello World Output would be " Hello World " (with out the ")

Notice in the above how the tag remains the same and the attribute changes, to change different aspects of font formatting. As other tags you have seen so far this tag close's at the end with the respective .

Ok now for the <a> with out the <a> tag the World Wide Web wouldnt be a web at all!! It would just be a bunch of web pages on a bunch of computers that had know relation to each other at all, how crap would that be, imagine having to type in every url you wanted instead of just clicking a link!

The <a> tag along with its attribute href will allow you to link to something else, whether it be a diferent part of the same page, a diferent page on your site or a diferent site all togeather. We will use the <a href="placetolinkto"> when ever we want to link to something. See the following expamples:

<a href="http://www.yahoo.com">Link to Yahoo</a> Output would be Link to Yahoo - when pressed this would open http://www.yahoo.com with in the same browser.

<a href="nextpage.html">Next page</a> Output would be Next page - when pressed this would open the page nextpage.html in the same browser. n.b. when linking in this manor the file you link too must be in the same directory as the file you link from. If nextpage.html was in a diferent folder under the same directory then you could use "foldername/nextpage.html" if nextpage.html was in a folder up a level then you could use "../nextpage.html" can you see where im going with this, if not keep thinking monkeys and patience?

Ok lets review, the above are the basic use's for the <a> I will explain more advanced methods of using this tag in later tutorials. For now hopefully you can grasp the various methods of using the <a> tag. As all the other tags we have seen so far, we close the tag with its respective </a>

Good Stuff now your well on your way to becoming a code master! But lets not run before we can walk, Here's how we would put a image into our site. We would use the <img> tag. The <img> tag is a tag that does not require closing we therefore will add a / at the end of the tag as shown in the following examples.

<img src="filename.jpg" /> - This would output the jpg file "filename.jpg" if it exsisted on our server in the same directory as this one, as above with the <a> tag if the file was up a level or down a level you would use "../filename.jpg" or "foldername/filename.jpg" respectively.

<img src="http://www.google.com/images/logo.gif" /> - Ok that http address looks confusing but all it is, is the place where google store there logo for there site! The out put of this bit of code would be

All pretty simple when you think about it hurr? No? Have another read! And see what you think then!

Ok now for your practice, and remeber practice makes perfect! So keep trying until you get it! You can practice using notepad, just write your code in the .txt file then rename the file whatever.html when you click on it, it will open in internet explorer and you can see the effect your code has had!!

Home Work Question

Above you have been given all the code required to make a basic html page, Your home work question will require the use of the <a> and <img> .
Your task is to create a link to http://www.silverhazemusic.co.uk using the Google logo as the link object!! I.e. when you click the yahoo logo the browser will go to http://www.silverhazemusic.co.uk.

n.b Copy and paste are very useful when hand coding a site.

Add a comment to this post

Email confirmation is required for each post

Comments from other users:

Twitter Updates

Html Help

Tags explained:

And on with the show - Some common tags to get you started

Home Work Question