Using Your Materials: A Quick Look at Notepad and Web Browsers

Using Your Materials
A quick look at Notepad and Web Browsers
Pit Stop | Complete List | Beginners | Text | Linking | Images | Advanced

Home/HTML/Beginner/Using the Programs
Okay, to begin using HTML you will want to familiarize yourself with the software
you will be using. So, to get started, open Notepad (or your text editor). You
should see a completely blank page. Now, type in the text below. We will make
use of it later with the web browser.
Type the following:
<HTML>
<HEAD>
<TITLE>Test Page</TITLE>
</HEAD>
<BODY>
Hi there, you have just written your first web page!
</BODY>
</HTML>
Once you have finished, go to the "File" menu and click on "Save As" . This will
prompt you to create a name for your file. In the box, type in test.htm . At the
bottom of the prompt you should see a space that says "Save file as Type" or
"Save as Type". The default is .txt, so you will need to change it. Click on the
down arrow on the right side of the input box. You should be able to highlight All
Files(*.*) . Click on this to make the change. You should see something similar to
the picture below:
This is an example using Windows 95. The text was enlarged so you could see
the part we are interested in at this point. Now you may choose the drive and
directory to save to, and click on "Save". You can use this routine each time you
create a new HTML file.
If you do not get the option to save the file as the type All Files(*.*) , then select
the plain text file type (usually shown as Text Documents, Text Files (*.txt), or
something similar in the dialogue box). Be careful not to save it just yet though if
you are using Windows. Windows will save it as test.htm.txt by default. To get
around this, you will need to place quote marks around the filename, as shown in
the image below:
If you have a Mac, the way to do this will depend on your text editor. Something
similar to the methods above should work for you. If someone with a Mac would
like to write up something in more detail about this (as I don't have a Mac), feel
free to send it to me.
Now you will want to use your web browser to view the file you just created. So,
start up your web browser. If you are given an option to connect to the internet,
you can cancel the connection and you will likely end up with a blank page. You
may also see an error saying the browser could not connect to
"http://somepage.html" or something similar. You should be able to hit OK and get
a blank page. Now, in the location box (where you manually type urls), type in the
path to your html file. If you have the file in a directory called "myfiles", you would
type the following: c:\myfiles\test.htm . If the file is on a floppy disk, you can type
a:\test.htm , provided you did not place it in another directory on the disk. Most
browsers will display the page when you hit enter.
Another option you have, especially if you hate typing paths all day, is to use the
"Open Page" option. To use this, go to the "File" menu in your web browser. Look
for an option that says "Open Page", "Open File", "Open Local File", or a similar
phrase. Click this option and you will be able to browse for your file and open it
from there. The image below shows where this can be found in Internet Explorer:
Once the page is displayed, you will see something like the following:
Hi there, you have just written your first web page!
I know, it's not much yet, but you have written your first web page. You are now
prepared to begin learning how to do this, and use HTML to build a web page the
way you want it done.
So let's move on to Basic Formatting.
Partners
CoolHomepages | Web Design Library | Website Content
The tutorials and articles on these pages are © 1997-2007 by John Pollock and
may not be reposted without written permission from the author, and may not be
reprinted for profit.
HTML: Basic Format

About HTML tags and the basic page format.

Home/HTML/Beginner/Basic Format
Now we are going to start talking about HTML tags. 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!
Is the same as:

Underline Me!

A basic HTML file will have the format below. Read through and see if you can
guess what the different tags will do: (Don't worry, I'll explain them at the end of
the example.)
<HTML>
<HEAD>
<TITLE>I Love HTML</TITLE>
</HEAD>
<BODY>
Everything displayed on your page will be in here.
</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:
Everything displayed on your page will be in here.
Yuck. All we have is a line of text aligned to the left of the screen. Well, let's go
to the next tutorial and see if we can add a little life to our page of text. Let's go to
Text Tags .
Partners
The Wonderful Text Tags

How to use HTML tags to manipulate your text

Home/HTML/Beginner/Text Tags
Okay, it's time to start making our text appear in different ways. Let's start by
giving you some tags to work with:
 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?
<STRIKE></STRIKE>
<STRIKE>You're Out!</STRIKE>
You're Out!
<CENTER></CENTER>
<CENTER>This centers text on the page</CENTER>
This centers text on the page
Having fun yet? You can also use more than one tag at a time. Let's say you
wanted something in bold and italics. To do this, just place both opening tags
before the text.....and remember to close both tags afterwards....like this:
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:
<CENTER>Look at me now!</CENTER>
Look at me now!
Now you may be wondering why everything is just on one line. Well, in the next
section, I'll show you how to make the text move to the next line with the line break
tag. You'll also see how to use headings and paragraphs. So, let's move on to the
next step, where you will learn about headings, paragraphs, and line breaks.
Partners
Headings and Paragraphs

Using Headings, Paragraphs, and Line Breaks

Home/HTML/Beginner/Headings, Paragraphs, Line Breaks
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...

O.K., I think you get the idea here. Now let's move on to a 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 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:


Here is a new paragraph.... 
and the end.
Both of these will give you this:
Here is a new paragraph....

and the end.
So, now you can create a web page full of text. Isn't it great? Well, there is still
more of this in the next section, Manipulating Font Size and Color .
Partners
Manipulating Font Size and

Color
How to change font sizes and colors

Home/HTML/Beginner/Font Size and Color
Okay, now we want to see how to change the font size. This is done with the
following tag:
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!
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
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. We will discuss this in
a later section called Using the Body Tag Declarations. For now, we will move on
to the next section: Special Characters: The extra space, copyright symbol, and
more.
Partners
Special Characters
How to use special characters in HTML

Home/HTML/Beginner/Special Characters
So, have you been wondering how to add an extra space on your page, or how to
get a copyright symbol to show up? Then let's see how right now! 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 ampersand (&), 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 additional spaces will 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 page Copyright © 1999 by me!
This page Copyright © 1999 by me!
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.
Well, now you are ready to go on to the next section. Yes, you now get to learn
the wonderful art of Linking!
Partners
Linking to Other Pages

How to link to other pages in HTML

Home/HTML/Beginner/Basic Linking
All right, it's time to learn how to link to another page. So let's start out by seeing
what tag we use for linking:
<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:
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.
Great isn't it? 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.
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
Now that you have linking down, let's move on to even more fun: Adding Images to
your Page.
Partners
Adding Images to Your

Page
How to place images on your page

Home/HTML/Beginner/Adding Images
So, have you been wondering how to add an image to your page? Well, let's take
a look at the image tag:
<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.disney.com/pictures/image.jpg , you would use this url as the
image source:
<IMG SRC="http://www.disney.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 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.
Partners
Some Extra Text Tags

A few other tags to try out

Home/HTML/Beginner/More Text Tags
There are a few more tags you might like to try while you are creating your pages.
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:
Area1
And the tag allows you to use exponents if you need to:
X2 + Y2 = 0
And this gives you:
X2 + Y2 = 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:
<PRE>
x=1;
y=2;
if (x==1)
y=2;
</PRE>
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 time.

When viewed on your web page, this will be one really long line, like this:
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:

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.
Partners
Adding HTML Comments

Using comments in your html code

Home/HTML/Beginner/Comment Tags
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!">
Of course, you do not need to have a kitty cat to qualify!
Well, that does it for comments. So, let's move on to the next section: Using HTML
Lists.
Partners
Using HTML Lists

How to add an HTML list to your page

Home/HTML/Beginner/Lists
Have you been wanting to add lists to your page? Well, here is the way to add
those html lists to your web pages.
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:
<UL>
<LI>I am item one
<LI>I am item two
</UL>
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:
<UL>
<UL>
<UL>
<LI>I am item one
<LI>I am item two
</UL>
</UL>
</UL>
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:
<OL>
<LI>Item 1
<LI>Item 2
<LI>Item 3
</OL>
This gives you a numbered list rather than the bulleted list:
1. Item 1
2. Item 2
3. Item 3
Well, that does it for HTML lists, so lets go on to the next section: Using the Body
Tag Attributes.
Partners
Using BODY Tag Attributes
How to use body tag attributes to enhance your page

Home/HTML/Beginner/Body Tag Attributes
When you create a web page, you can change serveral things in the body of your
document by adding extra commands to the <BODY> tag. Here is what a body tag
with serveral additions would look like:
<BODY bgcolor="black" text="red" link="yellow" alink="orange" vlink="white"

background="image.gif">
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.
Partners
Changing the Default Text

Color
How to change the default font color on your page

Home/HTML/Beginner/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:
<BODY text="black">
You may also see a weird number/letter combination, like this:

<BODY text="#000000">
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:
<BODY bgcolor="blue" text="black">
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:
<BODY text="red">
Or using a hex code:
<BODY text="#FF0000">
Now, any text you type inside the body tags will show up as your new color in the
web browser. So, now you may want to change the link color as well. Well, that's
coming up in the next section: Changing the Link Color.
Partners
Changing the Link Color

How to change the link color on your page

Home/HTML/Beginner/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:
<BODY link="blue">
Or the tag might have some other commands as well:
<BODY bgcolor="#000000" text="#FFFFFF" link="#0000FF">
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:
<BODY link="blue">
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:
<BODY link="red">
Or using the hex code:
<BODY link="#FF0000">
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:
<BODY link="blue" alink="blue" vlink="violet">
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!
Now we are going to move on to the background color command, which is very
similar to the link commands we just finished. So, let's go on to Using a
Background Color.
Partners
Using a Background Color
Add or change the background color on your page

Home/HTML/Beginner/Background Colors
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:
<BODY bgcolor="gray">
Or the tag may have more commands inside and use hex codes, like this:
<BODY text="#000000" link="#A6CAF0" bgcolor="#808080">
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:
<BODY bgcolor="gray" text="#000000" link="#A6CAF0">
Or if you don't have any other commands, just add it in like this:
<BODY bgcolor="gray">
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:
<BODY bgcolor="green">
Or you could use the hex code for green:
<BODY bgcolor="#008000">
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!
All right, we only have one more body tag section left! So let's go on to the next
section: Using a Background Image.
Partners
Using a Background Image

How to add a background image to your page

Home/HTML/Beginner/Background Images
To add a background image to your page, you will need to locate the <BODY> tag
in your document. When you have found it, you may see just the word BODY, or
you may see a string of commands afterward. It may look something like this:
<BODY bgcolor="#FFFFFF" text="#000000">
What we are going to do is add a command after the word BODY. So, go to the
end of the word BODY, skip a space, and type the following:
background=" "
Now your body tag should look something like this (and may have more
commands):
<BODY background=" ">
Now, we are going to place the url of the image inside the quotation marks. So, if
the image I want to use is at http://www.mysite.com/image1.gif , I would insert this
into the command, like this:
<BODY background="http://www.mysite.com/image1.gif">
Your image should have the file extension .gif or .jpg . If not, you will want to covert
it to one of these file types. One program that will do this is Paint Shop Pro, which
is available as shareware from JASC.
Now, if your image file is located in the same directory as your html file, you can
just type the filename of the image rather than the full url. So, if we want image2.gif
to be the background image, and it is in the same directory as the page we are
editing, we can type the command this way:
<BODY background="image2.gif">
Now, as a real example, I will use an image from my server as a background on a

page. The name of the image is "next.jpg". The url for the image is
http://www.pageresource.com/images/next.jpg . So, to use this as a background, I
would type in this:
<BODY background="http://www.pageresource.com/images/next.jpg">
Now, if I put an html file in my "images" directory, I could use the image by typing
in just the filename, like this:
<BODY background="next.jpg">
Okay, now you can use your own image as a background....so put a picture of
yourself as a background. That's always kind of fun......
Well then, let's move on to the next section, Resizing Images.
Partners
Resizing Images
How to resize your images
Home/HTML/Beginner/Resizing Images
Okay, you have an image you want to use, but it's just not the right size to go
where you want it to go. Maybe the image takes up the whole screen, or maybe
you wanted a larger version of the image on the screen. Well, you can resize the
image by adding width and height commands to your image tag. Let's take a look
at an example. I have an image called "next.jpg". Well, suppose I want to make it
smaller. All I need to do is know the original width and height of my image. The
width and height are usually written in pixels. A typical screen is about 800 pixels
wide and 600 pixels in height (though this varies with different video cards and
moniters). My image turns out to be 106 pixels wide and 65 pixels in height. The
picture looks like this:
So, to change the size of the image, I'm going to add these two commands inside
the image tag:
width=" " and

height=" "
I'm going to place the commands after the initial command, IMG SRC="next.jpg".
The tag will now look like this:
<IMG SRC="next.jpg" width=" " height=" ">
Now, to make the image smaller, I'm going to place numbers inside those
quotation marks. Well, let's say I wanted it to be 75 pixels wide and 40 pixels high.
I would then place these numbers into the commands, like this:
<IMG SRC="next.jpg" width="75" height="40">
Now, when I reload my page, the picture will be the new height and width I
specified. Here's what it would look like:
Now, to make the image larger, we will just insert larger numbers for the width and
height:
Now the image looks like this:

As you can see, the images became somewhat distorted when I resized them.
One reason for this is that I didn't keep the aspect ratio the same. Since the image
was originally 106x65, I would have to decide on a width, and then find a height
that would keep the aspect ratio of 106/65. When you calculate 106/65, you get
about 1.63 . So, if you want to make the width 75, you need to find the height that
will make the ratio as close as possible to 1.63 . You can guess at it for awhile, or
if you like solving equations, here it is:
75/height = 1.63
Now take the answer and round up or down. In this case, it comes out to about
46.0123 . So, I would use 46 as the height:
Now it looks like this:
If you don't want to deal with math all the time (like me), you can also resize it with
a paint or image program (which will do the calculations for you) and upload the
new version of the picture to your server. I usually use my image program to do
this, just for the ease of use. Besides, if I'm making the image smaller, the paint
program will make the file size smaller.
All right, now we will move on to the next section, Using an Image as a Link. (And
there won't be anything about aspect ratios or mathematical equations!)
Partners
How to link an image

Home/HTML/Beginner/Image as a Link
To use an image as a link, you will have to use two things you have already
learned.
1. How to create a link.

2. How to add an image to the page.
Now, remember my trusty old picture, "next.jpg"? I have been using it at the
bottom of each page as a link to the next section. So, what did I do? Well, first, you
must create a link to the place you want people to go when they click on the
picture. So, if you wanted to link to our main page, you would go ahead and type
the opening link tag, like this:
<A HREF="http://www.pageresource.com">
Now, don't type any text, and don't close the tag just yet. What we are going to do
is place the image tag right after the opening link tag. The image we are using
here is "next.jpg". So, you would type the following:
OK, now we are going to close the link tag at the end of the image tag, so that the
image tag is between the opening and closing link tags, like this:
</A>
Now that the image is between the link tags, it will operate the same way as a
normal link, but now it is a visual image. Here is what the above code would
produce:
Move the mouse over the image, and it will turn into the little pointing hand. If you
click on the image, you will end up all the way back at our main page.
Well, that's good, but what's with the border around the image? Well, the border
just seems to be added by default on most browsers. To get rid of it, add this
command to the image tag:
border="0"
Here is an example:
<IMG SRC="next.jpg" border="0">
</A>
Now, the picture will be a link, and you won't have the extra border around the
sides:
You can also make the border larger in the same way, just use a larger number in
there, for instance:
border="5"
The drawback to the border is that it insists on being the color of your link color,
and sometimes this isn't the color you want to use. The only way I know around it
is to edit the actual image to where it has the border you want, and then set the
border="0" in your image tag. Oh, well.
So, let's move on to the next section, Image Alignment and Wrapping Text.
Partners
Image
Alignment/Wrapping Text
How to wrap text around an image

Home/HTML/Beginner/Alignment and Text Wrapping
To allow text to wrap around an image, you just need to add one of these
commands to the image tag:
align="left"
align="right"
So, the image tag would look like this:
<IMG SRC="next.jpg" align="left">
Now just type in your text and it will wrap around the image, rather than jumping to
the bottom of the image. Here is an example.
Hmmm....I think this image is in the way... 

<IMG SRC="../images/next.jpg" align="left">
Hello, this text should wrap around 
this image like this. 
I'll just keep on writing and 
writing and writing and writing 
until I'm tired of writing.... 
This will give you the following:
Hmmm....I think this image is in the way...

Hello, this text should wrap around
this image like this.
I'll just keep on writing and
writing and writing and writing
until I'm tired of writing....
If you write across the entire screen, you won't need all those line breaks. I just
used them to keep the example from being really long. If you take out the line
breaks, the text will go the rest of the way across the screen before wrapping
around. You can also do this with the align="right" command. The image will be on
the right and your text will wrap around the left. Isn't this great?
Well then, let's move on to the next section: Using Image "alt" Commands.
Partners
Using Image "alt"

Commands
An alternative to the picture

Home/HTML/Beginner/Alt Command
Okay, the image alt command is used to display text in the case someone visits
your page with a browser that can't show images, or in the case they have image
loading turned off to so pages will load faster. If you have images as links, this is a
handy way to let people know what the image was supposed to do. This is the alt
command:
alt="something you want to write"
Place this inside the image tag:
<IMG SRC="image.gif" alt="something you want to write">
You place this command inside the image tag for the image you want to display
alternate text for. One image I do this with is my "next.jpg" image at the bottom of
these pages. I place the text "next" in the alt command, and that is what will be
seen if someone sees the page with no images. Here is the example:
<IMG SRC="next.jpg" alt="next">
To see this work, you will probably have to disable image loading and reload this
page. You can then scroll down to the bottom right and see the word "next" where
the image used to be. Of course, if you have a really new browser, you can move
your mouse over the image and it will display the alt text right there for you.
So, let's move on once again. The next section is: Linking Within a Single Page.
Partners
Linking Within a Single

Page
Jump to the top, middle, or any other place

Home/HTML/Beginner/Target Linking
Okay, lets say you have one page that is pretty long. Maybe you would like to give
someone a way back to the top of the page when they are at the bottom. Or
maybe you want to divide it into sections and use a table of contents at the top.
Well, the way to do this is to use a named anchor, which is a specific area of your
page you want to make a link to. You could link to any part of the page, but for
now, let's say you want to create a link to the top of your page. To do this, go to
the top of the body section (right after the body tag). Now type the following tag:
<A NAME="top"></A>
You can place any name you wish inside the quotes. This just makes it easy to
see where we are going to end up. Now, go anywhere between the body tags and
type this link:
<A HREF="#top">Back to the Top</A>
If you click on this link, you will be sent back to the top of the page. You can try
one I made on this page by clicking on the link below:
Back to top
The # sign is there to let the browser know the destination is a named anchor
within this page. So, if you create an anchor named "cool", you link to that anchor
by using "#cool", like this:
<A NAME="cool"></A> -----The anchor name

<A HREF="#cool">To the Cool Section of this page</A> -----Linking to the
named section
You can place a named anchor anyplace on your page. You can link to it from any
other part of the page. You can place one at the third paragraph, the bottom, the
top, the 500th word..... It can make navigating some pages a whole lot easier.
So, let's move on to the next section, The Email Link.
Partners
The E-mail Link

How to create an email link

Home/HTML/Beginner/Linking: E-mail Link
To create an e-mail link on your page, all you need to do is use the standard link
tag. The trick is in what you use as the address of the link. To force the browser to
read it as an e-mail link, you use "mailto:" rather than "http://" to begin the address.
After the "mailto:", you will use your e-mail address rather than a web address, like
this:
<A HREF="mailto:your_email_address">E-mail Me!</A>
Yes, all you need to do is replace the your_email_address with .....your e-mail
address. Here is an example, to create an email link to myself, I would place
john@pageresource.com in that space, like this:
<A HREF="mailto:john@pageresource.com">Give me some mail!</A>
Here is the resulting link:
Give me some mail!
If you click on the link, your browser will bring up a window for you to send me e-
mail, with my e-mail address already filled in. Send me whatever you want- maybe
your joke of the day or something!
You can also create the subject of the message so the viewer doesn't have to fill in
something in the subject line. You do this by adding a "?" at the end of your e-mail
address and then your subject, like this:
<A HREF="mailto:john@pageresource.com?subject=Hey John">Mail Me!</A>
The example link is below, notice that when you click it, the subject field of your
email message is already filled in with "Hey John".
Mail Me!
Now, isn't e-mail fun?
All right, let's go to the next section, More on the E-mail Link.
Partners
The E-mail Link: More

More tricks for the email link

Home/HTML/Beginner/Linking: E-mail Link 2
In the last section, we saw how to add the subject to a message through the e-mail link. It was done using
a "question mark" followed by subject= and then the subject:
<A HREF="mailto:you@you.com?subject=Hi">Mail Me</A>

On top of adding the subject, there are a couple of extras you can also add. You can add a carbon copy
recipient, a blind carbon copy recipient, or use a combination of the subject with either or both of these.
To send a carbon copy, you add the cc= command after the question mark, followed by the e-mail
address of the person you want to send the carbon copy to:
<A HREF="mailto:you@you.com?cc=friend@friend.com">
Mail Me</A>
The same goes for a blind carbon copy, except you use the bcc= command instead:
<A HREF="mailto:you@you.com?bcc=friend@friend.com">
Mail Me</A>
With either of these, you can send the copies to multiple addresses by separating them with commas:
<A HREF="mailto:you@you.com?bcc=friend@friend.com, other@other.com">

Mail Me</A>
Now, if you want to combine more than one of these commands after the question mark, you add them in
using an "&" sign at the end of the first command. For instance, if you want a subject and a blind carbon
copy, it would look like this:
<A HREF="mailto:you@you.com?subject=Hi&bcc=friend@friend.com">
Mail Me</A>
If you want all three, use the "&" sign again:
<A HREF="mailto:you@you.com?
subject=Hi&bcc=friend@friend.com&cc=other@other.com">
Mail Me</A>
With that, you can have some more fun with your e-mail links-- and if you run a site with a partner you can
both get an e-mail when someone uses that link.

Using Your Materials: A Quick Look at Notepad and Web Browsers

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Using Your Materials: A Quick Look at Notepad and Web Browsers

Hochgeladen von

Copyright:

Verfügbare Formate

Using Your Materials

A quick look at Notepad and Web Browsers

Pit Stop | Complete List | Beginners | Text | Linking | Images | Advanced

Hi there, you have just written your first web page!

HTML: Basic Format

Pit Stop | Complete List | Beginners | Text | Linking | Images | Advanced

The result of this would be:

<U> Underline Me! </U>

Is the same as:

Is the same as:

Everything displayed on your page will be in here.

The Wonderful Text Tags

Pit Stop | Complete List | Beginners | Text | Linking | Images | Advanced

<B></B> This is the tag for bold text.

Here are a few more to start working with:

<U></U> Underline text

This centers text on the page

<B><I>I am bold AND Italic, which makes me cool!</I></B>

This will show up like this:

I am bold AND Italic, which makes me cool!

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

<B><I><U>Would you stop tagging me!</B></I></U>

This will give us:

Would you stop tagging me!

<U><I><B>Would you stop</B></I>tagging me!</U>

would give us this!

Would you stop tagging me!

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

This will give us the following:

I'm in the middle!

Headings and Paragraphs

Pit Stop | Complete List | Beginners | Text | Linking | Images | Advanced

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

You must have good vision...

End this line now!!<BR>Thanks!

This will generate the following:

End this line now!!

This gives us:

Hello, I want a new line.

Now this will do what we wanted it to:

This is some cool stuff.

This will give us the following:

This is some cool stuff.

Both of these will give you this:

This paragraph needs a visual ending!

Here is a new paragraph....

Manipulating Font Size and

Pit Stop | Complete List | Beginners | Text | Linking | Images | Advanced

<FONT SIZE="x">text to change</FONT>

<FONT SIZE="+2">I'm a big sentence now!</FONT>

This will give us the following:

I'm a big sentence now!

<FONT SIZE="-2">Hey, I'm Small!</FONT>

Will give us this:

Hey, I'm Small!

Here are some more size examples for you:

<FONT SIZE="+4">Hey There</FONT>

<FONT SIZE="-2">Hey There</FONT>

<FONT SIZE="-3">Can you read this?</FONT>

<FONT COLOR="red">I'm red!</FONT>

<FONT COLOR="#FF0000">I'm red!</FONT>

<FONT SIZE="+2"><FONT COLOR="gold">I am gold!</FONT></FONT>

This page Copyright © 1999 by me!