|
|
| |
|
"Basic" HTML Document Structure
|
|
|
<HTML>
<HEAD>
<TITLE>...</TITLE>
<META NAME="....">
</HEAD>
<BODY>
... Contents go here ...
</BODY>
</HTML>
|
|
HTML (Hyper Text Markup Language) is a script language
that is used in creating webpages. You are looking at
a webpage written in HTML right now.
HTML, or webpages can be viewed in two ways:
- On a browser (i.e., Internet Explorer, Netscape,
AOL, etc.), just like this page -- colors,
different text sizes, graphics
- As HTML code (or sometime called as 'source')
-- the one that contains HTML script language and
your content.
HTML codes are just plain text, and you can
open and see them 'as is' in your favorite
text editor.
You can type HTML code in any text editor or
word processor (for example, vi or emacs in Unix environment
or Notepad -- even though not the best choice though -- in
Microsoft Windows environment.), and if you save it as plain text
with a file suffix of .html (i.e.,
abc.html), you can view it with a browser.
In addition to text editor, you can also use
a variety of HTML editors to write your HTML
code -- there are lots of them, encompassing free or
commercial product as well as professional strength or
whimpy time-waster. Choose your mode of HTML coding
habit carefully -- it does stick permanently and doesn't
peel off easily. (FYI, I still use emacs)
All right, get back to important stuff.
An absolute skeleton HTML document
can be written with just two tags --
<HTML> and
<BODY>.
Here, the term, tag, refers to
reserved HTML script language commands all enclosed by
< and
>.
In HTML, a tag is your instruction to the browser
what to do with the content defined by the tag.
It's something like a yellow PostIt self-reminder on
a UPS package saying 'don't forget bringing it
to CEE 890 class.' In this case, the UPS package is
the content, the yellow PostIt is a HTML tag, and
I'm a browser. :-)
When you write a webpage, you use HTML tags for
many reasons -- to change the appearance of text,
to show a graphic, or to make a link to another page.
The HTML tags are not visible on the browser
(because tags are interpreted by the browser to display
the content of a page as you intended -- that's
why they are called 'browsers' -- browser of HTML codes),
but their effects are.
It is not always true, but about 97% of all HTML tags
are used in form of a Container. That is,
when you putting a particular tag in front of a content,
you'll enclose the content with an 'anchor' of that
particular tag (i.e., the tag starts with '/' in
front of the same HTML reserved command) -- thus the starting
tag and the anchor tag
form a container for the content.
(Huh?... Please read on...)
For example, if I'd like to put just some
text in a webpage, I need to start with a
<BODY> tag, put the
body of text, then enclose the text with an anchor,
</BODY>
-- just like that.
Another example, if I'd like to add a title to
a webpage, I need to use a
<TITLE> tag, put the
title text, then enclose the title text with an anchor,
</TITLE>.
Sounds awfully simple though, but forgetting or missing
a complete container(s) definitely spits out the majority of
your HTML code errors, and may cause a persisting 'twitching
eye' syndrome. :-)
Always make a good habit of checking and closing your containers!
O.k., without much ado, let's begin.
As we discussed early, an absolute skeleton HTML document
can be written with just two tags --
<HTML> and
<BODY>. Take a close
look how (and what order of) the containers are formed and
how one is embedded into another.
-
<HTML>
<BODY>
Your Contents
</BODY>
</HTML>
In addition to skeleton <HTML> and
<BODY> tags,
I'd recommend you to make a habit to put two additional
skeleton tags -- <TITLE>
and <META> tags.
<TITLE> tag enable you to
display a title of your webpage at the top of the browser
window as well as for indexing. <META> tag will
provide important indexing information to popular
search engines (such as Yahoo, Google, Altavista, etc.)
(See more on META tag)
Unless you wrote your webpage(s) strictly for
your eyes only, these two tags are very critical
elements to any webpages, in my opinion.
|
 |
|
** <META> tag
does not require an anchor, i.e., you don't
have to worry about a container block for this one.
|
|
This is the Body of the document
|
<HTML>
<HEAD>
<TITLE>My First Webpage!
</TITLE>
<META NAME="test">
</HEAD>
<BODY>
This is the Body of the document
</BODY>
</HTML>
|
 |
|
|
A very, very basic HTML.
|
|
Hello World!
|
<HTML>
<HEAD>
<TITLE>My First HTML</TITLE>
<META NAME="My First Trial">
</HEAD>
<BODY>
Hello World!
</BODY>
</HTML> |
|
|
|
Putting Comments
|
|
|
|
<!--
your comments go here
-->
|
|
|
|
|
A HTML (Hyper Text Markup Language)
comment is anything in a HTML file
that you surround with <!-- and
--> comment delimiters, i.e.,
could be a single character or a single line, or 2000 lines.
Anything in between these comment delimiters will be ignored
by web browsers.
|
|
Try to put as many comments as possible.
This makes HTML document more understandable.
|
<!-- This is my comment -->
<!-- <TITLE>
Existing HTML tags can be also
commented out
</TITLE> -->
<!--
This is a perfectly valid comment
-->
<!-- Yes, this
is still a
valid comment
-->
<!--
=== #&#@( Messy, yet
still valid -->
<!-- <TITLE> -->
<!-- ------------------------------ -->
|
|
|
|
Rule of Link
|
|
|
| <A |
NAME=Name
HREF=URI
|
> |
|
Clickable text or graphic for a hyperlink |
</A> |
|
|
Hyperlinks in a webpage or a URI (Universal Resource Identifier)
is the most fundamental means of delivering/expanding the
webpage's context to its audience.
(See more on URI (Universal Resource Identifier))
Of course, you can create a perfectly
normal HTML document, or webpage
by just putting a body of text in it
without further adding any hyperlinks.
However, this one-dimensional approach
is not what web is all about.
The true value of hyperlink is to facilitate
you to create and maintain rich,
dynamic, and collective contents in your webpage(s).
Equally true is that mindless, obsolete and incoherent
hyperlinks in your webpage(s) would achive the exact opposite.
Various hyperlink methods using the
anchor tag,
<A> and
</A> are illustrated below.
|
|
|
|
The best way to learn HTML is by examples.
Feel free to cut and paste your way to a HTML stardom. :->
For example, a hyperlink to the CEE homepage can be set by
|
|
CEE Homepage
|
<A HREF="http://cee.odu.edu">CEE Homepage</A>
|
|
|
|
Creating a Basic Link to Another File
|
|
|
|
<A HREF="URI"> . . . </A>
|
|
|
|
|
Link to a file. Hence HREF means 'Hyper Text Reference.'
Just a link back to this page
|
<A HREF="#Creating">
Just a link back to this page</A>
|
|
|
The same hyperlink, but this time, using a graphic image
as a clickable object instead of text.
|
<A HREF="this.html">
<IMG SRC="/stuff/nice_home.gif"></A>
|
|
|
|
Creating a Specific Link in a File
|
|
|
|
<A NAME="anchor_name"> . . . </A>
|
|
|
|
|
To creating specific link in a File (or 'Jump'),
define a target anchor within a file using above syntax.
Once defined, a target anchor can be hyperlinked within
the same document or directly from other external HTML files.
Specific links are a good way to 'jump' to a particular
location in a file without forcing your audience to
scroll down from the very top of the page each time.
|
|
This is a test anchor link in this page
|
<A NAME="conclusion"></A>
This is a test anchor link in this page
|
|
|
|
|
<A HREF="#anchor_name"> . . . </A>
|
|
|
|
|
|
|
|
<A HREF="URI#anchor_name"> . . . </A>
|
|
|
|
|
Link to a target anchor in
another (=external) document.
Let's say that you're creating following hyperlink
from 'report.html'
A Link to the
'map' anchor in
'appendix' HTML file
|
<A HREF="appendix.html#map">
A Link to the 'map' anchor in
'appendix' HTML file</A>
|
|
|
|
URI (Universal Resource Identifier)
|
-
URI is an encoding syntax/address for every possible
resource available on the Web -- HTML (Hyper Text Markup Language)
document,
image, sound, video clip, news, program, file, etc.,
you name it -- as long as it is accessible via network.
Sometimes, people use different expressions, namely
Universal Resource Locator (URL) instead of URI.
However, URI is much broader in terms of overall context,
and URI should be used over URL whenever necessary.
Most common example of URI is a website address (=HTTP)
such as http://cee.odu.edu. URI can also contain various
network connection methods including FTP, Telnet,
Usenet News, E-Mail, Gopher, WAIS, NNTP, etc.
A typical URI syntax includes three pieces:
- Naming scheme of
the mechanism used to access the resource (e.g., HTML document,
FTP, e-mail, WAIS, etc.)
- Address of
the server hosting the resource
- Name of the resource itself, given as a path
Consider a URI that is in CEE webserver for example:
http://cee.odu.edu/somewhere/xyz.html
This URI may be read as follows -- There is a document available via
the http (Hyper Text Transfer Protocol)
protocol residing on the server cee.odu.edu,
accessible via the path /somewhere/xyz.html.
|
|
|
|
|
<A HREF="file:[path/filename]">Local File Access</A>
|
|
|
|
|
Hyperlink to a local file. Basically, you're
loading/opening a file from your hard drive into
the browser. This is commonly used to preview
HTML pages being developed on a computer that has
a browser, but does not have a web server. (of course,
you can run a web server with 127.0.0.1 (=localhost) even without
a network connection, though)
|
|
open C:\abc.txt
file in the browser
|
open <A HREF="file:c:\abc.txt">
C:\abc.txt</A> file in the browser
|
|
|
|
|
<A HREF="ftp://[server address]/
path/filename">download</A>
|
|
|
|
|
|
<A HREF="http://[server address]/path/
filename">Web</A>
|
|
|
|
|
Access a HTML (Hyper Text Markup Language) document
from a webserver.
|
|
CEE Homepage
|
<A HREF="http://cee.odu.edu/">
CEE Homepage</A>
|
|
|
|
|
<A HREF="https://[server address]/path/
filename">
Secure Web</A>
|
|
|
|
|
Access a HTML (Hyper Text Markup Language) document
from a secure webserver.
Example would be an on-line transaction using a credit
card. This secure link is based on two-way data encryption
of transmitted data. This is a core of the e-commerce.
|
|
Amazon
|
<A HREF="https://www.amazon.com">Amazon</A>
|
|
|
|
|
|
|
|
Send an e-mail to the hyperlinked e-mail address.
Here, the recipient's e-mail address will appear at To: field
in e-mail program.
|
|
E-mail to Dr. Jae Yoon
|
E-mail to
<A HREF="mailto:yoon@cee.odu.edu">
Dr. Jae Yoon</A>
|
|
|
|
To set the Subject: of the e-mail, just
concatenate ?subject=text
right after the e-mail address.
|
|
E-mail to
Dr. Jae Yoon
[with Subject: of "Hi"]
|
E-mail to
<A HREF="mailto:yoon@cee.odu.edu?subject=Hi">
Dr. Jae Yoon</A>
|
|
|
|
Of course, who would use only one word in Subject: field?
Yes, you can set a multiple-word Subject: including
*spaces*, just like we do in real world.
To set the Subject: of the e-mail with
a multiple-word Subject: including spaces,
just concatenate ?subject=this is the subject
right after the e-mail address.
Keep in mind that
do *NOT* quote the Subject: attribute,
-- for example, if you do ?subject="this is the subject",
then Subject: will NOT work!
|
|
E-mail to
Dr. Jae Yoon
[with Subject: of "Plan a Plan"]
|
E-mail to
<A HREF="mailto:yoon@cee.odu.edu?subject=Plan a Plan">
Dr. Jae Yoon</A>
|
|
|
Okido, since we now know how to set Subject: field in
mailto: URI specifier,
let's learn how to emulate other standard e-mail behaviors
such as multiple recipients, CC: adn BCC fields.
To add multiple recipients, just add a comma in between
recipients' e-mail addresses.
-
mailto:john@this.edu,robert@that.net,
bill@somewhere.com
|
|
E-mail to John, Robert and Bill
|
E-mail to
<A HREF="john@this.edu,robert@that.net,bill@somewhere.com">
John, Robert and Bill</A>
|
|
|
To add CC: field (Carbon Copy),
just concatenate &cc=e-mail_address
at the end of mailto: URI
specifier with an ampersand ("&")
-
mailto:john@this.edu&cc=susan@good.org
|
|
E-mail to John
[with CC: to Susan]
|
E-mail to
<A HREF="john@this.edu&cc=
susan@good.org">John</A>
|
|
|
To add BCC: field (Blind Carbon Copy),
just concatenate &bcc=e-mail_address
at the end of mailto: URI
specifier with an ampersand ("&")
-
mailto:john@this.edu&bcc=nancy@big.gov
|
|
E-mail to John
[with BCC: to Nancy]
|
E-mail to
<A HREF="john@this.edu&bcc=
nancy@big.gov">John</A>
|
|
|
O.k., let's load them all for the sake of a demonstration
-- e-mailing John, Robert and Bill with CC: to Susan
and BCC: to Nancy with a Subject: of "Life of Cootie"
-
mailto:john@this.edu,robert@that.net,
bill@somewhere.com?subject=Life of Cootie
&cc=susan@good.org&bcc=nancy@big.gov
|
|
E-mail to
John, Robert and Bill
[Subject: of "Life of Cootie" with CC: to Susan
and BCC: to Nancy]
|
E-mail to
<A HREF="mailto:john@this.edu,
robert@that.net,bill@somewhere.com?
subject=Life of Cootie&cc=
susan@good.org&bcc=nancy@big.gov">
John, Robert and Bill</A>
|
|
|
Depending on browser and mail setup,
it is possible to open Mail component by specifying the URI as 'mailbox:folder'.
|
|
Open my Incoming MailBox
|
<A HREF="mailbox:Inbox">Open MailBox</A>
|
|
|
|
|
<A HREF="news:[USENET News]">USENET News</A>
|
|
|
|
|
|
<A HREF="telnet://[telnet address]">
telnet address</A>7
|
|
|
|
|
You can direct initiate a telnet session from a browser.
Arguments to a telnet session are
loginID[:password]@host. For example, with a user loginID of
"aladin" with a password "seSame" in a server name "oink.abc.edu,"
URI becomes
telnet://aladin:seSame@oink.abc.edu
Keep in mind that standard http (=web) data tarnsport
packets are in a pure text mode, and they are
*NOT*
encrypted *AT ALL* --
use this web-based telnet session
*WITH CAUTION*.
|
|
telnet to your server
|
<A HREF="telnet://loginID:password
@server_name">telnet to your server</A>
|
|
|
|
|
<A HREF="wais://[WAIS address]">
access WAIS</A>
|
|
|
|
|
Access a WAIS (Wide Area Information Servers) server.
WAIS Access
|
<A HREF="wais://your WAIS server">WAIS Access</A>
|
|
|
|
|
