COS10011/60004/60007 Creating Web Applications Lab 2 - 2015

Lab 2 Mercury, Firefox Developer Plugins,

Validators and Intro to HTML
Labs / Tutorials:
Every Lab / Tutorial from this week will have some assessment activities.
Assessment activities can consist of:
1. Completion of a closed-book on-line Blackboard quiz on previous lecture(s)
and Lab(s). (Remember: This will usually be the first thing to do in a lab session)
2. Assessment of Lab Exercises. Exercises marked with an asterisk * are
assessable and contribute to your final grade. These should be completed in the
scheduled Lab, or if you are unable to complete the tasks in the Lab, then you may
arrange to have them checked off by your tutor in the following Lab. For example, the
assessable tasks in this weeks labs should be checked off in this tute.
3. Demonstration of your Assignment work as scheduled for your Tutorials

Aims:
To set up your user account on the universities Apache webserver
To create HTML 5 pages using text editor
To develop an understanding of the client-server environment and the processes we will be using
throughout the semester to load pages to the Apache webserver and view them through a browser
Install and use a web developer extension in Firefox
Validate HTML pages locally on your computer and on a server
View the HTTP headers for Web requests and responses and understand their content.
Gain the skills and knowledge towards completing Assignment 1.

Task 1: Set up and test your user account on Mercury

Step 1: Log onto the web server and set up your account.

See the Quick Start Guide, or the Setting Up Your Mercury Account under Server Access Guides
on Blackboard side menu and read through the instructions.

A web account is needed to load, test and run your web pages (HTML, CSS, JS) and server-side scripts (PHP).
For this purpose every student is assigned a Web server account on the Apache server at
mercury.ict.swin.edu.au.

Using PuTTY, a SSH (Secure Shell) client, (available on most lab computers under
Start>Programs>Network), log in to the mercury web server with username, s<your 7-digit or 10-digit
Swinburne ID>, (for example, s1234567) and your password, which is initially set as your date of birth in
<ddmmyy> format.

For first time users, the web server, mercury, will ask you to change this password, and when successful, it will
then trigger a script that will setup and configure your user space on the server.

Step 2: Connect to the web server to transfer files.

Go to Transferring files to/from Mercury under Server Access Guides on Blackboard and read
through the instructions.

To test our Web pages, we need to first place them on the mercury server. We can use WinSCP a Secure
Copy and Paste file transfer client (available on all lab computers under Start>Programs>Network).
Lab 2 - Version: July 2015 Page 1 of 8
COS10011/60004/60007 Creating Web Applications Lab 2 - 2015

Using WinSCP, log in to the web server, mercury, with the host name mercury.ict.swin.edu.au, user name
s<your 7-digit Swinburne ID> and current password.

After a successful log in, you will be able to see the unit folder. It will be named according to your unit either
cos10011 (for undergraduates) or cos60004 or cos60007 (for postgraduates). Note that the cos is in
lower case as unix filenames are case sensitive.

In the following instructions substitute <your_unit_code> with the appropriate code.

Step 3: Create a folder (directory) to contain your web pages.
It is recommended that you create a folder for each web project. For instance, you should create a folder named
lab02 to contain all files that you will be developing for this lab.

Note that Apache web servers, such as mercury, are case sensitive, thus it is recommended that you use
lower case and avoid non-alphanumeric characters such as space when naming folders.

Using WinSCP, create a folder lab02 under ~/<your_unit_code>/www/htdocs folder in mercury.

Step 4: Create a web page for testing.
Use a code text editor on your local computer (e.g. NotePad++) to create a file named myhtml.htm

HINT: Code editors like NotePad++ highlight the different parts of your text according to what language is
being used. For example, in an HTML file NotePad++ highlights element tags blue, attribute names red,
comments green, content text black, and so on. The editor knows what language the file is being written in by
looking at the extension e.g. .htm, .js, .c , .php, etc. These colours not only make the text easier to read, but
can help you pick up keyword spelling errors and other syntax errors.
So you need to save the file with its extension before you start typing.

Type the following code into your newly saved file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Creating Web Applications" />
<meta name="keywords" content="HTML, CSS, JavaScript" />
<meta name="author" content="put your name here" />
<title>My First HTML 5 webpage</title>
</head>
<body>
<!-- First HTML5 Example -->
<h1>Creating Web Applications - Lab 2</h1>
<p>Can I use .htm instead of .html as my file extension?<br />
<em> Yes.</em></p>
<p>Are folder and file names case sensitive on Apache servers?<br />
<em> Yes.</em> <strong>Best to use only lower case.</strong></p>
</body>
</html>

Step 5: Transfer your web pages to the web server.

Go to Transferring files to/from Mercury under Server Access Guides on Blackboard and read
through the instructions.

To be able to run your Web pages, you must place the files into ~/<your_unit_code>/www/htdocs folder on
mercury or any subfolders you create.

Using WinSCP, drag and drop (or copy and paste) your file myhtml.htm from your local machine to the
htdocs/lab02 folder on the server.

Lab 2 - Version: July 2015 Page 2 of 8

COS10011/60004/60007 Creating Web Applications Lab 2 - 2015
Step 6: Test and view web pages.

Go to Viewing files in Mercury under Server Access Guides on Blackboard and read through the
instructions.
To view the pages through http, use Firefox and type in the following address,
http://mercury.ict.swin.edu.au/<your_unit_code>/<username>/<folder/.../filename>
The <username> is s< your 7-digit or 10-digit Swinburne ID >. For example
http://mercury.ict.swin.edu.au/<your_unit_code>/s1234567/lab02/myhtml.htm
When the authorization request dialog pops up, use your SIMS username and password to confirm access.

Note that the path to the htdocs folder on the server is mapped to a different path in the URL.
Notes:
Step 1 is only done once. Unless you need to reset your mercury password.
Steps 2 and 3 are performed every time you start a HTML/CSS/JavaScript development session.
Steps 4 to 6 are performed repeatedly in sequence when creating, testing and debugging your
HTML/CSS/JavaScript and PHP codes.
Problems:
For access problems, such as forgotten password or invalid account, contact the ITS Service Desk on
9214 5000 or ServiceDesk@swin.edu.au and inform them of your situation.
For problems in completing steps 2 to 6:
o refer to the Server Access Guides on Blackboard
o ask your tutor for help
o or visit the programming help desk
o or go to the online guides at https://csg.ict.swin.edu.au/livecsg/help/Doc_mercury_student

Lab 2 - Version: July 2015 Page 3 of 8

COS10011/60004/60007 Creating Web Applications Lab 2 - 2015

Task 2*: Create and validate your own Web page

* THIS EXERCISE WILL BE ASSESSED BY YOUR TUTOR
Following the steps in Task 1, create the following Web page with your name , student id, course and
units set out as shown. You may need to consult the lecture notes for some of the elements.
Make sure you include a document declaration and all required elements in the header including
<title> and meta-tags for charset, description, author.
Load the page onto Mercury and display it in your browser.

Title tag

Load your page on

to the mercury
server
Heading 1

Horizontal rule
(dont forget to
make it XML
Heading 2
compliant!)

Paragraphs with
inline <strong>
elements

Heading 2

Unordered
list

Open up the W3.org validator web page at https://validator.w3.org/nu/

Select the File Upload option from the drop down list box as shown below.
Upload the local version of the HTML file you created .
Check for errors by clicking the Check button and fix them.

Once your page is validated show it to your tutor so your work can be marked
off as complete.

Lab 2 - Version: July 2015 Page 4 of 8

COS10011/60004/60007 Creating Web Applications Lab 2 - 2015

Task 4*: More Validation

* THIS EXERCISE WILL BE ASSESSED BY YOUR TUTOR

Copy the file bad_html.html from Blackboard.

Load it into Firefox
Right click on the page and select View Source. Some of the errors in the HTML should be highlighted
in Red.
Load the file into the Nu HTML checker and view the errors and warnings.
Fix the errors and warnings and then save the file.

Note: Validators may not identify all the errors in the file, and they may not correctly identify the line
where the error occurs. Errors can be cascading. For instance, forgetting to close a tag on one line
means the parser does not correctly understand subsequent line of markup.

Once you have fixed the errors on your copy of the file, show it to your tutor so
your work can be marked off as complete.

Lab 2 - Version: July 2015 Page 5 of 8

COS10011/60004/60007 Creating Web Applications Lab 2 - 2015

-
Firefox is open source software, and many useful Add-ons/ Extensions can be installed into the basic
browser. In particular, the Web Developer Extension tools are useful.
Note: On your lab computer, the Web Developer addin / toolbar might already be installed .
On the other hand, you might have to install this extension each time you log-in.
To Install this Add-on / Extension:
Start Firefox
Select Tools / Add-ons from the top menubar,
Select Get Add-ons link from within the Add-ons dialogue box
Search for Web Developer in the Search all add-ons
Scroll down the search results page to find Web Developer by Chris Pederick.
Click on it, then install it
Once loaded, Firefox needs to be closed and restarted, for the Add-on to be visible.
Note: As we have already seen, most recent versions of Firefox already have the different
built-in Tools/Web Developer menu item.
Chris Pedericks will show up as Tools/Web Developer Extensions
You can also get to this extension directly at:
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
Once installed, the Web Developer Add-on, is accessed from the Web Developer Extension toolbar,
and through drop-down menu items.

Explore this Web Developer Extension toolbar, especially Tools which provides links:
to the W3C HTML validators; to the W3C CSS validator; and to some useful Web Accessibility tools.
[Note: You can also Edit Tools changing the validator options, and adding more tools yourself.
In particular, it is useful to change the default CSS validator to CSS3 and show warnings, but we will
come to this later.]
To hide the toolbar, use View/Toolbars, and deselect/select Web Developer Toolbar.
To Disable this Add-on/Extension, select Tools/Add-ons from the Firefox menubar, select Extensions, find
the Web Developer Add-on and select Disable or Options or Remove.
To Uninstall an Add-on/Extension, select Tools/Add-ons from the Firefox menubar, select Extensions and
for the particular Add-on, then select Remove.

Other Extensions / Add-ons that you might find useful:

https://addons.mozilla.org/firefox/collections/mozilla/webdeveloper/
HTML Validator. https://addons.mozilla.org/firefox/addon/html-validator/
When you use View / Page Source in Firefox, the code can be validated.
Live HTTP Headers. https://addons.mozilla.org/firefox/addon/live-http-headers/
When you use Tools /Page Info in Firefox, the HTTP Headers sent can be seen.
Firebug https://addons.mozilla.org/firefox/addon/firebug/
Edit, debug, and monitor CSS, HTML, JavaScript live and more.
DOM Inspector https://addons.mozilla.org/firefox/addon/dom-inspector-6622/
Enables your to inspect and edit the live DOM of a webpage

Lab 2 - Version: July 2015 Page 6 of 8

COS10011/60004/60007 Creating Web Applications Lab 2 - 2015
Task 5: HTTP headers
Pair up with the person next to you in the Lab to do this task..
1. Install Add-on LiveHTTPHeaders
Following the same general procedure for installing Firefox add-ons in the tutorial last week,
install the LiveHTTPHeaders tool https://addons.mozilla.org/firefox/addon/live-http-headers/
(Home page http://livehttpheaders.mozdev.org/ ).
You will need to re-start Firefox to activate the Add-on.
2. Viewing Headers
The LiveHTTPHeaders icon should now appear in Tools/ Page Info and under
Tools / LiveHTTPHeaders. Click on the Tools / LiveHTTPHeaders icon and in the new Window that
appears select the Headers tab. Make sure the Capture checkbox is selected.

Refresh / reload the Web page you created in Task 4. Note the request and response headers that appear at the
top of the page. (You should also be able to see the Response Headers under Tools / Page Info.)
3. Request Header
1. What version of HTTP is the listed in the header? ..
2. What HTTP method is being used? ..
3. What type of user agent sent the request? ..
4. What MIME types will this user-agent accept?
.....
5. What MIME types does this user-agent prefer? (Hint: Look at q=0.x entries in the header and search
Google on HTTP header relative quality factor.
..
6. What do you think the entry Connection: keep alive means?
.
4. Response Headers
1. What HTTP response code was returned? .
2. What does this code mean? ..
3. What type of server generated the response?
4. What do you think the entry Connection: close means?
.
5. Click the Clear button on the LiveHTTPHeaders window. In the Firefox URL box, change the
capitalisation of the requested file to Outline.htm and resend. What HTTP response code is returned
now? What does this mean?
..
5. Try other websites
Load http://swin.edu.au and follow the trail as the page is redirected to www.swin.edu.au and then
www.swinburne.edu.au
6. Try using Tools / Web Developer / Web Console / Network
Load www.swinburne.edu.au and again you should see the list of resources that make up this web page.
Select the main html page in this list, and a new panel will open to the right. Open the Headers tab and
view the HTTP request and response headers. Open the Timings tab and you can see more details about
the time for the DNS resolution, connecting, sending, waiting, and receiving. Also see the Cookies tab.
Similarly, for other resources that make up this web page, you can view the headers, timings, and so on.

Lab 2 - Version: July 2015 Page 7 of 8