Scribd
Upload
125 views

PHP Lab Manual

The document is a lab report submitted by Jisha Abbasi for the 4th semester Hypertext Preprocessor (PHP) lab at Amity University Rajasthan, Jaipur. It contains 17 programs completed for the PHP lab covering topics like making lists and frames in HTML, performing section linking, designing forms using JavaScript, and styling elements using CSS. For each program, the aim, code, and output is provided.

Uploaded by

Nitya Kushwah
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
125 views

PHP Lab Manual

The document is a lab report submitted by Jisha Abbasi for the 4th semester Hypertext Preprocessor (PHP) lab at Amity University Rajasthan, Jaipur. It contains 17 programs completed for the PHP lab covering topics like making lists and frames in HTML, performing section linking, designing forms using JavaScript, and styling elements using CSS. For each program, the aim, code, and output is provided.

Uploaded by

Nitya Kushwah
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

AMITY UNIVERSITY RAJASTHAN, JAIPUR

AMITY SCHOOL OF ENGINEERING AND TECHNOLOGY

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING


INFORMATION TECHNOLOGY

LAB REPORT

Lab Manual for Hypertext Preprocessor (PHP)

4th SEMESTER

Candidate: Coordinator:

Jisha Abbasi Mr. Sanjay Jain


A20405220009

Jaipur, RJ
April 26, 2022
INDEX
S No. Experiment Date Remarks

Write a html program to make


a list.
1

Write a html program to


perform section linking.
2

Write a html program to divide


the entire webpage into frame
3 containing 30% part of 1st row
and 70% part of 2nd row and in
1st row 30% part is of 1st
column and 70% of 2nd
column.

Write a html program to divide


the entire webpage into frame
4 containing 20% part of 1st row,
60% part of 2nd row and 20%
part of 3rd row and in 2nd row
50% part is of 1st column and
50% of 2nd column.
Write a html program to divide
entire webpage into frames
such that first frame contains a
5 text which move from right to
left and 2nd frame contain link
of courses when the link is
clicked, its description will
display in 3rd frame.

Write a program to design a


form using user interface
6
component.

Write a JavaScript program to


enter numbers using prompt
7 and to display them using alert
function.

Write a JavaScript program to


make a calculator.
8

Write a JavaScript program to


make a form and to display that
9 form with entries.

Write a JavaScript program to


change the size of image.
10
Write a JavaScript program to
change the background color of
webpage.
11
Write a JavaScript program to
12 calculate the total amount of
shopping list.

Write a JavaScript program to


add two values enter in two
13 different textboxes.

14 Write a CSS program to change


background color of different
elements.

15 Write a program to show inline


style sheet.

16 Write a program for linking an


external style sheet.

17 Write a program to import an


external style sheet.
Program - 1
Aim: Write a HTML program to make a list.

<html>
<body>
<ul>
<li>Jaipur is</li>
<li>Captial of Rajasthan</li>
<li>Pink city</li>
</ul>
<ul type=circle>
<li>Banglore is</li>
<li>Captial of Karnataka</li>
<li>Garden city</li>
<li>Cyber city</li>
<ul type=square>
<li>Hyderabad is</li>
<li>Captial of Andhra Pradesh</li>
<li>Cyberabad</li>
</ul>
</body>
</html>

Program - 2
Aim: Write a html program to perform section linking.

Branch.html
<html>
<head>
<title>Document</title>
</head>
<body>
<ol>
<li><a href="info.html#CSE">CSE</a></li>
<li><a href="info.html#IT">IT</a></li>
<li><a href="info.html#ECE">ECE</a></li>
</ol>
</body>
</html>
info.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
<center><h1> WELCOME</h1></center>
<a name="Introduction"></a>
<h2>Introduction</h2>
<p>Computer Engineering has always been one of the top in-
demand career choices for young aspirants. This is primarily because
the field branches out into numerous specializations, thereby creating
a host of career paths for Computer Engineers. However, the sheer
number of career choices available in Computer Engineering can often
become overwhelming for many. In fact, students who are still figuring
out what they want in their professional aspect of life are always faced
with one confusing question:
“What to do after Computer Engineering?”
Our answer – there is no one answer to this question! And that’s the
beauty of Computer Engineering. There is no one single career options
but several after computer engineering. Once you earn your
Bachelor’s degree in Computer Engineering, you will have a slew of
options before you. You can either choose to pursue higher studies or
enter the corporate world.</p>
<img src="https://images.pexels.com/photos/2058128/pexels-
photo-
2058128.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
height="1500" width="1500">
<br><br><br><br><br><br><br><br><br>
<h2><a name="CSE">CSE</a></h2>
<p>Computer Science Engineering (CSE) is an engineering discipline
that covers several topics related to computation, programming
languages, program design, computer hardware and software and
integrates several fields of computer science. It is one of the trending
subjects which students pursue after completing Class 12. CSE is a
four-year undergraduate course which involves various aspects
needed for the creation of a computer system.
Career options in CSE:
Career options in CSE include software developers, hardware
engineers, system designers, system analysts, database
administrators and more. One must have analytical and
programming skills, basic knowledge of web design, ideas of
machine learning and algorithms to pursue a CSE course.
Subjects in CSE course:
From computer architecture and organisation to software testing,
there are various subjects one has to study during this course.
Applicants also study cloud computing, database management
systems, compiler design, computer networks, data structures and
operating systems.
Eligibility Criteria for CSE:
Students who have passed their Class 10 and 12 board
examinations from a recognised education board with Physics,
Chemistry and Mathematics as primary subjects and appropriate
passing marks can opt for this course. If you have completed your
B.Tech from a recognised college with a minimum passing percentage,
then you can go for CSE course.</p>
<img src="https://www.chitkara.edu.in/wp-
content/uploads/2019/02/CSE-Logos-1.jpg" height="1500"
width="1500">
<a href="#Introduction">move back</a>
<br><br><br><br><br><br><br><br><br>
<h2><a name="IT">IT</a></h2>
<p>Information technology (IT) is the use of any computers,
storage, networking and other physical devices, infrastructure and
processes to create, process, store, secure and exchange all forms of
electronic data. Typically, IT is used in the context of business
operations, as opposed to technology used for personal or
entertainment purposes. The commercial use of IT encompasses both
computer technology and telecommunications.
The Harvard Business Review coined the term information
technology to make a distinction between purpose-built machines
designed to perform a limited scope of functions, and general purpose
computing machines that could be programmed for various tasks. As
the IT industry evolved from the mid-20th century, computing
capability increased, while device cost and energy consumption
decreased, a cycle that continues today when new technologies
emerge.
What does information technology encompass?
The IT department ensures that the organization's systems,
networks, data and applications all connect and function properly. The
IT team handles three major areas: deploys and maintains business
applications, services and infrastructure (servers, networks, storage);
Monitors optimizes and troubleshoots the performance
of applications, services and infrastructure; and oversees the
security and governance of applications, services and
infrastructure. Most IT staff have different responsibilities
within the team that break into several key areas including:
Administration. Administrators handle the day-to-day
deployment, operation and monitoring of an IT environment,
including systems, networks and applications. Admins often perform
a range of other duties such as software upgrades, user training,
software license management, procurement, security, data
management and observing adherence to business process and
compliance requirements.
Support. Help desk staff specialize in answering questions,
gathering information and directing troubleshooting efforts for
hardware and software. IT support often includes IT asset and change
management, helping admins with procurement, handling backup and
recovery of data and applications, monitoring and analysing logs and
other performance monitoring tools and following established
support workflows and processes.
Applications. Businesses rely on software to perform work.
Some applications are procured and deployed from third parties, such
as email server applications. But many organizations retain a staff of
skilled developers that create the applications and interfaces -- such
as APIs -- needed to deliver critical business capabilities and services.
Applications might be coded in a wide array of popular languages and
integrated with other applications to create smooth and seamless
interactions between different applications. Developers might also be
tasked with creating interactive business websites and building mobile
applications. The trend toward agile or continuous development
paradigms require developers to be increasingly involved with IT
operations, such as deploying and monitoring applications.
Compliance. Businesses are obligated to observe varied
government- and industry-driven regulatory requirements. IT staff
play a major role in securing and monitoring access to business data
and applications to ensure that such resources are used according to
established business governance policy that meets regulatory
requirements. Such staff are deeply involved with security tasks and
routinely interact with legal and business teams to prevent, detect,
investigate and report possible breaches.
</p>
<img
src="https://cdn.ttgtmedia.com/rms/onlineimages/data_centerinfo_
tech_components_and_functions-f_mobile.png" height="1500"
width="1500">
<a href="#Introduction">move back</a>
<br><br><br><br><br>
<a name="ECE"></a>
<h2>ECE</h2>
<p>The full form of ECE is Electronics and Communication
Engineering. It is a massive branch of engineering that deals with
electronic equipment. The main concern of ECE is to conduct research,
design and develop electronic devices. Any troubleshoot related to
electronic devices also falls under the care of ECE. Naturally, the
communication sector has to be taken care of by an ECE engineer. If
you are an aspiring engineer, then buck up to set foot into a
remarkable journey with the ECE acronym.
The Dream of Becoming an ECE Engineer:
Holding on to big aspirations will give you the strength to
achieve your goals. If you have set your goal to pursue Electronics and
Communication Engineering, i.e. the full meaning of each, then have
a look at the following eligibility criteria:
To pursue ECE at the undergraduate level, a student must
come from a science background with a minimum of 50% with Physics,
Mathematics and Chemistry as the main subjects.
For the postgraduate level, a pupil must have a B.Tech degree
with a passing percentage on the aggregate of the same specification
subjects.
Let us get Going with ECE:
As the full form of ece suggests it is a branch of engineering,
an aspirant must enrol himself or herself in a good engineering college
to get the valued degree. If you are thinking about which college to
choose, here we have listed a few for you:
Indian Institute of Technology, Delhi
Jamia Millia Islamia University
Delhi Technological University
National Institute of Technology
Jadavpur University
What are the Subjects Taught in ECE?
Consuming the ECE full form in English, this branch of
engineering equips the students with all the antics needed for
conjuring up the best electronic communicative form. You can have a
pre idea of the areas trained here:
Solid State Devices
Satellite Communication
Analogue Transmission
Basic Electronics
Microwave Engineering
These are a few of the regions that ECE stresses. Other than
these, you will come in touch with various such areas while studying
ECE.</p>
<img
src="https://engineering.lehigh.edu/sites/engineering.lehigh.edu/file
s/_DEPARTMENTS/ece/academ ics/undergrad/ece-class-
flowchart.jpg" height="1500" width="1500">
<a href="#Introduction">move back</a>
</body>
</html>

Program - 3
Aim: Write a html program to divide the entire webpage into frame
containing 30% part of 1st row and 70% part of 2nd row and in 1st row
30% part is of 1st column and 70% of 2nd column.

<html>
<head>
<title>Document</title>
<frameset rows="30%,70%"noresize="yes">
<frame src="blink.html"></frame>
<frameset cols="30%,70%" noresize="yes">
<frame src="c.html"></frame>
<frame src="d.html"></frame>
</frameset>
</frameset>
</head>
</html>

Program - 4
Aim: Write a html program to divide the entire webpage into frame
containing 20% part of 1st row, 60% part of 2nd row and 20% part of
3rd row and in 2nd row 50% part is of 1st column and 50% of 2nd
column.

<html>
<head>
<title>Document</title>
<frameset rows="20%,60%,20%" noresize="yes">
<frame src="blink.html"></frame>
<frameset cols="50%,50%" noresize="yes">
<frame src="b.html"></frame>
<frame src="ul3.html"></frame>
</frameset>
<frame src="ul1.html"></frame>
</frameset>
</head>
</html>

Program - 5
Aim: Write a html program to divide entire webpage into frames
such that first frame contains a text which move from right to left and
2nd frame contain link of courses when the link is clicked, its
description will display in 3rd frame.
marquee.html
<html>
<head>
<title>Document</title>
</head>
<body>
<marquee>
<h1>ASET</h1>
</marquee>
</body>
</html>
course.html
<html>
<head>
<title>Document</title>
</head>
<body>
<ul type="none">
<li> <a href="c1.html " target="f3">C</a></li>
<li><a href="C++.html " target="f3">C++</a></li>
<li><a href="Java.html " target="f3">Java</a></li>
</ul>
</body>
</html>
c1.html
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>C programming</h1>
<p>C is a high-level and general-purpose programming language
that is ideal for developing firmware or portable applications.
Originally intended for writing system software, C was developed at
Bell Labs by Dennis Ritchie for the Unix Operating System in the early
1970s.
Ranked among the most widely used languages, C has a compiler
for most computer systems and has influenced many popular
languages notably C++.</p>
</body>
</html>
C++.html
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>C++ Programming</h1>
<p>C++ is a cross-platform language that can be used to create high-
performance applications. C++ was developed by Bjarne Stroustrup,
as an extension to the C language. C++ gives programmers a high level
of control over system resources and memory. The language was
updated 3 major times in 2011, 2014, and 2017 to C++11, C++14, and
C++17.</p>
</body>
</html>
Java.html
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>Java Programming</h1>
<p>Java is a programming language and computing platform first
released by Sun Microsystems in 1995. It has evolved from humble
beginnings to power a large share of today’s digital world, by providing
the reliable platform upon which many services and applications are
built. New, innovative products and digital services designed for the
future continue to rely on Java, as well.
</body>
</html>
frame4.html
<html>
<head>
<title>Document</title>
<frameset rows="20%,80%" noresize="yes">
<frame src="marquee.html" name="f1"></frame>
<frameset cols="40%,60%" noresize="yes">
<frame src="course.html" name="f2" ></frame>
<frame name="f3" ></frame>
</frameset>
</frameset>
</head>
</html>

Program - 6
Aim: Write a program to design a form using user interface
component.

<html>
<head>
<title> Form </title>
</head>
<body>
<form>
<table>
<tr>
<td>Name:</td>
<td><input type=textbox></td>
</tr>
<tr>
<td>Password:</td>
<td><input type=password></td>
</tr>
<tr>
<td>Hobbies:</td>
<td><input type=checkbox>Dance</td>
</tr>
<tr>
<td></td>
<td><input type=checkbox>Singing</td>
</tr>
<tr>
<td></td>
<td><input type=checkbox>Playing</td>
</tr>
<tr>
<td>Gender:</td>
<td><input type=radio name=r1>Male</td>
</tr>
<tr>
<td></td>
<td><input type=radio name=r1>Female</td>
</tr>
<tr>
<td>Country:</td>
<td><select>
<option>India</option>
<option>USA</option>
<option>China</option>
</select></td>
</tr>
<tr>
<td>Comments:</td>
<td><textarea></textarea></td>
</tr>
<tr>
<td><input type=Submit value=OK></td>
</tr>
</table>
</form>
</body>
</html>

Program - 7
Aim: Write a JavaScript program to enter numbers using prompt
and to display them using alert function.

<html>
<head>
<title>Document</title>
</head>
<body>
<script
language="JavaScript">
function a()
{
var arr = new
Array (5) for
(i=0;i<=5;i++)
{
arr[i]=prompt ("Enter a number: ")
}
for (i=0; i<=5; i++)
{
alert ("value = "+arr[i])
}
}
</script>
<form name="f1">
<input type="button" value="OK" OnClick="a()">
</form>
</body>
</html>

Program - 8
Aim: Write a JavaScript program to make a calculator.
<html>
<head>
<title>Document</title>
</head>
<body>
<script
language="JavaScript">
function calculator(val)
{
x=document.f1.t1.value+=val y=eval(x) //use
to evaluate the expression(perform mathematical
operation) document.f1.t1.value=y
}
</script>
<form name="f1">
<input type="textbox" name="t1">
<br> <br>
<table border="5">
<tr >
<td ><input type ="button" name="b1" value="1"
OnClick="calculator('1')"></td>
<td><input type ="button" name="b2" value="2"
OnClick="calculator('2')"></td>
<td><input type ="button" name="b3" value="+"
OnClick="calculator('+')"></td>
</tr>
<tr>
<td><input type ="button" name="b4" value="3"
OnClick="calculator('3')"></td>
<td><input type ="button" name="b5" value="4"
OnClick="calculator('4')"></td> <td><input type ="button"
name="b6" value="-" OnClick="calculator('-')"></td>
</tr>
<tr>
<td><input type ="button" name="b7" value="5"
OnClick="calculator('5')"></td>
<td><input type ="button" name="b8" value="6"
OnClick="calculator('6')"></td>
<td><input type ="button" name="b9" value="*"
OnClick="calculator('*')"></td>
</tr>
<tr>
<td><input type ="button" name="b10" value="7"
OnClick="calculator('7')"></td>
<td><input type ="button" name="b11" value="8"
OnClick="calculator('8')"></td>
<td><input type ="button" name="b12" value="/"
OnClick="calculator('/')"></td>
</tr>
<tr>
<td><input type ="button" name="b13" value="9"
OnClick="calculator('9')"></td>
<td><input type ="button" name="b14" value="0"
OnClick="calculator('0')"></td>
<td><input type ="button" name="b15" value="="
OnClick="calculator('=')"></td>
</tr>
</table>
</form>
</body>
</html>

Program - 9
Aim: Write a JavaScript program to make a form and to display that
form with entries.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> <title>Form</title>
</head>
<body>
<script
language="JavaScript">
function show()
{
document.write("Name: "+ document.f1.t1.value+
"<br>Password: "+ document.f1.p1.value+ "<br>Gender: "+
document.f1.r1.value+ "<br>Country: "+ document.f1.s1.value+
"<br>Comments: "+ document.f1.a1.value)
}
</script>
<form name="f1">
<table>
<br>
<tr>
<td>Name:</td>
<td> <input type=textbox name=t1 value="Name"></td>
</tr>
<tr>
<td>Password:</td>
<td> <input type=password name=p1
value="passsword"></td>
</tr>
<tr>
<td>Gender:</td>
<td> <input type=radio name=r1 value="male">Male</td>
</tr>
<tr>
<td></td>
<td><input type=radio name=r1 value=female>Female</td>
</tr>
<tr>
<td>Country: </td>
<td><select name=s1>
<option value=india>India</option>
<option value=USA>USA</option>
<option value=Japan>Japan</option></select></td>
</tr>
<tr>
<td>Comments:</td>
<td><textarea name=a1></textarea></td>
</tr>
<tr>
<td></td>
<td><input type=button name=b1 value=OK
onclick="show()"></td>
</tr>
</table>
</form>
</body>
</html>
Program - 10
Aim: Write a JavaScript program to change the size of image.

<html>
<head>
<title>image</title>
</head>
<body bgcolor="red">
<script language="JavaScript">
function size()
{
document.i1.width=500
document.i1.height=500
document.i2.width=500
document.i2.height=500
document.i3.width=500
document.i3.height=500
}
function decrease()
{
document.i1.width=50
document.i1.height=50
document.i2.width=50
document.i2.height=50
document.i3.width=50
document.i3.height=50
}
</script>
<img src="https://thumbs.dreamstime.com/b/beautiful-rain-
forest-ang-ka-nature-trail-doiinthanon-national-park-thailand-
36703721.jpg" width="50" height="50" name=i1
onMouseOver="size()" OnMouseOut="decrease()"> <br><br>
<img
src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-
276014__340.jpg" width="50" height="50" name=i2
OnMouseOver="size()" OnMouseOut="decrease()"><br><br>
<img
src="https://previews.123rf.com/images/chernetskiy/chernetskiy090
8/chernetskiy090800057/5396
447-from-nature-with-love.jpg" width="50" height="50" name=i3
OnMouseOver="size()" OnMouseOut="decrease()">
</body>
</html>

Program - 11
Aim: Write a JavaScript program to change the background colour
of webpage.

<html>
<head>
<title>image</title>
</head>
<body bgcolor="red">
<script language="javascript">
function size()
{
document.i1.width=500
document.i1.height=500
document.i2.width=500
document.i2.height=500
document.i3.width=500
document.i3.height=500
}
function decrease()
{
document.i1.width=50
document.i1.height=50
document.i2.width=50
document.i2.height=50
document.i3.width=50
document.i3.height=50
}
</script>
<img src="https://thumbs.dreamstime.com/b/beautiful-rain-
forest-ang-ka-nature-trail-doiinthanon-national-park-thailand-
36703721.jpg" width="50" height="50" name=i1
onMouseOver="size()" OnMouseOut="decrease()"> <br><br>
<img
src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-
276014__340.jpg" width="50" height="50" name=i2
OnMouseOver="size()" OnMouseOut="decrease()"><br><br>
<img
src="https://previews.123rf.com/images/chernetskiy/chernetskiy090
8/chernetskiy090800057/5396
447-from-nature-with-love.jpg" width="50" height="50" name=i3
OnMouseOver="size()" OnMouseOut="decrease()">
</body>
</html>

Program - 12
Aim: Write a JavaScript program to calculate the total amount of
shopping list.

<html>
<head>
<title>price</title>
</head>
<body>
<script
language="JavaScript">
function sum()
{
document.f1.t1.value=document.f1.i1.value *
document.f1.a1.value
document.f1.t2.value=document.f1.i2.value * document.f1.a2.value
document.f1.g1.value=parseInt(document.f1.t1.value) +
parseInt(document.f1.t2.value)
}
</script>
<form name="f1">
<table>
<tr>
<th>No. of items</th>
<th>Amount</th>
<th>Total</th>
</tr>
<tr>
<td><input type=textbox name=i1 OnChange="sum()"></td>
<td><input type=textbox name=a1></td>
<td><input type=textbox name=t1
OnChange="sum()"></td>
</tr>
<tr>
<td><input type=textbox name=i2 OnChange="sum()"></td>
<td><input type=textbox name=a2></td>
<td><input type=textbox name=t2
OnChange="sum()"></td>
</tr>
</table>
<br>
Grand-Total: <input type="textbox" name="g1">
</form>
</body>
</html>

Program - 13
Aim: Write a JavaScript program to add two values enter in two
different textboxes.

<html>
<head>
<title>Document</title>
</head>
<body>
<script language="JavaScript">
function Sum()
{
x=parseInt(document.f1.t1.value)+parseInt(document.f1.t2.value)
document.f1.t3.value=x
}
</script>
<form name=f1>
<input type=textbox name=t1><br><br>
<input type=textbox name=t2><br><br>
<input type=textbox name=t3><br><br>
<input type=button name=b1 value=OK
onClick="Sum()">
</form>
</body>
</html>

Program - 14
Aim: Write a CSS program to change background color of different
elements.

<html>
<head> <style> h1
{ background
color: green;
}
div { background-
color: blue;
}
p{
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>

Program - 15
Aim: Write a program to show inline style sheet.
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.</p>
</body>
</html>

Program - 16
Aim: Write a program for linking an external style sheet.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Mystyle.css
body {
backgroun
d-color:
blue;
}
h1 { color:
navy;
margin-left:
20px;
}

Program - 17
Aim: Write a program to import an external style sheet.

<html>
<head>
<style
type="text/css">
@import
url(style.css); body {
background-color:
honeydew;
}
</style>
</head>
<body>
<p>This is demo paragraph one. </p>
<p class="two">This is demo paragraph two.</p>
<p>This is demo paragraph three</p>
</body>
</html>

style.css p { color:
navy; font-style: italic;
}
.two { color: darkgreen; font-size: 24px; }

You might also like