COMP1000 2017s1 - Lab 5,6 (Due in week 7) - Web Page Design & Javascript

This lab will be completed over weeks 6 and 7 and is to be demonstrated to your tutor in week 7. The objectives of this lab is to complete the web page design that you started in Lab 04 (Question 1, Lab04) and become familiar with Java Script. The tasks for this lab are outlined below:

Question 1 - Design your website - 25 Marks

In Lab04 (Question1, Lab04), you built the first page of your website, "About Me", a personal biography page. You will build on this page to design a complete personal website. Your site requirements are as follows:

Web Site Requirements

The web page must be at least 3 pages including the "About Me" page. (10 marks)

Each one of the points in the numbered list in the column "What I want to do for fun and growth" must be changed to a hyper-link and clicking on this link should navigate to the corresponding page on your website. e.g., if you had two points in the numbered list such as: 1. Exercise and Health 2. Family Holidays, then clicking on the first link should take you to a page on "Exercise and Health" and clicking on the second link should take you to a page on "Family Holidays"

Requirements for each page:

Each page must have a heading
Add graphic pictures to each page, with at least one graphic picture being a hyperlink
Add at least one media clipping must be added to one of the pages
Each page must have a navigation link to take you to the home page ("About Me")

You must define a consistent look and feel for your website, through the use of CSS style sheets (8 points)
At least one of the pages must demonstrate use of : (7 marks)

HTML DIV tags with associated style sheets to create logical sections of your HTML page
Positioning (Relative/Absolute/Floats) to lay out content/images

The list of required elements from the previous lab (Lab 04) must still be maintained

Show your web page to the lab demonstrator to receive feedback on your progress
COMP1000 2016s1 - Lab Class 5 - Web Page

Question 2 - Getting Familiar with Forms and Javascript (5 marks)

Create a web page that computes BMI (Body Mass Index) using the formula BMI = (Mass in kilograms) / ((Height in metres)²). ( Optionally, this BMI calculator can also be integrated as part of your personal website. For example, for those students building a page on exercise and health, may wish to integrate this BMI calculator as part of their website.)

Use a form with two <input type="text" name="..." size=30> fields, a textarea with 5 rows and 25 cols to display the answer, and a "Go" button. Your page should look like this after the user has typed 81 and 1.8 into the input boxes and clicked the "Go" button:

screen grab of BMI web page

Instructions:

Use NotePad to create a text file called lab5q2.html, and paste the following into your text file.
<!DOCTYPE html> <html> <head> <title> INSERT TITLE HERE REPLACING THIS LINE </title> </head> <body> INSERT BODY HERE </body> </html>
Type a title between <title> and </title> - otherwise nothing needs to be done in the <head> this time.
Your HTML body should start with an <h2> heading ("BMI Calculator"). Then you need your form tag. Since you are not sending anything to a server, all you need is:
```
<form name="form1">
...
</form>
```
In between, where the ... is, you put your text boxes, textarea, and Go button.
Name your first text box - i.e. your <input type="text"...> "mass" and your second one "height", and your <textarea ...> "area1". So,
```
Type your weight in kg <input type="text" name="mass" value=""><br>
```
and similarly for the height box. The <br> tag starts a new line - you may need to insert 2 or 3 more of these to get the interface to look right. You can access what is typed into the mass box by referring to mass.value and what is typed into the height box by referring to height.value
The button is done with <input type=button name="btn1" value="Go" onclick=...>. The ... is discussed in the next step.
To put the result of your calculation into the textarea, your onclick action for the "Go" button should be of the form "area1.value=some mathematical expression". The algebraic expression will involve mass.value and height.value and will calculate the BMI - see the formula in the first sentence of the Question 3 instructions. So it will be:
"area1.value=mass.value/(height.value*height.value)"
Make sure that you're happy that that works OK, producing the right number in the textarea box. For example, if someone weighs 100 kg and is 2 metres high, then their BMI should be 100/(2*2) = 25. Save the Notepad work, open lab6q1.html in your web browser. Test the interface, check, and fix if necessary. When this is OK, put the string 'BMI is ' in front of the BMI value using the string concatenation operator, +. This is explained in the next step.
The BMI calculation produces a number. To put the string 'BMI is ' in front of the number, you put the string and the number together using +. That is, if x is a string and n is a number, then in Javascript, x+n is a string. Putting two (or more) strings of characters together like this is called string concatenation. So + serves as the arithmetic addition operator when both operands are numbers, and also as the string concatenation operator when at least one operand is not a number.
If your output includes the word NaN, this stands for "Not a Number". It signifies that you have tried to perform arithmetic with something that is not a number (e.g. an empty string or a string of alphabetic characters). You may get Infinity of -Infinity if you typed in 0 for the height for example which would have caused your calculation to attempt to divide by 0.