Scribd
Upload
4 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
Available Formats
Download as PDF, TXT or read online on Scribd
4 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
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