HTML: Basic Format

A tag will always begin with a less than sign, like this: <. The tags will end with a greater than sign, like this: >. An example would be the tag used to underline text, . You would place this before the text you want to underline. This is called an opening tag, which begins the operation you wish to perform. In order to end the underlining, you must use a closing tag. A closing tag will always be the same as the opening tag, but will have a forward slash before the command, like this: . So, if you would like to underline the phrase "HTML Rules!", you would write the following in your text editor:

HTML Rules!

The result of this would be:

HTML Rules!

Not all tags will require a closing tag. An example would be the image tag, which will place an image on the page. It looks like this: <IMG SRC="myimage.gif"> . I will explain all the extra stuff later, this is just an example of a tag that requires no closing tag to follow it. Other examples would be a line break: , a horizontal line: <HR> , and a paragraph: .

Also, you do not need to capitalize the tags. is the same as . You can also use as much space between things as you like. So:

 Underline Me! 

Is the same as:

Underline Me!

A basic HTML file will have the format below.

<HTML>

</HEAD>

<BODY>
Cedefop training</BODY>

</HTML>

Okay, to make sense of this, go through and find the pairs of opening and closing tags. The first one we see is <HTML>. This signals the beginning of an HTML file. The closing tag , </HTML>, is at the very end of the document. As you might have guessed, it signals the end of the HTML document. Everything (tags, text, images) should be between these two tags, as they are the beginning and end of your page.

The next tag we see is the <HEAD> tag. This opens a section in which you can title your page, use keywords, and add other descriptive information to the page. The section ends with the </HEAD> tag. At this time, the only part of the HEAD section we will deal with is the TITLE, which brings us to the next tag.

The <TITLE> tag allows you to create a title for your page. The title is only used for bookmarks, search engines, and as the name of the browser window. It will not show up on your web page unless you type it in the BODY section.(explained below). To end your title, use the </TITLE> tag. For instance, in the example, the title is "I Love HTML". (That's not true all the time, though).

The <BODY> tag opens the section that will be displayed in the web browser. This is where most of our work will be done. To end the body section, use </BODY>. The above example makes a rather boring web page (even worse than the one in the previous tutorial). The browser would display this:

This is the tag for bold text.

Example:
Howdy
This will show up on your page like this:

Howdy

Here are a few more to start working with:

 Underline text

Underline Me!

Underline Me!

 Italics

Isn't this fun?

Isn't this fun?

~~You're Out!~~

<CENTER></CENTER>
<CENTER>This centers text on the page</CENTER>

This centers text on the page

I am bold AND Italic, which makes me cool!

This will show up like this:

I am bold AND Italic, which makes me cool!

Does the order of the tags make a difference? In this case, it wouldn't matter which way you opened and closed the tags. However, working from inside out will help you see your code better, and will help when the order does matter! (such as placing the </HTML> tag before the </BODY> tag). Here's another way to look at working inside out. I could write the HTML this way:

I am bold AND Italic, which makes me cool!

This could get rather tedious. All you need to remember is that the text you have written is affected by every tag before it that has not been closed. The effect ends when each one of those tags is closed by it's closing tag.

So lets try three things: Bold, Italic, and underline!

Would you stop tagging me!

This will give us:

Would you stop tagging me!

But this:

Would you stoptagging me!

would give us this!

Would you stop tagging me!

As you can see, the bold and italics were closed before the word "tagging"....but the underline remained open until the end of the exclamation. This caused the "tagging me!" portion to be underlined, while not being affected by the bold or italics tags!

Now let's use the center tag from above. Since the default alignment of everything is to the left, it's nice to have a way to place things in the center of the page. So let's do just that. Use the <CENTER> tag. Anything you place between the <CENTER> and </CENTER> tags will be centered on the page. Here is an example:

<CENTER>I'm in the middle!</CENTER>

This will give us the following:

I'm in the middle!

You can also use it with one or more of the other tags above, like this:

Look at me now!

Headings and Paragraphs

Let's start out with Heading tags. These tags are good for creating titles or section headings. Here are some examples:

<H1>Large Heading!</H1> will give us:

Large Heading!

<H2>Heading 2</H2>

Heading 2

<H3>Heading 3</H3>

Heading 3

<H4>Getting Small</H4>

Getting Small

<H5>Smaller Still...</H5>

Smaller Still...

<H6>You must have good vision...</H6>

You must have good vision...

Line break. The tag for a line break is . When you insert this tag in your document, the contents will go to the next line. The tag does not need a closing tag afterward. Here is an example:

End this line now!! Thanks!

This will generate the following:

End this line now!!

Thanks!

Basically, a line break is like hitting the "enter" key when you are writing text. The browser will not go to the next line until it runs out of space, or sees a tag that will force it to the next line. So typing the following in your text editor will display only one line of text in the browser:

Hello,
I want

a new line.

This gives us:

Hello, I want a new line.

To make the text move to the next line, use your tag from above:

Hello, 
I want

a new line.

Now this will do what we wanted it to:

Hello,
I want
a new line.

Now, let's move on to the paragraph tag, . This tag will skip a vertical space after going to the next line, as though you had typed twice. This tag is good for skipping a line quickly and for knowing where you wanted a new paragraph to begin. How about an example? Well, O.K.:

This is some cool stuff.

This is the next line.

This is a new paragraph. Is this cool or what?

This will give us the following:

This is some cool stuff.

This is the next line.

This is a new paragraph. Is this cool or what?

The paragraph tag does not require a closing tag, but if you'd like to add one for your own reference, you place a where you would like the paragraph to end, like this:

This paragraph needs a visual ending!

Here is a new paragraph....

and the end.

This will give you the same thing as using just the opening tags, like this:

This paragraph needs a visual ending!

Here is a new paragraph....

and the end.

Both of these will give you this:

This paragraph needs a visual ending!

Here is a new paragraph....
and the end.

Manipulating Font Size and Color

text to change

"x" will be replaced by a number with a + or - sign in front of it. So let's say you wanted to make the font larger. You can use the tag with a +2, like this:

I'm a big sentence now!

This will give us the following:

I'm a big sentence now!

Likewise, you can make the font smaller in the same way, using the - sign:

Hey, I'm Small!

Will give us this:

Hey, I'm Small!

Here are some more size examples for you:

Hey There
Hey There

Hey There
Hey There

Hey There
Hey There

Hey There
Hey There

Hey There
Hey There

Hey There
Hey There

Can you read this?
Can you read this?

Now, suppose you want to change the font color. This is done in much the same way. Here is the tag:

We replace the word color with a color name or the hexidecimal color value. Let's do one using the color name to begin:

I'm red!
I'm red!

Now let's use the hexidecimal value for red. The hexidecimal representation begins with a # sign and is followed by six letters and/or numbers. Here is the example:

I'm red!
I'm red!

That is a # sign, two F's and four zeros. Usually it's easier to remeber the color names, but you may want to have the hex code for more complicated colors. If you want to see a sample list of color names and hex codes, click here .

Now suppose you want to change the size AND the color. To do this, you can use two FONT tags and remember to close them both, like this:

I am gold!
I am gold!

Also, you can use the SIZE and COLOR declarations inside the same tag, and close only one tag. This is done like this:

I am gold!
I am gold!

You can also declare the font color inside the BODY tag.

Special Characters

Special characters are placed on your page by using a special reference to the character you want to use. The reference will begin with an & , will be followed by some text or numbers, and end with a semicolon, ; . So as an example, let's say you wanted to place an extra space between two words. To do this, you place the reference   , where you would like to add the extra space. Here is what you would do:

Hello  there!

This gives us two spaces between "Hello" and "there!", like this:

Hello there!

The first space is added just using the "space" bar on the keyboard. The web browser will see the first space, but after that spaces make no difference, you will only see one space in the browser. By adding the   reference, we forced the browser to add an extra space between the two words. You can add as many spaces as you would like by repeating the   reference, like this:

Hello     There!

This will create the first space, and 4 additional spaces between the two words, for a total of five spaces. It will be displayed like this:

Hello There!

The other one we will discuss is the copyright symbol. You use it the same way as an extra space, by placing its reference where you would like to see the symbol on the page. The reference for a copyright symbol is ©. Here's an example:

This will work the same way for any special character you want to use. Just place the reference where you want the character to be on your page. To see a list of some common special characters and their references, see a list of some special characters.

Linking to Other Pages

<A HREF="http://www.someplace.com">Display Text</A>

The A stands for anchor, and the HREF=" " is asking for a location to link to. The </A> is the closing tag. The text between the tags is what will show up on your web page as a link. So, if you would like to link to our site, you would place our url, or net address, inside the quote marks. Our url is http://www.pageresource.com, so to create a link to us, place this command on the page where you would like the link to show up:

<A HREF="http://www.pageresource.com">The Web Design Resource</A>

It will show up on your page like this:

The Web Design Resource

See how the text was colorized and underlined? In most cases, this will indicate the text is a link. If you move your mouse over the link, you should see the cursor change into a pointing hand. The mouse attribute comes in handy when a page has a whole lot of underlined text.....

As another example, let's create a link to this particular page. Look in your location box near the top of your web browser. You should see the url for this page, which is http://www.pageresource.com/html/linking.htm . To create the link, insert this url into the link tag:

<A HREF="http://www.pageresource.com/html/linking.htm">Linking to Other Pages</A>

Which gives us this link:

Linking to Other Pages

If you click on this link right now, your browser will simply display this page again. If you click on the link from the first example, you will end up at our home page. Now, if you want to link to your own pages from your home page, just type in the address for your page inside the link tag. This will work for any page because we are using the absolute url, which means we are using the complete address to every page we are creating a link to. If you have all of your files in the same directory, you may use a shortcut called a "local url". Before you try this, be certain any file you want to create a local url link to is in the same directory as the page you are editing. (In most cases, it will be) Now, rather than typing the full url inside the tag, you can just use the filename, like this:

<A HREF="linking.htm">Linking to Other Pages</A>

This will create the same link we just did, but we didn't have to write as much.

Linking to Other Pages

If you aren't sure or have doubts, always use the absolute url. Typing in the full address will allow the link to work no matter where it is located on the internet.

If you would like to see some related tutorials, try one of these:

Changing the Link Color
Using an Image as a Link
Linking Within the Same Page

Adding Images to Your Page

<IMG SRC="image.gif">

The IMG stands for image. The SRC stands for source. The source of the image is going to be the net address of the image. Most often, you will be able to just type the filename of the image here, like this:

<IMG SRC="image.gif">

The filename does not have to end with .gif . You could also use a .jpg file as well. These are the two most common image file extensions used on the internet. If you have images in other file formats, you will probably want to convert them to .gif or .jpg . This can be done with most image editing programs. A commonly used program is Paint Shop Pro, which is available as shareware from JASC.

Now, if your images are in a directory other than the one your html document is in, you will want to link to it using the full address of the image. So, if your image is located at http://www.coolness.com/pictures/image.jpg , you would use this url as the image source:

<IMG SRC="http://www.coolness.com/pictures/image.jpg">

If you aren't sure, go ahead and use the full address just to be sure it will work correctly. Now let's work with a real example. One image I have on this site is called "next.jpg". The address for the image is: http://www.pageresource.com/images/next.jpg . If my image and html file were in the same directory, I would type:

<IMG SRC="next.jpg">

Otherwise, I would use the full internet address, like this:

<IMG SRC="http://www.pageresource.com/images/next.jpg">

Either option would display the image on the page, aligned to the left, like this:

If you want to center the image on the page, you would place the CENTER tag around the image tag, like this:

<CENTER>

<IMG SRC="http://www.pageresource.com/images/next.jpg">

</CENTER>

This will place the image in the center of the screen:

Keep in mind, the filename or address of the image IS case sensitive, so "image.jpg" and "IMAGE.JPG" are considered two different images to the web browser. Be sure to use the correct case in your image tags, or the image may not show up, and that's no fun.

Now, this doesn't give us everything we could possibly want, but it will allow you to add an image to your page on its own line. If you want to see more on using images, check out one of these related tutorials:

Aligning Images and Wrapping Text
Using an Image as a Link
Using a Background Image
Resizing an Image
Using Image "alt" Commands

If you would like to move on, let's go to the next section, Some More Text Tags.

Some Extra Text Tags

The tags I will be talking about in this section are , , <PRE>, , , and the Netscape only <BLINK> tag.

and

These tags are used to place a number or words slightly above or below your normal text. The tag works like this:

Area1

The result is this:

Area₁

And the tag allows you to use exponents if you need to:

X2 + Y2 = 0

And this gives you:

X² + Y² = 0

These two tags are most useful if you are writing mathematical equations and such on your page, but there are other times you may wish to use them.

The <PRE> Tag

The <PRE> tag is used when you want to keep the same amount of whitespace on your web page as you have in your html code in your text editor. This is useful when you have to post programming code. Here is an example:

And this somewhat redundant code gives you this:

x=1;

y=2;

if (x==1)

  y=2;

Notice how we didn't need to use or   inside the <PRE> tags. This can save you some headaches from writing in line breaks and spaces manually so often.

and

Any text you place between the and the tags will not break to the next line, even after reaching the end of someone's browser window. Here is an example:

I'll just keep writing like this for a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long time.

When viewed on your web page, this will be one really long line, like this:

I'll just keep writing like this for a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long time.

Unless you had a monitor with some pretty high resolution, you probably had to scroll to the right to see the end of that line. You can use the tag inside the NOBR tags to force a line break if you want or need to do so, like this:

I'll just keep writing like this for a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long 
long long long long long long long long long long long long long long long long long long long long long long long long long long long long time.

Now you will have two lines that are not quite as long (though still pretty long in 640x480):

The <BLINK> Tag

Yes, this is the tag everyone has been complaining about. If you are using Netscape you can see the following reason why viewers get annoyed by this tag:

LOOK AT ME NOW!!!!!!

If you have IE, you won't see the text blink, but you can get the general idea. Actually, if the tag is used in a better way, it can help point out important things you want people to see. Just avoid the +10 font size....Here is an example:

This rule is <BLINK>very</BLINK> important!

This gives you the following:

This rule is very important!

Just use your own discretion when placing blinking text on your page, and remember it will only blink if your viewer is using Netscape (I think 2.02 or better).

Well, that does it for this section. So, on we go to: HTML Comments.

Adding HTML Comments

Comments can be a nice way to help yourself when you are coding your web page. Comments are invisible to a web browser when it displays your web page. The only way to view comments is to look at the source (html) code of the web page. In this way, you can leave yourself notes so that you don't forget something when you come back later to redesign the page. So, how is it done? To write a comment, you begin with a less than sign (<) followed directly by an exclaimation point (!) and two dashes (--). After this, you type in your coments. To end the comment, you use two dashes (--) followed directly by a greater than sign (>).

You can comment on multiple lines, just be sure you remember to end the comment!

To look at something more useful, you could use a comment to remind yourself that a section of code is supposed to perform a certain task:

<IMG SRC="mypet.gif" align="right" alt="Look at my Kitty Cat!">

Using HTML Lists

To begin, we need a tag to begin and end the entire list. For starters, let's use an unordered list. This will create a list with bullets next to the list items. The opening tag is <UL>, and the closing tag is.....yep, you guessed it...</UL>. Now, to set off each item in your list, you use the <LI> tag, followed by your text. Here is a sample list with two list items:

This will give us the bulleted list below:

· I am item one

· I am item two

Notice the <LI> tags do not require a closing tag. Also, the list is indented somewhat from the rest of the text. You can indent further by adding more <UL> tags, as long as you remember to close every one of them. Here is a sample of indenting further into the page:

This will give us the following indented list:

§ I am item one

§ I am item two

Be careful about using the <CENTER> tag around your lists. If each list item is not the same length, you will get more of a mess than a straight list:

· This is item one, how nice it is to be number one.

· Item two is much shorter!

· Item three is somewhere in between..

If you really need the list further in on the page, use the indention method above until it hits the center of the screen (this can mess up in different screen resolutions, though), or you can try using a Table to align the text instead.

You can also use an ordered list in the same way you use the unordered list. Instead of using <UL> </UL>, you would use <OL> </OL>, like this:

This gives you a numbered list rather than the bulleted list:

1. Item 1

2. Item 2

3. Item 3

Using BODY Tag Attributes

Pretty long tag, isn't it? Well, you can use as many or as few of these add-ons as you wish. The options you don't use will be set to the web browser's default values. Below is a brief explaination of each attribute, with a link to the tutorial for each one. (If you are moving through the tutorials in order, we will eventually get to each one of these.) So here we go....

bgcolor="color" Tutorial-Using a Background Color

This changes the background color of your page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. For a list of common colors and hex codes, click here. The default setting varies with your browser, but is usually gray or white.

text="color" Tutorial-Changing the Default Text Color

This changes the default text color the browser will display on your page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. For a list of common colors and hex codes, click here. The default setting for text color is black.

link="color" Tutorial-Changing the Link Color

This changes the color of all of the non-visited links on your page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. For a list of common colors and hex codes, click here. The default setting for a non-visited link is usually blue.

alink="color" Tutorial-Changing the Link Color

This changes the color of an active link on your page, which is a link that has just been clicked on by a user's mouse. You can set this to any color you would like to use. Just replace color above with a color name or hex code. For a list of common colors and hex codes, click here.

vlink="color" Tutorial-Changing the Link Color

This changes the color of a visited link on your page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. For a list of common colors and hex codes, click here. The default setting for a visited link is usually violet.

background="image.gif" Tutorial-Using a Background Image

This adds a background image to your page. If you use this attribute, the background image will take the place of any background color you may have specified. If you don't use a background image, the browser will use your background color or its default background color.

Okay, now you will be prepared for the next series of tutorials (which are the ones listed for the attributes above). So let's move on to

Changing the Default Text Color

Okay, to change your default text color in your HTML page, you will need to find your body tag. Now, look for the phrase text="" somewhere after the word BODY. You may have something like this:

You may also see a weird number/letter combination, like this:

Of course, you may not see either of these, or you may be creating the page from scratch. If you don't have the extra command yet, add it to your BODY tag like one of the examples above. If you have other commands, add this one onto the end, leaving a space after the previous command, like this:

Now, if you'd like to change the color, replace the black between the quote marks with a color name or hex code. For a list of some common color names and hex codes, click here.

So, if you want to change the text color to red, you could use one of the following:

Using a color name:

Or using a hex code:

Now, any text you type inside the body tags will show up as your new color in the web browser.

Changing the Link Color

If you want to change the link color on your page, you will need to begin by finding the <BODY> tag. Now look for a command after the word BODY that says link="color". It would look like this:

Or the tag might have some other commands as well:

You may also just have the word BODY with nothing else there. If so, add the command after the word BODY, with a space between the two, like this:

Now, to change the link color, you replace the word blue inside the quotes with a different color name or hex code. For a list of some common color names and hex codes, click here.

So, if you would like to change the link color to red, you would type the following:

Or using the hex code:

Now, all the links on your page will be colored red rather than blue. You can also do the same things for active and visited links by adding or editing their commands. The commands are:

alink="color" For the active link color
vlink="color" For the visited link color

You might have:

To change the other colors, do the same as you did for the link color. If you need to add the commands, go ahead. Just place a space between each command, and add your colors!

Using a Background Color

If you want to use a background color on your page, you will need to begin by finding the <BODY> tag. Once you have found the tag, look for a command after the word BODY that says bgcolor="color" . It may look like this:

Or the tag may have more commands inside and use hex codes, like this:

And of course, the command may not be there at all. If this is the case, add it by placing a space after the word BODY and then type the command, like this:

Or if you don't have any other commands, just add it in like this:

To change the background color, replace the word gray inside the quote marks with a color name or a color hex code. For a list of some common color names and hex codes, click here.

So, if you wanted to change the background color to green, you would type:

Or you could use the hex code for green:

After doing this, your page will have a green background. Beautiful! Now just use any color you like in the command, and add color your pages!

HTML: Basic Format

Headings and Paragraphs

Large Heading!

Heading 2

Heading 3

Getting Small

Smaller Still...

You must have good vision...

Manipulating Font Size and Color

Special Characters

Linking to Other Pages

Adding Images to Your Page

Some Extra Text Tags

<SUB> and <SUP>

The <PRE> Tag

<NOBR> and <WBR>

The <BLINK> Tag

Adding HTML Comments

Using HTML Lists

Using BODY Tag Attributes

Changing the Default Text Color

Changing the Link Color

Using a Background Color