Lab 2

HTML & CSS: Layouts & Forms

---

Lab Setup

If you have not already done so, create lab folders

1. Create a folder in 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.

Also, 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 all the HTML and CSS files in the lab2 folder to your own lab2 folder, i.e., csis390/labs/lab2

---

1. CSS Responsive Layouts

1. Modify the CSS code in selectors.css using Notepad++.
2. Open selector.html in Chrome and refresh the web page each time you save your CSS changes.
3. Alter the CSS code to make the website title and the main navigation more compact:
   
   Hints:
   • Add your css at the end of selectors.css to override the existing CSS
   • Change the text-align of the header so it aligns left instead of center
   • Make the h1 and nav inside the header display as inline-block
   • Make the ul inside the header have a margin of zero all around so it is as compact as possible
   • Make the h1 inside the header have left margin of 30px and zero on the other three sides
4. Move the side menu and content to the left of the main content as shown below:
   
   Instructions:
   • Read about the CSS float property and the CSS clear property.
   • Make .side_content elements float left and clear left, and set the left margin to zero.
   • Make the #main_content element float right
   • Make the footer clear both, so it will always be below the elements above it that are floating left or right.
5. After following the instructions you page will look like this:
   
   
6. The #main_content is positioned below the side menu. This is because the #main_content element is defined after the two .side_content elements. When we "clear" the .side_content section, the #main_content div moves down even though there is space above it. When using float, content defined below an element cannot not be displayed above that element.
7. While we could use absolute positioning to fix this, a better solution is to define the .side_content section after the #main_content div in the HTML document.
8. Open selectors.html and move the side content section so that it is defined below the #main_content
9. In general, an HTML document should define content in order of importance from top to bottom. In this case, the side menu might link to other pages, so consider it more important than the #main_content. But the .side_content section is less important than the #main_content, so it should be defined afterwards in the HTML document.
10. Use CSS to create the 3-column layout shown below but only if the browser's width is 1000px or greater:
    Hints:
    • Use the existing @media code as an example. Copy and paste it to create a new media query that does the following:
    • If the min-width is 1000px, then...
    • Make the #container width 950px
    • Make .side_content float left and set clear to none
    • Make #main_content float left
    • Give the section.side_content left margin of 30px, so it is not close to the #main_content. Note that you do not want to add left margin to all .side_content elements just the side content section, i.e., section.side_content. Note that the selector does not have a space.
11. By defining the side menu, main content and side content in order of importance, we can float these elements to the left to create a 3-column layout where the most important elements are on the left and the least important are on the right. Alternatively, we can float these elements to the right to reverse the horizontal ordering.
12. Notice that the conclusion section and footer touch each other even though the footer has top margin. This is because the #main_content floats left and floating elements can occupy the margin of block elements such as headers and footers.
13. To fix this, add 30px of bottom margin to #main_content. Block elements will "respect" the margin of floating elements.
14. Notice that we use a "special" class and a "unique" id to identify list items. These can be used to apply style to specific elements.
15. Use CSS to make the "special" class have bold text no matter where it is used.
16. Use CSS to make the "special" class have underlined text but only if the element itself is a paragraph, i.e., p tag. Hint: the selector p .special has a space in it, so it is really specifying two elements, a p and an element with the class name special. If you leave out the space, i.e. p.special, you are specifying one element, i.e., a paragraph with class name special.
17. Use CSS to make the "special" class have red text but only if the element is inside of a section element.
18. Use CSS to make the "unique" id have a text-shadow that is gray with a blur radius of 5px and a vertical/horizontal position of 3px 3px.
19. The website should now look like this:
    

TASK CHECK

Verify that your CSS code, i.e., selectors.css validates at: jigsaw.w3.org/css-validator
Then, show your instructor your completed valid document. Note that the website should have a responsive three column design. When the browser is 1000px wide or greater, there should be three columns. When the browser is less than 800px wide, there should be one column. Otherwise, there should be two columns.

---

2. HTML Forms

1. Open form_basic.html in Notepad++ and alter it so that it looks like this:
   
2. Refer to zyBook Chapters 2.2-2.4 for help.
3. Add two additional radio buttons for pony_type, specifically with the values and labels "Pegasus" and "Alicorn"
4. Be sure to give the new radio buttons unique id's that match the for attribute in the corresponding labels
5. For more information about how to properly define labels, see this link developer.mozilla.org/label
6. Add four additional checkboxes for skill[]. Use values and labels of your choosing. For instance, ponies could have ninja skills such as "Nunchaka" and "Kenjutsu"
7. Be sure to give the new checkboxes unique id's that match the for attribute in the corresponding labels
8. Note that the name of the checkboxes includes an array bracket []. This enables the checked values to be passed in an array instead of independently
9. Re-read the section on the select tag (drop-down menu) in zyBook Chapter 2.3 and look at this example
10. Add select tag with both a name and id of "pony_color"
11. Nested inside the select tag, add at least 5 color options. Be sure to specify both the value and the visible content inside the option tag.
12. Note that the select tag should have both an id and name attribute, but the option tags should only have value attributes, i.e., value = "red"
13. Re-read the section on the date picker tag, i.e., input type="date" in zyBook Chapter 2.4.
14. Add a date picker input tag with a name and id of "pony_birthday"
15. Add CSS inside of a style tag to decorate the div and label tags.
The div tag should have a 1px solid gray border and both padding and margin to add better spacing.
16. Add CSS to make the label tags bold, but only the first label tag in each div tag. Read about the nth-child selector if you forgot how you can select only the first child

Why does a form element need both a name and an id?

name attribute

The name attribute is very important because the HTTP protocol uses it to identify submitted values. When a form is submitted, an HTTP request is made and all the values that are entered or selected in the form are sent in an associative array. The names are used as the array indices so that server-side scripts can "get" the submitted values by name. If your names are not 100% correct, server-side scripts will fail. The convention for names is to use all lowercase letters and to never use spaces. Use underscores _ instead of spaces.

id attribute

The id attribute is also important because it is used by JavaScript to uniquely identify elements. It is common to use JavaScript to make sure a form is correctly filled out (called "form validation") before submitting the value in an HTTP request.

The id of each form element can also be "connected" to the corresponding label tag. JavaScript can be used to highlight the label for elements that are blank or not filled out correctly. We will learn how to do this when we study JavaScript in two weeks.