Webtech File.docx

Galgotias College of Engineering and
Technology
Session: 2021-22
Web Technology Lab
[KCS 652]
Bachelor of Technology
CS-AI
Submitted To: Submitted By:
Ms. Sonal Shukla Anuj Kumar Kem
Roll no: 2000971520007
Sem: VI

S No. Program Date Sign
1 Write HTML/Java scripts to display your CV in
navigator, your Institute website, Department
Website and Tutorial
website for specific subject
2 Write an HTML program to design an entry
form of student details and send it to store at
database server like SQL,
Oracle or MS Access.
3 Write programs using Java script for Web Page
to display browsers information.
4 Write a Java applet to display the Application
Program screen i.e. calculator and other.
5 Writing program in XML for creation of DTD,
which specifies set of rules. Create a style sheet
in CSS/ XSL & display
the document in internet explorer.
6
7

Program -1
Objective: Write HTML/Java scripts to display your CV in navigator, your Institute website,
Department Website and Tutorial website for specific subject
Theory:
HTML stands for Hyper Text Markup Language. HTML is the computer language that is used to
create documents for display on the Web. Many editors exist to create Web Pages Word, Front
Page, and Dream Weaver are just a few. Nevertheless, each of these software programs (editors)
performs the exact same task they all generate HTML language. The HTML language consists
of a series of HTML tags. Learning HTML involves finding out what tags are used to mark the
parts of a document and how these tags are used in creating an HTML document. Tags are
instructions that tell your browser what to show on a Web page. They break up your document
into basic sections. All tags start with a < (left bracket) and end with a > (right bracket).
Code:
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Program-1</title>
<style>
/* Style for navigation bar */
div{
color: rgb(7, 167, 36);
}
nav {
height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #e5971a;
overflow-x: hidden;
padding-top: 20px;
}
/* Style for navigation bar links */
nav a {
display: block;
color: black;
text-align: left;

padding: 16px;
font-size: 20px;
text-decoration: none;
}
/* Style for active link */
nav a.active {
background-color: #de3f13;
color: white;
}
body {
background-size: cover;
}
</style>
</head>
<body background="lab1.avif">

<nav>
<a href="https://drive.google.com/file/d/1BJTwWnLNAjwgdgsgdsfbsdvs"><b>CV</b></a>
<a href="https://galgotiacollege.edu/welcome-to-gcet"><b>Institute</b></a>
<a href="https://galgotiacollege.edu/department-of-cs-
engineering"><b>Department</b></a>
<a href="https://www.javatpoint.com/css-navigation-bar"><b>Tutorial</b></a>
</nav>
<div >
<p align="center" ><h1 align="center">Web Technology Lab</h1>
<br><h2 align="center">Program-1</h2>
<br><h3 align="center"><b>By: Anuj Kumar Kem</b></h3>
</p>
</div>
</body>
</html>

Program -2
Objective: Write an HTML program to design an entry form of student details and send it to
store at database server like SQL, Oracle or MS Access.
Theory:
File Select box The file fields allow a user to browse for a local file and send it as an attachment
to the form data. It normally rendered as a text box with a button that enables the user to browse
for a file. However, the user can also type the path and name of the file in the text box.This is
also created using an <input> element, whose type attribute value is set to file. Textarea Textarea
is a multiple-line text input control that allows a user to enter more than one line of text. Multi-
line text input controls are created using an <textarea> element. Select Boxes A select box is a
drop down list of options that allows user to select one or more option from a pull-down list of
options. Select box is created using the <select> element and <option> element. The option
elements within the <select> element define each list item. Submit and Reset Buttons A submit
button is used to send the form data to a web server. When submit button is clicked the form data
is sent to the file specified in the form’s action attribute to process the submitted data. A reset
button resets all the forms control to default values
Code:
<html>
<head>
<title>Student Registration Form</title>
<style>
body{
background-color: rgb(172, 220, 155);
}
h2{
font-family: Sans-serif;
font-size: 24px;
font-style: normal;
font-weight: bold;
color: #141618;
text-align: center;
text-decoration: underline
}
table{
font-family: 'Calibri';
color:white;
font-size: 16px;
font-style: normal;
font-weight: bold;
background: linear-gradient(to bottom, #30464e 0%, #303fb6 100%);
border-collapse: collapse;

border: 4px solid #000000;
border-style: double;
}
table.inner{
border: 20px
}
input[type=text], input[type=email], input[type=number]{
width: 50%;
padding: 6px 12px;
margin: 5px 0;
box-sizing: border-box;
}
input[type=submit], input[type=reset]{
width: 15%;
padding: 8px 12px;
margin: 5px 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>Student Registration Form</h3>
<table align="center" cellpadding = "10">

<tr>
<td>First Name</td>
<td><input type="text" name="FirstName" maxlength="50" placeholder="ANIKET" />
</td>
</tr>

<tr>
<td>Last Name</td>
<td><input type="text" name="LastName" maxlength="50" placeholder="TRIPATHI"/>
</td>
</tr>

<tr>
<td>Email ID</td>
<td><input type="email" name="EmailID" maxlength="100"
placeholder="trianiket2001@gmail.com"/></td>
</tr>

<tr>
<td>Mobile Number</td>
<td>

<input type="text" name="MobileNumber" maxlength="10" placeholder="6388xxxxxx"/>
</td>
</tr>

<tr>
<td>Gender</td>
<td>
<input type="radio" name="Gender" value="Male" />
Male
<input type="radio" name="Gender" value="Female" />
Female
</td>
</tr>

<tr>
<td>Date of Birth(DOB)</td>
<td>
<select name="BirthDay" id="Birth_Day">
<option value="-1">Day:</option>
<option value="1">1</option>

</select>
<select name="BirthdayMonth" id="Birth_Month">
<option value="-1">Month:</option>
<option value="January">Jan(1)</option>
<option value="February">Feb(2)</option>
<option value="March">Mar(3)</option>
<option value="April">Apr(4)</option>
<option value="May">May(5)</option>
<option value="June">Jun(6)</option>
<option value="July">Jul(7)</option>
<option value="August">Aug(8)</option>
<option value="September">Sep(9)</option>
<option value="October">Oct(10)</option>
<option value="November">Nov(11)</option>
<option value="December">Dec(12)</option>
</select>
<select name="BirthdayYear" id="Birth_Year">
<option value="-1">Year:</option>

</select>
</td>
</tr>

<tr>
<td>Address<br /><br /><br /></td>
<td><textarea name="Address" rows="10" cols="50"></textarea></td>
</tr>

<tr>
<td>City</td>
<td><input type="text" name="City" maxlength="50" placeholder="Greater Noida"/>
</td>
</tr>

<tr>
<td>Pin Code</td>
<td><input type="Number" name="PinCode" maxlength="6" placeholder="201310"/>
</td>
</tr>

<tr>
<td>State</td>
<td><input type="text" name="State" maxlength="50" placeholder="Uttar Pradesh"/>
</td>
</tr>

<tr>
<td>Country</td>
<td><input type="text" name="Country" placeholder="India" /></td>
</tr>

<tr>
<td>Hobbies <br /><br /><br /></td>
<td>
<input type="checkbox" name="HobbyCricket" value="Cricket" />
Cricket
<input type="checkbox" name="HobbySinging" value="Singing" />
Singing
<input type="checkbox" name="HobbyDancing" value="Dancing" />
Dancing
<input type="checkbox" name="HobbyExploring" value="Exploring" />
Exploring
<br />
<input type="checkbox" name="HobbyOther" value="Other">
Others
<input type="text" name="Other_Hobby" maxlength="50" placeholder="Ex- Sleeping"
/>
</td>
</tr>

<tr>
<td>Qualification <br /><br /><br /></td>
<td>
<br/>
<input type="checkbox" name="HighSchool" value="High School" />
High School(10th)<br>
<input type="checkbox" name="HigherSchool" value="Higher School" />
Higher School(12th)<br/>
<input type="checkbox" name="Graduation" value="Graduation" />
Graduation(Bachelors)<br/>
<input type="checkbox" name="PostGraduation" value="Post Graduation" />
Post Graduation(Masters)<br/>
<input type="checkbox" name="Phd" value="Phd">
Phd
</td>
</tr>

<tr>
<td>Courses<br />Applied For</td>
<td>
<input type="radio" name="CourseBCA" value="BCA">

BCA(Bachelor of Computer Applications)<br>
<input type="radio" name="CourseBCom" value="B.Com">
B.Com(Bachelor of Commerce)<br>
<input type="radio" name="CourseBSc" value="B.Sc">
B.Sc(Bachelor of Science)<br>
<input type="radio" name="CourseBA" value="B.A">
BA(Bachelor of Arts)<br>
<input type="radio" name="CourseMCA" value="BCA">
MCA(Master of Computer Applications)<br>
</td>
</tr>

<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT:

Program -3
Objective: Write programs using Java script for Web Page to display browsers information.
Theory:
The navigator object contains information about the browser. Navigator Object Properties
Property Description appCodeName Returns the code name of the browser appName Returns the
name of the browser appVersion Returns the version information of the browser cookieEnabled
Determines whether cookies are enabled in the browser geolocation Returns a Geolocation object
that can be used to locate the user’s positionlanguage Returns the language of the browser online
Determines whether the browser is online platform Returns for which platform the browser is
compiled product Returns the engine name of the browser userAgent Returns the user-agent
header sent by the browser to the server
Code:
<!DOCTYPE HTML>
<html>
<head>
<title>
Get browser details through JavaScript
</title>
</head>
<body>
<style>
body {
background-image:
url('https://upload.wikimedia.org/wikipedia/commons/0/01/Mozilla_Firefox_2004_Log
o.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>

<h1 align="center">Getting Browser details</h1>
<div id="example"></div>
<script>
txt = "<p><b>Browser CodeName:</b> " + navigator.appCodeName + "</p>";
txt+= "<p><b>Browser Name: </b>" + navigator.appName + "</p>";
txt+= "<p><b>Browser Version: </b>" + navigator.appVersion + "</p>";
txt+= "<p><b>Cookie enabled:</b>" + navigator.cookieEnabled + "</p>";
txt+= "<p><b>Geolocation: </b>" + navigator.geolocation + "</p>";

txt+= "<p><b>Language used: </b>" + navigator.language + "</p>";
txt+= "<p><b>Online: </b>" + navigator.onLine + "</p>";
txt+= "<p><b>Platform: </b>" + navigator.platform + "</p>";
txt+= "<p><b>Product: </b>" + navigator.product + "</p>";
txt+= "<p><b>User agent: </b>" + navigator.userAgent + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
</body>
</html>
OUTPUT:

Program -4
Objective: Write a Java applet to display the Application Program screen i.e. calculator and
other.
Theory:
An applet is a Java program that runs in a Web browser. An applet can be a fully functional Java
application because it has the entire Java API at its disposal.
These import statements bring the classes into the scope of our applet class −
 java.applet.Applet
 java.awt.Graphics
Without those import statements, the Java compiler would not recognize the classes Applet and
Graphics, which the applet class refers to.
Code:

Program -5
Objective: Writing program in XML for creation of DTD, which specifies set of rules. Create
a style sheet in CSS/ XSL & display
the document in internet explorer.
Theory:
Code:

Webtech File.docx

Recommended

Recommended

More Related Content

Similar to Webtech File.docx

Similar to Webtech File.docx (20)

Recently uploaded

Recently uploaded (20)

Webtech File.docx