1. Web Design: Basic to Advanced Techniques Spring 2010 Tuesdays 7-8pm 200 Sutardja-Dai Hall WELCOME TO THE COURSE!

2. Today’s Agenda Cool Websites Topic Overview Syllabus Highlights Course Website HTML Introduction – Part1

3. Cool Websites http://cssremix.com http://www.thefwa.com http://www.lookom.com

4. Topic Overview HTML and CSS ~ 2 lectures on HTML, and ~ 4 lectures on CSS and layout JavaScript ~ 3 lectures Vanilla, Prototype, Scriptaculous MySQL ~ 2 lectures phpMyAdmin PHP ~ 2 lectures

5. Syllabus Highlights Attendance is mandatory 20% of Grade Excusable if sick or exam conflict Course work Quiz (~weekly, 1 to 2 questions) - 10% of Grade Mini-Projects (end of every section, fill out framework) – 50% of Grade Final Project – 20% of Grade 7–8PM Lecture, 8-9PM Optional Lab/Q&A

6. Course Website http://decal.aw-industries.com Announcements Lecture Slides Roll call Assignments Submission Grading Chatroom and Instant Message Real Time Status Missing Assignments Missing Attendances

7. Web Design: Basic to Advanced Techniques Spring 2010 Tuesdays 7-8pm 200 Sutardja-Dai Hall HTML Introduction – Part 1

8. What is HTML? HyperText Markup Language (HTML) Computer coding language Gives structure to ordinary text via tags Also links multiple documents Standardized by the World Wide Web Consortium (W3C) http://www.wc3.org Untitled Document

9. What is HTML? Without HTML About Us Who We Are French Bros., a family owned and operated company, was established in San Francisco Bay in 1954 specializing in commercial and residential floors (i.e., carpet, vinyl, hardwood & laminate) as well as ready-made window coverings. Founders Robert and Ray Levesque built French Bros. on one principle: To provide their customers with outtstanding service, incredible savings, personal attention and fantastic products to enhance your living environment - a mission carried on today by the current owners (Ray's children) Jim, Brad, and Susan. French Bros. provides complete no-cost consultations on all projects. No job is too big or too small for our dedicated sales staff who are commited to providing the technical support and innovative product knowledge that will empower you, our customer, to make the best buying decisions for your home or office. Call us today to see what French Bros. can do for you! What We Do We do it all...from the ground up (Floor Coverings)... to a little privacy (Window Coverings)... and more... All at prices you can afford! Floor Coverings: Carpet, vinyl, hardwood & laminate Window Coverings: Hunter Douglas: Country Woods, Silhouette, Window Shadings, Duette, Honeycomb Shades Home Furnishings: Complete, no-cost consultations with our interior design specialists to meet all your home furnishing needs With HTML

10. HTML and Web Pages So… HTML formats text, but what about web pages? They have geometric shapes, images, and movies – nothing like text at all!

11. View Source

12. HTML Tags Markup via tags Separate potions of plain text in document Interpreted by the browser, but not printed on web page “ ” differentiate tags from rest of document Opening brace Element type Closing brace

13. HTML Element HTML elements are generally composed of opening tags and closing tags Some HTML elements can take attributes in the opening tag Hello, world! Opening tagClosing tagContents NameValue Attribute Backslash

14. Basic HTML Tags HTML: Head: Body: Hyperlink: Image: Table: Unordered List: Headings (1-6): Paragraph: Break:

15. Span TEXT

16. (Links) Creates a hyperlink to a new page TEXT A Link to Google http://google.com

17. (Image) Displays an image

18. (Break) Creates a line break/return 1 x Gives next line 2 x Gives extra space No attributes

19. (Headings) Creates a text heading 1 through 6 No attributes

20. (Paragraph) Distinguishes text paragraphs No attributes

21. (Unordered List) Creates a bulleted, top-to-bottom list list element list items Nested structure

22. Nested HTML Tags Must be closed in reverse order of opening Blocks can contain inline, but inline CAN’T contain block

23. Block vs. Inline Block elements are rendered on their own line Inline elements are rendered next to adjacent inline elements Block Inline p span

24. (Table) table tags row tags column tags Every row must have the same # of cols Colspan attribute Cellspacing is space between cells Cellpadding is space between cell contents and cell wall 3 x 2 Table