Michael Masumoto's Tutorials
Professional Web Programming Online Instruction

| Home | Tutorials | Movies | Projects | Bookstore | Personal | Music | Products |
An Introduction from Michael

Welcome to My Tutorials!

This site is a legacy resource, a collection of my original web programming instructional materials and tutorials from my days at San Francisco State University's Multimedia Studies Program, where I taught during the Dot-Com Boom years (1995 to 2001). During those years, the MSP was the #1 Multimedia program in the world, and I believe my web programming courses were considered the best, too. I certainly taught people from every company of note that wanted a website during that period!

This course was written before YouTube and streaming video. It was written to be read aloud, like a class lecture, with the repetition a lecture needs; it contained streaming audio files, which have not been mounted with these legacy materials. A more modern online web programming course might be easier to read, but it will lack the backward-compatible programming rigor of my course.

Modern web browsers are built on legacy software programmed during the period when these materials were new. If you want to create websites that degrade cleanly, you should still follow most of the coding principles I have laid out in these course materials.

Notes on Essential Changes Since 2001 (in no particular order)

The most important thing missing from these 2001-era instructional materials is the DOCTYPE tag. The DOCTYPE tag tells a browser which version of HTML or XHTML a web page's code is based on. However, if you hand code an HTML page following the instructions given in this tutorial without the DOCTYPE tag, the resulting pages should display exactly as I have indicated in the course, regardless of the browser. Why? Because the Web has been around for a very long time and there are many legacy pages out there. Web browsers need to remain compliant with the old standards as well as the new.

Modern web pages don't use transparent GIFs as graphic spacers the way they did in 2001. That's because CSS (Cascading Style Sheets) implementation has greatly improved since then. Newer versions of HTML and XHTML don't really support transparent GIF spacers properly, so beware. However, if you're coding in a legacy format without the DOCTYPE tag, the transparent GIF spacers should still work as I indicated in the course.

Most people don't even bother to hand code HTML pages anymore. However, if you want precise, professional layouts for websites, you'll need to dive into the code at some point to fix issues. This legacy course will give you enough of a working knowledge of basic web programming principles to handle this.

Most of the DHTML information in this course is antiquated, although not the basic principles. However, JavaScript programming has changed very little; my materials and exercises should still be quite effective. CSS and CSS-P syntax are also the same.

Modern laptop and desktop monitors are bigger than they were in 2001. However, unless you're planning on delivering multiple versions of your website to different devices (laptops vs smartphones vs tablets), I recommend restricting the width of website layouts to 750 pixels today, for maximum cross-platform compatibility.

This course also does not cover downloadable fonts (which were not reliably implemented at that time); I urge you to use downloadable fonts in a professional, modern website.

Web-safe colors are obsolete, but some LCD monitors have poor color response so always check your color choices on a cheap monitor to make sure they look OK.

If you're not too picky about the final look, there are many services out there which allow you to create professional, sophisticated websites with no coding expertise at all. For those of you that need to create something more nuanced, however, this course will help you as it has helped thousands of others, if you're willing to invest the time.

For more information about web design, branding, messaging and other advertising principles, visit my current graphic design portfolio page: http://www.masumotoherd.com/portfolio/graphicDesign.html.

As I have said for years, I am not available to answer questions on these materials. I keep this course online as a public service. I most sincerely wish you the very best of luck in all of your web programming endeavors, and hope that this information proves to be of material benefit and assistance to you.

Take care and good luck, --Michael Masumoto

Last updated: June 21, 2016
Student Registration

Student ID

Feel free to print out one of my Student ID cards! They don't serve any purpose today, but Enjoy!

Download Student ID Card
Tutorials

HTML Online Modules -- Foundation Course

HTML Online is the foundation course here at the Michael Masumoto School of Programming. All other tutorials on this site assume that you have mastered the materials presented below.

These links don't look like much, but they represent about 9MB of mostly text-based material, and about one year of writing! This material is equivalent to two full HTML courses, two CSS class sessions, and most of an Introduction to Programming course and JavaScript I course combined together. Have fun!

Warning: I have posted these materials EXACTLY as they appeared in my online classes. You will NOT be turning in the final projects, obviously, nor will I be reviewing any student work! Please do NOT contact me regarding your projects! Thanks!

Some additional HTML materials have not yet been migrated. Please see HTMLII section for these extra materials.

Advanced CSS

CSS-P Tutorial

Here is a complete CSS-P (Cascading Style Sheet Positioning) tutorial. CSS-P (part of the CSS2 standard) is essential for Dynamic HTML/DHTML work. This tutorial assumes proficiency in CSS as presented in Module 10.

Enter the CSS-P Tutorial

Additional CSS Materials

Some CSS content has not yet been migrated. Please see CSS section for current materials.

Applied JavaScript

This content has not yet been migrated. Please see Applied JavaScript section for current materials.

DHTML

This content has not yet been migrated. Please see DHTML section for current materials.

Object-Oriented JavaScript

This content has not yet been migrated.

Last Updated: May 9, 2001

| Home | Tutorials | Movies | Projects | Bookstore | Personal | Music | Products |

Contents of this website Copyright © 1995-2016 Michael Masumoto. All Rights Reserved.