Chapter 3: Programming Fundamentals (Web Development)

Select the suitable answer for the following Multiple Choice Questions (MCQs).

1) Everything in HTML is identified on the basis of __.

a) Brackets

b) Title

c) Tags

d) Image

Answer: c) Tags

Explanation: HTML (HyperText Markup Language) uses tags to define the structure and content of a web page. Tags are enclosed in angle brackets (e.g., <p>, <h1>).

2) The output of HTML code is visible in __.

a) Notepad

b) File

c) Browser

d) Spreadsheet

Answer: c) Browser

Explanation: HTML code is interpreted by a web browser (e.g., Chrome, Firefox, Edge) to render the visual web page.

3) Name of a web page can be given using __ tag.

a) Body

b) Title

c) Head

d) Footer

Answer: b) Title

Explanation: The <title> tag, placed inside the <head> section, specifies the title of the web page, which appears in the browser tab or window title bar.

4) Main parts of a document are arranged in __ tag.

a) Head

b) Title

c) Body

d) Line Break

Answer: c) Body

Explanation: The <body> tag contains all the visible content of a web page, such as text, images, links, and tables.

5) The heading tag-pair for 5th level heading is __.

a) <h5 ... h5>

b) <h3 ... h5>

c) <h5> ... </h5>

d) <h5> ... </h5>

Answer: c) <h5> ... </h5> (Options c and d are identical and correct)

Explanation: HTML heading tags range from <h1> (largest) to <h6> (smallest). The 5th level heading is <h5>, and its closing tag is </ h5>.

6) Span is used to provide __ to a line.

a) Font

b) Border

c) Style

d) Color

Answer: c) Style

Explanation: The <span> tag is an inline container used to apply styles (e.g., color, font) to a specific portion of text without starting a new line.

7) First row of table in HTML is called __.

a) Title row

b) Top Row

c) Header Row

d) Upper Row

Answer: c) Header Row

Explanation: The first row of an HTML table, typically containing column headings, is defined using the <th> (table header) tag and is often referred to as the header row.

8) p tag-pair is used for __.

a) Print

b) Page align

c) Page break

d) Paragraph

Answer: d) Paragraph

Explanation: The <p> tag is used to define a paragraph of text in HTML.

9) A variable cannot start with a __.

a) Alphabet

b) Number

c) Character

d) String

Answer: b) Number

Explanation: In most programming languages (including JavaScript), a variable name cannot begin with a number. It must start with a letter, underscore, or dollar sign.

10) The first value assigned to a variable after declaration is called __.

a) Beginning value

b) Starting value

c) Initialization

d) Substitution

Answer: c) Initialization

Explanation: Initialization is the process of assigning an initial value to a variable when it is declared.

1) Contrast between website and web application.

Answer:

2) What is 'href' refers to and how to use it?

Answer: href stands for Hypertext Reference. It is an attribute used in the <a> (anchor) tag to specify the URL (web address) of the page or resource the link goes to.

Usage: <a href="https://www.example.com">Click here</a>. The text "Click here" becomes a clickable link that navigates to the specified URL.

3) Enlist the optional parameters to open a webpage.

Answer: Optional parameters (attributes) for opening a webpage in a new tab include:

4) List out the frequent tags used in text of a webpage and what are they used for?

Answer: Frequent text tags in HTML:

<h1> to <h6>: Headings of different levels. <p>: Paragraphs of text. <b> or <strong>: Bold text. <i> or <em>: Italic text. <u>: Underlined text. <br>: Line break. <span>: Inline container for styling.

5) Explain the role of <body> tag-pair in a document.

Answer: The <body> tag defines the document's body. It contains all the visible contents of a web page, including text, images, hyperlinks, tables, lists, and more. Everything you see in the browser window (except the title bar) is placed within the <body> tag. There can only be one <body> tag in an HTML document.

6) How the event based code is used in JavaScript?

Answer: Event-based code in JavaScript responds to user actions or system events (e.g., clicking a button, hovering over an element, pressing a key). Event handlers (e.g., onclick, onmouseover) are attached to HTML elements to execute JavaScript code when the

event occurs. Example: <button onclick="alert('Hello!')">Click Me</button>.

7) Infer about the External CSS? Where are External CSS generally used?

Answer: External CSS is a separate .css file that contains all the styling rules for a website. It is linked to HTML documents using the <link> tag in the <head> section. External CSS is generally used for large websites to maintain consistency across multiple pages. It separates content (HTML) from presentation (CSS), making the code cleaner and easier to maintain.

1) What is Document Object Model? Explain with the help of an example.

Answer: The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as a tree of objects (nodes). Each HTML element, attribute, and text is a node in this tree. JavaScript can access and manipulate these nodes to create dynamic and interactive web pages.

How it Works: When a web page is loaded, the browser creates the DOM of the page. The root of the tree is the document object. From there, it branches out to <html>, <head>, <body>, and all other elements.

Example:

Consider the following HTML:

html

In the DOM, this is represented as a tree:

document

<html>

<head>

<title> (text: "My Page")

<body>

Manipulating the DOM:

JavaScript can change the text of the header:

javascript

document.getElementById("header").innerHTML = "Hello, World!";

This demonstrates how the DOM allows dynamic interaction with web pages.

2) Write code to differentiate between different types of headings in HTML.

Answer: HTML provides six levels of headings, from <h1> to <h6>. <h1> is the largest and most important, while <h6> is the smallest and least important.

Code:

html

Explanation:

Browsers render these headings with different font sizes and weights by default. Headings help structure content and improve SEO.

3) Elaborate steps and provide code to load a background image in a webpage.

Answer: To load a background image in a webpage, you use the CSS background-image property.

Steps:

1. Prepare the image file and place it in your project folder.

2. Use the background-image property in CSS.

3. Optionally, use background-size, background-repeat, and background-position to control the display.

Code:

html

Explanation:

background-image: url('background.jpg'); sets the image. background-size: cover; ensures the image covers the entire page. background-repeat: no-repeat; prevents tiling. background-position: center; centers the image.

4) With the help of sample code, highlight different methods to incorporate CSS style code in a HTML webpage.

Answer: There are three methods to incorporate CSS into an HTML webpage:

1. Inline CSS:

Applied directly to an HTML element using the style attribute.

Code: <h1 style="color: blue; font-size: 24px;">Inline CSS</h1>

2. Internal CSS:

Defined within the <style> tag in the <head> section. Code:

html

<head> <style> h1 { color: red; text-align: center; } </style> </head>

3. External CSS:

Written in a separate .css file and linked using the <link> tag.

Code (HTML): <link rel="stylesheet" type="text/css" href="style.css"> Code (style.css): h1 { color: green; font-family: Arial; }

Comparison:

Inline: Quick, but not reusable. Internal: Good for single-page styling. External: Best for multi-page websites; promotes consistency.

5) Sketch steps and provide code to apply border and color to a table in a webpage.

Answer: Steps:

1. Create a <table> element.

2. Add rows (<tr>) and cells (<td> or <th>).

3. Use CSS to apply border and background-color or color.

Code:

html

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th { background-color: #f2f2f2; } td { color: blue; } </style> </head> <body> <table> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Alice</td> <td>25</td> </tr> <tr> <td>Bob</td> <td>30</td>

Explanation:

6) Discuss the functionality JavaScript can provide in a webpage with the help of a suitable example code.

Answer: JavaScript adds interactivity and dynamic behavior to web pages.

Functionality:

Form Validation: Checking user input before submission. Event Handling: Responding to clicks, hovers, and key presses. DOM Manipulation: Changing HTML and CSS dynamically. Animations: Creating visual effects. Asynchronous Requests: Fetching data without reloading the page (AJAX).

Example: Interactive Button

html

<script> function changeText() {

document.getElementById("demo").innerHTML = "You clicked the button!";

document.getElementById("demo").style.color = "blue"; } </script> </body> </html>

Explanation: When the button is clicked, the changeText() function runs, changing the text and color of the heading dynamically. This demonstrates how JavaScript makes web pages interactive.

Activity 1

Create a webpage with heading 'My First Webpage' and a paragraph introducing yourself.

Answer:

html

Activity 2

Create a webpage having an image and a caption below it.

Answer:

html

Activity 3

Create a list of your favorite food items and get it displayed using an ordered list.

Answer:

html

<!DOCTYPE html> <html> <body> <h2>My Favorite Food Items</h2> <ol> <li>Pizza</li> <li>Biryani</li> <li>Burgers</li> <li>Ice Cream</li> <li>Pasta</li> </ol> </body> </html>

Activity 4

Add 5 sentence using an unordered list such that odd-numbered sentences should be bold and even-numbered should be Italicized.

Answer:

html

<ul> <li><b>This is the first sentence (Bold).</b></li> <li><i>This is the second sentence (Italic).</i></li> <li><b>This is the third sentence (Bold).</b></li> <li><i>This is the fourth sentence (Italic).</i></li> <li><b>This is the fifth sentence (Bold).</b></li> </ul> </body> </html>

Activity 5

Create a table to display a weekly schedule of your self-study.

Answer:

html

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 8px; } </style> </head> <body> <h2>Weekly Self-Study Schedule</h2> <table>

<tr> <th>Day</th> <th>Subject</th> <th>Time</th> </tr> <tr><td>Monday</td><td>Mathematics</td><td>5:00 - 7:00 PM</td></tr> <tr><td>Tuesday</td><td>Physics</td><td>5:00 - 7:00 PM</td></tr> <tr><td>Wednesday</td><td>Chemistry</td><td>5:00 - 7:00 PM</td></tr> <tr><td>Thursday</td><td>Biology</td><td>5:00 - 7:00 PM</td></tr> <tr><td>Friday</td><td>Computer Science</td><td>5:00 - 7:00 PM</td></tr> <tr><td>Saturday</td><td>Revision</td><td>10:00 - 1:00 PM</td></tr> <tr><td>Sunday</td><td>Rest</td><td>-</td></tr> </table> </body> </html>

Activity 6

Create a list of subjects like 'HTML', 'CSS' and 'JavaScript' when clicked a new tab opens up. Relevant keywords and a logo (or image) should be displayed on the new tab.

Answer:

html

<!DOCTYPE html> <html> <body> <h2>My Subjects</h2> <ul>

<li><a href="html.html" target="_blank">HTML</a></li>

<li><a href="css.html" target="_blank">CSS</a></li>

<li><a href="javascript.html" target="_blank">JavaScript</a></li> </ul> </body> </html>

(Each linked page (html.html, css.html, javascript.html) would contain relevant keywords and an image/logo.)

Activity 7

Take a number as input from the user and write a program to calculate the grade of the student in a particular subject. If the number is greater than equal to 90 assign A+ grade, for 80 and above but below 90, A-grade is designated. Similarly in the range of 70-79, B grade needs to be awarded. If the number lies between 60-69, C grade should be printed. In case the number is between 50 and 59, D grade and less than 50, F grade should be displayed on screen.

Answer:

html

if (marks >= 90)

grade = "A+";

} else if (marks >= 80)

grade = "A";

} else if (marks >= 70)

grade = "B";

} else if (marks >= 60)

grade = "C";

} else if (marks >= 50)

grade = "D"; } else

grade = "F"; }

Activity 8

Create a timetable for the subjects mentioned in the Fig-16, and display on a new page by providing a 'Time Table' link on the main page.

Answer: (This is a practical activity. Create a main page with a link <a href="timetable.html">Time Table</a>, and a separate timetable.html page displaying a structured table.)

Activity 9

Using '' and '/' draw a big 'X', as shown:

Answer:

html

<!DOCTYPE html>

<html> <body> <pre> \ / \ / \ / \ / \ / X / \ / \ / \ / \ / \ </pre> </body> </html>