Scribd
Upload
98 views41 pages

Web-Desgning & Development-622

The document outlines a series of practical exercises focused on web development using HTML, CSS, and JavaScript. Each practical aims to teach specific skills such as creating and viewing HTML documents, designing web pages with links and multimedia, and applying CSS for styling. The document includes procedures, objectives, and software requirements for each practical task.

Uploaded by

sheldon.d'souza-i
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
98 views41 pages

Web-Desgning & Development-622

The document outlines a series of practical exercises focused on web development using HTML, CSS, and JavaScript. Each practical aims to teach specific skills such as creating and viewing HTML documents, designing web pages with links and multimedia, and applying CSS for styling. The document includes procedures, objectives, and software requirements for each practical task.

Uploaded by

sheldon.d'souza-i
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 41

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.

Simba Nios Academy


8979-31-4668
Practical- 1

AIM

e (Create, save and view a HTML document.

Objectives

Formatting a web page using:

» Section heading tags


® Paragraph formatting tags

e Character formatting tags.

Software required

¢ Notepad.

e 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.
eo Knowledge of <a> element to form hyperlinks so as to link the web pages.

¢ Knowledge of <img> tag to insert pictures / images.


Procedure

eo (Open sublime text.


e Type the code for home page. Save it as home.html.
oe Follow the steps 1 & 2 to create other three webpages. You may save them as

effects.html, gallery.html and census.html.

Procedure
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.

<!DOCTYPE html>
<html>
<head>
<title
</head>
<body>
<h1>This is home page</hl>
<a href="ill effects of pollution.html”> effects </a>

"gallery.html”>gallery<,

aph.html">census </

[8 5 WH J 5 J

(=}]

pv

Then create a basic HTML structure like the one below (I will provide the source
code at the

end of the blog)

<IDOCTYPE html
<html
<head
<titlex</title:
head;
<body>

p><b>What are the health consequences of air pollution on populations?</b:


Exposure to high levels of air pollution can cause a variety of adverse health
outcomes. It increases the risk of respiratory infections, heart disease and
lung cancer. More severe impacts affect people who are already 111.</p:

pr<b>Effects of Soil Pollution</b>


Pollutants in soil, most often from industrial sources, deforestation and improper
waste disposal, put animals and plants in danger. Soil polluted by

chemicals eventually becomes infertile and unable to support crops and other plant
life. This hinders food production and can lead to malnourishment in local

ol!
h1>I11 effects of pollution</hi |

communities. </p:
<p><b>Effects of Water Pollution</b
Pollutants in water resulting from trash, oil spills, sewage spills and run-off
from agricultural fields, construction sites and factories affect native
plant and animal species. Drinking contaminated water caused by sewage overflow may
cause sickness and digestive problems in humans. Pollutants such as
mercury in fish and seafood can lead to serious health problems</p
galery ptm!

vo Ee i DOCTYPE html
<html>

head:
titles</title

Thead>

<body:
><> <font size="10">A picture gallery showing pollution and its effects in various
parts af the country. c/font
<h2x<by<font size="6"3Soil pollutionc/font></br</h2

ing src="CBABIAEN GASP_Fig 4.05 height="20 width="200px


Mater pollutior ©. h2>
ol1ution 66615937 2408. jpg” height="208px" width="200px"
ha:

67> Alr pollution/fant></b


air-pollution-industry.ipg” height= * width="200p{

Save this notepad file in your preferred folder location and save it as index.html
Now, we

vo Hie 1 DOCTYPE tml»


<haad:
titleye/title!
</head>

<hi>ehs<font size="18">Census figures with graphs that show the rise in pollution
levels</font>
ing src stion graph. jal” height="380px" wide =

<body

will change the title and create a header for this web page.
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.

MB home.htmi

<!1DOCTYPE

BW Ne

iow

is home page</!

"ill effects of pollution.html™>


gallery.html™”>gallery</a>
graph.html”>census </a>

Step 3 - Linking Multiple Website Pages Together In HTML.

e [t's now time to link the multiple pages that we have created on our website.
eo We will create a navigation menu that will link all of the pages together.
e 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)

{CiUsersiuser' Documents Men” * +

DO Alesy/C:iUsersfuser/Dacuments/New folder/hemeihtm

This is home page


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:


e Section heading tags.

e 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.

Ci Users user Documents Mew

This is home page

effects gallery census


« > C D file///C:/Usersuser/Documents/New folder/gallery html Pes

A picture gallery showing pollution and its effects in various parts of the
country.

Soil pollution

SSS

‘Water pollution

Air pollution

/C:/Users/user/Documents/New:. X +

« => C DO filey///C:/Users/user/Documents/New folder/graph.htmi

Census figures with graphs that show the rise in pollution levels

FOS Ch a ap)

Ei

mom o®w om om om Pom

mn Mave po ruin frend + Cow ce EPL (4)


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.

2
3.
4

Open Notepad.
Insert a picture of human body. Type the code for home page.

Save it as home.html.

Follow the steps 1, 2 and 3 to create other webpages giving information on each

part of the body. Save them with different names.


E] linkimage - Notepad

File Edit View

kipocTyPE html>
<html>

<body style="text-align: center;">


<h3>
click on Nios logo to
Redirect into nios.ac.in
</h3>
<a href="https://www.nios.ac.in/">
<img src=
"https: //www.manishvermanotes.com/wp-content/uploads/2022/09/Screenshot-1761-
1624x576.png"
alt="click to visit nios.ac.in">
</a>
</body>

</html>

Observations

e Use of graphics in HTML document.


e [mage tag and its attributes

* [mage Maps

Result

Click on Nios loge to Redirect inte nios.ac.in


0 Jee EE J I iE ae TU I EEE

Cow BAe ba BaNTmaNt ebro AA mba AL) tw fred

LEE

| sr ston sem tem re


| VRS ER fad weed

wo
nom ®

ar
C mp6 ana ed Ee
© (© WhatsApp x KO) Home: The National Instite. X | fy Online Admission-NIOS ~~ X |
€) Telegram Web.
€ => C a niosacin

x | © CBSEClassXith - 2021Ma X | % Download fle |ilovePDF x | + v = oo x

2x »00 :

AN Gescure Sur Comer Soesn Reager ccess| Sota manconient | Ted Sze (A- (A Av, |
Convastscrere (A) [| [Engen] [frft] -

ST Her Ferret Tove Sem [Ys |

A ; . Ta= ewe
National Institute of Open Schooling A:=dC rr a
(An autonomous institution under Ministry of Education, Govt. of India)

S Fr - SH — =
Town wht po = a the World) 1x00 ® CERTIIED r

Happy Teacher’s Day

( good teacher is lifie a candle - it consumes itself to light

https Aww nios.acin/e -


[® imgpngpng a = screenshot (1762)png A BE tinkimage (1).txt ~ © linkimage (1) html
a E practical? 2)ox ~ € Practical? (1)heml ~ Showall | X

1 - ENG 1649
e Houpeéne=@aE ne Bean 50

Simba Nios Academy


8979-31-4668
Practical- 3

Aim
eo Apply CSS to a HTML document.
e 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

e use Cascading Style Sheets (CSS) to insert various style effects on a web page.
e add a navigation bar on the web page.

e learn about multimedia tools, their features and usage.

BY ii effects of potiutionntml x
DOCTYPE

background:

111 effects of pollution:


What are the health consequences of air pollution on populations?

Exposure to high levels of air pollution can cause a variety of adverse health
outcomes. It increases the risk of respiratory infections, heart disease and
lung cancer. More severe impacts affect people who are already 111.<

<b>Effects of Water Pollution:

7 Pollutants in water resulting from trash, oil spills, sewage spills and run-off
from agricultural fields, construction sites and factories affect native

plant and animal species. Drinking contaminated water caused by sewage overflow may
cause sickness and digestive problems in humans. Pollutants such as
mercury in fish and seafood can lead to serious health problems

Software required

¢ Notepad.

e Internet Explorer / Google Chrome/ Mozilla Firefox or any other browser Software.
Pre-requisite

* Knowledge of multimedia, various components of multimedia.


® Theoretical knowledge of CSS and <style> element.

® Prior knowledge of navigation bar and its use.

[3 ile Usersfuser/Documents/New folderfl fects of palution html EEX;

Ill effects of pollution

What are the health consequences of ar pollution on populations? Exposure to high


levels of air pollution can cause a varity of adverse health outcomes. It increases
the isk of respiratory infections, heart disease and lung
cancer. More severe impacts affect people who are already ill

Effects of Water Pollution Pollutants in water resulting from trash, ol spills,


sewage spils and run-off from agricultural feds, construction sites and factories
affect native plant and animal species. Drinking contaminated water caused
by sewage overflow may cause sickness and digestive problems in humans. Pollutants
such as mercury in fish and seafood can lead to serious health problems

Procedure

e Open Notepad.
e Type the HTML code with <style> element in the <head> area of the HTML code.

e Save the file with any name.

Observation

Formatting a web page using: - Section heading tags. - Paragraph formatting tags. -

Character formatting tags.


Practical- 4

Aim

e (Create simple web pages using HTML and CSS.

DOCTYPE

type=

height:
width:

.translate{
background-color:

J
.translate:hover{
transform:
ly

-rotate{
background-color:
E;

.rotate:hover{
transform:
transition: 5;

3}

.skew{
background-color:

. skew: hover{
transform:
transition:

class="translate”
class="rotate"
class=" :

Objectives

After completion of this practical you will be able to

e design a web page.

e link to other web pages.

Software required

e Internet explorer / Google chrome.

e Notepad.
Pre-requisite

e Theoretical knowledge of Computer and HTML.

Procedure

e Open the notepad editor.


e Use <div> tag for inserting an image like keyboard.

e Save the file with any name.

<!DOCTYPE html>
<html>

<head>
<title>Web Designing & Development</title>

<style>
= 4

margin: ©;
padding: ©;
¥

.navbar {
display: flex;
align-items: center;
justify-content: center;
position: sticky;
top: ©;
cursor: pointer;

.background {
background: black;
background-blend-mode: darken;
background-size: cover;

-nav-list
width: 70%;
display: flex;
align-items: center;

.logo {
display: flex;

| Jjustify-content: center;
align-items: center;
align-items: center;

.logo img {
width: 180@px;
border-radius: 50px;

.nav-list 1i {
list-style: none;
padding: 26px 3@px;

.nav-list 1i a {
text-decoration: none;
color: white;

.nav-list 1i a:hover {
color: grey;

.rightnav {
width: 30%;
text-align: right;

#search {
padding: 5px;
font-size: 17px;
border: 2px solid grey;
border-radius: 9px;

.firstsection {
background-color: green;
height: 488px;

.secondsectien {
background-color: blue;
height: seepx;

-box-main {
display: flex;
justify-content: center;
align-items: center;
color: black;
max-width: E8%;
margin: aute;
height: gex;

firsthalf {
width: 1ee%;
display: flex;
flex-direction: column;
justify-centent: center;

.secondhalf {
width: 38%;
¥

.secendhalf img {
width: 7ek;
border: 4px solid white;
border-radius: 158px;
display: block;
margin: auto;

text-big {
font-family: "Piazzolla’, serif;
font-weight: bold;
font-size: 35px;

Ltext-small {
font-size: 13px;
}
3

btn {
padding: Spx 2epx;
margin: 7px 2;
border: 2px solid white;

border-radius: 8px;
background: none;
caler: white;
cursor: pointer;

.btn-sm {
padding: epx 12px;
vertical-align: middle;

«section {
height: 4eepx;
display: flex;
align-items: center;
justify-content: center;
max-width: ge¥;
margin: auto;

.section-Left {
flex-direction: row-reverse;
:

paras {
padding: epx E5px;

thumbnail img {
width: 258px;
border: 2px solid black;
barder-radius: 26px;
margin-top: 19px;

center {
text-align: center;

.text-footer {
text-align: center;
padding: 3epx @;
font-family: ‘Ubuntu’, sans-serif;
display: flex;
justify-content: center;
color: white;

}
</style>
</head>

<body>
<nav class="navbar background">

<ul class="nav-list">

«div class="logo">
<img src= "C:\users\user\OneDrive\Desktop\HTML\nios.png">

</div>
<li><a href="https://ww.nios.ac.in/">Nios</a></1i>
<li><a href="https://www.nios.ac.in/online-course-material.aspx”>Course
Materials</a></1i>
<li><a href="https://sdmis.nios.ac.in/">Nios Admission</a></1i>

</ul>

<div class="rightnav">
<input type="text" name="search” id="search">
<button class="btn btn-sm">Search</button>
</div>
</nav>

«section class="firstsection™>
<div class="box-main™>
«div class="firstHalf">
<hl class="text-big" id="web">About Nios</h1>
<p class="text-small">
The main objectives of NIOS are: To provide professional
advice to the Government of India, and to the States, regarding
proper development of Open and Distance Learning System at
school level in response to requests from the concerned
Government/s or suo moto.
</p>

</div>
</div>
«/section>
¢<section class="secondsection”>
<div class="box-main">
<div class="firstHalf"»
<h1l class="text-big" id="program">Eligibility of nios asdmission</hi>

<p tlass="text-small">
KIOS and CBSE are equal accerding to
the syllabus and eligibility. KICS
and CBSE both have their own advantage
and disadvantage. It is one of the three
central beards- ICSE, CBSE, WIOS.

</p>
<fdivy
</div>
«<fsection»

«section class="section™>
«div class="paras">
<h1l class="sectionTag text-big"»>Registration Process</hix

<p class="sectionSubTag text-small™»


A learner whe has passed class WIII and has
valid preof of attaining 14 years of age
can apply for registration te the Secondary
course. The learner whe gives a self certificate
stating that "I have studied and able te pursue
the secondary course™ is also eligible for
admission to the secendary Course.

<p»

</div>

<div class="thumbnail™»
<img src= "C:h\Usershuser\OneDrive‘\Desktop'HTMLYimg.png" alt="laptop image»
</fdive
<fsection>
«footer class="background™>
<p class="text-footer"»

Copyright ®-all rights are reserved


</p>

</ footer»
</body>

</html>

Observation

e¢ Demonstrate the use of HTML tags with proper example.

Result
Registration Process

Aleamer who has passed class VIII and has valid proof of attaining 14 years of age
can apply for registration to the Secondary Course. The learner wha gives a self
certificate stating that "I have studied and able to pursue the secondary course”
is also eligible for admission to the Secondary Course.
Practical- 5
Aim
¢ Create table and use its various attributes using HTML.

Objectives

After completion of this practical you will be able to

e create forms.
¢ submit the form.

e use JavaScript for displaying confirmation message.

Software required

eo Notepad.

® Google Chrome / Internet Explorer / FireFox

Pre-requisite

e Theoretical knowledge of HTML documents forms.

Procedure

eo Open the notepad editor.


e Type the HTML code for creating a form using <FORM></FORM>.

e 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

e Open the file in Google Chrome / Internet Explorer / Fire


[El c\Usersiusen Documents\human bady\form htm! (human body) - Sublime Text
(UNREGISTERED)
Fie Edit Selection Find View Goto Tools Project Preferences Help

FOLDERS
¥ @ human body
1 @ computer keybe|
[6 fombom
© home.html
2 human bodyjpg
Ao
rey x rcs x | son x | + - a x
« => OC DO filey//C:/Users/user/Documents/human body/form. him @ =

Registration form
Student Name
[CErr— rrr
Age

Gender

Male O Femal O Trangender O


Date of birth
dd ml yyy |

Class

Address

Conlact no.
Email Id.

EN

[ER
Practical- 6
Aim
e (Create formsin HTML and CSS.

Objectives

After completion of this practical you will be able to

e create a table in the HTML

e¢ merge rows / columns in the table

Software required

eo Notepad.

e Google Chrome / Internet Explorer / FireFox.

Pre-requisite

e Theoretical knowledge of HTML documents, forms.

Procedure

e Open the notepad editor.

e Type the HTML code for creating a table using <Table></Table>.

e Create table heading row and type Class XI —B Mark sheet.

e Create 5 rows in the table and type the column headings and value for each
column.
e Save this file using .html or .htm extension.

e Open the file in Google Chrome / Internet Explorer / FireFox.

Observation

es (Create table using HTML tags.

® Explain the need of forms.

Result
DOCTYPE hemi

title

y
<table border:
t

:
th colspan= Class XI B [rar Sheet</th
tr
<tr
Name th:
>English</th
Mathematics th
Physics</th
-chemistry</th>
Computer Science</th
Total</th

Aaryan
90-

Shivansh</td

Sublime Text (UMNRE

table.ntmi
Practical - 7

Aim

e Create webpages similar to your institution website using Dreamweaver.

Objectives

After completion of this practical you will be able to

* insertimages / pictures on a webpage using Dreamweaver.

* create a website by linking multiple pages using Dreamweaver.

Software required

e Adobe Dreamweaver.

e Internet Explorer / Google Chrome / Mozilla Firefox or any other browser


software.

Pre-requisite

e Knowledge of various components of Adobe Dreamweaver Interface Window.


e Theoretical knowledge of various menu elements and Property [nspector.

eo 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.


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.

@ Macromedia Dreamweaver 8 - [X:\sscc staffweblsscc\pubsidevi5-17. htm*] N=1E


File Edt YWiew Insert Modfy Text Commands Gite Window Help
[Eassccwen w] [Localvien v]
nese ra?
= 3 Ste - SCC Web (kifssoc staf &
+ I grad
= @ htdig
= 3 Images
= Library
« 3 spssdocs
= 55CC
4 ED abou
+ [=] SCCOUMNtE
+ [s] consukng
El =] conlistect
ms ; - + 1D dev
Web pages no longer need any introduction: it's 2B aio
importance can be found somewhere on the web 4 BD ofvastrodure
creating a web site using Dreamweaver. + © policies
| oe
3D, 100% v 546 x 356 260K 78 sec = se
pr m— - “@ 4-l4.htm
@ 4-19.htm
id 4-ZL.htr
@ S-17.hten
So me @ JH @ S-3Lhim "
Map W Space Target Border EF d @ ntro rocks
|x OO Hepa Low Sec © ign [efaur Date: 9/22/2006 2:14PM Lag... |

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.

General | Templates |

Category: Basic page: Preview:


Basic page
Dynamic page | a HTMLtemplate
Template page @ Library tem
Other XSLT (Entre page)
255 Style Sheets @ XSLT (Fragment)
Framesets @ ActionScript <Na preview»
Page Designs (C55) @ C55
Starter Pages @ JavaScript
Page Designs @ AML
Description:
HTML document
Document Type (DTD)
[HTML 1.0 Transitional ~|
Help Preferences... Get more content... Cancel
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.

Page Properties x

Category Title/Encading

Appearance
pin Title: | Russell Dimond's Home Page

Headings
TilefEncodng | Document Type (DTDY: |*HTML 1.0 Transitional |

Tracing Image
Encoding: Western European | Reload

Docurnent Folder:

Site Folder: L:iWeb Site,

2K Cancel apply Help

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.


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.

Image Tag Accessibility Attributes x|

Ok.

Alternate text: | University of Ww »


- Cancel
Long description: | Rtg: fy = ante
Help

If you don't wank ko enter this information when inserting


objects, change the Accessibility preferences,

Links

There are many ways to turn text into a link, but they all start by selecting the
text. Then you

can:

e Type the name of the web page you want to link to in the Link box of the
Properties
panel

e Drag the small circle to the right of the Link box to the file in the File panel
you want to
link to

e 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:


e Press CTRL-SHIFT-U
o Click Site, Put on the menu bar at the top

e Right-click on the file in the Files panel and choose Put

Observations

New from Template x|

General Templates |
Templates for: Site "web Site": Preview:
Site "SSCC ISP" Russell Dimond’s Home Page
Site "SSCC web" FEY
Site "web Site" SCO 5 5! 5
Description:
<No description >
VW Update page when template changes
Help Preferences... Get more content... Create | Cancel
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.
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.

& ani omed ad ire anmyeavert [Usiejelde gl


File Edit View Modify Text Commands Site Window Help
Tag... Ctrl+E |
Favorites ¥ en 4
Image Ctrl+Alt+] © br
Image Objects 4
rttied-| NO pp OY flsh CulealteF
i [lo] cote [=
| L¢2] Code [== Google™ »| Image Viewer §
= CA Flash Text Ig
0 4 Table Ctrl+Al+T
- . Flash Button
3 Table Objects
: Layout Objects FlashPaper
3 2 j Flash Video...
3 3 Form 4
= = Shockwave Ctrl+Alt+D
E Hyperlink
J Applet
14 Email Link —
0] ActiveX
0 - Named Anchor Ctrl+Alt+A Era
E Date le
IE Server-Side Include
03 Comment

Step 2: Locate the audio file.


Select file name fiom: (2) File system [ sites and Servers... |

OO Data sources
Look in: | (£2 Desktop Bo? re
i) My Documents
W My Computer
«J My Network Places

AD Safari
N
| [test html

Filename: | eureka.wav | | ok]


Files of type: |All Files (*.*) ( Cancel J
URL: fle:///Cl/Documents and Sellings/Jennifer/Des| ( Parameters... |

Relative to: | Document Untitled-1

[ Change default Link Relative Ta in the site definition.

Document should be saved to use this option.

Step 3: Save your project.

To make a document-relative path, your document should


be saved first.

A 'file://' path will be used until you save your document.

[J Don't show me this message again.


JN

OK

Step 4: Locate the plugin icon on the page.


Untitled-1*

| [[<2] code | = spit | [5] pesion | 1

3.4
§
i
t
2]
&
g
[3]
2
g
5
|
|
<1
§
| |
(<li
Ge

“wim ee 5 [Fe]

HE G3 EE
Parameter: "Value Cancel
autoplay false
controller true Bl

Help
l= —— ——= SE —— it

Step 7: View Source (Code of Web page).

<'DOCTYPE htal FUBLIC =-//W3C//DTD XHTML 1.0 Transitional//EN™


"huttp://vww,w3,org/TR/xhtsll/DID/xhtxll-transiticnal.dtd™
<htal xalnss"htep://vww, v3, 0r¢/1999/xhtal™>

<head>

<meta http-equive”Content-Type” content="text/htal: charsete130-8859-1" >

<ritle>Untitled Docunsnt</titled

</head>

CORRE SF SAR

<bedy>
als senbediarcaTeureka: vay widths 324 he toh taT32 0 ipluginepagesTheth: 2 / vei
apple. consi
12 fcontrollsra” trusts feabead>

quickriss/dommlosdMiancoplayetfalsa™

Observation

You can watch a video too.


YouTube"

a youtube.com/watch?v=nJ5qeNZD0I8

nios

OAM Now: [Books Eimaxs ©

About B.63.00,000 remsts (0.52 seconds)

IPS #Aaaww nis 30

Home: The National Institute of Open Schooling (NIOS)


Tre Naucnal Institute of Open Schooling (N'OS) framerty known 2s Nasonal Coen
Schoel
(NCS) WS PAIINRET IN NOVEMBST 1959 35 AN 2AOAOEAUS CINETIEN

You've visited Ins page many nes, Last ve

Roca from nas ae Q

Sludent Login

Login to your socount seman

ail Passao Remember be

NIOS

1 Logn - Resut - Stream 1 (APRIL 2023) - Notre ans - ..

NIOS Result,

Check Result - UF Leters - Result -

Cnline Course Material


Sr. Secondary Courses - Secondary Courses - Otesimen

Tock

National <
Institute of
Open Schooling

pee

© suxn

tormeny
ation
fhopedia
Headquarters: Noa

Founded: 1539

Chairperson: Sar Shama

Abbreviaton: NOS
Official language: Hina Engiisn

Parent organization: Ministry of Education


Practical- 9

Aim

eo Write a JavaScript program.

Objectives
After completion of this practical you will be able to

eo Design a web page.

eo Loop in java script.

Software required

e Internet explorer / Google chrome.

e Notepad

Pre-requisite

e loop in java script.


Procedure

1. Open the notepad editor.

2. Use<script>for java script.

<!DOCTYPE
>
>
< charset="utf-8">
< name="viewport"” content="width=device-width, initial-scale=1">

>loop</ >

<hl> JS example </hl>

>
var i, number = 10, total = 0;
for (i = 1; i <= number; i++)

total = total + i;

t.write("<b>Sum of N Natural Numbers is </b>= " + total);


Observation

e Use conditional and loop statements.

Result
| loop >= | +
«~ => (8 file: rCUser

JS example

Sum of ™W WNatnral Mumbers 1s = 55


Practical-10
Aim
e Create a dynamic web page using JavaScript.

Objectives
After completion of this practical you will be able to

* Design a web page.

Software required

e [Internet explorer / Google chrome.

e Notepad.

Pre-requisite

e Dynamic web page.


Procedure

e Open the notepad editor.

eo Use <script> tag for java script.

<IDOCTYPE htmL>
<html>
<head>
<titlex</title>
</head>
<body style="text-align: center;">
<h1>Enter Your Name</hl>
<input type="text" id="name'>
<button type="button™ onclick="Entername())®>Submit</button>
<p style="color:green* id="demo?></p>
<script type="text/javascript™>
function Entername() {
{var x= document .getElementById(“name").value;

Woo nD WN

document .getElementById("demo®)-innerHTML=
“Welcome to Geeks for Geeks + X 3

</script>

</body>
</html>
Observation

e Use JavaScript statements in a webpage.

Result

Enter Your Name

C iE ][ submit]

Simba Nios Academy


WhatsApp For PDF -8979-31-4668

( Solved Practical Files / Most


Important Que's Ans's / Solved Tma

You might also like