Lab 1

HTML & CSS Introduction

Overview

We will add HTML structure to some generic content to better understand semantic markup. Then, we will style all the HTML tags with CSS to create a typical page design. View the Final Page to see what you will create in lab. Note that the solutions HTML and CSS are compressed (called minification), which makes it very difficult to copy and use the code. Do not copy the solution and try to reverse-engineering the compression. Your code must be formatted with proper spacing and indentation.

---

Lab Setup

Create lab folders

1. Create a folder on your user drive (Z:) for storing your course work called csis390/.
2. Create a sub-folder in your csis390 folder for storing your lab work, i.e., csis390/labs.
3. Create sub-folders for all the labs, i.e., lab1, lab2, ..., lab3.

Make sure you can view file extensions in Windows

1. Click the Start menu
2. Type "folder options" in the search and click "Folder Options" when it appears at the top of the Start menu
3. A dialog box with the title "Folder Options" will appear. Click the "View" tab at the top of the window
4. Click to uncheck the box for "Hide extensions for known file types"
5. Click the "OK" button at the bottom of the dialog box

Download Starter Files

Download the following files to your own lab1 folder, i.e., csis390/labs/lab1

• page1.txt
• pica-sm.png
• pica-lg.png

---

1. Creating Well-Structured HTML Documents

Overview

You will use HTML markup to make the web page look like this: Structure Only

The solution above has all the line breaks and extraneous white space removed, which makes it difficult to use it to cheat. Please to not just copy this code. Your solution should be properly formatted with line breaks and tabs.

Chapter 2 and 3 of the zyBook are a great reference for this part. If you do not yet have the book, Mozilla's HTML element reference is also a good source.

Setup

• Open page1.txt in Notepad++ and immediately save it as page1.html
• Add you and your partner's name (if applicable) at the top using an HTML comment. (see zyBook 2.3)

Task

Appropriately add the following HTML tags:

1. !DOCTYPE at the very top so we know its HTML
2. html to encapsulate or wrap all the text in the file.
3. meta to use the utf-8 character set
4. title so the title is "Website Title"
5. body to encapsulate or wrap all the content except the title and meta tags.
6. h1 for the main website title "Website Title"
7. h4 for the subheading "Main Menu"
8. ul and li to make Page 1, Page 2, ..., Page 5 a bulleted list.
9. a to make Page 1, Page 2, etc. hyperlinks to page1.html, page2.html, etc.
10. nav to encapsulate the "Main Menu" and bulleted list as follows:
    
11. header to encapsulate the h1 and nav above.
12. h2 for the main web page title "Web Page Title"
13. main to encapsulate all the content from the web page title down to the nested list of the 3rd section.
14. img to insert an image pica-sm.png below the web page title. Be sure to include the alt attribute to describe the image.
15. a to make the image a hyperlink to a larger version pica-lg.png
16. 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.
17. h3 for the three section headings "Section Title"
18. p for the four example paragraphs in the 1st section and the sentence immediate below the 2nd and 3rd sections.
19. table, thead, tbody, tr, th and td to properly structure the data in the 2nd section. See Mozilla's table example for help.
20. ul, ol and li to properly structure the nested list in the 3rd section. See zyBook 2.4 for help with properly nesting lists.
21. 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.

TASK CHECK

---

---

2. Styling Documents with CSS

Overview

You will use CSS (Cascading Stylesheets) to make the web page look like this: Final Page

The solution above has all the line breaks and extraneous white space removed, which makes it difficult to use it to cheat. Please to not just copy this code. Your solution should be properly formatted with line breaks and tabs.

Chapter 3 and 4 of the zyBook are a great reference for this part. If you do not yet have the book, Mozilla's CSS reference is also a good source.

Setup

• Open page1.html in Notepad++ 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">
• 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">
• Create a new document in Notepad++ and save it as style.css
• Open page1.html in Chrome
• 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.
• To help understand CSS, you should save and reload the page after each change to see how the web page is changed.

Task

Add the following CSS code to style.css, reload page1.html to see change, and then read the notes to better understand the changes:

1. 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).
2. 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.
3. 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.
4. 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.
5. 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
6. 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
7. 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)
8. 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
9. 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.
10. Change the p in the main area

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

11. Change the footer

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

12. Modify the h3 in the main area and make it look very unique by adding at least 5 CSS properties.

TASK CHECK

---