Web Programming Step by Step

Chapter 2
HTML Basics

Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller.

Valid XHTML 1.1 Valid CSS!

2.1: Basic HTML

Hypertext Markup Language (HTML) (2.1.1)

XHTML

Structure of an XHTML page (2.1.2) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.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>Chapter 2: HTML Basics</title>

Paragraph: <p> (2.1.3)

paragraphs of text (block)

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

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

headings to separate major areas of the page (block)

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

Horizontal rule: <hr>

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

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

Block and inline elements (explanation)

elements

More about HTML tags

Links: <a> (2.1.4)

links, or "anchors", to other pages (inline)

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

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>
  • 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>

Images: <img>

inserts a graphical image into the page (inline)

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

More about images

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

Line break: <br>

forces a line break in the middle of a block 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>
  • br should not be used to separate paragraphs or used multiple times in a row to create spacing

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

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

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

Phrase elements : <em>, <strong>

em: emphasized text (usually rendered in italic)
strong: strongly emphasized text (usually rendered in bold) 

<p>
	HTML is <em>really</em>,
	<strong>REALLY</strong> fun!
</p>

2.2: More HTML Elements

Unordered list: <ul>, <li> (2.2.1)

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

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

More about unordered lists

<ul>
	<li>Simpsons:
		<ul>
			<li>Homer</li>
			<li>Marge</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) 

<p>RIAA business model:</p>
<ol>
	<li>Sue customers for copying music</li>
	<li>???</li>
	<li>Profit!</li>
</ol>
  • 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>

Common Error: Improper nested list placement

<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)
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. I owned that newbie!)</dd>
	<dt>frag</dt> <dd>a kill in a shooting game</dd>
</dl>

Tables: <table>, <tr>, <td> (2.2.2)

A 2D table of rows and columns of data (block element) 

<table>
	<tr><td>1,1</td><td>1,2 okay</td></tr>
	<tr><td>2,1 real wide</td><td>2,2</td></tr>
</table>
1,11,2 okay
2,1 real wide2,2

Table headers, captions: <th>, <caption> 

<table>
	<caption>My important data</caption>
	<tr><th>Column 1</th><th>Column 2</th></tr>
	<tr><td>1,1</td><td>1,2 okay</td></tr>
	<tr><td>2,1 real wide</td><td>2,2</td></tr>
</table>
My important data
Column 1Column 2
1,11,2 okay
2,1 real wide2,2

Quotations: <blockquote> (2.2.3)

a lengthy quotation (block) 

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

Inline quotations: <q>

a short quotation (inline)

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

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)

HTML Character Entities (2.2.4)

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

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

Computer code: <code>

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>

Preformatted text: <pre>

a large section of pre-formatted text (block)

<pre>
         Steve Jobs speaks loudly
            reality distortion
           Apple fans bow down
</pre>

Using pre and code together

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

2.3: Web Standards

Web Standards (2.3.1)

W3C XHTML Validator (2.3.2) 

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

Validate

Web page metadata: <meta> (2.3.3)

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 aid browser / web server

<meta http-equiv="Content-Type" 
 content="type of document (character encoding)" />
<meta http-equiv="refresh"
 content="how often to refresh the page (seconds)" />
</head>

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>