You are to create two HTML pages with a common look and feel. These two pages will be uploaded to the course webserver (opentech.durhamcollege.org) using WinSCP. 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.
For this assignment you should try to find a web resource that has a list and explains each of the XHTML 1.0 supported tags. As an example, here is a link to the W3Schools tag library (w3schools is an excellent website). Feel free to try and find your own.
The HTML pages must conform to the W3C XHTML 1.0 Transitional specification, as checked by the W3C validator.
You can create your own images, or simply "borrow" them from the Web or other sources (e.g. stock image CD, scan, framegrabber). If you use someone else's work, please acknowledge the source somewhere on the page (HINT: HTML comments would work well for this). Please avoid using images with the copyright symbol on them.
The due date for Lab 1 is found on the Important Dates page and in DC Connect. This means that you must have published your website into your development folder on the opentech server and have submitted a clickable HTML link to your website on the opentech server in the Lab 1 assessment dropbox comment section in DC Connect (see "Submission" section).
You will be given a mark out of twenty (20). You will be told of the reasons for any loss of marks, these points are to be used as constructive criticism (i.e. fix the problems as a practice for the term tests).
-
Create two HTML pages, one which will act as your site's home page (this file should be named index.html) and the other will be named lab1.html. Each page is to incorporate a "logo" (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.
-
Be sure to include appropriate (i.e. relevant)
<title>s and<h1>header tags on each page. Additionally, for each page you are to include HTML comments(<!-- 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. -
You must set the background-colour (i.e.
bgcolorattribute) and text color (i.e.textattribute) on the<body>tag for each page. Set them to the same colour on both pages (this will give your pages a consistent look and feel, making them a site).
<body style="background=#0000; color=#fff;">
<!-- Page Content -->
</body>-
Each page (i.e. index.html and lab1.html) should have a relative hypertext link to the other at the top of the page (it can be placed underneath the
<h1>tag created above). -
Any images used on your pages must exist in an images sub-directory, relative to your working directory.
.webd2201/
├─ index.html
├─ lab1.html
├─ images/
└─ background.jpg-
In addition to the title, logo image, header and link, your index.html page must satisfy the following:
-
Include a detailed paragraph explaining what the purpose of the site is (i.e. it was created as course requirement for webd2201). The course code should be a link to the course web server http://opentech.durhamcollege.org/pufferd/webd2201. 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 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).
-
-
In addition to the title, your logo image, header and link, your lab1.html page must satisfy the following:
-
Implement all the HTML elements that will create the page output displayed below. N.B. Each section should have an HTML header (
<h3>tags) as a title to the section, and paragraph (<p>tags) explaining which tags and/or special characters were used. -
Additional link to html special characters
-
For Einstein's Relativity formula you have to use the superscript (<sup>...</sup>) and italic (<i>...</i>) tags. It is wrapped in heading 2(<h2>...</h2>)ags to make it larger and bolder. NOTE: be careful with proper nesting to ensure the page passes the XHTML validatior. The line is bolded using > the bold (<b>...</b>) tags.
DESCRIPTION HEADING
DESCRIPTION HEADING
#include <iostream.h>
int main()
{
cout << "Hello World!" << endl;
return 0;
}
DESCRIPTION HEADING
DESCRIPTION HEADING
- Place key in the ignition
- Depress the brake pedal
- Turn the ignition key
- Re-new passport
- Convert currency
- Print out reservations & itineraries
- Verify vaccinations are up-to-date
- As Linux is a UNIX-like operating system, and therefore case-sensitive. Students are recommended to make ALL file names and extensions LOWER-CASE. This makes debugging/development easier.
-
The pages must pass the W3C validator with a doctype of XHTML 1.0 Transitional. Submit your page for validation and keep editing the HTML source until you get "No errors found". BE SURE TO ADD THE XHTML VALIDATION IMAGE AT THE BOTTOM (but still in the
<body>section) OF EACH PAGE -
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)
| Topic | Description | Weighting |
|---|---|---|
| Submission | ||
| Submission | -2 files not published into your /var/www/html/webd2201/userid main folder (instead in /home/userid folder). -2 no clickable link/URL submitted in DC Connect Lab 1 assignment drop box -1 link in DC Connect Lab 1 assignment drop box not clickable -1 link in DC Connect Lab 1 assignment drop box does not go to your website |
/2 |
| Deliverable Specific Outcomes | ||
| Comments/Description paragraphs | Each page is to have
<!-- HTML Comments -->
giving your name, the file name, the date the file was created and a brief description of the page's purpose.Example: <!--
Name: Bill Smith
File: lab1.html
Date: 23 May 2019
This is the Lab 1 page for
Web Development - Fundamentals (WEBD2201)
-->Additionally, each page is to have a description paragraph, giving a detailed description of what the page is doing (i.e. what concepts it implements and/or functionality it demonstrates). -4 no HTML comments or description paragraphs on any pages -1 per page missing HTML comment or top level description paragraph on each page. -0.5 per paragraph that was missing/light for EACH example/demonstration on the lab1.html page. -1 per incident where the description paragraph is light on content. |
/4 |
| Links/Images | -1 images not placed in an images sub-directory relative to your lastnamefirstinitial folder -1 no clickable Durham logo -0.5 the Durham College logo is not a clickable link -0.5 per image or link that is broken (not relative address, case-sensitivity issues, files not published onto the server). -1 no link from lab1.html to index.html -1 no link from index.html to lab1.html -1 the words "WEBD2201" were not included in the index.html paragraph -0.5 the word "WEBD2201" is not a link to http://opentech.durhamcollege.org/pufferd/webd2201 in the index.html paragraph -1 the words "Durham College" were not included in the index.html paragraph -0.5 the words "Durham College" are not a link to college website in paragraph on index.html |
/6 |
| lab1.html Examples | You must replicate/use all of the red highlighted tags and special characters (as shown in Specific Requirements section). This is in addition to the description paragraphs described above. Pay attention to detail, and do not miss any of the tags. -0.5 per tag/special character that is missing. |
-7 (-0.5 per incident, maximum 14 incidents) |
| General Page Requirements | -1 bgcolor and text attributes not set on <body> tag(s) |
/1 |
| Other Penalties | ||
| XHTML Valid | -1 no clickable XHTML image provided on lab1.html page. -2 <!DOCTYPE> in index.html was not Transitional (used HTML 4.01 instead) -1 exactly one XHTML error on index.html page. -1 exactly one XHTML error on lab1.html page. -2 more than one XHTML error on average on index.html and lab1.html pages. (NOTE: maximum 2 mark penalty for this lab ref. XHTML validation) |
/2 |
| Late Submission | -0 lab submitted on time -5 lab submitted late but within 72 hours of due date -20 lab not submitted within 72 hours of due date |
/5 |
-
W3schools - is an excellent website that covers how to create websites. There are tutorials and reference libraries for several web technologies, but for this course stufdents should utilize the HTML, CSS and PHP sections extensively.
-
TutorialsPoint - very similar to w3schools, it also includes tutorials and reference libraries for several web technologies. Feel free to check both out and choose the website developments resources that works best for you.
-
Browser Supported Colours - provides the list of 140 colour names that are supported by all of the major browsers.
-
W3C XHTML Validator - is the World Wide Web Consortium's (w3c) official HTML/XHTML validator tool. All assignment pages throughout the course will need to be validated to the XHTML Transitional or Strict standard (depending on the assignment). Students will have to use this tool to satisfy the requirement.
Please include the following lines at the VERY TOP of your .html files, this is what is required by the w3c validator to know which standard you are validating your pages to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<!-- Page Content -->
</body>
</html>Publish your pages on the opentech server and submit the URL of your index page as a clickable link in the comment section of the "Assignment 1" drop box in DC Connect. If you do not submit something into DC Connect, your professor will assume you did not complete the assignment, and the late penalties will apply (including 0/20 if the link was not submitted within the 72 hours late period). The onus is on you to ensure your lab instructor knows that you have work to be assessed.
::: warning Do not mail or attach your files themselves into DC Connect. They must be published onto the opentech server. :::