Choose a specific topic below, or if you're a beginner you should probably do it all step-by-step...
Where
Do I Start?
HTML
is a language which we use to tell the computer how a web page will look,
using special commands within tags:
< >.
Everything you do is written down as text, so NOTEPAD is ideal.
Next, under the <HTML> tag, add the <HEAD> tag. After this tag is where you will write things such as the title (appearing at the top of the browser). So for the title, write the tag <TITLE> then the title itself, e.g My web page.Then write </TITLE> and then </HEAD> to show you've finished those sections.
Lastly add the <BODY> and </BODY> tags after the </HEAD> but before the </HTML> tags. This is where everything else you'll do will go.
Adding
Colour
Let's
now do something which we'll be able to see - the background colour. In
the <BODY>
lengthen the writing to <BODY BGCOLOR=LIGHTBLUE>
You can of course use any COMMON colour eg. black, yellow, red, blue instead.
**For a list of all the colours available click here**
NOTE:
ALL SPELLINGS ARE AMERICAN, E.G: CENTER
and
COLOR
EVERYTHING
IS CASE SENSITIVE TOO
For all your pages you really need to create a New Folder in Explorer to put all the pages and pictures into. To see your page so far, click SAVE AS and save it in your folder using a name "home.html" for example.
Make
sure the file type is "all files" and is saved as .html and not a .txt
file!
Now
go and open your page in the folder and admire :)
Adding
Text
Text
of course is essential, and needs <FONT>
</FONT> around it to specify things e.g.
colour, size and style. These tags go after the <BODY>
tag.
For font color then, write <FONT COLOR="black etc.". For size, you can have a value from 0 to 7, using the same idea - SIZE="_"For the style we write FACE= "arial"> (or whatever font you want to use.) Don't forget to close the end > !
Once
you've written this, between the tags you can write whatever you want
eg:
My
Web Page
is written down:
<FONT
COLOR=PURPLE SIZE=4 FACE="ariel">My Web Page</font>.
To
make text bold we surround the text with <B>
</B>tags, for underlined,
<U>
</U> and for italic <I>
</I> tags.
To
centre text, use the <center> </center>tags
around it. To leave a line or start a paragraph, simply write <P>
before text.
Pictures
and Backgrounds
Pictures
are what makes the page interesting. For a web page we simply have to tell
the computer the name of the image, and its width and height.
Everything
goes inside the one <IMG>
tag. Put a picture into your "homepage" folder. In this example the picture
is called image1.gif
To make that picture show on the page you write <IMG
SRC="image1.gif">.
After
the pic's name you then specify its height and width, either in pixels(like
below) or as a percentage of the whole page(e.g 20%) Mine is this:
<IMG
SRC="image1.gif" WIDTH="120" HEIGHT="120">
You
can also say whereabouts the picture will be, i.e the left, right or centre.
Simply continue, writing:ALIGN="left/right"To
center the picture, use the <CENTER> </CENTER>
tags again.
An
example so far using my picture:
**CLICK HERE TO SEE THE PAGE**
Later
you may want to create a new subfolder just for pictures. Note you'll have
to write the full address of the picture e.g: BACKGROUND="pictures/wallpaper1.gif"
Putting
Links into Your Site
Links
are really what makes your page fun and different from anything else. They
let you see other pages simply by clicking on a certain image or piece
of text. To do this you need to have made at least 2 pages so we can link
them together.
Therefore you should have done a main page, "home.html" and another one- for example a page about yourself called "aboutme.html". To visit "aboutme.html" when you click on a sentence in the main page, you have to add a link using <A HREF="_"> </A> tags. In the "_" you'd put the name of the page. Your sentence goes between.
Therefore we'd write <A HREF="aboutme.html"> Click here to find out about me </A>. You can still use the <FONT> tags too like normal text :)
If you want to use a picture instead of text to click on, simply put the image (using the <IMG> tag) where the text went (the green part in the example)
Your
image will probably have a border around it, if you don't want it, simply
write
BORDER=0
in the <IMG>
tag.
That's basically it! Once you've mastered this, have a look at the more advanced topics, such as using frames and javascripts to jazz up your page.