Fundamentals of Web Programming

2018

Course Code: DCAP202

Q1 what are the advantages of HTML

Answer: POINTS ABOUT HTML:

1. HTML is used to create web pages.

2. HTML used many tags to make a webpage. So it is a tag-based language.
3. The tags of HTML are surrounded by the angular bracket.
4. It can use wide ranges of colors, objects, and layouts.
5. Very useful for beginners in web designing field.

Advantages of HTML:

1. The first advantage it is widely used.

2. Every browser supports HTML language.
3. Easy to learn and use.
4. It is by default in every window so you don't need to purchase extra software.
5.You can integrate HTML with CSS, JavaScript, php etc.

Q2 How can graphics be added to HTML document? Explain

Answer: Adding graphics to HTML files

There are two ways to include images (graphics) in an HTML document: inline and external.
You'll usually use inline images, which appear directly in the HTML page. External images
are downloaded when a user clicks a link to the image.

Some browsers can read a wide variety of types of image files, but some can read only a few.
The most commonly readable format is .GIF files. There are lots of shareware products that
create .GIFs or translate one type of image (for example .BMP) to .GIF. JPEG image files are
usually better for photographic images, or images with a lot of detail. GIF images can be
better for images with large expanses of solid color.

To include an image in your HTML document, use the <IMG> tag.

<IMG SRC="some.gif">

The previous line includes the file some.gif in your HTML document. This assumes that the
file is in the same directory as your HTML document. If the file is in another directory, use
either the relative or absolute path.

1
 Fundamentals of Web Programming
2018
You can include images on separate lines, or you can include them in text in headings, body
paragraphs, and even lists.

Elements of <IMG>

The image tag has several attributes that control the graphic. The first is SRC. This defines
the source for the graphic--the .GIF image file.

You can control where the image is positioned relative to the text of the line it appears in by
using the ALIGN attribute. You can set ALIGN to one of nine different values: LEFT,
RIGHT, TOP, ABSMIDDLE, ABSBOTTOM, TEXTTOP, MIDDLE, BASELINE, or
BOTTOM. If you don't specify alignment, it defaults to BOTTOM.

Q3 Explain user defined functions in HTML.

Answer: A user defined function is a programmed routine that has its parameters set by the user
of the system. User defined functions often are seen as programming shortcuts as they define
functions that perform specific tasks within a larger system, such as a database or spreadsheet
program.

Q4 Explain the concept of type casting

Answer: Typecasting, or type conversion, is a method of changing an entity from one data
type to another. It is used in computer programming to ensure variables are correctly
processed by a function.

An example of typecasting is converting an integer to a string. This might be done in order to

compare two numbers, when one number is saved as a string and the other is an integer. For
example, a mail program might compare the first part of a street address with an integer. If
the integer "123" is compared with the string "123" the result might be false. If the integer is
first converted to a string, then compared with the number in the street address, it will return
true.

Q5 Explain five commonly used HTML commands?

Basic HTML Commands

2
 Fundamentals of Web Programming
2018
Headers

There are up to six levels of headers that can be used in your document, h1 through h6.
Header 1 is the largest header and they get progressively smaller through header 6. Below are
each of the six headers and how they usually appear in relation to one another.

<h1>This is a header 1 tag</h1>

This is a header 1 tag

<h2>This is a header 2 tag</h2>

This is a header 2 tag

<h3>This is a header 3 tag</h3>

This is a header 3 tag

<h4>This is a header 4 tag</h4>

This is a header 4 tag

<h5>This is a header 5 tag</h5>

This is a header 5 tag

<h6>This is a header 6 tag</h6>

This is a header 6 tag

Headers, as you notice, not only vary in size, they are also bold and have a blank line inserted
before and after them. It’s important to use headers only for headings, not just to make text
bold (we cover the bold tag later).

3
 Fundamentals of Web Programming
2018
Paragraphs

In HTML, a paragraph tag <p> should be put at the end of every paragraph of “normal” text
(normal being defined as not already having a tag associated with it).

<p> causes a line break and adds a trailing blank line

<br> causes a line break with no trailing blank line

As a convenience to yourself and others who might have to edit your HTML documents, it’s
a very good idea to put two or three blank lines between paragraphs to facilitate editing.

Preformatted text

The preformatted text tag allows you to include text in your document that normally remains
in a fixed-width font and retains the spaces, lines, and tabs of your source document. In other
words, it leaves your text as it appears initially or just as you typed it in. Most clients collapse
multiple spaces into one space, even tabs are collapsed to one space. The only way to
circumvent this is to use the preformatted tag. Visually, preformatted text looks like a courier
font.

<pre>this is

an example
of a preformatted
text tag</pre>

And this is how it displays:

this is

an example
of a preformatted
text tag

Boldface, Underline and Italics

You can add emphasis to text by using the boldface and italic tags or the emphasis and strong
tags.

There is an underline tag as well, but most people don’t use it since text that is linked is often
underlined. The potential for confusion and the archaic nature of underlining in general make
it a poor marker for emphasis.

When using these tags, you usually cannot (and probably should not) have text that is both
boldface and italics; the last tag encountered is usually the tag that is displayed. For example,
if you had a boldface tag followed immediately by an italic tag, the tagged word would
appear in italics.

4
 Fundamentals of Web Programming
2018
Physical tags

This is a <b>boldface</b> tag.

This is how bold facing appears.

This is a <u> underline</u> tag.

This is an <i>italic</i> tag.

This is how italics appear.

Logical tags

This is a <strong>strongly emphasized</strong> tag.

This is a strongly emphasizedtag.

This is an <em>emphasized</em> tag.

This is an emphasizedtag.There is a subtle distinction between the above “physical” tags

which merely change the displayed font, and “logical” styles which are used (or eventually
will be) to make types of emphasis client specific (for instance, using the <em> tag would
make text red). While either style is fine, be aware that differences in these two kinds of tags
may be more apparent with advances in HTML.

Lists

There is an easy way in HTML to have numbered, unnumbered, and definition lists. In
addition, you can nest lists within lists.

When using lists, you have no control over the amount of space between the bullet or list
number, HTML automatically does this for you. Neither (as yet) do you have control over
what type of bullet will be used as each browser is different.

Unnumbered lists
Unnumbered lists are started with the <ul> tag, followed by the actual list items, which are
marked with the <li> tag. The list is ended with the ending tag </ul>.

For example, here is an unnumbered list with three items:

<ul>
<li> list item 1
<li> list item 2
<li> list item 3
</ul>

Here is how that list would display:

5
 Fundamentals of Web Programming
2018
 list item 1
 list item 2
 list item 3

Numbered lists
Here is the same list using a numbered list format:

<ol>
<li> list item 1
<li> list item 2
<li> list item 3
</ol>

Here is how that list would display:

1. list item 1
2. list item 2
3. list item 3

Nested lists
Finally, here is a nested list within an unnumbered list (we could just have easily had a nested
list within a numbered list).

<ul>
<li> list item 1
<ul>

<li> nested item 1

<li> nested item 2
</ul>
<li> list item 2
<ul>
<li> nested item 1
<li> nested item 2
</ul>

<li> list item 3

<ul>
<li> nested item 1
<li> nested item 2
</ul>
</ul>

Here is how that list would display:

 list item 1
o nested item 1
o nested item 2
 list item 2
o nested item 1
o nested item 2
 list item 3
o nested item 1
o nested item 2

6
 Fundamentals of Web Programming
2018

Blockquote

The blockquote tag indents the text (both on the left and right) inside the tags. The
blockquote tag looks like this:

<blockquote>...</blockquote>

and displays like this:

Blockquoted text is often used for indenting big blocks of text such as quotations. The text
will be indented until the ending tag is encountered. Again, note that the text here is indented
on both the left and the right margins

Q6 Describe the 5 applications of communication on the internet?

Answer: With the advent of high-speed internet connections, the internet has created more
ways of instant communications that provide a vast option of information sharing.

Social Media Sites – This is a no-brainer. Almost everyone with access to the web has a
social media account. Whether it be Facebook, Twitter, Instagram, or what have you, a single
post can connect you to a friend or loved one through means of “liking”, “sharing”, or
“commenting”.

Instant Messaging – Instant message, or IM, is sending a real-time message from one user to
another. Examples are Yahoo! Messenger, Windows Live Messenger, or the millennial-crush
Snapchat.

E-mail – Electronic mail, is the techy version of the traditional mail. This is more likely to be
performed when engaging with a person officially, be it conducting a business, heeding for
certain requests, or just simply saying “Hi”.

Chat Rooms – Before the rise of Social Media, chat rooms were the golden boys of the
internet. It’s the equivalent of partying and getting to know each other where people come
together to communicate in the same “room”.

Forum – Forums are specifically directed to people who have questions or want to start an
idea or thought through group discussions. Each post is classified as a thread and is normally
monitored by a mod, or moderator, who can either edit or remove unnecessary posts that are
irrelevant to the discussion at hand.

Blog – Consider this as your pre-internet, journal or diary. Before, a journal zooms in on one
person’s life story. Now, a blog is used for more than life-sharing – people do blogs to earn
money by promoting products, information-sharing, giving tutorial, and even making
political statements. People can comment and subscribe to their blogs if they like the
contents.

7
 Fundamentals of Web Programming
2018
Internet Conference – Internet conference can be divided into two parts – audio and video. In audio
conferencing, people are exchanging dialogues via microphones and speakers. This is the equivalent
of a phone call but is more flexible considering phone calls charge higher when it’s beyond local,
while audio conference applications such as Skype, can do so charge-free. The other means to do
internet conferences is video conferencing. It is practically the same as audio conferencing but with
both parties seeing each other through a web camera. Applications like Skype, ezTalks and many
more provide both audio and video conferences in their services, which are good for both long-
distance family talks and business ventures.

7: Give advantage of cascading style sheets?

Answer: List of Advantages of Cascading Style Sheets

1. Consistency
The main benefit of CSS is that style is applied consistently across a number of web pages.
One command line can control several areas at one time, which is quite advantageous if there
are changes that need to be made. You only need to alter one thing and the rest will follow.
Because you don’t have to change each page one at a time, web designers can be very
efficient in creating and changing a website with only a few lines of code.

2. Improved website speed

Web designers only need to use a small amount of lines of programming for each page. And
if there are less code, there are fewer lines to read, resulting in a faster load time for every
page. With online users not willing to wait for a website to load, improving site speed will be
most advantageous. Owners who bank on website performance to improve search engine
rankings and customer base will benefit from CSS.

3. Easy to maintain
Cascading style sheet not only simplifies website development, but also maintenance. All the
codes are placed on one page, which means making improvements or changing a few lines
will not involve going through several pages. And since a change with a single line of code is
applied across the website, maintenance time and effort are significantly reduced.

8: How can button be created in HTML form? Give syntax.

Answer:

<html>

<body>

8
 Fundamentals of Web Programming
2018

<form action="/action_page.php" method="get" id="nameform">

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

</form>

<p>The button below is outside the form element, but still part of the form.</p>

<button type="submit" form="nameform" value="Submit">Submit</button>

<p><b>Note:</b> The form attribute does not work in IE.</p>

</body>

</html>

First name:
Last name:
The button below is outside the form element, but still part of the form.

9. Define Web server. How is it useful?

Answer: Web server

A Web server is a program that uses HTTP (Hypertext Transfer Protocol) to serve the files
that form Web pages to users, in response to their requests, which are forwarded by their
computers' HTTP clients. Dedicated computers and appliances may be referred to as Web
servers as well.

The process is an example of the client/server model. All computers that host Web sites must
have Web server programs. Leading Web servers include Apache (the most widely-installed
Web server), Microsoft's Internet Information Server (IIS) and nginx (pronounced engine X)

9
 Fundamentals of Web Programming
2018
from NGNIX. Other Web servers include Novell's NetWare server, Google Web Server
(GWS) and IBM's family of Domino servers.

Web servers often come as part of a larger package of Internet- and intranet-related programs
for serving email, downloading requests for File Transfer Protocol (FTP) files, and building
and publishing Web pages. Considerations in choosing a Web server include how well it
works with the operating system and other servers, its ability to handle server-side
programming, security characteristics, and the particular publishing, search engine and site
building tools that come with it.

10. Give the use of frame border attribute in HTML?

Answer:
The frameborder attribute specifies whether or not to display a border around a frame.

<html>

<frameset cols="50%,50%">

<frame src="frame_a.htm" frameborder="0">

<frame src="frame_b.htm" frameborder="0">

</frameset>

</html>

Q: How can connectivity be established on internet.Give example?

Answer: Establishing Connectivity to the Internet
All modern computers and laptops are capable of connecting to the internet, as are many
other devices, including mobiles, tablets, e-readers, televisions, video games consoles.
There are two ways of getting the internet at home. The most popular way is to have your
telephone line (also known as a 'landline') converted to broadband so that it can carry normal
phone calls and internet data at the same time.
However, if you don't have a landline or if you want to be able to use the internet when you're
out and about, you might prefer mobile internet from one of the mobile network providers.
This can be used anywhere there's a mobile signal but does tend to be slower and more
expensive than broadband through a landline.

10
 Fundamentals of Web Programming
2018
Follow these step-by-step instructions to connect to the internet
Step 1: Choose an Internet Service Provider (ISP). This could be the company that provides
your telephone line or it could be one of the many independent providers. To help you
choose, have a look at one of the many comparison websites and ask people you know for
their opinion.
Some ISPs, particularly the mobile suppliers, impose a monthly download limit or usage
allowance. This is measured in gigabytes (Gb). To put this in context, 1Gb will allow you to
visit approximately 10,500 web pages or download around 205 songs.
Step 2: Having chosen an ISP and signed the contract, you'll have to wait a few days while
yourline is converted to broadband. During this time, you should receive a letter with your
username and password and the hardware you'll need: a small box called a 'router' and its
attachments.
Step 3: Once you're told that your broadband is active, you can set up your router. It should
have come with three cables:
 a network cable to connect the router to your computer
 a power cable
 a cable that will go between your router and a microfilter (see below).
 Plug one end of the network cable into the appropriately shaped socket in the router, and
the other end in a similarly appropriately shaped socket in your computer.
Take the power cable and plug one end in the router and the other in a nearby power point.

You should have also received a microfilter. This splits the signal in the telephone wire in
two:
voice and broadband. You plug the dangly end of the microfilter into your telephone socket.
Then in the sockets at the other end, you plug in (1) the cable from your own telephone and
(2) the cable that came with your router. As these two sockets are different shapes, you can't
plug a cable into the wrong socket. Finally, plug in the other end of the router cable into the
router itself.
You'll also need to install a micro filter in any other telephone socket in the house that's in
use.
Step 4: When you get the router, you should also receive a CD. Once you've set up the router,
all you need to do is put the CD into your computer and follow the step-by-step instructions.
If you don't want to do this yourself, some companies offer a home installation service and,
for an extra cost, will send an engineer to set up your broadband connection for you.

Q: What is the relation between script tag and browsers compatibility?

Answer: Script (<script>)Tag
In Javascript, SCRIPT tags can be inserted into three places: in between the two BODY tags,
in between the two HEAD tags, and as a link to an external file, also in the HEAD section.
Some advocate putting the SCRIPT tags in the BODY section, right at the end.
The reason to do it this way is because the web page itself will have loaded before the script
is read. If it’s in the HEAD section, the script will be parsed before any HTML or CSS
elements are loaded. If your Javascript references any of the web page’s elements, there may
be a slight delay in the fancy effects you want to apply, or it may just not work at all.

Browsers Compatibility

11
 Fundamentals of Web Programming
2018
Browsers that do not support JavaScript, will display JavaScript as page content. To prevent
them from doing this, and as a part of the JavaScript standard, the HTML comment tag
should be used to “hide” the JavaScript.
Just add an HTML comment tag <!— before the first JavaScript statement, and a —> (end of
comment) after the last JavaScript statement, like this:
<html>
<body>
<script type=”text/JavaScript”>
<!—
document.getElementById(“demo”).innerHTML=Date();//—>
</script>
</body>
</html>
The two forward slashes at the end of comment line (//) is the JavaScript comment symbol.
This prevents JavaScript from executing the —> tag.

Q: Explain looping statements in HTML.Give example?

Answer: Looping

Very often when you write code, you want the same block of code to run a number of times.
You can use looping statements in your code to do this.

In JavaScript we have the following looping statements:

 while - loops through a block of code while a condition is true

 do...while - loops through a block of code once, and then repeats the loop while a condition
is true
 for - run statements a specified number of times

while
The while statement will execute a block of code while a condition is true..

while (condition)
{
code to be executed
}

do...while

12
 Fundamentals of Web Programming
2018
The do...while statement will execute a block of code once, and then it will repeat the loop
while a condition is true

do
{
code to be executed
}
while (condition)

for
The for statement will execute a block of code a specified number of times

for (initialization; condition; increment)

{
code to be executed
}

Examples
For loop
How to write a For loop. Use a For loop to run the same block of code a specified number of
times

<html>
<body>
<script type="text/javascript">
for (i=0; i<=5; i++)
{
document.write("<b>The number is " + i + "</b>")
document.write("<br>")
}
</script>
<p>Explanation:
<p>The for loop sets <b>i</b> equal to 0.
<p>As long as <b>i</b> is less than or equal to 5, the loop will continue to run.
<p><b>i</b> will increase by 1 each time the loop runs.
</body>
</html>

Looping through HTML headers

How to use the For loop to write the HTML headers.

13
 Fundamentals of Web Programming
2018

<html>
<body>
<script type="text/javascript">
for (i=0; i<=6; i++)
{
document.write("<h" + i + ">This is header " + i)
document.write("</h" + i + ">")
}
</script>
<p>Explanation:
<p>The for loop sets <b>i</b> equal to 0.
<p>As long as <b>i</b> is less than or equal to 5, the loop will continue to run.
<p><b>i</b> will increase by 1 each time the loop runs.
</body>
</html>

While loop
How to write a While loop. Use a While loop to run the same block of code while or until a
condition is true

<html>
<body>
<script type="text/javascript">
i=0 while (i<=5)
{
document.write("<b>The number is " + i + "</b>")
document.write("<br>")
i++
}
</script>
<p>Explanation:
<p>The for loop sets <b>i</b> equal to 0.
<p>As long as <b>i</b> is less than or equal to 5, the loop will continue to run.
<p><b>i</b> will increase by 1 each time the loop runs.
</body>
</html>

Do while loop
How to write a Do While loop. Use a Do While loop to run the same block of code while or
until a condition is true. This loop will always be executed once, even if the condition is false,
because the statements are executed before the condition is tested

<html>

14
 Fundamentals of Web Programming
2018

<body>
<script type="text/javascript">
i=0
do
{
document.write("<b>The number is " + i + "</b>")
document.write("<br>")
i++
}
while (i<=5)
</script>
<p>Explanation:
<p>The for loop sets <b>i</b> equal to 0.
<p>As long as <b>i</b> is less than or equal to 5, the loop will continue to run.
<p><b>i</b> will increase by 1 each time the loop runs.
</body>
</html>

Q: How can tables be created in HTML.Give example?

Answer: The <table> tag defines an HTML table.

An HTML table consists of the <table> element and one or more <tr>, <th>, and <td>
elements.

The <tr> element defines a table row, the <th> element defines a table header, and the <td>
element defines a table cell.

A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>,
<tfoot>, and <tbody> elements.

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<table>
<tr>
<th>Month</th>
15
 Fundamentals of Web Programming
2018
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

</body>
</html>
Month Savings
January $100
February $80

Q: Explain different expressions of javascript used in HTML?

Answer: Expressions
An expression is any valid set of literals, variables, operators, and expressions that evaluates
to a single value. The value may be a number, a string, or a logical value. Conceptually, there
are two types of expressions: those that assign a value to a variable, and those that simply
have a value.

Example: The expression x = 7

It is an expression that assigns x the value 7. This expression itself evaluates to 7. Such
expressions use assignment operators. On the other hand, the expression
3+4

Simply evaluates to 7; it does not perform an assignment.

JavaScript has the following kinds of expressions:

 Arithmetic: evaluates to a number, for example
 String: evaluates to a character string, for example “Fred” or “234”
 Logical: evaluates to true or false
The special keyword null denotes a null value. In contrast, variables that have not been
assigned a value are undefined, and cannot be used without a run-time error.

Conditional Expression
A conditional expression can have one of two values based on a condition. The syntax is
(condition) ? val1 : val2 If condition is true, the expression has the value of val1, otherwise it
has the value of val2. You can use a conditional expression anywhere you would use a
standard expression.

Example: Status = (age >= 18) ? “adult” : “minor”

16
 Fundamentals of Web Programming
2018
This statement assigns the value “adult” to the variable status if age is eighteen or greater.
Otherwise, it assigns the value “minor” to status.

Q: How can events be handled using javascript in HTML?

Answer:

What is an Event?

JavaScript's interaction with HTML is handled through events that occur when the user or the
browser manipulates a page.

When the page loads, it is called an event. When the user clicks a button, that click too is an
event. Other examples include events like pressing any key, closing a window, resizing a
window, etc.

Developers can use these events to execute JavaScript coded responses, which cause buttons
to close windows, messages to be displayed to users, data to be validated, and virtually any
other type of response imaginable.

Events are a part of the Document Object Model (DOM) Level 3 and every HTML element
contains a set of events which can trigger JavaScript Code.

Please go through this small tutorial for a better understanding HTML Event Reference. Here
we will see a few examples to understand a relation between Event and JavaScript −

onclick Event Type

This is the most frequently used event type which occurs when a user clicks the left button of
his mouse. You can put your validation, warning etc., against this event type.

Example

Try the following example.

<html>
<head>

<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>

</head>

<body>
<p>Click the following button and see result</p>

17
 Fundamentals of Web Programming
2018

<form>
<input type="button" onclick="sayHello()" value="Say Hello" />
</form>

</body>
</html>

Output

onsubmit Event type

onsubmit is an event that occurs when you try to submit a form. You can put your form
validation against this event type.

Example

The following example shows how to use onsubmit. Here we are calling a validate() function
before submitting a form data to the webserver. If validate() function returns true, the form
will be submitted, otherwise it will not submit the data.

Try the following example.

<html>
<head>

<script type="text/javascript">
<!--
function validation() {
all validation goes here
.........
return either true or false
}
//-->
</script>

</head>
<body>

<form method="POST" action="t.cgi" onsubmit="return validate()">

.......
<input type="submit" value="Submit" />
</form>

</body>
</html>

onmouseover and onmouseout

These two event types will help you create nice effects with images or even with text as well.
The onmouseover event triggers when you bring your mouse over any element and the
onmouseout triggers when you move your mouse out from that element. Try the following
example.

18
 Fundamentals of Web Programming
2018
<html>
<head>

<script type="text/javascript">
<!--
function over() {
document.write ("Mouse Over");
}

function out() {
document.write ("Mouse Out");
}

//-->
</script>

</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>

<div onmouseover="over()" onmouseout="out()">

<h2> This is inside the division </h2>
</div>

</body>
</html>

Output

HTML 5 Standard Events

The standard HTML 5 events are listed here for your reference. Here script indicates a
Javascript function to be executed against that event.

Attribute Value Description

Offline script Triggers when the document goes offline

Onabort script Triggers on an abort event

onafterprint script Triggers after the document is printed

onbeforeonload script Triggers before the document loads

onbeforeprint script Triggers before the document is printed

onblur script Triggers when the window loses focus

oncanplay script Triggers when media can start play, but might has to stop for buffering

Triggers when media can be played to the end, without stopping for
oncanplaythrough script
buffering

onchange script Triggers when an element changes

19
 Fundamentals of Web Programming
2018
onclick script Triggers on a mouse click

oncontextmenu script Triggers when a context menu is triggered

ondblclick script Triggers on a mouse double-click

ondrag script Triggers when an element is dragged

ondragend script Triggers at the end of a drag operation

ondragenter script Triggers when an element has been dragged to a valid drop target

ondragleave script Triggers when an element is being dragged over a valid drop target

ondragover script Triggers at the start of a drag operation

ondragstart script Triggers at the start of a drag operation

ondrop script Triggers when dragged element is being dropped

ondurationchange script Triggers when the length of the media is changed

onemptied script Triggers when a media resource element suddenly becomes empty.

onended script Triggers when media has reach the end

onerror script Triggers when an error occur

onfocus script Triggers when the window gets focus

onformchange script Triggers when a form changes

onforminput script Triggers when a form gets user input

onhaschange script Triggers when the document has change

oninput script Triggers when an element gets user input

oninvalid script Triggers when an element is invalid

onkeydown script Triggers when a key is pressed

onkeypress script Triggers when a key is pressed and released

onkeyup script Triggers when a key is released

onload script Triggers when the document loads

onloadeddata script Triggers when media data is loaded

onloadedmetadata script Triggers when the duration and other media data of a media element is

20
 Fundamentals of Web Programming
2018
loaded

onloadstart script Triggers when the browser starts to load the media data

onmessage script Triggers when the message is triggered

onmousedown script Triggers when a mouse button is pressed

onmousemove script Triggers when the mouse pointer moves

onmouseout script Triggers when the mouse pointer moves out of an element

onmouseover script Triggers when the mouse pointer moves over an element

onmouseup script Triggers when a mouse button is released

onmousewheel script Triggers when the mouse wheel is being rotated

onoffline script Triggers when the document goes offline

onoine script Triggers when the document comes online

ononline script Triggers when the document comes online

onpagehide script Triggers when the window is hidden

onpageshow script Triggers when the window becomes visible

onpause script Triggers when media data is paused

onplay script Triggers when media data is going to start playing

onplaying script Triggers when media data has start playing

onpopstate script Triggers when the window's history changes

onprogress script Triggers when the browser is fetching the media data

onratechange script Triggers when the media data's playing rate has changed

onreadystatechange script Triggers when the ready-state changes

onredo script Triggers when the document performs a redo

onresize script Triggers when the window is resized

onscroll script Triggers when an element's scrollbar is being scrolled

Triggers when a media element's seeking attribute is no longer true, and

onseeked script
the seeking has ended

21
 Fundamentals of Web Programming
2018
Triggers when a media element's seeking attribute is true, and the
onseeking script
seeking has begun

onselect script Triggers when an element is selected

onstalled script Triggers when there is an error in fetching media data

onstorage script Triggers when a document loads

onsubmit script Triggers when a form is submitted

Triggers when the browser has been fetching media data, but stopped
onsuspend script
before the entire media file was fetched

ontimeupdate script Triggers when media changes its playing position

onundo script Triggers when a document performs an undo

onunload script Triggers when the user leaves the document

Triggers when media changes the volume, also when volume is set to
onvolumechange script
"mute"

onwaiting script Triggers when media has stopped playing, but is expected to resume

22