Oct 18: Web design

Assignment 7:

Create a 3-page web site

  • Each page needs an image. All images must be your own creation - you can use previous assignments as your images.
  • Make sure each page has a link.
  • Check to make sure images and links work.
  • Bring your site on a flash drive to class. Due Nov 1.

Handout

Basic HTML

Templates

Copy and paste from the text box below to create new HTML documents.

Basic HTML5 template

Resources

Mozilla Thimble Lets you try out code in your browser.

Software: Mac, Windows and Linux

The Firefox browser is the best choice for many people. It has fewer security problems than older versions of Internet Explorer on Windows, and more features than Safari on the Mac. You can download Firefox for free. Google's Chrome is also an excellent browser.

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.

Software: Mac

TextEdit, the text editor included in Mac OS X, needs some preferences changed to work well with HTML files. There are free text editors you could download which are better:

Software: Windows

NotePad is a good simple text editor, that is included with Windows. You may need to look in the "Accessories" section within "All programs" in your Start menu. Important: Use NotePad, not WordPad.

NotePad does not recognize files ending in .html automatically. Use File->Open to access .html file, and choose "Files of type: All files" in the open dialog box, not "Files of type: text documents(*.txt)

If you are looking for more features, Notepad ++ is a good free text editor for Windows.

Choose "Download 32-bit x86" to download.

Structure of an HTML file

HTML Document Structure

Image formats

PNG 24: 103KB

PNG 24: 103KB

JPEG high quality: 64KB

JPEG high quality: 64KB

JPEG low quality: 4KB

JPEG low quality: 4KB

GIF, 256 colours: 29KB

GIF, 256 colours: 29KB

HTML Frameworks

The Bootstrap framework is a good starting point for building more complex web sites. Remember to link to the jQuery Library

Domain Registration

Hover.com is a reasonably priced, easy-to-use registry.

Web hosting

There are tens of thousands of options.

are some reasonable starting points.

Want to skip the whole "do-it-yourself thing" but still want a web site you can change the appearance of? Try: