WWW, HTTP, TELNET
12. The HTTP software running on the Web server adds some headers to the file to form an HTTP response. The HTTP response is a series of lines that contains this header information (such as date
6.3 HYPER TEXT MARKUP LANGUAGE (HTML) .1 What is HTML?
6.3.3 Creating Links to Other Pages
The anchor tag can be used to create a link to another document. This is called as hyperlink or Uniform Resource Locator (URL). The tag causes some text to be displayed as underlined. If we click on that text in the Web browser, our browser opens the site/page that the hyperlink refers to. The tag used is <a>. The general syntax for doing this is as follows.
<a href=”url”>Text to be displayed</a>
Here,
a = Create an anchor href = Target URL
Text = Text to be displayed as substitute for the URL For example, if we code the following in our HTML page:
<a href=”http://www.yahoo.com/”>Visit Yahoo!</a>
The result is visit Yahoo!
A full example is shown in Fig. 6.14.
<html>
<head>
<title>Hype link Example</title>
<head>
<body>
<h3> This tag will create a hyper link </h3>
<br> <br>
<h5> <a href=”http://www.yahoo.com/”>Visit Yahoo!</a></h5>
</body>
</html>
Fig. 6.14 Hyper link example The resulting output is shown in Fig. 6.15.
Fig. 6.15 Hyper link output
158
6.3.4 Frames
The technology of frames allows us to split the HTML page window (i.e., the screen that the user sees) into two or more sections. Each section of the page contains its own HTML document. The original HTML page, which splits itself into one or more frames, is also an HTML page. If this sounds complex, refer to Fig. 6.16.
Fig. 6.16 Frames concept
How do we achieve this? The main HTML page contains reference to the two frames. An example would help clarify this point. A sample main HTML page is shown in Fig. 6.17.
<html>
<head>
<title>Frames Example!</title>
</head>
<frameset cols = “50%, 50%”>
<frame src = “page1.html”>
<frame src = “page2.html”>
</frameset>
</html>
Fig. 6.17 Frames example Let us understand what this page does. It has the following tag.
<frameset cols=”50%,50%”>
This tag indicates to the browser that is loading this HTML page that the HTML page is not like a traditional HTML page. Instead, it is a set of frames. There are two frames, each of which occupies 50% of the screen space.
<frame src=”page1.html”>
This tag tells the browser that in the first 50% reserved area, the contents of the HTML page titled page1.html should be loaded.
<frame src=”page2.html”>
Needless to say, this tag tells the browser that in the second 50% reserved area, the contents of the HTML page titled page2.htmlshould be loaded.
159 The output would be similar to what is shown in Fig. 6.18, provided the two HTML pages (page1.html andpage2.html) contain the specified text line.
Fig. 6.18 Frames output
We should note that the browser reads our frame src tags for the columns from left to right. Therefore, we should keep everything in the order we want it to appear. Now, suppose we wanted three frames across the page, and not two. To achieve this, we need to modify our frameset tag and add another frame src tag for the third frame, as follows:
<frameset cols = “33%, 33%, 33%”>
<frame src = “page1.htm”>
<frame src = “page2.htm”>
<frame src = “page3.htm”>
</frameset>
Interestingly, this covers only 99% of the space on the page. What about the remaining 1%? The browser would fill it up on its own. This may lead to slightly unpredictable results, so it is better to increase one of the 33% by 1 to make it 34%.
We can also create frames in other formats. An example is shown in Fig. 6.19.
Fig. 6.19 Another frames output
How do we code the main HTML page for doing this? It is shown in Fig. 6.20.
<html>
<head>
<title>Another Frames Example!</title>
</head>
<frameset cols=”65%, 35%”>
<frame src=”page1.htm”>
<frameset rows=”50%, 50%”>
<frame src = “page2.htm”>
<frame src = “page3.htm”>
</frameset>
</frameset>
</html>
Fig. 6.20 Frames code
160
Let us understand this now.
n The first frameset tag tells the browser to divide the page into two columns of 65% and 35% sizes, respectively.
n Theframe src tag after it tells the browser the first column should be filled with the contents of page1.html.
n The next frameset tag is nested inside the first frameset tag. This tag tells the browser to divide the second column into two rows, instead of using a single HTML page to fill the column.
n The next two frame src tags tell the browser to fill the two rows with page2.html in the top row andpage3.html in the bottom row, in the order of top to bottom.
n We must close all of our frameset tags after they have been used.
Based on all the concepts discussed so far, let us now take a look at a real-life example. Figure 6.21 shows code for three HTML pages: one test page (test.html), which contains a frameset that specifies two frames (left.html and right.html).
Fig. 6.21 Frames inside a frameset The resulting output is shown in Fig. 6.22.
We will not discuss more features of frames, since they are not relevant to the current context.
161
Fig. 6.22 Frameset concept
6.3.5 Working with Tables
Table 6.2 summarizes the tags that can be used to create an HTML table.
Table 6.2 Table tags
Tag Use
<table> Marks a table within an HTML document.
<tr> Marks a row within a table. Closing tag is optional.
<td> Marks a cell (table data) within a row. Closing tag is optional.
<th> Marks a heading cell within a row. Closing tag is optional.
For example, suppose we want to create the following table in HTML, as shown in Table 6.3.
Table 6.3 Sample table output
Book Name Author
Operating Systems Godbole
Data Communications and Networks Godbole
Cryptography and Network Security Kahate
Let us understand this step by step.
Step 1 Start with the basic <table> and </table> tags.
<table>
</table>
Step 2 Add <tr> and </tr> tags for the number of rows needed. We have one header row and three data rows.
Hence, we would have four instances of <tr> and </tr>.
162
Step 3 Add <th> and </th> tags for table headings.
<table>
Step 4 Add <td> and </td> tags for adding actual data.
<table>
Step 5 Add actual heading and data values.
<table>
163
The full HTML page is shown in Fig. 6.23.
<html>
<head>
<title>Table Example</title>
<head>
<body>
<h1> Here is a Table in HTML</h1>
<table>
Fig. 6.23 HTML code for a table The resulting output is shown in Fig. 6.24.
We can see that the table does not have any borders. We can easily add them using the border attribute.
The modified table tag is as follows (other things being exactly the same as before).
<table border=”1">
The resulting output is as shown in Fig. 6.25.
164
Fig. 6.24 Output of HTML table
Fig. 6.25 Adding border to a table
6.3.6 Lists
In HTML, there are two types of lists, unordered and ordered. An unordered list is a list of items marked with bullets. It starts with <ul>. Inside, each item starts with <li>. On the other hand, an ordered list is a list of items marked with numbers. It starts with <ol>. Inside, each item starts with <li>.
The allowed types of lists are as follows.
(a) Numbered lists
Type=“A” Number or letter with which the list should start; other options are a, I, i, or 1 (Default) (b) Bulleted lists
Type=“disc” Bullet type to be used; other options are square and circle Figure 6.26 shows an example of an unordered list.
165
<html>
<head>
<title>Unordered List Example</title>
<head>
<body>
<h1> Here is a List</h1>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
</body>
</html>
Fig. 6.26 Unordered list example The resulting output is shown in Fig. 6.27.
Fig. 6.27 Unordered list output
Suppose we want the bulleted list to have filled squares as the bullets, instead of filled circles. We can then modify the <ul> tag to the following (remaining things being the same as before).
<ul type=”square”>
The resulting output is shown in Fig. 6.28.
Instead of bullets, we can have the items numbered, by using an ordered list. The code is shown in Fig. 6.29.
166
Fig. 6.28 Unordered list with square bullets
<html>
<head>
<title>Ordered List Example</title>
<head>
<body>
<h1> Here is a List</h1>
<ol>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ol>
</body>
</html>
Fig. 6.29 Ordered list example
Note that we have used the <ol> and </ol> tags, instead of <ul> and </ul>. The resulting output is shown in Fig. 6.30.
Fig. 6.30 Ordered list output
167 Lists can be nested as well. Figure 6.31 shows an example of a nested unordered list.
<html>
<head>
<title>Unordered List Example</title>
<head>
<body>
<h1> Here is a List</h1>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Fig. 6.31 The resulting output is shown in Fig. 6.32.
Fig. 6.32 Nested unordered list
6.3.7 Forms Processing
Form is an area containing form elements. A form element allows user to enter information. The various form elements can be text fields, drop-down lists, radio buttons, check boxes, and so on. These form elements need to be enclosed inside the <form> and </form> tags.
168
The<input> tag is the most commonly used form element. The type of input being accepted is specified with the type attribute. For example, to accept values in a text box, we can specify the following.
<form>
<input type=“text” ...>
...
</form>
Figure 6.33 shows how to create a simple form.
<html>
<head>
<title>Forms Example</title>
<head>
<body>
<h3>Please fill in the Form below</h3>
<form>
First name:
<input type=”text” name=”firstname”>
<br>
Last name:
<input type=”text” name=”lastname”>
</form>
</body>
</html>
Fig. 6.33 HTML form The resulting HTML form on the browser screen is shown in Fig. 6.34.
Fig. 6.34 Form output
Table 6.4 shows the various attributes of the input tag that is used to create forms.
169 Table 6.4 Form attributes
Tag/Attribute Use
<input> Sets an area in a form for user input
Type=“...” Text, Password, Checkbox, Radio, File, Hidden, Image, Submit, Reset
Name=“...” Processes form results
Value=“...” Provide default values
Size=“n” Sets visible size for text inputs
Maxlength=“n” Maximum input size for text fields
Selected Default selection when form is initially displayed or reloaded
In our earlier example, we saw that <input type=”text”> created a text box. Similarly, we can create radio buttons by changing the type to radio, as shown in Fig. 6.35.
<html>
Let us understand what we are doing here in the input tag.
<input type=”radio” name=“fruit” value=“apple”> Apple
This means that we want a radio button, which would be known programmatically as fruit. We shall later study how to make use of these variable names. The internal value of this variable is apple. In other words, whenever we want to check whether the user has selected this radio button, we will compare it with this value. Finally, the on-screen display for this button would be Apple (which is what we see on the screen).
The resulting output is shown in Fig. 6.36.
We can create check boxes. An example is shown in Fig. 6.37.
170
Fig. 6.36 Radio buttons output
<html>
<head>
<title>Forms Example</title>
<head>
<body>
<h3>Please fill in the Form below</h3>
<form>
<input type=”checkbox” name=”bike”>
I have a bike
<br>
<input type=”checkbox” name=”car”>
I have a car
<br>
<input type=”checkbox” name=”bus”>
I have a bus
</form>
</body>
</html>
Fig. 6.37 Using checkboxes The resulting output is shown in Fig. 6.38.
Whenever we key in any input (either using text boxes or by way of radio buttons, check boxes, etc.), we ideally want to also click a button to initiate an action. For example, we may want to submit all this information to a program, which would validate all information, store it somewhere, and do the necessary processing. For example, we may use a form to select books of interest, make a payment using credit card, etc. In all such situations, we need a button to be present on the screen. For this purpose, a button is needed. Sample code is shown in Fig. 6.39.
171
Fig. 6.38 Checkbox output
<html>
<head>
<title>Forms Example</title>
<head>
<body>
<h3>Please fill in the Form below</h3>
<form name=”input” action=”html_form_action“ method=”get”>
User name: <input type=”text” name=”user”> <br><br>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
Fig. 6.39 Adding a button
Here, we are saying that we want to accept the user’s name on this screen. Once the user enters her name, we want to send this name to a program called as html_form_action. What and how this program will process is a separate topic, which we shall deal with later. For now, we need not bother about it. We can see that
<input type=”submit”> enables the creation of a button.
The resulting output is shown in Fig. 6.40.
Fig. 6.40 Output with a button
172
Figure 6.41 shows an example of creating a drop down list.
<html>
<head>
<title>Forms Example</title>
<head>
<body>
<form>
<select name=”cars”>
<option value=”volvo”>Volvo
<option value=”saab”>Saab
<option value=”fiat”>Fiat
<option value=”audi”>Audi
</select>
</form>
</body>
</html>
Fig. 6.41 Drop down list The resulting output is shown in Fig. 6.42.
Fig. 6.42 Drop down list output
Combining several of the above features, we create a more meaningful form, the code for which is in Fig. 6.43.
<html>
<head>
<title>Forms Example</title>
<head>
<body>
<form>
(Contd)
173
<input type=”text” name=”firstname” size=”40" maxlength=”50">First Name<br>
<input type=”text” name=”lastname” size=”40" maxlength=”50">Last Name<br>
<input type=”text” name=”email” size=”40" maxlength=”50">Email Address<br>
<input type=”text” name=”address” size=”40" maxlength=”50">Postal Address<br>
<input type=”text” name=”city” size=”20" maxlength=”40">City
<select name=”state”>
<option value=”ap”>AP
<option value=”bi”>Bi
<option value=”ma”>MH
<option value=”mp”>MP
<option value=”mp”>TN
</select>
State
<input type=”text” name=”pin” size=”10" maxlength=”15">Pin code<br>
<input type=”text” name=”country” size=”40" maxlength=”50">Country<br>
</form>
</body>
</html>
Fig. 6.43 Full form The resulting output is shown in Fig. 6.44.
Fig. 6.44 Full form output
6.3.8 Images
We can also insert images inside an HTML page by using the img tag, as shown in Fig. 6.45.
Fig. 6.43 contd...
174
<html>
<head><title>Image Example</title></head>
<body background=”mickey.bmp”>
<h3>Look: A background image!</h3>
<p>Both gif and jpg files can be used as HTML backgrounds.</p>
<p>If the image is smaller than the page, the image will repeat itself.</p>
</body>
</html>
Fig. 6.45 Image example
The image is supposed to be stored in a file called as background.jpg. The result is shown in Fig. 6.46.
Fig. 6.46 Image output
6.3.9 Style Sheets
The whole purpose for defining HTML tags originally was to specify the content of a document. For example, they were supposed to inform the browser that This is a header, This text should be displayed in bold, or This is a table, by using tags such as <h2>,<b>, or <table>, and so on. However, implementing them, i.e., utilizing the appropriate layout was supposed to be taken care of by the browser. That is, when we say "h2", what should be the font size, and font family? This was left to the individual Web browsers to decide.
The two major Web browsers of those times, namely, Netscape Navigator and Internet Explorer, did not always follow the HTML specifications as defined by the Standards body. Instead, they went on adding new HTML tags and attributes (e.g., the <font> tag and the color attribute) to the original HTML specifications.
As a result, the following two problems arose.
175 1. Applications were no longer browser-independent. Something that worked on Netscape Navigator
was not guaranteed to work on Internet Explorer, and vice versa. This was because these browsers were also adding proprietary tags to their implementation of the HTML specifications.
2. It became increasingly more difficult to create Web sites where the content of HTML document and its presentation layout were very cleanly separated.
2. It became increasingly more difficult to create Web sites where the content of HTML document and its presentation layout were very cleanly separated.