CLASS 1 : The Official Language of the WWW: HTML Basics
THE WORLD WIDE WEB: AN OVERVIEW
History
In the late 1960's Vint Cerf worked on a Cold War project to create a
communications network that was immune to a nuclear attack. In 1969,
his work resulted in a wide-area network called Arpanet (named for the
US Department of Defense agency, the Advanced Research Projects
Administration, or ARPA), which served as a testbed for new networking
technologies. Arpanet began by connecting four western universities and
allowing researchers to use the mainframes of any of the networked
institutions.
Cerf and a colleague, Robert Kahn, later invented TCP/IP (Transfer
Control Protocol/Internet Protocol), a common language that the world's
largely incompatible computer systems can use to "talk" to one another.
This work spawned the worldwide collection of networks known as the
Internet (a term coined by Cerf and Kahn in 1973).
The World Wide Web was created in 1989 by Tim Berners-Lee, an Oxford
graduate, and his colleagues at the European Laboratory for Particle
Physics (CERN) in Geneva, Switzerland to allow ordinary users to easily
share data, without having to master arcane commands or esoteric
interfaces.
Note that the Web and the Internet are not quite synonymous the
Internet is the infrastructure and the Web is largely the interface
that enables access to information.
Connecting Clients to Servers
The easy information exchange that defines the Web is made possible
by linking together clients to servers.
Servers are computers or networks that "listen" for particular service
requests and responds to those that it knows how to satisfy.
Clients are the end-users that send service requests to these services
a Web browser is therefore a client program that talks to Web
servers.
Anatomy of a URL
More than likely, you initiate access to the Web by entering a Web
address or, URL (Uniform Resource Locator) into your Web
browser. This URL may be comprised of as many as six distinct parts to
locate the information you seek.
http://www.w3.org:80/People/Berners-Lee/FAQ.html#General
|---1--|-----2-----|-3-|---------4----------|----5----|---6---|
- Protocol/data source
The name of the protocol used to access the data that resides on
the other end of the link.
Aside from HTTP (Hyper Text Transfer Protocol), some other
protocols you might come across include:
- ftp://
Points to a file accessible through the File Transfer
Protocol
- mailto://
Links to an application that allows you to compose a
message to send through e-mail to a predefined address
- news://
Points to a Usenet newsgroup and uses the Network News
Transfer Protocol (NNTP)
- file://
Points to a local file on your own computer
- Domain name
The name of the Web server where the desired Web page or resource
resides
- Port address
This number identifies the process address that a Web session
needs to connect with; in most cases, the default port address
for HTTP is :80 (and you can omit it), but you may see URL's
with other numbers in use
- Directory path
The location of the Web page in the Web server's file system
- Object name
The actual name of the HTML file for the desired Web page or the
name of any other resource
- Spot
A particular location within an HTML file
How HTTP Works
More than likely your Web browser will be using HTTP to access Web
resources. HTTP provides a way for Web clients and servers to
communicate with one another.
If you watch the status bar of your browser (in the bottom left edge),
you can see the transfer occurring, in four steps:
- Connection
Occurs when a client tries to connect to a specific Web server.
If the client can't make the connection, the attempt usually
times out and you'll get an error message from your browser.
- Request
The client asks for the Web resource that it's looking for. The
request includes the protocol to use, the name of the object to
find, and information about how the server should respond to the
client.
- Response
If the server can deliver the requested object, it responds with
a delivery in the manner requested by the client. If it can't
deliver, the server sends an error message explaining why not
the most common error is a "404" indicating that the file
was not found on the server.
- Close
After the server transfers information in response to the
request, the connection between client and server is closed.
Another request, such as clicking on a link, will reopen the
connection.
HTML: AN INTRODUCTION
History
In 1986 a language called SGML (Standard Generalized Markup Language) for
organizing and tagging elements of a document was developed to manage
large documents that are subject to frequent revisions and need to be
printed in different formats.
HTML (Hyper Text Markup Language) is one way of defining and interpreting
tags according to SGML rules. Hypertext is a method for providing links
within and between documents and markup is a method for embedding special
tags that describe the structure as well as the behavior and format of a
document.
HTML was created by Berners-Lee as a quick little hypertext language that
would work on any platform and browser, as part of his work on the WWW.
Berners-Lee's language was text-based you could use any editor or
word processor to create or convert documents for the Web. And there was
just a handful of tags anyone could master HTML in an afternoon.
The Web flourished and grew exponentially.
Evolution of a Language
As more and more content moved to the Web, those creating browsers
realized the simple markup language needed much improvement. How should
the innovation take place? Berners-Lee certainly wasn't going to be the
sole developer of HTML he never intended to be. So the developers,
in the long-held tradition of the Internet, implemented new features in
their browsers and then shipped them. If the Web community liked them,
they stayed. If not, they were removed.
Thus, HTML has evolved over the years with each release of each new
browser. For instance, in the early days of the Web, HTML was entirely
text-based; it did not include a method for including inline images on
a page. In 1993 a college student named Marc Andreeson created a browser
called Mosaic which utilized a tag called <IMG> to display images. Other developers
suggested that other tag names be used instead, but Andreeson went with
<IMG>. Mosaic would
eventually evolve into Netscape which, of course, has become very
popular over the years, and thus <IMG> has been adopted as a standard tag in HTML.
Many of the other acceptable HTML tags have been adopted in a similar
way, rather on the whim of the browser developers.
In current release we have Netscape 4.75 and Internet Explorer
5.5 both of which implement HTML 4.01 differently. In order to bring
some kind of order and standardization to the further growth of the Web,
specifications of HTML (along with other Web standards and protocols)
are developed by the World Wide Web Consortium (W3C), directed by
Berners-Lee. However, a purely standards-compliant browser has not
yet been released and the primary challenge of Web design to date has
been designing pages that work for all no users no matter what kind of
computer or what kind of browser they are using to access your Web site.
HTML Basics
The two components of an HTML file are the content and the controls (a.k.a.
markup or tags).
The content is the text and graphics that display in your browser.
The markup doesn't show up when your browser displays the page, but if
you look at the HTML source file, the markup appears between angle
brackets (<>). Each of
these bits of markup are called tags.
The Rules
HTML is a language and has a fixed vocabulary and a fixed syntax to
ensure that clients and servers can talk to one another effectively,
that is, there are rules that must be followed to ensure
interoperability. In other words, there is a specified body of markup
from which you can author Web pages.
There are only a few hard and fast rules:
- Tags are always enclosed by angle brackets (less-than/
greater-than characters), as in <HTML>.
- Most tags come in pairs and surround the material they affect.
They work like a light switch: the first tag turns the action on,
and the second turns it off. The second tag the "off
switch" always starts with a forward slash. For example,
you turn on your HTML document with <HTML> and turn it off with </HTML>.
- Tags can sometimes take on one or more attributes that sometimes
use values to modify the tag's behavior.
- First tag on, last tag off. Tags are embedded, so when you "nest"
a tag within another tag, you have to close that inner tag before
closing the outer tag. For instance, <HTML><BODY>Your text</HTML></BODY>
is incorrect. The correct order is <HTML><BODY>Your text</BODY></HTML>.
Anatomy of a Tag
<TAG-NAME ATTRIBUTE="value">
Text
</TAG-NAME>
- <TAG-NAME>
All HTML tags have names. Tags are surrounded by angle brackets
that mark their contents for special attention from the browser.
- ATTRIBUTE="value"
Some HTML tags require or permit certain named attributes to be
associated with them. In the same vein, some attributes require
that values be associated to them.
- Text
This is the content that's modified by the tag.
- </TAG-NAME>
Most HTML tags require a closing tag, denoted by the forward
slash preceding the tag name between the angle brackets.
Notes on Style
While there are a number of rules that you must adhere to, the beauty
of HTML is its fluidity and forgivingness; it allows for a great
deal of personal expression, not just in the way you design with it,
but also in the way you write different HTML authors have
different writing styles.
For instance, HTML tags are not case-specific. That means that they
can be written in uppercase or lowercase or any combination of uppercase
and lowercase letters: <HTML> is the same as <html> is the same as <HtmL>. However, it is a convention that HTML
tags are written in all caps, while the values of any attributes are
written in lowercase; when viewing HTML source, many people find it
easier to distinguish the markup from the content when it's written
this way.
Also, in many cases, quotation marks around the value of an attribute
are optional. Your browser will interpret BGCOLOR=black in the same way as BGCOLOR="black". In some cases, however, the quotation
marks are required. It is probably best to begin by always using
quotation marks.
DEFINING YOUR HTML DOCUMENT
Document Structure Tags
A number of tags help to provide structure for HTML documents. They
provide an overall HTML label and break up documents into head and
body sections. In addition to being important to the construction
of well-designed Web pages, this markup also sets the colors used for
the background and the text and links in the entire document.
<HTML>...</HTML>
Definition: Blocks out an entire HTML document.
<HEAD>...</HEAD>
Definition: Defines page-level information about an HTML document,
including its title.
<TITLE>...</TITLE>
Definition: Encloses the title for an HTML document, which
commonly appears in the title bar in the browser's window; if a title is
not supplied, the default is the HTML filename.
<BODY>...</BODY>
Definition: Delimits the body of an HTML document and should
completely enclose its content; the content displays in the main
window of your browser.
Attributes:
You can apply hexadecimal or name values to attributes of the <BODY> tag to designate the
color scheme for your Web page. The attributes of <BODY> are:
BGCOLOR="color"
Specifies a color for the background of the main browser window
TEXT="color"
Specifies the color of the regular text
LINK="color"
Specifies the color of linked text
ALINK="color"
Specifies an "active link" color, that is the color of linked text as it
is being clicked
VLINK="color"
Specifies a "visited link" color, that is the color of linked
text after it has been clicked
Specifying Color
Some browsers will recognize name values such as "black," "white," or
"red" when setting color attributes. Of course, if you want to use
more complex colors, such as "periwinkle" or "eggplant," the results may
be unpredictable. Instead, HTML uses a system of hexadecimal (or base-16)
values to precisely identify colors.
Any color that can be displayed on a computer monitor can be described by
its RGB value its relative amounts of red, green, and blue in
values expressing the level of saturation, from 0 to 255. For instance,
pure red is 255,0,0; pure green is 0,255,0; and pure blue 0,0,255.
In order for a Web browser to understand these RGB values, they must each
be translated into a hexadecimal number. Then the resulting two-digit
hexadecimal ("hex" for short) numbers are strung together into a single
six-digit code.
The hex equivalents (left) for RGB values (right) are as follows:
00 = 0
33 = 51
66 = 102
99 = 153
CC = 204
FF = 255
Thus, in hexadecimal, pure red is #FF0000, pure green #00FF00, and pure
blue #0000FF. Or, a more subtle color such as pink, with an RGB value
of 255,153,153 is written as #FF9999. (Notice the # appended to the
beginning of the value.)
Putting It Together
Putting all these tags together in order to build a page with a pink
background and red text (the links will come later), we'll have
code that looks like this:
<HTML>
<HEAD>
<TITLE>
Title text goes here
</TITLE>
</HEAD>
<BODY BGCOLOR="#FF9999" TEXT="#FF0000">
Body text goes here
</BODY>
</HTML>
When you display this code in a browser, it looks like this.
SKILL MASTERY
The Web
- Pay close attention to the Location bar of your browser as you
navigate the Web to get a feel for how URL's work.
- Watch your browser's status bar as you click on links to watch
HTTP in action.
- Familiarize yourself with online resources for Web developers
(such as those listed below) to keep current with standards and
practices in Web design and to know where you can access
reference materials and get answers to any questions you
might have.
HTML Syntax
- Try writing each of the tags without the angle brackets or the
forward slashes and see how the display of the page in the browser
is affected.
- Omit each of the tags, both individually and in pairs to see how
the display in the browser is affected.
- Change the nesting of your tags to see how the display in the
browser is affected.
- Add/remove the attributes and values of the <BODY> tag to see how the display in
the browser is affected.
HTML Style
- Change the case of your tags from uppercase to lowercase and back
again and see how the display in the browser is affected.
- Remove all the quotation marks surrounding your attributes and
see how the display in the browser is affected.
Design
Now that you've got a grip on the basics, you can make your first design
decision by choosing a preliminary color palette for your page:
- Combine different background and text colors until you get a
look you like.
- Experiment with using hexadecimal number and name values.
FURTHER READING
History of the WWW
HTML History
HTML Overview
HTML Document Structure Tags
NEXT CLASS
Web pages as Content
HTML layout elements, lists, and text controls
|