HTML/CSS Objectives Solution

    • Understand web page layout

    • Work with browser code inspection tools

    • Practice creating web pages

____________________________________________________________________________

For the first part, you will turn in a text file that answers all of the ​numbered​questions.

Part 1: Manipulate a web page using browser inspection tools

    • Download boxes.html and boxes.css from moodle. Place both of them in the same directory, then open boxes.html using either Mozilla Firefox or Google Chrome.

    • Right click on the web page to inspect the elements (“Inspect Element” in Firefox, “Inspect” in Chrome).

        1. Give div1 a new background color. What css rule did you use? How would you write it in a css file so that only this div gets the new background color?

        2. Edit the margin and padding attributes of the divs. What does changing the margin do? What does changing the padding do?

    • Now change the background color of the <p> element inside div 1 to yellow.

        3. Change the margin and padding of the yellow <p>. What happens if the margin is greater than 100px? What happens if the padding is greater than 100px?

        4. Keeping the padding greater than 100px, change the overflow of div1. What is the difference between scroll and hidden?

    • Refresh the page to return the divs to their original states.

        5. Give all divs the float: left attribute. What order are they in? What if they all have the float: right attribute instead?

        6. Keeping all divs with the float: right attribute, give each one in turn the two attributes float: left and clear: right. Describe the relative positions of the boxes with each combination.

        7. Refresh the page and recreate the arrangement of divs shown in the picture below: What attributes do the divs have?













    • Refresh the page to return the divs to their original states.

    8. Give the body element a margin value of 0px. What changes? What does this tell you about the default margin value?

____________________________________________________________________________

For the second part, you will turn in your finished menu.html and menu.css files. Use whatever text editor you are most comfortable developing html/css in.

Part 2: Create a CSS menu

    • Create two files: menu.html and menu.css. Place these in the same directory.

    • Add a title and a link element in the header of menu.html to link it to menu.css.

    • In menu.html, create one parent div (this will be the main menu container) with at least 4 divs inside of it (these will be the menu items). Write some text in <p> elements in the menu item divs. You choose what text!

    • Change the menu div so that its width is 20% of the page.

    • Give each menu item a margin of 5px on the top, bottom, and right sides.

    • Give each menu item a total padding of 10px. Make sure to change or account for the default settings of the <p> elements.

    • Give your menu div & its children borders.

    • Create a second div at the same level as your menu div. This div will contain the information on your page.

    • Put the same number of sections in your info div as you have menu options.

    • Float the divs so that they appear next to each other. You will need to adjust the width of your info div.

    • Use <a> elements to link each menu item to its corresponding text section. Hint: search how you can use <a> elements and element ids to link to somewhere in your page.

        ◦ Your page should look similar to the following screenshot:





















    • Next, we want to force the menu to stay in the same position when the page is scrolled. Use the position attribute to make this happen.

        ◦ If your text appears behind the menu when you do this, think about where your divs are floating. Make it so that the text is not behind the menu.

    • Change the borders so that the menu div and the info div have the same style but the menu items have a different style.

    • Keeping the main layout and mechanics of the page the same, use your creative design skills to personalize it. Some ideas: Change the font. Change the colors. Make the links so that they look different. Put some images in. Give the body of the page a main header. Use the :hover selector to change the appearance of an/some element/s when you hover over them. Do what you want. Make rounded corners. Change the padding and margin of the info div.

        ◦ Things that you should not change: margin & padding in the menu; relative position of the menu to the info; the mechanics of how the page functions.

        ◦ To receive credit for this part, you must change at least 5 different things. Changing the font for all section headers would count as changing 1 thing. Comment the changes that you have made in your css file.

    • Warning: make sure that all css rules that you use are written in menu.css. When we load the page, we want to see what you see.

    • Double check to ensure that you have used classes and ids appropriately both in your html and to assign attribute values in your css.

____________________________________________________________________________

To Receive Credit:

    • Turn in one zip file named <Lastname>_lab5.zip or <Lastname1>_<Lastname2>_lab5.zip that contains the following:

        ◦ part1.txt with the answers to the numbered questions in part 1 + your name and your partners name as a comment

        ◦ menu.html (the html code for your webpage) + your name and your partners name as a comment

        ◦ menu.css (the corresponding css) + your name and your partners name as a comment