“Essential” HTML Tags and Page Development Techniques

“Essential” HTML Tags and Page Development Techniques This Learning Module describes the standard HTML tags for developing (realizing) a complex page layout design.

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.

 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 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. Start by creating a new Web page, named: htmlcontrols.jsp • Choose a page template for 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% T A B L E S T A B L E

 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 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

 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> statements from this text box (here) • Into the top left hand cell of the HTML table, insert an HTML Source tag • Paste the <FIELDSET> tags into the Insert HTML Source window • Customize the <LEGEND> as shown below • Repeat for the top right-hand cell <FIELDSET><LEGEND> Page Title </LEGEND> </FIELDSET> Copy These Statements

 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. To add right and center-justified text requires you to add a new HTML control *** 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: 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). 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 • Start by adding a File link • Browse to select: allcustomers2.jsp • Rename the extension to .faces (see screen capture) • Target: New Window  Anchor 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 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 Browse • Select FirstAnchor 5. Add a link to a file • Drag and drop the file icon in the page • From the Windows browser: • Change the file type to all: *.* • Select any file • From the Insert File wizard, select  Insert a link to this file

 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:

 Add an iFrame • In the 2nd 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

 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 Graphics and an Image Map – 2 of 2 • From the Image Map Editor: • 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.gov • Run the page and try both links

 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!

“Essential” HTML Tags and Page Development Techniques