1. ® 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. 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. 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. 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. 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. 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. 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. 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. 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 eMail link  eMail address of your choice  Subject (line on the eMail) 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. 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. 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. 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. 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: http://www.keyboards.comhttp://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…

14. 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: http://www.usa.govhttp://www.usa.gov  Run the page and try both links

15. 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!