1. Today’s Agenda Course Facilitator Introduction Announcements Quiz Servers and Clients URLs Dreamweaver Setup HTML Introduction – Part 2

2. About the Instructor Programs Photoshop Flash Dreamweaver ImageReady Languages HTML CSS JavaScript (Vanilla, Prototype, Scriptaculous) PHP SQL (MySQL, PostgreSQL, SQLite) Ruby (Ruby on Rails) ActionScript 2.0 & 3.0 Python C Java Scheme Bash Machine, Assembly, … Alexander Wong (3 rd Year EECS Major) Freelance Web and Graphics Designer Self-taught Recently: Exploring Ruby on Rails Looking into: Internet startups

3. Previous Work iForged International and DTM Kreuz French Bros. Comfort Suites (Power of CSS) BearStartup (Flash vs. JavaScript)

4. Announcements DeCal website Profile picture Instant messaging Roll Submitting HW Enrollment Update Software Seekers Mini Project #1 released

5. HTML - Quiz #1 http://decal.aw-industries.com

6. Servers and Clients Client Server Browser Web Server DNS Lookup google.com = 74.125.19.147 74.125.19.147/logo.gif http://google.com/logo.gif 1. 2. 3. 4. 5. logo.gif

7. URLs http://www.royaljadehouse.com/images/Contact.jpg Protocol Hostname DomainPrefix Path File Name Extension URLs specify the location of files on the web. Root (http://www.royaljadehouse.com) is the base directory pointed to by the domain namehttp://www.royaljadehouse.com

8. Absolute vs. Relative URLs and Absolute URL http://frenchbros.com/AboutUs.php http://frenchbros.com/IMAGES/ABOUTUS/IMAGES/a.gif Root Relative URL /IMAGES/ABOUTUS/IMAGES/a.gif Relative URL IMAGES/ABOUTUS/IMAGES/a.gif

9. Dreamweaver Setup 1.Create “WDD Site” folder on Desktop 2. Create “IMAGES” sub-folder

10. Dreamweaver Setup 3. Start Dreamweaver 4. Click Site>Manage Sites… on top bar 5. Click New>Site

11. Dreamweaver Setup 6. Enter “Web Design Decal” in site name. Click the folder icon next to “Local root folder” and navigate to “WDD Site” on Desktop. Click the folder icon next to “Default images folder” and navigate to “IMAGES” sub-folder 7. Enter http://aw- industries.com/cs98_xx/http://aw- industries.com/cs98_xx/ For “HTTP address”

12. Dreamweaver Setup 8. On the left side click “Remote Info” and select “FTP” from the “Access” dropdown menu 9. Enter “decal.aw-industries.com” for “FTP host”. Enter “/public” for “Host Directory”. Enter “cs98-xx” for “Login”. Enter your password. Check the box marked “Use passive FTP”. Check the box marked “Automatically upload files on save”.

13. Dreamweaver Setup 10. Click “Test”. You should see the message above. If you don’t please check your steps. 11. Click “OK” on the dialog and “OK” on the configuration window to save your settings. Dreamweaver is now properly configured and will upload all working documents to the web server on save. You can view your publically accessible pages via http://aw-industries.com/cs98_xx

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

15. HTML Document Structure Untitled Document

16. Doctype Tells the browser what type of document it is and by which rules to follow when rendering the page XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset Not an actual HTML element

17. html Element xmlns is a required attribute and should be set to what appears above Later versions of xhtml may allow custom namespaces

18. head Element Place for meta data And tags Description Keywords Title of page Content Type Text/html Image/jpeg Video/mpeg

19. body Element Where actual website content goes. All the tags from our last lecture should be used here.