arts343

• Course Method
• Syllabus

• Schedule
• 01.20 - Intro
• 01.22 - HTML
• 01.27 - Project 1
• 01.29 - HTML
• 02.03 - Project 1
• 02.05 - CSS
• 02.10 - Project 1
• 02.12 - CSS
• 02.17 - Project 2
• 02.19 - PHP
• 02.24 - Project 2
• 02.26 - Wordpress
• 03.03 - Project 2
• 03.05 - Wordpress/PHP
• 03.10 - Project 3
• 03.12 - XML
• 03.17 - Project 3
• 03.19 - XML / XSLT / RSS
• 03.31 - Project 3
• 04.02 - RSS
• 04.07 - Project 4
• 04.09 - Processing
• 04.14 - Project 4
• 04.16 - Processing
• 04.21 - Project 4
• 04.23 - Processing
• 04.28 - Arduino
• 04.30 - Processing/Arduino
• 05.05 - Survey/Wrap-Up

• Collections
• Imagined Worlds

• Projects
• Project 1
• Project 2
• Project 3
• Project 4

• Platforms
• HTML
• CSS
• PHP
• Wordpress
• XML/XSLT
• RSS
• Processing
• Arduino

• Design Methods
• Paper Protyping

School of Art and Design - UIUC

• Built with Indexhibit

01.22 - HTML

Class notes:

How the world wide web works
1. www vs internet
2. navigating file structure
3. URLS, IPs and addressing
- static vs dynamic
4. local vs remote viewing: accessing and saving files from the web
5. EXERCISES
- practice contextual menus in browser to view image, download image
- download 10 images to a folder on your desktop
- find a static webpage (ends in .html or .htm).
- save it to your desktop, then open it in a browser.

How the web browser works
1. markup languages - HTML, XHTML
2. EXERCISE: view code on some webpages, browse around to look at it
3. demo changing and updating a page (mention cacheing)
4. EXERCISES
- enable your netfiles www folder
- within the netfiles file browser, upload the webpage you downloaded before.
- view it in a browser at the new address
- open up your downloaded webpage in Textwrangler
- alter some of the text to read like something else
- test locally in your browser
- re-upload using the FTP within textwrangler

Basic page composition
1. tags - opening and closing, nesting
2. attributes
3. basic page structure: html, head, body tags
4. commenting
5. EXERCISE: open up your page locally, add some comments to describe the different parts of the page, then reupload. view source to confirm.
6. formatting text - bold, italic, emphasize, underline
7. EXERCISE: alter the appearance of some of the text on your page.
8. links - a tag
9. EXERCISE: add a new hyperlink to your chosen page. reupload and
test
10. images - img tag
11. EXERCISE: upload a new image to your server and replace one of the images on your page
12. HOMEWORK: choose an existing webpage, and alter it to create an interesting new meaning or juxtaposition. upload to your netfiles, then send me the URL. due next Thursday!