Lab 2

HTML & CSS Introduction

This is a group lab. Please work with a lab partner. One person should be the "typer" for Part 1 and the other person should be the "typer" for Part 1.

---

Lab Setup

---

1. Creating Well-Structured HTML Documents

1. Open page1.txt in Brackets and immediately save it as page1.html
2. Add you and your partner's name at the top using an HTML comment. (see zyBook 2.3)
3. Appropriately add the following HTML tags:
4. !DOCTYPE at the very top so we know its HTML
5. html to encapsulate or wrap all the text in the file.
6. meta to use the utf-8 character set
7. title so the title is "Website Title"
8. body to encapsulate or wrap all the content except the title and meta tags.
9. h1 for the main website title "Website Title"
10. h4 for the subheading "Main Menu"
11. ul and li to make Page 1, Page 2, ..., Page 5 a bulleted list.
12. a to make Page 1, Page 2, etc. hyperlinks to page1.html, page2.html, etc.
    Example: <li><a href="page1.html">Page 1</a></li>
13. nav to encapsulate the "Main Menu" and bulleted list as follows:
    
14. header to encapsulate the h1 and nav above.
15. h2 for the main web page header "Web Page Title"
16. main to encapsulate all the content from the main web page header down to the nested list of the 3rd section.
17. img to insert an image pica-sm.png below the web page header. Be sure to include the alt attribute to describe the image.
18. a to make the image a hyperlink to a larger version pica-lg.png
19. section to encapsulate or wrap the content of the three different sections. Note that there are three section titles with content below. Each section title and the contents below it should be encapsulated with a section tag.
20. h3 for the three section headings "Section Title"
21. p for the four example paragraphs in the 1st section and the sentence immediate below the 2nd and 3rd sections.
22. table, thead, tbody, tr, th and td to properly structure the data in the 2nd section. See Mozilla's table example for help.
23. ul, ol and li to properly structure the nested list in the 3rd section. See zyBook 2.4 for help with properly nesting lists.
24. footer to encapsulate the bottom-most footer content.

Your web page's body (the visible content) should have the following tree-like structure when complete:

Note that the body contains header, main and footer. And, main contains h2, a and three sections.

---

2. Styling Documents with CSS

1. Open page1.html in Brackets and add a link to a CSS file by adding the following line of code directly above the title tag:
   <link rel="stylesheet" type="text/css" href="style.css">
2. Add a link to an external font source by adding the following line of code directly above the stylesheet link tag you just added
   <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,700" rel="stylesheet">
3. Create a new document in Brackets and save it as style.css in your lab2 folder.
4. You will add CSS code to style.css and then you will save the file and reload page1.html in Chrome by pressing the reload button to see the change.
5. To help understand CSS, you should save and reload the page after each change to see how the web page is changed.
6. Add the following CSS code to style.css, reload page1.html to see change, and then read the notes to better understand the changes:
7. Change the body of the page:

   
   body {
   	font-family: 'Roboto', sans-serif;
   	background: linear-gradient(to bottom, #ddddee, #333344);
   	margin: 0px;
   	padding: 0px;
   }
   

   Notes:
   • We are adding 4 CSS properties to the body tag.
   • Some properties can have comma separated list of values, some can be used with functions such as linear-gradient, and some take pixel values like 0px.
   • If the Roboto font in not available, we use a default sans-serif font.
   • Mozilla linear-gradient reference
   • Some browsers add padding and margin to the body of a webpage and to achieve a custom layout, it is often necessary to reset these values to 0px (px stands for pixel).
8. Change the header of the page:

   
   header {
   	box-sizing: border-box;
   	width: 100%;
   	position: fixed;
   	top: 0px;
   	background-color: #333399;
   	color: white;
   	margin: 0px;
   	padding: 10px 20px;
   }
   

   Notes:
   • We are adding 8 CSS properties to the header tag to create a typical website header.
   • Adding box-sizing and width: 100% makes the header as wide as possible taking up the entire width of the browser window.
   • Adding position: fixed and top: 0 makes the header stick to the top.
   • We set the background color to a shade of blue and the font color to white.
   • Margin is the space around the blue background color, which we set to zero.
   • Padding is the space between the edge of the blue background color and the text. The first value (10px) is the top and bottom padding and the second value (20px) is the left and right padding. Text looks awkward when it is too close to an edge and padding makes pages more readable.
9. Change the nav of the page:

   
   nav ul {
   	list-style: none;
   	padding: 0px;
   	margin: 0px;
   }
   
   nav li {
    	float: left;
    	margin: 0px;
    	padding: 0px;
   }
   
   nav li a {
   	display: inline-block;
   	border: 1px solid #aaaaee;
   	padding: 10px 20px;
   	margin: 0px 5px;
   	color: #bbbbff;
   	background-color: #333366;
   	text-decoration: none;
   }
   
   nav li a:hover {
   	background-color: #3333dd;
   	color: white;
   }	
   
   nav h4 {
   	display: none;
   }
   

   Notes:
   • We are only add properties for tags that are inside of the nav area.
   • We remove the list style, margin and padding of the unordered list.
   • We make each list item float from left to right instead of from top to bottom.
   • We make the hyperlinks in each list item look like a button.
   • We change the colors when the user hovers over the links.
   • We hide the "Main Menu" as it obvious now that it is at the very top of the page.
10. Change the h1 and nav of the header:

    
    header h1 {
    	float: left;
    	font-weight: 100;
    	margin: 0px;
    	padding: 0px;
    }
    
    header nav {
    	float: right;
    }
    

    Notes:
    • This only changes the h1 and nav that are inside of the header.
    • By making the h1 float left and the nav float right, they can now exist side-by-side at the very top
    • We also changed the font-weight to make the Website Title very thin.
    • Again, we remove any padding and margin that a web browser might add by default.
11. Change the main to make it look like a fixed-width page:

    
    main {
    	width: 600px;
    	margin: 150px auto 0px;
    	padding: 20px;
    	background-color: white;
    	color: #444;
    	box-shadow: 5px 5px 10px #444;
    	border-radius: 20px;
    	font-size: 1.1em;
    }
    

    Notes:
    • When margin had 3 values they are: top left/right bottom.
    • We add 150px of margin to the top so the main area is always below the top header.
    • The left and right margins are auto, which means they balance and center the content.
    • We add colors, box-shadow, border-radius and font-size to make this area look like a page with rounded edges.
    • Mozilla box-shadow reference
12. Change the h2 in the main area:

    
    main h2 {
    	font-size: 1.8em;
    	font-weight: 300;
    	color: #000000;
    	text-align: center;
    	margin: -20px -20px 0px;
    	padding: 5px 0;
    	background: linear-gradient(to top, #ddaa00, #ffff00);
    	border-top-right-radius: 15px;
    	border-top-left-radius: 15px;
    }
    

    Notes:
    • The negative margins allow it to go flush against the edge of the main area
13. Change the img in the main area:

    
    main img {
    	position: absolute;
    	top: 60px;
    	left: 10px;
    	z-index: -1;
    }
    

    Notes:
    • This moves the image so that it positioned below the website title in the background (z-index level -1)
14. Change the table in the main area:

    
    main table {
    	border-collapse: collapse;
    }
    
    main td, main th {
    	border: 1px solid black;
    	padding: 5px 10px
    }
    
    main th {
    	background-color: #ff4422;
    	color: white;
    }
    
    main tr:nth-child(even) {
    	background-color: #ffff00;
    }
    

    Notes:
    • border-collapse is necessary otherwise adjacent cells (td and th) will have a double border
    • nth-child allows us to only change the even table rows
15. Change the nested list in the main area

    
    main ul {
    	list-style: square;
    }
    
    main ol {
    	list-style: lower-roman;
    }
    

    Notes:
    • There are over 20 list styles in CSS from shapes to Roman numbers to Hebrew style.
16. Change the p in the main area

    
    main p {
    	text-indent: 20px;
    	text-align: justify;
    }
    

17. Change the footer

    
    footer {
    	text-align: center;
    	color: #ccccff;
    	padding: 20px 0 40px;
    }