Archive of Department of Computing



[pic]

Department of Computing

Faculty of

Engineering & Physical Sciences

Guildford, Surrey GU2 7XH UK

Web Technologies

Workshop

March 2008

© Georgios Exarchakos 2008

g.exarchakos@surrey.ac.uk

Contents

1 Photo Album 1

1.1 Photos Album 1

2 Web Page Index 4

2.1 index.html 4

2.2 Classes and IDs on Tags 6

2.2.1 Modify index.html 6

2.2.2 Modify photos.html 7

2.3 Create layout.css 7

2.4 Link the CSS 9

3 The 7 Ancient Wonders 10

3.1 Aims 10

3.2 Problem Description 10

3.3 Problem Solving 11

3.3.1 Giza thumbnail 12

3.3.2 Descriptions Array 12

3.3.3 onThumbnailOver 14

3.3.4 Link functionality.js 15

3.3.5 Thumbnail IDs 15

3.3.6 Detect Mouse Over 16

3.3.7 onThumbnailClick 16

3.3.8 Detect Mouse Clicks 19

3.3.9 Reverse Border Colour 19

3.3.10 Detect Mouse Out 20

3.4 Link with index.html 20

The purpose of this session is to guide you through the design and building of three web pages using a variety of Web Technologies: HTML, CSS and Javascript. The first web page, Photos Album, is a web album of nice photos and the second is an index that links to the other two pages you will build in this workshop. The last one is a historical-geographical tutorial-game based on The Ancient Seven Wonders. While the first and second web page share the same layout defined by a single CSS, the last one has its own stylesheet.

We start with the Photo Album (first exercise), we continue with the index and their common layout (second exercise) and finally The 7 Ancient Wonders is the third exercise.

Before you start you have to copy all the code to a folder in your local machine.

1. Create a folder in your local machine (i.e. [path_to_here]/webtechnologies)

2. Copy all the content of the folder [CD_DRIVE]/src to the [path_to_here]/webtechnologies.

3. From now on, you will be working on the [path_to_here]/webtechnologies folder. In this document, all the references to other folders and files are relative to this folder.

Photo Album

The focus of this exercise is the use of HTML to create albums of photos. Its aim is to provide an introduction to basic HTML programming via a step-by-step guide on how:

▪ to set the title of a web page to appear on the browser’s window/tab title bar

▪ to add a title in the web page body to appear on the top of the page

▪ to add a photo and modify its size

All the files you will create for this exercise must be saved in the folder Album.

1 Photos Album

The Photos Album will have a title and six thumbnails of photos arranged on a 3x3 grid. Each thumbnail will be a link to the larger original-sized photo. You will find them in the folders album/smallimages and album/images, respectively.

1. Start a Notepad file and type the basic HTML template as the following:

2. Add a title to the page by inserting between the 3rd and 4th line of the template the title tag. This title will appear in the browser’s window or tab title bar:

Photo Album

3. Add a heading to appear in top of the webpage. To do that, use the div tag in the beginning of the body:

Photo Album

My Photo Web Album

4. Add the thumbnail smallimages/bluebutterfly.jpg below the heading using the img tag and specifying the src attribute’s value equal to the relative path of the thumbnail Remember that the relative path starts from the current folder which is the album folder. Set the alt attribute (a text to be displayed when the thumbnail is not found) and a width to make all the thumbnails of the same width. If the height attribute is not specified, the browser resizes the thumbnail to the requested width but keeping the initial ratio height-over-width the same.

Photo Album

My Photo Web Album

5. Convert the thumbnail into a link to a full-size image by enclosing the thumbnail’s img tag into a a tag. Specify the reference href of the a tag as the images/bluebutterfly.jpg image:

Photo Album

My Photo Web Album

6. Do the same for all the following photos:

|Image Thumbnail |Full-size Image |

|./smallimages/lonetree.jpg |./images/lonetree.jpg |

|./smallimages/rioantirio.jpg |./images/rioantirio.jpg |

|./smallimages/sunsetoverclouds.jpg |./images/sunsetoverclouds.jpg |

|./smallimages/supernatural.jpg |./images/supernatural.jpg |

|./smallimages/zante.jpg |./images/zante.jpg |

7. Save the file in the album folder as photos.html (album/photos.html).

Web Page Index

Though this exercise consists of the editing of both HTML and CSS, its focus is on CSS. The following instructions will guide you on the creation of a HTML web page which is an index (index.html) to other pages and a CSS (layout.css) file that will be used to layout the album/photos.html and this index. From this step-by-step guide you will be introduced in how:

▪ to assign a class or id to HTML tags

▪ to refer to a name, class or id of a HTML tag from the CSS file

▪ to set the style of a tag, class or id including the background colour, margins, borders and fonts.

▪ to link the CSS file with the HTML files

The actions to be taken are listed below:

▪ index.html: Create the index.html file which links to the page you created in first exercise and the one you will create in the third one.

▪ Classes and IDs on tags: Assign classes and ids to the tags of index.html and album/photos.html.

▪ Create layout.css: Create the stylesheet layout.css.

▪ Link the CSS: link the layout.css with index.html and album/photos.html.

1 index.html

The contents page has two sections, one for Photos Album and another one for Wonders (the next exercise). Each section links to the pages created in each exercise. The first section entitled Albums Index has one link to Photo Album web pages. The second section entitled Ancient Wonders Game has a single link to The 7 Ancient Wonders web page to be created.

1. Start a new file in Notepad and write the basic HTML template as above

2. Set its title inside the head tag as ‘Contents’

Index

3. Add the titles of the two sections enclosing a phrase in a div tag for each section. The title of the first section is given below. Do the same for the section two:

Index

Albums Index

4. Below each section’s title add the links and a description phrase for each link. For instance, the phrase Photo Album links to the album/photos.html page and its description is ‘my web album of photos’. Leave the link to The 7 Ancient Wonders since you have not done the third exercise yet.

Index

Albums Index

Photos Album : my web album of photos

5. Make a bulleted list of all the links per section using the ul and li tags. To do that, enclose each link of a section in a li tag and all the li tags in a ul tag as following:

Index

Albums Index

< href="album/photos.html">Photos Album : my web album of photos

6. Save the file in the parent folder of the album folder as index.html. Remember this is the relative path; so it will be: [path_to_here]/webtechnologies/index.html.

2 Classes and IDs on Tags

Any stylesheet has to refer to the tag names, classes or ids of the HTML tags to be able to layout the HTML file. Therefore, all the two HTML files (index.html and album/photos.html) that will use the same CSS file need modifications. If a tag appears only once in the HTML file then the CSS can refer to it with its name. If a set of tags, not necessarily with the same name, need the same style then they have to be assigned the same class to which the CSS refers. Finally, if there are multiple tags with the same name but one needs different style then an id has to be assigned to it so that the CSS can uniquely refer to it.

1 Modify index.html

1. Open the index.html using the Notepad.

2. Inside the body tag, enclose all its content in a new div tag:

Index

Albums Index

< href="album/photos.html">Photo Album : my web album of photos

3. Assign the id name content to this div, the class name heading to the div of each section’s title and the class name links to all the a tags. Note that the div with the id content is the only one in the page; this is why the id instead of class is used. These ids and classes are to be used by the CSS to layout the page:

Contents

Albums Index

< href="album/photos.html">Photo Album : my web album of photos

4. Save and close the index.html file.

2 Modify photos.html

As the index.html, the album/photos.html will use the same CSS file, layout.css.

1. Open in Notepad the file album/photos.html.

2. Enclose the content of the body in a div tag and assign to it the id content.

3. Assign the class heading to the title of the page.

4. Assign the class component to every object tag.

5. Save and close the file.

3 Create layout.css

The web pages, created so far, have not any specific layout. We can improve the design by putting all the content of each page in a column of fixed width and placing it in the centre of the browser window. Their title has to be horizontally aligned in the centre of the column with a line at the bottom of the title.

1. Open a new file in Notepad and edit it as following:

2. Make the body tag to have a light grey (red: 200, green: 200, blue: 200) background and all the content in it horizontally aligned in the centre:

body {

background: rgb(200,200,200);

text-align: center;

}

3. The div with id="content" is to be used for making a centred column with all the content of page.

body {

background: rgb(200,200,200);

text-align: center;

}

#content {

}

a. Set the width of the content to 800 pixel:

…

#content {

width: 800px;

}

b. Make a border around of content 1-pixel thick of solid line and grey colour (red: 128, green: 128, blue: 128):

…

#content {

width: 800px;

border: 1px solid rgb(128,128,128);

}

c. Set the left and right margins of the content to auto-configurable so that the column always remains in the centre of the browser window:

…

#content {

max-width: 800px;

border: 1px solid rgb(128,128,128);

margin-left: auto;

margin-right: auto;

}

d. Set a white background to the content

e. Set the left and right margins of the component class equals to 10 pixels:

…

.component {

margin-left: 10px;

/* do the same for the right margin */

}

4. Set the style of the class heading (few hints are provided):

a. Bold fonts

font-weight: bold;

b. Fonts of size 15 points

font-size: 15pt;

c. Text horizontally aligned in the centre

text-align: center;

d. 10 pixels margin all around the heading except for the top which is 20 pixels. (Hint: set the margin to 10px and then the margin-top to 20px)

e. A dashed 1-pixel thick grey (red: 150, green: 150, blue: 150) bottom border (Hint: use dashed instead of solid and border-bottom instead of border)

5. Set the style of the class links (few hints are provided)

a. Italic fonts

font-style: italic;

b. Remove all the decoration of links automatically set by the browser

text-decoration: none;

6. Save and close the file in the parent folder of Photo Album as layout.css. That is: [path_to_here]/webtechnologies/layout.css.

4 Link the CSS

1. Open again in Notepad the file index.html and edit the head tag.

2. Link the stylesheet as defined in layout.css with the index.html. Replace the comment with:

3. Save and close the index.html

4. Do the same with album/photos.html.

5. Double-click to open the index.html in a browser to check the result.

The 7 Ancient Wonders

With this exercise, you will focus primarily on editing and using Javascript files. Not only does it introduce you to Javascript but it gives a historical and geographical tutorial. It is about a game of locating the 7 man-made Wonders of Antiquity on a Google Map.

1 Aims

The exercise aims to give you a good introduction to the Dynamic HTML programming which combines HTML, Javascript and CSS together in a dynamic web page. The following instructions are a step-by-step guide to HTML and Javascript on how:

▪ HTML:

o to link a Javascript to a HTML file

o a HTML tag can catch a triggered event (e.g. mouse clicks or if mouse is in/out an area)

o to execute a function of a linked Javascript file i.e. when an event is caught

▪ Javascript:

o to create Javascript arrays

o to create Javascript functions

o to apply basic operations on strings

o to use basic for loops and if-then-else statements

o a Javascript refer to HTML elements using their id

2 Problem Description

A web page contains a map of the Earth and a number of thumbnails illustrating the wonders of the ancient world as listed by Herodotus, the Greek historian of the 5th century B.C. Clicking on a thumbnail a draggable marker appears at a random place on the map. Dragging the marker your score increases (or decreases) as it gets closer (or farther) to the correct location of the monument. There are two scores that get modified as a marker moves; the partial score illustrates how accurate to the correct location is the last marker that was added or moved and the total score shows the total accuracy of all the markers. As the mouse goes over a thumbnail its border’s colour changes (from white to red=230, green=150, blue=80) and the illustrated monument’s description and larger image are displayed in an area created for this purpose replacing any previous description and image.

The web page that is to be built involves the use of a Google Map, a photo album almost similar to the one of the first exercise but also the dynamic display of images and text on a specific area and the dynamic insertion of draggable markers on the map. The page is organised in two main areas one under the other horizontally aligned in the centre of the browser window/tab. The upper area is the ‘map area’ and contains a title, the partial and total scores and the Google Map. The lower area is the contains two sub-areas: the details and thumbnail list areas. The details sub-area displays the larger image and description of the monument illustrated in the last thumbnail that detected the mouse cursor over itself. The thumbnail list sub-area is the thumbnail album of the monuments and is located below the details sub-area. See the image below to see the basic design of the page:

[pic]

Figure 1: The basic design of the 7 Ancient Wonders web page

3 Problem Solving

The files that are required are images and source code. Most of the files are already provided but you need to create one Javascript from scratch and modify a HTML.

▪ The images of the monuments are provided in the folder wonders/images.

▪ The HTML file is most of it provided and saved as wonders/game.html. There is one thumbnail missing, the Giza pyramids.

▪ Its stylesheet is saved as wonders/style/layout.css and uses some background images from the same folder. No need to modify it.

▪ A Javascript file, already provided, to initiate and handle the map’s functionality saved as wonders/gmap.js. This file automatically modifies the scores as appropriately and provides a function that will be used in the Javascript file you will create. No need to modify it.

▪ A Javascript file to make the page’s content dynamic and give commands to the map as the images are being clicked. This will be edited from scratch by you and saved as wonders/functionality.js.

Therefore, you need to edit wonders/game.html and create wonders/functionality.js. They will be used throughout the remaining tutorial, thus, open the first one and create and save the second one in Notepad. Leave them open since editing has to go in parallel on both. Briefly, the actions that need to be taken are the following:

▪ Giza thumbnail: Add the thumbnail of Giza monument to the thumbnail list of the game.html.

▪ Descriptions Array: Create a Javascript array of descriptions, one of each monument

▪ onThumbnailOver: Create a Javascript function to be executed when the mouse cursor goes over a thumbnail. This function replaces the image and description of the details sub-area with the ones of that thumbnail using the descriptions array.

▪ Link functionality.js: Link the new Javascript file functionality.js to the game.html

▪ Thumbnail IDs: Set the thumbnail ids to ‘IMG?’, where the ‘?’ is the position of the thumbnail (1, 2, …)

▪ Detect Mouse Over: Make the thumbnails able to detect when the mouse is over them and execute the ‘onThumbnailOver’ function.

▪ onThumbnailClick: Create a function to be executed on mouse clicks on thumbnails. Thus function places a marker at a random place in the map only if the thumbnail has not been clicked before.

▪ Detect Mouse Clicks: Make the thumbnails able to detect mouse clicks on them and execute the ‘onThumbnailClick’ function.

▪ Reverse Border Colour: The border of a thumbnail has to revert to its original colour when the mouse cursor goes out of its area.

▪ Detect Mouse Out: Make the thumbnails able to detect when the mouse cursor goes out of their area and execute the ‘onThumbnailOut’ function.

1 Giza thumbnail

1. Go to the wonders/game.html file in Notepad

2. Search for a div tag towards the end of the file that contains a number of img tags. This is the div that implements the thumbnail list area and where you have to add the missing monument (Pyramids of Giza).

3. Insert a new image into that div (./images/gisa.jpg), below the last existing thumbnail.

4. Save but do not close the file.

2 Descriptions Array

1. Go to the wonders/functionality.js in Notepad

2. Create an array of descriptions to be used by the function as:

var descriptions = new Array();

3. Add the description for the first and second monuments

descriptions[0] = "Name: Hanging Gardens of BabylonLocation: Ancient Babylon, Mesopotamia (near actual Baghdad, Iraq)History: Built around 600 B.C. by Nebuchadnezzar II to please his Median wife who loved the mountainous green areas of her country that the deserted Babylon didn't have. It was a 350-feet building and home of many trees, flowers, lawns, plants, fountains, pools and small water falls on a series of terraces. They were destroyed by an earthquake after 100 B.C.The first to have written about the Gardens was a Chaldean priest, Berossus, in 4th century B.C. and later by Greek historians such as Strabo and Diodorus.";

descriptions[1] = "Name: Statue of Zeus at OlympiaLocation: Ancient Olympia, GreeceHistory: Carved around 432 B.C. by the renowned classical sculptor Phidias. It was an ivory and accented with gold plating statue of 40 feet height situated in a temple. The god Zeus was seated on a cedarwood throne decorated with ivory, gold and precious stones holding on his right hand Nike, goddess of victory, and on his left hand a sceptre on which an eagle perched. Some argue it was destroyed with the temple in 5th century B.C. while others that is was transferred to Constantinople where it was destroyed in a great fire.";

4. Do the same for the remaining 5 monuments using the following descriptions:

|3. |Name: Temple of Ephesian ArtemisLocation: Ancient Greek city-state Ephesus (near actual |

|Temp|Izmir, Turkey).History: Built around 550 B.C. under Achaemenid dynasty of the Persian Empire by |

|le |the sculptors Polyclitus, Pheidias, Cresilas and Phradmon. The temple was offered to goddess Artemis and was |

|of |destroyed tree times (356 B.C. by Herostratus, 262 B.C. by Goths and 401 A.D. by a mob led by St. John |

|Ephe|Chrysostom). Finally, its stones where used in other buildings and even in Hagia Sophia Christianity temple in|

|sian|Constantinople. According to the Roman author Pliny it was three times bigger than Parthenon of Athenian |

|Arte|Acropolis, Greece. |

|mis | |

|4. |Name: Colossus of RhodesLocation: Greek island of Rhodes, GreeceHistory: |

|Colo|Built around 280 B.C. by Chares of Lindos. It was 100 feet tall that the Rhodians offered to their patron god,|

|ssus|Helios, after their successful defence of the city from Demetrius Poliorcetes' siege. The interior was made of|

|of |stone columns and the skin of bronze and it stood near harbour entrance or on the breakwater of the harbour. |

|Rhod|Though some old illustrations have the statue with one foot at each side of the harbour’s entrance, it seems |

|es |to be rather a misconception. An earthquake in 226 B.C. destroyed the statue thus terminating its 54-year |

| |life. |

|5. |Name: The Mausoleum at HalicarnassusLocation: Ancient Greek city Halicarnassus (actual |

|Hali|Bodrum, Turkey).History: a 135-foot tomb built on 350 B.C. for a Persian satrap Mausolus, his wife|

|carn|and sister and designed by Greek architects Satyrus and Pythius. Its base was a stone platform at one third of|

|assu|its height on top of which there was the tomb surrounded by walls decorated with statues guarding the tomb and|

|s |nine columns per side to support its pyramid-like roof. It was intact for sixteen centuries but a series of |

|Maus|earthquakes destroyed the upper two thirds. Its stones were finally used for fortifications of a castle built |

|oleu|by Knights of St John of Malta in 15th century A.D. |

|m | |

|6. |Name: Pharos of AlexandriaLocation: Alexandria, EgyptHistory: Built around |

|Phar|247 B.C. this 450-foot lighthouse at the port of Alexandria was the third tallest man-made building after the |

|os |two great pyramids for many centuries. Initially, it served as a navigational landmark but on the 1st century |

|of |A.D. the Romans converted it to a lighthouse with fire and a system of reflective mirrors. Ptolemy Soter, |

|Alex|general of Alexander the Great and first Hellenistic ruler of Egypt, initiated the construction of Pharos. It |

|andr|is made of three blocks of light stone: a square, an octagonal and on top a circular. Two earthquakes in 1303 |

|ia |A.D. and 1323 A.D. destroyed the monument the stones of which were later used for fortifications of a castle |

| |built there in 1480 A.D. |

|7. |Name: Great Pyramid of GizaLocation: Ancient necropolis of Memphis (near actual Cairo, |

|Grea|Egypt)History: Built on 2560 B.C. to be used as a tomb for pharaoh Khufu. Its 481-foot height was |

|t |only surpassed in 19th century A.D. It is constructed with 2 million blocks of stone with each side of |

|Pyra|751-foot length facing one side of the compass. The sarcophagus placed in the centre of the pyramid is made of|

|mid |red granite as are the walls of the chamber. The main construction theory involves a straight or spiral ramp |

|of |which was raised with the construction on which workers were pushing the stone blocks from the ground on the |

|Giza|pyramid. |

3 onThumbnailOver

1. Go to the wonders/functionality.js in Notepad

2. Create an empty function named onThumbnailOver that takes one argument, the thumbnail’s id:

function onThumbnailOver(id) {

}

3. Set the border colour of the thumbnail with the given id as rgb(230,150,80).

function onThumbnailOver(id) {

document.getElementById(id).style.borderColor = "rgb(230,150,80)";

}

4. Get the source of the image of the thumbnail with that id:

function onThumbnailOver(id) {

document.getElementById(id).style.borderColor = "rgb(230,150,80)";

source = document.getElementById(id).src;

}

5. Display that image in the details area replacing the previous image there:

function onThumbnailOver(id) {

document.getElementById(id).style.borderColor = "rgb(230,150,80)";

source = document.getElementById(id).src;

document.getElementById("preview").src = source;

}

6. Get the description from the descriptions array that refer to that id and display it in the details area. (Hint: the function substr(number) of the standard Javascript library’s string class returns a substring from the ‘number’ letter of the original string onwards. Thus, is the original string is "IMG1" then the substr(3) returns "1").

function onThumbnailOver(id) {

document.getElementById(id).style.borderColor = "rgb(230,150,80)";

source = document.getElementById(id).src;

document.getElementById("preview").src = source;

document.getElementById("description").innerHTML=descriptions[id.substr(3)-1];

}

7. Save the file wonders/functionality.js

4 Link functionality.js

1. Go to the wonders/game.html in Notepad

2. Insert the following line in the end of head tag:

3. Save the wonders/game.html file.

5 Thumbnail IDs

1. Go to the wonders/game.html in Notepad

2. Go to the thumbnail list towards the end of the file (the div with the id="imagelist") and add the following attribute to the first img tag:

id="IMG1"

3. Do the same for all the img tags in the same div but replacing the ‘IMG1’ with the corresponding id (i.e ‘IMG2’ … ‘IMG7’).

4. Save the wonders/game.html file.

6 Detect Mouse Over

1. Go to the wonders/game.html in Notepad

2. Go to the thumbnail list towards the end of the file (the div with the id="imagelist") and add the following attribute to the first img tag:

onmouseover="onImageMouseOver('IMG1')"

3. Do the same for all the img tags in the same div but replacing the ‘IMG1’ with the corresponding id (i.e ‘IMG2’ … ‘IMG7’).

4. Save the wonders/game.html file.

7 onThumbnailClick

1. Go to the wonders/functionality.js in Notepad

2. Create an empty function named ‘onThumbnailClick’ that takes one argument, the thumbnail’s id:

function onThumbnailClick(id) {

}

This function will be executed every time the user clicks on a thumbnail. It places a marker in the map. To avoid placing multiple markers for each thumbnail, an array of seven cells is required to keep which ones are clicked. Initially all the cells of the array will be 0 but only when a thumbnail is clicked for the first time the corresponding cell in this array becomes 1.

3. Before the function define and initialize the array ‘clicked’.

var clicked = new Array();

for(i=0; i ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download