Class 3 – In-Class Assignment #1
Your assignment is to convert this image into valid XHTML and CSS code
Your assignment is to convert this diagram into valid XHTML code. There are a few things to note:
- a good starting point is to copy and paste my example of the bare minimum XHTML elements necessary to create a web page.
- the words “Class 2 – In-class Assignment #1″ should be written using a “h1″ tag.
- all images should be displayed using the “img” tag
- the first image is a rat, and it should have a 1 pixel red border applied to it in the CSS style sheet. You will want to get familiar with using CSS selectors, in particular the “border-width“, “border-color“, and “border-style” properties of CSS. There is also a shortcut property called “border” which you can use to set all three border properties at once.
- the second image is a mouse, and it should be stretched so it is wider than the first image. You can use the “width” and “height” properties of CSS to stretch an image.
- The text at the bottom should be inside a “p” tag.
- Each colored section should be wrapped inside a “span” tag that is given a unique “id” attribute. For example, <span id=”blue_section”>sit</span>. This will allow you to then apply a style in the CSS that only applies to elements with that particular tag name and that particular id attribute. For example, span#blue_section { color: blue; }
Related posts:
- Class 3 – Homework Assignment
- Class 3 – Solution to In-Class Assignment #3
- Class 3 – In-Class Assignment #1
Tags: class 3
Loading ...