NSCAD University • Fall 2024• Robert Currie

DSGN-2520-1: Design for the Internet

Class 1 Thu, Sep 12
Introduction
Class 2 Thu, Sep 19
HTML Fundamentals
Class 3 Thu, Sep 26
Web technologies and universal design
Class 4 Thu, Oct 03
User experience fundamentals
Class 5 Thu, Oct 10
CSS continues
Class 6 Thu, Oct 17
More CSS Layout
Class 7 Thu, Oct 24
Forms, fonts
Class 8 Thu, Oct 31
Forms and frameworks
Class 9 Thu, Nov 07
Grids and frameworks
Holiday Thu, Nov 14
Class 10 Thu, Nov 21
Documenting user experience
Class 11 Thu, Nov 28
Designing user experiences
Class 12 Thu, Dec 05
Accessibility and user experience
Class 13 Thu, Dec 12
Responsive design

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.

SVG: 5KB


SVG file, 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 Wed, Sep 25 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 2024-12-12 08:32.