Interwebs Annotation

Interwebs Annotation

Lecture outline

Covered in this lecture:

  1. The web as information
  2. Semantic markup & HTML
  3. HTML fundamentals

Full lecture slides will be available the day of the lecture.

PSA: touchpoint 2020

Interwebs Annotation

Introducing markup and the web

Please close all laptops except for those in the back row.

P1 Grade Release

Project 1 grades will be released by the end of the weekend. If you have concerns about your grade, before emailing me please:

  1. Review your letter grades and the project rubric.
  2. Send an email to Andrew indicating a specific concern with your grade.
  3. I will follow-up to arrange a time to meet and discuss the grade.

Your TAs are not permitted to address grading concerns, please email me directly.

Alt Office Hours

My regular office hours are suspended for reading week. I will be available instead on Wednesday, February 19 between 3-5pm or by email appointment.

P2: Wireframes - Final Week

Information Hierarchy

What pieces of content are present?

Oops, this code did not quite load. Please view it at

The Document-Object Model (DOM)

Our standard in delivering HTML

This week you will be building your first HTML pages, this involves the DOM, which put simply is a collection of objects (ie. navigation, headings, paragraphs) that resemble the document it is modelling.

Hypertext Markup Language 5 (HTML5)

Not quite standard

"In 2022, HTML5 will be a proposed recommendation..."
Ian Hickson

Semantic markup

Telling the computer the pieces

HTML elements are (most frequently) comprised of an opening, and closing tag — i.e. <p></p> — using triangle brackets and a forward-slash to denote that they are HTML elements and not content.

Oops, this code did not quite load. Please view it at

Understanding Elements

Let's visit the HTML5 Doctor for a prescription.

How would you mark this up?
A suggested mark-up for this content

Semantic Markup

Markup should help us understand the content.

Oops, this code did not quite load. Please view it at

A pair of glowsticks swirling around in the dark

Having coding concerns?

Let us know!

Let us know sooner rather than later that you are having concerns with coding. Also, there are absolutely no 'stupid' questions. Do not know? Please ask.

Web Toolkits

Prepped and ready to go

Available on Canvas in this week's module will be links to programs for your first 'web toolkits'. It contains:

Dev Tools

Your new best friend

Seeing and manipulating web code in the browser has never been easier: A right-click and 'Inspect Element' opens up the development tools to let you manipulate the page.

A messy computer desktop filled with different folder and file icons
It's time to clean up your act

Common Coding Errors

Since we will be starting some scripting this week, please keep an eye out for:

  • Typoess: This is handz downe teh most commmon prublem.
  • Forgetting brackets: Not ending or closing an element will lead to
  • Forgetting to save: The file won't be able to update if not saved.
  • Files and folders matter: The naming of files and folders (and where you put them) is very important.

Please Prepare

In preparation for this week's code tutorial, please open up your laptops and download the starter files for the tutorial from

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Tuesdays from 2:30-3:20pm and Thursdays from 9:30-10:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna