Internet Technology (3341604)
Practicals
Practical 1:-Create webpage using text formatting tags of HTML.
<!DOCTYPE html>
<html>
<head>
<title>Bold</title>
</head>
<body>
<!--Normal text-->
<p>Hello</p>
<!--Text in Bold-->
<p><b>Hello</b></p>
<!--Text in Strong-->
<p><strong>Hello</strong></p>
</body>
</html>
Practical 2:-Create webpage using table tags and list tags of HTML
table tag example :--
<!DOCTYPE html>
<html>
<head>
<style>
table {
width:100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
}
#t01 tr:nth-child(even) {
background-color: #eee;
}
#t01 tr:nth-child(odd) {
background-color: #fff;
}
#t01 th {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h2>Styling Tables</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>rahul</td>
<td>singh</td>
<td>12</td>
</tr>
<tr>
<td>manish</td>
<td>kumar</td>
<td>17</td>
</tr>
<tr>
<td>rashmika</td>
<td>mandana</td>
<td>24</td>
</tr>
</table>
<br>
list tags example:--
<!DOCTYPE html>
<html>
<body>
<h2>an ordered list of making tea</h2>
<ol>
<li>water</li>
<li>Tea leaves</li>
<li>sugar</li>
<li>milk</li>
<li>ginger</li>
</ol>
</body>
</html>
Practical 3:-Create webpage using HTML Hyper linking
<!DOCTYPE html>
<html>
<body>
<h2>hyper linking</h2>
<p>This is an link of youtube</p>
<p><a href="https://www.youtube.com">youtube</a></p>
</body>
</html>
Practical 4:- Create webpage to include image using HTML tag
<!DOCTYPE html><html><body>
<p>If a browser cannot find the image, it will display the alternate text:</p>
<img src="wrongname.gif" alt="Flowers in Chania">
</body></html>
<!DOCTYPE html>
<html>
<body>
<p>If a browser cannot find the image, it will display the alternate text:</p>
<img src="wrongname.gif" alt="Flowers in Chania">
</body>
</html>
Practical 5:- Create employee registration webpage using HTML form objects
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: black;
}
{
box-sizing: border-box;
}
.container {
padding: 16px;
background-color: white;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
{
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
}
.registerbtn:hover {
opacity: 1;
}
/* Add a blue text color to links */
a {
color: dodgerblue;
}
/* Set a grey background color and center the text of the "sign in" section */
.signin {
background-color: #f1f1f1;
text-align: center;
}
</style>
</head>
<body>
<form action="/action_page.php">
<div class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" id="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" id="psw" required>
<button type="submit" class="registerbtn">Register</button>
</div>
</body>
</html>
Practical 6:- Apply style sheet in Web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Using the CSS @import Rule</title>
<style type="text/css">
@import url("/examples/css/layout.css");
@import url("/examples/css/color.css");
body {
color:rgba(255, 102, 0, 0.712);
font-size:14px;
}
</style>
</head>
<body>
<div>
<h1>Importing External Style Sheet</h1>
<p>The layout styles of these HTML element is defined in 'layout.css' and colors in 'color.css'.</p>
</div>
</body>
</html>
Practical 7:- Create web page in which XML tags are used
<!DOCTYPE html>
<html>
<body>
<div id='showCD'></div><br>
<input type="button" onclick="previous()" value="<<">
<input type="button" onclick="next()" value=">>">
<script>
var i = 0;
var x;
displayCD(i);
function displayCD(i) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this, i);
}
};
xmlhttp.open("GET", "cd_catalog.xml", true);
xmlhttp.send();
}
function myFunction(xml, i) {
var xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("CD");
document.getElementById("showCD").innerHTML =
"Artist: " +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"<br>Title: " +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"<br>Year: " +
x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
function next() {
if (i < x.length-1) {
i++;
displayCD(i);
}
}
function previous() {
if (i > 0) {
i--;
displayCD(i);
}
}
</script>
</body>
</html>
Output of practical 7:--
 |
Practical 8:- Create web page to display simple text message using VBScript in ASP.
<!DOCTYPE html>
<html>
<body>
<%
response.write("<h1>Hello World!</h1>")
%>
</body>
</html>
Practical 9:- Create web page to generate grade sheet of student using VBScript in ASP.
marksheet.html
<%@ language= vbscript %>
<% option explicit %>
<Html>
<body>
<form method=post action="marksheet.asp">
<b><center><font color=red size=4>Enter Following Detail
</font></b>
<hr>
<table border=1 align=center>
<tr>
<td>Student Name</td>
<td><input type=text name=sn placeholder = "Full
Name"></></td>
</tr>
<tr>
<td>Enrollment No.</td>
<td><input type=text name=en placeholder=" Enrollment
Number "></></td>
</tr>
<tr>
<td>Institute</td>
<td><input type=text name=inst size=30 placeholder =
"College Name"></></td>
</tr>
</table>
<table border=1 align=center>
<CAPTION ALIGN="BOTTOM">*marks less than 70<CAPTION>
<tr>
<th>Subject Name</td>
<th>Marks</td>
</tr>
<tr>
<td>INFORMATION COMMUNICATION
TECHNOLOGY</td>
<td><input type=text name=ict size=7></td>
</tr>
<tr>
<td>OBJECT ORIENTED PROGRAMMING</td>
<td><input type=text name=oop size=7></td>
</tr>
<tr>
<td>FUNDAMENTALS OF SOFTWARE
DEVELOPMENT</td>
<td><input type=text name=fosd size=7></td>
</tr>
<tr>
<td>INTERNET TECHNOLOGY</td>
<td><input type=text name=it size=7></td>
</tr>
<tr>
<td>DATA MANAGEMENT</td>
<td><input type=text name=dm size=7></td>
</tr>
<tr>
<td></td>
<td><input type=submit value=submit></td>
</tr>
</table>
</form>
</body>
</html>
marksheet.asp
<html>
<head>
<TITLE>Grade Sheet</TITLE>
<LINK REL="STYLESHEET" HREF="table.css">
</head>
<% dim total, a, b, c, d, e, name, no, per, cl
a=request ("ict")
b=request ("oop")
c=request ("fosd")
d=request ("it")
e=request ("dm")
name=request("sn")
no=request("en")
cl=request("inst")
%>
<% total=a + 0 + b + c + 0 + d + 0 + e + 0 + f %>
<h1> GUJARAT TECHNOLOGICAL UNIVERSITY </h1>
<p>
Name : <%= name %>
<br>
Enrollment Number : <%= no%>
<br> Institute : <%= cl%> </p> <hr>
<table border=1 align=center>
<tr>
<th>Subject Name</th>
<th>Subject Code</th>
<th>Marks</th>
</tr>
<tr>
<td>INFORMATION COMMUNICATION TECHNOLOGY</td>
<td>3341601</td>
<td><%= a%></td>
</tr>
<tr>
<td>OBJECT ORIENTED PROGRAMMING</td>
<td>3341602</td>
<td><%= b%></td>
</tr>
<tr>
<td>FUNDAMENTALS OF SOFTWARE DEVELOPMENT</td>
<td>3341603</td>
<td><%= c%></td>
</tr>
<tr>
<td>INTERNET TECHNOLOGY</td>
<td>3341604</td>
<td><%= d%></td>
</tr>
<tr>
<td>DATA MANAGEMENT</td>
<td>3341605</td>
<td><%= e%></td>
</tr>
<tr>
<td colspan=2 align=right><b>Total</b></td>
<td><%= total%></td>
</tr>
</table>
<center>
<Hr><b>
<% per= (total * 100)\350
response.write "Percentage "
response.write per%>
</b><Hr>
<% if per >= 70 then
response.write "Congratulations You got First Class
with Distinction"
Elseif per >= 60 and per < 70 then
response.write "Congratulations You got First Class"
Elseif per >= 50 and per < 60 then
response.write "You got Second Class"
Elseif per >= 35 and per < 50 then
response.write "You got Pass Class"
Else
response.write "Sorry you are Fail"
End if
%>
table.css
table, td, th
{
border:1px solid green;
}
td
{
text-align:center;
}
th
{
background-color:green;
color:white;
}
h1
{
text-shadow: 5px 5px 5px #FF0000;text-align:center;
}
p
{
outline-style:groove;
outline-color:red;
font-family:"Times New Roman",Georgia,Serif;
text-align:center;
font-weight:bold;
}
Output of practical 9:--
 ){kind=link}
0 Comments