1
NIOS CLASS 12TH Web Designing and Development (622)
Written by Manish Verma
Vocational Subject Solved Practical
Where every problem is solved of nios.
National Institute of Open Schooling (NIOS) was established in November,1989. World largest open schooling
system. https://www.nios.ac.in/
This is an official YouTube channel of Manish Verma ( Students support service )
Our aim is to reach the unreached. I'm an educator of nios students and trying to guide through my youtube
channel more than 8 years ago.
This channel helps you to Dream, Achieve & Succeed.
Joined us by millions of students. We would like to appreciate nios board to provide an opportunities to get pass
class 10th and 12th.
➛We provide all nios latest updates
➛We provide an educational services only.
➛Nios Admission
➛Public Examination
➛On Demand Examination
➛Nios Online Classes
➛Nios Practical
➛Nios TMA
➛Nios Study Materials
➛Nios Exam Updates
Subscribe our youtube channel : Manish Verma : Official
☏ +91 8368259468, 9599279672, 8882104776
✉ Gmail – manishvermaofficial42@gmail.com
Ⓒ Manish Verma
©THE COPYRIGHT ACT 1957.
All rights reserved. No part of this publication may be reproduced,
distributed, or transmitted in any form or by any means, including
Photocopying, recording, or other electronic or mechanical methods,
without the prior written permission of the publisher, except in the case of brief quotations embodied in critical reviews and certain other
noncommercial uses permitted by copyright law.
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
2
CERTIFICATE
This is to certify that ………………………, a student of class 12th has successfully
completed the research on the below practical under the guidance of
………………………… (Tteacher name ) during the year ..................in partial
fulfillment of Web Designing and Development Vocational practical exam
conducted by NIOS , new Delhi,
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
3
ACKNOWLEDGEMENT
I Would like to convey my heartfelt thanks to……………..., who always gave
valuable suggestion and guidance for completion of my practical. she/he
helped me and to understand and remember important details of the project.
She/he helped me and gave her/his guidance in completing of my practical
successfully.
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
4
Index
Practical 1 - Create, save and view a HTML document.
Practical 2 - Design a web page using hypertext links, image links.
Practical 3 - Apply CSS to a HTML document
Practical 4 - Create simple web pages using HTML and CSS
Practical 5 – Create table and use its various attributes using HTML
Practical 6 – Create forms in HTML and CSS
Practical 7 – Create webpages similar to your institution website using Dreamweaver.
Practical 8 – Design web pages and insert audio and video objects in that.
Practical 9 – Write a JavaScript program.
Practical 10 - Create a dynamic web page using JavaScript.
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
5
Practical- 1
AIM
Create, save and view a HTML document.
Objectives
Formatting a web page using:
Section heading tags
Paragraph formatting tags
Character formatting tags.
Software required
Notepad.
Internet Explorer / Google Chrome/ Mozilla Firefox or any other browser software.
Pre-requisite
Theoretical knowledge of various elements and tags to create a website.
Knowledge of home page, web browser and notepad.
Knowledge of <a> element to form hyperlinks so as to link the web pages.
Knowledge of <img> tag to insert pictures / images.
Procedure
Open sublime text.
Type the code for home page. Save it as home.html.
Follow the steps 1 & 2 to create other three webpages. You may save them as
effects.html, gallery.html and census.html.
Procedure
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
6
Step 1 - Creating our first HTML page.
Open a code editor like Visual Studio Code, Sublime Text or Notepad++. If you don't have
any of the text editors, open a notepad.
Then create a basic HTML structure like the one below (I will provide the source code at the
end of the blog)
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
7
Save this notepad file in your preferred folder location and save it as index.html Now, we
will change the title and create a header for this web page.
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
8
Step 2: Creating Two More Web Pages.
Similar to how we created the home page, we will create two more web pages. The contact
page and the about page. Our folder now looks like this.
Step 3 - Linking Multiple Website Pages Together In HTML.
It's now time to link the multiple pages that we have created on our website.
We will create a navigation menu that will link all of the pages together.
We will first change the code in our index.html page to the below: And we will copy
this nav element to the other pages as well (about.html and contact.html)
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
9
Step 4 - Running Our Multi-Page Website
Now, go back to your folder where you have saved all your files.
Right click on the index.html file and open this file with the preferred browser.
Observations
Formatting a web page using:
Section heading tags.
Paragraph formatting tags.
Character formatting tags.
Result
This will open your multi-page website in the browser.
Use the navigation on the top to navigate between pages. This is how you can make multi-
page websites easily.
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
10
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
11
Practical- 2
Aim
Design a web page using hypertext links, image links.
Objective
After completion of this practical you will be able to insert image maps on a web page.
Software required
Notepad.
Internet Explorer / Google Chrome/ Mozilla Firefox or any other browser software.
Pre-requisite
Theoretical knowledge of images and image maps.
Knowledge of home page, web browser and notepad.
Procedure
1. Open Notepad.
2. Insert a picture of human body. Type the code for home page.
3. Save it as home.html.
4. Follow the steps 1, 2 and 3 to create other webpages giving information on each
part of the body. Save them with different names.
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
12
Observations
Use of graphics in HTML document.
Image tag and its attributes
Image Maps
Result
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
13
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
14
Practical- 3
Aim
Apply CSS to a HTML document.
Use Cascading style sheets (CSS) to add background colour and font. Also add the
navigation bar on the web page.
Objectives
After completion of this practical you will be able to
use Cascading Style Sheets (CSS) to insert various style effects on a web page.
add a navigation bar on the web page.
learn about multimedia tools, their features and usage.
Software required
Notepad.
Internet Explorer / Google Chrome/ Mozilla Firefox or any other browser Software.
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
15
Pre-requisite
Knowledge of multimedia, various components of multimedia.
Theoretical knowledge of CSS and <style> element.
Prior knowledge of navigation bar and its use.
Procedure
Open Notepad.
Type the HTML code with <style> element in the <head> area of the HTML code.
Save the file with any name.
Observation
Formatting a web page using: - Section heading tags. - Paragraph formatting tags. -
Character formatting tags.
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
16
Practical- 4
Aim
Create simple web pages using HTML and CSS.
Objectives
After completion of this practical you will be able to
design a web page.
link to other web pages.
Software required
Internet explorer / Google chrome.
Notepad.
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
17
Pre-requisite
Theoretical knowledge of Computer and HTML.
Procedure
Open the notepad editor.
Use <div> tag for inserting an image like keyboard.
Save the file with any name.
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
18
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
19
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
20
Observation
Demonstrate the use of HTML tags with proper example.
Result
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
21
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
22
Practical- 5
Aim
Create table and use its various attributes using HTML.
Objectives
After completion of this practical you will be able to
• create forms.
• submit the form.
• use JavaScript for displaying confirmation message.
Software required
Notepad.
Google Chrome / Internet Explorer / FireFox
Pre-requisite
Theoretical knowledge of HTML documents forms.
Procedure
Open the notepad editor.
Type the HTML code for creating a form using <FORM></FORM>.
Use input tag, text box, combo box and radio button for entering the values in the
registration form.
Save this file using .html or .htm extension
Open the file in Google Chrome / Internet Explorer / Fire
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
23
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
24
Practical- 6
Aim
Create forms in HTML and CSS.
Objectives
After completion of this practical you will be able to
create a table in the HTML
merge rows / columns in the table
Software required
Notepad.
Google Chrome / Internet Explorer / FireFox.
Pre-requisite
Theoretical knowledge of HTML documents, forms.
Procedure
Open the notepad editor.
Type the HTML code for creating a table using <Table></Table>.
Create table heading row and type Class XI –B Mark sheet.
Create 5 rows in the table and type the column headings and value for each column.
Save this file using .html or .htm extension.
Open the file in Google Chrome / Internet Explorer / FireFox.
Observation
Create table using HTML tags.
Explain the need of forms.
Result
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
25
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
26
Practical - 7
Aim
Create webpages similar to your institution website using Dreamweaver.
Objectives
After completion of this practical you will be able to
• insert images / pictures on a webpage using Dreamweaver.
• create a website by linking multiple pages using Dreamweaver.
Software required
Adobe Dreamweaver.
Internet Explorer / Google Chrome / Mozilla Firefox or any other browser software.
Pre-requisite
Knowledge of various components of Adobe Dreamweaver Interface Window.
Theoretical knowledge of various menu elements and Property Inspector.
Knowledge of home page, web browser and notepad.
Procedure
Running Dreamweaver
The SSCC has made Dreamweaver available to all SSCC users on Winstat. Please see Using
Winstat for instructions on logging in. When running Winstat you are essentially using a
different computer. You may need to redo drive mappings and other customizations you are
used to on your own PC.
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
27
The Dreamweaver Workspace
Dreamweaver has a tendency to make too much available at once (one suspects they
wanted to impress people who are evaluating the program with how much it can do).
Fortunately, you can close the panels you don't need.
Your Home Page
At long last, let's make a web page. Click File, New. Then choose the Basic page category and
HTML, then click Create.
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
28
Page Title
The first thing we'll do is set a title for the page. This is what will show up in the title bar of
the user's browser while they're looking at the page. Leaving the page title set to "Untitled
Document" makes the reader think "newbie web author."
Click on it, and you'll get a new window with a variety of settings. Select the Title/Encoding
category. In the Title box, type a title for the page--something like "<Your Name>'s Home
Page." Ignore the other settings for now and click OK.
Text and Headings
Let's start with just some text. Type in <Your Name>'s Home Page. As you see the text
appears on the page just as if you were working in Word. You may be tempted at this point
to change the appearance of these words--to make them bigger or something. But before
you reach for the Size menu on the Properties panel, ask yourself why you think these
words ought to be bigger.
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
29
Recall that the HTML "tag" for a level one heading is <h1>. If you look in the lower left
corner of the document window, you'll see <body><h1> in the border of the window (if you
don't see the <h1> make sure the cursor is somewhere in the heading of the page).
Move the cursor to a new line and either press CRTL-ALT-i or click Insert, Image. Then select
uwlogo.gif. You'll immediately be asked to set the Alternate text. Type in University of
Wisconsin-Madison and click OK.
Links
There are many ways to turn text into a link, but they all start by selecting the text. Then you
can:
Type the name of the web page you want to link to in the Link box of the Properties
panel
Drag the small circle to the right of the Link box to the file in the File panel you want to
link to
Click Modify, Make Link or press CTRL-l, then select the file you want to link to
Publishing Your Page
When we defined your web site we gave Dreamweaver two locations: one on the web
server, and one in your Windows home directory. When you click File, Save, you will be
saving the document in your home directory. Before others can see it, you need to publish it
to the server. To do that, you can:
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
30
Press CTRL-SHIFT-U
Click Site, Put on the menu bar at the top
Right-click on the file in the Files panel and choose Put
Observations
Precaution
1. Give proper path of the file to be linked while forming hyperlinks.
2. The image to be inserted should be in .jpeg / .png /.bmp format.
3. Give proper path of the image file while using the Error! Filename not specified.tag.
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
31
Practical - 8
Aim
Design web pages and insert audio and video objects in that.
Objectives
It’s somehow not that simple to add sound to web pages. There isn’t a flashing button to add
background music to your current Dreamweaver Web page. You didn’t go through a lot of
trouble as well as there are no complex codes to study and use.
Here is how to add audio with a controller which allows music to play automatically when the
page is opened.
Procedure
Step 1: Insert media plugin.
Step 2: Locate the audio file.
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
32
Step 3: Save your project.
Step 4: Locate the plugin icon on the page.
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
33
Step 5: Click the icon and set the attributes.
Step 6: Add parameters.
Step 7: View Source (Code of Web page).
Observation
You can watch a video too.
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
34
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
35
Practical- 9
Aim
Write a JavaScript program.
Objectives
After completion of this practical you will be able to
Design a web page.
Loop in java script.
Software required
Internet explorer / Google chrome.
Notepad
Pre-requisite
Loop in java script.
Procedure
1. Open the notepad editor.
2. Use<script>for java script.
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
36
Observation
Use conditional and loop statements.
Result
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
37
Practical-10
Aim
Create a dynamic web page using JavaScript.
Objectives
After completion of this practical you will be able to
• Design a web page.
Software required
Internet explorer / Google chrome.
Notepad.
Pre-requisite
Dynamic web page.
Procedure
Open the notepad editor.
Use <script> tag for java script.
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
38
Observation
Use JavaScript statements in a webpage.
Result
All Rights Reserved © Manish Verma, For More Visit – https://manishvermaofficial.com/ 8368259468
