Chapter 12:- HTML

The Web depends on Web page authors and vendors sharing the same conventions for HTML. This has motivated joint work on specifications for HTML. HTML was originally developed by Tim Berners-Lee while at CERN, and popularized by the Mosaic browser developed at NCSA. HTML 2.0 was developed under the aegis of the Internet Engineering Task Force (IETF) to codify common practice in late 1994. HTML+ (1993) and HTML 3.0 (1995) proposed much richer versions of HTML. Despite never having received consensus in standards discussions, these drafts led to the adoption of a range of new features. The efforts of the World Wide Web Consortium’s HTML Working Group to codify common practice in 1996 resulted in HTML 3.2 (January 1997). Most people agree that HTML documents should work well across different browsers and platforms. Achieving interoperability lowers costs to content providers since they must develop only one version of a document. If the effort to standardize is not made, there is much greater risk that the Web will devolve into a proprietary world of incompatible formats, ultimately reducing the Web’s commercial potential for all participants.

Each version of HTML has attempted to reflect greater consensus among industry players. This attempt ensures that the investment made by content providers will not be wasted and that their documents will not become unreadable in a short period of time. HTML has been developed with the vision that all types of devices should be able to use information on the Web: PCs with graphic displays of varying resolution and color depths, cellular telephones, hand held devices, devices for speech for output and input, computers with high or low bandwidth, and so on.

ACCESSIVILITY

As the Web community grows and its members diversify in their abilities and skills, it is crucial that the underlying technologies be appropriate to their specific needs. HTML has been designed to make Web pages more accessible to those with physical limitations. HTML 4 developments inspired by concerns for accessibility include:

Better distinction between document structure and presentation, thus encouraging the use of style sheets instead of HTML presentation elements and attributes. Better forms, including the addition of access keys, the ability to group form controls semantically, the ability to group SELECT options semantically, and active labels. The ability to markup a text description of an included project. Anew client-side image map mechanism that allows authors to integrate image and text links.

The requirement that alternate text accompany images and image maps. Support for the title and language attributes on all elements. Support for the abbreviations and acronyms. A wider range of target media, such as True type Font, Braille, for use with style sheets. Better tables, including captions, column groups, and mechanisms to facilitate non-visual rendering. Long descriptions of tables, images, frames, etc. Authors who design pages with accessible issues in mind will enable the accessibility community to use the pages. In addition, the accessible pages will benefit from well-designed HTML documents that distinguish structure and the presentation of information will adapt more easily to new technologies.

HTML is a very simple SGML-based markup language that is complex enough to support basic online formatting and presentation of hypermedia documents. HTML documents use tags to indicate formatting or structural information. A tag is a left angle bracket (<) followed by a directive and zero or more parameters followed by a right angle bracket (>).

DOCUMENT LAYOUT

An HTML 4 document is composed of three parts:

1. A line containing HTML version information

2. A declarative header section that is delimited by the HEAD element

3. A body section which contains the document’s actual content. The body may be implemented by the BODY element or the FRAMESET element.

White space that includes spaces, new lines, tabs, and comments may appear before or after each section. The head and body sections should be delimited by the HTML element.

Here’s an example of a simple HTML document:

<HTML>

<HEAD>

<TITLE>MY FIRST HTML DOCUMENT </TITLE>

</HEAD>

<BODY>

<P>HELLO WORLD! </P>

</BODY>

</HTML>

Output : on screen

Hello world

TITLE

Every HTML document should have a title that preferably consists of about half a dozen words that declare the document’s purpose. Titles are not displayed as part of the document text, but are rather displayed separately from the document by most browsers at the top of the window. The title of the HTML document is also used for identification in certain other contexts. The title generally goes on the first line of the document.

For example:

<title>This is my document. </TITLE>

The directive for the title tag is title which is self explanatory. There are both starting and ending title tags. The ending tag is similar to the starting tag except for a slash (/) that precedes the directive, for example:</TITLE>. HTML is not case sensitive. This means that both <title> and <TITLE> are the same.

HEADER

A heading element briefly describes the section that it introduces. Heading information may be user agents, for example, to construct a table of contents for a document automatically. There are six levels of headings in HTML with H 1 to indicate the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones. Authors should not choose a heading level based on the font size commonly used by visual browsers. The heading level should be chosen based on the importance of the heading and the placement in the document.

Headers are displayed within the document, generally using larger or bolder fonts than normal document text. H1 through H3 are the commonly used headers.

Here is an example level 1 header:

Here is and example level 1 header:

<H1>This is a level 1 header. </H1>

Here is an example level 2 header:

<h2>This is a level 2 header. </h2>

Output : on the screen

This is a level 1 header.

This is a level 2 header.

BLOCK ORIENTED AND INLINE ELEMENTS

HTML elements that appear within the BODY section are of two types: “block-level” and “inline.” Inline elements are also known as “text level” elements. Block-level elements typically contain inline elements and other block-level elements. Inline elements may contain only data and other inline elements. Compared to inline elements, block-level elements, create “larger” structures and are formatted differently than inline elements. When displayed in a HTML page, the block-level elements begin on new lines.

LISTS

Formatted lists can also be created using HTML tags. The three main types of list that can be used are ordered lists and unordered lists and definition list. An ordered is numbered list, whereas an unordered list is bulleted:

(a) OL –Ordered list

(b) UL – Unordered list

output : on the screen

Example for Ordered list:

Ordered list

Example for Unordered list:

Unordered list

Example for Definition list:

Definition List

ORDERED LISTS

<OL> – Designates the start of an ordered list

<LI> – Designates and item in the list.

</OL> – Designates the end of an ordered list.

The ordered list starts with a value 1 if not specified.

Example

<ol>

<li>This is how it looks

<li>This is how it works

<li>This is how we all learn

</ol>

Output : on the screen

1. This is how it looks

2. This is how it works

3. This is how we all learn

UNORDERED LISTS

<UL> – Designates the start of an unordered list

<LI> – Designates an item in the list.

</UL> – Designates the end of an ordered list.

Unordered lists provide bullets for each of the items by default.

Example

<ul>

<li>First Item

<li>Second Item

<li>Third Item

</ul>

Output : on the screen

First Item
Second Item

Third Item

DEFINITION LISTS

<DL> – Designates the start of a definition list.

<DT> – Designates a definition term.

<DD> – Designates a definition to go with the definition term.

</DL>- Designates the end of a definition list.

This works only on some browsers

Example

<dl><lh>Team

<dt><b>Project Manager</b>

<dd>Rahul Kumar

<dt><B>Team Leader</b>

<dd>Shashank Gupta

<dt><B>Programmer</b>

<dd>Anil Sharma

<dt><B>Programmer</b>

<dd>Anil Kumar

</dl>

Output : on the screen

Team

Project Manager

Rahul Kumar

Team Leader

Shashank Gupta

Programmer

Anil Sharma

Programmer

Anil Kumar

BLOCK-LEVEL ELEMENTS

ADDRESS

The ADDRESS element provides contact information for a document or part to a document. The information provided by the ADDRESS element may include the names of the document’s maintainers, links to the maintainers’ Web pages, e-mail addresses for feedback, postal addresses, phone numbers, and so on.

Example:

<ADDRESS>Maintained by Vijay

vijay@abcd.com </A></ADDRESS>

Output : on the screen

Maintained by Vijay

BLOCKQUOTE

The BLOCKQUOTE element defines a block quotation. Unlike inline quotations, block quotations may contain block-level elements such as P and TABLE.

Example:

<p>This is a test document for the HTML page you can key in the same content and check the page in the browser</P><BLOCKQUOTE>and </BLOCKQUOTE>

<P>You can continue to work with HTML because it is interesting.</P>

Output : on the screen

This is a test document for the HTML page you can key in the same content and check the page in the browser

and

You can continue to work with HTML because it is interesting.

DIV – DIVISION

The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content.

Example:

<DIV ALIGN=center>Hello! This has to center the text in the table</DIV>

SPAN

The SPAN element is a generic inline container. SPAN carries no structural meaning itself, but it can be used to provide extra structure through its LANG, DIR, CLASS, and ID attributes.

SPAN should only be used where no other HTML inline element provides a suitable meaning. If a presentation such as bold or italic text would be suitable on browsers, programmers may prefer to use an appropriate font style element.

Example:

<P><SPAN>India’s Independence</SPAN> In the year 1947</P>

Output : on the screen

Example for DIV – Division:

Hello! This has to center the text in the table

Example for DIV – Division:

India’s Independence In the year 1947

CENTER

The CENTER element defines a block whose contents are centered horizontally on visual browsers. <CENTER>is a shorter version for <DIV ALIGN=center>, although CENTER is slightly better supported among browsers. The CENTER element is useful for centering tables.

Example:

<TABLE>

<TD>Office</TD>

</TR>

<TD>Vijay</TD>

<TD>Bangalore</TD>

</TR>

</TABLE>

</CENTER>

Output on the screen

Name	Office	City
Vijay	PS	Bangalore

INLINE ELEMENTS

The H1 element defines a level-one heading. A document generally should have exactly one H1 element to mark the most important heading. Visual browsers typically render H1 in a large, bold font.

Example:

<H1>This Is The Title Of The Document</H1>

HR – Horizontal Rule

The HR element defines a horizontal rule for visual browsers. While this element is inherently presentational, it can be used structurally as a section divider.

Example:

<HR>

<P> Hi this is a test document to test the use of the Horizontal Rule</P>

</HR>

Output on the screen

This is a level 1 header.

Hi this is a test document to test the use of the Horizontal Rule

P – PARAGRAPH

This P element defines a paragraph. The closing tag for P is optional, but its use prevents common browser bugs. HTML does not specify a presentation for the P element. Browsers commonly use block paragraphs with no first-line indent and separated by a blank line, but some browsers allow the user to specify a different presentation.

Example:

<P> Hi this is a test document to test the use of the Paragraph tag </P>

Output on the screen

Hi this is a test document to test the use of the Paragraph tag

TABLE

The TABLE element defines a table for data that can be arranged in rows and columns. TABLE is commonly used as a layout device, but programmers should avoid this practices as much as possible. Tables can cause problems are often accentuated when tables are used solely for layout purposes. Browsers will not display anything until the complete table has been downloaded, which can have very noticeable effects when an entire document is laid out within a TABLE.

Example:

<TABLE>

<TR>

<TH>First Name:</TH>

<TH>Vijay</TH>

</TR>

<TR>

</TR>

</TABLE>

The TABLE element also takes a number of optional attributes to provide presentational hints in browsers.

Output on the screen

First Name :	Vijay
Last Name	R

The BORDER attribute specifies the width of the border in pixels around a table. The FRAME attribute, specifies which sides of the table’s outer border are visible. This attribute is poorly supported by browsers. The RULES attribute, also poorly supported by browsers, specifies the borders between table cells. Possible values are:

NONE for no inner borders

GROUPS for borders between row groups and column groups only

ROWS for borders between columns only

COLS for borders between columns only

ALL for borders between all cells.

NONE is the default value if BORDER = 0 is used or if no BORDER attribute is given. ALL is the default value for any other use of BORDER.

The CELLSPACING attribute defines the amount of space between table cells, and the CELLPADDING attribute defines the amount of space within table cells. CELLPADDING refers to the space between the border and the cell contents. The value for these attributes may bee given as a number of pixels or as a percentage. However, most browsers do not support percentages and treat CELLPADDING = “20%” as CELLPADDING = “20.” A percentage value is relative to the vertical space available for vertical padding or spacing, and the amount is split evenly between the top and bottom. Horizontal padding and spacing behave similarly. The padding or spacing is always applied to all four sides.

Note: The WIDTH attribute specifies the width of the table as a number of pixels or as a percentage of the available horizontal space. Widths in pixels should be avoided, especially width above 500 pixels, since this causes unnecessary horizontal scrolling for some users.

A – ANCHOR

The A element denotes an anchor which is a hypertext link or the destination of a link, The HREF attribute specifies a hypertext link to another resource, such as an HTML document or a JPEG image.

Example:

<AHREF=”first.html”>My first page</A>

The value of the HREF attribute is the URL of the link. The TYPE attribute can be used to specify the Internet media type of the link, allowing browsers to avoid fetching a resource that they cannot handle.

ABBR = ABBREVIATION

The ABBR element is used to markup abbreviations. The TITLE attribute in conjunction with ABBR gives the expanded form of the abbreviation, allowing visual browsers to provide the expanded form as a “tool tip”. If the short form is a pronounceable word, the ACRONYM element should be used instead of ABBR

Example:

Example for A – Anchor:

My first page

Example for ABBR – Abbreviation:

L.A.

ACRONYM

The ACRONYM element is used to markup acronyms. The TITLE attribute is useful in conjunction with ACRONYM to give the expanded form of the acronym, allowing visual browsers to provide the long form as a “tool tip”.

Example;

UNIFORM RESOURCE LOCATORS (URL’S)

These specify the location of a resource for a hypertext link:

http:	Internet server
gopher:	hostname or IP
ftp:	Username: Password@hostname
telnet:	hostname or IP
mailto:	Email address.
news:	Newsgroup name.
file	address or file name

Output : on the screen

Example for ACRONYM

CBI

B – BOLD

The B element suggests that text be rendered as bold text. In most cases, use of a phrase element such as STRONG is more appropriate since such elements express the meaning of the text more clearly.

Example:

<B>Show Clearly</B>

BIG

The BIG element suggests that text be rendered in a larger font. In most cases, use of a structural element such as STRONG or a heading (e.g., H3) is more appropriate since these elements express the meaning of the text more clearly.

BR – BREAK

The BR element forces a break in the current line of text. It is often misused to break lines of text in a paragraph or table cell to present the text nicely. This usually results in an awkward presentation when viewed with a font size other than used by the programmer.

Example:

<br>

Output on the screen

Example for B – Bold

Show Clearly

Example for BIG

See Clearly

Example for BR – Break

firstline

secondline

thirdline

FONT

The FONT element, allows authors to suggest basic font changes. Use of the FONT element brings numerous usability and accessibility problems. A user has a sophisticated workstation with a large monitor has carefully configured his browser to use black text on a yellow background, and has specified that his color scheme should override document colors. Along comes a web page with white text on a black background. Our user is overriding body colors, so he still sees black on yellow. But this page also contains a sentence here, a phrase there, emphasized with <FONT COLOR=”yellow”>–this worked fine on the author’s black background but is completely invisible against the user’s yellow background. He may wonder what all those empty spaces mean, but unless he views the HTML source, he will never know that he is missing an important part of the author’s message. While Netscape allows the user to override text and body colors, it does not allow the user to override font colors.

The SIZE attribute suggests relative changes in font size, for example: <FONT SIZE=”+1”> or <FONT SIZE=”-1”>. These tags increment or decrement the font size relative to the size specified in the BASEFONT element, or relative to a base size of 3 if no BASEFONT element is used.

The COLOR attribute suggests a text color. While most browsers allow users to override author color changes, the widely used Netscape Navigator 2.x, 3.x, and 4.x do not override colors specified with FONT. This makes the COLOR attribute very difficult to handle from an accessibility point of view.

I – ITALIC

The I element suggests that text be rendered as italic text.

Example:

<I> We prefer to view this in italics</I>

SUB

The SUB element is used for subscripts. Since SUB is inherently presentational, it should not be relied upon to express a given meaning. However, it can be useful for chemical formulas and mathematical indices, where the subscript presentation is helpful but not required.

Example:

Chemical formulas include H<SUB>2</sub>O (water)

SUP

The SUP element is used for superscripts. Since SUP is inherently presentational, it should not be relied upon to express a given meaning. However, it can be useful for mathematical exponents where the context implies the meaning of the exponent, as well as other cases where superscript presentation is helpful but not required.

Example:

2<SUP>3</SUP>equals 8

Output on the screen

Example for I-Italic:

We prefer to view this in italics

Example for SUB:

Chemical formulas include H2O (water)

Example for SUP:

23 equals

U – UNDERLINE

The U element, suggests that text be rendered as underlined text.

Example

<H3><U>My heading</U><>/H3?

BLOCK LEVEL AND INLINE ELEMENTS

The following elements may be use as either block-level elements or inline elements. If used as inline elements (e.g., within another inline element or a P), these elements should not contain any block-level elements.

APPKET – Java applet

BUTTON – Button

OBJECT – Object

SCRIPT – Client-side script

Output : on the screen

Example for I – Italic:

My heading

APPLET

The APPLET elements is used to embed Java applets. APPLET is currently a more reliable method of embedding Java applets as compared to the OBJECT method. APPLET’s CODE attribute specifies the name of the contains the compiled Applet subclass. The value is relative to the URL specified in the CODEBASE attribute, or to the HTML document’s base URI if the CODEBASE attribute is not given.

The ALT attribute can be used to give alternate text for browsers that recognize the APPLET element but do not support Java or do not have Java enabled. Authors can also give alternate content between the start and end tags of the APPLET element – a better method than using the ALT attribute since it allows authors to include HTML markup in the alternate content and also works with pre-HTML 3.2 browsers that do not support APPLET.

Example:

<IMG SRC=”animation.git” ALT=””WIDTH=320 HEIGHT=208>Sorry, your browser doesn’t support Java.

</APPLET>

BUTTON

The BUTTON element defines a submit button, reset button, or push button. Programmers can also use INPUT to specify these buttons, but the BUTTON element allows richer labels, including images and emphasis. However, BUTTON is new in HTML 4.0 and poorly supported among current browsers, so INPUT is a more reliable choice at this time.

The TYPE attribute of BUTTON specifies the kind of button and takes the value submit (the default), rest, or button. The NAME and VALUE attributes determine the name/value pair sent to the server when a submit button is pushed. These attributes allow authors to provide multiple submit buttons and have the form handler take a different action depending on the submit button used.

Example:

<BUTTON NAME=submit VALUE-modify>Modify</BUTTON>

<BUTTON NAME=submit VALUE=continue>Continue</BUTTON>

OBJECT

The OBJECT element is used to include object such as images, videos, Java applets, and VRML worlds. OBJECT is intended to replace the more specific IMG and APPLET elements, as well as the proprietary EMBED and BGSOUND elements a better choice for the time being.

OBJECT’s DATA attribute specifies the URI of the embedded object. Relative URL’s are interpreted with respect to the CODEBASE attribute if it is given. The CLASSID may be used to specify an implementation for the object. Java applets, Python applets, and Active X controls all provide implementations for the embedded object, and so are specified with the CLASSID attribute.

Example:

SCRIPT

The SCRIPT element includes a client-side script in the document. Client-side scripts allow greater interactivity in a document by responding to user events. For example, a script could be used to check the user’s form input prior to submission to provide immediate notice of any errors by the user.

Example:

function alertme() {

alert(“you are alerted”);

} </script>

Note that not all browsers support client-side scripting, and supporting browsers allow the user to disable scripting, so authors should avoid dependence on client-side scripting wherever possible. The required TYPE attribute of SCRIPT specifies the media type of the scripting language, e.g., text/javascript. Examples of supported LANGUAGE values include JavaScript, JavaScrit1.1, and VBScript. The values are not case sensitive.

FORMS

Having looked at the structure of the standard HTML document and some of the basic HTML elements, let us now look at various form elements.

Forms are an effective means of making Web pages user-friendly. Forms are used in HTML for getting inputs from the user. Before the introduction of forms can typically be used by commercial organization for accepting orders from customers or taking feedback. One could also conduct tests over the Internet by using forms.

How Does a Form Work?

In a form, the user is typically presented with a number of input mechanisms that help the user to enter data. These could be text fields, radio buttons, check boxes or list boxes. When data entry is complete, the user submits the form. Submitting the form will send the input by the user to the server for processing. This is done by selecting the Submit button on the page. This communicates to the browser that the user has completed data entry. The browser sends the data and the URL of the CGI script to the server. The Common Gateway Interface (CGI) is a standard for interfacing external applications with information servers, such as HTTP or Web servers. The server passes the data to the CGI script that processes it. The CGI script may store the data in a file or a database. It also sends a response in the HTML format to the server. The server then sends this response to the browser, which formats and displays the response.

Form Elements

These are container elements. All elements required to define the contents of a form are the parameters of the elements and are called its attributes. We will discuss the attributes of the form elements and then proceed with the elements to define the contents of a form. Given below are the attributes of the for m elements:

1. ACTION – is a URL, specifying the location to which the contents of the form are submitted to elicit a response. Typically this form will be handling the CGI scripts. If this attribute is missing, then the URL, of the document itself is assumed.

2. ENCTYPE –  specifies the format of the submitted data in case the protocol does impose a format itself.

3. METHOD – selects variations in the protocol. It specifies the format in which data is to be sent to the script. It can take one of the two values:

POST

The difference between these two is the manner in which the data in the form is sent to the CGI script.

When the ACTION attribute is set to an HTTP URL, the METHOD attribute must be set to an HTTP METHOD as defined by the HTTP standard. The default METHOD is GET look at the elements used to define the input mechanism in a form.

The URL should be a script or may use mailto.

The method is GET or POST, depending on how you want the data returned. Within a form, input fields are defined are defined with: for multi line text input (surrounds prompting text):

The type can be one of text, checkbox, radio, hidden, password, reset, or submit. Other attributes are align, checked, size, max length, src, and value. All <input> fields of a radio or checkbox group must have the same name.

Example:

<textarea name=”comments” rows=”4” columns=”40”>Please write your comments here…</textarea><br><input type=”submit”><input type=”rest”></p></form>

IMG – IMAGE

The IMG element specifies an inline image. The required SRC or source attribute specifies the location of the image. The image can be any format, though browsers generally support only GIF and JPEG images. Support for the other formats like PNG is increasing.

Example:

The ALT attribute provides alternate text for those users who do not load images. Effective ALT text should generally give the function of the image rather than a description of the image. For example, ALT=”Welcome to XYZ Corp.” would be more appropriate than ALT=”XYZ Corp LOGO” for a company’s logo on its welcome page. Good ALT text is crucial to the accessibility of a document for the significant portion of users who do not load images.

The WIDTH and HEIGHT attributes are most useful when they specify the exact dimensions of the image in pixels. This allows image-loading browsers to reserve the proper amount of space for the image and continue to render the rest of the document.

SELECT

The SELECT element defines a form control for the selection of options. Internet Explorer displays the SELECT element without a FORM element. However, Netscape Navigator will not display any SELECT element outside of a FORM.

Example:

<P>Select one or more sections to search:

<OPTION>Web Authoring Reference</OPTION>

<OPTION>FAQ Archives </OPTION>

<OPTION>Design Elements</OPTION>

<OPTION>Tools</OPTION>

<OPTION>Feature Article</OPTION>

</SELECT>

</P>

The SIZE attribute of SELECT, hints that visual browsers should display the element as a list box with specified number of options visible at any time. A scroll bar would allow access to any non-visible options. The SIZE attribute is especially useful in SELECT elements with numerous OPTIONs and multiple selections are allowed. In such a situation, some visual browsers will render the entire list in one large box without scrolling. A suitable SIZE attribute helps such browsers give a more appropriate presentation.

Web Authoring Reference

Select one or more sections to search:

SPECIAL CHARAVTERS

Three characters out of the entire ASCII (or ISO 8859) character set are special and cannot be used “asis” within an HTML document. These character are left angle bracket (<), right angle bracket (>), and ampersand (&).

The angle brackets are used to specify HTML tags, while ampersand is used as the escape mechanism for these and other characters:

1&1t; is the escape sequence for <

1> is the escape sequence for >

1& is the escape sequence for &

Note:

The “escape sequence” only means that the given sequence of characters represents the single character in an HTML document. The conversion to single character itself takes place when the document is formatted for display by reader.
There are additional escape sequences that are possible; notably, there are a whole set of such sequences to support 8-bit characters sets (namely, ISO 8859-1);

Chapter 12:- HTML

Navigation