Basic HTML: Getting Started

LinkExchange Member Free Home Pages at GeoCities

HTML: Getting Started

Definitions

Starting A Page

Body Attributes

Presentations

Essential Tags

Yes you've stumbled across yet another help page! That's ok though, when I was first starting out I used several different tutorials throughout the internet to figure out what the heck was going on. Maybe you will find something you had trouble finding anywhere else or maybe it will be a little bit easier to understand. In either case, I'm glad you stopped by! I hope you enjoy your stay and I would appreciate if you sign my guest book and visit my main page while you are looking around.

Now, let's get started! You can start from the beginning or choose from the list in the table at the left.

Some Starter Definitions

First and foremost, most html tags have a beginning and an ending tag, <taghere> </taghere>. The back slash "/" tells the computer that this is the end of that code. There are a few tags however, that do not require an end tag. I'll let you know what they are a little later on.

HTML: This stands for Hyper Text Markup Language. This is the: "language" your computer reads to view a page. You must have a browser capable of this. Don't worry though, I can assure you your browser is compatible. Otherwise, you wouldn't be reading this! :-)

Tags: These are the embedded words and/or symbols that enable us to: turn ordinary text into HTML. Embedded meaning "invisible" when you view the page. You can see them however by right clicking on your mouse and selecting "view source". Then you will see a whole bunch of them!

Angle Brackets: AKA "Greater Than" and "Less Than" signs. < and >: are the brackets read by the computer that says "Hey, this tells you what to do...better read it!"

Remarks: These can come in super handy. They allow you to put in little: comments through your web page. I use them to remind me of what needs to be done, or not to fool with it anymore. They look like this----  or . These will not show up on your page. They do show up in the source code. Give it a try and see if you can find mine. Right click on the mouse and select "view source".

Starting Code

Now for the fun stuff..getting into what the tags do and what they look like!

<html> </html>: These start and end your html document. I would: recommend getting into the habit of writing them both as soon as you start a document. I've forgotten to quite a few times and have yet to put them in!

<head> </head>: Another good habit to get into is using this: when writing HTML. It is similar to the HEADer of a letter, this can be used to express the main point of the site and what have you. It encloses the head of the HTML document.

<title> </title>: This is where you put the title of the page. Look up top: of your computer screen. You should see a little blue bar. In that bar it should read "Basic HTML: Getting Started" - Netscape. Does it? Good, at least I know my title is working! :0)

<body> </body>: The main content of your page goes inbetween these: two tags.

Ok! Now let's put it up as you would on your beginning page!

<html>
<head>
<title>Put your title here
</head>
<body>

This is where you will put your page content. Yep, everything from images to text and links to document jumpers (don't panic! I'll tell you about jumpers on another lesson!) will go here between the body tags.

</body>
</html>

There! That is how your first code setup will look!

Body Attributes

Now, what attributes can we put inbetween the body tags? This is a code that tells your computer what color you want your text, background, links, and visited links. Put your own colors in as you like.

<body bgcolor="#ffff00" text="#000000" link="#FF0000" vlink="#00FF00">

body bgcolor is the color of the page your text sits on. On this page it is purple.

text is the color you want your text to be.

link is the color your links will show up in.

vlink is the color your visitors will see after they have visited a link on your page.

But you want one of those neat backgrounds and not just a plain old color right? Ok, I can show you that too! Let's say I would have used this code:

<body background="/bgsky.jpg" text="#000000" link="#FF0000 vlink="#00FF00">

Everything is the same except of course the background. I would have ended up with the whole background looking like this:

Presentation

Horizontal Lines: Horizontal lines are handy page breaks.: This is a horizontal line below:
Nifty huh? They work as great seperators. To get them you put <hr>. This is one of the few tags you do not need to close.

Line Breaks: Yes you even need a code to get a line break. You can't just hit your return or enter button and hope

it comes up on your page. Just type in   and that will give you a single line break. This is another tag that you don't have to close. You can type as many as you need.

Example---You want the text on your screen to do this:

Hello!

How

are

you?

This is what you type:

Hello! 
How 
are 
you?

What if you want a double line break and you're lazy like me and don't want to type two times? That's simple...type this:

Dear Jane, How are you today?

And the result is:

Dear Jane,

How are you today?

More Essential Tags

.... This bolds the text inbetween. For example:
This is your text
This is your text

.... This makes your text appear in italics. For example:
This is your text
This is your text

<CENTER>....</CENTER> This will center your text or images on your page. For example:
<CENTER>This is your text</CENTER>

This is your text

<IMG SRC="yourimagefile.gif"> This will put an image on your page. It can be any image file from tif to jpg. For example:
<IMG SRC="/Comimge_littlegreenfiredragon.gif">
And here is your image...

<A HREF="">Put text like Click Here!</A> This will create a link for you. For example, say I want to send you to my main page:
<A HREF="http://www.oocities.org/CapeCanaveral/Launchpad/4515">Click Here to see stars!</A>
You get this:
Click Here to see stars!

<A HREF="MailTo:">Your mail me text here</A> This is the code you need if you want a link for your e-mail address. For example:
<A HREF="MailTo:dragon_comet@yahoo.com">Send me mail!</A>
This is what you get:
Send me mail!

I think that's about it! How is your page looking so far? Great..then I hope I will see you back for future lessons! Until then, happy webmastering!

Now that you're learning a bit more about html why don't you stop by GeoCities and get a free home page?