Scribd
Upload
9 views

web tech lab coding

The document contains various HTML outputs related to personal information, images with tables, accessing email addresses, creating arrays using JavaScript, and displaying a session counter. Each section includes HTML code snippets demonstrating different functionalities such as displaying personal bio-data, showing marks in a table format, and implementing a login form with session tracking. Additionally, it features links to other pages for hobbies and college information.

Uploaded by

Harshini Xerox
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

web tech lab coding

The document contains various HTML outputs related to personal information, images with tables, accessing email addresses, creating arrays using JavaScript, and displaying a session counter. Each section includes HTML code snippets demonstrating different functionalities such as displaying personal bio-data, showing marks in a table format, and implementing a login form with session tracking. Additionally, it features links to other pages for hobbies and college information.

Uploaded by

Harshini Xerox
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

CONTENT

S.NO DATE TITLE PAGE SIGNATURE


NO

1 Personal Information

2 Image with Table

3 Accessing E-Mail Address

4 Array using Java script

5 Display the session counter


1. Personal information
like.html
<html>
<title> Bcom CA </title>
<body background="file:///C:/Users/Raj/Downloads/desert.jpg">
<font face="Times New Roman" size=10 color=Blue>
<head><Center><u><b> BIO-DATA </b></u></center></head>
</font>
<br>
<br>
I am ABC,now am in 20 <br>
Am doing my final year Bcom CA ,,Sun Arts and Science College<br>
<br><b> THINGS I LIKE </b>
<ul>
<li> Surfing
<li> Photography
<li> Listening Music
<li> Social activities
<li> Playing outdoor games
<b> THINGS I DISLIKE </b>
<ol>
<li> Selfish
<li> Non-Veg
</li>
</ol>
<a href="dislike.html">To know about my hobbies click here </a>
</body> </html>
dislike.html

<html>
<body background="C:\Documents and Settings\Student\My Documents\My
Pictures\image\J0149018.JPG">
<font face="monotype corsiva" size=12 color=orange>
<head><center> HOBBIES</center></head>
<ul>
<li> Painting
<li> Drawing
<li> Playing
<li> Reading Magazine</li>
</ul>
</font>
<a href="like.html">Back</a>
</body>
</html>
OUTPUT:
2. Image with tables
<html>
<head><center><b>WORKING WITH IMAGE AND
TABLE</b></center></head>
<br>
<body style="color:MediumSeaGreen;" style="background-color:DodgerBlue;"
>
<img src="file:///C:/Users/Raj/Downloads/sea1.jpg" alt="Desert"
style="width:1300px;height:300px;">
<br><center><table align=center border=1>
<tr>
<th rowspan=2>Name</th>
<th colspan=5>Marks</th>
</tr>
<tr>
<font color="blue">
<th>ERP</th>
<th>MT</th>
<th>WT</th>
<th>VB</th>
<th>CA</th>
</font>
</tr>
<tr align=center>
<td>A</td>
<td>98</td>
<td>87</td>
<td>67</td>
<td>77</td>
<td>89</td>
</tr>
<tr align=center>
<td>B</td>
<td>89</td>
<td>78</td>
<td>76</td>
<td>77</td>
<td>90</td>
</tr>
<tr align=center>
<td>C</td>
<td>89</td>
<td>78</td>
<td>76</td>
<td>77</td>
<td>90</td>
</tr>
<caption align=top color="green"><b><br><font face="Times New Roman"
size=05 color=Green>III
BcomCA Marksheet</font></caption>
</table></center>
<br>
<a href="https://www.google.com"><i><center>To Search about table HTML
tags-Click here</center></i> </a></body></html>
OUTPUT:
3. Accessing E-mail address
<html>
<h1><center><font color="#33FFCC" face="Monotype Corsiva">SUN ARTS
AND SCIENCE
COLLEGE</font>
</center>
</h1>
<body backgorund="">
<font color="#990066">
<br>
<hr><b><u>About College </u></b>
<p> The College started in the year of 2010. Initially college started with UG
courses. Now
have also PG courses</p>
<h3>UG Courses </h3>
<ul>
<li> B.Sc., Maths</li>
<li> B.Sc., Chemistry</li>
<li> B.Sc., Physics</li>
<li> B.Sc., Computer Science</li>
<li> B.A., English</li>
<li> B.Com., Computer Application</li>
</ul>
<h3> PG Courses </h3>
<ol>
<li> M.Sc., Maths</li>
<li> M.Sc., Physics</li>
<li> M.A., English</li>
</ol>
</font>
<a href="mailto:INFO@SUN>IN>?Subject=Re: To ensure process">click here
to mail</a>
<address>www.sun.in</address><h6>
<script language="javascript">
var k;
k=Date(k);
document.write(k);
</script>
<hr>
<font color="#990066">
<b><u>About Myself </u></b>
<p> <ul><li>I am able to handle multiple tasks on a daily basis.</li>
<li>I use a creative approach to problem solving.</li>
<li>I am always energetic and eager to learn new skills.</li>
</ul></p></font>
<br>
<br>
<font color="Green"<a align=right><u>Conditions and terms apply</u></h6>
</body>
</head>
</html>
OUTPUT:
4. Array using java script
<html>
<head>
<title>To create an array of 10 elements and display its contents</title>
</head>
<body>
<script type="text/javascript">
var a=new Array();
alert("Enter Name");
for (i = 0; i <10; i++) {
a[i]=prompt("Enter the array value");
}
document.write("<b><br>Given values are:</b><br><br");
for (i = 0; i < a.length; i++) {
document.write(a[i] + "<br>");
}
</script>
</body>
</html>
OUTPUT:
5. Display the session counter

login.html

<!DOCTYPE html>
<html>
<body>
<style>
Body {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
button {
background-color: #4CAF50;
width: 100%;
color: orange;
padding: 15px;
margin: 10px 0px;
border: none;
cursor: pointer;
}
form {
border: 3px solid #f1f1f1;
}
input[type=text], input[type=password] {
width: 100%;
margin: 8px 0;
padding: 12px 20px;
display: inline-block;
border: 2px solid green;
box-sizing: border-box;
}
button:hover {
opacity: 0.7;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
margin: 10px 5px;
}
.container {
padding: 25px;
background-color: lightblue;
}
</style>
<center> <h1> Student Login Form </h1> </center>
<form id="myForm" action="/action_page.php">
First name: <input type="text" name="fname" value=""><br>
Last name: <input type="text" name="lname" value=""><br>
</form>
<button onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myForm").elements[0].value;
document.getElementById("demo").innerHTML = x;
}
</script>
<script defer src="index.js"></script>
<div>you have visited this web page:</div>
<div class="website-counter"></div>
<button id="reset">Reset</button>
</body>
</html>

index.js

var counterContainer = document.querySelector(".website-counter");


var resetButton = document.querySelector("#reset");
var visitCount = localStorage.getItem("page_view");

// Check if page_view entry is present


if (visitCount) {
visitCount = Number(visitCount) + 1;
localStorage.setItem("page_view", visitCount);
} else {
visitCount = 1;
localStorage.setItem("page_view", 1);
}
counterContainer.innerHTML = visitCount;

// Adding onClick event listener


resetButton.addEventListener("click", () => {
visitCount = 1;
localStorage.setItem("page_view", 1);
counterContainer.innerHTML = visitCount;
});
OUTPUT:

You might also like