CECS 310: Lecture Series 1

Getting Started
CECS 310: Lecture Series 1

Our Review
Web Page Structure
HTML vs. XHTML
Understanding of DTD’s
In Depth Review of XHTML tags

Structure of Web Pages

Extensible Markup
Language (XML)
Markup language like HTML
Designed to carry data, not display data
Tags are not pre-defined, you must define tags
Designed to be self-descriptive
Is a W3C recommendation

XHTML Document Type
Definitions (DTD)
Strict 1.0 Transitional 1.0 Frameset 1.0

Strict
Provides really clean markup
Free of clutter
Use in conjuction with Cascading Style Sheets (CSS)

Transitional
Use this to use HTML’s presentational features
Able to support browsers that do not understand CSS
Great to use during transitional period between the
past and the future of web
Includes some depricated elements including:
and

Frameset
Used for documents that contain frames
Frames partition a browser window
Each document/include needs the frameset doctype
Not widely used anymore

XHTML
Extensible Hyper-Text
Markup Language
Backward compatible
from HTML 4.01
Will not have to
abandon support for
older browsers
Valid XHTML used for
best practice of
structure

CSS
Cascading Style Sheet
Separating page
structure from
presentation
Style sheets controls:
color
fonts
backgrounds
images
placement of objects

HTML vs. XHTML
XHTML
Elements must be properly nested
Always have a closing tag
Must all be lowercase
Documents must have one root element
Similar to HTML 4.01 standard
HTML
Relaxed on all of these rules
Bad/Dirty coding is still readable
Does not render well in newer browsers

Properly Nested Elements
This is not nested correctly
This text is nested correctly
A common mistake with lists
List item 1
List item 2
Second Item 1
Second Item 2
List Item 3
List item 1
List item 2
Second Item 1
Second Item 2
List Item 3

Elements Must Be Closed
Wrong
Put a horizontal line below here
Place a break in the paragraph
Place an image here
Correct
Put a horizontal line below here
Place a break in the paragraph
Place an image here

elements must be lowercase
Wrong
This is a paragraph
Correct
This is a paragraph

One Root Element
Documents must be nested
within the root element.
Sub-elements must be in pairs
and correctly nested in parent
elements.
...
...
Example of basic document
structure.

Attributes in XHTML
Values Must Be Quoted
Wrong
Correct

Attributes in XHTML
Names Must Be lowercase
Wrong
. . .
Correct
. . .

Attributes in XHTML
Minimization is Forbidden
Wrong
Correct

Attributes in XHTML
HTML
compact
checked
declare
readonly
disabled
selected
defer
ismap
nohref
noshade
nowrap
multiple
noresize
XHTML
compact="compact"
checked="checked"
declare="declare"
readonly="readonly"
disabled="disabled"
selected="selected"
ismap="defer"
ismap="ismap"
nohref="nohref"
noshade="noshade"
nowrap="nowrap"
multiple="multiple"
noresize="noresize"

The id="..." Attribute
Wrong
Correct
In the Meantime...just to be safe.

Head Tag
Informational content for the browser
Title tag
Meta-Tags
Link Tags
Javascript Libraries

The Title Tag
Great area to place keywords
Most important part for web searches
Place main keywords first, take out non-valuable words
Do not use keywords more than twice
Poor Use
Search Engine Optimization, SEO Help and SEO
Tutorial and SEO Guide - All for Organic SEO
Good Use
SEO Help | Search Engine Optimization Help
Tutorials Guide | Organic SEO

Body Element
All presentation attributes deprecated in HTML 4.01
XHTML 1.0 Strict does not support presentation
attributes in the body element.
Location of the content

Body Element : Optional
Attribute Description DTD
a:link
background
link
text
vlink
Color of active
links.
Image as a
backgorund
Specifies color
of links
Color of text
Color of visited
links
Transitional,
Frameset
Transitional,
Frameset
Transitional,
Frameset
Transitional,
Frameset
Transitional,
Frameset

Block-Level Elements
Contain inline elements and other block-level elements.
Element renders on a new line.
addres - Formats address
blockquote - Block Quotation
div - Generic block-level container
dl - definition list
fieldset - Form control
form - Interactive Form
h1 --> h6 - Heading tags
hr - Horizontal rule
noscript - Alternate script content
ol - Ordered List
p - Paragraph
pre - Pre-formatted Text
table - Table
ul - Unordered List

Block-Level Elements
Can be considered block-level:
dd - Definition Description
dt - Definition Term
li - List Item
tbody - Table Body
tfoot - Table Foot
th - Table Header Cell
thead - Table Head
tr - Table Row
td - Table Date Cell
Block-level or Inline Elements
button - Button
del - Deleted Text
ins - Inserted Text
map - Image Map

Inline Elements
Contain only text and other inline elements.
Elements do not begin on new line.
a - Anchor
abbr - Abbreviation
acronym - Acronym
br - Line Break
cite - Citation
code - Computer Code
dfn - Definition Term
em - Emphasis
img - Inline Image
input - Form Input
label - Form Field Label
q - Short Quotation
select - Option Selector
span - Generic Inline Container

Deprecated Elemtents
applet
basefont
center
dir
font
menu
s
strike
u
br
is index

Lab Assignment 1