|
Advanced:
Separating Style from Content
When
you create web pages you do so through a process of writing
down your ideas and then displaying them in a way that is
appealing to you and your visitors. The people charged with
focusing the direction that the web is taking are keenly
sensitive to this fact and have reflected that awareness
in their releases of HTML recommendations (the document
which serves as a guideline in an effort to standardize
the way Internet development occurs and how it is supported
by the many different companies participating in growing
the Internet.) This is advantageous to all of us who author
HTML from building the simplest site to managing gargantuan
web spaces.
Where
do I start?
Tags
which retain structural integrity.
The specific's of these tags.
Some examples of usage.
Tags
which retain structural integrity.
One
specific area that the sensitivity of the standards is apparent
is in the availability of structure tags. These tags consist
of "EM", "STRONG", "DFN", "CODE", "SAMP", "KBD", "VAR",
and "CITE", and as of the latest HTML recommendations "ABBR",
and "ACRONYM". These tags form a family of phrase
elements. Wow, what does that mean!? Well, if a sentence
has a specific part that is to be emphasized
then you can "inform" the browser of that fact
by enclosing that part between <STRONG> and </STRONG>
tags. Or, if you have a passage from a book, or an article
that you want to include on your web page then you can do
so by enclosing the appropriate text between <CITE>
and </CITE> tags. For example the author of the following
quotation is enclosed between "CITE" tags.
"To
be or not to be, that is the question...." is a famous
featured piece of dialog by Hamlet, a fictitious character
of William Shakespeare.
This
makes it easy to retain the context of your writing without
having to bury pieces of it in gobs of commonly occuring
code in order to change issues of appearance. For example
a web author might use the <FONT> tag and it's "FACE",
"COLOR",
and "SIZE" properties (which we have covered in
prior issues of the newsletter) to make a word stand out,
but because this technique is used for a variety of different
reasons there is no way to easily know simply from looking
at the <FONT> tag - why - the word or phrase
was being visually differentiated from the surrounding text.
As you
progress in your understanding of HTML and the other technologies
that are designed to integrate with HTML you will appreciate
the distinction offered by phrase tags more and more, and
learn to do interesting tricks with them. The primary advantage
in using them is that you retain more of the meaning in
your writing and have the ability to have it displayed
in ways that improve its ability to convey your thoughts
and ideas.
The
specifics of these tags.
Because
the type of writing can vary so broadly the assortment of
usable tags varies equally. The basic concept behind each
of these tags however is that (1) they will be handled by
the browser according to the rules that the browser has
for them, (2) they are designed to identify specific common
features of writing. Here are the meanings and syntax of
each of the tags.
| HTML
Tag |
Usage
and Syntax |
| <EM> |
This
tag indicates an emphasis. By default most web browsers
render this as italic text. Here is an example of
usage and how it will appear.
Hello <EM>You</EM> will appear as
Hello You
|
| <STRONG> |
This
tag indicates an emphasis also, but a more noticeable
one. It is rendered by default as bold text. Here
is an example of usage and how it will appear.
Hello <STRONG>You</STRONG>
Hello You
|
| <DFN> |
This
tag indicates that the text wrapped between <DFN>
and </DFN> tags is the defining occurrence of
the text. While this is part of the earlier HTML recommendations
it is not consistently supported by both Internet
Explorer and Navigator. Internet Explorer renders
it as italic text, but under Navigator it appears
the same as the surrounding text. Here is an example
of it's usage and how it will appear (if you are using
Internet Explorer.)
<DFN>Scotland</DFN> is the birth place
of the game of golf.
Scotland is the birth place of the game
of golf.
|
| <CODE> |
This
tag is designed to indicate computer code such as
part of a program. It is rendered by default in a
non-proportionally spaced font and if possible without
a line break between any of the code between the starting
and ending "CODE" tags. Here is an example
of it's usage and the output it will produce.
<CODE>PRINT
"Hello World"</CODE>
PRINT "Hello World"
|
| <SAMP> |
This
tag is supposed to show sample output. For example
what the results would be from the "CODE"
example above being run. The text surrounded by these
tags is rendered the same way that "CODE"
tags are. Here is an example of it's usage and the
results it will produce.
<SAMP>Hello
World</SAMP>
Hello World
|
| <KBD> |
This
tag indicates the input that is to be entered from
the visitor. This is rendered in a non-proportional
font as well. Here is an example and the results it
will produce.
<KBD>Your
Name Here</KBD>
Your Name Here
|
| <VAR> |
This
is for use when displaying a variable in a program.
It is rendered in italics. Here is an example of it's
usage and how it will appear.
<VAR>My_Variable</VAR>
My_Variable
|
| <CITE> |
This
tag indicates a reference to an external source, or
a citation. It is rendered in italic text. Here is
an example of it's usage and how it will look.
These
words were spoken by <CITE>ME</CITE>
These words were spoken by ME
|
| <ABBR> |
This
tag is new as of the HTML 4.0 recommendation. It is
designed to indicate the long name implied by abbreviated
text. For example the term Post Office Protocol is
the name implied by the abbreviation "POP".
Because the tag is new you will need to check your
browser and verify that it supports the HTML 4.0 recommendation
in order for this tag to work. Here is an example
of it's usage and how it will work (if your browser
is HTML 4.0 compliant.)
<ABBR
TITLE="Post Office Protocol">POP</ABBR>
POP |
| <ACRONYM> |
This
tag is new as of the HTML 4.0 recommendation. It is
the sibling of the "ABBR" tag. It indicates
an acronym. While Navigator 4 does not support it,
Internet Explorer 5 will display a drop down box containing
any information you supply when a visitor drives the
mouse pointer over the acronym text. For example the
following code will produce the text "Post Office
Protocol" in a small box when a visitor drives
the mouse over the text "POP".
<ACRONYM
TITLE="Post Office Protocol">POP</ACRONYM>
POP
|
Some
examples of usage.
"By
learning to use these tags in your content you will make
your documents more structured and easier to modify and
enhance later should you decide that is what you want to
do." -anonymous writer.
WYSIWYG
is a popular concept in HTML
development.
(For the non HTML 4.0 compliant browsers driving the mouse
over "WYSIWYG" will produce "What You See
Is What You Get" and "HTML" will produce
"Hyper Text Markup Language".)
Function
Print_Hello_World(){
alert("Hello World");
}
Is the
JavaScript code fragment which can be used to create an
alert box containing the text "Hello World".
|
