0% found this document useful (0 votes)

8 views162 pages

WebTechnologies Lecturenotes 5modules

The document provides a comprehensive overview of HTML, detailing its structure, features, and various elements such as tags, headings, and formatting. It explains how HTML is used to create web pages, including the integration with CSS and JavaScript, and covers the organization of text, links, and tables. Additionally, it highlights the benefits and limitations of HTML, emphasizing its role in web development.

Uploaded by

Dimpu Bachupati2085

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

8 views162 pages

WebTechnologies Lecturenotes 5modules

Uploaded by

Dimpu Bachupati2085

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 162

WEB TECHNOLOGIES

- Dr. Anitha Cuddapah

MODULE I

An outline of HTML
Web pages are typically created using HTML, or Hyper Text Markup
Language. It combines markup language, which describes the text
material within tags, with hypertext, which describes the interaction
between web pages, to structure online sites. This language can be used
to annotate text to facilitate appropriate manipulation and machine
comprehension. Tags are used in human-readable HTML to identify which
textual components need to be edited.

What is HTML?

HTML, or Hyper Text Markup Language, is a language used to generate

web pages. It specifies a web page's composition and design using HTML
tags and attributes.
Search engines base their decisions about how content appears on
webpages on the parts that make up HTML.

Headings, lists, pictures, links, and more are a few examples.

HTML Sample:

“<!DOCTYPE html>

<title>First HTML Code</title>

</head>

<body>

<h2>Welcome To GFG</h2>

<p>Hello Geeks</p>

</body>

</html>”

Two of HTML's many features are its platform independence and ease of
usage.

A webpage may contain audio, video, and image content. Additionally, it

may have markup language, or hypertext, inside the text.

HTML Tags and Elements

HTML's predefined tags and components provide instructions to the
browser about how to display the content. An opening tag, some content,
and a closing tag are examples of HTML elements. It is important to keep
in mind to use closing tags.

The browser extends its effects till the end of the page if the beginning
tag is absent. The fundamental components of an HTML page—the
doctype declaration, HTML, head, title, and body elements—are covered
in great detail in this section. Structure of an HTML Page
The HTML page's fundamental structure is displayed below. It includes the
fundamental pieces that comprise every web page: HTML, the doctype
declaration, the head, title, and body elements.
“<!DOCTYPE html> “– This is the declaration of the document type (not

a tag, technically). It indicates that a given document is an HTML

document. There is no case sensitivity in the doctype declaration.

“<html> – The HTML root element is what's known as this. It contains all

the other components.

<head> – The "behind the scenes" components of a webpage are

contained in the head tag. On the front end of a webpage, elements located
within the head are not displayed. The following HTML elements are used
inside the element:

<title> – When you visit a website, the title—which shows the title of the
pages you are currently viewing—is what appears at the top of your
browser.

<base> - It gives all relative URLs in a document their base URL.

on its own.

<body> - A webpage's visible content is contained within the body tag.

Stated differently, the content that appears on the browser's front end is

the body content.

HTML text editor can be used to build an HTML document. Use the ".html"
or ".htm" extension when saving the text file. The file can be viewed in
the browser as a webpage when it has been saved as an HTML document .

Benefits of HTML

Websites are created using HTML.

It may be integrated with other languages like CSS, JavaScript, etc.

It is compatible with all browsers.

One of HTML's drawbacks is that it can only produce static web pages.

It is necessary to use other languages for dynamic web pages.

Writing a simple web page requires writing a lot of code.
The security function needs improvement.

Example :

To show the fundamental HTML structure.

“<!DOCTYPE html>

<head>

content="width=device-width, initial-scale=1.5">”

“ <title>HTML</title>

</head>

<body>

</body>

</html>”

HTML Headings

Headings for a webpage's content are made using the HTML heading tags.
Usually, the body tag contains these tags. The six heading tags available
in HTML are <h1> through <h6>, and they each display the heading in a
different font size.

“<h1></h1>

<h6></h6>” is the syntax.

Working with Text

Formatting HTML Text: HTML text formatting tags improve the semantic
meaning and visual display of web content. Website readability and user
experience can be enhanced by styling content as bold, italicised,
emphasised, or essential by utilising tags like <b>, <i>, <em>, and
<strong>.

There are two types of HTML text formatting techniques:

“1. Logical Tags: These tags indicate the text's logical or semantic
significance. They make a point without overtly altering the appearance.

• <em>: Italicised text is used to emphasise a point.

• <strong>: Usually bolded text indicates important stuff.”

2. Hard Copy Labels

By changing font styles, widths, and other visual characteristics, these tags
have a direct effect on how the text looks visually.

• “<b>: Displays text in a bold format.

• <i>:” Italicizes text.

HTML Formatting Elements

“<i> Showcases italicized text

<small> Renders text in a smaller font size.

<ins> Highlights added or inserted text.

<sub> Creates subscript text.

<strong> Emphasizes text with importance, often in bold.

<b> Displays text in a bold format.

<sup> Accentuates text with a background highlight

<mark> Accentuates text with a background highlight

<del> “Strikes through text to signify deletion

Example of Text Formatting

Basic Text Formatting:
In this example we demonstrate various text formatting tags:
““<strong> for important and bold text,
<em> for emphasized and italic text,
<b> for bold text,
<i> for italic text, and <mark> for highlighted text.

<!DOCTYPE html>

<head>

<title>Text Formatting Example</title>

</head>

<body>

<p>

<strong>Strong:</strong>

This text is important and bold.

</p>
<p>

<em>Emphasized:</em>

This text is emphasized and italic.

</p>

<p>

This text is bold.

</p>

<p>
<i>Italic:</i>

This text is italic.

</p>

<p>

<mark>Marked:</mark>

This text is highlighted.

</p>

</body>

</html>”

Organizing Text in HTML

The content of a web page is arranged using the many formats—

layers, paragraphs, lines, tables, and divisions—that we have already
studied. The correct arrangement of all HTML tags and their contents on a
web page is referred to as organising text.
A web browser avoids line and paragraph breaks by default when it wraps
content within a web page and displays it in a single block. Now, it gets
quite difficult for users to understand the provided information if a page's
material is not broken up by lines or paragraphs.
A disorganised web page will make it difficult for readers to read the desired
information. You can use other text arrangement techniques, like
paragraphs, lines, and tables, to get around this issue. Numerous tags are
available in HTML to organise content into tables and paragraphs. For
example, you can use the P element to show the text on the page as
paragraphs, or you can use the HTML code to display a horizontal line to
indicate a text break. With HTML, you can also use the SPAN tag to alter a
text's format. In the next two parts, you will find out how to organise the text.

HTML Text Arrangement

Text Arranging in HTML Text can be arranged in a variety of formats and

styles, including tables, layers, and paragraphs. An HTML page's text is
seen in the Web browser as a single paragraph by default.
Using the different tags, you can format this text in a variety of ways. For
instance, you can divide the content into many paragraphs using the P tag
and continue writing from the following line with the BR tag. The duties
involved in organising a web page's text are as follows:

Permitting Pauses for Words

The WBR element is provided by HTML and can be used to add word breaks
in an HTML text between paragraphs or words. Nonetheless, you can use
the WBR tag if there needs to be a space between the words. While the BR
tag breaks the line regardless of the amount of space on the online page,
the WBR tag does not require the online browser to do so.
Preformatted text in HTML tells the browser that the content inside is
formatted and shouldn't be formatted again with the PRE tag. HTML's
default behaviour is to display text without formatting, regardless of spaces
or tabs. When this happens, you can use the PRE tag to maintain the
desired formatting. This tag is frequently used for content that has
predefined formatting, including poems and code snippets. The contained
text is shown by the browser in a monospaced font like Courier New.
You can use the BOLD, ITALIC, and LINK tags inside the PRE tag, per the
requirements for HTML and Extensible Hypertext Markup Language
(XHTML). What the DIV tag means
To divide a web page into distinct sections or divisions, utilise the HTML
division (DIV) tag. In essence, the DIV tag holds the other HTML tags within
it. You can apply the Cascading Style Sheet (CSS) to the HTML tags and
group them into sections using the DIV tag.
It is not possible to utilise the block-level DIV tag inside of the P tag. The
DIV tag is used to separate the web page into several sections, whereas

the P tag is solely used to create paragraphs. What the SPAN tag means
Using the style attribute, the SPAN tag can be used to alter the style of the
text included within the tag. The SPAN tag is used in conjunction with style
sheets to establish presentational attributes that specify the content's style,
giving it additional formatting capabilities over HTML tags.

Text arrangement in tables

TABLE tag: To arrange text in a tabular arrangement, or in rows and

columns, HTML offers the TABLE tag.
TH, TR, and TD tags: The TH, TR, and TD tags are used in conjunction
with the TABLE tag. A table column's header is defined by the TH tag. The
table rows' contents are specified using the TR tag. Additionally, the
contents of a table cell can be specified using the TD tag.
Style attribute: The style attribute in the TABLE tag allows you to adjust
the width and height of the table's rows and columns. You can additionally
specify the table's borders, font size, and style for the table's content by
using the style element.

CAPTION tag: Using the CAPTION tag, you can also specify the table
caption, which describes the contents of the table.

Ruby tag : Define the Ruby (text with captions) Using the Ruby tag on
your webpage, you can specify the caption for your text. Ruby annotations
that offer a reading or pronunciation help for a certain language, such
Chinese or Japanese, are specified using this tag. A ruby is a component of
an annotation pair, where a text passage (referred to as ruby text) is
connected to another text collection (referred to as ruby base).
Ruby annotations are frequently employed to provide a pronunciation aid
in a variety of publications, such as school texts and periodicals, in several
Asian nations, including China and Japan.

The following tags are included in the RUBY tag:

RP: Has a parenthesis.

RT: Serves as the Ruby text's container.

The ruby text and the ruby base are connected structurally by means of
these tags. The term "structural association" describes the several
connections that can be made between the ruby text and ruby base. The
text that appears in the Ruby tag before the RT tag is referred to as the
base text. On the other hand, the content that follows the RT tag is referred
to as the "notation."

HTML List Displaying

Lists can be used to display the information in HTML. These lists contain
information that can be displayed either unordered and randomly or in an
ordered and sequential fashion. The list of tags that are used to display the
list in an HTML document is as follows:

Working with Links and URLs

Web pages are connected by HTML links, also known as hyperlinks, which
are made with the `} tag and the `href} property. They make it possible
for users to move between resources or pages. Links improve site
navigation and engagement and can be text, image, or other elements.
Links allow users to move between various pages or resources with a
single click.

Note: An picture or any other HTML element can be used to represent a

hyperlink; text is not the only option.

Links will show up in all browsers as follows by default:

A blue-underlined link has not been viewed.

A clicked link appears purple and underlined.
A link that is active is highlighted in red.

Examples of HTML Links

Simple Hyperlink:
The text in this example tells readers to click on the "MBU" link, which
takes them to the website "https://www.MBU.org."

“<!DOCTYPE html>

<title>HTML Links</title>

</head>

<body>

<p>Click on the following link</p>

MBU

</a>

</body>

</html>”

Example: Employing the target properties

We show how to use target properties in links in this example. The context
in which each link opens varies: _blank opens in a new tab or window, _self
opens in the same frame, _parent opens in the parent frame, _top opens
in the entire window body, and framename opens in a designated frame.

“<!DOCTYPE html>

<html>

<head>

<title>Target Attribute Example</title>

</head>
<body>

<h3>

Various options available in the

Target Attribute

</h3>

<p>

If you set the target attribute to

"_blank", the link will open in a new

browser window or tab.

</p>

<a href="https://www.geeksforgeeks.org"

target="_blank">

MBU

“ </a>”

“ <p>

If you set the target attribute to

"_self", the link will open in the

same window or tab.

</p>

<a href="https://www.MBU.org"

target="_self">

MBU

</a>”
“ <p>

If you set the target attribute to

"_top", the link will open in the full

body of the window.

</p>

<a href="https://www.MBU.org"

target="_top">

MBU

</a>

<p>

If you set the target attribute to

"_parent", the link will open in the

parent frame.

</p>

<a href="https://www.MBU.org"

target="_parent">

MBU

</a>

</body>”

</html>”

Creating Tables

What are tables in HTML?

Data arranged in rows and columns in a tabular fashion is called an HTML
table. Tables are helpful for a variety of activities, including the
presentation of numerical and textual data. A table is a helpful tool for
rapidly and simply determining connections between various sorts of data.

Databases can also be created using tables.

Example HTML Table Code

“

<!DOCTYPE html>

<html>

<body>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Priya</td>

<td>Sharma</td>

</tr>
<tr>

<td>Singh</td>

</tr>

<tr>

<td>Watson</td>

</tr>

</table>

</body>

</html>”

HTML Table Definition

“An HTML table is defined by the "table" tag. Every row in a table is
defined using the "tr" tag. A table header is defined by the "th" tag. By
default, table headers are bold and centred. A table data/cell is defined by
the "td" tag. “

Table Section
“Table cells are the basic building blocks that make up a table. It is
denoted by an end tag and a start tag. “
Syntax Content

Rows of Tables

Table Cell combinations can be used to create the rows. It is indicated as

a start and end tag by the and tags.

Syntax
“</tr> Content... </tr>”

Table Headings

Usually, the Heading is provided by the Headers. The heading for the table
can also be added using the Table Headers. The & tags are contained in
this.

Syntax
“</th> Content... </th>”

How Do I Add a Border to an HTML Table?

To set a border, utilise the CSS border property. The table will be
displayed without a border if you choose not to give it one.

“Syntax:

“Table, th, td syntax

{
border: 1px solid black;
}” “
Including Foldable Edges in an HTML Table

Add the CSS border-collapse attribute to make borders collapse into one
border.

Syntax:

Table, th, td
{ border: 1px solid black; border-collapse: collapse;

Working with Images

By linking them, images can be embedded into web pages using the HTML
tag. It does not need a closing tag; instead, it generates a placeholder for
the picture, defined by characteristics like src, width, height, and alt.

There are two methods for adding photos to a webpage:

by giving the complete address (URL) or path to a file on the internet.

by giving the file path in relation to the web page file's current position.
We will first talk about adding the image to the webpage and, at the same
time, we will comprehend the two aforementioned methods.

Adding photos to a webpage: photos can be embedded into web pages using the tag,

which only needs attributes and no closing tag. Using the tag, images improve the
quality of both design and content.

“Syntax:
“<img src="url" alt="some_text" width="" height="">”

ATTRIBUTES:

“src: The path to the image file is specified by src.

alt : is a shorthand for the image that can be used for accessibility or in
situations where the picture is not visible.

crossorigin: Usually used with canvas, this feature enables the import of
photos from external websites that have cross-origin access.
height : Indicates the image's height.
width: indicates the image's width.

ismap : A server-side image map is specified by the ismap parameter.

loading: Indicates if the browser should load images instantly or
gradually.
longdesc: Provides a URL for a thorough explanation of the picture.

Referrerpolicy: Indicates which referrer data to use in order to retrieve

the picture.
sizes: defines the dimensions of images for various page layouts.
srcset : To enable responsive images, srcset specifies a list of image files
to use in various contexts.

usemap: utilizemapgives a picture as a client-side image map

specification. “

CANVAS:

JavaScript is used to draw images on a web page using the tag in HTML.
Paths, boxes, text, gradients, and the addition of images can all be drawn
with it. It doesn't have text or borders by default.
Syntax Contents

Take note:

With HTML5, the tag is new.

The majority of browsers can display the default values for the element,
which are as follows:
canvas { 300px in width, 150px in height;}

ATTRIBUTES:
Two characteristics are supported by the tag, and they are as follows:

height

This attribute, which has a default value of 150, is used to set the height
of the canvas by taking the value in pixels.

breadth

This property, which has a default value of 300, is used to set the
canvas's width by taking its value in pixels.
FORMS

Using a range of interactive features, the

element is a potent tool that HTML forms use to gather user input. These
controls include checkboxes, radio buttons, submit buttons, text fields,
numeric inputs, email fields, and password fields. Essentially, an HTML
form improves user interaction by acting as a flexible container for
multiple input components.

“Syntax:
“<form>

</form>””

Form Components
There are multiple elements in the HTML

, and each has a distinct function. To define labels for other elements, for
example, use the element. By changing its type attribute, the element, on
the other hand, may be used to record a variety of input data kinds,
including text, passwords, emails, and more. Let's now go over each item
on the list of HTML form elements individually:

“< LABEL>Labels for elements are defined by it.

<INPUT>By altering its type, it may be used to retrieve input data from
the form in a variety of formats, including text, passwords, emails, and
more.
<BUTTON>It specifies a button that can be clicked to operate a
functionality or control other items.

“<select>To make a drop-down list, utilise it.

<TEXTAREA>It is employed to receive lengthy text input.<br>

<fieldset>It is employed to group related data and draw a box around

other form elements.<br> <br>

<LEGEND>It specifies a fieldset element's caption .

<DATALIST>For input controls, it is used to define pre-defined list
options.
<OUTPUT>The results of the computations that were done are shown.

<OPTION>It's employed for specifying choices in a list of possibilities.

<OPTGROUP>\optgroup>It's employed to specify options in a drop-down
list that pertain to groups.”

CREATING FRAMES:

Using HTML Frames, you can effectively divide your web browser window
into many portions, each of which may load content on its own. A group
of frames included within a frameset tag are used to do this. But it's
crucial to remember that HTML 5 deprecates the tag.

Making Frames

In HTML, the tag is used to create frames rather than the tag. The HTML
document to be loaded into each frame is specified by the tag, which
defines each frame. Horizontal frames are defined by the row attribute,
and vertical frames by the col attribute. Here's an example of how to use
the frameset tag's row attribute to generate three horizontal frames.

Features of the tag "frameset":

cols: In a web browser, vertical frames are created using the cols
attribute. Essentially, the number of columns and their sizes inside the
frameset tag are defined by this attribute. The following methods are
used in the frameset to set the column's width or size:
“Use absolute value in pixel Example:
<frameset cols = "300, 400, 300">”
Use percentage value Example:
“<frameset cols = "30%, 40%, 30%">
Use wild card values: Example:
<frameset cols = "30%, *, 30%">”

* use the remaining percentage to create the vertical frame in the

example above.
rows: In a web browser, horizontal frames are created with the rows
attribute. Within the frameset tag, this attribute is used to specify the
number of rows and their size. The following methods are used to
determine each row's height or size:

Use absolute value in pixel

Example:
“<frameset rows = "300, 400, 300">
Use percentage value Example:
<frameset rows = "30%, 40%, 30%">
Use wild card values Example:
<frameset rows = "30%, *, 30%">”

* will use the remaining percentage to create the horizontal frame in the
example above.
border: The border width of each frame is specified in pixels by this
frameset tag attribute. When there is no border, zero is utilised.

Example:
“<frameset border="4" frameset>”
frameborder: Use the values 0 and 1 to indicate whether or not a three-
dimensional border should be displayed between the frames. A value of 1
indicates that a border will be there, whereas a value of 0 indicates none.
framespacing :The amount of space between the frames in a frameset
can be specified using the framespacing attribute of the frameset tag.
This basically indicates the value in pixels and can accept any integer
number as an input.
“<framespacing="20">
It means there will be 20 pixel spacing between the frames”

Benefits of Frame Tag: It lets users see several documents on a same

webpage.
It loads pages into a single frameset from several servers.

The tag can be used to target older browsers that do not support frames.

The drawbacks of Frame_Tag:

It is not often utilised in web browsers because of some of its drawbacks.

Using frames might complicate the process of creating a website.
Not one of the Web pages visited within a frame can be bookmarked by a
user.
The back button on the browser might not function as intended.
An excessive number of frames used may result in a heavy server
demand.
Not all outdated web browsers support frames.

Multimedia

HTML provides a range of tags, including <img> tag, <video> tag,

and <audio> tag that you can use to include media into your page. Many
media, including pictures, sounds, and videos, are combined to create
multimedia. Enhancing the user experience is possible when multimedia is
integrated into HTML. Early web browsers could only display text and
could only use one font colour per browser. Subsequent browser versions,
however, added support for a wider range of typefaces, pictures, and
multimedia components.
“Syntax:
“// Embedding image
<img src="geeksforgeeks.jpg" alt="Logo">”

“// Embedding video

<video width="500px" height="300px" controls>
<source src="Small_movie.mp4" type="video/mp4">
</video>”

“// Embedding audio

<audio controls>
<source src="Small_audio.mp3" type="audio/mp3"> “
“</audio>”

HTML5: Introduction

Introduction: Hyper Text Markup Language is referred to as HTML.

Together with a markup language, it is used to construct web pages. The
acronym for Hypertext Markup Language is HTML. The relationships
between the web pages are defined by hypertext. The text document
enclosed in the tag is created using the markup language, which also
defines the layout of web pages. The fifth and most recent version of the
HTML language is called HTML 5. It has introduced the Document Object
Model (DOM) and Application Programming Interfaces (API) and enhanced
the markup accessible for documents.
Qualities: It has incorporated new multimedia features that offer controls
for both audio and video by utilising the and tags.

Tags and vector pictures are two of the new visual elements.
To enhance semantic content, add and.

With the "Drag and Drop" feature, an object can be picked up and moved
by dragging it farther.

Geolocation services: These aid in determining a client's precise location.

Web storage that offers web application techniques for storing information
on the web browser.
employs a SQL database for offline data storage.
permits drawing a variety of forms, including circles, rectangles, and
triangles.
able to deal with improper syntax.
Simple character encoding, such as ; simple DOCTYPE declaration, such
as

Elements deleted from HTML 5: Several elements from HTML 5 have been
deprecated; these are mentioned below:

“<acronym>

<dir>

<font>

<frame>

<tt>”

HTML5 Document Structure

Newly Added HTML 5 Elements:

article: An article is represented by the tag. More precisely, although it

may be connected, the content enclosed in the element is separate from
the rest of the website's content.
aside: This tag is used to provide a brief description, like to a highlighter,
of the page's main content. In essence, it indicates stuff that is
associated with the core content of the webpage but does not directly
contribute to its main purpose. The primary contents of the tag are links,
related content, and author information.
“figcaption: In an HTML document, the tag is used to add a caption to the
figure element.
fig: To include self-contained material in a document, such as diagrams,
pictures, codes, or drawings, use the tag in HTML. Although it can be
utilized in any position inside a page, the figure complements the main
flow of the text and its removal shouldn't have any negative effects on it.
header: Along with other content, such a table of contents and navigation
links, it also includes the section heading.

footer: The tag is used to define the footer of an HTML document. This
part contains the footer information (author, copyright, carrier, etc.). The
footer tag is contained in the body tag. HTML 5 introduces the tag. For
the footer elements, there must be a start tag and an end tag.
main: Identifies the most crucial content in a web page or application's
body.”
“Mark In HTML, the tag defines the marked text. It functions to highlight
the particular passage that is contained within the paragraph.

nav: The tag is used to declare the navigational part in HTML documents.
Links on websites are typically organised into parts that let people
navigate the site. These URLs are acceptable to put within your nav tags.
section: It defines a theme-based grouping of content.
details: The tag contains the content/information that is initially hidden
but can be viewed upon user request. You can create an interactive
widget that the user can open and close by using this tag. The details
tag's contents are seen when the set attributes are opened.
summary: The tag defines the element's HTML summary. When the
element is used with it, the element provides the user with a summary.
When the user clicks on the summary, the previously hidden material
inside the element is revealed. The tag was introduced with HTML 5.
The tag requires the opening and closing tags. “
“time: To display the data/time in a human-readable format, use the tag.
Dates and times can also be encoded in a machine-readable format using
this method. Users can add birthday reminders or scheduled events to
their calendars, which is a major benefit, and search engines can
generate more intelligent search results.”
“bdi: The Bi-Directional Isolation is denoted by the tag. It sets one text
apart from another, even if they have different formatting. When user-
generated text has an unclear direction, this tag is used.
wbr: The HTML tag, which stands for word break opportunity, designates
the location within the text that the browser interprets as a line break. It
is typically utilized when a term is overly lengthy and there's a danger the
browser would break lines accidentally in order to fit the text.
datalist: The HTML files' autocomplete functionality is provided by the tag.
It can be utilized with an input tag to make it simple for users to choose
the data and fill out forms.
keygen: In HTML, a key-pair generator field in a form is specified using
the tag. The element's function is to offer a safe method of user
authentication. A private key and a public key are generated upon
submission of a form. The public key is transmitted to the server, and the
private key is kept locally. In order to authenticate users in the future, a
client certificate is generated using the public key.
output: A client-side script, like JavaScript, can utilize the tag in HTML to
display the outcome of a calculation.
progress: This is a representation of a task's advancement. It also
indicates the amount of labor completed and the remaining amount to
download an assignment. Neither the disk space nor the pertinent query
are represented by it.
svg: This stands for Scalable Vector Images.”

“canvas: JavaScript is used to draw images on a web page using the tag
in HTML. Paths, boxes, text, gradients, and the addition of images can all
be drawn with it. It doesn't have a border or text by default.
audio: This describes the audio track or audio material.
embed: Establishes containers for third-party programs, typically a media
player.
source: It lists the and sources.
track: It specifies the and tracks.
video: It describes the content of the video.”
Benefits

All browsers supported.

more conducive to devices.

Simple to apply and utilize.

Beautiful websites can be created by combining HTML 5 with CSS,
JavaScript, and other technologies.
Drawbacks:

Writing lengthy codes is a time-consuming task.

It only works with contemporary browsers.

Creating Editable Content

Whether or not the element's content can be edited by the user is

indicated by the contenteditable property. The boolean values true and
false are used.

When an attribute, such as h1 <h1

contenteditable>GEEKSFORGEEKS</h1> , is provided without a value, its
value is interpreted as an empty string, which is then interpreted as true.

Being a global attribute, this one can be applied to any element.

“Syntax:
“<element contenteditable="true | false">”

Attribute values and description:

True

The element is editable if the contenteditable attribute's value is set to

true.

untrue

The element cannot be modified if the contenteditable attribute's value is

set to false.

Ex:

“<!DOCTYPE html>
<html>

<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1 contenteditable="true">
This is an Editable Heading element.
</h1>
</body>

</html>”

Checking Spelling Mistakes

To find spelling or grammar errors in the text fields, utilize HTML's Spell
Check tool.

HTML forms can have the Spell Check feature by using the spellcheck
element. The spellcheck attribute is an enumerated attribute that
specifies whether the HTML element will undergo an error check or not.
It's compatible with the "textarea" and "input" fields in HTML.

“Syntax :
“Syntax for spellcheck attribute in an input field in html:
“<input type="text" spellcheck="value">”

Syntax for spellcheck in a textarea field in html:

<textarea type="text" spellcheck="value"></textarea>”

The value that is assigned to spellcheck in the above syntax determines

whether or not spellcheck is enabled on the element. There are two
acceptable values for the spellcheck attribute:

True: It specifies that an error check should be performed on the HTML

element.
False: It states that there is no need to verify the HTML element for
problems.
The element type and browser definition are often the default values that
are used when the attribute is not set. It is also possible to inherit the
value from the ancestral element.

How to Make an HTML Form Spell Chequer in Action: In an HTML form,

spellchecking is activated when the spellcheck attribute is set to "true".
An example HTML programme with spellcheck enabled is shown below.

How to Disable HTML Form Spell Check To turn off spellcheck, set the
HTML form's spellcheck property to "false". Below is an example HTML
programme that has spellcheck disabled.

Examining Particular Data Points

The attributes that are not part of the standard HTML5 attributes but are
specifically created are called custom attributes. They allow us to use
HTML tags to contain our info. These attributes let you save private data
specific to a page or application and add custom data to HTML
components.

Any attribute whose name starts with data- is considered a custom

attribute. The data-* attributes allow custom attributes to be placed on
any HTML element. These are ignored by the user. The stored data can be
utilised by the JavaScript on the website. Our elements can also be styled
using these data properties.

Syntax:
<element data-*="value">
section of the personalised attributes
Name of attribute:
The attribute name needs to be at least one character long after the
prefix "data-." It should not contain any capital characters.

Value for an attribute: The value to be stored can be any string.

By using the getAttribute() and setAttribute() methods

Use HTML DOM getAttribute() to get the stored data from the attribute. It
will return an empty string or null if the requested attribute is not
available. HTML DOM setAttribute() allows you to add new attributes and
modify the value of any existing attribute.

Using a dataset, retrieve a data attribute

This method provides a DOMStringMap object with configurable data
characteristics. Each attribute has a food list attached to it, and the
attribute name is changed from "data-" to camelCase. To access these
properties, use the camelCase name as a key, e.g.,
element.dataset.keyname or element.dataset[keyname]. When an item is
clicked, the JavaScript described in the onclick attribute will execute.

Storage on the Client Side

Large volumes of data can be kept locally on the client-side web browser,
and web storage is more secure. Key-value pairs are used to store all of
the data.

There are two kinds of online storage APIs in HTML5.

a. Local Storage
b. Session Storage
localStorage is a method of client-side data storage. The data in
LocalStorage doesn't expire, so unless the user manually removes it, it
stays there forever.

“Syntax:
• For storing data in web storage: The key and value both
should be string or number;
LocalStorage.setItem("key", "value"); “

• For getting data from web storage: We will pass the key and
it will return value.
LocalStorage.getItem("key");

Sessions storage:
It is evident that local storage items are kept as key/value pairs; you can
confirm this by looking at the page's elements and then selecting the
Application option to access the local storage.

You can verify that the data is stored in the localStorage of the tab or
window by closing the current tab and returning to the same page, since
the localStorage object does not have an expiration date.

Data is stored on the client side via session storage. The data stored in
the SessionStorage is only visible while the tab is open; if the tab is
closed, the data will also be automatically removed from the
SessionStorage.

“Syntactic Grammar:
To keep information on the web:
SessionStorage.setItem("key", "value");

• For getting data from web storage:

SessionStorage.getItem("key");”

Drag and Drop Feature

It is simpler to relocate an object by grabbing it and moving it to a new

spot with the help of the highly dynamic and user-friendly idea of drag
and drop. This enables the user to move an element to a new location by
clicking and holding the mouse button over it, then releasing the mouse
button to drop it there.

Events of Drag and Drop:

“Ondrag: It is employed in HTML when dragging an element or text
selection.

ondragstart: It is employed to invoke the drag(event) function, which

defines the data to be dragged.

Ondragenter: It is employed to ascertain whether the drop target will

accept the drop or not. This event must be canceled if the drop is to be
accepted.

ondragleave: It happens when the drag is taking place and the mouse
moves away from an element before a legitimate drop target.

Ondragend: Where the dragged data can be dropped is specified.

ondrop: At the conclusion of the drag operation, it indicates the location

of the drop.

Ondragend :It happens when an element has been fully dragged by the
user. “

The Object of Data Transfer

When Drag and Drop is used in its entirety, the data transfer property is
employed. It is employed to retain data that has been dragged from the
source and drop it where it is wanted. These attributes are connected to
it:

configures the data for

“dataTransfer.setData(format, data) dragging.

data is cleared; if a format is

dataTransfer.clearData(format) given, only that particular data
is deleted.

produces a string with no data

or data in the format that has
dataTransfer.getData(format)
been supplied.

provides an array with every

dataTransfer.types format that was set during
dragstart.
returns every file for deletion.
ataTransfer.files

When dragging, a current

dataTransfer.setDragImage(element, image is displayed along with
x, y) the drop location's coordinates.

Adds the given element as an

dataTransfer.addElement(element) image for drag feedback.

outlines the user's permitted

actions, including none, copy,
dataTransfer.effectAllowed(value) link, move, and so forth.

controls feedback for dragover

and dragenter events,
dataTransfer.dropEffect(value) displaying the type of operation
(move, copy, link, or none).”

Method for HTML Drag and Drop

Use the draggable attribute to make an element draggable: \img
draggable="true">.
Use the ondragstart attribute to specify the drag behavior. Then, use
event.dataTransfer.setData() to define the data to be dragged by using
the drag(event) function.
To find the location where the data can be dropped, use the ondragover
event. Use event to stop default behavior.allowDefault() to make the drop
active.
To carry out the actual drop action, implement the ondrop event.

Web Applications That Are Offline

Authors can supply a manifest that tells the user's browser to save a copy
of the files for offline use and enumerates the files needed for the Web
application to run offline. This allows users to continue interacting with
documents and Web apps even when they are not connected to the
Internet, such when they are travelling outside of their ISP's service
region.

When a user visits a page that provides a manifest, the browser attempts
to update its cache. To achieve this, it gets a copy of the manifest and
downloads and caches each resource it mentions again, redownloading it
if it has changed since the user agent last viewed it.

During this process, a variety of events are sent on the ApplicationCache

object in order to tell the script about the cache update's status and allow
the user to receive the appropriate messages. These are the things that
have happened:

Event Interface Dispatched Next events

name when...

checking Event The user agent noupdate, downloading, obsolete,

is either
checking for error
updates or
attempting to
download the
manifest for the
Event Interface Dispatched Next events
name when...

first time. This

is always the
first episode of
every series.
.

noupdate Event Last event in sequence.

The
manifest
was still the
same.

downloadi Event The user progress, error, cached, updatere

ng agent is ady
either
fetching an
update that
it found or
is
downloading
the
resources
specified by
the manifest
for the first
time.
Event Interface Dispatched Next events
name when...

progress ProgressEve The progress, error, cached, updatere

nt manifest's ady
resource list
is being
downloaded
by the user
agent.

cached Event The Last event in sequence.

application
is currently
cached after
downloading
the
resources
specified in
the
manifest.

updaterea Event The Last event in sequence.

dy manifest's
resources
have been
freshly
redownload
ed, and the
script can
Event Interface Dispatched Next events
name when...

switch to
the updated
cache by
using
swapCache(
).

obsolete Event Last event in sequence.

The
application
cache is
being
removed
since it was
discovered
that the
manifest
had
changed to
a 404 or
410 page.

error Event The attempt Last event in sequence.

to cache the
application
has failed
since the
manifest
Event Interface Dispatched Next events
name when...

was a 404
or 410
page.
The
manifest
was still
there, but
the page
that
referenced
it didn't
download
correctly.
While
retrieving
the
resources
specified in
the
manifest, a
catastrophic
error
happened.

The attempt
to cache the
application
has failed
Event Interface Dispatched Next events
name when...

since the
manifest
was a 404
or 410
page.
The
manifest
was still
there, but
the page
that
referenced
it didn't
download
correctly.
While
retrieving
the
resources
specified in
the
manifest, a
catastrophic
error
happened.

The attempt
to cache the
Event Interface Dispatched Next events
name when...

application
has failed
since the
manifest
was a 404
or 410
page.
The
manifest
was still
there, but
the page
that
referenced
it didn't
download
correctly.
While
retrieving
the
resources
specified in
the
manifest, a
catastrophic
error
happened.
Event Interface Dispatched Next events
name when...

While the The user agent will briefly

update was attempt to retrieve the files once
being more.
executed,
the Since
the manifest
was either a
404 or 410
page, the
attempt to
cache the
programme
was
unsuccessfu
l.
The
manifest
remained
intact,
however the
page
referencing
it failed to
download
properly.
A
catastrophic
mistake
occurred
Event Interface Dispatched Next events
name when...

during the
process of
retrieving
the
resources
listed in the
manifest.

Since the
manifest
was either a
404 or 410
page, the
attempt to
cache the
programme
was
unsuccessfu
l.
The
manifest
remained
intact,
however the
page
referencing
it failed to
download
Event Interface Dispatched Next events
name when...

properly.
A
catastrophic
mistake
occurred
during the
process of
retrieving
the
resources
listed in the
manifest.

Since the
manifest
was either a
404 or 410
page, the
attempt to
cache the
programme
was
unsuccessfu
l.
The
manifest
remained
intact,
however the
Event Interface Dispatched Next events
name when...

page
referencing
it failed to
download
properly.
A
catastrophic
mistake
occurred
during the
process of
retrieving
the
resources
listed in the
manifest.

The
manifest
was
changed
while the
upgrade
was
running.

manifest
was
modified.
Event Interface Dispatched Next events
name when...

Web Communications

There is considerably more to "HTML5" than just markup. A plethora of

related JavaScript APIs are also available. Several novel technologies that
facilitate communication between clients and servers as well as between
documents are included in the ranks. Let's examine this.

An overview of the technologies available, an assessment of the current

level of support, and, if feasible, live demos will all be included in this
post. I will discuss the following technological advancements:

XHR and XHR2 with CORS Web Workers Web Sockets Web Messaging
Server Sent Events
standard model for communication events
An event object with a data attribute is sent to every event handler (XHR
excluded). The information provided with the message is included in this
property.

The event model largely revolves around onmessage, postMessage, or

send (again, excluding XHR).
With CORS, XHR and XHR2
Both synchronous and asynchronous XHR are possible. The only API that
(intentionally) permits synchronous queries is XHR; in other words, code
execution will halt until the callback occurs.

While XHR is nothing special, XHR2 allows us to manage uploads and

includes a progress event that lets you know how the upload or download
is going.

Cross-Origin Resource Sharing (CORS) is the hottest new feature in

XHR2. This means that if the server you're connecting to permits it, you
may send an XHR request across domains.
Although XHR is already widely used, XHR2 with CORS is preferable to
JSON-P because it allows for more precise control over the request as well
as the ability to handle failures and timeouts.

XHR and XHR2 support with CORS These days, XHR support is rather
stable (although IE6 need ActiveXObject to get it started).

XHR2 with CORS: IE8 (via XDomainRequest), Firefox 3.5, Chrome, and
Safari & MobileSafari
postMessage
Although this API is more outdated, it's still rather helpful for
circumventing the XHR same-origin restrictions. One way to communicate
between domains (and origins) is to have a document that can take
onmessage events from your origin, or your website.

Assistance with postMessage Chrome Safari

Opera Firefox Internet Explorer 8
Here is a postMessage demonstration.

Additionally, a project named EasyXDM uses the abstraction of the library

to add cross-domain messaging to all browsers, including IE6 and higher.
If this is the path you must take, it is well worth a look.

Online sockets
In my view, Web Sockets takes Comet's position. Using a browser hack,
Comet allows us to receive real-time server messages. That is directly
provided via the Web Sockets API.

Web sockets are bi-directional sockets that are used to send and receive
messages to and from the server. Unlike other comparable technologies,
Web Sockets allow cross-domain communication and do not impose
same-origin restrictions. This implies that you can run a separate server
for streaming content and host your regular "apps" server. Alternatively,
you may host your own pages and, should your users enable Web Socket
support, connect to a live Twitter stream.

Messages may only be sent after the socket is open, obviously.

You are unable to reopen a closed socket. In a similar vein, there's no set
way to open a socket. That is simply the result of creating the WebSocket
object.

This is a very basic API. "What do you put on the server side?" is the
question I get asked the most. Although I personally prefer Node, you
could use Jetty or a Nginx server instead. Although I'm not an expert on
the latter servers, I can attest to the fact that setting up a Node-based
server is quite easy. I've included a link to the code I used to run the
server in the live demo below.

Assistance with Web Sockets

Safari & MobileSafari for Chrome

Additionally, there is a fantastic Flash poly-fill known as web-socket-js.

When you integrate this into an application, it works with Web Sockets
just like a native would. I've using this for a couple personal projects, and
it performs admirably.

Web Sockets were the subject of a vulnerability advisory posted at the

beginning of December 2010, and both Firefox and Opera removed it
from their next releases. Mozilla has stated that they anticipate having
Web Sockets back in Firefox 4.0.1.
Assistance with Web Sockets
Safari & MobileSafari for Chrome

Additionally, there is a fantastic Flash poly-fill known as web-socket-js.

When you integrate this into an application, it works with Web Sockets
just like a native would. I've using this for a couple personal projects, and
it performs admirably.

Web Sockets were the subject of a vulnerability advisory posted at the

beginning of December 2010, and both Firefox and Opera removed it
from their next releases. Mozilla has stated that they anticipate having
Web Sockets back in Firefox 4.0.1.

Events Sent by the Server

Events are sent from the server to the client via the Server-Sent Events
API, which was first developed by Opera in 2006. It should be noted that
the client can only listen for messages through an EventSource (SSE); it
cannot send messages to the server.

Onmessage is the model used by this API. It is built with the EventSource
object.
Making sure your server doesn't cut off the client's connection—the
browser—is crucial. Closing the connection causes the API to enter polling
mode, as most examples on the web do (keep in mind that this is the
exact issue I ran with when I first wrote this article).

In polling mode, the API behaves exactly like an XHR poll, with the
onopen firing nonstop.

You can view all of the server-side code here: Observe that custom-
echo.js is operating on a Node.js server. Because it's completing several
tasks, there's a little bit more code than you may anticipate: 1. Managing
file HTTP requests (and hence being able to serve itself) 2. Managing
events sent by the server and maintaining the connection 3. Configuring a
Web Socket server so that each time a new connection is established, all
of the open sessions receive a server-sent event.
Assistance with Server-Sent Events
a. Safari & MobileSafari
b. Chrome
c. Opera11

Web Administrators
One method of starting a new thread of operation within the browser is
using Web Workers. This is included since it's still necessary for you to
connect with your Web Workers, and the way you do so is comparable to
some of the previously covered strategies. But keep in mind that this is
not a way for a client (browser) to communicate with a server. It appears
more like a different browser window is running a specific JavaScript
block.

Think of a scenario when your UI gets unusable due to a lot of JavaScript

executing. This is an example of when to employ a Web Worker. Because
the browser is essentially a "single-threaded application," the user
interface hangs. (Inside, it's not really, but from a JavaScript and
rendering standpoint, it is). To keep the UI working, a Web Worker may
be assigned this JavaScript task.

It's critical to realize that a Web Worker is isolated from other applications
and files and doesn't have access to the DOM. Furthermore, the only ways
you can interact with it are through the onmessage and postMessage
procedures.

Assistance for Chrome Web Workers

Safari
Chrome
Opera
Use Opera Firefox

Cross-Document Messaging

Messages between documents are sent via web messaging. Cross-origin

resource sharing is possible with web messaging (CORS).

The HTML5 Web Messaging API's primary characteristics are as follows:

Messages between documents

Data can be sent and received across more than two Web pages.
Communication across domains is also possible since cross-document
messaging is not subject to the Same Origin Policy.

Channel communications

Through the port of the MessageChannel interface, messages can be sent

and received (in mobile, wearable, and TV apps).

Messages can be sent and received asynchronously inside one domain or

across separate domains using the Web Messaging API and the
MessageEvent object (in TV, wearable, and mobile applications).

Using Messaging Across Documents

Using the postMessage() function of the receiving page window object (in
TV, wearable, and mobile applications), send the message from the
sending page. The receiving page window object needs to be set up to
accept messages in order to receive the page.

The following parameters are supported by the postMessage() method:

message: Sending a message.

targetOrigin: The domain that is being notified. Use the wildcard ('*') if a
specific domain cannot be defined.
List of things that can be transferred (optional).
Gaining proficiency with cross-document messaging improves your
application's communication capabilities:

Make documents A and B.

Put document B within document A as an iframe:

Send a message to document B from document A using the

sendMessage() function.

To send the message to the iframe, use the iframe window's

postMessage() method, which transmits the message from the method
content.
Channel Messaging
The two properties of the MessageChannel instance are port1 and port2,
and it broadcasts both sending and receiving messages. A message
posted from one port using the postMessage() function is received by the
other through the message event. Each port is used for sending and
receiving messages.

Gaining proficiency with channel messaging improves your application's

communication capabilities:

Create a MessageChannel interface instance (in mobile, wearable, and TV

apps) in document A with the two message port characteristics (in mobile,
wearable, and TV applications) port1 and port2 in order to transmit a
message from document A to document B.

Document B receives the port2 attribute of the MessageChannel instance

via the postMessage() function of the document B window object:

Desktop Notifications
No matter where you are in the globe, you can receive push alerts to
Chrome or Firefox thanks to the html5 notification integration.
Additionally, html5 supports Firefox and Chrome on Android, allowing
integrations that function like native apps without actually requiring
native apps.
Setup to view changes:
You must add the following lines to your configuration.yaml file in order to
enable this platform. Restart Home Assistant after making changes to the
configuration.yaml file for them to take effect. Navigate to Settings >
Devices & services > Entities to see the changes.
Configuration variables:
vapid_pub_key string NEEDED

The email account of your Google account associated with your Firebase
project, see configuring the platform.
vapid_prv_key string required vapid_pub_key string

The Google-generated VAPID public key (the one that is instantly

available under "webpush certificates"), refer to setting up the platform

The email address linked to your Google account, as mentioned in the

configuration of the platform, for your Firebase project

END OF MODULE I

MODULE II

CSS Introduction

The method of presenting web pages was made simpler with the creation
of the CSS (Cascading Style Sheets) language. It provides guidelines on
the colours, fonts, spacing, and positioning that should be used to
describe a webpage's design and allows you to apply styles to HTML
documents. Thanks to CSS, developers and designers have a great deal of
control over how HTML components are displayed.

HTML employs tags, but CSS makes use of rule sets. To add CSS styles to
the HTML element, selectors are utilised. While CSS is easy to learn and
understand, it provides a great deal of flexibility over how an HTML
document is displayed.
Why is CSS used?

saves time by just needing to create CSS once and then applying it to
several HTML pages.
Easy Maintenance: A single alteration can alter the style worldwide.

Methods of clean coding that improve readability for search engines are
called "search engine friendly."
Improved Styles: Compared to HTML, more properties are available.
Offline Browsing: Web applications can be stored locally by CSS using
offline caching, allowing for offline viewing.

Syntax of CSS
Style rules make up CSS, which the browser interprets and applies to the
appropriate elements. A declaration block and a selector are components
of a style rule set.

Selector: Applies styles to particular HTML elements.

Declaration: A property plus its associated value combined.

“// HTML Element

<h1>GeeksforGeeks</h2>

// CSS Style
h1 { color: blue; font-size: 12px; }

Where -
Selector - h1
Declaration - { color: blue; font-size: 12px; } “

The HTML element that you wish to style is indicated by the selector.
One or more declarations are contained in the declaration block and are
divided by semicolons.
A colon (:) separates the name of the CSS property from its value in each
declaration.

For Example
CSS

“p {
color: blue;
text-align: center;
}”

Curly braces enclose declaration blocks in CSS, and declarations are

always concluded with a semicolon. Every paragraph element (

tag) in this example will have blue text and be center-aligned.

CSS Selectors

You can apply styles to HTML components on your pages depending on

their ID, class, type, attribute, and more by using CSS selectors. This
tutorial will assist you in comprehending the subtleties of CSS selectors
and how crucial they are to improving the usability of your webpages.
More effective and dynamic web design is made possible by having a
better understanding of selectors such the universal selector, attribute
selector, pseudo-class selector, and combinator selectors.

CSS Selector Types:

There are several varieties of CSS selectors, and each selects HTML
elements in a different way. Let's investigate them:”

1. Simple Selectors: These allow you to choose HTML elements by their element
name, id, attributes, and other characteristics.
Categories:
Element Selector: HTML elements can be chosen using the element selector by using
their tag names.
id Selector: An HTML element with a certain id attribute is the target of an id selector.
class Selector: This tool chooses components based on a specific class attribute.

2. Universal Selector: Allows you to choose every element on the page.

3. Attribute Selector: Chooses elements according to their position or state; for

example, :hover selects elements with hover effects.
Pseudo-Class Selector: Selects elements based on their state or
position, such as :hover for hover effects.
5. Combinator Selectors: To define relationships between components, such as child
(>) or descendants ( ), combine selectors.
6. Pseudo-Element Selector: Selects specific parts of an element, such
as ::before or ::after.”

The use of CSS selectors is essential to good web design. By accurately

targeting and styling HTML components, these selectors enable developers
to produce more visually appealing and dynamic web sites. The use of
selectors such as simple, combinator, pseudo-class, and pseudo-element
can greatly improve the appearance and usefulness of your webpages.
Adding these selectors to your CSS toolbox can enhance user experience
and help you become a better web developer.

Inserting CSS in an HTML document

Using CSS (Cascading Style Sheets) with HTML is crucial when creating
user-friendly and aesthetically pleasing websites. There are three main
ways to incorporate CSS: inline, internal, and external into your HTML
projects. Every technique has benefits and ideal applications. This tutorial
will go over each of these techniques in-depth to assist you in selecting the
right strategy for your web development requirements.

Ways to Include CSS in HTML

1.” CSS inline

By employing the style attribute, inline CSS enables you to apply styles
inside HTML tags directly. When styling on a small scale or needing to
give a single element a distinct look, this technique works well.ags
employing the style property.

2. Inside CSS
By inserting CSS styles inside of

To guarantee that the styles are read before the body content loads, it is
recommended to add the section.

3. Outside CSS “
Using the tag, link the external CSS file to the HTML file. This is done by
creating a second CSS file with a.css extension. Because it keeps the
design and content distinct, this approach allows for superior code
reusability and maintainability, making it the most efficient for large
projects.

Backgrounds, Fonts, and Text Style

Multiple background properties, such as background colour, image,

position, size, repeat, origin, clip, and attachment, can be configured in a
single declaration using the CSS background property. For elements to
have their visual look customised, this feature is necessary.

Currently Active Property:

background: linear-gradient(to right, #ff9966, #ff5e62);

CSS Background Colour

“The following properties can be shortened to form the CSS Background:
CSS Background-color Property: The background-color property in CSS is
used to specify the background color of an element.

CSS Background-image Property: The background-image property is used to

set one or more background images to an element.

CSS Background-repeat Property: The background-repeat property in CSS is

used to repeat the background image both horizontally and vertically.

CSS Background-attachment Property: The background-attachment property

in CSS is used to specify the kind of attachment of the background image with

respect to its container.:

CSS Background-position Property: In CSS body-position property is mainly

used to set an image at a certain position.

CSS Background-origin Property: The background-origin is a property defined

in CSS which helps in adjusting the background image of the webpage.

CSS Background-clip Property: The background-clip property in CSS is used

to define how to extend the background (color or image) within an element.”

Property of background colour

The element's background colour is specified by this property. Additional
notations for colours include "green," "#5570f0" in HEXadecimal notation,
and "rgb(25, 255, 2)" in RGB notation.
Syntax:
“body {
background-color:color name
}”

Image Property of the Background

This attribute designates a picture that will be used as an element's
backdrop. The image fills the full element by default because it is
repeated.

Syntactic Grammar:

body { background-image: link;}

Repeating background property

The image is automatically repeated both vertically and horizontally by
the background image parameter.
Syntax: To horizontally repeat a picture

body { background-repeat: repeat:x; background-image:link;}

Background-attachment Property
To fix the background ground image, utilise this property. There will be no
page scrolling for the image.

Syntactic Grammar:

body { background-attachment: fixed; }

Background-position Property
This property is used to set the image to a particular position.
Syntax :
“body {
background-repeat:no repeat;
background-position:left top;
}”

Font styles:
The text contained in HTML components is styled using CSS fonts. While
font-size, font-weight, and font-style regulate the text's size, thickness,
and style, font-family determines the typeface. When these qualities are
combined, web content's typography and readability are improved.

There are five general font families in CSS:

Each letter in serif fonts has a little stroke at its edge.
Sans-serif typefaces provide crisp lines without any extraneous strokes.

Monospace fonts: in these, each letter has a constant width.

Cursive fonts replicate handwriting in real life.
Fantasy typefaces are whimsical and ornamental.

CSS font-family attribute:

It's employed to specify an HTML element's font type. It has multiple font
names stored in it as a backup.
Syntactic Grammar:

Font-family: "Font Family Name";

Property with CSS font-style

It is employed to define an HTML element's font style. "Normal, italic, or
oblique" are possible options.
Grammar:

font-style: name of style;

CSS Font-Weight Parameter

It is employed to adjust the font's boldness. Its worth might range from
"bold, lighter, bolder, and normal."

Syntactic Grammar:

font-weight: the value of font weight;

CSS font-variant Assets

It's employed to produce the effect of little caps. "Normal or small-caps"
is one option.
Syntactic Grammar:

font-variant: value of the font variant;

The CSS font-size property determines the size of the font used in an
element.
This is utilised to establish the size of the font for an HTML element. The
font-size can be specified using several units such as pixels, %, em, or
predefined values like small or large.

The syntax refers to the set of rules that dictate the structure and
arrangement of elements in a programming language or command.
The font size is set to the specified value.

Syntax:
font-size: font size value;

The CSS font-stretch property

The CSS font-stretch property modifies the width of specific fonts, enabling
you to decrease or increase the width of the text. The system allows for the
input of values such as normal, condensed, expanded, and particular
percentages.

The CSS font-kerning property

The CSS font-kerning attribute governs the utilisation of kerning, a
technique that modifies the spacing between characters to enhance
legibility. The possible settings for enabling, using default, or disabling
kerning are "auto," "normal," and "none," respectively.

Syntax:
font-kerning: auto|normal|none;

Text Formatting:

Cascading Style Sheets (CSS) Text formatting is the application of styles

to text elements in order to manage their look and arrangement. These
features encompass attributes such as colour, alignment, ornamentation,
indentation, justification, shadows, spacing, and orientation. These
characteristics boost the legibility and visual appeal, hence enhancing the
way textual content is presented on web pages.

Syntax:
The Syntax to write this property:
“Selector {
property-name : /*value*/”

Properties:

“text-color: The text-color property is used to provide the colour of the

text. It can be defined using a colour name, hex value, or RGB value.
.

text-align: The property "text-align" is used to indicate the horizontal

alignment of text within a block or table-cell element.

text-align-last: The property text-align-last determines the alignment of

the last lines within an element.

text-decoration: The CSS property "text-decoration" is used to adorn or

embellish the appearance of text content.

text-decoration-color: Sets color of text decorations like overlines,

underlines, and line-throughs: Sets various text decorations like
underline, overline,

Combines text-decoration-line and text-decoration-color properties.

text-decoration-line: The property text-decoration-color is used to specify

the colour of text decorations like as overlines, underlines, and line-
throughs.
text-decoration-style: The text-decoration-style property justifies text by
distributing words evenly across lines.

text-indent: The "text-indent" property is used to specify the amount of

space that should be left before the first line of a block of text. This
property is commonly used to hide overflow text.
text-justify: The CSS property "text-justify" is used to evenly distribute
words in a paragraph, resulting in fully justified text.
text-overflow: The CSS property "text-overflow" is used to indicate that
any overflow text should be buried.

text-transform: The property "text-transform" is used to determine the

capitalization of text.

text-shadow: The CSS property "text-shadow" is used to apply a shadow

effect to text.

letter-spacing: The property "letter-spacing" defines the amount of space

between individual characters in a document

line-height: The line-height property determines the amount of vertical

space between lines of text

direction Specifies the orientation of the text.

word-spacing: The word-spacing property determines the amount of

space between words in a line of text.”

Creating Boxes

The CSS Box Model is a foundational notion in CSS that dictates the
organization and positioning of components on a webpage. By acquiring
knowledge of this model, you will be able to design visually captivating
features that effortlessly adapt to different screen sizes. It is utilized for
the creation and arrangement of the design and structure of web pages.
This essay will explore the fundamental elements of the box model and its
practical consequences.

The CSS Box Model refers to the layout and structure of elements on a
webpage. It consists of four components: the content area, padding,
border, and margin. These components determine the size, spacing, and
positioning of elements on the page.
The CSS box model is a container that encompasses multiple attributes,
such as borders, margins, padding, and the content. These attributes
jointly establish the size and arrangement of an element.

Now, let's analyze the main elements:

Content can be resized using the width and height property, regardless of
whether it is in the form of text, images, or other media.
Padding refers to the technique of adding extra space around an element,
within the boundaries of any specified border.
Border: The border serves the purpose of concealing the content and any
padding, while also providing the ability to define the style, color, and
width of the border.
Margin refers to the space that is created around an element, specifically
around the border area.
1. Subject Area

Consists of the factual information, such as written content, visuals, or

other forms of multimedia.
Dimensions are determined by utilizing the width and height parameters.
Confined within the boundary of the content edge.

2. Area for padding

Encloses the content region.
Interior space included within the boundary of the box.
Dimensions are defined by the width and height of the padding box.

3. Border Region
Resides within the space between the padding and margin.
The dimensions of an object are determined by its boundaries.

4. Area of Margin
This action isolates the element from nearby elements.
The dimensions are determined by the width and height of the margin
box.

What is the functioning mechanism of the box model?

When modifying the width and height parameters of an element, we are

primarily altering the content area. Nevertheless, in order to get the
complete dimensions of the element, it is necessary to take into account
the padding and borders as well.
When using CSS to define the width and height properties of an element,
we have just specified the dimensions of the content area. In order to
accurately determine the total dimensions of an element, it is necessary to
incorporate padding and borders. While margin does impact the overall
space occupied by an element on the page, it is not considered to be
included in the actual dimensions of the box. This is because margins
exhibit unique behaviors, such as margin collapsing.

Calculation of the overall width

The total width of an element is calculated by adding the width of the
content, the left and right padding, and the left and right border.

The element has a width of 94 pixels.

The total width is calculated by adding the width of 80px, the left and
right padding of 10px, and the left and right border of 4px, resulting in a
total width of 94px.
Calculation of Overall Height
The total height of an element is calculated by adding the height, top
padding, bottom padding, top border, and bottom border.
The element has a height of 84 pixels.
The total height is calculated by adding the height of 70px, the padding of
10px (top and bottom), and the border of 4px (top and bottom), resulting
in a total of 84px.

The CSS display property:

The CSS display property is crucial for determining the layout of web pages.
To produce adaptable and reactive designs, it is crucial to comprehend their
behavior and employ them proficiently. The CSS property "display"
determines how an element is rendered and what type of box it is displayed
as. The rendering of an element in the layout is determined by its style,
which dictates its position and behavior within the document's flow and
structure.
Syntax:
display: value;

Display properties and values:

“Inline: It is utilized to exhibit an element in the form of an inline element.
Block: It is utilized to exhibit an element as a block element
Contents: It is utilized to make the container vanish.
Flex: It is utilized to exhibit an element as a container with block-level
flexibility.
Grid: This property is utilized to present an element as a container with a
block-level grid layout.
inline-block: The "inline-block" property is utilized to present an element
as a container that behaves like an inline-level block.
inline-flex: The property "inline-flex" is utilized to present an element as
a flex container at an inline level.
inline-grid: The inline-grid property is utilized to present an element as a
container for an inline-level grid.

inline-table: The "inline-table" property is utilized to present an inline-

level table. piece of furniture with a flat top and one or more legs, used
for various purposes such as eating, working, or playing games

list-item: This is utilized to showcase all the components within the

element.
run-in: It is employed to exhibit an element either inline or block level,
contingent upon the context.
table: It is utilized to establish the behavior as a table for all parts.
table-caption: This property is utilized to designate the behavior of an
element as a for all elements.

table-column-group: The table-column-group property is utilized to

specify the behavior of all elements as columns.
table-header-group: The table-header-group property is utilized to
designate the behavior of all elements as headers.

table-footer-group: The table-footer-group property is utilized to

designate the behavior of all elements as a footer.
table-row-group: The table-row-group property is utilized to designate
the behavior of all items as a footer.

table-cell: The table-cell property is utilized to establish the behavior of

all elements as table cells ().
table-column: The table-column property is utilized to establish the
behavior of all elements as .
table-row: The "table-row" property is utilized to specify that all
elements should behave like "" (table row) elements.
none: It is employed to eliminate the element.
Definition: The term "initial" refers to the action of assigning a default
value to a variable or parameter.
Inheritance: It is utilized to acquire properties from the elements of its
parent. none: It is used to remove the element.

initial: It is used to set the default value.

inherit: It is used to inherit property from its parents’ elements.”

Comprehending the Display Property

The display attribute determines the visual presentation of an HTML

element. The box type generated by an element is controlled by it, which
influences how it is positioned and behaves within the document flow. Now,
let's explore the fundamental principles:

1. Utilizing the display:block property

The default attribute for elements is referred to as the property. It arranges

them in a vertical orientation, sequentially. It is possible to modify the
vertical and horizontal dimensions of a block-level element.
2. Utilizing Inline Display

Utilize this attribute to exhibit an element in a horizontal line. The text

does not initiate a line break and maintains the continuity of the
information.
3. Utilizing the inline-block display property

This value combines attributes of both block and inline, enabling items to
flow in a line while retaining block-level properties. It is beneficial for
constructing adaptable designs.
4. Utilizing the CSS property "display: none":

This attribute conceals the div or container that utilizes it. Applying it to
one of the div elements will enhance clarity in functionality.

5. Utilizing the CSS properties show flex and display grid:

These values provide robust layout choices. The Flexbox property

(display: flex) allows for flexible, linear layouts, whereas the CSS Grid
property (display: grid) allows for two-dimensional layouts based on a
grid system.

Positioning and Floating Elements

The CSS float property determines the positioning behavior of an element,

specifically how it should be aligned in relation to other elements. The
element is positioned to the left or right within its container, enabling text
and inline components to wrap around it. This is frequently employed in
layouts that involve images or sidebars.

Syntax
float: none|left|right|initial|inherit;

Properties and values:

“None: The default value; the element does not float

Left: The "left" element is positioned on the left side of the container, which
allows the content to wrap around its right side.

Right: The element is positioned to the left within the container, enabling
the content to wrap around its left side.
Inherit: An element acquires the floating attribute from its parent
element. The element inherits its default value.

Initial: The element is reset to its default value.

Features of CSS3

1. One of the new features introduced in CSS3 is the generic sibling

combinator. This combinator, represented by the tilde (~) symbol,
allows for the selection of sibling components.
2. CSS Selectors: CSS3 selectors are more sophisticated than the basic
selectors provided by CSS, offering a series of user-friendly and
uncomplicated selectors.

3. CSS3 introduces numerous additional pseudo-elements to facilitate and

enhance the process of styling with greater precision. The new convention
of using double colons (::) is also introduced.

4. CSS3 introduces several new border style elements, such as border-

radius, border-image-slice, border-image-source, and values for "width
stretch".

5. CSS3 includes several new background style attributes, including

background-clip, background-size, background-style, and background-
origin. “

Media Queries

The CSS media query is utilized to establish a responsive web design, so

facilitating the creation of a website that is user-friendly. The variation in
the display of web pages across different systems is determined by factors
such as screen size and media formats. Media enables us to customize and
optimize the user interface of the website for different platforms such as
tablets, desktops, and mobile phones.

Media inquiries can be utilized to verify several aspects, such as those

listed below:
Dimensions of the viewport
Dimensions of the gadget
Orientation refers to the direction in which an object is positioned or
aligned. Resolution, on the other hand, pertains to the level of detail or
clarity in an image or display.

A media query is comprised of a media type that can include one or more
expressions that can be evaluated as either true or false. The query result
is true if the supplied media corresponds to the device type on which the
content is being viewed. The style is applied if the media query evaluates
to true. Put simply, it utilizes the @media rule to incorporate a set of CSS
characteristics, contingent upon specific situations.

Syntax:
@media not | only mediatype and (expression)
{
// Code content
}

To obtain the screen width, as well as the width and height of the viewport
for various devices, we can include a breakpoint. A breakpoint is a specific
point or marker that dictates when the layout should be altered by
introducing new rules and reorganizing elements within the media queries.
There are specific breakpoints, which are not standardized resolutions, that
can be utilized to accommodate the various widths and heights of devices.

Mobile devices typically have a screen width ranging from 320 pixels to 480
pixels.
The recommended screen resolution for tablets or iPads is between 480
pixels and 768 pixels.

For laptops or small-size screens, the recommended resolution range is

between 768 pixels and 1024 pixels. For desktop or large-size screens, the
recommended width range is between 1024 pixels and 1200 pixels.
For devices of an extra-large size, the screen width should be 1200 pixels
or greater. Breakpoints are useful for constructing responsive designs, such
as mobile-first design, by defining distinct sets of values for width and
height. Media queries can be utilized to modify the layout of a webpage
based on the browser's orientation.

Overview of JavaScript

JavaScript is a programming language that is commonly used for creating

interactive and dynamic web pages.
JavaScript is a programming language that is lightweight, cross-platform,
single-threaded, and interpreted compiled. It is commonly referred to as
the scripting language used for creating webpages. HTML is widely
recognized for its role in web page building, and it is also utilized in
several non-browser settings.

JavaScript is a dynamically typed language, meaning it is weakly typed.

JavaScript is versatile and may be utilized for both client-side and server-
side development. JavaScript is a language that combines both imperative
and declarative programming paradigms. JavaScript encompasses a
predefined collection of objects, such as Array, Date, and Math, as well as
a fundamental set of language components, including operators, control
structures, and statements.
Client-side: It provides objects for manipulating a browser and its
Document Object Model (DOM). Client-side extensions enable a program
to add items to an HTML form and handle user events like mouse clicks,
form input, and page navigation. Notable libraries for the client side
include AngularJS, ReactJS, VueJS, among others.

Server-side: It provides objects necessary for executing JavaScript on a

server. Server-side extensions enable applications to establish
communication with a database and maintain the consistency of
information over multiple invocations of the application. Additionally,
these extensions can facilitate file operations on a server. The currently
renowned framework is node, which is quite practical.JavaScript.
Imperative language focuses primarily on the method or process of
execution. It effectively regulates the progression of computing. The
procedural programming technique and the object-oriented approach fall
under this category. Specifically, when considering the use of
async/await, we are contemplating the further actions to be taken
following the asynchronous call.
Declarative programming involves focusing on the process of how a task
is to be executed, with a primary emphasis on logical computation. The
primary objective is to articulate the intended outcome without providing
explicit instructions on how to achieve it, similar to what an arrow
function accomplishes.

How can I establish a connection between a JavaScript file and an HTML

file?
There are two methods for incorporating JavaScript into an HTML file:

Embedded JavaScript: JavaScript can be incorporated into an HTML file by

placing the code within the

Syntax:
“<script>
// JavaScript Code
</script>”
The history of JavaScript
The creation of this entity took place in 1995 under the supervision of
Brendan Eich, who was employed as an engineer at Netscape at the time.
The initial name of the language was LiveScript, but it was subsequently
changed. JavaScript, unlike the majority of computer languages, lacks the
notion of input or output. The language is specifically designed to function
as a scripting language within a host environment. It is the responsibility
of the host environment to offer the necessary means for interacting with
the external world. The browser is the most prevalent host environment.

Characteristics of JavaScript
Based on a recent poll done by Stack Overflow, JavaScript has been
identified as the most widely used programming language globally.
Due to advancements in browser technology and the integration of
JavaScript into server-side development through Node.js and other
frameworks, JavaScript has significantly expanded its capabilities.
JavaScript offers several functionalities, including:
JavaScript was initially developed primarily for the purpose of
manipulating the Document Object Model (DOM). Historically, websites
were predominantly static in nature. However, with the advent of
JavaScript, the development of dynamic websites became possible.

Functions in JavaScript are considered objects. Objects of this kind

possess characteristics and methods, similar to other objects. They can be
utilized as parameters in other functions.
Capable of managing and manipulating both dates and times.
Implements form validation even when the forms are generated using
HTML.
A compiler is unnecessary.
JavaScript is commonly used in web development. Enhancing static
websites with interactive features and functionality JavaScript was created
in 1995 for this purpose. AngularJS enables the achievement of this task
with great ease.
Online software programs that may be accessed and used through a web
browser. Thanks to advancements in technology, web browsers have
significantly enhanced their capabilities, to the point that a programming
language became necessary to develop powerful web apps. To navigate a
map on Google Maps, simply click and drag the mouse. Accessing the
detailed view is made possible with a single click, thanks to the utilization
of JavaScript. It utilizes Application Programming Interfaces (APIs) to
enhance the functionality of the programming. The Electron and React
frameworks are beneficial in this field.

Server Applications: Node.js has enabled JavaScript to go from being

solely a client-side language to being a powerful tool on the server side.
Games: JavaScript is not only used for building games on websites, but it
is also utilized for recreational purposes. JavaScript's popularity in game
creation is due to its conjunction with HTML 5. It offers the EaseJS library,
which offers methods for manipulating complex graphics.
Smartwatches: JavaScript is utilized in a wide range of gadgets and
applications. PebbleJS is a library that is utilized in wearable apps. This
framework is suitable for apps that rely on the Internet for their
operation.
Art: Artists and designers have the ability to create any desired visual
using JavaScript to draw on an HTML 5 canvas. Additionally, they may
enhance the auditory experience by utilizing the p5.js module.

Machine Learning: The ml5.js library, written in JavaScript, enables the

integration of machine learning into web development.
Mobile Applications: JavaScript may be utilized to develop applications
for non-web environments as well. JavaScript's strengths and
functionalities make it an influential tool for developing mobile
applications. This is a JavaScript-based framework designed for
constructing online and mobile applications. React Native enables the
development of mobile applications that are compatible with many
operating systems. There is no need for us to write code for several
systems. Develop your code once and utilize it across several platforms!

Constraints of JavaScript
Threats to security: JavaScript can be utilized to retrieve data through
AJAX or by modifying tags that load data, such as <img>, <object>, and
<script>. These attacks are referred to as cross-site scripting attacks. The
attackers inject JavaScript code that is not originally part of the website
into the visitor's browser, allowing them to retrieve the visitor's details.
Performance: JavaScript lacks the same level of efficiency as many
conventional programming languages, resulting in relatively slower
execution for complicated JavaScript programs. However, as JavaScript is
mostly used for executing basic operations within
a web browser, its performance limitations are not typically seen as a
significant hindrance.

Proficiency in a scripting language requires programmers to possess

extensive understanding of programming ideas, fundamental language
objects, and client and server-side objects. Without this knowledge,
writing advanced scripts using JavaScript would be challenging.
The language lacks robust error handling and type checking capabilities.
It is considered weakly typed because there is no requirement to explicitly
declare the data type of a variable. Compile does not do type checking
incorrectly.

JavaScript Functions
A JavaScript function is a code block specifically created to execute a
specific task. A program can reuse a set of instructions by encapsulating
them. Functions in JavaScript can accept parameters, execute
statements, and provide return values. This functionality allows for
effective structure, modularity, and reusability of code in JavaScript
programming.
In JavaScript, a function is created by using the keyword "function"
followed by the function name and parameters enclosed in parentheses.
The portion of the function contained within the curly braces {} is
referred to as the function's body.

In JavaScript, functions can be assigned and utilized in the same manner

as variables for calculations or assignments.

Syntax: The basic syntax to create a function in JavaScript is shown

below.
“function functionName(Parameter1, Parameter2, ...)
{
// Function body
}”

Function Invocation: Occurs when an event is triggered, such as when a

user clicks a button.
When specifically invoked from JavaScript code.
Executed automatically, as seen in self-invoking functions.
Function Definition: Prior to use a user-defined function in JavaScript, it is
necessary to construct one. The syntax provided above can be utilized to
construct a function in the JavaScript programming language. A function
definition is occasionally referred to as a function declaration or function
statement. The following are the guidelines for constructing a function in
JavaScript:

Each function must start with the keyword "function" followed by, A user-
defined function name that must be distinct.
A series of parameters surrounded within parenthesis and delimited by
commas,
The body of the function consists of a series of statements contained
behind curly braces {}.
Function Declaration: It defines a function using the function keyword. A
function declaration necessitates the inclusion of a function name.

Syntax:
“function geeksforGeeks(paramA, paramB) {
// Set of statements
}”

Function expression

A function expression is a construct that is similar to a function declaration

but does not include the function name. Function expressions can be
assigned to variables.

Syntax:
let geeksforGeeks= function(paramA, paramB) {
// Set of statements
}

Arrow function:

An arrow function is a highly utilized and effective approach for creating

functions in JavaScript due to its straightforward implementation. It is a
streamlined and condensed form of a standard function expression or
syntax.
Parameters of a function:
Syntax:
let function_name = (argument1, argument2 ,..) => expression

Thus far, we have been exposed to a considerable amount of information

on function parameters, although we have not delved into a comprehensive
analysis of them. Parameters are supplementary data that are transmitted
to a function. For instance, in the given scenario, the purpose of the
function calcAddition is to compute the sum of two values. The function
receives these two numbers as inputs for the addition operation. The
function parameters are included between parentheses following the
function name and are delimited by commas. A JavaScript function can
have any amount of parameters, but it cannot have zero parameters.

Invoking Functions:
Syntax:
functionName( Value1, Value2, ..);

Once a function has been defined, the subsequent action is to invoke or

execute it in order to utilize its functionality. To invoke a function, one must
utilize the function's name followed by the argument values wrapped
between parentheses, and conclude with a semicolon.
The following syntax demonstrates how to invoke functions in JavaScript:

Definition of Return Statement:

In certain scenarios, it is necessary to retrieve specific values from a

function following the execution of certain activities. When encountering
similar situations, the return statement in JavaScript might be utilized. This
statement is discretionary and typically serves as the concluding statement
in a JavaScript function. Examine our initial illustration featuring the
function designated as calcAddition. This function performs arithmetic
operations on two numbers and thereafter outputs the computed result.
Syntax: The most basic syntax for using the return statement is:
return value;

Events

JavaScript Events are the actions or occurrences that take place in the
browser. They can be activated by different user activities or by the
browser itself.

Typical occurrences include of mouse clicks, keyboard inputs, page

loading, and form submissions. Event handlers are JavaScript functions
that react to events, enabling developers to build interactive online
applications.

Syntax:
<HTML-element Event-Type = "Action to be performed"

Events and attributes and description

“Onclick Onclick Activated at the occurrence of a click event on an

element.

Onmouseover Mouseover Triggered when the cursor of the mouse is

moved across an element.
Onkeydown The event that occurs when a key is pressed down is called
"onkeydown".

Onkeyup The "onkeyup" event is triggered when a key is pressed and

released.

Onchange The "onchange" event is triggered when a key is released.

Onload The "onload" event is triggered when the value of an input

element is modified.

Onsubmit The "onsubmit" event occurs when a webpage has completed

its loading process.

Onfocus The onfocus event is triggered when an element receives focus.

Onblur The "onblur" event is triggered when an element no longer has

focus. “

Image Maps and Animations

How may an image map be created using JavaScript?

Last Updated: 27th August 2021
An image map is a graphic that is divided into several hotspots, each of
which links to a distinct file. Hotspots are clickable regions that we
generate on an image using the tag. This map is referred to as a client-
side image map since it is directly incorporated into the HTML code.
Methodology: The following is a detailed guide on how to make an image
map using JavaScript, presented in a step-by-step manner.

Step 1: Begin by incorporating an image into the webpage using the

tag. In this context, we shall utilize an extra characteristic called
"usemap". The usemap attribute's value must begin with the '#' symbol,
followed by the name of the map as specified below.

Syntax:
“<img src="map1.jpg" alt="Cocktails"

usemap="#mymap" width="600" height="400">”

Step 2: Next, we generate an image map by utilizing the tag. This

generates a map that is associated with the image by utilizing the
obligatory name property. The value of the name attribute must match

the value specified in the usemap attribute of the tag.

The syntax refers to the set of rules that dictate the structure and format
of a programming language or command.

Syntax:
<map name="mymap">

Step 3: The tag is utilized to create distinct clickable regions. We need to

determine the configuration of the region. The various geometric forms
include rectangle, circle, and polygon. The area's coordinates must be
provided, and the href attribute determines the link that will open when
the user clicks on the area.
Syntax:”
<area shape="rect" coords="x,y,x,y" href="">”

“<area shape="circle" coords="x,y,r" href="">

<area shape="poly" coords="" href="">”

Step 4: Next, we will determine the coordinates of the image.

“The rectangle image is defined by the coordinates x1, y1, x2, and y2.
The top left corner is represented by x1 and y1, while the bottom right
corner is represented by x2 and y2, as illustrated in the image.
The circle image will be defined by the coordinates x, y, and r, where x
and y represent the center of the circle and r represents the radius.
A polygon image is defined by a series of coordinates, x1, y1, x2, y2, x3,
y3, x4, y4, and so on. Each pair of x and y values represents the
coordinates of one of the corners of the image, as depicted in the image.
“

JavaScript Objects

The main data type in JavaScript, objects are the building blocks of
contemporary JavaScript. The primitive data types in JavaScript, which
include Number, String, Boolean, null, undefined, and symbol, all store a
single value according to their individual sorts; in contrast, these objects
are very different from each other.
The rules that specify the format and structure of a programming
language or command are referred to as the syntax.

The "new Object(value)" code snippet generates a new object with the
given value.
A certain value is applied when creating an object. There is a key-value
pair for the object with the name "object_name"; the key is "key_name"
and the value is "value".
It is possible to call the Object() function with or without the new
keyword. A novel entity is produced as a consequence of both actions.

Objects function as containers that can hold multiple values at once, but
primitive data types can only store one value per object. The values are
stored as attributes of the object, each with a distinct key. Organising
related functions and data together helps make our code more readable
and well-organized.
Objects are complex, made up of numerous combinations of reference
and primitive data types.

A data type that has a reference to it is called an object. A reference or

pointer to the reference value is given to variables that have been
allocated a reference value. The precise memory location where an object
is kept is indicated by a reference or pointer. The value is not directly
retained by the variables.

In JavaScript, objects can be described as an unorganized group of

interconnected data, consisting of primitive or reference types,
represented as "key: value" pairs. Variables and functions can both be
represented as keys in an object. In the context of an object, these keys
are referred to as properties and methods, respectively.
Genetic traits

Rather than being uniquely defined for the object itself, which is referred
to as the object's Own property, an object's inherited properties are those
that have been passed down from the object's prototype. We can use the
hasOwnProperty function to find out whether a property directly belongs
to an object. JavaScript data properties have four properties.
Value: The property's monetary estimate or worth.
writable: The property's value may be changed if it is set to true.

Enumerable: The property can be iterated over using the "for-in"

enumeration if it is set to true. On the other hand, a property is regarded
as non-enumerable if it cannot be named or counted.
configurable: If set to false, all attempts to edit the property's attributes
(except from [[Value]]) or make it an accessor property would be
unsuccessful. Likewise, changing [[Writable]] to false would also fail.

Browser Object Model

The Browser Object Model (BOM) is a JavaScript programming interface

tool used for interacting with web browsers. By facilitating the JavaScript
code, this allows for the access and manipulation of the browser window,
frames, and other browser-related objects.
The primary entity is the "window," which facilitates interaction with the
browser. By default, you have the ability to directly invoke window
functions.

window.alert("Hey Geeks");

// Equivalent to window.alert("Hey Geeks"); Note: It is not advisable to

explicitly provide "window" every time because it is the default. The code
alert("Hey Geeks"); is identical to the lengthy version.

Types and description:

“The Window Object Model (WOM) is a programming interface that

represents the browser window or tab. It provides a way to interact with
and manipulate the various elements and properties of the window or tab.
The browser window is a representation of the principal tool for
interaction within the Browser Object Model.

The History Object Model Facilitates navigation control by monitoring the

user's browsing history in the Browser Object Model.

The Screen Object Model provides details about the user's screen, such as
its dimensions, as part of the Browser Object Model.

The Navigator Object Model provides specific information about the user's
browser and system attributes within the Browser Object Model.

The Location Object Model is responsible for managing the current web
address (URL) and enables modifications within the Browser Object
Model.”

JQuery – Introduction

A free JavaScript framework called jQuery simplifies communication

between JavaScript and the Document Object Model (DOM) of an
HTML/CSS document.
Web programming tasks such as manipulating and traversing HTML
documents, handling browser events, generating DOM animations,
enabling cross-browser JavaScript development, and facilitating Ajax
interactions are made easier with jQuery.
It should be mentioned that the only library that meets the needs of
programmers and designers at the moment is jQuery.
jQuery is renowned for its philosophy of "achieving more with less code."
This idea can be further expounded upon through the introduction of
three concepts:

Using CSS selectors, one may identify certain elements in the Document
Object Model (DOM) and manipulate them using jQuery functions. This
involves locating a group of elements in the DOM and performing actions
on that group.
Applying a sequence of jQuery functions to a group of items
Utilizing the jQuery wrapper and implicit iteration
Implementing the jQuery (JavaScript) library on an HTML webpage
There are multiple methods to initiate the use of jQuery on your website.
Utilize the content delivery network (CDN) provided by Google or
Microsoft to incorporate a specific version of jQuery.

Obtain a personalized version of jQuery from the official website

jQuery.com and save it on your own server or local file system.
Note: All jQuery methods are contained within a document-ready event to
ensure that no jQuery code executes until the document has finished
loading.

The fundamental syntax for any jQuery function is:

“The action() method is called on the element(s) selected by the

$(selector).
The $ symbol is used to define or access jQuery.
A selector is used to search for HTML elements within an HTML page.
A jQuery action() refers to the specific operation that will be executed on
the chosen element(s).
What are the advantages of using jQuery?
There are several crucial factors that justify the adoption of jQuery:

It enjoys immense popularity, evidenced by its massive user base and

active community of creators and advocates.
It standardizes the variations among web browsers, eliminating the need
for you to do so.
Intentionally designed to have a small and efficient size, it features a
straightforward but ingenious plugin structure.
The repository of plugins for jQuery is extensive and has consistently
expanded since its initial release.
The API is thoroughly documented, complete with inline code examples,
which is considered a rare privilege in the realm of JavaScript libraries.
Indeed, having any form of paperwork was considered a luxury for a
significant period of time.
The library is amicable, meaning it offers useful methods to prevent
conflicts with other JavaScript libraries.
Benefits:
Diverse assortment of plug-ins. Developers can utilize jQuery to build
plug-ins that extend the functionality of the JavaScript library.
Extensive development community
The documentation is thorough and extensive.
It is significantly easier to use in comparison to regular JavaScript and
other JavaScript libraries.
JQuery facilitates the creation of Ajax templates, which in turn allows for
the development of a more streamlined interface. With Ajax, users may
conduct activities on web pages without the need to reload the entire
page.
jQuery's lightweight nature and excellent chaining features contribute to
its strength.
Drawbacks:
Although JQuery offers a vast library of functions, the level of
customisation it provides for websites may be limited. Therefore, in
certain situations, it may be necessary to use raw JavaScript to achieve
the desired functionality.
The inclusion of the JQuery javascript file is necessary for executing
JQuery commands. Although the file size is relatively small (ranging from
25-100KB depending on the server), it nevertheless imposes a burden on
the client computer and perhaps on your web server if you choose to host
the JQuery script on your own server.

JQuery Selectors

The jQuery selector is a function that chooses nodes, specifically

elements, from the Document Object Model. Put simply, a selector is a
function employed in jQuery to choose and manipulate one or more HTML
elements. It has a substantial impact on jQuery. By utilizing a selector,
we have the ability to choose a specific HTML element and execute a
range of operations on it. This implies that we have the ability to govern
and modify any component in accordance with our own needs. In order to
recognize which element is picked, the selector utilizes several ideas. We
will delve deeper into the subject matter.

Selectors invariably commence with a Dollar $ symbol. They are

alternatively referred to as factory functions. Currently, the HTML
components are chosen according to their id, class, attribute, and other
criteria.

Syntax: The following is the precise syntax for utilizing a selector in

jQuery:

The action() method is called on the element selected by the selector.

The $ symbol is utilized to access jQuery. The .action() function is
employed to execute a specific action on the chosen element.
A selector is a query that is used to locate or retrieve an HTML element.

The factory function utilizes the following three notions to choose an

element:

The jQuery function will choose the HTML element with the specified tag
name. For instance, the selector $(‘p’) will choose all the paragraphs.
The jQuery function will choose the HTML tag that matches the specified
ID. It is crucial to emphasize that each element must have a unique id.
For instance, the selector $(#gfg) will specifically target the HTML
element that has the identifier "gfg".
The jQuery Tag Class will choose the tag that has the specified class. For
instance, the selector $(.abc) will target all the classes that have the
name abc.

Events

jQuery events refer to specific actions or incidents that occur on a web

page, such as mouse clicks, hovering, or key presses. jQuery offers
convenient techniques to efficiently manage and react to these events.
jQuery events are utilized to generate interactive web pages.

$(selector).method(function)

The syntax refers to the set of rules that dictate the structure and
arrangement of elements in a particular programming language or
system.
The method function is applied to the element(s) selected by the selector.
At this location We will examine fundamental events and their
corresponding implementation through illustrative examples.
Event for jQuery click() function

jQuery click() is a mouse event that is activated when the mouse pointer
is used to click on an element.

The syntax

$(selector).click(function);

refers to the set of rules that dictate the structure and format of a
programming language or command.

The $(selector) is a syntax used in programming to select elements from

a document using a specific selector. The code snippet "click(function)" is
used to bind a function to the click event in jQuery. On the other hand,
the jQuery dblclick() event is triggered when an element is double-
clicked.

jQuery dblclick is a mouse event that occurs when the mouse pointer is
double-clicked on an element.

The syntax

$(selector).dblclick(args);

refers to the set of rules that dictate how words and symbols are
combined to form valid expressions or statements in a programming
language.
The $(selector) function is used to select elements in jQuery.Execute the
function "dblclick" with the argument "args".

Methods to access HTML elements and attributes

Retrieve the content: There are three straightforward techniques to

retrieve the content of a DOM object.The following are jQuery methods
for manipulating the DOM:

The text() function is utilized to assign or get the textual content of

certain elements.
The html() method is utilized to assign or retrieve the content of chosen
components, which may include HTML markup.

The val() function is utilized to assign or retrieve the value of form fields.

Introduction to AJAX

Introduction: This lesson aims to provide a concise overview of Ajax and its
applications. Prior to comprehending these terminology, it is necessary to
examine a few practical examples that effectively illustrate the capabilities
of Ajax. Platforms such as Facebook, Instagram, and Twitter are known for
their ability to display a continuous stream of updates, allowing users to
easily view and interact with posts. By simply clicking the "like" button,
users can express their approval of a post, and the total number of likes is
instantly updated without the need to refresh the page. Now consider the
scenario where, when clicking the like button, the entire website would
reload, resulting in similar operations. Now the question arises as to
whether clicking the button again is necessary for such a minor operation
that requires the entire web page to reload. Definitely not, as it is quite
unlikely that anyone would engage in such a nonsensical action (in the
second scenario). Therefore, this aspect of "like" is highly beneficial as it
serves as a preventive measure.
The refreshing of the entire webpage.
It transmits just essential data to the server and displays it to the end
user, specifically the growth in the number of likes.
Let's examine another scenario when you go to Google to look for
anything. Typically, it is noticed that when one begins typing the desired
terms for a search, numerous suggestions are displayed in the search bar.
From where do they originate? Certainly not from the perspective of the
client. The results once again demonstrate the efficacy of server
communication without the need for page reloading.
There are several cases that can be regarded in a similar manner. Ajax is
the driving force behind the entire power at work. Let's briefly examine
Ajax and its implementation.

Ajax is a web development technique that allows for asynchronous

communication between a web browser and a server, enabling the
updating of web content without the need for a full page reload.
Ajax stands for Asynchronous Javascript and XML. It is utilized for server
communication without the need to refresh the web page, hence
Enhancing the user experience and optimizing performance.

Requirements: No prerequisites are necessary to comprehend the latter

part of the article. Proficiency in HTML, CSS, and Javascript at a
fundamental level is sufficient.

What is the mechanism behind its functioning?

First, let us comprehend the precise definition of the term
"asynchronous." There are two distinct categories of requests:
synchronous and asynchronous. Synchronous requests are executed
sequentially, meaning that if one process is currently running, another
process requesting execution at the same time would be denied.
Therefore, only one process may be executed at a time. This situation is
unfavorable because the CPU often remains inactive in this scenario,
particularly during I/O operations in processes that are significantly
slower than the CPU's execution of instructions. To fully optimize the CPU
and other resources, employ asynchronous calls. For additional details,
please refer to this hyperlink. What is the reason for the inclusion of the
word "javascript" in this context? The requests are made using JavaScript
functions. The term XML is utilized for the creation of the XMLHttpRequest
object.
In essence, Ajax enables web pages to be updated asynchronously by
exchanging minimal data with the server in the background. Now let us
examine the crucial aspect and its execution. To implement Ajax, it is
sufficient to have knowledge of the XMLHttpRequest object. Now, what is
it exactly. An item utilized for the purpose of discreetly exchanging data
with the server. Recall the OOP paradigm, which states that objects
communicate via invoking methods, or more broadly, by passing
messages. The same principle is applicable in this situation as well.
Typically, generate this entity and utilize it to invoke the functions that
lead to efficient communication. The XMLHttpRequest object is supported
by all contemporary web browsers.

Object Creation Syntax: The syntax for creating an object is provided

below:
req = new XMLHttpRequest();

END OF MODULE II

MODULE III
Getting Started with Bootstrap

Bootstrap is a widely-used and freely available technology for constructing

websites and online applications that function excellently on all types of
devices. This platform offers a variety of pre-designed HTML, CSS, and
JavaScript elements that can be used immediately. Elements such as
buttons, forms, and navigation bars, among others. These components
can be easily incorporated into any project.

The primary purpose of Bootstrap is to facilitate the construction of user

interfaces in a more efficient and expeditious manner. It offers
standardized and adaptable tools that are suitable for a wide range of
devices and screen sizes. Bootstrap utilizes a versatile grid structure. This
approach enables developers to create layouts that automatically adapt to
various screen sizes.
Introduction to Bootstrap Grid System: Bootstrap employs a 12-column
grid system for its layout. This allows programmers to create flexible and
adaptable designs. The layout was divided into rows and columns.

Bootstrap offers a wide range of pre-built user interface elements. These

encompass many user interface elements such as buttons, forms,
navigation bars, cards, and additional components. They seamlessly
integrate into projects.
Bootstrap provides utility classes for common CSS features. These
encompass aspects like as spacing, font, colors, and more elements. They
allow programmers to make rapid stylistic modifications.
Bootstrap facilitates the creation of responsive designs that can adjust to
different devices and screen sizes. They are compatible with many screen
sizes and devices, ensuring a consistent user experience across different
platforms.
Customization of Bootstrap can be achieved by modifying SASS variables
and utilizing mixins. Coders have the ability to customize the framework
to suit the individual requirements and preferences of their projects.
Layout Options: Bootstrap provides various layout options including as
containers, fluid containers, and responsive breakpoints. It enhances the
flexibility of site design.
Bootstrap includes a variety of JavaScript plugins. They enhance web
applications by incorporating features such as modals, tooltips, and
carousels.
Compatible with Multiple Browsers: Bootstrap is compatible with various
web browsers. It ensures uniform appearance of webpages and web
applications across different platforms.
Bootstrap provides comprehensive documentation, including clear guides,
tutorials, and a supportive community. These resources aid developers in
effectively use the framework.
Bootstrap prioritizes accessibility for all users. This approach adheres to
the most effective methods for creating websites and web applications
that are user-friendly and easily accessible to individuals with
impairments.
Instructions for executing the code

Generate the HTML document

Compose HTML, CSS, and JavaScript code.
Save the HTML file and open it in a web browser. Benefits of utilizing
Bootstrap.

Bootstrap streamlines the process of developing websites and web apps

that are tailored for multiple devices, ranging from huge desktop monitors
to compact smartphone screens. This is achieved through the
implementation of responsive design techniques.
Efficiency-enhancing: By offering a range of pre-designed templates,
elements, and styles, this tool allows programmers to rapidly construct
and prototype user interfaces without having to start from the beginning.
Bootstrap ensures a cohesive and uniform collection of user interface
elements and styles, resulting in a cohesive and professional appearance
throughout all sections of a project.
Usability: The grid system of Bootstrap is straightforward and intuitive,
making it easy for developers of any skill level to use and customize. It
also provides pre-built elements and utilities, further simplifying the
development process.
Community & Support: Bootstrap benefits from a vast and strong
community of users and developers, offering extensive guides,
instructional materials, and resources for assistance and problem-solving.
Customization: Bootstrap offers a wide range of pre-built components and
may be easily adjusted to meet specific requirements. Developers may
quickly modify styles, layouts, and components to align with the individual
project needs.
What are the steps to implement Bootstrap in a project?
Bootstrap components utilize HTML and incorporate supplementary CSS
classes from Bootstrap.
If we desire to incorporate Bootstrap into our project, we have various
alternatives available. One option is to obtain the pre-compiled CSS and
JavaScript files through downloading, or alternatively, we can utilize a
content delivery network (CDN).
To utilize Bootstrap classes, simply apply them directly to the HTML
elements. That enhances the aesthetic and facilitates the establishment of
various elements.
Bootstrap can be configured in multiple ways:
Through the utilization of npm:
An alternative method involves utilizing npm (Node Package Manager). To
accomplish this, navigate to your project directory in the terminal (or
command prompt). Execute the npm install bootstrap command.
Bootstrap will be downloaded and installed immediately in your project.

npm install bootstrap

to install with npm we have to run the following command, this will
install bootstrap.

Creating Responsive Layouts Using Bootstrap CSS - Basic HTML structure for
Bootstrap

The Bootstrap grid is an immensely potent tool that simplifies website

development. The layout is implemented using flexbox, allowing it to be
fully responsive and automatically modify the positioning of items within
the container based on the width of the device. The container serves as
an encompassing element that encloses all other elements and material
present on the webpage. The proper functioning of the grid in CSS
necessitates the inclusion of this wrapper element. The .container class is
commonly utilized when using Bootstrap in our code, as it offers
additional features such as center alignment and horizontal content
padding.

The bootstrap grid consists of 12 columns, but it is not mandatory to

utilize all of them, the total number of columns used should not exceed
12. They can also be combined to create broader columns according to
personal desire.

The .row and .col classes are utilized to generate and control the rows
and columns of the grid, respectively.

The bootstrap grid system consists of five classes that are determined by
the width of the device or browser.
For compact devices

col: It has a browser width that is smaller than 576px.

col-sm: It corresponds to the browser's width being 576px or larger.
For devices of moderate size

col-md: It corresponds to the browser's width being 768px or larger.

Designed for devices of significant size, including those that are huge and
extra-large.

col-lg: It has a screen width that is either equal to or larger than 992px.
col-xl: It possesses a screen width that is either equal to or exceeds
1200px.
Note: In this context, the abbreviations sm, md, lg, and xl represent the
different sizes of devices, specifically small, medium, large, and extra-
large.
Fundamental Framework:

“<div class="container">

column-1

</div>”

“ <div class="col-lg">

Column-2

</div>

</div>”
This is column-1.

The text is not clear. It seems to be part of a code or a document

structure. Please provide more context or clarify your request.

Responsive classes

The responsive utility classes facilitate the construction of responsive web

designs with ease. You have the ability to conceal or reveal specific
content on the webpage. You must provide the dimensions of the screen
on which you wish to hide or display the item.

Utility classes for responsiveness are defined for five distinct size
categories:

“xs: It represents a screen that is classified as extra small in size, with a

width that is smaller than 576 pixels.
sm: The screen size that is considered small, having a width of 576px or
more.
md: It represents a screen of medium size, with a width that is equal to
or larger than 768 pixels.
lg: Devices with a width of 992px or more.
xl: Refers to devices with a width that is equal to or greater than 1200px,
also known as Extra Large devices.
Below is the list:
.d-none: This class is used to conceal content on various devices with
varying screen sizes.D-none.The d-sm-block class is designed to conceal
material exclusively on extremely tiny devices.D-SM-none.d-md-block:
This class is meant to conceal content solely on tiny screens. “
“.d-md-none.d-lg-block: This class is meant to conceal content just on
devices that are medium in size.d-lg-none.d-xl-block: This class is used to
conceal content exclusively on large screens.D-XL-None.D-xxl-block: This
class is meant to conceal content exclusively on very large screens.D-
block: This class is responsible for displaying the information across a
wide range of screen sizes.d-block.d-sm-none: This class is meant to
show the content exclusively on extremely tiny screens.
.d-none.d-sm-block.d-md-none: Only small devices should use this class
to display the content.D-none.D-md-block.d-lg-none: This class is limited
to medium-sized devices for content display.

.d-none.d-lg-block.d-xl-none: This class is solely meant to be used for

large-screen content displays.
..d-none,.d-xl-block,.d-xxl-none: This class is designated to show material
exclusively on very big screens.”

“// Visible only for small size devices

// Hidden only for medium size devices

<div class=".d-md-none .d-lg-block">

</div>
</div>”

Rendering images

Bootstrap offers tools to produce responsive images that fit different

screen sizes, and responsive images in Bootstrap automatically adjust to
fit different screen sizes. Using the img-fluid class, pictures fit into their
parent containers proportionately, making for the best possible viewing
experience across a range of devices.

Below is an explanation of the many Bootstrap image classes that are

available:
the img-responsive class
“With Bootstrap, responsive images are produced by appending the.img-
responsive class to the img tag. The img-responsive class is in effect:
.img-fluid class: max-width: 100% | height:auto | display:block onto the
picture “

“To tag, add the.img-fluid class. This pertains to the.img-fluid class: .img-
rounded class: max-width: 100% | height: auto onto the image

The.img-rounded class adds rounded corners to an image. (IE8 does not

support rounded corners.)
.img-circle class: “

“The.img-circular class turns the image's form into a circle. (IE8 does not
support rounded corners.).img-thumbnail class:

The.img-thumbnail class is responsible for shaping the picture into a

thumbnail. “

The grid system

Grid Structure: In the last tutorial, we have learnt about Bootstrap and
how to install it. However, we're going to begin by reading this post to
understand about Bootstrap. We'll talk about the Bootstrap Grid System
in this essay.
Grid System: The Bootstrap Grid System allows for the display of up to 12
columns across a page. You can use each one independently or all of
them together for wider columns. You can use any set of numbers that
sum up to 12. Any combination of widths can be used, such as four
columns of width three or twelve columns of width one.
Grid Classes: To design layouts with more flexibility, the Bootstrap grid
system offers the following four classes:

“For portrait mobile phones, use xs (<576px); for landscapes, use sm

(>=576px).
column.”

Nesting Columns: We must create a new row and set of columns in order
to nest columns inside of columns. A collection of columns in nested rows
should sum up to 12 or less.

Constructing data entry forms

You may find forms on almost any website you visit. It is frequently used
to collect user data. The system has a number of interactive controls that
let users enter information. The controls are contained in the tag and are
modifiable by changing their attributes to different values.

Several prominent form controls include:

“Text Fields are single-lined input fields that only allow the entry of text
on a single line. “
“Password fields are unique text fields that display special characters,
such as an asterisk or a bullet, instead of the actual characters entered by
the user. “
“Textarea: They are fields that can contain many lines of text.
Checkboxes allow for the selection of several alternatives from a range of
choices.
Radio buttons are a type of input element that allows users to choose
among multiple options, with the restriction that only one option can be
selected at a time.
Submit Buttons are utilized to facilitate the submission of user-entered
form data. “

They can be incorporated into the forms according to the specified

criteria.

Bootstrap offers three distinct types of form layouts:

“Vertical Forms (Default)

Horizontal Forms Forms that are displayed horizontally, side by side.
Inline Forms Forms that are integrated within the content, appearing
seamlessly within the text.”
This post will teach you how to make simple vertical forms.

How can I construct a vertical or basic form using Bootstrap?

To incorporate this form into your website using bootstrap, simply include
the jquery and bootstrap libraries as scripts in your HTML code.

“<script

src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js”></sc
ript>”

“<script

src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js

”></script>”

Insert the given bootstrap stylesheet link in the HTML document's head
section to allow the utilization of different bootstrap classes for formatting
the form and its controls.

“<link rel=”stylesheet”

href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min

.css”>”

The element is utilized to incorporate the label form-control.

The class attribute "form-group" is utilized to modify the space between

different form controls.
The class attribute "form-control" is utilized to apply styling to form
controls, specifically altering their visual presentation.

Bootstrap's Packaged Components: The page header

The content comprises of design templates for buttons, forms, fonts, and
other interface elements that are based on HTML and CSS. Additionally,
optional JavaScript extensions are available. A website can have forms,
lists, headers, tables, images, and buttons, among other components. All
of these core HTML elements have been improved and made more
customisable by expandable classes.

“You should include the /config, /licence, /software, and /content

directories in the bootstrap package you create.”

The Bootstrap package comprises:

“Scaffolding: Bootstrap provides a fundamental framework that includes

Grid System, media layout, backdrop, and link styles.
Bootstrap is comprised of numerous reusable components designed to
offer dropdowns, iconography, pop-overs, navigation, notifications,
carousel, breadcrumb, and various other features.

alter: To obtain a personalized version, one can alter Bootstrap's

components by modifying fewer variables, importing Sass files, and using
jQuery plugins. “
Bootstrap offers a range of features like global CSS settings, HTML
components that be stylized and improved with extendable classes, and
an advanced grid system.
Bootstrap offers a variety of specialized jQuery plugins for JavaScript.
Users may readily access all the information they need from the bootstrap
documentation.
The offered styles are applicable to various HTML components, including
Typography, Code, Tables, Forms, Buttons, and others. If you require the
inclusion of drop-down menus, pagination, tooltips, or alert boxes,
Bootstrap provides comprehensive support for these features.

The pre-styled components include:

“Dropdowns Button Groups Navigation Bar

Breadcrumbs, Labels, and Badges

Notifications
Progress Bar Cards
Carousel refers to a rotating platform or device used for amusement rides
or displays. Modal refers to a type of auxiliary verb that expresses
possibility, necessity, or ability. “
Furthermore, there are numerous additional individuals.
How to incorporate the bootstrap package: There are multiple methods to
incorporate the bootstrap package:

1. To utilize a Content Delivery Network (CDN), you can include the

following CDN links in the main HTML file to initiate the use of bootstrap.
To obtain the most recent CND link, visit the Bootstrap website and select
the "Get Started" option.

Cascading Style Sheets (CSS):

“<link
href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.
min.css” rel=”stylesheet” integrity=”sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6
jIW3″ crossorigin=”anonymous”>”

• JS:
“<script
“src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bu
ndle.min.js” integrity=”sha384-
“ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nb
Tov4+1p” crossorigin=”anonymous”></script>”
“2. Utilizing package managers: The bootstrap package can be
incorporated into your project by use package managers:

npm, yarn, RubyGems, and composer are all package managers. Retrieve
the source files: “

To incorporate the bootstrap package, you can obtain the source files of
bootstrap and include them in your project. I have included the hyperlink
to access the source files in the references section. You may proceed with
the check-in at that location. “

Example: In this instance, I have fabricated a card that is often regarded

as one of the most sought-after elements in Bootstrap.

Glyphicons
Bootstrap Glyphicons are a collection of compact icons that are based on
glyphs and are used to improve user interfaces. They provide a diverse
range of symbols for typical operations and objects, enabling enhanced
visual representation and functionality in online applications.

Use cases:

In order to enhance comprehension and facilitate the execution of online

projects.
Utilized for various purposes such as displaying text, creating forms,
designing buttons, facilitating navigation, and so on.
To enhance the visual appeal and credibility of any web project.
Defining something by utilizing it might be a straightforward task.
Now, let's explore the utilization of glyph icons in Bootstrap.
<span class = "glyphicon glyphicon-search"></span>

Method: To incorporate the Glyphicons icon into Bootstrap, simply insert

the provided code into any part of your code. Ensure correct padding by
leaving a gap between the icon and text.

“<link rel=”stylesheet”
href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.
min.css”> <script
““src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.j
s”></script> <script
“src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.mi
n.js”></script>”

To load our CSS, it is necessary to include the Bootstrap3 and jQuery CDN
in the tag before any other stylesheets.”

The navigation bar

The Bootstrap Navigation Bar is a versatile, adaptable, and pre-designed
navigation element for web applications. The software includes elements
such as branding, navigation links, dropdowns, and responsiveness, which
allow developers to easily construct navigation menus that are both
effective and visually appealing.

Bootstrap offers a range of navigation bars called "Navbar".

Navbar Type and Description:
Simple Navbar: Conventional arrangement for a navigation bar.
An inverted navbar is a navigation bar that has colors reversed to create
a distinct appearance.
Customized Navigation Bar: A visually appealing navbar with personalized
color scheme

Right-Aligned Navbar: The navigation bar is positioned on the right side of

the page.
Fixed Navigation Bar: A navigation bar that remains in a fixed position at
the top of the page.
Dropdown menu Navbar: A navigation bar that includes a drop-down
menu for selecting different items.

Standard Navigation Bar: The standard navigation bar, formatted with the
"navbar" class, consists of a logo, navigation links, and dropdown menus.
The navigation bar is constructed using the element and initialized using
the classes "navbar" and "navbar-default".

Example: In this instance, we construct a fundamental Bootstrap

navigation bar featuring a distinctive company name and links for
navigation. The layout is designed utilizing the default navbar classes of
Bootstrap for a straightforward appearance.
Navbar in reverse order:

A reverse navbar is adorned with dark hues and contrasting light-colored

text. The navbar-inverse class in Bootstrap is utilized to create a
navigation menu with a sleek and modern style.
Colorful navigation bar:

A customized navigation bar is formatted using custom CSS or Bootstrap

classes to display a background color that is distinct from the default. It
improves the attractiveness of the visuals and ensures uniformity in
branding.

The class .bg-primary represents the color blue, .bg-success represents

the color green, .bg-warning represents the color yellow, and .bg-danger
represents a color associated with danger. Red is represented by the class
“.bg-secondary, grey by .bg-dark, black by .bg-dark, and white by .bg-
light.
Apply the .bg-color class to modify the color of the navbar to the colors
specified above. “

In this example, we demonstrate the creation of a Bootstrap navbar with

a distinct colored backdrop for each navigation link. This is achieved by
utilizing Bootstrap's background color classes like as bg-primary, bg-
success, bg-danger, and bg-warning.
Navbar aligned to the right:

A right-aligned navbar in Bootstrap may be achieved by applying the

"navbar-right" class to the
element. This class aligns the navigation items to the right side of
the navbar container.

In this example, we demonstrate the creation of a Bootstrap navbar

with a dark backdrop. The menu elements are positioned to the
right and include links for registration and login, accompanied by
appropriate icons.
Stable Navigation Bar:
A Bootstrap fixed navigation bar is constantly visible at the top of
the viewport even when scrolling. The constant navigation
experience is achieved by utilizing the navbar-fixed-top class.

Example: In this demonstration, we construct a Bootstrap navbar

with a black background and fixed positioning at the top of the
viewport, guaranteeing that it remains in place. The navbar includes
a drop-down menu.
A Bootstrap dropdown menu navbar is a user interface element that
contains navigation links. When a user clicks on a navigation link, it
expands to display a dropdown menu. This feature allows for a
concise and well-organized navigation structure in web applications.

This example demonstrates the creation of a Bootstrap navbar that

includes dropdown menus, offering a concise and efficient means of
navigation. Dropdown menus are activated by clicking on main
items, providing more navigation choices and improving the
structure of content.Visible during scrolling.
Expandable Navigation Bar:

A Bootstrap collapsible menu bar condenses into a hamburger icon

on smaller devices, so save space. When toggled, it extends to
display navigation links, ensuring accessibility and responsiveness.

In this example, a Bootstrap navbar is created with a collapsible

functionality. On smaller screens, the interface condenses into a
hamburger icon, which saves space while still maintaining
accessibility.
Badges

Introduction: Bootstrap v5 introduces Badges as fundamental components

designed to display indicators or count numbers. This feature is quite
beneficial for tracking and notifying about mail quantities, as well as for
several other applications. Badges are essentially the same as labels,
except that they feature more curved corners. Badges automatically
adjust their size to fit the size of the parent element by utilizing relative
font scaling and em units. Starting with Bootstrap v5, badges no longer
possess the focus or hover styles for links.

Method: To generate rectangular badges, we can utilize the .badge class

within components. With no work, we can easily generate various badge
versions by utilizing a contextual class such as .badge-secondary. The
following is the step-by-step process to incorporate a basic badge using
Bootstrap.

Alerts

Bootstrap Alerts provide a straightforward approach to creating pre-

designed notifications, making them more attractive to consumers. They
optimize the presentation of messages, enhancing user engagement and
improving the overall user experience by effortlessly and attractively
showcasing critical information.

Syntax:

“<div class="alert alert-success" role="alert"></div>”

Approach: We will utilize the .alert class in conjunction with the

contextual classes to exhibit the alert message within the program.
The alert classes, such “as .alert-success, .alert-info, .alert-warning,
.alert-danger, .alert-primary, .alert-secondary, .alert-light, and .alert-
dark, are utilized to convey alert messages with distinct characteristics.
Upon the user's button click, a dynamic alert message will be generated.”

Toolbars and button groups

“Button Group Buttons toolbar components are utilized to construct a

toolbar consisting of Button groups. It consolidates the collections of
buttons into a series of button toolbars for intricate components.”

Requirement: Utilize Bootstrap 5 Button Group to generate a collection of

buttons.
Syntax:
“<div class="btn-toolbar" >”

“ <div class="btn-group ..." >

<button type="button" class="...">....</button>”

....

</div>”

Class for the buttons on a toolbar that are organized in a button group.

btn-toolbar: This class is utilized to provide the Button group with a

visually appealing toolbar appearance.
Panels
A panel is useful when we need to quote text from a webpage. There is
some padding around the content mailbox. A "panel" class designates a
bootstrap panel.
Various panel classes A Bootstrap panel has elements that are similar to
Bootstrap Cards. Below is a breakdown of every part that makes up the
Bootstrap Panel body:

panel configuration It delineates a panel's body.

panel head It serves as the panel's header.
panel footer: It is used for the panel footer class assignment.
panel assembly: It is employed to unite disparate panels into a collective.
panel displaying pertinent courses: The panel's colour is defined by its
contextual classes.

panel-warning panel-info panel-primary-default panel-success panel-

danger panel-info

END OF MODULE III

MODULE IV

INTRODUCTION TO PHP
Hypertext Preprocessor is shortened to PHP. PHP is a web development-
specific programming language meant to operate on servers. Being open-
source, it is available for free usage and download. It really is easy to use
and comprehend. PHP files are denoted with the ".php" suffix.

PHP was introduced in the first version, while Rasmus Lerdorf contributed
to the succeeding ones. Since the language is interpreted, a compiler is
not required.

PHP's features
The server is used to run PHP code.
Numerous databases can be utilised with it, including Oracle, Microsoft
SQL Server, MySQL, PostgreSQL, Sybase, and Informix.
It has the strength to handle content management systems such as
WordPress and has the capability to regulate user access.

Most widely used protocols are compatible with it, including FTP, IMAP,
HTTP Digest, and HTTP Basic.
PHP is also the engine behind websites like facebook.com and yahoo.com.
The key reasons for this are that PHP can easily be embedded in HTML
files and can produce HTML code inside of PHP files.

The browser generates HTML codes instantaneously, while the server

carries out PHP commands. Here is where PHP varies from client-side
languages such as HTML. PHP scripts are transmitted to the browser after
being run on the server and producing an output.
The output that is generated when the PHP script is run on the server is
the only thing that the client or browser can see; the PHP codes
themselves are hidden within the PHP file. JavaScript and CSS are two
more client-side programming languages with which PHP scripts can be
employed.

Origin and Background

In 1994, Rasmus Lerdorf designed PHP, which originally stood for
"Personal Home Page." It developed into "PHP: Hypertext Preprocessor"
over time.
PHP is developed by a vast community of developers and is available as
open-source software.
Why PHP is used

PHP is mostly used for server-side web development. It makes it possible

to construct dynamic web pages by embedding PHP code into HTML.
PHP may be used for a lot of different things, like form data handling,
database management, dynamic page creation, and server
communication.
Features of SyntaxPHP

Because PHP supports dynamic typing, you can use variables without
explicitly defining their data type.
Cross-Platform: PHP runs on several platforms, making it compatible with
a wide range of operating systems.

Database Integration: PHP has built-in capability to communicate with

databases, including PostgreSQL, MySQL, and others.
Server-Side Scripting: HTML generated by PHP scripts running on the
server is delivered to the client's browser.
Why is PHP the best option?
Actually, PHP is capable of anything pertaining to server-side scripting, or
what's commonly referred to as a website's backend. PHP is capable of
receiving input from forms, creating sessions, working with databases,
sending and receiving cookies, sending emails, and more. PHP is a secure
and dependable language for server-side scripting since it offers
numerous hash algorithms for encrypting user input. These thus are some
of the features that make PHP a good choice for server-side
programming. In upcoming tutorials, you will learn more about these
skills.
There are further characteristics of PHP, even if the aforementioned
capabilities aren't enough to persuade you. All popular operating systems,
including Windows, Linux, Unix, Mac OS X, etc., can run PHP. PHP is
supported by nearly every major server on the market today, including
Apache. PHP supports a large number of databases. The fact that PHP is
freely available for usage and download from its official website,
www.php.net, is perhaps its most significant feature.
For information on setting up and running PHP programs, please see
Setting Up the Development Environment.
PHP's benefits

Open Source: PHP is a free and open-source language that can be used
and distributed without restriction. This promotes a sizable developer
community, which aids in its expansion and advancement.
Simple to Learn: Since PHP's syntax is comparable to that of C and other
programming languages, developers—especially those with prior
programming experience—should find it quite simple to pick up.
Web Integration: PHP is integrated into HTML and is made especially for
web development. It allows for the easy integration of multiple web
technologies, making it easier to create dynamic and interactive web
pages.
Database Support: MySQL, PostgreSQL, SQLite, and other databases are
all well supported by PHP. This facilitates database connectivity and
interaction, which is essential for many web applications.
Cross-Platform Compatibility: PHP operates across a number of operating
systems, including Windows, Linux, macOS, and others. It is not
dependant on any particular platform. This guarantees interoperability in
many settings.
Generous Community and Documentation: The PHP development
community is both sizable and vibrant. For developers, finding answers
and getting assistance when needed is made easier by the wealth of
online tools, tutorials, and documentation.
CMS and frameworks: Well-known PHP frameworks like CodeIgniter,
Symfony, and Laravel offer pre-built features and modules that speed up
development. Furthermore, popular content management systems (CMS)
like WordPress and Joomla are supported by PHP.
Server-Side Scripting: By running PHP scripts on the server, the client's
workload is lessened. The ability to script on the server side is essential
for creating dynamic content and handling server-side operations.
Community Support: Regular updates, security patches, and
enhancements are made possible by the active participation of the PHP
community in the language's development.
The drawbacks of PHP

PHP has been under fire for having inconsistent function names and
parameter ordering. Developers may become confused as a result,
particularly if they are combining older and newer features.

Security Issues: Incorrect handling of PHP code leaves it open to security

vulnerabilities like SQL injection and cross-site scripting (XSS). It is
imperative for developers to take caution and follow recommended
methods in order to safeguard PHP applications.

Performance: PHP can be slower than some compiled languages like C or

Java, even though it works well for many web applications. Performance
has increased in recent versions nevertheless thanks to improvements
and optimizations.
Absence of Modern functionality: PHP might not have all the functionality
of more recent languages. To solve this issue, PHP has added capabilities
and enhancements in current versions.
Scalability Issues: PHP may encounter difficulties in handling large and
intricate applications. Adding more tools or frameworks may be necessary
for developers to solve scaling concerns.
PHP may not be the ideal option for very large and sophisticated systems,
where more structured languages may be needed. However, it is
appropriate for small to medium-sized projects.
Restricted Support for Object-Oriented Programming (OOP): PHP has
received criticism for its implementation of OOP, which is not as strong as
in certain other languages, despite the fact that PHP supports OOP.
Nonetheless, newer iterations have added enhancements to boost OOP
capabilities.

Data Types, Variables, Constants, Expressions, String

Interpolation

“Data Types define the type of data a variable can store. PHP allows
eight different types of data types. All of them are discussed below.
There are pre-defined, user-defined, and special data types.
The predefined data types are:”
• “Boolean
• Integer
• Double
• String
The user-defined (compound) data types are:
• Array
• Objects
The special data types are:
• NULL
• Resource”
PHP Constants: PHP The identifiers that don't change are called
constants. Typically, it remains unchanged while the script runs. Case
matters for them. Constant identifiers are always capitalized by default.
An underscore or letter is typically used as the first character in a
constant name, followed by a string of characters and numbers. There's
no need to use the $ symbol when writing a constant. The value of a
constant can be obtained using the constant() function.

Constants and variables differences:

1. The $ symbol is not required when using PHP constants. The $ symbol
is used in PHP variables.
2. The PHP constant's data type cannot be altered while the script is
running. It is possible to modify the PHP variable's data type while the
script is running.
3. Once defined, a PHP constant cannot be redefined. It is possible for a
PHP variable to be redefined or undefined.

4. Only define() can be used to define a constant; all other simple

assignment operators cannot be used. By employing a straightforward
assignment operation(=), we can define a variable.
5. Constants are typically expressed as numbers. Variables, on the other
hand, are expressed using characters and symbols.
6. Throughout the script, PHP constants are automatically global. PHP
variables aren't always global throughout the duration of the script.
7. In comparison to PHP variables, PHP constants operate more slowly. In
comparison, a PHP variable operates more quickly than a PHP constant.

Expressions
Regular expressions, or regexes as they are more widely known, are text
strings that contain a series of characters that represent a unique search
pattern. In the field of programming, they are primarily utilized in
algorithms that match ill-defined patterns to accomplish pertinent tasks.
Regexes are sometimes thought of as a miniature computer language that
enable text string parsing through the use of pattern notation. Since the
precise character order is uncertain in advance, regex is used to retrieve
the necessary strings using a pattern definition.

Using a regular expression is a succinct way to describe a string pattern

that matches a given amount of text. Regular expressions are one of the
main aspects of PHP, an open-source language that is widely used to
develop websites, as you are aware. Regular expressions are
implemented in many different programming languages in a manner
similar to PHP. This also applies to other programmes, each of which has
a separate syntax for supporting regexes. Regexes are utilised on very
large files and strings by a multitude of contemporary languages and
technologies. Let's examine some regular expression uses and benefits.

Benefits and applications of regular expressions

Since most programming involves data entry, developers frequently run
across issues while gathering data in free text fields. Nowadays, regular
expressions are practically the only language utilized in application
development.

Regular expressions are useful for validating text strings that

programmers find interesting.
It provides a strong tool for text data analysis, pattern recognition, and
modification.
It facilitates flexible string pattern searches and the extraction of
matching results.
It assists in parsing text files in search of a certain character sequence for
additional study or data processing.
Pattern recognition problems can be solved quickly and simply with the
use of built-in regexes routines.
It significantly reduces the amount of time developers must spend
searching for a particular string pattern.
It supports the validation of crucial user data, like IP addresses, phone
numbers, and email addresses.
It assists in emphasizing specific terms within a file according to input or
search results.

It assists in locating particular template tags and substituting the required

actual data for those tags.
For the design of an HTML template system that recognizes tags, regexes
are particularly helpful.
Regexes are mostly used for form validation, spam filtering, password
strength checks, and browser detection.
Operators in Regular Expressions: Let's examine a few operators found in
regular expressions written in PHP.

Operators and description:

“^: It indicates where the string begins. “

“$: It indicates the string's end.”

“(): It represents a collection of expressions.

[]: It locates a range of characters, such as [xyz], which denotes x, y, or
z. “

[^]: It locates items that are out of range; for instance, [^abc] indicates
that an, b, or c are not present. “

“(dash): It searches for a character range, such as [a-z], which denotes

a through z, within the specified item range.

| (pipe): Denotes a logical OR; for instance, x | y denotes either x or y.

?: It indicates a character or item range that is either zero or one

preceding.

*: Indicates a character or item range that is zero or more preceding,

while + indicates a character or item range that is one or more preceding.

+: It indicates the preceding character at least n times or

{n}: It denotes atleast n times of preceding character or item range for

example n{2, }.

{n, m}: It denotes atleast n but not more than m times for example
n{2, 4} means 2 to 4 of n.

\: It denotes the escape character.”

Special Character Meaning:
“\n: It indicates a carriage return or a new line.

\t It represents a tab; “
“\v It represents a vertical tab;
\f It represents a form feed. “
“\xxx indicates the octal character hh”

Character Sets for Shorthand: Let's examine a few of the possible

character sets for shorthand.

\s: Shorthand Meaning: Syncs space characters, such as tab, newline,

and space.

\d: Matches any digit between 0 and 9.

\w: Matches word characters, such as underscore, all lower- and upper-
case letters, and digits. “

Predefined procedures or a library of regexes: Now let's have a look

at the brief reference of built-in PHP functions for regular expressions.
Programmers can work with regular expressions in a lot of useful ways
with PHP.

The built-in features that follow are dependent on the casing.

Def of Function
“preg_match(): This function looks through a string for a given pattern. If
a pattern is found, it returns true; if not, it returns false.”
“preg_match_all: This function compares the string to all instances of the
string pattern. This feature is really beneficial for searching and
replacing.”
ereg replace(): This function looks for a particular string pattern and, if
one is found, replaces the original string with the new string. “

“eregi_replace(): If the pattern being searched for is not case-sensitive,

the function operates similarly to ereg_replace().
replace_preg(): As long as regular expressions are allowed in the
replacement strings and pattern, this function functions similarly to the
ereg_replace(): function.
split_preg(): The function operates similarly to the split() function in PHP.
Using regular expressions as its parameters, it divides the text.
preg_grep(): This function produces the result array after searching for all
elements that meet the regular expression pattern.
preg_quote(): This method accepts a string as input and appends
quotations to each character that fits the regular expression.

ereg(): When a string that matches a pattern is found, the function

returns true; if not, it returns false.
eregi(): If the search is not case-sensitive, this function operates
similarly to ereg(). “
Metacharacters: Regular expressions employ two different types of
characters: Regular characters and Metacharacters. Characters with a
"literal" meaning are known as regular characters, and those with a
"special" meaning in regular expression are known as metacharacters.

Examples of Metacharacter and Descriptions.

“.: It matches any single character, excluding new lines. A string with a
single character is matched by /./.

“^: It matches any text that begins with geeks. /\geeks/ matches the
beginning of the string.”
$~: It corresponds to the pattern of strings at the end of the
string.~/com$/ corresponds to strings that finish in com, like google.com,
etc. “

““* : One or more characters are matched.Matches commute, computer,

compromise, etc. with /com*”
/: It matches the character that appeared before it at least once.For
instance, zoom is matched by /z+oom/.The dot in /google\.com/ will be
treated as a literal value rather than a metacharacter because it is used to
escape metacharacters in regex.
a–z: Lowercase letters are matched.Geeks from A to ZThe capital and
lowercase characters match.ANIMALS
0–9: .Any number between 0 and 9 is matched by /0-5/, which matches
0, 1, 2, 3, 4, and 5.

[...]: Character class is matched.~/[pqr]/ matches pqr “

Using regular languageInterpretation

““[.-a-z0-9A-Z]It matches any lower case letter, any number between 0
and 9, any dash, and any upper case letter in a string.”
“+@[a-z0-9A-Z]It matches strings that have the @ symbol at the start,
any lowercase letter, any number between 0 and 9, and any uppercase
letter. “

“+\.[a-z]{2, 6}$/ After escaping the dot, it matches any lowercase letter
at the end of the string with a length between 2 and 6. “

Control Structures

With PHP, we can take actions based on logical or comparing criteria of

any kind. The user's request would be carried out on the outcome of
these circumstances, i.e., either TRUE or FALSE. It resembles a two-way
street. Turn this way or that direction, depending on what you desire.
Four conditional expressions are provided by PHP for us to utilize this
feature:

“if statement
• if…else statement
• if…elseif…else statement
• switch statement

if Statement: We are able to set a condition with this sentence. The code block
wrapped in the if clause will execute if the condition is TRUE.

Syntax :
if (condition){

// if TRUE then execute this code

}”

“
“if…else Statement: We knew that an if statement would execute the
block of code inside it if the condition held, that is, if TRUE. However,
what would happen if we wanted to take an action but the condition
wasn't true? Here's when things become interesting. Blocks are executed
if a condition is TRUE, else they are not executed.

Syntax:
“if (condition) {

// if TRUE then execute this code

}”

“
”

if…elseif…else Statement: This allows us to use multiple if…else

statements. We use this when there are multiple conditions of TRUE
cases.
Syntax:
“if (condition) {
// if TRUE then execute this code
}
elseif {
// if TRUE then execute this code
}
elseif {
// if TRUE then execute this code
}
else {
// if FALSE then execute this code
}”
“switch Statement: The "switch" has different scenarios in which it
fits the condition and carries out a specific case block in the right way. It
evaluates an expression first, then makes a comparison with each case's
values. The same case is carried out if the cases match. We must become
familiar with the terms break and default before using switch.
1. To halt the automated control flow into the subsequent cases and to
depart the switch case, utilize the break statement.
2. The code that would run in the event that no case matched is
contained in the default statement.

Syntax:
“switch(n) {

case statement1:
code to be executed if n==statement1;

break;

case statement2:

code to be executed if n==statement2;

break;

case statement3:

code to be executed if n==statement3;

break;

case statement4:

code to be executed if n==statement4;

break;

......

default:

code to be executed if n != any case;”

“PHP offers a convenient method of writing if...else statements, known as
Ternary Operators, in addition to all these conditional statements. The
statement accepts three operands: a condition to check, a result for
TRUE, and a result for FALSE. It employs a question mark (?) and a colon
(:).”

“Syntax:
(condition) ? if TRUE execute this : otherwise execute this;”

Functions
A function is a section of code that is written in a program to carry out a
certain purpose. To gain a better grasp of how functions operate, we can
draw comparisons between computer functions and real-world office
workers. Let's say the manager requests that his staff member compute
the yearly budget. How then will this process come to an end? The worker
will gather data from the supervisor regarding statistics, compute the
budget, and provide the findings to the supervisor. Functions operate in a
comparable way. They accept arguments in the form of information, run a
block of commands or carry out operations on the parameters, and then
deliver the outcome.
There are two main categories of functions that PHP offers:

Built-in functions: PHP offers a vast array of pre-built library functions.

These functions are already stored as functions and have been coded. To
utilize those, simply call the appropriate functions, such as “var_dump,
fopen(), print_r(), gettype()”, and so on, according on our needs.
User Defined functions: PHP gives us the ability to build custom functions
in addition to the built-in functions. These functions are referred to as
user-defined functions.
This allows us to write our own code packages and use them anywhere.

Why should functions be used?

Reusability: We can simply include common code inside functions and call
them as needed if we want to use them at different points in the program.
As a result, repeating a single code takes less time and effort. This can be
accomplished by importing the PHP file containing the function into
another program or by doing it directly within one application.

Simpler error detection: Because our code is broken up into functions, it

is easy to identify which function contains a mistake and quickly and
readily rectify it.

Simple to maintain: Because our program makes use of functions, we can

simply modify any line of code inside the function and it will take effect
anywhere the function is invoked. easy to maintain as a result.

There are a few things to consider while developing a user-defined

function:

A function is any name that ends in both an open and closed parenthesis.

Function is always the first word in a function name.

All we have to do to invoke a function is type its name and then the
parenthesis.

You cannot begin a function name with a number. An underscore or an

alphabet can be used to begin it.

There is no case difference in a function name.

Grammar:

“function function_name(){

code that can be executed; “

Parameters or Arguments of Function

Parameters are the data or variables that are included in parentheses

within a function. These are employed to store the values that are
executable at runtime. The operator comma(,) allows the user to provide
as many arguments as they choose. Runtime inputs are accepted via
these parameters. They are referred to as arguments when they are
passed the values, such as during a function call. A parameter is used to
store arguments, which are values that are supplied to a function. Both
parameter and argument have the same meaning in everyday speech.
Remember that we have to pass the corresponding argument for each
parameter.

Syntax:

“function function_name(two parameters, $first, $second) {

executable code;
}”

Passing parameters to functions

There are two methods that PHP lets us provide an argument into a
function:

Pass by Value: When an argument is passed via a function, its value is

modified inside the function, but its initial value outside the function is not
altered. This indicates that an argument is supplied that is a copy of the
original value.
Pass by Reference: The original value is passed when arguments are
supplied as pass by reference. As a result, the initial value changes. The
address of the value, where it is stored using an ampersand sign (&), is
really passed in pass by reference.
Arrays

PHP arrays are a form of data structure that allow us to store several
elements of the same or different data types under a single variable,
saving us the hassle of having to establish separate variables for each
type of data. The arrays allow one to access a list of elements with similar
kinds by using an index or key.
Let's say we wish to print five names after storing them. The use of five
separate string variables makes this task simple. However, it would be
quite challenging for the user or developer to construct so many different
variables if the number increased to 100 instead of 5. Arrays come into
play here, enabling us to store all of the elements in a single variable and
provide convenient access through the use of keys or indexes. In PHP, an
array is formed with the array() function.

PHP Indexed or Numeric Array Types: An array where values are stored
linearly and assigned a numerical index.
Associative arrays are arrays having a string index in which each value
can be given a unique key in lieu of linear storage.
Multidimensional arrays are made up of one or more arrays that can be
accessed using a variety of indices.

Numerical or Indexed Arrays

Any kind of element can be stored in these kinds of arrays, but an index
is always a number. The index starts at zero by default. There are two
methods for creating these arrays.
Associated Arrays

These array types are comparable to indexed arrays, but they do not
require linear storage; instead, each value can be allocated a user-defined
string key.
Arrays in several dimensions

These arrays are known as multi-dimensional arrays because they store

another array at each index rather than just one element. Put differently,
an array of arrays can be used to define multi-dimensional arrays. As the
name implies, each element in this array has the ability to hold additional
arrays within it as well as other arrays. Multiple dimensions can be used
to access arrays or sub-arrays in multidimensional arrays.

Embedding PHP Code in Web Pages

PHP stands for Hypertext Preprocessor; it was once known as Personal

Home Page.
All it takes to utilise PHP in HTML code is to add a PHP tag; no further
effort is required.
Student test: Open the file in any editor first, then type the HTML code as
needed. If PHP code needs to be added, it may be done very easily by
putting tags in between and adding your PHP code as needed.

Object Oriented PHP

PHP stands for Hypertext Preprocessor; it was once known as Personal

Home Page.

All it takes to utilize PHP in HTML code is to add a PHP tag; no further
effort is required.

Example 1: Open the file in any editor first, then type the HTML code into
it as needed. If PHP code needs to be added, it may be done very easily
by putting tags in between and adding your PHP code as needed.
With PHP version 5.0, object-oriented programming features were added.
One of the most widely used programming paradigms, object-oriented
programming is built on the idea of objects and classes.

A complex application can be organized using PHP OOP into a more

manageable and straightforward structure.
Classes & Objects

Learn about objects and classes, as well as the fundamental ideas of

object-oriented programming.
You may learn more about PHP $this keyword and how to utilize it
efficiently by using the $this keyword.
Access Modifiers: Private vs. Public - Describe PHP's access modifiers and
assist you in distinguishing between private and public access modifiers.
Serialize Objects: Learn how to utilize the magic methods __serialize()
and __sleep(), and use the serialize() function to serialize an object into a
binary string.

This page, Unserialize Objects, explains how to turn a serialized string

into an object using the unserialize() function. Talk about the magic
methods __wakeup() and __unserialize() as well.
Object Cloning - demonstrates the process of copying an item.
Object Comparing: How to Make an Object Comparison.
Discover how to define a class without a declared name by using the
anonymous class.
try...catch – demonstrate how to utilize the try...catch statement to deal
with potential script exceptions.

Try and catch...Lastly, discover how to use the finally block to clear up
the resources in the event of an error.
Throw an exception: this tutorial will show you how to use the throw
statement to throw an exception.
Set an Exception Handler: This tutorial will walk you through setting a
global exception handler to handle uncaught exceptions using the
set_exception_handler method.
Object/Class Functions

class_exists: if a class is present, return true.

method_exists: if a class or object has a particular method, return true.
property_exists: if a class or object has a particular property, return true.
Object/Class Functions

class_exists: if a class is present, return true.

method_exists: if a class or object has a particular method, return true.
property_exists: if a class or object has a particular property, return true.

END MODULE IV

MODULE V

PHP Web forms: PHP and Web Forms

The user's information is sent to the server via HTML forms, which then
return the results to the browser. For instance, you can utilise form
processing to gather user information if you wish to offer well wishes and
obtain the specifics of website users. Next, either the client-side or the
server-side can validate the data. The customer receives the final result
using the appropriate web browser. Use the form tag to construct an
HTML form.
Form Tag and description attributes:

“Name or ID: It is used to distinguish different forms and provides the

form's name.
activity: It indicates the address to which the completed form's data
must be delivered after submission.

technique: It details the HTTP method to be applied upon form

submission. Get and post are examples of possible values. Users can view
the form data in the url if the get method is used. Get is the default HTTP
method.
encType: It details the sort of encryption that will be applied to the form
data upon submission.
not validate: It suggests that after the form is submitted, the server
won't check the data.

Form processing controls: The controls in form processing allow

information sharing and communication between the client and server.
Form controls include the following:

Textbox: Textboxes let users enter text in one line and can be used to
retrieve values like names, menu items, and more.
Textarea: Textareas enable multi-line input from the user, which can be
used to retrieve values like a message, address, or other data.

DropDown: The user can choose a value from a list of values using a
dropdown or combobox.
Radio Buttons: With radio buttons, the user can choose just one choice
from the available possibilities. “
“CheckBox: This feature lets the user choose from the list of available
options more than once.
Buttons: The controls that can be clicked to submit the form are called
buttons. “

Making a basic HTML form: The input tag is used in the design of all
the form controls mentioned above, according to the tag's type attribute.
The script below doesn't use any event handling when the form is
submitted. Event handling is the term used to describe the actions taken
upon form submission. PHP or JavaScript can be used to implement these
event handling techniques. JavaScript, however, only offers client-side
validation. Therefore, PHP may be used to handle forms.
Form validation: This process verifies that the user has entered the
necessary information. HTML components can be used for simple
validation. For instance, the email address text box in the script above
has the type value set to "email," preventing users from inputting invalid
email addresses. In the script mentioned above, each form field has an
obligatory property that informs the user not to leave any field blank
before submitting the form. Form processing in PHP uses the following
arrays and methods:

The isset() function is utilized to ascertain if a form control or variable

has a value or not.
$_GET[]: Using the parameters supplied in the URL, it is used to retrieve
data from the form control. It accepts as a parameter the attribute found
in the URL.
$_POST[]: This is used to use the HTTP POST method to retrieve data
from the form control. It uses the parameter as the name attribute of the
associated form control.
$_REQUEST[]: This function is used when accessing a database to
retrieve data.

PHP Form Processing: The HTML script above is rewritten with the
functions and array specified previously. The script has been modified to
ensure that all form fields are validated. If no problems are found, the
received information is displayed in tabular form.

Sending Form Data to a Server:

The HyperText Transfer Protocol is what HTTP stands for. It facilitates

communication between servers and clients. It operates via a client-
server request-response protocol. The server receives a request from the
client. After receiving the request, the server responds to the client. It
might provide details about the request and the requested material.

The most popular HTTP methods are shown here.

GET POSTING
The form is prepared for submission after client-side validation. The GET
and POST methods are used to communicate the form data to the server
after it has been submitted. The form data will first be sent to the server
via the GET method, and then it will be sent via the POST method.
Ultimately, we will comprehend the distinctions between the two HTTP
protocols that are employed to transmit the form data.

Using the 'GET' HTTP method to send the form data: The GET method is
used to request data from designated resources. It requests resources
from the server by sending an empty body there. The data sent by the
server is appended to the page's URL if the form data is sent via the GET
method. There are various length constraints on its demands. It's not
employed for alteration.
Using the 'POST' HTTP method to send the form data: To create and
update a resource, data is sent to a server via the POST method. Instead
of appending the page URL to the HTTP request, the requested data is
attached to the request body when using the POST method. There are no
length limitations on its request.

Working with Cookies and Session Handlers

Information can be saved (in variables) for usage on different pages by

using sessions. The server generates a special session ID for each user
who visits a website and launches a new session; the user's computer
saves this ID in a cookie. Additionally, a file is created by the server to
house the user's session variables.

The user's session on the server can be identified by the session ID

contained in the cookie. The session ID is given back to the server in a
cookie when the user leaves the page, and the server obtains the
associated session variables for that user.

Temporary information unique to a single user and browser session can

be stored in sessions. A session could be used, for instance, to save a
user's shopping cart contents or login status.
A cookie is a tiny bit of information that is kept in the user's web browser.
Information like user preferences or login credentials can be stored in it. A
cookie is a little text file that a website sends to a user's browser when
they visit it. The browser stores the cookie. The server can access the
cookie and use the data contained in it when the user visits the page
again later.
Long-term data that needs to be kept across several sessions can be
stored using cookies. For instance, you might use a cookie to remember a
user's favorite theme or language so they don't have to change it each
time they visit the website.

On the user's computer, cookies are saved as files and can stay there for
a predetermined amount of time unless the user decides to remove them.
Cookies can only be four KB or less in size.

PHP session: The session_start() method must be used to initiate a

session before you can use sessions in PHP. This function is often
positioned at the top of the PHP script because it needs to be called
before any output is provided to the browser.
PHP cookies: The setcookie() function can be used in PHP to use cookies.
The name, value, and expiration time of the cookie are the three
parameters that this method requires. The optional expiration time is
given in seconds. In the event that an expiration time is not specified, the
cookie will terminate upon the user's browser closing.

Differences between sessions and cookies:

Range Limited to the PHP script that generated themAny script on the
domain that produced them can access them.
Persistence is erased when a user closes their browser and is kept in
memory on the server.saved as files on the user's computer, where they
will stay unless the user deletes them after a predetermined amount of
time.
Dimensions can hold as much information as the user's session storage
space will allow (typically several megabytes)Size restriction, usually no
more than 4KB
Safety Because they are kept on the server and are not accessible by the
user, they are more secure.Because they are kept on the user's
computer, they are less secure.

PHP with MySQL: Interacting with the Database

What is MySQL?

One relational database management system (RDBMS) that is available

for free is MySQL. The most often used database system with PHP is this
one.

SQL, or Structured Query Language. A MySQL database stores its data in

tables made up of rows and columns.

A database system called MySQL is hosted on a server. For both small

and large applications, MySQL is perfect. MySQL is an extremely
dependable, quick, and user-friendly database system. Standard SQL is
used. MySQL is cross-platform compliant.

How may PHP and MySQL be connected?

PHP versions 5 and up can connect to a MySQL database by using:

The MySQLi extension (where "i" stands for "improved")

PHP Data Objects, or PDO
Which one—PDO or MySQLi—should we use?
PDO and MySQLi each have costs associated with them:
While MySQLi is limited to working with MySQL databases, PDO is
compatible with twelve different database systems.
PDO thus facilitates the process of shifting a project to use a different
database if necessary. Just a few queries and the connection string need
to be changed. You will have to rebuild the entire code, including the
queries, in MySQLi.
Although both are object-oriented, MySQLi further provides a procedural
API.
In summary, you should use PDO if you want to continue with MySQL, but
you can use whichever you wish.

establishing a connection with MySQLi

The mysql_connect() function in PHP allows you to establish a database
connection.

The connection that the mysql_connect() function returns is the only

parameter required by this function.

With the help of the mysql_close() PHP function, you can always detach
from the MySQL database.

To link a PHP script to a MySQL database, another method offered by

MySQLi is a procedural one.

There are two approaches to this:

Object-Oriented MySQLi
Prepared Statement, Database Transactions.

Support for server-side prepared statements is available in MySQL 8.4.

Utilizing the effective client/server binary protocol is what this support
does. The following advantages come from using prepared statements
with placeholders for parameter values:

reduced overhead associated with parsing the statement each time it's
run. Large quantities of nearly identical statements are typically
processed by database systems, with literal or variable values only
changing in clauses like WHERE for queries and deletes, SET for updates,
and VALUES for inserts.

defense against attacks using SQL injection. Unescaped SQL quotes and
delimiter characters may be present in the parameter values.
Repaired Statements in Programs for Applications

Client programming interfaces, such as the MySQL C API client library for
C programs, MySQL Connector/J for Java programs, and MySQL
Connector/NET for.NET programs, allow you to use server-side prepared
statements. For instance, the prepared statement API offered by the C
API consists of a collection of function calls. View the Prepared Statement
Interface for C API. By linking in the C client library, other language
interfaces can enable prepared statements that use the binary protocol.
One such example is the mysqli extension, which is available in PHP 5.0
and later.

Prepared SQL Script Statements

There is another SQL interface available besides prepared statements.
Although this interface is not as effective as utilizing the binary protocol
via a prepared statement API, it is readily available at the SQL level and
doesn't need programming:

When you don't have access to a programming interface, you can still use
it.

Any program that can submit SQL statements to the server for execution,
like the MySQL client program, can use it.

Even if the client is utilizing an outdated client library version, you can
still use it.
The purpose of QL syntax for prepared statements is to be applied in
scenarios like these:

to test your application's prepared statements before developing it.

when you don't have access to a programming API that supports prepared
statements, to use them.

to use prepared statements to interactively diagnose application bugs.

In order to submit a bug report, you must build a test case that uses
prepared statements to replicate an issue.

Prepared Statements: Execute, Delegate, and Prepare

Three SQL statements serve as the foundation for prepared statement
SQL syntax:

A statement is prepared for execution using PREPARE (see "PREPARE

Statement," Section 15.5.1).
A prepared statement is executed using EXECUTE (see Section 15.5.2,
"EXECUTE Statement").

A prepared statement is released by DEALLOCATE PREPARE (see to

Section 15.5.3, "DEALLOCATE PREPARE Statement").

The two similar methods for generating a statement that calculates a

triangle's hypotenuse given its two side lengths are demonstrated in the
following examples.
A prepared remark was made just for that particular session. The server
automatically deallocates a previously produced statement if you end a
session without doing so.

Global to the session is also a prepared statement. A prepared statement

that you generate inside of a stored routine is not released when the
stored routine terminates.

Set the max_prepared_stmt_count system variable to prevent the

creation of too many prepared statements at once. Set the value to 0 to
prohibit the use of prepared statements.

ALTER TABLE
ALTER USER
ANALYZE TABLE
CACHE INDEX
CALL
CHANGE MASTER
CHECKSUM {TABLE | TABLES}
COMMIT
{CREATE | DROP} INDEX
{CREATE | RENAME | DROP} DATABASE
{CREATE | DROP} TABLE
{CREATE | RENAME | DROP} USER
{CREATE | DROP} VIEW
DELETE
DO
FLUSH {TABLE | TABLES | TABLES WITH READ LOCK | HOSTS |
PRIVILEGES
| LOGS | STATUS | MASTER | SLAVE | USER_RESOURCES}
GRANT
INSERT
INSTALL PLUGIN
KILL
LOAD INDEX INTO CACHE
OPTIMIZE TABLE
RENAME TABLE
REPAIR TABLE
REPLACE
RESET {MASTER | SLAVE}
REVOKE
SELECT
SET
SHOW BINLOG EVENTS
SHOW CREATE {PROCEDURE | FUNCTION | EVENT | TABLE | VIEW}
SHOW {MASTER | BINARY} LOGS
SHOW {MASTER | SLAVE} STATUS
SLAVE {START | STOP}
TRUNCATE TABLE
UNINSTALL PLUGIN
UPDATE

END MODULE V
.
.

TBIT51: PI Technical Implementation and Operation
No ratings yet
TBIT51: PI Technical Implementation and Operation
1 page
WebTechnology - Puducherry University Unit 3
No ratings yet
WebTechnology - Puducherry University Unit 3
31 pages
Class-7 Computer
No ratings yet
Class-7 Computer
4 pages
Doctor
No ratings yet
Doctor
40 pages
Instant Download JavaScript: A Beginner's Guide, Fifth Edition Pollock PDF All Chapters
100% (3)
Instant Download JavaScript: A Beginner's Guide, Fifth Edition Pollock PDF All Chapters
76 pages
Set I MS
No ratings yet
Set I MS
10 pages
Database Programming Techniques
No ratings yet
Database Programming Techniques
12 pages
Option C Study Guide
No ratings yet
Option C Study Guide
36 pages
HTML Introduction
No ratings yet
HTML Introduction
3 pages
Module 3 Notes (1) - 1
No ratings yet
Module 3 Notes (1) - 1
18 pages
HTML Basics
No ratings yet
HTML Basics
113 pages
HTML 2011
No ratings yet
HTML 2011
39 pages
HTML Notes (Basic)
No ratings yet
HTML Notes (Basic)
41 pages
HTML - FORMS - FRAMES
No ratings yet
HTML - FORMS - FRAMES
4 pages
HTML Introduction
No ratings yet
HTML Introduction
7 pages
BIT - Web3
No ratings yet
BIT - Web3
284 pages
Python Django Projects List
No ratings yet
Python Django Projects List
10 pages
Usingthymeleaf
No ratings yet
Usingthymeleaf
81 pages
Unit1 1
No ratings yet
Unit1 1
96 pages
Lec6 ... HTML
No ratings yet
Lec6 ... HTML
108 pages
CHSE 12TH HTMLNote
No ratings yet
CHSE 12TH HTMLNote
34 pages
HTML
No ratings yet
HTML
14 pages
Manav Rachna University
No ratings yet
Manav Rachna University
27 pages
Web Designing
No ratings yet
Web Designing
17 pages
Unit 2
No ratings yet
Unit 2
13 pages
WEB TECHNOLOGY Notes
No ratings yet
WEB TECHNOLOGY Notes
79 pages
HTML & Css
No ratings yet
HTML & Css
45 pages
HTML
No ratings yet
HTML
4 pages
Varun Kumar
No ratings yet
Varun Kumar
50 pages
Unit-4 Unit-4: Cascading Style Sheet
No ratings yet
Unit-4 Unit-4: Cascading Style Sheet
15 pages
Maseno University Department of Information Technology CDIT 406: Web Authoring
No ratings yet
Maseno University Department of Information Technology CDIT 406: Web Authoring
7 pages
Web Designing
No ratings yet
Web Designing
18 pages
Web Technology
No ratings yet
Web Technology
51 pages
HTML Notes Unit-3 (Bca Iii Sem)
No ratings yet
HTML Notes Unit-3 (Bca Iii Sem)
9 pages
1-Introduction To HTML.
No ratings yet
1-Introduction To HTML.
10 pages
HTML
No ratings yet
HTML
5 pages
Be 5 It Gecbvn Bharatvainsh Unit 2 (HTML) WD 3151606 2024
No ratings yet
Be 5 It Gecbvn Bharatvainsh Unit 2 (HTML) WD 3151606 2024
38 pages
HTML Hypertext Markup Language: HTML Element and HTML Tag HTML Element
No ratings yet
HTML Hypertext Markup Language: HTML Element and HTML Tag HTML Element
18 pages
Web Designing
No ratings yet
Web Designing
8 pages
Basic HTML Document
No ratings yet
Basic HTML Document
5 pages
Web Tech Unit1
No ratings yet
Web Tech Unit1
36 pages
Class Xi Web Application HTML Table
No ratings yet
Class Xi Web Application HTML Table
15 pages
Task 8 HTML
No ratings yet
Task 8 HTML
18 pages
WT
No ratings yet
WT
93 pages
RouterOs Tem PDF
No ratings yet
RouterOs Tem PDF
5 pages
Web Technologies
No ratings yet
Web Technologies
94 pages
Unit 4 ICSE Imp Topics
No ratings yet
Unit 4 ICSE Imp Topics
43 pages
DCA Syllabus 2018 Onwards
No ratings yet
DCA Syllabus 2018 Onwards
8 pages
Web Deginss
No ratings yet
Web Deginss
267 pages
Web - Technologies PPT Unit 1
No ratings yet
Web - Technologies PPT Unit 1
326 pages
HTML Hyper Text Markup Language
No ratings yet
HTML Hyper Text Markup Language
30 pages
Complete AI Notes
No ratings yet
Complete AI Notes
202 pages
An and 1 118 Canoe Tfs Tutorial
100% (1)
An and 1 118 Canoe Tfs Tutorial
47 pages
Web Programming Chapter Two
No ratings yet
Web Programming Chapter Two
26 pages
HTML Headings
No ratings yet
HTML Headings
18 pages
HTML Introduction
No ratings yet
HTML Introduction
5 pages
Web Programming - Full Notes-29-52
No ratings yet
Web Programming - Full Notes-29-52
24 pages
What Is HTML
No ratings yet
What Is HTML
20 pages
Online Jewellery Shop: A Project Report Submitted in Partial Fulfillment of The Requirements For The Degree of
100% (1)
Online Jewellery Shop: A Project Report Submitted in Partial Fulfillment of The Requirements For The Degree of
76 pages
MM 1st Unit Notes Sum
No ratings yet
MM 1st Unit Notes Sum
30 pages
Anjani Resume
No ratings yet
Anjani Resume
2 pages
XML and Web Services
No ratings yet
XML and Web Services
176 pages
Fswd@unit 1@aiml
No ratings yet
Fswd@unit 1@aiml
56 pages
Sample Q&A
No ratings yet
Sample Q&A
16 pages
Bharani Raj: Web Graphic UI UX Designer
No ratings yet
Bharani Raj: Web Graphic UI UX Designer
10 pages
Basic Tags: o o o o
No ratings yet
Basic Tags: o o o o
18 pages
HTML
No ratings yet
HTML
21 pages
WT R19 - Unit-I
No ratings yet
WT R19 - Unit-I
85 pages
Web Programming Unit-1 Notes
No ratings yet
Web Programming Unit-1 Notes
124 pages
CMA Unit1
No ratings yet
CMA Unit1
38 pages
Gr7 HTML Notes 2022-23
No ratings yet
Gr7 HTML Notes 2022-23
48 pages
Modern Web Development
No ratings yet
Modern Web Development
33 pages
HTML
No ratings yet
HTML
50 pages
HTLM Intro
No ratings yet
HTLM Intro
28 pages
HTML 5
No ratings yet
HTML 5
127 pages
HTML
No ratings yet
HTML
53 pages
MapGuide Open Source Developer Guide
No ratings yet
MapGuide Open Source Developer Guide
114 pages
Introduction To HTML
No ratings yet
Introduction To HTML
17 pages
New Media Art and The Gallery in The Digital Age: Charlie Gere
No ratings yet
New Media Art and The Gallery in The Digital Age: Charlie Gere
13 pages
CSC 100 Fundamentals of Computing: Computer Basics
No ratings yet
CSC 100 Fundamentals of Computing: Computer Basics
52 pages
HTML Notes
No ratings yet
HTML Notes
29 pages
WT HTML
No ratings yet
WT HTML
84 pages
What Is HTML
No ratings yet
What Is HTML
5 pages
Assignment of Software Lab ON HTML (Hyper Text Markup Language)
No ratings yet
Assignment of Software Lab ON HTML (Hyper Text Markup Language)
19 pages
44 - Chapter 1 - HTML-4 Handouts - Zeeshan
No ratings yet
44 - Chapter 1 - HTML-4 Handouts - Zeeshan
26 pages
HTML Tutorial
No ratings yet
HTML Tutorial
101 pages
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
No ratings yet
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
98 pages