Web Primer

Summary slides of the Drive Thru Workshop: Web Primer.

Transcript

1. Building Websites A Web Primer
2. Richard Key Started with Neopets... Professional for 5 years Degrees in Game Programming/Design Chief Code Wrangler @ Modulus @busyrich
3. Server-Side Client-Side
4. Server-Side Data Resources
5. Structure Aesthetics Function Client-Side
6. Support Materials HTML Structure
7. Layout Look/Feel CSS Aesthetics
8. Control Modify JavaScript Function
9. Server-Side Structure Aesthetics Function
10. Server-Side Structure Aesthetics Function Remote Complex Time :(
11. Server-Side Structure Aesthetics Function Lives in Browser Just Files Foundation
12. Server-Side Structure Aesthetics Function
13. HTML = Structure HyperText Markup Language
14. Markup?
15. Markup = Virtual Structure Tags (Elements) Conceptual or Functional <atag > attribute = "value" </atag> <btag></btag> Languages differ in Tag and Attributes
16. <html> </html> <head> </head> <title>Example Page</title> <body> </body> <h1>Important Stuff</h1> <p>Some text.</p> <a href="http://example.com">Reference</a> <p>Some more text.</p>
18. In the Early Days...
19. In the Early Days... • There was no CSS • Style was not separate from HTML • <blink> tag ☹ • Very limited • Needed something better
20. CSS = A Better Way Cascading Style Sheet
21. CSS • Styles • Colors, Margins, Fonts, etc. • Applied to tags, text, or resources • CSS ♥s HTML • Separate files
22. CSS Basics Selectors vs. Styles #myThing { } background-color: rgb(50,50,50); color: rgb(255,255,255); , .dark, a
23. <html> <body> <p>Normal Style</p> <p id="myThing">Reversed Style</p> </body> </html>
24. #myThing { background-color: rgb(50,50,50); color: rgb(255,255,255); }
25. Richard Key richard@modulus.io Twitter: @busyrich http://www.linkedin.com/pub/richard-key/25/550/668