® IBM Software Group © 2006 IBM Corporation “Essential” HTML Tags and Page Development Techniques This Learning Module describes the standard HTML tags

®

IBM Software Group

© 2006 IBM Corporation

“Essential” HTML Tags and Page Development Techniques

This Learning Module describes the standard HTML tags for developing (realizing) a complex page layout design.

2Last update: 12/04/2007

HTML TagsHTML Tags

While the difficult (and interesting) aspects of dynamic content web page development center primarily around rendering server-side/dynamic content through JSF components your pages will still require formatting,organization and presentation to achieve “pixel-perfect rendering”. You use static HTML controls to do this,

including:

Bullet lists Horizontal lines HTML Tables iFrames FieldSet (available through HTML Source in the Palette) Static images Other HTML controls

These controls are fairly easy to learn – especially “by example”

The most important is the HTML table, as it is used ubiquitously, to control the layout and dimensions of your page control rendering in the browser

Let’s do a single page that uses all of these controls, and allows you to learn by example.

Before we begin just a note – the page you’re going to put together contains a smorgasbord of HTML tags – you don’t have to do them all, and especially, you don’t have to worry about getting the page to look exactly like the example in this course.

IMPORTANT NOTE Please do not spend inordinate cycles trying to make your page look EXACTLY like the example. Just use the lab to learn the various tags and their properties.


HTML Controls Page

So, you will create the following page

Before you begin, note the various types of HTML tags and controls – some of which you’ve seen before.

We’ll take this workshop one step at a time.

It is notnot necessary that you recreate every example or technique shown on this page – nor do you need to replicate this screen capture exactly. Just learn how to use the HTML tags with complex design renderings for your production requirements.

Start by creating a new Web page,

named: htmlcontrols.jsphtmlcontrols.jsp Choose a page template for Choose a page template for

your page.your page.


Add HTML Tables Inside the page, add the following HTML tables

An initial table, defined as: 3 Rows/2 Columns, Size: 100% Note that the 100% will be inferred as 100% of the page size

In the 2nd row/2nd Column add another HTML table Defined as 2 rows/2 columns, Size: 100%

– Note that the 100% here, will be inferred as 100% of the outer table’s cell size (whatever we end up making it, later)

In the 3rd row/2nd Column add another HTML table Defined as 3 rows/3 columns, Size: 100%

TTAABBLLEE

TTAABBLLEESS


HTML Tables – Concepts (Not a Workshop) Web applications use tables for the obvious purpose of arranging information on a page

There are other means of doing this (<div> and .css) but, for our purposes, we will use HTML tables for the majority of our work in this course

HTML Tables: Allow you to center things (other controls and HTML tags) on a page (see below) Create multiple areas rows/columns/cells (<TD>) that can be designed for independently and contain:

HTML tags JSF Components Plain text

Can contain JSF jspPanelsjspPanels – containing JSF controls and HTML, and that can be programmatically rendered and hidden

Should not be confused with JSF dataTables – which are dynamic content JSF components that “render” in the browser as html tables + data


Add Fieldsets to the Table Cells

An HTML Fieldset is a bordered box, with optional label that you can use to organize your forms and pages with. There is no HTML. Here are the steps you’ll follow: Select and copy all of the <FIELDSET><FIELDSET> statements from this text box (here)

Into the top left hand cell of the HTML table, insert an HTML Source tag Paste the Paste the <FIELDSET><FIELDSET> tags into the Insert HTML Source window tags into the Insert HTML Source window Customize the Customize the <LEGEND><LEGEND> as shown below as shown below

Repeat for the top right-hand cell

<FIELDSET><LEGEND> Page Title </LEGEND> <FIELDSET><LEGEND> Page Title </LEGEND> </FIELDSET></FIELDSET>

<FIELDSET><LEGEND> Page Title </LEGEND> <FIELDSET><LEGEND> Page Title </LEGEND> </FIELDSET></FIELDSET>

CopyCopyTheseThese

StatementsStatements


Add Text Tags

In the top left cell – within the Text Tags Fieldset, add the following HTML text tags – as shown in this screen capture Add a Bulleted List tag

To create a nested bullet, drop another Bulleted List tag at the end of the first

Add an Ordered List tag Add some text, like: This is a Date/Time: - then add a Date

and time Tag next to it Note that when you drag/drop it, it might go to the next line below.

Simply back-space with your cursor and bring it up next to your text

Add a Marquee tag. For properties (in the wizard) make up your own text and choose a color.

Add a Horizontal Rule tag as a separator Add some plain text (just type) and customize the text

properties – experiment with: Paragraph – ex. Select Normal to justify single linesParagraph – ex. Select Normal to justify single lines Style, Format, color, background color, etcStyle, Format, color, background color, etc.

To add right and center-justified text requires you to add a new HTML control

*** Notes*** Notes


Add Links – 1 of 3

Before we can do the links, we should align cell data in the right-hand cell to the top:In the top right-hand cell of the table, click your mouse, and from Properties, select Vertical: TopTop

And since we’re going to add an anchor as a link, we need to add the anchor first (see the Notes section on what an HTML anchor tag is). In the bottom left-hand cell of the bottom row of the table, Insert an Anchor tag named: FirstAnchorFirstAnchorType some text below the anchor

Now add four links, each separated by a Horizontal Rule1. Start by adding a File link

1. Browse to select: allcustomers2.jspallcustomers2.jsp

2. Rename the extension to .faces.faces (see screen capture)

3. Target: New WindowNew Window

Anchor tag, named: FirstAnchorAnchor tag, named: FirstAnchor


Add Links – 2 of 3

Add 4 more links to the top right table cell within the <FIELDSET>. Also add a horizontal rule between each link for organization!

2. Add an HTTP link URL of your choice Target: New WindowNew Window

3. Add an eMail link eMail address of your choice Subject (line on the eMail) optional

4. Add a link to an Anchor Click BrowseBrowse Select FirstAnchorFirstAnchor

5. Add a link to a file1. Drag and drop the file icon in the page

2. From the Windows browser:1.1. Change the file type to all: *.*Change the file type to all: *.*

2.2. Select any fileSelect any file

3.3. From the Insert File wizard, select From the Insert File wizard, select Insert a link to this fileInsert a link to this file


Add Links – 3 of 3Add Links – 3 of 3

Completed links section – Note that you can Preview or Run the page on the serverand test your link – and text entries:


Add an iFrame

In the 2nd row/left-column of the HTML table, insert some text and an iFrameiFrame Tag with the following properties

Browse:Browse:- allcustomers2.faces- allcustomers2.faces

- Width: 400 pixels- Width: 400 pixels

Run the page

Note: URL to: Note: URL to: allcustomers2.facesallcustomers2.faces

Finished cellFinished cell


Add Static Graphic Images

From the inner table in the 2nd row (right-hand column) of the outer (main) table, add the following text and graphics (shown in the screen capture below): Static text (type in the 1st column the text that is shown below) From \WebContent\images\ drag and drop:

r19.jpg – into the top row reasonglobe.jpg – into the bottom row


Add a Link to the Graphics and an Image Map – 1 of 2

Add a hyper-link on top of a graphic: Right-Click over the r19.jpg (keyboard) graphic Select Insert Link… Specify that the HTTP link should:

Launch: http://www.keyboards.com In a New Window

Add an Image Map on top of a graphic: Right-click over reasonglobe.jpg Select Edit Image Map…


Add a Link to the Add a Link to the Graphics and an Image Map – 2 of 2 and an Image Map – 2 of 2

From the Image Map Editor: Choose the PolygonPolygon area tool Draw (by single-clicking around the U.S. border in the graphic ) an outline of points as

shown in the screen capture below Double-click, which – closes the shape, and brings up the dialog to add a link Select an HTTP link to: http://www.usa.gov

Run the page and try both links


Custom HTML Table Layout and DesignHTML tables are common HTML tags. You will need to master developing with them, as they are

fundamental you achieving pixel-perfect design. HTML tables allow you to control; placement, justification and many other key U.I. elements.

Use the 3X3 table in the bottom right hand row/column – and by modifying its properties become familiar with the following commonly-required table handling properties and U.I. techniques (as shown in the screen capture below): Select all of the cells in the right-hand column. Right-click and specify: Table > Join Selected Cells. Add

a graphic to this cell. You might experiment with the cell’s Vertical alignment (the default as you can see is middle)

Select the cells in the middle row – and join them Change the color of some of the cells (we have used custom colors but that is not as important as

understanding how to customize cell colors – and where this is done) Change the text attributes inside the cells. Again – the example below shows Centering/Bold, Right, Top

and Bottom alignment

Reminder: Don’t spend a lot of

time trying to get thisperfect. You’re just learning HTML.and this page (for sure)is not going intoproduction

Run the page

Note cause & effect!

Documents

® IBM Software Group © 2006 IBM Corporation “Essential” HTML Tags and Page Development Techniques This Learning Module describes the standard HTML tags