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

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 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 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

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

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.

SVG: 5KB

Unlike PNG, GIF and JPEG files, SVG files can be vector files. As with other vector formats, vector-based SVG files can be scaled with no loss of quality or increase in file size. This version of the NSCAD logo is only 5KB but can be scaled to any size and will display crisply. You can export Illustrator files as SVG with the "Save as..." function.

Try it out: use the "zoom" function in your browser (Command +) to zoom in several hundred percent and compare the appearance of the SVG file to other formats.

Basic HTML skeleton

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

Assignment

Assignment 1

Create a 3-page web site

Each page needs a heading, at least one image, and every image needs text accompanying it. 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, and validate carefully.
Make sure to name your main file index.html and make sure your page loads when you access your web server from the assignments page.
Upload to the class web server - not Brightspace. Due Sept 20, 6:00 PM.

Additional resources

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

NSCAD University • Fall 2023• Robert Currie

DSGN-2520-1: Design for the Internet