Académique Documents
Professionnel Documents
Culture Documents
presented by
Shameless Plug
Owner, HyperTrain dot Com San Diego based, but do mostly onsite work plus conferences Train & consult on Help Authoring Tools and related technologies: JavaScript, HTML, CSS, DHTML, Interactivity, Web-based Help, etc. Uncle Dave's motto: "Call me anytime." 888-722-0700, dgash@hypertrain.com
Presentation Overview
Look at main technological components that make up modern Web pages
HTML HyperText Markup Language CSS Cascading Style Sheets JavaScript um, JavaScript
HTML Components
Documents
Document = page = HTM file = topic Content (text, images) Tags (display commands)
Other terms
Window: browser display window URL: Uniform Resource Locator Hyperlink: hypertext jump to a resource Resource: URL, image, mailto, external file
HTML Pages
HTML pages are tag-based documents
Really plain ASCII text files Don't look like documents they represent Tags indicate how processing program should display text and graphics Designed to describe hypertext, not paper Processed by browsers "on the fly" Tags usually appear in pairs Most have reasonable names or mnemonics Most can be modified by attributes/values
<HTML> <HEAD> <TITLE> <BODY> <H1>, <H2>, ... <IMG ...> <A ...> <P> <BR> <OL> <UL> <LI>
</HTML> </HEAD> </TITLE> </BODY> </H1>, </H2>, ... </IMG> (optional) </A> </P> (optional) (none; "empty" tag) </OL> </UL> </LI> (optional)
Paragraph
Probably the most common tag
<p>Yada yada yada...</p>
Note white space or lack thereof in HTML source does not matter!
Unordered (bulleted)
Use <ul>...</ul> tags
(1)
(2)
Images
(1)
Images
(2)
Tables
(1)
A table is a container
<table> ... </table>
Tables
(2)
CSS Concepts
Styles are named sets of formatting commands
[18pt, Arial, left aligned] "Section head" [Bold, italic, blue] "Glossary term" [Normal, 10pt, Verdana] "Body text" [Italic, orange, small caps] "Bob"
Style sheets are control documents that are referenced by content documents
MS Word, other editors & desktop publishing programs have done it for years DOT : DOC :: CSS : HTM
declaration
Selector tells the rule what to modify Declaration tells the rule how to modify it
JavaScript Intro
What JavaScript isnt
Java (object-oriented programming language) A "programmers-only" language
What JavaScript is
Extension to HTML (support depends on browser) An accessible, object-based scripting language
Implementing JavaScript
(1)
Embedded inline
Within other tags (as attribute values)
Implementing JavaScript
(2a)
Implementing JavaScript
(2b)
Attributes
Properties of objects; think adjective
Methods
Actions taken by objects; think verb
Statements
Lines of assembled components; think sentence
Functions
Named groups of statements; think paragraph
Programming Constructs
Variables
Named elements that can change value
Data types
Integer, floating-point, Boolean, string
Operators
Assignment, comparison, arithmetic, Boolean, string, special
Control statements
Conditions, loops
Keywords
Reserved words with special meaning
A Few JS Examples
(1)
A Few JS Examples
(2)
Summary
Most Web pages remote or local are a combination of those technologies
Raw content, placed inside HTML tags, formatted with CSS rules, interactivity produced by JavaScript scripts
Newer technologies like DHTML, XHTML, and XML are based on these
A little knowledge now can prepare you for new technologies and help you keep up with your peers, your boss and your kids!