Kabe's Beginners HTML Guide

1. Paragraph Creation

All text in HTML must be contained within the opening paragraph code p and the closing paragraph code /p.

p Johnny goes home to his mother. /p p His mother is happy to see Johnny. /p

Johnny goes home to his mother. His mother is happy to see Johnny.

Note about code writing:

When you are in your text editor, and writing pages, it doesn't matter how much space there is between words and paragraphs. When read, the browser will remove all extra spaces. So, if you are used to putting 2 spaces behind a period, 1 will be removed when viewed.

The same thing goes for carriage returns.

2. Carriage Returns

Since browsers remove extra spaces as well as ignores carriage returns in the code, there is only 1 way of adding extra carriage returns. Using the code br.

Every 1 br is the same as hitting return once. So, if you want an extra carriage return, use br once.

Example of carriage returns and paragraph markers.

p This is a new sentence. Since words wrap around, I can pretty well type forever, and my browser will take care of all spacing issues. /p p However, I can br break a sentence in half, and add extra spaces. /p

Turns out as:

This is a new sentence. Since words wrap around, I can pretty well type forever, and my browser will take care of all spacing issues. However, I can break a sentence in half, and add extra spaces.

Don't forget, all paragraphs have to start with an p and end with an /p!

So, once you understand the above, you can now create very simple HTML documents for the web. You should be able to understand how to enclose paragraphs, and add those extra carriage returns.

3. Text Altering!

p b Bolding is a simple matter, but must be closed off with a closing bracket! /b /p	Bolding is a simple matter, but must be closed off with a closing bracket!
p i Italics are simple too, but they also have to be closed off. /i /p	Italics are simple too, but they also have to be closed off.
Centering:
p center Centering is easy too! /center /p
Centering is easy too!

Make sure you close off the center command, otherwise you'll find your whole document centered underneath this code centered!

You can also edit the size and colour of the fonts easily with the simple command called font which must also end in a closing statement /font.

The font commands listed below go right font HERE, but no matter what the options you put in this font statement, you can simply end the statement with a /font

Here's a chart of what the fonts do! Keep in mind that you can also combine these codes in combinations.

Command	What the code does	Example
font size=5	This allows you to change the size of the font.	font size=5
font size=+2	Brings the level of the font size up. Can also use negatives!	font size=+2
font color=00ff00	Using the RGB scale (explained immediately below) you can change the colour of the text.	font color=0000ff

4. Putting it all together.

I'm going to give you examples of all that we have learned so far.

p center font size=4 b i This text is to be centered, font sized to 4, bolded, and italicized. Don't forget to close all of them off! /i /b /font /center /p

This text is to be centered, font sized to 4, bolded, and italicized. Don't forget to close all of them off!

Now comes the annoying thing I haven't told you. The first code you open up, you have to close last. It cannot be like this:

p center i Text that is centered and itaicized...... /center /i /p

Because since iis the last code to be used, you have to close it first.

It would have to be like this:

p center i Text that is centered and itaicized...... /i /center /p

Some more interesting examples:

p font size=+3 T /font he first letter can be raised. Flashy! /p	The first letter can be raised. Flashy!
p b I really want to emphasize that I i hate /i my job! /b /p	I really want to emphasize that I hate my job!
p Fonts can be font size=+2 color=0000ff combined /font to look great! /p	Fonts can be combined to look great!

Two more sections to go!

5. Placing images on your page.

Images are so fun to place on pages. In fact, for most people, that's what the internet is all about :)

To put an image on your page, you first have to know where the image is on the internet. It should be at a place like--- http://www.yoursite.com/~yername/facepics/hair.jpg. That's the hard part.

The code to bring this specific image to your page is:

img src="http://www.yoursite.com/~yername/facepics/hair.jpg"

Of course, there are options, which belong right img *HERE* src="pic.jpg". They aren't necessary, but nice to use.

6. Linking to other pages, pictures, files.

This is what HTML is all about. Hyper-text. The ability to have text inside a document linking to another document. However, HTML is fancier. You can also use a picture, and you can link text and/or pictures to files, pictures, and other documents.

It's all done by the simple code a href, which is easy to remember if you say to yourself it's a hyper-text ref, or a href.

Of course, like most code, it requires to be shut off, using the simple /a.

You have to know what you are linking to. Let's say you want to link to a page at http://www.nowhere.com/FilePage/mypage.htm. (Oh, in case you didn't know, all HTML files end in either .htm, or .html). Here's the example:

p Head to my happy a href="http://www.nowhere.com/FilePage/mypage.htm" nonexistent page /a and you'll love it! /p

Turns into:

Head to my happy nonexistent page and you will love it!

Anything you put in between the start code (a href="file.jpg" and the ending /a will be the link. If it's an image, it will have a glowing border (unless border=0). To have an image link, the code will look look like this:

p a href="http://www.wherever.you/want/to/go.jpg" img height=20 width=20 src="pic.jpg" /a /p

The image called pic.jpg will be the link.

This is the end of The Basics of HTML!

---

This page hosted by   Get your own Free Home Page