Html tutorial
From Kiwiarena
This is an HTML tutorial by Silverware
All code will be displayed in Bold
Basics
Ok first off we will want to be using a text-editing program.
This is not to say that we want to be using Word or Open-Office,
but rather a simple things like notepad.
A very good program that I use is Notepad++, it is licensed under
the GPL and works on Windows, Linux, and Mac.
The first step would be to open the program of your choice and get
a little bit familiar in its layout. This will save trouble latter
when we need to find things that you don't know where are.
Onto the HTML then, first we will need to tell the browser when
it tries to read it that it is HTML. So we will add the code that
does this for us. Now we also need to state where the HTML ends.
<HTML>
</HTML>
The </HTML> shows us where the HTML tag ends.
These don't need to be in capitals but I suggest that you use them
until you get better at reading the code.
Next we want to modify the title of the website, this is the bit
right up the top on the left of the bar on the web-browser.
To do this though we need to put it into the head section of the
page, we do this with.
<HTML>
<HEAD>
<TITLE>My First Webpage</TITLE>
</HEAD>
</HTML>
This will set the title to say 'My First Webpage'.
Next we want to put in some writing on the page itself not just
the title bar. But this needs to go into the body section, while
we are at it lets add a paragraph too.
<HTML>
<HEAD>
<TITLE>My First Webpage</TITLE>
</HEAD>
<BODY>
<P> This is some text in a Paragraph. </P>
This is text outside a Paragraph.
</BODY>
</HTML>
As you can see we don't actually have to put any fancy stuff in to get
normal text. Not even a paragraph tag. So don't be fooled paragraph tags
are useful when writing large sections of text but you only need one set
of tags per paragraph, and a paragraph is around 4 - 8 sentences.
I do really hate people using lots of paragraph tags where a break tag
(new line tag) will do. Lets try adding a header and a new line or two.
<HTML>
<HEAD>
<TITLE>My First Webpage</TITLE>
</HEAD>
<BODY>
<H1>Header Size 1</H1>
<H2>Header Size 2</H2> <BR> This adds an extra line in here
<H3>Header Size 3</H3>
<H4>Header Size 4</H4>
<P> This is some text in a Paragraph. </P>
This is text outside a Paragraph.<BR>
This is bro<BR>ken text due to a br.
</BODY>
</HTML>
Break tags can go before or after a line of text and still work. Actually
If you just put all your code on one line it would work slightly faster
because there would be less whitespace for the browser to read. But it would
be very hard for people to read and to edit.
Here we also want some colour actually in HTML its the American color so
you need to pay attention to your spelling.
<HTML>
<HEAD>
<TITLE>My First Webpage</TITLE>
</HEAD>
<BODY BGCOLOR="#303030" TEXT="#ff00ff"> <H1>Header Size 1</H1>
<H2>Header Size 2</H2> <BR> This adds an extra line in here
<H3>Header Size 3</H3>
<H4>Header Size 4</H4>
<P> This is some text in a Paragraph. </P>
This page now displays with a dark grey<BR>
background and bright purple text<BR>
This is text outside a Paragraph.<BR>
This is bro<BR>ken text due to a br.
</BODY>
</HTML>
Now to see some code refrences goto Here.
We will also want to save this, so goto save as, and choose the directory
where you want to save, lets goto my documents on Windows and your Home
on Linux, type firstpage.html as the name and change the type to all types
so that you can save it as a .html file.
Then once saved just open it and you will see your cool new looks.
if you make changes to this file there is no need to close the internet to
check the changes out, just save the file over it and press F5 or refresh.
