Scribd
Upload
7 views17 pages

Web Tech Lab File

The document outlines a series of web technology lab experiments conducted by Pradyumn Vashisht, focusing on HTML basics, creating tables, and designing a CV. Each experiment includes the aim, programming used, and the resulting HTML code along with learning outcomes. The content demonstrates various HTML elements and styling techniques applied throughout the experiments.

Uploaded by

211127
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views17 pages

Web Tech Lab File

The document outlines a series of web technology lab experiments conducted by Pradyumn Vashisht, focusing on HTML basics, creating tables, and designing a CV. Each experiment includes the aim, programming used, and the resulting HTML code along with learning outcomes. The content demonstrates various HTML elements and styling techniques applied throughout the experiments.

Uploaded by

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

Web Tech Lab File

(Session-2023)

Name: Pradyumn Vashisht


Roll no.:211127
Batch:CS41

Enrollment No.:211127
WEB TECH LAB JUIT CSE/IT

Experiment-0
Aim-Learning basics Of HTML
Editor And Programming Used:
1.HTML
2.Notepad

Program:
<html>
<head>
<title> learning html</title>
</head>
<style>
table,td,th{
border:1px solid black;}
mark{
background-color: red;
color: white;
}
</style>
<body>
<!--headings-->
<h1> Web tech lab </h1>

<!--paragraph-->
<p>hi my name is Pradyumn Vashisht</p>

<!--line break-->
<br>this</br> is a web tech lab

<!--thematic change-->
<hr>Web tech lab</hr>

<!-- abbreviations 'abr' -->


<p><abbr title="HYpre text Markup Lnaguage">HTML</abbr></p>

Enrollment No.:211127
<!--address-->
<address>Written by:<a href="[email protected]">Pradyumn
Vashisht</a>.<br>Visit us at JUIT</br></address>

<!--bold text "b">

<p>This is me <b>Pradyumn Vashisht</b></p>

<!--bdi-->
<p>This is a <bdi>web tech lab</bdi></p>

<!--bdo(the paragraph goes left to right)-->


<p><bdo dir="rtl">Hypre text markup language</bdo></p>

<!--blockquote(removes indentation)-->
<blockquot cite="https://www.wikipedia.org/">Wikipedia is hosted by the
Wikimedia Foundation, a non-profit organization that also hosts a range
of other projects.</blockquote>

<!--cite(title of the creative work)-->


<p>I read a book named <cite>Three men in a boat bhy
JEROME.K.JEROME</cite></p>

<!--code(is used to define a piece of computer code)-->


<p>This is a <code>HTML</code> doc</p>

<!--del(defines that a text has been deleted )-->


<p>I love <del>sleeping</del> travelling</p>

<!--dfn(specifies a term that is going to be defined)-->


<p><dfn>HTML</dfn> is a basic web technology language</p>

<!--em(emphasize)-->
<p>Hi my name is <em>Pradyumn Vashisht</em></p>

<!-- i(defines a part of text in a different mood or voice) -->


<p>Hey there <br><i>Hey there</i></br><p>

<!-- ins(defines thata text has been added in a document)-->


<p>I love <del>blue</del> <ins> red</ins> color</p>

<!--kbd(defines keyboard input)-->


<p>Press<kbd>CTRL+C</kbd> to copy the text </p>

Enrollment No.:211127
<!--mark(highlights the text ) -->
<mark>HTML</mark>

<!-- meter & label(makes a interface as shown in the output)-->


<br>
<br>
<label for="Disk_c">Disk Usage C:</label>
<meter id ="Disk_c" value="3" min="0" max="10" 2 out of 100></meter>
</br>
</br>

<!--pre(this preserves space font and widht)-->


<p><pre>Hi guys this is Pradyumn Vashisht ans soon i will be going to
UK</pre></p>

<!-- progress(shows the progress made)-->


<label for="File">downloading progress:</label>
<progress id="File" value="32" max="100">32%</progress>

<!-- short quotation "q"-->


<p> <q>HTML hyper text markup language</q>This is a web tech lab where
you can learn web tech techniques</p>

<!--ruby text(rp)(makes the text invisible)-->


<p>this is a <rp>ruby text</rp></p>

<!--rt-->
<p><rt>hi guys</rt> this is tuf gaming</p>

<!--ruby-->
<p>this is a <ruby>html</ruby> doc</>

<!--s(defines that the text is no longer a text)-->


<p><s>there are only 5 tickets left</s></p>
<p><q>SOLD OUT</q></p>

<!--strong-->
<p> <strong>this is a impo text </strong></p>

<!--sub(subscript)-->
<p><sub>this is a subscript</sub></p>

<!--sup(superscript)-->
<p></sup>this is a superscript</sup></p>

<!--template-->
<p>press the below button</p>
<button onclick="showcontent()">Show the hidden content</button>

Enrollment No.:211127
<template><h2>ROG</h2><img src="download.jpg" width="214"
height="204"></template>
<script>
function showcontent(){
var temp=document.getelementbytagname("template")[0];
var clon=temp.content.clonenode(true);
document.body.appendchild(clon);
}
</script>

<!--input-->
<br></br>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname"><br>
</br>
<button>SUBMIT</button>

<!--textarea-->
<p>
<label for="html">review pf html</label></p>
<textarea id="html" name="html" rows="4", cols="50"></textarea>
<button>SUBMIT</button>

<!--select-->
<p>select your favorite car in the below options.</p>
<label for="cars">Choose the car:</label>
<select name="cars" id="cars">
<option value="volvo">VOLVO</option>
<option value="audi">audi</option>
<option value="rolls">rolls</option>
<option value="nissan">nissan</option>

<!--optgroup-->
<label for="cars">Choose the car:</label>
<select name="cars" id="cars">
<optgroup label="Mine">
<option value="volvo">VOLVO</option>
<option value="audi">audi</option>
</optgroup>
<optgroup label="to be owned">
<option value="rolls">rolls</option>
<option value="nissan">nissan</option>
</optgroup>
</select>

<!--fieldset-->
<h1>DETails</h1>
<fieldset>

Enrollment No.:211127
<legend>PERSONAL ACCOUNT</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname">

<label for="lname">last Name:</label>


<input type="text" id="lname" name="lname">

<label for="email">Email:</label>
<input type="text" id="email" name="email">

<label for="bday">Bday:</label>
<input type="text" id="bday" name="bday">

<!--datalist-->
<p>Select thye browser you love to use </p>
<label for="browsers">Choose your browser:</label>
<input list="browsers" name="browsers" id="browsers">
<datalist id="browsers">
<option value="safari"></option>
<option value="edge">
<option value="chorme">
<option value="firefox">
</datalist>
<input type="submit">

<!--img-->
<img src="download.jpg" alt="rog" widht="500", height="600"

<!--map and shape-->


<img src "download.jpg" alt="ROG" usemap="#rog" width="400",
height="379">
<map name="ROG"><area shape="rect" coords="34,44,270,350" alt="ROG"
href="https://rog.asus.com/in/">
</map>

<!--canvas-->
<canvas id="myCanvas"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 100);
</script>

<!--audio and source-->


<audio controls><source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg"></audio>

Enrollment No.:211127
<!--video-->
<video width="320" height="440" controls>
<sorce src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

<!--table-->
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>100$</td>
</tr>
<td>february</td>
<td>200$</td>
</tr>
</table>

<!--caption-->
<table>
<caption>MOnthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>100$</td>
</tr>
<td>february</td>
<td>200$</td>
</tr>
</table>

</body>
</html>

Enrollment No.:211127
Output:

Enrollment No.:211127
Learning Outcome:
In this experiment we learned hwo to design a basic web page using
different HTML tags and we tried different type of headings paragraphs
and links using heading tags and anchors tags.

Enrollment No.:211127
WEB TECH LAB JUIT CSE/IT

Experiment-1
Aim- 1.Write a HTML code to display the Education details in a “table”
2.Write a HTML code to display your CV.
Editor and Programming Used:
1.HTML
2.NOTEPAD
Program:
1.Program 1
<html>
<head><title>Educational Details</title></head>
<style>
table,td,th{
border:2px solid black;}

</style>

<body>
<h1 style="color:blue"><center>Educational
Details</center></h1>
<center> <table>
<tr>
<th> S.no </th>
<th> Course </th>
<th> Board/university </th>
<th> School/College </th>
<th> Year of Passing </th>
<th> Percentage </th>
</tr>
<tr>
<td>1.</td>
<td>10</td>
<td>CBSE</td>
<td>Chapslee </td>
<td>2019</td>
<td>79.5%</td>

</tr>
<tr>
<td>2.</td>
<td>12</td>

Enrollment No.:211127
<td>CBSE</td>
<td>Chapslee</td>
<td>2021</td>
<td>80.1%</td>
</tr>
</table></center>
</body>

Output:

2.Program 2
2. <html>
<head><title>My_CV</title></head>
<body>
<h1>Pradyumn Vashisht</h1>
<img src="photo.jpeg" height="100px" style="border-
radius:48px">

<h3>Contact:7807121721</h3>
<h4>Jaypee University OF Information Technology<br>
Waknaghat<br>Solan,173234</h4>

<h3>Profile</h3>
<p>Desires to be a Cyber Security officer.Been in the security
field from past three years and have an experience for over 3+ years in
Penetration testing.</p>
<h3>Education</h3>
<p><b>Jaypee University Of Information Technology</b><br>
Bachelor's of Technology in Computer Science<br>
2021-2025<br</p>CGPA:8.9</p><br>
<p><b>Chapslee School </b><br>
Grade 12<br>
2021<br>
Percentage:81%</p><br>
<h3>Experience</h3>
<p><b>Jaypee University Of Information Technology</b><br>
BTech CSE<br>
2021-2025</p>
</p>

Enrollment No.:211127
<h3>Interest</h3>
<p><ul>Coding</ul>
<ul>Listening music</ul>
<ul>Working Out</ul>
<ul>Travelling</ul></p>

</body>
</html>

Output:

Learning Outcome:
In this experiment , we first learned how to create a table and enter the
data and secondly, we created our CV in HTML and learned about different
Style Attributes.

Enrollment No.:211127
WEB TECH LAB JUIT CSE/IT

Experiment-2
Aim: Making format of the file
Editor and Programming used
1. HTML
2. Notepad

Program:
<!DOCTYPE html>
<html>
<body>
<br>
<h1 align="center">WEB TECH LAB JUIT-CSE/IT</h1>
<hr>
<h1 align="center"><font size="5">EXPERIMENT 1</font></h1>
<h1 align="left"><font size="4">1. Aim/Objective:</font></h1>
<p><b>.................................................................
</b></p>
<h1 align="left"><font size="4">2. Editor and Programming
used:</font></h1>
<p><b>.................................................................
</b></p>
<h1 align="left"><font size="4">3. Programm/code :</font></h1>
<p><b>.................................................................
</b></p>
<h1 align="left"><font size="4">4. Output/Page display:</font></h1>
<p><b>.................................................................
</b></p>
<h1 align="left"><font size="4">5. Learning outcome:</font></h1>
<p><b>.................................................................
</b></p>
<hr>
<br><p><pre>Enrollment number:....................

Enrollment No.:211127
Page number:........................</pre></p>
</body>
</html>

Output:

Learning Outcome:
In this experiment, we created the format of our file with the use of
various style attributes and hr tags.

Enrollment No.:211127
WEB TECH LAB JUIT CSE/IT

Experiment-3
Aim:
Write a HTML code to Design your CV

Editor and Programming used


1. HTML
2. Notepad

Program:

<html>
<head>
<title>Web tech lab 3</title>
</head>
<body bgcolor="#852D2D">

<div>

<h1 style="color:red;"><center>Pradyumn Vashisht</center></h1>


<hr>
<img src="photo.jpeg" height="110" widht="110"align="right">
<em>
<p><b>Date of Birth:</b>23<sup>rd</sup> October 2003<br>
<b>Birth Place:</b>Shimla<br>
<b>Father Name:</b>Vijayender Vashisht<br>
<b>Mother Name:</b>Shikha Vashisht<br>
<b>Permanent Address:</b>Raksha Bhawan ,Vijaynagar Totu,Shimla<br>
<b>Contact Number:</b>+91 78071 21721
<hr></p></em>
</div>

<div>
<h1 style="color:red;"><center>Educational Detail</center></h1>

Enrollment No.:211127
<em>
<p><strong>10th:</strong><br>

<b>School:</b>Chapslee School<br>
<b>Marks Scored:</b>384<br>
<b>Favorite Subject:</b>Chemistry<br><br>

<b>12th:</b><br>
<b>School Name:</b>Chapslee School<br>
<b>Marks Scored:</b>404<br>
<b>Favorite Subject:</b>Chemistry
</p></div></em>
<hr>

<div>
<h1 style="color:red;"><center>ExtraCurricular
Activities</center></h1>
<em>
<p style="color:green;"> Working Out</p>
<p style="color:blue;"> Travelling</p>
<p style="color:green;">Playing Basketball</p>
<p style="color:blue;">Listening Music</p>
</div></em>
<hr>

<div>
<h1 style="color:red;"><center>Social Media Profiles</center></h1>
<em>
<a href="[email protected]">Mail</a><br>
<a href="https://www.linkedin.com/in/pradyumn-vashisht-
Ob2117215">LinkedIn</a><br>
<a href="https://instagram.com/_v_a_s_h_i_s_h_t_?
igshid=ZDdkNTZiNTM=">Instagram</a>

</div></em>

Output:

Enrollment No.:211127
Enrollment No.:211127

You might also like