lab4

Lab Assignment 4: Advanced HTML

Due: Monday October 6th at 11:30PM

Marks: 50 marks

Learning Outcomes: At the end of this lab assignment you will be able to create fancier web

pages using HTML more advanced features: tables, forms and JavaScript.

NOTE: Please follow the instructions carefully; you do not want to lose marks because you did not

follow the lab instructions. This assignment is to be done in groups of 2 people. Don't leave this

lab to the last minute; it will take time to finish it.

Prerequisites

Before you begin this lab you need to study carefully the notes on “Advanced HTML” posted in

D2L.

Task 1: Tables (10 marks)

Tables are boxes, divided into rows and columns that help you organize and display content on

your web page. If the information you want to display is too complicated for a list you need to use

a table.

1. Google “tables in HTML” go to the w3schools link and read carefully the description for

creation of tables.

2. Create a new html document called schedule.html in folder Lab4 in drive M, use a plain text

editor such as Nodepad++. Copy and paste the HTML code that I have posted in D2L. Test

the code in Chrome and read the code, make sure you understand each sentence.

3. Modify the code in schedule.html to create a table with your own schedule. The table should

display the activities related to COMP152 that you perform each week: reading your book,

making summaries, attending lectures, solving quizzes, and solving lab assignments.

Include the time that you spend reading and trying your assignments before coming to the

lab. The table should have at least 7 columns, from Sunday to Saturday and at least 5

different activities. Tables can be quite tricky to get working, do small changes at a time

and test them in Chrome before moving forward.

4. Modify the caption of your table. Use a meaningful caption message.

Task 2: Forms (10 marks)

Forms are elements used to allow the user to input information. Forms are basically collections of

data entry fields like checkboxes, radio buttons, text boxes, etc., that ask for information from

visitors to a page. When the visitor presses a "submit" button, all of that information is collected

and sent to a web server, where it can be used by a program for some purpose. In fact, any time a

web page asks you for information, it likely uses an HTML form.

1. Google “forms in HTML” go to the w3schools link and read carefully the description for

creation of forms.

2. Create a new html document called contactme.html in folder Lab4 in drive M, use a plain

text editor such as Nodepad++. Copy and paste the HTML code that I have posted in D2L.

Test the code in Chrome and read the code, make sure you understand each sentence.

1. Modify the contact form in HTML with the proper text (labels) to the users. Add an input

field for the users email. In the end, your form should contain 4 data entries, or places to

input answers: name, email address, comment, and rate.

2. While you work, keep the following in mind:

a. The form begins with a <form> tag with the appropriate attributes and ends with

</form>. If you forget either one, or do not put your form components between

them, then your form will not work correctly (and may not show up at all).

b. Start small, and ignore most of the optional attributes. Once you have a working

form, you can experiment adding more input fields if you want or adding text,

changing size, default values, etc.

c. Be sure to add a Submit button. When this button is pushed, all of the data in every

data entry field will be sent to you. If you don't include a Submit button, your form

will not do anything.

d. Add the action attribute. For this assignment, do not put anything in the action

attribute (i.e. action=””)

Task 3: Navigational Menu (5 marks)

Navigational menus are commonly created using lists. Since the order of the list items doesn't

matter for creating a menu, an unordered list can be used.

1. Create a new html document called lab4.html in folder Lab4 in drive M, use a plain text

editor such as Nodepad++. Copy and paste the HTML code that I have posted in D2L. Test

the code in Chrome and read the code, make sure you understand each sentence. Do not

add any CSS rules

2. Google “HTML <nav>”, go to the w3schools link and read carefully the description of

navigational elements in HTML. Copy the <nav> element to the schedule.html and the

contactme.html files and check the result in Chrome.

3. Make sure you add a picture to display in the lab4.html Web page.

Task 4: Website Structure in HTML5 (5 marks)

HTML5 has few elements that help organize the structure of a webpage such as <header>,

<section>, <nav>, and <footer>.

1. Google “HTML <section>”, go to the w3schools link and read carefully the description of

sections in HTML. Change the <div> for <section> in the code in lab4.html. Notice that

we are not having a “contact me” section but rather a link to another web page called

contactme.html. Check the output of your Webpage in Chrome.

2. You should have at least 3 long paragraphs in lab4.html file. If you are having difficulties

writing a description for each paragraph use dummy text from: http://www.lipsum.com

3. Google “HTML <header>”, go to the w3schools link and read carefully the description of

the header element in HTML. Add a header to your document, the header should contain

the <nav> element and its children elements. Check the result in Chrome.

4. Google “HTML <footer>”, go to the w3schools link and read carefully the description of the

footer element in HTML. Add a footer element to your document, the footer should contain

only the last paragraph with the date and copyright of the website. Check the result in

Chrome.

5. Google “HTML Symbol Entities”, go to the w3schools link and read carefully the description.

Add a symbol for the copyright of the website in the footer section. Check the result in

Chrome.

6. Google “HTML classes”, go to the w3schools link and read carefully the description of

classes in HTML. Use the class=”navigation” instead of an id=”navigation”. Note: you can

have many elements with the same class name but you should not have more than one id

element with the same name.

7. Repeat steps 3 to 6 for schedule.html and for contactme.html files. You will not see

anything different in the results in Chrome, but you have created your first Web Site in

HTML5, the most recent HTML version.

Task 5: Javascript (10 marks)

Some pages won't let you submit a form until you've filled in required fields; some do actual

computation. Some cause new windows to appear on top of the original, or behind it, or off to the

side (though sadly most such windows only display irritating advertisements). Many of these

effects are achieved by short programs ("scripts") that are written in a programming language called Javascript and included in the HTML text of a web page.

1. Google “HTML Javascript” go to the w3schools link and read carefully the description for

using JavaScript from HTML.

2. Go to your schedule.html document in folder Lab4 in drive M. Add an alert that says “This

schedule is subject to changes, some assignments require up to 5 hours to be completed”

when the page is first loaded. Add one or more meaningful sentences to the alert message

that you just created describing what you need to do to succeed in COMP152.

3. Go to your contactme.html document in folder Lab4 in drive M. Create an alert with a

message to the visitor that filled out the form. In your alert message you should use the

name of the visitor, something like “Thanks for your request Jane, I will contact you within

the next 48 hours”.

Submission

Now that you've created your web page, you have to make it available to others. For this

assignment, you will need a file transfer program (FTP) such as FileZilla. In the labs you can find it under START >> Programs >> Computing FileZilla. Using the following information to log on:

hostname: studentlabs.cs.camosun.bc.ca

username: ask me in person or send me an email if you have not done it yet

port: 22

password: ask me in person or send me an email if you have not done it yet.

File Protocol: FTP

After you log on, you will see a folder in the right panel called public_html. Double click on

public_html to enter that directory. This is where all your web files should be transferred to when you are done creating the pages.

1. Copy your newly created files into your public_html directory. You should be able to just

drag and drop the files from left to right.

2. To view your web site in a browser, type into the address bar the following URL:

http://studentlabs.cs.camosun.bc.ca/~username/lab4.html where username is the

username I gave you.

3. When you are sure that your pages are displaying correctly, create a file called Lab4.txt

that contains the names and C number of the team members and add URL and 5 things

that you learned in this lab. Add 3 things you are still finding difficult to understand.

Compress the text file and upload the Lab4.zip to the Dropbox in D2L.

NOTE the forward slashes (/). Remember, Linux systems are case sensitive (so is your username

and password). While working on your web pages, save your work often on your machine. Transfer

the files to the web server to check your work. IF YOU FIND ERRORS on your website and want to

fix them, fix them on your local computer and copy them back to the web server. You may have to

change the permissions on your file to let people see it. If your browser tells you that you don't have permission to access the file, right click on the file and make sure the R box is checked.

Send your URL http://studentlabs.cs.camosun.bc.ca/~username/lab4.html on an email to a friend

to view your page and check all the links from his or her computer. You will have to make sure that

any image or sound files that you added are readable. You might also find it interesting and even

instructive to view your web page with more than one browser; it's sometimes surprising how even simple things look different.

OVERALL ASSESSMENT (10 marks)

Ten marks are set aside for overall assessment. The assessment proceeds as follows:

8 - 10 marks given for strong evidence of superior grasp of concepts. The assignment is completed

in an exemplary manner.

4 - 7 marks given for evidence of reasonable understanding of the concepts. The assignment is correctly completed.

1 - 3 marks given for evidence of some understanding of the concepts. Three quarters of the assignment is correctly completed.

Final notes:

If you are having problems, come talk to me in the lab, before or after a class or in my office. If

there are special circumstances (illness, work or family issues) I need to hear from you before the

deadline if you need an exception on the due date. I will not do this more than one or two times for any one student. No Lab assignment will be accepted if it is more than one week late.

Keep copies your completed assignments on your computer (or Drive M: at the college) until the

end of the course. As a backup, I suggest that you keep a copy of your files on a memory stick or e-mail copies to yourself. In the event that I may lose a file, you should have a backup available.

You instructor and the staff at the Computer Science Consultants Office (Help Desk) are there to

help you. They can't "do" the assignment for you, but they can help out with application problems,

printer problems, understanding questions, saving documents, uploading and moving files, etc. Ask for help.