INDUSTRIAL TRAINING

REPORT
INDIA TRAINERS
Submitted in partial fulfillment of
Diploma in Computer Engineering (Production)

(Session: 2022-2025)

Submitted To: Submitted By:

Mr. SANJEEV SEHGAL NAME – SHIVAM SHRIVASTAV

(Head of Department) ROLL NO – 220150800054

DEPARTMENT OF COMPUTER ENGINEERING

SETH JAI PRAKASH POLYTECHNIC, DAMLA
YAMUNANAGAR

i
ii
 DECLARATION

I hereby declare that the Industrial Training Report on INDIA TRAINERS is an authentic
record of my work as a requirement of Major Industrial Training during the period from
16 JULY to 31 AUGUST for the award of a Diploma (Computer Engineering),
Haryana State Board of Technical Education, Panchkula (Haryana), under the guidance of
MR SANJEEV SEHGAL

(Signature of student)
NAME: SHIVAM SHRIVASTAV
Date: _____________ ROLLNO: 220150800054

Certified that the above statement made by the student is correct to the best of our
knowledge and belief

Examined by:

(Signature)
Name of Faculty Facilitator (Signature)
Head of Department

iii
 ACKNOWLEDGEMENT

We appreciate Aryan sir's dedication and commitment throughout the training period. Their
active participation and valuable insights have contributed significantly to our organization. We
trust that the knowledge and skills gained during this training will enhance their professional
growth and benefit our team.
Once again, thank you, Aryan sir, for your hard work and diligence. We look forward to more
successful collaborations in the future.

Next, I would like to sincerely thank “MR. SANJEEV SEHGAL” (Head of the
Computer Engineering Department) for his cooperation and encouragement.

SHIVAM SHRIVASTAV
(220150800054)

iv
 PREFACE

Today, we are experiencing the knowledge revolution. Anyone with a unique, enterprising, and
profitable idea is venturing into the formation rage in one way or another. One of the passages
is through software development, or what many call the solution for particular things.

Having had decent exposure to various computer concepts and languages in our curriculum, I
wanted a platform where I could give some practical shape to my knowledge and creative
capabilities. The requirement for submitting a project is Diploma-6th sem. This gave me a
chance and time to achieve what I wanted to do. Along the above lines, I did a “Currency
Converter” project in ‘Web Designing ’.

The work on the project instilled in me a sense of confidence and spirit to accept challenging
assignments. At the same time, it allowed me to give a tangible shape to the ideas in my mind.

v
 TABLE OF CONTENTS

1. Abstract ……………………………………………… 09

2. Introduction of training ……………………………….. 10

3. Training Details(with topics)…………………………… 11

Module 1 - …………………………………………………………………………….. 11 - 31
 Introduction to HTML
 What is HTML
 HTML Tags
 HTML Attributes
 HTML Elements
 HTML Formatting
 HTML Heading and Paragraph

Module 2 - ……………………………………………………………………………… 31 - 39
 HTML Anchor and Image
 HTML Table
 HTML List
 HTML Form

Moule 3 - ……………………………………………………………………………….. 40 - 47
 What is CSS
 How to add CSS
 CSS properties

Module 4 - ………………………………………………………………………………… 48 - 55
 What is Javascript
 Javascript Variables and Datatypes
 Javascript IF statements
 Javascript Switch statements
 Javascript Loop
 Javascript Function

vi
4. Conclusion …………………………………………………. 56

5. Bibliography ……………………………………………….. 57

vii
 1. ABSTRACT

During the period from 22 July to 31 August 2024, this report provides a comprehensive
overview of the training program held at the India Trainers Institute in Chandigarh.
The report delves into the concept of web designing, offering a detailed background of the
training location and highlighting key facts about the department responsible for the program.
Furthermore, it thoroughly explores the history, characteristics, overview, and concept of web
designing, providing a comprehensive understanding of the subject matter.

9
 2. INTRODUCTION OF TRAINING

The purpose of industrial training is to provide exposure for the students to practical
engineering fields. Through this exposure, students will have a better understanding of
engineering practicals in general and a sense of frequent and possible problems. This training is
part of the learning process. So the exposure that uplifts the knowledge and the experience of a
student needs to be properly documented in the form of a report. Through this report, the
experience gained can be delivered to their peers. A properly prepared report can facilitate the
presentation of the practical experience in an orderly, precise, and interesting manner.
I have chosen Web designing as my training because it will help me in several ways. I have
chosen my language course Web Designing and having a little bit of knowledge in this subject
will help me in my career growth. While learning this I came to understand many more
concepts of another language.

1. Learning Outcomes from Training

General Learning Outcomes:

 An understanding of the principles and practice of web pages and design
in the construction of websites that satisfy their requirements.
 A competence to design write, compile, test, and execute straightforward
programs using a high-level language.
 Awareness of the need for a professional approach to design and the
importance of good documentation to the finished programs.

1. Specific Learning Outcomes

 Be able to implement, compile, test, and run webpages.
 Understand how to include HTML, CSS, and JavaScript in a web page.

10
 2. TRAINING CONTENT

Module 1
Introduction To HTML
 HTML stands for Hyper Text Markup Language.
 HTML is used to create web pages and web applications.
 HTML is widely used on the web.
 We can create a static website by HTML only.
 Technically, HTML is a markup language rather than a programming language.

HTML Example with HTML Editor

In this tutorial, you will get a lot of HTML examples, at least one example for each topic for
explanation. You can also edit and run these examples, with our online HTML editor.

Learning HTML is fun, and it is very easy to learn.

1. <!DOCTTYPE>
2. <html>
3. <head>
4. <title>Web Page<title>
5. </head>
6. <body>
7. <h1> Write your First headings</h2>
8. <p>Write your first paragraph</p>
9. </body>
10. </Html>

11
What is HTML

HTML is an acronym that stands for HYPER TEXT MARKUP LANGUAGE which is used for creating
web pages and web applications. Let’s see what is meant by Hypertext markup language, and
webpage.

Hypertext: Hypertext simply means “Text within the text.” Text that has a link within it is a
hypertext. Whenever you click on a link that brings you to a new web page, you have clicked on
a hypertext. Hypertext is a way to link two or more web pages(HTML documents) with each
other.

Markup language: A markup language is a computer language that is used to apply layout and
formatting conventions to a text document. Markup language text is more interactive and
dynamic. It can turn text into images, tables, links, etc.

Web page: A web page is a document commonly written in HTML and translated by the web
browser. It can be identified by entering a URL. A webpage can be static or dynamic. We can
create static web pages using HTML only.

Hence, HTML is a markup language that is used for creating attractive pages with the help of
styling, and which looks in a nice format on a web browser. An HTML document is made of
many HTML tags that contain different content.

Brief History of HTML

In the late 1980`s a physicist, Tim Berners Lee who was a contractor at CERN, proposed a
system for researchers. In 1989, he wrote a memo purposing an internet-based hypertext
system

HTML 1.0 (1993)

 Introduction: The first version of HTML, created by Tim Berners-Lee, was quite basic. It
included fundamental tags like <p>, <a>, <img>, and <h1> to <h6> for paragraphs, links,
images, and headings respectively.

 Purpose: It was designed to create simple web pages with text, links, and images.

12
HTML 2.0 (1995)

 Enhancements: This version built upon HTML 1.0 and standardized many features that
were being used in practice. It included forms (<form>, <input>, <textarea>, etc.) that
allowed for user interaction.

 Significance: It marked the beginning of more interactive web pages.

HTML 3.2 (1997)

 New Features: Introduced new tags like <table>, <font>, and <applet>. It also included
support for scripting languages like JavaScript.

 Impact: Made web pages more visually appealing and functional, allowing for better
layout control and multimedia integration.

HTML 4.01 (1999)

 Major Update: This version was a significant leap forward. It introduced the concept of
separating content from presentation using CSS (Cascading Style Sheets).

 Key Features: Added support for more complex forms, internationalization, and
accessibility improvements. It also deprecated some older tags and attributes in favour
of more modern practices.

HTML5 (2014)

 Modern Web: HTML5 is the current standard and includes many new features to
support modern web applications.

 Multimedia: Introduced native support for video (<video>) and audio (<audio>)
elements, making it easier to embed multimedia content without relying on external
plugins.

 APIs and Graphics: Added APIs for offline storage, drag-and-drop, and more. It also
introduced the <canvas> element for drawing graphics on the fly.

13
 Semantics: New semantic elements like <article>, <section>, <nav>, and <footer> help
define the structure of web pages more clearly.

HTML Tages

HTML (HyperText Markup Language) uses tags to structure content on the web. These tags
tell the browser how to display and interpret the content within them. Tags are enclosed in
angle brackets (< >), and most tags come in pairs: an opening tag (<tag>) and a closing tag
(</tag>), with the content placed in between.

Types of HTML Tags:

1. Structural Tags: These tags define the structure of a webpage.

o <html>: The root element that encompasses the entire HTML document.

o <head>: Contains metadata about the document, such as the title, character set,
and linked resources (like stylesheets or scripts).

o <title>: Defines the title of the webpage, which appears on the browser tab.

o <body>: Contains the visible content of the page.

2. Heading Tags: These tags define headings of different levels, from <h1> (the highest
level, usually for main titles) to <h6> (the lowest level).

o Example: <h1>Main Title</h1>

3. Link and Navigation Tags: These tags define hyperlinks and navigation structures.

o <a>: Creates a hyperlink. The href attribute specifies the destination URL.

 Example: <a href="https://www.example.com">Visit Example</a>

o <nav>: Defines a section of navigation links.

4. Image and Media Tags: These tags embed media into the webpage.

14
 o <img>: Embeds an image. Requires the src (source) and alt (alternative text)
attributes.

 Example: <img src="image.jpg" alt="A description of the image">

o <video> and <audio>: Embed video and audio files.

5. List Tags: These tags create ordered or unordered lists.

o <ul>: Defines an unordered (bulleted) list.

o <ol>: Defines an ordered (numbered) list.

o <li>: Represents a list item in both <ul> and <ol>.

6. Table Tags: These tags create tables for displaying tabular data.

o <table>: Defines a table.

o <tr>: Defines a row in a table.

o <td>: Defines a data cell in a table.

o <th>: Defines a header cell in a table.

7. Form Tags: These tags are used to create interactive forms.

o <form>: Defines a form to collect user input.

o <input>: Defines an input field.

o <button>: Creates a clickable button.

o <label>: Associates a label with an input element.

8. Sectioning Tags: These tags define sections of a webpage, helping to organize content
into meaningful blocks.

o <div>: A generic block-level container used for grouping elements.

o <section>: Defines a section in a document, usually with related content.

15
 o <header>: Defines the header section of a page or a section.

o <footer>: Defines the footer section of a page or a section.

9. Semantic Tags: These provide meaning and context to the content, improving
accessibility and SEO.

 <article>: Represents an independent piece of content, such as a blog post.

 <aside>: Defines content related to the main content, often a sidebar.

 <main>: Represents the main content of the document.

 <figure>: Groups media content with a caption (typically used with <img>).

 <figcaption>: Provides a caption for the media inside <figure>.

Self-Closing (Void) Tags:

Some HTML tags do not have content or closing tags. They are self-contained and usually
define elements that don't have "content" inside them, such as:

 <br>: A line break.

 <img>: An image.

 <hr>: A horizontal rule (line divider).

In summary, HTML tags serve as the basic building blocks of web pages, defining both the
structure and presentation of the content. Each tag has a specific function and contributes
to how browsers render the page to users.

HTML Attribute

HTML attributes are special words used inside the opening tag of an HTML element to
provide additional information about the element. Attributes modify the behavior or
appearance of HTML elements and consist of a name-value pair where the name is the

16
attribute and the value provides specific data. Attributes are always included in the opening
tag and never in the closing tag.

Syntax of HTML Attributes:

<tagname attribute="value">Content</tagname>

Key Points about HTML Attributes:

 Attributes are case-insensitive, but it's a good practice to write them in lowercase.

 Attribute values should always be enclosed in quotes (""), especially if they contain
spaces or special characters.

Common HTML Attributes:

1. id:

o Specifies a unique identifier for an HTML element. Each id should be unique

within the HTML document.

o Used with CSS and JavaScript to apply styles or manipulate the element.

o Example:

<div id="header">This is the header</div>

2. class:

o Assigns one or more class names to an element. Multiple elements can share the
same class, unlike id.

o Used to apply styles using CSS or target multiple elements with JavaScript.

o Example:

<p class="intro">This is an introduction paragraph.</p>

17
3. style:

o Allows you to apply inline CSS styles directly to an HTML element.

o Example:

<p style="color: blue; font-size: 16px;">Styled paragraph

4. href:

o Specifies the URL of a link. It is used inside <a> (anchor) tags to define the
destination of the hyperlink.

o Example:

<a href="https://www.example.com">Go to Example</a>

5. src:

o Specifies the source URL of media content, such as images, videos, or audio files.
Commonly used with <img>, <video>, and <audio> tags.

o Example:

<img src="image.jpg" alt="An example image">

6. alt:

o Provides alternative text for an image if it cannot be displayed. This attribute is

important for accessibility and is used with the <img> tag.

o Example:

<img src="image.jpg" alt="A description of the image">

7. title:

o Provides additional information (tooltip) about the element when the user
hovers over it.

o Example:

18
<button title="Click me!">Click</button>

8. target:

o Specifies where to open the linked document. It is commonly used with <a> tags.

o Common values:

 _blank: Opens the link in a new tab or window.

 _self: Opens the link in the same window (default behavior).

o Example:

<a href="https://www.example.com" target="_blank">Open in new tab</a>

9. type:

o Specifies the type of input in form elements, such as <input>. It also defines the
type of scripts, stylesheets, or buttons.

o Example:

<input type="text" placeholder="Enter your name">

10. placeholder:

o Provides placeholder text in an input field before the user enters any data.

o Example:

<input type="text" placeholder="Enter your name">

11. value:

o Specifies the initial value of an input field or the value attribute of a form
element, like <input>, <option>, or <button>.

o Example:

<input type="text" value="John Doe">

19
12. disabled:

o Disables an input element, making it unclickable or uneditable.

o Example:

<button disabled>Can't click me</button>

13. read-only:

o Makes an input field read-only, meaning the user can see the value but cannot
modify it.

o Example:

<input type="text" value="Read-only text" readonly>

14. checked:

o Used in form elements like checkboxes or radio buttons to specify that the
element is selected by default.

o Example:

<input type="checkbox" checked> Option 1

15. max length:

o Specifies the maximum number of characters allowed in an input field.

o Example:

<input type="text" maxlength="10" placeholder="Max 10 characters">

16. name:

o Specifies a name for form input elements. The name attribute is used to
reference the element in JavaScript or to send data to a server.

o Example:

20
<input type="text" name="username">

17. action:

o Specifies the URL to send the form data when a form is submitted. It is used
inside the <form> tag.

o Example:

<form action="submit_form.php" method="POST">

<input type="text" name="username">

<input type="submit">

</form>

18. method:

o Specifies the HTTP method (GET or POST) used when submitting form data.

o Example:

<form action="submit_form.php" method="POST">

<!-- Form content -->

</form>

19. rel:

o Specifies the relationship between the current document and the linked
document. It's commonly used in link elements, such as <a> or <link>.

o Example:

<a href="https://www.example.com" rel="nofollow">Example</a>

Global Attributes:

These attributes can be used with any HTML element:

21
 id

 class

 style

 title

 data-*: Custom data attributes used to store extra information on elements. These are
prefixed with data-, followed by a custom name.

o Example:

<div data-user-id="123">User info</div>

HTML attributes play a vital role in customizing and extending the functionality of HTML
elements. They make elements more interactive, accessible, and flexible for both design
and functionality.

HTML Elements

HTML elements are the building blocks of an HTML document. An HTML element consists of
a start tag, content, and an end tag (except for self-closing elements). They are used to
define the structure and content of a webpage.

Key Parts of an HTML Element:

1. Opening Tag: The tag that defines the start of an element.

o Example: <p>

2. Content: The information or other HTML elements nested inside the element.

o Example: This is a paragraph.

3. Closing Tag: The tag that defines the end of an element (not needed for self-closing
elements).

o Example: </p>

22
Example of a Full HTML Element:

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

 <p>: The opening tag (defines a paragraph element).

 This is a paragraph.: The content (text inside the paragraph).

 </p>: The closing tag.

Self-closing Elements:

Some HTML elements do not have closing tags because they don’t contain any content.
These are called self-closing elements or void elements.

 Example: <img src="image.jpg" alt="Image description">

Nested Elements:

HTML elements can be nested within other elements to create complex structures.

 Example:

<div>

<h1>Title</h1>

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

</div>

Types of HTML Elements:

1. Block-level elements: Take up the full width available and start on a new line (e.g.,
<div>, <p>, <h1>).

2. Inline elements: Only take up as much space as necessary and don't start on a new line
(e.g., <span>, <a>, <img>).

HTML elements are used to structure and display different types of content on a webpage,
from headings and paragraphs to links and images.

23
HTML Formatting

HTML formatting refers to the use of HTML tags to style and structure text content on a
webpage, enhancing its appearance and readability. These tags are primarily used to
emphasize, bold, italicize, underline, and structure text, making it more visually appealing or
semantically meaningful.

Common HTML Formatting Tags:

1. <b>: Bold text without semantic importance.

o Example:

<b>This text is bold.</b>

2. <strong>: Bold text with semantic importance (meaning the text is important).

o Example:

<strong>Important text</strong>

3. <i>: Italic text without semantic emphasis.

o Example:

<i>This text is italicized.</i>

4. <em>: Italic text with semantic emphasis (indicating stress or emphasis).

o Example:

<em>Emphasized text</em>

5. <u>: Underlines text (typically avoided for links to avoid confusion).

o Example:

24
<u>Underlined text</u>

6. <small>: Displays text in a smaller font size.

o Example:

<small>This is small text.</small>

7. <mark>: Highlights or marks text.

o Example:

<mark>Highlighted text</mark>

8. <sup>: Superscript text (raised above the baseline).

o Example:

E = mc²

9. <sub>: Subscript text (lowered below the baseline).

o Example:

H₂O

10. <del>: Strikethrough text (indicates deleted or outdated content).

o Example:

<del>This text is crossed out.</del>

11. <ins>: Underlines text to indicate inserted content.

o Example:

<ins>Inserted text</ins>

12. <blockquote>: Displays a block of quoted text, typically indented.

o Example:

<blockquote>This is a blockquote.</blockquote>

25
 13. <pre>: Preserves the formatting of the text, including spaces and line breaks.

o Example:

<pre>

Text with spaces and line breaks.

</pre>

14. <code>: Displays inline code snippets in a monospaced font.

o Example:

<code>console.log("Hello, World!");</code>

Purpose of Formatting:

 Emphasize or highlight important text.

 Improve readability by structuring and organizing text content.

 Display code snippets or mathematical expressions accurately.

 Provide semantic meaning, making content more accessible and easier for search
engines to index.

HTML formatting helps present text content in a structured, visually clear, and meaningful way
on web pages.

HTML Heading and Paragraph

HTML Headings

HTML headings are used to define the titles or headings of sections within a webpage. There
are six levels of headings, from <h1> (the highest, most important level) to <h6> (the least
important). They help structure content hierarchically, making it easier for users and search
engines to understand the organization of the page.

 <h1>: Defines the most important heading (usually the main title of the page).

26
  <h2>: Subheading under <h1>, used for major sections.

 <h3>: Subheading under <h2>.

 <h4>: Subheading under <h3>.

 <h5>: Subheading under <h4>.

 <h6>: Defines the least important heading.

Example:

<h1>Main Title (H1)</h1>

<h2>Section Title (H2)</h2>

<h3>Subsection Title (H3)</h3>

HTML Paragraph

The HTML <p> tag defines a paragraph of text. It automatically adds space before and after the
text to separate it from other content. Paragraphs are block-level elements, meaning they take
up the full width of their container and are displayed on a new line.

 <p>: Defines a block of text, typically a paragraph.

Example:

<p>This is a paragraph of text. It is a block-level element, meaning it occupies its own line and
separates content from other elements on the page.</p>

Module 2

HTML Anchor and Image

HTML Anchor (<a>) Tag

27
The HTML anchor tag (<a>) creates hyperlinks, allowing users to navigate from one page or
resource to another. It is one of the most important tags for linking web pages or external
resources like files and websites.

Syntax:

<a href="URL">Link Text</a>

Key Attributes:

 href: Specifies the URL of the page or resource to which to link.

 target: Specifies where to open the linked document. Common values include:

o _blank: Opens the link in a new tab or window.

o _self: Opens the link in the same window (default behavior).

 title: Adds a tooltip that appears when the user hovers over the link.

Example:

<a href="https://www.example.com" target="_blank" title="Visit Example">Visit Example

Website</a>

HTML Image (<img>) Tag

The HTML image tag (<img>) is used to embed images in a webpage. Unlike other tags, the
<img> tag is a self-closing tag, meaning it does not require a closing tag.

Syntax:

<img src="imageURL" alt="Image Description">

Key Attributes:

 src: Specifies the URL of the image file.

 alt: Provides alternative text if the image cannot be displayed (useful for accessibility
and search engines).

28
  width and height: Specify the size of the image (in pixels).

 title: Adds a tooltip to the image when hovered over.

Example:

<img src="https://www.example.com/image.jpg" alt="An example image" width="400"

height="300">

HTML Table

HTML Table

HTML tables are used to display data in a tabular format, with rows and columns. Tables are
created using the <table> tag, and they contain rows (<tr>) and cells, which can be either
header cells (<th>) or data cells (<td>).

Basic Structure of an HTML Table:

 <table>: The container element for the table.

 <tr>: Defines a table row.

 <th>: Defines a header cell (bold and centered by default).

 <td>: Defines a standard data cell (normal text, left-aligned by default).

Example:

<table border="1">

<tr>

<th>First Name</th>

<th>Last Name</th>

<th>Age</th>

29
 </tr>

<tr>

<td>John</td>

<td>Doe</td>

<td>30</td>

</tr>

<tr>

<td>Jane</td>

<td>Smith</td>

<td>25</td>

</tr>

</table>

Key Components:

1. <table>: The main container for the table.

2. <tr> (Table Row): Represents a row in the table.

3. <th> (Table Header): Creates a header cell (usually contains titles).

4. <td> (Table Data): Creates a cell for table data.

Attributes:

 border: Adds a border to the table (set in pixels).

<table border="1">

 colspan: Merges multiple columns into a single cell.

<td colspan="2">Merged columns</td>

30
  rowspan: Merges multiple rows into a single cell.

<td rowspan="2">Merged rows</td>

HTML Lists

In HTML, lists are used to organize content into a structured format. There are three main types
of lists in HTML:

1. Ordered List (<ol>): A list with numbered items.

2. Unordered List (<ul>): A list with bullet points.

3. Definition List (<dl>): A list of terms and their definitions.

1. Ordered List (<ol>)

An ordered list is used when the sequence of items matters, and it automatically numbers the
items.

Syntax:

<ol>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>

Output:

1. First item

2. Second item

3. Third item

31
Key Attributes:

 type: Defines the numbering style (1, a, A, i, I).

<ol type="A">

<li>First item</li>

<li>Second item</li>

</ol>

 start: Specifies the starting number.

<ol start="5">

<li>Item 5</li>

<li>Item 6</li>

</ol>

2. Unordered List (<ul>)

An unordered list is used for items where the order doesn’t matter. Items are typically
displayed with bullet points.

Syntax:

<ul>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ul>

Output:

 First item

32
  Second item

 Third item

Key Attributes:

 type: Specifies the bullet type (circle, square, disc).

<ul type="square">

<li>First item</li>

<li>Second item</li>

</ul>

3. Definition List (<dl>)

A definition list is used to pair terms with descriptions.

Syntax:

<dl>

<dt>HTML</dt>

<dd>A markup language for creating web pages.</dd>

<dt>CSS</dt>

<dd>A style sheet language used for describing the look and formatting of a document.</dd>

</dl>

Explanation:

 <dl>: Wraps the entire definition list.

 <dt>: Defines the term.

 <dd>: Defines the description of the term.

Output:

33
  HTML: A markup language for creating web pages.

 CSS: A style sheet language used for describing the look and formatting of a document.

HTML Forms

An HTML form is a section of a webpage that allows users to enter data that can be sent to a
server for processing. HTML forms are often used to collect user input, such as login credentials,
feedback, or other types of information, and submit it via web requests (usually using HTTP
methods like GET or POST).

Key components of an HTML form:

1. <form> element: This is the main container that wraps all input fields and contains
attributes like action and method.

o action: Specifies the URL where the form data will be sent for processing.

o method: Defines the HTTP method used to submit the form data (GET or POST).

2. Input fields: HTML forms can include various types of fields for user input, including:

o Text inputs: Single-line text input fields (<input type="text">).

o Password inputs: Masked text input for passwords (<input type="password">).

o Radio buttons: Allows users to select one option from a set (<input
type="radio">).

o Checkboxes: Allows users to select one or more options (<input

type="checkbox">).

o Select menus: Dropdown lists with multiple choices

(<select><option></option></select>).

o Text areas: Multi-line text input fields (<textarea></textarea>).

o Submit button: A button to submit the form (<input type="submit">).

34
 Module 3

What is CSS

CSS (Cascading Style Sheets) is a style sheet language used to control the presentation of HTML
elements on web pages. It defines how HTML content should be displayed, including aspects
like layout, colors, fonts, spacing, and more. CSS enables developers to separate the design and
layout of a webpage from its content, providing flexibility and consistency across the entire
website.

Key Concepts of CSS:

1. Selectors: Used to target specific HTML elements you want to style. Common selectors
include:

o Element selectors: Select elements by their tag name (e.g., p, h1, div).

o Class selectors: Select elements by their class attribute (e.g., .my-class).

o ID selectors: Select elements by their id attribute (e.g., #my-id).

o Attribute selectors: Select elements with specific attributes (e.g.,

input[type="text"]).

2. Properties and Values: CSS applies styles through properties and values. For example,
the color property changes text color, and the font-size property changes the text size.

p{

color: blue; /* Property: color, Value: blue */

font-size: 16px; /* Property: font-size, Value: 16px */

35
 3. Cascading: CSS allows multiple style rules to apply to the same element. The "cascading"
part of CSS determines which styles are applied when multiple rules conflict, based on
factors like specificity, importance, and order.

4. Box Model: Every HTML element can be considered a box. CSS controls the content,
padding, border, and margin of each box. Understanding the box model is essential for
layout control.

o Content: The content of the element.

o Padding: Space between the content and the border.

o Border: The edge of the element.

o Margin: Space outside the border.

Types of CSS:

1. Inline CSS: Applied directly to HTML elements using the style attribute.

<p style="color: red;">This is a red paragraph.</p>

2. Internal CSS: Defined within a <style> tag inside the <head> section of an HTML
document.

<style>

p{

color: blue;

</style>

3. External CSS: Written in a separate .css file and linked to the HTML file using a <link>
element.

<link rel="stylesheet" href="styles.css">

36
How to add CSS

To add CSS to your HTML, there are three main methods: inline, internal, and external. Here’s
how each method works:

1. Inline CSS

 You can apply styles directly to an HTML element using the style attribute.

2. Internal CSS

 This method places the CSS within a <style> tag inside the <head> section of your HTML
file.

37
3. External CSS

 This method links to a separate. css file, keeping your HTML and CSS separate for better
maintainability. You can link the external stylesheet in the <head> section.

HTML file:

38
External CSS file (styles.css):

Which method to use?

 Inline CSS is used for quick, one-off styling changes.
 Internal CSS is useful for styling a single page.
 External CSS is the best practice when you're working on larger websites, as it separates
content (HTML) from design (CSS).

CSS Properties
CSS (Cascading Style Sheets) is used to style and layout web pages. Here are some commonly
used CSS properties:
1. Text and Font Properties
 color: Sets the color of the text.
color: blue;
 font-size: Specifies the size of the font.
font-size: 16px;
 font-family: Sets the font of the text.
font-family: Arial, sans-serif;
 font-weight: Specifies the weight (boldness) of the font.
font-weight: bold;

39
  text-align: Aligns text horizontally (left, right, center).
text-align: center;
 text-decoration: Adds decoration to text (underline, line-through).
text-decoration: underline;
2. Box Model Properties
 width: Sets the width of an element.
width: 200px;
 height: Sets the height of an element.
height: 100px;
 padding: Adds space inside the element, between the content and the border.
padding: 10px;
 margin: Adds space outside the element, between the element and its neighbours.
margin: 20px;
 border: Sets the border of an element.
border: 2px solid black;
3. Background Properties
 background-color: Sets the background color of an element.
background-color: light gray;
 background-image: Sets an image as the background.
background-image: url('image.jpg');
4. Positioning Properties
 position: Specifies how an element is positioned in the document.
o static, relative, absolute, fixed, sticky
position: absolute;
top: 50px;
left: 100px;
 z-index: Controls the vertical stacking order of elements.

40
z-index: 10;
 display: Controls the layout display of an element.
o block, inline, inline-block, flex, grid, none
display: flex;
5. Flexbox Properties
 display: flex;: Enables a flex container.
 justify-content: Aligns flex items horizontally.
justify-content: space-between;
 align-items: Aligns flex items vertically.
align-items: center;
 flex-direction: Defines the direction of the flex items.
flex-direction: column;
6. Grid Properties
 display: grid;: Enables grid layout.
 grid-template-columns: Defines the column structure.
grid-template-columns: 1fr 1fr;
 grid-gap: Adds space between grid items.
grid-gap: 10px;
7. Other Useful Properties
 opacity: Sets the opacity (transparency) of an element.
opacity: 0.5;
 overflow: Controls how content is handled when it overflows its container.
o visible, hidden, scroll, auto
overflow: hidden;
 cursor: Specifies the type of cursor when hovering over an element.
cursor: pointer;

41
 Module 4
What is JavaScript
JavaScript is a high-level, interpreted programming language that is primarily used to create
dynamic and interactive elements on websites. It's one of the core technologies of the web,
alongside HTML (for structure) and CSS (for styling). JavaScript enables features like interactive
forms, animations, real-time content updates, and more.
Basic example of JavaScript:

JavaScript Variables and Datatypes

Variables
In JavaScript, variables are used to store data. There are three ways to declare a variable:
 var: Declares a variable (older version, function-scoped).
 let: Declares a block-scoped variable (recommended).
 const: Declares a constant variable whose value cannot be changed.
Example:

42
Datatypes
JavaScript has the following basic data types:
 String: Text enclosed in single or double quotes.

 Number: Integer or floating-point numbers.

 Boolean: Logical true or false.

 Object: Key-value pairs or instances of classes.

 Array: Ordered collections of values.

 Null: Represents an intentional absence of value.

43
  Undefined: A variable that has been declared but not assigned a value.

JavaScript IF Statements
The if statement is used to execute code based on a condition.
Example:

if-else if-else:

44
JavaScript Switch Statements
The switch statement is used to execute one of many code blocks based on the value of an
expression.
Example:

JavaScript Loops
For Loop
Loops through a block of code a certain number of times.

While Loop
Executes a block of code as long as a specified condition is true.

45
Do-While Loop
The block of code will execute once before the condition is tested.

For-In Loop (used for objects)

Loops through the properties of an object.

For-Of Loop (used for arrays)

Loops through the values of an iterable like arrays or strings.

46
JavaScript Functions
A function is a block of code designed to perform a particular task and can be reused multiple
times.

Function Declaration:

Function Expression

47
Arrow Functions (ES6)
Arrow functions provide a shorter syntax for writing functions.

Anonymous Functions
Functions without a name, are often used in event handling.

Example of a Complete JavaScript Program:

48
CONCLUSION

"Upon completing the [Training Program/Project], I have undergone a transformative journey

of self-discovery and professional growth. This training has not only enhanced my knowledge in
[specific areas] but also refined my skills in [key skills]. The most significant takeaway has been
the ability to [desirable skill/competency], which I believe will be invaluable in my future
endeavors.

The training challenged my initial assumptions and broadened my perspectives on

[industry/field]. I developed a deeper understanding of [key concepts] and learned to approach
problems with a more nuanced and analytical mindset.

Through this training, I improved significantly in [specific skills/areas]. The program's emphasis
on [key skills/competencies] has prepared me to tackle complex challenges and make
meaningful contributions in [industry/field].

Moving forward, I intend to apply the knowledge and skills gained to [specific
projects/initiatives]. I foresee this training having a profound impact on my career trajectory,
enabling me to take on leadership roles and drive positive change in [industry/field].

To further enhance the training experience, I recommend [potential improvements].

Nonetheless, I am grateful for the opportunity to participate in this program and am confident
that it will continue to shape my professional journey."

49
 Bibliography

Books:-

HTML and CSS; Design and Build Websites

Learning Web Design:- A "Beginner's Guide"

Reference:-

o www.javatpoint.com
o https://www.w3school.com
o https://openai.com/chatgpt/
o www.youtube.com

50