HTML Fundamentals

Watch this video for next class

Today's objectives

Today, we'll be following up out work on basic HTML, and look at using images and creating hyperlinks. We'll also learn how to manage and link files in different folders (directories).

  • Basic HTML continues
  • Document skeleton
  • Head elements
  • Block and inline elements
  • Hyperlinks
  • Images

Tasks

In-class task: build and upload a simple 3-page site.

Presentations

Agenda

Agenda

Preparation

Make sure you can log in to your class web server. Have the "Basic HTML" handout ready as a reference.

Samples

While you can use your own files for preparing images during class, here are some sample images you can download and use. For class use only - for assignments you must use your own images.

Image samples for class use.

Large file for class use

Image type examples

PNG 24: 103KB

PNG 24: 103KB

PNG files can be 8 or 24 bit depth. 24 bit PNGs are very high quality, but will usually result in the largest files.

JPEG high quality: 64KB

JPEG high quality: 64KB

JPEG files use lossy compression to reduce file size, and speed loading. When you save a JPEG file, you can usually chose a range of quality options, with higher quality yielding larger files. At maximum quality, JPEG files are very close in quality to files saved with lossless compression.

JPEG low quality: 4KB

JPEG low quality: 4KB

At low quality settings, the loss of quality will be obvious.

GIF, 256 colours: 29KB

GIF, 256 colours: 29KB

The GIF file format is limited to 256 colours (8-bit colour) or fewer. 8 Bit PNG files are usually preferred, but the GIF format is unusual in that it can be animated.

Basic HTML skeleton

See the Pen by Robert Currie (@rcurrie) on CodePen.


Assignment

Assignment 1
Create a 3-page web site

  • Each page needs an image. All images must be your own creation. Visual design is not a part of this assignment.
  • Make sure each page has a link.
  • Check to make sure images and links work.
  • Upload to the class web server - not Brightspace. Due Sept 22, 6:00 PM.

Additional resources

The MDN Introduction to HTML is a good, self-paced course. Start with Getting started with HTML


Robert Currie
This page was last updated at 2021-12-16 08:06.