Concepts of Web Technology(Book Exercise)

Concepts of Web Technology(Book Exercise) - Grade 9

Book Exercise Solutions

1. Write the Full Forms of the Following Abbreviations

S.N.	Abbreviation	Full Form
i.	HTML	HyperText Markup Language
ii.	CSS	Cascading Style Sheets
iii.	PHP	Hypertext Preprocessor
iv.	MySQL	My Structured Query Language
v.	UX	User Experience
vi.	UI	User Interface
vii.	URL	Uniform Resource Locator

2. Multiple Choice Questions

Which of the following is the correct HTML tag for the largest heading?
Answer: b. <h1>
Which tag is used to create a hyperlink in HTML?
Answer: b. <a>
What is the correct way to insert an image in HTML?
Answer: b. <img src="image.jpg">
Which of the following tags is used for creating a table in HTML?
Answer: d. All of the above
What is the correct HTML element for inserting a line break?
Answer: a. <br>
What does CSS stand for?
Answer: b. Cascading Style Sheets
Which of the following is used to apply styles directly within an HTML element?
Answer: b. Inline CSS

3. Give Appropriate Technical Terms for the Following

The various languages and multimedia packages that work together to create dynamic websites.
Answer: Web Technology
A server-side scripting language that is used for developing dynamic web pages and applications.
Answer: PHP (Hypertext Preprocessor)
The presentation layer that is made up of HTML, CSS, and JavaScript.
Answer: Front End
The hidden realm of servers and databases that provides data storage and services for the front end.
Answer: Back End
An effective tool for developing complex wireframes and high-fidelity prototypes.
Answer: Figma
A tag that comes in a pair, consisting of an opening tag and a closing tag.
Answer: Paired Tag (Container Tag)
A tag that does not have a closing tag or any content inside it.
Answer: Singular Tag (Empty Tag)
A scrolling piece of text displayed either horizontally across or vertically down.
Answer: Marquee
A collection of related items that have no special order or sequence.
Answer: Unordered List
A list of items with a description or definition of each item.
Answer: Description List
A single-line text input that masks the character as soon as a user enters it.
Answer: Password Field (Password Input)

4. Short Answer Questions

Define tag. Differentiate between paired tag and singular tag with examples.

Answer:

A tag is a markup instruction enclosed within angle brackets (< >) that tells the web browser how to display content on a webpage.

Paired Tag	Singular Tag
Has both opening and closing tags.	Has only one tag and no closing tag.
Contains content between the tags.	Does not contain any content.
Example: <p>Hello</p>	Example: <br>, <hr>, <img>

What is meant by attributes? Explain.
Answer:

Attributes are special properties added to HTML tags to provide additional information about an element. They are written inside the opening tag in the form attribute="value".

Example:
```
    <img src="photo.jpg" width="200">
    
```
Here, src and width are attributes.

Explain the structure of HTML with an example.
Answer:

An HTML document consists of the following main sections:
- <html> – Root element of the webpage.
- <head> – Contains title and other information about the webpage.
- <title> – Displays the webpage title on the browser tab.
- <body> – Contains all visible webpage contents.
Example:
```
    <!DOCTYPE html>
    <html>
    <head>
        <title>My Webpage</title>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>Hello World</p>
    </body>
    </html>
    
```

How is the font tag used? What are its attributes?
Answer:

The <font> tag is used to change the appearance of text such as its color, size and font face.

Main Attributes:
- color – Changes text color.
- size – Changes text size.
- face – Changes font style.
Example:
```
    <font color="red" size="5" face="Arial">
    Hello
    </font>
    
```

Name the tags for breaking paragraphs and lines.
Answer:
- <p> – Creates a new paragraph.
- <br> – Inserts a line break.
- <hr> – Inserts a horizontal line.

What are the different types of lists used in HTML?
Answer:

The three types of lists in HTML are:
- Ordered List (<ol>) – Displays items in numbered order.
- Unordered List (<ul>) – Displays items using bullets.

What is a hyperlink? Give example.
Answer:

A hyperlink is a clickable text or image that connects one webpage to another webpage or resource. It is created using the <a> tag.

Example:
```
    <a href="https://www.google.com">
    Visit Google
    </a>
    
```

Is it possible to insert an image to the web page? If yes, then how?
Answer:

Yes. Images can be inserted using the <img> tag. The src attribute specifies the image location.

Example:
```
    <img src="flower.jpg" width="200">
    
```

What are the main HTML tags used in <table>?

Answer:

Tag	Purpose
<table>	Creates a table.
<tr>	Creates a row.
<th>	Creates a table heading.
<td>	Creates a table data cell.
<caption>	Adds a table title.

What are the types of text input used on forms? Explain in brief.

Answer:

Input Type	Description
Text	Accepts normal text.
Password	Hides entered characters.
Email	Accepts email addresses.
Number	Accepts numeric values.
Textarea	Allows multi-line text input.

What is CSS? Write its syntax.
Answer:

CSS (Cascading Style Sheets) is defined as a programming technology used in web development for styling webpages into animation and beautification.

Syntax:
```
    selector{
        property: value;
    }
    
```
Example:
```
    h1{
        color: blue;
    }
    
```

What are the types of CSS?
Answer:
1. Inline CSS – Written inside the HTML element using the style attribute.
2. Internal CSS – Written inside the <style> tag in the <head> section.
3. External CSS – Written in a separate .css file and linked using the <link> tag.

5. Long Answer Questions

Explain the basic structure of an HTML document. Describe the purpose of each section, including <html>, <head>, and <body>. Provide an example of a simple HTML document.
Answer:

Every HTML document follows a standard structure that helps browsers correctly display webpages.
- <html> is the root element that contains the entire webpage.
- <head> contains information about the webpage such as title, CSS links and metadata.
- <title> displays the webpage title on the browser tab.
- <body> contains all visible webpage contents such as headings, paragraphs, images and tables.
Example:
```
    <html>
    <head>
        <title>My Webpage</title>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my first webpage.</p>
    </body>
    </html>
    
```

What are HTML attributes? Discuss their role with examples. Mention attributes like src and href.
Answer:

HTML attributes provide additional information about HTML elements. They are written inside the opening tag and usually appear as attribute="value".

Role of Attributes:
- Provide additional information about an element.
- Control the behavior and appearance of HTML elements.
- Help browsers display content correctly.
Common Attributes:
- src – Specifies the location of an image.
- href – Specifies the destination of a hyperlink.
- width – Sets element width.
- height – Sets element height.
- alt – Displays alternate text for images.
Examples:
```
    <img src="flower.jpg" width="200">

    <a href="https://www.google.com">
    Google
    </a>
    
```

How are forms created in HTML? Explain the different input types and attributes used to build a functional form. Include an example of a complete HTML form.
Answer:

Forms are created using the <form> tag. They allow users to enter information that can be submitted to a server.

Common Input Types:
- Text
- Password
- Email
- Radio Button
- Checkbox
- Submit Button
- Reset Button
Common Attributes:
- name
- value
- placeholder
- required
- action
- method
Example:
```
    <form>
    Name:
    <input type="text">

    Password:
    <input type="password">

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

What are lists in HTML? Explain the difference between ordered lists and unordered lists with examples.

Answer:

Lists are used to display related items in an organized manner.

Ordered List	Unordered List
Uses numbers or letters.	Uses bullets.
Created using <ol>.	Created using <ul>.
Suitable for steps.	Suitable for general items.

Example:

    <ol>
    <li>HTML</li>
    <li>CSS</li>
    </ol>

    <ul>
    <li>Apple</li>
    <li>Orange</li>
    </ul>

What is the role of hyperlinks in HTML? Describe the use of the <a> tag and its attributes.
Answer:

Hyperlinks connect webpages, files or websites together. They allow users to navigate from one page to another.

The hyperlink is created using the <a> tag.

Important Attributes:
- href – Specifies the destination.
- target – Opens the page in the same or a new tab.
- title – Displays tooltip text.
Example:
```
    <a href="https://www.google.com" target="_blank">
    Visit Google
    </a>
    
```

Discuss the importance of the <table> element in HTML. Explain the structure of an HTML table, including rows, columns, and attributes like border, colspan, and rowspan.
Answer:

The <table> element in HTML is used to display information in the form of rows and columns. It helps organize large amounts of related data into a neat and readable format, making it easier for users to understand and compare information. HTML tables are commonly used to display student records, timetables, marksheets, product lists, and many other types of tabular data.

Structure of an HTML Table:
- <table> – Creates the table.
- <tr> (Table Row) – Creates a new row in the table.
- <th> (Table Heading) – Creates heading cells. The text appears bold and centered by default.
- <td> (Table Data) – Creates normal data cells inside a row.
- <caption> – Adds a title or caption to the table.
Important Table Attributes:
- border – Displays a border around the table and its cells.
- colspan – Merges two or more columns into a single cell.
- rowspan – Merges two or more rows into a single cell.
Example:
```
    <table border="1">
        <caption>Student Details</caption>

        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>

        <tr>
            <td>Ram</td>
            <td>16</td>
        </tr>
    </table>
    
```
Thus, HTML tables provide an effective way to organize and present data in a structured format. Attributes like border, colspan, and rowspan make tables more flexible and visually organized.

What is CSS? Discuss the three types of CSS (inline, internal, and external) with examples.
Answer:

CSS (Cascading Style Sheets) is a style sheet language used to control the appearance and layout of HTML webpages. It is used to add colors, fonts, backgrounds, spacing, borders, animations, and many other design features to webpages. CSS separates the webpage content from its presentation, making websites easier to design, update, and maintain.

Types of CSS:

1. Inline CSS
- CSS is written directly inside an HTML element using the style attribute.
- It affects only the specific element in which it is written.
Example:
```
    <p style="color:red;">Hello World</p>
    
```
2. Internal CSS
- CSS is written inside the <style> tag within the <head> section of an HTML document.
- It applies styles to only that particular webpage.
Example:
```
    <head>
        <style>
            p{
                color:blue;
            }
        </style>
    </head>
    
```
3. External CSS
- CSS is written in a separate file having the .css extension.
- The HTML document is connected to the stylesheet using the <link> tag.
- This is the most recommended method because one stylesheet can be used to style multiple webpages.
Example:
```
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    
```
style.css
```
    p{
        color:green;
        font-size:18px;
    }
    
```