Web Design EX

Practical - Web Designing and Development 2023

EX NO: 1
04-07-2023
BASIC HTML TAGS

AIM:
To create simple webpage with basic HTML tags.

ALGORITHM:
Step 1: open notepad.
Step 2: Start the program with HTML tags like < HTML>, <HEAD>, <title>, < Body > etc...
Step 3: <style> tags can be added inside head tag to give various properties like background colour.
Step 4: Use <h1> to <h6> tags for various headings.
Step 5: To add paragraph ,use <p> tag.
Step 6: Save the file as html file and run the program in the browser.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Simple HTML Program</title>
<style>body{ background-color: powderblue ; }</style>
</head>
<body>
<h1>Welcome to my website</h1>
<h2>About me</h2>
<p>Hello , My name is john. I'm a web developer passionate about creating amazing websites.</p>
<h2>My skills</h2>
<p>HTML,CSS,JavaScript</p>
<h3>My Projects</h3>
<p>Personal Portfolio,E-Commerce Website,Blog Websit</p>
<h2>Contact Me</h2>
<p>You can reach me at [email protected]</p>
SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 1

</body>
</html>
OUTPUT:
RESULT:
The above html code was executed successfully.

EX NO: 2
11-07-2023
ORDERED AND UNORDERED LIST
AIM:
To create webpage using html with ordered and unordered list tags.
ALGORITHM:
Step 1: Open Notepad
Step 2: Create a program with tags like < html>, <body >, <p>, ‹head>, < title> etc..
Step 3: Create heading with <h1> to <H6> tags.
Step 4: To create unordered list , use <ul> tag with <li> tag to get list as bulletin , symbol etc...
step 5: To create ordered list , use <ol> tag with < li> tag to get list with numbers, alphabets etc...
Step b: Save the file as html file and run the program in the browser.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Company Details</title>
</head>
<body>
<h1>Company Details</h1>
<h2>About us</h2>
<p>The details of the company</p>
<h2>Our Services</h2>
<ul>
<li>Web Development</li>
<li>Mob App Development</li>
<li>UI / UX Design</li>
<li>Digital Marketing</li>
</ul>
<h2>Our Team</h2>
<ul>

<li>Ram - CEO</li>
<li>Jacob - CTO</li>
<li>Raju - Senior Developer</li>
<li>Saranya - Marketing Manager</li>
</ul>
<h2>Contact information</h2>
<ol>
<li>Address : 123 Main Street , City , Country</li>
<li>Email : [email protected]</li>
<li>Phone : 123456789</li>
</ol>
</body>
</html>
OUTPUT:
RESULT:

EX NO: 3
19-07-2023
TABLE CREATIONS USING HTML
AIM:
To create webpage using html for class time table using table tags.
ALGORITHM:
Step I: open Notepad.
Step 2: Create page with <html>, <head >, <title>, <body > tags.
step 3: <table > tag can be used to create table, <tr> tag for table row, <th> tag for table heading, <td› tag
for table data.
CODE:
<DOCTYPE html>
<html>
<head>
<style>body{background colour:#DAF7A6;}</style>
</head>
<body>
<h1 align="center"> Sri Krishna Arts & Science College </h1>
<h1>Class:III B.com CA-B</h1>
<h1 align="center"> TIMETABLE</h1>
<table border="5" cellingpacing="0" align="center">
<tr>
<th align="center" height="50" width="100"> <br>
<b>day/period</b></th>
<b>9:30-10:20</b></th>
<b>10:20-11:10</b></th>
<b>11:10-12:00</b></th>

<b>12:00-12:50</b></th>
<b>12:50-1:40</b></th>
<b>1:40-2:30</b></th>
</tr><tr>
<td align="center" height="50"><b>monday </b> </td>
<td align="center"height="50">sub1</td>
<td colspan="2" align="center" height="50">lap</td>
</tr><tr>
<td align="center"height="50"><b>Tuesday</b></td>
</tr><tr>
<td align="center"height="50"><b>wednesday</b></td>
</tr><tr>
<td align="center"height="50"><b>thursday</b></td>
</tr><tr>

<td align="center"height="50"><b>Friday</b></td>
</tr><tr>
<td align="center"height="50"><b>saturday</b></td>
<td colspan="3" align="center" height="50">Seminor</td>
<td align="center"height="50">Sports</td>
</tr>
</table>
</body>
</html>
OUTPUT:
RESULT:

EX NO: 4
20-07-2023
MULTIMEDIA USING HTML
AIM:
To create webpage using html with multimedia contents like image and video.
ALGORITHM:
Step 3: Insert image with <img> tag and we can specify the position and measurement of the image
Step 4: Insert video with <video> tag and we can specify the position and measurement of the video with
attributes like autoplay controls etc..
Step 5: Use <marquee> tag.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Multimedia</title>
</head>
<body align="center">
<h1>Multimedia Content</h1>
<h2>Video</h2>
<video src="D:\21BCO319\sample-5s.mp4" width="320" height="240" autoplay controls loop></video>
<br>
<h2>Image</h2>
<img src="D:\21BCO319\SKASC.png" width="400" height="200">
</body>
</html>

OUTPUT:
RESULT:

EX NO: 5
03-08-2023
WEBPAGE USING FRAMES , FORMS & CONTROLS
AIM:
To create html webpage with forms.
ALGORITHM:
Step 3: Create a separate html webpage for each frames using different tags like <form>, <label>,
<input>.
Step 4: Create a final webpage linking all the frames with <frame set> tag.
CODE:
Frame 0
<!DOCTYPE html>
<html>
<head>
<title> HTML Frames</title>
</head>
<body>
<h1>Registration Form</h1>
</body>
</html>
Frame 1
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>

<form>
<label for="firstname">First Name:</label>
<input type="text" name="firstname" required>
<br>
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" required>
<br>
<label for="email">Email:</label>
<input type="email" name="email" required>
<br>
<label for="password">Password:</label>
<br>
<input type="password" name="password required>
<br>
<input type="submit" value="Login!">
</form>
</html>
Frame 2
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Thank You</h1>
</body>
</html>

Final frame
<!DOCTYPE.html>
<html>
<head>
</head>
<frameset rows="10%,80%,10%">
<frame name="top" src="D:\21BCO319\frame 0.html" >
<frame name="main" src="D:\21BCO319\frame 1.html" >
<frame name="bottom" src="D:\21BCO319\frame 2.html" >
<noframes>
<body>Your browser doesnt support frames</body>
</noframes>
</frameset>
</html>
OUTPUT:
RESULT:

EX NO: 6
11-08-2023
INTERNAL & EXTERNAL CASCADING
AIM:
To create webpage using html with internal and external cascading.
ALGORITHM:
Step 2: Create a file specifying the required styles and save it as css file.
Step 4: Call the css file using <link> tag, external cascading.
Step 5: Use <style> tag in the program for internal cascading.
CODE:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”style.css”>
<style> p { color:red; padding:60px ;} </style>
</head>
<body>
<h1 align="center"> Introduction on EVS </h1>
<p> This is an academic discipline that focuses on the study of the environment, including its natural
processes, ecosystems, and the impact of human activities on the environment. It covers topics such as
ecology, conservation, pollution, and sustainability. </p>
</body>
</html>
style.css
body{background-color:lightblue},
h1{color:navy;margin-left:20ptx}

OUTPUT:
RESULT:

EX NO: 7
21-08-2023
FORM VALIDATION
AIM:
To create webpage using html for feedback form with validation.
ALGORITHM:
Step 3: Create form with <form> tags like <label> , <input> and their attributes.
Step 4: Validate the form using <script> tag and create function for validation.
Step 5: Call the validation function.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Feedback Form</title>
<style>
body {
background-color: #8deeee;
font-family: times-new-roman, sans-serif;
margin: 20px;
}
form {
max-width: 600px;
margin: 0 auto;
}
label {
font-weight: bold;
}
</style>
</head>
<body>
<h1 align="center">Feedback Form</h1>
<form action="submit_feedback.php" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" size="25" required>
<label for="roll">Roll No:</label>

<input type="text" id="roll" name="roll" size="8" required>
<input type="email" id="email" name="email" required>
<label for="course">Course:</label>
<input type="text" id="course" name="course" required>
<label for="feedback">Feedback:</label>
<textarea id="feedback" name="feedback" required></textarea>
<input type="submit" value="Submit">
</form>
<script>
function validateForm()
{
var name = document.getElementById("name").value;
var roll = document.getElementById("roll").value;
var email = document.getElementById("email").value;
var feedback = document.getElementById("feedback").value;
var course=document.getElementById("course").value;
if (name == "" || email == ""||roll=="" || feedback == "")
{
alert("All fields must be filled out with required format");
}
document.getElementById('demo').innerHTML=result;
}
</script>
</body>
</html>
OUTPUT:
RESULT:

EX NO: 8
05-09-2023
BASIC XML TAGS
AIM:
To create simple webpage using xml.
ALGORITHM:
Step 2: Create a webpage using xml tags.
Step 3: To include external cascading style , use css file.
Step 4: Save the file as xml file and run the program in the browser.
CODE:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="Rule.css"?>
<books>
<heading> Welcome to SKASC Library </heading>
<book>
<title>Title -: Web Programming</title>
<author>Author -: Chrisbates</author>
<publisher>Publisher -: Wiley</publisher>
<edition>Edition -: 3</edition>
<price> Price -: 300</price>
</book>
<book>
<title>Title -: Internet world-wide-web</title>
<author>Author -: Ditel</author>
<publisher>Publisher -: Pearson</publisher>
<price>Price -: 400</price>

</book>
<book>
<title>Title -: Computer Networks</title>
<author>Author -: Foruouzan</author>
<publisher>Publisher -: Mc Graw Hill</publisher>
<price>Price -: 700</price>
</book>
</books>
OUTPUT:
RESULT:

EX NO: 9
13-09-2023
DOCUMENT TYPE DEFINITION (DTD)
AIM:
To create xml webpage for library using DTD.
ALGORITHM:
Step 2: Specify element tags for xml and save it as dtd file.
Step 3: Create a new file and call the dtd file using <?xml-stylesheet> tag
Step 4: Create page by using the elements tags.
Step 5: Save the file as xml file and run the program in the browser.
CODE:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE library SYSTEM "library.dtd">
<library>
<book>
<title>Harry Potter and the Sorcerer's Stone</title>
<author>J.K. Rowling</author>
<published_year>1997</published_year>
</book>
<book>
<title>The Hobbit</title>
<author>J.R.R. Tolkien</author>
<published_year>1937</published_year>
</book>
</library>

library.dtd
<!ELEMENT library (book+)>
<!ELEMENT book (title, author, published_year)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT published_year (#PCDATA)>
OUTPUT:
RESULT:

EX NO: 10
21-09-2023
WEBPAGE CREATION
AIM:
To create webpage with HTML tags like table , list , frames , forms etc.
ALGORITHM:
Step 1: open notepad.
Step 2: Start the program with HTML tags like < HTML>, <HEAD>, <title>, < Body > etc...
Step 3: External cascading style can be used by calling the css file using <link> tag.
Step 4: Use <h1> to <h6> tags for various headings . To add paragraph ,use <p> tag.
Step 5: Create table using <table> tag , forms using <form> tag , frame using <frame> tag.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>III BCOM CA B Website</title>
<link rel="stylesheet" href="style.css">
<style>
body {
font-family: Times-New-Roman, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
table {
width: 80%;

margin: 20px auto;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
th {
background-color: #333;
color: white;
}
ul { margin: 20px; padding-left: 20px; }
</style>
</head>
<body>
<h1 align=”center”>Welcome to III BCOM CA B Class Website</h1>
<h2>Home</h2>
<p>Welcome to III BCOM CA B website. Here you can find information about our class,
assignments, and more.</p>
<h2>About</h2>
<p>We are a group of students dedicated to learning and growing together. </p>
<h2>Contact</h2>
<p>Contact: <a href="mailto:[email protected]"> bcomcab.com</a></p>
<h2>Time Table</h2>
<table>
<tr>
<th>Day</th>
<th>Time</th>

<th>Subject</th>
</tr>
<tr>
<td>Monday</td>
<td>9:00 AM - 11:00 AM</td>
<td>WD</td>
<tr>
<td>Tuesday</td>
<td>1:00 PM - 3:00 PM</td>
<td>GEC</td>
</tr>
</tr>
<tr>
<td>Wednesday</td>
<td>1:00 PM - 3:00 PM</td>
<td>IT</td>
</tr>
</table>
<h2 align="center">Feedback Form</h2>
<form action="submit_feedback.php" method="POST">
<hr></hr>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="phno">Phone No:</label>
<input type="number" id="phno" name="phno" required>
<input type="email" id="email" name="email" required>
<label for="feedback-type">Feedback Type:</label>

<select id="feedback-type" name="feedback-type">
<option value="compliment">Compliment</option>
<option value="suggestion">Suggestion</option>
<option value="issue">Issue</option>
</select>
<label>Rating:</label><br>
<input type="radio" id="rating-excellent" name="rating" value="excellent">
<label for="rating-excellent">Excellent</label><br>
<input type="radio" id="rating-good" name="rating" value="good">
<label for="rating-good">Good</label><br>
<input type="radio" id="rating-fair" name="rating" value="fair">
<label for="rating-fair">Fair</label><br>
<input type="radio" id="rating-poor" name="rating" value="poor">
<label for="rating-poor">Poor</label><br>
<br>
<label>Additional Comments:</label><br>
<textarea id="comments" name="comments" required></textarea>
<label for="update">Get updates</label>
<input type="checkbox" id="update" name="update" value="yes">
<hr></hr>
<input type="submit" value="Submit">
</form>
</main>
</body>
</html>
style.css
form {max-width: 600px; margin: 0 auto; }
label {font-weight: bold;}

OUTPUT:
RESULT:

Web Design EX

Uploaded by

Copyright:

Available Formats

Web Design EX

Uploaded by

Document Information

Original Description:

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 Design EX

Uploaded by

Copyright:

Available Formats

Practical - Web Designing and Development 2023

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 1

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 2

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 3

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 4

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 5

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 6

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 7

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 8

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 9

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 10

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 11

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 12

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 13

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 14

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 15

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 16

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 17

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 18

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 19

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 20

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 21

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 22

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 23

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 24

SRI KRISHNA ARTS AND SCIENCE COLLEGE DEPARTMENT OF CA & BA Page 25

You might also like