Web Site Design 1 : HTML CLASS 1 | CLASS 2 | CLASS 3 | CLASS 4 | CLASS 5 | CLASS 6 | CLASS 7

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---|

  1. 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
  2. Domain name
    The name of the Web server where the desired Web page or resource resides
  3. 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
  4. Directory path
    The location of the Web page in the Web server's file system
  5. Object name
    The actual name of the HTML file for the desired Web page or the name of any other resource
  6. 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:

  1. 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.
  2. 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.
  3. 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.
  4. 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:

  1. Tags are always enclosed by angle brackets (less-than/ greater-than characters), as in <HTML>.
  2. 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>.
  3. Tags can sometimes take on one or more attributes that sometimes use values to modify the tag's behavior.
  4. 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

  1. Pay close attention to the Location bar of your browser as you navigate the Web to get a feel for how URL's work.
  2. Watch your browser's status bar as you click on links to watch HTTP in action.
  3. 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
  1. 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.
  2. Omit each of the tags, both individually and in pairs to see how the display in the browser is affected.
  3. Change the nesting of your tags to see how the display in the browser is affected.
  4. Add/remove the attributes and values of the <BODY> tag to see how the display in the browser is affected.
HTML Style
  1. Change the case of your tags from uppercase to lowercase and back again and see how the display in the browser is affected.
  2. 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:
  1. Combine different background and text colors until you get a look you like.
  2. 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