building web sites: introduction to html agenda · • ile rpg, ile cobol, ile c, c++, perl,...

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

2

IBM eServer iSeries


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


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

3

IBM eServer iSeries


HTML tools

IBM eServer iSeries


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.

4

IBM eServer iSeries


“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


Tools

• Use the browser’s View (Page) Source function to see the HTML code behind any Web page

5

IBM eServer iSeries


Basic HTML syntax

IBM eServer iSeries


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>

6

IBM eServer iSeries


HTML document structure

<html>

<head>

(Header: information about the page)</head>

<body>

(Body: Web page content)</body>

</html>

IBM eServer iSeries


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

7

IBM eServer iSeries


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


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

8

IBM eServer iSeries


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


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>

9

IBM eServer iSeries


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


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>

10

IBM eServer iSeries


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


Lists

<p>Languages:</p>

<ul>

<li>RPG</li>

<li>COBOL</li>

<li>Java</li>

</ul>

11

IBM eServer iSeries


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


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>

12

IBM eServer iSeries


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


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>

13

IBM eServer iSeries


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


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>

14

IBM eServer iSeries


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


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>

15

IBM eServer iSeries


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


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>

16

IBM eServer iSeries


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


Comments

• Use comment tags to comment your HTML code.

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

17

IBM eServer iSeries


IBM eServer iSeries


Publishing a Web site

18

IBM eServer iSeries


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


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

19

IBM eServer iSeries


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


HTML in a Web server environment

`

Response

Request

http://<server_name>/file.html

Client

Server

20

IBM eServer iSeries


HTML and Web programming

IBM eServer iSeries


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)

21

IBM eServer iSeries


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


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.

22

IBM eServer iSeries


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


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

23

IBM eServer iSeries


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


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>

24

IBM eServer iSeries


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


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>

25

IBM eServer iSeries


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


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>

26

IBM eServer iSeries


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


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>

27

IBM eServer iSeries


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


Buttons

<input type="reset" value="Clear"><input type="submit" value="Submit">

28

IBM eServer iSeries


IBM eServer iSeries


Resources

29

IBM eServer iSeries


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


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/

30

IBM eServer iSeries


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


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/

31

IBM eServer iSeries


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


Any questions?

32

IBM eServer iSeries


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

building web sites: introduction to html agenda · • ile rpg, ile cobol, ile c, c++, perl,...

Documents