RVS POLYTECHNIC COLLEGE
COIMBATORE
1052233540 - WEB DESIGNING PRACTICUM
(COMMON PAPER TO DIPLOMA IN COMPUTER
ENGINEERING AND INFORMATION TECHNOLOGY)
PRACTICAL MANUAL
PREPARED BY
SURYA V (LECT/CE)
DEEPAN S (LECT/IT)
EX:NO:01 Write a HTML code to display welcome text using different text formatting
tags. (Use h1-h6, bold, italic, underline, strikethrough, div, p, pre tags)
(HTML Basic tags)
AIM:
To write a HTML code to display welcome text using different text formatting tags.(Use
h1-h6, bold, italic, underline, strikethrough, div, p, pre tags) (HTML Basic tags)
SOFTWARE REQUIREMENT:
1. Notepad / Notepad++ / Dreamweaver
2. Any browser
PROCEDURE:
STEP 1: Open the Notepad window.
STEP 2: Type the HTML code within the Notepad window.
STEP 3: Save the HTML document filename with extension.
STEP 4: Open any browser window.
STEP 5: Execute the HTML document.
TAG USED DESCRIPTION
<html> Define html document
<head> Define document head
<title> Define document title
<body> Define document body
<h1> to <h6> Define header 1 to header 6
<p> Define paragraph in html
<b> Define bold in html
<i> Define letters in italics
<u> Define underline in html
<s> Define as strikethrough
<div> Define as division
<pre> Define as predefined tag
PROGRAM:
<html>
<head>
<title> Welcome </title>
</head>
<body>
<h1 > Welcome <h1>
<h2> Welcome </h2>
<h3> Welcome </h3>
<h4> Welcome</h4>
<h5> Welcome </h5>
<h6> Welcome</h6>
<b> Welcome</b>
<i> Welcome </i>
<u> Welcome </u>
<p> Welcome </P>
<pre> Welcome
Welcome
Welcome
</pre>
<div> Welcome </div>
</body>
</html>
RESULT:
Thus the above program to display Welcome Text using different text formatting tags
executed and output verified successfully.
EX:NO:02 Design a HTML page to list the computer languages where each language
is a link. Prepare separate HTML documents for each language and call
them in the appropriate link. (Lists and Links)
AIM:
To design a HTML page to list the computer languages where each language is a link.
Prepare separate HTML documents for each language and call them in the appropriate link.
(Lists and Links)
SOFTWARE REQUIREMENT:
1. Notepad / Notepad++ / Dreamweaver
2. Any browser
PROCEDURE:
STEP 1: Open the Notepad window.
STEP 2: Type the HTML code within the Notepad window.
STEP 3: Save the HTML document filename with extension.
STEP 4: Open any browser window.
STEP 5: Execute the HTML document.
TAG USED DESCRIPTION
<html> Define html document
<head> Define document head
<title> Define document title
<body> Define document body
<p> Define paragraph in html
<li> Define as list
<ol> Define as ordered list
<ul> Define as unordered list
<a> Define as anchor tag in html
PROGRAM:
File Name: [Link]
<html>
<head>
<title>Language List</title>
</head>
<body>
<ol>
<li><a href="[Link]">Python</li>
<li><a href="[Link]">C</li>
<li><a href="[Link]">Java</li>
<li><a href="[Link]">Ruby</li>
</ol>
</body>
</html>
File Name: [Link]
<html>
<head>
<title>Python Language</title>
</head>
<body>
<p> This is Python Programming language page </p>
</body>
</html>
File Name: [Link]
<html>
<head>
<title>C Language</title>
</head>
<body>
<p> This is C Programming language page </p>
</body>
</html>
File Name: [Link]
<html>
<head>
<title>Java Language</title>
</head>
<body>
<p> This is Java Programming language page </p>
</body>
</html>
File Name: [Link]
<html>
<head>
<title>Ruby Language</title>
</head>
<body>
<p> This is Ruby language page </p>
</body>
</html>
RESULT:
Thus the above program to design a html page using lists and links executed and output
verified successfully.
EX:NO:03
Write a HTML program to display the image of a computer as a link to the
web page describing the components of computers. (Images and link tags)
AIM:
To write a HTML program to display the image of a computer as a link to the web page
describing the components of computers. (Images and link tags)
SOFTWARE REQUIREMENT:
1. Notepad / Notepad++ / Dreamweaver
2. Any browser
PROCEDURE:
STEP 1: Open the Notepad window.
STEP 2: Type the HTML code within the Notepad window.
STEP 3: Save the HTML document filename with extension.
STEP 4: Open any browser window.
STEP 5: Execute the HTML document.
TAG USED DESCRIPTION
<html> Define html document
<head> Define document head
<title> Define document title
<body> Define document body
<p> Define paragraph in html
<h1>,<h2> Define header 1 and header 2
<img> used to embed an image in a web page
<map> used to define an image map
<area> defines an area inside an image map
<li> Define as list
<a> Define as anchor tag in html
PROGRAM:
File Name: [Link]
<html lang="en">
<head>
<title>Computer Components</title>
</head>
<body>
<h1>Components of the computer</h1>
<p>Click on the Computer, CPU, Mouse, Keyboard to go to a new page and read more about the
topic</p>
<img src="/computer (1).jpg" alt="Workplace" usemap="#workmap" width="600" height="500">
<map name="workmap">
<area shape="rect" coords="149,69,410,320" alt="Display" href="/[Link]">
<area shape="rect" coords="466,39,594,401" alt="Cpu" href="/[Link]">
<area shape="rect" coords="10,380,356,433" alt="Keyboard" href="/[Link]">
<area shape="circle" coords="434,432,35" alt="Mouse" href="/[Link]">
</map>
</body>
</html>
File Name: [Link]
<html lang="en">
<head>
<title>Display</title>
</head>
<body>
<h2>Monitor</h2>
<p>A monitor is an electronic output device used to display information being entered and
processed on a computer. The primary use of a monitor is to display images, text, video, and graphics
information generated by the computer via a computer's video card.</p>
</body>
</html>
File Name: [Link]
<html lang="en">
<head>
<title>CPU</title>
</head>
<body>
<h2>CPU</h2>
<h4>Specifications</h4>
<ul>
<li>Up to Intel® Pentium® N3710 Processor</li>
<li>Integrated Intel® HD Graphics</li>
<li>Up to 4 GB DDR3</li>
<li>24WHr; Up to 3 Hours Video Playback</li>
</ul>
</body>
</html>
File Name: [Link]
<html lang="en">
<head>
<title>CPU</title>
</head>
<body>
<h2>Keyboard</h2>
<p>A computer keyboard is an input device used to enter characters and functions into the
computer system by pressing buttons, or keys.</p>
</body>
</html>
File Name: [Link]
<html lang="en">
<head>
<title>CPU</title>
</head>
<body>
<h2>Mouse</h2>
<p>A computer mouse is a hand-held pointing device that detects two-dimensional motion relative
to a surface.</p>
</body>
</html>
RESULT:
Thus the above program to display the image of a computer as a link to the web page
describing the components of computers program executed and output verified successfully.
EX:NO:04
Develop a web page using CSS to create a timetable for the class using
different border style. (Table tags and internal style sheets)
AIM:
To develop a web page using CSS to create a timetable for the class using different
border style. (Table tags and internal style sheets)
SOFTWARE REQUIREMENT:
1. Notepad / Notepad++ / Dreamweaver
2. Any browser
PROCEDURE:
STEP 1: Open the Notepad window.
STEP 2: Type the HTML code within the Notepad window.
STEP 3: Save the HTML document filename with extension.
STEP 4: Open any browser window.
STEP 5: Execute the HTML document.
PROGRAM:
File Name: [Link]
<html lang="en">
<head>
<title>Time table</title>
</head>
<body>
<h1>Class Timetable</h1>
<table>
<tr>
<th>Day</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
</tr>
<tr>
<td class="days">MON</td>
<td>WEB</td>
<td>CP</td>
<td>RDBMS</td>
<td>ASC</td>
<td>DLD</td>
<td>OS</td>
<td>WEB</td>
<td>DLD</td>
</tr>
<tr>
<td class="days">TUE</td>
<td>OS</td>
<td>RDBMS</td>
<td>RDBMS</td>
<td>OS</td>
<td>DLD LAB</td>
<td>DLD LAB</td>
<td>CP</td>
<td>DLD</td>
</tr>
<tr>
<td class="days">WED</td>
<td>WEB</td>
<td>CP</td>
<td>OS</td>
<td>DLD</td>
<td>DLD</td>
<td>CP</td>
<td>H&W</td>
<td>H&W</td>
</tr>
<tr>
<td class="days">THUR</td>
<td>CP</td>
<td>OS</td>
<td>ASC</td>
<td>RDBMS</td>
<td>DLD</td>
<td>DLD</td>
<td>WEB</td>
<td>CP</td>
</tr>
<tr>
<td class="days">FRI</td>
<td>WEB</td>
<td>CP</td>
<td>CP</td>
<td>ASC</td>
<td>OS</td>
<td>DLD</td>
<td>OS</td>
<td>DLD</td>
</tr>
</table>
<style>
h1{
text-align: center;
padding: 30px;
}
table, td, th {
border: 2px solid black;
text-align: center;
padding: 2px;
}
th{
font-weight: bold;
background-color: bisque;
}
td{
width: 200px;
}
.days{
font-weight: bolder;
background-color: bisque;
}
table {
margin-left: auto;
margin-right: auto;
width: 100%;
height: 500px;
border-collapse: collapse;
font-size: large;
}
</style>
</body>
</html>
RESULT:
Thus the above program to develop a web page using CSS to create a timetable for the
class using different border style was executed and output verified successfully.
EX:NO:05 Design a webpage of your college with attractive background color, text-
color, font-face, an image by using external CSS formatting .(External
Stylesheets)
AIM:
To design a webpage of your college with attractive background color, text-color, font-
face, an image by using external CSS formatting .(External Stylesheets)
SOFTWARE REQUIREMENT:
1. Notepad / Notepad++ / Dreamweaver
2. Any browser
PROCEDURE:
STEP 1: Open the Notepad window.
STEP 2: Type the HTML code within the Notepad window.
STEP 3: Save the HTML document filename with extension.
STEP 4: Type the CSS code within the Notepad window.
STEP 5: Save the CSS document filename with extension.
STEP 6: Open any browser window.
STEP 7: Execute the HTML document.
PROGRAM:
File Name: [Link]
<html lang="en">
<head>
<title>RVS PTC</title>
<link rel="stylesheet" href="/[Link]">
<link rel="icon"
href="[Link]
[Link]">
</head>
<body>
<section>
<ul class="header">
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
<li>Pay Fee</li>
</ul>
</section>
<div class="container">
<img src="[Link]
[Link]"alt="RVSPTC">
<div class="collegetext"><h1>Welcome to RVS Polytechnic College</h1></div>
</div>
<div>
<p>Give a man a fish and you feed him for a day; teach a man to fish and you feed him for a
lifetime.</p>
</div>
</body>
</html>
File Name: [Link]
*{
margin: 0;
padding: 0;
}
ul{
background-color: #87986a;
overflow: hidden;
text-align: center;
}
li{
list-style-type: none;
float: left;
text-align: center;
color: aliceblue;
margin: 10px;
padding: 10px;
font-size: larger;
}
.container{
position: relative;
}
img{
width: 100%;
height: 500px;
opacity: 0.8;
}
.collegetext{
position: absolute;
top: 50%;
bottom: 50%;
left: 20%;
right: 20%;
color: white;
text-align: center;
font-family:Georgia, 'Times New Roman', Times, serif;
}
p{
color: #004d74;
font-family:fantasy;
text-align: center;
margin: 10px;
padding: 10px;
font-size: 30px;
}
RESULT:
Thus the above program to design a webpage of your college with attractive background
color, text-color, font-face, an image by using external CSS formatting (External Stylesheets)
was executed and output verified successfully.
