BASIC HTML PROGRAMMING LANGUAGE

Basic HTML Programming
HTML
HTML stands for Hypertext Markup Language Language.
HTML files ar are basically special text files:
• Contain special contr control ol sequences or tags that contr control ol how text is
to be formatted.
• HTML files ar are the "sour source ce code" for Web eb Br Browsers owsers
- A br browser owser reads eads the HTML file and
- Tries ries to display it using the tags to contr control ol layout.
• Text ext file cr created eated by:
- Any text editor - FREE: BBEdit Lite
- Special HTML editors -fr freewar eeware-expensive: Dreamweaver

Creating HTML Documents and Managing Web eb site
Text ext Editors
• BBEditLite
• Notepad, wor wordpad dpad
• Other text editing pr programs ograms
WYSIWYG Editors
• MS Fr Frontpage ontpage
• Macr Macromedia omedia Dr Dreamweaver eamweaver
• Others exist
First use text editor pr programs ograms to learn HTML Basics. Starting with
WYSIWYG hinders learning pr process. ocess. Only use WYSIWYG when you
know basics.

Creating Your our Own Web eb Pages
The pr process ocess in cr creating eating permanent permanentWWW WWW(HTML (+ related elated scripts
(later)) pages in this course is basically
• Cr Create, eate, and test, local files on the Macintosh Computer or shar share
UNIX files dir directly ectly acr across oss a locally (samba) mounted shar shared ed folder folder.
• Save HTML documents with extension .html, e.g. sport.html
• Ultimately you should stor store Permanent Copies of files on
Department's UNIX System/W Web eb Server Server.

Storing and Serving Files on School UNIX WWW Server
• Once you ar are happy with the format of the local (Mac based files)
and you want a permanent Web eb page you should FTP the file to
your personal UNIX file space.
OR
• If you have mounted you UNIX files via SAMBA
Ther There ar are 2 places wher where you may stor store HTML files on your
personal UNIX WWW file space.
NOTE: There is a Dif Difference ference

Two wo Special Sub-Directories in your Home Directory
project html -Files place in this dir directory ectory will be viewable only
within the department. Ideal for cour coureswork eswork
• Use URL:
http://project.cs.cf.ac.uk/A.B.Surname
wher where A.B.Surname is your long email name to refer eference ence files
fr from om the theWeb. eb.
public html -Files place in this dir directory ectory will be viewable on the
whole Internet. This is wher where you would cr create eate your Home Page Page.
• Use URL:
http://users.cs.cf.ac.uk/A.B.Surname
wher where A.B.Surname is your long email name to refer eference ence files
fr from om the theWeb. eb.

Making Your our Web eb Space Available vailable
The dir directories ectories should have been cr created eated for you but you wil have
to PUBLISH your pages on the COMSC Information Server Server.
• You ou agr agree ee to abide by University/School Regulations when you
PUBLISH your pages
• To PUBLISH your pages, go to URL:
http://www.cs.cf.ac.uk/user/
and click on PUBLISH button to make your pages available.
• UNPUBLISH available also.

Further Information of your School' School's Web Space
Further information on user and pr project oject Web pages at:
• User: http://www www.cs.cf.ac.uk/systems/html/451 .(W Web) eb) or
http://www www.cs.cf.ac.uk/systems/pdfs/451.pdf .(PDF)
• Pr Project: oject: http://www www.cs.cf.ac.uk/systems/html/452 .(W Web) eb) or
http://www www.cs.cf.ac.uk/systems/pdfs/452.pdf .(PDF)


UNIX File space and Storing Files on UNIX: SAMBA
Two wo ways to transfer your files on UNIX Web eb Space
Mount Unix Files via Samba
• Use Macintosh Finder
GO Connect to Server Server... ...
to mount your web space.
• Choose the COMSC
network and the
claros (or most
other machines)
• Select and Stor Store files
in in project html or
public html directory.

UNIX File space and Storing Files on UNIX: FTP
If will need to transfer files fr from om the Macintosh to UNIX and
alternative is to use FTP (STP fr from om outside School):
• Fir Fire up Fetch Application or command line FTP/SFTP SFTP.
• FTP to ftp.cs.cf.ac.uk
• Login into your own file space by using your on UNIX User ID
(e.g. scm...) and password.
• Change the directory ectory to your project html or public html
dir directory ectory.
• Put the file(s) in this dir directory ectory.

Creating Your our Own Home Page and other files for the WW WWW
• Cr Create eat the file using BBEdit (or another) and save it to disk. If the
file is
intended to be your home page save it as index.html html.
• Make sur sure file is corr correct ect by viewing it locally in Web Browser on
Macintosh (or PC!).
• Use Samba/FTP to access your UNIX File space.
• Save file in the public html dir directory ectory. It Must be placed her here. e.
• index.html should be the "home" file for every  subdirectory of your web space - Br Browser always look for this file if just a
dir directory ectory is refer eferenced, enced, E.g.:
http://users.cs.cf.ac.uk/A.B.Surname/ Surname/: You ou home page
is assumed to be index.html
http://users.cs.cf.ac.uk/A.B.Surname/SubDIR SubDIR:
index.html is assumed to be pr present esent in the SubDIR SubDIR.


The Best Way ay to Learn HTML
The best way to learn HTML (or any pr programming ogramming language) is by
example.
You ou can read ead many books but practice, i.e. writing your own HTML
pages and learning fr from om example WWW pages on line, is the best
way to learn tips and constr constructs. ucts.


Viewing iewing HTML Source in your Browser
• Find a Web eb page you like or wish to learn how it is formatted.
• Make sur sure this thisWeb eb page is curr currently ently being viewed by byWeb eb Br Browser owser.
• You ou can view the WWW WWWpage page by selecting the View iew Source
(Safari) item or Source (Explor Explorer) er) item fr from om the View iew Menu.
• Compar Compare the HTML with the br browser owser display of the Page.
• Portions of the file may be selected with the mouse (click and
drag mouse) and then Copied and Pasted into other documents
(E.g. BBEdit/Dr Dreamweaver eamweaver windows.



Anatomy of Any HTML Document
Every HTML document consists of two elements:
• Head elements - pr provides ovides page title and general page
formatting commands
• Body elements - put the main HTML text in this part.


HTML Tags ags
All HTML commands or tags have the following form:
<name of tag tag>... ...</name /of tag tag>
Tags ags contr control ol the str structur ucture, e, formatting and hypertext linking or
HTML pages.
Tags ags ar are made active by by<name of tag tag>and must be made inactive
by an associated </name /of tag tag>.
HTML is not case sensitive - tags can be upper or lower case
letters (even mixtur mixtures es of cases) - Not recommended ecommended.


Basic HTML Page Structure
We can now meet or first thr three ee HTML tags html, head and body
Note that these specify the basic anatomy of every HTML page.
<html>
<head>
head elements go here
</head>
<body>
body elements go here
</body>
</html>
NOTE:
• <html> is the first tag of any HTML page. It indicates that the contents of the page is in HTML.
• </html> has to be the last tag of any HTML page


Basic HTML Coding
Head elements
• <head>....</head> tag delimits head part of document.
• <title>....</title> Defines the title of the theWeb eb page.
• Ever Web page should have a title
- Displayed as Title itle of Web eb Br Browser owser Window indow
- Used in Bookmarks or Hot lists to identify page
- Make title succinct but meaningful
- Only one title per page
- Only plain text in title (no other tags).
- Usually <body> first level one header same as title (see
below).


The Body Element
• <body>....</body> tag delimits body part of document.
• All other commands that constitute web page nested inside body body.
• Body must follow head head.

Headings
• Headings ar are used to title sections and subsection of a document.
• HTML has 6 levels of headings labelled h1, h2, ..., h6 h6.
• Delimit headings between the <hn>....</hn> tags
wher where n = 1 . . . 6
• The first heading should be <h1> item
In most documents the first heading is the same as the page title title.
• Headings ar are displayed in lar larger/bolder ger/fonts than normal body
text.
• Incr Increment ement headings linearly - do not skip.

Example of HTML headings
<html>
<head>
<title> HTML Heading Lev Levels</title>
</head>
<body>
<h1> This is a level 1 heading eading </h1>
<p>
This is not a heading. It is a paragraph.
</p>
<h2> This is a level 2 heading eading </h2>
<h3> This is a level 3 heading eading </h3>
<h4> This is a level 4 heading eading </h4>
<h5> This is a level 5 heading eading </h5>
<h6> This is a level 6 heading eading </h6>
</body>
</html>

Which looks like this when viewed  through ough a br browser owser:
Figur Figure 11: HTML Heading Levels Example

HTML Comments
Comments delimited by:
<!-- ......... -->
• Ignor Ignored ed by br browser owser - No formatting function
• Like all good pr programming ogramming practice:
Use meaning comments in your HTML
Simple comment example:
<!-- THIS IS A COMMENT -->

Paragraphs
• <p> ....</p> tag delimts a paragraph.
• HTML ignor ignores es most carriage returns eturns in a file - so must use <p>
or <br> tag to get a newline in the br browser owser.
• Text ext is wrapped until a <p> or </p> encounter encountered. ed.
- HTML assumes that if a <p> is encounter encounterd befor before a </p> then
a paragraph should be inserted. (Old HTML Legacy)
- Bad practice to leave out </p> p>.
• Paragraphs can be aligned - LEFT, CENTER, RIGHT - with
the ALIGN attribute via
<p align=center>

Paragraph Align Example
<p align>
<!-- THIS IS A COMMENT --> ->
<!-- Default align is le left ft -->
Left aligned paragraph
</p>
<p align = center>
Center aligned paragraph
</p>
<p align = right>
Right aligned paragraph
</p>
Which looks like this when
viewed thr through ough a br browser: owser:

Links and Anchors
Linking to Other Documents - The Br Bread ead and Butter of the Web eb
Regions of text can be linked to other documents via the anchor anchor,
<a> a>, tag which has the following format:
<a href='' filename or URL URL'' ''> link text </a /a>
• The opening <a> tag has a href attribute that is used to specify
the link to URL or local file.
• Text ext bet between een the <a> and </a> (closing tag) is highlighted by
the br browser owser to indicate the hyperlink.
• Depending on br browser owser and web page configuration highlight style
can dif differ fer.

Relative and Absolute Links
Ther There is a subtle and very important between the links in the pr previous evious
example:
Relative links - refer efer to a page in relation elation to the curr current ent document
• sub-dir directories ectories and included files can be specified in the
relative elative link.
• Makes for very portable web pages.
Whole dir directory ectory systems can be moved easily easily.
• e.g.
<a href="\Sport\Football.html">Football</a>
Absolute links - refer eference ence files based on the absolute location on
the local file system or WWW WWW.
• e.g.
<a href="http://www.bbc.co.uk/Sport/Football.html">Football</a>}

Anchors - Jumping to specific places in a document
Anchors ar are special places within documents that can be linked to.
• Anchors may placed anywher anywhere in a document with
<a name = "anchor_name">Anchor Position</a>
• Anchors within the same document ar are referr eferred ed to by
<a href = "#anchor_name">Go to anchor</a>
• Anchors in the external document ar are referr eferred ed to by
<a href = "link link#anchor_name">
wher where link may a relative, elative, absolute or remote emote URL link.

Anchor Example - Same code for external or internal:
<ul>
<li><a href="#apples">apples</a></li>
<li><a href="#oranges">oranges</a></li>
<li><a href="#bananas">bananas</a></li>
</ul>
<h2>Information</h2>
<p><a name="apples">
Apples are green
</p>
<p><a name="oranges">
Oranges are orange
</p>
<p><a name="bananas">
Bananas are yellow
</p>

Lists
HTML supports a variety of lists.
Unordered or Bulleted lists
• <ul> ... </ul> delimits list.
• <li> indicates list items.
• Closing </li> is not strictly requir equired. ed. (Old HTML Legacy)
But recommended. ecommended.
<ul>
<li> apples. </li>
<li> bananas.</li>
</ul>
Which looks like this when viewed thr through ough a br browser: owser:

Ordered or Numbered lists
• <ul> ... </ul> delimits list.
• <li> indicates list items.
• Closed with </li> li>.
For Example:
<ol>
<li> apples.</li>
<li> bananas.</li>
</ol>
Which looks like this when viewed thr through ough a br browser: owser:

Preformatted Text ext
The The<PRE PRE>tag generates text in a fixed width font and causes spaces,
new lines and tabs to be significant. Often used for pr program ogram listings.
Example:
<pre>
This is preformatted text.
New lines, spaces etc. are
significant.
</pre>
which looks like this when viewed thr through ough a br browser: owser:

In-Line Images
All br browsers owsers can display in-line images that ar are in JP JPEG EG or GIF format.
• Use the img tag with src attribute to include an image in you HTML page:
<img sr src=image c=link link>
wher where image link is the the relative, elative, absolute or remote emote URL link of the im image age
file.
• Include alt=''replacement'' attribute for br browsers owsers that may not be set to
display graphics, wher where replacement is a meaningful short text description.
- Some people pr preserve eserve Bandwidth/ Download time by turning of off image
display in a br browser owser
- If image is corr corrupted upted or URL is "misdir misdirected" ected"-per perhaps haps so some me files/dir directories ectories
moved.
- Lynx text only br browser owser
- Special needs Br Browsers owsers for Blind/Partially sighted people
• Images can be align aligned ed like paragraphs.
• Images can be resized esized in pixel size or per percentage centage with width and/or height
attributes.

In-Line Image Example Pixel Size
HTML:
<p align = center>
An image mixed in with text ext <br>
<img src="niagara.jpg" align=middle
lign=width = 300 height = 200
alt="Niagara Falls">
</p>
Which looks like this when viewed thr through ough a br browser: owser:

In-Line Image Example Percentage Size
HTML:
• Note: Only have set width her here to pr preserve eserve image aspect.
<p align = center>
An image mixed in with text ext <br>
<img src="niagara.jpg" align=middle
lign=width = 50%
alt="Niagara Falls">
</p>
Which looks like this when viewed thr through ough a br browser: owser:

Dif Differences ferences between Absolute Pixel and
Percentage Image Size?
• Pixel size fixes size of image - if window resizes esizes too small then
scr scrolling olling will be invoked.
• When you resize esize br browser owser window always rescales escales image to fit
window - to within a reasonable easonable minimum size.

External Images, Sounds, Video ideo
External Images will be loaded into their own page as a simple
URL. The href field within the anchor tag is used.
These ar are easily included by using
<a hr href=" ef="image url url">link anchor anchor</a /a>
<a hr href=" ef="video url url">link anchor anchor</a /a>
<a hr href=" ef="audio url url">link anchor anchor</a /a>
<a href="http://www.bbc.co.uk/sound_file.wav">MADE UP LINK!</a>


Embedded (in-line) Audio, Midi and Video ideo
To include Audio, MIDI and Video ideo Elements in a web page use the
embed tag, syntax:
<EMBED SRC="media_url"
HEIGHT=
WIDTH=
AUTOPLAY= TRUE/FLASE
LOOP= TRUE/FALSE>
• height height, width as befor before
• autoplay = TRUE for forces ces media to play on page load
• loop = TRUE for forced ced media to loop continously on page

Example Embedded Audio, Midi and Video ideo
<p align = center>
Embedded Audio: <br>
<EMBED SRC="Shaggy.wav"
HEIGHT=50 WIDTH=200
AUTOPLAY=FLASE LOOP=FALSE FALSE>
</p>
<p align = center>
Embedded Midi: <br>
<EMBED SRC="mars.mid"
HEIGHT=50 WIDTH=200
AUTOPLAY=FALSE LOOP=FALSE FALSE>
</p>
<p align = center>
Embedded Video: <br>
<EMBED SRC="JawsII.mov"
HEIGHT=250 WIDTH=200
AUTOPLAY=TRUE LOOP=FALSE>
</p>
Which looks like this when
viewed thr through ough a br browser: owser:

Logical Character Tags ags Examples
<em>
This is emphasised Text ext
</em>
<strong>
This is Strong Text
</strong>
Code Text looks like this:<br>
<code>
begin
for i:= 1 to N
end
</code>
Variable text looks like this:<br>
<var>
my_var_name = 2;
</var>
<dfn>
By definition this the dfn logical style
</dfn>
Address style looks like this:
<ADDRESS>
dave@cs.cf.ac.uk Dr. A.D. Marshall
</ADDRESS>
</p>
Citation style looks like this:<br>
<cite>
Internet Computing Notes, otes, David Marshall 2003
</cite>
Which looks like this this:


Physical Character Tags ags Examples
<b>
This is bold text.
</b>
<i>
This is italic text.
</i>
<u>
This is text is unde underlined. rlined.
</u>
<tt>
This is fixed width text.
</tt>
<s>
This is text is stru struck ck through.
</s>
This is normal text.
<big>
This is bigger text.
</big>
This is normal text.
<small>
This is smaller text text.
</small>
X₁ is sub subscripted scripted (1).
X². the squared quared (2) is superscripted
Fractions can be mad made with a mix of sup and sub:
¹<sub>2</ sub>
Which looks like this this:

Special Characters
Certain characters need to be referr eferred ed to in a special way way.
These include:
• Character strings that repr epresent esent special symbols, e.g.
- &amp for &
- &lt for <
- &gt for >
- &quot for double quote (")

Horizontal rules and Line breaks
Ther There ar are two tags that can be used to contr control ol the layout of your
page.
• Horizontal Rule <hr>
• Line br break eak <br> - inserts a end of line wher where it appear
Neither have a closing tag or associated text.
Their use is fairly straightforwar straightforward. d.

Horizontal Rule <hr>
The <hr> has 4 attributes that may be associated with it.
• The size attribute to specify thickness of line in pixels (pixels
ar are individual dots displayed on the scr screen). een).
For example:
<b>2 Pixels</b><br>
<hr size=2>
<b>4 Pixels</b><br>
<hr size=4>
<b>8 Pixels</b><br>
<hr size=8>
<b>16 Pixels</b><br>
<hr size=16>
Which looks like this this:
Can also add/r remove emove shading, alter alignment and change width
e.g.
<hr noshade align=right width=50%>

Fonts and Font Sizes
The <font> tag is used to change the font size and type face of text
enclosed between the begin and end tag.
• The size attribute changes the size of the font. Allowed values
ar are 1 to 7.
- size attributes can be incr incremented emented or decr decrements ements with
+ operator within the above range range.
E.g size = +2 2.
• The face attribute to select a type face.
E.g. face = "futura,helvetica" helvetica", face = "courier"

Example uses of font tag: face and absolute size
<P><font face="Futura,He Helvetica">Sans lvetica">Serif fonts are fonts
without the small "tick ticks" s" on the strokes of the characters.
</font></P>
<P>Normal font size. <fo font nt size=5>Larger font size.</font></P>
<font size=1>font size 1</font><br>
</<font size=2>font size 2</font><br>
</<font size=3>font size 3</font><br>
</<font size=4>font size 4</font><br>
</<font size=5>font size 5</font><br>
</<font size=6>font size 6</font><br>
</<font size=7>font size 7</font><br>
</looks looks like this

Web eb Page Backgrounds
You ou can do a few simple yet ef effective fective things to spice up your web
pages.
It is straightforwar straightforward to
• Change the colour of your backgr background. ound.
• Make a (GIF or JPEG) image a backgr background ound

Back
Close
Colour in HTML
Colour is widely used in many HTML contexts.
We, e, briefly briefly, intr introduce oduce the concept of colour in HTML her here. e.
Ther There ar are two ways to specify colour:
• Use Hexadecimal numbers to specify each red, ed, gr green een and blue
component.
• Use one of a set of predefined colour names names.

Hexadecimal Colour Representation in HTML
Colour for each red, ed, gr green een and blue colour component is repr epresented esented
by a range 0 (0 Hex) to 255 decimal (FF hex) wher where
• 0 indicates zer zero colour component
• 255 indicates full colour component
• Other values a pr proportion oportion of a the colour value.


Example Hexadecimal Colours
Thus, we can form:
Red Gr Green een Blue Colour
0 0 0 Black
255 255 255 White
255 0 0 Red (full)
0 255 0 Gr Green een (full)
0 255 0 Blue (full)
x x x x = 0-255
Shade of gr grey ey
255 0 255 Magenta
0 255 255 Yellow ellow
and so on ...

Predefined Colours in HTML
You ou can choose fr from om pr predefined edefined colours, for example:
Black, White, Green, Maroon, Olive, Navy Navy, Purple, Gray Gray, Red,
Yellow ellow, Blue, Teal, eal, Lime, Aqua, Fuchsia and Silver Silver.
• Colour names ar are easier to remember emember. The only drawback is a
restricted estricted choice compar compared ed with several million possible colours
possible with hexadecimal repr epresentation. esentation.
• The fidelity and ultimate rendering endering of colour will depend on the
har hardwar dware you run un the br browser owser on.

Setting the Background Colour of Your our Browser
To change the backgr background ound colour you must set the BGCOLOR attribute
in the BODY tag.
• To specify a hexadecimal number you must put a # befor before the
number and then two hex digits for each red, ed, gr green een and blue
component respectively espectively.
For example, whitehex.html html:
<BODY BGCOLOR = "#FFFFFF">
gives us a white backgr background. ound.

Some Example Named Colour Backgrounds
To set BGCOLOR with a predefined name simply refer efer to the name of
one of the allowed colours colours.
For example, green.html html:
<BODY BGCOLOR = "green">
gives us a gr green een backgr background. ound.

Image Backgrounds
You ou can use an image as a backgr background ound for your web pages.
To do this use the BACKGROUND
attribute of the BODY tag, for
example, my back.html html:
<body background="my_back back.gif">
.URLs (r relative elative or absolute) can be
supplied:
<body background=
"images/my_back.gif">
<body background=
"/server_images/my_back.gi gif"> f">
<body background=
"http://www.myimageserver/ my_back.gif">

Using Image Backgrounds
Some pr precautions ecautions should be taken when using images:
• Keep the size of the images small
• Br Browsers owsers tile images:
- Small images ar are repeated epeated in rows ows and columns to fill the web
page.
- This saves on downloading over overheads heads of lar large ge images
- Images should have patterns that "flow" between tiles
- GIF and JPEG image formats allowed
• Br Browsers owsers cache images and web pages so reuse euse a backgr backgrounds ounds
on several pages.
• Reusing a backgr background ound cr creates eates a consistency to pages pr providing oviding a
"web site" overall image.

Scrolled Image Backgrounds
Image backgr backgrounds ounds cane be Scr Scroll oll contr controlled olled via the bgproperties
attribute of the BODY tag
• If bgproperties="fixed" is set when (W Web eb Page) text is
scr scrolled olled backgr background ound image remains emains fixed
For example, my back fixed.html :
<body background="my_back back.jpg" .bgproperties="fixed">
• Otherwise the backgr background ound image also scr scrolls olls
For example, my back scroll.html html.

Text ext Colour in HTML
You ou can change the colour of text on your web page in much the
same way as you set the backgr background ound colour colour.
• You ou can change the colour of all the text on page by setting the
TEXT attribute of the BODY tag.
• For example redtexthex.html html:
<body text = "#FF0000">
or or, redtext.html html:
<body text = "red">
gives us red ed text on our page.

Multicoloured Text ext
Setting the Text ext colour in the BODY still only gives one colour for all
text on a page:
• You ou can also colour individual portions of text with the <FONT>
tag by setting the COLOR attribute.
For Example, fontcol.html html:
Multicoloured text:
<br><br>
<font color = "#FF0000">
This is RED text
</font><br><br>
<font color = "#00FF00">
This is GREEN text
</font><br><br>
<font color = "#0000FF">
This is Blue text
</font><br><br>
Which gives:

CGI Scripting
What is a CGI Script?
A CGI script is any pr program ogram that runs uns on a web server server.
Why CGI Scripts Scripts:
CGI stands for Common ommon Gateway ateway Interface
CGI defines a standar standard wa way in which information may be passed
to and fr from om the br browser owser and server server.
Any pr program ogram or script that can pr process ocess information accor according ding to
the CGI specification (part of HTTP pr protocol otocol) can, in theory theory, be used
to code a CGI script.

The Role of CGI
The role ole of this CGI script is to:
• Accept the data which the user inputs and
• Do something with it.
• Usually Usually, send a reply eply back to user user.
Figur Figure 26: The Common Gateway Interface

Writing riting and Running CGI Scripts
CGI scripts can exist in many forms - depending upon what the
server supports.
CGI scripts can be compiled pr programs ograms or batch files or any executable
entity entity. For simplicity we will use the term script for all CGI entities.
Typically ypically CGI scripts ar are written in:
• Perl scripts - colorgreen The method we adopt adopt. Most ost common
too
• C/C++ pr programs ograms
• Unix Scripts
colorred We will concentrate on Perl in this course course.
CGI scripts ther therefor efore have to be written (and maybe compiled) and
checked for errors befor before they ar are run un on the server server.

Calling a CGI Script
CGI can be called and run un in a variety of ways on the server server.
The 2 most common ways of running unning a CGI script ar are: e:
• Fr From om an HTML Form -the ACTION attribute of the form specifies
the CGI script to be run. un.
• Dir Direct ect URL refer eference ence-ACGI CGI script can be run un dir directly ectly by giving
the URL explicitly in HTML HTML.
- Ar Arguments guments (values) may be requir equired ed by the script this will
have to passed in.
- We will see how to do this shortly shortly.
One other way CGI scripts ar are called is in Server Server-side -include
HTML commands.
• This is something we will leave until later later.

Creating CGI Scripts
We will be cr creating eating CGI scripts in Perl Perl.
Perl has become the default language for cr creating eating CGI scripts as it
has many useful featur features es and a rich set of libraries.
On Mac OS X/UNIX perl scripts ar are executed as scripts
• Perl Scripts ar are interpr interpreted eted - no need to compile
• A special pr program, ogram, the Perl Interpreter Interpreter, supplied on the system.
On PC (also LINUX/Solaris)
• ActivePerl is used (Industry Standar Standard) d)
Perl is a freely available for most platforms -see seewww www.perl.or .org
or www www.perl.com

Perl CGI Script Development Cycle
The basic cycle of perl script development recommended ecommended for this
course is:
1. Write rite and cr create eate Perl scripts on Local Machine
(Mac OS X/PC/LINUX).
2. Test, est, run un and debug Perl script Local Machine
(Mac OS X/PC/LINUX)
• Possibly not fully functional CGI test
• But test for syntax and basic output output.
3. For permanent storage or permanent permanentWeb eb distribution, Samba/FTP
perl script and HTML to School's UNIX/LINUX Web eb Server
• As with HTML home pages ther there ar are two distinct ways to
serve CGI (Local (Pr Project) oject) and Global (Public)) scripts.
• HTML files must be placed in special dir directories. ectories.
• Perl scripts must be place in special (sub) dir directories ectories
(cgi-bin subdir subdirectory ectory fr from om HTML dir directory ectory-more soon soon). ).

Setting up CGI Scripts to run on a server
As mentioned above and in similar fashion HTML code need to located
in a special place in or order der to run un and operate pr properly operly.
CGI Scripts on School' School's Web eb Server
The pr process ocess of installing CGI scripts is similar to that of HTML pages,
except dif differ ferent ent (sub)dir directories ectories and URLs ar are used.
project html/cgi-bin - Files placed in this dir directory ectory will be
accessible only within the school.
• Use URL:
http://www.cs.cf.ac.uk/proj project/A.B.Surname/cgi-bin
ect/wher where A.B.Surname is your long email name to refer eference ence files
fr from om HTML forms or dir directly ectly.
• Associated HTML files (i.e. ones whose FORM ACTION calls
the CGI script) must still be placed in the project html
dir directory ectory (one (sub)dir directory ectory level above.

World orld Wide ide CGI Scripts on School' School's Web eb Server
public html/cgi-bin - Fil Files es placed in this (sub)dir directory ectory will
be viewable on the whole Internet.
• Use URL:
http://www.cs.cf.ac.uk/User User-bin/A.B.Surname
-wher where A.B.Surname is your long email name to refer eference ence
scripts fr from om HTML or dir direct ect URL.

Setting up cgi-bin (sub)directories
• cgi-bin (sub)dir directories ectories should alr already eady be cr created eated for you.
• You ou will have register egister your project and
public html/cgi-bin dir directory ectory on the School's School'sWeb eb Server Server.
• CGI scripts placed her here will need their access permission
changed.
- See mor more information of following slide
Further information on user and pr project oject Web eb CGI pages at:
• User: http://www www.cs.cf.ac.uk/systems/html/451 .(W Web) eb) or
http://www www.cs.cf.ac.uk/systems/pdfs/451.pdf .(PDF)
• Pr Project: oject: http://www www.cs.cf.ac.uk/systems/html/452 .(W Web) eb) or
http://www www.cs.cf.ac.uk/systems/pdfs/452.pdf .(PDF)

Configuring and Running Individual CGI scripts
Simply place (FTP) the CGI script in the public or
project html/cgi-bin subdir subdirectories. ectories.
Every CGI script will need to have certain access modes changed.
This can be done fr from om Macintosh (with Fetch) or on UNIX/LINUX
(via Telnet elnet connection).
CGI scripts have a maximum CPU run runtime time of 30 secs -
after which they are terminated.

Setting File Access Modes - Fetch FTP Application
To set file access modes fr from om colorgreen Fetch (just before FTP transfer) transfer):
• Select the Set Upload
Permissions... Menu item
fr from om the Remote Menu.
• A new window appears.
Click on and set the
Owner and Group read,
write and search/execute
permissions and set the
Everyone search/execute
permission



Setting File Access Modes - UNIX/LINUX (via Telnet) elnet)
To Set CGI file permissions fr from om UNIX UNIX:
• Assume we have cr create eate the CGI script called test1.pl pl.
• test1.pl must reside eside in dir directory ectory project or
public html/cgi-bin (or copy it ther there). e).
• To change the mode of the script to make it executa executable ble and accessible by the theWeb eb
server type (fr from om your top level dir directory ectory in example below):
chmod +x public_html/cgi cgi-bin/test1.pl
-touch public_html/cgi-bi bin/test1.pl
n/chmodwww public_html/cgi cgi-bin/test1.pl
-• If you cd into public html/cgi-bin or
project html/cgi-bin then you need not type full paths
• chmodwww test1.pl may be replaced eplaced by
chmod og+w test1.pl
You ou should now be able to access the script using URL URL:
http://www.cs.cf.ac.uk/us user(project)/A.B.Surname/cgi-bin
er(