Assignment 1

1. Info (HTML & CSS) (15 pts)

Create an HTML web page with the title “Assignment 1”. It should contain the following items:

• Your name
• Your student id
• The course title (“Data Visualization (CIS 490/680)”), and
• The assignment title (“Assignment 1”)

Use the following html to structure this information:

<div id="info">
  <div class="left">
    <!-- Your Name & Id -->
  </div>
  <div class="right">
    <!-- Class Title & Assignment -->
  </div>
</div>

All of the lines you add should be heading elements. The first line (your name) should be larger than the others. Do not add anything except the header tags (with id and class attributes only) and the text in HTML. Two lines should be added the <!-- Your Info --> section and two lines to the <!-- Class Info --> section.

Style the text using CSS so that your name and student id are displayed in the same color (not black or white), and the course title and assignment title are italicized but not bold. Your name and student id should be on the left side of the page while the course title and assignment title should be on the right side of the page and the text aligned to the right. Add a rectangle (or rounded rectangle) around your name and student id. You must do this using CSS; do not use any HTML attributes except id and class!

Hints

• Think about using either a class attribute or cascading to reduce the number of rules
• Consider using the Flexible Box Layout to achieve left- and right- alignment.
• The border and padding properties will be useful for outlining a region.
• Header items will be bold by default so you will need to override this (see font-weight).

2.House (SVG & CSS) (20 pts)

In the same web page, create an SVG graphic that displays a house using SVG. Your graphic should have the frame of the house, a sloped roof, at least one window, and a door with a circular door knob. The window, door, and roof must have a different color from the rest of the house frame, and the door knob must be a different color than the door. Finally, write CSS so that when the mouse is hovering over the door, the door changes color. Other than that, you may choose to customize your house as you see fit.

You may only use SVG lines, polylines, rectangles, circles, polygons, or paths. You should draw all content in a single svg element. For example,

<svg id="house" width="250" height="250">
   <!-- YOUR SVG HERE -->
</svg>