I have put together a few very basic tags you will need to get you underway, there are plenty more tags that are available but I don't want to confuse you too much at this stage, so what is down here will be completely adequate enough for the time being. You can learn how to put images on your page, change the way the text looks in many ways etc. If you are looking for instructions on how to make a table then there is a seperate section for this on the menu bar.

One last thing to remember is that ALL tags must be ended. This is such an important point to consider when constructing your page. If you change the colour of your title to red then you must tell the browser to stop displaying the text in red etc...all end tags are in the form of </>. Good luck with your ventures, if there is something on here that you think I have missed then feel free to let me know. Once your done then why not enter for one of my awards!

The Basic Structure
Where do I start!
What's a Meta Tag?

Changing Font/Text
How Do I change the size of text?
How do I change the colour of text?
How do I make it italic and things?
How do I change the type of font?

Presentation
How do I make a Horizontal Rule?
How to I make Paragraphs?
How do I Center something?

Graphics and Pictures
How to I put an Image of Picture on my page?

Links
How to I link to another one of my pages?
How do I link to my friends website?

Where do I start?

The basic beginnings of an HTML page begin with the <HTML> tag...

<HTML></HTML>

The above tags are the first and last thing to go on your page at all...! You then build your page within these tags... to read more about the basic structure you should visit my 'BASICS' section where I go into much more detail.

The <HEAD> tags should be next so you insert these within the html tags....

This sets the head section out from the part that will be seen by everyone at home. Normally what you see in the head section is the title of the page, which the browser uses if someone bookmarks your page and any <META> tags which are inserted for search engines that look at your page.

So the next thing you would do is insert the <TITLE> tags with the name of your page....

<HTML>
<HEAD>
<TITLE>My Homepage
</TITLE>
</HEAD>
</HTML>

Remember that viewers may want to bookmark your page so try to be reasonably descriptive when putting in your title...My Homepage wouldn't help anyone remember what your site is about if you just put this!

Next you would insert the <META> tags if you think you will need them. This is not a necessary part of the structure and it can be left out if you wish. Meta tags are used when Search Engines such as Meta Crawler or Web Crawler look for sites and can be a good way of attracting visitors...

<HTML>
<HEAD>
<TITLE>My Homepage
</TITLE>
<META NAME="description" CONTENT="Julia's HTML Guide For Everyone, quality advice on setting up your first pages on the internet, includes advice on graphics and offers awards as well">
<META NAME="keywords" CONTENT="html guide, tags, internet, help, graphics, awards, web awards, beginners">
</TITLE>
</HEAD>
</HTML>

The last thing you need to do is create an area that the surfers at home will see and that is done by using the <BODY> tags...anything else will be written within the <BODY> tags...

<--- Everything else will be inserted here! ---->

</BODY>
</HTML>

How do I put a Horizontal Rule across my page?

Easy! The tag is <HR>, you have leave it as it is or make the line thicker or shorter if you wish by placing a size or width attribute in there as well.

<HR SIZE="4" WIDTH="300"> would look like this.....

How do I paragraph text?

There are two tags you can use for creating nicely paragraphed text, those being <P> and <BR>.

The <BR> tag is a single break like
this.

And the <P> tag is a 2 line break like

this!

How do I centre things on my page?

You can centre anything you like on a page so long as you have the <CENTER> tag surrounding it, please remember if you spell the British way like me that you need to learn american spelling! An example of centering text is below:-

<CENTER>Welcome To My Homepage</CENTER>

How do I link my pages to other pages?

There are two ways to link to other pages they are Internal Links and External Links.

Internal Links
These are links to pages that are in your own directory (an area you store files, a bit like a folder), this is what a normal directory with all your files would look like:-

Top Level/Main directory

Index.html

aboutme.html

links.html

photos.html

So if you want to link your index page to all the other pages in the directory you would write in your coding on the index.html

<A HREF="aboutme.html">All About Me</A><BR>
<A HREF="links.html">My Links Page</A><BR>
<A HREF="photos.html">My Photos!</A>

The above would then look like this on your index.html when viewed by the surfer:-

All About Me
My Links Page
My Photos!

The words 'All About Me', 'My Links Page' and 'My Photos' are the only things that would show up on your page.

Things get complicated if you have different directories in your web area you store your files in. Say you kept all your main HTML files in your main directory but had a sub directory called 'Friends' where you have the file friends.html in there you wanted to link to. The structure looks a bit like this:-

Top Level/Main directory

Index.html

Friends (sub directory)

friends.html

So going by the structure above, say you want to link to friends.html from Index.html it would look like this:-

<A HREF="Friends/friends.html">My Friends Page</A>

Again, the only thing the viewer will see is the 'My Friends Page'.

What about if you want to link back to your index page from your friends.html page? You would simply tell the browser to go up to the top level directory like this:-

External Links
External Links are if you want to link to another website on the internet. Say you want to link to a friends website with the URL of https://www.angelfire.com/myfriend/index.html you would type the following:-

<A HREF="https://www.angelfire.com/myfriend/index.html">Visit My Friends Website</A>

You have to include the WHOLE URL including the http:// part of the address.

How do change the size of my text?

There are many ways to change the size of text on a page the first way we are going to look at is called HEADLINING. You used tags such as <H1> to change the text. H1 is the largest and H6 is the smallest and you would surround the text with this tag as below:-

<H1>Welcome To My Homepage</H1>

It would look like this in your browser:-

Welcome To My Homepage

You can try the other sizes of
<H1>Welcome To My Homepage</H1>
<H2>Welcome To My Homepage</H2>
<H3>Welcome To My Homepage</H3>
<H4>Welcome To My Homepage</H4>
<H4>Welcome To My Homepage</H4>
<H5>Welcome To My Homepage</H5>
<H6>Welcome To My Homepage</H6>

They would look like this in your browser:-

Welcome To My Homepage

Because these are HEADLINES they would leave a gap of two lines between the different sizes of text without you having to put a <P> tag in between.

Another way of changing the size of text is to use the <FONT SIZE> tag, this tag is easy to use and doesn't leave a paragraph in between each change of text so you would be able to do this:

Welcome to My Homepage!

The coding for the above looks like this:-

<FONT SIZE="+1">Welcome</FONT> to My Homepage!

Like the HEADLINE this goes up in stages to:-

<FONT SIZE="+1>Welcome</FONT>
<FONT SIZE="+2>Welcome</FONT>
<FONT SIZE="+3>Welcome</FONT>

And so on..... there is no limit to the size of text you can have! Remember to use the <BR> tag if you want your text on separate lines though.

How do I change the colour of my text?
In order to change the colour of text I need to refer you back to a table listing all the codes for the different colours you can use. The URL you should bookmark is:-

http://www.users.interport.net/~giant/COLOR/1ColorSpecifier.html

Say you wanted to change the colour of the below text from the default to RED (the colour code for this is FF0000:-

Welcome To My Homepage

The coding for this would be:-

<FONT COLOR="#FF0000">Welcome To My Homepage</FONT>

Remember to end the tag with </FONT> otherwise the rest of your text will be in this same colour too! So after all this your text should look something like this:-

Welcome To My Homepage

How do I change the way the text looks?

There is plenty you can do to text without changing the size or colour of it! Just like in a normal word processor, you can change it to italic writing or make it bold etc. Below is a table of the tags you will need, on the left is the coding and on the right is what it would look like.

If you wish to combine the below tags you may do so just like this example:-

<I><B>Welcome To My Homepage</B></I>

BUT, remember to always close the first tag you opened LAST as with the <I> in the above example so it creates an envelope for the text.

<I>Welcome To My Homepage</I>	Welcome To My Homepage
<B>Welcome To My Homepage</B>	Welcome To My Homepage
<U>Welcome To My Homepage</U>	Welcome To My Homepage
<TT>Welcome To My Homepage</TT>	`Welcome To My Homepage`
<SUB>Welcome To My Homepage</SUB>	_{Welcome To My Homepage}
<SUP>Welcome To My Homepage</SUP>	^{Welcome To My Homepage}
<BLOCKQUOTE> Welcome To My Homepage </BLOCKQUOTE>	Welcome To My Homepage
<PRE>Welcome To My Homepage</PRE> With this tag there is no need for <P> or <BR>	Welcome To My Homepage
<ADDRESS>Welcome To My Homepage </ADDRESS>	Welcome To My Homepage
<STRIKE>Welcome To My Homepage </STRIKE>	~~Welcome To My Homepage~~

How do I change the type of font I am using?

Changing the font of the text is relatively easy and painless, all you need to do is tell the browser which font to display:-

<FONT FACE="Arial">Welcome To My Homepage</FONT>

This would be seen by everyone like this:-

Welcome To My Homepage

You can also specify what size you want the text by inserting it in the same tag:-

<FONT FACE="Arial" SIZE="+1">Welcome To My Homepage</FONT>

This would be seen by everyone like this:-

Welcome To My Homepage

But, there is a warning when you do this.....
The default text used by most browsers is Times New Roman, most people have this available on their PCs. Whichever Font you decide to use, it should be a popular font which you think that most people will have available on there computer, otherwise this wonderful effect you are trying to create will not be seen, if the browser cannot find the font you specify it will revert to the default, Times New Roman! The most common fonts the majority have are Arial and Verdana and of course the Microsoft fonts. If you are a little confused about this then I will try and demonstrate (hoping and praying that I choose a font you don't have!)...

Look at the text below which I have done in a font called 'Choc MN':-

I Love This Font!

Now to most people this will look very dull and boring and not quite the way you want it because your computer doesn't have Choc MN so it uses Times New Roman, below is an image of the text using the same font I am demonstrating with:-

To avoid at all costs choosing a font that someone else doesn't have, you can give the browser a back up font to use just in case...

<FONT FACE="Arial, Verdana"> Welcome To My Homepage</FONT>

Just insert a comma after the first font and insert the next one.

How do I put graphics and pictures on my page?

Places pictures on your page is not as daunting as it may seem, you just have to learn how to place them correctly and use the paragraphing tags to help you along the way! It's also helpful to remember that only gif and jpg/jpeg file extensions maybe used and any others will not be displayed the browser will show a broken image like the one below...

If you don't know what type of extension it has that take a look at the name it will be something like... mypicture.gif

The last three letters or so after the full stop are the file extension....the above would be acceptable!

The tag that the browser needs to insert an image is <IMG SRC> but that is not all, you need to tell the browser which picture you want to display by including in the tag the name you have given the picture....

Remember you can centre the picture by surrounding it with the <CENTER> tags...

Or you can make it into a link by surrounding it with the link tag....

Attributes you can add to the <IMG SRC> tag

Any of the following maybe including within the image tag..

Attribute	Example Coding
BORDER Insert width of border in pixels, used for images that are links.	<IMG SRC="mypic.gif" BORDER="0">
ALIGN left, right, middle, top, absmiddle, texttop, baseline, bottom	<IMG SRC="mypic.gif" ALIGN="middle">
ALT Titles your picture for non graphical browsers	<IMG SRC="mypic.gif" ALT="This Is Me!">
WIDTH AND HEIGHT Tells the browser how big the image is.	<IMG SRC="mypic.gif" WIDTH="150" HEIGHT="200">
VSPACE AND HSPACE This specifies how much space surrounds the image.	<IMG SRC="mypic.gif" vspace="1" hspace="1">

You may of course include as many of the above attributes into your <IMG TAG> as you want....