HTML 4.01 Basics

HTML 4.
01 Basics
1
Owen S. Lacoste
Arkicad Center for Computer Graphics
10/14/2008
HTML 4.01 Basics

HTML 4.01 Basics
2
What You’ll Need

• A browser (you're using one right now) Caution: Word
• A text editor Processors
Don’t use Word, Wordpad,
Step 1: Open a Text Editor
AppleWorks, or any other
Windows users: open Notepad program that does not save
[Start > Programs > Accessories > Notepad] Take Note
files as plain text. :
[Start> Run> Type “notepad” and press Ok.]
Notepad
Step 2: Create and Save the Web Page Notepad is not an ideal text
The Basic Structure of HTML is given below. editor for our purposes.
Notepad
Type in the code into your text editor, starting with the text, really wants to work
"<html>". with files that have a .txt
extension. You must
<html> constantly Select the All Files
<head>
<title>My Webpage</title>
</head>
<body>
This is my webpage.
</body>
</html>
Once you have finished with your code, save the file in your home directory or
Desktop as "index.html".
Step 3: Display the Webpage in Your Browser
Open your file by double-clicking it or click the right button of the mouse and select Open.
You’ll see that only
“This is my webpage.” is displayed on the browser on a white background.
? Where did everything else go?

And what are those words with the angle brackets, anyway?
Tags
A Brief Introduction to Tags
The web page index.html uses the following tags: <html>, <head>, <title>, and
<body>.
HTML 4.01 Basics
3
Tags do not appear directly when you view a web page. Instead, they serve as instructions
to your browser.
Tags can change the font, create a link, insert an image, and more.
The tags in index.html that begin with a slash (<html>, <head>, <title>, and <body>)
are called closing tags. Closing tags stop the effect of the tag that they correspond to. See
example below
<body> section ends at the closing tag, </body>.
Tag Properties
• Tags are delineated by angle brackets (< >)
• Tags are "invisible"; they don't directly appear in the web page
• Closing tags begin with a slash and end the effect of a previous tag
Structural Tags
• <html>: "Here begins the HTML."
All well-formed HTML documents have one <html> and one </html> tag.
These tags, along with the .html file extension, identify a file as an HTML
document.
• <head>: "Here begins the header."

The header contains tags that apply to the overall document. For example, it
might contain tags that are designed for search engines to pick up: keywords,
a short description, and so on. Information in the header is not meant to be
directly displayed as normal webpage content.
• <title>: "Here begins the document title." (Must be in the header)
• <body>: "Here begins the body."

All well-formed HTML documents have one <body> and one </body> tag.
This section is where you put all the text and tags that should be displayed in
the main browser window. This is why the words, "This is my webpage"
appear in index.html.
Tag Components
Tags have three main components:
• tagname: Identifies the type of the tag.
Take Note: Tags
Some tags do not require a
• attribute: Allows one type of tag to produce differentclosing
effects.
tag or attributes to
• value: Allows particular attributes to vary. work properly:
The <br> tag creates a line
<tagname attribute1="value1" attribute2="value2"...> Case is
break. irrelevant
It stands for tags.
alone without
...(text or more tags go here)... Some people prefer all upper
</tagname> case, so that when they look
at their HTML source, it's
Misspellings and Misunderstandings
easier to differentiate tags
A browser processes an HTML page something like this: and text. Either way, it's just a
1. Identify anything that is between angle brackets (< >)particular
as a "tag" style choice. <BODY>,
<body>, and even <bODy> are
HTML 4.01 Basics
4
2. Determine whether the browser has any instructions for using the tag:
 If yes, the tag is real -- follow the instructions
 If no, the tag is garbage -- ignore it
When a browser ignores a tag, that means one of two things:
1. The tag is misspelled or does not exist. (<arkicadd>, for example, is not an
HTML tag.)
2. The tag is legal, but that particular browser does not support it.
An example of #2 is the <blink> tag. This tag works in Mozilla and in nearly all
versions of Netscape Navigator. Internet Explorer and many other browsers do not
support it.
Attributes
Attributes modify the behavior of a tag. Attributes allow you to change sizes, colors,
specify link locations, and much more.
Attribute Components
Attributes have two main components: Take Note:
• attribute: Defines the attribute that you're using. Attributes
Each tag has a list of
• value: Selects a particular kind of behavior for the attribute.
permitted attributes. You
<tagname attribute1="value1" attribute2="value2"...>cannot freely add any
...(text or more tags go here)... attribute to any tag and
</tagname> expect it to work or almost
optional.
Similarities to Tags
Case is (mostly) irrelevant. STYLE, style, and sTyLE all do Remember
Tags may have multiple
:
attributes, and the order
the same thing. Case sometimes matters for the values Attributes
inside of the attribute: this is mostly true for attributes If you forget to add something
that are involved with links. or make a mistake, the
browser is supposed to do
Whitespace is irrelevant. You may freely insert spaces,
nothing. That's usually a good
tabs, or even carriage returns between attributes, as
thing.
long as you don't forget the closing angle bracket at the
end of the tag (>).
Incorrect attributes are ignored. Misspelled attributes, such as
hhref="http://www.yahoo.com" and style="backgrounde-color: yellow", have no
effect. As with tags, browsers attempt to ignore attributes that they do not
understand. Misspelling "background" means that your background won't turn
yellow; misspelling "href" means that your link will not appear. However, if you
misspell "http://www.yahoo.com", your link will appear... but it won't take you to the
right place.
Quote Marks
You must use a quote mark if the value contains a special character such as a space
or an angle bracket (< >). If you don't use quotes for special characters, the
browser will interpret the special character as the end of the attribute or tag. The
resulting garbled HTML will not be good.
HTML 4.01 Basics
5
When you do use quote marks, you must be sure to close them. Otherwise your
attribute will "continue" until the next quote mark... which could be a long while.
Again, you'll notice the garbled results immediately, although tracking down the
source of the problem might take some work.
THE HTML 4.01 BASICS

Here we'll start discussing the basic HTML tags and attributes.
Paragraph Breaks
P In this section, we learn about the paragraph tag and the line break tag.
Headings
In this section, we cover the heading tags, and discover why it's really important to
H close them properly.
Font Styles
F In this section, we take a look at tags that help you control the font. We'll
touch on the difference between inline and block tags, and compare
physical style tags versus logical style tags.
Colors
C In this section, we learn how to change the background and foreground

color of an entire page, a paragraph, or even a single word. We'll see
examples of color names and hex codes, and we'll discuss which method is
preferable.
Links
L
HTML 4.01 Basics
6
In this section, we break down a URL into its constituent parts, explain relative links
vs. absolute links, provide examples of how to use named anchors, and more.
Images
I In this section, we take a look at images: how to embed them in a web

page, how to stretch and squash them, and how to "float" them with
respect to the other content on the page.
Lists
Li In this section, we cover lists: ordered lists, unordered lists, and definition lists.
Paragraph Breaks
P Take Note
Paragraphs are defined with the <p> tag. HTML automatically :
adds an extra blank line before and after aParagraph
paragraph. Don't Forget the
Closing Tag. Closing all HTML
<p>This is a paragraph</p>
elements with an end tag is a
<p>This is another paragraph</p> future-proof way of writing
HTML. It also makes the code
easier to understand (read
and browse) when you mark
An Excerpt Page in Oil Painting both where an element starts
Let's say we want to make a website that discusses Oil Painting. (From Wikipedia)
<html>
<head>
<title>Oil Painting</title>
</head>
<body>
Oil painting is the process of painting with pigments that are bound with a
medium of drying oil - especially in early modern Europe, linseed oil.
Often an oil such as linseed was boiled with a resin such as pine resin or
even frankincense; these were called 'varnishes' and were prized for their
body and gloss. Other oils occasionally used include poppyseed oil, walnut
oil, and safflower oil.
These oils confer various properties to the oil paint, such as less
yellowing or different drying times. Certain differences are also visible
in the sheen of the paints depending on the oil.
Painters often use different oils in the same painting depending on

specific pigments and effects desired. The paints themselves also develop a
particular feel depending on the medium.
</body>
</html>
HTML 4.01 Basics
7
? Why is it different from the ones I inputted?

And what are those <p> tags for?
HTML collapses whitespace. This means that all our text will collapse into a
single paragraph and look like this:
Oil painting is the process of painting with pigments that are bound with a medium of drying oil - especially in
early modern Europe, linseed oil. Often an oil such as linseed was boiled with a resin such as pine resin or even
frankincense; these were called 'varnishes' and were prized for their body and gloss. Other oils occasionally used
include poppyseed oil, walnut oil, and safflower oil. These oils confer various properties to the oil paint, such as
less yellowing or different drying times. Certain differences are also visible in the sheen of the paints depending
on the oil. Painters often use different oils in the same painting depending on specific pigments and effects
desired. The paints themselves also develop a particular feel depending on the medium.
The <p> Tag

The <p> tag breaks text into paragraphs. Any text that you surround with a <p>
and a closing </p> becomes a separate block.
<html>
<head>
</head>
<body>
<p>
Oil painting is the process of painting with pigments that are bound with a
medium of drying oil - especially in early modern Europe, linseed oil.
</p>
<p>
Often an oil such as linseed was boiled with a resin such as pine resin or
even frankincense; these were called 'varnishes' and were prized for their
body and gloss. Other oils occasionally used include poppyseed oil, walnut
</p>
<p>
These oils confer various properties to the oil paint, such as less
yellowing or different drying times. Certain differences are also visible
in the sheen of the paints depending on the oil.
</p>
<p>
Painters often use different oils in the same painting depending on
specific pigments and effects desired. The paints themselves also develop a
particular feel depending on the medium.
</p>
Oil painting is the process of painting with pigments that are bound with a medium of drying oil - especially in
</body>
early
</html>modern Europe, linseed oil.
We've surrounded all the major blocks of text with <p>aragraph tags. The results
look
Oftenlike below.
an oil such as linseed was boiled with a resin such as pine resin or even frankincense; these were called
'varnishes' and were prized for their body and gloss. Other oils occasionally used include poppyseed oil, walnut
These oils confer various properties to the oil paint, such as less yellowing or different drying times. Certain
differences are also visible in the sheen of the paints depending on the oil.
Painters often use different oils in the same painting depending on specific pigments and effects desired. The
paints themselves also develop a particular feel depending on the medium.
HTML 4.01 Basics
8
The <br> Tag

The <br> tag is used when you want to break a line, but Take Note: Line
don't want to start a new paragraph. The <br> tag Breaks
forces a line break wherever you place it. <br> or <br /> - More and
more often you will see the
<p>This <br> is a para<br>graph with line breaks</p> <br> tag written like this: <br
/>
RESULT
Because the <br> tag has no
This end tag (or closing tag), it
is a para
graph with line breaks breaks one of the rules for
future HTML (the XML based
XHTML), namely that all
The <br> tag is an empty tag. It has no end tag like </br>, since a closing tag
doesn't make any sense.
HTML 4.01 Basics
9
H
Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the
largest heading. <h6> defines the smallest heading. HTML automatically
also adds an extra blank line before and
after a heading.
<h1>This is a heading</h1>
RESULT
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
<html>
Heading 6
<head>
</head>
<body>
<h3>Chapter 10:</h3>
<p>
Web Designing is the newest form of advertising and has been implemented
over the last decade.
</p>
</body>
</html>
HTML 4.01 Basics
10
Chapter 10:
Web Designing is the newest form of advertising and has been implemented over the last
decade.
Font Styles
F The style tags provide a straightforward way to control the font. These
tags fall into two categories: physical styles and logical styles. The
style tags provide only crude control over
your text.
Physical Styles
Physical style tags allow you to specify a particular font change. For example, to
make text bold, you can mark it off with the <b> tag: <b>bold text</b>.
 <b>: makes text bold.
 <i>: makes text italic.
 <small>: makes text smaller.
 <big>: makes text bigger.
 <tt>: makes text teletype (turns it into a monospace font, such as you might
get from an old-model typewriter).
Logical Styles
At first glance, logical styles seem similar to physical styles:
• <strong>: makes text strong.
• <em>: makes text emphasized.
• <cite>: marks off citations.
• <code>: marks off computer code fragments and commands.
Colors
C HTML colors are defined using a hexadecimal (hex) notation for the
combination of Red, Green, and Blue color values (RGB).The lowest value
that can be given to one of the light sources is 0 (hex 00). The highest value
HTML 4.01 Basics
11
is 255 (hex FF). Hex values are written as 3 double digit

numbers, starting with a # sign.
Foreground Color
To add color to an HTML element, you use style="color:{color}", where {color} is
the color value. For example:
<h3 style="color:blue">HTML Colors</h3>
This results in:

HTML Colors
Background Color
To add a background color to an HTML element, you use style="background-color:
{color}", where {color} is the color value. For example:
<h3 style="background-color:blue">HTML Colors</h3>
This results in:

HTML Colors
Border Color
To add a colored border to an HTML element, you use style="border:{width}
{color} {style}", where {width} is the width of the border, {color} is the color of
the border, and {style} is the style of the border. For example:
<h3 style="border:1px blue solid;">HTML Colors</h3>
This results in:

HTML Colors
Color Names
The most common methods for specifying colors are by using the color name or the
hexadecimal value. Although color names are easier to remember, the hexadecimal
values and RGB values provides you with more color options.
Hexadecimal values are a combination of letters and numbers. The numbers go

from 0 - 9 and the letters go from A to F. When using hexadecimal color values in
your HTML/CSS, you preceed the value with a hash (#). Although hexadecimal
values may look a little weird at first, you'll soon get used to them.
There are 16 color names (as specified in the HTML 4.0 specification). The chart
below shows these color names and their corresponding hexadecimal value.
Color Hexadecimal Color Hexadecimal
Color Color
Name Value Name Value
Black #000000 Green #008000
Silver #c0c0c0 Lime #00ff00
Gray #808080 Olive #808000

HTML 4.01 Basics
12
White #ffffff Yellow #ffff00
Maroon #800000 Navy #000080
Red #ff0000 Blue #0000ff
Purple #800080 Teal #008080
Fushia #ff00ff Aqua #00ffff
You can make up your own colors by simply entering any six digit hexadecimal
value (preceeded by a hash). In the following example, we're using the same code
as above. The only difference is that, instead of using "blue" as the value, we're
using its hexadecimal equivalent (which is #0000ff):
<h3 style="color:#0000ff">HTML Colors</h3>
This results in:

HTML Colors
If we wanted to change to a deeper blue, we could change our hexadecimal value
slightly, like this:
<h3 style="color:#000069">HTML Colors</h3>
This results in:

HTML Colors
Choosing Colors - The Easy Way
By using hexadecimal or RGB color values, you have a choice of over 16 million
different colors. You can start with 000000 and increment by one value all the way
up to FFFFFF. Each different value represents a slightly different color.
But don't worry - you won't need to remember every single hexadecimal color!
The HTML color picker and color chart make it easy for you to choose colors for your
website.
Links
L Otherwise known as hyperlinks, are defined using the <a> tag - otherwise
known as the anchor element.
To create a hyperlink, you use the a tag in conjunction with the href attribute
(href stands for Hypertext Reference). The value of the href attribute is the URL, or,
location of where the link is pointing to.
Example HTML Code:
HTML 4.01 Basics
13
Visit the <a href="http://www.bnlmultimedia.com/blog/">B&L Multimedia

Blog</a>
This results in:

Visit the B&L Multimedia Blog
Link Targets
You can nominate whether to open the URL in a new window or the current window.
You do this with the target attribute. For example, target="_blank" opens the URL in
a new window.
The target attribute can have the following possible values:
_blank Opens the URL in a new browser window.
_self Loads the URL in the current browser window.
_pare Loads the URL into the parent frame (still within the
nt current browser window). This is only applicable when
using frames.
_top Loads the URL in the current browser window, but

cancelling out any frames. Therefore, if frames were being
used, they aren't any longer.
Example HTML Code:

Visit the <a href="http://www.bnlmultimedia.com" target="_blank">B&L
Multimedia</a>
This results in:

Visit the B&L Multimedia
Named Anchors
You can make your links "jump" to other sections within the same page. You do this
with named anchors.
HTML 4.01 Basics
14
To use named anchors, you need to create two pieces of code - one for the
hyperlink (this is what the user will click on), and one for the named anchor (this is
where they will end up).
This page uses a named anchor. I did this by performing the steps below:
1. Create the named anchor first (where the user will end up)
Example HTML Code:
<h2>Link Targets<a name="link_targets"></a></h2>
2. Then create the hyperlink (what the user will click on). This is done by linking
to the name of the named anchor. You need to preceed the name with a hash
(#) symbol.
Example HTML Code:
<a href="#link_targets">Link Targets</a>
This results in:

Link Targets
When you click on the above link, this page should jump up to the "Link Targets"
section (above). You can either use your back button, or scroll down the page to get
back here.
Email Links
You can create a hyperlink to an email address. To do this, use the mailto attribute
in your anchor tag.
Example HTML Code:
<a href="mailto:owen@yahoo.com">Email Owen</a>
This results in:

Email Owen
Clicking on this link should result in your default email client opening up with the
email address already filled out.
Images
I They make up a large part of the web - most websites contain images.
HTML makes it very easy for you to embed images into your web page.
To embed an image into a web page, the image first needs to exist in
either .jpg, .gif, or .png format. You can create images in an image editor (such as
Adobe Photoshop) and save them in the correct format.
Once you've created an image, you need to embed it into your web page. To embed
the image into your web page, use the<img /> tag, specifying the actual location of
the image.
Example of Image Usage

HTML Code:
HTML 4.01 Basics
15
<img src="http://www.smiley.com/pix/smile.gif" width="100"

height="100" alt="Smile" />
This results in:
The img above contains a number of attributes. These attributes tell the browser all
about the image and how to display it. Here's an explanation of these attributes:
src Required attribute. This is the path to the image. It can be either
an absolute path, or a relative path (remember these terms
from our last lesson?)
widt Optional attribute (but recommended). This specifies the width

h to display the image. If the actual image is wider, it will shrink to
the dimensions you specify here. Likewise, if the actual image is
smaller it will expand to your dimensions. I don't recommend
specifying a different size for the image, as it will lose quality.
It's better to make sure the image is the correct size to start
with.
heig Optional attribute (but recommended). This specifies the height

ht to display the image. This attribute works similar to the width.
alt Alternate text. This specifies text to be used in case the

browser/user agent can't render the image.
Image Alignment
You can determine how your images will be aligned, relative to the other content on
the page (such as a paragraph of text). You do this using the align attribute.
HTML Code:
<p>
<img src="http://www.quackit.com/pix/smile.gif"
width="100" height="100" alt="Smile" align="right"/>
HTML 4.01 Basics
16
Here is a paragraph of text to demonstrate HTML images and how

they can be aligned to the right of a paragraph (or paragraphs)
if you so desire.</p> </p>This can be used to produce
some nice layout effects, especially if you have a lot of text,
and it runs right past the image.</p><p> Otherwise,
the image will just hang below the text and may look funny.</p>
This results in:
Here is a paragraph of text to demonstrate HTML images and how
they can be aligned to the right of a paragraph (or paragraphs) if you
so desire.
This can be used to produce some nice layout effects, especially if you
have a lot of text, and it runs right past the image.
Otherwise, the image will just hang below the text and may look funny.
Image Links
You can make your images "clickable" so that when a user clicks the image, it
opens another URL. You do this by simply wrapping the image with hyperlink code.
HTML Code:
<a href="http://www.smiley.com">
<img src="http://www.smiley.com/pix/smile.gif"
width="100" height="100" alt="Smile" />
</a>
This results in:
Removing the Border

You might notice that this has created a border around the image. This is default
behaviour for most browsers. If you don't want the border, specify border="0".
HTML Code:
<a href="http://www.smiley.com">
<img src="http://www.smiley.com/pix/smile.gif"
width="100" height="100" alt="Smile" border="0" />
</a>
This results in:
HTML 4.01 Basics
17
Li Lists
HTML supports ordered, unordered and definition lists.
Unordered (un-numbered) List

Typing this code:
<ul>
<li>List item 1</li>
</ul>
Results in this:
• List item 1
• List item 2
• List item 3
Ordered (numbered) List

Note, that the only difference between an ordered list and an unordered list is the
first letter of the list definition ("o" for ordered, "u" for unordered).
Typing this code:
<ol>
</ol>
Results in this:
1. List item 1
2. List item 2
3. List item 3
HTML 4.01 Basics
18
Definition Lists
A definition list is not a list of single items. It is a list of items (terms), with a
description of each item (term).
A definition list starts with a <dl> tag (definition list).
Each term starts with a <dt> tag (definition term).
Each description starts with a <dd> tag (definition description).
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Here is how it looks in a browser:
Coffee
Black hot drink
Milk
White cold drink
Inside the <dd> tag you can put paragraphs, line breaks, images, links, other lists,
etc.
For advanced tutorials and try it HTML code head on to.

http://www.w3schools.com/html/
For tag references go to http://www.w3schools.com/tags/default.asp
For Color Names go to http://www.w3schools.com/tags/ref_colornames.asp
Thanks and enjoy HTML!

HTML 4.01 Basics

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML 4.01 Basics

Uploaded by

Copyright:

Available Formats

HTML 4.

HTML 4.01 Basics

What You’ll Need

? Where did everything else go?

• <head>: "Here begins the header."

• <title>: "Here begins the document title." (Must be in the header)

• <body>: "Here begins the body."

THE HTML 4.01 BASICS

H close them properly.

C In this section, we learn how to change the background and foreground

I In this section, we take a look at images: how to embed them in a web

Painters often use different oils in the same painting depending on

? Why is it different from the ones I inputted?

The <p> Tag

The <br> Tag

is 255 (hex FF). Hex values are written as 3 double digit

This results in:

This results in:

This results in:

Hexadecimal values are a combination of letters and numbers. The numbers go

Black #000000 Green #008000

Silver #c0c0c0 Lime #00ff00

Gray #808080 Olive #808000

White #ffffff Yellow #ffff00

Maroon #800000 Navy #000080

Red #ff0000 Blue #0000ff

Purple #800080 Teal #008080

Fushia #ff00ff Aqua #00ffff

This results in:

This results in:

Visit the <a href="http://www.bnlmultimedia.com/blog/">B&L Multimedia

This results in:

_blank Opens the URL in a new browser window.

_self Loads the URL in the current browser window.

_top Loads the URL in the current browser window, but

Example HTML Code:

This results in:

This results in:

This results in:

Example of Image Usage

<img src="http://www.smiley.com/pix/smile.gif" width="100"

This results in:

widt Optional attribute (but recommended). This specifies the width

heig Optional attribute (but recommended). This specifies the height

alt Alternate text. This specifies text to be used in case the

Here is a paragraph of text to demonstrate HTML images and how

Removing the Border

Unordered (un-numbered) List

Ordered (numbered) List

For advanced tutorials and try it HTML code head on to.

For tag references go to http://www.w3schools.com/tags/default.asp

For Color Names go to http://www.w3schools.com/tags/ref_colornames.asp

Thanks and enjoy HTML!

You might also like