Html 4.0

04/12/23 1

HTML 4.0

Wayne ThomasThe Community Idea Stations

04/12/23 2

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/12/23 3

<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/12/23 4

Two more real simple tags are EMPHASIS and BIG.

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

04/12/23 5

Every Webpage written in HTML has essentially two parts:

The Head The Body

04/12/23 6

<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/12/23 7

<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/12/23 8

<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/12/23 9

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/12/23 10

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=blackLINK=blue ALINK=green VLINK=red> </BODY>

04/12/23 11

An HTML Tag has different parts, but they

are all set up in a very standard way.

<ELEMENT ATTRIBUTE=value>

<BODY BGCOLOR=white TEXT=blackLINK=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/12/23 12

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.

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

04/12/23 13

Cont..

VLINK=red

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

04/12/23 14

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/12/23 15

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.

<BODY BGCOLOR=white TEXT=blackLINK=blue ALINK=green VLINK=redBACKGROUND="http://dis.dozier.com/chalk.jpg">

</BODY>

04/12/23 16

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/12/23 17

HeadingsHeadings come in six sizes.

<H1>Your Heading</H1>






04/12/23 18

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/12/23 19

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/12/23 20

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/12/23 21

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/12/23 22

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/12/23 23

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/12/23 24

Font Size Cont…

There are seven font sizes you can use with 7 being the largest and 1 being the smallest.

SIZE=7SIZE=6SIZE=5SIZE=4SIZE=3SIZE=2

SIZE=1

04/12/23 25

Hyperlink or Link for ShortA 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/12/23 26

E-Mail

You can place a special link in your page that, when clicked, allows your visitor to email youDo by placing a MAILTO value in your link tag. <A HREF="Mailto:[email protected]">

04/12/23 27

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/12/23 28

Two attributes you'll need to know:

SRC and ALIGNSRC 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/12/23 29

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/12/23 30

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>

Technology

Html 4.0