SlideShare a Scribd company logo
M.BOBBY
ASSISTANT PROFESSOR & HEAD,
DEAPARTMENT OF COMPUTER SCIENCE,
SRI ADI CHUNCHANAGIRI WOMEN’S COLLEGE, CUMBUM
COMPUTER
SKILLS FOR WEB
DESIGNING AND
VIDEO EDITING
LAB MANUAL
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
1 I PG
Table of Contents
BASIC TAGS ...............................................................................................................................2
DEFINITION LIST .....................................................................................................................5
ORDERED AND UNORDERED LIST.....................................................................................7
TABLE CREATION .................................................................................................................10
GREETING CARD ...................................................................................................................13
HYPERLINK .............................................................................................................................16
STUDENT REGISTRATION FORM .....................................................................................19
LOGIN FORM...........................................................................................................................22
WEBSITE...................................................................................................................................25
CREATE A VIDEO USING POWERPOINT PRESENTATION........................................29
HOW TO EMBED A VIDEO IN POWERPOINT................................................................33
OBS STUDIO .............................................................................................................................35
OPEN ELEMENT .....................................................................................................................39
ADDING TEXT AND EFFECTS.............................................................................................45
ADDING SOUND EFFECTS ...................................................................................................48
MERGING VIDEOS USING COMMAND PROMPT..........................................................51
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
2 I PG
BASIC TAGS
HTML INTRODUCTION
HTML is the standard markup language for creating Web Pages.
 HTML stands for Hyper Text Markup Language.
 HTML describes the structure of Web Pages using markup.
 HTML elements are the building blocks of HTML pages.
 HTML elements are represented by tags.
 HTML tags label pieces of content such as ”heading”, ”paragraph” , ”table”
, and so on.
 Browsers do not display the HTML tags, but use them to render the content
of the page.
Tags Descriptions
<! DOCTYPE> This tag defines the document type and HTML version.
<html> This tag encloses the complete HTML document and
mainly comprises of document header which is
represented by <head>……</head>and document body
which is represented by<body>……</body>tags.
<head> This tags represents the document’s header which can
keep other HTML tags like <title>,<link>,etc.
<title> The <title>tag is used inside the <head> tag to mention
the document title.
<body> This tag represents the document’s body which keeps
other HTML tags like<h1> ,<div> , <p> ,etc.
<h1> This tag represents the heading.
<p> This is paragraph content.
<hr> This is a horizontal line and use width and size
attributes.
<b> This makes text bold.
<i> This makes text italic.
<br></br> It is the line break tags which is used to break lines.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
3 I PG
<img> The image tag is used to embed an image in an html
page. Create a holding space for the referenced image.
<div> This is division content.
<dl> Description List or Definition List displays elements in
definition form like in dictionary.
<dt> The html <dt> tag is used to define the strat of a term in
a definition list.
<dd> The html <dd>tag is used for specifying a definition
description in a definition list.
<BODY text=”color”> Specifies the color of normal text in
hexadecimal code
<BODY bgcolor=”color”> Sets the color of the background in hexadecimal code.
<BODY background=”filename.xxx”> Sets an image as a page’s background (Wall paper).
<BODY link=”color”> Specifies the default color of unvisited links in
hexadecimal code.
<FONT>…<</FONT> Changes font attributes for text within the tags
<FONT size=”value”>…</FONT> Sets the font to a size from 1 to 7, with 1 the smallest
and 7 largest.
<FONT face=”name”>…</FONT> Sets the font face.
<FONT color=”color”>…</FONT> Sets the font color using hexadecimal code.
<IMG src =”url” alt=”text”> Adds an image with a text description.
<A HREF=”URL”>….</A> Creates a hyperlink.
<TABLE>….</TABLE> Generates a table.
<TABLE border=”pixels”> Sets the size of cell borders.
<TABLE
cellspacing =”pixels”>
Sets the amount of space between cells.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
4 I PG
<TABLE cellpadding=”pixels”> Sets the amount of space between a border and cell
content.
<TABLE height=”pixels” or “%”> Sets the height of a table.
<TABLE width=”pixels” or “%”> Sets the width of a table.
<TD>…..</TD> Defines a table data cell.
<TD rowspan=”rows”> Sets a cell to span rows.
<TD colspan=”columns”> Sets a cell to span columns.
<TD nowrap> Prevents the lines within a cell from wrapping.
<TH>….</TH> Defines a table header with bold , centered table data.
<TR>….</TR> Defines a table row.
<TR align=”?”> or <TD align=”?”> Aligns the contents of a row or cell to the left , right , or
center.
<a></a> Anchor tag used to create links for linking one web page
to another.
<FRAMESET rows=”value, value”> Defines the rows within a frameset.
<FRAMESET cols=”value, value”> Defines the columns within a frameset.
<FORM>……</FORM> Generates a container for all form elements.
<FORM action=”url”> Designates the path of the script to process input from
the form.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
5 I PG
AIM:
To write a program for a definition list using HTML tags.
ALGORITHM:
1. Start the program.
2. The tags <dl>, <dt>, <dd> are used in definition list.
3. The <dd> tag is used to describe a term/name in a description list.
4. The <dd> tag is used in conjunction with <dl> (defines a description list) and <dt>
(defines terms/names).
5. Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc.
6. Close all tags.
7. Save the program.
8. Run the program.
9. Stop the program.
EX.NO:01
Definition list
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
6 I PG
SOURCE CODE:
<html>
<body>
<dl>
<dt>HTML</dt>
<dd>is a markup language</dd>
<dt>Java</dt>
<dd>is a programming language and platform</dd>
<dt>JavaScript</dt>
<dd>is a scripting language</dd>
<dt>SQL</dt>
<dd>is a query language</dd>
</dl>
</body>
</html>
OUTPUT:
RESULT:
Thus the HTML program has been successfully obtained and the output is verified.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
7 I PG
AIM:
To create a program for ordered and unordered list using HTML.
ALGORITHM:
1. Start the program in note pad.
2. In body field, give the font face, size and color to display the sentences in a given
particular.
3. A tag <ol> is used for ordered list.
4. A tag <ul> is used for unordered list.
5. Close all tags.
6. Save the program.
7. Run the program.
8. Stop the program.
EX.NO:02
Ordered and unordered list
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
8 I PG
SOURCE CODE:
<html>
<head>
<title>list</title>
<head>
<body bgcolor=red>
<b> fast food undered list </b>
<ul type="square">
<li>noodles</li>
<li>burger</li>
<li>pizza</li>
<ul>
<li>veg pizza</li>
<li>chees pizza</li>
</ul>
<li>maggie</li>
</ul>
<br>
<b> fruits orderlist</b>
<ol type="i">
<li>apple</li>
<li>mango</li>
<li>grapes</li>
<ol>
<li>green grapes</li>
<li>black grapes</li>
</ol>
<li>orange</li>
</ol>
</body>
</html>
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
9 I PG
OUTPUT:
RESULT:
Thus the HTML program has been successfully obtained and the output is verified.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
10 I PG
AIM:
To write a program for creating a Time Table using HTML.
ALGORITHM:
1. Start the program in note pad.
2. In body field, give the font face, size and color to display the sentences in a given
particular.
3. To creating a table and the tag <table> with some field like border a cell spacing.
4. Tag <TR>is used for table row and table header.
5. Tag <TD>is used for table data.
6. Close all tags.
7. Save the program.
8. Run the program.
9. Stop the program.

EX.NO:03
Table creation
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
11 I PG
SOURCE CODE:
<html>
<head>
<title>TIME TABLE</title>
</head>
<body>
<center>TIME TABLE</center>
<table width=100% cell spacing="5" border="5">
<trbgcolor="white" text="black">
<thbgcolor="pink">MONDAY</th>
<td bgcolor="yellow">java</td>
<td bgcolor="yellow">cd</td>
<td bgcolor="yellow">video editing</td>
<td bgcolor="yellow">dm</td>
</tr>
<tr>
<trbgcolor="white" text="black">
<thbgcolor="pink">TUESDAY</th>
<td bgcolor="yellow">ds</td>
<td bgcolor="yellow">java</td>
<td bgcolor="yellow">games</td>
<td bgcolor="yellow">cc</td>
</tr>
<tr>
<trbgcolor="white" text="black">
<thbgcolor="pink">WENESDAY</th>
<td bgcolor="yellow">ds lab</td>
<td bgcolor="yellow">dm</td>
<td bgcolor="yellow">cd</td>
<td bgcolor="yellow">ds</td>
</tr><tr>
<trbgcolor="white" text="black">
<thbgcolor="pink">THURSDAY</th>
<td bgcolor="yellow">cc</td>
<td bgcolor="yellow">video editing</td>
<td bgcolor="yellow">java</td>
<td bgcolor="yellow">da lab</td>
</tr><tr>
<trbgcolor="white" text="black">
<thbgcolor="pink">FRIDAY</th>
<td bgcolor="yellow">java</td>
<td bgcolor="yellow">dm</td>
<td bgcolor="yellow">ds</td>
<td bgcolor="yellow">cd</td>
</tr>
</table>
</body>
</html>
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
12 I PG
OUTPUT:
RESULT:
Thus the HTML program has been successfully obtained and the output is verified.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
13 I PG
AIM:
To create a program for adding Images using HTML.
ALGORITHM:
1. Start the program in note pad.
2. In body field, give the font face, size and color to display the sentences in a given
particular.
3. Use the necessary tag <p>,<i>.
4. Type the content of the page.
5. Close all tags.
6. Save the program.
7. Run the program.
8. Stop the program.
EX.NO:04
Greeting card
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
14 I PG
SOURCE CODE:
<html>
<head>
<little>GREETING CARD</tittle>
</head>
<body>
<body background="1.jpg">
<h1 align="center><b><u><font size="24">GREETING CARD</font>
</b>
</u>
<br><marguee><font size="28" color=navy">HAPPY BIRTHDAY</font></marguee>
<font face="monotype corsiva" color="navy">Dear friend</font>
<body bgcolor="red">
<i><p>your love and production was</p>
<p>more deepr than anything</p>
<p>i have seen in live</p>
<p>on your love of sky..!</p>
</i></h1>
</body>
</html>
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
15 I PG
OUTPUT:
RESULT:
Thus the HTML program has been successfully obtained and the output is verified.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
16 I PG
AIM:
To write a program for creating a Hyper Link using HTML tags.
ALGORITHM:
1. Start the program.
2. Open the tags <html>, <head>, <body>.
3. Use the necessary tags <h1>,<h3>,<li>,<ul>
4. In field give the font face, size, color to display.
5. Use a img tag it used to a display image.
6. Use a href tag it used to link a frame.
7. Close all tags.
8. Save the program.
9. Run the program.
10. Stop the program.
EX.NO:05
Hyperlink
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
17 I PG
SOURCE CODE:
KURTHIS:
<html>
<head>
<title>KURTHIS</title>
</head>
<body bgcolor="gray">
<center><imgsrc="1.jpeg">
<h1><font size="10" color="black">
KURTHIS
</font></h1>YRBAN TRENDS Women’s cotton long frock type kurti
</body>
</html>
SAREES:
<html>
<head>
<title>SAREES</title>
</head>
<body bgcolor="gray">
<center><imgsrc="5.jpeg">
<h1><font size="10" color="black">
SAREES
</font></h1>
Flosive women’s silk blend saree with blouse piece
</body>
</html>
MAIN:
<html>
<head>
<title>main part</title>
<h3>menu</h3>
<ul><li><a href="KURTHIS.html"target="second frame">KURTHIS</a>
<li><a href="SAREES.html"target="second frame">green</a>
</ul>
</body>
</html>
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
18 I PG
OUTPUT:
RESULT:
Thus the HTML program has been successfully obtained and the output is verified.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
19 I PG
AIM:
To create a HTML program for a Student Registration Form.
ALGORITHM:
1. Start the program.
2. In font field given face, size and color display the sentence in a particular format.
3. Open all necessary tags like <html>, <head>, <body>, <tr>, <td>.
4. Close all tags.
5. Save the program.
6. Run the program.
7. Stop the program.
EX.NO:06
Student registration form
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
20 I PG
SOURCE CODE:
<html>
<head>
<title>REGISTRATION FORM SAMPLE</title>
</head><body bgcolor="lightblue"text="red"style="font_size:15pt; font_family:garamond">
<center><h2>ENTER FORM</h2></center>
<form name=form 1>
<table name=tab cellspacing=30pt>
<tr><td align=left><h2>Enter Your Name:</h2></td>
<td align=right><input type=text name=t1 size=20>
<tr><td align=left><h2>Enter Your Age:</h2></td>
<td align=left><input type=text name=t2 size=20>
<tr><td align=left><h2>Enter Your Address:</h2></td>
<td align=right><textarea name=ta rows=5 cols=15></textarea>
<tr><td align=left><h2>Sex:</h2></td>
<td align=left><input type=radio name=r1 value="Female">Female<br><input type=radio
name=r1 value="Male">Male</td>
<tr><td aligh=left><h2>Language Known:</h2></td>
<td align=left><center>(select more than one)</center>
<input type=checkbox name=r1 value="Female">Female<br>
<input type=radio name=c1 value=C>C<br>
<input type=radio name=c1 value=C++>C++<br>
<input type=radio name=c1 value=VB>VB<br>
<input type=radio name=c1 value=JAVA>JAVA<br>
<input type=radio name=c1 value=ASP>ASP<br>
<input type=radio name=c1 value=others>OTHERS<br>
<tr><td align=left><h2>Enter Your Password</h2></td>
<td align=right><input type=Password name=t3 size=20>
</table><center>
<input type=reset value="Reset">
<input type=submit value="Submit">
</form>
</body>
</html>
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
21 I PG
Output:
RESULT:
Thus the HTML program has been successfully obtained and the output is verified.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
22 I PG
AIM:
To write a program for creating a Login Form using HTML tags.
ALGORITHM:
1. Start the program in note pad.
2. The <body> tag displays the background color in font<font>tag we can given a field like
face, color, size to display the heading in a center.
3. To create a label and Button, use the tags <label> and <button>.
4. Close all tags.
5. Save the program.
6. Run the program.
7. Stop the program.
EX.NO:07
Login form
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
23 I PG
SOURCE CODE:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Login Page </title>
<style>
Body {
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
button {
background-color: #4CAF50;
width: 100%;
color: orange;
padding: 15px;
margin: 10px 0px;
border: none;
cursor: pointer;
}
form {
border: 3px solid #f1f1f1;
}
input[type=text], input[type=password] {
width: 100%;
margin: 8px 0;
padding: 12px 20px;
display: inline-block;
border: 2px solid green;
box-sizing: border-box;
}
</style>
</head>
<body>
<center><h1> Student Login Form </h1></center>
<form>
<div class="container">
<label>Username : </label>
<input type="text" placeholder="Enter Username" name="username" required>
<label>Password : </label>
<input type="password" placeholder="Enter Password" name="password" required>
<button type="submit">Login</button>
<input type="checkbox" checked="checked"> Remember me
<button type="button" class="cancelbtn"> Cancel</button>
Forgot <a href="#"> password? </a>
</div>
</form>
</body>
</html>
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
24 I PG
OUTPUT:
RESULT:
Thus the HTML program has been successfully obtained and the output is verified.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
25 I PG
AIM:
To write a program for creating a website using HTML tags.
ALGORITHM:
1. Start the program in notepad.
2. In body field, give the font face, size and color to display the sentences in a given
particular.
3. Use the tag <frameset> and define the rows and columns within a frames.
4. Use the necessary tag <p>.
5. Close all tags.
6. Save the program.
7. Run the program.
8. Stop the program.
EX.NO:08
WEBSITE
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
26 I PG
SOURCE CODE:
SONE.HTML:
<html>
<head>
<title>college</title>
</head>
<frameset rows="30%,20%,50%">
<frame src="stwo.html">
<frameset cols="25%,75%">
<frame src="sfour.html">
<frame src="sthree.html">
</frameset>
<frameset cols="50%,50%">
<frame src="ssix.html">
<frame src="sfive.html">
</frameset>
</html>
STWO.HTML:
<html>
<head>
<title>name></title>
</head>
<body>
<body bgcolor="sky blue">
<center><imgsrc="8.png">
<h2><center><font color="yellow">
(SRI ADI CHUNCHANAGIRI WOMEN'S COLLEGE,CUMBUM)
<font color=" blue">
<h5>(Accrediated by NAAC with 'A' grade)
<font color="black">
<h3><br><u>(AFFILIATED TO MOTHER TERESA WOMEN'S
UNIVERSITY,KODAIKANAL)
</center>
</font>
</body>
</html>
STHREE.HTML:
<html>
<head>
<title>pic</title></head>
<body bgcolor="pink">
<center><imgsrc="6.jpg "height=250" width="950">
<br>
</body>
</html>
SFOUR.HTML:
<html>
<head>
<title>INFO</title>
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
27 I PG
</head>
<body background="3.jpg">
<font size="5"><font color="blue"><b>This college was started
by<u>Srisribalagangatharaswamiji</u>In 1996 at cumbum to enable the rural women to
purpose higher studies<p>This college is located at cumbum, kumily national highway
road.<br>
</font>
</body>
</html>
SFIVE.HTML:
<html>
<head>
<title>UG</title></head>
<body background="9.jpg">
<font size="4"><font color="white"><b>
<u>UG COURSES</u></font>
<br>
</b><font color="red">
<ol><li>B.SC IT</li>
<li>B.sc CS</li>
<li>B.sc Physics</li>
<li>B.sc Maths</li>
<li>B.sc Bio-chem</li>
<li>B.com</li>
<li>BBA</li></font>
</ol>
</b>
</body>
</html>
SSIX.HTML:
<html>
<head>
<title>PG</title></head>
<body background="9.jpg">
<font size="4"><font color="white"><b>
<u>PG COURSES</u></font>
<br>
</b>
<ol><font color="red">
<li>M.sc CS</li>
<li>M.cs IT</li>
<li>M.sc Physics</li>
<li>M.sc Maths</li>
<li>M.sc Bio-chem</li>
<li>M.com</li>
<li>M.Phil</li>
</ol></font>
</b>
</body>
</html>
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
28 I PG
OUTPUT:
RESULT:
Thus the HTML program has been successfully obtained and the output is verified.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
29 I PG
 To create a photo album, follow these steps:
 Open Microsoft PowerPoint
 You will need a new blank presentation displayed
 Select Insert from the Ribbon and click the Photo Album button
4. The Photo Album dialog box will appear:
 You will now need to import the pictures you wish to include in the photo album
 Click the File/Disk button to browse your computer’s hard drive
 Locate the pictures you wish to import
 If the pictures are located in multiple locations, that is fine, just repeat this process for
each location till all the pictures you want are imported
 Now you must select the pictures to insert. Here is a time-saving tip: do not import the
photos one at a time. Import multiple pictures at once by selecting them with the left
mouse button while you hold down the Ctrl key on the keyboard
 You will see multiple file names appear in the File name box
EX.NO:09
CREATE A VIDEO USING POWERPOINT PRESENTATION
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
30 I PG
 Once you have selected the pictures from this location, click Insert
 You will now see these pictures listed in the Photo Album dialog box
 To import more pictures, click the File/Disk button again and repeat this process
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
31 I PG
:
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
32 I PG
So you have two options for turning your presentation into a video that's ready to view:
Save/export your presentation to a video file format (.mp4 or .wmv).
Save your presentation as a PowerPoint Show (.ppsx) file. (A PowerPoint Show appears full-
screen in Slide Show, ready to view immediately.)
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
33 I PG
Embed a video stored on your PC
 In Normal view, click the slide that you want the video to be in.
 On the Insert tab, click the arrow under Video, and then click Video on My PC.
 In the Insert Video box, click the video that you want, and then click Insert.
Link to a video stored on your PC
 To help prevent broken links, we recommend copying the video into the same folder as
your presentation, and then linking to it there.
 In Normal view, click the slide where you want the link to the video to be in.
 On the Insert tab, click the arrow under Video, and then click Video on my PC.
 In the Insert Video box, click the file that you want to link to, click the down arrow next
to the Insert button, and then click Link to File.
PowerPoint 2016 and newer versions support the playback of video with multiple audio tracks.
They also support closed captions and subtitles that are embedded in video files. For more
information, see Make your PowerPoint presentations accessible.
Find out where a linked video is stored
If there's already a video on a slide and you want to know where it's stored, go to File > Info.
Under Optimize Media Compatibility, there will be information about all media files in the
presentation—whether they are linked or embedded in the file. If there are any linked videos,
PowerPoint gives you a View Links hyperlink. Click it to open a dialog box that shows the storage
location of any linked files.
YouTube video
 If you want to insert a video on YouTube, switch to Insert or link to a video on
YouTube.
EX.NO:10 HOW TO EMBED A VIDEO IN POWERPOINT
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
34 I PG
Preview a video
 When a video is selected on a slide, a toolbar appears below the video that has a
play/pause button, a progress bar, incremental forward/backward buttons, a timer, and a
volume control. Click the Play button at the left of that toolbar to preview the video.
Play a video automatically or when clicked
 By default, in Slide Show, the video plays as part of the click sequence. That means
that when you click anywhere on the slide to advance to the next step (or when you
press the Spacebar, Right arrow key, or other key that advances to the next step) the
video plays. This Start option is called In Click Sequence.
 But if you prefer, you can make the video start automatically as soon as it appears
onscreen, or make it play when it is clicked:
 Select the video frame.
 On the ribbon, on the Video Tools Playback tab, open the Start list and choose the
option you prefer:
Option Description
In Click
Sequence
This is the default behavior, as described above. When you
click anywhere on the slide to advance to the next step, the
video plays.
Automatically The video starts automatically. (If there are animation steps
before it, the animation steps will play first and then the video
starts playing automatically. If there are no other animation
steps before the video on the slide, the video begins playing
immediately.)
When Clicked
On
The video starts only when it has been clicked.
 For more details about the options for playing the video in Slide Show, see Set the 'Play'
options for a video.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
35 I PG
AIM:
To create a screen recording using OBS Studio.
PROCEDURE:
Step 1: Download and Install OBS Studio.
Step 2: Open OBS Studio. The Software will automatically add a Scene after launching. If not,
click On the + icon in the Scenes box at the screen’s bottom-left corner.
Step 3: Now, click the Source option.
EX.NO:11
OBS STUDIO
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
36 I PG
Step 4: Now select Display Capture from options menu.
Step 5: A Small popup window will appear, add a title and click ok.
Step 6: A New Window will appear- select the Recording path. Record using a present (same as
stream, High Quality, Indistinguishable Quality, and Lossless) and a different Encoder(if
available).
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
37 I PG
Step 7: A New window will appear – select from the sidebar on the left hand side.
Step 8: Under recording path, choose a destination for your file.
Step 9: Once you are done, click the Start recording button in the lower right corner of the
screen.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
38 I PG
Step 10:When you are done, click stop recording and a video will be written to the folder
specified in the settings.
Step11: Show your recording Go to file option, then click Show recording option.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
39 I PG
AIM:
To create an editing for adding image, adding text and adding link using OPEN ELEMENT
PROCEDURE:
Step 1: Install Open Element for Editing on your Devices.
Step2 : Open the Open Element and click new project.
Step3 : Give Project Name .Next select the destination folder. And then Choose
Template(optional) after that click okie button.
EX.NO:10
OPEN ELEMENT
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
40 I PG
Step4: ‘Project’ Tab.
Step5: Then your editing page appear like this,
Step6: You can start your editing by choosing your own photos, gif, videos using Element
options.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
41 I PG
Step7: Add an Image Element- Drag-and-Drop the element Image from the elements menu
anywhere on the page.
Step8: Dragging the element onto the page will automatically open the file library.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
42 I PG
Step9: Open the image library from the editing pane to change the element’s image.
Step10: opens the links configuration form to add a hyperlink to the image.
Step11: Now you are ready to add text, hyperlink and effects in this editing using elements
Properties.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
43 I PG
Step12: Once you choose text option,then the page appears to add the text you want in your
editing. You can adjust the text size and you are able to place the text whereever you like.
Step13: Next step is to choose preview option to check your editing.
Step14: Once you finished your editing you just click save option to save your editing.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
44 I PG
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
45 I PG
Aim:
To create an editing for adding text and effects using Kinemaster.
Procedure:
1. Install Kinemaster for video editing on your device.
2. Open Kinemaster and click new project.
3. Choose name to your project and click next to Start the editing.
EX.NO:11
ADDING TEXT AND EFFECTS
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
46 I PG
4. Then your editing page will appear like this,
5. You can start your editing by choosing your own photos or videos in your media using
media option.
6. Once you click media, it directly goes to your media and asks you to choose your photos
or videos that you want to edit.
7. After you select one video then it will be like,
8. Now you are ready to add text and effects in this video using Kinemaster.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
47 I PG
9. From the above picture, you can see four sections like media, layer, audio and recording;
you can add text and effects using layer section.
10. Once you choose text option, then the page appears to add the text you want in your
editing.
11. You just add the text and click ok.
12. Now you can adjust the text size and you are able to place the text wherever you like.
13. In the side you can see In Animation, overall Animation, etc.
14. By using these options you can easily add effects to your text. You can also use Effect
option in the Layer section to add some more effects to your editing.
15. Next step is to choose play option to check your editing.
16. Once you finished you editing you just click save option to save your editing video.
17. Stop the editing.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
48 I PG
Aim:
To create an editing for adding sound effects using Kinemaster.
Procedure:
1. Install Kinemaster for video editing on your device.
2. Open Kinemaster and click new project.
3. Choose name to your project and click next to Start the editing.
4. Then your editing page will appear like this,
EX.NO:12
ADDING SOUND EFFECTS
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
49 I PG
5. You can start your editing by choosing your own photos or videos in your media using
media option.
6. Once you click media, it directly goes to your media and asks you to choose your photos
or videos that you want to edit.
7. After you select one video then it will be like,
8. Now you are able to add more pictures and videos using media option.
9. Once you add more picture then your page will like,
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
50 I PG
10. Now you can add audio effect using Audio section.
11. Once you click Audio section then this page will appear,
12. You can choose Audio in your media of your choice and then click add button to add the
audio in your editing video.
13. Next step is to choose play option to check your editing.
14. Once you finished you editing you just click save option to save your editing video.
15. Stop the editing.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
51 I PG
Aim:
To create an editing for merging videos using VLC Media Player.
Procedure:
Step 1: Start  VLC Media Player Open file location.
Step 2: Select VLC Media Player.
EX.NO:13
MERGING VIDEOS USING COMMAND PROMPT
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
52 I PG
Step 3: Now copy the path for the file location and then paste it on Notepad.
Step 4: Open command prompt and give the correct location of your videos that you wants to
merge using VLC media player.
Step 5: Again copy and paste your correct path location in the command prompt and then click
enter.
WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL
53 I PG
Step 6: Now, your file gets merged and finally you get your merged file videos.

More Related Content

PPTX
Html presentation
PPT
Unit 1-HTML Final.ppt
PDF
Html xhtml tag-sheet
PDF
Industrial training report
DOC
Updated html programs
PPTX
HTML Tutorials
PPTX
Presentation_ON _HTML Irfan Rashid .pptx
Html presentation
Unit 1-HTML Final.ppt
Html xhtml tag-sheet
Industrial training report
Updated html programs
HTML Tutorials
Presentation_ON _HTML Irfan Rashid .pptx

Similar to Computer skills for web designing and video editing_Lab Manual.pdf (20)

PPTX
Web technologies: Lesson 2
PPT
Intodcution to Html
PPT
Deepshikha html
PPTX
HTML [Basic] --by Abdulla-al Baset
PPTX
Html Study Guide - Heritage
DOCX
Caracteristicas Basicas De Htlm
PPTX
presentation_html_ppt_1.pptx
PPTX
HTML Presentation
PPTX
presentation_html_ppt_1534512076_351187.pptx
PDF
PDF
Wp unit 1 (1)
PPTX
Tech Winter Break'24 Workshop A hands-o
DOCX
PPSX
DIWE - Coding HTML for Basic Web Designing
PPTX
Body Section in HTML - R.D.Sivakumar
PPTX
Hypertext markup language(html)
PPTX
Html
Web technologies: Lesson 2
Intodcution to Html
Deepshikha html
HTML [Basic] --by Abdulla-al Baset
Html Study Guide - Heritage
Caracteristicas Basicas De Htlm
presentation_html_ppt_1.pptx
HTML Presentation
presentation_html_ppt_1534512076_351187.pptx
Wp unit 1 (1)
Tech Winter Break'24 Workshop A hands-o
DIWE - Coding HTML for Basic Web Designing
Body Section in HTML - R.D.Sivakumar
Hypertext markup language(html)
Html
Ad

More from Bobby Murugesan (10)

PDF
Study Material for Problem Solving Techniques
PDF
Fundamentals of Information Technology study Material
PDF
STUDY MATERIA FOR "THE VIOLENCE AGAINST WOMEN "
PDF
NOTES FOR CYBER SECURITY INITIATIVES BY THE INDIAN GOVERNMENT
PDF
Python Lab Manual
PPTX
Sequence Types in Python Programming
PPTX
Python The basics
PPT
Impressive Google Apps
PDF
How to register in Swayam
PPTX
Green computing introduction
Study Material for Problem Solving Techniques
Fundamentals of Information Technology study Material
STUDY MATERIA FOR "THE VIOLENCE AGAINST WOMEN "
NOTES FOR CYBER SECURITY INITIATIVES BY THE INDIAN GOVERNMENT
Python Lab Manual
Sequence Types in Python Programming
Python The basics
Impressive Google Apps
How to register in Swayam
Green computing introduction
Ad

Recently uploaded (20)

PPTX
Introduction_to_Human_Anatomy_and_Physiology_for_B.Pharm.pptx
PDF
BÀI TẬP BỔ TRỢ 4 KỸ NĂNG TIẾNG ANH 9 GLOBAL SUCCESS - CẢ NĂM - BÁM SÁT FORM Đ...
PDF
Pre independence Education in Inndia.pdf
PDF
Computing-Curriculum for Schools in Ghana
PDF
FourierSeries-QuestionsWithAnswers(Part-A).pdf
PDF
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
PDF
Abdominal Access Techniques with Prof. Dr. R K Mishra
PPTX
human mycosis Human fungal infections are called human mycosis..pptx
PPTX
Pharmacology of Heart Failure /Pharmacotherapy of CHF
PPTX
master seminar digital applications in india
PDF
Classroom Observation Tools for Teachers
PDF
Physiotherapy_for_Respiratory_and_Cardiac_Problems WEBBER.pdf
PDF
Basic Mud Logging Guide for educational purpose
PDF
Microbial disease of the cardiovascular and lymphatic systems
PDF
Module 4: Burden of Disease Tutorial Slides S2 2025
PPTX
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
PPTX
Final Presentation General Medicine 03-08-2024.pptx
PDF
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
PDF
STATICS OF THE RIGID BODIES Hibbelers.pdf
PDF
TR - Agricultural Crops Production NC III.pdf
Introduction_to_Human_Anatomy_and_Physiology_for_B.Pharm.pptx
BÀI TẬP BỔ TRỢ 4 KỸ NĂNG TIẾNG ANH 9 GLOBAL SUCCESS - CẢ NĂM - BÁM SÁT FORM Đ...
Pre independence Education in Inndia.pdf
Computing-Curriculum for Schools in Ghana
FourierSeries-QuestionsWithAnswers(Part-A).pdf
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
Abdominal Access Techniques with Prof. Dr. R K Mishra
human mycosis Human fungal infections are called human mycosis..pptx
Pharmacology of Heart Failure /Pharmacotherapy of CHF
master seminar digital applications in india
Classroom Observation Tools for Teachers
Physiotherapy_for_Respiratory_and_Cardiac_Problems WEBBER.pdf
Basic Mud Logging Guide for educational purpose
Microbial disease of the cardiovascular and lymphatic systems
Module 4: Burden of Disease Tutorial Slides S2 2025
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
Final Presentation General Medicine 03-08-2024.pptx
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
STATICS OF THE RIGID BODIES Hibbelers.pdf
TR - Agricultural Crops Production NC III.pdf

Computer skills for web designing and video editing_Lab Manual.pdf

  • 1. M.BOBBY ASSISTANT PROFESSOR & HEAD, DEAPARTMENT OF COMPUTER SCIENCE, SRI ADI CHUNCHANAGIRI WOMEN’S COLLEGE, CUMBUM COMPUTER SKILLS FOR WEB DESIGNING AND VIDEO EDITING LAB MANUAL
  • 2. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 1 I PG Table of Contents BASIC TAGS ...............................................................................................................................2 DEFINITION LIST .....................................................................................................................5 ORDERED AND UNORDERED LIST.....................................................................................7 TABLE CREATION .................................................................................................................10 GREETING CARD ...................................................................................................................13 HYPERLINK .............................................................................................................................16 STUDENT REGISTRATION FORM .....................................................................................19 LOGIN FORM...........................................................................................................................22 WEBSITE...................................................................................................................................25 CREATE A VIDEO USING POWERPOINT PRESENTATION........................................29 HOW TO EMBED A VIDEO IN POWERPOINT................................................................33 OBS STUDIO .............................................................................................................................35 OPEN ELEMENT .....................................................................................................................39 ADDING TEXT AND EFFECTS.............................................................................................45 ADDING SOUND EFFECTS ...................................................................................................48 MERGING VIDEOS USING COMMAND PROMPT..........................................................51
  • 3. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 2 I PG BASIC TAGS HTML INTRODUCTION HTML is the standard markup language for creating Web Pages.  HTML stands for Hyper Text Markup Language.  HTML describes the structure of Web Pages using markup.  HTML elements are the building blocks of HTML pages.  HTML elements are represented by tags.  HTML tags label pieces of content such as ”heading”, ”paragraph” , ”table” , and so on.  Browsers do not display the HTML tags, but use them to render the content of the page. Tags Descriptions <! DOCTYPE> This tag defines the document type and HTML version. <html> This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>……</head>and document body which is represented by<body>……</body>tags. <head> This tags represents the document’s header which can keep other HTML tags like <title>,<link>,etc. <title> The <title>tag is used inside the <head> tag to mention the document title. <body> This tag represents the document’s body which keeps other HTML tags like<h1> ,<div> , <p> ,etc. <h1> This tag represents the heading. <p> This is paragraph content. <hr> This is a horizontal line and use width and size attributes. <b> This makes text bold. <i> This makes text italic. <br></br> It is the line break tags which is used to break lines.
  • 4. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 3 I PG <img> The image tag is used to embed an image in an html page. Create a holding space for the referenced image. <div> This is division content. <dl> Description List or Definition List displays elements in definition form like in dictionary. <dt> The html <dt> tag is used to define the strat of a term in a definition list. <dd> The html <dd>tag is used for specifying a definition description in a definition list. <BODY text=”color”> Specifies the color of normal text in hexadecimal code <BODY bgcolor=”color”> Sets the color of the background in hexadecimal code. <BODY background=”filename.xxx”> Sets an image as a page’s background (Wall paper). <BODY link=”color”> Specifies the default color of unvisited links in hexadecimal code. <FONT>…<</FONT> Changes font attributes for text within the tags <FONT size=”value”>…</FONT> Sets the font to a size from 1 to 7, with 1 the smallest and 7 largest. <FONT face=”name”>…</FONT> Sets the font face. <FONT color=”color”>…</FONT> Sets the font color using hexadecimal code. <IMG src =”url” alt=”text”> Adds an image with a text description. <A HREF=”URL”>….</A> Creates a hyperlink. <TABLE>….</TABLE> Generates a table. <TABLE border=”pixels”> Sets the size of cell borders. <TABLE cellspacing =”pixels”> Sets the amount of space between cells.
  • 5. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 4 I PG <TABLE cellpadding=”pixels”> Sets the amount of space between a border and cell content. <TABLE height=”pixels” or “%”> Sets the height of a table. <TABLE width=”pixels” or “%”> Sets the width of a table. <TD>…..</TD> Defines a table data cell. <TD rowspan=”rows”> Sets a cell to span rows. <TD colspan=”columns”> Sets a cell to span columns. <TD nowrap> Prevents the lines within a cell from wrapping. <TH>….</TH> Defines a table header with bold , centered table data. <TR>….</TR> Defines a table row. <TR align=”?”> or <TD align=”?”> Aligns the contents of a row or cell to the left , right , or center. <a></a> Anchor tag used to create links for linking one web page to another. <FRAMESET rows=”value, value”> Defines the rows within a frameset. <FRAMESET cols=”value, value”> Defines the columns within a frameset. <FORM>……</FORM> Generates a container for all form elements. <FORM action=”url”> Designates the path of the script to process input from the form.
  • 6. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 5 I PG AIM: To write a program for a definition list using HTML tags. ALGORITHM: 1. Start the program. 2. The tags <dl>, <dt>, <dd> are used in definition list. 3. The <dd> tag is used to describe a term/name in a description list. 4. The <dd> tag is used in conjunction with <dl> (defines a description list) and <dt> (defines terms/names). 5. Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc. 6. Close all tags. 7. Save the program. 8. Run the program. 9. Stop the program. EX.NO:01 Definition list
  • 7. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 6 I PG SOURCE CODE: <html> <body> <dl> <dt>HTML</dt> <dd>is a markup language</dd> <dt>Java</dt> <dd>is a programming language and platform</dd> <dt>JavaScript</dt> <dd>is a scripting language</dd> <dt>SQL</dt> <dd>is a query language</dd> </dl> </body> </html> OUTPUT: RESULT: Thus the HTML program has been successfully obtained and the output is verified.
  • 8. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 7 I PG AIM: To create a program for ordered and unordered list using HTML. ALGORITHM: 1. Start the program in note pad. 2. In body field, give the font face, size and color to display the sentences in a given particular. 3. A tag <ol> is used for ordered list. 4. A tag <ul> is used for unordered list. 5. Close all tags. 6. Save the program. 7. Run the program. 8. Stop the program. EX.NO:02 Ordered and unordered list
  • 9. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 8 I PG SOURCE CODE: <html> <head> <title>list</title> <head> <body bgcolor=red> <b> fast food undered list </b> <ul type="square"> <li>noodles</li> <li>burger</li> <li>pizza</li> <ul> <li>veg pizza</li> <li>chees pizza</li> </ul> <li>maggie</li> </ul> <br> <b> fruits orderlist</b> <ol type="i"> <li>apple</li> <li>mango</li> <li>grapes</li> <ol> <li>green grapes</li> <li>black grapes</li> </ol> <li>orange</li> </ol> </body> </html>
  • 10. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 9 I PG OUTPUT: RESULT: Thus the HTML program has been successfully obtained and the output is verified.
  • 11. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 10 I PG AIM: To write a program for creating a Time Table using HTML. ALGORITHM: 1. Start the program in note pad. 2. In body field, give the font face, size and color to display the sentences in a given particular. 3. To creating a table and the tag <table> with some field like border a cell spacing. 4. Tag <TR>is used for table row and table header. 5. Tag <TD>is used for table data. 6. Close all tags. 7. Save the program. 8. Run the program. 9. Stop the program.  EX.NO:03 Table creation
  • 12. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 11 I PG SOURCE CODE: <html> <head> <title>TIME TABLE</title> </head> <body> <center>TIME TABLE</center> <table width=100% cell spacing="5" border="5"> <trbgcolor="white" text="black"> <thbgcolor="pink">MONDAY</th> <td bgcolor="yellow">java</td> <td bgcolor="yellow">cd</td> <td bgcolor="yellow">video editing</td> <td bgcolor="yellow">dm</td> </tr> <tr> <trbgcolor="white" text="black"> <thbgcolor="pink">TUESDAY</th> <td bgcolor="yellow">ds</td> <td bgcolor="yellow">java</td> <td bgcolor="yellow">games</td> <td bgcolor="yellow">cc</td> </tr> <tr> <trbgcolor="white" text="black"> <thbgcolor="pink">WENESDAY</th> <td bgcolor="yellow">ds lab</td> <td bgcolor="yellow">dm</td> <td bgcolor="yellow">cd</td> <td bgcolor="yellow">ds</td> </tr><tr> <trbgcolor="white" text="black"> <thbgcolor="pink">THURSDAY</th> <td bgcolor="yellow">cc</td> <td bgcolor="yellow">video editing</td> <td bgcolor="yellow">java</td> <td bgcolor="yellow">da lab</td> </tr><tr> <trbgcolor="white" text="black"> <thbgcolor="pink">FRIDAY</th> <td bgcolor="yellow">java</td> <td bgcolor="yellow">dm</td> <td bgcolor="yellow">ds</td> <td bgcolor="yellow">cd</td> </tr> </table> </body> </html>
  • 13. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 12 I PG OUTPUT: RESULT: Thus the HTML program has been successfully obtained and the output is verified.
  • 14. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 13 I PG AIM: To create a program for adding Images using HTML. ALGORITHM: 1. Start the program in note pad. 2. In body field, give the font face, size and color to display the sentences in a given particular. 3. Use the necessary tag <p>,<i>. 4. Type the content of the page. 5. Close all tags. 6. Save the program. 7. Run the program. 8. Stop the program. EX.NO:04 Greeting card
  • 15. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 14 I PG SOURCE CODE: <html> <head> <little>GREETING CARD</tittle> </head> <body> <body background="1.jpg"> <h1 align="center><b><u><font size="24">GREETING CARD</font> </b> </u> <br><marguee><font size="28" color=navy">HAPPY BIRTHDAY</font></marguee> <font face="monotype corsiva" color="navy">Dear friend</font> <body bgcolor="red"> <i><p>your love and production was</p> <p>more deepr than anything</p> <p>i have seen in live</p> <p>on your love of sky..!</p> </i></h1> </body> </html>
  • 16. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 15 I PG OUTPUT: RESULT: Thus the HTML program has been successfully obtained and the output is verified.
  • 17. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 16 I PG AIM: To write a program for creating a Hyper Link using HTML tags. ALGORITHM: 1. Start the program. 2. Open the tags <html>, <head>, <body>. 3. Use the necessary tags <h1>,<h3>,<li>,<ul> 4. In field give the font face, size, color to display. 5. Use a img tag it used to a display image. 6. Use a href tag it used to link a frame. 7. Close all tags. 8. Save the program. 9. Run the program. 10. Stop the program. EX.NO:05 Hyperlink
  • 18. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 17 I PG SOURCE CODE: KURTHIS: <html> <head> <title>KURTHIS</title> </head> <body bgcolor="gray"> <center><imgsrc="1.jpeg"> <h1><font size="10" color="black"> KURTHIS </font></h1>YRBAN TRENDS Women’s cotton long frock type kurti </body> </html> SAREES: <html> <head> <title>SAREES</title> </head> <body bgcolor="gray"> <center><imgsrc="5.jpeg"> <h1><font size="10" color="black"> SAREES </font></h1> Flosive women’s silk blend saree with blouse piece </body> </html> MAIN: <html> <head> <title>main part</title> <h3>menu</h3> <ul><li><a href="KURTHIS.html"target="second frame">KURTHIS</a> <li><a href="SAREES.html"target="second frame">green</a> </ul> </body> </html>
  • 19. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 18 I PG OUTPUT: RESULT: Thus the HTML program has been successfully obtained and the output is verified.
  • 20. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 19 I PG AIM: To create a HTML program for a Student Registration Form. ALGORITHM: 1. Start the program. 2. In font field given face, size and color display the sentence in a particular format. 3. Open all necessary tags like <html>, <head>, <body>, <tr>, <td>. 4. Close all tags. 5. Save the program. 6. Run the program. 7. Stop the program. EX.NO:06 Student registration form
  • 21. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 20 I PG SOURCE CODE: <html> <head> <title>REGISTRATION FORM SAMPLE</title> </head><body bgcolor="lightblue"text="red"style="font_size:15pt; font_family:garamond"> <center><h2>ENTER FORM</h2></center> <form name=form 1> <table name=tab cellspacing=30pt> <tr><td align=left><h2>Enter Your Name:</h2></td> <td align=right><input type=text name=t1 size=20> <tr><td align=left><h2>Enter Your Age:</h2></td> <td align=left><input type=text name=t2 size=20> <tr><td align=left><h2>Enter Your Address:</h2></td> <td align=right><textarea name=ta rows=5 cols=15></textarea> <tr><td align=left><h2>Sex:</h2></td> <td align=left><input type=radio name=r1 value="Female">Female<br><input type=radio name=r1 value="Male">Male</td> <tr><td aligh=left><h2>Language Known:</h2></td> <td align=left><center>(select more than one)</center> <input type=checkbox name=r1 value="Female">Female<br> <input type=radio name=c1 value=C>C<br> <input type=radio name=c1 value=C++>C++<br> <input type=radio name=c1 value=VB>VB<br> <input type=radio name=c1 value=JAVA>JAVA<br> <input type=radio name=c1 value=ASP>ASP<br> <input type=radio name=c1 value=others>OTHERS<br> <tr><td align=left><h2>Enter Your Password</h2></td> <td align=right><input type=Password name=t3 size=20> </table><center> <input type=reset value="Reset"> <input type=submit value="Submit"> </form> </body> </html>
  • 22. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 21 I PG Output: RESULT: Thus the HTML program has been successfully obtained and the output is verified.
  • 23. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 22 I PG AIM: To write a program for creating a Login Form using HTML tags. ALGORITHM: 1. Start the program in note pad. 2. The <body> tag displays the background color in font<font>tag we can given a field like face, color, size to display the heading in a center. 3. To create a label and Button, use the tags <label> and <button>. 4. Close all tags. 5. Save the program. 6. Run the program. 7. Stop the program. EX.NO:07 Login form
  • 24. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 23 I PG SOURCE CODE: <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Login Page </title> <style> Body { font-family: Calibri, Helvetica, sans-serif; background-color: pink; } button { background-color: #4CAF50; width: 100%; color: orange; padding: 15px; margin: 10px 0px; border: none; cursor: pointer; } form { border: 3px solid #f1f1f1; } input[type=text], input[type=password] { width: 100%; margin: 8px 0; padding: 12px 20px; display: inline-block; border: 2px solid green; box-sizing: border-box; } </style> </head> <body> <center><h1> Student Login Form </h1></center> <form> <div class="container"> <label>Username : </label> <input type="text" placeholder="Enter Username" name="username" required> <label>Password : </label> <input type="password" placeholder="Enter Password" name="password" required> <button type="submit">Login</button> <input type="checkbox" checked="checked"> Remember me <button type="button" class="cancelbtn"> Cancel</button> Forgot <a href="#"> password? </a> </div> </form> </body> </html>
  • 25. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 24 I PG OUTPUT: RESULT: Thus the HTML program has been successfully obtained and the output is verified.
  • 26. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 25 I PG AIM: To write a program for creating a website using HTML tags. ALGORITHM: 1. Start the program in notepad. 2. In body field, give the font face, size and color to display the sentences in a given particular. 3. Use the tag <frameset> and define the rows and columns within a frames. 4. Use the necessary tag <p>. 5. Close all tags. 6. Save the program. 7. Run the program. 8. Stop the program. EX.NO:08 WEBSITE
  • 27. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 26 I PG SOURCE CODE: SONE.HTML: <html> <head> <title>college</title> </head> <frameset rows="30%,20%,50%"> <frame src="stwo.html"> <frameset cols="25%,75%"> <frame src="sfour.html"> <frame src="sthree.html"> </frameset> <frameset cols="50%,50%"> <frame src="ssix.html"> <frame src="sfive.html"> </frameset> </html> STWO.HTML: <html> <head> <title>name></title> </head> <body> <body bgcolor="sky blue"> <center><imgsrc="8.png"> <h2><center><font color="yellow"> (SRI ADI CHUNCHANAGIRI WOMEN'S COLLEGE,CUMBUM) <font color=" blue"> <h5>(Accrediated by NAAC with 'A' grade) <font color="black"> <h3><br><u>(AFFILIATED TO MOTHER TERESA WOMEN'S UNIVERSITY,KODAIKANAL) </center> </font> </body> </html> STHREE.HTML: <html> <head> <title>pic</title></head> <body bgcolor="pink"> <center><imgsrc="6.jpg "height=250" width="950"> <br> </body> </html> SFOUR.HTML: <html> <head> <title>INFO</title>
  • 28. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 27 I PG </head> <body background="3.jpg"> <font size="5"><font color="blue"><b>This college was started by<u>Srisribalagangatharaswamiji</u>In 1996 at cumbum to enable the rural women to purpose higher studies<p>This college is located at cumbum, kumily national highway road.<br> </font> </body> </html> SFIVE.HTML: <html> <head> <title>UG</title></head> <body background="9.jpg"> <font size="4"><font color="white"><b> <u>UG COURSES</u></font> <br> </b><font color="red"> <ol><li>B.SC IT</li> <li>B.sc CS</li> <li>B.sc Physics</li> <li>B.sc Maths</li> <li>B.sc Bio-chem</li> <li>B.com</li> <li>BBA</li></font> </ol> </b> </body> </html> SSIX.HTML: <html> <head> <title>PG</title></head> <body background="9.jpg"> <font size="4"><font color="white"><b> <u>PG COURSES</u></font> <br> </b> <ol><font color="red"> <li>M.sc CS</li> <li>M.cs IT</li> <li>M.sc Physics</li> <li>M.sc Maths</li> <li>M.sc Bio-chem</li> <li>M.com</li> <li>M.Phil</li> </ol></font> </b> </body> </html>
  • 29. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 28 I PG OUTPUT: RESULT: Thus the HTML program has been successfully obtained and the output is verified.
  • 30. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 29 I PG  To create a photo album, follow these steps:  Open Microsoft PowerPoint  You will need a new blank presentation displayed  Select Insert from the Ribbon and click the Photo Album button 4. The Photo Album dialog box will appear:  You will now need to import the pictures you wish to include in the photo album  Click the File/Disk button to browse your computer’s hard drive  Locate the pictures you wish to import  If the pictures are located in multiple locations, that is fine, just repeat this process for each location till all the pictures you want are imported  Now you must select the pictures to insert. Here is a time-saving tip: do not import the photos one at a time. Import multiple pictures at once by selecting them with the left mouse button while you hold down the Ctrl key on the keyboard  You will see multiple file names appear in the File name box EX.NO:09 CREATE A VIDEO USING POWERPOINT PRESENTATION
  • 31. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 30 I PG  Once you have selected the pictures from this location, click Insert  You will now see these pictures listed in the Photo Album dialog box  To import more pictures, click the File/Disk button again and repeat this process
  • 32. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 31 I PG :
  • 33. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 32 I PG So you have two options for turning your presentation into a video that's ready to view: Save/export your presentation to a video file format (.mp4 or .wmv). Save your presentation as a PowerPoint Show (.ppsx) file. (A PowerPoint Show appears full- screen in Slide Show, ready to view immediately.)
  • 34. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 33 I PG Embed a video stored on your PC  In Normal view, click the slide that you want the video to be in.  On the Insert tab, click the arrow under Video, and then click Video on My PC.  In the Insert Video box, click the video that you want, and then click Insert. Link to a video stored on your PC  To help prevent broken links, we recommend copying the video into the same folder as your presentation, and then linking to it there.  In Normal view, click the slide where you want the link to the video to be in.  On the Insert tab, click the arrow under Video, and then click Video on my PC.  In the Insert Video box, click the file that you want to link to, click the down arrow next to the Insert button, and then click Link to File. PowerPoint 2016 and newer versions support the playback of video with multiple audio tracks. They also support closed captions and subtitles that are embedded in video files. For more information, see Make your PowerPoint presentations accessible. Find out where a linked video is stored If there's already a video on a slide and you want to know where it's stored, go to File > Info. Under Optimize Media Compatibility, there will be information about all media files in the presentation—whether they are linked or embedded in the file. If there are any linked videos, PowerPoint gives you a View Links hyperlink. Click it to open a dialog box that shows the storage location of any linked files. YouTube video  If you want to insert a video on YouTube, switch to Insert or link to a video on YouTube. EX.NO:10 HOW TO EMBED A VIDEO IN POWERPOINT
  • 35. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 34 I PG Preview a video  When a video is selected on a slide, a toolbar appears below the video that has a play/pause button, a progress bar, incremental forward/backward buttons, a timer, and a volume control. Click the Play button at the left of that toolbar to preview the video. Play a video automatically or when clicked  By default, in Slide Show, the video plays as part of the click sequence. That means that when you click anywhere on the slide to advance to the next step (or when you press the Spacebar, Right arrow key, or other key that advances to the next step) the video plays. This Start option is called In Click Sequence.  But if you prefer, you can make the video start automatically as soon as it appears onscreen, or make it play when it is clicked:  Select the video frame.  On the ribbon, on the Video Tools Playback tab, open the Start list and choose the option you prefer: Option Description In Click Sequence This is the default behavior, as described above. When you click anywhere on the slide to advance to the next step, the video plays. Automatically The video starts automatically. (If there are animation steps before it, the animation steps will play first and then the video starts playing automatically. If there are no other animation steps before the video on the slide, the video begins playing immediately.) When Clicked On The video starts only when it has been clicked.  For more details about the options for playing the video in Slide Show, see Set the 'Play' options for a video.
  • 36. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 35 I PG AIM: To create a screen recording using OBS Studio. PROCEDURE: Step 1: Download and Install OBS Studio. Step 2: Open OBS Studio. The Software will automatically add a Scene after launching. If not, click On the + icon in the Scenes box at the screen’s bottom-left corner. Step 3: Now, click the Source option. EX.NO:11 OBS STUDIO
  • 37. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 36 I PG Step 4: Now select Display Capture from options menu. Step 5: A Small popup window will appear, add a title and click ok. Step 6: A New Window will appear- select the Recording path. Record using a present (same as stream, High Quality, Indistinguishable Quality, and Lossless) and a different Encoder(if available).
  • 38. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 37 I PG Step 7: A New window will appear – select from the sidebar on the left hand side. Step 8: Under recording path, choose a destination for your file. Step 9: Once you are done, click the Start recording button in the lower right corner of the screen.
  • 39. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 38 I PG Step 10:When you are done, click stop recording and a video will be written to the folder specified in the settings. Step11: Show your recording Go to file option, then click Show recording option.
  • 40. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 39 I PG AIM: To create an editing for adding image, adding text and adding link using OPEN ELEMENT PROCEDURE: Step 1: Install Open Element for Editing on your Devices. Step2 : Open the Open Element and click new project. Step3 : Give Project Name .Next select the destination folder. And then Choose Template(optional) after that click okie button. EX.NO:10 OPEN ELEMENT
  • 41. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 40 I PG Step4: ‘Project’ Tab. Step5: Then your editing page appear like this, Step6: You can start your editing by choosing your own photos, gif, videos using Element options.
  • 42. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 41 I PG Step7: Add an Image Element- Drag-and-Drop the element Image from the elements menu anywhere on the page. Step8: Dragging the element onto the page will automatically open the file library.
  • 43. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 42 I PG Step9: Open the image library from the editing pane to change the element’s image. Step10: opens the links configuration form to add a hyperlink to the image. Step11: Now you are ready to add text, hyperlink and effects in this editing using elements Properties.
  • 44. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 43 I PG Step12: Once you choose text option,then the page appears to add the text you want in your editing. You can adjust the text size and you are able to place the text whereever you like. Step13: Next step is to choose preview option to check your editing. Step14: Once you finished your editing you just click save option to save your editing.
  • 45. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 44 I PG
  • 46. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 45 I PG Aim: To create an editing for adding text and effects using Kinemaster. Procedure: 1. Install Kinemaster for video editing on your device. 2. Open Kinemaster and click new project. 3. Choose name to your project and click next to Start the editing. EX.NO:11 ADDING TEXT AND EFFECTS
  • 47. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 46 I PG 4. Then your editing page will appear like this, 5. You can start your editing by choosing your own photos or videos in your media using media option. 6. Once you click media, it directly goes to your media and asks you to choose your photos or videos that you want to edit. 7. After you select one video then it will be like, 8. Now you are ready to add text and effects in this video using Kinemaster.
  • 48. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 47 I PG 9. From the above picture, you can see four sections like media, layer, audio and recording; you can add text and effects using layer section. 10. Once you choose text option, then the page appears to add the text you want in your editing. 11. You just add the text and click ok. 12. Now you can adjust the text size and you are able to place the text wherever you like. 13. In the side you can see In Animation, overall Animation, etc. 14. By using these options you can easily add effects to your text. You can also use Effect option in the Layer section to add some more effects to your editing. 15. Next step is to choose play option to check your editing. 16. Once you finished you editing you just click save option to save your editing video. 17. Stop the editing.
  • 49. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 48 I PG Aim: To create an editing for adding sound effects using Kinemaster. Procedure: 1. Install Kinemaster for video editing on your device. 2. Open Kinemaster and click new project. 3. Choose name to your project and click next to Start the editing. 4. Then your editing page will appear like this, EX.NO:12 ADDING SOUND EFFECTS
  • 50. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 49 I PG 5. You can start your editing by choosing your own photos or videos in your media using media option. 6. Once you click media, it directly goes to your media and asks you to choose your photos or videos that you want to edit. 7. After you select one video then it will be like, 8. Now you are able to add more pictures and videos using media option. 9. Once you add more picture then your page will like,
  • 51. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 50 I PG 10. Now you can add audio effect using Audio section. 11. Once you click Audio section then this page will appear, 12. You can choose Audio in your media of your choice and then click add button to add the audio in your editing video. 13. Next step is to choose play option to check your editing. 14. Once you finished you editing you just click save option to save your editing video. 15. Stop the editing.
  • 52. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 51 I PG Aim: To create an editing for merging videos using VLC Media Player. Procedure: Step 1: Start  VLC Media Player Open file location. Step 2: Select VLC Media Player. EX.NO:13 MERGING VIDEOS USING COMMAND PROMPT
  • 53. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 52 I PG Step 3: Now copy the path for the file location and then paste it on Notepad. Step 4: Open command prompt and give the correct location of your videos that you wants to merge using VLC media player. Step 5: Again copy and paste your correct path location in the command prompt and then click enter.
  • 54. WEB DESIGNING & VIDEO EDITING LAB LAB MANUAL 53 I PG Step 6: Now, your file gets merged and finally you get your merged file videos.