WKS101 Creating Homepage on 'iHome' QUICK START GUIDE

Information Technology Services Centre
The Chinese University of Hong Kong
WKS101 Creating Homepage on 'iHome' QUICK START GUIDE
Version 1. December 2007

1. Introduction

iHome (The CUHK Community Homepage Server) is a new web server provided by Information Technology Services Centre. You can publish your web pages that describe your academic/research/teaching work on this server. Other available services on this server include:

Providing commonly used CGI programs such as access counter, guestbook etc.
Publishing "Web-ready" audio or video clips as RealServer has been installed.

You should note that distributing of copyrighted material without the permission of the owner violates the trademark and copyright ordinance. Policies and guidelines for Personal Homepage Creation can be read on-line at http://www.cuhk.edu.hk/itsc/learning/ihome.

2. Apply For an Account

All registered University staff and students, with a valid Staff/Student ID card, are eligible for getting a computer account on iHome without application. Below is the initial setting for accounts:

Computing ID: same as Mailserv e.g. s980000
Password: same as CWEM
Disk space: 15MB
URL: http://ihome.cuhk.edu.hk/~your_computing_id

(e.g. http://ihome.cuhk.edu.hk/~s980000).

In general, however, if you find your default quota units are not adequate, you should apply for additional quota units from the Centre online at http://accounts.itsc.cuhk.edu.hk.

3. Create Your Homepage

3.1 Preparing HTML Documents

HyperText Markup Language (HTML) is the standard language, which the Web uses for creating and recognizing hypermedia documents. These documents are in plain text format and can be created using any text editor (e.g. Notepad or Wordpad in Windows 95/98). The following Web page contains valuable information about how to write HTML documents: http://www.cuhk.edu.hk/itsc/network/app/webtuto.html

3.2 Putting Files on 'iHome'

Every iHome user is assigned with a home directory on the server. Any files under your home directory can be read by other Internet users. You can use any ftp clients to publish your files on iHome. Details can be read at http://www.cuhk.edu.hk/itsc/network/app/webftp.html.

If you prefer to publish your web page using Netscape Composer, please read the instructions on-line at http://www.cuhk.edu.hk/itsc/network/app/webtuto.html

In order to achieve a better performance and a high stability of the server, a "web-only" environment was implemented on iHome. You therefore need to use a FTP program like WS_FTP to publish/transfer your web pages from the local hard drive to the server. Please note that you cannot make Telnet connection to directly edit files on iHome.

3.3 Calling CGI Programs Provided on iHome

Unlike the environment in the General-purpose Unix server (Logic), you cannot run your CGI programs on iHome. However, there are three commonly-used CGI programs available on iHome. They are:

Access Counter

Displays total number of visitors that have visited your web pages and also the current time and date of time.

Guest Book

Allows visitors to sign their names and to leave their comments when visiting your web pages.

WebForm-to-Email

Sends e-mails to you from a web form.

Details on the use of these CGI programs can be found at http://www.cuhk.edu.hk/itsc/learning/ihome/cgi.html.

3.4 Publish “Web-Ready” Video/Audio Clips on iHome

The web streaming technology allows your audience to watch / hear your “web-ready” video / audio clips (e.g. content created by RealMedia…etc) while downloading from the web.

To support staff and students of the University to publish streaming content on the web, a RealServer G2 was installed on iHome. In order to maintain the performance and stability of the server, currently a maximum of 200 users is allowed to play video / audio clips in streaming media over the Internet.

To publish your “web-ready” video/audio clips, you need to prepare the following three files:

HTML files (.html)

Containing the hyperlink of the RealMedia Metafile (.ram).

RealMedia files (.rm)

Are video/audio clips produced by RealProducer, the streaming content creation tool.

RealMedia Metafile (.ram)

Contains the URL address and locator type (pnm://) of Real Server G2 that installed on iHome.

Refer to the following online documents to create your “web-ready” video/audio clips: http://www.cuhk.edu.hk/itsc/learning/ihome/.

4. HyperText Markup Language - HTML

Simple guide to webpage creation can be read on-line at http://www.cuhk.edu.hk/itsc/howto/html.

4.1 Basic Markup Tags

<!--.......-> Comment

<HTML></HTML> starting & ending tags of a page

<HEAD></HEAD> page header

<TITLE></TITLE> page title

<BODY></BODY> content of a page, you can change the background and text color

<H1></H1> six levels heading, from <H1> through <H6>

<IMG SRC= “ “ > include an image file (format : GIF, JPEG)

<BR> line break

<P> next paragraph

<B></B> bold

<I></I> italic

<HR> line separator

4.2 Paragraph Formatting

<UL></UL> format as unnumbered list (bullet list)

<LI> item in a list

<OL></OL> format as numbered list (list with item number)

<LI> item in a list

<DL></DL> format as definition list (term & definition)

<DT> term

<DD> definition

<PRE></PRE> preformulate text, the text format will be displayed as in the source HTML file

You can create nested lists by putting a list inside list.

Linking to Other Documents

<A HREF= “ “ > </A> hyperlink reference that you can define a link to another part of the same file, another HTML file and download file from the server

<A NAME=“ “> </A> an anchor to define different parts in a file

<A HREF=“#NAME“> </A> a link to another part of the same file

<A HREF=“file#NAME”> </A> a link to specific part of the other file

Table Formatting

<TABLE BORDER=1></TABLE> to start a table format with border

<CAPTION></CAPTION> caption of the table

<TR></TR> row of the table

<TH></TH> column heading of the table

<TD> data in the table

Other Formatting

<ADDRESS> </ADDRESS> address with specific format

<A HREF="mailto:address"> </A> directly send a message to the address

" “ Quotation mark “ character

& “ Ampersand” character

< “ Less Than “ character

> “ Greater Than “ character

Example

<HTML>
<HEAD>
<TITLE> Example for writing HTML file</TITLE>
</HEAD>
<BODY bgcolor=#BFBBA0 TEXT=#80222C>
<H1>Demonstration</H1><BR>
<H3>Include an image file “image1.jpg” here </H3><BR>
<IMG SRC=“image1.jpg” ALIGN=CENTER ALT=“This is a image”>
<P>
<H3>This is the 1st paragraph with level 4 heading</H3>
<UL>
<LI> item 1
<LI> item 2
<OL>
<LI> sub-item 1
<LI> sub-item 2
</OL>
<LI> item 3
<LI> item 4
</UL>
<BR>
<H4>This is the 2nd paragraph with level 4 heading</H4>
<B><I>The character format of this paragraph is in Bold and Italic</I></B>
<HR>
Please e-mail to <A HREF=“mailto:my-alias@cuhk.edu.hk”> my-alias@cuhk.edu.hk</A></BR>
</BODY>
</HTML>

5. References

6. Enquiries

For any enquiries, please contact us by:

Website: http://www.cuhk.edu.hk
Electronic HelpDesk: https://helpdesk.itsc.cuhk.edu.hk/group/learning-help

Fax: 2603-6098
Phone: 2609-8845 (Hotline Services)

Monday - Thursday 08:45-13:00 14:00-17:30
Friday 08:45-13:00 14:00-17:45
Saturday, Sunday & Public Holiday close

<!--.......->	Comment
<HTML></HTML>	starting & ending tags of a page
<HEAD></HEAD>	page header
<TITLE></TITLE>	page title
<BODY></BODY>	content of a page, you can change the background and text color
<H1></H1>	six levels heading, from <H1> through <H6>
<IMG SRC= “ “ >	include an image file (format : GIF, JPEG)
<BR>	line break
<P>	next paragraph
<B></B>	bold
<I></I>	italic
<HR>	line separator

<UL></UL>	format as unnumbered list (bullet list)
<LI>	item in a list
<OL></OL>	format as numbered list (list with item number)
<LI>	item in a list
<DL></DL>	format as definition list (term & definition)
<DT>	term
<DD>	definition
<PRE></PRE>	preformulate text, the text format will be displayed as in the source HTML file

<A HREF= “ “ > </A>	hyperlink reference that you can define a link to another part of the same file, another HTML file and download file from the server
<A NAME=“ “> </A>	an anchor to define different parts in a file
<A HREF=“#NAME“> </A>	a link to another part of the same file
<A HREF=“file#NAME”> </A>	a link to specific part of the other file

<TABLE BORDER=1></TABLE>	to start a table format with border
<CAPTION></CAPTION>	caption of the table
<TR></TR>	row of the table
<TH></TH>	column heading of the table
<TD>	data in the table

<ADDRESS> </ADDRESS>	address with specific format
<A HREF="mailto:address"> </A>	directly send a message to the address
"	“ Quotation mark “ character
&	“ Ampersand” character
<	“ Less Than “ character
>	“ Greater Than “ character