Wed, Mar 09
Web page construction
- Understand the basic elements of the web - browsers, servers and domain names
- Configure the basic tools for web page construction: text editor and browser
- Learn the basics of HTML code
- Learn the core workflow of building a web page - write code, check in a browser, fix mistakes, upload to a server.
- Download and review the HTML handout (linked below)
- Watch the video (above)
- Start your text editor - we will use Atom.
Assignment 6 - Phase 1:
Create a 3-page web site
Assignment 10: Written Assignment
Write a usability review of a web site.
Note: this assignment will be done in stages:
- Topic selection: Due March 11, 6PM
- Usability test: You will schedule this yourself
- Rough draft: March 27
- Final draft: (Tentative date) April 12
Dates for each phase will be confirmed as the class progresses.
You will begin by defining a task - for example, buying an airline ticket to a particular destination, in a specific time frame, at lowest cost. Or signing up for an online marketplace to sell your jewelry. Or any other similar, specific, online task. The web site you use and the task you sign up for needs to be submitted and approved by me.
The web site should be one that offers more than just content. E-commerce sites, social networking sites, etc are ideal. Fill in your topic in this form before starting; I must approve each topic. Submitting an assignment without a an approved topic will result in a mark of zero.
Important: Sign up for a topic here. Failure to do so bt the topic selection deadline will result in a penalty of 10% of your mark
Once you have an approved topic, you will be assigned a participant to work with.
- Make sure to review the main functions of the site from the perspective of a user.
- Think about what happens when things go wrong.
- What's good?
- What can be improved?
- Find someone to act as a test subject and observe them. Give them a specific task.
- Minimum length: 500 words.
Basic HTML PDF
Copy and paste from the text box below to create new HTML documents.
Basic HTML5 template
Glitch Lets you build complex web sites in your browser, but not practical for class assignments.
Software: Mac, Windows and Linux
There are many browsers available, all are free.
- You can download Firefox here.
- Google's Chrome is also an excellent browser.
- Brave is a privacy-focussed browser.
- Edge is Microsoft's replacement for Internet Explorer.
- Safari is included with every Mac and IOS device.
Validating your HTML
Several online tools allow you to validate your HTML, pointing out any syntax errors. The W3C's Markup Validator allows your to validate online files, files your upload, or html you paste in place.
The results can be a bit hard to interpret, however.
The Web Developer Toolbar is a useful add-on for Firefox, adding validation and other tools to your Firefox browser. There is also a version of the Web Developer Toolbar for Chrome.
Atom is an editor that works on MacOS, Windows and Linux. It's what we will use in class. It's free - download it here
Alternative Software: Mac
- BBedit for Mac OS X is a powerful text editor with good HTML tools. It will work in "basic" mode for free, with no expiry. You do not need to purchase a license. Click here to download it.
For transferring files to a server (we won't be doing this) you'll need an FTP client. For Macs, I recommend Fetch - you can get a free version for educational use.
Structure of an HTML file
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.
The Bootstrap framework is a good starting point for building more complex web sites.
Hover.com is a reasonably priced, easy-to-use registry.
There are tens of thousands of options.
- Websavers is a local company - cheap and good. I recommend them.
Want to skip the whole "do-it-yourself thing" but still want a web site you can change the appearance of? Try: