An Introduction to Web DesignThe 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 browsersBrowsers 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 asection 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 RulesAn HTML document is built upon ASCII text that has been marked up with tags looking like:

and

The purpose of these tags is to specify an device-free .For example, first level headers would be marked as: This is a First Level Header

Overall structure of an HTML fileThe overall structure of an HTML file is shown below. It consists of a header part and a body part.

A basic HTML file

This is a sample paragraph.

Note the indentation: each beginning tag is indented thesame 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, and are used to enclose text that is tagged as heading level one. Some HTML tags appear by themselves.For example,
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 can be used by itself or in opening and closing fashion: ...The most basic structure of a simple HTML file is a series of section headers of varying levels with paragraphs inbetween. Headings are denoted as , , up to . The are followed by sequences of paragraphs (denoted by and . Italicized words are created using surround it by and ; boldface by using and . Here are some standard HTML tags:

for an unnumbered list.

for an item in a list.

1. for numbered lists. for preformatted text (fixed-width fonts are used). typewriter text (fixed-width).

   HypertextThe 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 InternetHTML hypertext links are implemented through anchor tags: and . Anchor tags are an example of a new kind of tag thatwe have not seen: tags wit Anchors are special tags that create a hypertext link, for example:SubjectThe HREF specification is used to give another URL.HTML hypertextThere 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

   LinksThe 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 documentTo link to another point in the same document do:...

   ...

• Introduction.
• The staff.
• Public

...Introduction...

Linking to another fileTo link to another file do:...

...Press here to go....

Linking to another siteTo create a link that takes you to any other Web server, you give a complete URL:...

...

Press here to go to hoohoo at NCSA.

...

Other HTML tags Other tags include: Definition lists: (, and ) Blockquote: () Citation: () Program code: () Horizontal rule (produces thin line): Comments:

Working with imagesImages 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 tag. In your Web page do a: A standard source for some basic icons is in: ServerRoot/icons Note that many different graphics files formats are understood: gif, tiff, jpeg, etc.