Building Web Sites: Introduction to HTML

Size: px
Start display at page:

Download "Building Web Sites: Introduction to HTML"

Transcription

1 Building Web Sites: Introduction to HTML Mel Anderson IBM iseries Technology Center Copyright IBM Corporation, 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

2 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

3 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

4 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

5 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

6 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

7 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

8 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) </p> <p>imageeke@geeke.com</p> <p>objective: To get a really sweet job.</p> </body> 8

9 Line breaks (<br>) Add a line break. <h1>ima Geeke</h1> <p>123 State Street <br>rochester, MN <br>(507) <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 <br>(507) <br><u>imageeke@geeke.com</u></p> <p><b>objective:</b> To get a really <i>sweet</i> job.</p> 9

10 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

11 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= >Java</a> address <a href= >.</a> Links (<a href>) <br><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=" </li> </ul> 11

12 Images (<img src>) Use the image (IMG) tag with required source (SRC) attribute: Local file <img src= mypic.gif > Full URL: <img src= > 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

13 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

14 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

15 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

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

17 Publishing a Web site 17

18 Publishing Web sites To publish a site means to make it accessible by a URL. 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

19 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 Server 19

20 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

21 Common Gateway Interface (CGI) Data data Request 1. Write data 3. Get data 2. Call program Response HTML 4. Response (HTML) 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

22 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

23 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

24 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

25 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

26 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

27 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

28 Resources 28

29 Resources General Web development and design World Wide Web Consortium (W3C) W3 Schools: The Largest Web Developer s Site on the Net Webmonkey: The Web Developer s Resource Alertbox: Current Issues in Web Usability Dr. Jakob Nielsen Resources HTML W3C HTML Home Page W3 Schools HTML Tutorial WebMonkey HTML Basics Cascading Style Sheets (CSS) W3C CSS Home Page WebMonkey Stylesheets 29

30 Resources File transfer protocol (FTP) WebMonkey s FTP: For the People (article) CGIDEV2 and CGICBLDEV2 Tool resources Free graphical editors NVu (Open source) WebSphere Development Studio Client (WDSc) for iseries ** ** Your shop may already have free entitlement to WDSc: Free text editors HTML-Kit 30

31 Tool resources Browsers Mozilla Firefox (Open source) Web servers IBM HTTP Server (powered by Apache) for iseries Apache (Open source) Free FTP clients Filezilla (Open source) Any questions? 31

32 Trademarks and Disclaimers 8 IBM Corporation 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

ICT 6012: Web Programming

ICT 6012: Web Programming ICT 6012: Web Programming Covers HTML, PHP Programming and JavaScript Covers in 13 lectures a lecture plan is supplied. Please note that there are some extra classes and some cancelled classes Mid-Term

More information

Introduction to XHTML. 2010, Robert K. Moniot 1

Introduction to XHTML. 2010, Robert K. Moniot 1 Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document

More information

XHTML BASICS. Institute of Finance Management CIT Department Herman Mandari

XHTML BASICS. Institute of Finance Management CIT Department Herman Mandari XHTML BASICS Institute of Finance Management CIT Department Herman Mandari HTML Styles Introduces CSS to HTML The main purposes is to provide a common way to style all HTML elements Examples

More information

Short notes on webpage programming languages

Short notes on webpage programming languages Short notes on webpage programming languages What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of

More information

Featuring: GUI screen designer to edit DDS source for 5250 Display Files

Featuring: GUI screen designer to edit DDS source for 5250 Display Files IBM Software Group Rational Developer for IBM i (RDi) Screen Designer Technology Preview Featuring: GUI screen designer to edit DDS source for 5250 Display Files Last Update: 11/25/2009 2009 IBM Corporation

More information

HTML Tables. IT 3203 Introduction to Web Development

HTML Tables. IT 3203 Introduction to Web Development IT 3203 Introduction to Web Development Tables and Forms September 3 HTML Tables Tables are your friend: Data in rows and columns Positioning of information (But you should use style sheets for this) Slicing

More information

EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING

EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING The European Computer Driving Licence Foundation Ltd. Portview House Thorncastle Street Dublin 4 Ireland Tel: + 353

More information

Web Development 1 A4 Project Description Web Architecture

Web Development 1 A4 Project Description Web Architecture Web Development 1 Introduction to A4, Architecture, Core Technologies A4 Project Description 2 Web Architecture 3 Web Service Web Service Web Service Browser Javascript Database Javascript Other Stuff:

More information

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.

More information

CS412 Interactive Lab Creating a Simple Web Form

CS412 Interactive Lab Creating a Simple Web Form CS412 Interactive Lab Creating a Simple Web Form Introduction In this laboratory, we will create a simple web form using HTML. You have seen several examples of HTML pages and forms as you have worked

More information

Rational Developer for IBM i (RDi) Introduction to RDi

Rational Developer for IBM i (RDi) Introduction to RDi IBM Software Group Rational Developer for IBM i (RDi) Introduction to RDi Featuring: Creating a connection, setting up the library list, working with objects using Remote Systems Explorer. Last Update:

More information

Data Transfer Tips and Techniques

Data Transfer Tips and Techniques Agenda Key: Session Number: System i Access for Windows: Data Transfer Tips and Techniques 8 Copyright IBM Corporation, 2008. All Rights Reserved. This publication may refer to products that are not currently

More information

HTML Forms and CONTROLS

HTML Forms and CONTROLS HTML Forms and CONTROLS Web forms also called Fill-out Forms, let a user return information to a web server for some action. The processing of incoming data is handled by a script or program written in

More information

HT H ML B as a ics c 1

HT H ML B as a ics c 1 HTML Basics 1 What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set

More information

CSE 3. Marking Up with HTML. Tags for Bold, Italic, and underline. Structuring Documents. An HTML Web Page File

CSE 3. Marking Up with HTML. Tags for Bold, Italic, and underline. Structuring Documents. An HTML Web Page File CSE 3 Comics Updates Shortcut(s)/Tip(s) of the Day Google Earth/Google Maps ssh Anti-Spyware Chapter 4: Marking Up With HTML: A Hypertext Markup Language Primer Fluency with Information Technology Third

More information

07 Forms. 1 About Forms. 2 The FORM Tag. 1.1 Form Handlers

07 Forms. 1 About Forms. 2 The FORM Tag. 1.1 Form Handlers 1 About Forms For a website to be successful, it is important to be able to get feedback from visitors to your site. This could be a request for information, general comments on your site or even a product

More information

Tutorial 6 Creating a Web Form. HTML and CSS 6 TH EDITION

Tutorial 6 Creating a Web Form. HTML and CSS 6 TH EDITION Tutorial 6 Creating a Web Form HTML and CSS 6 TH EDITION Objectives Explore how Web forms interact with Web servers Create form elements Create field sets and legends Create input boxes and form labels

More information

Website 101. Yani Ivanov. Student Assistant / Web Administrator

Website 101. Yani Ivanov. Student Assistant / Web Administrator Website 101 Yani Ivanov Student Assistant / Web Administrator Information Technology for Environmental Research Area of the Hawai`i NSF EPSCoR Program Covered Topics Introduction to HTML What is it and

More information

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages

More information

Introduction to Web Design Curriculum Sample

Introduction to Web Design Curriculum Sample Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic

More information

Building Your Website

Building Your Website Building Your Website HTML & CSS This guide is primarily aimed at people building their first web site and those who have tried in the past but struggled with some of the technical terms and processes.

More information

Interaction between browser and server. HTML (Hyper Text Markup Language)

Interaction between browser and server. HTML (Hyper Text Markup Language) Interaction between browser and server The client/server model is a computing model that acts as a distributed application which partitions tasks or workloads between the providers of a resource or service,

More information

Lesson Review Answers

Lesson Review Answers Lesson Review Answers-1 Lesson Review Answers Lesson 1 Review 1. User-friendly Web page interfaces, such as a pleasing layout and easy navigation, are considered what type of issues? Front-end issues.

More information

Further web design: HTML forms

Further web design: HTML forms Further web design: HTML forms Practical workbook Aims and Learning Objectives The aim of this document is to introduce HTML forms. By the end of this course you will be able to: use existing forms on

More information

Creating HTML authored webpages using a text editor

Creating HTML authored webpages using a text editor GRC 175 Assignment 1 Creating HTML authored webpages using a text editor Tasks: 1. Acquire web host space with ad free provider 2. Create an index webpage (index.html) 3. Create a class management webpage

More information

WEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012)

WEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012) WEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012) BY MISS. SAVITHA R LECTURER INFORMATION SCIENCE DEPTATMENT GOVERNMENT POLYTECHNIC GULBARGA FOR ANY FEEDBACK CONTACT TO EMAIL:

More information

HTML, CSS, XML, and XSL

HTML, CSS, XML, and XSL APPENDIX C HTML, CSS, XML, and XSL T his appendix is a very brief introduction to two markup languages and their style counterparts. The appendix is intended to give a high-level introduction to these

More information

Website Planning Checklist

Website Planning Checklist Website Planning Checklist The following checklist will help clarify your needs and goals when creating a website you ll be surprised at how many decisions must be made before any production begins! Even

More information

Internet Technologies

Internet Technologies QAFQAZ UNIVERSITY Computer Engineering Department Internet Technologies HTML Forms Dr. Abzetdin ADAMOV Chair of Computer Engineering Department aadamov@qu.edu.az http://ce.qu.edu.az/~aadamov What are forms?

More information

Migrating LAMP stack from x86 to Power using the Server Consolidation Tool

Migrating LAMP stack from x86 to Power using the Server Consolidation Tool Migrating LAMP stack from x86 to Power using the Server Consolidation Tool Naveen N. Rao Lucio J.H. Correia IBM Linux Technology Center November 2014 Version 3.0 1 of 24 Table of Contents 1.Introduction...3

More information

So we're set? Have your text-editor ready. Be sure you use NotePad, NOT Word or even WordPad. Great, let's get going.

So we're set? Have your text-editor ready. Be sure you use NotePad, NOT Word or even WordPad. Great, let's get going. Web Design 1A First Website Intro to Basic HTML So we're set? Have your text-editor ready. Be sure you use NotePad, NOT Word or even WordPad. Great, let's get going. Ok, let's just go through the steps

More information

Module 6 Web Page Concept and Design: Getting a Web Page Up and Running

Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Lesson 3 Creating Web Pages Using HTML UNESCO EIPICT M6. LESSON 3 1 Rationale Librarians need to learn how to plan, design and create

More information

Web Design Revision. AQA AS-Level Computing COMP2. 39 minutes. 39 marks. Page 1 of 17

Web Design Revision. AQA AS-Level Computing COMP2. 39 minutes. 39 marks. Page 1 of 17 Web Design Revision AQA AS-Level Computing COMP2 204 39 minutes 39 marks Page of 7 Q. (a) (i) What does HTML stand for?... () (ii) What does CSS stand for?... () (b) Figure shows a web page that has been

More information

IBM Systems Director Navigator for i5/os New Web console for i5, Fast, Easy, Ready

IBM Systems Director Navigator for i5/os New Web console for i5, Fast, Easy, Ready Agenda Key: Session Number: 35CA 540195 IBM Systems Director Navigator for i5/os New Web console for i5, Fast, Easy, Ready 8 Copyright IBM Corporation, 2008. All Rights Reserved. This publication may refer

More information

By Glenn Fleishman. WebSpy. Form and function

By Glenn Fleishman. WebSpy. Form and function Form and function The simplest and really the only method to get information from a visitor to a Web site is via an HTML form. Form tags appeared early in the HTML spec, and closely mirror or exactly duplicate

More information

Web Publishing Basics 2

Web Publishing Basics 2 Web Publishing Basics 2 HTML and CSS Coding Jeff Pankin pankin@mit.edu Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What

More information

How to Deliver Measurable Business Value with the Enterprise CMDB

How to Deliver Measurable Business Value with the Enterprise CMDB How to Deliver Measurable Business Value with the Enterprise CMDB James Moore jdmoore@us.ibm.com Product Manager, Business Service, Netcool/Impact 2010 IBM Corporation Agenda What is a CMDB? What are CMDB

More information

Rational Developer for IBM i (RDi) Working offline using i Projects

Rational Developer for IBM i (RDi) Working offline using i Projects IBM Software Group Rational Developer for IBM i (RDi) Working offline using i Projects Featuring: Using i Projects for: working offline, editing, remote compiling/ building, interfacing with RTCi for source

More information

HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout

HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout Fall 2011, Version 1.0 Table of Contents Introduction...3 Downloading

More information

HTML Overview. With an emphasis on XHTML

HTML Overview. With an emphasis on XHTML HTML Overview With an emphasis on XHTML What is HTML? Stands for HyperText Markup Language A client-side technology (i.e. runs on a user s computer) HTML has a specific set of tags that allow: the structure

More information

HTML TIPS FOR DESIGNING

HTML TIPS FOR DESIGNING This is the first column. Look at me, I m the second column.

More information

How to Manage Your Eservice Center Knowledge Base

How to Manage Your Eservice Center Knowledge Base Populating and Maintaining your eservice Center Knowledge Base Table of Contents Populating and Maintaining the eservice Center Knowledge Base...2 Key Terms...2 Setting up the Knowledge Base...3 Consider

More information

CGI Programming. What is CGI?

CGI Programming. What is CGI? CGI Programming What is CGI? Common Gateway Interface A means of running an executable program via the Web. CGI is not a Perl-specific concept. Almost any language can produce CGI programs even C++ (gasp!!)

More information

Script Handbook for Interactive Scientific Website Building

Script Handbook for Interactive Scientific Website Building Script Handbook for Interactive Scientific Website Building Version: 173205 Released: March 25, 2014 Chung-Lin Shan Contents 1 Basic Structures 1 11 Preparation 2 12 form 4 13 switch for the further step

More information

Web Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.

Web Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia. Web Building Blocks Core Concepts for HTML & CSS Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.edu @joegilbert Why Learn the Building Blocks? The idea

More information

Contents. Downloading the Data Files... 2. Centering Page Elements... 6

Contents. Downloading the Data Files... 2. Centering Page Elements... 6 Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...

More information

BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D

BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D 1 LEARNING OUTCOMES Describe the anatomy of a web page Format the body of a web page with block-level elements

More information

HTML Form Widgets. Review: HTML Forms. Review: CGI Programs

HTML Form Widgets. Review: HTML Forms. Review: CGI Programs HTML Form Widgets Review: HTML Forms HTML forms are used to create web pages that accept user input Forms allow the user to communicate information back to the web server Forms allow web servers to generate

More information

The Web Web page Links 16-3

The Web Web page Links 16-3 Chapter Goals Compare and contrast the Internet and the World Wide Web Describe general Web processing Write basic HTML documents Describe several specific HTML tags and their purposes 16-1 Chapter Goals

More information

New Perspectives on Creating Web Pages with HTML. Considerations for Text and Graphical Tables. A Graphical Table. Using Fixed-Width Fonts

New Perspectives on Creating Web Pages with HTML. Considerations for Text and Graphical Tables. A Graphical Table. Using Fixed-Width Fonts A Text Table New Perspectives on Creating Web Pages with HTML This figure shows a text table. Tutorial 4: Designing a Web Page with Tables 1 2 A Graphical Table Considerations for Text and Graphical Tables

More information

How to code, test, and validate a web page

How to code, test, and validate a web page Chapter 2 How to code, test, and validate a web page Slide 1 Objectives Applied 1. Use a text editor like Aptana Studio 3 to create and edit HTML and CSS files. 2. Test an HTML document that s stored on

More information

JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK

JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK Programming for Digital Media EE1707 JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK 1 References and Sources 1. DOM Scripting, Web Design with JavaScript

More information

XHTML Forms. Form syntax. Selection widgets. Submission method. Submission action. Radio buttons

XHTML Forms. Form syntax. Selection widgets. Submission method. Submission action. Radio buttons XHTML Forms Web forms, much like the analogous paper forms, allow the user to provide input. This input is typically sent to a server for processing. Forms can be used to submit data (e.g., placing an

More information

AJAX The Future of Web Development?

AJAX The Future of Web Development? AJAX The Future of Web Development? Anders Moberg (dit02amg), David Mörtsell (dit01dml) and David Södermark (dv02sdd). Assignment 2 in New Media D, Department of Computing Science, Umeå University. 2006-04-28

More information

Creating your personal website. Installing necessary programs Creating a website Publishing a website

Creating your personal website. Installing necessary programs Creating a website Publishing a website Creating your personal website Installing necessary programs Creating a website Publishing a website The objective of these instructions is to aid in the production of a personal website published on

More information

Urban Planet Website Content Management System. Step-by-Step Instructions

Urban Planet Website Content Management System. Step-by-Step Instructions Urban Planet Website Content Management System Step-by-Step Instructions For steps with pictures, videos, version bugs, integration ideas, and more see http://uphelp.spps.org Department of Educational

More information

Caldes CM12: Content Management Software Introduction v1.9

Caldes CM12: Content Management Software Introduction v1.9 Caldes CM12: Content Management Software Introduction v1.9 Enterprise Version: If you are using Express, please contact us. Background Information This manual assumes that you have some basic knowledge

More information

HTML & XHTML Tag Quick Reference

HTML & XHTML Tag Quick Reference HTML & XHTML Tag Quick Reference Interactive Media Center This reference notes some of the most commonly used HTML and XHTML tags. It is not, nor is it intended to be, a comprehensive list of available

More information

ICE: HTML, CSS, and Validation

ICE: HTML, CSS, and Validation ICE: HTML, CSS, and Validation Formatting a Recipe NAME: Overview Today you will be given an existing HTML page that already has significant content, in this case, a recipe. Your tasks are to: mark it

More information

A Complete Guide to HTML Form Output for SAS/IntrNet Developers Don Boudreaux, SAS Institute Inc., Austin, TX

A Complete Guide to HTML Form Output for SAS/IntrNet Developers Don Boudreaux, SAS Institute Inc., Austin, TX A Complete Guide to HTML Form Output for SAS/IntrNet Developers Don Boudreaux, SAS Institute Inc., Austin, TX ABSTRACT A number of existing conference papers, course notes sections, and references can

More information

Chapter 1 Programming Languages for Web Applications

Chapter 1 Programming Languages for Web Applications Chapter 1 Programming Languages for Web Applications Introduction Web-related programming tasks include HTML page authoring, CGI programming, generating and parsing HTML/XHTML and XML (extensible Markup

More information

Introduction... 3. Designing your Common Template... 4. Designing your Shop Top Page... 6. Product Page Design... 8. Featured Products...

Introduction... 3. Designing your Common Template... 4. Designing your Shop Top Page... 6. Product Page Design... 8. Featured Products... Introduction... 3 Designing your Common Template... 4 Common Template Dimensions... 5 Designing your Shop Top Page... 6 Shop Top Page Dimensions... 7 Product Page Design... 8 Editing the Product Page layout...

More information

HTML Basics(w3schools.com, 2013)

HTML Basics(w3schools.com, 2013) HTML Basics(w3schools.com, 2013) What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language. HTML is a markup language A markup language is a set of markup tags.

More information

About webpage creation

About webpage creation About webpage creation Introduction HTML stands for HyperText Markup Language. It is the predominant markup language for Web=ages. > markup language is a modern system for annota?ng a text in a way that

More information

Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com

Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created

More information

An Attribute is a special word used inside tag to specify additional information to tag such as color, alignment etc.

An Attribute is a special word used inside tag to specify additional information to tag such as color, alignment etc. CHAPTER 10 HTML-I BASIC HTML ELEMENTS HTML (Hyper Text Markup Language) is a document-layout and hyperlink-specification language i.e., a language used to design the layout of a document and to specify

More information

WHITEPAPER. Skinning Guide. Let s chat. 800.9.Velaro www.velaro.com info@velaro.com. 2012 by Velaro

WHITEPAPER. Skinning Guide. Let s chat. 800.9.Velaro www.velaro.com info@velaro.com. 2012 by Velaro WHITEPAPER Skinning Guide Let s chat. 2012 by Velaro 800.9.Velaro www.velaro.com info@velaro.com INTRODUCTION Throughout the course of a chat conversation, there are a number of different web pages that

More information

ITNP43: HTML Lecture 4

ITNP43: HTML Lecture 4 ITNP43: HTML Lecture 4 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and content of a document Style

More information

How to Create an HTML Page

How to Create an HTML Page This is a step-by-step guide for creating a sample webpage. Once you have the page set up, you can add and customize your content using the various tags. To work on your webpage, you will need to access

More information

HTML. A computer network is a collection of computers linked through cables or wireless means.

HTML. A computer network is a collection of computers linked through cables or wireless means. What is a computer network? HTML A computer network is a collection of computers linked through cables or wireless means. What is Internet? Internet is a network of computers of different sizes and configurations

More information

FusionPro Links Microsite Creation Guide

FusionPro Links Microsite Creation Guide FusionPro Links Microsite Creation Guide Product FusionPro Links Document Date January 15, 2010 Customer Support For more information or support, please email support@printable.com, or contact your Client

More information

FETAC Certificate in Multimedia Production. IBaT College Swords. FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3

FETAC Certificate in Multimedia Production. IBaT College Swords. FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3 IBaT College Swords FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3 Lecturer: Cara Martin M.Sc. Lecturer contact details: cmartin@ibat.ie IBaT 2009 Page 1 Cascading Style Sheets

More information

Using the Linux Samba Client with iseries NetServer

Using the Linux Samba Client with iseries NetServer Session: 42006 47TC 7 Using the Linux Samba Client with NetServer Vern Yetzer yetzer@us.ibm.com April 2002 8 Copyright Corporation, 2002. All Rights Reserved. This publication may refer to products that

More information

Advanced Drupal Features and Techniques

Advanced Drupal Features and Techniques Advanced Drupal Features and Techniques Mount Holyoke College Office of Communications and Marketing 04/2/15 This MHC Drupal Manual contains proprietary information. It is the express property of Mount

More information

Xtreeme Search Engine Studio Help. 2007 Xtreeme

Xtreeme Search Engine Studio Help. 2007 Xtreeme Xtreeme Search Engine Studio Help 2007 Xtreeme I Search Engine Studio Help Table of Contents Part I Introduction 2 Part II Requirements 4 Part III Features 7 Part IV Quick Start Tutorials 9 1 Steps to

More information

CGI.pm Tutorial. Table of content. What is CGI? First Program

CGI.pm Tutorial. Table of content. What is CGI? First Program CGI.pm Tutorial This is a tutorial on CGI.pm which include scripts to let you see the effects. CGI.pm is a Perl module to facilitate the writing of CGI scripts. Click here to see the details. This tutorial

More information

Internet Technologies_1. Doc. Ing. František Huňka, CSc.

Internet Technologies_1. Doc. Ing. František Huňka, CSc. 1 Internet Technologies_1 Doc. Ing. František Huňka, CSc. Outline of the Course 2 Internet and www history. Markup languages. Software tools. HTTP protocol. Basic architecture of the web systems. XHTML

More information

Positioning the Roadmap for POWER5 iseries and pseries

Positioning the Roadmap for POWER5 iseries and pseries Positioning the Roadmap for POWER5 iseries and pseries Guy Paradise Larry Amy Ian Jarman Agenda The Case For Common Platforms Diverse Markets: the pseries and iseries Common Platform: the Roadmap for pseries

More information

Accessibility in e-learning. Accessible Content Authoring Practices

Accessibility in e-learning. Accessible Content Authoring Practices Accessibility in e-learning Accessible Content Authoring Practices JUNE 2014 Contents Introduction... 3 Visual Content... 3 Images and Alt... 3 Image Maps and Alt... 4 Meaningless Images and Alt... 4 Images

More information

Advanced Web Design. Zac Van Note. www.design-link.org

Advanced Web Design. Zac Van Note. www.design-link.org Advanced Web Design Zac Van Note www.design-link.org COURSE ID: CP 341F90033T COURSE TITLE: Advanced Web Design COURSE DESCRIPTION: 2/21/04 Sat 9:00:00 AM - 4:00:00 PM 1 day Recommended Text: HTML for

More information

Client-side Web Engineering From HTML to AJAX

Client-side Web Engineering From HTML to AJAX Client-side Web Engineering From HTML to AJAX SWE 642, Spring 2008 Nick Duan 1 What is Client-side Engineering? The concepts, tools and techniques for creating standard web browser and browser extensions

More information

Chapter 2 HTML Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D

Chapter 2 HTML Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D Chapter 2 HTML Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 First Web Page an opening tag... page info goes here a closing tag Head & Body Sections Head Section

More information

JISIS and Web Technologies

JISIS and Web Technologies 27 November 2012 Status: Draft Author: Jean-Claude Dauphin JISIS and Web Technologies I. Introduction This document does aspire to explain how J-ISIS is related to Web technologies and how to use J-ISIS

More information

Designing and Implementing Forms 34

Designing and Implementing Forms 34 C H A P T E R 34 Designing and Implementing Forms 34 You can add forms to your site to collect information from site visitors; for example, to survey potential customers, conduct credit-card transactions,

More information

PDG Software. Site Design Guide

PDG Software. Site Design Guide PDG Software Site Design Guide PDG Software, Inc. 1751 Montreal Circle, Suite B Tucker, Georgia 30084-6802 Copyright 1998-2007 PDG Software, Inc.; All rights reserved. PDG Software, Inc. ("PDG Software")

More information

Designing HTML Emails for Use in the Advanced Editor

Designing HTML Emails for Use in the Advanced Editor Designing HTML Emails for Use in the Advanced Editor For years, we at Swiftpage have heard a recurring request from our customers: wouldn t it be great if you could create an HTML document, import it into

More information

Creating an HTML Document Using Macromedia Dreamweaver

Creating an HTML Document Using Macromedia Dreamweaver INFORMATION SYSTEMS SERVICES Creating an HTML Document Using Macromedia Dreamweaver This tutorial workbook contains a series of exercises that give an introduction to creating HTML documents for the World

More information

INTRODUCTION WHY WEB APPLICATIONS?

INTRODUCTION WHY WEB APPLICATIONS? What to Expect When You Break into Web Development Bringing your career into the 21 st Century Chuck Kincaid, Venturi Technology Partners, Kalamazoo, MI ABSTRACT Are you a SAS programmer who has wanted

More information

IT3503 Web Development Techniques (Optional)

IT3503 Web Development Techniques (Optional) INTRODUCTION Web Development Techniques (Optional) This is one of the three optional courses designed for Semester 3 of the Bachelor of Information Technology Degree program. This course on web development

More information

An Introduction to Dynamic Response Formatting by Christopher Boudreau

An Introduction to Dynamic Response Formatting by Christopher Boudreau An Introduction to Dynamic Response Formatting by Christopher Boudreau A Senior Project counted as a semester s course toward a BA degree in Computer Science at Boston College January - April 1997 INTRODUCTION

More information

Web Development I & II*

Web Development I & II* Web Development I & II* Career Cluster Information Technology Course Code 10161 Prerequisite(s) Computer Applications Introduction to Information Technology (recommended) Computer Information Technology

More information

CS z/os Application Enhancements: Introduction to Advanced Encryption Standards (AES)

CS z/os Application Enhancements: Introduction to Advanced Encryption Standards (AES) Software Group Enterprise Networking and Transformation Solutions (ENTS) CS z/os Application Enhancements: Introduction to Advanced Encryption Standards (AES) 1 A little background information on cipher

More information

Asset Management. By: Brian Johnson

Asset Management. By: Brian Johnson Asset Management By: Brian Johnson A Design Freeze Submitted to the Faculty of the Information Engineering Technology Program in Partial Fulfillment of the Requirements for the Degree of Bachelor of Science

More information

Title. Click to edit Master text styles Second level Third level

Title. Click to edit Master text styles Second level Third level Title Click to edit Master text styles Second level Third level IBM s Vision For The New Enterprise Data Center Subram Natarajan Senior Consultant, STG Asia Pacific subram.natarajan@in.ibm.com Multiple

More information

Cisco Adaptive Security Appliance (ASA) Web VPN Portal Customization: Solution Brief

Cisco Adaptive Security Appliance (ASA) Web VPN Portal Customization: Solution Brief Guide Cisco Adaptive Security Appliance (ASA) Web VPN Portal Customization: Solution Brief Author: Ashur Kanoon August 2012 For further information, questions and comments please contact ccbu-pricing@cisco.com

More information

Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates

Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,

More information

ecommercesoftwareone Advance User s Guide -www.ecommercesoftwareone.com

ecommercesoftwareone Advance User s Guide -www.ecommercesoftwareone.com Advance User s Guide -www.ecommercesoftwareone.com Contents Background 3 Method 4 Step 1 - Select Advance site layout 4 Step 2 - Identify Home page code of top/left and bottom/right sections 6 Step 3 -

More information

HTML Forms. Pat Morin COMP 2405

HTML Forms. Pat Morin COMP 2405 HTML Forms Pat Morin COMP 2405 HTML Forms An HTML form is a section of a document containing normal content plus some controls Checkboxes, radio buttons, menus, text fields, etc Every form in a document

More information

Practical Web Services for RPG IBM Integrated Web services for i

Practical Web Services for RPG IBM Integrated Web services for i Agenda Key: Session Number: 32CG 540191 Practical Web Services for RPG IBM Integrated Web services for i Dan Hiebert IBM dhiebert@us.ibm.com 8 Copyright IBM Corporation, 2009. All Rights Reserved. This

More information

The Consolidation Process

The Consolidation Process The Consolidation Process an overview Washington System Center IBM US Gaithersburg SIG User Group April 2009 Trademarks The following are trademarks of the International Business Machines Corporation in

More information