Web Designing Unit 3

PRACTICAL FILE
OF
WEB DESIGNING LAB(MCA-17)
Master of Computer Applications (MCA)
Submitted To: Submitted By:
Dr. AYUSH SHARMA AAKASH
ASSISTANT PROFESSOR 210010120001
DEPARTMENT OF COMPUTER MCA 1ST YEAR
SCIENCE & ENGINEERING 1ST SEMESTER
Department of Computer Science & Engineering
Guru Jambheshwar University of Science & Technology, Hisar

INDEX
S. NO. PROGRAM NAME DATE SIGNATURE
W.D.P. To Explain Html Document
1.
Structure With Basic Tags
W.A.P To Display Three Type Of
2.
Lists Using Various Attributes
Implement A Table Of 4*4 With
3.
Rowspan And Colspan Attributes.
W.A.P. To Upload Two Images In
4. Opposite Sides Of Screen Using
Various Attributes
W.A.P. To Explain Four Type Of
5.
Selectors
W.A.P. To Explain Various Types
6.
Of Core Attributes Of Html.
Prepare Two Html Web Pages And
7.
Link Them Through Anchor Tag.
W.A.P. To Explain The Concept Of
8.
Frame And Frameset Tags.
W.A.P. To Implement Inline And
9.
Internal Style Sheet.
Prepare An External Style Sheet
10. (CSS) And Link It To The HTML
Web Page.
W.A.P. To Explain Various Types
11.
Of Properties Of Css
W.A.P. To Design A Form Using
12.
Various Attributes Of HTML
13. Prepare A Resume Of Yourself
14. W.A.P. For Closed Property
15. W.A.P. For Alert() Method
16. W.A.P. For Confirm() Method
17. W.A.P. For Prompt() Method
1.W.D.P. TO EXPLAIN HTML DOCUMENT STRUCTURE WITH BASIC
TAGS
<HTML>
<HEAD>
<TITLE>HTML BASIC TAGS</TITLE>
</HEAD>
<BODY>
<H1><CENTER>THIS IS OUR FIRST HTML PROGRAM
</CENTER></H1>
<P>
<FONT COLOR=RED FACE=ARIAL>
IT INCDLUDES BASIC HTML TAGS LIKE PARAGRAPH TAG,BREAK LINE TAG,HEADING TAG
...<BR><BR><BR></FONT>
<FONT COLOR=BLUE>
<ALIGN=RIGHT>
IT ALSO INCLUDES CENTER TAG AND FONT TAG
</ALIGN>
</FONT></P>
</BODY>
</HTML>
OUTPUT:
2. W.A.P to display three type of lists using various attributes
<HTML>
<HEAD>
<TITLE> MY COMPUTER </TITLE>
</HEAD>
<BODY style="Arial Rounded MT">
<H1 ALIGN="CENTER"> MY COMPUTER </H1><br>
<font face="Courier">COMPUTER IS AN ELECTRONIC DEVICE WHICH TAKE INPUT PROCESS IT
AND GIVES OUTPUT.</font><BR><BR>
<B><U>Type of devices:</U></B>
<oL type="I">
<LI>Input devices
<LI>Output devices
</oL>
<dl>
<dt> Input Devices
<dd>Input devices are devices which are used to give the input.
</dl>
<OL>
<LI>Input devices are:
<UL>
<LI>Mouse
<Li>Keyboard
<LI>Scanner
</ul>
</OL>
<dl>
<dt> Output Devices
<dd> Output devices are the devices which are used to show the output.
</DL>
<OL>
<li>Output devices are:
<ul type="square">
<li>Monitor
<li>speaker
<li>printer
</UL>
</OL>
</BODY>
</HTML>
OUTPUT:
3. IMPLEMENT A TABLE OF 4*4 WITH ROWSPAN AND COLSPAN
ATTRIBUTES.
<html>
<head>
<title> RESULT</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE BORDER=10 WIDTH=50% CELLSPACING=5 CELLPADDING=2>
<TR>
<TH COLSPAN=4 >Master of Computer Applications</TH>
</TR>
<TR ALIGN=CENTER>
<TH>CLASS</TH>
<TH>ROLL NO.</TH>
<TH>NAME</TH>
<TH>MARKS</TH>
</TR>
<TR ALIGN=CENTER>
<TH ROWSPAN=2>MCA I</TH>
<TD>1001</TD>
<TD>RAHUL</TD>
<TD>80</TD>
</TR>
<TR ALIGN=CENTER>
<TD>1002</TD>
<TD>RAJAT</TD>
<TD>70</TD>
</TR>
<TR ALIGN=CENTER>
<TH ROWSPAN=2>MCA II</TH>
<TD>2001</TD>
<TD>SAHIL</TD>
<TD>85</TD>
</TR>
<TR ALIGN=CENTER>
<TD>2002</TD>
<TD>SURAJ</TD>
<TD>90</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
OUTPUT:
4. W.A.P. TO UPLOAD TWO IMAGES IN OPPOSITE SIDES OF SCREEN
USING VARIOUS ATTRIBUTES
<HTML>
<HEAD>
<STYLE>
* { BOX-SIZING: BORDER-BOX;}
.COLUMN
{
FLOAT: LEFT;
WIDTH: 50%;
PADDING: 5PX;
}
</STYLE>
</HEAD>
<BODY>
<H2>Images Side by Side</H2>

<DIV CLASS="COLUMN">
<IMG SRC="C:\USERS\PUBLIC\PICTURES\SAMPLE PICTURES\DESERT.JPG" ALT="DESERT"
STYLE="WIDTH:100%">
</DIV>
<DIV CLASS="COLUMN">
<IMG SRC="C:\USERS\PUBLIC\PICTURES\SAMPLE PICTURES\LIGHTHOUSE.JPG" ALT="LIGHT
HOUSE" STYLE="WIDTH:100%">
</DIV>
</BODY>
</HTML>
OUTPUT:
5. W.A.P. TO EXPLAIN FOUR TYPE OF SELECTORS
<HTML>
<HEAD>
<STYLE>
P{ TEXT-ALIGN: CENTER; COLOR: RED;}

#PARA1{ TEXT-ALIGN: CENTER; COLOR: BLUE;}
.CENTER { TEXT-ALIGN: CENTER; COLOR: BLACK;}
P.CENTER { TEXT-ALIGN: CENTER; COLOR: GREEN;}
* { TEXT-ALIGN: CENTER; COLOR: BLUE;}
</STYLE>
</HEAD>
<BODY>
<p>ELEMENT SELECTOR</p>
<p id="para1">ID SELECTOR</p>
<h1 class="center">CLASS SELECTOR</h1>

<p class="center">GREEN and center-aligned paragraph.</p>
<h1 class="center">This heading will not be affected</h1>

<p class="center">CLASS SELECTOR ON SPECIFIC ELEMENT</p>
Universal Selecror : Every element on the page will be affected by the style.
Selectors
</BODY>
</HTML>
OUTPUT:
6. W.A.P.TO EXPLAIN VARIOUS TYPES OF CORE ATTRIBUTES OF
HTML.
<HTML>
<HEAD>
<TITLE>core attributes</TITLE>
<STYLE>
p{color:red;
font-size:150%;
}
#AS
{
color:blue;
font-face:forta;
font-size:200%;
}
.SG
{
color:orange;
font-size:300%
}
</STYLE></HEAD>
<BODY>
<h4 title="hello html"><CENTER><font size="20">This is title attribute</font></CENTER></h4>
<p>This is the css selector style sheet</p>
<h6 id=AS>This is id selector</h6>
<h3 class=SG>This is the class selector</h3>
</BODY>
</HTML>
OUTPUT:
7. PREPARE TWO HTML WEB PAGES AND LINK THEM THROUGH
ANCHOR TAG.
PROGRAM 1:
<HTML>
<HEAD>
<TITLE>EXTERNAL LINKING</TITLE>
<BODY>
<h2><CENTER>
GURU JAMBHESHWAR UNIVERSITY OF SCIENCE &<BR>
TECHNOLOGY, HISAR (Haryana)</h2></CENTER>
<CENTER>
(State Govt. University)<BR>
(Established by State Legislature Act 17 of 1995)<BR>
www.gjust.ac.in<BR><BR>
NAAC `A’ Grade Accredited University since 2002<BR>
Graded Autonomous University by UGC-2018<BR>
NIRF ranking 2020: 94th-Among Universities<BR>
ARIIA ranking 2020: Rank Between 6th – 25th Among Govt. and Govt. Aided
Universities<BR>
TIMES World ranking 2020: Among 801-1000 Universities<BR>
Times World Asia Ranking 2021: Rank Band 251-300<BR>
India Today-MDR Technical University Ranking 2021: 26TH Rank<BR>
h-Index: 94 (Scopus)
<BR><BR>
<a href="college.html">
<B>PICTURE</B>
</a>
</CENTER>
</BODY>
</HTML>
OUTPUT:
PROGRAM 2:
<HTML>
<HEAD>
<TITLE>LINKED PAGE</TITLE>
<BODY>
<CENTER>
<FONT SIZE=5>
<b>WELCOME TO GURU JAMBHESHWAR UNIVERSITY OF SCIENCE &
TECHNOLOGY, HISAR (Haryana)</b>
</FONT>
<BR><BR>
<IMG SRC="C:\Users\Admin\Desktop\DOWNLOAD.PNG"HEIGHT=300 WIDTH=300 BORDER="10">
</CENTER>
</BODY>
</HTML>
OUTPUT:
8. W.A.P. TO EXPLAIN THE CONCEPT OF FRAME AND FRAMESET
TAGS.
<HTML>
<frameset border="10" cols="40%,60%">
<frame src="C:\Users\Admin\Desktop\web practical\program 2.html" scrolling="yes">
<frame src="C:\Users\Admin\Desktop\web practical\program 3.html">
</frameset>
</HTML>
OUTPUT:
9. W.A.P. TO IMPLEMENT INLINE AND INTERNAL STYLE SHEET.
<HTML>
<HEAD>
<STYLE>
P {COLOR: BLUE;}
</STYLE>
</HEAD>
<BODY>
<h1>Inline Style Sheet</h1>

<p style="color:red;">Welcome to GJU</p>
<h1>Internal Style Sheet</h1>
<p>Welcome to GJU</p>
</BODY>
</HTML>
OUTPUT:
10. PREPARE AN EXTERNAL STYLE SHEET (CSS) AND LINK IT TO
THE HTML WEB PAGE.
CSS SHEET: sheet1.css
P{COLOR:RED;}
.ABC
{
COLOR:RED;
BACKGROUND:BLUE;
TEXT-ALIGN:CENTER;
FONT-SIZE:50;
}
#ABC
{
FONT-SIZE:100;
FONT-STYLE:ITALIC;
}
PROGRAM:
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="./sheet1.css" />
</HEAD>
<BODY>
<H2><p>helloo</p></H2>
<h1 id=abc>hello</h1>
</BODY>
</HTML>
OUTPUT:
11. W.A.P. TO EXPLAIN VARIOUS TYPES OF PROPERTIES OF CSS
<HTML>
<HEAD>
<STYLE>
h1
{
color: blue;
font-family: verdana;
font-size: 300%;
}
p
{
color: red;
font-family: courier;
font-size: 160%;
}
p
{
border: 2px solid powderblue;
padding: 30px;
margin: 50px;
}
</STYLE>
</HEAD>
<BODY>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</BODY>
</HTML>
OUTPUT:
12. W.A.P. TO DESIGN A FORM USING VARIOUS ATTRIBUTES OF
HTML
<HTML>
<HEAD>
<TITLE>FORM</TITLE>
</HEAD>
<BODY>
<CENTER><H1><U>ADMISSION FORM</U></H1></CENTER>
<font face="Arial Rounded MT" size="4">

<FORM>
NAME : <input type="text" name="text" size="20"><BR><BR>

FATHER'S NAME : <input type="text2" name="text2" size="20"><BR><BR>
STATE
<select name="state">
<option value="haryana">HARYANA
<option value="punjab">PUNJAB
<option value="rajasthan">RAJASTHAN
</SELECT><BR><BR>
GENDER :
<input type="radio" name="option" value="male">MALE
<input type="radio" name="option" value="female">FEMALE
<BR><BR>
GOVERNMENT EMPLOYEE :
<input type="checkbox" name="option1" value="yes">YES
<input type="checkbox" name="option2" value="no">NO
<BR><BR>
PASSWORD :
<input type="password" name="text" size="8">
<BR><BR>
<HR>
<CENTER>
<input type="submit" value="SUBMIT">
<input type="reset" value="RESET">
</CENTER>
</FORM>
</FONT>
</BODY>
</HTML>
OUTPUT:
13. PREPARE A RESUME OF YOURSELF
<HTML>
<HEAD>
<TITLE>RESUME</TITLE>
</HEAD>
<BODY>
<H1 align="center">RESUME</H1>
<font face="Brush Script MTbn ">
<H2><B>AAKASH</B></H2>
<B><p align="right">E-mail : ag85267104@gmail.com<br>
contact no. : 9468210779</p></B>
</font><hr color="black">
<h3>CV Highlights</h3>
<p>
<ul>
<li>Currently doing masters in computer application</li>
<li>Learnt basic C, C++, HTML, CSS </li>
<li>An independent, dedicated, efficient person. These attributes are proved through the series of
courses I have taken or I am taking as of now independently through online platforms.</li>
<li>Good Communication Skills, Presentation Skills, attitude towards leadership, authorisation and
delegation, conflict resolution and negotiation and a very good team worker.</li></ul>
</p>
<h3>Educational Qualifications</h3>
<table>
<tr id="heading">
<td>Qualification</td>
<td>Board</td>
<td>Percentage / Grades</td>
<td>Year</td>
</tr>
<tr>
<td>Matriculation</td>
<td>C.B.S.E. India</td>
<td>9.4 CGPA</td>
<td>2015</td>
</tr>
<tr>
<td>Higher secondary(science stream)</td>
<td>C.B.S.E. India</td>
<td>68.40%</td>
<td>2017</td>
</tr>
<tr>
<td>Bachelor of science with C.S.</td>
<td>Jaat college affiliated by GJU,Hisar</td>
<td>A Grade</td>
<td>2020</td>
</tr></table>
<h3>Personal Information:</h3>
<p>
<ul>
<li>
A young, determined hard and smart working person. I believe in task based roles and complete
ownership of work.
<li>
<B>Languages Known:</B>English, Hindi,punjabi</li>
<li>
<B>Hobbies:</B>I love books / magazines, playing Chess, swimming, listening music, surfing
Internet, self-learning through e-courses.</li> </ul>
</p>
<p>
I hereby declare that the details furnished above are true and correct to the best of my knowledge and
belief.</p>
</BODY>
</HTML>
OUTPUT:
14. W.A.P. FOR CLOSED PROPERTY
<HTML>
<HEAD>
<SCRIPT>
var myWindow;
function openWin()
{
myWindow = window.open("", "myWindow", "width=400, height=200");
}
function closeWin()
{
if (myWindow)
{
myWindow.close();
}
}
function checkWin()
{
if (!myWindow)
{
document.getElementById("msg").innerHTML = "'myWindow' has never been opened!";
}
else
{
if (myWindow.closed)
{
document.getElementById("msg").innerHTML = "'myWindow' has been closed!";
}
else
{
document.getElementById("msg").innerHTML = "'myWindow' has not been closed!";
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<button onclick="openWin()">Open "myWindow"</button>
<button onclick="closeWin()">Close "myWindow"</button><br><br>
<button onclick="checkWin()">Has "myWindow" been closed?</button>
<br><br>
<div id="msg"></div>
</BODY>
</HTML>
OUTPUT:
15. W.A.P. FOR ALERT BOX
<HTML>
<BODY>
<h1>The Window Object</h1>

<h2>The alert() Method</h2>
<p>Click the button to display an alert box.</p>
<button onclick="myFunction()">Try it</button>
<SCRIPT>
function myFunction()
{
alert("Hello! I am an alert box!");
}
</SCRIPT>
</BODY>
</HTML>
OUTPUT:
16. W.A.P. FOR CONFIRM() METHOD
<HTML>
<BODY>
<h2>The confirm() Method</h2>
<p>Click the button to display a confirm box.</p>

<SCRIPT>
{
var r=confirm("Press a button!");
if (r==true)
{
document.write("You pressed OK!");
}
else
{
document.write("You pressed Cancel!");
}
}
</SCRIPT>
</BODY>
</HTML>
OUTPUT:
17. W.A.P. FOR PROMPT() METHOD
<HTML>
<BODY>
<h2>The prompt() Method</h2>
<p>Click the button to demonstrate the prompt box.</p>
<p id="demo"></p>
<SCRIPT>
{
let person = prompt("Please enter your name", "Harry Potter");
if (person != null)
{
document.getElementById("demo").innerHTML =
"Hello " + person + "! How are you today?";
}
}
</SCRIPT>
</BODY>
</HTML>
OUTPUT :

Web Designing Unit 3

Uploaded by

Copyright:

Available Formats

You might also like

Web Designing Unit 3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Designing Unit 3

Uploaded by

Copyright:

Available Formats

PRACTICAL FILE

Master of Computer Applications (MCA)

Submitted To: Submitted By:

Dr. AYUSH SHARMA AAKASH

ASSISTANT PROFESSOR 210010120001

DEPARTMENT OF COMPUTER MCA 1ST YEAR

SCIENCE & ENGINEERING 1ST SEMESTER

Department of Computer Science & Engineering

Guru Jambheshwar University of Science & Technology, Hisar

<H2>Images Side by Side</H2>

P{ TEXT-ALIGN: CENTER; COLOR: RED;}

<p id="para1">ID SELECTOR</p>

<h1 class="center">CLASS SELECTOR</h1>

<h1 class="center">This heading will not be affected</h1>

<h1>Inline Style Sheet</h1>

<h1>Internal Style Sheet</h1>

CSS SHEET: sheet1.css

<font face="Arial Rounded MT" size="4">

NAME : <input type="text" name="text" size="20"><BR><BR>

<h1>The Window Object</h1>

<p>Click the button to display an alert box.</p>

<button onclick="myFunction()">Try it</button>

<p>Click the button to display a confirm box.</p>

You might also like