Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp and Jessica Miller.
<
element>
content </
element>
<p>This is a paragraph</p>
<html> <head> information about the page </head> <body> page contents </body> </html>
.html
<!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>
DOCTYPE
and xmlns
additions tell the browser to interpret our page's code as XHTML, the latest/greatest standard version of the language<title>
describes the title of the web page
<title>Chapter 2: HTML Basics</title>
head
of the page<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>
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.
body
of the page<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>
<hr>
a horizontal line to visually separate sections of a page (block)
<p>First paragraph</p> <hr /> <p>Second paragraph</p>
First paragraph
Second paragraph
/>
<
element attribute="
value"
attribute="
value">
content </
element>
<a href="page2.html">Next page</a>
<
element attribute="
value"
attribute="
value" />
<hr />
<img src="bunny.jpg" alt="pic from Easter" />
<a>
(2.1.4)
links, or "anchors", to other pages (inline)
<p> Search <a href="http://www.google.com/">Google</a> or our <a href="lectures.html">Lecture Notes</a>. </p>
Search Google or our Lecture Notes.
href
attribute to specify the destination URL
p
or h1
<img>
inserts a graphical image into the page (inline)
<img src="images/gollum.jpg" alt="Gollum from LOTR" />
src
attribute specifies the image URLalt
attribute describing the image<a href="http://theonering.net/"> <img src="images/gandalf.jpg" alt="Gandalf from LOTR" title="You shall not pass!" /> </a>
a
anchor, the image becomes a linktitle
attribute is an optional tooltip (on ANY element)<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>
Teddy said it was a hat,
So I put it on.
Now Daddy's sayin',
Where the
heck's the toilet plunger gone?
br
(guideline: >= 2 in a row is bad)
br
should not be used to separate paragraphs or used multiple times in a row to create spacing<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>
HTML is really, REALLY fun!
<p> HTML is <em>really, <strong>REALLY</em> lots of</strong> fun! </p>
<!--
... -->
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>
CSE courses are a lot of fun!
--
<p> <a href="http://validator.w3.org/check/referer"> <img src="http://www.w3.org/Icons/valid-xhtml11" alt="Validate" /> </a> </p>
<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>
<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>
<ol>
ol
represents a numbered list of items (block)
<p>RIAA business model:</p> <ol> <li>Sue customers</li> <li>???</li> <li>Profit!</li> </ol>
RIAA business model:
<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>
<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>
As 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.
<q>
a short quotation (inline)
<p>Quoth the Raven, <q>Nevermore.</q></p>
Quoth the Raven, Nevermore.
<p>Quoth the Raven, "Nevermore."</p>
We don't use " marks for two reasons:
"
<q>
allows us to apply CSS styles to quotations (seen later)a way of representing any Unicode character within a web page
character(s) | entity |
---|---|
< > | < > |
é è ñ | é è ñ |
™ © | ™ © |
π δ Δ | π δ Δ |
И | И |
" & | " & |
&
on a web page?<p> <a href="http://google.com/search?q=marty&ie=utf-8"> Search Google for Marty </a> </p>
<code>
a short section of computer code (usually shown in a fixed-width font)
<p> The <code>ul</code> and <code>ol</code> tags make lists. </p>
The ul
and ol
tags make lists.
<pre>
a large section of pre-formatted text (block)
<pre> Steve Jobs speaks loudly reality distortion Apple fans bow down </pre>
Steve Jobs speaks loudly reality distortion Apple fans bow down
code
tags?<meta>
(2.3.3)
information about your page (for a browser, search engine, etc.)
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="description" content="Authors' web site for Building Java Programs." /> <meta name="keywords" content="java, textbook" />
head
section of your XHTML pagemeta
tags often have both the name
and content
attributes
meta
tags use the http-equiv
attribute instead of name
meta
tag Content-Type
stops validator "tentatively valid" warnings
<link href="filename" type="MIME type" rel="shortcut icon" />
<link href="yahoo.gif" type="image/gif" rel="shortcut icon" />
link
tag, placed in the head
section, attaches another file to the page
favicon.ico
in the root of the web server (info)<p> <font face="Arial">Welcome to Greasy Joe's.</font> You will <b>never</b>, <i>ever</i>, <u>EVER</u> beat <font size="+4" color="red">OUR</font> prices! </p>
Welcome to Greasy Joe's. You will never, ever, EVER beat OUR prices!
b
, i
, u
, and font
are discouraged in strict XHTML
<link>
(3.1.2)
<head> ... <link href="filename" type="text/css" rel="stylesheet" /> ... </head>
<link href="style.css" type="text/css" rel="stylesheet" />
.css
file (preferred)selector { property: value; property: value; ... property: value; }
p { font-family: sans-serif; color: red; }
*
selects all elements
p { color: red; background-color: yellow; }
This paragraph uses the style above.
property | description |
---|---|
color
|
color of the element's text |
background-color
|
color that will appear behind the element |
p { color: red; } h2 { color: rgb(128, 0, 196); } h4 { color: #FF8800; }
This paragraph uses the first style above.
aqua
, black
, blue
, fuchsia
, gray
, green
, lime
, maroon
, navy
, olive
, purple
, red
, silver
, teal
, white
(white), yellow
property | description |
---|---|
font-family
|
which font will be used |
font-size
|
how large the letters will be drawn |
font-style
|
used to enable/disable italic style |
font-weight
|
used to enable/disable bold style |
Complete list of font properties |
font-family
p { font-family: Georgia; } h2 { font-family: "Courier New"; }
This paragraph uses the first style above.
font-family
p { font-family: Garamond, "Times New Roman", serif; }
This paragraph uses the above style.
font-family
value ensures that every computer will use a valid fontfont-size
p { font-size: 14pt; }
This paragraph uses the style above.
px
) vs. point (pt
) vs. m-size (em
)16px
, 16pt
, 1.16em
xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
, smaller
, larger
90%
, 120%
pt
specifies number of point, where a point is 1/72 of an inch onscreenpx
specifies a number of pixels on the screenem
specifies number of m-widths, where 1 em is equal to the font's current sizefont-weight
,
font-style
p { font-weight: bold; font-style: italic; }
This paragraph uses the style above.
normal
to turn them off (e.g. headings)