An Introduction to Web Design
The World Wide Web
The World Wide Web (the Web, for short) is
Hypertext spanning the Internet.
Hypertext is a special kind of computer
document in which certain words act as links (or
hyperlinks) that take you from one part of the
document to another.
The World Wide Web is like an extended kind
of hypertext because when you click on a
hyperlink, it may take you
(a) to another point in the same document or
file; (b) to another document/file on the same
computer; or (c) to a document on another
computer!
The WWW consists of machines on the
Internet called servers and clients. Special
workstations on the Internet called Web servers
provide information to any machine on the
Internet that requests it (this machine is known
as the client).
The requested information is returned by the
server (to the client) in a format known as
HTML.
The clients browser is the software that makes
the request to the server, and the browser on the
client machine displays the HTML that is
returned.
The Hypertext Transfer Protocol
The protocol (or language) used by Web servers
to communicate is called the HyperText
Transfer Protocol (HTTP).
HTTP is the way in which two machines on the
Internet can communicate in sending Web pages
back and forth.
Another way of looking at a Web server and a
Web client is that both are special machines
running the HTTP software.
The HTTP protocol incorporates in it the ability
to understand and run applications based on
other protocols:
telnet (Access to other machines on the
Internet)
ftp
(File transfer)
nntp
(Usenet news)
smtp
(Email)
gopher
(Gopher servers
Web browsers
Browsers are software that are used to
view
web
content,
Many
different
browsers can be used to access the
Web.
Uniform Resource Locators
A Uniform Resource Locator (URL) is a way of
specifying some information that is to be loaded
into a web browser.
It can be thought of as an extension to the notion
of a filename, in that you can specify a file not
just on a particular machine, but on any machine
in a network.
To
quote the URL primer: If its out there, we
can point at it.
Each time you start up a web browser, you
need to specify a URL which gives you your
home page.
What is HTML?
HTML stands for HyperText Markup
Language.
HTML is a specific instance of a
markup language based on a standard
known
as
Standard
Generalized
Markup Language (SGML).
HTML documents are ASCII text files
that
can
be
edited
using
simple
editors such as notepad and textpad.
HTML allows you to specify the document
specification separate from the formatting rules.
HTML is used for the document specification,
that is, it is used to specify the logical structure
of the document.
For example, we can mark some text as being a
section header without any specification of what
the header looks like.
Format
information is provided separately.
For example, we can provide a format
specification for a section header, specifying
that it should appear as a 14 pt. font in boldface,
left-justified.
The basic idea is that a presentation program
(Netscape is an example of such a program)
takes the HTML specification and a format
specification and creates the actual document.
HTML Rules
An HTML document is built upon ASCII text
that has been marked up with tags looking like:
<TAGNAME>
and
</TAGNAME>
The purpose of these tags is to specify an
device-free .For example, first level headers
would be marked as:
<H1>ThisisaFirstLevelHeader</H1>
Overall structure of an HTML file
The overall structure of an HTML file is shown
below.
It
consists of a header part and a body part.
<HTML>
<HEAD>
<TITLE>AbasicHTMLfile</TITLE>
</HEAD>
<BODY>
<P>Thisisasampleparagraph.</P>
</BODY>
</HTML>
Note the indentation: each beginning tag is indented the
same number of spaces as the corresponding ending tag.
This is not required, but helps the reader of the HTML.
HTML tags
Most HTML tags come in pairs, an opening tag
and a closing tag.
For example, <H1> and </H1> are used to
enclose text that is tagged as heading level one.
Some HTML tags appear by themselves.
For example, <BR> is a break tag; it indicates
that a line break should occur at that point.
Some HTML tags can be written either way.
For example, a paragraph tag <P> can be used
by itself or in opening and closing fashion:
<P>...</P>The
most basic structure of a simple
HTML file is a series of section headers of
varying levels with paragraphs in
between.
Headings are denoted as <H1>, <H2>, up to
<H6>.
The are followed by sequences of paragraphs
(denoted by <P>and </P>.
Italicized words are created using surround it
by <I> and </I>; boldface by using <B> and
</B>.
Here are some standard HTML tags:
<UL>foranunnumberedlist.
<LI>foraniteminalist.
<OL>fornumberedlists.
<PRE> for preformatted text (fixed
widthfontsareused).
<TT>typewritertext(fixedwidth).
Hypertext
The HTML commands that we have seen so far
do nothing more that allow for media-indepent
formatting of text. We want to add links into our
HTML document that will allow us to turn the
document into a hypertext document.
A simple hypertext document is one where
clicking on a special highlighted word (called a
hypertext link) will take us to another part of the
document).
An example of simple hypertext is the on-line
help that you get with Microsoft Windows or
Microsoft Office.
HTML extends hypertext so that it spans the
Internet
HTML hypertext links are implemented through
anchor tags: <A...>and </A>.
Anchor tags are an example of a new kind of
tag that
we have not seen: tags wit Anchors are special
tags that create a hypertext link, for example:
<AHREF=OtherDoc.html>Subject<A/>
The HREF specification is used to give another
URL.
HTML hypertext
There are three kinds of targets for an anchor
HREF.
Another
location within the same HTML file.
Another
HTML file on the current machine.
A URL link
to:
An
HTTP server
A FTP server
A Gopher
server
Links
The most basic facility of HTML (and Web
browsing) is the ability to cause words, images,
icons, etc. to become links to other locations;
these locations can be:
Other locations within the same HTML
document.
Other locations within the same http server
as the one on which the Web page for the
current link appears.
Other locations on the Web (other Web
servers).
Linking to another location in a
document
To link to another point in the same document
do:
...
<body>
...
<ul>
<li><ahref="#Intro">Introduction.</a>
<li><ahref="#Staff">Thestaff.</a>
<li><ahref="#Public">Public</a>
</ul>
...
<aname=Intro>Introduction</a>
...
</body>
Linking to another file
To link to another file do:
...
<body>
...
<ahref=file.html>Pressheretogo.</a>
...
</body>
Linking to another site
To create a link that takes you to any other Web
server, you give a complete URL:
...
<body>
...
<ahref=http://hoohoo.ncsa.uiuc.edu>
PressheretogotohoohooatNCSA.
</a>
...
</body>
Other HTML tags
Other tags include:
Definition
lists: (<DL>, <DT>and <DD>)
Blockquote: (<BLOCKQUOTE>)
Citation: (<CITE>)
Program
code: (<CODE>)
Horizontal
rule (produces thin line): <HR>
Comments: <!putanythinghere>
Working with images
Images can, of course, be loaded into a Web
page using HTML commands; there are several
uses for images.
Pictures: the image is there only as a piece of
art with no other functionality.
Buttons: when the image is clicked on, some
action occurs (it may be a link to another site).
Image maps: image maps are images that are
broken up in logical areas each of which acts
like a seperate button (anchor).
You can include images into your HTML
documents using the <IMG>tag.
In
your Web page do a:
<IMGSRC=file.gif>
A standard source for some basic icons is in:
ServerRoot/icons
Note
that many different graphics files formats
are understood: gif, tiff, jpeg, etc.
