Hypertext Markup Language (HTML)

CSE 190 M (Web Programming), Spring 2007

University of Washington

Reading: Sebesta Ch. 2 sections 2.1 - 2.4.5, 2.4.7 - 2.4.9, 2.5 - 2.6.1, 2.7 - 2.7.2

Except where otherwise noted, the contents of this presentation are © Copyright 2007 Marty Stepp and are licensed under the Creative Commons Attribution 2.5 License.

Valid XHTML 1.0 Strict Valid CSS!

Hypertext Markup Language (HTML)

More about HTML tags

Structure of an HTML page

<html>

<head>
information about the page
</head>

<body>
page contents
</body>

</html>

XHTML

Structure of an XHTML page

<!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">

<head>
information about the page
</head>

<body>
page contents
</body>

</html>

Page title: <title>

describes the title of the web page

<title>CSE 190 M: HTML</title>

Block-level and inline elements (explanation)

Paragraph: <p>

paragraphs of text (block-level)

<p>You're not your job.
You're not how much money you have in the bank.
You're not the car you drive.   You're not the contents 
of your wallet. You're not your         khakis.  You're 
the all-singing, all-dancing crap of the world.</p>

You're not your job. You're not how much money you have in the bank. You're not the car you drive. You're not the contents of your wallet. You're not your khakis. You're the all-singing, all-dancing crap of the world.

Headings: <h1>, <h2>, ..., <h6>

headings to separate major areas of the page (block-level)

<h1>University of Whoville</h1>
<h2>Department of Computer Science</h2>
<h3>Sponsored by Micro$oft</h3>

University of Whoville

Department of Computer Science
Sponsored by Microsoft

Anchors: <a>

anchors denote links to other pages (inline)

<p>Search 
<a href="http://www.google.com/">Google</a> now!</p>

Search Google now!

More about anchors

<p><a href="1-internet.html">Lecture Notes 1</a></p>
<p><a href="http://www.google.com/" 
title="Search">Google</a></p>

Lecture Notes 1

Google

  • to make links that open in new windows, we'll need to learn Javascript (later)

Nesting tags

Bad:

<p><a href="1-internet.html">Lecture Notes 1</p>
<p>This text also links to Lecture Notes 1</a></p>

Line break: <br>

forces a line break in the middle of a block-level element (inline)

<p>Teddy said it was a hat,<br />So I put it on.</p>
<p>Now Daddy's sayin',<br />
Where the heck's the toilet plunger gone?</p>

Teddy said it was a hat,
So I put it on.

Now Daddy's sayin',
Where the heck's the toilet plunger gone?

  • br should not be used to separate paragraphs or used multiple times in a row to create spacing

Horizontal rule: <hr>

a horizontal line to visually separate sections of a page (block-level)

<p>First paragraph</p>
<hr />
<p>Second paragraph</p>
<hr />

First paragraph

Second paragraph

Images: <img>

inserts a graphical image into the page (inline)

<p><img src="gollum.jpg" alt="Gollum from LOTR" /></p>

Gollum from LOTR

More about images

<p><a href="http://theonering.net/">
<img src="gandalf.jpg" alt="Gandalf from LOTR"
title="You shall not pass!" /></a></p>

Gandalf from LOTR

Practice Problem

Bilbo Baggins Frodo Baggins
Bilbo Baggins (Wiki) and Frodo Baggins (Wiki)

Result:Interaction Pane:

Comments: <!-- ... -->

comments to document your HTML file or "comment out" text

<!-- My web page, by Suzy Student 
CSE 190 D, Spring 2007 -->
<p>CSE courses are <!-- NOT --> a lot of fun!</p>

CSE courses are a lot of fun!

Unordered list: <ul>, <li>

ul represents a bulleted list of items (block-level)
li represents a single item within the list (block-level)

<ul>
<li>No shoes</li>
<li>No shirt</li>
<li>No problem!</li>
</ul>

More about unordered lists

<ul>
<li>Simpsons:
	<ul>
	<li>Bart</li>
	<li>Lisa</li>
	</ul>
</li>
<li>Family Guy:
	<ul>
	<li>Peter</li>
	<li>Lois</li>
	</ul>
</li>
</ul>

Ordered list: <ol>

ol represents a numbered list of items (block-level)

<p>RIAA business model:</p>
<ol>
<li>Sell music on easily copyable discs</li>
<li>Sue customers for copying music</li>
<li>???</li><li>Profit!</li></ol>

RIAA business model:

  1. Sell music on easily copyable discs
  2. Sue customers for copying music
  3. ???
  4. Profit!
  • we can make lists with letters or Roman numerals using CSS (later)

Common Error: Not closing a list

<ul>
<li>No shoes</li>
<li>No shirt</li>
<li>No problem!</li>

<p>Paragraph after list...</p>

Paragraph after list...

Common Error: Improper nested list placing

<ul>
<li>Simpsons:</li>
	<ul>
	<li>Bart</li>
	<li>Lisa</li>
	</ul>
</li>
<li>Family Guy:
	<ul>
	<li>Peter</li>
	<li>Lois</li>
	</ul>
</ul>

Definition list: <dl>, <dt>, <dd>

dl represents a list of definitions of terms (block-level)
dt represents each term, and dd its definition

<dl>
<dt>newbie</dt><dd>one who does not have mad skills</dd>
<dt>own</dt><dd>to soundly defeat
 (e.g. &quot;I owned that newbie!&quot;)</dd>
<dt>frag</dt><dd>a kill in a shooting game</dd>
</dl>
newbie
one who does not have mad skills
own
to soundly defeat (e.g. "I owned that newbie!")
frag
a kill in a shooting game

Quotations: <blockquote>

a lengthy quotation (block-level)

<p>As Lincoln said in his famous Gettysburg Address,</p>
<blockquote>
<p>Fourscore and seven years ago, our fathers brought forth
on this continent a new nation, conceived in liberty, and 
dedicated to the proposition that all men are created equal.
</p></blockquote>

As Abraham Lincoln said in his famous Gettysburg Address,

Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.

Quotations: <q>

a short quotation (inline)

<p>Quoth the Raven, <q>Nevermore.</q></p>

Quoth the Raven, Nevermore.

We don't use " marks for two reasons:

  1. XHTML shouldn't contain literal quotation mark characters; they should be written as &quot;
  2. using <q> allows us to apply CSS styles to quotations (seen later)

Phrase elements: <em>, <strong>, <code>

em: emphasized text (usually rendered in italic)
strong: strongly emphasized text (usually rendered in bold)
code: a short section of computer code (usually rendered in a fixed-width font)

<p>The <code>ul</code> and <code>ol</code> tags make lists.</p>
<p>HTML is <em>really</em>, <strong>REALLY</strong> fun!</p>

The ul and ol tags make lists.

HTML is really, REALLY fun!

Preformatted text: <pre>

a large block of code text in a fixed-width font (block-level)

<pre>
    public static void main(String[] args) {
        System.out.println("Hello, world!");
    }
</pre>

    public static void main(String[] args) {
        System.out.println("Hello, world!");
    }

Practice Problem

Interaction Pane:

kitten 1 KITTENS! kitten 2

Why I love them:

  1. They are little.
  2. They make adorable sounds:
    • Meow!
    • Purr!
  3. JUST LOOK AT THEM!

W3C XHTML Validator

<p><a href="http://validator.w3.org/check/referer">
<img src="http://www.w3.org/Icons/valid-xhtml10" 
alt="Validate" /></a></p>

Validate

Practice Problem

Web page metadata: <meta>

information about your page (for a browser, search engine, etc.)

<meta name="description" 
 content="Authors' web site for Building Java Programs." />
<meta name="keywords" content="java, textbook" />
<meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />

meta element to describe the page

<head>
<meta name="author"
 content="web page's author" />
<meta name="revised"
 content="web page version and/or last modification date" />
<meta name="generator"
 content="the software used to create the page" />
</head>

meta element to aid search engines

<head>
<meta name="description"
 content="how you want search engines to display your page" />
<meta name="keywords"
 content="words to associate with your page (comma-separated)" />
</head>

meta element to aid browser / web server

<meta http-equiv="refresh"
 content="how often to refresh the page (seconds)" />
</head>
<meta http-equiv="Content-Type" 
 content="what type of document this is 
 (may include internationalization information such as character encoding)" />

Favorites icon ("favicon")

<link rel="shortcut icon" type="MIME type" href="filename" />

<link rel="shortcut icon" type="image/gif" href="cse.gif" />

favicon favicon

Internet media ("MIME") types

classifications of data that travel over the internet

HTML Character Entities

a way of representing any Unicode character within a web page

character(s)entity
< >&lt; &gt;
é è ñ&eacute; &egrave; &ntilde;
™ ©&trade; &copy;
π δ Δ&pi; &delta; &Delta;
И&#1048;
" &&quot; &amp;

HTML-encoding text

<p><a href=
"http://www.google.com/search?q=marty+stepp&ie=utf-8&aq=t">
Search Google for Marty</a></p>

&lt;p&gt;&lt;a href=
&quot;http://www.google.com/search?q=marty+stepp&amp;ie=utf-8&amp;aq=t&quot;&gt;
Search Google for Marty&lt;/a&gt;&lt;/p&gt;