® 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.

2 Last update: 12/04/2007 HTML 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.

3 Last 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. not  It is not 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. htmlcontrols.jsp  Start by creating a new Web page, named: htmlcontrols.jsp  Choose a page template for your page.

4 Last 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 2 nd row/2 nd 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 3 rd row/2 nd Column add another HTML table  Defined as 3 rows/3 columns, Size: 100% TABLE TABLES

5 Last 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 ( 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 ( ) that can be designed for independently and contain:  HTML tags  JSF Components  Plain text jspPanels  Can contain JSF jspPanels – 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

6 Last 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 statements from this text box (here)  Into the top left hand cell of the HTML table, insert an HTML Source tag  Paste the tags into the Insert HTML Source window  Customize the as shown below  Repeat for the top right-hand cell Page Title Page Title <BR><BR><BR></FIELDSET> CopyTheseStatements

7 Last 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 lines  Style, Format, color, background color, etc  Style, Format, color, background color, etc. To add right and center-justified text requires you to add a new HTML control *** Notes

8 Last 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: Top  In the top right-hand cell of the table, click your mouse, and from Properties, select Vertical: Top 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). FirstAnchor  In the bottom left-hand cell of the bottom row of the table, Insert an Anchor tag named: FirstAnchor  Type some text below the anchor Now add four links, each separated by a Horizontal Rule 1.Start by adding a File link allcustomers2.jsp 1.Browse to select: allcustomers2.jsp.faces 2.Rename the extension to.faces (see screen capture) New Window 3.Target: New Window  Anchor tag, named: FirstAnchor

9 Last update: 12/04/2007  Add Links – 2 of 3 Add 4 more links to the top right table cell within the. Also add a horizontal rule between each link for organization! 2.Add an HTTP link  URL of your choice New Window  Target: New Window 3. Add an link  address of your choice  Subject (line on the ) optional 4.Add a link to an Anchor Browse  Click Browse FirstAnchor  Select FirstAnchor 5.Add a link to a file 1.Drag and drop the file icon in the page 2.From the Windows browser: 1.Change the file type to all: *.* 2.Select any file 3.From the Insert File wizard, select  Insert a link to this file

10 Last update: 12/04/2007 Add Links – 3 of 3  Add Links – 3 of 3 Completed links section – Note that you can Preview or Run the page on the server and test your link – and text entries:

11 Last update: 12/04/2007  Add an iFrame iFrame  In the 2 nd row/left-column of the HTML table, insert some text and an iFrame Tag with the following properties Browse: - allcustomers2.faces - Width: 400 pixels  Run the page Note: URL to: allcustomers2.faces  Finished cell

12 Last update: 12/04/2007  Add Static Graphic Images  From the inner table in the 2 nd 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 1 st 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

13 Last 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:  In a New Window Add an Image Map on top of a graphic:  Right-click over reasonglobe.jpg  Select Edit Image Map…

14 Last update: 12/04/2007 Add a Link to the and an Image Map – 2 of 2  Add a Link to the Graphics and an Image Map – 2 of 2  From the Image Map Editor: Polygon  Choose the Polygon 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:  Run the page and try both links

15 Last update: 12/04/2007  Custom HTML Table Layout and Design HTML 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 this perfect. You’re just learning HTML. and this page (for sure) is not going into production  Run the page Note cause & effect!