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

Lecture Notes

Introductions

Who am I? http://adam.shadowpuppet.net
Who are you?
What do you want to get out of this class?

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:

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

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
- is invalid. Use
Every tag must be properly closed
- must be followed by at some point
- all single use tags like now have a closing mark within them:
Every tag must be properly nested
- 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.

One thought on “Week 1”

Raven says:

2009/10/01 at 12:13 pm

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#

Log in to Reply

Intellectual Pirates

Week 1

Assignment 1: XHTML Portal

Assigned Reading

Recommended Reading:

Example Pages