Web 2

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,
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.
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.
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
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)
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.
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)
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.
10
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.

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.
12
Observations
 Use of graphics in HTML document.

 Image tag and its attributes
 Image Maps
Result
13
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.
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.
16
Practical- 4
Aim
 Create simple web pages using HTML and CSS.
Objectives
 design a web page.

 link to other web pages.
Software required
 Internet explorer / Google chrome.

 Notepad.
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.
18
19
20
Observation
 Demonstrate the use of HTML tags with proper example.
Result
21
22
Practical- 5
Aim
 Create table and use its various attributes using HTML.
Objectives
• 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

 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
23
24
Practical- 6
Aim
 Create forms in HTML and CSS.
Objectives
 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

 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
25
26
Practical - 7
Aim
 Create webpages similar to your institution website using Dreamweaver.
Objectives
• 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.
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.
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.
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.
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:
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.
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.
32
Step 3: Save your project.
Step 4: Locate the plugin icon on the page.
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.
34
35
Practical- 9
Aim
 Write a JavaScript program.
Objectives
 Design a web page.

 Loop in java script.
Software required

 Notepad
Pre-requisite
 Loop in java script.
Procedure
1. Open the notepad editor.

2. Use<script>for java script.
36
Observation
 Use conditional and loop statements.
Result
37
Practical-10
Aim
 Create a dynamic web page using JavaScript.
Objectives
• Design a web page.
Software required

 Notepad.
Pre-requisite
 Dynamic web page.
Procedure

 Use <script> tag for java script.
38
Observation
 Use JavaScript statements in a webpage.
Result

Web 2

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web 2

Uploaded by

Copyright:

Available Formats

1

NIOS CLASS 12TH Web Designing and Development (622)

Written by Manish Verma

This is an official YouTube channel of Manish Verma ( Students support service )

➛We provide all nios latest updates

Subscribe our youtube channel : Manish Verma : Official

☏ +91 8368259468, 9599279672, 8882104776

©THE COPYRIGHT ACT 1957.

All rights reserved. No part of this publication may be reproduced,

This is to certify that ………………………, a student of class 12th has successfully

I Would like to convey my heartfelt thanks to……………..., who always gave

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 6 – Create forms in HTML and CSS

Practical 7 – Create webpages similar to your institution website using Dreamweaver.

Practical 9 – Write a JavaScript program.

Practical 10 - Create a dynamic web page using JavaScript.

 Create, save and view a HTML document.

Formatting a web page using:

 Section heading tags

 Theoretical knowledge of various elements and tags to create a website.

 Open sublime text.

Step 1 - Creating our first HTML page.

Step 2: Creating Two More Web Pages.

Step 3 - Linking Multiple Website Pages Together In HTML.

Step 4 - Running Our Multi-Page Website

 Formatting a web page using:

This will open your multi-page website in the browser.

 Theoretical knowledge of images and image maps.

part of the body. Save them with different names.

 Use of graphics in HTML document.

 Apply CSS to a HTML document.

After completion of this practical you will be able to

 Knowledge of multimedia, various components of multimedia.

 Create simple web pages using HTML and CSS.

After completion of this practical you will be able to

 design a web page.

 Internet explorer / Google chrome.

 Theoretical knowledge of Computer and HTML.

 Open the notepad editor.

 Demonstrate the use of HTML tags with proper example.

 Create table and use its various attributes using HTML.

After completion of this practical you will be able to

 Theoretical knowledge of HTML documents forms.

 Open the notepad editor.

 Create forms in HTML and CSS.

After completion of this practical you will be able to

 create a table in the HTML

 Theoretical knowledge of HTML documents, forms.

 Open the notepad editor.

 Create table using HTML tags.

 Create webpages similar to your institution website using Dreamweaver.

After completion of this practical you will be able to

• insert images / pictures on a webpage using Dreamweaver.

 Knowledge of various components of Adobe Dreamweaver Interface Window.

The Dreamweaver Workspace

Your Home Page

Text and Headings

Publishing Your Page

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.

Step 1: Insert media plugin.