HTML Part 1: The Basics

RSS Newsfeed
for your site

DW News
Calendar
DW Forum

Right click on button and copy shortcut

Reminder

Remember to book mark this site!

HTML stands for HyperText Markup Language

Part 1: The Basics

by Porshiana

It is the most important language to learn, because it is the basis on which most other
web design languages are built. This tutorial will take you through step by step.

TOOLS
My first suggestion is to open your notepad

Go to start-programs-accessories-notepad

Open your notepad

We will use this to create and view our webpage

BRACKETS
HTML codes are always enclosed in <brackets>
Anything not in the brackets will come up as text on your page.
HTML
The very first code on your page is always <HTML>
This code makes the browser recognize it as an HTML page.
We also need to let the browser know when we are ending the HTML document
To end most codes in HTML we simply need to put a backslash before the same code
as follows </HTML>
Everything else in your HTML page goes between these brackets.
<html> </html>
HEAD
Two things you want to put immediately into your code are the head and title
While these are not important right now for anyone to view your page
They will become important later on, when you want to advertise your page
or add java script, and other coding you will become familiar with.
It is always a good idea to get into good habits from the beginning.

<html> <head> <title>The title of your page</title> </head> </html>
BODY
The main part of your page goes into the <body> area.
The body area goes after the heading is ended.
Here is how your coding should now look

<html> <head> <title>The title of your page</title> </head> <body> Your content of the page </body> </html>

Remember this simple code
It is the basis upon which all HTML pages are made
COLOR
The body tag can have attributes to it.
The first attribute we are going to learn is how to add color
change the <body> tag to
<body bgcolor="blue">
Here is your current code

<html> <head> <title>The title of your page</title> </head> <body bgcolor="blue"> My very first html page </body> </html>

Put this code into your notepad
Choose File- Save as
type the name as test.html
SAVING
Save as type should be "All Files (*.*)
I suggest putting this file right on your desktop
Leave notepad open
And click on the test.html file now on your desktop
Your will see the results of your HTML document
This should be a blue page with black text.
HEX Code
Colors are important when creating web pages.
Since it would be very difficult to remember all the colors
and names or codes for them
Most web designers use a color chart
Go to one of the following pages to view color charts
Here you will see examples of many colors
Notice these colors are in Hex code
Hex color codes are preferred in html pages
To use a Hex color code, do just as above, except put the Hex code instead of the color. all Hex codes should have the # written in front of it when in HTML.
BACK GROUND COLOR
The bgcolor stands for Back Ground Color
Notice anything put after the = sign goes into quotations
this is important, or else the code will not work
Change the Body Tag to the following <body bgcolor="#0000ff"> This would also give you the blue color, since it indicates Blue from the HEX code.

<html> <head> <title>The title of your page</title> </head> <body bgcolor="#0000ff"> My very first html page </body> </html>
FONT
Color can also be given to your font. To adjust the text, use the tag
To make the font white we will use the following tag. It goes in the Body of the HTML document preceding the text it is used for and is followed by a closing tag on the other side of the text it is meant to effect.
 .....

Try this out in your code

<html> <head> <title>The title of your page</title> </head> <body bgcolor="#0000ff"> My very first html page </body> </html>

Play around with the colors and get the colors you want. Once you are done, you are ready to go on to lesson two, text alignment.