Introduction to HTML

HTML is the language of the Web. It is used to encode embedded directions (tags) that indicate to a Web browser how to display the contents of a document.

The HTML standard is under the authority of the World Wide Web Consortium. Unlike the HTTP standard that is used consistently across implementations, browser writers have implemented HTML differently, according to their whim, and have added their own proprietary HTML extensions (to the point that different versions of the same browser may handle the same HTML tag differently).

Tip

In your servlet code, you are advised to restrict the use of HTML to well-established tags and features. All the HTML covered here will work in all the most popular browsers, although you may find the output may look different in your favorite.


An HTML document has a well-defined structure consisting of required and optional HTML elements.

An HTML element consists of a tag name followed by an optional list of attributes all enclosed in angle brackets (<...>). Tag names and attributes are not case sensitive and cannot contain a space, tab, or return character. Most HTML tags come in pairs—a start tag and an end tag. The end tag is the same as the start tag but has a forward slash character preceding the tag name. For example, an HTML document begins with <HTML> and ends with </HTML>.

Tags are nested. This means that you must end the most recent tag before ending a preceding one. Apart from this restriction, the actual layout is completely free format. An indented layout can be used to aid readability but is not required.

Each HTML document has an optional HEAD and a BODY. The HEAD is where you pass information to the browser about the document; text in the header is not displayed as the content of the document. The BODY includes the information (tags and text) that defines the document's content. A well-formed (if a little basic) HTML document is shown in Listing 12.3, the output displayed in Microsoft's Internet Explorer is shown in Figure 12.2.

Figure 12.2. Screen shot of a simple HTML page.


Listing 12.3. A Simple HTML Page
1: <HTML>
2:   <HEAD>
3:     <TITLE>My Very First HTML Document</TITLE>
4:   </HEAD>
5:   <BODY>
6:     <H1>Here is a H1 header</H1>
7:     and here is some text – hopefully it looks different from the header
8:   </BODY>
9: </HTML>

All tags have a name, and some tags may also have one or more attributes that are used to add extra information. Attribute values can be case sensitive and should be enclosed in quotes if they include any space or special characters (if in doubt—quote), both single and double quotes can be used.

A little confusingly, a few common HTML tags do not normally come in pairs because the end tag can be omitted. These include <IMG>, which inserts a graphic image, and <BR>, which causes a line break.

Table 12.3 shows a list of HTML tags and attributes that can be used to format a simple HTML document. Only tags from this list are used in today's lesson. This is not a full list of HTML tags, nor does it show any attributes to the tags. For a definitive list, see the latest HTML specification available from www.w3.org.

Table 12.3. Summary of Common HTML Tags
TAG Description
<A> Create a hyperlink (HREF attribute).
<BIG> Format the text in a bigger typeface.
<BODY> Enclose the body of the HTML document.
<BR> Start a new row of text.
<BUTTON> Create a button element within a <FORM>
<FONT> Change the size, color, or typeface of text.
<FORM> Delimit a form. This is used to send user input.
<Hn> Header text, where n is a number between 1 and 6.
<HEAD> Encloses the document head.
<HTML> Used to delimit the entire HTML document.
<IMG> Insert an image.
<INPUT> Create buttons or other elements in a <FORM> used to pass information to the server.
<OPTION> Define a single option within a <SELECT> list, see <SELECT>.
<P> Start a new paragraph.
<SELECT> Start the <OPTION> list for a multiple-choice menu.
<TABLE> Place text in table format.
<TD> Define the contents of a data cell in a <TABLE>.
<TH> Define the contents of a header cell in a <TABLE>.
<TR> Define a row of cells within a <TABLE>.
<!-- --> Enclose a comment.

Listing 12.4 is an HTML document that illustrates the use of some of these tags. It contains an input form with a button and outputs data in the form of a table.

Listing 12.4. Simple HTML Form
 1: <HTML>
 2:   <HEAD><TITLE>Simple HTML Form</TITLE></HEAD>
 3:   <BODY><FONT FACE=ARIAL COLOR=DARKBLUE>
 4:     <H1><FONT SIZE=+3>Color Selector</FONT></H1>
 5:     <FORM METHOD=GET ACTION="http://localhost:8000/servlets/processForm">
 6:       Please Type in your name here:
 7:       <INPUT TYPE=TEXT NAME="name">
 8:       <P>Now select the color of your choice</P>
 9:       <SELECT NAME="color" SIZE=1><OPTION>Red<OPTION>Green <OPTION>Blue</SELECT>
10:       <BR><BR>
11:       <INPUT TYPE=SUBMIT>
12:       <BR><BR>
13:       <TABLE BORDER=5 BORDERCOLOR=BLUE CELLPADDING=10>
14:         <TR>
15:           <TH ALIGN=LEFT>Color</TH><TH ALIGN=LEFT>Description</TH>
16:         </TR>
17:         <TR>
18:           <TD><FONT COLOR=RED>Red</FONT></TD>
19:           <TD>Will bring excitement into your life</TD>
20:         </TR>
21:         <TR>
22:           <TD><FONT COLOR=GREEN>Green</FONT></TD>
23:           <TD>Will bring you life giving energy</TD>
24:         </TR>
25:         <TR>
26:           <TD><FONT COLOR=BLUE>Blue</FONT></TD>
27:           <TD>Will bring peace to your world</TD>
28:         </TR>
29:       </TABLE>
30:     </FORM>
31:   </BODY>
32: </HTML>

The output of this code in Microsoft's Internet Explorer version 6 is shown in Figure 12.3. The page will look similar, but not necessarily exactly the same, in other browsers.

Figure 12.3. Sample HTML page displayed using Microsoft's Internet Explorer version 6.


This completes the discussion of HTML; access the latest standard and other documents on the WC3 Web site (www.w3.org) for more information on the standard.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.15.154