DAY/TIME/PLACE

Wednesdays, Hybrid Structure, Feb-May 2011 (starts February 29th)

Instructor: Bruce Donald Campbell

Faculty, Continuing Education - RISD, Providence, RI
Director, Watersheds Project, Providence, RI

Email: bcampbel01@risd.edu bcampbel01@risd.edu

Prerequisites: None                                             Class Roster

DESCRIPTION

Understanding hypertext markup language (HTML) is essential for designers who wish to implement their creative visions on-line, and it is also surprisingly easy to learn. Students in this course learn the HTML attributes and commands used to create web pages, link to other files or pages, format text, integrate graphics and manage page layout. After creating their projects in HTML, students learn to upload them to a web server using file transfer protocol (FTP) software. Topics of discussion include meta-information (for helping search engines find your web site), cross-platform issues and browser compatibility.

This course provide students with an orientation and introduction to Web-based content generation Using HTML and CSS. The HyperText Markup Language is the original language of the Web and still a very good language to start with for providing website content. But for those who have more detailed electronic publishing requirements, Cascading Style Sheets provide the opportunity to layout Web pages more exactly as if they were being designed for a physical medium (like paper). Students perform rigorous exercises to gain confidence in using technologies and then build towards generating a website of their own choosing as a final project. As this is an online class, students are expected to have strong self-motivational and organizational skills. Class materials will be provided through required textbook readings and homework exercises, on-line readings, and weekly on-line video lectures.

GRADING

Class participation - 20%
Homework exercises - 20%
Two class projects - 60%

RESOURCES

Book:

- Elizabeth Castro - $19.99 - recommended. 6th edition best, but 5th OK if you already own it.
- On-line Readings as identified below

---

CLASS LINKS

• HTML 4 For the World Wide Web Book Site
• HTML Home Page
• CSS Home Page
• HTML 5 Working Draft
• Related Course at the University of Washington
• W3C HTML/XHTML Validator
• HTML Dog Tutorials

SYLLABUS

• Course Introduction & Policies
• Instructor and Student Introductions
• Opening Pre-test of Student Skills
• How HTML, XHTML, and CSS fits into the Big Picture of the Web
• Comparative Web Page Examples (PHP and Flash)
• Syntax Review / Introduction
• Managing HTML and CSS text files
• HTML Document Structure
  

Homework

• Watch the week one video.
• Look at our class book companion site at: HTML 4 For the World Wide Web Book Site.
• Get active in the on-line Forums.
• Read the Welcome to Class document I've provided you.
• Read the Introduction and Chapter 1 of your HTML book.
• Write a 1000+ word essay on your current understanding of HTML, XHTML, and CSS (or if you have not exposure at all, your Web use behavior and personal goals for the class)
• Surf the Web and investigate the code behind Web pages of interest to you. Use that task to motivate your interest in making pages of your own.

• Let's Do Some Basic HTML with CSS
• Software for Creating Web Pages:
• Browser
• Text Editor
• HTML Editor (Go Live, Front Page, Dream Weaver)
• File Transfer Program (to upload files to a Web server)
• The Standard Setting Organization: The World Wide Web Consortium (w3.org)
• Vocabulary:
• URL
• HTTP/TCP/IP

Homework

• Watch the week two video.
• Read the Week 2 lecture support I provide you.
• Read Chapter 2 of your HTML book and begin to play with the HTML and CSS in Chapters 1 and 2.
• Read the Project 1 Requirements document I provide you.

• Differences between HTML and XHTML
• XHTML is an XML-encoding of HTML
• Why use XHTML?
• Links and Images

Homework

• Watch the week three video.
• Read the Week 3 lecture support I provide you.
• Read Chapters 3 and 4 of your HTML book and interact with the examples.
• Read the updated Project 1 Requirements document I provided you.
• Optional: Read my XML Primer that I require engineering students to read who take a similar course as this one.

• Come to class event at 20 Washington Place.
• Complete mastery of HTML text formatting
• Lists and dictionaries
• Character Entities
• Meta-information
• Proficiency using CE Link Forums

Homework

• Read this week's lecture
• Work on Project 1
• Read the information on the meta tag and optionally reading more about how search engines rank content.

• Adding Color with HTML
• Adding Color with CSS style attributes
• Understanding hexidecimal color notation
• Understanding image file types

Homework

• Watch the Week 4 Video
• Read the Week 5 lecture support I provide you.
• Read Chapters 5 and 6 of your HTML book and interact with the examples.
• Continue to work on Project 1 — reading the Forums for ideas from your fellow students.

• Come to class at 20 Washington Place
• Anchors and Links
• History of Electronic Publishing
• Internal Style Sheets
• External Style Sheets
• Cascading Style Sheet Layout

Homework

• Read the Week 6 lecture support I provide you.
• Read the Week 7 lecture support I provide you.
• Read Chapters 7 and 8 of your HTML book and interact with the examples.
• Continue to work on Project 1 — participating in the Forums with ideas for and from your fellow students.

• Come to Class at 20 Washington Place, Room 021A
• Table Layout
• Table-based Layout (see example)
• Compared to CSS Layout (see example)
• CSS Rollover Techniques

Homework

• Version 5 of the book - read Chapters 9, 10, 11, and 14 of your HTML book. Version 6 of the book - read chapters 10, 11, 12, and 16 of the book and interact with the examples. Chapter 13 is an interesting optional chapter.
• Project 1 Due on April 23rd, at 11:59pm

• Tables versus CSS
• Templates
• Form Development
• Read the Usability and Forms lecture notes.
• On-line design review
• Review Student Project 1 that was due on April 23rd at 11:59pm
• Project 2 Questions and Answers

Homework

• Read the Project 2 Requirements document I provide you.
• Start Investigating Chapters 12 through 16 of your HTML book and interact with the examples.
• Participate in the Project 1 Design Critique Forum

• Come to Class at 20 Washington Place in Providence.
• We'll look at the CSS3 Examples
• Keep gaining an appreciation for all that is possible with CSS.
• Consider specific CSS style techniques for different needs like handheld devices, printed documents, or large screen displays.
• Understand template techniques for managing attractive and functional designs you might wish to reuse for other clients.

Homework

• Read the Week 9 Lecture document I provide you.
• Continue Investigating Chapters 12 through 16 of your HTML book and interact with the examples.
• Investigate the Data Tables Examples page.
• Look at the available CSS Table Formatting attributes.
• Keep investigating sites to choose your Project 2 "client".

      Using tutorials from video sources.

• Learn how to embed external content into a DIV element through use of an IFRAME element.
• Develop your process for providing consistency across a website.
• Usability tips and techniques
  

Homework

• Watch the Week 10 video I provide you.
• Take a look at the class Project 1 submissions, noticing the different code techniques.
• Investigate Chapter 17 of your course book and interact with the examples.
• Keep investigating the Project 2 templates for your familiarity.
• Work on Project 2 by playfully trying out some ideas you have (and searching the Web for designs you like).
• Project 2 due May 28th at 11:59pm