Learning HTML is one of the easiest things to learn. Believe it or not, it's not really a programming language, but text with a few stupid codes.
Have you ever used Wordperfect or Microsoft Word? If you understand how to use those little programs, you'd notice one thing. At the end of a paragaraph, you have that funny looking little backwards p. HTML is the same!
How to read this page!
The stuff you pretend to type will be in a . This is what the code looks like in your text editor before Netscape Navigator reads it.
Whenever you see stuff in a ,that is how the code above it will be seen by the browser. In other words, it's the output of the code, or the output of the stuff you typed (the red background above text).
All code has and brackets. You can spot code easily!
Contents of this page.
1. Paragraph creation
1. Paragraph Creation
All text in HTML must be contained within the opening paragraph code p and the closing paragraph code /p.For instance:
Johnny goes home to his mother.
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.
This is a new sentence. Since words wrap around, I can
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
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 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|
The RGB scale is the scale we use to define colours on the net. It stands for the RedGreenBlue scale. We define this colour using six digits the numbers corresponding to color=RRGGBB (red-red-green-green-blue-blue).
The code will look like this:font color=ff0000text to be red, in this instance /font.
You can tell it will be red because it's ff0000, meaning fullredfullred, nogreen nogreen, noblue noblue. The scale runs from 0 (meaning none of this colour) to f (meaning lots of this colour). From low to high, it goes 0-9 then a-f.
4. Putting it all together.
I'm going to give you examples of all that we have learned so far.
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
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:
font size=+3 T /font he first letter can be raised. Flashy!
|The first letter can be raised. Flashy!|
I really want to emphasize that I i hate /i my job!
|I really want to emphasize that I hate my job!|
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:
Of course, there are options, which belong right img *HERE* src="pic.jpg". They aren't necessary, but nice to use.
|Option||Code||What the option does|
|alt||alt="This is my hair"||It allows people who can't use images, like blind people or just people who hate loading images, to know what the picture is.|
|border||border=10||Places a border around your picture. 0 is no border, and you can have a lot of border!|
|height, width||height=200 width=80||If you have a picture that is 200 pixels high and 80 pixels wide, it allows your page to load faster by telling the browser that the picture sits there. Can also adjust the size of the picture.|
|align||align=left||Left, Center, Right, the 3 options. Moves the picture to wherever you want it on the page. This allows you to have text beside the picture instead of underneath it.|
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:
Head to my happy|
a href="http://www.nowhere.com/FilePage/mypage.htm" nonexistent page /a
and you'll love it! /p
|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:
img height=20 width=20 src="pic.jpg"
The image called pic.jpg will be the link.
This is the end of The Basics of HTML!