Introduction
The following is a list of terms that will be important
for you to know and will be used liberally
throughout this document.
HTML (Hypertext Markup Language) is a scripting language
used to create Internet documents by describing how a
browser should display the contents of a plain ascii
file via the use of Tags . Shortly
put, you create a file containing the contents you want to present
to a browser and how you want those contents displayed
through the use of tags.
Tags in HTML are what allow you to do the things you have
come to expect from webpages, e.g., underlining text, adding
pictures, sounds, backgrounds, animations, etc. Informally,
Tags are the commands that tell the web browser what to do.
Formally, Tags define Elements of a HTML
document and each element is handled by the browser in a
predefined manner. All Tags in HTML begin with a "less
than" sign (<) and end with a "greater than
" sign (>). Between the two signs is the TagName and
Attributes.
E.g.
It is very important that you do not forget to end your
Tags properly or you may end up having a large portion
of your webpage in boldface because you forgot to turn it
off!
Sometimes it is not enough to include just a Tag. For
example, if you wanted to make a link to another page,
you have to let the browser know where the
link goes when the user clicks on it. Passing extra
information to Tags in this manner is done by setting
Attributes.
E.g.
It is important to note that Attributes may apply to one
Tag but may or may not be used in another. Or, the same
attribute may produce different behavior in a different
context. For example, it would not make sense to include
an HREF attribute in an U (underline) Tag since the
underlining tag does noting more than what it describes;
that is, it underlines text. The HREF attribute
is generally used with the anchor Tag to point to the HTML
document you wish to "anchor to."
In HTML, some characters are used for special purposes. For
example, '<' and '>' are used to specify the opening
and closing of Tags. To include such characters as part
of the text within your document you will need to tell the
browser that you just want to print out the character,
and not treat it as one of characters that the browser
considers to be part of HTML document. This is
done using Escape Sequences. All Escape
Sequences begin with an ampersand (&). For example to
include the greater than sign in your text, you
would use
In addition to characters reserved by HTML, there are
special characters not included on your keyboard that you
might want to use, such as the copyright symbol ©
By looking at the source for this web page you can see
how to put such characters into your web pages.
The link you see here (
Ascii Characters) contains a complete list of ASCII (American Standard
Code for Information Interchange) supported Escape Characters.
When you are create your web document, there are a few
basic conventions you should keep in mind that will not only
help you, but others who may read your page's source:
Just so you can get a feel for creating an HTML document,
you should copy the above exmple to your own text file,
modify it to fit your own needs, and load it in your
browser.
Note: Do _NOT_ make LINK and VLINK the same color under
any circumstance unless it is absolutely necessary. It is
very annoying not being able to determine what links you
have and have not visited, especially on 'long' journies.
There is another type of list called a definition list
that is useful for defining terms. Definition lists begin with
<DL> and end with </DL>. Between these
two tags you include the terms you want to define, and the
definitions of those terms. Terms are defined with the
<DT> Data Term Tag and definitions use the
<DD> Data Definition Tag.
As a webpage designer, you have a moral and legal
responsibilty to the Internet community (and The College
of New Jersey). You are required to keep
your material clean, i.e. no nude or partially nude pictures,
and for that matter, nothing, without limitation, that otherwise
in any manner could be interpreted as being obscene,
offensive, illegal, or inappropriate. Remember, any material
you write is accessible to The World so try
to be sensitive morally and politically as you can easily find
yourself in bigger trouble than you could have ever dreamed
possible. Your ability to present the world your webpage is a
granted privilege which can be taken from you at any time by
numerous persons and organizations. This does not mean you are
not to have fun creating your material, just be smart about it.
What is HTML
Tags Explained
E.g.
<U>This is underlined</U>
Note, the second tag after the word 'underlined';
As with most tags, but not all, lets the
browser know that you want it to stop doing
something, i.e. the browser is not smart enough to
know when you want it to stop underlining your text.
To end a Tag, write the tag as if you were beginning
it but preface the TagName with a forward-slash (/).
<TAG>
The Tag starts above and ends below
</TAG>
Some Tags will not require that you include an ending
Tag. These are called empty elements because
in such cases, you do not include anything after the
Tag, hence empty. For example, the tag <BR>
produces a line break (new line) and it does not require an
end tag.
Attributes
Click <A HREF="http://www.TCNJ.edu/~conjura
TARGET="_top"> here
</A> to go back to my homepage.
The above is an example of an "anchor" tag,
which is used to produce a link to another web page.
<A> is the beginging tag and </A>
is the end tag. "HREF=" and "TARGET="are
attributes.
This example produces the following:
Click here
to go back to my homepage.
Escape sequences
>
Stylistic Issues
Conventions used in this tutorial
Throughout this tutorial, you will see some common
conventions listed. They are:
E.g. HREF
E.g. <A HREF="URL">
E.g. <ROWS=rowsize1, rowsize2, ... >
E.g. [TYPE="type"]
E.g. <FRAMESET [<ROWS=rowsize1, rowsize2,
... COLS=colsize1, colsize2, ...>]>
E.g. <I> ... </I>
The Basics
The Bare Essentials
The minimal HTML document must include four basic
tags: HTML, HEAD, TITLE, and BODY.
HTML
This is the opening Tag of an HTML document. It lets a
browser know that it is about to read a file containing
HTML elements and should behave appropriately.
HEAD
Information about the webpage is included in this
Tag. That includes the Title of the page,
Base Targets for links, and
other things of that nature.
TITLE
The title of your page. This is what appears on the very top
of the browser window when a client loads your page. If the
user decides to bookmark or hotlist your page, the title is
what will appear in the bookmark/hotlist window so you should
try to keep it short, unique, and concise.
BODY
The contents of your webpage is included in this Tag. Everything
from text, images, sounds, and animations will appear here.
A very simple HTML document might look like this:
<HTML>
<HEAD>
<TITLE> My First Homepage! </TITLE>
</HEAD>
<BODY>
This is my first attempt at making a webpage!
I hope you like it!
</BODY>
</HTML>
Physical Styles
When creating an HTML document, you may want some of
the text to appear underlined, italicized, in boldface,
etc. Explicitly telling the browser to do this is called
Physical Styling. The following table provides
the most commonly used physical formatting Tags. For
and exhaustive list of Tags, look in the
Reference section of this
tutorial.
Logical Styles
In the reality of our world, we all may see and interpret
things differently from the next person. In a non-homogenous
world, it makes sense to allow our documents to be interpreted
in such a manner so that it not only makes sense to you,
but to whomever may load it into their browser. For example,
to express emphasis in a part of your text, you may italicize
it. In another country, the standard rule for emphasis might
be to underline the text, something we save for citing books
and other references. As you can see, we would probably get
a little confused reading their documents as they would ours.
This is where Logical Styling steps in. A Logical
style allows you to declare a Tag for what you want
to do, but not how it will be done. In the previous
example, both countries would use the EM Tag for
emphasis, but my browser would interpret it to mean italicize
the text whereas theirs would underline the text. The following
table provides the most commonly used physical formatting Tags.
For and exhaustive list of Tags, look in the
Reference section of this
tutorial.
Intermediate
Anchors
You may think of an anchor as a reference to a point in some
html document. You use anchors to add links to other webpages
that users can click on, much like the links you had to click
to get to this document. There are several types of anchors
that you can use that will be explained and provided with
examples.
E.g.
Click here to send me mail!
<A NAME="SOMETHING"> </A>
The word SOMETHING can be changed to whatever
you want, just make sure that no two hooks have the same
name otherwise you will confuse the browser!
To add the link to the hook, type:
<A HREF="#SOMETHING"> click here to learn about SOMETHING! </A>
Click on go back
to return to the beginning of this section on Internal Named
Anchors.
To change these color, you need to change the Link Color
Attributes inside of the BODY Tag.
E.g., the color of a link that has been visited by a user
is usually purple by default, if I wanted to change it to
green, I would do the following:
<BODY VLINK=00FF00>
E.g.
<A HREF="http://www.tcnj.edu/~conjura/">
<IMG SRC="../../images/e_wte.gif"
WIDTH=50 HEIGHT=50 BORDER=0>
<IMG SRC="../../images/c_wte.gif"
WIDTH=50 HEIGHT=50 BORDER=0>
</A>
would produce a link to Ed Conjura's web page.
Click on the letters below to see it work:
Lists
We commonly organize information into lists of data, like
menus, schedules, and shopping lists. HTML allows you to
create list structures for these purposes, and anything
else that requires this type of format. There are two main
types of lists you can use:
E.g.
<B>Things To Do Today</B><BR>
<UL>
<LI> Go swimming
<LI> Feed the dog
<LI> Pick up dry cleaning
</UL>
If you enter the above code in you web page
it would produce the following list:
Things To Do Today
E.g.
<B>Get ready for work</B>
<OL>
<LI> Wake up
<LI> Brush teeth and take shower
<LI> Get dressed
</OL>
The above example would produce the following list:
Get ready for work
E.g.
<DL>
<DT> A Bad Day </DT>
<DD> You lost your wallet and your car was stolen </DD>
<DT> A Good Day </DT>
<DD> You won the lottery and the IRS lost your SS# </DD>
</DL>
The above example produces the following Definition list:
Additional Topics
Internal Inline Images
So far you have learned how to add images to your page, but
you have no control over how to place text around the image.
We can control where text is placed in relation to an image
by giving it an alignment; making it inline. Accomplishing
this is fairly straightforward, you add an image as you normally
would but specify the ALIGN attribute. In the following
example, an image will be placed on the right side of the window
with text on it's immediate left.
<IMG SRC="../../images/construction.gif"
HEIGHT=100 WIDTH=100 ALIGN=RIGHT>
<BR><Sorry for the inconvenience
The above example produces the following:
Sorry for the inconvenience
References
http://www.efn.org/~gjb/asciidec.html
Color Chart
http://www.willcam.com/cmat/html/crossref.html
Example .Html
Click on ( An Example) and it will show you
an example of how the browser produces a web page from an .html file.
Once you are viewing the page you can view the script by clicking
and holding on the View option on the
top of your browser and select Document Source
or Page Source
, whichever option your browser lists.
