Introduction to the
Web
Nick DeNardis
Wayne State University
Office of Marketing and Communications
February, 26, 2008 mac.wayne.edu
1

the web is square
February, 26, 2008 mac.wayne.edu
2

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.edu
3

an http request
February, 26, 2008 mac.wayne.edu
4

detailed page load
February, 26, 2008 mac.wayne.edu
5

html tag
<a href=”http...” target=”_blank” title=”Go...”>Text</a>
<img src=”http..” width=”1” height=”1” alt=”...” />
a basic web page
February, 26, 2008 mac.wayne.edu
6

document object model
February, 26, 2008 mac.wayne.edu
7

headers
February, 26, 2008 mac.wayne.edu
8

other common tags
• p -- anchor
paragraph
• a - image
• img - emphasis
• em - bold
• strong unordered and ordered list
• ul,- ol - item
• li -list break
• br span - placeholders
line
• div,- definition list
• dl dd - definition title, definition description
• dt,
February, 26, 2008 mac.wayne.edu
9

block vs inline
February, 26, 2008 mac.wayne.edu
10

block vs inline
February, 26, 2008 mac.wayne.edu
11

cascading style sheets
• Separation of structure and presentation
• Positioning on screen
• Backgrounds and images
• Fonts and readability
adding style
February, 26, 2008 mac.wayne.edu
12

css media
• all - applied to all
• handheld - mobile phone
• print - when transfered to printer
• screen - for color computer screens
February, 26, 2008 mac.wayne.edu
13

css syntax
• body { #000000;
color:
margin: 0px;
}
• #content {}
• .alert {}
• #content .alert {}
• dl.news dt {}
February, 26, 2008 mac.wayne.edu
14

some css properties
February, 26, 2008 mac.wayne.edu
15

css positioning
• Browser Support
• IE6 & IE7 & FF3
• Firefox 2
• Safari 39
• Opera
• Methods
• Float Clear
• Relative Positioning
• Absolute Positioning
February, 26, 2008 mac.wayne.edu
16

css box model
February, 26, 2008 mac.wayne.edu
17

box model expanded
February, 26, 2008 mac.wayne.edu
18

float clearing
February, 26, 2008 mac.wayne.edu
19

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.edu
20

designing on a grid
February, 26, 2008 mac.wayne.edu
21

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.edu
22

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.edu
23

resources
• Web Design from Scratch
http://webdesignfromscratch.com/
• Semantic (X)HTML
http://microformats.org/wiki/semantic
• CSS Properties
http://htmldog.com/reference/cssproperties/
• More to come
February, 26, 2008 mac.wayne.edu
24