HTML Class Resources

These pages supplement the syllabus, lecture notes, and handouts from HTML class. Follow along with the handouts to see the markup in action on each page; use the View Source function of your browser to see what does, or, rather, describes what.

Links from the syllabus

1: Core Markup Elements

Document, Block, and Inline Elements

HTML elements have specific positions and roles to play in organizing an HTML document.

Assignment Texts

Goblet.txt for classwork (1 April)

LongGoblet.txt for assignment #1

• Download* the assignment plain text file and mark it up, using the core document and content elements covered in class.
• Save the HTML document as LongGoblet.html
• Test it in one or two browsers
• Repair it
• Bring it on a floppy to class

*Downloading:

On a PC, you can usually download a document (as opposed to immediately opening it) by using the Right (or Other) mouse button menu on the link. Select Download or Save As or equivalent, and then navigate to the directory you want to use to store your HTML resources and Save.

On a Mac, you can usually download by holding the Option key and selecting the link; navigate to your HTML folder and Save. Or, use the Control key for the Mac Contextual Menu on the link, and choose Save As.

1.5: Additional Elements

Additional Block and Inline Elements

Some non-essential markup elements and attributes that can increase the semantic sructuring of a document.

2: Color and URL Links

HTML Colors

Making color mixes using HTML hexadecimal color numbers.

Anatomy of URLs

URLs have special structures that are determined by their use and location.

3: Lists and Tables

Lists Demo Page

Examine the structure, markup, and display of unordered, ordered, and definition lists for your HTML Terms List assignment.

Table Demo Page

To clarify the use and construction of tables, use the class handouts and observe the way each table is presented.

4: Images

Images Page

Images and their possible attributes and values, and their uses. Follow along with the class handouts.

5: Image Tricks
and Site Structures

Image and Table Tricks

Images in a well-made table can be used to achieve some interesting visual effects.

Hierarchies

Moving from one directory to another requires alterations to the relative URLs of the pages depending on their relative position in the hierarchy tree of the page.

6: Frames, Forms, Etc.

Frames

A demonstration of the intricacies of how to use and not to use frames for a site.

Miscellanea

Some notes on document types, meta tags, and interactive forms.