Class 2 – Solution to In-Class Assignment #1

Posted: February 21st, 2009 | Author: | Filed under: assignments, css, xhtml | Tags: | No Comments »

There are four files necessary for this solution to Class 2 – In-class Assignment #1:

  1. assignment1.html – the XHTML file
  2. styles/assignment1.css – the CSS file
  3. images/mouse.jpg – the picture of the mouse
  4. images/rat.jpg – the picture of the rat

Here is the code from assignment1.html:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Class 2 - In-class Assignment #1</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <!-- put a any CSS style sheet or JavaScript code here -->
	<link rel="stylesheet" type="text/css" href="styles/assignment1.css" />
  </head>
  <body>
	<h1>Class 2 - In-class Assignment #1</h1>

	<img id="image1" src="images/mouse.jpg" />

	<br />

	<img id="image2" src="images/rat.jpg" />

	<p>
		Lorem ipsum dolor <span class="blue">sit</span> amet, consectetur <span class="red">adipiscing elit</span>. Cras porttitor, tortor aliquam <span class="orange">euismod tincidunt</span>, est neque fermentum mauris, sed facilisis diam orci venenatis turpis. Integer ornare ante et velit. Nulla auctor, lectus nec viverra rhoncus, tellus justo suscipit nisl, a semper sem ligula in mauris. Integer quam metus, suscipit sed, aliquam vitae, tincidunt at, purus. Suspendisse magna mauris, varius quis, tristique et, elementum et, nisi. In in nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent aliquet. Aenean feugiat. Curabitur ullamcorper pretium nibh. Ut justo ipsum, tincidunt eu, auctor et, volutpat eget, nisi. In rhoncus tincidunt diam. Praesent feugiat faucibus nibh. Nulla facilisi.
	</p>

  </body>
</html>

And here is the code from styles/assignment1.css:

img#image1 {
	border: 2px solid red;
}

img#image2 {
	width: 300px;
	height: 200px;
}

.blue {
	color: blue;
}

.red {
	color: red;
}

.orange {
	color: orange;
}

So long as you make sure you have image files at images/mouse.jpg and images/rat.jpg, you will be fine using this code.

Related posts:

  1. Class 2 – Homework Solution
  2. Class 3 – Solution to In-Class Assignment #3
  3. Class 2 – Homework Assignment

Leave a Reply