SlideShare une entreprise Scribd logo
1  sur  54
Télécharger pour lire hors ligne
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.

Contenu connexe

Similaire à Computer skills for web designing and video editing_Lab Manual.pdf

Caracteristicas Basicas De Htlm
Caracteristicas Basicas De HtlmCaracteristicas Basicas De Htlm
Caracteristicas Basicas De Htlm
Maria S Rivera
 
presentation_html_ppt_1534512076_351187.pptx
presentation_html_ppt_1534512076_351187.pptxpresentation_html_ppt_1534512076_351187.pptx
presentation_html_ppt_1534512076_351187.pptx
ssuser8001a61
 
Hypertext markup language(html)
Hypertext markup language(html)Hypertext markup language(html)
Hypertext markup language(html)
Jayson Cortez
 

Similaire à Computer skills for web designing and video editing_Lab Manual.pdf (20)

Intodcution to Html
Intodcution to HtmlIntodcution to Html
Intodcution to Html
 
Deepshikha html
Deepshikha htmlDeepshikha html
Deepshikha html
 
HTML [Basic] --by Abdulla-al Baset
HTML [Basic] --by Abdulla-al BasetHTML [Basic] --by Abdulla-al Baset
HTML [Basic] --by Abdulla-al Baset
 
Html Study Guide - Heritage
Html Study Guide - HeritageHtml Study Guide - Heritage
Html Study Guide - Heritage
 
Caracteristicas Basicas De Htlm
Caracteristicas Basicas De HtlmCaracteristicas Basicas De Htlm
Caracteristicas Basicas De Htlm
 
presentation_html_ppt_1.pptx
presentation_html_ppt_1.pptxpresentation_html_ppt_1.pptx
presentation_html_ppt_1.pptx
 
Html
HtmlHtml
Html
 
HTML Presentation
HTML Presentation HTML Presentation
HTML Presentation
 
presentation_html_ppt_1534512076_351187.pptx
presentation_html_ppt_1534512076_351187.pptxpresentation_html_ppt_1534512076_351187.pptx
presentation_html_ppt_1534512076_351187.pptx
 
HTML 4.0
HTML 4.0HTML 4.0
HTML 4.0
 
Wp unit 1 (1)
Wp  unit 1 (1)Wp  unit 1 (1)
Wp unit 1 (1)
 
Html
HtmlHtml
Html
 
DIWE - Coding HTML for Basic Web Designing
DIWE - Coding HTML for Basic Web DesigningDIWE - Coding HTML for Basic Web Designing
DIWE - Coding HTML for Basic Web Designing
 
Tags
TagsTags
Tags
 
Body Section in HTML - R.D.Sivakumar
Body Section in HTML - R.D.SivakumarBody Section in HTML - R.D.Sivakumar
Body Section in HTML - R.D.Sivakumar
 
Hypertext markup language(html)
Hypertext markup language(html)Hypertext markup language(html)
Hypertext markup language(html)
 
Standard html tags
Standard html tagsStandard html tags
Standard html tags
 
Html
HtmlHtml
Html
 
Unit 2.12
Unit 2.12Unit 2.12
Unit 2.12
 
HTML
HTMLHTML
HTML
 

Plus de Bobby Murugesan (6)

Python Lab Manual
Python Lab ManualPython Lab Manual
Python Lab Manual
 
Sequence Types in Python Programming
Sequence Types in Python ProgrammingSequence Types in Python Programming
Sequence Types in Python Programming
 
Python The basics
Python   The basicsPython   The basics
Python The basics
 
Impressive Google Apps
Impressive Google AppsImpressive Google Apps
Impressive Google Apps
 
How to register in Swayam
How to register in SwayamHow to register in Swayam
How to register in Swayam
 
Green computing introduction
Green computing introductionGreen computing introduction
Green computing introduction
 

Dernier

Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
fonyou31
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
heathfieldcps1
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
SoniaTolstoy
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 

Dernier (20)

Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3
 
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Advance Mobile Application Development class 07
Advance Mobile Application Development class 07Advance Mobile Application Development class 07
Advance Mobile Application Development class 07
 
social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajansocial pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajan
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpin
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room service
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
General AI for Medical Educators April 2024
General AI for Medical Educators April 2024General AI for Medical Educators April 2024
General AI for Medical Educators April 2024
 

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.