Lab 2 - Tables

Pre-Lab Preparation

Before starting this lab, it is important that you have installed Putty, FileZilla (or WinSCP), and Visual Studio Code with the associated plugins. You should have successfully connected to the opentech server, changed your password, and navigated to the folder where your website will be uploaded. NO EXCEPTIONS WILL BE MADE TO THIS FOR LAB 2 ONWARDS.

General

You will be creating 2 webpages (index.html and lab2.html) and a css (css/stylesheet.css) for this week, both inside a folder called Lab02 on the opentech server (and inside your local folder as well). Don't forget to add a link on your "My Homepage" to this new lab.

Requirements

For full marks, your submission must meet the following criteria:

• Be uploaded to the correct location (i.e. a "Lab02" folder on your public space on the course server and adding the css folder in the correct location.)
• The HTML pages must pass validation at the W3C validator using HTML5 specification.
• Any "borrowed" images must have a commented acknowledgement included in the source code.
• All files submitted must have a comment header with your name, the file name, the date, and a description of the file. If comment headers are not included, you will receive a mark of 0.
• You must not have copied files from anyone else!

Tasks

In the external css file:

• the page itself has no margins on it
• choose a font of your choice, that is universal to most browsers/computers.
• make the tag selector for table have a border of your choice.
• Set the default colours to ones of your choice, making sure that all content is readable when complete. This website provides you with colour palettes that work well and colours that match. Try it out by clicking "Start Generator" on the homepage.
• any other selectors and declarations required for the other instructions.
• Feel free to explore and try things out here, as long as the basic requirements stated here are completed and at the top of the css file, not buried in the code you added.

In the index.html file:

• include the link to the css file created above. DO NOT use any inline or embedded css for this lab.
• Use a div tag with an id to create a header element for the page. Make the header a different colour than the background and place the words "INFT1206 - Lab 2" within it centered both vertically and horizontally. Choose a font size and font appropriate for a header (your choice). The header should have a minimum height of 80px.
• Use a second div tag that creates a box that is centered below the header and 640 pixels width, with padding and margins set to 20 pixels.
• Inside the above box, create a table that has the layout as per the image below!
  
  Note: The table has 4 columns, 1 header row, and 6 normal rows.
• Inside each of the boxes, make a list of your favorite things (one or two words only) in order of importance, the larger the table cell, the more you like it. Feel free (bonus marks) to adjust the font sizes to match the size of the cell.
• Use a third div tag to add a footer to the page, the same width as the header and the same background colour. The footer should have a minimum height of 80px and padding of at least 10px on all sides.
• Inside the footer div, at a horizontal rule followed by a copyright statement for yourself.
• Also add a link to the lab2.html file in the footer.

In the lab2.html file:

• Repeat the same header and footer as the index.html file using div tags. Make sure you are using shared css between the 2 pages, not rewriting it.
• Add the div tag between the header and footer for the content area, this time the content will be 800 pixels wide with margins of 10px top and bottom, and 0px left and right. The content should have padding of 10px on all sides.
• Add a heading called "My Schedule" to the content.
• Below the heading, you will add a table that recreates your term schedule in calendar format:
  • The header row will be the days of the week, Sunday through Saturday
  • The rows, with a header column, will be the hours of the day, from 8am until 9pm.
  • Add your class schedule to the table (do not worry about the 10 minutes at the start of each class, just put 1-3 for a 1:10-3pm class).
    • You will have to merge cells for 2 or 3 hours classes.
    • Each course class time should be a unique colour, but all classes of the same course are the same colour. It is highly recommended that you choose colours that go together using a palette, rather than making it look like a rainbow!!!
    • Clearly label each class, with the section number i.e. (INFT1206-01, for section 1 of INFT1206)
  • Add, using a different colour, the times you are planning on studying or doing homework outside of class times. All study hours should have the same colour.
  • OPTIONAL: if you work outside of school with a regular weekly schedule, that add those as well with another different colour.
• Lastly, change the footer to have a link back to the index.html page, rather than a link to itself.

Finally

You are encouraged to navigate through your site clicking on all links and looking at all images to make sure that there is nothing broken. Marks are deducted for each incident in which an image or link is broken on your pages.

REPEAT THIS PROCESS after you publish your site to the opentech server.

No direct submissions will be accepted, all submissions must only be a link to your files on the opentech server. Only files uploaded and working on the opentech server will be graded. No exceptions.