HTML Tutorial

Find This:

HTML TUTORIAL

What is HTML?

HTML is an acronym for HyperText Markup Language, and is a code language for creating web-pages.

Is HTML hard to learn? It can be, but i can also be wery simple once you get the hang of it.Its like learning a new language, because it is a language.

The mening with this site is to show the beginners that never before have seen or had contact with HTML, how it works, by giving you exampels and exercises.

Why im a writting this in English? Its because i can reach a bigger audience this way. Iďż˝m not a HTML hacker, but a happy computer nerd that wants to learn, by teaching others HTML. There are a lot of books in the market that will "teach" you HTML for money, but the truth is, that you doesnt learn how to program just by reading a book. Learning to program is the same as writting and reading code. So my advice to you, is to read this short introduction and then read source code, and practise, practise and practise.

Are you ready to go to work?

Yeah, i think so.This page can be saved into your computers harddrive and read later, offline if you so wish.Its, written so you dont have to get lost in the site, by going deeper and deeper into the page. This is easy. Just save it and read. Letďż˝s start shall we.

Basic elementďż˝s

A HTML document must contain some elements, otherwise it wont be HTML. The Standards is created and controlled of The World Wide Web Consortium (W3C). The 6 <tags> that always must be in the document is:
<HTML>,<HEAD>,<BODY>, and </HTML>,</HEAD> and</BODY> Why you ask? Its because the<HTML> tells the browser what language the document is written in. <HEAD>, is because you want the browser to know what information there is,for example <TITLE>.<BODY> is informtion about colors and font etc.

If you can choose colors etc, why is this page so dull?

Its because its a text document , not a homepage.This document is written in 1 page 2000. It can be found at Webattack.com
O be dowloaded here .

Lets get back to work! Ok, now you know the tags that must be in, in wich order should they be written in? Lets give a example:
<HTML>
<HEAD>
<TITLE>
My first web-page
</TITLE>
</HEAD>
<BODY>

Text!
</BODY>
</HTML>

Ok, now you know what elements that must be in a document. So, we move on. This is the correct order, so learn it by writting it a few times.

Text!

You mark text with a few <tags>, so the text breaks, and change font. The <tags> we are gonns use is <BR>,<I>,<U>,<HR>, <SAMP>,<P> etc. Im gonna explain after the examples, so dont worry about weird tags that you dont know any thing about.If you want to create a page with text it can look like this:

<HTML>
<HEAD>
<TITLE> My first web page </TTTLE>
</HEAD>
<BODY>
This is my first webpage! Its just black and white, and with boring text.
</BODY>
</HTML>

This is a very simple page, but that is what were gonna do here. Try do write a page of your own now. Write it, do NOT just copy it and paste it in you editor. Youďż˝ll learn by writing not reading. Of course its good to be able to read an HTML code and se whats it gonna look like before, like preview in you head. A good way to learn is to read "source code" of pages that you like, and then try to write to code for your own page. Again, do NOT copy, modify the code, so it will fit your demands and style. If you are Swedish you can also se my Swedish school But ivďż˝e tried to do this one more complete, than my other tutorials.

A list of elements:

<HTML> This element tells the browser what language the document is written in, and is the start and stop tag.

<HEAD> This element holds the infomation aboOut the page, such as:title, keywords ,copywright etc. It has a start and stop tag

<TITLE> This one is the title of the page. It isnt visible on the page, but is visible in the browser window.It should have a start and a stop so the whole document wont be the title.

<BODY> Is colors, font etc. Iďż˝m gonna explain how to set colors etc.later in this tutorial.

<H 1 to 6> This sets "heading"(size) of text. For example:
<H1> Is the biggest, and <H6> is the smallest. Put in a stop </>, or the rest of the text will have the same size.You dont want that.

<P> Stands for paragraph and starts a new line. Try it!

<BR> Its simple break.

<I> Stands for italic. The text looks like this:This is what it looks like

<U> Makes the text underlined:Like this

<B> Makes the text bold

<SUB> Puts the text_{down here}. Example: H₂O.

<SUP> Puts the text^{up here}.Example: X ²

<CODE> For explaining code. It looks like this: #include<stdio.h>

There are a lot more, but these will do for now.These tags need a </>.

Lets move on! Ok, now you now some tags, but how should we write this? Lets do an example. Try to write a page using these <tags> and check it.

Example:
<HTML>
<HEAD>
<TITLE> Example!</TITLE>
</HEAD>
<BODY>
<H1> Lets try some tags </H1>
Hello, this is my first HTML page, so dont judge me so quickly. Im trying to understand the different tags. Now the text is gonna be<U> underlined</u> and now the text is <I> italic </I>.<BR>
Bye bye
</BODY>
</HTML>

If you have written a page that works,congratulations!
It wasnďż˝t so hard, or whas it? No, i think you have got the hang of it. If you want to se what this page looks like "ripped" to the code, you just choose "view" in your browser(IE) and "source code" and voila! the code appears. This is a very good way to learn by, but you need to know a little. Of course are there some great books out there, im not gonna name them all, but one that i recomend is "HTML The Black Book" by Steve Holzner(Coriolis). That book discusses Java, Javascript, CGI-programming with Perl,CSS,XML and Dynamic HTML. Iďż˝m not gonna teach you to program i Java or XML, but i will try to do my best within the HTML field. Thats what this page is about. Now i think its time to move on.

A web page without links, is like an orange without taste. A page like that is called a "leaf node", and is very boring, because the Internet is all about Hypertext.

How do we put in links to our page then?

You use the <A> (anchor) tag. A hypertext link is written like this:<A HREF = http://the url> "what should be the link"</A> Easy, isnďż˝t it? Ok, lets write a page with links to some cool places!HREF stands for Hypertext Reference.

<HTML>
<HEAD>
<TITLE> My first page with Hypertext</TITLE>
</HEAD>
<BODY>
<H1> Hypertext rules! </H1>
The page is under construction, but you can visit my old<A HREF =http://www.myoldpage.com> page </A> while im working on this one! You can also<A HREF =mailto:[email protected]> email </A> me!
</BODY>
</HTML>

Oh,thats it? You ask. Yeah thats it. But wait, you say.Whats that "mailto:" protocoll doing here, and what does it do? When you write the "mailto:" protocoll, the viewers email-program automaticaly starts with a blank page, but with your adress in the "to" field. This is very good, becuse you maybe, get som respons from the people that looks at your page.

Exercise:
Write a simple HTML page and try to use al the elements that iďż˝ve shown you. That way you will learn faster. If you think this tutorial sucks, then email me and complain. You can reach me at [email protected] Now, ive written a page, you say.Now, i want to add color! How do you do that?

Color of the background, links and text is written in the <BODY> tag. Like this:
<BODY BGCOLOR=#000000 TEXT =#FF0000 LINK = #FF8787>

Whats does the # and the numbers stand for? Color in HTML is either hexadecimals or a word.Hexadecimals are 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E and F. But there is a simple way! Just type the name of the colors. The two first #is RED, the second two Green and the last Blue. Try to experiment with different # and look at the result. You can also set the colors at Visited links(Vlink) and active links (Alink).

Sixteen predefined colors:
BLACK
GREEN
SILVER
LIME
GREY
OLIVE
WHITE
YELLOW
MAROON
NAVY
RED
BLUE
PURPLE
TEAL
FUCHIA
AQUA
You can download a colour picker here
Now, you can write a very simple page. But!, you say! I want a picture of me in it. Yeah, lets try to add a picture in to the page.

The tag for pictures are <IMG SRC = "url to the picture">. You can also choose the size of the picture by adding WIDTH ="#" HEIGHT ="#". Experiment a little, and youďż˝ll se that you get what you want. If you want a picture as backgroud you type in the<BODY> BODYBACKGROUND = "url>". The pictures must either be on the Internet or on the server that holds your page.You can choose the size of your pictures like this:< IMG SRC = pictureofme.jpg "WIDTH = 150" "HEIGHT = 170" ALT = "This is where you enter comments to to the pictures.They will be shown when the mouse is on the picture">.

Forms!

If you want to write a CGI (Common Gateway Interface) form that looks like this:

Hello! Please fill out this form:
What programming languages do i know?
C/C++
Java
Perl
I use this platform:
Win95/98/NT
Linux

This is very simple, but you must have a CGI-program running behind on the server. But, you might wanna write a form like this anyway? This is how:

The code for the form i just shown you is:

<B>Hello! Please fill out this form:
What programming languages do i know?</B>
<input type = radio name = form>C/C++ <BR>
<input type = radio name = form> Java <BR> <B>
I use this platform:</b> <BR>
<input type = radio name = platform> Win95/98/NT <BR>
<input type = radio name = platform> Linux <BR>
<input type = submit value = "Send in my answer"> < input type = reset value = "Erase what i wrote">

This wasnďż˝t so hard was it? I will explain the different input types.
<input type = "radio" name => puts out a
<input type ="checkbox" name => puts out a
<input type = "textarea" name = > puts out a
<input type = "submit value" ="the text in the button"> puts out a submit button. Like this:
<input type = " reset value" = "the text in the button"> puts out a reset button. Like this:

There is tons of CGI-sciptsďż˝available on the Internet for download. Just look around. Try searching on Northernlight.

Now we are gonns write som TABLES do display some data. If you dont know what a table is, then look right under:

Name:	Link:
Sleipners homepage	Click here
HTML tutorial	Click here

Ok, now you know what a table is. How did i do this?Well, its pretty simple. The code for the table above is:
<TABLE BORDER = "6" BGCOLOR = #AA13ff>
<TR>
<TH>Name:</TH>
<TH>Link:</TH>
</TR><TR>
<TD>Sleipners homepage</TD>
<TD><A HREF = http://sleipners.homepage.com>Click here</A></TD>
</TR><tr>
<TD>HTML tutorial</TD>
<TD><A HREF = http://insipidorpheus.homepage.com>Click here</A></TD></TR></TABLE>

Ok, lets start explaining the <tags>! <TABLE> is easy to understand, because its the start tag for tables.The "border" attribute is for putting a border around it. Without the "Border" it will look like this:

Name:	Link:
Sleipners homepage	Click here
HTML tutorial	Click here

Its up to you if you want it or not. The " ="number" is to set the size of it. Experiment a little and you will find a size that is right for you. The "BGCOLOR" is also pretty clear, isnt it? The next thing is the <TR> wich makes a new row = Table Row. And then we put out <TH> wich stands for Table Head. The next thing is the <TD> wich is Table Data, and should be before the text that should ne displayed in the table. You can look at the code and try to figure out how to write. Its easy once you get the hang of it. The tags should have a </>, otherwise its gonna come out wrong.

You might have woundered how i can change the colors on links when you put the mouse over it. Heres the code for it:

<STYLE TYPE = "TEXT/CSS">
A:HOVER{color:#Your choice of color;}
</STYLE>

Thats it. You can also make the links font-size to change when "mouse over". You just add "font-size:"size in pixels";}" to the A:HOVER{color:#FF5544; "here".

I have tried to write as short a possible, and i think i have succed? What do you think? Please email me and let me know.Iďż˝m gonna put out a guest book, where you can ask questions, if you dont want to email. I hope you have learnt somthing, because that whas the general idee behind this page. I have written other HTML tutorials. You can check em out at:
insipidorpheus.homepage.com

If you are swedish you can take a look at my Swedish school

This is it, but im gonna upgrade these from time to time, so check back at a later time. Take care and practise, practise and practise !

My other pages
Sleipners homepage
Sleipners other homepage
Download the code for this page

Henrik Andersson 2000

Sign and view my guestbook!

Henrik Andersson 2000