AN INTERNSHIP

REPORT
ON
WEB DEVELOPMENT
Submitted in partial fulfillment towards the award of degree in
B.TECH in Computer Science and Engineering (AI&ML)
SESSION 2023-24

ODD SEMESTER

NITRA TECHNICAL CAMPUS,

GHAZIABAD
(College Code-802)
Affiliated to Dr. A.P.J. Abdul Kalam Technical University, Lucknow)

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

&
CSE (AI & ML)

SUBMITTED BY:
NAME- AMRITA SINGH
ROLL NO.-2208021530001
BRANCH/YEAR-
CSE(AI&ML)/2nd
 INDEX
SI.NO. CONTENT PAGE

1. About Infosys 3

2. Acknowledgement 4

3. Certification 5

4. Declaration 6

5. Chapter 1: Introduction 7

6. Chapter 2: Web Development

7. Chapter 3: Overview of Web Development

8. Chapter 4: HTML tutorial

9. Chapter 5: HTML5 Elements

10. Chapter 6: CSS tutorial

11. Chapter 7: CSS Key Features

12. Chapter 8: PHP Overview
13. Chapter 9: PHP Introduction
14. Chapter 10: PHP Tutorial
15. Chapter 11: Introduction to JavaScript
16. Chapter 12: History of JavaScript
17. Chapter 13: application of JavaScript
18. Chapter 14:limitation of JavaScript
 ABOUT ORGANIZATION

Infosys Limited is an Indian multinational information technology company that provides

business consulting, information technology and outsourcing services. The company was
founded in Pune and is headquartered in Bangalore.[5] Infosys is the second-largest Indian IT
company, after Tata Consultancy Services, by 2020 revenue figures.
On 24 August 2021, Infosys became the fourth Indian company to reach US$100 billion in
market capitalization. It is one of the top Big Tech (India) companies.
Infosys Springboard is a Digital literacy program launched as part of the Infosys ESG Tech
for Good charter. It aims to enable students and associated communities from early education
to lifelong learners by imparting digital and life skills through curated content &
interventions, free of cost.
"Digital Literacy" is the skills required to achieve digital competence and the confident and
critical use of ICT for work, leisure, learning and communication.
 ACKNOWLEDGEMENT
It is my pleasure to be indebted to various people, who directly or indirectly
contributed in the development of this work and who influenced my thinking,
behavior, and acts during the course of study.

I am also thankful to my friends those give me support to helpful to complete

this project and solve my all difficulties.

I am taking this opportunity to express out gratefulness to the Management,

Teachers and staff.

(Sign of Student)

Name of Student-AMRITA SINGH

Roll No.-2208021530001
Branch/Year-CSE(AI&ML)/2nd
CERTIFICATE
 DECLARATION
I,AMRITA SINGH (ROLL NO.-2208021530001) hereby declare that the
presented report of Internship titled “WEB DEVELOPMENT ” is uniquely
prepared by me after the completion of 4 WEEKS on the platform of INFOSYS.

I also confirm that the report is only prepared for my academic requirement, not
for any other purpose. It might not be used with the interest of the opposite
party of the any organization.

(Sign of Student)

Name of Student-AMRITA SINGH

Roll No.-2208021530001
Branch/Year-CSE(AI&ML)/
 Chapter 1: Introduction

Web development is the work involved in developing a website for the Internet (World Wide Web) or an
intranet (a private network).[1] Web development can range from developing a simple single static page of
plain text to complex web applications, electronic businesses, and social network services. A more
comprehensive list of tasks to which Web development commonly refers, may include Web engineering,
Web design, Web content development, client liaison, client-side/server-side scripting, Web server and
network security configuration, and e-commerce development.

Among Web professionals, "Web development" usually refers to the main non-design aspects of building
Web sites: writing markup and coding.[2] Web development may use content management systems (CMS) to
make content changes easier and available with basic technical skills.

For larger organizations and businesses, Web development teams can consist of hundreds of people (Web
developers) and follow standard methods like Agile methodologies while developing Web sites.[1] Smaller
organizations may only require a single permanent or contracting developer, or secondary assignment to
related job positions such as a graphic designer or information systems technician. Web development may be
a collaborative effort between departments rather than the domain of a designated department. There are
three kinds of Web developer specialization: front-end developer, back-end developer, and full-stack
developer.[3] Front-end developers are responsible for behavior and visuals that run in the user browser,
while back-end developers deal with the servers.[4] Since the commercialization of the Web, the industry has
boomed and has become one of the most used technologies ever .
 Chapter 2:WEB DEVELOPMENT

Web development refers to the creating, building, and maintaining of websites. It includes aspects
such as web design, web publishing, web programming, and database management. It is the creation
of an application that works over the internet i.e. websites.

The word Web Development is made up of two words, that is:

Frontend development
Backend de

2.1Frontend Development
The part of a website where the user interacts directly is termed as front end. It is also referred to as
the ‘client side’ of the application.

Popular Frontend Technologies

HTML
HTML stands for Hyper Text Markup Language. It is used to design the front end portion of web
pages using markup language. It acts as a skeleton for a website since it is used to make the structure
of a website.

CSS

Cascading Style Sheets fondly referred to as CSS is a simply designed language intended to simplify
the process of making web pages presentable. It is used to style our website.

JavaScript

JavaScript is a scripting language used to provide a dynamic behavior to our website.

Bootstrap: Bootstrap is a free and open-source tool collection for creating responsive websites and
web applications. It is the most popular CSS framework for developing responsive, mobile-first
websites. Nowadays, the websites are perfect for all browsers (IE, Firefox, and Chrome) and for all
sizes of screens (Desktop, Tablets, Phablets, and Phones).

Web Assembly

Web Assembly, supported by all the major browsers (i.e. from the major vendors Google, Apple,
Mozilla and Microsoft), is the only alternative to JavaScript for running code in web browsers
(without the help of plug-ins, such as Flash, Java or Silverlight; all being discontinued, as browsers
are dropping plug-in support). Prior to its adoption, there was asm.js (a subset of JavaScript; and thus
strictly works in all browsers), that's also used as a compiler target with efficient support in browsers
such as Internet Explorer 11; and for such browsers that do not support Web Assembly directly, it can
be compiled to asm.js and those browsers supported that way. Generally speaking programmers do
not program in Web Assembly (or asm.js) directly, but use languages such as Rust, C or C++ or in
theory any language, that compile to it.
2.2 Backend Development

Backend is the server side of a website. It is part of the website that users cannot see and interact
with. It is the portion of software that does not come in direct contact with the users. It is used to store
and arrange data.
Popular Backend Technologies

PHP

PHP is a server-side scripting language designed specifically for web development.

Java
Java is one of the most popular and widely used programming languages. It is highly scalable.

Python
Python is a programming language that lets you work quickly and integrate systems more efficiently.

Node.js
Node.js is an open source and cross-platform runtime environment for executing JavaScript code
outside a browser.
Back End Frameworks and Technology
 Chapter 3: Overview of Web Development

Learn the foundations of web development, with no prior knowledge needed! Discover the languages,
frameworks, and tools that enable you to create interactive and engaging websites and Cloud Applications. In
this module, you will learn about the roles of front-end, back-end, and full-stack developers, and how they
work together on development projects. You will also become familiar with the terminology and skills
needed in your career as a web developer. It is recommended that learners practice outside of the course to
become proficient. The labs are intended as an introduction to the basics.

3.1 Learning Objectives

● Describe what developing a website or Cloud App involves

● Recognize some of the terminology that web developers and Cloud App
developers use.
● List the skills that Front-end, Back-end, and Full-stack developers need.
● Identify the tools that developers use to develop web pages.
 Chapter 4: HTML Tutorial

you can create a complete website structure. HTML is the combination of Hypertext and Markup
language. Hypertext defines the link between the web pages and markup language defines the text
document within the tag that define the structure of web pages.

4.1 Why HTML is used ?

HTML is used to create the structure of web pages and website that are displayed on the Internet.
HTML basically contains Tags and Attributes that are used to design the web pages. Also, we can
link multiple pages using HTML stands for Hypertext Markup Language. It is used to design the web
pages. With the help of HTML, Hyperlinks.

4.2 HTML Basic Structure of Web Page

The basic structure of an HTML page is laid out below. It contains the essential building-block
elements (i.e. doctype declaration, HTML, head, title, and body elements) upon which all web pages
are created.

4.3 HTML Basic Tags

<DOCTYPE! html> – A doctype or document type declaration is an instruction that tells the web
browser about the markup language in which the current page is written. It is not an element or tag.
The doctype declaration is not case-sensitive.

<html> – This tag is used to define the root element of HTML document. This tag tells the browser
that it is an HTML document. It is the second outer container element that contains all other elements
within it.

<head> – This tag is used to define the head portion of the HTML document that contains
information related to the document. Elements within the head tag are not visible on the front-end of a
webpage.

<body> – The body tag is used to enclose all the visible content of a webpage. In other words, the
body content is what the browser will show on the front end.
 Chapter 5:HTML Element
HTML tags are the keywords that are used to produce web pages in various formats. Opening tags and
closing tags are found in the majority of tags. The concluding tags contain a forward slash (/), while the
language of the beginning tags is the same. Certain tags don’t need to be closed.

5.1 BASIC TAGS

 Tag Description
 <!DOCTYPE> Defines the document type
 <html> Defines an HTML document
 <head> Contains metadata/information for the document
 <title> Defines a title for the document
 <body> Defines the document's body
 <h1> to <h6> Defines HTML headings
 <p> Defines a paragraph
 <br> Inserts a single line break
 <hr> Defines a thematic change in the content
 <!--...--> Defines a comment

5.2 FORMATTING TAGS

 Tag Description

 <acronym> Not supported in HTML5. Use <abbr> instead.
 Defines an acronym
 <abbr> Defines an abbreviation or an acronym
 <address> Defines contact information for the author/owner of a document/article
 <b> Defines bold text
 <bdi> Isolates a part of text that might be formatted in a different
direction from other text outside it
 <bdo> Overrides the current text direction
 <big> Not supported in HTML5. Use CSS instead.
 Defines big text
 <blockquote> Defines a section that is quoted from another source
 <center> Not supported in HTML5. Use CSS instead.
 Defines centered text
 <cite> Defines the title of a work
 <code> Defines a piece of computer code
 <del> Defines text that has been deleted from a document
 <dfn> Specifies a term that is going to be defined within the content
 <em> Defines emphasized text
 <font> Not supported in HTML5. Use CSS instead.
 Defines font, color, and size for text
 <i> Defines a part of text in an alternate voice or mood
 <ins> Defines a text that has been inserted into a document
 <kbd> Defines keyboard input
  <mark> Defines marked/highlighted text
 <meter> Defines a scalar measurement within a known range (a gauge)
 <pre> Defines preformatted text
 <progress> Represents the progress of a task
 <q> Defines a short quotation
 <rp> Defines what to show in browsers that do not support ruby
annotations
 <rt> Defines an explanation/pronunciation of characters (for East
Asian typography)
 <ruby> Defines a ruby annotation (for East Asian typography)
 <s> Defines text that is no longer correct
 <samp> Defines sample output from a computer program
 <small> Defines smaller text
 <strike> Not supported in HTML5. Use <del> or <s> instead.
 Defines strikethrough text
 <strong> Defines important text
 <sub> Defines subscripted text
 <sup> Defines superscripted text
 <template> Defines a container for content that should be hidden when the
page loads
 <time> Defines a specific time (or datetime)
 <tt> Not supported in HTML5. Use CSS instead.
 Defines teletype text
 <u> Defines some text that is unarticulated and styled differently from
normal text
 <var> Defines a variable
 <wbr> Defines a possible line-break

5.3 FORMS AND INPUT

 Tag Description
 <form> Defines an HTML form for user input
 <input> Defines an input control
 <textarea> Defines a multiline input control (text area)
 <button> Defines a clickable button
 <select> Defines a drop-down list
 <optgroup> Defines a group of related options in a drop-down list
 <option> Defines an option in a drop-down list
 <label> Defines a label for an <input> element
 <fieldset> Groups related elements in a form
 <legend> Defines a caption for a <fieldset> element
 <datalist> Specifies a list of pre-defined options for input controls
 <output> Defines the result of a calculation

5.4 FRAMES

 Tag Description
 <frame> Not supported in HTML5.
 Defines a window (a frame) in a frameset
 <frameset> Not supported in HTML5.
  Defines a set of frames
 <noframes> Not supported in HTML5.
 Defines an alternate content for users that do not support frames
 <iframe> Defines an inline frame

5.5 IMAGES

 Tag Description
 <img> Defines an image
 <map> Defines a client-side image map
 <area> Defines an area inside an image map
 <canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
 <figcaption> Defines a caption for a <figure> element
 <figure> Specifies self-contained content
 <picture> Defines a container for multiple image resources
 <svg> Defines a container for SVG graphics

5.6 AUDIO / VIDEO/LIST/TABLE

  Tag Description
 <audio> Defines sound content
 <source> Defines multiple media resources for media elements (<video>, <audio>
and <picture>)
 <track> Defines text tracks for media elements (<video> and <audio>)
 <video> Defines a video or movie

 Tag Description
 <a> Defines a hyperlink
 <link> Defines the relationship between a document and an external resource
(most used to link to style sheets)
 <nav> Defines navigation links

 Lists
 Tag Description
 <menu> Defines an alternative unordered list
 <ul> Defines an unordered list
 <ol> Defines an ordered list
 <li> Defines a list item
 <dir> Not supported in HTML5. Use <ul> instead.
 Defines a directory list
 <dl> Defines a description list 5.7
 <dt> Defines a term/name in a description list
 <dd> Defines a description of a term/name in a description list

 Tables
 Tag Description
 <table> Defines a table
 <caption> Defines a table caption
 <th> Defines a header cell in a table
 <tr> Defines a row in a table
 <td> Defines a cell in a table
 <thead> Groups the header content in a table
 <tbody> Groups the body content in a table
 <tfoot> Groups the footer content in a table
 <col> Specifies column properties for each column within a <colgroup>
element
 <colgroup> Specifies a group of one or more columns in a table for formatting
STYLES AND SEMANTICS

 Tag Description
 <style> Defines style information for a document
 <div> Defines a section in a document
 <span> Defines a section in a document
 <header> Defines a header for a document or section
 <hgroup> Defines a header and related content
 <footer> Defines a footer for a document or section
 <main> Specifies the main content of a document
 <section> Defines a section in a document
 <search> Defines a search section
  <article> Defines an article
 <aside> Defines content aside from the page content
 <details> Defines additional details that the user can view or hide
 <dialog> Defines a dialog box or window
 <summary> Defines a visible heading for a <details> element
 <data> Adds a machine-readable translation of a given content

5.8 META INFO

 Tag Description
 <head> Defines information about the document
 <meta> Defines metadata about an HTML document
 <base> Specifies the base URL/target for all relative URLs in a document
 <basefont> Not supported in HTML5. Use CSS instead.
 Specifies a default
 color, size, and font for all text in a document

5.9 PROGRAMMING

 Tag Description
 <script> Defines a client-side script
 <noscript> Defines an alternate content for users that do not support client-side scripts
 <applet> Not supported in HTML5. Use <embed> or <object> instead.
 Defines an embedded applet
 <embed> Defines a container for an external (non-HTML) application
 <object> Defines an embedded object
 <param> Defines a parameter for an object
 Chapter 6:CSS Tutorial
This CSS tutorial, whether you’re a student or a professional is a valuable resource to enhance the
visual appeal of your websites or personal blogs. Here, you will learn CSS all the basic to advanced
concepts, such as properties, selectors, functions, media queries and more.

CSS is used to enhance the visual presentation of web pages. Without the use of CSS, a web page will
appear visually unappealing.

6.1 What is CSS?

CSS (Cascading Style Sheets) is used to styles web pages. Cascading Style Sheets are fondly referred
to as CSS. The reason for using this is to simplify the process of making web pages presentable. It
allows you to apply styles on web pages. More importantly, it enables you to do this independently of
the HTML that makes up each web page.

6.2 Why learn CSS?

Styling is an essential property for any website. It increases the standards and overall look of the
website that makes it easier for the user to interact with it. A website can be made without CSS, as
styling is MUST since no user would want to interact with a dull and shabby website. So for knowing
Web Development, learning CSS is mandatory.

6.3 Types of CSS:

There are three types of CSS which are given below.

Inline: Inline CSS contains the CSS property in the body section attached with the element known as
inline CSS
 .
Internal or Embedded: The CSS ruleset should be within the HTML file in the head section i.e the
CSS is embedded within the HTML file.

External: External CSS contains a separate CSS file that contains only style property with the help of
tag attributes.

Chapter 7: CSS Key Features

CSS specifies how HTML elements should be displayed on screens.
The Major key feature of CSS includes styling rules which are interpreted by the client browser and
applied to various elements.
Using CSS, you can control the color text, the style of fonts, spacing between elements, how columns
are sized, variation in display for different devices and screen size as well as a variety of other effects.
CSS has a simple syntax and uses a number of English keywords to specify the names of various style
properties:

7.1 Style sheet

A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a
declaration block.

7.2 Selector
"CSS class" redirects here. For non-CSS use of element classes in HTML, see class attribute (HTML).
In CSS, selectors declare which part of the markup a style applies to by matching tags and attributes
in the markup itself.

7.3 Selector types

Selectors may apply to the following:
all elements of a specific type
elements specified by attribute, in particular:
id: an identifier unique within the document, denoted in the selector language by a hash prefix e.g. #id
class: an identifier that can annotate multiple elements in a document, denoted by a dot prefix
e.g. .class name (the phrase "CSS class", although sometimes used, is a misnomer, as element classes
—specified with the HTML class attribute—is a markup feature that is distinct from browsers' CSS
subsystem and the related W3C/WHATWG standards work on document styles; see RDF and micro
formats for the origins of the "class" system of the Web content model)
 Elements depending on how they are placed relative to others in the document tree.
Classes and IDs are case-sensitive, start with letters, and can include alphanumeric characters,
hyphens, and underscores. A class may apply to any number of instances of any element. An ID may
only be applied to a single element.

7.4 Pseudo-classes
Pseudo-classes are used in CSS selectors to permit formatting based on information that is not
contained in the document tree.

One example of a widely used pseudo-class is :hover, which identifies content only when the user
"points to" the visible element, usually by holding the mouse cursor over it. It is appended to a
selector as in a: hover or #elementid: hover.

A pseudo-class classifies document elements, such as :link or :visited, whereas a pseudo-element

makes a selection that may consist of partial elements, such as ::first-line or ::first-letter. Note the
distinction between the double-colon notation used for pseudo-elements and the single-colon notation
used for pseudo-classes.

7.5 Combinators
Multiple simple selectors may be joined using combinators to specify elements by location, element
type, id, class, or any combination thereof. The order of the selectors is important. For example,
div .my Class {color: red ;} applies to all elements of class my Class that are inside div elements,
whereas .my Class div {color: red ;} applies to all div elements that are inside elements of class my
Class. This is not to be confused with concatenated identifiers such as div.my Class {color: red ;}
which applies to div elements of class my Class.

7.6 Declaration block

A declaration block consists of a pair of braces ({}) enclosing a semicolon-separated list of
declarations.

Declaration
Each declaration itself consists of a property, a colon (:), and a value. Optional white-space may be
around the declaration block, declarations, colons, and semi-colons for readability.

Properties
Properties are specified in the CSS standard. Each property has a set of possible values. Some
properties can affect any type of element, and others apply only to particular groups of elements.

Values
Values may be keywords, such as "center" or "inherit", or numerical values, such as 200px (200
pixels), 50vw (50 percent of the viewport width) or 80% (80 percent of the parent element's width).
Color values can be specified with keywords (e.g. "red"), hexadecimal values (e.g. #FF0000, also
abbreviated as #F00), RGB values on a 0 to 255 scale (e.g. rgb(255, 0, 0)), RGBA values that specify
both color and alpha transparency (e.g. rgba(255, 0, 0, 0.8)), or HSL or HSLA values (e.g. hsl(000,
100%, 50%), hsla(000, 100%, 50%, 80%)).
Non-zero numeric values representing linear measures must include a length unit, which is either an
alphabetic code or abbreviation, as in 200px or 50vw; or a percentage sign, as in 80%. Some units –
cm (centimetre); in (inch); mm (millimetre); pc (pica); and pt (point) – are absolute, which means that
the rendered dimension does not depend upon the structure of the page; others – em (em); ex (ex) and
px (pixel)[clarification needed] – are relative, which means that factors such as the font size of a
parent element can affect the rendered measurement. These eight units were a feature of CSS 1 and
retained in all subsequent revisions. The proposed CSS Values and Units Module Level 3 will, if
adopted as a W3C Recommendation, provide seven further length units: ch; Q; rem; vh; vmax; vmin;
and vw.

Use
Before CSS, nearly all presentational attributes of HTML documents were contained within the
HTML markup. All font colors, background styles, element alignments, borders, and sizes had to be
explicitly described, often repeatedly, within the HTML. CSS lets authors move much of that
information to another file, the style sheet, resulting in considerably simpler HTML. And
additionally, as more and more devices are able to access responsive web pages, different screen sizes
and layouts begin to appear. Customizing a website for each device size is costly and increasingly
difficult. The modular nature of CSS means that styles can be reused in different parts of a site or
even across sites, promoting consistency and efficiency.

For example, headings (h1 elements), sub-headings (h2), sub-sub-headings (h3), etc., are defined
structurally using HTML. In print and on the screen, choice of font, size, color and emphasis for these
elements is presentational.
Before CSS, document authors who wanted to assign such typographic characteristics to, say, all h2
headings had to repeat HTML presentational markup for each occurrence of that heading type. This
made documents more complex, larger, and more error-prone and difficult to maintain. CSS allows
the separation of presentation from structure. CSS can define color, font, text alignment, size, borders,
spacing, layout and many other typographic characteristics, and can do so independently for on-
screen and printed views. CSS also defines non-visual styles, such as reading speed and emphasis for
aural text readers. The W3C has now deprecated the use of all presentational HTML Markup.

Sources
CSS, or Cascading Style Sheets, offers a flexible way to style web content, with styles originating
from browser defaults, user preferences, or web designers. These styles can be applied inline, within
an HTML document, or through external .css files for broader consistency. Not only does this
simplify web development by promoting reusability and maintainability, it also improves site
performance because styles can be offloaded into dedicated .css files that browsers can cache.
Additionally, even if the styles cannot be loaded or are disabled, this separation maintains the
accessibility and readability of the content, ensuring that the site is usable for all users, including
those with disabilities. Its multi-faceted approach, including considerations for selector specificity,
rule order, and media types, ensures that websites are visually coherent and adaptive across different
devices and user needs, striking a balance between design intent and user accessibility.
7.7 Multiple style sheets
Multiple style sheets can be imported. Different styles can be applied depending on the output device
being used; for example, the screen version can be quite different from the printed version, so authors
can tailor the presentation appropriately for each medium.

Cascading
The style sheet with the highest priority controls the content display. Declarations not set in the
highest priority source are passed on to a source of lower priority, such as the user agent style. The
process is called cascading.

One of the goals of CSS is to allow users greater control over presentation. Someone who finds red
italic headings difficult to read may apply a different style sheet. Depending on the browser and the
website, a user may choose from various style sheets provided by the designers, or may remove all
added styles, and view the site using the browser's default styling, or may override just the red italic
heading style without altering other attributes. Browser extensions like Stylish and Stylus have been
created to facilitate the management of such user style sheets. In the case of large projects, cascading
can be used to determine which style has a higher priority when developers do integrate third-party
styles that have conflicting priorities, and to further resolve those conflicts. Additionally, cascading
can help create themed designs, which help designers fine-tune aspects of a design without
compromising the overall layout.

Specificity
Specificity refers to the relative weights of various rules. It determines which styles apply to an
element when more than one rule could apply. Based on the specification, a simple selector (e.g. H1)
has a specificity of 1, class selectors have a specificity of 1, 0, and ID selectors have a specificity of 1,
0, 0. Because the specificity values do not carry over as in the decimal system, commas are used to
separate the "digits”.

Inheritance
Inheritance is a key feature in CSS; it relies on the ancestor-descendant relationship to operate.
Inheritance is the mechanism by which properties are applied not only to a specified element but also
to its descendants. Inheritance relies on the document tree, which is the hierarchy of XHTML
elements in a page based on nesting. Descendant elements may inherit CSS property values from any
ancestor element enclosing them. In general, descendant elements inherit text-related properties, but
their box-related properties are not inherited. Properties that can be inherited are color, font, letter
spacing, line-height, list-style, text-align text-indent, text-transform, visibility, white-space, and word-
spacing. Properties that cannot be inherited are background, border, display, float and clear, height,
and width, margin, min- and max-height and -width, outline, overflow, padding, position, text-
decoration, vertical-align, and z-index.
7.8 Positioning

Normal flow
Inline items are laid out in the same way as the letters in words in the text, one after the other across
the available space until there is no more room, then starting a new line below. Block items stack
vertically, like paragraphs and like the items in a bulleted list. Normal flow also includes the relative
positioning of block or inline items and run-in boxes.

Floats
A floated item is taken out of the normal flow and shifted to the left or right as far as possible in the
space available. Other content then flows alongside the floated item.
Absolute positioning
An absolutely positioned item has no place in, and no effect on, the normal flow of other items. It
occupies its assigned position in its container independently of other items.

Position property
There are five possible values of the position property. If an item is positioned in any way other than
static, then the further properties top, bottom, left, and right are used to specify offsets and positions.
The element having position static is not affected by the top, bottom , left or right properties.

Static
The default value places the item in the normal flow.

Relative
The item is placed in the normal flow, and then shifted or offset from that position. Subsequent flow
items are laid out as if the item had not been moved.

Absolute
Specifies absolute positioning. The element is positioned in relation to its nearest non-static ancestor.

Fixed
The item is absolutely positioned in a fixed position on the screen even as the rest of the document is
scrolled.

Float and clear

The float property may have one of three values. Absolutely positioned or fixed items cannot be
floated. Other elements normally flow around floated items, unless they are prevented from doing so
by their clear property.

Left
 The item floats to the left of the line that it would have appeared in; other items may flow around its
right side.

Right
The item floats to the right of the line that it would have appeared in; other items may flow around its
left side.

Clear
Forces the element to appear underneath ('clear') floated elements to the left (clear: left), right (clear:
right) or both sides

Chapter 8 :PHP Overview

PHP started out as a small open source project that evolved as more and more people found out how
useful it was. Rasmus Lerdorf unleashed the first version of PHP way back in 1994.
PHP is a recursive acronym for "PHP: Hypertext Preprocessor".
PHP is a server side scripting language that is embedded in HTML. It is used to manage dynamic
content, databases, session tracking, even build entire e-commerce sites.
It is integrated with a number of popular databases, including MySQL, PostgreSQL, Oracle, Sybase,
Informix, and Microsoft SQL Server.
PHP is pleasingly zippy in its execution, especially when compiled as an Apache module on the Unix
side. The MySQL server, once started, executes even very complex queries with huge result sets
inrecord-setting time.
PHP supports a large number of major protocols such as POP3, IMAP, and LDAP. PHP4 added
support for Java and distributed object architectures (COM and CORBA), making n-tier development
a possibility for the first time.
PHP is forgiving: PHP language tries to be as forgiving as possible.
PHP Syntax is C-Like.

8.1Data Types
PHP has a total of eight data types which we use to construct our variables −
Integers − are whole numbers, without a decimal point, like 4195.
Doubles − are floating-point numbers, like 3.14159 or 49.1.
Booleans − have only two possible values either true or false.
NULL − is a special type that only has one value: NULL.
Strings − are sequences of characters, like 'PHP supports string operations.'
Arrays − are named and indexed collections of other values.
Objects − are instances of programmer-defined classes, which can package up both other kinds of
values and functions that are specific to the class.
 Resources − are special variables that hold references to resources external to PHP (such as database
connections).

8.2 Variables
constant () function
This function will return the value of the constant.This is useful when you want to retrieve value of a
constant, but you do not know its name, i.e. It is stored in a variable or returned by a function.
PHP Magic constants
PHP provides a large number of predefined constants to any script which it runs. There are five
magical constants that change depending on where they are used. For example, the value of
__LINE__ depends on the line that it's used on in your script. These special constants are case-
insensitive.
A few "magical" PHP constants are given below −

Sr. No. Name Description

1. __LINE__ The current line number of the file.

2. __FILE__ The full path and file name of the file. If used inside an include,
the name of the included file is returned. Since PHP 4.0.2,
__FILE__ always contains an absolute path whereas in older
versions it contained relative path under some circumstances.
3. __FUNCTION__ The function name. (Added in PHP 4.3.0) As of PHP 5 this
constant returns the function name as it was declared (case-
sensitive). In PHP 4 its value is always lowercased
4. __CLASS__ The class name. (Added in PHP 4.3.0) As of PHP 5 this constant
returns the class name as it was declared (case-sensitive). In PHP
4 its value is always lowercased.
5. __METHOD__ The class method name. (Added in PHP 5.0.0) The method name
is returned as it was declared (case-sensitive).

8.3 Operators
PHP language supports following type of operators.

 Arithmetic Operators
 Comparison Operators
 Logical (or Relational) Operators
 Assignment Operators
 Conditional (or ternary) Operators

Arithmetic Operator
Operator Description Example
+ Adds two operands A + B will give 30
- Subtracts second operand from the first A - B will give -10
* Multiply both operands A * B will give 200
/ Divide numerator by de-numerator B / A will give 2
% Modulus Operator and remainder of after an integer division B % A will give 0
 ++ Increment operator, increases integer value by one A++ will give 11
-- Decrement operator, decreases integer value by one A-- will give 9
Comparison Operator
Operator Description Example
== Checks if the value of two operands is equal or not, if yes (A == B) is
then condition becomes true. not true.
!= Checks if the value of two operands is equal or not, if (A!= B) is
values are not equal then condition becomes true. true.
> Checks if the value of left operand is greater than the (A > B) is not
value of right operand, if yes then condition becomes true.
true.
< Checks if the value of left operand is less than the value (A < B) is
of right operand, if yes then condition becomes true. true.
>= Checks if the value of left operand is greater than or (A >= B) is
equal to the value of right operand, if yes then condition not true.
becomes true.
<= Checks if the value of left operand is less than or equal to (A <= B) is
the value of right operand, if yes then condition becomes true.
true.

Logical Operator
Operator Description Example
and Called Logical AND operator. If both the operands are (A and B) is
true then condition becomes true. true.
or Called Logical OR Operator. If any of the two operands (A or B) is
are non zero then condition becomes true. true.
&& Called Logical AND operator. If both the operands are (A && B) is
non zero then condition becomes true. true.
|| Called Logical OR Operator. If any of the two operands (A || B) is
are non zero then condition becomes true. true. Assignment
! Called Logical NOT Operator. Use to reverses the logical !(A && B) Operators
state of its operand. If a condition is true then Logical is false.
NOT operator will make false.
Operator Description Example
= Simple assignment operator, Assigns values C = A + B will
from right side operands to left side operand assign value of A +
B into C
+= Add AND assignment operator, It adds right C += A is equivalent
operand to the left operand and assign the to C = C + A
result to left operand
-= Subtract AND assignment operator, It C -= A is equivalent
subtracts right operand from the left operand to C = C - A
and assign the result to left operand
*= Multiply AND assignment operator, It C *= A is equivalent
multiplies right operand with the left operand to C = C * A
and assign the result to left operand
/= Divide AND assignment operator, It divides C /= A is equivalent
left operand with the right operand and assign to C = C / A
the result to left operand
 %= Modulus AND assignment operator, It takes C %= A is
modulus using two operands and assign the equivalent to C = C
result to left operand %A
Conditional operator
Operator Description Example
?: Conditional If Condition is true ? Then value X : Otherwise
Expression value Y
8.4 Decision Making Statements
PHP supports following three decision making statements −

 if...else statement − use this statement if you want to execute a set of code when a
condition is true and another if the condition is not true
 elseif statement − is used with the if...else statement to execute a set of code if one of the
several condition is true
 switch statement − is used if you want to select one of many blocks of code to be
executed, use the Switch statement. The switch statement is used to avoid long blocks of
if..elseif..else code.

8.5 Looping Statements

PHP supports following four loop types.
 for − loops through a block of code a specified number of times.
 while − loops through a block of code if and as long as a specified condition is true.
 do...while − loops through a block of code once, and then repeats the loop as long as a special
condition is true.
 foreach − loops through a block of code for each element in an array.

8.6 Arrays
There are three different kind of arrays and each array value is accessed using an ID c which is called
array index.
 Numeric array − An array with a numeric index. Values are stored and accessed in linear fashion.
 Associative array − An array with strings as index. This stores element values in association with
key values rather than in a strict linear index order.
  Multidimensional array − An array containing one or more arrays and values are accessed using
multiple indices

Chapter 9: PHP Introduction

The term PHP is an acronym for PHP: Hypertext Preprocessor. PHP is a server-side scripting language
designed specifically for web development. It is open-source which means it is free to download and use.
It is very simple to learn and use. The files have the extension “.php”.

Rasmus Lerdorf inspired the first version of PHP and participated in the later versions. It is an
interpreted language and it does not require a compiler.

PHP code is executed in the server.

It can be integrated with many databases such as Oracle, Microsoft SQL Server, MySQL, PostgreSQL,
Sybase, and Informix.
It is powerful to hold a content

9.1 Applications of PHP

Server-side web development
It is a development where the program runs on server dealing with the generation of content of web
page.

Content management systems (CMS): It is a framework already designed by other

programmers and coders on which you can either contribute your knowledge and skills, or just use those
coders’ skills to design your own website or blog

E-commerce websites
E-commerce, or electronic commerce, refers to the buying and selling of goods and services over the
internet

Database-driven applications
It is a software application that relies on a database to store, manage, and retrieve data. It utilizes a
database management system (DBMS) to organize and manipulate data, enabling efficient data storage,
retrieval, and management.

Web APIs
It is an API as the name suggests, it can be accessed over the web using the HTTP protocol. It is a
framework that helps you to create and develop HTTP based RESTFUL services.
These applications demonstrate the versatility and widespread use of PHP in web development,
powering a vast array of websites and applications.
 Chapter 10 :PHP Tutorial

This PHP tutorial, whether you’re a beginner or a professional, our tutorial is designed to provide you
with in-depth knowledge of the PHP scripting language.

With our PHP tutorial, you’ll learn all the important topics, including control statements, functions,
arrays, strings, file handling, form handling, regular expressions, date and time manipulation, object-
oriented programming in PHP, mathematical operations, working with PHP and MySQL, integrating
PHP with Ajax, harnessing the power of PHP with jQuery, and more.

10.1What is PHP?

The term PHP is an acronym for Hypertext Preprocessor. It is an open-source, interpreted, object-
oriented server-side scripting language that is used for web development. PHP is developed by the
Rasmus Lerdorf in 1994 with the very first version of PHP that simply designed to set the Common
Gateway Interface (CGI) binaries, which are written in C programming language. The latest version of
PHP is PHP versions 8 which is released on November 24, 2022. It can be easily embedded with HTML
files. HTML codes can also be written in a PHP file. The PHP codes are executed on the server-side
whereas HTML codes are directly executed on the browser.

10.2 Why we learn PHP ?

It is one of the widely used open-source general-purpose scripting language that is used for backend
Development. Apart from this, let’s see why we should learn it.

Easy to Learn: It is easier to learn for anyone who has come across to any programming language for
the first time.
Free of Cost: Since it is an open-source language, therefore developers are allowed to use its
components and all methods for free.
Flexible: Since It is a dynamically typed language, therefore there are no hard rules on how to build
features using it.
Supports nearly all databases: It supports all the widely used databases, including MySQL, ODBC,
SQLite etc.
Secured: It has multiple security levels provides us a secure platform for developing websites as it has
multiple security levels.
Huge Community Support: It is loved and used by a huge number of developers. The developers share
their knowledge with other people of the community that want to know about it.
 Chapter11: Introduction to JavaScript
JavaScript (JS) is the most popular lightweight, interpreted compiled programming language. It can
be used for both Client-side as well as Server-side developments. JavaScript also known as a scripting
language for web pages. This JavaScript Tutorial is designed to help both beginners and experienced
professionals master the fundamentals of JavaScript and unleash their creativity to build powerful
web applications. From basic syntax and data types to advanced topics such as object-oriented
programming and DOM manipulation.

11.1 What is JavaScript ?

JavaScript is a lightweight, cross-platform, single-threaded, and interpreted compiled programming

language. It is also known as the scripting language for webpages. It is well-known for the
development of web pages, and many non-browser environments also use it.

JavaScript is a weakly typed language (dynamically typed). JavaScript can be used for Client-side
developments as well as Server-side developments. JavaScript is both an imperative and declarative
type of language. JavaScript contains a standard library of objects, like Array, Date, and Math, and a
core set of language elements like operators, control structures, and statements.

Client-side: It supplies objects to control a browser and its Document Object Model (DOM). Like if
client-side extensions allow an application to place elements on an HTML form and respond to user
events such as mouse clicks, form input, and page navigation. Useful libraries for the client side are
AngularJS, ReactJS, VueJS, and so many others.

Server-side: It supplies objects relevant to running JavaScript on a server. For if the server-side
extensions allow an application to communicate with a database, and provide continuity of
information from one invocation to another of the application, or perform file manipulations on a
server. The useful framework which is the most famous these days is node.js.

Imperative language – In this type of language we are mostly concerned about how it is to be done.
It simply controls the flow of computation. The procedural programming approach, object, oriented
approach comes under this as async await we are thinking about what is to be done further after the
async call.

Declarative programming – In this type of language we are concerned about how it is to be done,
basically here logical computation requires. Her main goal is to describe the desired result without
direct dictation on how to get it as the arrow function does.

12.2 How to Link JavaScript File in HTML ?

JavaScript can be added to HTML file in twoways:

 Internal JS: We can add JavaScript directly to our HTML file by writing the code inside the <script>
tag. The <script> tag can either be placed inside the <head> or the <body> tag according to the
requirement.
External JS: We can write JavaScript code in another files having an extension.js and then link this
file inside the <head> tag of the HTML file in which we want to add this code.

Chapter 12 :History of JavaScript

It was created in 1995 by Brendan Eich while he was an engineer at Netscape. It was originally going
to be named LiveScript but was renamed. Unlike most programming languages, JavaScript language
has no concept of input or output. It is designed to run as a scripting language in a host environment,
and it is up to the host environment to provide mechanisms for communicating with the outside
world. The most common host environment is the browser.

12.1 Features of JavaScript

According to a recent survey conducted by Stack Overflow, JavaScript is the most popular language
on earth.
With advances in browser technology and JavaScript having moved into the server with Node.js and
other frameworks, JavaScript is capable of so much more.
Here are a few things that we can do with JavaScript:
JavaScript was created in the first place for DOM manipulation. Earlier websites were mostly static,
after JS was created dynamic Web sites were made.
Functions in JS are objects. They may have properties and methods just like other objects. They can
be passed as arguments in other functions.
Can handle date and time.
Performs Form Validation although the forms are created using HTML.
No compiler is needed.
 Chapter 13: Applications of JavaScript

13.1 Web Development

Adding interactivity and behavior to static sites JavaScript was invented to do this in 1995. By using
AngularJS that can be achieved so easily.

13.2 Web Applications

With technology, browsers have improved to the extent that a language was required to create robust
web applications. When we explore a map in Google Maps then we only need to click and drag the
mouse. All detailed view is just a click away, and this is possible only because of JavaScript. It uses
Application Programming Interfaces(APIs) that provide extra power to the code. The Electron and
React are helpful in this department.

13.3 Server Applications

With the help of Node.js, JavaScript made its way from client to server and Node.js is the most
powerful on the server side.

13.4 Games
Not only in websites, but JavaScript also helps in creating games for leisure. The combination of
JavaScript and HTML 5 makes JavaScript popular in game development as well. It provides the
EaseJS library which provides solutions for working with rich graphics.

13.5 Smartwatches
JavaScript is being used in all possible devices and applications. It provides a library PebbleJS which
is used in smartwatch applications. This framework works for applications that require the Internet for
their functioning.

13.6 Art
Artists and designers can create whatever they want using JavaScript to draw on HTML 5 canvas, and
make the sound more effective also can be used p5.js library.

13.7 Machine Learning

This JavaScript ml5.js library can be used in web development by using machine learning.

13.8 Mobile Applications

JavaScript can also be used to build an application for non-web contexts. The features and uses of
JavaScript make it a powerful tool for creating mobile applications. This is a Framework for building
web and mobile apps using JavaScript. Using React Native, we can build mobile applications for
 different operating systems. We do not require to write code for different systems. Write once use it
anywhere!

Chapter 14:Limitations of JavaScript

14.1 Security risks

JavaScript can be used to fetch data using AJAX or by manipulating tags that load data such as
<img>, <object>, <script>. These attacks are called cross-site script attacks. They inject JS that is not
part of the site into the visitor’s browser thus fetching the details.

14.2 Performance
JavaScript does not provide the same level of performance as offered by many traditional languages
as a complex program written in JavaScript would be comparatively slow. But as JavaScript is used to
perform simple tasks in a browser, so performance is not considered a big restriction in its use.

14.3 Complexity
To master a scripting language, programmers must have a thorough knowledge of all the
programming concepts, core language objects, and client and server-side objects otherwise it would
be difficult for them to write advanced scripts using JavaScript.

14.4Weak error handling and type checking facilities

It is a weakly typed language as there is no need to specify the data type of the variable. So wrong
type checking is not performed by compile.