Problem 1

Your boss has asked you to create a template for the new web site.

Learning Outcomes

Demonstrate creativity and problem-solving skills.

Analyze web programs in order to test, debug, and improve them

Create web pages and web programs that use: HTML5, cascading style sheets, dynamic HTML, JavaScript, forms with controls, and Canvas.

Evaluate web pages and web programs to ensure that they use proper coding conventions and documentation.

Step 1. Create the overall HTML structure

Create a Word document and save this to your web site in the homework folder after you have completed both problems.

Gather your images and resources

You will need at least one image that is 960 by 180 and one that is 180 by 100 for the week2-1logo and week2-1banner. In your code youll need to refer to the file types for your images (Use only gif, jpg, and png). Dont spend too much time! You can always go back and play with your images after you code your program.

Create the skeleton code in the head section of the week2-1.html page

Insert the html and head tags, a comment with your name, the page name and date, the title tag, meta tags (including the description and keywords), closing head tag, opening and closing body tags, and closing html tags.

Above the title tag enter this meta tag to set the window to open to the full scale.

Give the page title a descriptive name about your project.

Below the title, insert a link to a style sheet. The style sheet will be located in the css folder. The page will be named week2-1.css.

Note that every time we refer to a relative file you should review the URL. In this case its ../css/week2-1.css. You need to remember to include the ../ in your file path.

Under the link tag, insert a set of opening and closing style tags. Configure the type property to be text/css and rel to stylesheet.

Create a style rule for a class named content. Set the font size to 10 pixels and the color to CC9900.

Use the HTML 5 header tag to group the heading section

On the line after the opening body tag, insert a comment that says, insert header here.

Insert a pair of opening and closing header tags. (You can assume when I say insert a tag, to insert both opening and closing tags!)

Inside the header tag insert an image tag. Set the class to logo. Set the alternative text to Logo. Set the image source to the week2-1.logo in the images directory.

Insert the navigation tags (nav tag). Set the class of the nav tag to topMenu.

Inside the nav tags, insert three sets of hyperlink () tags. The first should be Week 2-1. Create the other two links to go to the other two homework pages. Each link will go to a page on your homework.

After the closing navigation tag, insert a heading 1 element that has a catchy title to your web site.

Use the HTML 5 section tag layout the body of the page

On the line after the closing header tag, insert a comment that says insert main section here

Insert a pair of div tags. Assign the section the class called main.

Inside the div tags, insert a comment, insert left content

Then insert a pair of aside tags. Assign the aside the class called leftAside.

Inside the left aside, insert a pair of nav tags. Set the class to leftMenu.

Below the aside tags, insert a comment that says, insert main content.

Then insert a pair of section tags. Assign the section the class called content.

Use the HTML 5 footer tag to group the footing section

On the line after the closing div tag, insert a comment that says insert footer here

Insert a pair of footer tags.

Inside the footer tag, insert a paragraph. Inside the paragraph type Created by John Smith. But replace John Smith with your name.

Create a hyperlink. Set the text displayed to be your name above. Set the href attribute to your email address. (mailto:youremailaddress@yourplace.com)

Create the navigation

Inside the nav tags and inside the left aside insert unordered list tags (<ul>)

Create four bullets for your list using the list item tags (<li>).

Inside each list item, insert a hyperlink (). The hyperlinks should be configured similar to what you created in the top menu. You should have links to each page on your web site, plus the home page. This includes for all of the pages from week 1. (Example:

Week 2-1

)

The last link should go to the W3Schools.com web site and should say W3Schools.

After the closing nav tag, insert a line break using the
tag.

Insert a paragraph with the p tag. Insert some text content here.

After the closing p tag, insert another line break.

Configure the content area with content and HTML elements and attributes.

In the content section (

), insert a heading 2 tag that says Welcome to My Rummage Store.

For the rest of the page, insert content and text using a variety of HTML elements and attributes you learned from all of your readings.

Step 2. Validating your HTML

Validate the code using the validator.w3.org tool as you did last week

If you have any errors fix them before moving on. When you are finished, take a screen shot of the validation report showing you have validated your HTML.

Step 3. Create the Cascading Style Sheet and customize the program

Some of the style rules are structural, such as the height, width, margin, padding, float. Changes can make big impacts on your overall page layout. The header, main div and footer all need the same basic layout so they line up on the page in this page design. Layouts will vary with your preferences. For this activity, use the basic layout. You can use different layouts in problem 2. Other styles such as fonts, colors, styles of text have more impact on the design and less impact on the layout.

Create the style rules

In the style sheet, add a comment with your name, data and file name.

Insert comments for the body, header section, main section, left aside, content section and body.

Configure the default body rule

In the body section insert a body tag that sets the margin to 0 and auto.

Set the font to black, Verdana, Arial, Helvetica, and sans-serif and size 12 points. (All fonts are in points for this class and measurements in pixels).

Set the background color is 042841.

Configure the header section style rules

Under the header section comment, insert the style rules:

The header selector should be set to:

960 by 100 pixels, no padding, margin is 0 and auto in order to center the header, and the background color is d8e6b3.

The background image should point to your week2-1banner image.

The background size is 960 by 100, not repeating, with a z-index of 100.

The heading 2 selectors will align in the center with right adding at 225, and set color to white, font to Papyrus.

Add a text shadow. (Use text-shadow: 2px 1px #042841)

The logo class used for the logo image is set to float left, with a width of 180 and height of 100.

Configure the styles for the mouseover links

The links are configured using the topMenu class.

The topMenu class has padding on the right set to 40, text align set to right, color set to 042841, text decoration set to none so there is no underline with the links, font size set to 9 and family set to Verdana, Geneva, sans-serif.

Set the default hyperlinks and the visited hyperlinks in the topMenu class to this color: 141919.

Set the hover hyperlinks in the topMenu class to this color: A69055. This creates the mouseover effect!

Hint: When referring to html selectors inside another element where we just know the class, use: classname selector{style rules} For example, use: .topMenu a:hover {color:#ff0000;}

Configure the style for the left aside content and navigation

The navigation links are in the aside.

Configure the aside using the selector because its our only aside in the page. Set the width to 180, margin to 0 and auto, vertical alignment to top, padding to 0 and display to table-cell.

Configure the paragraph inside the aside, set the padding to 0 and center the text alignment and the left padding to 5 pixels.

For the unordered list inside the aside, set the margin to 0 and padding to 10 and 20, the background color to 1A5476, and the list syle and text decoration to none.

For the default link and visited links, inside the aside, the font family is set to Verdana, Geneva, sans-serif, with no text decoration, and the color is set to white.

For the hyperlinks inside the aside, the color for the hover state is set to CC9900, creating the mouseover effect.

Hint: When referring to html selectors inside another element where we just know the selector name, use parentSelector childSelector {style rules} For example, use: aside p {color:#ff0000;}

Configure the main section of the page.

Like the header element you need to set the content area.

Set the content width to 780 because it cant take up all the width. Add 0 and 10 for padding, set vertical alignment to the top and the display to table-cell.

Set the color of the heading 2 tags inside the content class to 042841.

Set the default and visited links inside the content class to have no decoration and set the color to 141919.

Set the color of the mouseover links (hover) to be A69055.

Configure the footer

Like the header and main div tags, you need to configure the content area structure.

Set the properties for the content class.

Set the dimensions to 960, 10 and 0 for padding, margin is 0 and auto, center text alignment.

Set the background color to 508d8d and the text color to d8e6b3.

Set the clear property to both.

Create custom HTML, CSS and content

It is expected that you will add your own content, html elements, styles, images, colors and style rules to make this page, uniquely yours You will be given creativity for going beyond the basic assignment and customizing the page.

Congratulations!

Youve just created your first modern web page!

Oh, did I say modern? Thats relative. Its a common layout. But today with mobile devices, if we view this page, its hard to see the text unless we zoom in. So were going to look at another page, to help you see why the current trend is to use programs like JQuery and Bootstrap to help us create our web pages.

Problem 2

Web site topic: Your boss has asked you to create a web site for: a local community non-profit organization that sells rummage sale items. This week, they have asked you to set up 1 page to show what the site will look like with a more modern look that will work on mobile devices.

Learning Outcomes:

Analyze web programs in order to test, debug, and improve them.

Evaluate web pages and web programs to ensure that they use proper coding conventions and documentation.

Demonstrate creativity and problem-solving skills.

Create web pages and web programs that use: HTML5, cascading style sheets, dynamic HTML, JavaScript, forms with controls, and Canvas.

Step 4. Create your web site structure and files

Get the Files

Visit http://getbootstrap.com/examples/jumbotron/# (Links to an external site.). You can learn more about bootstrap at http://www.w3schools.com/bootstrap/default.asp (Links to an external site.) and http://getbootstrap.com/ (Links to an external site.). Get the template html for the jumbotron and a favicon image and create the custom CSS file. You will work with with week2-2.html for this problem. The favicon is used to format the picture in the tab in your browser.

You can create a favicon using http://www.xiconeditor.com/ (Links to an external site.) for free. Just store the favicon.ico file in your images folder. Name the file week2-2favicon.ico. Locate an image for the jumbotron.

Copy the code from the jumbotron example on page http://getbootstrap.com/examples/jumbotron/ (Links to an external site.) to your week2-2.html page.

Modify the html code

Modify the code to reference your favicon in the images folder and make sure to use the correct file name.

Change the reference in the web page, from the jumbotron.css file to the custom week2-2.css. Make sure it refers to your css folder. This is the custom CSS file you would edit to modify the style rules for your web pages.

Inside the CSS file, insert the style rule for the body so that the navbar is fixed. body { padding-top: 50px; padding-bottom: 20px; }

Step 5. Setup the links to the Bootstrap CSS and JS files and JQuery files

In the html code, configure the html to use the bootstrap CSS files.

You can use a local copy or CDN version. You need 2 style sheets to format your page. You need the bootstrap CSS and a custom CSS file. You could have downloaded the files, but if you do, never change the core files so that your program will be easier to maintain as new files are updated often online.

Although you can download the files, using links to the CDN resources is more efficient for beginners. Use a content delivery network CDN, like https://www.bootstrapcdn.com/ (Links to an external site.) Change the href attribute in the first style sheet link to this core bootstrap file to an absolute URL. Just copy and paste the code for the URL on this web site to the href attribute in your page.

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css (Links to an external site.)

Your references to your boostrap CSS files should look like this:

Get the core Bootstrap JS files

Again, use the CDN version of the JQuery and Bootstrap files. At the bottom of the html page, modify the code to just include these two lines.

Dont split the URLs across lines in your web file. Its faster to copy the URL for the Boostrap JS file from https://www.bootstrapcdn.com/ (Links to an external site.)

You can get the core CSS files here too.

Step 6. Create your content & customize your content using HTML & CSS

Insert your own content

Customize your Jumbotron example:

Add content to the page.

Modify the links to link to ONLY this weeks pages including home.html. To modify the links, locate the Project name link. Simply add additional links immediately after this link.

Project name 

Customize the content using HTML

Customize your page

Customize html tags and elements to format your content and text.

Configure the jumbotron to display an image and custom text.

Customize the content with CSS

Customize CSS file to make this page look like your own page! How? You can add style rules to the style sheet. You can also overrule the styles defined in the Bootstrap CSS file. Howeve, you have to find which rule applied the setting you are trying to overrule. That can be time consuming. However you can use Google Chrome to help you.

Save and Preview and Debug Your Code!

View your page in Google Chrome. Right click on the banner and select Inspect. On the right side of the window youll see some tools that we use to help us locate information about our page and style sheet. You can click on any element on the page, and the styles that are inherited are shown to you. The striked out style rules means they have no impact. I located the rule that configured the color to the banner that was not crossed out. Then, I insert it into the CSS file. Make your changes to the style rule. Here I just changed the color, but I could have changed or even added other style rule properties and values. Save your changes and reload the page in the browser to see the effect. If you dont see it, its probably because another style rule is interfering (hence the word cascading style sheet). So go back to Google Chrome and try to find the style rule that is overriding the property you want to set.

.navbar-toggle, .navbar-inverse { background-color: #A94442; border-color: #A94442; } 

Step 7. Review and document your programs

How to document your programs

Take screen shots of your page in the browser (including the URL/address bar) and the source code of the html and css files and paste them in the word document.

After saving your web page and style sheet, preview the page in the browser. Make sure that you have adequately reviewed the code and content, and properly documented the code.

Use proper nesting and indentation for all code

User proper naming conventions for the IDs and names of elements, names of classes used in all code

Include comments in the all code files (name, date, purpose of code, functions, variables)

Save this file as a Word document. Add this to your web site in the homework folder after you have completed both problems

Include a screen shot of both web pages in the browser showing that your programs worked.

Screen shot of the validation report goes here. (from Problem 1)

Include a screen shot of all of our code, showing your indentation and nesting of the elements. (Except any third party JS/CSS files!).

Submitting your Homework

When you are finished, save the Word document. You will lose points if you do not name the file correctly.

For each screen shot, make sure the code is legible on a monitor (10 pts or higher).

Compress your images. Word allows you to compress the images so you dont have a huge file. When you are finished with the homework:

Just click on the image in Word,

Go to the Format Picture Click Compress.

Choose Best for sending in email.

Check: remove cropped picture regions.

Choose: All pictures In this file.

Save your document.

Place this file inside the homework folder of your web project.

Zip the CS321_LastName Make sure its named CS321_LastName.zip.

Upload the file to the online classroom.

Due to the length of the assignment, the instructor may take up to 6 days to provide you with feedback.