You will work with the HTML file provided below to code additional page features and functionality. By the end of the assignment, your site will have the following new things:

Home Page

HTML:

Head section fully coded with title, charset, meta tags, and comments

New image added to the home page

Links that include external, internal (navigation), and at least one link applied to an image

Working navigation between the two pages: home and contact

Contact page

Newly-created "contact" page with

a welcome message

a mailto tag

a list

and a character-entity reference

Head section fully coded with title (unique to this page), charset, meta tags, and comments

Matching header and navigation elements to the home page

Either page

Attributes: class, id, and at least one more attribute type that you will use to apply a specific CSS style

Text alignment style

Inline and embedded styles are both used (these will add something extra beyond the external CSS document for just the home page).

Kerning or tracking (letter-spacing or word-spacing)you can choose which

Borders

Margins

Padding

Color including transparency

Pseudo class or element, such as rollovers (hover)

Files provided:

roadway logo

roadway site: file:///F:/CIS155/StartFile/home.htm

roadway code:

/* New Perspectives on HTML and CSS BoC Baseline Style Sheet for Roadways Site

Author: Sam Canthill DO NOT MODIFY THIS CODE

Filename: rw.css

*/

/* Display HTML5 structural elements as blocks */

header, section, nav { display: block; }

/* Body styles */

body { width: 80%; min-width: 900px; max-width: 900px; font-family: Verdana, Geneva, sans-serif; margin-left: auto; margin-right: auto; }

/* Site Navigation Styles */

nav#siteNav { float: left; width: 15%; margin-right: 40px; }

nav#siteNav ul { list-style-type: none; padding-left: 0px; margin-left: 30px; font-size: 1em; }

nav#siteNav a { text-decoration: none; color: rgb(0,128,0); }

nav#siteNav a:hover { text-decoration: overline underline; }

nav#siteNav li.newTopic { margin: 10px 0px 10px -20px; }

/* Header Styles */

header { float: left; border-bottom: 2px solid rgb(0,128,0); width: 75%; }

/* Main Section Styles */

section#main { float: left; width: 75%; }

section#main h2 { font-size: 1.9em; letter-spacing: .25em; }

Assignment Steps:

There are 4 steps to this assignment. The steps are laid out logically, and they emulate how developers typically work. Scan the step headings below to become familiar with how the assignment progresses.

Refer to the site report checklist, and read the entire assignment before you begin working on it. Many of the tasks have you creating your own page ideas and content, which means you need to think through the tasks and plan on how the pages will look. When ready to begin, start at the top and work your way through step-by-step.

Step 1 - Create your site roots

Step 2 - Code the home page according to requirements (see checklist)

Step 3 - Plan and create a new "contact" page according to requirements (see checklist)

Step 4 - Finish coding for the site (see checklist)

Use the check list below to work through the tasks.

Check if Done	Task	Where in the code is it found (line number or other indication) use NA if not applicable
?	Add the appropriate doctype for HTML5 to the beginning of the home.htm file (above the opening html element).
Head Section for home.html:
?	Add comments to the document head describing the documents content and containing your name and the date.
?	Set the character set of the document to UTF-8.
?	Add an appropriate page title to the document head.
?	Create three meta name elements for description, keywords, and author. You can make up the content for these elements.
Body section for home.html:
?	Add an image somewhere within the main section of the page. Create a hyperlink out of the image that takes you either to an external link or perhaps to another page of the site that you have not yet developed. The link has to work, so however you go with it, be sure it loads a working page. If its an internal link to another page on the site, that page doesnt have to be coded yet, but it needs to exist as a file in the site root, so keep that in mind.
?	Choose a word or group of words within the to create an external hyperlink. Research someplace on the web that would be appropriate for your hyperlink to go. For example, you might find something pertaining to Fall River Pass that would work well. Create an external hyperlink using that accordingly. Make is so that the link opens in a new browser tab or window. Test your link to make sure it works.
Newly created contact page:
?	Create a brand new HTML page from scratch that you will name: contact.html. Here are the page requirements:
?	Make sure that the new page has the basic structure of an HTML page that includes the HTML, Head, and Body elements properly indented, and it has the proper doctype for an HTML5 page.
?	Repeat the 4 steps above that pertain to the Head Section of home.html be sure to change content, such as comments, title, and meta elements, where needed to reflect your new page appropriately.
?	Link your new contact.html file to the same css document (rw.css) as what the home page (home.html) uses.
?	In the body, duplicate the same header and navigation that occurs on the home page--here is how: In your text editor, refer to the home page, and copy all of the HTML code from the nav down to just the end of the header. That is about 24 lines or so of code. Paste this into your new document just below the opening body tag.
?	Be sure to properly indent your lines of code to correctly reflect the nested environment.
?	Check that the new pages layout is the same as the home pagethe header and navigation should both appear the same on both pages. Fix any errors, and ask for help as needed.
?	Create a new element below the header element that contains a welcoming message, which you will write, for how to contact the Roadways people. This page should include nested in the section:
?	A heading element (use h1, h2, or h3)
?	A paragraph with the message content
?	A list (this can be a ul, an ol, or a dl)
?	A mailto tag that points to your own student email address
?	Code at least one character entity reference or encoding number somewhere on the contact page.
?	Navigation - In both of the HTML documents (home.html and contact.html), create hyperlinks in the navigation that point the "Home" menu item to the home.html page and the Contact Me menu item to your new contact.html page (both pages should have the hyperlinks coded, even though it means the links are pointing to themselves; i.e., the home page will show the hyperlink to the home page and the contact page; and the contact page will also show the hyperlink to the home page and the contact page). Both hyperlinks should work the same.
For both of your coded pages, find a way to incorporate and apply the following things:
HTML:
?	Attributes: add a class or an id that you will use to apply a specific CSS style
CSS:
?	Create a new CSS style sheet, which you will name rwstyles.css
?	Link your new style sheet to both html documents (place the link statement under the rw.css link statement)
Add the following styles to one or more HTML elements in either the home or the contacts pages. Make comments in your code and in this report where the styles are applied.
?	Contextual selectors (a selector based on two or more elements that point to a specific nested element). An example of this might be: section p (here, the p is the selected element, and only paragraphs that are nested in a section will be styled). Create a selector that uses context to ensure only those elements are styled.
?	Attribute selectors** (see Canvas for more information)
?	At least one pseudo-class or pseudo-element (pseudo-classes and -elements are found beginning on page 145 of your text. Realize that hover is one such example of this.)
Here are the styles you will apply specific to the three types of selectors above
?	Borders
?	Margins
?	Padding
?	Color including transparency
Final coding considerations:
?	So far, all styles are in the new CSS external style sheet. Now, you will use the two styles below, and make one of them an inline style and the other one an embedded style -- put a comment in your HTML where these occur so that it is clear for grading purposes
?	Text alignment style
?	Kerning or tracking (letter-spacing or word-spacing)you can choose which
?	Be sure that your code is structured and formatted to properly reflect the nested environment.

Travelling the Scenic Byways of the World