100% found this document useful (1 vote)
2K views29 pages

DIT 2nd Semester Web Developement

This document discusses different types of lists, operators, and scripting languages in HTML and JavaScript. It defines ordered lists, unordered lists, and description lists in HTML and provides examples. It also describes arithmetic, comparison, and logical operators in JavaScript and provides examples of each. Additionally, it identifies common client-side and server-side scripting languages like CSS, HTML, JavaScript, Python, and Bash.

Uploaded by

afshanabbasi678
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
100% found this document useful (1 vote)
2K views29 pages

DIT 2nd Semester Web Developement

This document discusses different types of lists, operators, and scripting languages in HTML and JavaScript. It defines ordered lists, unordered lists, and description lists in HTML and provides examples. It also describes arithmetic, comparison, and logical operators in JavaScript and provides examples of each. Additionally, it identifies common client-side and server-side scripting languages like CSS, HTML, JavaScript, Python, and Bash.

Uploaded by

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

Web Development

(DIT 2nd Semester)


(Html, CSS, Java script)
Long Question

Q1: What is list? Describe different types of lists.(2016)


Ans:

HTML Lists: HTML Lists are used to specify lists of information. All lists
may contain one or more list elements. There are three different types of
HTML lists:
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
Note: we can create list Inside another list, which will be termed as
nested list.
1.HTML Ordered List or Numbered List (ol):
Ordered List or Numbered List displays elements in numbered format. The
HTML ol tag is used for ordered list. We can use ordered list to represent items
either in numerical order format or alphabetical order format, or any format
where an order is emphasized. There can be different types of numbered list:
o Numeric Number (1, 2, 3)
o Capital Roman Number (I II III)
o Small Romal Number (i ii iii)
o Capital Alphabet (A B C)
o Small Alphabet (a b c)
For-Example:

1 Made By:Maryam Ayub


The list items are marked with numbers:
<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>

Output:
1. Aries
2. Bingo
3. Leo
4. Oracle

2.HTML Unordered List or Bulleted List (ul):


HTML Unordered List or Bulleted List displays elements in bulleted format .
We can use unordered list where we do not need to display items in any
particular order. The HTML ul tag is used for the unordered list. There can be 4
types of bulleted list:
o disc
o circle
o square
o none
For-Example:
<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>
Output:

2 Made By:Maryam Ayub


o Aries
o Bingo
o Leo
o Oracle

3.HTML Description List or Definition List (dl):


HTML Description list is also a list style which is supported by HTML and
XHTML. It is also known as definition list where entries are listed like a
dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary, list
of terms or other name-value list.

The HTML definition list contains following three tags:


1. <dl> tag defines the start of the list.
2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).
For-Example:
dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign.</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
</dl>
Output:
Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
3 Made By:Maryam Ayub
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.
Html Nested List:
A list within another list is termed as nested list. If you want a bullet list inside
a numbered list then such type of list will called as nested list.
For-Example:
List of Indian States with capital
1.Delhi
• New Delhi
2.Haryana
• Chandigarh
3.Gujrat
• Gandhinagar
4.Rajasthan
• Jaipur
Q2. What is scripting language? Describe different
types of scripting languages (2016).
Ans:
Scripting Language:
A script or scripting language is a computer language that does not need the
compilation step and is rather interpreted one by one at runtime. It is where
the script is written and where instructions for a run-time environment are
written. In contrast to programming languages that are compiled first before
running, scripting languages do not compile the file and execute the file without
being compiled.

There are multiple scripting languages available some are as


follows:

Basically Scripting language divided into two category

1. Client-Side
4 Made By:Maryam Ayub
2. Server-side
❖ Client - Side Language:
Css: CSS stands for Cascading Style Sheets
✓ CSS describes how HTML elements are to be displayed on screen,
in other media paper
✓ CSS saves a lot of work. It can control the layout of multiple web pages
all at once
✓ External stylesheets are stored in CSS files.
Html: Hyper Text Markup Language (HTML) is the main markup language
for creating web pages and other information that can be displayed in a web
browser.
❖ Server-side :
bash: It is a scripting language that's the default command
interpreter on most GNU/Linux systems and can be found on a
variety of operating systems. As compared to other programming
languages, the use of bash is much easier to create scriptsIt stores
documentation for others to use, defines the tools to use and
command line code, and provides useful reusable scripts. Its name is
short for 'Bourne-Again SHell'.
Python: It is an object-oriented programming language that is the
most widely used language among developers, in modern times. It is
simple and interpreted. It's a dynamically semantic language with
enormous scripted lines of code. It has high-level data structures
built in, making it easy to use and suitable for Rapid Application
Development. It supports code reuse and software modularity by
allowing modules and packages.
Q3. What is operator? Explain different types of
operators which are used in java script?(2016)
Ans:
Operator:
An operator is capable of manipulating a certain value or operand. Operators
are used to perform specific mathematical and logical computations on

5 Made By:Maryam Ayub


operands. In other words, we can say that an operator operates the
operands. In JavaScript operators are used for compare values, perform
arithmetic operations etc.
There are six type of operator in java script.
✓ Arithmetic operator
✓ Comparison Operator
✓ Logical Operator
✓ Assignment Operator
1. Arithmetic Operator:
JavaScript supports the following arithmetic operators −
Assume variable A holds 10 and variable B holds 20, then −

Sr.No. Operator & Description


1 + (Addition)
Adds two operands
Ex: A + B will give 30

2 - (Subtraction)
Subtracts the second operand from the first
Ex: A - B will give -10
3 * (Multiplication)
Multiply both operands
Ex: A * B will give 200

4 / (Division)
Divide the numerator by the denominator
Ex: B / A will give 2
5 % (Modulus)
Outputs the remainder of an integer division
Ex: B % A will give 0
6 ++ (Increment)
Increases an integer value by one

6 Made By:Maryam Ayub


Ex: A++ will give 11

7 -- (Decrement)
Decreases an integer value by one
Ex: A-- will give 9
Note −Addition operator (+) works for Numeric as well as Strings. e.g. "a" +
10 will give "a10".
2. Comparison Operator:
JavaScript supports the following comparison operators −
Assume variable A holds 10 and variable B holds 20, then −
Sr.No Comparison Operator
1 = = (Equal)
Checks if the value of two operands are equal or not, if yes, then the
condition becomes true.
Ex: (A == B) is not true.
2 != (Not Equal)
Checks if the value of two operands are equal or not, if the values are not
equal, then the condition becomes true.
Ex: (A != B) is true.
3 > (Greater than)
Checks if the value of the left operand is greater than the value of the right
operand, if yes, then the condition becomes true.
Ex: (A > B) is not true
4 < (Less than)
Checks if the value of the left operand is less than the value of the right
operand, if yes, then the condition becomes true.
Ex: (A < B) is true.
5 >= (Greater than or Equal to)
Checks if the value of the left operand is greater than or equal to the value
of the right operand, if yes, then the condition becomes true.
Ex: (A >= B) is not true.

7 Made By:Maryam Ayub


6 <= (Less than or Equal to)
Checks if the value of the left operand is less than or equal to the value of
the right operand, if yes, then the condition becomes true.
Ex: (A <= B) is true.

3. Logical Operator:
JavaScript supports the following logical operators −
Assume variable A holds 10 and variable B holds 20, then –
Sr.No Logical Operator
1 && (Logical AND)
If both the operands are non-zero, then the condition becomes true.
Ex: (A && B) is true.

2 || (Logical OR)
If any of the two operands are non-zero, then the condition becomes true.
Ex: (A || B) is true

3 ! (Logical NOT)
Reverses the logical state of its operand. If a condition is true, then the Logical
NOT operator will make it false.
Ex: ! (A && B) is false.

4. Assignment Operator:
JavaScript supports the following assignment operators –
Sr.No Assignment Operator
1 = (Simple Assignment )
Assigns values from the right side operand to the left side operand
Ex: C = A + B will assign the value of A + B into C

2 += (Add and Assignment)

8 Made By:Maryam Ayub


It adds the right operand to the left operand and assigns the result to the left
operand.
Ex: C += A is equivalent to C = C + A
3 −= (Subtract and Assignment)
It subtracts the right operand from the left operand and assigns the result to
the left operand.
Ex: C -= A is equivalent to C = C – A
4 *= (Multiply and Assignment)
It multiplies the right operand with the left operand and assigns the result to
the left operand.
Ex: C *= A is equivalent to C = C * A
5 /= (Divide and Assignment)
It divides the left operand with the right operand and assigns the result to the
left operand.
Ex: C /= A is equivalent to C = C / A
6 %= (Modules and Assignment)
It takes modulus using two operands and assigns the result to the left
operand.
Ex: C %= A is equivalent to C = C % A

Note − Same logic applies to Bitwise operators so they will become like
<<=, >>=, >>=, &=, |= and ^=

5. Conditional (ternary) operator:


The conditional (ternary) operator is the only JavaScript operator that
takes three operands: a condition followed by a question mark (?), then an
expression to execute if the condition is truthy followed by a colon (:), and
finally the expression to execute if the condition is falsy.
Syntax; condition ? exprIfTrue : exprIfFals

Q4. What are different Media types Included In Css and


What they are used for. (Resvised-2015)
9 Made By:Maryam Ayub
Ans:
❖ Media Types:
The names chosen for CSS media types reflect target devices for which the
relevant properties make sense. They give a sense of what device the media
type is meant to refer to. Given below is a list of various media types –
All:
Used for all media type devices.
Print:
Used for Printers.
Screen:
Used for computer screens, tablets, smart-Phones etc.
Speech:
Used for screenreaders that “reads” pages out louds.
Q5. What is Java script ? Explain datatype in java script ?
(Resvised-2015)
Ans:
JavaScript is the programming language of HTML and the Web. JavaScript is
easy to learn. A computer program is a list of "instructions" to be "executed"
by the computer. In a programming language, these program instructions are
called statements. JavaScript is a programming language.
❖ Data Type in Java script:
JavaScript variables can hold many data types: numbers, strings, objects and
more: var length = 16; // Number var last Name = "Johnson"; // String var x =
{first Name :"John", last Name :"Doe"}; // Object
1. JavaScript Strings:
A string (or a text string) is a series of characters like "John Doe". Strings are
written with quotes. You can use single or double quotes:
Example var car Name = "Volvo XC60"; // Using double quotes var car
Name = 'Volvo XC60'; // Using single quotes
You can use quotes inside a string, as long as they don't match the quotes
surrounding the string:

10 Made By:Maryam Ayub


Example var answer = "It's alright"; // Single quote inside double quotes var
answer = "He is called 'Johnny'"; // Single quotes inside double quotes var
answer = 'He is called "Johnny"'; // Double quotes inside single quotes.
2. JavaScript Numbers:
JavaScript has only one type of numbers. Numbers can be written with, or
without decimals:
Example var x1 = 34.00; // Written with decimals
var x2 = 34; // Written without decimals
Extra large or extra small numbers can be written with scientific
(exponential) notation:
Example var y = 123e5; // 12300000 var z = 123e-5; // 0.00123
3. JavaScript Booleans:
Booleans can only have two values: true or false.
Example
var x = 5;
var y = 5;
var z = 6;
(x == y) // Returns true
(x == z) // Returns false Booleans are often used in conditional testing.

Q6.What is loop ?Explain its Type. (Resvised-2015)


Ans:
Loop:
Loops are used in JavaScript to perform repeated tasks based on a
condition. Conditions typically return true or false . A loop will continue
running until the defined condition returns false .
There are three types of loop in javascript.
1. The While loop
2. For Loop
3. The do loop
1.The While Loop:
The while loop loops through a block of code as long as a specified condition is
true.
Syntax:

11 Made By:Maryam Ayub


while (condition)
{ code block to be executed }
Example: In the following example, the code in the loop will run, over and
over again, as long as a variable (i) is less than 10:
Example:
while (i < 10) {
text += "The number is " + i; i++;
}
2.The Do loop:
The while loop loops through a block of code as long as a specified condition is
true.
Syntax :
do{ code block to be executed }
while (condition)
Example:
In the following example, the code in the loop will run, over and over again, as
long as a variable (i) is less than 10:
Example:
do{ text += "The number is " + i; i++; }
while (i < 10)
The break statement "jumps out" of a loop.
The continue statement "jumps over" one iteration in the loop.
3.For loop :
The for loop is often the tool you will use when you want to create a loop.
The for loop has the following
syntax:
for (statement 1; statement 2; statement 3)
{ code block to be executed }
Statement 1 is executed before the loop (the code block) starts.
Statement 2 defines the condition for running the loop (the code block).
Statement 3 is executed each time after the loop (the code block) has been
executed.
Example for :
(i = 0; i < 5; i++)
{ text += "The number is " + i + "";
12 Made By:Maryam Ayub
}
Q7: Write Html Code to create nested tables within
tables. (Resvised-2015)
Ans:
Nested Table With in Table:
Html code:
<doctype html>
<html>
<head>
<title>Nested table<title>
</head>
<body>
<table border=”1px” border color= ” green” >
<tr>
<td>Table 1</td>
<td>Table 1</td>

<table border=”2” border color=”blue”>


<tr>
<td> Table 2 </td>
<td> Table 2 </td>
</tr>
<tr>
<td> Table 2</td>
<td> Table 2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Table 1 </td>
<td> Table 1</td>
</tr>
</table>
</body>

13 Made By:Maryam Ayub


</html>
Q8: What are the different actions that performed using
java script. (Resvised-2015)
Ans : HTML events are "things" that happen to HTML elements. When
JavaScript is used in HTML pages, JavaScript can "react" on these events.
❖ Html Events :
An HTML event can be something the browser does, or something a user does.

Here are some examples of HTML events:

• An HTML web page has finished loading


• An HTML input field was changed
• An HTML button was clicked

Often, when events happen, you may want to do something.

JavaScript lets you execute code when events are detected.

Html allow event handler attributes, with java script code, to be added to
Html elements.

With single quotes.

<element event=’some java script’>

With double quotes.

<element event=”some Java script”>

Common Html Events.

Here is a list of html events.

Events Description
Onchange An HTML element has been changed
14 Made By:Maryam Ayub
Onclick The user clicks an HTML element

Onmouseover The user moves the mouse over an HTML element

Onmouseout The user moves the mouse away from an HTML element

Onkeydown The user pushes a keyboard key

Onload The browser has finished loading the page

Q9:Use table to structure form .


Ans:
<DOCTYPE HTML>
<html >

<head>

<tittle>javascript</title>

</head>

<Body bgcolor=”purple” text=”white”>

<form>

<table>

<tr>

<td>

<label>username</label>

</td>

<td>
15 Made By:Maryam Ayub
<input type=”text”>< br >

</td>

</tr>

<tr>

<td>

<label>password</label>

</td>

<td>

<input type=”text”>

</td>

</tr>

<tr>

<td colspan=”2” align=”center”>

<button>login</button>

</td>

</tr>

</body>

</html>

16 Made By:Maryam Ayub


Output:
Username

Password

Login

Q10:Write java script code that inputs three numbers


from the user and display maximum number by using
AND operator. (Resvised-2015)
Ans:
Var num1 = parselnt(prompt(“Enter first number:”));
Var num 2=parseInt(prompt(“Enter second number:”));
Var num 3=parseInt(prompt(“Enter third number:”));
If(num1>=num2 && num1>=num3){
Document .write(“Number 1 is Largest”);
}
else if (num2>=num1 && num2>=num3){
document .write(“number 2 is largest”);
}
else {
document . write(“number 3 is largest”);
}

Q11: Define Array and How different types of an array


can be declared. (Resvised-2015)
Ans:
❖Array:
In JavaScript, an array is considered an object. It allows storing multiple
values in a single variable. By definition, a Js array is a collection of the same

17 Made By:Maryam Ayub


type of data. However, a Javascript array is considered a sequence of values.
The data type of these values may be of different types.
Types of Array in Java script:
1.One-dimensional Array
2.Multi-dimensional Array
1.One-Dimensional Array:
One-dimensional Js array is also known as a linear array. It consists of only
one row or one column. For example, the temperature of each day of a month
is stored in an array.
2.Multi-Dimensional Array:
A multidimensional array is an array of arrays.

To create a two-dimensional array, add each array within its own set of curly
braces:
Example:
int[][] myNumbers = { {1, 2, 3, 4}, {5, 6, 7} };

myNumbers is now an array with two arrays as its elements.

To access the elements of the myNumbers array, specify two indexes: one for
the array, and one for the element inside that array.

Q12:What is Css ?Explain its type.(Resvised-2015)


Css (Case cading Style Sheet):
CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or
in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at
once
• External stylesheets are stored in CSS files.
There are three Types of css.
• External style sheet
• Internal style sheet
• Inline style
1.External Style Sheet:

18 Made By:Maryam Ayub


With an external style sheet, you can change the look of an entire website by
changing just one file! Each page must include a reference to the external style
sheet file inside the element. The element goes inside the section:
Example
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
<head.
An external style sheet can be written in any text editor. The file should not
contain any html tags. The style sheet file must be saved with a .css extension.
Here is how the "mystyle.css" looks:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
2.Internal Style Sheet:
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the section of an HTML page:
Example
<head>
<style>
body {
background-color: linen;
}
H1{
color: maroon;
margin-left: 40px;
}
</style>
</head>
3.Inline Style Sheet:
An inline style may be used to apply a unique style for a single element. use
inline styles, add the style attribute to the relevant element. The style

19 Made By:Maryam Ayub


attribute can contain any CSS property.The example below shows how to
change the color and the left margin of a
element:
Example:
<h1 style = ”color:blue;margin-left:30px;”>This is heading </h1>
Tip: An inline style loses many of the advantages of a style sheet (by mixing
content with presentation). Use this method sparingly.

Q13: What is html? Explain its features.


Ans:
❖ Html (Hyper Text Markup Language):
Hyper Text Markup Language (HTML) is the main markup language for
creating web pages and other information that can be displayed in a web
browser. HTML is written in the form of HTML elements consisting of tags
enclosed in angle brackets (like ), within the web page content. HTML tags
most commonly come in pairs like <h1>and</h1>, although some tags, known
as empty elements, are unpaired, for example <img> .The first tag in a pair is
the start tag, and the second tag is the end tag (they are also called opening
tags and closing tags). In between these tags web designers can add text, tags,
comments and other types of text-based content.
❖ FEATURES OF HTML:
HTML5 will be the new standard for HTML.
The previous version of HTML, HTML 4.01, came in 1999.
The web has changed a lot since then. HTML5 is still a work in progress.
However, the major browsers support many of the new HTML5 elements and
APIs
✓ New Elements
✓ New Attributes
✓ Full CSS3 Support
✓ Video and Audio
✓ 2D/3D Graphics
✓ Local Storage
✓ Local SQL Database
✓ Web Applications

20 Made By:Maryam Ayub


Q14:Define Variable and its Declaring Rules in java
script.
Ans:
❖ Variable:
JavaScript variables are containers for storing data values.
In this example, x, y, and z, are variables:
Var x=5;
Var y=6;
Var z=x+y ;
❖ Java Script Identifier:
All JavaScript variables must be identified with unique names.
These unique names are called identifiers.
Identifiers can be short names (like x and y) or more descriptive names (age,
sum, total Volume).
The general rules for constructing names for variables (unique identifiers)
are:
✓ Names can contain letters, digits, underscores, and dollar signs
✓ Names must begin with a letter
✓ Names can also begin with $ and _ (but we will not use it in this tutorial)
✓ Names are case sensitive (y and Y are different variables)
✓ Reserved words (like JavaScript keywords) cannot be used as names
Q15:How Shorthand Properties used in css .Give
Example.
Ans:
Shorthand Properties: Shorthand properties are CSS properties that
let you set the values of multiple other CSS properties simultaneously. Using a
shorthand property, you can write more concise (and often more readable)
style sheets, saving time and energy.

The CSS specification defines shorthand properties to group the definition of


common properties acting on the same theme. For instance, the CSS

background :property is a shorthand property that's able to define the


values of background-color, background-image, background-repeat,

21 Made By:Maryam Ayub


and background-position. Similarly, the most common font-related
properties can be defined using the shorthand font, and the different margins
around a box can be defined using the margin shorthand.

Q16: What is the Purpose of z-index? Explain with the


help of example.
When elements are positioned, they can overlap other elements. The z-index
property specifies the stack order of an element (which element should be
placed in front of, or behind, the others).

For-example

Img {

position: absolute;

left: 0px;

top: 0px;

z-index: -1;

An element with greater stack order is always in front of an element with a


lower stack order.

Note: If two positioned elements overlap without a z-index specified, the


element positioned last in the HTML code will be shown on top.

Q17: What are main function by performed java script


statement?
Ans:
❖ Java script Functions:
A JavaScript function is a block of code designed to perform a particular task.

22 Made By:Maryam Ayub


A JavaScript function is executed when "something" invokes it (calls it).

Example
function my Function(p1, p2) {

return p1 * p2; // The function returns the product of p1 and p2

Java script Function syntax:


A JavaScript function is defined with the function keyword, followed by a
name, followed by parentheses ().

Function names can contain letters, digits, underscores, and dollar signs
(same rules as variables).

The parentheses may include parameter names separated by commas:


(parameter1, parameter2, ...)

The code to be executed, by the function, is placed inside curly brackets: {}

function name(parameter1, parameter2, parameter3)

{ code to be executed }

Function parameters are listed inside the parentheses () in the function


definition.

Function arguments are the values received by the function when it is


invoked.

Inside the function, the arguments (the parameters) behave as local variables.

A Function is much the same as a Procedure or a Subroutine, in other


programming languages.

Q18: What are main section of html pages?


Ans.
23 Made By:Maryam Ayub
The two main section of Html pages are follows;
➢ Head Section:<head> and </head> tags identify the heading or
the title of document . The tags <title> and </title> can appear only this
section.
➢ Body Section: the body of an html document contains the text that is
display on a web page .The body section is enclosed with in <body >
and</body> tags.

Q19: Write code which display order lists Burger, ice


Cream, soft drink and frozen yogurt. Each order list
should contain a nested , unorder list of favorite
flavors. provide a minimum three flavors in each
order list.
Ans:
<ol>

<li>Burger

<ul>

<li>zinger</li>

<li>cheese </li>

<li>Egg </li>

</ul>

</li>

<li> Ice cream

<ul>

<li>vanilla</li>

24 Made By:Maryam Ayub


<li> Kulfa </li>

<li>Tuti Fruity</li>

</ul>

</li>

<li> Soft Drinks

<ul>

<li>7 up </li>

<li> Dew</li>

<li>Pepsi </li>

</ul>

</li>

<li> Frozen Yogurt

<ul>

<li>Nestle </li>

<li>Olper </li>

<li>Milk pak </li>

</ul>

</li>

Q20: Write code that define five classes of paragraph


width background color margins, padding and border
style.
Ans :
25 Made By:Maryam Ayub
<html>

<head>

<title> Classes</title>

<style>

.one{ background-color:red;

width:100px;

margin:50px;

padding:50px;

border:5px solid brown;

.two { background-color:green;

width:110px;

margin:60px;

padding:60px;

border:10px solid pink;

.three { background-color: yellow;

width:120px;

margin:70px;

padding:70px;

border:15px solid red;

.four { background-color: purple;

width:130px;

26 Made By:Maryam Ayub


margin80px;

padding:80px;

border:20px solid blue;

.five { background-color: blue;

width:140px;

margin:90px;

padding:90px;

border:25px solid yellow;

</style>

</head>

<body>

<p class=”one “>This is paragraph one </p>

<p class=” two “>This is paragraph two</p>

<p class=” three “>This is paragraph three</p>

<p class=” four “>This is paragraph four</p>

<p class=” five “>This is paragraph five</p>

</body>

</html>

Q21: What is Html Dom? Explain it.


Ans :
DOM(Document Object Model):
27 Made By:Maryam Ayub
The Html Dom is Standard Object Model and programming Interface for
Html. It Defines.

✓ The html element as objects.


✓ The properties of all Html elements
✓ The methods to access all Html elements.
✓ The events for all html elements

In the other words: The Html DOM is a standard for how to get ,Change, add
,or delete Html elements.

With the Html DOM ,javascript can access and change all the elements of an
Html document.

The HTML DOM (Document Object Model);

When a web page is loaded ,the browser creates a document Object Model of
the page.The HTML DOM Model of the page .The HTML DOM model is
constructed as a tree of object.

28 Made By:Maryam Ayub


THE HTML DOM TREE OF OBJECTS

Document

Root element:
<html>

element: Root element:

<head> <html>

element: element element: element:


<href > <a> <h1>
<Title>

element: Text: “My Link” Text: “My header”


“My Title”

With the object model, java script gets all the power it needs to create
dynamic Html.

✓ Java script can change all the html elements in the page.
✓ Java script can change all the html attribute in the page.
✓ Java script can change all css styles in the page.
✓ Java script can remove existing html elements and attributes.
✓ Java script can add new html elements and attributes .
✓ Java script react to all existing html events in the page.
✓ Java script can create new html events in the page.

29 Made By:Maryam Ayub

You might also like