Ex. No.: 2 Web Page Creation Using Css Date: Aim

EX. NO.
: 2 WEB PAGE CREATION USING CSS

DATE :
AIM:
To create a web page with all types of Cascading Style Sheets.
.
ALGORITHM:
Step 1: Create a web page with frame sets consisting two frames
Step 2: In the first frame include the links
Step 3: Divide the second frame into two horizontal frames.
Step 4: Create an External Style Sheet (Styhome.css) and use it in home.html.
Step 5: Create an html page title.html which uses embedded style sheet.
Step 6: Create html pages cse.html, ece.html and eee.html which uses inline style sheet.
CODING:
//main.html
<html>
<head>
<title>NEW PRINCE SHRI BHAVANI COLLEGE OF ENGINEERING AND
TECHNOLOGY</title>
</head>
<frameset cols="275,*">
<frame name="left" src="link.html">
<frameset rows="170,*">
<frame name="title" src="title.html">
<frame name="main1" src="home.html">
</frameset>
<noframes>Frames can't be rendered. Update your browser</noframes>
</body>
</html>
//link.html
<html>
<head>
<body bgcolor="cyan" vlink="red" link="green" alink="blue">
<p style="font-size:20pt;color:black">Departments</p>
<ul>
<li><a href="cse.html" target=main1>Computer Science & Engineering</a><br>
<li><a href="ece.html" target=main1>Electrionics and Communication Engineering</a><br>
<li><a href="eee.html" target=main1>Electrical and Electronics Engineering</a><br>
<li><a href="home.html" target=main1>Back to Home Page</a><br>
</ul>
</body>
</html>
//title.html(Embedded style sheet)
<html>
<head>
<style type="text/css">
body
{
background-image:url(logo.jpg);
}
special{font-size:14pt;color:magenta;}
</style>
</head>
<body class"special">
<center><marquee><h3><font color="blue"> Welcome to New Prince Shri Bhavani College of
Engineering and Technology </font></h3></marquee></center>
</body>
</html>
//home.html(External style sheet)

<html>
<head><title>Bharath University</title>
<link rel="stylesheet" type="text/css" href="styhome.css">
</link>
</head>
<body>
<h2>Welcome</h2>
<hr>
<p>Welcome to NPSBCET</p>
<br>
<h3>COURSES OFFERED</h3>
<p>» B.E [Computer Science & Engineering]</p>
<p>» B.Tech [Information Technology]</p>
<p>» B.E [Electronics & Communication Eng]</p>
<p>» B.E [Electrical & Electronics Eng]</p>
<p>» B.E [Electronics & Instrumentation Eng]</p>
<p>» B.E [Mechanical Engineering]</p>
<p>» B.E [Civil Engineering]</p>
<p>» M.C.A [Master of Computer Applications]</p>
</body>
</html>
//styhome.css
hr {color:orange}
h2 {color:green font-family:comic sans;}
body { border-color:transparent;background-color:transparent;}
p { font-family:arial; font-size:15pt ; color: grey; background-color: aqua }
//cse.html(Inline style sheet)
<html>
<head>
<h1><marquee><font color="white" size="5">Department of Computer Science and
Engineering</font></marquee>
</h1>
</head>
<body bgcolor="grey" text="white">
<font color="black" size="3">

<p>
The Department of "Computer Science and Engineering" was established in the year 2008 with a
B.E. program.</p>
<p>Computer science and Engineering majors learn about computer systems and the way humans
and computers interact from a scientific perspective. Instruction includes the theory and design of
hardware and software.</p>
<p>New Prince concentrates on bridging theory and practice, including a wide variety of hardware
and software technologies and their applications and build the students with the latest technologies.
We ensure that the student perceives the computer fundamentals thoroughly. Tests are conducted
once a month and the students are counseled and motivated to bring out their best performance.
Feedback is obtained regularly from the students.</p>
<p>The Department has well equipped computing laboratories with Pentium PCs and a rich
repository of software covering a wide spectrum of applications. The Department conducts DBMS
Lab, Programming Languages Lab, Network Programming Lab, Data structure, Operating system
lab, Software system development lab , Visual programming ,OOAD lab ,Internet programming lab
etc., to train the students to face the competition in the IT field.</p>
<p><ul>The Computer Science & Engineering is committed to:

<li>Enable Secure Knowledge Communication.
<li>We provide placement training from the reputed institutes for the students.
<li>Practical knowledge on subjects are provided.
<li>Develop innovative, competent and quality computer engineers by imparting state-of-the-art
technology
<li>Enrich the knowledge of students through value based education
<ul></p>
<p>
<ul>
Events
<li>CSE Association has inaugurated "NOVA GENESIS'09"
<li>Mr.V.Venkatesh M.S.,(Software development engineer ,Nokia) delivered a Seminar on "Career
Development Program"
<ul>
</p>
</body>
</html>
//ece.html(Inline style sheet)

<html>
<head>
<h1><marquee><font color="white" size="5">Department of Electronics and Communication
</h1>
</head>
<p>
The Department was established in the year 2008. It provides an effective engineering education and
training to the students to become a successful professional carrier. The laboratories are fully
equipped with latest facilities for imparting quality education. It is blessed with highly qualified,
dedicated and competent faculties. Besides the high quality education, the department motivates the
students in co-curricular and extracurricular activities. By memorandum of understanding, the
department made industrial visits to many industries. Thereby, it reduces the bridge gap between
academic and industries. The infrastructure and lab facilities are upgraded from time to time &
provide adequate opportunities to the students to learn & expertise their skills.
</p>
<b><font color="orange" size=4>
<p>Vision</p></font></b>
<p>
To produce competent and disciplined Electronics and Communication Engineers of high ethics.To
enrich the human resource for the technical advancement of the country.To develop students to meet
the on-going global challenges of Engineering industries and organizations.
</p>
<b><font color="orange" size=4>
<p>Mission</p></font></b>
<p>
To contribute knowledge in fundamentals and applied areas of engineering, it provides diverse
curricula that will stimulate the imagination, talents, creativity and skills of our students that is
necessary for the varied and rapidly changing requirements of modern life.
</p>
<p>
The E.C.E. department has the following laboratories to cover all the experiments prescribed in
Anna University/A.I.C.T.E. Curriculum.
</p>
<p>
VLSI Laboratory
</p>
<p>
To Design Entry and simulation of combinational logic circuits, sequential circuits etc. Test bench
creation, functional verification, and concepts of concurrent and sequential execution are
highlighted.
</p>
<ul>
Major Equipments Available:
<li>Xilinx VLSI software
<li>FPGA trainer kit and all other basic requirements
</ul>
<p>
Communication System Laboratory
The concepts of all types of modulation & demodulation in analog as well as in digital
communication can be studied.
Major Equipments Available:
<ul>
<li>AM transmitter & receiver trainer kits
<li>Digital communication trainer kits
<li>Modulation kits for AM, FM, PAM, PPM, and PWM
<li>AM/FM signal generators
<li>Microphone / Loud Speaker Characteristics kits
<li>Line coding Kits
<li>TDM, FDM & PCM kits
<li>MATLAB and PSPICE software packages and all other basic requirements
</ul>
</p>
</body>
</html>
//eee.html(Inline style sheet)
<html>
<head>
<h1><marquee><font color="white" size="5">Department of Electrical and Electronics
</h1>
</head>

<p>
The Department of Electrical and Electronics Engineering (EEE) was started in the year 2008 with
an intake of 60 students. The well qualified and experienced faculties of this Department are
committed to achieve excellence in academic programs by enabling its students to achieve blending
of knowledge acquisition and applications of such knowledge in real life situations.
The department has good infrastructure with well equipped laboratories and an exclusive department
library.
Harnessing electrical energy is the challenge for electrical engineers. The power packed EEE
department inspires the budding Electrical Engineers with the potent idea of constructing Generating
Stations, Transmission Lines and Distribution Systems at economic rates and to design, test and
supervise the manufacture of Electrical and Electronic equipments used in electrical utilities,
buildings, automobiles, air-crafts, radar, navigation system and broadcast and communication
systems.
</p>
<p>
<font color="orange" size="3">
Vision
</font></p>
<p>
To provide the best opportunity to the students to attain technical excellence in the field of Electrical
and Electronics Engineering and Emerging Technologies and to develop a comprehensive and
integrated personality.
</p>
<p>
Mission
</font></p>
<p>
To produce students with the latest technical knowledge, excelling in innovation on real time
applications and mould them as ethical global leaders with responsibilities.
</p>
<br>
<p>
Opportunities
</font></p>
<p>
The Electrical & Electronics Engineering degree program prepares the graduates to enter a dynamic
and rapidly changing field with career opportunities in Electric Power, Power Electronics,
Microprocessors and Controllers, Integrated Circuits, Robotics and Control, Computer Hardware
and Software. The demand for electrical power and electronic systems is increasing rapidly and
electrical & electronics engineers are in great demand to meet the requirements of the growing
industry. Electrical and Electronics Engineers are mainly employed in industries using Electrical
Power, Manufacturing Electrical Equipment, Electronic Systems, Accessories, Research and
Development departments which work on energy saving devices and Software Development.
</p>
<p>
Facilities
</font></p>
<p>
The department has excellent laboratories with all necessary infrastructures. Some of the
Laboratories and the major equipments
</p>
</body>
</html>
OUTPUT:
Home page with external style sheet and title page with embedded style sheet
Department web page with inline style sheet

RESULT
Thus, the college web site that makes use of embedded, external and inline style sheets has
been designed and implemented successfully.
EX.NO: 3 VALIDATING FORM USING JAVASCRIPT
DATE :
AIM:
To create a script that will checks whether the field is blank and alert the user if it is blank.
ALGORITHM :
Step 1: Create a web page with form controls.

Step 2: Write java script to validate whether the text field is blank.
Step 3: If it is blank, alert the user with an error message.
Step 4: Otherwise, feedback is successfully registered message is displayed to the user.
CODING :
<html>
<head>
<title>FORM</title>
<h1 align="center">FEEDBACK FORM</h1>
<script language="JavaScript">
function required()
{
var empt1 = document.forms["form1"]["text1"].value;
var empt2 = document.forms["form1"]["text2"].value
if (empt1 == "")
{
alert("Please valid name");
return false;
}
if (empt2 == "")
{
alert("Please valid register number");
return false;
}
else
{
alert('feedback has accepted ');
return true;
}
}
</script>
</head>
<body>
<FORM name="form1"METHOD="POST" ACTION="#" onsubmit="required()">
NAME:       <INPUT NAME="text1" TYPE="TEXT"><BR>
REGNO :    <INPUT NAME="text2" TYPE="TEXT"><BR>
SUBJECT :<BR>
CN :      <INPUT TYPE="RADIO"
NAME="EASY">EASY<INPUT TYPE="RADIO" NAME="AVERAGE">AVERAGE<INPUT
TYPE="RADIO" NAME="TOUGH">TOUGH<BR>
OOAD : <INPUT TYPE="RADIO" NAME="EASY">EASY<INPUT TYPE="RADIO"
NAME="AVERAGE">AVERAGE<INPUT TYPE="RADIO" NAME="TOUGH">TOUGH<BR>
WP :      <INPUT TYPE="RADIO"
TYPE="RADIO" NAME="TOUGH">TOUGH<BR>
DSP :     <INPUT TYPE="RADIO" NAME="EASY">EASY<INPUT
TYPE="RADIO" NAME="AVERAGE">AVERAGE<INPUT TYPE="RADIO"
NAME="TOUGH">TOUGH<BR>
G&M :   <INPUT TYPE="RADIO" NAME="EASY">EASY<INPUT TYPE="RADIO"
NAME="AVERAGE">AVERAGE<INPUT TYPE="RADIO" NAME="TOUGH">TOUGH<BR>
WC :      <INPUT TYPE="RADIO"
TYPE="RADIO" NAME="TOUGH">TOUGH<BR><br><br>
<INPUT TYPE="SUBMIT" VALUE="SUBMIT"><INPUT TYPE="RESET" VALUE="RESET">
</FORM>
</BODY>
</html>
OUTPUT :

Ex. No.: 2 Web Page Creation Using Css Date: Aim

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Ex. No.: 2 Web Page Creation Using Css Date: Aim

Diunggah oleh

Hak Cipta:

Format Tersedia

EX. NO.

: 2 WEB PAGE CREATION USING CSS

//home.html(External style sheet)

<font color="black" size="3">

<p><ul>The Computer Science & Engineering is committed to:

//ece.html(Inline style sheet)

//eee.html(Inline style sheet)

<font color="black" size="3">

Department web page with inline style sheet

Step 1: Create a web page with form controls.

Anda mungkin juga menyukai