Scribd
Upload
60 views58 pages

Must Print

The document contains code for an HTML practical file submitted by a student named Yatinder Singh Rawat. It includes 9 programs demonstrating different HTML tags and concepts like headings, paragraphs, images, links, tables and more. Each program is accompanied by the HTML code and output. The final program demonstrates creating a website homepage using fragmented URLs. Overall, the document serves as an assignment submission covering basic HTML tags and features.

Uploaded by

Narender Rawat
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
60 views58 pages

Must Print

The document contains code for an HTML practical file submitted by a student named Yatinder Singh Rawat. It includes 9 programs demonstrating different HTML tags and concepts like headings, paragraphs, images, links, tables and more. Each program is accompanied by the HTML code and output. The final program demonstrates creating a website homepage using fragmented URLs. Overall, the document serves as an assignment submission covering basic HTML tags and features.

Uploaded by

Narender Rawat
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/ 58

Yatinder Singh Rawat

07211402020

WEB
TECHNOLOGIES
PRACTICLE FILE

BHAI PARMANAND INSTITUTE


OF BUSINESS STUDIES
BCA-4TH SEM

Name : Yatinder Singh Rawat


Roll No. : 07211402020
1
Yatinder Singh Rawat
07211402020
1) Program To Show The Basic Structure of HTML.

Code:
<html>

<head>

<title>First Program</title>

</head>

<body>

This is Basic Structure of HTML

</body>

</html>

OUTPUT:

2
Yatinder Singh Rawat
07211402020
2) Program to Show the Different Types of Headings in HTML.

Code:
<html>

<head>

<title> Program 2</title>

</head>

<body>

<b> Program to Show the Different Types of Headings in HTML. </b>

<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:

3) Program To Show The Difference between < P > and < Pre > Tag in
HTML.
3
Yatinder Singh Rawat
07211402020
Code:
<html>

<head>

<title> Program 3 </title>

</head>

<body>

<h2>The Difference between < P > and < Pre > Tag in HTML </h2>

<b>In < P > Tag: </b>

<p>

The < p > HTML element represents a paragraph.

Paragraphs are usually represented in visual media as blocks of text

separated from adjacent blocks by blank lines and/or first-line indentation,

but HTML paragraphs can be any structural grouping of related content,

such as images or form fields.

</p>

<b>In < Pre > Tag: </b>

<pre>

The < pre > tag defines preformatted text.


Text in a < pre > element is displayed in a fixed-width font, and

the text preserves both spaces and line breaks.

The text will be displayed exactly as written in the HTML source code.

</pre>

</body>

</html>

OUTPUT:

4
Yatinder Singh Rawat
07211402020

5
Yatinder Singh Rawat
07211402020
4) Program TO make HTML Page Using Basic Text Formatting .
Code:
<html>

<head>

<title> Program 4 </title>

</head>

<body>

<h1> HTML Page Using Basic Text Formatting

</h1>

<p><b> This is BOLD Text </b> </p>

<p><i> This is ITALLIC Text </i> </p>

<p><u> This Text is UNDERLINED </u> </p>

This is some NORMAL text. <br>

<p> <small>This is some SMALLER text.</small> </p>

<p> <strong>This is some STRONG text.</strong> </p>

<p> <emp>This is some EMPHASISED text.</emp> </p>


<b> The formula of (a+b) <sup> 2 </sup> can be written using "SUPERSCRIPT Tag" as: </b>
<br>

(a+b) <sup> 2 </sup> = a<sup> 2 </sup> + b <sup> 2 </sup> +2ab <br>

<b> The Chemical Formula of water can be written using "SUBSCRIPT Tag" as: </b> <br>

<p> H <sub> 2 </sub> O </p>

<b> Following is the Example of "Delete" and "Insert" Tag :

<p>Jaipur is located in <del>Uttar Pradesh</del> <ins>Rajasthan</ins>!</p>

</body>

</html>

6
Yatinder Singh Rawat
07211402020

OUTPUT:

7
Yatinder Singh Rawat
07211402020

5) Write a program to show abbreviation tag, address tag, and q


tag.
CODE
<html>
<head><title>Program 5</title></head>
<body>
<h1>The abbr element</h1>
<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to
style your <abbr title="HyperText Markup
Language">HTML</abbr>.</p>
<p>Contact the author of this page:</p>
<h1>The Address element</h1>
<address>
<a href="mailto:[email protected]">
[email protected]</a><br>
<a href="tel:+91-00000000">+91-XXXXXXXXXX</a>
</address>
<h1>The Quote element</h1>
<p>Quote of the Day <q
cite="https://www.brainyquote.com/quote_of_the_day">Truth is strong,
and sometime or other will prevail.
- sundar lal gokul dham society</q></p>
</body>
</html>
8
Yatinder Singh Rawat
07211402020

OUTPUT:-

9
Yatinder Singh Rawat
07211402020

6) Program to show the use of Various Tags of HTML .


Code:
<html>

<head>

<title> Program 6</title>

</head>

<body>

<h2> Program to show the use of Various Tags of HTML

</h2>

<p> <b> Following Statements shows the use of "ABBREVIATION Tag" in HTML: </b>
</p>

The <abbr title="World Health Organization"> WHO </abbr> was founded in 1948. <br>
The <abbr title="Hyper Text MarkUp Language"> HTML </abbr> is a tool for Designing
Web Pages.

<p> <b> <q> This Statement is quoted using Quotation Tag </q> </b> </p>

<b> Following Statement is example of "Blockquote" Tag </b> <br>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation
organization, WWF works in 100 countries and is supported by 1.2 million members in the
United States and close to 5 million globally.

</blockquote>

<address>

<b> Insntitution Name: Bhai Parmanand Institute Of Business Studies </b> <br>

<b> Address: </b>

<br>

BPIBS

Opp. Madhuban Colony, Near Nirman Vihar Metro Station, <br>


10
Yatinder Singh Rawat
07211402020
Shakarpur, New Delhi, Delhi 110092

</address>

</body>

</html>

OUTPUT:

11
Yatinder Singh Rawat
07211402020

7) Write a program add images & also making them as


hyperlinks along with
explanationsSeasons,Ebooks,Mounuments,etc.
CODE
<!DOCTYPE html>
<html>
<body>
<h4>Images as a Link</h4>
<h3>Types of season in india</h3>
<p><h3>1)Spring Season (Vasant Ritu)</h3>
The spring season in India is a season of two-month duration which are
March and April. In the Hindu calendar, this season occurs in the months
of Chaitra and Baisakh respectively.</p>
<a href="https://www.javatpoint.com/seasons-in-india"><img
src="img1.jpeg"></a>
<p><h3>2) Summer (Grishma Ritu)</h3>
It is also a two-month duration season that includes the months of May and
June. As per the Hindu calendar, this season mainly

occurs in Jyeshta and Aashaadha.</p>


<a href="https://www.javatpoint.com/seasons-in-india"><img
src="img2.jpeg"></a>
<p><h3>3) Monsoon (Varsha Ritu)</h3>
It includes the months of July and August. As per the Hindu calendar, this
season comes in the months of
12
Yatinder Singh Rawat
07211402020
Shravana and Bhadrapada (Sawan and Bhado).</p>
<a href="https://www.javatpoint.com/seasons-in-india"><img
src="img3.jpeg"></a>
<p><h3>4) Autumn (Sharad Ritu)</h3>
The season of autumn comes in the months of September and October. As
per the Hindu calendar, this season comes in Ashwin and Kartik
months</p>
<a href="https://www.javatpoint.com/seasons-in-india"><img
src="img4.jpeg"></a>
<p><h3>5) Pre-winter (Hemant Ritu)</h3>This season comes in the
months of November and December. As per the Hindu calendar, these
season occurs in the Agrahayana and Pausha ( Agahan and Poos)
months.</p><a href="https://www.javatpoint.com/seasons-in-india"><img
src="img5.jpeg"></a>
</body>
</html>

OUTPUT

13
Yatinder Singh Rawat
07211402020

14
Yatinder Singh Rawat
07211402020

15
Yatinder Singh Rawat
07211402020

16
Yatinder Singh Rawat
07211402020
8) Write program to show the use of table tag using row
span,colspan either for invoice or a calender page or
payment slips.
CODE
<html>
<head>
</head>
<body bgcolor="grey">
<table align="center" bgcolor="#c3e9fa" border="4"
bordercolor="black" cellpadding="5" cellspacing="4">
<tr><th colspan="8"><h1><u>COMPANY NAME</u></h1></th>
</tr>
<tr><th colspan="8"><h2>PAY SLIP</h2></th></tr>
<tr>
<td>Employee Name</td>
<td colspan="2">____________________________</td>
<td>
Pay Period
</td>
<td>____________________________</td>
</tr>
<tr>
<td>Employee ID</td>
<td colspan="2">____________________________</td>
17
Yatinder Singh Rawat
07211402020
<td>
Pay Cycle
</td>
<td>____________________________</td></tr>
<tr>
<td>
Bank Details
</td>
<td colspan="4"></td>
</tr>
<tr>
<td>
Tax Number
</td>
<td colspan="4">

</td>
</tr>
<tr>
<th colspan="2">Earnings</th>
<th>Amount</th>
<th>Deductions</th>
<th>Amount</th>
18
Yatinder Singh Rawat
07211402020
</tr>
<tr>
<td colspan="2">Basic Salary</td>
<td></td>
<td>Provident Fund</td>
<td></td>
</tr>
<tr>
<td colspan="2">HRA</td> <td></td>
<td>ESI</td>
<td></td>
</tr>
<tr>
<td colspan="2">Conveyance</td>
<td></td>
<td>Professional Tax</td>
<td></td>
</tr>
<tr>
<td colspan="2">Dearness Allowance</td> <td></td>
<td>Salary Advance</td>
<td></td>
</tr>
19
Yatinder Singh Rawat
07211402020
<tr>
<td colspan="2">Overtime</td>
<td></td>
<td>TDS</td>
<td></td>
</tr>
<tr>
<td colspan="2">Bonus</td>
<td></td>
<td>Other Deduction</td>
<td></td>
</tr>
<tr>
<td colspan="8"></td>
</tr>
<tr>
<td colspan="2">Gross Earnings</td>
<td></td>
<td>Total Deductions</td>
<td></td>
</tr>
<tr>
<td colspan="8">
20
Yatinder Singh Rawat
07211402020
</td>
</tr>
<tr>
<td>Net Salary Transferred</td>
<td colspan="4"></td>
</tr>
<tr>
<td colspan="8"></td>
</tr>
<tr>
<td colspan="2">Prepared by</td>
<td></td>
<td>Received by</td>
<td></td>
</tr>
<tr>
<td colspan="8"></td>
</tr>
</table>
</body>
</html>

21
Yatinder Singh Rawat
07211402020
OUTPUT

22
Yatinder Singh Rawat
07211402020
9) Write a program to create a page of a web-site using
fragmented URL.
CODE
<html>
<head>
<title>Top 3 Technology Articles</title>
</head>
<body>
<h1 align="center" id="top"><u>The Top 3 technology
articles</u></h1>
<ol>

<li><a href="#no1">The fundamentals of security incident response—


during a pandemic and beyond</a>
<p>Read about the ongoing battle between business and cybercriminals
in this year's most-read story.</p> </li>
<li><a href="#no2">How COVID-19 is accelerating the move to hybrid
cloud</a><p>Businesses are putting digital transformation into high gear.
Experts share priority elements of the process.</p></li>
<li><a href="#no3">Six ways the world's fastest computers have changed
your life</a> </li>f</ol>
<h2 id="no1" align="center"><u>fundamentals of security incident
response—during a pandemic and beyond</u></h2>
<p align="center">
<img src="no1.JPG" >

23
Yatinder Singh Rawat
07211402020
</p><p><i> A rapidly expanding remote workforce introduces new
challenges when it comes to identifying your vulnerabilities and
responding rapidly, but it doesn't change the fundamentals—identify,
protect, detect, respond, and recover.</i> <br><br>

Information security is a nonstop race between you and cybercriminals—


and COVID-19 means more challenges for your organization and more
opportunities for attackers. </p>
<h3>What's at stake?</h3><p>
Breaches come in different sizes and scales. Ransomware can keep you
from resources and data, but the game plan is very different depending on
what's compromised—and what that infected point has touched.</p>
<h3>The five pillars of cybersecurity</h3><p>Obviously, the kinds of
attacks capability<br><br><q>Even if you can find a way to pay, can
afford to pay, and have a trustworthy enough criminal ... it still doesn't
mean you're going to survive the attack. - DREW SIMONIS DEPUTY
CHIEF INFORMATION SECURITY OFFICER AT HPE</q> </p>
<h3>Security incident response: Lessons for leaders</h3><p><ul>
<li>Making a plan is just the first part. Putting it to the test with drills
and tabletop exercises is a top priority. When you uncover capability gaps,
fill them with third-party expertise.</li>

<li>Don't rely on backups—or the means to pay out in the event of a


ransomware attack. For smaller businesses, these attacks can be fatal.</li>
<li>Stick to the fundamentals.</li> </ul></p>
<hr><h2 id="no2" align="center"><u>How COVID-19 accelerated the
move to hybrid cloud</u></h2><p align="center"><img src="no2.JPG"
height="400"></p>
<hr><p>The changes wrought in business by the impact of the pandemic ,
and resilient could make 2021 "the year of multicloud."</p><h3>Cloud
everywhere becomes the norm</h3<p>

24
Yatinder Singh Rawat
07211402020
"We think 2021 becomes a turning point where, instead of just talking
future."<br<br>"The increasing deployment of technologies, including AI,
machine </p>
<h3>Multicloud strategies even more critical</h3><p> "Public or private
cloud aside, you have to start with the overall business strategy and then
look at the IT strategy needed to achieve that," <br></p>
<hr><h2 id="no3" align="center"><u> Six ways the world's fastest
computers have changed your life </u></h2>
<p align="center"> <img src="no3.JPG" width="1000"
height="400"></p>
<hr><h3>Weather: Do I need an umbrella?</h3>
<p>Every waking moment, 2x1044 molecules (that's a 2 followed by 44
zeroes) bump into each other in the earth's atmosphere, creating what we
call weather. <br><br>
The first successful 24-hour weather forecast was achieved in April 1950
by the University of Pennsylvania's Electronic Numerical Integrator and
Computer. <br><br>
By the mid-1950s, computer-generated forecasts were common. </p>
<h3>Automobiles: Hitting the road</h3>
<p>For more than 30 years, supercomputers have been helping cars
become faster, safer, and more energy efficient. Japanese carmakers began
using HPCs in the late 1980s. <br><br>
When you pull into a gas station to fill up, you can thank supercomputers
for that, too. Three-dimensional seismic models are helping petrochemical
companies predict the locations of oil reserves. </p>
<h3>Medicine: The AI doctor will see you now</h3>
<p><br><br>Medical researchers are using AI and supercomputers to
create digital twins of human organs, to observe how they respond to

25
Yatinder Singh Rawat
07211402020
treatments before applying them to their flesh-and-blood
siblings.<br.></p>
<a href="#top"><h1 align="center">- - - BACK TO TOP - - -</h1></a>
</body> </html>

OUTPUT

26
Yatinder Singh Rawat
07211402020

27
Yatinder Singh Rawat
07211402020

10) Write a program to create a front-page of website


using frame-set
CODE
1)index.html
<html>
<head>
<title>bpibs</title>
</head>
<frameset rows="20%,50%,30%">
<frame scrolling="no" src="header.html" >
<frame scrolling="no" src="maininfo.html">
<frameset cols="30%,35%,35%">
<frame scrolling="yes" src="fdetails.html">
<frame src="events.html">
<frame scrolling="yes" src="news.html">
</frameset>
</frameset>
</html>
2)Header.html
28
Yatinder Singh Rawat
07211402020
<html>
<head>
<title>Document</title>
</head>
<body style="background-color:white">
<p ><a href="aboutus.html" target="_parent"><img
src="logodesu-bpibs-campus.jpeg" alt="logo of College"
width="130px" align="left"></a>
<h1 align="center">
<a href="aboutus.html" target="_parent" style="color:blue">
DSEU SHAKARPUR CAMPUS <BR>(formaly known as Bhai
Parmanand Institute Of Buisness Studies)
<br>GOVERNMENT OF NCT DELHI</h1></a>
<a href="aboutus.html" target="_parent"><img
src="govtlogo.jpeg" alt="logo of College" width="49px"
align="right"></a></p>
</body>
</html>
3) Maininfo.html
<html>
<head>
<title>Main Content</title>

29
Yatinder Singh Rawat
07211402020
</head>
<body style="background-color:green">
<p><i><br><b><p align="center">the Institute was relocated
in a spacious area/building exclusively allotted to it by DDA in
Shakarpur, Delhi-92 and rechristened as Bhai Parmanand
Institute of Business Studies (BPIBS).
<a href="aboutus.html" target="_blank">
<img src="bpibs-campus-gate.jpeg" alt="bpibsgate"
width="240px" height="140px">
<img src="bpibs-amogh.jpeg" alt="bpibsamogh" width="240px"
height="140px">
<img src="bpibs-library.jpeg" alt="bpibslibrary" width="240px"
height="140px">
<img src="empowerphoto.jpeg" alt="bpibstemplate"
width="240px" height="140px"></a></p>
</body>
</html>
4)fdetails.html
<html>
<head>
<title>Document</title>
</head>
<body style="background-color:pink">
30
Yatinder Singh Rawat
07211402020
<ul>
<li><a href="aboutus.html" target="_parent">About
Us</a>
</li><br>
<li><a href="courses.html"
target="_parent">Courses</a></li>
<br><li> <a href="staff.html" target="_parent">Staff</a></li>
<br><li><a href="contactus.html">Contact Us</a></li></ul>
</body>
</html>
5. aboutus.html
<html>
<head>
<title>About Us</title>
</head>
<body bgcolor="LightYellow">
<p><h1 align="center"> <u>* ABOUT INSTITUTE HISTORY
*</u></h1>In the Post-Independent period, with the
advancement of Science & Technology coupled with information
explosion, the There after, in the year 1986, the Institute was
relocated in a spacious area/building exclusively allotted to it by
DDA in
Shakarpur, Delhi-92 and New Delhi & NITTTR, Chandigarh.
<h3 align="center"> <u>*MOTTO *</u></h3>
31
Yatinder Singh Rawat
07211402020
The motto of BPIBS Institute of Higher Education has been to
impart quality education in the field of management. Its faculty
students accordingly.
<h3 align="center"> <u>* MISSION *</u></h3>
"TO MAKE SELF SUFFCIENT TO BUILD A STRONG
NATION"
<h3 align="center"> <u>* QUALITY POLICY *</u></h3>
The motto of BPIBS Institute of Higher Education has been to
impart quality education in the field of management. Its faculty
with the essentials of the business world our students
accordingly. :- PROF. GRISH SHARMA(PRINCIPAL BPIBS)
</p>
<h4 align="center"><a href="index.html"> < < BACK TO
HOME
PAGE > ></a></h4>
</body>
</html>
6.Contactus.html
<html>
<head>
<title>Contacts</title>
</head>
<body bgcolor="#c9d9bf">

32
Yatinder Singh Rawat
07211402020
<pre><address><h3><u>Address</u></h3>
BHAI PARMANAND INSTITUTE OF BUSINESS STUDIES
ISO 9001:2015 CERTIFIED INSTITUTE
Opp. Madhuban Colony
Shakarpur, Delhi-110092</address>
<h3><u>Contacts</u></h3>Tele:- 01122017393
Email: - <a href="mailto:[email protected]">
[email protected]</a>,
<a href="mailto:[email protected]">[email protected]</a></pre>
<a href="fdetails.html">< < BACK > ></a>
</body>
</html>
7.Courses.html
<html>
<head>
<title>Courses</title>
</head>
<body bgcolor="#e7e7e7">
<table border="2" bordercolor="" cellpadding="5px">
<tr><th>Course Name</th>
<th>Eligibility & Selection</th></tr>
33
Yatinder Singh Rawat
07211402020
<tr><td> BCA</td>
<td><pre><b>Qualifying exam</b>:IPU CET
<b>Eligibility</b>MUST HAVE RANK
BELOW-976</pre></td>
</tr><tr><td>MCA</td><td>
<pre><b>Qualifying exam</b>: NIMCET
<b>Eligibility</b>: Graduation degree in relevant stream with a
minimum of 50% aggregate from a recognised university </pre>
</td></tr><tr><td>MOP</td><td>
<pre><b>Qualifying exam</b>MERIT BASED
<b>Eligibility</b>: Eligibility conditions shall be as per
CONCERED BOARD applicable at the time of
admissions</pre>
</td></tr><tr><td>BSc</td><td><pre>
<b>Qualifying exam</b>: IPU CET
<b>Eligibility</b>: Passed Class 12 of CBSE or equivalent in
any Science stream with a minimum of 50% aggregate
in any four subjects including English (core/ elective/ functional)
provided that the candidate has passed in each subject separate
</pre></td></tr><tr><td>MBA</td><td><pre>
<b>Qualifying exam</b>: CAT
<b>Eligibility</b>: Passed a three-year bachelor's degree in
relevant stream with a minimum of 50% aggregate</pre></td>
34
Yatinder Singh Rawat
07211402020
</tr><tr><td>B.Ed</td><td><pre>
<b>Qualifying exam</b>: IPU CET

<b>Eligibility</b>: Bachelor’s degree and/ or in the Master’s


degree in Sciences/ Social Sciences/ Humanities, Engineering or
Technology with at least 50% aggregate,

Bachelor‘s in Engineering or Technology with specialisation in


Science and Mathematics with a minimum of 55% aggregate
</pre></td>
</tr><tr>
<td>BBA</td> <td>
<pre>
<b>Qualifying exam</b>: IPU CET
<b>Eligibility</b>: Class 12 from CBSE or equivalent with a
minimum of 50% aggregate with English (core/ elective/
functional) as a mandatory subject
</pre> </td></tr></table>
<h4 align="center"><a href="index.html">< < BACK TO
HOMEPAGE > ></a></h4>
</body>
</html>
8.staff.html <html>
<head>

35
Yatinder Singh Rawat
07211402020
<title>Staff</title>
</head>
<body bgcolor="#FFFFFF">
<h1 align="Center"><u>STAFF LIST</u></h1>
<table border="2" bordercolor="brown" cellpadding="10px"
cellspacing="2px" align="center">
<tr>
<th>Department / Center / Committee</th>
<th>Officer Name</th>
<th>Contact Information</th>
</tr>
<tr>
<td>PRINCIPAL</td>
<td>Prof. (Dr.) GIRISH SHARMA</td>
<td>
<pre>
+91-11-25302104, 25302105
Fax: +91-11-28035243
E-mail:<a href = "mailto:@ipu.ac.in">[email protected]</a>
</pre>
</td></tr>
36
Yatinder Singh Rawat
07211402020
<tr>
<td>VICE PRINCIPAL</td>
<td>Prof SN MISHRA</td>
<td>
<pre>
+91-11-25302113, 25302114
Fax: +91-11-25302111
E-mail:<a href = "mailto:[email protected]">[email protected]</a>
</pre></td></tr>
<tr>
<td>HOD(MCA)</td>
<td>PROF. KAUSHAL MEHTA</td>
<td>
<pre>
+91-11- 25302197
Email:<a href = "mailto:[email protected]">[email protected]</a>
</pre></td></tr>
</body>
</html>
9.events.html

37
Yatinder Singh Rawat
07211402020
<html>
<head>
<title>Events</title>
</head>
<body bgcolor="#7ffd4">
<!--TABLE-->
<table border="2 Black" align="center">
<tr><th>S.No.</th><th>Event Name</th></tr>
<tr>
<td>1.</td><td> <a href="#">Mehfil-e-mushaira </a>
</td</tr>
<tr><td>2.</td><td><a href="#">Internation Law
Workshop</a>
</td></tr>
<tr><td>3.</td><td><a href="#">Youth Money Olympiad</a>
</td></tr><tr>
<td>4.</td><td><a href="#">Techspace Workshop</a></td>
</tr><tr>
<td>5.</td><td><a href="#">Gamer's Delight</a></td></tr>
</table>
</body>
</html>
38
Yatinder Singh Rawat
07211402020
10.News.html
<html>
<head>
<title>News</title>
</head>
<body bgcolor="lightgrey">
<h2 id="top" align="center"><u><i>News</i></u></h2>
<ol>
<pre>
<li><a href="#stage"><abbr title="The green room
shenanigans,
Reading"> STREETS: SET TO BE LIT ON FIRE </abbr></a>
</li>

<li><a href="#football"><abbr title="“It’s not the will to


win, .”
Continue Reading">FOOTBALL FEVER!! FOOTBALL
FANTICS!!</abbr></a></li>

<li><a href="#independence"><abbr title="“Bhara nahi jo


Reading">INDEPENDENCE DAY - 2016 CELEBRATION AT
GGSIPU</abbr></a></li>
<li><a href="#quiz"><abbr title="The Literary club of GGSIP
2016 at 3.30 p.m. Continue Reading">THE GREAT INDIAN
QUIZ </abbr></a></li>

39
Yatinder Singh Rawat
07211402020
<li><a href="#GLOBALISATION"><abbr title="On
September
12, 2016, Continue Reading">NATIONAL CONFERENCE ON
GLOBALIZATION</abbr></a></li></pre></ol>
<h4 align="center" id="stage"><u>"STAGE & STREETS: SET
TO BE LIT ON FIRE"</u></h4>
<img src="imgs/news/aveksha.jpg" alt="stage & streets"
width="400px" height="200px">
<h4 align="center"><u><i><b>Kalkal (USLLS)</b></i></u>
</h4><p> The green room shenanigans, on stage practices, street
performances and raging emotions; AVEKSHA is the lifeline of
chatterboxes<br><br>.</p>
<h4 align="center"><a href="#top">[ ^ BACK TO TOP ^ ]</a>
</h4>
<h4 align="center" id="football"><u>FOOTBALL FEVER!!
FOOTBALL FANATICS!!</u></h4>
<img src="imgs/news/football.jpg" alt="Football Event"
width="400px" height="200px">
<h4 align="center"><u><i><b>Shivani Tyagi, Sandeep Singh
(USMC)</b></i></u></h4>

<p> “It’s not the will to winstudies equal emphasis is given to


sports. <br> <br> The madness amongst people for football
could be easily seen from the huge crowd of supporters that came
and cheered for their favorite teams and players. Almost every
match was thoroughly enjoyed by the players as well as by the
onlookers. </p>
40
Yatinder Singh Rawat
07211402020
<h4 align="center"><a href="#top">[ ^ BACK TO TOP ^ ]</a>
</h4><h4 align="center" id="independence"><u>
INDEPENDENCE DAY – 2016 CELEBRATION AT
GURUGOBIND SINGH INDRAPRASTHA UNIVERSITY</u>
</h4><img src="imgs/news/iday.jpg" alt="independence day
2016
Celebration" width="400px" height="200px">
<h4 align="center"><u><i><b>Anmol (USLLS)</b></i></u>
</h4>

<p>“Bhara nahi jo bhaavo se, behti jismein rasdhaar nahi; Hriday


“70 Saal Azadi- Zara Yaad Karo Kurbani”, also called “AZADI
70”, . <br> All the students and the faculty present were drooling
in the essence of patriotism. .
</p>
<h4 align="center"><a href="#top">[ ^ BACK TO TOP ^ ]</a>
</h4>
<h4 align="center" id="quiz"><u>THE GREAT INDIAN QUIZ:
AN INITIATIVE BY THE LITERARY CLUB</u></h4>
<img src="imgs/news/literary quiz.jpg" alt="The Great Indian
Quiz"width="400px" height="200px">
<h4 align="center"><u><i><b>Anshu Yadav(USCT)</b></i>
</u></h4>
<p>
The Literary club of GGSIP University conducted a quiz as a
part <br><br>All the participants, comprised into teams of two,

41
Yatinder Singh Rawat
07211402020
were provided with tri-color badges upon taking the seat.
minutes, followed by a short discussion about the answer
<br>The fifth a bioscopic made on them <br>
Mohit Singh Nayal, a student of USCT commented, “It was a
heartening events to come!”</p>
<h4 align="center"><a href="#top">[ ^ BACK TO TOP ^ ]</a>
</h4><h4 align="center" id="GLOBALISATION"><u>
NATIONAL CONFERENCE ON
GLOBALIZATION</u></h4>
<img src="imgs/news/globalisation.jpg" alt="NATIONAL
CONFERENCE ON GLOBALIZATION" width="400px"
height="400px">
<h4 align="center"><u><i><b>Devmani Sharma, Shiva
Wadhwa,
Amit Singh (USCT)</b></i></u></h4>
<p> On September 12, 2016, an entire galaxy of intellectuals
landed in the sprawling campus<br>
<h3 align="right"><a href="#top"> ^ BACK TO TOP ^ </a>
</h3>
</body>
</html>
OUTPUT
Front-Page

42
Yatinder Singh Rawat
07211402020

about us

courses
43
Yatinder Singh Rawat
07211402020

staff

44
Yatinder Singh Rawat
07211402020

11) Create an Html Document showing the use of Image


map.
CODE
45
Yatinder Singh Rawat
07211402020
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new
page and read more about the topic:</p>
<img src="workplace.jpeg" alt="Workplace" usemap="#workmap"
width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer"
href="computer.html">
<area shape="circle" coords="337,300,44" alt="Cup of coffee"
href="coffee.html">
</map>
</body>
</html>

OUTPUT

46
Yatinder Singh Rawat
07211402020

47
Yatinder Singh Rawat
07211402020
12) Create a Registration
form,mailaccount,signupform.using all input
types,textarea,labels,etc

SOURCE CODE

1.Signupform.html
<html>
<head>
<title>Sing Up Form</title>
</head>
<body>
<fieldset> <legend><h1 align="center"><u>SIGN UP
FORM</u></h1>
</legend><form action="GGSIPUFORM.html">
<br><label for="cname">Candidate Name</label><br>
<input type="text" name="cname" id="cname" required>
<br><br><label for="Contact">Mobile No</label><br>
<input type="tel" name="Contact" id="Contact" pattern="[0-9]{2}-[0-9]
{5}-[0-9]{5}" required><br><br>
<label for="email">Enter Email ID</label><br>
<input type="email" name="email" id="email" required></fieldset>
<fieldset><legend><h2>Choose Your User ID and Password</h2>
</legend>

48
Yatinder Singh Rawat
07211402020
<label for="userid">Enter User ID</label>
<input type="text" name="userid" id="userid"><br><br>
<label for="pass">Choose Your Password</label>
<input type="password" name="pass" id="pass"><br><br>
<label for="pass">Confirm Password</label>
<input type="password" name="pass" id="pass"><br><br>
<input type="submit" value="Submit"></fieldset></form>
</body>
</html>

2.Registrationform
<html>
<head>
49
Yatinder Singh Rawat
07211402020
<title>Application Form</title>
</head>
<body>
<form action="submit.html">
<h1 align="center"><u> Candidate Application Details
</u></h1>
<fieldset><legend><h2> Personal Details</h2></legend>
<label for="fname">Enter First Name</label>
<input type="text" id="fname" placeholder="First Name"><br>
<label for="lname">Enter Last Name</label>
<input type="text" id="lname" placeholder="Last Name"><br>
<label for="father-name">Enter Fathers Name</label>
<input type="text" id="father-name" placeholder="Father's
Name"><br><br>
<label for="mother-name">Enter Mother's Name</label>
<input type="text" id="mother-name"
placeholder="mothername"><br><br>
<label for="nationality">Enter nationality</label>
<input type="text" id="nationality"
placeholder="Nationality"<br>
<label for="dob">Enter Date of Birth</label>
<input type="date" id="dob"><br><br>
<label for="gender">Choose Gender : </label><br><br>
<input type="radio" name="gender" id="Male">
<label for="Male">Male</label>
50
Yatinder Singh Rawat
07211402020
<input type="radio" name="gender" id="Female">
<label for="Female">Female</label>
<input type="radio" name="gender" id="other">
<label for="other">Other</label><br><br>
<label for="category">Select Category</label>
<select name="category" id="category">
<option value="--Select--">--Select--</option>
<option value="Gen">General</option>
<option value="EWS">General-EWS</option>
<option value="Sc">Schedule Caste(SC)</option>
<option value="st">Schedule Tribe(ST)</option>
<option value="obc">Other Backword Class (OBC)</option>
</select>
</fieldset><fieldset><legend><h2>Contact
Details</h2</legend>
<label for="email">Enter Email ID</label>
<input type="email" id="email"
placeholder="[email protected]"
required>&nbsp;&nbsp;&nbsp;
<label for="phoneno">Enter Phone No</label>
<input type="tel" id="phoneno"> <br><br>
<h3>Address</h3>
<label for="aline1">Enter Address Line 1</label><br>
<textarea id="aline1" cols="30" rows="10" wrap="soft">
</textarea><br><br>
51
Yatinder Singh Rawat
07211402020
<label for="state">State</label>
<input type="text" id="state">&nbsp;&nbsp;&nbsp;
<label for="city">City</label>
<input type="text" id="city">&nbsp;&nbsp;&nbsp;
<label for="pin">Pincode</label>
<input type="number" id="pin">&nbsp;&nbsp;&nbsp;
<label for="Country">Country</label>
<input type="text" id="Country">
</fieldset><fieldset>
<legend> <h2>Matriculation(10th) Details</h2> </legend>
<label for="nameofboard">Name of the
Board/Council/University</label>
<input type="text" name="nameofboard"
id="nameofboard"><br>
<label for="school">Name of the Institute/School</label>
<input type="text" name="school" id="school"><br><br>
<label for="subjects">Subjects</label><br><br>
<label for="subject1">Subject 1</label>
<input type="text" id="subject 1"><br><br>
<label for="subject1">Subject 1</label>
<input type="text" id="subject 2"><br><br>
<label for="subject1">Subject 2</label>
<input type="text" id="subject 3"><br><br>
<label for="subject1">Subject 4</label>
<input type="text" id="subject 4"><br><br>
52
Yatinder Singh Rawat
07211402020
<label for="subject1">Subject 5</label>
<input type="text" id="subject 5"><br><br>
<label for="subject1">Subject 6</label>
<input type="text" id="subject 6"><br>
<label for="yop10">Year of Passing</label>
<input type="number" id="yop10">&nbsp;&nbsp;&nbsp;
<label for="percentage">Percentage of Marks</label>
<input type="number" id="percentage">
</fieldset><fieldset>
<legend><h2>Intermediate (12th) Details</h2></legend>
<label for="qtype">Qualification type</label>
<input type="text" name="qtype" id="qtype"><br><br>
<label for="qtype">Status of Examination</label> <br><br>
<input type="radio" name="status" id="passed">
<label for="passed">Passed</label>
<input type="radio" name="status" id="">
<label for="status">Appearing</label><br><br>
<label for="nameofboard">Name of the
Board/Council/University</label>
<input type="text" name="nameofboard"
id="nameofboard"><br>
<label for="school">Name of the Institute/School</label>
<input type="text" name="school" id="school"><br><br>
<label for="subjects">Subjects</label><br><br>
<label for="subject1">Subject 1</label>
53
Yatinder Singh Rawat
07211402020
<input type="text" id="subject 1"><br><br>
<label for="subject1">Subject 1</label>
<input type="text" id="subject 2"><br><br>
<label for="subject1">Subject 2</label>
<input type="text" id="subject 3"><br><br>
<label for="subject1">Subject 4</label>
<input type="text" id="subject 4"><br><br>
<label for="subject1">Subject 5</label>
<input type="text" id="subject 5"><br><br>
<label for="subject1">Subject 6</label>
<input type="text" id="subject 6"><br>
<label for="yop10">Year of Passing</label>
<input type="number" id="yop10">&nbsp;&nbsp;&nbsp;
<label for="percentage">Percentage of Marks</label>
<input type="number" id="percentage">
</fieldset><fieldset>
<h2>Essential Experience Details</h2>
<p>Did you pass in 12th Class of 10+2 of CBSE or equivalent
with a minimum of 50% marks in aggregate with pass insubject
of non-vovcational stream with 50 theory and 50 practical
ratio).</p>
<input type="checkbox" name="yes" id="yes">
<label for="yes" required>Yes</label>
<h2>Candidate Documents/Images Upload Details</h2>
<label for="10th">Upload 10th Mark Sheet</label>
54
Yatinder Singh Rawat
07211402020
<input type="file" name="10th" id="10th"
accept="application/pdf" required> <br><br>
<label for="12th">Upload 12th Mark Sheet</label>
<input type="file" name="12th" id="12th"
accept="application/pdf" required><br><br>
<label for="Image">Upload Image</label>
<input type="file" name="Image" id="Image" accept="image/*"
required><br><br>
<label for="sign">Upload Signatures</label>
<input type="file" name="sign" id="sign" accept="image/*"
required>
<h2>Declaration</h2>
<p>I hereby, solemnly declare that information provided by me
in the form is true to the best of my false or wrong my
candidature shall be cancelled.</p>
<input type="checkbox" name="t&c" id="t&c" required>
<label for="t&c">I agree to Terms & Conditions</label><br>
<input type="submit">
<input type="reset" value="Clear">
</fieldset></form>
</body>
</html>

OUTPUT

55
Yatinder Singh Rawat
07211402020

56
Yatinder Singh Rawat
07211402020

57
Yatinder Singh Rawat
07211402020

58

You might also like