®
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.
3Last update: 12/04/2007
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.
4Last update: 12/04/2007
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
5Last update: 12/04/2007
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
6Last update: 12/04/2007
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><B> Page Title </B></LEGEND> <FIELDSET><LEGEND><B> Page Title </B></LEGEND> <BR><BR><BR><BR><BR><BR><BR><BR></FIELDSET></FIELDSET>
<FIELDSET><LEGEND><B> Page Title </B></LEGEND> <FIELDSET><LEGEND><B> Page Title </B></LEGEND> <BR><BR><BR><BR><BR><BR><BR><BR></FIELDSET></FIELDSET>
CopyCopyTheseThese
StatementsStatements
7Last update: 12/04/2007
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
8Last update: 12/04/2007
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
9Last update: 12/04/2007
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
10Last update: 12/04/2007
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:
11Last update: 12/04/2007
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
12Last update: 12/04/2007
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
13Last update: 12/04/2007
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…
14Last update: 12/04/2007
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
15Last update: 12/04/2007
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!
Top Related