So, you want to learn some basic HTML? I created this little section of
the site to help beginners get a basic know-how of how HTML works. Gradually as
you get better you're learn more things and be able to make your own codes.
First things first.
This is what your page should look like before you add anything to it in
notepad:
This is called a basic shell. If you use this on a website you'll simply get a
blank page.
You don't have to space everything like I have, but it's neater and you find
things with less difficulty.
You'll notice all codes have "tags" such as '<head>', which open and close. To
open a tag you use something like this: '<head>'
And to close the tag you just add "/" before it, like so: '</head>'
There are four tags:
"<html>" tells the page you've begun your webpage.
"<head>" is where you place your 'headings' such as title, .css files,
javascripts, etc.
"<title>" obviously for the title of your website that appears at the top of the
browser.
"<body>" this is where the content of your page that you can see goes.
All tags must be both started and closed to work.
Now we'll add some things to the page:
This is the starter page most people learn in their first e-website class. It's
called Hello World.
All I've done is name my page, 'My Page', and add 'Hello world' to the body
section.
Now I want to make the word 'world' red. This is how I do it:
Notice the change? I made the colour change tag open, then I closed it where I
wanted it to finish.
Now you know how to do the basic shell of a website and where things go. Let's
explore some of the body tag options...
Changing
your
font
colour.
This is the code we use to make text a different colour. For this
example, I'll use red:
The above code will look like this:
Hello!
The font colour is changed using the letter and number code in the HTML. In this
example it was #FF0000, which is red.
Your text goes in between the start (your font colour) and where you
want it to end. If this is a little confusing just look at where I
have placed "Hello!" in the above example.
See where that is in the code? It's in "quotation marks". Do not remove
the quotation marks when changing an image URL or it will not work. Only
change the URL.
Want to make the picture more appealing? Try this border:
Now the image looks better, yes? And all that has been added to the code
is border="1" to give it a 1pt line border. If you want a bigger border
just increase the number higher than 1, such as 5, which will make it
look like this:
Linking Images
We'll stick with the Rainbow Egg for this. And I'm going to link it
to Zetapets.com. So this is the code I need:
And it will look like this:
The first part of the code is the URL you want to link your image to. In
this case its: http://www.zetapets.com/
The second part is what we've just covered, the image URL. Make sure to
include after this code or your URL will expand to cover everything
after the image as well!
I don't really like the blue border, do you? Lets get ride of it by
using this code instead:
A simple border="0" gets ride of a border. That makes sense.
Background Image
We'll use this image of a Chick Toy as an example:
http://zetaonline.fateback.com/chicktoy.gif
That will show this image as a tiled
background on the page. It will only be tiled because it's a small image
though. A bigger image, depending on size, may take up the whole page.
Fixed Background Image
To keep the image in the same place and not move when a person
scrolls simply add this little bit extra to the end of the code:
bgproperties="fixed"
And that's the end of my Beginners HTML section! Hope I could provide
you with some help :)
