HTML
HTML
• Hypertext Markup Language (HTML) a
tag-based language used to format
static content, which is unchanging
information.
• Dynamic content, on the other hand,
uses scripting languages, applets, Flash
files to interact with the user.
– We will get to all that later in the semester.
2
HTML
• HTML files have file name extensions of
either .htm (from the older threecharacter file name extension limit) or
.html.
• HTML files are ASCII files; that is, textbased files.
3
HTML History
• HTML, developed by Tim Boerners-Lee,
and (this is important!) charitably
released in 1989 for free use, no
copyright restrictions.
• Boerners-Lee formed the W3C to manage
the specs.
• Three releases: 1.0, 2.0, 3.0, 4.0 (1998)
4
HTML History
• Then there was XHTML 1.0 (2000):
– Created newer (many silly) standards (more
later).
– Incorporated support for XML (a data
transport language).
– Was XHTML really all that different?
Certainly not different enough to support the
claims that it was a whole new language.
5
HTML History
• XHTML 1.0 was the universal standard,
for a while.
• Then two competing groups spent several
years working on two competing
standards, HTML5 and XHTML 2.0.
• It actually got nasty – each group hated
the other.
6
HTML History
• XHTML 2.0 first:
– The XHTML 2.0 group, authorized by the
W3C, insisted it wasn’t HTML anymore, it
was a whole new language. (Not.)
– I heard a couple of them present at a
conference –pretty darn arrogant.
– Though XHTML 2.0 was essentially HTML, it
was not fully backwards compatible with
older websites.
7
HTML History
• HTML5:
– In 2004, a Boerners-Lee group reintroduced the idea
of evolving HTML4 into HTML5.
– W3C rejected that proposal, continuing with XHTML.
– Apple, Mozilla, and Opera (and Boerners-Lee)
formed a group called WHATWG to continue
evolving HTML5 anyway. Guiding principle:
• Technologies need to be backwards compatible and
oriented toward the way the world is, not the way we want
the world to be.
8
HTML History
• HTML5, continued:
– In 2006, the W3C agreed to participate in
development of HTML5.
– Finally, in Spring 2010, Microsoft joined the
HTML5 working group.
– In Spring 2011, the W3C stopped all
development on XHTML 2.0 and declared
HTML 5.0 the future standard.
– All major browser manufacturers now on
board.
9
HTML History
• HTML5, continued:
– HTML5 will incorporate many of the best
elements of XHTML 2.0.
– Messier but more reasonable specifications,
in order to be backward compatible with the
quite messy evolution of HTML over the
decades.
– Invalid code that would have been just
ignored in the past will be disallowed and
10
flagged as errors in the future.
HTML History
• HTML5, continued:
– Parts of HTML5 supported in newest
browsers, some parts not available for many
years (2020?)
– This may be the last release number – just
an evolution, bit by bit, from now on.
– HTML5.0 evolving specifications
http://dev.w3.org/html5/spec/Overview.html
11
HTML History
– HTML5 includes/will include support for:
• Graphic effects like filters, rounded corners, and
enhanced transparency.
• Standardized sections such as “navigation” and
“footer.”
• Scalable Vector Graphics (SVG): vector and raster
images and their behaviors defined in XML text
files, so they can be scripted.
• <canvas> (a drawing screen) – raster only, so
drawn elements cannot be manipulated in an
SVG-like way.
12
HTML History
• Native animation and video (replacing Flash???).
– “Flash Professional Toolkit for CreateJS” plug-in allows
you to create in Flash but export to HTML5/JavaScript:
http://www.adobe.com/devnet/createjs/articles/usingflash-pro-toolkit-createjs.html
• <video> tag
• Thirty new tags, plus lots of new attributes for
existing tags.
13
HTML History
• HTML5 and “Standards”
– Trying to avoid the “browser wars” of the
past, when we had to “sniff the browser” and
write different versions of the page for
different browsers.
– BUT… the standards will be implemented at
different rates by different browser
manufacturers over the next decade, so still
problematic.
14
HTML History
– Probably even more problematic now than 5
years ago, because mobile browsers, too.
– For further discussion, see
• http://www.adobe.com/inspire/2012/04/whatare-web-standards.html and
• http://www.adobe.com/inspire/2012/08/webstandards-primer.html?trackingid=JZYSJ
– IE 8 supports only bits of HTML5 standards –
IE 9 and up are more compliant.
– What to do? Use plug-ins or degrade
gracefully.
15
HTML History
– Resources (more on some of these in JavaScript lectures):
• Demos at Chrome Experiments
http://www.chromeexperiments.com/
• Articles and tutorials at Google’s HTML5 Rocks
http://www.html5rocks.com/en/
• Browser compatibility tables at HTML5 Please
http://html5please.com/
• Browser compatibility tables at CanIUse http://caniuse.com/
• Tutorials on the Adobe Developer Connection
http://www.adobe.com/devnet.html , especially Adobe, Standards,
and HTML5 http://www.adobe.com/devnet/html5/articles/adobestandards-html5.html
• HTML5: Edition for Web Authors:
http://www.w3.org/TR/2011/WD-html5-author-20110809/
• JavaScript feature detection library, Modernizr
http://modernizr.com/
16
Creating HTML Pages
1. Develop the entire site or subsets of the
site on your own PC first.
2. FTP to the web server only after it’s
completed.
3. Test the site again on the server.
•
Two ways to create the site on your PC:
the easy way, and the hard way…
17
Creating HTML Pages
• Easy way: Create the page visually using
an integrated development environment
(IDE), which translates your visual design
to HTML.
– Adobe’s Dreamweaver – the Cadillac of
editors, in our labs.
– Microsoft’s Expression Web, a part of
Microsoft DreamSpark software program–
see the CS website for information.
– Seamonkey’s free HTML editor, in the labs,
http://www.seamonkey-project.org/
18
Creating HTML Pages
– For image creation and editing:
• Adobe’s Fireworks or Photoshop
• Gimp, a free download, http://www.gimp.org/
19
Creating HTML Pages
• Hard way: Hand code the HTML...
– In a plain text editor like Notepad, Editpad
(download from my web page), or Notepad++ (free
at http://notepad-plus-plus.org ):
• Open both your editor and your browser, with a sliver of
each showing on your desktop no matter which one has
focus.
• Type the HTML in the editor and save as a .html file on
your hard drive.
• Switch to the browser.
• File-Open-Browse to open the file in the browser for the
first time, or Refresh/Reload to load the latest version.
• Repeat until done: edit the HTML in the text editor, save it,
20
test in the browser.
Creating HTML Pages
• Either way, FTP/upload to the server only after
the site/section is done and debugged locally
on your PC.
• Then, be sure to test on the server from a
different computer than your own, or
temporarily rename the working directory on
your hard drive before testing on the server.
• Allow plenty of time to debug after you have
uploaded to the server; some links that worked
just fine on your PC will inevitably break
because you didn’t specify them properly for
the server.
21
Creating HTML Pages
• Do not use a word processor to create HTML
files.
– Native word processor files, like .wpd and .doc
files, have hidden formatting characters that will
choke the browser.
– Could do a “save as txt/ASCII”, though, to strip
out formatting, leaving just the text.
– Could do a “save as HTML”, but the code will be
unbelievably ugly!
• Do not use a UNIX text editor to create HTML
or CSS files – puts everything on one line for
“View Source,” and I won’t grade it or help
debug it that way.
22
Creating HTML Pages
• Can use a specialized HTML editor to validate
the HTML and speed up repetitive tasks.
– Check out the free editor and tools at
www.chami.com/html-kit .
• To check syntax, try the utilities at:
– http://watson.addy.com (although I disagree with
many of its syntax findings)
– www.w3c.org
• HTML online reference:
http://www.w3.org/2009/cheatsheet/
23
If You Have an IDE,
Why Bother to Learn HTML?
• IDEs will not always do what you want
them to do, so you have to tweak the
code they generate.
• Sometimes it’s a whole lot faster to
hand-code a tag than to create it in the
IDE.
• Knowing HTML is absolutely essential
when debugging HTML created by
IDEs.
24
Introduction
• We won’t cover everything in HTML; we
will cover the basics, and you can look
up anything else when the need arises.
• However, you will be tested on the
HTML. The code you are expected to
know will be in the HTML Study Guide
on my web page.
25
Introduction
• In these PowerPoint presentations, HTML
tags (commands) appear in green; while
the results that display in the browser
appear in yellow.
• Formatting is often compromised because
there isn’t enough room on the screen to
format properly.
26
Introduction
• Designed originally to define structure
(the way the parts are inherently
related), not presentation/formatting
(the way the document looks in the
browser). Examples:
– Structure : top-level header, sub-head,
paragraph text, tables, table cells, bulleted
lists, etc.
– Presentation : color, size, positioning, etc.
27
Introduction
• How to tell the difference between
structure and presentation?
– If relevant to a blind person, it’s structure.
– If not relevant to a blind person, it’s
presentation.
28
Introduction
• The name of the homepage should be
index.htm or index.html.
– That’s the default file that a web server
delivers if the browser doesn’t specify the
name.
– Search engines look for that file.
– Please get in the habit by using that name
for your homepage for this class.
29
Introduction
• If you have errors in your HTML, the
browser might still attempt to display
your page.
• “Attempt” is the key word here; the
page might not display at all, or it might
not display as you intended.
• Browsers don’t give you error messages
the way compilers do.
30
Introduction
• We will be enforcing “well-formed
HTML”; that is, you must follow the
rules (even when the tags will work
without following the rules) and do
proper formatting.
• We will be following the newer HTML
standards as they are widely supported
by current browsers.
31
Tag Overview
• HTML wraps content in tags that are
indicated by < >.
• Most tags require both a start tag and a
closing/end tag, and content (the stuff
that displays on the page) goes in
between.
• Example:
<p>
...Insert a paragraph of content here ...
</p>
“/” used for end tags
32
Tag Overview
• A start tag and its end tag are viewed
as a container.
• In some situations, in some browsers,
the browser may forgive you if you
forget an end tag, but other browsers in
other situations don’t.
• Well-formed HTML following the newer
standards requires the end tag even if
the browser lets you get away with
omitting it.
33
Tag Overview
• Some tags have only a start tag, with
all the necessary information embedded
within the tag.
<img src="myPicture.jpg">
or
<img src="myPicture.jpg" />
Older
standard.
Recommended by:
HTML4? No, but accepted.
XHTML 2.0? Required. (How silly.)
HTML5? Doesn’t care either way.
34
Tag Overview
• I won’t deliberately show the ending
slash in non-containers tags.
• Either way, tags have optional
attributes that are embedded within the
start tag.
<img src = "myPicture.jpg">
Attribute name, equals sign (spaces optional), and
value in quotes (optional unless special
35
characters).
Tag Overview
• Uppercase versus lowercase HTML:
– HTML (1.0-4.0): uppercase the standard,
both recognized.
– XHTML 2.0: lowercase recommended, both
recognized.
– HTML5: doesn’t care. Create your own
standard and be consistent.
• Quotes:
– Highly recommended but required only if
special characters. Don’t use “curly quotes.”
36
Tag Overview
• HTML and Windows PCS are not casesensitive, but UNIX servers are.
– The case of the file names (and the paths
to get to those files) within the HTML must
match the case of the files on UNIX.
– Again, leave time to debug on the server!!!
37
Tag Overview
• Common file naming methods:
– fileName.html (Hungarian notation/camel
case)
– file_name.html
• In any case, be consistent!
38
Documentation Tags
• Tags that start with <! never display
within the browser.
• Two types:
– Comments
– DOCTYPE tag
39
Documentation Tags
• Comments
< ! - - insert single or multi-line
comment here - - >
– Brace yourself for a shocker…
• Don’t over-comment because of the download
hit – comment only esoteric stuff.
– Do use blank lines liberally to separate
chunks of code, and use indentation to
show nesting (but careful with nesting and
server-side includes).
40
Documentation Tags
• DOCTYPE Tag
– The very first statement in the HTML file,
stating standards the file follows.
– HTML4 and XHTML 2.0 had doctypes like
this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> (case-sensitive)
• This one is “loose” (“transitional”) -- that is, it
supports the newer standards while allowing
older code, too.
• Dreamweaver CS5 defaults to this.
41
Documentation Tags
• DOCTYPE Tag
– HTML5:
<!DOCTYPE html> (woo-hoo!)
• Can choose as an option in Dreamweaver,
under “Edit” > “Preferences” > “New
Document”
– If in doubt, use whatever Dreamweaver
puts in for you, for now. Avoid “strict”
(instead of “transitional”) – may well make
your code break.
42
HTML Tags
Deprecated Tags and Attributes
• Deprecated tags and attributes are older
versions whose use is not recommended even
though they will still work in modern browsers.
• We will learn the deprecated tags and
attributes, because you will still encounter them
on the web.
• You can use them in your first HTML
assignment, then remove all of them for your
CSS assignment. (Fastest way I know to make
you a believer in CSS!)
44
Deprecated Tags and Attributes
• No deprecated tags or attributes in your
personal or group website – 1 point off
for each instance I find.
• Let's look at a simple HTML file…
45
<!DOCTYPE html>
<html>
<head>
<title>Penny’s Page</title>
<meta name = "keywords" content = "phrase1, phrase2, … ">
<meta name = "description" content = "this site does ... ">
</head>
<body>
<h1>Header Stuff</h1>
<p>This is a paragraph of content of some sort, that goes on, and on,
and on, and on, and on, and on….
</p>
<p>This is another paragraph of some kind of content, that goes on,
and on, and on, and on…</p>
</body>
</html>
Loading an HTML File
into the Browser
• Loaded sequentially, line by line,
displaying each line of HTML before
moving on to the next line.
• A given HTML tag has no knowledge of
the line before it or the line after it.
• So, with HTML alone, you can’t jump
around the way you can with most
programming languages, because HTML
isn’t a programming language.
47
<!DOCTYPE html>
<html>
<head>
<title>Penny’s Page</title>
<meta name = "keywords" content = "phrase1, phrase2, … ">
<meta name = "description" content = " this site does ... ">
</head>
Indicates
Indicates
the the
beginning
beginning
andand
<body>
ending
ending of
of the
the HTML.
HTML.
<h1>Header Stuff</h1>
<p>This is a paragraph of content of some sort, that goes on, and on,
and on, and on, and on, and on….
</p>
<p>This is another paragraph of some kind of content, that goes on,
and on, and on, and on…
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Penny’s Page</title>
<meta name = “keywords” content = “ phrase1, phrase2, …”>
• Contains
information
<meta name = “description” content =
“this site does
...”>
about the document as
a whole. the
Indicates
and
•beginning
Generally not
rendered
<body>
<h1>Header Stuff</h1>
on the page
itself,
ending
of the
<p>This is a paragraph of content of some sort,
thatinformational.
goes on, and on,
merely
HTML.
and on, and on, and on, and on….
• Only one <head> per
</p>
page.
</head>
<p>This is another paragraph of some kind of content, that goes on,
and on, and on, and on…
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Penny’s Page</title>
<meta name = "keywords" content = "phrase1, phrase2, … ">
<meta name = "description" content = "this site does ... ">
</head>
• Displays on the colored bar across the top line of
<body> the browser window.
<h1>Header
Stuff</h1>
• Displays
when search engines hit on the site.
<p>This is a paragraph of content of some sort, that goes on, and on,
• Is used by search engines to catalog the site.
and on, and on, and on, and on….
</p> • Is the default name when a user adds the
toparagraph
his or her
favorites
list. that goes on,
<p>This ispage
another
of some
kind of content,
and •on,
and on, andthat
on… users might link to this page
Remember
</p>
directly, bypassing the homepage, so it really
</body>
needs to be clear.
</html>
<!DOCTYPE html>
<html>
<head>
<title>Penny’s Page</title>
<meta name = "keywords" content = "phrase1, p2, … ">
<meta name = "description" content = "this site does ... ">
</head>
<body>
<h1>Header Stuff</h1>
<p>This is a paragraph of content of some sort, that goes on, and on,
and on,
andare
on, used
and on,
and on….by search engines.
• Meta
tags
primarily
</p>
• name = “keywords” identifies the prime search words
<p>This is another paragraph of some kind of content, that goes on,
for
that use keywords (not all do).
and search
on, and engines
on, and on…
• name = “description” identifies the description that
</p>
</body>
displays sometimes in search engine listings.
</html>
<!DOCTYPE HTML PUBLIC “-//W3C/DTD HTML4.0//EN”
“http://www.w3c.org/TR/REC-html40/strict.dtd”>
• Only one <body> per page.
<html>
• Contains the elements that display on the page.
<head>
• Can include
deprecated attributes for default text and
<title>penny’s
page</title>
link colors,
and background
color and
images.
<meta name
= “keywords”
content = “ phrase1,
phrase2,
…”>
<meta name = “description” content = “this site does ...”>
</head>
<body >
<h1>Header Stuff</h1>
<p>This is a paragraph of content of some sort, that goes on, and on,
and on, and on, and on, and on….
</p>
<p>This is another paragraph of some kind of content, that goes on,
and on, and on, and on…
</p>
</body>
</html>
Setting up the Body
• Deprecated <body> attributes:
– bgcolor = "#hhhhhh" Background color.
• #hhhhhh is an RGB hex color code (actually
RRGGBB), like “0000ff” for blue – more later.
• For now, remember that the larger the number,
the more intense the value of that color…
– #ff0000 is red, #00ff00 is green, #0000ff is blue
– #ffffff is white and #000000 is black (important!)
• Default background color is white.
• Missing # works in some browsers, not others.
• Deprecated in favor of CSS’s background-color. 53
Setting up the Body
• <body> attributes (continued):
– background = “background.gif”>
• For a background image.
• Deprecated in favor of CSS’s background-image.
• If too large to fit in the browser window, the
image will be truncated on the right and the
bottom.
• If too small to fill the screen, the image will tile
(repeat horizontally and/or vertically) to fill the
background.
54
Setting up the Body
• <body> attributes (continued):
• Also consider using a compatible background
color, so the user has something to look at
while the background image loads and tiles.
• Use full-screen background images only with
great thought – nasty download hit. More later.
55
Setting up the Body
• <body> attributes (continued):
– bgproperties=“fixed”
• Use in conjunction with the background
attribute to let content scroll over the top of a
fixed background image.
• If omitted, the background scrolls along with
the content, which may result in repeating an
image you don’t want to repeat.
• IE only, not in W3C specs.
• Deprecated in favor of CSS’s backgroundattachment.
56
Setting up the Body
• <body> attributes (continued):
– text =”#hhhhhh”
sets text color.
• Default text color is black (#000000).
• Deprecated in favor of CSS’s color.
57
Setting up the Body
• <body> attributes (continued):
– Links
• link = “#hhhhhh”
• alink = “#hhhhhh”
• vlink = “#hhhhhh”
for unvisited links
(default blue)
for active links
(clicked on, default
red)
for visited links
(default usually
purple)
58
Setting up the Body
• <body> attributes (continued):
– Link formatting is deprecated in favor of
CSS’s a, a:link, a:visited, a:hover, a:active.
59
Setting up the Body
• So, a fully specified <body> might look
like this:
<body bgcolor="#0000ff"
background="myBackground.gif"
bgproperties="fixed"
text="#ffffff"
link="#ff0000"
alink="#00ff00"
vlink="#ffff00" >
60
Intro to CSS
• Quick and dirty intro to local (i.e., in the
tag itself) CSS, with more to follow in
later lectures…
<body style="background-color:#0000ff;
background:url(‘myBackground.gif’);
background-attachment:fixed;
color:#ffffff;"
link="#ff0000"
alink="#00ff00"
vlink="#ffff00" >
61
•
• style= is HTML, stuff in
quotes is CSS.
Intro to CSS
• format:
reserved word: value;
Quick and dirty intro •toCan
local
(i.e.,
in
the
use multiple values in
tag itself) CSS, with more
to style
follow
in
a single
attribute.
later lectures…
• Alternate single and
double quotes.
<body style="background-color:#0000ff;
background:url(‘myBackground.gif’);
background-attachment:fixed;
color:#ffffff;"
link="#ff0000"
alink="#00ff00"
vlink="#ffff00" >
62
Intro to CSS
• Note: In HTML, pixels are specified by
the number alone:
border="2"
• In CSS, use the number plus "px":
style="border:2px;"
No space
between.
63
Setting up the Body
<body style="background-color:#0000ff;
background:myBackground.gif;
background-attachment:fixed;
color:#ffffff;"
link="#ff0000"
alink="#00ff00"
For now, leaving the link
vlink="#ffff00" >
specifications in HTML,
not in CSS.
64
<!DOCTYPE HTML PUBLIC “-//W3C/DTD HTML4.0//EN”
• For formatting up to six
“http://www.w3c.org/TR/REC-html40/strict.dtd”>
levels of headings.
<html>
<head>
• Varies the font size
<title>Penny’s Page</title>
automatically; a level 1
<meta name = “keywords” content = “ phrase1,
phrase2,
header
has a …”>
larger font
<meta name = “description” content = “this
sitethan
does a...”>
size
level 2 header,
</head>
etc.
• Relative sizing; the actual
<body>
size is selected by the
<h1>Header Stuff</h1>
browser.
<p>This is a paragraph of content of some sort,
that goes on, and on,
and on, and on, and on, and on….
</p>
<p>This is another paragraph of some kind of content, that goes on,
and on, and on, and on…
</p>
</body>
</html>
Header Tags
Example:
Displays:
<h1>Level 1 header </h1>
<h2>Level 2 header </h2>
<h3>Level 3 header </h3>
Level 1 header
Level 2 header
Level 3 header
HTML forces a blank line after the header, but we
can fix that with CSS.
66
Header Tags
• Header tags are actually intended to be
structural (formatting is incidental these
days), following a progression – h2
under h1, h3 under h2, etc.
• Do not use a header tag for a nonheader item, just to get a particular font
size or other formatting!
• Important to maintain the progression
properly, for accessibility.
67
<!DOCTYPE
HTML4.0//EN”
• All of theHTML
text PUBLIC
placed“-//W3C/DTD
within the paragraph
tags appears as a
“http://www.w3c.org/TR/REC-html40/strict.dtd”>
single paragraph. The text wraps to fill the available line
<html>
length within the browser.
<head>
• There is a blank
line both before and after the paragraph
<title>Penny’s
Page</title>
display.
<meta
name = “keywords” content = “ phrase1, phrase2, …”>
<meta
= “description”
content
= “this site
does
...”> browsers
• </p>name
is required
by newer
standards
even
though
</head>
will accept paragraphs without ending tags.
<body>
<h1>Header Stuff</h1>
<p>This is a paragraph of content of some sort, that goes on, and
on, and on, and on, and on, and on….
</p>
<p>This is another paragraph of some kind of content, that goes
on, and on, and on, and on…
</p>
</body>
</html>
Paragraph Tag
• Blank lines (created with carriage
returns) or extra spaces within the text
are ignored.
– In other words, you must do formatting
with HTML, not by formatting within the
text.
69
Paragraph Tag
<p>
Fourscore and seven years ago, our
fathers brought forth on this continent
a new nation, …
</p>
• Display depends upon screen width:
Fourscore and seven years ago, our fathers brought
forth on this continent a new nation, …
or
Fourscore and seven years ago,
our fathers brought forth on this
70
continent a new nation, …
Paragraph Tag
<p>Penny McIntire
Department of Computer Science
Northern
Illinois
University
DeKalb, IL 60115</p>
displays
Penny McIntire Department of Computer Science Northern
Illinois University DeKalb, IL 60115
because spaces and line breaks in the text are ignored.
71
Paragraph Tag
• On the other hand, using <p>...</p>
on every line can insert blank lines
where you don’t want them...
72
Paragraph Tag
<p>Penny McIntire</p>
<p>Department of Computer Science</p>
<p>Northern Illinois University</p>
<p>DeKalb, IL 60115</p>
displays
Penny McIntire
Department of Computer Science
Northern Illinois University
DeKalb, IL 60115
Using <p> tags
on each line.
73
Break Tag
• <br> Forces a line break, with no extra
blank line, like a carriage return.
• Was deprecated and <br/> for XHTML,
but <br> is fine for HTML5.
• Inserted within text within other tags
like <p>...</p>.
• Useful for times when the additional
spacing caused by <p> would be
irritating...
74
Break Tag
<p>
Penny McIntire<br >
Department of Computer Science<br >
Northern Illinois University<br >
DeKalb, IL 60115
</p>
displays
Penny McIntire
Department of Computer Science
Northern Illinois University
DeKalb, IL 60115
75
Other HTML tags
Horizontal Rule
<hr
size = "n"
height in pixels
width = "m" or "m%"
align = "left" or "center" or "right"
color = "#hhhhhh"
noshade >
• Horizontal rule (dividing line) n pixels high, and m
pixels or m percent of container width.
• align is deprecated in favor of CSS.
• color works only in IE, but degrades gracefully to the
default color in other browsers. Deprecated in favor
of CSS’s color (which also works only in IE).
77
Horizontal Rules
• noshade is optional – shades the line
with a 3-D speed bump effect if omitted
and line is tall enough.
78
Center Tag
<center>...</center>
• Causes the items within this container
(a tag with both start and end tags) to
be centered horizontally on the page.
• Deprecated in favor of CSS’s
text-align
or
margin-left:auto; margin-right:auto;
79
Center Tag
• Example:
<center>
<h1>Level 1 header </h1>
<h2>Level 2 header </h2>
<h3>Level 3 header </h3>
</center>
<h4>Level 4 header </h4>
<h5>Level 5 header </h5>
<h6>Level 4 header </h6>
80
Center Tag
• Displays:
Level 1 header
Level 2 header
Level 3 header
Level 4 header
Level 5 header
Level 6 header
81
Align Attribute
align = "center"/"left"/"right"/"justify"
• An attribute, not a tag, so embedded within
another tag, such as an <h1> tag.
• Used to align a single element such as a
header or a paragraph.
• align = "center" works the same as
<center>...</center> except <center> is
used to enclose multiple tags all at once.
• Deprecated in favor of CSS.
82
Align Attribute
• Example:
<h1 align = "center">This is a level 4 header </h1>
<h1 align = "left">This is a level 4 header </h1>
<h1 align = "right">This is a level 4 header </h1>
displays
This is a level 4 header
This is a level 4 header
This is a level 4 header
83
Text Styles
• <u>...</u>
underline
– Avoid, because underline is generally
reserved for links.
– Deprecated in favor of CSS’s textdecoration.
• <strong>...</strong> boldface
<b>...</b>
– <b> is deprecated.
– CSS’s font-weight a better option than
<strong>? (I disagree.)
84
Text Styles
• <em>...</em> italics (“emphasized”)
<i>...</i> (deprecated)
– CSS’s font-style a better option? (I disagree.)
• <tt>...</tt> fixed width font
– CSS’s typeface options are preferred.
• <del>...</del> strike-through
– CSS’s text-decoration a better option? (Maybe).
• ^... superscript
– CSS’s vertical-align a better option? (I disagree).
• _... subscript
– CSS’s vertical-align a better option? (I disagree).
85
Text Styles
• Example:
<h1 align = "center">
<u> This is a</u><em> level 1<strong> header</strong>
</em> </h1>
displays
This is a level 1 header
86
Text Styles
• Well-formed HTML closes tags in the
reverse order in which they are opened.
• Correct:
<u> <em> <strong>Hi!</strong> </em> </u>
• Incorrect because overlapping:
<u> <em> <strong>Hi!</u> </em> </strong>
87
Font Tag
<font color = "#hhhhhh"
size = "n" or "+n" or "-n"
face = "font name">
...paragraph text here...
</font>
• Overrides the defaults in the <body>
element.
• Deprecated (viewed as the ultimate
evil)! in favor of CSS’s font properties.
88
Font Tag
• size attribute
– Valid size range is 1-7, with 1 the smallest
and 7 the largest.
– size = 3 is the browser default.
– +2 (relative sizing) gives a font size of 5, if
applied to the base font set in the browser.
– If the font size has already been increased,
say to a 4, then +2 results in a size 6.
– Best to use relative sizes, for accessibility
reasons.
89
Font Tag
• face attribute changes the typeface.
– The typeface must exist on the user’s
browser.
– You can list multiple typefaces as attributes
for face – the browser checks the user’s
system for the first one, then the second
one, etc. The last one on the list should be
a standard font like Times or Ariel, or serif
or san-serif..
face = "Calligrapher, Georgia, Times, serif"
90
Font Tag
– If the browser doesn’t find any of them, it
uses the default.
– Nothing to lose here if the font isn’t found;
it “degrades gracefully.”
91
Font Tag
– If you need a fancy font for something
special, create a text graphic, save it as an
image, and use the image.
• This comes with a download price and is harder
to maintain in the future, so use sparingly.
– Newer browsers provide the ability to save
fonts with the page.
• A huge download hit (font files can be above
100K).
• In theory, the fonts could contain viruses.
92
Preformatted Text
• <pre width="n">...</pre>
– Preformatted text preserves the formatting
in the original, including spaces, line breaks,
and tabs.
– Particularly useful for displaying code listings
because the text won’t wrap to fit the
available space in the browser window.
– The width attribute specifies the maximum
number of characters in a line.
– Don’t use as a way of avoiding HTML/CSS
formatting!
93
Incorporating Images
<img
src="path to the image"
height="n" width="m"
name = "name you give it"
id = "name you give it"
alt="for screen readers"
title=“tool tip to display"
border="n"
align="see prior discussion"
hspace="n" vspace="n" >
94
Incorporating Images
• src=" path and filename "
– Only two image formats fully and reliably
accepted by all browsers, including older
ones:
• .jpg (for continuous-tone images like photos)
• .gif (for line art like cartoons, logos, etc.)
– Another format, web-optimized .png (don’t
use native Fireworks .png!) works in recent
browsers, but test features like
transparency thoroughly!
95
Absolute and Relative URLs
• src="path and filename"
• Background on absolute and relative
URLs in HTML...
• Absolute URL
– Contains the complete address, including
the protocol, such as
http://www.pennymcintire.com/csci475/myImage.gif
http://www.amazon.com
– Will not work if you forget the “http://”
96
Absolute and Relative URLs
• Relative URL
– An address with one or more of the pieces
missing, like
src="myimage.gif"
No path specified means it’s in the same
directory where the current HTML file is
located.
– The server assumes that the missing
pieces of the target address are the same
as the current page.
97
Absolute and Relative URLs
src="csci475/myimage.gif"
– For the above relative address, the
browser would look under the subdirectory
where the current page resides for the
csci475 subdirectory.
98
Absolute and Relative URLs
src="../csci475/myimage.gif"
– “../” means “go up one subdirectory.”
– For the above relative address, the
browser would go up one directory in the
hierarchy, then down to the csci475
directory.
99
Absolute and Relative URLs
src="../../csci475/myimage.gif"
– For the above relative address, the
browser would go up two directories in the
hierarchy, then down to the csci475
directory.
100
Absolute and Relative URLs
– Same idea for links to other web pages,
not just for images (href specifies a link –
more later)
href="../../csci475/myHTMLpage.html"
– What will this do?
href="www.amazon.com"
101
Incorporating Images
• Back to src="…"
– Use an absolute address like
http://www.niu.edu/cs/myimage.gif
for all external addresses (not under your
own site).
– Use a relative address like
../csci475/assign.html
for all addresses within your site.
– Why? Portability!
102
Incorporating Images
• Either way, addresses can work when
testing on your own computer but
break when you put them out on the
web.
• Why?
– Windows is not case-sensitive, UNIX is.
– You might have accidentally changed the
directory structure for the server.
– You might have forgotten to FTP ancillary
files like images.
103
Incorporating Images
• OR, it might work on the server when
you are testing from your own
computer, but breaks on a different
computer. Why?
• If you accidentally specified a path and
filename on your own computer, the
image may still show up when vieing
from your own computer.
• Test from another computer, or rename
the directory on your own computer!
104
Incorporating Images
• height = "nnn"
width = "nnn"
height, in pixels
width, in pixels
– height and width default to the exact size of
the saved image if not specified, but specify
that default anyway. Why?
• Text on the page displays properly right off the
bat, with empty boxes of the correct size as
placeholders for the images.
• Faster display.
105
Incorporating Images
– Don’t use the height and width attributes to
change the size of the image on the page.
• Don’t use to resize image smaller, because you’re
still paying the download hit for the larger image.
• Don’t use to resize the image bigger, because
quality will be seriously degraded.
• Instead, use an image-editing program to resize
images and save them in the precise size (in
pixels) that you want it to be on the screen.
106
Incorporating Images
• But this is changing, due to querying to media
queries, which change the image depending upon
resolution of the browser window.
• More later, under graphics, or check out
http://msdn.microsoft.com/enus/magazine/hh882445.aspx if you are anxious to
get going with media queries and CSS.
• Better to use height: and width: in CSS, unless
one-offs.
107
Incorporating Images
• name = "name you give it"
• id = "name you give it"
– Needed only if you want to reference the
image by name, for things like
mouseovers.
– name is deprecated (but still works, and
will for years to come) in favor of id in the
newer standards.
– Use both if in doubt (which is what
Dreamweaver does for you, when it needs
108
to reference images).
Incorporating Images
• alt = "some text" Text that displays if
the browser can’t display graphics or
the image errors off.
– Always (repeat, always) include.
– Used by search engines.
– Screen readers use for vision-impaired
users.
• alt = "" (empty quotes) if no meaning, so
skipped by screen readers.
• title="some text"
– For a tooltip on mouseover (newer).
109
Incorporating Images
• border = "n"
– border width, in pixels.
– 0 for no border.
– Deprecated in favor of CSS border.
– HTML image borders went out of style for
a number of years, but now graceful, onepixel wide borders are back in style.
110
Incorporating Images
• align =
• "top"
• "bottom"
• "middle"
• "left"
• "right"
111
Incorporating Images
• hspace=“m" vspace="n"
– Vertical and horizontal white space left
around the image, in pixels.
– Each applies to two margins (that's
unfortunate)
– Default is usually 3 pixels.
112
Incorporating Images
• align, hspace, and vspace
– Deprecated in favor of:
• CSS margin, which can be specified on all four
sides independently: margin-left, margin-right,
margin-top, margin-bottom.
• margin-left:auto; margin-right:auto; centers
the item.
• CSS float, text-align, vertical-align, position,
etc.
113
Incorporating Sound and Movies
• Linking to sound or movie files is
identical to linking to images, but the
file name extensions are different.
• The user must have the appropriate
“player” on his or her PC – for example,
the Shockwave player if it is a
Shockwave file.
– You can ask the user if he or she wants to
download the appropriate player, but also
provide an alternative.
114
Incorporating Sound and Movies
• Flash was already embedded in all
browsers for the last decade or so, until
recently.
• Now, Apple and Adobe are feuding, so
all bets are off.
– The death knell for Flash?
– Especially since Flash animations can now
be converted to HTML5/JavaScript
animations, even from the Flash editor.
115
Incorporating Sound and Movies
• Background sound (IE only)
<bgsound
src = "filename"
loop = "n" or "-1" >
within the <head>.
– loop = "n" means n repetitions of the
sound.
– loop = "-1" means continuous play.
– Bad idea to default to background sound –
annoys people surfing from work.
116
Linking
• Anchors, or hyperlinks, link to other web
pages, documents, or email accounts.
<a href = " address">Penny’s Page</a>
Absolute or relative
address to link to.
Anchor tag
The text that displays
(underlined unless you
change it with CSS)
117
Linking
• Example (text link):
<a href = "http://www.yahoo.com" target="_blank">
Go to Yahoo
</a>
displays
Go to Yahoo
• Note the difference between the actual
link address and the text that is displayed.
118
Linking
• target = attribute for the <a> tag (deprecated?
in favor of JavaScript to open windows???):
– "_self" Opens the document in the current window
(the default).
– "_blank" Opens the document in a new window, so
that the original source window is preserved.
• Use for external links, but use sparingly for internal links.
– "nameYouHaveChosen" Opens in a new window that
you can reuse by referencing the name again.
• Careful – some browsers don't pull the tab to the front.
– Use initial "_" only with reserve words above, not
with your own names.
119
If the border is turned
on, its color will be the
same as the color
specified for links.
Linking:
Image Links
• To make an image an anchor for a link,
merely surround it with the beginning
and ending anchor tags...
<a href = "mypage.html">
<img src = "graphics/myDog.gif"
border = "2"
height = "100"
width = "150"
alt = "picture of my dog" >
</a>
Be sure there isn’t an
extra space here.
120
Linking:
Automatic Email Links
• If the link is an email address, and you want the
user’s default email program to come up with
an email automatically addressed to the href
address when the link is clicked:
<a href = "mailto:pmcintire@niu.edu?subject=
subject line&body=any body text you want"
>Send me an email</a>
– This works only if the user has a default email client
set up on his or her computer; i.e., won’t work on a
public access computer like our labs.
121
Linking:
Thumbnails to Larger Images
• Provide users with small thumbnail images
that link to larger images, so that the user
can choose whether or not to pay the
download price of the larger image:
<a href = "largeImagePage.html">
<img src = "smallImage.jpg" height="10"
width="10" alt="my img" title="my img">
</a>
– This defines the thumbnail image as the
clickable link to largeImagePage.html that
122
contains the larger image.
Linking:
Thumbnails to Larger Images
– Don’t just use the height and width attributes
to downscale the larger image to become the
thumbnail; in that case, the thumbnail would
take just as long to load as the larger image.
– That would defeat the purpose of having fast
load on the little image and letting the user
choose whether or not to wait for the larger
image.
123
Linking:
Internal Anchors
• Sometimes it might be nice to be able to link
to a specific location in the current page, or
to a specific location deep in another page,
not just to the top of that page.
• HTML has a facility to assign an internal
anchor to any location in an HTML file; a
bookmark, of sorts.
• Then, we can direct the user directly to that
location by adding that location name at the
end of path to the page.
124
Linking:
Internal Anchors
• Use an anchor tag with no href and no content
at the destination for the jump:
<a name = "gohere" id="gohere"></a>
• This serves as the bookmark.
• Specify both name (older standard) and id (newer
standard), to be backward and forward compatible.
• Newer browsers support any element (<p>, <h1>,
etc.) with an id to be used as a bookmark, without
needing an <a> tag at the destination.
• Careful, though – older browsers are still common.
• Also, compromises maintainability; find and replace of the
destination tag won't work anymore because all different. 125
Linking:
Internal Anchors
• To jump to that spot...
<a href = "path/mypage.html#gohere">
Jump to XYZ
</a>
displays
Jump to XYZ
and links to the anchor you specified.
• You can omit the URL/path if the bookmark is
within the current page:
<a href = "#gohere">Jump to XYZ</a>
126
Linking Hint
• Be sure not to include a space or &nbsp;
inside any anchor tags, either before or
after the link content, whether that
content is text or an image.
– On a text link, the extra spaces will be
underlined, which looks awful.
– On an image link, the dotted outline that
displays on click will have an odd shape.
127
Linking:
Image Maps
• An image map is a single image that
encompasses multiple links.
• We specify different areas of the image
as hotspots, or anchors.
• This involves more complicated HTML
than using several separate image links;
use only when you can’t get the effect
you want using separate images.
(ImageMapTest.html)
128
Linking:
Image Maps
A single image,
with multiple
hotspots
3
1
4
2
129
<img name="fruits" src="image_map4.gif" width="238" height="264"
border="0" usemap="#fruit_image_map“>
<map name="fruit_image_map">
This tag puts the actual
<area shape="circle" href="apple_info.html"
image on the page.
1
title="Nutritional Data for Apples" alt="Nutritional Data for Apples"
coords="136,98, 23" >
<area shape="rect" href="grape_info.html"
This group of
2
title="Nutritional Data For Grapes"
tags sets up the
alt="Nutritional Data For Grapes"
template for the
coords="2,69,56,185" >.
hotspots.
<area shape="poly" href="lime_info.html
title="Nutritional Data For Limes" alt="Nutritional Data For Limes"
3
coords="67,38,63,60,79,77,95,75,101,63,94,45,83,38" >
<area shape="poly" href="grape_info.html" target="_blank"
title="Nutritional Data About Grapes"
4
alt="Nutritional Data About Grapes
coords="175,89,174,116,189,130,182,153,201,180,224,160,236,104,
214,75">
</map>
One <area> per
hotspot.
Image Maps
• Sorta like a DSECT in assembler.
<map name = "name of the map">
– Sets up the entire image map.
– Put all map definitions within the <body> tag.
– name and id are the only attributes (use both for
forward and backward compatibility
<area... >
– Sets up an individual hotspot within the map.
– So, one <area> tag per hotspot.
131
Image Maps
– <area > attributes:
href = "path to the destination page"
shape = "rect" or "poly" or "circle"
coords = "coordinate points"
• For shape = "rect", x1,y1,x2,y2 points for top
left and bottom right corners, in pixels, starting
at top left corner of the image.
• For shape = "poly", must list x,y for each point.
Can get complicated very quickly.
• For shape = "circle", x,y for center, plus radius
in pixels.
132
Image Maps
• No formatting – spaces, line breaks, tabs –
within coords attribute value (so formatting
your code is impossible for this tag).
• Trial and error if you do the coordinates
manually, but...
• Much easier in a package like Fireworks or
Dreamweaver, where you simply draw a shape
around the area and it calculates the
coordinates for you and writes the HTML.
133
Image Maps
• Within the body, define the image the way
you would otherwise, but connect to the map
by adding the attribute
usemap = "#mapname"
• Like a “using” statement in assembler.
• The browser then overlays the image map on
the image.
• Use both the alt and title attributes for crossbrowser display of the name of the links on
mouseover.
• Let’s look again…
134
<img name="fruits" src="image_map4.gif" width="238" height="264"
border="0" usemap="#fruit_image_map" >
<map name="fruit_image_map">
<area shape="circle" href="apple_info.html"
title="Nutritional Data for Apples" alt="Nutritional Data for Apples"
coords="136,98, 23" >
<area shape="rect" href="grape_info.html"
title="Nutritional Data For Grapes"
alt="Nutritional Data For Grapes"
Links the image to the image map.
coords="2,69,56,185" >
<area shape="poly" href="lime_info.html
title="Nutritional Data For Limes" alt="Nutritional Data For Limes"
coords="67,38,63,60,79,77,95,75,101,63,94,45,83,38" >
<area shape="poly" href="grape_info.html" target="_blank"
title="Nutritional Data About Grapes"
alt="Nutritional Data About Grapes
coords="175,89,174,116,189,130,182,153,201,180,224,160,236,104,
214,75" >
x1,y1,x2,y2 coordinates
</map>
Special Characters
• Some characters, particularly < > and
&, have special meaning for HTML and
therefore cannot simply be typed into
the text.
• Instead, HTML uses a code that starts
with an & and ends with a ;...
136
Special Characters
Symbol
<
>
&
©
space
Code
&lt;
&gt;
&amp;
&copy;
&nbsp;
Can be used to force extra spacing (remember, HTML ignores
all but a single space character), but CSS can usually provide 137
extra spacing much better.
Special Characters
• Older versions of HTML will work without the
semicolon, but HTML5 requires the
semicolon.
• Example:
<p>Copyright symbol = &copy;</p>
displays
Copyright symbol = ©
• For other symbols:
http://www.w3schools.com/tags/ref_symbols.
asp
138
Special Characters
• Can also use the ASCI character set,
but this is discouraged by HTML5...
<p>Dollar sign = &#36</p>
139
Bulleted Lists
• Also called unordered lists.
• <ul>...</ul> starts and stops the list.
• <li>...</li> starts and stops a single item in a
list.
• Format:
<ul>
<li>...</li>
<li>...</li>
...
</ul>
starts the list
1st bulleted item
2nd bulleted item
etc.
ends the list
140
Bulleted Lists
HTML:
Displays:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
• Item 1
• Item 2
• Item 3
141
Bulleted Lists
• Can also nest bulleted lists...
142
Indentation is for our benefit;
there is no meaning attached
to it.
Example:
Bulleted Lists
Displays:
<ul>
• Item 1
<li>Item 1</li>
• Item 2
<li>Item 2</li>
o Sub-item 1
<ul>
o Sub-item 2
<li>Sub-item 1</li>
 Sub-sub-item 1
<li>Sub-item 2</li>
 Sub-sub-item 2
<ul>
o Sub-item 3
<li>Sub-sub-item 1</li>
<li>Sub-sub-item 2</li>
</ul>
<li>Sub-item 3</li>
Bullets change to reflect the
</ul>
level changes: solid disc, open
</ul>
143
circle, solid square.
Bulleted Lists
• Can specify bullet types:
– On <ul>, type="disc"/"circle"/"square"
• There is no nesting limit.
• Don’t forget to close your lists, or your
web page will be, uhm, interesting.
• CSS: list-style-type:disc or circle or
square; list-style-position:inside or
outside; list-styleimage:url("myImage.gif");
144
Numbered Lists
• Also called ordered lists.
<ol type = "... " >
<li>...</li>
<li>...</li>
…
</ol>
<li> used the same as for
unordered lists.
• Works identically to a bulleted list except
numbers/letters the list instead of using
bullets.
• Default numbers are decimal number: 1, 2, 3,
etc.
145
Numbered Lists
• Attributes for both <ol> and <li>
include:
– type
– type
– type
– type
– type
=
=
=
=
=
“1”
“A”
“a”
“I”
“i”
decimal numbers, the default
uppercase alphabet
lowercase alphabet
uppercase Roman numerals
lowercase Roman numerals
• Example...
146
Example:
<ol type = “I”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ol type = “A”>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<ol type = “1” >
<li>Sub-sub-item 1</li>
<li>Sub-sub-item 2</li>
<li>Sub-sub-item 3</li>
</ol>
<li>Sub-item 3</li>
</ol>
</ol>
Displays:
I.
Item 1
II. Item 2
III. Item 3
A. Sub-item 1
B. Sub-item 2
1. Sub-sub-item 1
2. Sub-sub-item 2
3. Sub-sub-item 3
C. Sub-item 3
Tables
• Tables are used for formatting table
data just as in Word or Excel…
148
<table border = “2” bgcolor = “#999999” width = “40%”>
<thead>
<tr>
• <table> defines the entire table
<th>Name</th>
<th>Age</th>
• 2 pixel border.
<th>City</th>
• “0” would be no border.
</tr>
• bgcolor (deprecated) sets
</thead>
table background to gray.
<tbody>
• width is 40% of the container
<tr>
<td>Shelley</td>
• Could also be an exact
<td>28</td>
pixel number.
<td>Chicago</td>
</tr>
<tr>
<td>Abby</td>
<td>27</td>
<td>San Francisco</td>
Name
Age
City
</tr>
Shelley
30
Chicago
</tbody>
</table>
Abby
29
San Fran
<table border = “2” bgcolor = “#999999” width = “40%”>
<thead>
<tr>
<th>Name</th>
• Sets up a Table HEADer area –
<th>Age</th>
optional.
<th>City</th>
• Includes automatic formatting
</tr>
(centered, boldface).
</thead>
• More important for structure
<tbody>
<tr>
and accessibility reasons–
<td>Shelley</td>
screen readers use headers to
<td>28</td>
identify cells to the visually
<td>Chicago</td>
impaired.
</tr>
<tr>
<td>Abby</td>
<td>27</td>
<td>San Francisco</td>
Name
Age
City
</tr>
Shelley
30
Chicago
</tbody>
</table>
Abby
29
San Fran
<table border = “2” bgcolor = “#999999” width = “40%”>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
Sets up a single Table Row
<th>City</th>
table header.
</tr>
</thead>
<tbody>
<tr>
<td>Shelley</td>
<td>28</td>
<td>Chicago</td>
</tr>
<tr>
<td>Abby</td>
<td>27</td>
<td>San Francisco</td>
Name
Age
</tr>
Shelley
30
</tbody>
</table>
Abby
29
in the
City
Chicago
San Fran
<table border = “2” bgcolor = “#999999” width = “40%”>
<thead>
<tr>
<th>Name</th>
• Sets up three Table Header cells
<th>Age</th>
in the header, along with defining
<th>City</th>
</tr>
their content.
</thead>
<tbody>
<tr>
<td>Shelley</td>
<td>28</td>
<td>Chicago</td>
</tr>
<tr>
<td>Abby</td>
<td>27</td>
<td>San Francisco</td>
Name
Age
City
</tr>
Shelley
30
Chicago
</tbody>
</table>
Abby
29
San Fran
<table border = “2” bgcolor = “#999999” width = “40%”>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Shelley</td>
<td>28</td>
<td>Chicago</td>
Defines the body
</tr>
<tr>
<td>Abby</td>
<td>27</td>
<td>San Francisco</td>
Name
Age
</tr>
Shelley
30
</tbody>
</table>
Abby
29
of the table.
City
Chicago
San Fran
<table border = “2” bgcolor = “#999999” width = “40%”>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Shelley</td>
<td>28</td>
<td>Chicago</td>
Defines two
</tr>
<tr>
<td>Abby</td>
<td>27</td>
<td>San Francisco</td>
Name
Age
</tr>
Shelley
30
</tbody>
</table>
Abby
29
Table rows.
City
Chicago
San Fran
<table border = “2” bgcolor = “#999999” width = “40%”>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
Defines three Table Data cells in
</tr>
</thead>
this row.
<tbody>
<tr>
<td>Shelley</td>
<td>28</td>
<td>Chicago</td>
</tr>
<tr>
<td>Abby</td>
<td>27</td>
Name
Age
City
<td>San Francisco</td>
</tr>
Shelley
30
Chicago
</tbody>
Abby
29
San Fran
</table>
<table border = “2” bgcolor = “#999999” width = “40%”>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Shelley</td>
<td>28</td>
Defines three Table Data cells in
<td>Chicago</td>
this row.
</tr>
<tr>
<td>Abby</td>
<td>27</td>
<td>San Francisco</td>
Name
Age
City
</tr>
Shelley
30
Chicago
</tbody>
</table>
Abby
29
San Fran
<table border = “2” bgcolor =
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Shelley</td>
<td>28</td>
<td>Chicago</td>
</tr>
<tr>
<td>Abby</td>
<td>27</td>
<td>San Francisco</td>
</tr>
</table>
“#999999” width = “40%”>
• Again, <thead> and <tbody> are
optional – can instead just use
row and cells, like this version.
• But <thead> is good for
accessibility reasons.
Name
Shelley
Abby
Age
30
29
City
Chicago
San Fran
Tables
• As we just saw, tables are used for
formatting tabular data, just as in Word or
Excel.
• In addition, invisible tables can be used to
line objects up with each other using just
HTML (other ways will be discussed when we
get to CSS).
• So, you might put objects in a table with
invisible borders, just to line them up the way
you want them...
158
Header Stuff
Picture 1
Picture 2
Picture 3
Text about
picture 1
..................
..................
Text about
picture 2
..................
..................
..................
..................
Text about
picture 3
..................
..................
..................
Tables
• An “invisible” table like this allows more exact
positioning of items than you can get in other
ways.
• Of course, you can have the borders visible,
too, when it suits your purpose.
• A more modern (but still sometimes buggy)
way of lining things up, using <div>s, will be
discussed a bit later – can't use <div>s until
we know more CSS.
– Still circumstances where ONLY tables are
practical.
– That is changing rapidly!
160
Tables
• Failure to close any of the table tags can
lead to major formatting problems,
depending upon the browser.
– For instance, a missing </table> tag can
work just fine in one browser and cause the
entire page to break in another.
• Every row must have an identical number
of cells (with an exception to be discussed
in a bit).
161
Tables
• Attributes for the <table> tag:
– width = "n" or "n%" to set the width of
table.
• If omitted, “100%” is assumed.
• width:… for CSS.
162
Tables
• Attributes for the <table> tag:
– align = "left" or "right" or "center" aligns
the table within the browser screen.
• If not specified, the table aligns left and
content that follows appears below the table.
• If explicitly specified as "left", other content
wraps on the right.
• CSS equivalents: margin:…, float:…, text-align:
…
163
Tables
– cellpadding = "n" sets the space between
the table border and the cell content.
– cellspacing = "n" sets the width of the
space between cells.
– Set both of these to zero if you want to
slice a large graphic and put the slices into
table cells seamlessly.
• Note: be sure to open and close each cell
<td>…</td> on the same line to make this
work.
164
Tables
– bgcolor="…" and background="…"
• Deprecated in favor of CSS’s background-color
and background-image.
165
Tables
• Attributes for the rest of the table tags:
– align = "center" or "left" or "right"
• For horizontal alignment of the content within the tag.
• Left aligned is the default.
• Deprecated in favor of CSS’s text-align, margin, etc.
– valign = “top" or "middle" or "bottom" or
"baseline”
• For vertical alignment of content.
• Deprecated in favor of CSS’s vertical-align.
• valign = “baseline”
– All cells in the row will have their first lines on a common
baseline, regardless of font size, rather than centering the
lines vertically in the row.
166
Tables
– bgcolor="…" and background="…"
• Same as for <table>, deprecated as well.
– nowrap turns off word wrap.
167
Tables
– width = "n" or "n%" on individual table
cells to set the width of columns.
• a number will set the exact number of pixels.
• "n%" will set the width as a percent of what is
available for the container/table.
• No width means the browser decides.
168
Tables
• Careful with setting table cell (column) widths:
– You get unpredictable results if you use different
values for cells in the same column but different
rows. Usually, the larger number wins.
– Best to put widths on the cells in just the first row,
then no widths on subsequent rows, or just on an
empty bottom row, but…
– The browser overrides cell width values if you put
something (like an img) that is too big in one of the
cells anywhere in the column.
169
Tables
• Can make some data cells larger than
others, similar to a “merge” in the cells
of a Word table.
– This allows one cell to span multiple
columns or rows.
• colspan = "n", rowspan = "n", as
attributes within <th> or <td>
elements.
170
…
<tr>
<td colspan = “2”>Shelley</td>
<td>Chicago</td>
</tr>
<tr>
<td>Abby</td>
<td>27</td>
<td>San Francisco</td>
</tr>
Name
Shelley
Abby
The equivalent of
three columns.
Age
27
City
Chicago
San Fran
Tables
• Avoid nested tables, unless there is no
other way to do what you need to do.
– Nested tables break and are also hard to
read.
172
Tables
• Again, tables are often used more for
formatting than for what we would
normally consider to be a table.
• Many experts are discouraging the use
of tables in favor of <div>s – more to
come later.
• My opinion – tables will be around for a
while yet, until the alternatives are less
buggy.
173
Tables
• It is easiest to make a table for the
entire page layout first, then insert text
and images within the table.
• If you are having trouble trying to get a
single table to accommodate the layout
for an entire page, stop trying.
– Use multiple tables instead…
174
Table 1
Header Stuff
Picture 1
Picture 2
Picture 3
Text about
picture 1
..................
..................
Text about
picture 2
..................
..................
..................
..................
Table 2
Text about
picture 3
..................
..................
..................
Tables
• Table hints:
– In Dreamweaver, you might find it easier
to start by simply drawing layers (boxes),
then “convert to tables” when done. Be
sure to check “don’t allow overlapping
layers” on the preferences first.
– Must use &nbsp; or transparent gif as a
placeholder in empty cells, or they may
break in some browsers (Dreamweaver
inserts automatically when you draw a
table.)
176
Tables
• Table hints:
– Be sure to explicitly specify cellpadding,
cellspacing, and border so that the table
looks the same in all browsers (defaults
vary in the browsers).
177
Tables
• Table hints:
– Use the first row to establish column
widths, then omit column widths on all
subsequent rows.
– This makes it quite easy to change column
widths later.
178
Tables
• Table hints:
– A table row cannot be sized any shorter
than the tallest element in the row.
• Any charactier or even &nbsp; will be standard
text height (25-30 pixels, usually) and it forces
the entire row to be at least that height.
• For a shorter row, fill cells with a 1-pixel by 1pixel (or whatever) transparent gif instead.
• May also have to enter height ="n" on every
table cell in the row.
179
Forms
• Forms are used to collect information
from users viewing your site.
• They are the foundation upon which
interactive elements (push buttons,
check boxes, text fields the users enter)
live.
• Example... (formstest.html)
180
A form
Forms
• Note that this is not exactly a
sophisticated or pretty input form.
• We will build upon it to make it look
better as we know more.
• First, the following two slides show the
complete HTML for this form,
reproduced just for reference.
• Then we will look at the statements
individually...
182
<html>
(Form test.html)
…
<body>
<h1>New Customer Information</h1>
<p>Please fill in the following information: </p>
<form method = "post" action = "cgi-bin/getCustomer">
<p>First name:
<input type = "text" name = "custFirstname" size = "20“ >
</p>
<p>Last name:
<input type = "text" name = "custLastname" size = "20“ >
</p>
<p>Street address:
<input type = "text" name = "custStreet" size = "25“ >
</p>
<p>City:
<input type = "text" name = "custCity" size = "25“ >
</p>
<p>State:
<input type = "text" name = "custState" size = "2“ >
</p>
<p>Zip:
<input type = "text" name = "custZip" size = "10“ >
</p>
<p>
<input type = "submit" value = "Submit your information“ >
<input type = "reset" value = "Clear your information“ >
</p>
</form>
<html>
(Form test.html)
…
<body>
<h1>New Customer Information</h1>
<p>Please fill in the following information: </p>
<form method = "post" action = "cgi-bin/getCustomer">
<p>First name:
<input type = "text" name = "custFirstname" size = "20“ >
</p>
<p>Last name:
<input type = "text" name = "custLastname"
size = "20“ >about
Specifies information
</p>
<p>Street address:
<input type = "text"
</p>
the entire form, which may
include lots of individual
form elements.
name = "custStreet"
size = "25“ >
Forms
<form>...</form>
• Attributes:
method = "post" or "get"
– Used by a server-side program for updates or
retrieval from a database.
– Some servers support only one of these, while others
support both.
– get is simpler to use (server-side), while post
supports better security and longer forms.
– Check with your server administrator.
186
Forms
action = "script name or program location"
– When the form is submitted to a script or
program, the script or program can access the
elements contained in the form.
– The action attribute specifies the path to this
script or program.
– Can be a local JavaScript function or server-side
program.
– For now, you can just auto-email the form:
action = "mailto:somebody@niu.edu"
187
Forms
• method and action are used in tandem
to pass form elements to scripts or
programs for processing.
188
Forms
• Widgets/controls: the individual input
areas (several types) on the forms.
• We will look at the attributes for
individual widgets in a moment, but
first the attributes that they have in
common…
189
Forms
• name vs. id: some recent browsers still
require the name attribute on all form
elements, and even just putting in the id in
addition to name can break the widget.
• Can be added to any of the controls, HTML5
only, not yet widely supported:
– required -- Pops up an error message if the form is
submitted without a value.
– autofocus – places the cursor in that field when the page
opens. Can use only once on a form. (You will learn the
JavaScript to do this later in semester.)
• Now, let’s look at individual elements…
190
<html>
(Form test.html)
…
<body>
<h1>New Customer Information</h1>
<p>Please fill in the following information: </p>
<form method = "post" action = "cgi-bin/getCustomer">
<p>First name:
<input type = "text" name = "custFirstname" size = "20“ >
</p>
<p>Last name:
<input type = "text" name = "custLastname" size = "20“ >
Specifies information
</p>
about a single input
field.
<p>Street address:
<input type = "text" name = "custStreet" size = "25“ >
</p>
Forms
• Attributes for the input element (one of
several types of controls)
– name = "programmer defined name"
• required for all input types.
• The name that will be used to refer to this input tag in the
scripts or programs that use it.
– type = "…"
• Three types for now, for three common uses:
– To capture a user-input text field.
– To define reset and submit buttons.
– To pass invisible (hard-coded) values to the script or
program.
• We will look at each...
193
Forms
• type = "text" for one-line text input, as in our
example.
– size = "n"
» The visual size of the input box, in characters.
– maxlength = "n"
» The number of characters that can be entered.
– value = "default value"
» Displays in the box and will be submitted if the
user doesn’t replace it with other text.
– placeholder = "default value"
» Like value, but placeholder disappears on focus
(user clicks into field). All browsers except not
until IE 10. Use both?
194
Forms
• type = "text" for one-line text input, as in our
example.
– autocomplete= "off/on" (on is default)
» Browser remembers when a prior entry was
made in that same field, or a field with the same
name on a completely different webpage.
» Some browsers remember only a list of fairly
standard names, although that list varies from
browser to browser: firstName, first_name,
fname, etc.
» Turn off when security concerns, such as SSN,
credit card, password, etc.
195
Submit and
reset buttons
Forms
• type = "reset" or "submit" for specialized
buttons
– "reset" creates a specialized button that, when
clicked, clears all the input fields on the form back to
their initial values.
– "submit" creates a specialized button that, when
clicked, uses the method attribute and calls the
action script to do something with the input data.
– value = "label for the button"
» The text that displays on the button.
197
Forms
– Careful with the submit button; use it when hitting
the server, but in older browsers, it can cause some
quirky bugs when going to JavaScript.
» Haven’t had any problems lately.
» Alternative – create your own button that, when
clicked, invokes the JavaScript.
198
<p>City:
<input type = "text" name = "custCity" size = "25“ >
</p>
<p>State:
<input type = "text" name = "custState" size = "2“ >
</p>
<p>Zip:
<input type = "text" name = "custZip" size = "10“ >
</p>
Submit and
reset buttons
<p>
<input type = "submit" value = "Submit your information“ >
<input type = "reset" value = "Clear your information“ >
</p>
</form>
Forms
• type = "hidden" for hard-coded (hidden) fields
that you need to send to the script or program.
– value = "the hard-coded value you need to send to
the script"
200
Forms
• Keep in mind that for now, our form
won’t actually do anything – we need to
associate the form with a script or
program, a skill we will explore a bit
later in the semester.
• Therefore, we will just set up the
skeleton of the input form now and
worry about making it work later.
201
Text boxes
Submit and
reset buttons
Forms
• Let’s add a few more features to our form...
(formsTest2.html)
203
Rearranged to put multiple
inputs on one line
List box
Multi-line
text area
Check boxes
Radio button
Non-display field
<html>
...
<body>
...
<form method = "post" action = "cgi-bin/getCustomer">
<p>First name:
<input type = "text" name = "custFirstname" size = 20“ >
Last name:
<input type = "text" name = "custLastname" size = 20“ ></p>
<p>Street address:
<input type = "text" name = "custStreet" size = 25“ ></p>
Eliminating </p>
puts first and last
name on one line.
List box: provides a
drop-down list of
choices.
List box: used for
lists too long for
<p>City:
<input type = "text" name = "custCity" size = 25"> radio buttons.
select state:
<select name = "custState">
<option value=“IA" >Iowa </option>
<option value="IL" selected >Illinois</option>
<option value="IN" >Indiana </option>
<option value="WI" >Wisconsin• </option>
selected element is used as the
</select>
default value, and for initial
position. selected = “selected” in
Zip:
<input type = "text” name = "custZip" XHTML
size = 10“ ></p>
• One <option> for each element to be displayed.
• So, if you want to display 50 states, you would have 50 <option>s
• Both value and content (“Iowa,” “Illinois,” etc.) are needed, and
they can be different. For instance, perhaps value passes codes: 1,
2, 3, etc.
• optgroup provides a nonselectable title line, in bold
(not shown on screenshot).
• selected element not used if
<p>City:
<input type = "text" name = "custCity" optgroup?
size = 25">
select state:
<select name = "custState">
<optgroup label="Please choose a state below.>
<option value=“IA" >Iowa </option>
<option value="IL" selected >Illinois</option>
<option value="IN" >Indiana </option>
<option value="WI" >Wisconsin </option>
</optgroup>
</select>
Zip:
<input type = "text” name = "custZip" size = 10“ ></p>
Forms
• <select>...</select>
• Attributes:
• name = "programmer supplied" id="…"
– Used to refer to the item in scripts and programs.
– Again, careful with id.
• size = "the number of items displayed at one
time"
– The default is 1 – careful here, good test question.
– If the size is smaller than the number of items in the
list, the list will be scrollable.
209
Multi-line text area
for longer fields.
210
•
•
•
•
textarea for multiple-line input areas.
name = "…" name of the input field.
rows = "n" number of rows to display.
cols = "n" number of characters
horizontally.
• wrap = "…" see next slide…
<p>Comments:
<textarea name = "comments" rows = "4" cols = "40" wrap = "soft">
type your comments here</textarea></p>
This displays in the textarea as a default
value and is submitted if the user doesn’t
change it. NOTE: This is not consistent
with the typical value="…" Excellent test
question.
Forms
– wrap =
• “off” word wrap turned off; user must enter
hard carriage returns or text continues to scroll
to the right.
• “hard” word wrap turned on, with carriage
returns saved as a part of the field.
• “soft” (default) word wrap turned on, with
carriage returns displayed but not saved with
the field.
– This is probably the most useful – saving hard
characters with the field can cause problems later.
212
Checkboxes –
multiples can be
checked
213
Forms
• <input type="checkbox"> allows choosing
multiple items from a list of choices.
<input
type = "checkbox"
name = “group name"
value = "name of that single box
within the group" >
– name will be a group name, with several
buttons grouped together.
– value the name of the individual checkbox
within the group.
214
<p>Please all educational levels that you have completed:<br >
Elementary School
<input type = "checkbox" name = "education" value = "elementary" >
High School
<input type = "checkbox" name = "education" value = "highSchool" >
College
<input type = "checkbox" name = "education" value = "college" >
Graduate School
<input type = "checkbox" name = "education" value = "graduateSchool" >
</p>
type = "checkbox" allows
the user to check as many
boxes as desired.
Giving separate values
allows us to access each
checkbox separately.
Giving them all the same
name groups them together.
Radio button – only one
item in the group can be
selected
Forms
• <input type="radio"> allows choosing
only a single item from a list of choices.
<input
type = "radio"
name = "radio group name"
value = "name of that single button" >
– name will be a group name, so that several
radio buttons are grouped together.
– value is used as the name of the individual
radio button within the group.
217
<p>Would you like us to send you email notification of special sales?<br >
Yes<input type = "radio" name = "sales" value = "email" checked >
No<input type = "radio" name = "sales" value = "noEmail“ ></p>
• name associates
these buttons into
one radio button
group, so that they
are mutually
exclusive. Required.
• value identifies the
individual radio
buttons.
• Makes checked the
default for this button.
• checked = "checked" for
XHTML, simple
"checked" for HTML 5.
Non-display field, which
hides the typed characters
by displaying asterisks
instead.
219
Forms
• <input type="password"> hides the typed
characters from view.
220
<p>Email address:
<input type = "password" name = "email" size = "25“ ></p>
<p>
• type
= "=password
" displays
***>or •••.
<input type = "submit"
value
"Submit your
information“
<input type = "reset"
valuethat
= "Clear
information“ ></p>
• Note
typeyour
= "password"
does not
</form>
encrypt the data in any way, just hides it on
</body>
the screen.
</html>
• name = "..." id = "…" name for scripts
and programs to use to refer to this field (as
usual, careful with id).
• value="..." and placeholder="…" default
value. Bad idea for passwords in general?
Forms
• <input type="button"> primarily used to
call a JavaScript script.
222
Forms
• New HTML5 <input> types:
– date
– datetime
– email
– color (a color picker)
– tel (telephone num.)
– range (a slider)
– time
– number
– file (browse button)
– url
Most do not yet work in IE 10 – see here to test:
http://www.w3schools.com/tags/att_input_type.asp . If doesn't
work, it functions as a normal text field.
223
Forms
• Other widget attributes:
– tabindex="…" alters the sequence of moving
through form fields. Quirky in older IE.
– title="…" provides brief mouseover
instructions.
224
Forms
• More on using forms when we get into
JavaScript.
225
Frames
• Frames are inherently evil. We will not use
them in this class AT ALL (nor will anything
about frames be on tests).
• Even so, you need to know what they are…
• Each frame loads a different HTML file.
• For instance, when a web page has
– a title and logo across the top that don’t scroll
– a small menu on the left that doesn’t scroll, and
– a main body on the right that does scroll,
you may be looking at three frames (though
not necessarily)
226
Frames
• So, let’s look at a frames page
(admittedly quite ugly)…
227
“menu”
file not
found.
“main”
“animals”
Frames
• The page that defines where the frames
lie is called the frameset page.
• The frameset page contains the
<head> and the frames – no body at
all.
• Its only purpose is to define the size
and placement of each of the frames.
• It is, of course, loaded first.
229
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.0 frameset//EN">
<html><hEAD><TITLE>frame test</TITLE></hEAD>
<frameset
<frame
<frame
<frame
cols = “200,500,*”>
name = "menu" src = "menu.html” noresize >
name = "main"
src = "formsTest2.html">
name = "animals" src = "imageMapTest.html">
<noframes>
<p>This page requires frames, but your browser does not support
them.</p>
<p>Download the latest version of Internet Explorer from
<a href = "http://www.microsoft.com/">Microsoft</a></p>
</noframes>
</frameset>
</html>
Frames
• Can nest <frameset> within <frame>,
but we aren’t going that far.
• Advantage of frames:
– More control over what is always on display
on the page; for instance, you can make
sure your menu is always present.
• Persistent menu display is probably the
strongest (only?) argument for using frames.
• But there are better ways of doing that today,
using positioned <div>s.
231
Frames
• Disadvantages:
– The initial page takes longer to load
because it is loading multiple files.
– Frames have unique security issues; each
frame can potentially have different
permission levels.
– Search engines can have problems
indexing sites with frames.
– Can print individual frames (if you know
how – most users don’t), but can’t print an
entire page of frames.
232
Frames
• Mostly irrelevant these days, because of
<div>s…
• Bottom line – do not use unless you have
some overwhelming reason to do so!
233
Frames
• But what about <iframes> ?
– An inline, scrolling frame, no <frameset>
required.
– Not quite so bad, but still controversial.
– Removed in HTML 4, back in HTML5.
– Probably best reserved for when you need
a “sandbox” environment – i.e., you need
to isolate content from your CSS, etc.
– Not going further on this one.
234
Containment
• Two new tags used to establish
containment:
– <span>
– <div>
235
Containment
• <span> is an in-line container, meaning
that it is surrounded by running text.
• So, <span> could be embedded within
a paragraph to identify a particular
group of words or characters.
• Perhaps we want to make embedded
vocabulary words within a paragraph a
different color, as for “in-line container”
above.
236
Containment
• Only two attributes for <span>
– id = "…" (for an element that occurs only
once on the page)
– class = "…" (for an element that might occur
multiple times on a page)
– id and class bind the <span> to named CSS
properties in the head of the document or to
CSS in an external file -- we will look at both
later in the semester.
237
Containment
• <div> is used to define a group of
some sort, so that we can apply
formatting to the group as a whole.
• Sets up a block-level container: an
element that normally begins at the
start of one line and ends in a way that
forces the next element to appear on a
new line following the block.
– i.e., a box.
238
Containment
• Block-level elements include h1, h2,…,
p, ul, ol, and li.
• On the other hand, em and strong are
not block-level elements.
• <div> might have several paragraphs
<p>…</p> enclosed within it.
239
Document
Head
Body
h1 Heading
<div>
Paragraph 1
Paragraph 2
Paragraph 3
Link
Containment
• Example:
<div class = "indentedParagraphs">
<p>…</p>
<p>…</p>
<p>…</p>
The only two
possible attributes
</div>
are, again, id and
class.
241
Containment
• <div>s are also used extensively in
page layout, to replace tables.
• Can position <div>s so that they look
like tables and table cells.
• That topic will have to wait until we get
into CSS more thoroughly.
242
Containment
• HTML5 adds some new blocking
elements that function like <div>s,
but with meaning attached:
<HEADER>
<SECTION>
<FOOTER>
<ARTICLE>
<NAV>
<ASIDE>
<FIGURE> (to group an image and its description)
• Can be in capital letters, to make them
more visible (good idea).
243
Viewing the Source Code
of Other Web Pages
• Learn from the code of other web
pages:
– “Imitation is the sincerest form of theft.”
Jeffrey Zeldman, Taking Your Talent to the
Web
• You can view the HTML of pages on the
web by simply clicking “View, Source”
on the browser menu.
– This won’t show much if you are on a page
with frames, BTW.
244
Viewing the Source Code
of Other Web Pages
• Alternately, right-click on the page or
frame, then click “View Source.”
• Developer tools under "Tools" in
Firefox, IE, and Chrome: can do useful
things like view partial source, show if
images are resized, view page in
grayscale, etc.
245
Viewing the Source Code
of Other Web Pages
• Especially helpful -- the AIS Web
Toolbar for IE from
http://www.visionaustralia.org.au/ais/to
olbar/
246
Viewing the Source Code
of Other Web Pages
• You can get your hands on the files of
any web page you are viewing, because
those files are downloaded in a
temporary cache on your hard drive.
• Under "Internet Options" – find where
the temporary internet files are stored,
then you can view them (may have to
unhide the directory first).
247
Class Standards
• Target browsers for this class are
Chrome and Firefox (new this
semester!). Personal and group web
sites should work (or degrade
gracefully) in both.
• Initial grading will be done in Chrome,
followed by a check in Firefox.
• Example of degrading gracefully: color
attribute on <hr> tag works in IE but is
ignored in other browsers.
248
Class Standards
• Also, all pages will be graded at 800 px
wide, because many users are still at this
resolution – hardcode 800 px wide, or
responsive design that adjusts to
width. Why?
– Older computers, bad vision (anyone over
age 45 a candidate), smaller portable device
displays, windows rarely at full-screen, etc.
– My job isn’t to make it easy on you.
249
Class Standards
– 800 px means you have only 750 px to
work with (because of browser chrome),
with no horizontal scroll bar, or I will
deduct points
• Scrolling vertically is fine.
– For your HTML and CSS assignments, you
may NOT use Dreamweaver or any other
IDE – you must hand code in an ASCI text
editor.
– After that, you may use Dreamweaver for
all assignments.
250
More on HTML 5.0
• Lower case versus uppercase – doesn’t matter.
If you mix case, use it with meaning attached
(like for blocking elements).
• Backward compatible with older standards.
• End tags recommended for container elements.
Bad:
<p> This is a paragraph.
<p> So is this…
Good: <p> This is a paragraph. </p>
<p> So is this. </p>
251
More on HTML 5.0
• It doesn’t matter whether you use a
closing “/” for empty (non-container)
elements:
<img … > or <img … / >
• Recommended but not required that all
attribute values are quoted.
<img width="100"> or <img width=100>
• Attributes need not be stated as
name="value" pairs. Either is OK:
checked or checked = "checked "
252
More on HTML 5.0
• Deprecated or dropped in favor of CSS:
– marquee (Thank goodness! Awful tag – do
not use!)
– <center>, align, and valign.
– height and width except for images – OK for
one-offs.
– <font>.
– u.
– Link attributes on the <body>.
253
More on HTML 5.0
• Deprecated or dropped in favor of CSS:
– Virtually all color, bgcolor, background, and
border.
– hspace and vspace.
– type on <li>, <ol>, <and <ul> .
– cellpadding (padding:…) and cellspacing
(border-spacing:…, border-collapse:…)
• Deprecated, but I have no problem with:
– size on <hr>, <input>, and <select>
254
More on HTML 5.0
• Keep in mind that although most
browsers will support the CSS to replace
the stuff on the last couple of slides,
many of the new HTML5 elements are
not yet widely supported, if at all.
• Test your own browser for HTML5
compatibility: http://html5test.com/
255
More on HTML 5.0
• Resources to check what's supported in
various browsers:
– http://html5doctor.com
– http://www.html5rocks.com
– http://html5boilerplate.com/
– http://html5please.com/
• Modernizr – code to swap out HTML5
code in favor of HTML4 code
automatically http://modernizr.com/
256
More on HTML 5.0
• Cross browser list of polyfills (fills a hole
in a browser), shims (fixing something
automatically, like putting a transparent
gif in all empty <td>s automatically), and
fallbacks (degrading gracefully)
https://github.com/Modernizr/Modernizr/
wiki/HTML5-Cross-Browser-Polyfills
257
More on HTML 5.0
• Using premade dynamic behaviors:
– On Dreamweaver prior to CS6, “Insert
Widget” > then download the widgets you
want to install from the web.
– On Dreamweaver CS6, “Insert”>“Spry” (very
limited) or use a framework like JQuery.
– On Dreamweaver Cloud, apparently a new
way of installing widgets.
– Test everything (not just strict HTML5) using
258
Dreamweaver's Browser Lab.
More on HTML 5.0
– Widget help:
http://helpx.adobe.com/dreamweaver/using/jquery
-widget-dreamweaver.html
and
http://tv.adobe.com/watch/learn-dreamweavercc/using-jquery-widgets-in-web-pages-indreamweaver/
259
Web Standards
• Long gone are the wild wild West days of
the Web.
• Now, expected to follow the accepted
standards, although those standards are
evolving day by day.
• Avoid deprecated tags and tags used in
non-standard ways (e.g., tables for layout
instead of divs).
260
HTML References
• Beginner sites:
– W3Schools:
http://www.w3schools.com/html/default.asp
– HTML Goodies:
http://www.htmlgoodies.com/primers/html/
– HTML Code Tutorial:
http://www.htmlcodetutorial.com/
261
HTML References
• Developer sites:
– www.alistapart.com
– http://www.webmonkey.com
– http://validator.w3.org test your page for
various and sundry errors. Free!
– www.adobe.com
262