Exercise No.

1
TO DESIGN A LOGO BY USING INKSCAPE SOFTWARE

Aim:
To design a logo by using inkscape software.

Procedure:
Step 1 - open inkscape software and create a new project

Step 2 - select the circle shape tool to design the below element

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Step 3 - select the same circle shape tool to design the below element with different sizes

Step 4 - select the below designed element and group that

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Step 5 - select the designed element and make a copy or duplicate and paste it.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Step 6 - select the circle shape tool to design a circle.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Step 7 - Change the color for circle shape

Step 8 - place the circle shape in the center of the designed element.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Step 9 - draw the triangle shape using star tool

Step 10 - Change the color of triangle and place it in the center of the circle.

Result:
Thus the given logo design was completed successfully using inkscape software.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Exercise No. 2
WORKING WITH AUDIO EDITING TOOLS(AUDACITY)

Aim:
To Work with audio editing tools like audacity.

Audacity:
Audacity is a free and open-source digital audio editor and recording application
software. Even two decades after its original launch date, Audacity remains one of the most
widely-used open source applications. It’s a free audio editor that works on Windows, Mac, and
Linux systems. It is developed by The Audacity Team. It was initially released on May 28, 2000.
After installing this nifty little package, you’ll find everything you need to record, edit, and
enhance the sound files.

2.1 Audio editing with Audacity:

1. Voice recording in Audacity:
To record our voice go to the home page of Audacity software Navigate to 'Audio Setup.'
From there, move down to 'Recording Device,' where you'll see a list of all installed devices. If
you've plugged in an external device like a Yeti stereo microphone, make sure you select that.

Adjust the recording level to edit the recording volume of audio.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

 Once you've adjusted your volume, go ahead and hit that big red Record button. As you
start speaking, you'll be able to see the waveform change in real-time. When you're done, just hit
Stop.

If you want to hear how the last few sentences sounded? Just click on that part of the
waveform and click 'Play'.

2. Importing audio tracks:

To import audio tracks click on the project tab in the upper left corner of the screen.Then
click on import audio.Select the file you want to open. And Click open.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

3. Selecting audio tracks
To select all of the audio click on the edit tab, then click on select, then click on select all,
or press Ctrl A on the keyboard.
To select some of the audio track make sure the select tool in the upper left corner is
selected.Then click and hold at the beginning of the section you want to select.Then drag the
cursor to the end of the section you want to select.
To select from your cursor to the beginning or end click on the edit tab.Then click on
select.Then click on "cursor to end" or "start to cursor"

4. Splitting audio tracks

To split audio tracks you have to select the second have of what you want to split.Then
you click on the edit tab.Then click on split.(The second half of the split audio will move to a
seprate track)

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

5. Exporting audio
To export the audio click on the File tab.Then click on "Export as WAV" or "Export as
MP3" (depending on the type of audio file you want).Then name the file and click save. (If the
sound is ever messed up after you export it as WAV or MP3 try exporting it as the other file type
than you used the first time)

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

6. Sound Mixing in Audacity
To mix two tracks together, you can use the time shift tool to move the tracks up and
down the timeline. You might need to tweak the dB levels to make sure it’s nicely mixed and not
distorting.

7. Adding special effects to our audio

We can apply effects to either the entire audio file, or selectively to tracks and portions of
audio. Both are easily achieved with Audacity. To apply an effect, first select the track by
dragging over the portion of audio. Then, navigate to the "Effect" tab in the menu bar and choose
the effect you want to apply.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Fading In and Out in Audacity
Fading In
"Fading in" in Audacity refers to the audio editing process of gradually increasing the
volume at the beginning of an audio clip or track.
To apply this effect select a section in the audio and Click on Effects >> Fade In.Over the
selected length, the audio will now gradually fade in.

Fading Out
"Fading out" in Audacity is the opposite of fading in. It refers to the audio editing process
of gradually reducing the volume at the end of an audio clip or track.
Go to Effects and select Fade Out. Over the selected length, the audio will now gradually
fade out to silence over.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

2.2. Perform audio compression by choosing a proper codec:
Audio Compression:
Audio compression is the process of reducing the size of audio files while maintaining
acceptable sound quality. It involves using algorithms to remove redundant or less perceptible
audio data. Compressed audio files are easier to store, transmit, and stream, making them ideal
for various applications, from music streaming to voice calls. Popular audio compression codecs,
like MP3, AAC, and OGG, are commonly used for achieving this balance between file size and
sound fidelity.

Codec :
Codecs (short for compressor-decompressor) are algorithms or software tools that encode
audio data in a way that reduces its file size. The choice of codec can significantly impact the
resulting audio quality and file size. By selecting the right codec, you can strike a balance
between file size and audio quality based on your specific needs, such as for streaming, storage,
or distribution purposes.

Types of Codec
There are various types of audio codecs used for compressing and encoding audio data.
Some of the commonly used audio codecs include:
MP3 (MPEG-1 Audio Layer 3): MP3 is one of the most popular and widely supported audio
codecs. It offers good compression while maintaining reasonable audio quality. It's often used for
music streaming and portable audio players.
AAC (Advanced Audio Coding): AAC is known for its superior audio quality compared to MP3
at similar bitrates. It's commonly used in applications like iTunes and various streaming
platforms.
FLAC (Free Lossless Audio Codec): Unlike the previous codecs, FLAC is a lossless codec,
which means it compresses audio without any loss of quality. It's popular for archiving high-
quality audio and is used by audiophiles.
OGG Vorbis: OGG is an open-source and patent-free codec known for its high-quality
compression. It's often used for streaming and gaming applications.
WAV (Waveform Audio File Format): WAV is an uncompressed audio format, so it doesn't use
traditional codecs for compression. It maintains the highest audio quality but results in large file
sizes.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Audio compression using the MP3 (MPEG-1 Audio Layer 3) codec on Audacity:
You can compress an audio file into MP3 in Audacity by simply exporting it as an MP3
format
Steps:
1. In Audacity, click "File" at the top of the screen.
2. In the drop-down menu, click "Export" and then choose "Export as MP3."
3. At the bottom of the dialog box in the Format Options section, choose your MP3 settings.
As a general rule, you'll get the best results by choosing "Constant" for the "Bit Rate
Mode" rather than one of the variable bitrate options. Choose the bitrate from the
"Quality" drop- down menu (if in doubt, choose 192 kbps or higher) and then save your
file.

In similar way you can compress your audio files into other codec forms such as
OGG,AAC,WAV.

Result:
Thus working with audio editing tools like audacity is done successfully.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Exercise No. 3
WORKING WITH VIDEO EDITING AND CONVERSION TOOLS

Aim:
Install OpenShot to Edit and mix video content, create special effects, add captions. Then
Compress and convert video file format to other popular formats.

Procedure:
Download and Install OpenShot:
• Go to the OpenShot website (https://www.openshot.org/).

• Download and install OpenShot for your operating system (Windows, macOS, or Linux).

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Import Your Video Clips:
• Open OpenShot.

• Click on "File" > "Import Files" and select the video clips you want to work with.
You can also drag and drop them into the project files area.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Arrange Your Clips:
• Drag and drop your video clips onto the timeline at the bottom of the OpenShot window.
You can arrange them in the order you want them to appear in your final video.

Editing and Trimming:

• To trim a video clip, select it on the timeline.

• Use the handles at the beginning and end of the clip to cut or trim as needed.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Create Special Effects:
• Select a clip on the timeline.

• Go to the "Effects" tab and choose from various options, such as adding text, adjusting
speed, or applying video transitions.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Add Captions:
• To add captions or text to your video, go to the "Title" tab. Choose from the title
templates or create your own. Drag and drop the title template onto the timeline above
the video clip where you want the caption to appear.

Export Your Video:

• Once you've edited and added all the elements you want, click the "Export" button.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

• Choose the export settings, including video format, quality, and destination folder.

• You can click the "Advanced" button to further customize the export settings, such as the
video and audio codec, resolution, frame rate, and bitrate. These settings allow you to
control the video quality and file size.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

 • . Click "Export Video" and wait for the process to finish.

Result:
Thus the Installation of OpenShot video editor to Edit and mix video content and working
with its Features is done Successfully.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Exercise No. 4a
WORKING WITH WEB / MOBILE AUTHORING TOOLS

AIM:
To design simple Homepage and banners, logos, tables quick links etc using BlueGriffon.
ALGORITHM:
1. Start the program.
2. The code provided is HTML and CSS template for webpage.
3. To add the functionality, Add a ‘<script>’ tag within the ‘<head>’ or ‘<body>’ section of
your HTML to include JavaScript code.
4. Write a JavaScript functions to handle any interactive or dynamic behavior you want to
add.
5. For example, you can create functions to handle form submissions, perform client-side
validation, or update element on the page dynamically.
6. Use event listeners to trigger JavaScript functions when specific event occurs.
7. Common event include clicks, form submissions, and page load.
8. Stop the program.
PROGRAM:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Computer Science Department</title>
<style>
/* Reset some default styles for consistency */
body, h1, h2, p {
margin: 0;
padding: 0;
}

/* Global styles */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

/* Header styles */
header {
background-color: #17252A;
color: #fff;
padding: 20px;
text-align: center;
}

header h1 {
font-size: 36px;
}

header p {
font-size: 18px;
}

/* Navigation styles */
nav {
background-color: #3AAFA9;
color: #fff;
text-align: center;
}

nav a {
text-decoration: none;
color: #fff;
margin: 0 10px;
}

/* Container styles */
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Banner styles */
.banner
{ display:
flex;
justify-content: space-between;

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

 align-items: center;
padding: 5px;
background-color: #f7f7f7;
}

.banner img {
max-width: 75%;
height: 5%;
}

/* Quick links styles */

.quick-links
{ margin-top:
20px; text-align:
center;
}

.quick-links a { display:
inline-block; text-
decoration: none;
color: #333;
margin: 10px; padding:
10px 20px; border: 1px
solid #333; border-
radius: 5px;
}

/* Table styles */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

table, th, td {
border: 1px solid #ccc;
}

th, td {
padding: 10px;
text-align: left;
}
</style>
</head>

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

 <body>
<header>
<h1></h1>
<h1></h1>
<h1></h1>
<h1 style="text-align: left;"></h1>
<h1 style="text-align: left;"></h1>
<h1 style="text-align: left;"><br>
</h1>
<h1 style="text-align: center;"><img
src="file:///C:/Users/gnana/OneDrive/Desktop/logo.jpg"

alt="" style="width: 151px; height: 137px;"></h1>

<h1>Computer Science Department</h1>
<h1></h1>
<h1 style="text-align: left;"></h1>
<p>Welcome to the Computer Science Department at TPGIT</p>
<h1 style="text-align: left;"></h1>
</header>
<nav>
<h1></h1>
<a href="#">Home</a> <a href="#">About Us</a> <a href="#">Courses</a> <a

href="#">Faculty</a> <a href="#">Contact</a> </nav>

<div class="container">
<div class="quick-links">
<h1 style="text-align: left;"></h1>
<a href="#">Explore</a> <a href="#">Learn More</a> <a href="#">Get
Started</a> </div>
<h2>Courses Offered</h2>
<table>
<tbody>
<tr>
<th>Course Name</th>
<th>Course Code</th>
<th>Instructor</th>
</tr>
<tr>
<td>Multimedia and Animation</td>
<td>CS5101</td>
<td>Prof. Smith</td>
</tr>
<tr>

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

 <td>Web Development</td>
<td>CSCI202</td>
<td>Prof. Johnson</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

OUTPUT:

RESULT:
Thus, the program to design simple Homepage with Banners, logos, tables quick links, etc is
created and the output is verified successfully.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Exercise No. 4b
SEARCH INTERFACE AND SIMPLE NAVIGATION USING BLUEGRIFFON

AIM:
To provide a search interface and simple navigation from the home page to the inside pages of
the website using BlueGriffon.
ALGORITHM:
a) Start the program.
b) Create HTML files for each webpage (index.html, about.html, courses.html, faculty.html,
contact.html).
c) Define the HTML structure :
a) In each HTML file, define the basic structure with ‘<html>’, ‘<head>’ and
‘<body>’ tags.
b) Include the necessary metadata within the ‘<head>’ section, such as charset and title.
c) Add internal CSS styles within ‘<style>’ tag for consistent styling across pages.
d) Create the header:
a) Inside the ‘<body>’ of each HTML file, create a ‘<header>’ element to display
the page title and brief description.
e) Create the navigation menu:
a) Below the header, include a `<nav>` element to create a navigation menu with links
to other pages.
b) Use `<a>` tags for each menu item and set the `href` attribute to link to the
respective HTML files.
f) Create the main content container:
a) Add a `<div>` element with the class "container" to hold the main content of the
page.
b) Apply styling to this container for a consistent layout.
g) Populate the content:
a) Within the container, create a `<div>` with class "content" to hold the specific
content of each page.
b) Add appropriate headings and paragraphs to convey information about the Computer
Science Department.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

 c) For the "Courses" and "Faculty" pages, create tables to list course details and faculty
members.
8. Style the content:
a) Define CSS styles for various elements to achieve a consistent and visually
appealing design.
b) Customize styles for headers, links, navigation menu, tables, and other page elements.
c) Use CSS classes and IDs to target specific elements for styling.
9. Add images:
a) Include `<img>` tags to display images, such as the department logo and faculty
photos.
b) Set appropriate attributes for image sources, alt text, and dimensions.
10. Include contact information:
a) On the "Contact" page, list the department's address, email, and phone number in a
structured format.
11. Testing:
a) Ensure that all links within the navigation menu correctly point to the corresponding
HTML files.
b) Verify that the website's layout and styling are consistent and visually appealing.
c) Test the website on different browsers and devices to ensure compatibility.
12. Additional features (not present in the provided code):
a) Implement interactive features such as forms for user input or
JavaScript functionality.
b) Add more pages and content as needed for the website's specific requirements.
c) Consider optimizing the website for search engines (SEO) and improving
accessibility.

PROGRAM:
Main code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Computer Science Department</title>
<style>

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

/* Reset some default styles for consistency */
body, h1, h2, p {
margin: 0;
padding: 0;
}

/* Global styles */
body {
font-family: Arial, sans-
serif; background-color:
#f0f0f0; margin: 0;
padding: 0;
}

/* Header styles */
header {
background-color: #17252A;
color: #fff;
padding: 20px;
text-align: center;
}

header h1 {
font-size: 36px;
}

header p {
font-size: 18px;
}

/* Navigation styles */
nav {
background-color: #3AAFA9;
color: #fff;
text-align: center;
}

nav a {
text-decoration: none;
color: #fff;
margin: 0 10px;
}

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

/* Container styles */
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Banner styles */
.banner
{ display:
flex;
justify-content: space-between;
align-items: center;
padding: 5px;
background-color: #f7f7f7;
}

.banner img {
max-width: 75%;
height: 5%;
}

/* Quick links styles */

.quick-links
{ margin-top:
20px; text-align:
center;
}

.quick-links a { display:
inline-block; text-
decoration: none;
color: #333;
margin: 10px; padding:
10px 20px; border: 1px
solid #333; border-
radius: 5px;
}

/* Table styles */
table {
width: 100%;
border-collapse: collapse;

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

 margin-top: 20px;
}

table, th, td {
border: 1px solid #ccc;
}

th, td {
padding: 10px;
text-align: left;
}

/* Search bar styles */

.search-container
{ text-align:
center; margin-
top: 20px;
}

.search-box { padding:
10px; border: 1px
solid #ccc; border-
radius: 5px;
}

.search-button
{ padding: 10px 20px;
background-color: #444;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<header> <img src="file:///C:/Users/gnana/OneDrive/Desktop/logo.jpg" alt="Department
Logo"

style="width: 151px; height: 137px;">

<h1>Computer Science Department</h1>
<p>Welcome to the Computer Science Department at TPGIT</p>
</header>

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

 <nav> <a href="index.html">Home</a> <a href="C:%5CUsers%5Cgnana%5COneDrive
%5CDesktop%5Cmma%20lab%5CAbout.html">A bout
Us</a> <a href="C:%5CUsers%5Cgnana%5COneDrive%5CDesktop%5Cmma%20lab
%5CCourses.html"> Courses</a>
<a href="C:\Users\gnana\OneDrive\Desktop\mma lab\faculty.html">Faculty</a> <a href="C:\Users\
gnana\OneDrive\Desktop\mma lab\Contact.html">Contact</a> </nav>
<div class="container">
<div class="quick-links"> <a href="#">Explore</a> <a href="#">Learn More</a>
<a href="#">Get Started</a> </div>
<h2>Courses Offered</h2>
<table>
<tbody>
<tr>
<th>Course Name</th>
<th>Course Code</th>
<th>Instructor</th>
</tr>
<tr>
<td>Multimedia and Animation</td>
<td>CS5101</td>
<td>Prof. Smith</td>
</tr>
<tr>
<td>Web Development</td>
<td>CSCI202</td>
<td>Prof. Johnson</td>
</tr>
</tbody>
</table>
</div>
<!-- Search Interface -->
<div class="search-container"> <input class="search-box" placeholder="Search..."

type="text"> <button class="search-button">Search</button> </div>

</body>
</html>

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

INDEX.HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Computer Science Department</title>
<style>
/* Reset some default styles for consistency */
body, h1, h2, p {
margin: 0;
padding: 0;
}

/* Global styles */
body {
font-family: Arial, sans-
serif; background-color:
#f0f0f0; margin: 0;
padding: 0;
}

/* Header styles */
header {
background-color: #17252A;
color: #fff;
padding: 20px;
text-align: center;
}

header h1 {
font-size: 36px;
}

header p {
font-size: 18px;
}

/* Navigation styles */
nav {
background-color: #3AAFA9;
color: #fff;
text-align: center;
}

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

nav a {
text-decoration: none;
color: #fff;
margin: 0 10px;
}

/* Container styles */
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Banner styles */
.banner
{ display:
flex;
justify-content: space-between;
align-items: center;
padding: 5px;
background-color: #f7f7f7;
}

.banner img {
max-width: 75%;
height: 5%;
}

/* Quick links styles */

.quick-links
{ margin-top:
20px; text-align:
center;
}

.quick-links a { display:
inline-block; text-
decoration: none;
color: #333;
margin: 10px; padding:
10px 20px; border: 1px
solid #333;

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

 border-radius: 5px;
}

/* Table styles */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

table, th, td {
border: 1px solid #ccc;
}

th, td {
padding: 10px;
text-align: left;
}

/* Search bar styles */

.search-container
{ text-align:
center; margin-
top: 20px;
}

.search-box { padding:
10px; border: 1px
solid #ccc; border-
radius: 5px;
}

.search-button
{ padding: 10px 20px;
background-color: #444;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

 <header> <img src="file:///C:/Users/gnana/OneDrive/Desktop/logo.jpg" alt="Department
Logo"

style="width: 151px; height: 137px;">

<h1>Computer Science Department</h1>
<p>Welcome to the Computer Science Department at TPGIT</p>
</header>
<nav> <a href="C:%5CUsers%5Cgnana%5COneDrive%5CDesktop%5Cmma%20lab
%5Cindex.html">H ome</a>
<a href="about.html">About Us</a> <a href="courses.html">Courses</a> <a

href="faculty.html">Faculty</a> <a href="contact.html">Contact</a> </nav>

<div class="container">
<div class="quick-links"> <a href="#">Explore</a> <a href="#">Learn More</a>
<a href="#">Get Started</a> </div>
<h2>Courses Offered</h2>
<table>
<tbody>
<tr>
<th>Course Name</th>
<th>Course Code</th>
<th>Instructor</th>
</tr>
<tr>
<td>Multimedia and Animation</td>
<td>CS5101</td>
<td>Prof. Smith</td>
</tr>
<tr>
<td>Web Development</td>
<td>CSCI202</td>
<td>Prof. Johnson</td>
</tr>
</tbody>
</table>
</div>
<!-- Search Interface -->
<div class="search-container"> <input class="search-box" placeholder="Search..."
type="text"> <button class="search-button">Search</button> </div>
</body>
</html>

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

ABOUT.HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Us - Computer Science Department</title>
<style>
/* Reset some default styles for consistency */
body, h1, h2, p {
margin: 0;
padding: 0;
}

/* Global styles */
body {
font-family: Arial, sans-
serif; background-color:
#f0f0f0; margin: 0;
padding: 0;
}

/* Header styles */
header {
background-color: #17252A;
color: #fff;
padding: 20px;
text-align: center;
}

header h1 {
font-size: 36px;
}

header p {
font-size: 18px;
}

/* Navigation styles */
nav {
background-color: #3AAFA9;
color: #fff;
text-align: center;
}

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

 nav a {
text-decoration: none;
color: #fff;
margin: 0 10px;
}

/* Container styles */
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Content styles */
.content
{ padding:
20px;
}
</style>
</head>
<body>
<header>
<h1>About Us</h1>
</header>
<nav> <a href="index.html">Home</a> <a href="about.html">About Us</a> <a

href="courses.html">Courses</a> <a href="faculty.html">Faculty</a> <a

href="contact.html">Contact</a> </nav>
<div class="container">
<div class="content">
<h2>Welcome to the Computer Science Department</h2>
<p> The Computer Science Department at TPGIT is committed to providing
high-quality education and research opportunities in the field of
computer science. Our dedicated faculty members and cutting-edge
curriculum ensure that students receive a well-rounded education in
computer science. </p>
<p> We offer a wide range of courses, including multimedia and
animation, web development, and more. Our experienced instructors are
passionate about teaching and mentoring students to help them succeed
in their academic and professional careers. </p>

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

 </div>
</div>

</body>
</html>

COURSES.HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Computer Science Department</title>
<style>
/* Reset some default styles for consistency */
body, h1, h2, p {
margin: 0;
padding: 0;
}

/* Global styles */
body {
font-family: Arial, sans-
serif; background-color:
#f0f0f0; margin: 0;
padding: 0;
}

/* Header styles */
header {
background-color: #17252A;
color: #fff;
padding: 20px;
text-align: center;
}

header h1 {
font-size: 36px;
}

header p {
font-size: 18px;
}

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

/* Navigation styles */
nav {
background-color: #3AAFA9;
color: #fff;
text-align: center;
}

nav a {
text-decoration: none;
color: #fff;
margin: 0 10px;
}

/* Container styles */
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Banner styles */
.banner
{ display:
flex;
justify-content: space-between;
align-items: center;
padding: 5px;
background-color: #f7f7f7;
}

.banner img {
max-width: 75%;
height: 5%;
}

/* Quick links styles */

.quick-links
{ margin-top:
20px; text-align:
center;
}

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

.quick-links a { display:
inline-block; text-
decoration: none;
color: #333;
margin: 10px; padding:
10px 20px; border: 1px
solid #333; border-
radius: 5px;
}

/* Table styles */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

table, th, td {
border: 1px solid #ccc;
}

th, td {
padding: 10px;
text-align: left;
}

/* Search bar styles */

.search-container
{ text-align:
center; margin-
top: 20px;
}

.search-box { padding:
10px; border: 1px
solid #ccc; border-
radius: 5px;
}

.search-button
{ padding: 10px 20px;
background-color: #444;
color: #fff;
border: none;

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

 border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<header> <img src="file:///C:/Users/gnana/OneDrive/Desktop/logo.jpg" alt="Department
Logo"

style="width: 151px; height: 137px;">

<h1>Computer Science Department</h1>
<p>Welcome to the Computer Science Department at TPGIT</p>
</header>
<nav> <a href="C:%5CUsers%5Cgnana%5COneDrive%5CDesktop%5Cmma%20lab
%5Cindex.html">H ome</a>
<a href="about.html">About Us</a> <a href="courses.html">Courses</a> <a

href="faculty.html">Faculty</a> <a href="contact.html">Contact</a> </nav>

<div class="container">
<div class="quick-links"> <a href="#">Explore</a> <a href="#">Learn More</a>
<a href="#">Get Started</a> </div>
<h2>Courses Offered</h2>
<table>
<tbody>
<tr>
<th>Course Name</th>
<th>Course Code</th>
<th>Instructor</th>
</tr>
<tr>
<td>Multimedia and Animation</td>
<td>CS5101</td>
<td>Prof. Smith</td>
</tr>
<tr>
<td>Web Development</td>
<td>CSCI202</td>
<td>Prof. Johnson</td>
</tr>
</tbody>
</table>
</div>

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

 <!-- Search Interface -->
<div class="search-container"> <input class="search-box" placeholder="Search..."

type="text"> <button class="search-button">Search</button> </div>

</body>
</html>

FACULTY.HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Faculty - Computer Science Department</title>
<style>
/* Reset some default styles for consistency */
body, h1, h2, p {
margin: 0;
padding: 0;
}

/* Global styles */
body {
font-family: Arial, sans-
serif; background-color:
#f0f0f0; margin: 0;
padding: 0;
}

/* Header styles */
header {
background-color: #17252A;
color: #fff;
padding: 20px;
text-align: center;
}

header h1 {
font-size: 36px;
}

header p {

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

 font-size: 18px;
}

/* Navigation styles */
nav {
background-color: #3AAFA9;
color: #fff;
text-align: center;
}

nav a {
text-decoration: none;
color: #fff;
margin: 0 10px;
}

/* Container styles */
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Content styles */
.content
{ padding:
20px;
}

/* Faculty list styles */

.faculty-list {
list-style-type: none;
margin: 0;
padding: 0;
}

.faculty-item {
margin-bottom: 20px;
padding: 10px;
border: 1px solid
#ccc; border-radius:
5px;
}

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

 /* Faculty image styles */
.faculty-image
{ max-width:
100%; height:
auto;
}
</style>
</head>
<body>
<header>
<h1>Faculty</h1>
</header>
<nav> <a href="index.html">Home</a> <a href="about.html">About Us</a> <a

href="courses.html">Courses</a> <a href="faculty.html">Faculty</a> <a

href="contact.html">Contact</a> </nav>
<div class="container">
<div class="content">
<h2>Our Faculty</h2>
<ul class="faculty-list">
<li class="faculty-item"> <img class="faculty-image"
src="file:///C:/Users/gnana/Downloads/male.jpg"

alt="Prof. John Doe" style="width: 114px; height: 89px;">

<h3>Prof. John Doe</h3>
<p>Teaches Computer Science</p>
</li>
<li class="faculty-item"> <img class="faculty-image"
src="file:///C:/Users/gnana/Downloads/male.jpg"

alt="Prof. Jane Smith" style="width: 113px; height: 102px;">

<h3>Prof. Jane Smith</h3>
<p>Teaches Web Development</p>
</li>
<!-- Add more faculty members as needed -->
</ul>
</div>
</div>
</body>
</html>

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

CONTACT.HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contact - Computer Science Department</title>
<style>
/* Reset some default styles for consistency */
body, h1, h2, p {
margin: 0;
padding: 0;
}

/* Global styles */
body {
font-family: Arial, sans-
serif; background-color:
#f0f0f0; margin: 0;
padding: 0;
}

/* Header styles */
header {
background-color: #17252A;
color: #fff;
padding: 20px;
text-align: center;
}

header h1 {
font-size: 36px;
}

header p {
font-size: 18px;
}

/* Navigation styles */
nav {
background-color: #3AAFA9;
color: #fff;
text-align: center;
}

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

 nav a {
text-decoration: none;
color: #fff;
margin: 0 10px;
}

/* Container styles */
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Content styles */
.content
{ padding:
20px;
}

/* Contact information styles */

.contact-info
{ margin-top:
20px;
}

.contact-info h3
{ font-size:
24px;
margin-bottom: 10px;
}

.contact-info p
{ font-size:
18px;
}
</style>
</head>
<body>
<header>
<h1>Contact</h1>
</header>
<nav> <a href="index.html">Home</a> <a href="about.html">About Us</a> <a

href="courses.html">Courses</a> <a href="faculty.html">Faculty</a> <a

Downloaded by Mr Sathesh Abraham L CSE ([email protected])
 href="contact.html">Contact</a> </nav>
<div class="container">
<div class="content">
<h2>Contact Information</h2>
<div class="contact-info">
<h3>Department Address:</h3>
<p>Thanthai Periyar govt institute of technology,</p>
<p>Bagayam,</p>
<p>Vellore-02.</p>
</div>
<div class="contact-info">
<h3>Email:</h3>
<p>[email protected]</p>
</div>
<div class="contact-info">
<h3>Phone:</h3>
<p>+1 (123) 456-7890</p>
</div>
</div>
</div>
</body>
</html>

OUTPUT:

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Downloaded by Mr Sathesh Abraham L CSE ([email protected])
RESULT:
Thus, the program to provide a search interface and simple navigation from the home page to the
inside pages of the website using BlueGriffon was created and the output was verified
successfully.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Exercise No. 5a
WORKING WITH ANIMATION TOOLS

Aim:

To perform a simple 2D animation with sprites using Wick Editor.

Procedure:

1. Open Wick Editor: Start by opening Wick Editor in your web browser orafter
downloading and installing it.

2. Create a New Project: Click on "New Project" to start a new project.

3. Import Sprites: You'll need sprites for your animation. To import them:
• Click on the "Library" tab.

• Click "Import" and select the image file(s) for your sprite(s).
Commonimage formats like PNG or JPEG are supported.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

4. Add a New Scene: Scenes are like different sections of your animation. Toadd a scene:
• Click on the "Scenes" tab.

• Click the "+" button to create a new scene. Give it a name if you like.

5. Create a Sprite Layer: A sprite layer is where you'll place your sprites. Toadd a
sprite layer:

• Click on the "Layers" tab.

• Click the "+" button to create a new layer and select "Sprite."

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

6. Place Sprites on the Stage: Go to your new sprite layer and drag your imported
sprites onto the canvas (stage). You can resize and reposition themas needed.

7. Set Keyframes: Keyframes represent different points in your animation. Toset

keyframes:

• Go to the timeline at the bottom.

• Move the playhead to the frame where you want to create a “Addframe."

8. Animate the Sprites: For each keyframe, move the sprites to their new positions or
make other changes. Wick Editor will automatically interpolatebetween keyframes.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

9. Preview Your Animation: Click the "Play" button to preview youranimation.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

10. Adjust Timing: In the timeline, you can adjust the duration betweenkeyframes
by stretching or compressing the frames.

11. Export Your Animation: Once you're satisfied with your animation, go to"File"
> "Export" to save your animation in the desired format.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

 12. Save Your Project: Don't forget to save your project for future editing.

Result:

Thus,we have performed simple 2D animation with sprites using Wick editor.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Exercise No. 5b
SIMPLE 3D ANIMATION WITH KEYFRAMES AND KINEMATICS

Aim:

To perform 3D animation with keyframes and kinematics using Blender.

Procedure:

Creating a 3D animation with keyframes and kinematics in Blender is a multi-stepprocess that

involves setting up your 3D scene, adding objects, setting keyframes, and using armatures and
constraints for kinematics. Here's a general guide to get you started:

1. Install Blender: If you haven't already, download and install Blender fromthe
official website (https://www.blender.org/download/).

2. Open Blender: Launch Blender and start with a new project.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

3. Set up Your Scene: Create or import the 3D objects you want to animate.You
can add objects, lights, cameras, etc., to your scene.

4. Timeline and Keyframes:

• Ensure the timeline is visible in your workspace. You can usually findit at
the bottom of the interface.

• Select the object you want to animate by right-clicking on it in the 3Dview.

• Go to the frame where you want to set the first keyframe. You can usethe
timeline to move to a specific frame.

• Change the object's properties you want to animate (e.g.,

location,rotation, scale) in the Properties panel.

• Right-click on the property and choose "Insert Keyframe" (or press Ion the
keyboard). Select the property you want to keyframe (e.g., Location, Rotation,
or Scale).

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

5. Create the Animation:

• Move to different frames and make changes to the object's properties.

• Insert keyframes at each new frame by right-clicking on the propertyand

selecting "Insert Keyframe" or pressing I.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

6. Adjust Timing and Easing:

• In the Graph Editor, you can adjust the interpolation and easing
foryour keyframes to control how the animation flows.

• Select keyframes and press T to bring up the Interpolation menu.

7. Kinematics and Armatures:

• If you want to create more complex animations, especially for characters or

objects with multiple parts, you can use armatures andconstraints.

• Add an armature object (a skeleton) to your scene.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

• Parent your 3D object to the armature. Select the 3D object, then Shift-select the
armature, and press Ctrl+P. Choose "With AutomaticWeights" if you're working
with a character.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

8. Rendering:

• Set up your camera and lighting for the scene.

• Configure rendering settings in the Render tab.

• Choose an output format and render the animation by clicking

the"Render Animation" button.

9. Save and Export:

• Save your project using File > Save or Save As.

• Export the animation in the desired format (e.g., video or

imagesequence) using File > Export.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

10. Preview Your Animation:

• Use the Play button in the timeline to preview your animation.

• You can also scrub through the timeline to view individual frames.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Downloaded by Mr Sathesh Abraham L CSE ([email protected])
Result:

Thus we have performed simple 3D animation with keyframes and kinematicsusing Blender.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Exercise No. 6a
WORKING WITH E-LEARNING AUTHORING TOOLS

AIM:
Demonstrating screen recording and further editing for e-learning content using moovly
tool.

PROCEDURE:
Step1: Open your web browser.visit the official moovly website at "https://www.moovly.com"
for installation.

Step 2: After opening the moovly website,look for and click in the “login”button,typically
located at the top right corner of the webpage.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Step3: Once you’re on the login page,enter your email and password.Then,click the “log in”
button to access your account.

Step 4:Click the “get started for free” button to initiate the account creation process. fill in all the
requires details and then click the “create account” button .

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Step 5:Once you’re created the account, it will open the dashboard and click “Generative AI”.

Step 6:Select “video generation”.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Step 7:Enter the topic of your video. Example :E-Learning and click “Generate script”.

Step 8:In the video generation, select how the text appear in the video (i.e. no text ,on screen text
and subtitles)and select visuals of your own.once you’re select click “select clip style”.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Step 9: Next, select your “onscreen text style”.And click “create video”.

Step 10:Now your video is ready.click “Have a look” and it will created a video about e-learing.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Step 11:For the screen recording,select Record and choose “Record”.

Step 12:Next,select “Screen” for start recording.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Step 13:Choose E-Learning to share with dashboard.moovly.com and click “share”button.

Step 14:Select audio also for the recording and click “Start Recording”

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Step 15:It will start recording and if you finish your recording click “stop recording” or if
you’re pause the record click “pause recording”.

RESULT:
Thus the screen recording for E-Learning content has been done.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Exercise No. 6b
CREATE A SIMPLE E-LEARNING MODULE FOR A TOPIC OF YOUR CHOICE

AIM:
Creating a simple e-learning module for add multimedia elements to a presentation using
PowerPoint using EdApp.

PROCEDURE:
Step1: Go to the EdApp website

Step2: click “log in” button.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Step3: Enter all the required details and click on the "Get started for FREE" button.

Step4: Once you have logged in to your account, click on the "Course" button.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Step5: Click on the “create a course”.

Step6:Enter a topic name ,some key words or even a course summary and click on the “Generate
Course”.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Step7: Adding a content related for the course name and click on the “publish” button. Once
you have added content to your course, you can preview it to see how it will look to your
learners.
Once you are satisfied with the course, you can publish it.

Step8:Select your lessons and click on the “Next”button.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])

Step9: Click on the “Publish course”

Step10: The publishing process may take some time, depending on the size and complexity of
your course.once its finished ,it shows “published”. The course is released and available to
learners.

RESULT:
Thus the Creating a simple e-learning module for add multimedia elements to a presentation
using PowerPoint using EdApp has been done.

Downloaded by Mr Sathesh Abraham L CSE ([email protected])