HTML Basics

This section is devoted to the basics of HTML. This section includes text, links, images, sounds, and other basics.

Text - sizes, styles, and fonts

Everyone likes cool text. I would recommend using size 12 font on your page except for headings. This code belongs in the <body> tag. Text sizes range from 1 to 7. Normal text is size 3. The code is:
<body font size="3">
This code can also be used in a paragraph tag. The code is:

This can be used to make different sections of text different sizes.

If you want to use different styles of text, like bold, italic, or underline, use the following codes before the text.
Bold - text
Italic - text
Underline - text
These tags can be used together for bold, italic, and underlined text. Remember to close all tags.

If you want to use different fonts, be careful. Many people won't have the same font that you use. This code can be placed in the <body> tag or the tag.
<body font face="name of font">

Remember that font names are CASE SENSITIVE. That means that all capitals must be typed as capitals. If you have a cool font that you want to use, but you know that most people won't be able to see it, use it carefully.

To change font color, add color="green" (or whatever color you want) to the <body> or tag.

Links - linking to other pages, relative linking

Links can be used for many things. They can be used to link to your favorite site, or to link to other features in your page.
Linking to one of your favorite pages is very simple. Use the following code:
<a href="http://www.domain.com/page"> Text Discription </a>
Linking to a different feature on your page is called relative linking. When you link between sections of your page, you don't need to type the whole address. This can be used to link to pictures in a gallery as well.
<a href="page.html">Text (or image)</a>
Or, to link to an image
<a href="image.gif">Text (or thumbnail)</a>

Images - use, linking to

Images are fun. To insert an image in your page, use this code:
<img src="image.gif">
This inserts the image with it's original height and width. To control height and width, use this code:
<img src="image.gif" height="32" width="32">
The height and width tags can be used to enlarge or shrink and image.
When you create an image gallery, it is best to use text links at first. Thumbnails will be covered in advanced tips. See the above section for linking to images.

Sounds - background sounds, creating a sound vault

While surfing the web, you have probably noticed that many people use background sounds. These sounds are often in MIDI format (no words, just music). I personally don't like them, but if you would like to use them, there are two codes:
<embed src="song.mid" loop="1">
<bgsound src="song.mid" loop="1">
The "loop" number indicates how many times the song will play before it stops. If you don't want the song to stop playing, use "-1" or "infinite" as the loop number.

Sound vaults are fun to have and listen to. Acceptable file types are MIDI and WAV. Never use MPG files, these are illegal. When creating a sound vault, you must link to the file with a text link.

Email

Everyone likes feedback from visitors to there page. To create a link to email you, type:
<a href="mailto:you@you.com"> Email me! </a>
More tricks with email links will be covered in advanced tips.

Other Basics

Horizontal lines - <hr> can be used to divide a page, as I have used. These can be costomized with size and color tags. For example, if you want a blue line that is 8 pixels thick, you would write
<hr size="8" color="blue">

Colors - there are two color systems. One is called hexidecimal, and that can be confusing. The other just uses plain color names. If you don't have a guide to hexidecimal, it is easier to use color names. Exceptable names are:
blue, green, red, yellow, pink, aqua, teal, orange, brown, white, black, purple, magenta, silver, navy, lime
Hexidecimal uses letters and numbers. Some common hex colors, like the ones I've used, are #91EFB3 - the color my links become when you put your mouse over them,
#C18AFF - the background used on this page,
#CEC8EA - the background on the main page,
and many others. If you want a personalized color, send me a general discription of it and I will do my best to recreate it.

Backgrounds - colors or images. To use a background color, type
<body bgcolor="blue"> replacing "blue" with what color you want.
To use a background image, type
<body background="image.gif">

Tags - main
The main tags in HTML are <html> , <head> , <title> , <body>
<html> starts your page. Without it, your page won't work.
<head> starts a header. Here is where you will put <style> tags, <title> tag, <bgsound> tag, etc
<title> gives your page a title. This title will appear in the top bar of your page.
<body> starts the body of your page. Here you can type text, insert images, and do anything else.
A sample of a page code:
<html>
<head><title>My Webpage</title>
</head>
<body>
Welcome to my webpage
</body>
</html>
Don't forget to close ALL tags.

The and tags
 puts the text following the tag on the next line.
 skips a line then puts the text following the tag.

Remember, spaces don't affect appearance. If, within your <body> tag, you write
Welcome to my webpage!
My name is Sora!
It will look like this : Welcome to my webpage!My name is Sora!
You must use tags where you want a new line.

Hopefully this short tutorial has gotten you started with your page. If you have any questions, or need more help, please don't hesitate to email me. Click the next session button to go to the next lesson.

Back
Next Session