1. Hypertext Markup Language HTML Hypertext is vaguely defined as interconnecting pieces of information in a non-sequential but usually relational, manner for efficient browsing of a body of information.

2. Title Headings Body Formatting (bold, italics. underline, etc.) Paragraphs Lists (numbered, bulleted etc.) Links to other locations within the document or to other documents. Images, forms, charts and other objects. What are the different parts of a document?

3. Elements which describe the instruction. Angle brackets ( < > ) surrounding the elements. The combination of element and the angle bracket is often referred to as a ‘TAG’. …. ….. HTML elements can be modified by attributes that provide more information for the TAG or act as parameters. HTML file contains instructions that describe, how text, images and multimedia are displayed by Web Browsers. These instructions consist of: HTML

4. Structure of a Typical HTML Page This is the Title. The body of the page goes here.

5. HTML Elements can be grouped as: Block Elements In-line Elements Anchor Elements or Link Elements Image Elements List Elements Table Elements Form Elements

6. Block Elements Block Elements work with blocks of text usually enclosed within a pair of Tags. Defines the text and tags within the block as conforming to HTML specifications. Provides extra information for the server e.g. for providing keywords for cataloging the document. <META NAME=”Author” CONTENTS=”Gordon”> The Tag is placed inside the structure. Encloses special information about the document. This information in turn is enclosed in its own Tags, e. g. Encloses the title of the document which is shown in the caption for the browser window.

7. Block Elements Indicates the document uses a specified script. Encloses all the text and tags meant to be displayed in the document. Tag accepts a number of attributes: Indicates a red background color. 000000 black 0c0c0c grey ffffff white. A wall paper can be specified as:

8. Block Elements Foreground color Green color for the text. Link Colors Colors can be specified for three kinds of links New linkLINK= #nnnnnn Visited LinkVLINK=#nnnnnn Active Link ALINK=#nnnnnn ( where nnnnnn is the color specification in Hexadecimal.) Specifies pink color for the links. Specifies yellow color for the visited links.

9. Block Elements Centers the text and images within the visible window margins of the browser. Line break element. Acts like a hard return. (Does not have an end tag) Accepts attributes SIZE and COLOR Text goes here. Inserts a margin-to-margin line across the page. New paragraph value may be LEFT, RIGHT or CENTER. Preformatted Text. Browser will not change the format.

10. Block Elements Headings This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6

11. Block Elements is used to execute a Java Applet in the document. It must have a CODE attribute. Accepts a number of other attributes also. <APPLET CODE=Map WIDTH=100 HEIGHT=5 CODEBASE=”http://www.javasite.com/applets2use”>www.javasite.com/applets2use” Parameters can be passed to the Java code by using :

12. In-Line Elements In-Line Elements are the tags that modify the appearance of the text, typically the body text. Underline the enclosed text. Bold the enclosed text Use italics for the enclosed text. Strong type as per setting of the browser. Emphasis as per setting of the browser A line through the text A larger point size compared to the current font size. A smaller point size. Subscript Superscript A citation of the reference document Blink on and off.

13. Anchor Elements/Link Elements The hypertext function in HTML pages is performed by the anchor element. It comes in two general formats:... optional text here...> Creates a target anchor to which a link can point... optional text here... or in case of a link to an anchor.. optional text here.... Examples: Table of Contents is an anchor for Table of Contents. Table of Contents. is a link to the Table of contents. Link to another document on the Web. Visit the ugliest page on thehttp://www.anywhere.com/ugly.html Web to see some bad examples of web page design. Link to specified bookmark in another document on the web. To see Table ofhttp://www.anywhere.com/ugly.html/#contents Contents for the ugliest pages on the web. Remember: Images can be used in place of and in addition to the text between and.

14. Image Element Where URL is a properly constructed URL for the image file. Example: http://www.anywhere.com/myfiles/imagefile.gif Image file is located at another location on the web. If the image file is located in the same directory as the HTML document, Alternate Text <IMG SRC=http://www.anywhere.com/myfiles/imagefile.gifhttp://www.anywhere.com/myfiles/imagefile.gif ALT=”Image file here”> Sizing the image <IMG SRC=http://www.anywhere.com/myfiles/imagefile.gif ALT=”Image filehttp://www.anywhere.com/myfiles/imagefile.gif here” HEIGHT=”100” WIDTH=”100” BORDER= 5 >

15. List Elements There are three general forms of Lists Ordered or Numbered Lists Tags define the start and the end of an ordered list. This is the first item of the list This is the second item of the list This is the third item of the list Each list item is enclosed in a pair of tags. Type attribute can be used for different types of numbering (Browser dependent) TYPE=”1”1, 2, 3.... TYPE=”A”A-Z TYPE=”a”a-z TYPE=”I”I, II,.... TYPE=”i”i, ii,..... Multilevel lists can be created by additional tags.

16. List Elements Unordered or Bulleted Lists. Tags define the start and the end of a bulleted list. This is the first item of the list This is the second item of the list This is the third item of the list Each list item is enclosed in a pair of tags Type attribute can be used to specify the type of bullet to be used (Browser dependent) TYPE=”disc”Round hollow discs. TYPE=”circle”Bullets appear as circles. TYPE=”square” Bullets appear as squares. It is possible to combine an ordered and an unordered list.

17. List Elements Definition Lists. Tags define the start and end of “glossary type” of lists, typically used to list terms and their definitions. Term1 Definition term1 Term2 Definition term2 Term3 Definition term3 Indenting above, is for clarity only, however in the actual list definition is indented from the term. This allows the use of tag on its own to create indentation.

18. List Elements Use of tag for indenting text: This is indented text. If more indentation is needed in an ordered or unordered list: This is an indented list item More space can be provided between list items by: Tags after tag. Definition List allows the creation of a custom list using small bullet shaped images: This is a bullet item.

19. Table Elements Tags define a table. Inside these tags all of the subordinate table tags appear. Define a row in a table. mark the text or image in a cell. Used as many times as the number of columns in a row. Specify a caption for the table. Specify a heading for a column. Attribute BORDER with a TABLE tag creates border around cells.

20. Table Elements Example: This is the caption Column1 Column2 Row1 Column1 Row1 Column2 Row2 Column1 Row2 Column2

21. Form Elements Forms allow web documents to interact with the user. They include text fields, text area, push buttons, radio buttons, check boxes and list boxes. Processing of forms is possible both on server as well as client. How forms are created in an HTML document? How are they processed on client side? How are they processed on server side? A pair of define the form. Different controls are placed inside the form. Additional tags and text go here

22. Form Elements Attributes of tag: Name: The name of the form. Method: How is the form content submitted to the server? Action: URL where the form is sent. Target: Window where info. received from server is displayed. Example: <Form Name=“myform” Action=“http://mydomain.com/cgibin/form/” Method=Get> Other controls ……

23. Form Elements The element defines different input controls in a form. The type of control is determined by value of attribute Type: Text: Creates a text field. Password: Creates a field for password input. Hidden: Creates a field that can contain data but is invisible. Each of the above types, may optionally have further attributes: Name: Name of the control for reference in a script. Value: Initial text. Size: Width of the text box. Maxlength: Maximum allowable characters.

24. Form Elements More Types: Button: Creates a push button. Name: Name of button control. Value: Text that appears on the button. Submit: Creates a “Submit” button to submit form to server. Reset: Creates a “Reset” button to reset values of controls. Checkbox and Radio: Create buttons for selecting or deselecting an option and can have further attributes: Name: Name of control. Value: Unique value that is submitted with form. Checked: Initial checked state.

25. Form Elements More Types: Image: Creates an “Image button” used for form submission. Name: Name of control SRC: Source of the image. is another tag that can be placed inside to create a drop-down list having a number of options. It can provide single or multiple choices. This tag can have further attributes: Name: Name of control. Size: Number of rows to display. Multiple: Multiple choice allowed. Each option in the list starts with an tag that has the description of the option and can have attributes: Selected: Default selection Value: Value of item when the form is submitted.

26. Form Elements This is another tag that can be placed inside tag and creates a multiple line text box. Has three attributes: Name: Name of the control. Rows: Height in lines. Cols: Width in characters. Example: This is default text.

27. Common Gateway Interface (CGI) How Web Server Works? Listening port - a daemon. Text commands from user agents. Example: GET index.html If index.html needs to display other files (e.g. images), the browser generates additional requests for each additional file and on receipt, combines them and displays. Example: Get /index.html Get /image1.gif Get /image2.gif

28. Web Server and CGI Browser sends requests that are implemented by server. HTTP protocol used by the web is mostly one way street. Bulk of data travels from server to the browser (text, graphics, sounds, applets, movies etc.). This is called Response path. Only a small amount of data flows in the other direction, called the Request path. Client Server

29. Where CGI fits in? Request path contains “Get” requests but some additional data also flows in this path: details about browser, user domain, and depending on method, data relating to fields in a form. When a server gets a request to run a CGI program, it collects the necessary data sent from the client, starts the CGI program and passes on the relevant data to it. There are two ways the data travels from the client to the server and then to the CGI program. GET method and POST method.

30. Understanding the Get Method In GET method, the data from the fields of a form are sent to the server as part of the URL. E.g. http://www.mydomain.com/cgi-bin/pgm1.cgi?subject=xyz The text after ? Is the data meant for the CGI program (pgm1.cgi). The server packs the data in an environment variable called QUERY_STRING. Additional data about browser and its defaults are also packed in other environment variables that are made available to the CGI program. It is the job of the CGI program to separate the relevant data from environment variables and take required action. One of the ways to do that is to use Perl script to pick apart - “parse” individual pieces of information in QUERY_STRING. This information is in name = value pairs, each pair separated by &. +is used for space and some other hexadecimal characters for control sequences.

31. Understanding the Post Method In this method no data is sent as part of the URL. All data is sent to the server via the requester path. Information from fields of a from is sent as name, value pairs. The server collects data in environment variables and the makes it available to the CGI program in the form of STDIN or standard input. It is the job of this program to parse the information contained in the standard input and use it as required. Some Environment variables: HTTP_ACCEPT: image/gif, image/jpeg (types of files that the browser can accept) HTTP_USER_AGENT: contains info about browser. QUERY_STRING: name=George&birthmonth=May REMOTE_ADDR, REQUEST_METHOD, SCRIPT_NAME, SERVER_PORT, etc.