Web Technologies : 22MCA24 Module 1

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
PPon 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.,
M

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.

Prof Minal Patil

1
Web Technologies : 22MCA24 Module 1

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.
PP
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
M
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.
▪ 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.

Prof Minal Patil

2
Web Technologies : 22MCA24 Module 1

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.
PP
Static web servers vs. Dynamic web servers
M

Prof Minal Patil

3
Web Technologies : 22MCA24 Module 1

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.

PP
M

Prof Minal Patil

4
Web Technologies : 22MCA24 Module 1

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.
PP
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.
M
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.

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

Prof Minal Patil

5
Web Technologies : 22MCA24 Module 1

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

PP
HTTP
M

Prof Minal Patil

6
Web Technologies : 22MCA24 Module 1

Request Phase:
PP
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
The following is an example of the first line of an HTTP request:
GET /storefront.html HTTP/1.1
M

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

Prof Minal Patil

7
Web Technologies : 22MCA24 Module 1

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

PP
M

Prof Minal Patil

8
Web Technologies : 22MCA24 Module 1

PP
M

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].

Prof Minal Patil

9
Web Technologies : 22MCA24 Module 1

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"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">

● 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
PPalways 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 = "http://www.w3.org/1999/xhtml">
● 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.
M
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"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<!-- complete.html
A document which must be followed throughout the notes
-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> My first program </title>

Prof Minal Patil

10
Web Technologies : 22MCA24 Module 1

</head>
<body>
<p>
My lovely students.!!
</p>
</body>
</html>

PP
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"
M
"http://www.w3.org/TR/xhtml11/DTD/
xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">

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>

Prof Minal Patil

11
Web Technologies : 22MCA24 Module 1

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>
PP My Name is Eva <br/>
I am from MCA
Department<br/>
JCE, Belagavi
</p>
</body>
</html>
M

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>

Prof Minal Patil

12
Web Technologies : 22MCA24 Module 1

<p><pre> My Name is Eva

I am from MCA Department
JCE, Belagavi
</pre></p>
</body>
</html>

PP
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>
M
<head>
<title> Headings </title>
</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>

Prof Minal Patil

13
Web Technologies : 22MCA24 Module 1

PP
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

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

▪ 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="EventBannerA3.jpg" alt="Example Image" width=250px>

Prof Minal Patil

14
Web Technologies : 22MCA24 Module 1

LISTS
PP
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>
M
<ul>
<li>Data Mining</li>
<li>Artificial Intelligence</li>
<li>Machine Learning</li>
<li>RPA</li>
</ul>

</body>
</html>

Prof Minal Patil

15
Web Technologies : 22MCA24 Module 1

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.
PP
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>
M
<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>
</ol>
</body>
</html>

Prof Minal Patil

16
Web Technologies : 22MCA24 Module 1

Nested Lists
<html>
<head>
<title> nested lists </title>
</head>
<ol>
PP <li> Information Science </li>
<ol>
<li>OOMD</li>
<li>Java & J2ee</li>
<ul>
<li>classes and methods</li>
<li>exceptions</li>
<li>applets</li>
<li>servelets</li>
</ul>
M
<li>Computer Networks</li>
<ul>
<li>Part 1</li>
<li>Part 2</li>
</ul>
</ol>
</ol>
</html>

Prof Minal Patil

17
Web Technologies : 22MCA24 Module 1

PP
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>
M
</head>
<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>

Prof Minal Patil

18
Web Technologies : 22MCA24 Module 1

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:

PP
▪
▪
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.

M
▪ The column can be created either by using <th> tag (stands for table header which is
suitable for headings) or <td> tag (stands for table data which is suitable for other
data).
<html>
<head>
<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>

Prof Minal Patil

19
Web Technologies : 22MCA24 Module 1

<td>MCA</td>
<td>2 years</td>
</tr>
</table>
</body>
</html>

PP
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="border">
M
<tr>
<th rowspan="2"> MCA </th>
<th>ISE</th>
</tr>
<tr>
<th>CSE</th>
</tr>
</table>
<p> Illustration of Column span</p>
<table border="border">
<tr>
<th colspan="2"> MCA </th>
</tr>
<tr>
<th>ISE</th>
<th>CSE</th>
</tr>
</table>

Prof Minal Patil

20
Web Technologies : 22MCA24 Module 1

</body>
</html>

The align and valign Attributes:

PP
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>
M
<title> Align and valign </title>
</head>
<body>
<p>Table having entries with different alignments</p>
<table border="border">
<tr align = "center">
<th> </th>
<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>

Prof Minal Patil

21
Web Technologies : 22MCA24 Module 1

<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>

PP
The cellpadding and cellspacing Attributes:
Cellspacing is the distance between cells.
Cellpadding is the distance between the edges of the cell to its content.
M
<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>

Prof Minal Patil

22
Web Technologies : 22MCA24 Module 1

</table>
</body>
</html>

PP
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>
M
<title>Simple Progress Tag Example</title>
</head>
<body>
<h1>Simple Progress Bar</h1>
<progress value="90" max="200"></progress>
</body>
</html>

Prof Minal Patil

23
Web Technologies : 22MCA24 Module 1

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>

PP
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.
M
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="sample.ogg" 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

Prof Minal Patil

24
Web Technologies : 22MCA24 Module 1

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">

PP
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.
M
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="sample.webm" type="video/webm">

Your browser does not support the video element.

</video>

Remember to replace "sample.mp4" and "sample.webm" with the actual paths to your video
files.

Prof Minal Patil

25
Web Technologies : 22MCA24 Module 1

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 button. Our examples of form elements will not have corresponding application programs,
so the value of their action attributes will be the empty string ("").
PP
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>

M
✔ 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>

Prof Minal Patil

26
Web Technologies : 22MCA24 Module 1

<label>Enter your Name:

<input type = "text" name = "myname" size = "20" maxlength = "20" />
</label>
</p>
</form>
</body>
</html>

Password Box
If the contents of a text box should not be displayed when they are entered by the user, a password
PP
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:
M
<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>

Prof Minal Patil

27
Web Technologies : 22MCA24 Module 1

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.
PP
<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>

<label><input type="radio" name="act" value="two"/>Sudeep</label>

M
<label><input type="radio" name="act" value="three"/>Darshan</label>

<label><input type="radio" name="act" value="four"/>ShivaRajkumar</label>

</p>
</form>
</body>
</html>

Prof Minal Patil

28
Web Technologies : 22MCA24 Module 1

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>

<body>
PP <head>
<title>Check Box</title>
</head>

<h3>Who is your Favourite Actress?</h3>

<form action = " ">
<p>
<label><input type="checkbox" name="act" value="one"/>Ragini</label>

<label><input type="checkbox" name="act" value="two"/>Ramya</label>

M
<label><input type="checkbox" name="act" value="three"/>Aindritha</label>

<label><input type="checkbox" name="act" value="four"/>Radhika</label>

<label><input type="checkbox" name="act" value="four"/>Rakshitha</label>

</p>
</form>
</body>
</html>

Prof Minal Patil

29
Web Technologies : 22MCA24 Module 1

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
PP<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)
<select name = "branches">
<option> Information Science </option>
<option> Computer Science </option>
M
<option> Electronics </option>
</select>
</p>
</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:

Prof Minal Patil

30
Web Technologies : 22MCA24 Module 1

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.

<html>
PP
If the value given to rows is exceeded i.e. if users enter sentences more than specified, the scroll bar
automatically appears.

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

Prof Minal Patil

31
Web Technologies : 22MCA24 Module 1

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.

<html>
<head>
<title> action buttons </title>
</head>
<body>
<form action=" ">
<p>
<input type="SUBMIT" value="SUBMIT"/>
<input type="RESET" value="RESET"/>
</p>
</form>
PP
</body>
</html>
M
NOTE: A plain button has the type button. Plain buttons are used to choose an action.
Example of a Complete Form:
<html>
<head>
<title> CompleteForm</title>
</head>
<body>
<h1>Registration Form</h1>
<form action=" ">
<p>
<label>Enter your email id:
<input type = "text" name = "myname" size = "24" maxlength = "25" />
</label>
</p>
<p>
<label>Enter the password:

Prof Minal Patil

32
Web Technologies : 22MCA24 Module 1

<input type = "password" name = "mypass" size = "20" maxlength = "20" />
</label>
</p>
<p>Sex</p>
<p>
<label><input type="radio" name="act" value="one"/>Male</label>
<label><input type="radio" name="act" value="two"/>Female</label>
</p>
<p>Which of the following Accounts do you have?</p>
<p>
<label><input type="checkbox" name="act" value="one"/>Gmail</label>
<label><input type="checkbox" name="act" value="two"/>Facebook</label>
<label><input type="checkbox" name="act" value="three"/>Twitter</label>
<label><input type="checkbox" name="act" value="four"/>Google+</label>
</p>
<p> Any Suggestions?</p>
<p>
<textarea name="feedback" rows="5" cols="100">
</textarea>
</p>
PP
<p>Click on Submit if you want to register</p>
<p>
<input type="SUBMIT" value="SUBMIT"/>
<input type="RESET" value="RESET"/>
</p>
</form>
</body>
</html>
M

Prof Minal Patil

33
Web Technologies : 22MCA24 Module 1

PP
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
M
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.
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 = "img.html"/>
<frame src = "audio.html"/>
</frameset>
</html>

Prof Minal Patil

34
Web Technologies : 22MCA24 Module 1

PP
To Demonstrate Vertical Frames using cols Attribute
<html>
<head>
<title>Frameset Cols</title>
</head>
M
<frameset cols = "25%,25%,25%,25%">
<frame src = "img.html"/>
<frame src = "audio.html"/>
<frame src = "video.html"/>
<frame src = ""/>
</frameset>
</html>

Prof Minal Patil

35
Web Technologies : 22MCA24 Module 1

Note: Here, the programs img..html, audio.html, video.html, are programs to display image,audio
and video. They must be coded separately.

PP
M

Prof Minal Patil

36
Web Technologies : 22MCA24 Module 1

<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>

Mark tag

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

PP
M

Prof Minal Patil

37