Standard XHTML 1.1 Document Structure

XML declarations:

<?xml version ="1.0" encoding="utf-8" ?>
<!-- as not supported by some old 
   browsers validators doesn't usually check this -->

SGML DOCTYPE. This says which Document Type Definition will be used:

<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

The XHTML document:

<html xmlns="http://www.w3.org/1999/xhtml" >
		<!-- might have namespaces for other things like SVG -->
<head>
	<title>name of my document</title></head>
<body><!--actually page stuff--></body>
</html>

Minimal HTML 5 Document

In HTML 5 a lot of the syntax which is hard for humans to remember has been stripped-away.
Notice the !DOCTYPE is much simple, and notice how we specify the character set:

<!DOCTYPE html>
<html>
    <head>
        <title>Simple HTML</title>
        <meta charset="utf-8" />
    </head>
    <body>
    <h1>Example HTML 5 document.</h1>
    </body>
</html>

This basic structure will also work for XHTML 5 -- we just need to follow XML conventions for closing tags when we start to add content.

The head of an XHTML or HTML5 document

At a minimum the head of an html document needs to have within it a <title></title>.
Additional allowable tags include:
link
associate another document with this current document. Might want to do this to associate a stylesheet or to give a favicon.ico
```
Ex:  
  <link rel="shortcut icon"   
    href="http://www.cs.sjsu.edu/faculty/pollett/favicon.ico" />
```
base
specify a base directory for all references on the page:
```
Ex: 
  <base href="http://www.my.com/stuff/"  /> 
```
Now a link <a href="file.html" >file</a> would have the implicitly base address in front of it.
script and style
we'll talk about these next week specifies information about this page. Let's look at this more

Kinds of Meta Information

Head's of documents can also have meta tags.

<meta name="Author" content="who wrote the page" />
<meta name="description" content="how I would like the search 
   engines to describe my page. " />
<meta name="keywords" content="cool site" /> 
   <!--Key terms search engines should index this site with. 
    Unfortunately, not supported except maybe by inktomi -->
<meta name="ROBOTS" content="comma separated list of 
   what would like crawler to do" /> 
   <!-- Example commands NOINDEX, NOFOLLOW, NOCACHE, NOSNIPPET, NOODP, NOYDIR . Some of these commands 
     can also be specified in a robots.txt file. ROBOTS and these values are case insensitive.-->

Rather than use ROBOTS in the above you can also give directives for specific robots. For example, you could replace robot with googlebot.

In addition to the above meta tags, we will see later in the semester how aspects of how the screen renders in a mobile phone can be affected by meta tags.

More Meta Information

You can also use meta tags to give give the equivalent to http header fields:
```
<meta http-equiv="foo" content="bar" />
```
is treated by a browser as if the response header field:
```
foo: bar
```
was sent.

For example:

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Expires" content="Wed, 30 Aug 2006 14:25:27" />
<meta http-equiv="refresh" content="10;url=http://www.cs.sjsu.edu/" />

The body of a web page

There are two basic kinds of elements that can appear within the body of a web page.
block level elements
basic units of layout.

inline level elements
controls formatting within blocks.
A block element is essential a rectangular region on the web browser screen.
Just as a sculptor needs to know how to fashion surfaces depending on the medium like marble or wood -- you too, will need to know how to generate more sophisticated shapes using this basic element.

Getting Round Objects and Other Effects

From the earliest days of the web, people used tricks with background images and foreground images and the width and height attributes of the img tag to achieve more fixed spacing, rounded objects, lines, gradients, etc.
For example, if your block level element allowed you to specify a background image (effect still used in CSS), you can easily fake circles.
Nowadays, there is a CSS way to achieve rounded corners: border-radius, but it is not supported very well (I am looking at you IE).

More effects

A single white pixel image could have its width and height scaled to achieve a region of white space; a single black pixel could be stretched to make lines.
A single line with a color gradient could be stretched to apply a background color gradient to an element.
You might also align images around a block level element to make interesting borders.
Again, each of these effects can now be achieved by stylesheets, the point though is that by thinking outside the box a little one can achieve a wide variety of graphical effects.

What tags can go into the body of a web page?

<h1></h1> - <h6></h6>

heading tags to give a heading title for a section. These must be properly nested.

  <h1>heading1</h1> 
	<h2>heading 2</h2>
		<h3>heading</h3>
  <!--this is okay -->

<div></div>

used to specify a related section of text.

<p></p>

used to specify a paragraph.

<blockquote></blockquote>

used to indent large quotations.

<ul></ul> <ol></ol>

unordered and ordered lists. Has a type tag to specify things like circle, square bullets,, A, I, a, i 1. Elements in list are specified with <li></li>. There are also <dl></dl> definition lists.

<form></form>

used to make a web form.

<table></table>

used to make a table in a web page.

More HTML tags (Inline tags)

These next tags might appear within many of the block level tags we learned last day:
Anchors
```
<a href="http://www.somewhere.com/">somewhere</a>
```
- For WAI compliance should always separates links with at least a little text, like a period. You might also want to indicate if a link is offsite or is to a non HTML mime-type.
- Links within pages are given with <a href="#relative link">somewhere in this page with id="relative link"
Images
```
<img src="myphoto.gif" alt="This is a picture of me" />
```
Span

Allows you to style a region of text or to specify a tooltip for a region of text. <span title="what you see when you mouse hover">This section of text</span>

Presentation elements

<br /> --line break, <hr /> --horizontal rule, <big></big>, <small></small>, <b></b>, <u></u>, <i></i>, <tt></tt>,<sub></sub>, <sup></sup>

XHTML and HTML 5

Outline