~~~~=================-----

- - - - • ~ n e t Techno_logies -------

Program 1 ~~~~~;~;~~~~~~~~;~~~-
_!)emonstrate E-Mail working ( en ,ng '
~~~=;;d~·~i~~R;ec~e~iv~i~nig~, ~~~~~~~~~~:~~:=~~:::~~~~:
~fo~rw~;a~r~d~)
t demonstrate E-ma1•1 w orking• Gmail is a widely used email service
Let us consider Gmail as an exampIe O . & Protocol) and IMAP /POP3 (Internet Message
SMTP cs· pie Mail Trans1er
provided by Google. It supports both im . . SMTP is utilized when sending emails, alloWing
ffi P t I 3) for email transm1ss1on.
Access Protocol/Post O ce ro oco Th rotocols like IMAP and POP3 are used when
• ·1 t the recipients' servers. e p
Gmail to transfer outgoing mai O . . . mail from the server, allowing users to view their
receiving emails; these protocols help Gmail fetch incoming
emails from any device .
. 1.
Step 1: Sending an Email

1. Open a web browser and go to Gmail's website.

2. Enter the email ID and password to login.
3. Click on the 'Compose' button, usually found on the top left corner.
4. In the 'To' field, type in the email address of the recipient.
5. If needed, add more recipients in the 'Cc' or 'Bee' fields.
6. Write a brief, relevant line in the 'Subject' field to indicate the topic of the email.
7. In the main body field, type the content of the email.
8. If there are files to send along with the email, click on the 'Attach files' icon (usually represented by a
paperclip) and select the files.
9. Review the email for any errors or omissions.
10. Click on the 'Send' button to send the email.

1. Once logged into the Gmail account, the 'lnbox' can be found on the left side panel.
2. Click on 'lnbox'.
3. New emails will be visible in the list. Click on any email to open and read it.
4. If the email has any attachments, they can be opened or downloaded by clicking on them.

1. Open the email intended to be forwarded by clicking on it in the 'Inbox'.

2. At the bottom of the email, find the 'Forward' button or icon (usually denoted by an arrow) and dick
on it.

3. This will open a new email window with the content of the original email in the body.
4. In the 'To' field, type in the email address of the person to whom the email is being forwarded.
5. If needed, additional text can be added to the email before forwarding.
6. Review the email.
7. Click on the 'Send' button to forward the email.
 How to create, org . Appendix A : Lab_P_ __
~-=-=-----2..~~a~n~••:ze "1eetin . ------ rograms •
----·- ... _
0

zoom and Google Meet are popula ct· . 9 •n Zoorn/ G

. r lglta} corn oogleMeet
ice webinars, and Video conferences Th rnunication t 1 --
Lge h . •
technology for t e1r functionality. VOiP .
ese platfi oo s that allo
orrns heavily 1
~-;-~~=--=----_J
w users to cond .
. . Is a tech re y on Voic uct onhne meetin s
ng connection instead of a regular anal nology that all e Over Internet P g,
en og phone li E ows Voice 11 rotocol (VOiP)
which are then transmitted over th . ne. ssentialli it c ca s to be made using •
eir . e internet Th. ' onverts the vo. . an internet
during meetings on Zoom and Google M • Is technology facil ·t ice signals into digital signal
. . eet. The 1 ates real-tim . s,
provide h1gh-quahty audio transmissio . use of VOiP technol e audio communication
' n, resulting i ff• . ogy ensures that b h
participants geographical locations n e 1c1ent and effect' . ot platforms can
. ive commumcati
Creating a Meeting in Zoom: on regardless of the

1. Log into the Zoom web portal.

2. Click on "Schedule a Meeting" i th .
n e top right co Of
3. Choose the meeting title descri f ( . rner the homepage.
, p ion optional) dat d .
4. Select the meeting duration Pie ' e, an time.
• ase note that the durati • I
won't end after this length of time. on is on y for scheduling purposes. The meeting
5. Select the time zone of the meeting.
6. Set up the meeting ID and passcode for security purposes.
ra 7• Decide on advanced o~tions like enabling a waiting room, allowing join before host, muting participants
on entry, and automatically recording the meeting.
8. Finally, click on the "Save" button to create the meeting.
Organizing a Meeting in Zoom:
1. After the meeting is created, an invitation can be sent to participants.
2. The host can click on "Copy the invitation," then paste that information into an email and send it to the
participants.
3. During the time of the meeting, the host can start the meeting by logging into their Zoom account,
navigating to the "My Meetings" section, and selecting "Start" for the scheduled meeting.
4. Participants join the meeting by clicking on the link in the email.
Creating a Meeting in Google Meet:
1. Go to Google Calendar and sign in.
2. Click on the "+ Create" button on the top left side to create a new event.
3· Add a title to the event, and set the date ao d time. . .
. . . b entering their email addresses. .
4. Chck on ''.Add guests" to add part1c1pants ~ "This will automatically generate a unique meeting Imk
S. Click on ''.Add Google Me~t video conferencing.
that can be used to join the meeting. "
. l'k n"Save. I'k"S d"
6- Once all the details are filled 1n, c ic O d n invitation email to the gueS ts • C ic en
. ·f h reator wants to sen a
7· A prompt will appear asking 1 t e c
to send the invitation.
Organizing a Meeting in Google Meet: . taining the meeting link. d d
. ail invitation con • . th event in Google Calen ar an
1. Participants will receive an em h duled time by opening e
. at the sc e
2. The host can start the meeting
selecting the Google Meet link. . . k at the scheduled time.
. b clicking the 1in
They can join the meeting Y
 Technologies
A.4 • Internet
.b t 5 of the input tags (text box, multiline lextbo
x, OPfion
using various attra u e
Create a form by
Program 3 button, check bo.x)

<! DOCTYPE html>

<html> 11

<body> ·t" method="post >

<form action="/subm1 " >Firs. t Name·</label><br>
"fname . "f • 11
f
<label or= name= 11 fname ><br><br>
II

"t t" id= name

<input type= ex
-" scri tion"> Descr iption :</lab el><b r>
11
<label for- de p. . name=11description ></tex tarea> <br>< br>
II

<texta rea id="descr1pt1on

<label for="gender">Gender:</label><b r>

11 d value= "male "> II

<input type="radio" id="male11 name= gen er

<label for="male">Male</label><b r> 11 11
11 11 der" value= femal e >
<input type="radio" id= female
11
name= gen
<label for="female">Female</label><br><br>

<label for="i nteres ts">In terest s:</la bel>< br>

11 intere sts" value ="spo rts 11 >
<input type="checkb ox" id= sports "11
name=
<label for="s ports" >Spor ts</lab el><br > 11
type=" checkbox" id= "music name=" intere sts" value= "music >
II
<input
<label for="music">Music</label><br><br>

<input type="submit" value="Submit">

</form>
</body>
</html>
Output Explanation

0 [Link] X This is a simple HTML form that's meant to collect some

basic user inform ation. The form has fields for a user's
1E- ➔ C CD File I D:/[Link] th
fir st name, a descri ption, the user's gender, and eir
First Name: interests.
[ Srikanth
The first name and descri ption fields are text inputs
d6fi~
Description: where users can type their information. The gen I t either
0 f-i:
•
iers two radio button s allowing a user to se ec utuallY
rangalo re
J 'MaIe, or ,Female'. These radio buttons are m .
.
excIusive, meani ng only one can be selecte a 'SportS,
d t a wne,
Gender. Th ·
@Male e intere sts field presen ts two checkboxes for . 5
and 'M usic · , bOth opoon •
0Fetna1e , allowi ng users to select one or · the fori,,r11.

p· 11 .
ina Y, a 'Subm it' button is provided to submit
Interests: Th • " ·ndicatin g
e form's action attribu te is set to "/submit 'i sent
D SPorts
D Music that wh en the form is submi tted, the data will be ~ rrn is
. "
to the "/sub m1t URL for processing.. . When the o ·t''
"/5ubftll
[SubmiU subm·1tted, the form data will be sent to the

URL using the HTTP POST method.

 program 4 Create a simple HTML Page b .
~---
1• ----- -=-. :.:_ Y_: u::s :•n~ g~s on, e f
TYPE htm > •
0 the b . o •

<1[)(JC Qs1c IQgs (h .

<htm
• 1> YPerfink Illa
<head> ' rquee, image)
<title>Amazon Sho ppin g</t itle>
</head>
<body>
<h3>Welcome to the Amazon Shop ping Info Page
!</hl>
<p>
<a href ="ht tps:/ /ww [Link] azon .in/"
deals and offe rs. targ et=" blank " >Vi . t
</p> - s1 Amazon India</a> for exciting

<marquee>Check out the

late st deal s and offe rs on Amazon Indi· a.r
</marquee>
Hurry, they won't last long!

<img sre=" htt ps

height=" 200" > : //WWW •gstat i c • com/ webp / ga llery 3 / 1. sm. png" alt= "Amazon Image" width=" 200"
</body>
</html>

Output

0 Amazo n Shopping

f- ➔ C © File I D':/HT_:M
- - - - - --- -- - ~t./U~·n:ks~.H~TM;:;_l ~_..::::.;;---=-=~~~_
:_--

Welc ome to the Amazon Sbopping Info Page!

. •• deals and offers.
Visit Amaz on India for exc1tmg India! .Hnny. they won't last tong!
Chec k o11tth e latest deals and 0 ffets an Amazoo

there I·saheading
0n this webpa ge, 1· ked will open
E-:xp~l.:a::na~t~io~n:_L_ _ _ _ _ _-=-;:. " mazo n Shop Ping".erlink that,
when c ic '
·th the title 'A e's also a hYP
l'he- above HTML code crea tes a we b p age•ng WI
Jnfo page.1"• Ther the late
st deals on
t • to check out
s at1ng, "Welcome to the Ama zo n Shop pl
brow ser ta b • t encourages users £200
the Amazon India • d·mensions o . h
l'h
web page in a new
e Webpage also displ ays a s cro
11· g marq uee te
in
xt tha
URL, with d fined ~
1
n for the irnage, wh1c
ource
Amazon India, stati ng they won
't last Jong. orn a specified ~ded as a des criptIO
e Joaded fr age", is pro
F·
'.naUy, there 's an imag e on t he webp ag , " azon Im
"alt" text, :Arn ails to Joad-
~IJceJs in widt h and heig ht. The ·f the image f
can be used by scree n read ers or i
 ~----- -----:.... ith-rffUIUp•Sr ..,rr
w
s Create a web page
Program

/* externa 1 • css */

h3 { kgreen; ·f·
color: dar . 1 sans -ser1 ,
font-fam1·iy·. Aria ,
}

. h {
[Link]-par agrap
color : darkb lue, sans- serif ;
"ly· verda na,
- MIil
;:~:: :~::: ~Spx; _..P-
•Afi .
~h ll@ iii iii ff i· - . 1
<!DOCTYPE html>
<html>

<title>Web Page with Diffe ren t css

<head> Style s</ti tle>
<style>
/* Internal or Document Styl es*/
h2 {
color: red;
font- famil y: 'Times New Roman', Time,
• s serif ;
}

[Link]-paragraph {
color: orange;
font-family: Georgia, serif ;
font- size: 16px;
}
">
</ style>
L/ext erna · css
</head> rel=" styles heet" type= "text / css" href= "D: /HTM
<link 1

. line
a [Link] wi"th Inlin css.<
e CSS</hl>/p>
<hl style= "colo r:blue ; font- famil y:He lvetic a; ">Th is is
<body> wi in
is a parag raph
<p style= "colo r:pur ple; font- fami ly:He lveti ca; ">Th is
th
<h2>This is a Heading with Inter nal CSS< /h2>
inter nal CSS · </p>
<p class=" intern al-pa ragra ph"> This is a parag raph with

<h3>This is a Heading With Exter nal CSS</h3>

</body> exte rnal CSS • </p>
<p class :"ext ernal -para graph " >This is a Parag raph with
</html>
 0 Web Page with Diffe
~tCSSS t) ><
+
I fa ➔ C m [Link]-
\!J I 0:/HTMlJ
[Link]

This is a Headin -
g With lnline css
This is a paragraph with inline css

This is a Head ing ,vith 1

nternalCSS
This is a paragraph ·with internal CSS.

This is a Heading With External css

This is a paragraph with external css.

Explanation

The HTML document employs three types of CSS: inline, internal, and external.
' :he inline style is directl y applied to the HTML elements using the style attribute
; this is demonstrated
1n the <hl> and the first <p> tags.
' The interna l style is defined within the <style> tags inside the <head> section
of the HTML document
and is applied to the <h2> tag and the paragra ph with class internal-paragrap
h.
' Finally, the externa l CSS is linked to the HTML document using the <link>
tag in the <head> section.
th
The CSS rules defined in the externa [Link] file are applied to the <h3> tag and th
e paragraph wi class
external-paragraph.
t ut back to the user
Program 6 Write a CGI sample program to sen d ou P
C . ct with backend
sed b web servers to mtera .
ommon Gateway Interfa ce (CG!) is a standar d method u y dis supported by a wide vanety of
ap I' . web pages an • d to
Ianp !Cations. It can be used to create dynami c content on
F the purpose ofthis program, Python'dWillthrough
be use th
e
ereguages
t including Python Perl, C, C++, and so on. or
' t to the user. The following steps th
will gu1 e
A ache server and
a e a simple CGI script that will return an outpu
Proces f . w· dows system, starting from installing
s O setting up the enviro nment in a in
e P
CGI program-
PYtho • •• d running the
d finally writing an
n, configuring Apache to support CGI, an
·- • •IWTW
- l•illin
•- • load/) and down Joad the
e com/down .)
. /WWW·apacbeloung • 2-bit or 64-b1t •
1. Visit the Apache Lounge website (hrtps./ stein's architectUre (3
b sed on the sy • rrator).
2 approp riate version of Apache a r k _,. Run as adminJs
· Extract the downlo aded file to C:\ . tive rights ([Link]-c ,c_ d pressing Enter.
3 . h drnin1stra he24\bin an
· Open the Command Prompt wit a . d c:\Apac
4 . by tYJ>IIlg c
· Navigate to the Apache bin directory
---~o
. in [Link] -k install and pressing Enter.
11 A ache as a semce by typ g and press Enter. If Apache starts without any e
5. Insta P d k start rror ni
A he type http .exe - r) click on C:\Apac he24\bin \httpd.e xe essages
6. To start pac , ful (
the installation was success • o ,

Step 2: Install Python

.. . . Pyth website (https:// [Link] [Link] /downlo ads/win dows/) and d°Wnloact th
1. V1s1t the off1c1a1 on
e
latest Python installer.
2. Run the installer, ensure ''.Add Python to PATH" is checked, and follow the prompts to install PYtho n.

Step 3: Configure Apache for CGI

1. Open the Apache configuration file located at C: \Apache 24 \ conf\htt [Link] in a text editor.
2. Uncomment the following lines (remove the # at the start of the line):
LoadModule cgi_module modules/mod_cgi.so
AddHandler cgi-scri pt .cgi .py
3. In the same file, find the <Directory> section and change the Options line to:
Options Indexes FollowSymlinks ExecCGI
4. And add the following line:
AddHandler cgi-scri pt .cgi .py
5. Change the ScriptAlias as shown below:
ScriptAl ias /cgi-bin / "C:/Apa che24/c gi-bin/"
6. Save and close the file.
7. Restart Apache by opening the Command p . . .
typing [Link] -k restart. rom pt as admm1s tra tor, navigati ng to C: \Apache2 4\ bm and

Step 4: Create and Run the CGI Script

In the C·\ h
. • apac e\Apache24\cgi-bin dire
2· Wnte the folloWing Pyth . ctory, create a new file called [Link]:
Code
#!E:/Python/pytho
..!'[Link]
-;:rt~~~~~o~n= ===============================~-
n .exec=o=de==1n~t~o~th~e=~fi~le~: h
# Change the path if Python is installed in different pat
print("Content-T .
print () YPe • text/htm l") # HTML 15• followin g
# blank 1·
print( "<html><b ine require d, end of headers
:----=--_.:_::::::~o~dy><hl>Hello
3. Save and dosethe file. ---= -· BCA Student
------..::.._ :_ s, Welcome to CGI</hl></body></html>
'')

4. Open a web browser and n .

correctly, "Hello BCA av1gate to [Link] o eefl set~P
- - - - - - ~ ·- - - Students, Welcome to CGJl'~alhost/cgi-bin/[Link]. If everything has b
----- - • should be displaye d in the browser.
 Appendi)( A : lab p
rograrns
'
-
locaihosttcgi-binfhAll
'
-
"[Link]

➔ C
LI Suggested Sites 0
Imported Ftorn IE 0
Hello B C A s . IBF-21118) (CRDB C.
. ii CollabN~Subve,.;..

tndents, Welcome to CGJ

Explanation

e (CG!)
• The Co mm on Gat ewa y Inte rfac
ers and external programs
p act~ as a bridge between web serv
allo win g the ser ver to han d off the rocess1ng of a request to t 1
prog ram, and then serve the
,
th 1. an ex erna
res ult of tha t pro ces sin g bac k to the Apache server
• e c _1en t. In the context of the provided example,
~
is con fi red to han dle C
dynamic creation of web
se to clie GI
nt scri
req pts
ues usm g Python. This setup allows for the
ts.
con ten t 1n res pon
nt navigates to http://
hon scr ipt cal led hel lo.p y is exe cuted on the server-side whenever a clie
• The Pyt ll HTML document that
pt is specifically designed to output a sma
loc alh ost /cgi -bin /he llo. py. Thi s scri script begins
ssa ge "He llo BCA Stu den ts, Wel come to CG!!" on the browser. This Python
disp lays the me ute the script using
she ban g line ( # ! E : /Py tho n/p yth on . exe), which tells the server to exec
wit h the
the Pyt hon inte rpr eter .
s to specify that the content type will be "text/html", followed
• TTP hea der Finally; the script prints an
•
~he n pr~ nt~ the H . me nt to indicate the end of HTTP headers.
• The scr ipt page with the text
!me wh ich IS a req mre . h client's browser, is rendered as a web
by a bla nk ived by t e
HTML doc um ent wh ich , wh en rece
lco me to CG I"· . It listens for incoming client requests, runs
"Hello BCA Stu den ts, We • 1role in this process. it back to the client as an HTTP response.
Ser ver pla ys a cruc 1~ d sends
• The Ap ach e HT TP • ca ture s its output, an
the req ues ted Pyt hon scn pt, P

• g tabl e tag
Cre ate Tim e-T abl e us1n

<!DOCTYPE htm l>

<html>
<head>

<tit le> Tim e Tab le< /tit le>

</head>
<body>

/h2 >
<h2>Weekly Cla ss Sch edu le<

<table bor der= "1" >

<tr>
<th >Da y</t h>
th
<th >9:0 0 - 10: 0e< / >
/P th
<th >l0 :00 - 11: ee< / >
th
<th >ll: 30 - 12: 3e< / >
~/tr >
 <tr> /td> td>
<td>Monday< h elegies</
<td>Internet Tec·~eering</td> Algorithms</td>
<td>Softwa re. Engi • of
and Analysis
<td>The Design
</tr>
<tr> /td>
<td>Tuesday< h logies</td>
<td>Internet Tec_no ring</td> ·thms</td>
<td>Softwar: Eng1nee
and Analysis of Algor1
<td>The Design
</tr>
<tr> d </td>
<td>Wednes ay logies</td>
t Techno
<td>Interne E gineering</td> "thms</td>
<td>Softwar: n Analysis of Algor1
<td>The Design and
</tr>
<tr> /td>
<td>Thursday< chnologies</td>
<td>Internet Te. in </td>
<td>Softwar: Engineer lgsis of Algorithms</td>
<td>The Design and Ana y
</tr>
<tr>
<td>Friday</td> 1 ies</td>
td>Internet Techno og
< ·neering</td>
<td>Software Eng1 . f Algorithms</td>
<td>The Design and Analysis o
</tr>
</table>

</body>

~ Suggested Sites LI
n rmported from IE O [BF-21118) (CRDB C... ■ CollabNet Subversa~.. 0 Shared D

Weekly Class Schedule

j Day j[ 9:00 -10:00 ]L

10:00 - 11:00 ][ 11:30 - 12'.30 f Alg~
jMonday l[Intcmet Tecbnologiesj~oftware Engineenn~[The Design and Anal~ O Alga
!Tuesday l[Intcmet Tecbnolog~f§oftware Bngineenn~[The Design and~s ofAl ~
jWednesdayjiimemetTecbnolog~~oftware Bngineenn~[The Design andAnal~s 0! A l ~
jThunday ]ikemet Tecbnolo~ ~ Engiu~fnie Design [Link]~ f A l ~
~riday J[!ntemet Tecbnologi~~oftware ~ ~ f n i e Design and Analysis 0
0
 fiplanation
Appendix A : Lab Prograrns
0

• r=h~i;s~co~d~e~ge~n~e~r~a~te~s~a~s~i~tn~p~le~ttTrMMitL~t~b;l;;;;;;;;~;;;~=========J
II d f h a e representin
represents a ay o t e Week (Monday t F . g a WeekJy class schedule. Each row in the table
• '
°
10·00, 10:00-11:00, ll:30-12·30) The 11 riday), and each column represents a time slot (9·00-
• ce s Within the tab( i d· .
particular time slot on a given day.
T e n icate Which subject is scheduled for a
he <table> tag is used to create the table d h .
s:t
•
tag.
• •
W1thm eac
h
row, t
h
e
h (table 'an eac row in the table is created using a <tr> (table row)
<td> (table data) tag is used to> create header) tag is used to create headers for each column' and the
cells.

• In this specific table, the subjects - "Internet Technologies", "Software Engineering", and "The Design
and Analysis of Algorithms" - are scheduled for the same time slots each day. This can be modified as
per the actual class schedule by simply replacing the text Within the respective <td> tags.
Program 8
Creation of Frames in browser window using HTML.
Let us create a ra
f me-based HTML layout that uses three separate HTML es: menu. '
[Link]. fi l html [Link], and

Step 1: Create the [Link] file

~
This file will con~1n

Code ~-;·~;a~s~i~m~p~l~:e=li=s~~t=o=f=In=d=ia=n==~o=o=~d=s·====================================
[Link]
<!DOCTYPE html>
<html>
<body>
<h2>Menu</h2>
<ul>
• i</li>
<li>B1ryan . k n</li>
<li>Butte r Chic e/li>
r Tikka<
<li>Panee . </li>
<li>Dal Ma khan1
</ul>
</body>

11 ~
L:<'.!...a/iht~tmEll>iii~;=,1~,1,rr~~~::
aurant.
• - • ·ptiono f the rest
desert
This file will contain a

Code [Link]
<! DOCTYPE html>
dishes.</p>
<html> l •cious
a variety of de i
serve
<body> /h2> taurant! we
<h2>Content< ur Indian food res
<p>Welcome to 0

</body>
</html>
 Internet Technologies

Step 3: Create the [Link] file

.. . tion about the restaurant.
This file will contain add1t1onal tnforma

Code [Link]
<!DOCTYPE html>
<html>
<body>
<h2>Info</h2> f m 10am to 10pm everyday.</p>
<p>We are located at Main Street and open ro
</body>
</html>

Step 4: Create the main frameset HTML file

• t h ree separate frames and each frame will load one of the above HTML
This file will divide the webpage into
files.
Code [Link]
<!DOCTYPE html>
<html>
<frameset cols="20%,60%,20%">
<frame src="[Link]" name="menu_frame">
<frame src="[Link]" name="content_frame">
<frame src="[Link]" name="info_frame">
</frameset>
</html>
In the frameset HTML file, the '<frameset>' tag is used to split the webpage into columns. The 'cols' attribute
defines the width of each frame (in this case, the webpage is divided into three frames with widths of 20%,
60%, and 20% respectively). The '<frame>' tag is used to specify the source HTML file for each frame.
To view the frame-based layout, simply open the frameset HTML file in a web browser. The browser will load
the content of each specified HTML file into its corresponding frame.
Output

0 ,[Link]

8
~ Suggested Sit6, Q lmported From fE O lBF-21118t [CRDB r ..
;1 "" ■ CollabNet Subversi... " Shared Documents

Menu Content <./

Info <.b
• Biryani
• [Link] Welcome to our Indian food JOaDJ•to
tea•,-~ nl' We are located at Main Street and open frOJJl
- ~ a u l ! we serve a
• Paneer Tik:ka 16.t>a.i evecyday.
variety of delici00s dishes_
• Dal Makhani
 EtPlanation
Appendix A : Lab Programs
fra 0

e-based HTML setup diVides a Webpage · t th •

h 10 0
1
ree [Link],
m - [Link], content tinJ, and •nfo.htin1. The [Link]
ThisML file file lists variouseach
or frames, loading
Indian separate
foods, aserving as
f{T restaurant's menu. The ~[Link] file contains a brief description of the restaurant, while [Link]
the •des additional information about the restaurant's location and opening hours. The main frameset HTML

~
proVI 1
d 5P• the <frameset> and <fratne> tags, defines the layout and proportions of the frames on the webpage
file, usin~ •
ec1f1es w h" ch HTML file each fraine should load. When this main HTML file
1 1 • • is opened
· in a· web browser,
an
pres _ 9
itProgram
e:_~~~-======-=-=~~~=~===
===========~
einn~ts~a~u~n~~~ ;==~;==~==::~~
============:::::~~;;~~;;;;~;;~
•t· d view with distinct sections for the menu, content, and add1tiona in ormation.
1
Write a java script progran, to create dialogue boxes using a er, c
<.tOOCTYPE html> • I I onflrm and prompt methods
<html>

<head> "tle>News 1 e tter Subscription</ti

. t" tle>
<tl • e="text/javascrip >
<script typ cribeNewsletter() { subscription
function subs about the newsletter kly newsletter");
// alert
alert( "Welcome to ou r website! We offer a wee
the user

// to subscribe to our
h e user wants
ask l.• f t'be_ you like
confirm( "Would •be
to subscr1 newsletter. ;, II ) '
•

var subscri - . . s true

subscribe l

• f the user clicks "OK"' the subscr1·ption:", '"');

I I l.( subscri• be) the
if { user, s email nter your ema1· 1 address for
address
// ask for t{"Please e message
• 1 = promp a thank you " ")·
var emai ail, show " + email + . '
if the Us
provided an em ation ema1· 1 at
1 er confirm
t (
I' fI (email) { has been made. ").'
address
[Link] wil 1 receiv
• e a d an empty em_ailtion
} ler "Than l" or entere No subscr1p
a {
else . d an ema1. 1 address.
clicked "Cance
// the user t prov1 e
alert("You did no
}
fi rm dialog 'f yo u change your mind.");
} else { er "on t he con ibe later 1
the us [Link] ''Cancel always subscr
c ou can
// ("No pr oblem, y
alert
}

}
</script> tter() ">
</head> · te ! </hl>
bscribe Newsle
-"SU to our WebS 1
<body onload-
<hl>Welcome
</body>
</html>
- - - • • Internet Technolo gies

Output
V
(J X
fU + !iii - ~'Wi 1~ ~- •
News~tter Subscription ➔ X (D File I c:~racli:ce/At~.. c i!:JIC ft
~ --·----
This page says
Thts page says -
would you lr-c to subscribe to our newslettet?
1·1.~
. "
Welcome to our wN>s1tet we ouer a ~~ekly newsletter

- •1 3

-
- Newsletter Subscription

ae
This page says • This page says
Please enter your ematl address. for the subscription! Thank you for subscribing to our n~letter! Yo~will receive a
[Link] confitrma.t·K> n email at [Link]
ro.r• ... bhshers@[Link].

-
,..---
" Newsletter Subscription

~➔ C
..
(DFile ·--~·· .··•• □
~ Suggested Sites fl Imported From IE O [Bf~2tl 18] ICRDB C...

Welcome to our Website!

Explanation

In this example, the JavaScript function subscri beNews letter() is called when the page
is loaded due to the
onload attribut e in the body tag. The function uses alert() to inform the user about the
newsletter, confirmO
to ask if they want to subscribe, and prompt Q to ask for their email addres s if they
choose to subscribe.
Depending on the user's responses, further alert() dialog boxes are display ed to provide
feedback or confirm
the action.

Program 10
Write a iava script program on Form Validations.
<!DOCTYPE html>
<html>
<head>
<title> Registr ation Form</title>
<script type=" text/jav ascript ">
functio n validateForm() {
// retriev e form data
var username = document f II •
var email = document for• orms[
[ reg1str t.
a ion
II] [ 11
username value;
11 •
11
].
•
var password = docume ms registr ation II] [ II • II
[Link][11r . . email ] .value;
egi st ration password ].value ; 11
][
11
11
 // check if a11
Appendix A . L
if (username =- ~:lds are fille • ab Programs
a 1e rt ( "Al 1- I I em • d
field ai1 ==== ""
return false; s must be filled 11 Password --
} out."); --

// validate email
var re= /\S+@\ format
if(' S+\.\S+/·
.[Link](email) ,
alert("Invalid ) {
return false·, email format.");
}

// check password l
X if ( ength
[Link] <
{
6)
alert( "Password must
return false·, be at least 6 haracters long.");
c
}

// if all validations pass

alert("Registra tion successful 11
)·

return true•, • ,
}
</script>
</head>
<body>
<hl>Registratio n Form</hl>
<form name=" registration" onsubmi t= return validateForm() >
11 11

11
Username: <input type="text name= username ><br><br>
11 11

11 11
Email : <input type="text name= email ><br><br>
11

11
11
Password: <input type="password name= password ><br><br>
11

11

<input type="submit" value="Register >

</form>
</body>
to the </html>
.firmO Output
scribe.
+
__
Jnfirm
,
0
~ ➔ C
Registration form

© File
><

I e:JPractice/form
vat·d [Link]
' a

O This page says

l; Suggested Sites lmP0rted from IE
-- Registration successful.

Registration Forro -
------ :J
Usemame: ~IS~ri~ka~n~th~ ----

I
Email : [Link] ers@9~

Pass\vord: •······..•-·

[Register]
 Internet Technologies
0

Explanation • •
. . F () is called when the form 1s submitted due
In this example, the JavaScript function vahdate ormks th t all fields are filled, that the email 1·s • to the
. f tion chec a in av
onsubmit attribute in the form tag. Th is unc If any of these checks fail, an alertQ ct· alid
· t 1 ast 6 characters 1ong. 1alo •
format, and that the password is a e nt the form from being submitted If 11 g Is
displayed with an error message and false is returned todprevlel w the form submission • a checks
. . d d t e is returne to a O •
pass, a success message 1s d1splaye an ru
rf fO ur arithmetic operations: Addition, Subtr .
Write a Java script program to pe orm action,
Program 11 Multiplication and Division on two numbers.

<!DOCTYPE html>
<html>
<head>
<title>Arithmetic Operations</title>
<script type="text/javascript">
function performOperations() {
// retrieve numbers from the form
var numl = parseFloat([Link]("numberl").value);
var num2 = parseFloat([Link]("number2").value);

// perform operations and display results

[Link]("addition").innerHTML = "Addition: "+ (numl + num2);
document. getElementByid ("subtraction"). innerHTML = "Subtraction: " + (numl - num2);
document. getElementByid ("multiplication") . innerHTML = "Multiplication:" + ( numl * num2);
[Link]("division").innerHTML = "Division: "+ (numl / num2);
}
</script>
</head>
<body>
<hl>Arithmetic Operations</hl>
<form>
Number 1: <input type="number" id="numberl"><br><br>
Number 2: <input type="number" id="number2"><br><br>
<input type="button" value="Calculate" onclick="performOperations()">
</form>
<p id="addition"></p>
<p id="subtraction"></p>
<p id="multiplication"></p>
<p id="division"></p>
</body>
</html>
 Appendix A : Lab Programs
0

,,,,..- --::::
I0
3-~utp~u~t ;J1:;;;;;;~;;:::::::+ 4l;f;~;J'===================J
Arithmetic Operatipns )( ...
Explanation

• This HTML code is designed to perform and

I; :::--:-:"":""""--;--::~:;----:.:::::::.::::::::::::::::::::::.:::.::::: display the results of basic arithmetic operations:
f- ➔ C (D Fite I C:/Practice/Arit... le ' addition, subtraction, multiplication, and division.
tZ Suggested Sites [.Sl
-
lmported From IE O (BF-2H The webpage comprises a form with two input
v- fields for the user to input two numbers, and a
button to initiate the calculations.
Arithm~tic Operations
• The calculations are performed by the JavaScript
2-0_ _ _ _ _ _--JJ
Number 1: ll.-- function performOperationsQ, which is called
when the button is clicked. This function retrieves
Number 2: l.--140_-_ _ _ _ _--..J_] the values entered by the user from the input
fields, converts them into floating-point numbers
[cafcqJate] using the parseFloatO function, performs the
arithmetic operations on them, and outputs the
Addition:60 results in four <p> elements with respective
IDs. The results are displayed on the webpage
Subtraction: -20
immediately after the button is clicked, providing
Multiplication: 800 an interactive experience for the user.

Division: 0_5

Program 12 Create a web site of our College.

I 1. Create [Link] file.

Code [Link]
<! DOCTYPE html>
<html>

<head> Computer Applications</title>

<title>Skyward Institute of
<style>
body {
font-family: Arial, sans-serif;
}
header {
background-co 1or: #f8f9fa;
padding: 20px;
text-align: center;
}
nav {
margin: 20px e;
text-align: center;
}
[ • Internet Technologies

nav a {
margin: 0 15px;
}
</style>
</head>
<body>
<header> . f C mputer Applications Logo" width="l0e">
• II lt="Skyward Inst1tute o o
• II
<1mg src= [Link] a . . </hl>
<hl>Skyward Institute of Computer Appl1cat1ons
<p>157, 3RD MAIN, CHAMRAJPET BANGALORE 560018</p>
</header>
<nav>
11
<a href= 11
[Link] >Home</a>
<a href= 11
[Link] >About Us</a>
11

<a href= 11
[Link] >Courses</a>
11

<a href= 11
[Link]">Contact Us</a>
</nav>
<main>
<h2>Welcome to Skyward Institute of Computer Applications</h2>
<p>We provide best training on computer application courses.</p>
</main>
</body>
</html>

This file represents the main page of the website with a header containing the logo (we need to provide a logo.
jpg image file in the same directory) and the name of the institution, and a navigation bar with links to other
pages. The main section contains a welcome message.

2. Create on [Link] page for the About Us information:

Code [Link]

<!DOCTYPE html>
<html>
<head>
<title>About Us - Skyward Institute of Computer
</head> Applications</title>
<body>
<hl>About Us</hl>
<p>Skyward Institute of Computer A li . ·de
quality education in the field f PP cations was founded in 2010 with the aim to proVl
</body> o computer applications ... </p>
</html>
 APPend'
I)( A: L

Code [Link]
-
<!DOCTYPE html>
<html>
<head>
<title>C ou rses
</head> - Skyward of comput er A
<body> Institut e PPlicat·ions</t'1tle>

<hl>Cou rses</hl>
<h2>BCA</h2>
<h2>MCA</h2>
</body>
</html>

4. Create a contact. html page to provide contact information:

Code [Link]

<html>
<head> 1ons</t1tle>
Us - Skyward Institute of computer Applicat. •
<title>C ontact
</head>
<body>
560018</p>
<hl>Con tact Us</h1>
<p>Address: 157, 3RD MAIN, cHAMRAJPET BANGALORE
<p>Phone: +91-9611185999</P>
<p>Email: skyward,publishers@gmail,com</P>

</body>
In</html>
this ex h created a basic structure of a website with four pages. In a real-world scenario,
We w Id ' content css for st;yhng, possibly JavaScript for interactJVJty, and use better
ample we ave • • • • ••
ou need to add JJlore ' •
organiza tion of files ( e.g., separatin g css into its own file).
 Interne t Techno logies

Outpu t D
V

I stiture of Compute ><

@ Sk:ywaru n
_j

C © File I Ci/Practice/Coll••.:
+
~
lE3
* ft □
• •
••
~ ➔ ~2:: __:_ ----- - ~ [Bf-211181 {CRDB C.••
~ Suggest ed S1tes
. D lm orted from IE
P V

Skyward lnstilufe_ of
Gpmputer Applications
157l 3RD MAIN, CHAMAAJPETBANGALORE 560018

Home About Us Courses Contact Us

Welcome to Skyward Inst itute of

Computer Applications
we provide best training on computer application courses.

Explanation
. t·ons
• This set of code snippets forms the basic struct ure for the Skywa rd
Institu te of Comp uter Apphcabout. 1
website. The website is comprised of four separa te HTML pages : index.
html (the home page)b, ·ai·n1 as
html, [Link], and [Link]. Each page is styled with CSS rules,
with a focus on re ada 1 i...,,
. eludes a
seen in the choice of a sans-serif font and margi ns aroun d the naviga tion
bar. The home pag~ in links to
heade r with the institution's logo, name, and addres s, along with a naviga
tion bar that provides . i·tors,
the other pages. The main section of the home page presen ts a welco
me messa ge to th e si·te's vis
• The [Link] page provides information about the history, missio n, d Institute
and values ofthe SkyWa: ·tutioJl,
of Computer Applications. The [Link] page details the variou s course
s offered by the in st~dress,
while the [Link] page provides essential contac t inform ation includ
ing the institution's a be
phone number, and email. Despite the simplicity of the curren t design 11
the websi te's structure_ cga and
easily expanded to inc• lu de more
pages, content, and featur es as neede' d, while additiona I s cyhn
interactivity can be introduced through furthe r CSS and JavaScript.