1. ALBERT WAVERING BOBBY SENG

2. Welcome  Introductions  Existing knowledge?  Laptops?  Course goals  Introduction to several topics  Encourage creativity  Develop a site for a nonprofit, etc. for capstone

3. Topics  HTML  CSS  Javascript  PHP  MySQL  Content Management Systems

4. Course Structure  14 Classes  Weekly quizzes (don’t hate us)  Small homework projects  Grading:  Attendance/participation25% Quizzes25% Homework50%  Half for serious, unique attempt, rest for correctness

5. How The Internet Works  Series of tubes

6. How The Internet Works  When a web page is loaded, what happens?  Specifically, your PC is a ‘client’  Client -> DNS lookup (what is ‘google.com’?)  74.125.39.106  Client asks server for webpage  Server returns a static webpage or generates one to show the client based on any parameters

7. Organization  What happens where?!  Server  Returns a static HTML file, OR  Renders and returns a page using PHP or any other server technology  Perhaps look up data from an SQL database  Client  Decides how the HTML and CSS will appear to the user  Runs any Javascript the page includes

8. Analogy Time!  Client: hungry man  HTML: bread  CSS: peanut butter and jelly  Javascript: sandwich is now cut in half  PHP: the sandwich’s maker  MySQL: kitchen cabinet  Server: kitchen

9. HTML  HyperText Markup Language  NOT a programming language  Consists of ‘elements’ denoted in a structure  Document Object Model  How the browser understands the page in order to display it  A browser interprets this to display a webpage  Outline-esque

10. Sample HTML  Hello, world!

11. That Was Easy  Yes, it was  Used element  Defines a paragraph  Opening and closing tags  Few exceptions  Other elements?

12. Some other elements  Paragraph  Link (anchor)  Table  Unordered list  Divider  Span  Line break*  Many others

13. Special elements   Defines header of HTML file   Defines content of HTML file   Defines title of page

14. HTML Standard  Standard exists so all browsers show (somewhat) same page  Different browsers use different rendering engines  Firefox: Gecko  Chrome, Safari: WebKit  IE: Trident  Opera: Presto  Standard is self-defining (XHTML) 

15. Example Our First Page Hello, world! This is a webpage.

16. Attributes  Help customize an element  id (unique identification for an element)  class (category)  Text field value  Picture size

17. Case Study: Tag  Some attributes:  Source URL  Alternate text  Dimensions  Source  Either URL or local image  Example: 

18. Assignment  Create a webpage comprised of a single HTML file  Requirements:  Use at least three tags in addition to the standard required tags:,,,  Must pass W3C Validation: http://validator.w3.org/#validate_by_upload http://validator.w3.org/#validate_by_upload  Due by midnight next Wednesday the 8 th  Email to sduwebship@gmail.com

19. Tips and Tricks  View source  Right click a page, ‘view source’ to see HTML  Text editors (please do not use a word proc)  Mac: TextWrangler  http://www.barebones.com/products/textwrangler/  PC: Notepad++  http://notepad-plus-plus.org/

20. Resources  Us!  sduwebship@gmail.com sduwebship@gmail.com  We’ll try to answer ASAP, but no guarantees  Do not wait til the last day to ask us, we’re students too  Make honest attempt to figure out answer on your own first  Office hours TBD  http://www.w3schools.com/ http://www.w3schools.com/  http://en.wikipedia.org http://en.wikipedia.org  http://htmldog.com/ http://htmldog.com/