Web Dev Intensive

One of the confusing things about XHTML is that some attributes of HTML tags have special meaning and, while other attributes do not. So it’s hard to know whether an attribute value can be free-form and arbitrary, of your own choosing, or whether it has to have a specific predetermined value in order to function properly within the browser.

Some common attributes that always have arbitrary values of your own choosing are:

• id
• class
• name
• value
• for
• title
• alt
• href – must be a URI
• src – must be a URI
• action – must be a URI

Other attributes that always have special meaning and must have a specific value in order to function properly are:

• selected – has only one meaningful value, “selected”
• checked – has only one meaningful value, “checked”
• type
• rel

It is important that you become familiar looking up what each of these attributes does for various XHTML elements on w3schools.com’s XHTML tag reference page, which is intentionally not linked from here.  You should know where to find it.

Your assignment is to convert this wireframe diagram into valid XHTML code:

wireframe for class 2 in-class assignment

As always, start with the bare minimum elements necessary to make an XHTML page, and move forward based on the XHTML common elements example code.

Hint: you will want to use the align attribute of the <img> tag in order to have the image sit next to the paragraph of text.  You should look up the <img> tag reference page on the w3schools.com site for more information.

You should have received notification that you are subscribed to the Web Dev Intensive email discussion list.  That email should have information on how to send email to the list, as well as how to subscribe or unsubscribe from the list, so please don’t delete it.

Emails sent to this list at

will be received by everyone in the class, as well as former students from past classes.  So it might be useful if you have questions, problems, or anything else you want to share with the class.  Use it however you want.

If you have not yet received notification of the list, send a test email to the list address above.  If for whatever reason, you have not been subscribed to the list yet, I will be notified automatically and will add you to the list.

In today’s web development environment, and in software development in general, there is a popular principle of separation of presentation and content.  In terms of web development, this would mean that the contents of a web page should not be dependent upon the style or design of how that content is displayed on the page.

In some ways, this is a question of efficiency.  Until the last few years, a website’s style was completely and permanently interwoven with its content.  The parts of the code that conveyed the meaning of the site, i.e. its text, were coded in such a way that they also were intermingled with code that indicated how that text should look, what font it should be displayed in, what color, etc.  Thus if someone wanted to change the style, they would have to also change the content, and sites were thus difficult to maintain.

In today’s web environment, where users can be viewing a website through one of many web-enabled devices, such as screen readers for the hearing impaired, mobile phones, set-top boxes, as well as the regular personal computer, separating the presentation of a website from its content allows developers to use the same content but present it differently depending on the device that is accessing it.

By separating presentation from content, an iPhone user, for example, may see a version of a website that is optimized for a small screen, while a Mac laptop user would see the full-size version. They would both see the same content presented in different ways.  You can imagine that a visually-impaired user could also benefit from a different presentation of the same content.

Use XHTML for content and CSS for presentation

This is the fundamental principle that we, as trendy web developers, will try to apply to our usage of XHTML and CSS code.  We will make every effort to use XHTML code purely for the content of our web pages.  And we will use CSS code to indicate how that content should be presented.

We will also do our best to keep CSS code in separate files from our XHTML code, so that the two are not mixed and mingled.  Our CSS code will be kept in files with a “.css” extension, while our XHTML code will be kept in “.html” files.

All is for the best in the best of all possible worlds

This all sounds great in theory, but the web is a messy place.  Given the tools available to us today, the pure separation of presentation from content will not allow us to achieve the sophisticated visual designs we might want our sites to have.  We will find that we must often structure our XHTML code in such a way that the CSS can easily make the page look the way we want it to, thus making the one somewhat dependent, or at least influenced, by the other.

Furthermore, this separation is predicated upon the notion that a site’s design has no importance to its meaning.  One could argue that many sites, especially heavily branded sites, rely primarily upon visual impact to impart their message.  The idea that a message is conveyed solely or primarily through text with no reliance upon presentation is to ignore the complexity of social interaction, and this principle probably says more about the people who profess such things than it does about technology.

But despite these shortcomings, as things stand today, there are still practical benefits to separating presentation from content as much as possible.  Although it is awkward at first, one gets better at it with practice, and it does save time and make maintenance of sites easier in the long run.  So you should do your best to separate content from presentation by using XHTML to demarcate your content, and CSS to indicate styles for the presentation of that content.

Today we will be reviewing and continuing to play with CSS selectors.  This post from my class last semester gives a good overview of the basic CSS selectors you can use to style particular parts of your web pages.

Once we are comfortable using CSS to style individual XHTML elements or groups of XHTML elements, we can begin to put together the layout of web pages.  Laying out a web page is a bit tricky, but there is a very specific technique for doing so.  This post outlines the CSS layout technique we will be mastering today.

And I highly encourage you to take the CSS tutorials on the w3schools website whenever you have a chance.  That website also has a very handy reference page for all CSS properties, which will be very useful once you are comfortable with the basic CSS concepts.

Here is a document that uses all of the most common XHTML elements.  You can see the end result of this code by clicking this link.

<?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 1 - HTML FRAME</title>
 </head>
 <body>
 <!--
 this is a comment
 it won't show up when you view this
 file in the web browser
 -->

 <!-- headings -->
 <h1>Class 1 - HTML Frame</h1>
 <h2>Less Important heading</h2>        
 <h3>Even less important</h3>

 <!-- paragraphs and text -->
 <p>This is a paragraph</p>

 <p>
 This is a paragraph
 <br />
 with line breaks
 <br />
 ... two of them
 </p>

 <p>
 This is a paragraph with a
 <a href="http://nyu.edu">link</a>
 </p>

 <p>
 This is a paragraph
 with a
 <strong>very important</strong> part
 </p>

 <!-- preformatted text that maintains spaces and line breaks -->
 <pre>
 NYU School of Continuing and Professional Studies
 48 Cooper Sq.
 New York, NY 10003
 </pre>

 <!-- images -->
 <img src="donkey.jpg" title="donkey" alt="image of donkey" />

 <!-- ordered list -->
 <ol>
 <li>item 1</li>
 <li>item 2</li>
 <li>item 3</li>
 <li>item 4</li>
 </ol>

 <!-- unordered list -->
 <ul>
 <li>item 1</li>
 <li>item 2</li>
 <li>item 3</li>
 <li>item 4</li>
 </ul>

 <!-- a table with 3 rows and 2 columns -->
 <table>
 <tr>
 <th>heading 1</th>
 <th>heading 2</th>
 </tr>
 <tr>
 <td>data for row 1 column 1</td>
 <td>data for row 1 column 2</td>
 </tr>
 <tr>
 <td>data for row 2 column 1</td>
 <td>data for row 2 column 2</td>
 </tr>
 </table>

 <!-- form controls -->
 <form>

 <!-- single-line text input -->
 <label for="t1">username</label>
 <input type="text" id="t1" name="t1" />

 <br />

 <!-- password input -->
 <label for="t2">password</label>
 <input type="password" id="t2" name="t2" />

 <br />

 <!-- drop-down list -->
 <select>
 <option>---select an option---</option>
 <option>option 1</option>
 <option>option 2</option>
 <option>option 3</option>
 </select>

 <br />

 <!-- radio buttons that are mutually exclusive -->
 <!-- note that the name field of each input tag is the same -->
 <p>Radio buttons with the same name will be
 mutually exclusive</p>
 <input type="radio" id="r1" name="r1">
 <label for="r1">radio 1</label>

 <input type="radio" id="r2" name="r1">
 <label for="r2">radio 2</label>

 <br />

 <!-- radio buttons that are NOT mutually exclusive -->
 <!-- note that the name field of each input tags is NOT the same -->
 <p>Radio buttons with the different names
 will not be mutually exclusive</p>
 <input type="radio" id="r3" name="r3">
 <label for="r3">radio 3</label>

 <input type="radio" id="r4" name="r4">
 <label for="r4">radio 4</label>

 <br />

 <!-- multi-line text input -->
 <textarea>this is some text in a multiline textarea</textarea>

 <br />

 <!-- checkboxes -->
 <input type="checkbox" id="c1" name="c1" />
 <label for="c1">checkbox 1</label>
 <br />

 <input type="checkbox" id="c2" name="c2" />
 <label for="c2">checkbox 2</label>
 <br />

 <!-- submit button, submits the form data -->
 <input type="submit" value="Submit form!" />

 <br />

 <!-- reset button, resets the form to its original state -->
 <input type="reset" value="Reset form" />

 <br />

 <!-- generic button -->
 <input type="button" value="Do nothing" />

 </form>

 <br />
 <br />

 <!-- an iframe puts one page within another page -->
 <iframe src="http://nyu.edu"></iframe>

 </body>
</html>

Here is the outline of the very minimal number of elements necessary for a blank XHTML web page. Recall that the first two lines are more or less a formality. Every XHTML document begins with an <html> tag and ends with a </html> tag.  Inside of this go a <head> and a <body> tag.  Inside of the <head> tag, there must be a <title> tag with the title of your page inside it.

<?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>The Title of Your Page</title>
 </head>
 <body>
   <!-- the contents of the page go here -->
 </body>
</html>

Your homework assignment in classs #2 was to convert the wireframes we came up with for our Actor’s home page into valid XHTML & CSS code.

Here is my solution to that problem.  You’ll see, if you copy the files from my server account, that there is one XHTML file, one CSS file, and two images that go along with this solution.

The files required for this solution are:

wires.html - the XHTML file
styles/wires.css - the CSS file
images/pixel.png - a placeholder for any images on the page
images/wires.png - a screenshot of the entire information architecture diagram

Here are the contents of the XHTML file, wires.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>Artist Home Page</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/wires.css" />
  </head>
  <body>

		<div id="container">
			<div id="headshot_box" class="column1">
				<img id="image_main" src="images/pixel.png" />
				<a href="#"><img class="image_thumb" src="images/dummy.png" /></a>
				<a href="#"><img class="image_thumb" src="images/dummy.png" /></a>
				<a href="#"><img class="image_thumb" src="images/dummy.png" /></a>
				<a href="#"><img class="image_thumb last" src="images/dummy.png" /></a>
				<div class="clear"></div>
			</div>
			<div id="title_box" class="column2">
				actor's name
			</div>
			<div id="tab_box" class="column2">
				<div class="tab"><a href="#">about</a></div>
				<div class="tab"><a href="#">work</a></div>
				<div class="tab"><a href="#">contact</a></div>
				<div class="tab selected"><a href="#">press</a></div>
				<div class="tab last"><a href="#">blog</a></div>
				<div class="clear"></div>
				<div id="tab_content">
					<p>Executive Summary</p>
				</div>
			</div>

			<div class="clear"></div>

			<div id="awards_box" class="column1">
				awards
			</div>
			<div id="video_box">
				<img class="video_main" src="images/dummy.png" />
				<a href="#"><img class="video_thumb first" src="images/dummy.png" /></a>
				<a href="#"><img class="video_thumb last" src="images/dummy.png" /></a>
			</div>
			<div id="dvd_box">
				link to buy DVD
			</div>
			<div class="clear"></div>
		</div>

  </body>
</html>

And here are the contents of the CSS file, styles/wires.css:

body {
	background-color: pink; /*the background color for the whole page */
}
img {
	border: 0px; /*remove any borders that the browser may automatically apply to images nested inside of <a> tags */
	background-image: url(../images/pixel.png);
}
div {
	border: 2px solid red; /*put a red border around all divs to see them easily */
	background-color: white;
}

div#container {
	/* background-image: url(../images/wires.png); */ /* i used the wireframe diagram as a background image on the container so I could more quickly see if my code matched the diagram... uncomment this code to see how it looks */
	margin: 0 auto;  /* this is a technique to center the main container on the page */
	padding: 31px;
	width: 900px;
	height: 660px;
}

div.clear {
	clear: both;
	border: 0px; /*since I've applied a border to all divs, I have to override it for the "clear" divs to make them invisible */
}

div.column1 {
	/* all boxes in the left column have some properties in common, so I've placed them in a CSS class */
	width: 271px;
	float: left;
	margin-right: 5px;
	margin-bottom: 6px;
}
div.column2 {
	/* all boxes in the right column have some properties in common, so I've placed them in a CSS class */
	width: 615px;
	float: left;
	margin-bottom: 6px;
}

/* BEGIN HEADSHOT BOX STYLES*/
div#headshot_box {
	height: 447px;
}
	div#headshot_box img#image_main {
		width: 271px;
		height: 369px;
		margin-bottom: 0px;
	}
	div#headshot_box img.image_thumb {
		float: left;
		width: 58px;
		height: 72px;
		margin-right: 13px;
	}
	div#headshot_box img.image_thumb.last {
		margin-right: 0px;
	}
/* END HEADSHOT BOX STYLES*/

/* BEGIN TITLE BOX STYLES*/
div#title_box {
	height: 142px;
}
/* END TITLE BOX STYLES*/

/* BEGIN TAB BOX STYLES*/
div#tab_box {
	height: 295px;
}
	div#tab_box div.tab {
		float: left;
		border-width: 0 2px 2px 0;
		border-color: green;
		padding-top: 10px;
		width: 121px;
		height: 31px;
		text-align: center;
		background-color: #f0f0f0;
	}
		div#tab_box div.tab a {
			color: black;
			text-decoration: none;
		}
		div#tab_box div.tab.last {
			border-right: none;
			width: 122px;
		}
		div#tab_box div.tab.selected {
			background-color: white;
			border-bottom: 1px solid white;
		}
			div#tab_box div.tab.selected a {
				color: black;
				font-weight: bold;
			}
	div#tab_box div#tab_content {
		border: 0px;
		background-color: white;
		padding: 20px;
		height: 210px;
	}
/* END TAB BOX STYLES*/

/* BEGIN AWARDS BOX STYLES*/
div#awards_box {
	height: 198px;
}
/* END AWARD BOX STYLES*/

/* BEGIN VIDEO BOX STYLES*/
div#video_box {
	float: left; /* since the video box does not inherit from either column1 or column2 class, we need to set its float and width properties specifically here */
	width: 250px;
	height: 198px;
	position: relative; /*by making this box's position=relative, we allow child elements of this to use absolute positioning relative to the position of this element */
}
	div#video_box img.video_main {
		width: 177px;
		height: 198px;
		float: left;
		margin-right: 10px;
	}
	div#video_box img.video_thumb {
		width: 60px;
		height: 80px;
	}
	div#video_box img.video_thumb.first {
		position: absolute; /*since this element's parent element is relatively positioned, this absolute positioning is relative to the position of that parent element, NOT relative to the top-left of the entire browser window */
		right: 0px;
		top: 0px;
	}
	div#video_box img.video_thumb.last {
		position: absolute; /*since this element's parent element is relatively positioned, this absolute positioning is relative to the position of that parent element, NOT relative to the top-left of the entire browser window */
		right: 0px;
		bottom: 0px;
	}
/* END VIDEO BOX STYLES*/

/* BEGIN DVD BOX STYLES*/
div#dvd_box {
	margin-left: 10px;
	float: left; /* since the dvd box does not inherit from either column1 or column2 class, we need to set its float and width properties specifically here */
	width: 351px;
	height: 198px;
}
/* END DVD BOX STYLES*/

You can see how the files display in the browser by clicking here.

Your homework assignment this week is tripartite:

1. Go through the CSS tutorial on w3schools.com.  Also view the examples on their site, and take the CSS Quiz.
2. Convert the Artist Homepage Wireframe we created in Class #1 into XHTML and CSS code.  Post the results of your efforts on your blog.
3. While keeping a copy of the result of your efforts from step 2, make a new copy of your code and use the styles you learned about in step 1 to make your Artist Homepage look as pretty as possible.  Use real images, and real text to make the page seem like something more than a class exercise.

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.