HTML Course

Advanced Elements for HTML Tables

Table have been used in HTML for everything from navigation bars to laying out forms. While tables are used less frequently these days for page layout, they still serve a purpose. The latest standards of HTML have offered a suite of new elements to facilitate better table development and navigation and to make tables more accessible. We discuss several of these advanced elements. In this exercise, we :

• review HTML tables and their components - rows and cells
• employ techniques to make coding tables easiser
• learn ways to define the width of a table : usings pixels and using percentages
• discuss table borders, spacing and padding within the cells
• add summary information to the table
• provide a table caption
• divide the table into three sections for the head, body and foot
• use column elements to set widths for multiple cells at once

Working with Complex Tabular Data

Often the content that we want to dispay with a table has merged cells or nested data. We discuss techniques for making complex tables more navigable, as well as how to merge cells together in the code. We will nest inner tables and in this portion of the course you will :

• learn how to indicate the scope of a header cell
• discover how to make one cell span across multiple columns or rows
• create tables that have both relative or liquid cells and fixed cells
• define a table within another table
• discuss techniques for making nested tables more manageable

Embedding Rich Media - Videos and Flash

One of the best ways to make your pages more interesting is to offer more interaction with you user. Rich media such as videos and flash are one of the many ways to make your pages more interactive. You may develop your own media or you may want to simply work with the wealth of videos and animations available on the Web. We will walk through the process of embedding a YouTube video, as well as including a Flash animation from our own website. After this exercise you will be able to :

• include a YouTube video on your web page
• update the code to make it more standards compliant
• add different parameters for controlling playing and looping of the animation
• define a table within another table

Inline Frames

In addition to embedding media with objects, HTML offers several other mechanisms for nested content within a webpage. It is even possible to embed an entire web page within another. We discuss the advantages and disadvantages of working with frames. After this exercise you will be able to:

• explain what a frame is
• understand what an inline frame is and how it works
• reference the inline document
• specify the width and height allocated to the inline document
• deal with browsers that do not support iframes
• target links to the inline frame
• create a basic image slide show using inline frames

Frames, Framesets and Targets

Websites with two or more documents displayed within the same browser window employ a technique called "framesets". We graduate from using inline frames to framesets focusing specifically on ways to improve navigation and website efficiency with frames. You will:

• learn about the components of a framed website
• how to create both vertical and horizontal frame dividers
• how to define the position, names and content of your frames
• how to make your frames invisible
• how to target links in one frame to load in another frame

Forms, Input Elements and More

At the close of the day we investigate how forms can be used to improve the effectiveness of your website. Although forms employ a scripting language for processing the data, the mai components of forms - the actual user interface - is entirely built with HTML. Looking at a few real world examples, we examine the different ways to use forms. You will:

• learn what the components of a form are
• understand how and where to direct the information the visitor inputs
• be explosed to a variety of elements available to improve the legibility of your form
• learn how to create text fields, check boxes, drop down lists and buttons
• create a form that sends the input data to a specified email address

keywords: html training san francisco bay area (HTML Fundamentals) css classes san francisco bay area (CSS Advanced)