CECS 310: Lecture Series 1
CECS 310: Lecture Series 1
CECS 310: Lecture Series 1
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
Getting Started<br />
<strong>CECS</strong> <strong>310</strong>: <strong>Lecture</strong> <strong>Series</strong> 1
Our Review<br />
Web Page Structure<br />
HTML vs. XHTML<br />
Understanding of DTD’s<br />
In Depth Review of XHTML tags
Structure of Web Pages<br />
<br />
<br />
<br />
<br />
<br />
Extensible Markup<br />
Language (XML)<br />
Markup language like HTML<br />
Designed to carry data, not display data<br />
Tags are not pre-defined, you must define tags<br />
Designed to be self-descriptive<br />
Is a W3C recommendation
XHTML Document Type<br />
Definitions (DTD)<br />
Strict 1.0 Transitional 1.0 Frameset 1.0
Strict<br />
<br />
Provides really clean markup<br />
Free of clutter<br />
Use in conjuction with Cascading Style Sheets (CSS)
Transitional<br />
<br />
Use this to use HTML’s presentational features<br />
Able to support browsers that do not understand CSS<br />
Great to use during transitional period between the<br />
past and the future of web<br />
Includes some depricated elements including:<br />
and
Frameset<br />
<br />
Used for documents that contain frames<br />
Frames partition a browser window<br />
Each document/include needs the frameset doctype<br />
Not widely used anymore
XHTML<br />
Extensible Hyper-Text<br />
Markup Language<br />
Backward compatible<br />
from HTML 4.01<br />
Will not have to<br />
abandon support for<br />
older browsers<br />
Valid XHTML used for<br />
best practice of<br />
structure
CSS<br />
Cascading Style Sheet<br />
Separating page<br />
structure from<br />
presentation<br />
Style sheets controls:<br />
color<br />
fonts<br />
backgrounds<br />
images<br />
placement of objects
HTML vs. XHTML<br />
XHTML<br />
Elements must be properly nested<br />
Always have a closing tag<br />
Must all be lowercase<br />
Documents must have one root element<br />
Similar to HTML 4.01 standard<br />
HTML<br />
Relaxed on all of these rules<br />
Bad/Dirty coding is still readable<br />
Does not render well in newer browsers
Properly Nested Elements<br />
This is not nested correctly<br />
This text is nested correctly<br />
A common mistake with lists<br />
<br />
List item 1<br />
List item 2<br />
<br />
Second Item 1<br />
Second Item 2<br />
<br />
List Item 3<br />
<br />
<br />
List item 1<br />
List item 2<br />
<br />
Second Item 1<br />
Second Item 2<br />
<br />
<br />
List Item 3<br />
Elements Must Be Closed<br />
Wrong<br />
Put a horizontal line below here<br />
Place a break in the paragraph<br />
Place an image here <br />
Correct<br />
Put a horizontal line below here<br />
Place a break in the paragraph<br />
Place an image here
elements must be lowercase<br />
Wrong<br />
<br />
This is a paragraph<br />
<br />
Correct<br />
<br />
This is a paragraph<br />
One Root Element <br />
Documents must be nested<br />
within the root element.<br />
Sub-elements must be in pairs<br />
and correctly nested in parent<br />
elements.<br />
<br />
...<br />
...<br />
<br />
Example of basic document<br />
structure.
Attributes in XHTML<br />
Values Must Be Quoted<br />
Wrong<br />
<br />
Correct<br />
Attributes in XHTML<br />
Names Must Be lowercase<br />
Wrong<br />
. . . <br />
Correct<br />
. . .
Attributes in XHTML<br />
Minimization is Forbidden<br />
Wrong<br />
<br />
Correct<br />
Attributes in XHTML<br />
HTML<br />
compact<br />
checked<br />
declare<br />
readonly<br />
disabled<br />
selected<br />
defer<br />
ismap<br />
nohref<br />
noshade<br />
nowrap<br />
multiple<br />
noresize<br />
XHTML<br />
compact="compact"<br />
checked="checked"<br />
declare="declare"<br />
readonly="readonly"<br />
disabled="disabled"<br />
selected="selected"<br />
ismap="defer"<br />
ismap="ismap"<br />
nohref="nohref"<br />
noshade="noshade"<br />
nowrap="nowrap"<br />
multiple="multiple"<br />
noresize="noresize"
The id="..." Attribute<br />
Wrong<br />
<br />
Correct<br />
<br />
In the Meantime...just to be safe.<br />
Head Tag<br />
Informational content for the browser<br />
Title tag<br />
Meta-Tags<br />
Link Tags<br />
Javascript Libraries
The Title Tag<br />
Great area to place keywords<br />
Most important part for web searches<br />
Place main keywords first, take out non-valuable words<br />
Do not use keywords more than twice<br />
Poor Use<br />
Search Engine Optimization, SEO Help and SEO<br />
Tutorial and SEO Guide - All for Organic SEO<br />
Good Use<br />
SEO Help | Search Engine Optimization Help<br />
Tutorials Guide | Organic SEO
Body Element<br />
All presentation attributes deprecated in HTML 4.01<br />
XHTML 1.0 Strict does not support presentation<br />
attributes in the body element.<br />
Location of the content
Body Element : Optional<br />
Attribute Description DTD<br />
a:link<br />
background<br />
link<br />
text<br />
vlink<br />
Color of active<br />
links.<br />
Image as a<br />
backgorund<br />
Specifies color<br />
of links<br />
Color of text<br />
Color of visited<br />
links<br />
Transitional,<br />
Frameset<br />
Transitional,<br />
Frameset<br />
Transitional,<br />
Frameset<br />
Transitional,<br />
Frameset<br />
Transitional,<br />
Frameset
Block-Level Elements<br />
Contain inline elements and other block-level elements.<br />
Element renders on a new line.<br />
addres - Formats address<br />
blockquote - Block Quotation<br />
div - Generic block-level container<br />
dl - definition list<br />
fieldset - Form control<br />
form - Interactive Form<br />
h1 --> h6 - Heading tags<br />
hr - Horizontal rule<br />
noscript - Alternate script content<br />
ol - Ordered List<br />
p - Paragraph<br />
pre - Pre-formatted Text<br />
table - Table<br />
ul - Unordered List
Block-Level Elements<br />
Can be considered block-level:<br />
dd - Definition Description<br />
dt - Definition Term<br />
li - List Item<br />
tbody - Table Body<br />
tfoot - Table Foot<br />
th - Table Header Cell<br />
thead - Table Head<br />
tr - Table Row<br />
td - Table Date Cell<br />
Block-level or Inline Elements<br />
button - Button<br />
del - Deleted Text<br />
ins - Inserted Text<br />
map - Image Map
Inline Elements<br />
Contain only text and other inline elements.<br />
Elements do not begin on new line.<br />
a - Anchor<br />
abbr - Abbreviation<br />
acronym - Acronym<br />
br - Line Break<br />
cite - Citation<br />
code - Computer Code<br />
dfn - Definition Term<br />
em - Emphasis<br />
img - Inline Image<br />
input - Form Input<br />
label - Form Field Label<br />
q - Short Quotation<br />
select - Option Selector<br />
span - Generic Inline Container
Deprecated Elemtents<br />
applet<br />
basefont<br />
center<br />
dir<br />
font<br />
menu<br />
s<br />
strike<br />
u<br />
br<br />
is index
Lab Assignment 1