Internal presentation given by Nick DeNardis at Wayne State University to the Marketing and Communications creative group for internal employee development.

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

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

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

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

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

6. 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

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

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

9. 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

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

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

12. 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

13. 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

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

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

16. 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

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

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

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

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

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

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

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

24. 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