Introduction to HTML

Introduction to HTML

Basic HTML Page -- Hello World

This is a basic HTML page.

Elements:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
This isn't sometihng you need to worry too much about, and can be omitted. Basically it tells the computer what version of HTML you are using.

<html></html>
Tells the computer that this is HTML. Can be omitted.

<body></body>
Tells the computer that you are beginning the actual content of your page. This can be omitted as long as the head tag is not used.

HTML Code:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> Hello World! </body> </html> Result:

Basic HTML Page -- Hello World -- An Alternative

This is an alternative to the basic HTML page. It is not officially compliant, but will still work in most web browsers.

Elements:

None.

HTML Code:
Hello World! Result:

Basic HTML Page -- Hello Colour

This shows you how to use colour.
Elements:

The font tag allows you to tell the computer that you want to change the font settings.
HTML Code:
This text is blue. and this text isn't.. Result:

Basic HTML Page -- Hello Size

This demonstrates how to change sizes.
Elements:

HTML Code:
small BIG Result:

Basic HTML Page -- Hello Line Break

This demonstrates how to start a new line of text.
Elements:
 
Specifies a new line of text.
HTML Code:
Line One Line Two Line Three etc.. Result:

Basic HTML Page -- Hello Bold, Italic, and Underline

This demonstrates how to use bold, italics, and underlined text.
Elements:

Makes text bold.

Makes text italic.

Makes text underlined.
HTML Code:
Regular text Bold Italic Underlined Bold And Italic Result:

Basic HTML Page -- Hello Links!

This demonstrates how to make a link.
Elements:
<a href="url"></a>
Creates a link.
HTML Code:
I have a <a href="http://www.senpai.net/~aslater/gallery/4images/">website</a>. ^_^ Result:

Basic HTML Page -- Hello Image!

This demonstrates how to load a picture.
Elements:
<img src="url" title="title">
Creates an image. src= tells where to find the image. title= allows us to choose what the image says when we put the mouse over it. title= is optional.
HTML Code:
<img src="ed.jpg" title="It's Ed!"> It's Ed! Result:

Basic HTML Page -- Hello Background!

This demonstrates how to have a background colour.
Elements:
<body bgcolor="colour"></body>
Specifies a background colour. Remeber that everything on your web page must be between <body> and </body>.
HTML Code:
<body bgcolor="blue"> Hello Background! </body> Result:

Basic HTML Page -- Hello Basics!

This uses all of the tags (well, most) learned so far.
Elements:
None.
HTML Code:
<html> <body bgcolor="gray"> Konnichiwa! Konnichiwa is Japanese for Good Day. You can see more stuff about HTML at <a href="http://www.webmonkey.com">Web Monkey</a>. (as opposed to a web hippopotamus.) </body> </html> </body> Result: