Peter McIntyre

Lab 3 is due on Wednesday, July 17, 2013, at 7:00am ET.

.

Lab 3 – HTML and the HTML DOM

For this Lab 3, you have the opportunity to demonstrate the correct use of HTML, and use the HTML DOM for simple tasks.

You will create a three-page personal portfolio web site. The three pages will be:

1. index.html – Your home page
2. about.html – information about yourself, i.e. a brief (student/work-appropriate) bio
3. contact.html – contact information (again, student/work-appropriate)

.

All three pages will be very plain. As noted above, the goal of this Lab 3 is to demonstrate the correct use of HTML.

You DO NOT have to use CSS for this Lab 3. In fact, you MUST NOT use CSS. (If you do, your grade will suffer.) 

.

Getting started on Lab 3

On your computer, create a folder named ‘lab3’. In that folder, you will create three HTML pages. You will also add a small photo (a head shot) of yourself. Finally, you will create a short JavaScript program.

Later, when submitting Lab 3 for grading, you will compress/zip the ‘lab3’ folder and its contents.

.

Specifications to be followed on all three pages

Use these containers, top to bottom:

• h1 or h2
• nav – for the menu of links to the web site’s pages
• div with an id of main – to hold the page’s content
• footer – preceded by a thematic break

Follow the coding standards, guidelines, and recommendations that you have learned about in class and as part of the reference/resource documentation.

.

Specification for index.html

Example (click to see it full size):

Features:

• the page identifies and introduces you
• links to all pages in the web site
• maybe lists your interests and/or talents

The page includes (at least) these HTML elements:

• the elements that are common to all pages (as noted above)
• p
• em
• strong
• ul and li (for example, show a list of your interests or talents)

.

Specification for about.html

Example (click to see it full size):

Features:

• information about you
• as a personal bio/resume/CV page, use it to promote yourself
• your current courses
• some programming code

The page includes (at least) these HTML elements:

• the elements that are common to all pages (as noted above)
• img (show a small photo of yourself, no bigger than 300 px wide and 200 px tall)
• ol and li (for example, show a list of the courses you’re in)
• pre (paste your JavaScript code from Lab 2 task 1, the regular expressions)

.

Specification for contact.html

Example (click to see it full size):

Features:

• your contact info, in an HTML table

The page includes (at least) these HTML elements:

• the elements that are common to all pages (as noted above)
• table and its related elements (tbody, tr, th, td)
• br
• blockquote
• a (add an attribute to force the link to your web site to open in a new tab/window)

.

Working with the HTML Document Object Model

You will create a short JavaScript program that will enable you to complete three tasks on the “about.html” page:

1. add more items to the list
2. add a timestamped message to the footer
3. output – to the Web Console – a simple list of all elements that are in your “main” div element

.

Getting started

While viewing “about.html” in Firefox, open a Scratchpad window. Immediately save the Scratchpad with the name “about.js”, and save it in the ‘lab3’ folder (along with your other web site assets).

As you perform the following coding tasks, you will create a function for each task. That will enable you to control your scope, and to easily call the method by invoking the function.

.

Add more items to the list (on “about.html”) 

Create a function that will hold this task’s code.

The function will add new items to the list for BTP100, BTB110, and BTO120. The new items can be plain text only. In other words, they do NOT include hyperlinks. Format their text in a way that’s similar to the other items on the list.

(How do you get a reference to the list?)

Then, test your code by adding an invocation statement.

.

Add timestamped message to the footer 

Create a function that will hold this task’s code.

The function will get the current date and time, and add a new p element to the footer with the date and time.

(How do you get a reference to the footer?)

The format of the date and time should use the current locale setting on your computer, and be similar to the following (although yours may look a bit different):

This page was generated on July 15, 2013 at 3:42:36 PM

Then, test your code by adding an invocation statement.

.

Output a list of elements to the Web Console

Create a function that will hold this task’s code.

The function will loop through the child nodes of your “main” div element, and simply output – to the Web Console – the name of the elements. (Hint/tip – the collection of child nodes will have a ‘length’ property.)

(How do you get a reference to your “main” div?)

Then, test your code by adding an invocation statement.

.

How to submit your work

Save your “lab3” folder in one single zip/compressed file (.zip or .7z).

Use My.Seneca (Blackboard), and locate the “Lab 3…” item in the “Assignments” area. Upload your work before the due date and time. (The link will disappear after that date/time.)

.

.

.

.

.