Week 2

Part I: The HTML Elements: Creating Web Sites

General Directions

Overview

Remember, in order to meet the "creativity and problem-solving skills" objective, the student is required to produce programming project solutions from given problem descriptions. Note that this objective is not met if a student is able to produce solutions only by pasting together given code fragments. Although pasting code fragments together is sometimes appropriate, it does not enforce the development of creativity and problem-solving skills. Therefore, the homework directions and grading will be tightly aligned to these course learning outcomes.

1.      Demonstrate creativity and problem-solving skills.

2.      Analyze web programs in order to test, debug, and improve them. (& in the Discussions)

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

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

Please review the general directions from week 1.

In week 1 you learned all about the HTML elements. This week you will learn about the meta tags, external CSS, favicons, external javascripts, work with hyperlinks, modify the appearance of text elements, breaks, use CSS selectors, and organize content using lists, use new HTML 5 elements (sections, article, header, footer, aside, summary and details).

To accomplish this task, you will also insert external CSS and JS files to help you layout your page.

The first problem you will use basic html and css to layout a page. Then in problem 2 you will investigate altenate techniques using HTML 5 and external JavaScript libraries (Bootstrap and JQuery) to layout your pages. Problem 2 will involve significant creativity, thought and additional reading beyond the textbook.

Remember your site this term is a ‘Rummage Sale” site. So you should be configuring your site to look like a rummage sale web site!

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 you’ll need to refer to the file types for your images (Use only gif, jpg, and png). Don’t 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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1"> 

3.      Give the page title a descriptive name about your project.

4.      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.

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

6.      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.

7.      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

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

2.      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!)

3.      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.

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

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

6.      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

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

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

3.      Inside the div tags, insert a comment, “insert left content”

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

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

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

7.      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

1.      On the line after the closing div tag, insert a comment that says “insert footer here”

2.      Insert a pair of footer tags.  

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

4.      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

1.      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 (<a>). 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: <li><a href="/week2-1.html">Week 2-1</a></li>)

·         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 <br /> 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 (<section class="content">), 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

1.       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

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

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

Configure the default body rule

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

2.      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).

3.      Set the background color is 042841.

 

Configure the header section style rules

Under the header section comment, insert the style rules:

1.      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.

1.      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.

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

3.      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: classnameselector{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. 

1.      Configure the aside using the selector because it’s 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’.

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

3.      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.

4.      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.

5.      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 parentSelectorchildSelector{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.

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

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

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

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

Configure the footer

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

2.      Set the properties for the content class.

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

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

5.      Set the clear property to both.

Create custom HTML, CSS and content

1.      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!

You’ve just created your first modern web page!

Oh, did I say modern? That’s relative. It’s a common layout. But today with mobile devices, if we view this page, it’s hard to see the text unless we zoom in. So we’re 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.)Links to an external site.. You can learn more about bootstrap at http://www.w3schools.com/bootstrap/default.asp (Links to an external site.)Links to an external site. and http://getbootstrap.com/ (Links to an external site.)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.

1.      You can create a favicon using http://www.xiconeditor.com/ (Links to an external site.)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.

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

Modify the html code 

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

<link rel="icon" href="/../images/week2-2favicon.ico">

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

<!-- Custom styles for this template -->     
<link href="/../css/jumbotron.css" rel="stylesheet">

3.      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.)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.)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.

Don’t split the URLs across lines in your web file. It’s faster to copy the URL for the Boostrap JS file from https://www.bootstrapcdn.com/ (Links to an external site.)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

1.      Customize your Jumbotron example:

2.      Add content to the page.

3.      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.

Customize the content using HTML

1.      Customize your page

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

3.      Configure the jumbotron to display an image and custom text.

 

Customize the content with CSS

1.      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 you’ll 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 don’t see it, it’s 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.

Step 7. Review and document your programs

How to document your programs 

1.      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.  

2.      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.

3.      Use proper nesting and indentation for all code

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

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

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

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

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

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