Html 4.0

HTML 4.0
Wayne Thomas
The Community Idea Stations

04/18/13 1

It's All In The Angles
If you look at the source code for any webpage, you'll notice
different HTML commands all through the document.

< >
These commands are called TAGS and tell the browser how to
display the text, layout, and images of the document.

HTML tags are easy to recognize because they are always
between a lesser than sign and greater than sign, or as I like to
call them, Angle Brackets.

04/18/13 2

<B>
The first you should learn is the BOLD tag.
IT's simply the letter "B", sandwiched between two angle
brackets and looks like <B>
Tags almost always work in pairs. There are a few exceptions
we'll discuss later, but most of the time there is an opening tag
and a closing tag. The closing tag for Bold looks like </B>

They look the same as the opening tag except for the added
slash right after the lesser than sign. Any text placed between
the opening and closing Bold tags will look thicker than the rest
of the text on the page.
This is NORMAL text.
<B>This is BOLD text</B>

04/18/13 3

Two more real simple tags are
EMPHASIS and BIG.

<EM>EMPHASIS</EM>
<BIG>BIG</BIG>,

04/18/13 4

Every Webpage written in HTML has
essentially two parts:

The Head
The Body

04/18/13 5

<HTML> </HTML>

The HTML tag tells your computer that everything
between these two tags is an HTML document.

You'll always begin your page with the opening HTML
tag and end it with the closing HTML tag

04/18/13 6

<HEAD> </HEAD>
The very first part of your document is
the Head.

This is where you'll put the title that
comes up on somebody's navigation
bar when they call up your page

04/18/13 7

<BODY> </BODY>
After the Head is the Body.

This is the real meat of the page.

It's where all your visible text will be,
and all your images and links too. Don't
forget to put a body in your Homepage!

04/18/13 8

The Skeleton
Here is the HTML for a VERY simple webpage. See if you can
figure it out using what You've learned so far.

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML

04/18/13 9

Remember the BODY tags?
That's the pair of tags which shows where the body of
the document begins and ends. All of your content
goes between the opening and closing Body tags.
<BODY> </BODY>

The Body Tag controls a lot of what your page will
look like. Here's an example:

<BODY BGCOLOR=white TEXT=black
LINK=blue ALINK=green VLINK=red>
</BODY>

04/18/13 10

An HTML Tag has different parts, but they are
all set up in a very standard way.

<ELEMENT ATTRIBUTE=value>

LINK=blue ALINK=green VLINK=red>
</BODY>

In the Body tag example above, BODY is the
element, and BGCOLOR, TEXT, LINK, ALINK, and
VLINK are the attributes.

04/18/13 11

The Element tells what the tag is in a general way, and
the Attributes describe the tag more specifically.

BGCOLOR=white

This determines the background color for the entire
page. I use white here, but you could use red, blue,
green, black, almost any common color. Or
hexadecimal!

TEXT=black

Obviously, this controls the color of the page's text.
Again, you can use almost any common color.

04/18/13 12

Cont..
VLINK=red

Once a link has been visited, the color will be
whatever color the VLINK attribute specifies.

04/18/13 13

Cont..
LINK=blue

This will be the color of your hyperlink before it's clicked on.
Links have to be a different color than the text, so that your
visitor knows that it's a link.

ALINK=purple

Ever notice a link turn a different color while it's being clicked?
That's because the ALINK attribute was set to a certain color.

04/18/13 14

BACKGROUND Attribute
Using the BACKGROUND Attribute, you can tell the browser to go find
a certain image file on your server, and use that image for the
background.

In order to use the Background attribute, you need to have the address
of an image file on the web.

LINK=blue ALINK=green VLINK=red
BACKGROUND="http://dis.dozier.com/chalk.jpg">
</BODY>

04/18/13 15

Stand Alone Tags

Most HTML tags work in pairs, but that
there are a few exceptions?

<P> - Paragraph
<BR> Line Break
<HR> Horizontal Rule

04/18/13 16

Headings
Headings come in six sizes.

<H1>Your Heading</H1>





04/18/13 17

Center tags
You can center your Heading by
nesting it inside a set of CENTER
tags, like in the example below.

<CENTER><H1>Your Heading</H1></CENTER>

You can also center text or images by placing them
inside center tags.

04/18/13 18

Font Tags <FONT></FONT>
The size and color of text on an HTML
document can be controlled by using the
FONT tag.

you can enclose indivdual words, sentances,
or even sections of your page in between
FONT tags

04/18/13 19

ATTRIBUTE
COLOR is an Attribute, as is SIZE.

<FONT COLOR=RED> YOUR
TEXT</FONT>

In this example, FONT is the tag name, COLOR is
the attribute, and RED is the value of that
attribute.

04/18/13 20

Hexidecimal
HexidecimalColor names are six digit codes used to
specify how much of the colors RED, BLUE, and
GREEN are in the desired color.

04/18/13 21

HexidecimalCont…
You can use the Hexidecimalcode in
place of the color's name in your font
tag like this:

< FONT COLOR="#FF0000"> Your Text </FONT>

04/18/13 22

Font Size
Use the size attribute just like the font color
attribute, by inserting it into your opening
font tag.
<FONT SIZE=5> YOUR TEXT</Font>

You can put all of it's attributes in the same
tag. So in our font tag we can put both the
size and color attributes like this:

<FONT SIZE=5 COLOR=#FF0000>

04/18/13 23

Font Size Cont…
There are seven font sizes you can
use with 7 being the largest and 1
being the smallest.
SIZE=7
SIZE=6
SIZE=5
SIZE=4
SIZE=3
SIZE=2
SIZE=1

04/18/13 24

Hyperlink or Link for Short
A link tag looks like this:

<A HREF="URL"> TEXT </A>

http://ideastations.org

So the tags would look like:

<A HREF= “ http://ideastations.org ">WCVE</A>

04/18/13 25

E-Mail
You can place a special link in your
page that, when clicked, allows your
visitor to email you
Do by placing a MAILTO value in your
link tag.
<A HREF="Mailto:John@Yahoo.com">

04/18/13 26

Image Tag <IMG>
To place an image on your page, use the
image tag. Like the font tag, the image tag
requires attributes.
Unlike the font tag, IMG is a stand alone tag
which does not require a closing tag.

04/18/13 27

Two attributes you'll need to
know:

SRC and ALIGN
SRC stands for source. This attribute
needs a value, so you'll use the url of
the GIF or JPG file where your image is
located.
<IMG SRC="url">

04/18/13 28

ALIGN dictates how you want your text to
line up in relation to your graphic

<IMG SRC="url" ALIGN=top>
<IMG SRC="url" ALIGN=middle>
<IMG SRC="url" ALIGN=bottom>

04/18/13 29

Positioning Your Image
To place your image along the right side
of the page, you can use the ALIGN
attribute again.
<IMG SRC="url" ALIGN=right>
To place the image in the center of the
page, use this
<IMG SRC="url" ALIGN=center>

04/18/13 30

Html 4.0

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Html 4.0

Similar to Html 4.0 (20)

Recently uploaded

Recently uploaded (20)

Html 4.0