XHTML and HTML 5

CS174

Chris Pollett

Sep. 1, 2010

Outline

Simple XHTML and HTML5 docs
The head of the document
The body of the document
Quiz
Generalities -- Block versus Inline elements
Common block tags
Common inline tags

Standard XHTML 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>

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

<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, 
     can also do in a robots.txt file-->

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.

More on Block level elements

In the original HTML, the layout of block level elements was non-overlapping:
In Netscape 3 layers were introduced to allow overlapping layouts. Nowadays the block level elements can be overlaid using styles.

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.

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.