What are WWW Servers, Clients, HTTP, and HTML?
WWW servers are machines storing the information to be distributed on the network. By running a server program, workstations, PCs and Macintoshes can be WWW server machines.
WWW clients are machines requesting information from the WWW servers. Users interact with client programs to retrieve/send information from/to WWW servers. Popular client programs include NCSA Mosaic, Netscape and Lynx. Clients programs are available on PCs, Macintoshes and workstations.
HTTP (Hypertext Transfer Protocol) is the protocol used by WWW servers and clients to communicate with each others. Ordinary users seldom need to deal with this protocol.
HTML (Hypertext Markup Language) is the language used to define the layout of information and the linkage between different pieces of information.
URL (Universal Resources Locator) is a unified way to identify a particular resource (file, newsgroup, mail address, etc.) on the network.
Please check ftp.cuhk.edu.hk for the available server and client programs.
Back to content
HTML (Hypertext Markup Language)
A simple HTML
A text file containing the following lines will be rendered nicely by the client program as this .
<HTML>
<head>
<TITLE> MY FIRST HTML </TITLE>
</head>
<body>
<H1> This is my first HTML </H1>
This simple HTML consists of basic <b> tags </b> that specifies <I> headings </I> and <I> attributes </I> of characters. Words on separate lines are treated as in the same paragraph unless a <P> is encountered. <P>
<HR>
<ADDRESS> someone@somewhere </ADDRESS>
</body>
</HTML>
Note:
- The outer <HTML> element declares the enclosed text to be an HTML document.
- The <HEAD> contains elements that define information about the document, such as the title.
- The <BODY> contains the core of the document.
Test your HTML
You can use your client program (e.g. Internet Explorer, Netscape Communicator, FrontPage) to view how your HTML looks like. Choose the 'Open Local File' command will do.
Graphics
Inline images can be displayed by using the <IMG SRC = "filename.GIF"> tag.
<HTML>
<H1>This is my second HTML</H1>
An inline GIF <IMG SRC="culogo.gif"> is inserted.<P>
</HTML>
The real layout will look like this . Note that you have to pay attention to the letter case of the filename. If your information (HTMLs) will be stored on UNIX machines, filenames will be case sensitive.
Hyperlinks
Buttons or hot words can be defined by the <A HREF="destination file name"> tag.
<HTML>
<H1>This is my third HTML</H1>
Click <A HREF="second.htm">here</A> to jump to my second HTML.<P>
</HTML>
The layout is here . Again, mind the letter case of the filename.
Multimedia files and helper applications
Files other than HTML and GIF images (e.g. Real Media File [.rm] and QuickTime movie file [.mov] )can be retrieved. But you must have corresponding viewing programs (or helper applications) to display or play those files. The server will pass a "type/subtype" string to the client. The client will launch the corresponding viewer according to the "type/subtype".
For example, Apple QuickTime movies have "video/quicktime" as the "type/subtype". The client must associate the QuickTime player with the "video/quicktime" type, or in short, the client msut have QuickTime Player installed in their computers.
Learn from others' pages
If you come across an interesting page, you can choose 'View source' from your browser to view the corresponding HTML.
Back to content
Apply for a Computer Account
You can publish your personal webpages on either CUHK Community Homepage Server (iHome) or General-purpose UNIX Server (Logic) .
All University staff members and students are given an account on iHome . However, if you want to have an additional account on Logic from which you can develop your own CGI programs, you have to apply for another account on LOGIC server. Account application will be processed in THREE working days.
Distributing copyrighted material without the permission of the owner violates the trademark and copyright ordinance. Before developing your webpages, you should note the guidelines on Guidelines for Personal Homepage Creation on iHome and Logic .
Back to content
Imagemap
You can define regions on an inline image such that when the image is clicked, different links will be activated depending on the region being clicked.
The following image is defined as:
<A HREF="mymap.map"><IMG SRC="culogo.gif" ISMAP></A>.
An image map file has to be defined to describe the regions and the corresponding destinations. "mymap.map" contains the following lines:
default http://www.cuhk.edu.hk/itsc/demo/default.htm rect http://www.cuhk.edu.hk/itsc/demo/lefttop.htm 0,0 48,44 rect http://www.cuhk.edu.hk/itsc/demo/bottrigh.htm 49,45 96,88 Circle and polygon are also supported. Then place the image map file in the same directory as your HTML.
Back to content
Table
You can use table to setup rows, columns and cells as this .
<HTML>
<head>
<TITLE>Table Example</TITLE>
</head>
<body>
<TABLE border=2>
<TR>
<TH></TH>
<TH> MON </TH> <TH>TUE</TH> <TH>WED</TH> <TH>THU</TH> <TH>FRI</TH> </TR>
<TR>
<TH align=left>8:30-9:15</TH> <TD> Tutorial </TD> <TD></TD> <TD>Lecture</TD> <TD></TD> <TD></TD>
</TR>
</TABLE>
</body>
</HTML>
Note:
- Use the <TABLE> container tag to create a table.
- Use the BORDER attribute to specify how thick the table border is.
- Each table row is specified by <TR> and </TR>.
- Two types of table cells: - Table Head - <TH> </TH>
- Table Data - <TD> </TD>
Fill-out Forms
Forms provide a way to capture users' input using familiar check boxes, radio buttons, text boxes, etc.
Sample form .
The server must have a CGI program ready to process the captured information. The client program must be able to handle HTML version 2.0 or higher in order to display a form.
Back to content
Clients and Performance Considerations
Test for different clients on different platforms
Different client programs, such as Lynx, Mosaic, Internet Explorer and Netscape, may have different behavior, especially if the HTML file is not tidy. Even the same client program may have different output when running on different platforms (i.e. X Winodows, Windows and Mac).
Helper applications
When choosing a particular file format other than HTML and GIF, make sure that all the platforms have such a viewer, otherwise some of your target audience will not be able to view the file.
Images: photograph vs line art, color vs grayscale
The required transfer time is directly proportional to the size of the image file. The file size of a line art graphic will be much smaller than a photograph. But a color image and a grayscale image may have similar sizes. See the comparison .
Interlaced images
Interlaced images let users see the coarse images in about half of the normal transfer time. Users can then decide whether to stop image loading. But only some browsers are able to display the coarse image, other clients will only display the whole image after the downloading completed.
Low/High resolution flipping
Netscape supports images with high and low resolutions. It will load and display the low resolution image first, then load the high resolution one to replace the lower one. See this example .
Alternate text
Users connecting from remote sites or through modem lines may choose to 'Delay image loading'. The ALT in the IMG SRC tag may help them to identify what the image is about. Mosaic (newer version) and Lynx are able to display ALT text.
<IMG SRC="filename.GIF ALT= "Any text you like"> Text-only view
You may even design alternate pages that provide text-only information.
Back to content
More Information Sources
Back to content |
