DAY/TIME/PLACE

Wednesdays, Autumn 2016 (starts September 14th)

Instructor: Bruce Donald Campbell

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

Email: bcampbel01@risd.edu

Prerequisites: None

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

GRADING

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

RESOURCES

Book:

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

---

CLASS LINKS

• HTML 5 and CSS 3 Book Site
• HTML 4 For the World Wide Web Book Site
• HTML Home Page
• CSS Home Page
• HTML 5 Working Draft
• W3C HTML/XHTML Validator
• W3C CSS Validator
• Udemy HTML Blog
• Computer Language for Beginners: HTML
• Color Scheme Designer
• Yale Style Guide for Web
• CSS Zen Garden
• Related Course at the University of Washington

SYLLABUS

• 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
  

Homework

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

• 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

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

• 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

Homework

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

• Complete mastery of HTML text formatting
• Lists and dictionaries
• Character Entities
• @font-face rule
• Google Fonts service

Homework

• Read this week's lecture
• Explore fonts at Da Font and Font Squirrel.
• Work on Project 1
• Read chapter 4 in your HTML5 book.
• Read the information on the meta tag and optionally reading more about how search engines rank content.

• 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

Homework

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

• Anchors and Links
• Discussion of Meta Tag and SEO
• 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 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.

• Responsive design with Media Queries (case study here)
• 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.
• Tables versus CSS
• Project 1 Due on November 1st, at 11:59pm

• 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

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

• 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

Homework

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

• Layers (z-index example)
• Audio HTML options (an example audio file).
• Video HTML options (an example video file) ( example uses).
• The IFrame element which replaced much of the LAYER element promoted by Netscape in the mid-1990s. (example from class)
• HTML and CSS interaction techniques
• Advanced properties
• Mouse and keyboard interaction techniques
   

Homework

• Investigate where HTML is headed with HTML 5
• Look at video embedding options as the HTML 5 standard emerges.
• Investigate Other Chapters of your course book and interact with the examples — based on your interests.
• Keep investigating and working on Project 2 by reading the updated requirements.
• Get a sense of the latest Web Interaction Techniques discussions from the latest Web Directions Workshop in Australia.

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

Homework

• Project 2 due on Dec 11th at 11:59pm.
  
• Look at our class' Project 2 Submissions as they are submitted.

      Using tutorials from video sources.

• Develop your process for providing consistency across a website.
• Usability tips and techniques
  

Homework

• 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