0% found this document useful (0 votes)
5 views30 pages

Module 1

The document outlines the course structure and content for a program in Business Ethics and Corporate Social Responsibility at Rabindranath Tagore University. It includes details on course objectives, learning outcomes, and modules covering HTML, CSS, JavaScript, Bootstrap, React, MongoDB, and Node.js. The document emphasizes the importance of understanding web technologies and their applications in modern web development.
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
5 views30 pages

Module 1

The document outlines the course structure and content for a program in Business Ethics and Corporate Social Responsibility at Rabindranath Tagore University. It includes details on course objectives, learning outcomes, and modules covering HTML, CSS, JavaScript, Bootstrap, React, MongoDB, and Node.js. The document emphasizes the importance of understanding web technologies and their applications in modern web development.
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

[6CMCO302]

[BUSINESS ETHICS AND CORPORATE SOCIAL


RESPONSIBILITY]

RABINDRANATH TAGORE UNIVERSITY


Mendua, Post: Bhojpur, Chiklod Road, near Bangrasiya Chouraha,
Bhopal, (M.P) 464993 | info@[Link]. | 0755-2700447
BCBM102T
DISCRETE MATHEMATICS
Credit- 6

Subject Expert Team

Dr. Pooja Bijlani


Associate Professor
Scope Global Skills University, Bhopal

Reviewed By:

Dr. Abhishek Shukla


Associate Professor, Dr. C. V. Raman Univiserity, Bilaspur

Course Edited By:

Unit Written By:

Dr. Bhawna Agrawal


Associate Professor, Rabindranath Tagore University, Bhopal

SLM Formatted & Designed By:

Mrs. Preeti Rathode Mr. Hariom Ahirwar


Executive Executive Designer
Dept. MOOCs & Content, AISECT Ltd., Dept. MOOCs & Content, AISECT Ltd.,
Bhopal Bhopal

Warning: All rights reserved, No part of this publication may be reproduced or


transmitted or utilized or stored in any form or by any means now known or hereinafter
invented, electronic, digital or mechanical, including photocopying, scanning, recording
or by any information storage or retrieval system, without prior written permission from
the publisher.
Edition:
2025
Published by: RABINDRANATH TAGORE UNIVERSITY
Mendua, Post: Bhojpur, Near Bangrasiya chouraha, Bhopal-Chiklod Road,
District: Raisen, (M.P.)
Ph. 0755-2700447, Website: [Link] E-mail: info@[Link]
STRUCTURE OF PROGRAM

Title of the Program : [prog. Name]


Program Type : Undergraduate or postgraduate
Program Credits : [total credit]
Program Duration : [in years]
Eligibility Criteria : …th Pass

PROGRAMME OBJECTIVE

● [take from the curriculum]

PROGRAMME OUTCOME

● [take from the curriculum]

PROGRAMME SPECIFIC OUTCOME

● [take from the curriculum]


STRUCTURE OF COURSE
Course Title : Junior Software Developer
Course Type : B-Voc
Course Code :
Course Credits :
Semester :

COURSE LEARNING OBJECTIVES:

● [take from the curriculum]

COURSE LEARNING OUTCOMES:

● [take from the curriculum]

● .
Course Content
Module 1 HTML Page no
1.1 Introduction to HTML 4
1.2 Browsers and HTML 5
1.3 Editor’s Offline and Online 6
1.4 Tags, Attribute and Elements 6
1.5 Doctype Element 8
1.6 Comments 9
1.7 Headings, Paragraphs, and Formatting Text 10
1.8 Lists and Links 12
1.9 Images and Tables 14
Module 2 CSS
2.1 Introduction CSS 19
2.2 Applying CSS to HTML 19
2.3 Selectors, Properties and Values 23
2.4 CSS Colors and Backgrounds 24
2.5 CSS Box Model 25
2.6 CSS Margins, Padding, and Borders 25
2.7 CSS Text and Font Properties 26
Module 3 Java Script

3.1 Introduction to JavaScript 31


3.2 Applying JavaScript (internal and external) 32
3.3 Understanding JS Syntax 33
3.4 Introduction to Document and Window Object 36
3.5 Variables and Operators 38
3.6 Data Types and Num Type Conversion 40
3.7 Math and String Manipulation 41
3.8 Objects and Arrays 43
3.9 Date and Time 46
3.1o Conditional Statements 47
3.11 Switch Case 48
3.12 Looping in JS 48
3.13 Functions 50
Module 4 Bootstrap

4.1 What is Bootstrap? 54


4.2 How to include Bootstrap to project ? 61
4.3 Bootstrap Grid System 64
4.4 Bootstrap Components 78
4.5 Customizing Bootstrap 80
4.6 Example : Portfolio Website 81
4.7 E-commerce Product Page 98
Module 5 React
5.1 Introduction to React 103
5.2 React Environment Setup 106
5.3 What is JSX? 108
5.4 React JS Virtual Dom 110
5.5 React Lists 112
5.6 React Conditional Rendering 117
5.7 How to Handle User Events 118
5.8 How to build Forms in React 120
5.9 How to Handle Form Submission 122
5.1o Network Requests in React 126
Module 6
MongoDB
6.1 Introduction to MongoDB
6.2 Installation on Windows
6.3 Installing MongoDB Compass
6.4 Basic MongoDB Commands
6.5 Create Operation
6.6 Read Operation
6.7 Update Operation
6.8 Delete Operation
6.9 Sort and limit data
6.1o Signing up on MongoDB Atlas
6.11 Operators and Complex Queries
6.12 Aggregation Pipeline

Module 7 Node
JS /Express JS
7.1 Introduction to Node js
7.2 Installation of Node
7.3 Write your first script
Understanding the role of server in rendering static
7.4 and dynamic web
7.5 Core module in Nodejs
7.6 Making basic Server output on Browser
7.7 [Link]
7.8 Express JS
7.9 Creating Simple API
7.1o How to render HTML and JSON
How to render HTML pages using EJS template
7.11 engine

Subject 8 MERN
CRUD Operation

8.1 Setup frontend and backend first


8.2 Create you first API
8.3 Install MongoDB locally
8.4 Connect mongodb with nodejs
8.5 Create a schema and model
8.6 Create Operation
8.7 Read Operation
8.8 Delete Operation
8.9 Update Operation
8.1o Lets build frontend
8.11 Setting up Routing using react-router-dom
8.12 Create form and submit data to backend
8.13 Displaying all the data on the UI
8.14 Deleting the data
8.15 Updating User data from frontend
8.16 Adding Links of Navbar
Project
INTRODUCTION AND NATURE OF SOCIOLOGY

NOTE
UNIT 1 NOTE
HTML
UNIT STRUCTURE
1.1 Introduction to HTML

1.2 Browsers and HTML

1.3 Editor’s Offline and Online

1.4 Tags, Attribute and Elements

1.5 Doctype Element

1.6 Comments

1.7 Headings, Paragraphs, and Formatting Text

1.8 Lists and Links

1.9 Images and Tables

OBJECTIVES
 Recognize the fundamental structure of HTML, including elements, tags,
and their relationships.
 Comprehend the role of HTML in defining the layout and structure of web
pages.
 Identify and explain the key features of HTML, such as structure, markup,
attributes, and document organization.
 Demonstrate the use of HTML elements like headings, paragraphs, lists,
links, and images.
 Understand the compatibility of HTML across different web browsers.

1.1 INTRODUCTION
Hypertext Markup Language, is a standard markup language used to create the
structure and layout of web pages. It serves as the backbone of web content by
defining the elements and their relationships within a document. HTML consists
of a series of elements, each represented by tags, which enclose content and
provide information about how that content should be displayed on a web
browser.

Key features of HTML include:

 Structure: HTML defines the basic structure of a web page, including


headings, paragraphs, lists, links, images, forms, and more.

|3
 Markup: HTML uses a system of tags to mark different parts of content.
Tags are typically paired, with an opening tag to start the element and a
closing tag to end it.
Example:
<p>This is a paragraph.</p>
 Attributes: HTML elements can have attributes that provide additional
information about the element. Attributes are included within the
opening tag.
Example:
<a href="[Link] [Link]</a>

 Document Structure: An HTML document follows a specific structure,


including the <!DOCTYPE html> declaration, the <html> element as the
root, the <head> section for meta-information, and the <body> section
for the main content.

Example: <!DOCTYPE html>


<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

 Hyperlinks: HTML allows the creation of hyperlinks that connect web


pages, enabling navigation between different pages on the internet.

HTML works in conjunction with other web technologies, such as CSS (Cascading
Style Sheets) for styling and layout, and JavaScript for interactivity and dynamic
behavior. Together, these technologies form the basis for creating modern and
interactive websites. HTML is constantly evolving, with the latest version being
HTML5, which introduced new features to enhance multimedia support, improve
semantics, and facilitate better web development practices.

1.2 BROWSERS AND HTML

You can use virtually any modern web browser to view and interact with HTML
content. Here are some popular web browsers that support HTML:
 Google Chrome: Chrome is a widely used web browser developed by
Google. It supports HTML5 and is known for its speed and robust NOTE
performance.
 Mozilla Firefox: Firefox is an open-source web browser that supports
HTML5 and is known for its privacy features and customization options.
 Microsoft Edge: Edge is Microsoft's web browser that comes pre-installed
with Windows 10. It supports HTML5 and is designed for speed, security,
and compatibility.
 Safari: Safari is the default web browser for Apple devices, including Mac
computers, iPhones, and iPads. It is known for its performance and
energy efficiency. Safari supports HTML5.
 Opera: Opera is a lesser-known but feature-rich web browser that
supports HTML5. It includes a variety of built-in features, such as a free
VPN and ad blocker.
 Brave: Brave is a privacy-focused web browser that is built on Chromium
(the same open-source project that powers Google Chrome). It supports
HTML5 and emphasizes speed and privacy.
 Internet Explorer (deprecated): Internet Explorer was once a dominant
browser, but it is now considered outdated and has been largely replaced
by Microsoft Edge. If you're using an older system, you might still
encounter Internet Explorer, but it's recommended to use a more modern
browser for better security and compatibility.

It's a good practice to test your HTML content across different browsers to
ensure that it renders consistently and functions correctly for users on various
platforms. Additionally, keep in mind that browsers are regularly updated, so
staying informed about the latest versions and updates is important for web
developers.

1.3 EDITOR’S OFFLINE AND ONLINE

When working with HTML, you have the option to use either offline or online
editors, depending on your preferences and requirements. Here's an overview of
both types:

Offline HTML Editors:

 Notepad (Windows): Notepad is a basic text editor that comes pre-


installed on Windows. While it lacks advanced features specific to web
development, you can still create and edit HTML files with it.
 Visual Studio Code: Visual Studio Code (VSCode) is a popular, free, and
open-source code editor developed by Microsoft. It offers excellent

|5
support for HTML and provides features such as syntax highlighting,
autocompletion, and integrated Git support.
 Sublime Text: Sublime Text is a lightweight yet powerful text editor that
is widely used by developers. It supports HTML and other programming
languages and offers a variety of plugins to enhance functionality.
 Atom: Atom is an open-source text editor developed by GitHub. It's highly
customizable and has a built-in package manager for adding features and
themes. Atom supports HTML and includes useful features for web
development.
 Brackets: Brackets is a lightweight, open-source text editor specifically
designed for web development. It has features like live preview and
preprocessor support, making it a good choice for HTML, CSS, and
JavaScript development.

Online HTML Editors:

 CodePen: CodePen is an online development environment for front-end


developers. It allows you to write HTML, CSS, and JavaScript in an editor,
and see the results in real-time. It's often used for creating and sharing
web projects.
 JSFiddle: JSFiddle is an online IDE that supports HTML, CSS, and
JavaScript. It provides separate panels for HTML, CSS, and JavaScript,
making it easy to experiment with code and see the results immediately.
 [Link]: [Link] is an online platform that supports a variety of
programming languages, including HTML. It provides an integrated
development environment in the browser, allowing you to code and run
projects without any local setup.
 StackBlitz: StackBlitz is an online IDE for web development that supports
HTML, CSS, and JavaScript. It's often used for Angular and React
development, but you can also create simple HTML projects.
 Codiad (Self-hosted): If you prefer a self-hosted solution, you can use an
online code editor like Codiad. It allows you to set up your own instance
of an online IDE on a server.
 Choose the editor that best fits your workflow and requirements,
whether you prefer the convenience of an online editor or the flexibility
of an offline one.

1.4 TAGS, ATTRIBUTE AND ELEMENTS

In HTML, tags, attributes, and elements are fundamental concepts that define the
structure and content of a web page. Let's break down each of these terms:

1.4.1 Tags:
Tags are the building blocks of HTML. They are used to define elements on a web
page. Tags are written with angle brackets, and most come in pairs: an opening NOTE
tag <tag> and a closing tag </tag>.

<p>This is a paragraph.</p>

Note: Some tags are self-closing and do not have a closing tag, like the <img> tag.

1.4.2 Attributes:

Attributes provide additional information about HTML elements. They are


always included in the opening tag and are written as name-value pairs.

attribute="value"

Example:

<a href="[Link] [Link]</a>

Note: Not all elements have attributes, but many do. Attributes modify the
behavior or appearance of an element.

1.4.3 Elements:

An element consists of an opening tag, content, and a closing tag. It represents a


complete, deployable unit on a web page.

<tag>content</tag>

Example:

<h1>This is a Heading</h1>

Note: Elements can be nested, meaning one element can contain other elements.

Example with Tags, Attributes, and Elements:

<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<a href="[Link] >Visit
[Link]</a>
<img src="[Link]" alt="Description">
</body>

|7
</html>

Description of these tags :

<html> is the root element.

<head> contains meta-information about the document.

<title> sets the title of the document.

<body> contains the main content of the document.

<h1> is a heading element.

<p> is a paragraph element.

<a> is a link element with the href attribute.

<img> is an image element with the src and alt attributes.

Understanding how tags, attributes, and elements work together is essential for
creating well-structured and semantically meaningful HTML documents.

1.5 <!DOCTYPE> ELEMENT

The <!DOCTYPE> declaration, often referred to as the "DOCTYPE element" or


"DOCTYPE declaration," is a crucial part of an HTML document. It is not an HTML
tag, but rather a document type declaration that informs the web browser about
the version of HTML or XHTML in which the document is written.

The <!DOCTYPE> declaration is placed at the very beginning of an HTML


document, before the <html> tag. Its purpose is to define the type and version of
the document, allowing browsers to render the content correctly.

Example

<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>

In the example above, <!DOCTYPE html> declares that the document is written in
HTML5. HTML5 is the latest version of the HTML specification, and using this
declaration helps browsers interpret the document in the context of the HTML5
standard. NOTE

Purpose of the <!DOCTYPE> Declaration:

 Document Type Identification: It specifies the version of HTML or XHTML


in use. Browsers use this information to render the document correctly,
as different HTML versions may have variations in syntax and features.
 Quirks Mode vs. Standards Mode: The <!DOCTYPE> declaration also
influences the rendering mode of the browser. In standards mode,
browsers adhere more closely to W3C specifications, while quirks mode
may emulate older, less strict rendering behavior.
 Validation: The <!DOCTYPE> declaration is used for document validation.
It helps ensure that the HTML document follows the correct syntax and
structure.
 Compatibility: Including the correct <!DOCTYPE> declaration ensures
better cross-browser compatibility, as browsers use it to determine how
to interpret and display the document.

For HTML5 documents, <!DOCTYPE html> is the standard declaration. However,


in older HTML versions or XHTML, different declarations were used. It's
important to use the appropriate <!DOCTYPE> declaration for the specific
version of HTML you are working with to ensure proper rendering and
validation.

1.6 COMMENTS

In HTML, comments are used to add notes or explanations that are not displayed
in the web browser when the page is viewed. They are helpful for leaving
remarks about the code for yourself or other developers, and they do not affect
the rendering of the page.

In HTML, comments are written using the <!-- and --> tags to enclose the
comment text. Anything between these tags is considered a comment.

Example:

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to my website</h1>
<!-- This is a comment -->

|9
<p>This is a paragraph of text.</p>
<!-- Comments can span multiple lines
and can contain any text or code you want to note. -->
</body>
</html>

In the example above, <!-- This is a comment --> is a single-line comment, and the
comment that follows (<!-- Comments can span multiple lines ... -->) is a multi-
line comment.

Comments are a good practice for providing explanations within your HTML
code and can be especially useful when collaborating with other developers or
when revisiting your code after some time. They can help you understand the
purpose of certain elements or provide context for specific sections of code.

Sr.
Title URL QR Code
No.

Open http://
1 Educational [Link]/
Resource User/UnitUrls?unitId=1241

1.7 HEADINGS, PARAGRAPHS, AND FORMATTING TEXT

In HTML, you can use various elements to structure and format text on a web
page. Here are some of the key elements for headings, paragraphs, and text
formatting:

1.7.1 Headings:

HTML provides heading elements ranging from <h1> to <h6>. These elements
define headings of different levels, with <h1> being the highest level and <h6>
the lowest.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Heading and Paragraph Example</title>
</head> NOTE
<body>
<h1>This is a Heading Level 1</h1>
<h2>This is a Heading Level 2</h2>
<h3>This is a Heading Level 3</h3>
<!-- ... up to <h6> -->
</body>
</html>

1.7.2 Paragraphs:

Paragraphs are represented by the <p> element. Use this element to define
blocks of text.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Heading and Paragraph Example</title>
</head>
<body>
<h1>Introduction</h1>
<p>This is the first paragraph of text. It provides some
introductory information.</p>
<p>This is the second paragraph. Each paragraph is defined by
the <code>&lt;p&gt;</code> element.</p>
</body>
</html>

1.7.3 Formatting Text:

Bold and Italics:

Use the <strong> element for strong importance, typically representing bold text.

Use the <em> element for emphasized text, typically representing italics.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title>
</head>
<body>

| 11
<p>This is <strong>bold</strong> text.</p>
<p>This is <em>italic</em> text.</p>
</body>
</html>

1.7.4 Line Breaks:

The <br> element is used to create a line break within text.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>This text will be on the first line.<br>This text will be on the
second line.</p>
</body>
</html>

1.7.5 Horizontal Rule:

The <hr> element creates a horizontal rule, often used to separate content.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Horizontal Rule Example</title>
</head>
<body>
<p>This is some text above the horizontal rule.</p>
<hr>
<p>This is some text below the horizontal rule.</p>
</body>
</html>
These are basic examples, and HTML provides more elements for text formatting
and styling. Additionally, CSS (Cascading Style Sheets) is commonly used to
achieve more advanced and consistent styling across a website.

1.8 LISTS AND LINKS

In HTML, lists and links are essential elements for organizing and navigating
content. Here's a brief overview of how to use lists and links in HTML:
1.8.1 Lists:
NOTE
HTML supports two types of lists: ordered lists (<ol>) and unordered lists (<ul>).
Both types can contain list items (<li>).

Unordered List:

<!DOCTYPE html>
<html>
<head>
<title>Unordered List Example</title>
</head>
<body>
<h2>Favorite Fruits</h2>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>
</body>
</html>

1.8.2 Ordered List:

<!DOCTYPE html>
<html>
<head>
<title>Ordered List Example</title>
</head>
<body>
<h2>Steps to Make a Sandwich</h2>
<ol>
<li>Get the ingredients.</li>
<li>Prepare the bread.</li>
<li>Assemble the sandwich.</li>
</ol>
</body>
</html>

1.8.3 Links:

Links in HTML are created using the <a> (anchor) element. The href attribute
specifies the destination URL.

<!DOCTYPE html>
<html>

| 13
<head>
<title>Link Example</title>
</head>
<body>
<h2>Visit Our Website</h2>
<p>Click the link below to visit our website:</p>
<a href="[Link] [Link]</a>
</body>
</html>

1.8.4 Linking to Other Pages:

You can also link to other pages within your website by specifying a relative URL.

<!DOCTYPE html>
<html>
<head>
<title>Internal Link Example</title>
</head>
<body>
<h2>Visit Our About Page</h2>
<p>Click the link below to learn more about us:</p>
<a href="/[Link]">About Us</a>
</body>
</html>

1.8.5 Additional Link Attributes:

Target Attribute: Specifies where the linked document will open. For example,
target="_blank" opens the link in a new tab or window.

<a href="[Link] target="_blank">Visit [Link]</a>

Title Attribute: Adds additional information about the link, often displayed as a
tooltip.

<a href="[Link] title="Go to [Link]">Visit


[Link]</a>

These examples provide a basic understanding of how to use lists and links in
HTML. As your HTML skills advance, you can explore more features and styling
options for these elements.
1.9 IMAGES AND TABLES
NOTE

In HTML, you can use the <img> element to embed images and the <table>
element to create tables. Here's an overview of how to use images and tables:

1.9.1 Images:

The <img> element is used to embed images in an HTML document. It is a self-


closing tag, and you need to specify the src attribute with the path to the image
file.

<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
</head>
<body>
<h2>Company Logo</h2>
<img src="[Link]" alt="Company Logo">
</body>
</html>
The src attribute specifies the path to the image file.

The alt attribute provides alternative text for screen readers and in case the
image cannot be loaded.

1.9.2 Tables:

The <table> element is used to create tables in HTML. Tables consist of rows
(<tr>), columns (<td> for regular cells, <th> for header cells), and can include
additional elements for structure.

<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<h2>Employee Information</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
<tr>

| 15
<td>John Doe</td>
<td>Developer</td>
<td>$70,000</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>Designer</td>
<td>$65,000</td>
</tr>
</table>
</body>
</html>
The border attribute is used to add borders to the table cells for better visibility
(optional).

<th> is used for header cells, and <td> is used for regular cells.

<tr> represents a table row.

1.9.3 Additional Table Elements:

<caption>: Adds a caption to the table.

<thead>, <tbody>, <tfoot>: Groups header, body, and footer content in a table.

<colgroup> and <col>: Define column groups and individual columns for styling.

<!DOCTYPE html>
<html>
<head>
<title>Advanced Table Example</title>
</head>
<body>
<h2>Product Sales</h2>
<table border="1">
<caption>Quarterly Sales Report</caption>
<colgroup>
<col style="background-color: #f2f2f2;">
<col span="2">
</colgroup>
<thead>
<tr>
<th></th>
<th>Q1</th>
<th>Q2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product A</td>
<td>$50,000</td>
<td>$60,000</td> NOTE
</tr>
<tr>
<td>Product B</td>
<td>$30,000</td>
<td>$40,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$80,000</td>
<td>$100,000</td>
</tr>
</tfoot>
</table>
</body>
</html>
These examples provide a basic understanding of how to use images and tables
in HTML. As your HTML skills advance, you can explore more features and
styling options for these elements. Additionally, CSS can be used to enhance the
styling and layout of both images and tables.

Summary :

HTML, or Hypertext Markup Language, serves as the backbone of web content by


defining the structure of web pages. It utilizes tags to mark different content
parts, incorporates attributes for additional information, and follows a specific
document structure. Key features include the creation of hyperlinks, working in
conjunction with CSS and JavaScript. Compatibility across browsers is crucial,
and developers can choose from various editors, both offline and online.
Understanding tags, attributes, and elements is fundamental for creating
structured HTML documents.

| 17
1.10 EXERCISE
Part 1
Multiple-Choice Questions (MCQ) with Answer Key:

1. What is HTML primarily used for?


A. Creating databases
B. Defining web page structure
C. Performing mathematical calculations
D. Managing server-side logic
Answer: B

2. Which element is used to create a hyperlink in HTML?


A. <link>
B. <a>
C. <href>
D. <hyper>
Answer: B

3. What does the <DOCTYPE html> declaration indicate?


A. Document content type
B. Document style type
C. Document scripting type
D. Document version type
Answer: A

4. Which attribute provides alternative text for an image in HTML?


A. alt
B. caption
C. description
D. text
Answer: A

5. What is the purpose of the <hr> element in HTML?


A. Creating a hyperlink
B. Adding a horizontal rule
C. Defining a header
D. Inserting an image
Answer: B
NOTE
Short Questions:

1. Explain the role of the <DOCTYPE> declaration in an HTML document.


2. Differentiate between ordered and unordered lists in HTML. Provide
examples.
3. How can you create a hyperlink to an external website using the <a>
element?
4. Describe the significance of comments in HTML code. Provide an
example.
5. What are the key elements used for formatting text in HTML? Give
examples.

Long Questions:

1. Provide a step-by-step explanation of the structure of an HTML


document, including the purpose of the <head> and <body> sections.
2. Compare and contrast offline HTML editors (e.g., Visual Studio Code,
Notepad) with online editors (e.g., CodePen, JSFiddle) in terms of features
and use cases.
3. Explore the different types of lists in HTML and demonstrate how they
can be utilized in creating organized content.
4. Discuss the attributes associated with the <a> element in HTML and how
they contribute to link behavior and presentation.
5. Explain the use of tables in HTML, including the elements involved, and
provide an example illustrating the creation of a table.

| 19
SUBRING
NOTE

| 21

You might also like