Introduction to the Web
Nick DeNardisWayne State University
Office of Marketing and Communications
February, 26, 2008 mac.wayne.edu1
the web is square
February, 26, 2008 mac.wayne.edu2
five main elements
• HTML (just text)
• CSS (just text)
• Images (compression is key)
• Javascript (for added functionality)
• Flash (cross platform interactivity)
February, 26, 2008 mac.wayne.edu3
an http request
February, 26, 2008 mac.wayne.edu4
detailed page load
February, 26, 2008 mac.wayne.edu5
a basic web page
html tag<a href=”http...” target=”_blank” title=”Go...”>Text</a>
<img src=”http..” width=”1” height=”1” alt=”...” />
February, 26, 2008 mac.wayne.edu6
document object model
February, 26, 2008 mac.wayne.edu7
headers
February, 26, 2008 mac.wayne.edu8
other common tags
• p - paragraph• a - anchor• img - image• em - emphasis• strong - bold• ul, ol - unordered and ordered list• li - list item• br - line break• div, span - placeholders• dl - definition list• dt, dd - definition title, definition description
February, 26, 2008 mac.wayne.edu9
block vs inline
February, 26, 2008 mac.wayne.edu10
block vs inline
February, 26, 2008 mac.wayne.edu11
cascading style sheets• Separation of structure and presentation
• Positioning on screen
• Backgrounds and images
• Fonts and readability
February, 26, 2008
adding style
mac.wayne.edu12
css media
• all - applied to all
• handheld - mobile phone
• print - when transfered to printer
• screen - for color computer screens
February, 26, 2008 mac.wayne.edu13
css syntax
• body { color: #000000; margin: 0px;}
• #content {}
• .alert {}
• #content .alert {}
• dl.news dt {}
February, 26, 2008 mac.wayne.edu14
some css properties
February, 26, 2008 mac.wayne.edu15
css positioning
• Browser Support• IE6 & IE7• Firefox 2 & FF3• Safari 3• Opera 9
• Methods• Float Clear• Relative Positioning• Absolute Positioning
February, 26, 2008 mac.wayne.edu16
css box model
February, 26, 2008 mac.wayne.edu17
box model expanded
February, 26, 2008 mac.wayne.edu18
float clearing
February, 26, 2008 mac.wayne.edu19
overall document structure
• <div id=”container”>
• <div id=”header”>...</div>
• <div id=”navigation”>...</div>
• <div id=”content”>...</div>
• <div id=”related-info”>...</div>
• <div id=”footer”>...</div>
• </div>
February, 26, 2008 mac.wayne.edu20
February, 26, 2008
designing on a grid
mac.wayne.edu21
images
• Keep file size down
• User background colors where possible
• Combine images where possible
• Always use alternate tags to describe
February, 26, 2008 mac.wayne.edu22
designing from the html out
• Start from the HTML
• Structure the content and DOM
• Position elements for the screen
• Add style and images
• Format for Print and Mobile
• Become comfortable with the constraints of the web
February, 26, 2008 mac.wayne.edu23
resources
• Web Design from Scratchhttp://webdesignfromscratch.com/
• Semantic (X)HTMLhttp://microformats.org/wiki/semantic
• CSS Propertieshttp://htmldog.com/reference/cssproperties/
• More to come
February, 26, 2008 mac.wayne.edu24
