WDIM268 Week 2 (Summer 2010)

HyperText Markup Language

HTML

≈
SGML
Standard Generalized Markup Language

Extensible HyperText Markup Language

XHTML

≈
XML
Extensible Markup Language

Encourages
“well-formed” content.

Be sure to include a W3C

DTD
Document Type De nition

and a couple other things.

<!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>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>(Page title)</title>
</head>
<body>

(Page content)

</body>
</html>

<br>

<br/>

If a tag is empty and requires no closing
tag, end it with a self closing slash.

<STRONG>

<strong>

XHTML is case-sensitive. Go easy on the
CAPSLOCK key.

selected

selected=selected

selected=′selected′

selected=″selected″

Attribute values must be provided, with the
value enclosed in quotes.

font
s frameset
iframe
frame
menu u
dir
applet basefont noframes

isindex strike
center

Don’t use these tags anymore.

Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nam nulla est, ullamcorper nec
semper ac, bibendum at elit. Nulla dapibus facilisis
sapien, quis feugiat tortor accumsan eu. Cras
porttitor, nisl nec tempor luctus, ligula metus
luctus ante, in malesuada justo massa eu velit.

Block


Inline


Inline-Block (Yeah, I know...)

<ol>
<li>Thing 1</li>
<li>Thing 2</li>
</ol>

Sometimes, additional
tags may be needed if
there is no appropriate
semantic tag or additional
divisions of content are
required.

span is your default inline tag

The foundational layer is HTML, your text and markup.
Ideally, your content (and accompanying annotations and
hierarchy) should be able to stand alone.

<html />

User agents capable of applying presentational rules to
your HTML will then apply CSS, if provided.

css { }

If the user agent is sophisticated enough to handle
JavaScript (and doing so makes sense for the agent’s
context), your client-side scripts can affect your markup
and styles.

javaScript();

In cases where typical web technologies lack functionality your
experience needs, plugins (Flash, Silverlight) may be applied.

Your goal: Make each
layer as functional as
possible even when
subsequent layers are
unavailable.

Updates will always
impact multiple layers.

Fallbacks won’t always
be graceful.

Your information will be
bound by your own site’s
requirements.

WDIM268 Week 2 (Summer 2010)

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (9)

Similar to WDIM268 Week 2 (Summer 2010)

Similar to WDIM268 Week 2 (Summer 2010) (20)

Recently uploaded

Recently uploaded (20)

WDIM268 Week 2 (Summer 2010)