Week One: June 25-29

Tuesday   Thursday   TO DO



Introduction to WEB110 class and web authoring, and use of basic coding and validation tool. Book: Introduction, Chapters 4, 6-9.


DUE Friday, June 29 - Quiz 1


FIRST - no worries. If you are not yet signed up for this class, and/or are awaiting financial aid, you can sign into the computers as a guest: just hit enter at the open login, then enter again. This should work for the first 2 weeks.


Waitlist: I will not be signing anyone in from the waitlist before Tuesday, July 3. This is so all registered students can be accounted for in the first two class meetings.






  • Class requirements
  • Introductions
  • Class preparation
  • Quiz 1: Syllabus/FAQs
  • About web authoring


Class Requirements

  • Book: Web Authoring Boot Camp, by L.J. Bothell - Creative Commons license. Free online.
  • 24/7 internet access, even dial-up
  • USB Flash drive
  • Class web site
  • Programs
  • Attendance and performance
  • Time management - 2hrs outside:1 class hour


Class web site


Attendance and performance


What this class does

  • Naked HTML
  • Basic cascading styles
  • Workflow and communication


Class Timeline

  • Basic coding and process - first third.
  • Refined coding and basic project workflow - second third.
  • Putting it together and final project prep - final third.


Class Preparation


The Future of Web Careers


About Web Authoring

  • What it is
  • What it isn't
  • The World Wide Web
  • The Goal - communication
  • The full picture



  • HOT: Get a 2 gigabyte USB Flash drive before Thursday
  • HOT: Get 3-4 images, right-click on it & save to your USB Flash drive: web110/images folder - USE simple 1-word image names!!!
  • Reading: Introduction, Chapter 1
  • Prepare your USB Flash drive file structure - be done by Thursday's class.
  • Add comments in Forum to my introduction post
  • Quiz 1: Syllabus/FAQs, due Friday, June 29, 15 points.









  • RE: Web Pages
  • Text Editor: Crimson Editor
  • Basic Coding - Naked HTML
  • Doctypes and Metatags
  • Tags to never use - deprecated
  • Validating code




Web pages

  • What they are
  • What they are not
  • Layout requirements


Website goals

  • Consider the audience
  • Consider the reason for the site
  • Consider the process and information flow


Website audience

  • The visitors
  • The client
  • The search engines


Web page structure

  • Banner
  • Navigation
  • Content (with footer)


Kinds of content

  • Text
  • Links
  • Images/media



HTML is the starting code language for building the most basic of web pages. You need to really know and understand this to understand and apply more complex languages and scripts for making later web pages dynamic.


XHTML (Extensible Hypertext Markup Language) moves past HTML to the more precise, manageable, and World Wide Consortium (W3C) validated current standards for basic web coding. It results in organized and consistent code, allows clean validation, and keeps you away from depreciated tags and quirky practices that give browsers (and you) huge headaches. See more.


About coding for this class

  • NO Dreamweaver
  • Text editor only, no WYSIWYG
  • We're using Crimson Editor in SCCC class rooms


Think in Threes (3s)

Keep it simple!! I tend to think in threes (3 main points, 3 concepts, 3 steps) when I need to remember stuff, and basic XHTML applies itself to this. So, here we go.


Web Pages Code - The TARDIS

  • Web pages are bigger on the inside than out
  • Lots of code to make something simple happen (Example)
  • Naked code
  • Styling code


Web Page Content

  • Opening comments
  • Head section
  • Body Section
  • File names ALWAYS all small text - no capital letters


Web page head content

  • Doctype
  • Title
  • Metatags
  • More comments as needed


Web code structure - think cheeseburger!

  • HTML - the bun
  • Head - the cheese
  • Body - the meat (or garden (patty)



  • Open it
  • Close it
  • Use for specific tasks
  • ALWAYS all small text - no capital letters


Using hidden comments

  • Comment hints, rights, etc.
  • Comment layout sections
  • Comment what you'll do
  • Comment about issues
  • Comment out problem code
  • Reusable information



  • GrabIt - Doctypes and Meta
  • What it does
  • We use transitional


Metatags - data about data

  • GrabIt - Doctypes and Meta
  • Title view
  • Description view



  • Heading
  • Paragraph
  • Link
  • Image



  • Due Friday, June 29. Log into StudioBast E-Learning to take Quiz 1: Syllabus Agreement. Required to stay in class.



  • A1: Assignment Links Portal page, due Thursday, July 5. Read the assignment and start working on this. SEE what you have already learned and start working on this assignment this weekend at home. (Hint - basic web page structure with doctype, title, metatags, and ready body section).








Plus, complete all you haven't already done: