Ms. Amna Altaf Unit:3 Programming Fundamentals Computer Sc
Unit: 3 Programming Fundamentals
Q1. What is document object model? Explain with the help of an example?
The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a web
page in a hierarchical tree format, where each element, attribute, and piece of text is a node in this tree. The DOM
allows programming languages like JavaScript to interact with and manipulate the content and structure of web pages
dynamically.
Basic Structure of the DOM:
i. Document: The root node representing the entire document.
ii. Elements: Nodes representing HTML tags, such as <div>, <p>, <a>, etc.
iii. Attributes: Nodes representing attributes of HTML elements, such as class, id, and href.
iv. Text: Nodes representing the text content inside elements.
Example: Consider the following HTML snippet:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph.</p>
<a href="https://www.example.com">Click here</a>
</body>
</html>
In this example, the DOM structure would look like this:
Document
└── html
├── head
│ └── title
│ └── "My Web Page"
└── body
├── h1
│ └── "Welcome to My Web Page"
├── p
│ └── "This is a paragraph."
└── a
├── "Click here"
└── href="https://www.example.com"
Q2. Write the code to differentiate between different types of headings in HTML.
The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the
least important heading. Note: Only use one <h1> per page - this should represent the main heading/subject for the
whole page.
, Ms. Amna Altaf Unit:3 Programming Fundamentals Computer Sc
The main keyword of the whole content of a webpage should be display by h1 heading tag.
• <h1>Heading no. 1</h1>
• <h2>Heading no. 2</h2>
• <h3>Heading no. 3</h3>
• <h4>Heading no. 4</h4>
• <h5>Heading no. 5</h5>
• <h6>Heading no. 6</h6>
Q3. Elaborate steps & provide code to load a background image in web page.
1. Open the HTML file in text editor.
2. Within the starting <body> tag in your Html file, type <Body background=” “>
3. Give the path of the image we want to add. (Example, <Body background=”C:\Users\APS \Downloads\APS&(GC).jpg “>
4. Save the Html file in the text editor and run the file.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
{
background-image: url('any_image.jpg');
}
</style>
</head>
<body>
<p>You can specify background images <br> for any visible HTML element.<br>
</body>
</html>
Q4. With the help of sample code, highlight different methods to incorporate CSS code in a HTML page.
Ans. Following are the different methods to incorporate CSS code in a HTML page.
• Inline - by using the style attribute inside HTML elements
• Internal - by using a <style> element in the <head> section
Unit: 3 Programming Fundamentals
Q1. What is document object model? Explain with the help of an example?
The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a web
page in a hierarchical tree format, where each element, attribute, and piece of text is a node in this tree. The DOM
allows programming languages like JavaScript to interact with and manipulate the content and structure of web pages
dynamically.
Basic Structure of the DOM:
i. Document: The root node representing the entire document.
ii. Elements: Nodes representing HTML tags, such as <div>, <p>, <a>, etc.
iii. Attributes: Nodes representing attributes of HTML elements, such as class, id, and href.
iv. Text: Nodes representing the text content inside elements.
Example: Consider the following HTML snippet:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph.</p>
<a href="https://www.example.com">Click here</a>
</body>
</html>
In this example, the DOM structure would look like this:
Document
└── html
├── head
│ └── title
│ └── "My Web Page"
└── body
├── h1
│ └── "Welcome to My Web Page"
├── p
│ └── "This is a paragraph."
└── a
├── "Click here"
└── href="https://www.example.com"
Q2. Write the code to differentiate between different types of headings in HTML.
The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the
least important heading. Note: Only use one <h1> per page - this should represent the main heading/subject for the
whole page.
, Ms. Amna Altaf Unit:3 Programming Fundamentals Computer Sc
The main keyword of the whole content of a webpage should be display by h1 heading tag.
• <h1>Heading no. 1</h1>
• <h2>Heading no. 2</h2>
• <h3>Heading no. 3</h3>
• <h4>Heading no. 4</h4>
• <h5>Heading no. 5</h5>
• <h6>Heading no. 6</h6>
Q3. Elaborate steps & provide code to load a background image in web page.
1. Open the HTML file in text editor.
2. Within the starting <body> tag in your Html file, type <Body background=” “>
3. Give the path of the image we want to add. (Example, <Body background=”C:\Users\APS \Downloads\APS&(GC).jpg “>
4. Save the Html file in the text editor and run the file.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
{
background-image: url('any_image.jpg');
}
</style>
</head>
<body>
<p>You can specify background images <br> for any visible HTML element.<br>
</body>
</html>
Q4. With the help of sample code, highlight different methods to incorporate CSS code in a HTML page.
Ans. Following are the different methods to incorporate CSS code in a HTML page.
• Inline - by using the style attribute inside HTML elements
• Internal - by using a <style> element in the <head> section
