Server Technologies University of Wollongong 2004 - Week1 Notes

1

CSCI399 Offshore 2004Server Technologies

Remembering the Hyper Text MarkupLanguage

Daniel F. SaffiotiSchool of IT and CSThe University of Wollongong

Objectives

In this weeks workshop, you are goingto;

– develop an appreciation for the constructsavailable in the Hyper Text MarkupLanguage.

– put your knowledge of HTML to the test.

Tools needed to write HTML

As you know HTML is a simple markuplanguage. The language describes the lookand feel of objects on a screen.

In order to use HTML you need;

– A text editor which can write ASCII text files.– A browser (Netscape or Explorer) to view the

resources.

Types of Editors

Most people when the write HTML thesedays fall into either of the following groups.

– Many people are WYSIWIG people - they like touse graphical editors with drag and drop.

– Some people like to write HTML code by hand -this is much better. This is how we are going to doit in this subject.

The role of the Web Parser.

As you saw a few weeks ago the primary roleof the web browser is to send a request to aweb server.

Once the request is sent using the HTTPprotocol, the web server ‘may’ respond. Theresponse is typically in HTML or some otherMIME type.

The web browsers job is to take theresponse and parse it and render it.

Diagrammatically this is what the processlooks like. Step 1and 2 is establish where thehost is we are hoping to talk to and Step 3and 4 are about sending and receiving theresource.

Domain NameService

You Client(Netscape)

www.apple.comWeb Server

1

2

3

4

2

Most browsers are text or graphicalbased. The graphical browsers such asExplorer and Netscape are slow andinefficient - everyone should uselynx(1).

Composition of the HTMLlanguage. HTML is a markup language. The languages

basic unit is a tag. We can combine tags toperform a particular kind of function.

Tags work together by specifying theattributes for formatting and pagecomposition/ layout. An example of thiswould be type facing and paragraphing.

About Tags

Tags are easy to read.

All tags are composed of elements that arecontained within < > brackets e.g.

<TAG>

Most tags are paired, that is there is abeginning tag <TAG> and ending tag</TAG>. In some cases it specifies how theencased data will be effected.

Tags can also be nested, for example.

<b> This is bold </b>

Would ensure the encased text is bold.However if we wanted the encased text to bebold and italic we would do:

<b><i> This is bold and italic </i></b>

If we wanted a specific part to be italicizedthen we would go;

<b>This is bold and <i> italic </i></b>

Attributes and Tags

An attribute is an extra piece ofinformation associated with a tag.

Examples include:

<H1 ALIGN=“center”> Hello </H1>

Note the ALIGN string is the attribute. Itdefines a property of this heading.

HTML Style

HTML is just like any other form ofcode. There is a difference betweengood and bad HTML.

– Good HTML uses indentation.– Good HTML has some form of

documentation.

3

Some Basic Tags

This section describes a number of thebasic tags which are used in HTML to:

– document code.– provide basic formatting of text.

<!DOCTYPE ...>

This tag tells browsers what HTML versionthe document works under. The HTML 3.2and 4.0 specifications require this non pairedtag.

The DTD is a document definition which tellsthe browser how to parse the document.

<DOCTYPE HTML PUBLIC “-//WC3//DTDHTML 4.0 FINAL/EN”>

<HTML> tag

The HTML tag identifies the body of theHTML document. It describes to the parserwhen to start and stop parsing HTML.

As you can see it is a paired tag.

<HTML>. . .</HTML>

<HEAD> Tag

The HEAD tag contains informationabout the document such as style anddefinitions, titles and scripts invoked.

<HTML><HEAD>. . .</HEAD></HTML>

Inside the head tag, we normally seethe <TITLE> tag being used. This putsthe title inside the browsers window.

<HTML><HEAD>

<TITLE>The cat sat on the Mat

</TITLE></HEAD></HTML>

The BODY tag

The BODY tag is used to normally enclosethe content you would like to be visible to thebrowser.

<HTML><HEAD><BODY>. . .</BODY></HEAD>

</HTML>

4

Formatting Tags

The last batch of tags that werediscussed basically defined thestructure of the HTML page.

The next group of tags describe theattributes/ data on a page.

Heading Tags

The heading tags provide characters ofvarying sizes to break up sections.

<H1> . . . </H1>

<H5> . . . </H5>

The differing numbers vary the size of thefont. The contents between the two tagsforms the heading.

Alignment

We can control the alignment of objectson the screen using an attribute calledALIGN. The ALIGN attribute can takethe values;

– LEFT– RIGHT– CENTER

For example we could have somethinglike:

<H1 ALIGN=“RIGHT”> The cat</H1>

This would right justify the string “Thecat”

Controlling the look and feel oftext. There are two differing kinds of

formatting for text in HTML. The first isparagraph formatting and the other ischaracter formatting.

Paragraph Level Formatting

The <P> tag defines the beginning of aparagraph - whilst </P> defines theend. Sometimes it is not paired.

<P>The cat sat on the matand ate the dirty rat.</P>

5

You can control the alignment ofparagraphs by using the alignargument.

<P ALIGN=“right”>The cat sat on the matand ate the dirty rat</P>

A number of other paragraph level formattingtags exists - these are mostly paired tags.

– <ADDRESS>Used for address and contact information.

– <BLOCKQUOTE>Used for formatting quotations.

– <PRE>Used to for fixed width fonts.

Specifying Line Breaks

HTML does not understand the notionof new line nor carriage return.

In your code if you wish to indicate anew line you must use the <BR>directive, which means break.

Character level formatting tags.

Here are a number of tags (mostlypaired) which are used to format blocksof characters.

<B> <BLINK> <SUB> <SUP> <CODE> <I><CITE> <EM> <U><STRONG>

Lists

Sometimes users with to format outputinto lists. HTML by default providessupport for two kinds of lists.

– Numbered lists (ordered set).– Bulleted lists (unordered set).

List Tags

To build a list in HTML you use the following tags -refer to the standard for a description of the tagsarguments.

<OL> </OL>Enables the creation of an orderedlist.

<UL> </UL>Enables the creation of an unorderedlist.

<LI>List Item

6

An example of how a list may becreated is:

<OL><LI> Cat<LI> Dog<LI> Mouse

</OL>

As per usual you can control thejustification of the list and the format ofits members. There is nothing stoppingyou from using other tags.

You can alter the behavior of these listsby using attributes. For example onordered lists you can control thestarting value by using the STARTargument.

<OL START=2>

Means that the starting value o the listwould be 2.

In addition to this there is an argumentcalled TYPE which allows you tocontrol the type of numbering to use.

<OL TYPE=A>

Means to create an order lists orderedby alphabetic characters.

For unordered lists we can select the kind ofbulleting for the type.

The possible values for such lists are:

– DISC– SQUARE– CIRCLE

And example of this would be:

<UL TYPE=DISC>

Horizontal Rules

Horizontal rules are lines that enablesections of text to be broken up

The tag is <HR>.

In addition to this the tag can take anumber of arguments.

– SIZE=nThe height of the rule expressed in pixels.

– WIDTH=nHow long the rule is in pixels.

– WIDTH=“n%”Specifies the % of space the rule is to take up onthe horizontal axis.

– NOSHADESpecifies no shading on the rule.

The ALIGN attribute works with this tag too,just like the others.

7

Managing Fonts

A specific tag exists to allow you todefine the font you wish to use on apage. The tag is <FONT> - it is apaired tag.

Anything encased in the pair issubjected to the font directive.

The font tag has a number of arguments.

– SIZE=“+|-n”The point size of the font.

– COLOR=“ “The color of the font.

– FACE=“ “Face defines the kind of font i.e. Arial, Time NewRoman and Courier New on PC’s. Helvetica,Times and Courier on Macintosh.

Anatomy of a URL

URL’s are acronyms for UniversalResource Locators.

As you know web pages, read like abook. They are a collection of pageslinked together by URL’s.

URLS have a particular anatomy. Theanatomy is:

<protocol>://<host>/<path|resource>

protocol defines the kind of protocol we areusing to obtain the resource. Commonexamples include HTTP, FTP and LDAP.

host refers to the name (DNS name) of themachine on the Internet that is providing theservice. Ultimately this host name isconverted to an IP address.

The path|resource indicates whatresource/ document we are trying toaccess.

For example

<A HREF=“http://www.uow.edu.au/~dfs/index.html>

The protocol is http. The host iswww.uow.edu.au and the resource is~dfs/index.html.

Relative and absolute URL’s.

Okay, so you should know all about URL’s.Lets consider the following URL.

http://www.apple.com/document/data.html

An absolute URL is a URL which indicates allthe components of the URL string i.e.Protocol, Name and Path. In this case theabove string is an absolute URL.

8

A relative URL on the other hand is a URLwhich is relative to a particular location.

Assume we are at the following location (weare viewing index.html)

http://www.apple.com/index.html

If we wanted to have a link in the index.htmldocument to

http://www.apple.com/document/data.html

we could simply do this by going<A HREF=“document/data.html”>. That isexpress the link relative to where wecurrently are in the web tree.

Creating Links in Web Pages.

HTML provides a tag called an Anchor whichallows us to reference other resources in adocument. The anchor is a binary tag.

Anything between the anchors has a specificbehavior.

<A>. . . . </A>

To create a hyperlink in the web page,we simply use the argument HREF tothe anchor tag and provide it with eitheran absolute or relative URL.

<A HREF=documents/index.html>Public Document

</A>

In addition to this we can do otherthings.

For example a link could be a link to animage.

OR a link could be an action. Themailto keyword allows the client tospawn an email application. The Tofield is filled in.

<A HREF=“mailto:[email protected]”>

Including Images

Till now the work you have done withHTML has included only Text.

One of the traits which makes HTMLappealing is the fact that it mergesmany forms of media (text, video,images and even audio).

Costs/ Benefits

The use images is a double edged sword.

You should be very careful because eventhough they may look pretty they can bequite costly.

For example the more graphical data on apage, the more time it will take to download.This really isn’t an issue today as mostpeople have broadband!.

9

Things to consider.

You need to consider the followingwhen working with images;

– The file size of the image.– The dimensions of the image.– The purpose of the image.– The design of the overall webpage/

environment.

Visitors and Graphics.

This size of the image (resolution) is themost important of the aspects to consider.

The higher the resolution the image, thehigher the resolution the user will require. Forexample it is not a good idea to includeimages on a website that require a resolutionof 1024 x 768.

Even though most computers today supportthis - it still is a very big image.

This was a huge problem a few yearsago when the average resolution of acomputer was 640 x 480 or 800 x 600.

Image Formats

The HTML browsers i.e. Netscape, Mozillaetc can interpret most image formats.

There are two standard image formats for theweb however. These are:

– GIF (Graphics Interchange Format)– JPG (pronounced JPEG - joint photographic

experts group).

The GIF Format.

There are two forms of GIF - these are87a and 89a. They offer the followingadvantages;

– Transparency Support.– Animation Support.– Progressive Rendering Support.– Compression.

The JPEG Format

JPEG typically yields higher qualityimages then GIF, however it is lessflexible. JPEG has the following traits;

– JPEG supports a higher bit depth.– More efficient compression algorithm.

10

It should be noted that support foranother formatted called PNG(Portable Network Graphics) is growing.

Current releases of browsers aresupporting these formats.

Adding images to our documents.

To add images to web pages, we must becomefamiliar with the following directive:

<IMG>

That said the directive can have have a number ofarguments;

ALT=“....”SRC=“...”HEIGHT=nWIDTH=nBORDER=nALIGN=“...”

Adding an Image

To add an image to your document youwould use the <IMG> tag. This is asingular tag hence it does not have therespective </IMG> tag.

The <IMG> tag on its own has novalue, so we must use a number of itsarguments.

The SRC attribute allows us to specify URI(Universal Resource Indicator) of the object wewould like to display, normally this is the path to theimage or to a program which can generate an image.

<IMG SRC=“images/apple.gif”>

Would display the apple.gif image from the directoryimages which is at the base of the web tree. ThisURI is relative to the page that is being displayed.

It could be rewritten in absolute terms by usingsomething like:

<IMG SRC=“http://www.uow.edu.au/~dfs/images/apple.gif”>

The next attribute which has a great degreeof value (mostly in text only browsers suchas lynx) is ALT. ALT provides alternative textif images are not to be loaded.

You can see such alternative text when yourmouse moves over where the image wouldhave been displayed.

<IMG SRC=“images/apple.gif”ALT=“This is an apple”>

Would display the statement “This is anApple” in the even the image can not bedisplayed.

The HEIGHT and WIDTH attributes allowyou to control the dimensions of the image.They are assigned a value n which is aninteger.

The image will be scaled accordingly and thismay have ramifications on its quality.

HEIGHT=100

Would scale the image so that its ydimension would be 100 pixels.

11

An example of this would be:

<IMG SRC=“images/apple.gif”ALT=“This is an apple”HEIGH=100 WIDTH=100>

This however may have ramificationssuch as alternative text being cut off.

You can control the alignment of theimage on a page by using the ALIGNtag. In HTML 4.0 the ALIGN tag isdeprecated (soon to be eliminated fromthe language).

The ALIGN attribute can have thevalues top, middle, bottom whichspecify the images position withrespect to the surrounding content onits left and right.

The last attribute that has great value withimages is the BORDER attribute. BORDERis assigned an integer value which indicatesthe number of pixels to put around theimage. Thus making a border.

<IMG SRC=“images/apple.gif”ALT=“This is an apple”HEIGH=100 WIDTH=100BORDER=1>

Means to display an image and place aborder of 1 pixel around it.

Image Maps

In addition to displaying images, we candefine what happens when we click onparticular parts of images using image maps.

Client side image maps are done by usingthe directive USEMAP which describesregions in an image and what happens whenthey are clicked. The description is encodedin a file referenced by a URL.

The other way in which maps are doneis by using server side maps. Thistechnique was devised by the NCSAand is utilised by using the ISMAPdirective.

In this model the users clicks onregions are sent back to the server forprocessing.

Most modern web browsers supportboth.

Background Images and Colors

Before the <BODY> tag was mentioned. Asyou know the body tag allows you to expressthe contents of your web page - it forms thevisual data of what you see.

That said it has a number of attributes whichcan alter the behavior of the page.

12

These attributes include:

BACKGROUND=uriBGCOLOR=colorTEXT=colorLINK=colorALINK=colorVLINK=color

The BACKGROUND attribute when assigneda URI (reference to an image) will use thatimage as the background to the webpage.

<BODYBACKGROUND=“images/tile.gif”>

For example in the above code the tile.gifimage which is in the images directory will beused as the background. The image will betiled onto the page.

The BGCOLOR tag allows you toassign a background color to the page,whilst the VLINK (visited link), ALINK(access link) and LINK (link) attributesallow you to assign colors to HTMLlinks in the page which vary.

Possible image colors are:

It should be noted that color can beexpressed anywhere in HTML as eitherthe word i.e. “Red” or the hexadecimalstring which reflects the amount of red,green and blue in the color.

Its not uncommon to see somethinglike:

<BODY BGCOLOR=“#ff00ff”>

Remember to choose colors wisely.

Tables in HTML

Tables are probably the most importantaspect of HTML these days, because theyhelp web page designers lay out the objectsof a page in a much more orderly fashion.

There has always been debate as to which isbetter - Frames or Table.

Ultimately the choice is yours.

13

Tables in HTML have the followingcomposition. Table

Row

Cell

In HTML we can create tables by using the<TABLE> tag which is paired.

We can control the look and feel of a table byusing a number of attributes.

Some of these attributes include.

– WIDTH=lenghtDefine the width of the table in pixels

– BORDER=pixelsDefine the border around the table - it is aspecified number of pixels thick.

– ALIGN=valWhere val is center, left, right. This defines thealignment of the table on the page.

– BGCOLOR=colorWill set the background color of the table.

– CELLSPACING=lengthCELLPADDING=lengthDefine the spacing between cells of atable and the spacing of data within cells.

Now that we can define a table, how dowe add tables and columns to it.

The tag <TR> is used to define a row.The HTML specification allows us tocontrol attributes of this.

<TABLE><TR>

// define a row of the table</TR>

</TABLE>

Once you define a row, then you need topopulate it with Cells of data.

The tag <TD> is a paired tag which allows usto define cells of data in the table.

<TABLE><TR>

<TD> Apple </TD><TD> Excellent </TD>

</TR></TABLE>

In addition to this you can define severalattributes to cells - experiment with them tosee what they do.

– ROWSPAN=NumberHow many rows does the cell span.

– COLSPAN=NumberHow many columns in the table should the cellspan.

– WIDTH=PixelsWhat is the width of the cell in pixels.

– HEIGHT=PixelsWhat is the height of the cell in pixels.

14

– BGCOLOR=colorWhat is the background color of the cell.

It is perfectly reasonable to have anumber of attributes defined and usedhere.

In addition you may wish to control thealignment of data.

Refer the the HTML standard for moreinformation.

Forms and HTML

Forms are used to add an element ofinteractivity to a website.

They are usually used to let a user ofthe site send back information.

The form is typically processed by aprogram.

You can create a form by using the tag<FORM>.

This tag is a paired tag so it has a</FORM> as well.

Anything that appears in betweenthese two tags which requires inputmay be sent to a server for processing.

The <FORM> tag describes what to do withthe data entered on a HTML form.

The typical syntax of a form tag is:

<FORM action=“URL” method=“post | get”>

. . .</FORM>

The argument in the form explain thetechnique either POST or GET used to sendthe form to the server. Normally it is POST(we will talk more about this when we do CGIprogramming).

The action argument describes whatweb script (URL) to invoke when thesubmit button is pressed.

An example is:

<FORM action=“http://www.uow.edu.au/~dfs/cgi-bin/mailme.cgi” method=“post”>. . .</FORM>

Once you define a form and how it is tobehave when used, you now need todescribe the layout of the form.

A form is made of fields, buttons etc.

Elements of a form are defined byusing the <INPUT> tag.

15

The <INPUT> tag has the following attributes:

– TYPE=“text” | “password” | “checkbox” | “radio” |“submit” | “reset” | “image” name=“String” checkedvalue=“String” size=n maxlenght=n src=“URL”

We can define elements as being either textfields, password fields, checkboxes or radiobuttons. We can also define them as submit orreset button (which you have seen before).

In addition to this we can define how big the inputfield is to be (size), its maximum length(maxlenght) and whether or not it is checked(works well on buttons and check boxes).

If you want you can have drop down menuswith enumerated options. This is done byusing

<select name=“string”>. . .</select>

The options you can select from aregenerated by using:

<option value=“string” [selected]>...</option>

An example would be:

Select you location:<select name=“country”>

<option value=“US” selected><option value=“Italy”><option value=“Australia”>

</select>

This would be in a form of some kind.

A sample form may look like:

<HTML><HEAD>

<TITLE> Feedback Form </TITLE></HEAD><BODY>

<H2 align=“center”> Visitor Feedback </H2><BR><FORM action=“http://www.xyz.com.au/cgi-bin/guest.cgi” method=“post”><P ALIGN=“left”> Your Name:<INPUT TYPE=“text” NAME=“real” MAXLENGTH=32 SIZE=16><P ALIGN=“left”> Your Email Address:<INPUT TYPE=“text” NAME=“email” MAXLENGTH=32 SIZE=16><P ALIGN=“left”>Select your location:<SELECT NAME=“country”>

<OPTION VALUE=“US” selected><OPTION VALUE=“Italy”><OPTION VALUE=“Australia”>

</SELECT><P>Comments:<BR><TEXTAREA NAME=“comments” ROWS=5 COLS=35>Your comment goes here....</TEXTAREA><P ALIGN=“center”><INPUT TYPE=“submit” NAME=“feedback” value=“submit”></FORM>

</BODY></HTML>

In the previous example, the pagewould be rendered on the screen.

When the Submit button is pressed thecontents of the page is sent to a scriptfor processing.

Server Technologies University of Wollongong 2004 - Week1 Notes

Documents

Transcript of Server Technologies University of Wollongong 2004 - Week1 Notes