You are on page 1of 37

SESSION: 2020-2023

Practical File
Web Technologies

Submitted to: Submitted By:


Mrs. Aarti BudhiRaja Mohammad Afzal
Roll no. :
03511402020
Practical-1

Aim : Write the Basic Structure of HTML.


Code:
<html>
<head>
<title>Title of Webpage</title>
</head>
<body>
<p>Hello! This is Anuraag Malhotra<br>
This is My First HTML Page.
</p>
</body>
</html>

Output:
Practical-2

Aim : Create a HTML Program to show All Heading Tags.


Code:
<html>
<head>
<title>
All Heading Tags
</title>
</head>
<body>
<h1><ins>Heading Tags</ins></h1>
<hr>
<h1> this is heading 1</h1>
<h2> this is heading 2</h2>
<h3> this is heading 3</h3>
<h4> this is heading 4</h4>
<h5> this is heading 5</h5>
<h6> this is heading 6</h6>
</body>
</html>
Output:
Practical-3

Aim : Write a Program to show difference between predefined and


paragraph Tags.
Code:
<html>

<head>

<TITLE> DIFERENCE BETWEEN PRE AND P TAG </TITLE>

</head>

<body>

<h1>This is Paragraph tag</h1>

<P>Computer programming is the process of performing a particular computation

(or more generally, accomplishing a specific computing result), usually by designing/building an executable
computer program. Programming involves tasks such as analysis, generating algorithms, profiling algorithms'
accuracy and resource consumption, and the implementation of algorithms (usually in a chosen programming
language, commonly referred to as coding).[1</P>

<hr>

<h1>This is Pre Defined Tag</h1>

<pre>

Computer programming is the process of performing a particular computation (or more


generally,accomplishing a specific computing result), usually by

designing/building an executable computer program. Programming involves

tasks such as analysis,

generating algorithms, profiling algorithms' accuracy and resource consumption, and the implementation of
algorithms (usually in a chosen programming language, commonly referred to as coding).[1

</pre>

</body>

</html>
Output:
Practical-4
Aim : Create a HTML Page using basic Text Formatting Tags.

Code:
<html>

<head>

<title>Text Formatting Tags</title>

</head>

<body>

<b>This is bold tag</b>

<hr>

<i>This is italic tag</i>

<hr>

<strong>This is strong tag</strong>

<hr>

<small>This is small tag</small>

<hr>

<em>This is emphasis tag</em>

<hr>

<p>This is delete <del> new </del> tag</p>

<hr>

<p><ins>This is insert line tag </ins></p>

<hr>

<p>This is subscript Tag</p>

H<sub>2</sub>+O=H<sub>2</sub>O

<hr>

<p>This is superscript Tag</p>

ax<sup>3</sup>+bx<sup>2</sup>cx+d=0</body></html>
Output:
Practical-5

Aim : Write a HTML Code to show Abbreviation and Quotation Tags.

Code:
<html>

<head>

<title>Abbreviation and Quotation Tag</title>

</head>

<body>

<h1>Abbreviation Tag</h1>

<p>The<abbr title="WORLD HEALTH ORGANIZATION"> (WHO) </abbr> is a

specialized agency of the United Nations responsible for international public health.[2]

The <abbr title="WORLD HEALTH ORGANIZATION"> WHO </abbr>Constitution states its main
objective as

"the attainment by all peoples of the highest possible level of health".[3] Headquartered in Geneva,

Switzerland, it has six regional offices and 150 field offices worldwide.</p>

<h1>Quotation Tag</h1>

<p>The WHO was established on 7 April 1948

<q><b>The first meeting of the World Health Assembly (WHA), the agency's governing body, took
place on 24 July of that year. The WHO incorporated the assets, personnel, and duties of the League of
Nations' Health Organization and the Office International d'Hygiène Publique, including the International
Classification of Diseases (ICD).[6] Its work began in earnest in 1951 after a significant infusion of
financial and technical resources</b></q>

The WHO's mandate seeks and includes: working worldwide to promote health, keeping the world
safe, and serve the vulnerable. It advocates that a billion more people should have: universal health care
coverage, engagement with the monitoring of public health risks, coordinating responses to health
emergencies, and promoting health and well-being.

</p>

</body>

</html>
Output:
Practical-6

Aim : Write a Program to add 5 images and also make them as hyperlinks
(min 5 images with their explanations).

Code:
<!DOCTYPE html>

<html

<head>

<title>Article</title>

<base href="/images/">

</head>

<body>

<h1 style="text-align:center"><ins>Programming Languages</ins> </h1>

<br>

<h2><ins>Java</ins></h2>

<a href="https://en.wikipedia.org/wiki/Java_(programming_language)" target="_blank" ><img src="java.jpeg"


alt="logo of java" title="Logo of Java" width="300" HEIGHT="200" ALIGN="RIGHT" hspace="10" vspace=""></a>

<P >Java is a high-level, class-based, object-oriented programming language that is designed to have as few
implementation dependencies as possible. It is a general-purpose programming language intended to let
programmers write once, run anywhere (WORA),[17] meaning that compiled Java code can run on all platforms that
support Java without the need to recompile.[18] Java applications are typically compiled to bytecode that can run on
any Java virtual machine (JVM) regardless of the underlying computer architecture. The syntax of Java is similar to C
and C++, but has fewer low-level facilities than either of them.

</P>

<br>

<br>

<br>

<br>

<h2><ins>Python</ins></h2>

<a href="https://en.wikipedia.org/wiki/Python_(programming_language)" target="_blank" ><img src="python.jpeg"


alt="logo of java" title="Logo of Python" width="300" HEIGHT="200" ALIGN="left" hspace="20" vspace="5" ></a>

<p >Python is a high-level general-purpose programming language. Its design philosophy emphasizes code
readabilitywith the use of significant indentation. Its language constructs and object-oriented approach aim to
helpprogrammers write clear, logical code for small- and large-scale projects.[29]Python is dynamically-typed and
garbage-collected. It supports multiple programming paradigms, including structured (particularly, procedural),
object-oriented and functional programming. It is often described as a "batteries included" language due to its
comprehensive standard library.[30][31]Guido van Rossum began working on Python in the late 1980s, as a successor
to the ABC programming language, and first released it in 1991 as Python 0.9.0.[32] Python 2.0 was released in 2000
and introduced new features such as list comprehensions, cycle-detecting garbage collection, reference counting, and
Unicode support. Python 3.0,released in 2008, was a major revision that is not completely backward-compatible with
earlier versions. Pytho 2 was discontinued with version 2.7.18 in 2020.[33]</p>

<br>

<h2><ins>C Programming</ins></h2>

<a href="https://en.wikipedia.org/wiki/C_(programming_language)" target="_blank" ><img src="C.png" alt="logo of


C" title="Logo of C" width="300" HEIGHT="200" ALIGN="right" hspace="5" vspace="5"></a>

<p >C (/ˈsiː/, as in the letter c) is a general-purpose, procedural computer programming language supporting
structured programming, lexical variable scope, and recursion, with a static type system. By design, C provides
constructs that map efficiently to typical machine instructions. It has found lasting use in applications previously coded
in assembly language. Such applications include operating systems and various application software for computer
architectures that range from supercomputers to PLCs and embedded systems. A successor to the programming
language B, C was originally developed at Bell Labs by Dennis Ritchie between 1972 and 1973 to construct utilities
running on Unix. It was applied to re-implementing the kernel of the Unix operating system.[7] During the 1980s, C
gradually gained popularity. It has become one of the most widely used programming languages,[8][9] with C
compilers from various vendors available for the majority of existing computer architectures and operating systems.
C has been standardized by ANSI since 1989 (ANSI C) and by the International Organization for Standardization
(ISO).</p>

<h2><ins>C++ Programming</ins></h2>

<a href="https://en.wikipedia.org/wiki/C%2B%2B" target="_blank" ><img src="C++.jpg" alt="logo of C++" title="Logo


of C" width="300" HEIGHT="200" ALIGN="left" hspace="5" vspace="30"></a>

<p >C++ (/ˌsiːˌplʌsˈplʌs/) is a general-purpose programming language created by Bjarne Stroustrup as an extension of
the C programming language, or "C with Classes". The language has expanded significantly over time, and modern
C++ now has object-oriented, generic, and functional features in addition to facilities for low-level memory
manipulation. It is almost always implemented as a compiled language, and many vendors provide C++ compilers,
including the Free Software Foundation, LLVM, Microsoft, Intel, Oracle, and IBM, so it is available on many
platforms.[10] C++ was designed with an orientation toward systems programming and embedded, resource-
constrained software and large systems, with performance, efficiency, and flexibility of use as its design highlights.[11]
C++ has also been found useful in many other contexts, with key strengths being software infrastructure and resource-
constrained applications,[11] including desktop applications, video games, servers (e.g. e-commerce, web search, or
databases), and performance-critical applications (e.g. telephone switches or space probes).[12]</p>

<br>

<br>

<br>

<br>

</body>

</html>
Output:

Click On Image to
Read More About
Java

Click On Image to Read


More C Programming
Practical-7

Aim : Write a Program to show the use of Table Tag using


rowspan,colspan either for invoice,Calender,or payment slips.

Code:
<!DOCTYPE html>

<html lang="en">

<head>

<title>Calender </title>

</head>

<body>

<center>

<h1><ins><i>April-2022</i></ins></h1>

<table border="10" width="50%" bgcolor="red">

<tr>

<th colspan="7"><b> Calender of April</b></th>

</tr>

<tr>

<th rowspan="6">Sunday</th>

<td bgcolor="sky blue">Monday</td>

<td bgcolor="sky blue">Tuesday</td>

<td bgcolor="sky blue">Wednesday</td>

<td bgcolor="sky blue">Thursday</td>

<td bgcolor="sky blue">Friday</td>

<td bgcolor="sky blue">Saturday</td>

</tr>

<tr>

<td></td>

<td>1</td>
<td>2</td>

<td>3</td>

<td>4</td>

<td>5</td>

</tr><tr>

<td >7</td>

<td>8</td>

<td>9</td>

<td>10</td>

<td>11</td>

<td>12</td>

</tr>

<tr>

<!-- <td>13</td> -->

<td>14</td>

<td>15</td>

<td>16</td>

<td bgcolor="red" >17</td>

<td>18</td>

<td>19</td>

</tr>

<tr>

<!-- <td>20</td> -->

<td>21</td>

<td>22</td>

<td>23</td>

<td>24</td>

<td>25</td>

<td>26</td>

</tr>

<tr>
<!-- <td>27</td> -->

<td>28</td>

<td>29</td>

<td>30</td>

<td>31</td>

</tr>

</table>

<p><b>April is the fourth month in the Gregorian calendar and has 30 days. It is the second month of astronomical
spring in the Northern Hemisphere and the second month of astronomical fall in the Southern Hemisphere.

On April 1, people in countries all over the world like to play pranks on other people. Depending on the culture, the
victim of such a joke is known as a fool or a fish (poisson d’avril). It is not clear when the tradition started, and there
are countless theories.

The likely answer why we play hoaxes on each other in April is because the winter is over: March and April end the
long time of winter in the Northern Hemisphere and bring new life. In many cultures, this was celebrated with
colorful festivities, dancing, and making fun of each other.

</b></p>

</center>

</body>

</html>
Output:
Practical-8

Aim : Write a Program to create a Page of Website using Fragmented


URLs (can be research papers or Articles).

Code:
<!DOCTYPE html>

<html>

<head>

<title>Fragemented Url</title>

</head>

<body>

<h1 id="Programming Languages" align="center"><ins>Programming Languages</ins></h1>

<BR>

<img src="all2.png" alt="Progrmming Languages" width="300" align="right" hspace="50">

<br>

<h2><a href="#Java">Java</a></h2>

<h2><a href="#Python">Python</a><h2>

<h2><a href="#C">C</a></h2>

<h2><a href="#C++">C++</a></h2>

<hr>

<h2 id="Java">Java</h2>

<p >

Java is a high-level, class-based, object-oriented programming language that is designed to have as few
implementation dependencies as possible. It is a general-purpose programming language intended to let
programmers write once, run anywhere (WORA),[17] meaning that compiled Java code can run on all platforms that
support Java without the need to recompile.[18] Java applications are typically compiled to bytecode that can run
on any Java virtual machine (JVM) regardless of the underlying computer architecture. The syntax of Java is similar
to C and C++, but has fewer low-level facilities than either of them.

</p>

<h2 id="Python">Python</h2>
<p >Python is a high-level general-purpose programming language. Its design philosophy emphasizes code
readability with the use of significant indentation. Its language constructs and object-oriented approach aim to help
programmers write clear, logical code for small- and large-scale projects.[29]

Python is dynamically-typed and garbage-collected. It supports multiple programming paradigms, including


structured (particularly, procedural), object-oriented and functional programming. It is often described as a
"batteries included" language due to its comprehensive standard library.[30][31] Guido van Rossum began working
on Python in the late 1980s, as a successor to the ABC programming language, and first released it in 1991 as Python
0.9.0.[32] Python 2.0 was released in 2000 and introduced new features such as list comprehensions, cycle-
detecting garbage collection, reference counting, and Unicode support. Python 3.0, released in 2008, was a major
revision that is not completely backward-compatible with earlier versions. Python 2 was discontinued with version
2.7.18 in 2020.[33]</p>

<h2 id="C">C</h2>

<p >C (/ˈsiː/, as in the letter c) is a general-purpose, procedural computer programming language supporting
structured programming, lexical variable scope, and recursion, with a static type system. By design, C provides
constructs that map efficiently to typical machine instructions. It has found lasting use in application previously
coded in assembly language. Such applications include operating systems and various application software for
computer architectures that range from supercomputers to PLCs and embedded systems.A successor to the
programming language B, C was originally developed at Bell Labs by Dennis Ritchie between 1972 and 1973 to
construct utilities running on Unix. It was applied to re-implementing the kernel of the Unix operating system.[7]
During the 1980s, C gradually gained popularity. It has become one of the most widely us programming
languages,[8][9] with C compilers from various vendors available for the majority of existing computer architectures
and operating systems. C has been standardized by ANSI since 1989 (ANSI C) and by theInternational Organization
for Standardization (ISO).</p>

<h2 id="C++">C++</h2>

<p >C++ (/ˌsiːˌplʌsˈplʌs/) is a general-purpose programming language created by Bjarne Stroustrup as an extension
of the C programming language, or "C with Classes". The language has expanded significantly over time, and
modern C++ now has object-oriented, generic, and functional features in addition to facilities for low-level memory
manipulation. It is almost always implemented as a compiled language, and many vendors provide C++ compilers,
including the Free Software Foundation, LLVM, Microsoft, Intel, Oracle, and IBM, so it is available on many
platforms.[10]C++ was designed with an orientation toward systems programming and embedded, resource-
constrained software and large systems, with performance, efficiency, and flexibility of use as its design
highlights.[11] C++ has also been found useful in many other contexts, with key strengths being software
infrastructure and resource-constrained applications,[11] including desktop applications, video games, servers (e.g.
e-commerce, web search, or databases), and performance-critical applications (e.g. telephone switches or space
probes).[12]

</p>

<a href="#Programming Languages"> Back To Top</a>

</body>

</html>
Output:

Click Here to go
C++ Fragment
Practical-9

Aim : Create an Front Page of Website Using Frameset Tags.


Code:
<!DOCTYPE html>

<html lang="en">

<head>

<title>Homepage</title>

</head>

<frameset rows="210px,400px,300px">

<frame src="Logo.html" scrolling="No">

<frame src="Moreinfo.html" Scrolling="No">

<frameset cols="*,*,*">

<frame src="Links.html" Scrolling="No">

<frame src="Events.html" Scrolling="yes">

<frame src="News.html">

</frameset>

</franeset>

</html>
Output:
Logo.Html
Code:
<!DOCTYPE html>

<html lang="en">

<head>

<title>Logo</title>

</head>

<body>

<div>

<a href="https://bpibs.delhi.gov.in/content/about-us" target="_blank">

<img id="logo" src="logo.jpg" alt="Logo of Bhai Parmanand Institute of Business Studies"


title="Logo of Bhai Parmanand Institute of Business Studies" width="150" align="left">

<a href="https://bpibs.delhi.gov.in/content/about-us" target="_blank"><h1 align="right">Bhai


Parmanand Institute of Business Studies<br>

Government Of NCT Of Delhi</h1>

</a>

</div>

</body>

</html>
Output:
Moreinfo.html
Code:
<!DOCTYPE html>

<html lang="en">

<head>

<title>Information About BPIBS</title>

</head>

<body >

<P>Bhai Parmanand Institute of Business Studies is a Technical Institute promoted by Government of


Delhi in 1986 by naming after Bhai Parmanand, a famous Sikh Martyr from Punjab and functioning under
the Department of Training and Technical Education, Government of NCT of Delhi, has set a new
benchmark in the Technical Education in India. The institute housed in spacious buildings at a DDA plot.

The Institute has been Initially, this Institute was established as a unit under polytechnic of technical
education department in 1965. Later this Institute attained independent identity as “Institute of
Commercial Practice” in the year 1972. The Institute has been contributing to train the youngsters in
vocational-cum-job oriented courses in the stream of management, Secretarial Practice and
Entrepreneurship Development.</P>

<img src="img1.jpg" alt="Image" title="Image of BPIBS" width="300" hspace="80" height="200">

<img src="img3.jpg" alt="Image" title="Image of BPIBS" width="300" height="200" hspace="100">

<a href="https://360.bpibs.in/" target="_blank"><img src="img4.jpg" alt="Image" title="Image of


BPIBS" width="300" height="200" hspace="100">

</a>

</body>

</html>
Output:
Practical-10

10:Create an HTML Document showing the use of Image Mapping.

Code:
<html>

<head>

<title> Image Mapping Tag</title>

</head>

<body>

<h1>Use of ImageMapping</h1>

<img src="img.jpg" usemap="#mapping1" alt="Image with Laptop and coffee" title="Building_image" >

<map name="mapping1">

<area shape="rect" coords="1,1,213,312" href="https://en.wikipedia.org/wiki/Laptop" target="_blank">

<area shape="rect" coords="256,183,538,358" href="https://en.wikipedia.org/wiki/Book"


target="_blank">

<area shape="rect" coords="250,102,397,149" href="https://en.wikipedia.org/wiki/Glasses"


target="_blank">

<area shape="circle" coords="466,77,60" href="https://en.wikipedia.org/wiki/Coffee" target="_blank">

<area shape="circle" coords="310,28,50" href="https://en.wikipedia.org/wiki/Flowerpot"


target="_blank">

</body>

</html>
Output:

Click on Coffee to
Read About Coffee

Click on Laptop to
Read About Laptop
Practical-11

Aim:Create a Registration Form using input types ,text area,labels etc.


Code:
<!DOCTYPE html>

<html lang="en">

<head>

<title>Registration Form</title>

</head>

<body>

<img src="ipuregistration.PNG" width="1000" align="right">

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<hr>

<center>

<h1 align="center"><ins>Registration Form</ins></h1>

<form action="backend.php">

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

<input type="text" id="Name" maxlength="20" autofocus required>

<br>

<br>

<label for="Gender">Gender:</label>

<label for="Male">Male</label>
<input type="radio" id="Male" name="Gender" required>

<label for="Female">Female</label>

<input type="radio" id="Female" name="Gender" required>

<label for="Transgender">Transgender</label>

<input type="radio" id="Transgender" name="Gender" required>

<br>

<br>

<label for="Eligibility">Are You 18+?</label>

<input type="checkbox" id="Eligibility" checked>

<br>

<br>

<label for="Age">Age (Between 18-25):</label>

<input type="number" min="18" max="25">

<br>

<br>

<label for="Id">Id:</label>

<select id="Id">

<option>Aadhar Card</option>

<option>PAN Card</option>

<option>Driving License</option>

</select>

<br>

<br>

<label for="InputId">Enter Id:</label>

<input type="text" id="InputId">

<br>

<br>

<label for="Mobile">Mobile Number :</label>

<input type="tel" id="Mobile">


<br>

<br>

<label for="Email">Email Id</label>

<input type="email" id="Email">

<br>

<br>

<label for="DOB">Date of Birth(DOB):</label>

<input type="Date" id="DOB" required>

<br>

<br>

<label for="Fathers Name">Fathers Name:</label>

<input type="text" id="FName" required>

<br>

<br>

<label for="Mothers Name">Mothers Name:</label>

<input type="text" id="MName" required>

<br>

<br>

<fieldset>

<legend>Intermediate Examination</legend>

<label for="ISchoolName">School Name:</label>

<input type="Text" name="ISchoolName" id="ISchoolName">

<br>

<br>

<label for="IEducation Board">Board:</label>

<select id="IEducation Board">

<optgroup label="Private Board">

<option>CBSE</option>

<option>ICSE</option>
<option>ISC</option>

</optgroup>

<optgroup label="State Board">

<option>UP Board</option>

<option>MP Board</option>

<option>Delhi Board</option>

<option>Punjab Board</option>

<option>Haryana Board</option>

</optgroup>

</select>

<br>

<br>

<label for="IRollNo">RollNo:</label>

<input type="text" name="IRollNo" id="IRollNo" maxlength=15 required>

<br>

<br>

<label for="IGrade">Percentage:</label>

<input type="text" name="IGrade" id="IGrade" required>

<br>

<br>

<label for="Stream">Stream:</label>

<input TYPE="TEXT" name="Stream" id="Stream" maxlength="20">

</fieldset>

<br>

<br>

<fieldset>

<legend>HighSchool Examination</legend>

<label for="HSchoolName">School Name:</label>

<input type="Text" name="HSchoolName" id="HSchoolName">


<br>

<br>

<label for="HEducation Board">Board:</label>

<select id="HEducation Board">

<optgroup label="Private Board">

<option>CBSE</option>

<option>ICSE</option>

<option>ISC</option>

</optgroup>

<optgroup label="State Board">

<option>UP Board</option>

<option>MP Board</option>

<option>Delhi Board</option>

<option>Punjab Board</option>

<option>Haryana Board</option>

</optgroup>

</select>

<br>

<br>

<label for="HRollNo">RollNo:</label>

<input type="text" name="MRollNo" id="HRollNo" maxlength=15 required>

<br>

<br>

<label for="HGrade">Percentage:</label>

<input type="text" name="HGrade" id="HGrade" required>

<br>

<br>

<label for="Subject">Subjects:</label>

<input TYPE="TEXT" name="Subject" id="Subject" maxlength="100" required>


</fieldset>

<br>

<br>

<label for="About">Write About Yourself</label>

<textarea rows="5" cols="20" maxlength="300" id="About">

</textarea>

<br>

<br>

<fieldset>

<legend>Upload Documents</legend>

<label for="Upload Marksheet">Upload Intermediate Marksheet:</label>

<input type="file" id="Upload Marksheet" required>

<br>

<br>

<label for="Upload Marksheet">Upload HighSchool Marksheet:</label>

<input type="file" id="Upload Marksheet" required>

<br>

<br>

<label for="Upload Marksheet">Upload Photo:</label>

<input type="file" id="Upload Marksheet" required>

<br>

<br>

<label for="Upload Marksheet">Upload Signature:</label>

<input type="file" id="Upload Marksheet" required>

</fieldset>

<br>

<br>

<label for="Password">Create Password :</label>

<input type="password" name="Password" id="Password" required>


<br>

<br>

<label for="Confirm Password">Confirm Password:</label>

<input type="password" name="Confirm Password" id="Confirm Password" required>

<br>

<br>

<label for="submit" ></label>

<button type="submit" id="submit" title="Submit"><img src="arrow.png" width="50"


vspace="10"></button>

<label for="reset" ></label>

<input type="reset" name="reset" id="reset">

</form>

</center>

</body>

</html>
Output:

You might also like