Unit 4: Intermediate HTML or Controlling Page Layout with Tables

Unit 4 Overview:

Tables are one of the oldest tools available to web developers. There are newer methods for organizing the layout of content such as through the use of layers, frames or cascading style sheets. Because the table is a tool that has been around since the early days of the World Wide Web, it is extremely reliable in how it displays content on various browsers. In spite of the fact that it is an old tool, it is still a widely used one.

Some major reasons for using tables are as follows:

1. for an organized display of information (similar to what students did in Unit Two: Module 6),
2. to create columns of text much like a newspaper,
3. to place a 3-D border around an image (You can add the border attribute to images but the result does not appear 3-D), and
4. as a devise to control the layout of content on a page.

In this unit students will learn principally the last item listed, to control the layout of content using tables.

The first two modules will teach the foundation skills for using tables to layout a web page. The Third module will be the capstone project in which students will return to their personal web site and do a complete revision of the first page using tables to control the lay out of the page.

Industry Skill Standards covered in this Unit:

Critical Work Function/Key Activity:

B3: Produce graphics and layout elements
Technical Knowledge:
Knowledge of principles of layout and graphics
Ability to design user-friendly sites and applications
Ability to develop aesthetically pleasing elements
Employability Skills:
Ability to mentally picture outcomes
Ability to think creatively while solving problems
Ability to judge content and form and reconcile to overall project image
Ability to generate and evaluate alternative solutions

B5: Write Supporting Code
Technical Knowledge:
Knowledge of code development procedures
knowledge of programming language required for application
Ability to evaluate alternatives in code implementation and make decisions
Ability to develop code that meets coding standards
Employability Skills:
Ability to write clear documents
Ability to generate and evaluate alternative solutions and formulate a plan of action
Ability to manipulate technology for desired results

Learner Outcomes/Objectives

The student will be able to:

• control the horizontal alignment within the table cell tag.
• control the vertical alignment within the table cell tag.
• span columns and rows of a table with the aid of an editor's wizard.
• span columns and rows of a table without the aid of an editor's wizard.
• nest a table within a table.
• make elements of adjoining cells contact without gaps or borders.

EALRs

• Arts
• The student applies the creative process with arts knowledge and skills to reason and solve problems.
• The student uses at least one of the art forms (visual arts, music, drama, and/or dance) to communicate ideas and feelings.
• The student understands how the arts connect to other subject areas, life, and work.
• Mathematics
• The student understands how mathematical ideas connect within mathematics, to other subject areas, and to real-life situations.
• Communication
• The student communicates ideas clearly and effectively.
• The student analyzes and evaluates the effectiveness of formal and informal communication.

Modules Titles

Module 1: Formatting a Data Table to Have Rounded Corners: Controling Layout within the Cell Tag
Module 2: Picture Puzzles: Column and Row Spanning
Module 3: Revising the Home Page of the Personal Web Site Using Tables to Control the Layout