WEB120 » Week 1

Update: November 21st, 2011

Assignment 1: XHTML Portal

Create a class project page to hold your assignments.

  • This page must be valid XHTML 1.0 Strict. (validate here)
  • Your page must have a photo or avatar
  • Your page must have a numbered list (to hold your assignment links)
  • Upload it to either Edison or your own server space.
  • Email me a link to your assignment page by end of class next Tuesday!

(We will create an example of this in class)

Assigned Reading

Book: CSS Mastery
Chapter 1: Setting the Foundations
Section: Structuring your code
Pages: 1-11

Recommended Reading:

Example Pages

XHTML Template (right click and choose "Save Link As")

Playing with XHTML

Lecture Notes

Introductions

Using Dreamweaver

Managing Your Websites with Dreamweaver (via Mike Sinkula)

HTML

The web began with no rules. Any browser could define what it wanted to be able to parse and several sets of HTML emerged. Eventually, groups like the World Wide Web Consortium (W3C) and the Web Standards Project (WaSP) drove browsers to reach a consensus in their compatibility and standard definitions for HTML.

XML

XML (EXtensible Markup Language) is a lot like HTML. They are both markup languages but XML was built as a language that can be used to define and act as a base for other markup languages. In XML, you create organized blocks using tags and attributes just like HTML. The main difference is that XML can be programmatically parsed because it follows a strict set of rules that allow it to be easily converted into a data array.

All valid XML documents begin with an XML declaration, before any other code. This defines the XML version and the character encoding of the document:

<?xml version="1.0" encoding="UTF-8"?>

A valid XML document will also contain an XML Namespace declaration, supplied as the 'xmlns' attribute of the root tag. The root node may also have a language defined as both the xml:lang and lang attributes of the root element, although the document will validate without this:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Meta tags in the <header> element are all optional (but a good idea):

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

XHMTL

XHTML is basically a more structured and rigidly ruled version of HTML 4.01 using the sytax of XML.

By writing your HTML pages in XHTML, you can be certain that your markup will be treated correctly by all standards complaint browsers and you can easily validate your code.

Some things that might be new to you from working with HTML:

  • All tags must be lowercase
    • <p></P> is invalid. Use <p></p>
  • Every tag must be properly closed
    • <p> must be followed by </p> at some point
    • all single use tags like <br> now have a closing mark within them: <br />
  • Every tag must be properly nested
    • <p><i></p></i> is invalid

The Doctype

Because XHTML is just an extension of the XML specification, XHTML documents are just XML documents with a specific type defined at the top of the document, telling the browser what is going to be acceptable in the document.

W3Schools has a list of Doctypes

In general, we will be using the XHTML strict doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Class Exercise: XHTML Template & Folder Structure

folders

There are as many ways to structure a website's folders as their are websites on the internet. It will save you massive amounts of time if you create or adopt a standard and stick to it (but feel free to evolve your standard as you evolve your skills). Here is my setup (let's create this now):

./
img/
css/
js/
   lib/
media/
   (pdf/)
   (mp3/)
   ...etc... (as needed)
index.html
robots.txt
favicon.ico

index.html

Let's build a basic XHTML document and run it through the validator.

The full template:

<?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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Valid XHTML Document!</title>
	</head>
	<body>
	</body>
</html>

Some Useful XHTML Elements

  • h1, h2, etc.
  • ul, ol, and dl
  • strong and em
  • blockquote and cite
  • abbr, acronym, and code
  • fieldset, legend, and label
  • caption, thead, tbody, and tfoot

IDs and Class Names

  • Any element may have an ID
  • Each ID must be unique within the page
  • Any element may have one or more classes
  • Multiple class names on an element are separated spaces
  • Classes are not unique

Validation

Your pages will always need to be validated using the w3c Validation tool: http://validator.w3.org/

Class Exercise: Playing with XHTML

Let's open up Dreamweaver and start playing with XHTML and Firebug.

  1. Raven
    October 1st, 2009 at 12:13

    Dreamhost is offering a special deal -- a year of hosting for $9.24 and free domain registration -- which expires tonight (Oct 1st) at midnight.

    Use this link to get the promo deal.
    http://www.dreamhost.com/promo-777.html#

You must be logged in to post a comment.
TOP