1 of 16

Web Design - HTML

Peter Musser - W2 2018/2019�Monday, October 15, 2p - 5p

https://goo.gl/k6j9BB

2 of 16

A few things:

Land Acknowledgement: We are on the Traditional, Ancestral, and Unceded territories of the Musqueam people.

Introduction: Who I am, what I’ve done

Contact info�- peter.musser@ubc.ca �- Office Hours: Mondays 12p-2p & 5p-6p, Tuesdays/Thursdays 11a-2p

Course format�- Light on lecture, heavy on practice�- Breaks: take ‘em as you need ‘em. One whole-class break around the mid-point�- Regroup at the end

​

3 of 16

The day’s schedule

9a-915a

915a-930a

930a-945a

945a-10a

10a-1015a

1015a-1030a

Introduction/Sign In

Codecademy: Learn HTML Section 1

1030a-1045a

1045a-11a

11a-1115a

1115a-1130a

1130a-1145a

1145a-12p

BREAK

Style intro

Activity: build your own site

Uploading/Q&A/

Survey

4 of 16

Learning Outcomes

By the end of this class, you will:

  • Know HTML’s basics & function
  • Understand the features and benefits of HTML5
  • Know a number of HTML elements
  • Be able to create an HTML5 page with content
  • Be able to differentiate between when to use HTML vs. CSS
  • Know where to find support and more options to learn

Basically, you’re gonna be great.

5 of 16

  • What is HTML& why do we care?

HyperText Markup Language

  • Hypertext = the text your parents always warned you about.
    • Permits linking & formatting between documents, unlike plaintext
  • Used to make the Internet useful to people.
    • What gives webmasters their power
    • A language harnessed across all of the internet
    • Surrounds us and penetrates us
    • Binds the Internet together

(Basically...)

​

6 of 16

  • What is HTML& why do we care? (cont’d)
  • Based on human language (English)
    • E.g. <head> <body> <header> <footer> <section> <title> <video> <nav>
  • Makes web content easy to create and edit
  • Serves Accessibility Purposes
    • Makes content screen-reader-friendly
    • Low-bandwidth cases
    • Mobile cases
  • Serves SEO purposes
    • Search Engine Optimization -- make things findable by google or (lol) bing with “meta” tags

​

​

7 of 16

Fundamentally...

You use HTML to describe a document’s layout.

  • Elements are metadata

Also…

  • Learning HTML is a good intro to XML and Dublin Core

8 of 16

Practice: Codecademy

Go to www.codecademy.com and sign up for a free account.

Once you sign up, you should be presented with “Learn HTML.” Click that and get started on working through section 1.

I’ll circulate, awkwardly look over shoulders, and answer questions as they come up.

9 of 16

BREAK TIME!

15 minutes

10 of 16

A (brief) Intro to CSS & style

Cascading Style Sheets

  • The fancy clothes on the HTML skeleton
    • Pumpkin King vs. Santa Claus
  • Used to make specific elements pretty, or context-appropriate
    • Change font color and size, add styles & animations, reposition content, etc...
  • Two options: embedded (covered today) or separate sheet (covered next class)

Example:

<style>�h1 {color:red; size:20px}�p {color:blue; text-decoration: underline}�nav a {color:black; text-decoration: underline red;}�#intro p {font-style: italic;}�</style>

11 of 16

Jack: a tale of two sheets

12 of 16

Sample Sites

Site 1 | Site 2

13 of 16

Activity: Build your own Website

Instructions:�Go to https://thimble.mozilla.org and create a new page. Don’t worry about the style sheet for now, just HTML.�Required (for diversity’s sake) elements:

    • Head & Body
    • Title
    • Meta tags
    • At least 3 style changes
    • Headings (at least 2 levels)
    • 2 paragraphs w/ strong/em tags
    • 1 ordered and 1 unordered list
    • At least 1 image (with alt text)
    • 3 hyperlinks (at least 1 in a new window)
    • Properly labeled sections
    • At least 1 <div>
    • At least 3 comments

Ideas:

  • Start a resume
  • Write a letter to Santa explaining what you want and why you deserve it
  • Compare the pros and cons of a thing you’ve been considering (Buying a car? Spawning a child? The priesthood?)
  • A page showing the courses you’ve taken, are taking, and want to take in the future -- with write-ups on why.

14 of 16

Uploading things to the Internet

Server: ftp://courses.slais.ubc.ca

​

Login: infotechliteracy

Password: Rx5GcsHK

In Windows, you can use Explorer for basic FTP functionality.

Alternately, you can use Cyberduck -- a free client published under GPL (ask me later).

Download: cyberduck.io

15 of 16

How to find help?

W3 Schools is good because it’s created by the W3C.

  • Provides up-to-date info + examples of proper syntax
  • It’s like the RDA Toolkit for html/css, but free and not ridiculously complicated

Stack Overflow is good because it’s people helping people with real questions.

Want to learn more?

  • Take LIBR556 (Document Design) for in-depth design principles
  • Do more Codecademy.
  • Practice makes perfect.

16 of 16

Next Week: CSS

We’ll go in-depth on how CSS works and why it’s important, and we’ll add a touch of class to the websites we built in this class.