Description

Purpose

• Implement a Header, Footer, Top Menu, and Side Menu using DIVS or Tables
• Add Images, Audio and Video to a web page
• Upload your website to a Web server

• This lab must be handed in:
Assessment

• This Lab is worth 2% of your total course mark.
Estimated Time

• This Lab is estimated to take 3 hours.

This is only an estimate of the time required to complete this Lab. I would encourage you to work at your own pace and if at all possible obtain a laptop so that you can work on your assignments from anywhere.

The following chapters of Fundamentals of Web Development will be useful in completing this exercise:

• Chapter 3
• Chapter 4
• Chapter 5
• Chapter 7

Lab Supplies

To complete this lab you will require the following lab supplies:

• Textbook: Fundamentals of Web Development
• Eclipse, Notepad (or other text editor, or IDE)
• FileZilla (or other FTP client)
Summary of Tasks

1. Common Look and Feel
2. Create an EXTERNAL CSS file
3. Create Index.html
4. Create Multimedia.html
5. Upload your website to a webserver
6. View your webpage using a web browser
7. Submit Assignment Link on Blackboard
Task 1

Before getting started with the following tasks review the ‘Common Look and Feel’ video provided on Blackboard (under: Course Content → Extra Materials). Using the knowledge gained in these materials create a ‘Common Look and Feel’ to be used on every page of your website.

Each page in your web site should have at least the following identical common elements: Header, Footer, Top Menu and Side Menu. You must implement Design Template 1 (Course Content → Extra Materials → Common Look and Feel →Design Template 1.png) on every page of your website.

• Header o Lab Number, Course Name, Course Number
• Top Menu
o Links to Lab1, Lab2, Lab3
• Side Menu o Links to both Index.html and Multimedia.html
• Footer o Student Number, First Name, Last Name, Email Address

The Content Area in each page will be different depending on the purpose of the page (described in Task 3 and Task 4).
Task 2

Create a file called StyleSheet.css that will modify your site in the following ways:

• Set the font of your website to Times New Roman
• Set the size of your font 14px
• Set the background color of your web pages to white color
• Make all the content of your web page align to the center
• Modify the body tag o Remove the margin and padding from the body
• Modify the header1 tag o Set the color of every h1 tag to blue
• Modify the header2 tag o Set the color of every h2 tag to green
• Modify the paragraph tag o Set the padding of the paragraph tag to 20px
• Create an ID called ‘header’ o Create CSS to style the header section of your webpage
• Create an ID called ‘footer’ o Create CSS to style the footer section of your webpage
• Create an ID called ‘top-menu’ o Create CSS to style the top menu section of your webpage
• Create an ID called ‘side-menu’ o Create CSS to style the side menu section of your webpage
• Create an ID called ‘content’ o Create CSS to style the content section of your webpage
Task 3

Create a new web page named ‘index.html’ that implements the ‘Design Template 1’ for ‘Common Look and Feel’. This web page needs to contain the following questions and corresponding answers:
(i) What are different parts of a CSS style rule?
(ii) What is the difference between a relative and absolute measure unit in CSS? Why are relative units preferred over absolute units in CSS?
(iii) What are an element selector and grouped element selector in CSS? Provide an example of each.
(iv) What are class selectors in CSS? What are id selectors in CSS?
(v) What are contextual selectors in CSS?

Use only a HTML ordered-list to display the questions and your answers. The questions and answers should be written in h1 and h2 tags respectively.

Provide an external link to the CSS file ‘StyleSheet.css’ to use the theme you created in Task 2.
Task 4

Create a page named ‘Multimedia.html’ that implements the ‘Design Template 1’ for ‘Common Look and Feel’. This page needs to contain:

• 4 images in a 2×2 table
• At least one embedded audio file
• At least one hyperlink to an audio file
• At least one embedded video file
• At least one hyperlink to a video file

Provide an external link to the CSS file ‘StyleSheet.css’ to use the theme you created in Task 2.
Task 5

Upload your website to a webserver. Use an FTP client to connect to the webserver.

Once you connect to the webserver using an FTP client, create a directory called ‘/Lab4’ under ‘/public_html/CST8238’ directory. Once your personal directory has been created navigate to that new directory. Add your index.html file to this location. (Using FileZilla simply drag the index.html file into your folder)

We recommend the FTP client Filezilla. The program is provided for free (and open source for those who are interested in such things) by the Mozilla Foundation; the makers of Firefox and Thunderbird.

For more information on using FileZilla please navigate to the following material in
Blackboard: Course Content → Extra Material → FileZilla Guide (Video)
Task 6
View your website using a web browser. Open a web browser and navigate to the following web address:

http://web-server_domain_name/CST8238/Lab4/<filename>

For example, the web address to my page is:

http://rejaul.com/CST8238/Lab4/index.html

Where ‘rejaul.com’ is the domain name of the Web server, ‘CST8238/Lab4’ is the name of the directory I created in the Web server under ‘/public_html’ directory using FTP client and ‘index.html’ is the web page I created for this lab.
Task 7

Once you have confirmed that your webpage is available online, you are ready to hand in your lab.

To hand in your lab go to Blackboard and navigate to Course Content → Labs and click on ‘Lab 4 – CSS and Multimedia’ link.

Under “Assignment Materials”, in the Submission text box write out the following Information:

• Student Number
• First Name
• Last Name
• The URL, or hyperlink, prepared in Task 6

Finally, once the Submission and Comments section are complete, click the ‘Submit’ button to send the lab to your professor.

IMPORTANT NOTE:
If the URL, or hyperlink, does not direct the professor to the lab you will receive a ZERO for the lab assignment.

IMPORTANT NOTE: