Lab 1 - Basic Web Pages

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.

General

You are to create two HTML pages with a common look and feel (meaning it is obvious they go together by using the same colors, fonts, and styling). These two pages will be uploaded to the course web-server (opentech.durhamcollege.org) using FTP in a folder called Lab01. The pages must be visible from the server with a Web browser before they can be marked. Pages that are stored only on the local workstation disk drive cannot be viewed from any other system, and therefore cannot be marked (receiving a mark of 0).

Requirements

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

Be uploaded to the correct location (i.e. a "Lab01" folder on your public space on the course server)
The HTML pages must conform to the W3C XHTML 1.0 Transitional specification, as checked by the W3C validator.
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.
All file names and extensions should be in lower-case, making debugging much easier.

Tasks

Create three HTML pages:
- one which will act as your spaces's home page (this file should be named index.html) and will include your name, a brief paragraph about you, and an image of your favorite meme. Note this page will change throughout the term, so don't be too fancy. In an unordered list, provide a link to the Lab 1 homepage created below. You will update this list as each lab is completed.
- one file, called index.html that will be in a folder named "Lab01" that will act as the Lab 1 homepage
- and the other will be named lab1.html that will also be placed inside the Lab01 folder.
Each page is to incorporate a "logo" of your own choosing (the same image on both, but do not use the Durham College logo as your website's logo) in the top-left corner of the page. The logo should be an appropriate size (not larger than 200x200 pixels) but does not need to be square.
Be sure to include appropriate (i.e. relevant) <title> and <h1> header tags on each page. Additionally, for each page you are to include HTML comments () that minimally must state your name, the file name, the date the page was created and a brief description of the page's purpose.
Any images used on your pages must exist in an images sub-directory, relative to your working directory.
Additionally:
- Include a detailed paragraph explaining what the purpose of the site is (i.e. it was created as course requirement for inft1206). The course code should be a link to the course web server (i.e. http://www.techprof.ca/courses/INFT1206/). NOTE: EACH and EVERY web page you create in this course will REQUIRE a description paragraph.
- Additionally, in the paragraph mention "Durham College", these words should become a link to the Durham College main website (Durham College).
- Finally, you are to incorporate the Durham College logo as an image on your index.html page, this image should also act as a link to the Durham College website (this can be achieved by placing <a> tags around an <img> element on your page).
Footer:
- Add the xhtml validation image at the bottom (but still in the <body> section) of each page under a horizontal rule <HR>.
- Add anchor links to root folder of your space, your lab home page, and the lab1.html file to the footer area under the same horizontal rule.
- Add your name to the footer area of all pages
Your lab1.html page should contain 6 distinct sections (in addition to the details provided above).
1. A paragraph stating Newton's Second Law of Motion followed by the equation. You can express the division on a singe line using /.
2. A Currency Conversion section, with an introduction paragraph describing the relationship between 5 different currencies and their values with respect to the US Dollar. Then provide a direct numeric comparison of those currencies using the appropriate currency symbol.
  For example:
3. A code snippet from a small (no more than 10-15 lines) of code from your intro to programming course, and a description of what the code does. Note: the code should look like monospace code while the paragraph does not.
4. A chemistry equation that includes at least 3 elements.
  Example: 2H₂ + O₂ = 2H₂O + heat. There must be at least one element must contain at least 2 atoms.
5. An ordered list of instructions to complete a task of your choosing. There must be at least 3 steps. Choose something that interests you, be creative.
6. An unordered list of the ingredients to your favorite recipe with the quantities. At least one ingredient quantity should be a fraction (eg. ½ tablespoon sugar). There must be at least 4 ingredients.
Each section should be separated by horizontal rules, a title using a level 3 heading tag, and a description paragraph/sentence.

Ultimately it should look something like this, but with the section described above included.
lab 1 samples

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.