Wednesdays, Autumn 2016 (starts September 14th)

Instructor: Bruce Donald Campbell

Faculty, Continuing Education - RISD, Providence, RI
Adjunct Faculty, Brown University, Providence, RI


Prerequisites: None


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 occasional on-line video lectures.


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



- Elizabeth Castro and Bruce Hyslop - HTML5 & CSS3 Visual QuickStart Guide, 8th Edition recommended.
- On-line Readings as identified below




course overview

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


  • Look at Liz and Bruce's HTML and CSS examples on her HTML 5 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 start chapters 1-3 of your HTML book.
  • 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.


introduction to html and css

  • 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 (
  • Vocabulary:
    • URL


  • Read the Week 2 lecture support I provide you.
  • Continue reading chapters 1-3 of your HTML5 book and begin to play with the HTML and CSS examples from the HTML 4 book.
  • Read the Project 1 Requirements document I provide you.


introduction to xhtml

  • Differences between HTML and XHTML
  • XHTML is an XML-encoding of HTML
  • Why use XHTML?
  • Explore a good baseline exercise.
  • Basic links and images coding
  • Declaring document types


  • Read the Week 3 lecture support I provide you.
  • Here are the XHTML rules
  • Read Chapters 1-4 of your HTML5 book and interact with the examples for chapters 1-3 of the HTML 4 site.
  • 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.


html boot camp



html boot camp

  • Styling with DIV and SPAN tags
  • New block tags in HTML5
  • Adding Color with HTML
  • Adding Color with CSS style attributes
  • Understanding hexidecimal color notation
  • Understanding image file types


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


css boot camp

  • Anchors and Links
  • Discussion of Meta Tag and SEO
  • Internal Style Sheets
  • External Style Sheets
  • Cascading Style Sheet Layout


  • 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 HTML5 book and interact with the examples in the HTML 4 site.
  • Continue to work on Project 1 — participating in the Forums with ideas for and from your fellow students.


advanced concepts


  • 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.
  • Tables versus CSS
  • Project 1 Due on November 1st, at 11:59pm


project critique and advanced css

  • Project critique will begin at the start of class and continue until everyone has had a chance to receive feedback
  • Review Student Project 1 that was due on November 1st at 11:59pm


  • 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".


templates and project 2 discussion

  • Templates
  • Understand template techniques for managing attractive and functional designs you might wish to reuse for other clients.
  • Form Development
  • Read the Usability and Forms lecture notes.
  • Review the code choices made for Student Project 1 that was due on November 1st
  • Keep gaining an appreciation for all that is possible with HTML and CSS.
  • We'll look at the CSS3 Examples
  • Consider specific CSS style techniques for different needs like handheld devices, printed documents, or large screen displays.
  • Project 2 Questions and Answers


  • Read the Project 2 Requirements document I provide you.
  • Investigate chapters 12-16 of your HTML5 book and interact with the examples.
  • Prepare to participate in the Project 1 Design Critique Forum
  • Investigate Student Projects from previous classes.


dynamic pages



unique html 5 considerations

  • Learn how to embed external content into a block element through use of an IFRAME element.
  • Learn how to link to multiple pages via an image map using AREA elements and a MAP Example from class.
  • Understand why HTML 5 is gaining so much momentum.
  • Look at examples from the HTML 5 Brunch in Boston.
  • Pick and choose from examples in Elisabeth's HTML 5 book
  • Answer questions regarding the popular HTML 5 Demos and Examples page.
  • We'll spend time working on project issues for any student interested in sharing their progress.
  • Play with implementing popular Javascript functions into our projects.


DEC7 th

putting everything together

      Using tutorials from video sources.
  • Develop your process for providing consistency across a website.
  • Usability tips and techniques


  • Take a look at the class Project 2 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 Dec 11th at 11:59pm


Turn in your project by 11:59pm on Dec 11th.