Under the Hood

1
Under the Hood

• Using W3C Standards
• to Tune Up
• Your Web Site

2
W3C

• World Wide Web Consortium

3
Web Development 101
4
Valid Code

• Begins with a DocType
• Written in XHTML
• Has a page title
• Validates

5
What is . . .

• XHTML
• Extensible HyperText Markup Language
• The replacement for HTML 4.01
• Last updated in 1999
• The bridge between HTML XML
• Separates presentation from structure
• Is designed for large-scaled electronic
  publishing

6
What is . . .

• Doc Type
• HTML
• XHTML
• Loose
• Transitional
• Strict
• XML

7
Writing the Code

• Standards-Based Visual Editors
• Dreamweaver
• GoLive
• New FrontPage

• Coding
• Note Pad
• Crimson Editor
• thefreecountry.com

Blending Split Screen View
8
Opening the Hood

• Split Screen
• Code
• View Source

9
(No Transcript)
10
Firefox
11
IE
12
Coding

• lower case
• Closed elements
• ltpgt requires lt/pgt
• ltbrgt comes ltbr /gt
• Escaping characters

13
WYSIWYG
Structure

• DocType
• ltheadgt
• lttitlegtGive your page a Search Engine
  Namelt/titlegt
• lt/headgt
• ltbodygt
• lth1gtHeadingslt/h1gt
• ltpgtParagraphslt/pgt
• ltolgt
• ltligtlt/ligt
• lt/olgt
• ltulgt
• ltligtlt/ligt
• lt/ulgt
• lt/bodygt
• lt/htmlgt

14
Other Basic Coding

• Divs, Classes, Alt Text
• Page Layout
• Divide pages into boxes
• Presentation
• Font, Color, Size, Decoration
• Accessibility
• Alternate text
• Keyboard access key

15
P r e s e n t A t i O n
Cascading Style Sheet
body font-family Arial, sans-serif color
333333 background-color FFFFFF line-height
1.166 margin 0px padding 0px

• alink, avisited, ahover
• color 006699
• text-decoration none
• ahover
• text-decoration underline

• Body
• font-family Arial,sans-serif
• color 333333
• line-height 1.166
• margin 0px
• padding 0px
• alink, avisited, ahover
• color 006699
• text-decoration none
• ahover
• text-decoration underline
• h1, h2, h3, h4, h5, h6
• font-family Arial,sans-serif

h1, h2, h3, h4, h5, h6 font-family Arial,
Times New Roman, sans-serif margin
0px padding 0px
16
CSS

• Creating styles
• Internal
• External
• Inline
• Purpose
• Separating content from presentation
• Updating
• Lighten server load

17
E C M A S c r i p t
h
h
e
B
i
http//www.ecma-international.org/memento/index.ht
ml
J
a
v
a
S
c
r
i
p
t
a
F l a s h
o
r
v
18
Behavior

• Content vs. Cute
• Should enhance message
• Serve a purpose
• Not cause accessibility issues
• Use good code

19
Why bother?

• Accessibility
• Bandwidth
• Browser compatibility

• Ease of maintenance
• Forward compatible
• Output compatibility

20
Why bother?

• Accessibility
• Included in W3C Standards
• Bandwidth
• Count the Font tags
• Browser Compatibility
• Agreement among developers
• Viewable in Any Browser

21
Why bother?

• Maintenance
• Content and presentation separation
• Forward Compatible
• Lack of deprecated code
• Use of standardized code
• Output Compatibility
• Only one version for
• Screen, Monitor, Handheld, Print

22
Under the Hood Comparison

• Non-standardized code and Inaccessible
• Alabama Family Ties
• Standardized and Accessible
• Instructional Technology Division
• Zen Garden

23
Validation Resources

• W3C Standards
• http//www.w3c.org
• Web Accessibility (WAI)
• http//www.w3c.org/WAI
• HTML Validator
• http//validator.w3.org/
• CSS Validator
• http//jigsaw.w3.org/css-validator/

24
NCSLMA 2005 Conference PresentationOuida W.
MyersGrant Consultant and AdministratorInstructi
onal TechnologiesNorth Carolina Department of
Public Instruction301 N. Wilmington St.Raleigh,
NC  27601-2825(919) 807-3271 omyers_at_dpi.state.nc.
us
Questions?

• In compliance with federal law, including the
  provisions of Title IX of the Education
  Amendments of 1972, N C Public Schools
  administers all state-operated educational
  programs, employment activities and admissions
  without discrimination because of race, religion,
  national or ethnic origin, color, age, military
  service, disability, or gender, except where
  exemption is appropriate and allowed by law.
  Inquiries or complaints should be directed to
  Dr. Elsie C. Leak, Associate Superintendent,
  Office of Curriculum and School Reform Services.
  6307 Mail Service Center, Raleigh, NC 27699-6307.
  Telephone [phone]