Building Web Sites: Introduction to HTML Mel Anderson IBM iseries Technology Center melander@us.ibm.com 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. 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 1
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. 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 2
HTML tools Two parts to HTML Source code Display Text/HTML editor HTML files are flat-text files that have a.html (or.htm) extension. Browser When you open an HTML file with a browser, the code is run. 3
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. Tools Use the browser s View (Page) Source function to see the HTML code behind any Web page 4
Basic HTML syntax 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> 5
HTML document structure <html> <head> (Header: information about the page) </head> <body> (Body: Web page content) </body> </html> 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 6
Header (<head>) Use the <title> tag for the title of the page <html> <head> <title>ima Geeke s Resume</title> </head>... </html> 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 7
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> 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>imageeke@geeke.com</p> <p>objective: To get a really sweet job.</p> </body> 8
Line breaks (<br>) Add a line break. <h1>ima Geeke</h1> <p>123 State Street <br>rochester, MN 55901 <br>(507)555-1212 <br>imageeke@geeke.com</p> <p>objective: To get a really sweet job.</p> Bold, Italics, and Underline (<b>, <i>, <u>) <p>123 State Street <br>rochester, MN 55901 <br>(507)555-1212 <br><u>imageeke@geeke.com</u></p> <p><b>objective:</b> To get a really <i>sweet</i> job.</p> 9
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> Lists <p>languages:</p> <ul> <li>rpg</li> <li>cobol</li> <li>java</li> </ul> 10
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:imageeke@geeke.com >.</a> Links (<a href>) <br><a href="mailto:imageeke@geeke.com">imageeke@geeke.com</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> 11
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 > 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> 12
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> 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> 13
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. 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> 14
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. 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> 15
Colors Use the BACKGROUND and COLOR attributes to change the default 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. <body bgcolor="#ffffaa"> <h1><font face="script" size="7" color="green">ima Geeke</font></h1> 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 ******** --> 16
Publishing a Web site 17
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 Web serving Personal Most internet service providers (ISPs) offer Web space with their accounts Third-party Web hosting services 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) 18
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 HTML in a Web server environment Response Client ` Request http://<server_name>/file.html Server 19
HTML and Web programming 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) 20
Common Gateway Interface (CGI) Data data Request 1. Write data 3. Get data 2. Call program Response HTML 4. Response (HTML) http://<server_name>/cgi-bin/<program> Server-side program 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. 21
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> 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 22
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 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> 23
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 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> 24
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> 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> 25
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 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> 26
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. Buttons <input type="reset" value="clear"> <input type="submit" value="submit"> 27
Resources 28
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/ 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/ 29
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 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/ 30
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/ Any questions? 31
Trademarks and Disclaimers 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 AS/400 AS/400e eserver e-business on demand IBM IBM (logo) iseries i5/os OS/400 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. 32