Page 1
1
IBM eServer iSeries
© Copyright IBM Corporation, 2006. All Rights Reserved This publication may refer to products that are not currently available in your country. IBM makes no commitment to make available any products referred to herein.
Building Web Sites: Introduction to HTML
Mel AndersonIBM iSeries Technology [email protected]
IBM eServer iSeries
© 2006 IBM Corporation
Agenda
• What is HTML?• Why do we use HTML?• HTML tools• Basic HTML syntax
– Resume• Publishing a Web site• HTML and Web programming
– Registration form• Resources
Page 2
2
IBM eServer iSeries
© 2006 IBM Corporation
What is Hypertext Markup Language (HTML)?
• An open standard– Developed by the World Wide Web Consortium (W3C)
• A language used to format text and objects (such as images) to be displayed in a Web browser– The display language of a browser
• Static—it is only display.– Use other technologies to add dynamic function:
• Client-side (browser) scripting languages (JavaScript)• Server-side programs (CGI, Java servlets)
• The user interface language of the Web.
IBM eServer iSeries
© 2006 IBM Corporation
Why do we use HTML?
• Light– Files are flat text and very small– Quickly transferred over a network
• Easy to learn– Smaller and less complex than
other markup languages– Less than 100 tags (instructions)
• Open standard– Not proprietary– Works with all platforms, all
browsers, and all Web servers
• The rise of Internet technologies
Page 3
3
IBM eServer iSeries
© 2006 IBM Corporation
HTML tools
IBM eServer iSeries
© 2006 IBM Corporation
Two parts to HTML
Source code Display
Text/HTML editor
Browser
HTML files are flat-text files that have a .html (or .htm) extension.
When you open an HTML file with a browser, the code is run.
Page 4
4
IBM eServer iSeries
© 2006 IBM Corporation
“Free” tools
• Editors– Text
• Windows Notepad• Edit File (EDTF)• Etc.
– Graphical• Nvu (open source)• Mozilla/Netscape Composer• Microsoft FrontPage Express• WebSphere Development
Studio Client for iSeries• Etc.
• Browsers– Microsoft Internet Explorer– Netscape (built on Mozilla)– Mozilla (open source)– Mozilla Firefox (open source)– Opera– Etc.
IBM eServer iSeries
© 2006 IBM Corporation
Tools
• Use the browser’s View (Page) Source function to see the HTML code behind any Web page
Page 5
5
IBM eServer iSeries
© 2006 IBM Corporation
Basic HTML syntax
IBM eServer iSeries
© 2006 IBM Corporation
HTML syntax
• Tags– Instructions for the browser
<tag>Some text</tag>
• Nesting– Close tags in the opposite order in which you opened them.
<tag1><tag2>Some text</tag2></tag1>
• Attributes– Specify attributes to use non-default behavior
<tag attribute=“value”>Text</tag>
Page 6
6
IBM eServer iSeries
© 2006 IBM Corporation
HTML document structure
<html>
<head>
(Header: information about the page)</head>
<body>
(Body: Web page content)</body>
</html>
IBM eServer iSeries
© 2006 IBM Corporation
Header (<head>)
• Content within the <head> tags is not displayed in the browser.
• Optionally, contains information about your Web page.– <meta name=“author” content=“Mel Anderson”>
• Optionally, contains non-HTML code for your Web page– JavaScript, Cascading Style Sheets, etc.
• Contains the title of the Web page– Optional, but recommended
Page 7
7
IBM eServer iSeries
© 2006 IBM Corporation
Header (<head>)
• Use the <title> tag for the title of the page
<html>
<head>
<title>Ima Geeke’s Resume</title>
</head>
. . .
</html>
IBM eServer iSeries
© 2006 IBM Corporation
Body <body>
• The contents of the Web page (mainly text)– Headings– Paragraphs and line breaks– Text formatting– Lists– Links and images– Tables– Fonts and colors– Comments
• The tags described in the rest of the session occur in the <body> section
Page 8
8
IBM eServer iSeries
© 2006 IBM Corporation
Headings
• <hx> - x is a number from 1 to 6• <h1> is the biggest• <h6> is the smallest
<body><h1>Ima Geeke</h1>
<h2>Ima Geeke</h2><h3>Ima Geeke</h3>
<h4>Ima Geeke</h4><h5>Ima Geeke</h5>
<h6>Ima Geeke</h6></body>
IBM eServer iSeries
© 2006 IBM Corporation
Paragraphs (<p>)
• Adds a line feed after a line.<body>
<h1>Ima Geeke</h1>
<p>123 State Street</p>
<p>Rochester, MN 55901</p>
<p>(507)555-1212</p>
<p>[email protected] </p>
<p>Objective: To get a really sweet job.</p>
</body>
Page 9
9
IBM eServer iSeries
© 2006 IBM Corporation
Line breaks (<br>)
• Add a line break.
<h1>Ima Geeke</h1>
<p>123 State Street
<br>Rochester, MN 55901
<br>(507)555-1212
<br>[email protected] </p>
<p>Objective: To get a really sweet job.</p>
IBM eServer iSeries
© 2006 IBM Corporation
Bold, Italics, and Underline (<b>, <i>, <u>)
<p>123 State Street
<br>Rochester, MN 55901
<br>(507)555-1212
<br><u>[email protected] </u></p>
<p><b>Objective:</b> To get a really <i>sweet</i> job.</p>
Page 10
10
IBM eServer iSeries
© 2006 IBM Corporation
Lists
• Unordered list (UL) with list items (LI)<ul>
<li>Item</li>
<li>Item</li>
</ul>
• Ordered list (OL)<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
IBM eServer iSeries
© 2006 IBM Corporation
Lists
<p>Languages:</p>
<ul>
<li>RPG</li>
<li>COBOL</li>
<li>Java</li>
</ul>
Page 11
11
IBM eServer iSeries
© 2006 IBM Corporation
Links (<a href>)
• Use the anchor tag (<a>) with required hyperlink reference (HREF) attribute– Local file:
<a href=“rpg.html”>RPG</a>
– Full URL:<a href=“http://java.sun.com”>Java</a>
– E-mail address<a href=“mailto:[email protected] ”>….</a>
IBM eServer iSeries
© 2006 IBM Corporation
Links (<a href>)
<br><a href="mailto:[email protected] ">[email protected] </a>
</p>
. . .
<p>Languages:</p>
<ul>
<li><a href="rpg.html">RPG</a></li>
<li><a href="cobol.html">COBOL</a></li>
<li>
<a href="http://java.sun.com">Java</a>
</li>
</ul>
Page 12
12
IBM eServer iSeries
© 2006 IBM Corporation
Images (<img src>)
• Use the image (IMG) tag with required source (SRC) attribute:– Local file<img src=“mypic.gif”>
– Full URL:<img src=“http://www.ibm.com/c.gif”>
• No closing tag (</img>)
<h1>Ima Geeke</h1>
<img src=“mypic.gif”>
IBM eServer iSeries
© 2006 IBM Corporation
Tables
• Use the <table> tag as a container for the table contents.<table></table>
• By default, there is no border, so use the border (BORDER) attribute:<table border=“1”></table>
• HTML tables are row-major ordered. Define the rows with the table row (TR) tag:<table border=“1”>
<tr></tr>
<tr></tr>
</table>
Page 13
13
IBM eServer iSeries
© 2006 IBM Corporation
Tables
• Use the table heading (TH) and table data (TD) tags to define the cells in a row:– <th>: Content is bold and centered– <td>: Content is not bold and left-justified
• You can have both <td> tags and <th> tags in the same row.
• The browser will resize the table to fit the contents.– Manually size the table, rows, and cells with the WIDTH and HEIGHT
attributes. – Values are pixel widths or percentages.
• <td width=“10”>…</td>
• <tr height=“50%”>…</tr>
IBM eServer iSeries
© 2006 IBM Corporation
Tables
<p>Education:</p>
<table border=“1”>
<tr>
<th>School</th>
<th>Degree</th>
</tr>
<tr>
<td>PC University</td>
<td>B.A. 1985</td>
</tr>
</table>
Page 14
14
IBM eServer iSeries
© 2006 IBM Corporation
Positioning text
• Use the ALIGN attribute to position text. Values are RIGHT, CENTER, and LEFT.<p align=“right”>
<td align=“center”>
<th align=“left”> (default is center)<h1 align=“right”>
<img src=“mypic.gif” align=“right”>
• Most tags take the ALIGN attribute.
IBM eServer iSeries
© 2006 IBM Corporation
Positioning text
<h1>Ima Geeke</h1>
<img src="mypic.gif" align="right">
. . .
<p align="center">
<b>Objective:</b> To get a really <i>sweet</i> job.</p>
Page 15
15
IBM eServer iSeries
© 2006 IBM Corporation
Positioning text
• Use an “invisible table” to position text into columns.
<table border=“0” width=“100%”>
<tr>
<td>(Left column)</td>
<td>(Right column)</td>
</tr>
</table>
• The number of <td> tags is the number of columns.
IBM eServer iSeries
© 2006 IBM Corporation
Fonts
• Use the FONT tag– FACE attribute: Change the font
type.• Common types: Times New Roman
(default), Arial, Courier, Verdana, Sans Serif, Script
– Choices are based on what is installed on the user’s system
– SIZE attribute: Change the size of the text.• size=“x”
– x is a number between 1 and 7 (default is 3)
<h1><font face=“script” size=“7”>Ima Geeke</font></h1>
Page 16
16
IBM eServer iSeries
© 2006 IBM Corporation
Colors
• Color values:– Simple names: black, blue,
white, red, yellow, etc.– Hexadecimal values:
#RRGGBB (amount of red, green, and blue)
– See http://www.w3schools.com/tags/ref_colornames.asp for a list of named and hex values.
• Use the BACKGROUND and COLOR attributes to change the default colors.
<body bgcolor="#FFFFAA">
<h1><font face="script" size="7" color="green">ImaGeeke</font></h1>
IBM eServer iSeries
© 2006 IBM Corporation
Comments
• Use comment tags to comment your HTML code.<!-- Comment goes here. -->
• Comments are not displayed in the browser, but they show up in the source (View Source).
• Can be used to hide code you’re not currently using.
• Use punctuation characters to make the comment tags stand out:<!-- ******** Left column ******** -->
Page 17
17
IBM eServer iSeries
© 2006 IBM Corporation
IBM eServer iSeries
© 2006 IBM Corporation
Publishing a Web site
Page 18
18
IBM eServer iSeries
© 2006 IBM Corporation
Publishing Web sites
• To publish a site means to make it accessible by a URL.– http://www.imageeke.com/resume.html
• To do this, the files need to be copied to directories that are served by a Web server.– Also called Web space or document root
IBM eServer iSeries
© 2006 IBM Corporation
Web serving
• Business– External
• Third-party Web hosting services– Internal
• IBM HTTP Server (powered by Apache) for iSeries (5722-DG1)
• Lotus Domino for iSeries HTTP server (5733-L65)• Microsoft IIS• Apache HTTP Server (Open source)
• Personal– Most internet service providers (ISPs) offer Web space with their accounts– Third-party Web hosting services
Page 19
19
IBM eServer iSeries
© 2006 IBM Corporation
Publishing Web sites
• Placing Web site files on a Web server– Copy the files to directories under the document
root
• Methods– Map a network drive to the Web server machine
• Copy or cut-and-paste the files– File transfer protocol (FTP)
• Connect to the Web server machine and transfer the files
IBM eServer iSeries
© 2006 IBM Corporation
HTML in a Web server environment
`
Response
Request
http://<server_name>/file.html
Client
Server
Page 20
20
IBM eServer iSeries
© 2006 IBM Corporation
HTML and Web programming
IBM eServer iSeries
© 2006 IBM Corporation
Adding dynamic processing
• Need to add another technology to HTML to get dynamic behavior– HTML doesn’t do logic
• Options:– Browser (client-side)
• JavaScript, Java applets, VBScript, ActiveX– Web server (server-side) scripting languages
• PHP, PerlScript, SSI, VBScript (ASP), ColdFusion, server-side JavaScript, etc.– CGI programs (run in server’s operating system)
• ILE RPG, ILE COBOL, ILE C, C++, Perl, Python, Visual Basic, etc.• CGI API libraries have been created for most languages (such as CGIDEV2)
Page 21
21
IBM eServer iSeries
© 2006 IBM Corporation
Common Gateway Interface (CGI)
Data
Server-side program
4. Response (HTML)
1. Write data
2. Call program
3. Getdata
Request
data
Response
HTML
http://<server_name>/cgi-bin/<program>
IBM eServer iSeries
© 2006 IBM Corporation
HTML forms
• HTML forms support Web programs:– By gathering input data from the
user– By sending the request that
causes the Web server to invoke the program
• Data is sent to the server in name/value pairs.
Page 22
22
IBM eServer iSeries
© 2006 IBM Corporation
Forms (<form>)
• Container for form elements
• Tells the Web server what to do with the request– ACTION attribute
• The location of the Web program (full or partial URL or an alias)– METHOD attribute
• GET– Web server stores data in an environment variable
• POST– Web server stores data in a buffer
<form action=“/cgi-bin/reg.pgm” method=“post”></form>
IBM eServer iSeries
© 2006 IBM Corporation
Form elements
• Used to gather specific pieces of data from the user.
• Attributes we need to use on the form elements tags:– NAME attribute
• Specifies a name for a piece of data– VALUE attribute
• Available on selection elements• Allows the return value to be different than the display text
• Most form elements are defined with the INPUT tag.– TYPE attribute
• Specifies the type of form element
Page 23
23
IBM eServer iSeries
© 2006 IBM Corporation
Text boxes
• One-line text boxes– Plain
• <input type=“text” name=“fname”>
– Password (masked) text box• <input type=“password” name=“pwd”>
– Change default size with SIZE attribute (number of characters)– Don’t need the VALUE attribute (whatever is typed in the box is the value)
• Multi-line text field– <textarea name=“comment”>[Text to appear in the box]
</textarea>
– Change default size:• COLS attribute: Number of characters in a row• ROWS attribute: Number of row (lines) in the box
IBM eServer iSeries
© 2006 IBM Corporation
Text boxes
<form action="/cgi-bin/reg.pgm" method="post">
<p>Username: <input type="text" name=“user” size="10">
<br>Password: <input type="password" name=“pass” size="10">
</p>
<p>Comments:
<br><textarea name=“comments”>
</textarea></p>
</form>
Page 24
24
IBM eServer iSeries
© 2006 IBM Corporation
Drop-down list (<select> and <option>)
• Use the SELECT tag as the container for the options– Specify the NAME attribute here
<select name=“state”></select>
• Use the OPTION tag to define each option– Can optionally use the VALUE attribute to return a value that is different than
the display text:<select name=“state”>
<option value=“MN”>Minnesota</option>
</select>
– SELECTED attribute pre-selects one of the options
IBM eServer iSeries
© 2006 IBM Corporation
Drop-down list (<select> and <option>)
<select name=“level”>
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Page 25
25
IBM eServer iSeries
© 2006 IBM Corporation
Radio buttons
• Radio buttons give a list of choices, of which only one can be selected.<input type=“radio” name=“pet”>Cat</input>
• Group radio buttons with the same value for the NAME attribute<input type=“radio” name=“pet”>Cat</input>
<input type=“radio” name=“pet”>Dog</input>
<input type=“radio” name=“pet”>Fish</input>
• The CHECKED attribute pre-selects an option
• Use the VALUE attribute to return a value other than the display text<input type=“radio” name=“pet” value=“dog”>Dog</input>
IBM eServer iSeries
© 2006 IBM Corporation
Radio buttons
<p>Please choose your ranting level:
<br><input type="radio" name="rant" value="1" checked>Peeved</input>
<br><input type="radio" name="rant" value="2">Seeing Red</input>
<br><input type="radio" name="rant" value="3">Angry</input>
<br><input type="radio" name="rant" value="4">Mad as hell</input>
</p>
Page 26
26
IBM eServer iSeries
© 2006 IBM Corporation
Checkboxes
• Like radio buttons, but more than one option can be selected<input type=“checkbox” name=“pets”>Cat</input>
• Also specify the same NAME attribute to group options<input type=“checkbox” name=“pets”>Cat</input>
<input type=“checkbox” name=“pets”>Dog</input>
<input type=“checkbox” name=“pets”>Fish</input>
• Multiple name/value pairs can be returned to the server. If all options in the example are selected, these name/value pairs are returned:pets=Cat pets=Dog pets=Fish
• SELECTED attribute pre-checks the checkbox
IBM eServer iSeries
© 2006 IBM Corporation
Checkboxes
<p>Please choose the MelCo newsletters you would like to receive:
<br><input type="checkbox" name="news" value="rage" checked>
Days of Our Rage</input>
<br><input type="checkbox" name="news" value="school" checked>
I Blame The Schools</input>
<br><input type="checkbox" name="news" value="pols" checked>
Those #@!*$ Politicians</input>
</p>
Page 27
27
IBM eServer iSeries
© 2006 IBM Corporation
Buttons
• Reset button– <input type=“reset”>
– Resets (clears) the form to its initial values– Default text is “Reset”
• Submit button– <input type=“submit”>
– Submits the form data to the server– Default text is “Submit Query”
• Use the VALUE attribute to change button text.
• Typically don’t use buttons for data, so we don’t need the NAME attribute.
IBM eServer iSeries
© 2006 IBM Corporation
Buttons
<input type="reset" value="Clear"><input type="submit" value="Submit">
Page 28
28
IBM eServer iSeries
© 2006 IBM Corporation
IBM eServer iSeries
© 2006 IBM Corporation
Resources
Page 29
29
IBM eServer iSeries
© 2006 IBM Corporation
Resources
• General Web development and design– World Wide Web Consortium (W3C)
• http://www.w3c.org– W3 Schools: The Largest Web Developer’s Site on the Net
• http://www.w3schools.com– Webmonkey: The Web Developer’s Resource
• http://www.webmonkey.com– Alertbox: Current Issues in Web Usability
• Dr. Jakob Nielsen• http://www.useit.com/alertbox/
IBM eServer iSeries
© 2006 IBM Corporation
Resources
• HTML– W3C HTML Home Page
• http://www.w3.org/MarkUp/– W3 Schools HTML Tutorial
• http://www.w3schools.com/html/default.asp– WebMonkey HTML Basics
• http://webmonkey.wired.com/webmonkey/authoring/html_basics/
• Cascading Style Sheets (CSS)– W3C CSS Home Page
• http://www.w3.org/Style/CSS/– WebMonkey Stylesheets
• http://webmonkey.wired.com/webmonkey/authoring/stylesheets/
Page 30
30
IBM eServer iSeries
© 2006 IBM Corporation
Resources
• File transfer protocol (FTP)– WebMonkey’s “FTP: For the People” (article)
• http://webmonkey.wired.com/webmonkey/02/36/index4a.html?tw=authoring
• CGIDEV2 and CGICBLDEV2– http://www-922.ibm.com/easy400p/easy400p02.html
IBM eServer iSeries
© 2006 IBM Corporation
Tool resources
• Free graphical editors– NVu (Open source)
• http://www.nvu.com– WebSphere Development Studio Client (WDSc) for iSeries **
• http://www.ibm.com/software/awdtools/wdt400/** Your shop may already have free entitlement to WDSc:
http://www.ibm.com/software/awdtools/wdt400/about/howToOrder.html
• Free text editors– HTML-Kit
• http://www.chami.com/html-kit/
Page 31
31
IBM eServer iSeries
© 2006 IBM Corporation
Tool resources
• Browsers– Mozilla Firefox (Open source)
• http://www.mozilla.org/products/firefox/
• Web servers– IBM HTTP Server (powered by Apache) for iSeries
• http://www.iseries.ibm.com/http– Apache (Open source)
• http://www.apache.org
• Free FTP clients– Filezilla (Open source)
• http://sourceforge.net/projects/filezilla/
IBM eServer iSeries
© 2006 IBM Corporation
Any questions?
Page 32
32
IBM eServer iSeries
© 2006 IBM Corporation
8 IBM Corporation 1994-2006. All rights reserved.References in this document to IBM products or services do not imply that IBM intends to make them available in every country.
The following terms are trademarks of International Business Machines Corporation in the United States, other countries, or both
Rational is a trademark of International Business Machines Corporation and Rational Software Corporation in the United States, other countries, or both.Intel, Intel Inside (logos), MMX and Pentium are trademarks of Intel Corporation in the United States, other countries, or both.Linux is a trademark of Linus Torvalds in the United States, other countries, or both.Microsoft, Windows, Windows NT, and the Windows logo are trademarks of Microsoft Corporation in the United States, other countries, or both.UNIX is a registered trademark of The Open Group in the United States and other countries.SET and the SET Logo are trademarks owned by SET Secure Electronic Transaction LLC. Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.Other company, product or service names may be trademarks or service marks of others.
Information is provided "AS IS" without warranty of any kind.
All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer.
Information concerning non-IBM products was obtained from a supplier of these products, published announcement material, or other publicly available sources and does not constitute an endorsement of such products by IBM. Sources for non-IBM list prices and performance numbers are taken from publicly available information, including vendor announcements and vendor worldwide homepages. IBM has not tested these products and cannot confirm the accuracy of performance, capability, or any other claims related to non-IBM products. Questions on the capability of non-IBM products should be addressed to the supplier of those products.
All statements regarding IBM future direction and intent are subject to change or withdrawal without notice, and represent goals and objectives only. Contact your local IBM office or IBM authorized reseller for the full text of the specific Statement of Direction.
Some information addresses anticipated future capabilities. Such information is not intended as a definitive statement of a commitment to specific levels of performance, function or delivery schedules with respect to any future products. Such commitments are only made in IBM product announcements. The information is presented here to communicate IBM's current investment and development activities as a good faith effort to help with our customers' future planning.
Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user will experience will vary depending upon considerations such as the amount of multiprogramming in the user's job stream, the I/O configuration, the storage configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve throughput or performance improvements equivalent to the ratios stated here.
Photographs shown are of engineering prototypes. Changes may be incorporated in production models.
Trademarks and Disclaimers
iSeriesIBM (logo)eServer
OS/400IBMAS/400ei5/OSe-business on demandAS/400