Module 1 Introduction

INTRODUCTION
1. INTRODUCTION

Module 1

Web browsers, web servers, MIME, URL, HTTP Introduction to XHTML5 tags, Basic syntax
and structure, text markups, images, lists, tables, progress, Media tags-audio and video ,forms,
frames.

Web browsers
The web browser is an application software to explore www (World Wide Web). It provides
an interface between the server and the client and requests to the server for web documents
and services.

● Documents provided by servers on the Web are requested by browsers, which are
programs running on client machines.
● They are called browsers because they allow the user to browse the resources available
on servers.
● Mosaic was the first browser with a graphical user interface.
● A browser is a client on the Web because it initiates the communication with a server,
which waits for a request from the client before doing anything.
● In the simplest case, a browser requests a static document from a server.
● The server locates the document among its servable documents and sends it to the
browser, which displays it for the user.
● Sometimes a browser directly requests the execution of a program stored on the server.
The output of the program is then returned to the browser.
● Examples: Internet Explorer, Mozilla Firefox, Netscape Navigator, Google Chrome,
Opera etc.,

RAJENDRA JOTAWAR 1
Module 1 Introduction

Key Components:

• User Interface (UI): The browser's UI includes the address bar, navigation buttons,
bookmarks, and settings menus. It provides the user with a visual and interactive means to
navigate the web.
• Rendering Engine: This core component interprets HTML, CSS, and other web
technologies, rendering them as the visual elements users see on their screens.
• JavaScript Engine: Modern browsers execute JavaScript, a powerful scripting language,
enabling dynamic and interactive web applications.
• Networking: Browsers establish connections to web servers through protocols like HTTP
and HTTPS, fetching resources such as HTML, images, and scripts.
• Extensions and Add-ons: Browsers often support extensions that enhance functionality
and customize the browsing experience. These can range from ad blockers to productivity
tools.
• Security Features: Browsers implement security measures like sandboxing, pop-up
blockers, and phishing protection to safeguard users from malicious websites and online
threats.
• Caching: Browsers store frequently accessed resources locally to improve page loading
times and reduce network traffic.

Web Servers
Web servers are programs that provide documents to requesting browsers. Example: Apache Web server
is a computer where the web content is stored. Basically a web server is used to host the web sites but
there exists other web servers also such as gaming, storage, FTP, email etc.

Step-by-step process of what happens whenever a web browser approaches the web server and
requests a web file or file.

▪ First, any web user is required to type the URL of the web page in the address bar of your web
browser.
▪ With the help of the URL, your web browser will fetch the IP address of your domain
name either by converting the URL via DNS (Domain Name System) or by looking for the IP in
cache memory. The IP address will direct your browser to the web server.

▪ After making the connection, the web browser will request for the web page from the web server with
the help of an HTTP request.

RAJENDRA JOTAWAR 2
Module 1 Introduction

▪ As soon as the web server receives this request, it immediately responds by sending back the
requested page or file to the web browser HTTP.
▪ If the web page requested by the browser does not exist or if there occurs some error in the process,
the web server will return an error message.
▪ If there occurs no error, the browser will successfully display the webpage.
Apache

Apache is the most widely used Web server. The primary reasons are as follows:

Apache is an excellent server because it is both fast and reliable.

Furthermore, it is open-source software, which means that it is free and is managed by a large
team of volunteers, a process that efficiently and effectively maintains the system.

Finally, it is one of the best available servers for Unix-based systems, which are the most
popular for Web servers.

Apache is capable of providing a long list of services beyond the basic process of serving
documents to clients.

When Apache begins execution, it reads its configuration information from a file and sets its
parameters to operate accordingly.

Static web servers vs. Dynamic web servers

RAJENDRA JOTAWAR 3
Module 1 Introduction

MIME
MIME stands for Multipurpose Internet Mail Extensions. It is used to extend the capabilities
of Internet e-mail protocols such as SMTP. The MIME protocol allows the users to
exchange various types of digital content such as pictures, audio, video, and various types of
documents and files in the e-mail.

MIME was created in 1991 by a computer scientist named Nathan Borenstein at a company
called Bell Communications.

Since MIME was able to transfer only text written file in a limited size English language
with the help of the internet. At present, it is used by almost all e-mail related service
companies such as Gmail, Yahoo-mail, Hotmail.

RAJENDRA JOTAWAR 4
Module 1 Introduction

MIME Header

1. MIME Version
2. Content Type
3. Content Type Encoding
4. Content Id
5. Content description

1. MIME Version
It defines the version of the MIME protocol. This header usually has a parameter value 1.0,
indicating that the message is formatted using MIME.

2. Content Type
It describes the type and subtype of information to be sent in the message. These messages
can be of many types such as Text, Image, Audio, Video, and they also have many subtypes
such that the subtype of the image can be png or jpeg. Similarly, the subtype of Video can
be WEBM, MP4 etc.

3. Content Type Encoding

In this field, it is told which method has been used to convert mail information into ASCII or
Binary number, such as 7-bit encoding, 8-bit encoding, etc.

4. Content Id
In this field, a unique "Content Id" number is appended to all email messages so that they
can be uniquely identified.

5. Content description
This field contains a brief description of the content within the email. This means that
information about whatever is being sent in the mail is clearly in the "Content Description".
This field also provides the information of name, creation date, and modification date of the
file.

RAJENDRA JOTAWAR 5
Module 1 Introduction

URL
A URL is a type of uniform resource identifier and is the address of a resource on the World
Wide Web and the protocol used to access it.

(Uniform Resource Locator) contains the information, which is as follows:

The port number on the server, which is optional. It contains a protocol that is used to access
the resource.

The location of the server

A fragment identifier

In the directory structure of the server, it contains the location of the resource.

RAJENDRA JOTAWAR 6
Module 1 Introduction

HTTP

Request Phase:
The general form of an HTTP request is as follows:
1. HTTP method Domain part of the URL HTTP version
2. Header fields
3. Blank line
4. Message body

RAJENDRA JOTAWAR 7
Module 1 Introduction

The following is an example of the first line of an HTTP request:

GET /[Link] HTTP/1.1

The Response Phase:

The general form of an HTTP response is as follows:
1. Status line
2. Response header fields
3. Blank line
4. Response body
The status line includes the HTTP version used, a three-digit status code for the response, and a short
textual explanation of the status code. For example, most responses begin with the following:
HTTP/1.1 200 OK

The status codes begin with 1, 2, 3, 4, or 5. The general meanings of the five categories
specified by these first digits are shown in Table 1.2.
Table 1.2 First digits of HTTP status codes

Introduction to XHTML5 tags

HTML □ HyperText Mark-up Language

XHTML □ eXtensible Hypertext Mark-up Language

RAJENDRA JOTAWAR 8
Module 1 Introduction

RAJENDRA JOTAWAR 9
Module 1 Introduction

Standard XHTML Document Structure

● Every XHTML document must begin with an xml declaration element that simply
identifies the document as being one based on XML. This element includes an attribute
that specifies the version number 1.0.
● The xml declaration usually includes a second attribute, encoding, which specifies the
encoding used for the document [utf-8].
Following is the xml declaration element, which should be the first line of every XHTML
document:

<?xml version = "1.0" encoding = "utf-8"?>

● Note that this declaration must begin in the first character position of the document file.
● The xml declaration element is followed immediately by an SGML DOCTYPE
command, which specifies the particular SGML document-type definition (DTD) with
which the document complies, among other things.
The following command states that the document in which it is included complies with
the XHTML 1.0 Strict standard:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"[Link]

● An XHTML document must include the four tags <html>, <head>, <title>, and <body>.
● The <html> tag identifies the root element of the document. So, XHTML documents
always have an <html> tag immediately following the DOCTYPE command, and they

RAJENDRA JOTAWAR 10
Module 1 Introduction

always end with the closing html tag, </html>.

● The html element includes an attribute, xmlns, that specifies the XHTML namespace, as
shown in the following element:
<html xmlns = "[Link]

● Although the xmlns attribute’s value looks like a URL, it does not specify a document. It
is just a name that happens to have the form of a URL.
● An XHTML document consists of two parts, named the head and the body.
The <head> element contains the head part of the document, which provides
information about the document and does not provide the content of the document.

The body of a document provides the content of the document.

The content of the title element is displayed by the browser at the top of its display
window, usually in the browser window’s title bar.

BASIC TEXT MARKUP

We will have a look at a complete XHTML document:

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"[Link]

<!-- [Link]

A document which must be followed throughout the notes

-->

<html xmlns = "[Link]

<head>

<title> My first program </title>

</head>

<body>

<p>

My lovely students.!!

</p>

</body>

</html>

RAJENDRA JOTAWAR 11
Module 1 Introduction

PLEASE NOTE: From here onwards programming in XHTML will begin. Please
add the following compulsory document structure to all programs in the first 4 lines
and skip the simple <html> tag of the first line because I have begun the coding part
directly .

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.0 Strict//EN" "[Link] [Link]">

<html xmlns = "[Link]

Paragraphs:
It begins with <p> and ends with </p>. Multiple paragraphs may appear in a single document.
<html>

<head>

<title> Paragraph </title>

</head>

<body>

<p> Paragraph 1 </p>

<p> Paragraph 2 </p>

<p> Paragraph 3 </p>

</body>

</html>

RAJENDRA JOTAWAR 12
Module 1 Introduction

Line Breaks:
The break tag is specified as <br />. The slash indicates that the tag is both an opening and
closing tag.
<html>

<head>

<title> br tag </title>

</head>

<body>

<p>

My Name is XYZ <br/> I am from MCA

Department<br/> AIT, Bangalore

</p>

</body>

</html>

RAJENDRA JOTAWAR 13
Module 1 Introduction

Preserving White Space

Sometimes it is desirable to preserve the white space in text—that is, to prevent the browser from
eliminating multiple spaces and ignoring embedded line breaks. This can be specified with the
<pre> tag.
<html>

<head>

<title> Pre Tag </title>

</head>

<body>

<p><pre> My Name is XYZ

I am from MCA Department AIT, Bangalore

</pre></p>

</body>

</html>

Headings

In XHTML, there are six levels of headings, specified by the tags <h1>, <h2>, <h3>,
<h4>,

<h5>, and <h6>, where <h1> specifies the highest-level heading. Headings are usually
displayed in a boldface font whose default size depends on the number in the heading tag.
On most browsers, <h1>, <h2>, and <h3> use font sizes that are larger than that of the
default size of text, <h4> uses the default size, and <h5> and <h6> use smaller sizes. The
heading tags always break the current line, so their content always appears on a new line.
Browsers usually insert some vertical space before and after all headings.

<html>

<head>

<title> Headings </title>

RAJENDRA JOTAWAR 14
Module 1 Introduction

</head>

<body>

<h1> Heading 1 </h1>

<h2> Heading 2 </h2>

<h3> Heading 3 </h3>

<h4> Heading 4 </h4>

<h5> Heading 5 </h5>

<h6> Heading 6 </h6>

</body>

</html>

IMAGES
▪ Images can be displayed on the web page using <img> tag.

▪ When the <img> tag is used, it should also be mentioned which image needs to be
displayed. This is done using src attribute.

▪ Attribute means extra information given to the browser

▪ Whenever the <img> tag is used, an alt attribute is also used.

RAJENDRA JOTAWAR 15
Module 1 Introduction

▪ alt stands for alert.

▪ Some very old browsers would not be having the capacity to display the images.
▪ In this case, whatever is the message given to the alt attribute, that would be displayed.
▪ Another use of alt is ◻ when image display option has been disabled by user. The
option is normally disabled when the size of the image is huge and takes time for
downloading.

<p>This is an example of an image in HTML:</p>

<img src="[Link]" alt="Example Image" width=250px>

LISTS
Unordered Lists:
The <ul> tag, which is a block tag, creates an unordered list. Each item in a list is specified with an
<li> tag (li is an acronym for list item). Any tags can appear in a list item, including nested lists.
When displayed, each list item is implicitly preceded by a bullet.
<html>
<head>

<title> Unordered List </title>

</head>
<body>
<h2>Research Areas</h2>
<ul>

RAJENDRA JOTAWAR 16
Module 1 Introduction

<li>Data Mining</li>
<li>Artificial Intelligence</li>
<li>Machine Learning</li>
<li>RPA</li>
</ul>
</body>
</html>

Ordered Lists:
Ordered lists are lists in which the order of items is important. This orderedness of a list is shown
in the display of the list by the implicit attachment of a sequential value to the beginning of each
item. The default sequential values are Arabic numerals, beginning with 1.
An ordered list is created within the block tag <ol>. The items are specified and displayed just as
are those in unordered lists, except that the items in an ordered list are preceded by sequential
values instead of bullets.

<html>
<head>
<title> Headings </title>

</head>
<body>
<h2>Faculty</h2>
<ol>
<li>Dr. Ovi Smith - Specialization in IOT</li>
<li>Dr. Ira Mendke - Specialization in Data Analytics</li>
<li>Dr. Mark Johnson - Specialization in Python</li>

RAJENDRA JOTAWAR 17
Module 1 Introduction

</ol>
</body>
</html>

Nested Lists

<html>
<head>
<title>Nested Lists</title>
</head>
<body>
<ol>
<li>Information Science
<ol>

<li>OOMD</li>
<li>Java & J2EE
<ul>
<li>Classes and Methods</li>
<li>Exceptions</li>
<li>Applets</li>
<li>Servlets</li>
</ul>
</li>
</ol>

RAJENDRA JOTAWAR 18
Module 1 Introduction

</li>
<li>Computer Networks
<ul>
<li>Part 1</li>
<li>Part 2</li>
</ul>
</li>
</ol>
</body>
</html>

Definition Lists:
As the name implies, definition lists are used to specify lists of terms and their definitions, as in
glossaries. A definition list is given as the content of a <dl> tag, which is a block tag. Each term to
be defined in the definition list is given as the content of a <dt> tag. The definitions themselves
are specified as the content of <dd> tags. The defined terms of a definition list are usually displayed
in the left margin; the definitions are usually shown indented on the line or lines following the
term.
<html>
<head>
<title> Definition List </title>
</head>

RAJENDRA JOTAWAR 19
Module 1 Introduction

<body>
<h1> South Indian Film Heroes </h1>
<dl>
<dt> Puneeth Rajkumar </dt>
<dd>Top in Kannada Film Industry</dd>
<dt> Mahesh Babu </dt>
<dd>Top in Telugu Film Industry</dd>
<dt> Suriya </dt>
<dd>Top in Tamil Film Industry</dd>
</dl>
</body>
</html>

TABLES
A table is a matrix of cells. The cells in the top row often contain column labels, those in the
leftmost column often contain row labels, and most of the rest of the cells contain the data of the
table. The content of a cell can be almost any document element, including text, a heading, a
horizontal rule, an image, and a nested table.

Basic Table Tags:

▪ A table is specified as the content of the block tag <table>.
▪ There are two kinds of lines in tables: the line around the outside of the whole table is called the
border; the lines that separate the cells from each other are called rules.
▪ It can be obtained using the border attribute. The possible values are “border” or any number.
▪ The table heading can be created using <caption> tag.

▪ The table row can be created using <tr> tag.

▪ The column can be created either by using <th> tag (stands for table header which is

RAJENDRA JOTAWAR 20
Module 1 Introduction

suitable for headings) or <td> tag (stands for table data which is suitable for other data).
<html>

<head>

<title>Program Offerings</title>

</head>

<body>

<h2>Program Offerings</h2>

<table border="1">

<tr>

<th>Program</th>

<th>Degree</th>

<th>Duration</th>

</tr>

<tr>

<td>PG</td>

<td>MCA</td>

<td>2 years</td>

</tr>

</table>

</body>

</html>

RAJENDRA JOTAWAR 21
Module 1 Introduction

The rowspan and colspan Attributes:

Multiple-level labels can be specified with the rowspan and colspan attributes.
<html>

<head>

<title>Row-span and Column-span</title>

</head>

<body>

<p>Illustration of Row span</p>

<table border="1">

<tr>

<th rowspan="2">MCA</th>

<th>ISE</th>

<th>CSE</th>

</tr>

<tr>

<!-- Additional rows if needed -->

</tr>

</table>

<p>Illustration of Column span</p>

<table border="1">

<tr>

<th colspan="2">MCA</th>

<th>ISE</th>

<th>CSE</th>

</tr>

<tr>

<!-- Additional rows if needed -->

RAJENDRA JOTAWAR 22
Module 1 Introduction

</tr>

</table>

</body>

</html>

The align and valign Attributes:

The placement of the content within a table cell can be specified with the align and valign
attributes in the <tr>,<th>, and <td> tags.
The align attribute has the possible values left, right, and center, with the obvious meanings for
horizontal placement of the content within a cell. The default alignment for th cells is center; for td
cells, it is left.
The valign attribute of the <th> and <td> tags has the possible values top and bottom. The default
vertical alignment for both headings and data is center.

<html>
<head>
<title> Align and valign </title>
</head>
<body>
<p>Table having entries with different alignments</p>
<table border="border">
<tr align = "center">
<th> </th>

RAJENDRA JOTAWAR 23
Module 1 Introduction

<th> Puneeth Rajkumar </th>

<th> Darshan Thoogudeep</th>
<th> Kichcha Sudeep </th>
</tr>
<tr>
<th> Ramya </th>
<td align = "left"> Akaash </td>
<td align = "center"> Datta </td>
<td align = "right"> Ranga </td>
</tr>
<tr>
<th> <br/>Rakshitha <br/><br/><br/></th>
<td> Appu </td>
<td valign = "top"> Kalasipalya </td>
<td valign = "bottom"> Kaashi from village </td>

</tr>
</table>
</body>

</html>

RAJENDRA JOTAWAR 24
Module 1 Introduction

The cellpadding and cellspacing Attributes:

Cellspacing is the distance between cells.
Cellpadding is the distance between the edges of the cell to its content.
<html>
<head>
<title> cell spacing and cell padding </title>
</head>
<body>
<h3>Table with space = 10, pad = 50</h3>
<table border = "7" cellspacing = "10" cellpadding = "50">
<tr>
<td> Divya </td>
<td>Chethan </td>
</tr>
</table>

<h3>Table with space = 50, pad = 10</h3>

<table border = "7" cellspacing = "50" cellpadding = "10">
<tr>
<td> Divya </td>
<td>Chethan </td>
</tr>
</table>
</body>
</html>

RAJENDRA JOTAWAR 25
Module 1 Introduction

Progress
The <progress> element is used to represent the completion progress of a task. It's typically
used to display a visual indication of how far a task has progressed. Here's how you can
use the <progress> element:

<!DOCTYPE html>

<html>

<head>

<title>Simple Progress Tag Example</title>

</head>

<body>

<h1>Simple Progress Bar</h1>

<progress value="90" max="200"></progress>

</body>

</html>

Media tags-audio and video

The <audio> element in HTML is used to embed audio content, such as music or sound effects,
directly into a web page. It allows you to provide a seamless audio playback experience for your
website visitors. Here's how you can use the <audio> element:

<audio controls autoplay >

<source src="MaanMeriJaan.mp3" type="audio/mpeg">

</audio>

RAJENDRA JOTAWAR 26
Module 1 Introduction

In this example, we have an HTML document that uses the <audio> element to embed an audio file named
"MaanMeriJaan.mp3." The controls attribute adds audio controls (play, pause, volume, etc.) to the audio player
so users can interact with it. The <source> element is used to specify different formats of the audio file and their
corresponding MIME types. The text "Your browser does not support the audio element." serves as a fallback
message for browsers that do not support the <audio> element.

You can also provide multiple <source> elements to support different audio formats for broader browser
compatibility

<audio controls>

<source src="sample.mp3" type="audio/mpeg">

<source src="[Link]" type="audio/ogg"> Your browser does not support the audio element.

</audio>

Video

The <video> element in HTML is used to embed video content directly into a web page. It
allows you to provide a seamless video playback experience for your website visitors.

<video width="640" height="360" controls autoplay muted>

<source src="promovideo.mp4" type="video/mp4">

RAJENDRA JOTAWAR 27
Module 1 Introduction

In this example, we have an HTML document that uses the <video> element to embed a
video file named "promovideo.mp4." The controls attribute adds video controls (play, pause,
volume, etc.) to the video player so users can interact with it. The width and height attributes
specify the dimensions of the video player.

The <source> element is used to specify different formats of the video

file and their corresponding MIME types. The text "Your browser
does not support the video element." serves as a fallback message for
browsers that do not support the <video> element.

Just like with the <audio> element, you can provide multiple <source>
elements to support different video formats for broader browser
compatibility:

<video controls width="640" height="360">

<source src="sample.mp4" type="video/mp4">

<source src="[Link]" type="video/webm">

Your browser does not support the video element.

</video>

FORMS

The most common way for a user to communicate information from a Web browser to the
server is through a form. XHTML provides tags to generate the commonly used objects on a
screen form. These objects are called controls or widgets. There are controls for single-line
and multiple-line text collection, checkboxes, radio buttons, and menus, among others. All
control tags are inline tags.

The <form> Tag:

All of the controls of a form appear in the content of a <form> tag. A block tag, <form>, can
have severaldiff erent attributes, only one of which, action, is required. The action attribute specifies
the URL of the application on the Web server that is to be called when the user clicks the Submit

RAJENDRA JOTAWAR 28
Module 1 Introduction

button. Our examples of form elements will not have corresponding application programs, so the
value of their action attributes will be the empty string ("").

Remember to replace "sample.mp4" and "[Link]" with the actual paths to your video
files.

The <input> Tag:

Many of the commonly used controls are specified with the inline tag <input>, including those for
text, passwords, checkboxes, radio buttons, and the action buttons Reset, Submit, and plain.

❖ Text Box
✔ It is a type of input which takes the text.

✔ Any type of input can be created using <input>

✔ The type attribute indicates what type of input is needed for the text box, the value should be
given as text.

✔ For any type of input, a name has to be provided which is done using the name attribute.

✔ The size of the text can be controlled using the size attribute.

✔ Every browser has a limit on the number of characters it can collect. If this limit is
exceeded, the extra characters are chopped off. To prevent this chopping, maxlength
attribute can be used. When maxlength is used, users can enter only those many
characters that are given as a value to the attribute.
<html>
<head>
<title>Text Box</title>
</head>
<body>
<form action = " ">
<p>
<label>Enter your Name:
<input type = "text" name = "myname" size = "20" maxlength = "20" />
</label>
</p>
</form>
</body>
</html>

RAJENDRA JOTAWAR 29
Module 1 Introduction

Password Box

If the contents of a text box should not be displayed when they are entered by the user, a password
control can be used.
In this case, regardless of what characters are typed into the password control, only bullets or
asterisks are displayed by the browser.

<html>

<head>

<title>Password Box</title>

</head>

<body>

<form action="">

<p>

<label>Enter the email ID:

<input type="text" name="myname" size="24" maxlength="25" />

</label>

</p>

<p>

<label>Enter the password:

<input type="password" name="mypass" size="20" maxlength="20" />

</label>

</p>

</form>

</body>

</html>

RAJENDRA JOTAWAR 30
Module 1 Introduction

Radio Button

Radio buttons are special type of buttons which allows the user to select only individual option Radio
buttons are created using the input tag with the type attribute having the value radio.
When radio buttons are created, values must be provided with the help of value attributes. All the radio
buttons which are created would have the same name. This is because the radio buttons are group
elements.
If one of the radio buttons has to be selected as soon as the web page is loaded, a checked attribute should
be used. The value also would be checked.
<html>
<head>
<title>Radio Button</title>
</head>
<body>
<h3>Who is your Favourite Actor?</h3>
<form action="">
<p>
<label><input type="radio" name="act" value="one"/> Puneeth Rajkumar</label><br>
<label><input type="radio" name="act" value="two"/> Sudeep</label><br>
<label><input type="radio" name="act" value="three"/> Darshan</label><br>
<label><input type="radio" name="act" value="four"/> Shiva Rajkumar</label>
</p>
</form>
</body>
</html>

RAJENDRA JOTAWAR 31
Module 1 Introduction

Check Box
Check box is a type of input using which multiple options can be selected.
Check box can also be created using the <input> tag with the type having the value “checkbox”. During
the creation of the check box, the value should be provided using the value attribute.
All the checkboxes which are created would have the same name because they are group elements. If
one of the check boxes has to be selected as soon as the page is loaded, the checked attribute should be
used with the value checked.

<html>
<head>
<title>Check Box</title>
</head>
<body>
<h3>Who is your Favourite Actress?</h3>
<form action="">
<p>
<label><input type="checkbox" name="act" value="one"/> Ragini</label><br>
<label><input type="checkbox" name="act" value="two"/> Ramya</label><br>
<label><input type="checkbox" name="act" value="three"/> Aindritha</label><br>
<label><input type="checkbox" name="act" value="four"/> Radhika</label><br>
<label><input type="checkbox" name="act" value="five"/> Rakshitha</label>
</p>
</form>
</body>
</html>

RAJENDRA JOTAWAR 32
Module 1 Introduction

The <select> Tag

Menu items is another type of input that can be created on the page. To create the menu item, <select>
tag is used.
To insert the item in the menu, <option> tag is used.
<html>
<head>
<title>Menu</title>
</head>
<body>
<p>
JCE Branches - Information Science, Computer Science, Electronics, Electrical, Mechanical
</p>
<form action="">
<p>With size = 1 (the default)</p>
<select name="branches" size="1">
<option>Information Science</option>
<option>Computer Science</option>
<option>Electronics</option>
</select>
</form>
</body>
</html>

If you give <select name = "branches" size = “3”>, then you will get a scroll bar instead of drop down
menu. It is as shown in the output given below:

RAJENDRA JOTAWAR 33
Module 1 Introduction

The <textarea> Tag

Text area is a type of input using which multiple statements can be entered. Text area is created using
<textarea> tag. Text area should have the name.
During the creation of the text area, it should be mentioned how many sentences can be entered. This is
done using rows attribute.
Similarly, it should also be mentioned how many characters can be entered in a line. This is done using
the cols attribute.
If the value given to rows is exceeded i.e. if users enter sentences more than specified, the scroll bar
automatically appears.

<html>
<head>
<title>Text Area</title>
</head>
<body>
<form action="">
<h3>Enter your comments</h3>
<p>
<textarea name="feedback" rows="5" cols="100"></textarea>
</p>
</form>
</body>
</html>

RAJENDRA JOTAWAR 34
Module 1 Introduction

The Action Buttons

The Reset button clears all of the controls in the form to their initial states. The Submit button has two
actions: First, the form data is encoded and sent to the server; second, the server is requested to execute
the server- resident program specified in the action attribute of the <form> tag. The purpose of such a
server-resident program is to process the form data and return some response to the user. Every form
requires a Submit button. The Submit and Reset buttons are created with the <input> tag.

<!DOCTYPE html>
<html>
<head>
<title>Action Buttons</title>
</head>
<body>
<form action="">
<p>
<input type="submit" value="Submit"/>
<input type="reset" value="Reset"/>
</p>
</form>
</body>
</html>

RAJENDRA JOTAWAR 35
Module 1 Introduction

NOTE: A plain button has the type button. Plain buttons are used to choose an action. Example of a
Complete Form:
<!DOCTYPE html>
<html>
<head>
<title>Complete Form</title>
</head>
<body>
<h1>Registration Form</h1>
<form action="">
<p>
<label>Enter your email id:
<input type="text" name="email" size="24" maxlength="25" />
</label>
</p>
<p>
<label>Enter the password:
<input type="password" name="password" size="20" maxlength="20" />
</label>
</p>
<p>Sex</p>
<p>
<label><input type="radio" name="sex" value="male"/>Male</label>
<label><input type="radio" name="sex" value="female"/>Female</label>
</p>
<p>Which of the following Accounts do you have?</p>
<p>
<label><input type="checkbox" name="accounts" value="gmail"/>Gmail</label>
<label><input type="checkbox" name="accounts" value="facebook"/>Facebook</label>
<label><input type="checkbox" name="accounts" value="twitter"/>Twitter</label>
<label><input type="checkbox" name="accounts" value="googleplus"/>Google+</label>
</p>
<p>Any Suggestions?</p>

RAJENDRA JOTAWAR 36
Module 1 Introduction

<p>
<textarea name="feedback" rows="5" cols="100"></textarea>
</p>
<p>
<input type="submit" value="Submit"/>
<input type="reset" value="Reset"/>
</p>
</form>
</body>
</html>

Framesets
The number of frames and their layout in the browser window are specified with the <frameset> tag.
A frameset element takes the place of the body element in a document. A document has either a body
or a frameset but cannot have both.
The <frameset> tag must have either a rows or a cols attribute. (or both) To create horizontal frames,
rows attribute is used.

RAJENDRA JOTAWAR 37
Module 1 Introduction

To create vertical frames, the cols attribute is used.

The values for these attributes can be numbers, percentages and asterisks.

Two or more values are separated by commas & given in quoted string. To Demonstrate Horizontal
Frames using rows Attribute
<html>
<head>
<title>Frameset Rows</title>
</head>
<frameset rows = "*,*">
<frame src = "[Link]"/>
<frame src = "[Link]"/>
</frameset>
</html>

To Demonstrate Vertical Frames using cols Attribute

<html>
<head>

RAJENDRA JOTAWAR 38
Module 1 Introduction

<title>Frameset Cols</title>
</head>
<frameset cols = "25%,25%,25%,25%">
<frame src = "[Link]"/>
<frame src = "[Link]"/>
<frame src = "[Link]"/>
<frame src = ""/>
</frameset>
</html>

Note: Here, the programs img..html, [Link], [Link], are programs to display image,audio and
video. They must be coded separately.
<!DOCTYPE html>
<html>
<head>
<title>Text Box</title>
</head>
<body>
<form action="">
<p>
<label>Enter your Name:
<input type="text" name="myname" size="20" maxlength="20" />
</label>
</p>
</form>
</body>
</html>

RAJENDRA JOTAWAR 39
Module 1 Introduction

Mark tag

<p>This is an example <mark>highlighted text</mark> in HTML.</p>

RAJENDRA JOTAWAR 40
Module 1 Introduction

Question Bank
1. Explain audio and video tag with an example.
2. Define HTTP. Explain the different phases of HTTP.
3. Give the general structure of XHTML and explain it. Give one simple example.
4. Discuss the basic structure of a HTML5 webpage.
5. Write the difference between HTML and XHTML.
6. Explain logical and physical markup.
7. Explain the following tags with examples:
(i) Heading tag (ii) Hypertext link tag (iii) Image tag (iv) Audio and video tags
(v) Progress tag
8. Briefly explain the following:
(i) URL (ii) MIME (iii) Web server (iv) Web browser
9. Demonstrate the general structure of XHTML and explain it. Give one simple
example.
10. List and explain any three from elements in HTML5 with a suitable example.
11. Explain the rules of HTML.
12. Create unordered list of 5 fruits and ordered list of 3 flowers.

RAJENDRA JOTAWAR 41