The document provides code for creating various web elements using HTML tags. It includes code samples for creating definition lists, ordered and unordered lists, tables, images, hyperlinks, forms, and more. Instructions are provided for each code sample explaining how to create each element step-by-step using the appropriate HTML tags. The document serves as a manual for learning basic HTML tags and how to use them to design web pages and forms.
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
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
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
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
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
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
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
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.
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.