Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
20 views

HTML, CSS, Javascript - FWT

Uploaded by

Kalia “Aiko”
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
20 views

HTML, CSS, Javascript - FWT

Uploaded by

Kalia “Aiko”
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 246

FUNDAMENTALS OF

WEB TECHNOLOGIES

Mr. Putcha Saikiran


Syllabus :
◻ Unit-I
HTML Over view, HTML Document Structure, HTML Tags, HTML
Elements, HTML Attributes, HTML Formatting, Grouping Content,
HTML Fonts, HTML Color, HTML Images, HTML Tables, HTML List,
HTML Text Link, HTML Frames, HTML IFrames, HTML Header, tag,
The <marquee> Tag Attributes
◻ Unit-II
HTML Backgrounds, HTML Layout, HTML Forms, Form Attributes,
HTML Form Controls, Text Input Controls, Single-line text input
controls, CSS introduction, CSS Syntax, Concept of CSS: Creating
Style Sheet, CSS Properties, CSS Styling, Working with Lists and
Tables, CSS Id and Class, Creating page Layout and Site Designs
CSS style sheet: External Style Sheets, Internal Style Sheets,
Inline Style, The class selector: div & span tag. HTML DOM, inner
HTML, Dynamic HTML (DHTML), DHTML form, XML DOM
◻ Unit-III
Java Script Overview, Syntax, Enabling Using Web browser,
Placement, Java Script Variables, Operators, control structure,
Function, Events Handling, DOM (Document Object Model), Array,
String, Errors and Exceptions, Form Validation.Bootstrap Get Started,
Basic Bootstrap Pages, Bootstrap Grids, Table, Responsive Images,
Jumbotron and Page Header, Bootstrap Buttons, Button Groups,
Dropdown Menus, Badges, Labels, List, Dropdowns Menus, Navigation
Bar, Forms, Input
◻ Unit-IV
Introduction to PHP, Decisions and loop. Function, String, Array,
Looping with Index based array, Looping with associative array using
each () and foreach(), Some useful Library function. Handling Html
Form with Php, Database Connectivity with MySql, Introduction to
RDBMS, Connection with MySql Database, Performing basic database
operation(DML) (Insert, Delete, Update, Select), Setting query
parameter.
Fundamentals of web technologies

UNIT - 1
HTML introduction:
◻ HTML stands for Hyper Text Markup Language.
◻ It is used to design web pages using a markup
language.
◻ HTML is the combination of Hypertext and
Markup language.
◻ Hypertext defines the link between web pages.
◻ A markup language is used to define the text
document within the tag which defines the
structure of web pages.
◻ This language is used to annotate (make
notes for the computer) text so that a
machine can understand it and
manipulate text accordingly.
◻ Most markup languages (e.g. HTML) are
human-readable.
◻ The language uses tags to define what
manipulation has to be done on the text.
◻ HTML is a markup language used by the
browser to manipulate text, images, and
other content, in order to display it in the
required format.
Tags and elements:
◻ HTML uses predefined tags and
elements which tell the browser how to
properly display the content.
Remember to include closing
tags. If omitted, the browser
applies the effect of the
opening tag until the end of the
page.
HTML structure:
◻ <!DOCTYPE html>: This is the document type
declaration (not technically a tag). It declares a
document as being an HTML document. The doctype
declaration is not case-sensitive.
◻ <html>: This is called the HTML root element. All
other elements are contained within it.
◻ <head>: The head tag contains the “behind the
scenes” elements for a webpage. Elements within the
head aren’t 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.
Features of HTML

◻ It is easy to learn and easy to use.


◻ It is platform-independent.
◻ Images, videos, and audio can be added
to a web page.
◻ Hypertext can be added to the text.
◻ It is a markup language.
Why we learn HTML?

◻ It is a simple markup language. Its


implementation is easy.
◻ It is used to create a website.
◻ Helps in developing fundamentals about
web programming.
◻ Boost professional career.
Advantages and disadvantages

Advantages Disadvantages

◻ HTML is used to ◻ HTML can only create


build websites. static web pages. For
dynamic web pages,
◻ It is supported by
other languages have
all browsers. to be used.
◻ It can be integrated ◻ A large amount of
with other code has to be
languages like CSS, written to create a
JavaScript, etc. simple web page.
◻ The security feature
is not good.
◻ <html>
<head>
<title>Title of your web
page</title>
</head>
<body>HTML web page contents
</body>
</html>
Head tag:
◻ It is used to define the heading of an
HTML document.
<h1>Heading 1 </h1>
<h2>Heading 2 </h2>
<h3>Heading 3 </h3>
<h4>Heading 4 </h4>
<h5>Heading 5 </h5>
<h6>Heading 6 </h6>
Paragraph tag:
◻ It is used to define paragraph content in
an HTML document.
<p>Paragraph you want to put</p>
HTML tags:
◻ Bold tag: It is used to specify bold
content in an HTML document.
<b> Statements... </b>
◻ Italic tag: It is used to write the content
in italic format.
<i> Statements... </i>
◻ Underline tag: It is used to set the
content underline.
<u> Statements... </u>
◻ Deleted text tag: It is used to represent
deleted text. It crosses the text content.
<strike>Trese</strike>Trees
◻ Anchor tag: It is used to link one page to
another page.
<a href="..."> Statements... </a>

Visit <a href="


https://www.geeksforgeeks.org/">
GeeksforGeeks</a> for better experience.
HTML elements:
◻ An HTML element is defined by a start tag, some
content, and an end tag.
◻ The HTML element is everything from the start tag

to the end tag:


<tagname>Content goes
here...</tagname>
◻ HTML elements can be nested (this means that

elements can contain other elements).


◻ All HTML documents consist of nested HTML

elements.
◻ The following example contains: Basic HTML

structure
HTML attributes:
◻ HTML attributes provide additional
information about HTML elements.
◻ All HTML elements can have attributes
◻ Attributes are always specified in the
start tag
◻ Attributes usually come in name/value
pairs like: name="value"
<a href="https://
www.w3schools.com">Visit
W3Schools</a>
HTML formatting:
Formatting elements were designed to display special types
of text:
◻ <b> </b> - Bold text

◻ <strong> </strong> - Important text

◻ <i> </i> - Italic text

◻ <em> </em> - Emphasized text (typically displayed in

Italic)
◻ <mark> </mark> - Marked text (marked or highlighted)

◻ <small> </small> - Smaller text (smaller text size)

◻ <del> </del> - Deleted text (crossed line over text)

◻ <ins> </ins> - Inserted text (text inserted into

document)
◻ <sub> </sub> - Subscript text

◻ <sup> </sup> - Superscript text


Grouping content:
◻ Grouping plays a vital role in our web
page because it helps the developer to
target specific classes and id which
makes it easier to position, style, or
manipulate the web page with the help
of HTML.
◻ <div>: It is a block-level tag that groups various
HTML tags into a single block.
<html>
<head> </head>
<body> In DIV1

<div class="div1"> In DIV2


<h1>In Div1</h1>
</div>
<div class="div2">
<h1>In Div2</h1>
</div> </body> </html>
◻ <header> :This tag contains the tagline
or we can say it contains the main heading
or the navigation links of our web page
and is placed at the top of our web page.
(written inside body)
<header>
<h1>This is Heading..</h1>
<p>This is paragraph in the
header group</p>
</header>
◻ <footer> : This tag contains copyright
information, contact information, back-to-
top link, and several other related
documents and is placed at the bottom of
our web page.
<footer>
<h1>Thank you</h1>
<p>You rechaed to the last
page</p>
</footer>
◻ <section> : This tag is used to define
the section in the document.
<section id="sectionID">
<p>This content belongs to section
group.</p>
<p>HTML is a hypertext markup
language which is used to design
the web pages</p>
</section>
Example
HTML fonts:
❑Font tag: It is used to specify the font
size, font color, and font family in an
HTML document.
<font face="Times New
Roman">Example</font>
HTML Colors:
◻ HTML colors are specified with
predefined color names.

◻ Background color:
<h1 style="background-
color:DodgerBlue;">SEC G</h1>
<p style="background-
color:Tomato;">Having FWT
subject</p>
◻ Text color:
<h1 style="color:DodgerBlue;">SEC
G</h1>
<p style="color:Tomato;">Having FWT
subject</p>
◻ Border color:
<h1 style="border:2px solid
Tomato;“>SEC G</h1>
<h1 style="border:2px solid
Violet;">Hello World</h1>
HTML image:
◻ The HTML <img> tag is used to embed an
image in a web page.
◻ The <img> tag has two required
attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the
image

<img src="img_chania.jpg" alt="Flow


ers in Chania">
◻ Image height and width
<img src="img_girl.jpg" alt="Girl
sitting" style="width:500px;height:60
0px;">
◻ Image in another sub folder
<img src="/images/
html5.gif" alt="HTML5
Icon" style="width:128px;height:12
8px;">
HTML Lists:
◻ List tag: It is used to list the content.
<li>List item 1</li>
<li>List item 2</li>
Types of Lists:
❑Unordered list: It is used to list the
content without order.

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
❑Ordered List tag: It is used to list the
content in a particular order.

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
◻ Description Lists: A description list is a
list of terms, with a description of each
term.

The <dl> tag defines the description


list, The <dt> tag defines the term
(name), and The <dd> tag describes
each term:
<html> <head> <title> description list</title>
</head>
<body>
<h2>A Description List</h2>

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

</body> </html>
◻ Comment tag: It is used to set the
comment in an HTML document. It is not
visible on the browser.
<!--Comment section-->
◻ Center tag: It is used to set the content
into the center.
<center>SAIKIRAN</center>
□Line break tag: It is used to break the
line.
This is BSH<br>not CSE
HTML Table:
◻ Table tag: A table tag is used to create
a table in an HTML document.
◻ td tag: It defines the standard cell in a
HTML document.
◻ tr tag: It is used to define a row of an
HTML table.
◻ th tag: It defines the header cell in a
table. By default, it set the content with
the bold and center property.
◻ <table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
◻ <table border="4" cellpadding="2"
cellspacing="2" width="50%">
<tr> <td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
◻ Cell padding is the space between the
cell edges and the cell content.
◻ Cell spacing is the space between each
cell.
◻ Column span
specifies the number of columns a cell should
span.
It allows the single table cell to span the width of
more than one cell or column.
It provides the same functionality as “merge
cell” in a spreadsheet program like Excel.
It can be used with <td>and <th> element
while creating an HTML Table.
<td colspan = "value">table
content...</td>
◻ <table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
</table>
◻ Row span
The rowspan attribute in HTML specifies the number
of rows a cell should span.
That is if a row spans two rows, it means it will take
up the space of two rows in that table.
It allows the single table cell to span the height of
more than one cell or row.
It provides the same functionality as “merge cell” in
the spreadsheet program like Excel.

It can be used with <td> and <th> element in


an HTML Table.
◻<table>
<tr>
<th>Name</th>
<th>Group</th>
<th>Section</th>
</tr>
<tr>
<td rowspan=“2” >Jill</td>
<td>G</td>
</tr>
<tr> <td>M</td> </tr>
</table>
HTML text links:
◻ A webpage can contain various links that take
you directly to other pages and even specific
parts of a given page. These links are known
as hyperlinks.
◻ Hyperlinks allow visitors to navigate between
Web sites by clicking on words, phrases, and
images. Thus you can create hyperlinks using
text or images available on a webpage.

<a href = "Document URL" ... attributes-


list>Link Text</a>
example
◻ <html>
<head>
<title>Hyperlink Example</title>
</head> <body>
<p>Click following link</p>
<a href =
"https://www.tutorialspoint.com"
target = "_self">Tutorials Point</a>
</body>
</html>
◻ _blank
Opens the linked document in a new window or
tab.
◻ _self
Opens the linked document in the same frame.
◻ _parent
Opens the linked document in the parent frame.
◻ _top
Opens the linked document in the full body of
the window.
HTML frames:
◻ HTML <frame> tag define the particular
area within an HTML file where another
HTML web page can be displayed.
◻ A <frame> tag is used with
<frameset> , and it divides a webpage
into multiple sections or frames, and
each frame can contain different web
pages.
◻ < frame src = "URL" >
◻ Two types of frames:
🞑 Vertical frames
🞑 Horizontal frames
Horizontal frame:
◻ <html>
<head>
<title>Frame tag</title>
</head>
<frameset rows="30%, 40%, 30%">
<frame src="1.html" >
<frame src="2.html">
<frame src="3.html">
</frameset>
</html>
Vertical frames:
◻ <html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="1.html" >
<frame src="2.html">
<frame src="3.html">
</frameset>
</html>
HTML iframes:
◻ HTML Iframe is used to display a nested
webpage (a webpage within a webpage). The
HTML <iframe> tag defines an inline frame,
hence it is also called as an Inline frame.
◻ An HTML iframe embeds another document
within the current HTML document in the
rectangular region.
◻ The webpage content and iframe contents
can interact with each other using JavaScript.
◻ <iframe src="URL"></iframe>

◻ <iframe src="https://
www.javatpoint.com/" height="300" width="400">
</iframe>

◻ <iframe src="https://
www.javatpoint.com/" height="50%" width="70%"
></iframe>

◻ <iframe src="https://
www.javatpoint.com/" style="border:none;"></
iframe>
HTML header:
◻ HTML <header> tag is used as a
container of introductory content or
navigation links. Generally a <header>
element contains one or more heading
elements, logo or icons or author's
information.
◻ You can use several <header> elements in
one document, but a <header> element
cannot be placed within a <footer>,
<address> or another <header> element.
◻ <header>
<h2>ABCOnline.com</h2>
<p> World's no.1 shopping website</
p>
</header>
Marquee tag:
◻ The Marquee HTML tag is a non-
standard HTML element which is used to
scroll a image or text horizontally or
vertically.
◻ In simple words, you can say that it
scrolls the image or text up, down, left or
right automatically.
◻ <marquee width="100%" behavior="scroll" b
gcolor="pink">
This is an example of a scroll marquee...
</marquee>
◻ Slide and alternate
◻ <marquee width="100%" direction="right">

This is an example of a right direction marquee


...
</marquee>
UNIT-2
HTML background:
◻ HTML Background with Colors
◻ HTML Background with Images
Html Background with Colors

◻ The bgcolor attribute is used to control


the background of an HTML element,
specifically page body and table
backgrounds.
<tagname bgcolor =
"color_value"...>
Example: <body bgcolor=”red”>
◻ <!-- Format 1 - Use color name -->
<table bgcolor = "lime" > //color
name
◻ <!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" > //6
digit code
◻ <!-- Format 3 - Use color value in
RGB terms --> <table bgcolor =
"rgb(0,0,120)" >// reg green blue
Html Background with Images

◻ <tagname background = "Image


URL"...>
HTML layout:
◻ Page layout is the part of graphic design
that deals with the arrangement of
visual elements on a page. Page layout
is used to make the web pages look
better. It establishes the overall
appearance, relative importance, and
relationships between the graphic
elements to achieve a smooth flow of
information and eye movement for
maximum effectiveness or impact.
◻ Header: The part of the front end which is
used at the top of the page. <header> tag is
used to add a header section on web pages.s
◻ Navigation bar: The navigation bar is the
same as the menu list. It is used to display the
content information using hyperlinks. <nav>
tag is used to add the nav section(nav
elements) in web pages.
◻ Index / Sidebar: It holds additional
information or advertisements and is not
always necessary to be added to the page.
◻ Content Section: The content section
is the central part where content is
displayed.<main> tag is used to add the
main content of the webpages.
◻ Footer: The footer section contains the
contact information and other query
related to web pages. The footer section
is always put on the bottom of the web
pages. The <footer> tag sets the footer
on web pages.
Header:

◻ <!DOCTYPE html>
<html>
<head>
<title>Page Layout</title>
</head>
<body>
<!-- Header Section -->
<header style="background-color:DodgerBlue;">
<div class="head1">GeeksforGeeks</div>
<div class="head2">A computer science portal for
geeks</div>
</header>
Navigation bar:
<!-- Menu Navigation Bar -->
<nav class="menu" style="background-
color:Red;" >
<a href="#home">HOME</a>
<a href="#news">NEWS</a>
<a href="#notification">NOTIFICATIONS</a>
<div class="menu-log">
<a href="#login">LOGIN</a>
</div>
</nav>
Body section:
<!-- Body section -->
<main class = "body_sec"
style="background-color:Green;" >
<section id="Content">
<h3>Content section</h3>
</section>
</main>
Footer section:
<!-- Footer Section -->
<footer style="background-
color:Yellow;">Footer
Section</footer>
</body>
</html>
HTML forms:
◻ An HTML form is used to collect user
input. The user input is most often sent
to a server for processing.
◻ The HTML <form> element is used to
create an HTML form for user input:
🞑 <form>
.
form elements
.
</form>
◻ The HTML <input> element is the most used
form element.
◻ An <input> element can be displayed in many
ways, depending on the type attribute.
◻ Types of inputs:
🞑 Text
🞑 Radio
🞑 Check box
🞑 Submit
🞑 Button
🞑 Dropdown box
◻ Checkbox: It is used to define a checkbox
field. The checkbox is shown as a square box
that is ticked when it is activated. It allows the
user to select one or more option among all the
limited choices.
◻ Radio button: It is used to define a Radio
Button. Radio Buttons are used to let the user
select exactly one option from a list of
predefined options. Radio Button input controls
are created by using the “input” element with
a type attribute having value as “radio”.
◻ Text: It is used to define a single-line text
field . The default width of the text field is 20
characters.
◻ Submit: It is used to define a submit button.
It is used to submit all the user value to the
form handler. The Form Handler is a server
page that activates a script for processing all
the input values.
◻ Reset: It is used to defines a reset button.
The reset button is used to reset all the form
values to its initial values.
Drop down box:
◻ The <select> element is used to create
a drop-down list.
◻ The id attribute is needed to associate
the drop-down list with a label.
◻ The <option> tags inside
the <select> element define the
available options in the drop-down list.
◻ Tip: Always add the <label> tag for best
accessibility practices!
◻ date
🞑 The <input type="date"> is used for input fields
that should contain a date.
◻ color
🞑 The <input type="color"> is used for input fields
that should contain a color.
◻ email
🞑 The <input type="email"> is used for input fields
that should contain an e-mail address.
🞑 Depending on browser support, the e-mail address
can be automatically validated when submitted.
◻ image
🞑 The <input type="image"> defines an
image as a submit button.
🞑 The path to the image is specified in
the src attribute.
◻ password
🞑 <input type="password"> defines
a password field:
◻ file
🞑 The <input type="file"> defines a file-
select field and a "Browse" button for file
uploads.
◻ quantity
🞑 The <input type="number"> defines
a numeric input field.
🞑 You can also set restrictions on what
numbers are accepted.
◻ url
🞑 The <input type="url"> is used for input
fields that should contain a URL address.
◻ time
🞑 The <input type="time"> allows the user
to select a time (no time zone).
◻ telephone
🞑 The <input type="tel"> is used for input
fields that should contain a telephone
number.
◻ Gsearch
🞑 The <input type="search"> is used for
search fields (a search field behaves like a
regular text field).
◻ volume
🞑 The <input type=“volume"> is used to
adjust voulme.
HTML input attributes
◻ value
🞑 The input value attribute specifies an initial
value for an input field:
◻ readonly
🞑 The input readonly attribute specifies that
an input field is read-only.
🞑 A read-only input field cannot be modified
(however, a user can tab to it, highlight it,
and copy the text from it).
◻ disabled
🞑 The input disabled attribute specifies that
an input field should be disabled.
🞑 A disabled input field is unusable and un-
clickable.
◻ size
🞑 The input size attribute specifies the visible
width, in characters, of an input field.
🞑 The default value for size is 20.
◻ maxlength
🞑 The input maxlength attribute specifies the
maximum number of characters allowed in
an input field.
◻ min and max
🞑 The input min and max attributes specify the
minimum and maximum values for an input
field.
🞑 The min and max attributes work with the
following input types: number, range, date,
datetime-local, month, time and week.
◻ pattern
🞑 The input pattern attribute specifies a regular
expression that the input field's value is checked
against, when the form is submitted.
🞑 The pattern attribute works with the following input
types: text, date, search, url, tel, email, and password.
◻ required
🞑 The input required attribute specifies that an input
field must be filled out before submitting the form.
🞑 The required attribute works with the following input
types: text, search, url, tel, email, password, date
pickers, number, checkbox, radio, and file.
◻ step
🞑 The input step attribute specifies the legal
number intervals for an input field.
🞑 Example: if step="3", legal numbers could
be -3, 0, 3, 6, etc.
◻ height and width
🞑 The input height and width attributes
specify the height and width of an <input
type="image"> element.
◻ autocomplete
🞑 The input autocomplete attribute specifies
whether a form or an input field should
have autocomplete on or off.
🞑 Autocomplete allows the browser to predict
the value. When a user starts to type in a
field, the browser should display options to
fill in the field, based on earlier typed
values.
CSS

Cascading Style Sheet


Introduction:
◻ CSS stands for Cascading Style Sheets
◻ CSS describes how HTML elements are
to be displayed on screen, paper, or in
other media
◻ CSS saves a lot of work. It can control
the layout of multiple web pages all at
once
HTML vs CSS

HTML CSS

◻ HTML is a markup ◻ CSS is a style sheet


language used to language used to style
define a structure of the web pages by using
different styling
a web page.
features.
◻ It consists of tags ◻ It consists of selectors
inside which text is and declaration blocks.
enclosed. ◻ CSS can be internal or
◻ HTML doesn’t have external depending
further types. upon the requirement.
◻ We cannot use HTML ◻ We can use CSS
inside a CSS sheet. inside an HTML
◻ HTML is not used for document.
presentation and ◻ CSS is used for
visualization. presentation and
visualization.
◻ HTML doesn’t allow
◻ CSS allows animation
animations and
and transitions which
transitions.
helps to improve the
◻ HTML files are saved UI.
with .htm or .html ◻ CSS files are saved
extension. with .css extension.
◻ The selector points to the HTML element
you want to style.
◻ The declaration block contains one or
more declarations separated by
semicolons.
◻ Each declaration includes a CSS property
name and a value, separated by a colon.
◻ Multiple CSS declarations are separated
with semicolons, and declaration blocks
are surrounded by curly braces.
◻ <html> <head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head> <body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body> </html>
CSS element selector:
◻ The element selector selects HTML
elements based on the element name.
CSS id selector:
◻ The id selector uses the id attribute of an
HTML element to select a specific
element.
◻ The id of an element is unique within a
page, so the id selector is used to select
one unique element!
◻ To select an element with a specific id,
write a hash (#) character, followed by
the id of the element.
CSS class selector:
◻ The class selector selects HTML
elements with a specific class attribute.
◻ To select elements with a specific class,
write a period (.) character, followed by
the class name.
Class selector (vs) ID selector

◻ Difference between Class and ID:


A Class name can be used by multiple
HTML elements, while an ID name must
only be used by one HTML element
within the page.
Background image and colour:

◻ <style>
body {
background-image: url("paper.gif");

}
</style>
◻ By default, the background-image property
repeats an image both horizontally and
vertically.
◻ Showing the background image only once is
also specified by the background-
repeat property:
◻ The background-position property is used to
specify the position of the background image.
🞑 left top, left center, left bottom, right top, right
center, right bottom, center top, center center,
center bottom
◻ The background-attachment property
specifies whether the background image
should scroll or be fixed (will not scroll with
the rest of the page):
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
🞑 fixed or scroll.
Multiple background images:

◻ <style>
body {
background-image:
url("img_tree.gif"), url("paper.gif");
background-repeat: no-repeat,
repeat;
background-color: #cccccc;
}
</style>
CSS margins:
◻ CSS has properties for specifying the
margin for each side of an element:
🞑 margin-top
🞑 margin-right
🞑 margin-bottom
🞑 margin-left
◻ <style>
div.a{
margin-top: 300px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
CSS lists:
◻ The CSS list properties allow you to:
🞑 Set different list item markers for ordered
lists
🞑 Set different list item markers for unordered
lists
🞑 Set an image as the list item marker
🞑 Add background colors to lists and list items
◻ Two types of lists:
🞑 Ordered list
🞑 Unordered list
◻ The list-style-type property specifies the type of list
item marker.
◻ The list-style-image property specifies an image as
the list item marker.
◻ The list-style-position property specifies the
position of the list-item markers (bullet points).
🞑 "list-style-position: outside;" means that the bullet
points will be outside the list item. The start of each
line of a list item will be aligned vertically.
🞑 list-style-position: inside;" means that the bullet points
will be inside the list item. As it is part of the list item,
it will be part of the text and push the text at the start:
CSS Tables:
◻ To specify table borders in CSS, use
the border property.
◻ The example specifies a solid border for
<table>, <th> and <td> elements:
table, th, td {
border: 1px solid;
}
◻ table {
width: 100%;
}
Adjusting height
◻ table {
width: 100%;
}

th {
height: 70px;
}
Table alignment:
◻ td {
text-align: center;
}
Vertical alignment:
◻ The vertical-align property sets the vertical

alignment (like top, bottom, or middle) of


the content in <th> or <td>
🞑 td {
height: 50px;
vertical-align: bottom;
}
Horizontal Alignment:
◻ The text-align property sets the horizontal
alignment (like left, right, or center) of the
content in <th> or <td>.
◻ By default, the content of <th> elements
are center-aligned and the content of
<td> elements are left-aligned.
◻ To center-align the content of <td>
elements as well, use text-align: center
Types of CSS:
◻ There are three types of CSS which are
given below:
🞑 Inline CSS
🞑 Internal or Embedded CSS
🞑 External CSS
◻ Inline CSS: Inline CSS contains the CSS
property in the body section attached
with element is known as inline CSS. This
kind of style is specified within an HTML
tag using the style attribute.
<html> <head><title>Inline
CSS</title></head>
<body>
<p style = "color:#009900; font-
size:50px;
font-style:italic; text-
align:center;">
GeeksForGeeks</p>
</body>
</html>
◻ Internal or Embedded CSS: This can
be used when a single HTML document
must be styled uniquely. The CSS rule
set should be within the HTML file in the
head section i.e the CSS is embedded
within the HTML file.
◻ <html> <head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head> <body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body> </html>
◻ External CSS: External CSS contains separate
CSS file which contains only style property with
the help of tag attributes (For example class, id,
heading, … etc). CSS property written in a
separate file with .css extension and should be
linked to the HTML document using link tag.
This means that for each element, style can be
set only once and that will be applied across
web pages.
Example: The file given below contains CSS
property. This file save with .css extension. For
Ex: geeks.css
p{
color: red;
text-align: center;
}

◻ 1.css
<html>
<head>
<link rel="stylesheet" href=“1.css"/>
</head> <body>
<p>Hello World!</p>
<p>These paragraphs are styled with
CSS.</p>
</body>
</html>
CSS layout:
CSS links:
◻ The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user grags mouse
over it
a:active - a link the moment it is clicked

<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<a href="default.asp" >This is a
link</a>
</body>
</html>
div and span
◻ The div tag is a block level HTML
element. It is used
to divide or section other HTML
elements into groups.
<html>
<head> <style>
div.sample
{width:150px;background:#FF0002;border:2px
dotted black;padding:7px;}
div.sample ul {color:green;}
</style> </head>
<body>
<div class="sample"> <p>Samplep> <ul>
<li>Home</li> <li>Aboutus</li>
<li>Contactus</li> </ul> </div>
</body> </html>
◻ span tag is used for some hexadecimal
codes like six-digit codes that represent
the amount of color is also specified the
percentage values.
<html> <body>
<p>Sample<span
style="color:#FF0002;">
<i>Welcome</span></i>
Welcome My Domain</p>
<p><span style="color:#8865ff;">
Welcome to My Domain</span></p>
</body> </html>
JAVA SCRIPT
Java script:
◻ Java Script is one popular scripting language
over internet. Scripting means a small sneak
(piece). It is always independent on other
languages.
◻ JavaScript is most commonly used as a client
side scripting language. This means that
JavaScript code is written into an HTML page.
When a user requests an HTML page with
JavaScript in it, the script is sent to the
browser and it's up to the browser to do
something with it.
Why we Use JavaScript?
◻ Using HTML we can only design a web
page but you can not run any logic on
web browser like addition of two
numbers, check any condition, looping
statements (for, while), decision making
statement (if-else) at client side. All
these are not possible using HTML So for
perform all these task at client side you
need to use JavaScript.
Features:
Placement:
◻ In head
<html>
<head>
<script>
Code here
</script>
</head>
<body>
</body>
</html>
In body
◻ <html>
<head>
</head>
<body>
<script>
Code here
</script>
</body>
</html>
Both in head and body
◻ <html>
<head>
<script>
Script code here
</script>
</head>
<body>
<script>
Script code here
</script>
</body>
</html>
External file
◻ <html> <head>
<script src = "filename.js" >
</script>
</head>
<body> ....... </body>
</html>
Linking of an external file with
filename.js using the src attribute.
◻ function sayHello()
{
alert("Hello World")
}
( external file with file name
filename.js in the previous slide)
Javascript outputs:
◻ Writing into an HTML element,
using innerHTML
◻ Writing into the HTML output
using document.write()
◻ Writing into an alert box,
using window.alert()
◻ Writing into the browser console,
using console.log()
Method 1:
◻ To access an HTML element, JavaScript
can use
the document.getElementById(id) m
ethod.
◻ The id attribute defines the HTML
element.
◻ <!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>


<p>My First Paragraph</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>
Method 2:
◻ For testing purposes, it is convenient to
use document.write()
◻ <!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>


<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>
Method 3:
You can use an alert box to display data
◻ <!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>


<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>
Method 4:
◻ You can skip the window keyword.
◻ In JavaScript, the window object is the
global scope object. This means that
variables, properties, and methods by
default belong to the window object. This
also means that specifying
the window keyword is optional
◻ <!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>


<p>My first paragraph.</p>

<script>
alert(5 + 6);
</script>

</body>
</html>
Method 5
◻ For debugging purposes, you can call the
console.log() method in the browser to
display data.
<html>
<body>
<h2>Activate Debugging</h2>
<p>F12 on your keyboard will activate
debugging.</p>
<p>Then select "Console" in the debugger
menu.</p>
<p>Then click Run again.</p>
<script>
console.log(5 + 6);
</script> </body> </html>
Enabling using web browser
◻ Activate JavaScript in Google Chrome
Open Chrome on your computer.
Click Settings.
Click Security and Privacy.
Click Site settings.
Click JavaScript.
Select Sites can use Javascript.
◻ https://www.enable-javascript.com/
Java Script Variables:
◻ Variables are containers for storing data
(storing data values).
◻ 4 Ways to Declare a JavaScript Variable:
🞑 Using var
🞑 Using let
🞑 Using const
🞑 Using nothing
◻ Variables defined with let cannot be
Redeclared.

◻ Variables defined with let must be Declared


before use.

let x = "John Doe";


let x = 0;
// SyntaxError: 'x' has already been
declared
◻ Variables defined with const cannot be
Redeclared.

◻ Variables defined with const cannot be


Reassigned.

const PI = 3.141592653589793;
PI = 3.14; // This will give an error
PI = PI + 10; // This will also give an
error
◻ If you want a general rule: always
declare variables with const.

◻ If you think the value of the variable can


change, use let.
◻ <html> <body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are
variables.</p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.write("The value of z is: " + z);
</script>
</body> </html>
◻ <html> <body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are
variables.</p>
<script>
let x = 5;
let y = 6;
let z = x + y;
document.write("The value of z is: " + z);
</script>
</body> </html>
◻ <html> <body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body> </html>
◻ <html> <body>
<h1>JavaScript Variables</h1>
<p>In this example, price1, price2, and total are
variables.</p>
<p id="demo"></p>
<script>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>
</body> </html>
◻ If you want a general rule: always declare
variables with const.
◻ If you think the value of the variable can
change, use let.
◻ The two variables price1 and price2 are
declared with the const keyword.
🞑 These are constant values and cannot be
changed.
◻ The variable total is declared with
the let keyword.
🞑 This is a value that can be changed.
Javascript operators
◻ Types of JavaScript Operators
🞑 Arithmetic Operators
🞑 Assignment Operators
🞑 Comparison Operators
🞑 Logical Operators
🞑 Conditional Operators
🞑 Type Operators
Conditional statements
◻ Use if to specify a block of code to be
executed, if a specified condition is true
◻ Use else to specify a block of code to be
executed, if the same condition is false
◻ Use else if to specify a new condition to
test, if the first condition is false
◻ Use switch to specify many alternative
blocks of code to be executed
<html>
<body>
<script>
const time = 22;
let greeting;
if (time < 10) {
greeting = "Good morning";
} elseif (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.write(greeting);
</script> </body></html>
Switch case
<script>
let day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
document.write("Today is " + day);
</script>
Strings
◻ A JavaScript string is zero or more
characters written inside quotes.
◻ let text = "John Doe";
String Length:
<html>
<body>

<script>
let text =
"ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write(text.length);
</script>

</body>
</html>
JavaScript Strings as Objects:

◻ But strings can also be defined as objects with the


keyword new:
<html>
<body>
<script>
// x is a string
let x = "John";
// y is an object
let y = new String("John");
document.write(typeof x + "<br>" + typeof y);
</script>
</body>
</html>
Javascript functions:
◻ A JavaScript function is a block of code designed to perform a
particular task.

<html>
<body>

<script>
function myFunction(p1, p2) {
return p1 * p2;
}
document.write(myFunction(4, 3));
</script>

</body>
</html>
Extracting String Parts:
◻ There are 3 methods for extracting a
part of a string:
slice(start, end)
substring(start, end)
substr(start, length)
<html>
<body>

<script>
let text = "Apple,Banana,Kiwi";
let part = text.slice(7,13);
document.write(part);
</script>

</body>
</html>
<html>
<body>

<script>
let text = "Apple,Banana,Kiwi";
let part = text.slice(7);
document.write(part);
</script>

</body>
</html>
<html>
<body>

<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12);
document.write(part);
</script>

</body>
</html>
<html>
<body>

<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12,-6);
document.write(part);
</script>

</body>
</html>
Replacing String Content:
let text = "Please visit Microsoft";
let newText =
text.replace("Microsoft", "W3School
s");

text =
text.replaceAll("cats","dogs");
◻ let text1 = "Hello World!";
let text2 = text1.toUpperCase();

◻ let text1 = "Hello World!"; //


String
let text2 = text1.toLowerCase(); //
text2 is text1 converted to lower
JavaScript String concat()
<html>
<body>

<script>
let text1 = "Hello";
let text2 = "World!";
let text3 = text1.concat(" ",text2);
document.write(text3);
</script>

</body>
</html>
Adding JavaScript Strings
◻ let text1 = "John";
let text2 = "Doe";
let text3 = text1 + " " + text2;

◻ let text1 = "What a very ";


text1 = text1+ "nice day";
Arrays:
◻ An array is a special variable, which can
hold more than one value:
const cars =
["Saab", "Volvo", "BMW"];
<html>
<body>
<h2>JavaScript Arrays</h2>

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.write(cars);
</script>

</body>
</html>
Assigning values using index number:

<html>
<body>
<h2>JavaScript Arrays</h2>
<script>
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
document.write(cars);
</script>

</body>
</html>
Using the JavaScript Keyword new:

◻ <html>
<body>

<script>
const cars = new Array("Saab", "Volvo",
"BMW");
document.write(cars);
</script>

</body>
</html>
Accessing Array Elements:
<html>
<body>

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.write(cars[0]);
</script>

</body>
</html>
Changing an Array Element:
<html>
<body>

<script>
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.write(cars);
</script>

</body>
</html>
Arrays are Objects:
◻ Objects use names to access its "members".

<html>
<body>

<script>
const person = {firstName:"John", lastName:"Doe",
age:46};
document.write(person.firstName);
</script>

</body>
</html>
Array Properties and Methods:

◻ The length Property

<html>
<body>

<script>
const fruits = ["Banana", "Orange", "Apple",
"Mango"];
document.write(fruits.length);
</script>

</body>
</html>
Accessing the Last Array Element:

<html>
<body>

<script>
var fruits = ["Banana", "Orange", "Apple",
"Mango"];
document.write(fruits[fruits.length-1]);
</script>

</body>
</html>
Looping Array Elements:
<html>
<body>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
document.write(text);
</script>
</body>
</html>
Types of JS arrays:
◻ One dimensional
◻ Multi-dimensional
🞑 A multidimensional array is accessed in the
same way as a one-dimensional array. The
only difference is that we have to use two
or more indices to access the elements of
the multidimensional array in javascript.
<html><body>
<script>
let x=[
[20,10,10],[10,10,10],[30,30,30]
];
document.write(x[2][2]);
</script>
</body></head>
JavaScript Scope
◻ Scope determines the accessibility
(visibility) of variables.

◻ JavaScript has 2 types of scope:


🞑 Function scope
🞑 Global scope
◻ Local Scope
Variables declared within a JavaScript function,
become LOCAL to the function.
◻ Local variables have Function Scope:

They can only be accessed from within the


function.
◻ Variables defined inside a function are not

accessible (visible) from outside the function.


◻ Variables declared with var, let and const are

quite similar when declared inside a function.


They all have Function Scope.
<html><body>
<h1> JS local variables</h1>
<script>
myFunction();
function myFunction() {
let carName = "Volvo"; //function scope
document.write(typeof carName + " " +
carName);
}
document.write(carName);
</script><body></html>
◻ Global scope
A variable declared outside a function,
becomes GLOBAL.
A global variable has Global Scope:All scripts
and functions on a web page can access it.
◻ Variables declared Globally (outside any function)
have Global Scope.
◻ Global variables can be accessed from anywhere
in a JavaScript program.
◻ Variables declared with var, let and const are
quite similar when declared outside a block.
They all have Global Scope:
<html><body>
<h2>Js global Scope</h2>
<script>
let carName = "Volvo"; //global scope
myFunction();
function myFunction() {
document.write(carName +"<br>");
}
document.write(carName);
</script></body></html>
JavaScript Events
◻ HTML events are "things" that happen
to HTML elements.
◻ When JavaScript is used in HTML pages,
JavaScript can "react" on these events.
HTML Events
◻ An HTML event can be something the
browser does, or something a user does.
◻ Here are some examples of HTML
events:
🞑 An HTML web page has finished loading
🞑 An HTML input field was changed
🞑 An HTML button was clicked
◻ <element event='some JavaScript'>
Events and description
◻ onclick:The user clicks an HTML
element
◻ onmouseover: The user moves the
mouse over an HTML element
◻ onmouseout:The user moves the
mouse away from an HTML element
◻ onkeydown:The user pushes a
keyboard key
<html>
<body>

<button
onclick="document.write(Date())">
The time is?</button>
</body>
</html>
Adding two numbers:
<html><body>
<h2>JavaScript HTML Events</h2>
<button onclick="this.innerHTML=num3">Sum
is</button>
<script>
let num1 = prompt("Please enter your num1");
let num2 = prompt("Please enter your num2");
let num3 = parseInt(num1) + parseInt(num2);
</script>
</body></html>
DOM HTML
◻ The HTML DOM is an Object Model for
HTML. It defines:
🞑 HTML elements as objects
🞑 Properties for all HTML elements
🞑 Methods for all HTML elements
🞑 Events for all HTML elements
◻ The HTML DOM is an API (Programming
Interface) for JavaScript:
🞑 JavaScript can add/change/remove HTML
elements
🞑 JavaScript can add/change/remove HTML
attributes
🞑 JavaScript can add/change/remove CSS styles
🞑 JavaScript can react to HTML events
🞑 JavaScript can add/change/remove HTML
events
Tree structure of DOM HTML model:
◻ When you want to access HTML elements with
JavaScript, you have to find the elements first.

◻ There are a couple of ways to do this:


I. Finding HTML elements by id
II. Finding HTML elements by tag name
III. Finding HTML elements by class name
IV. Finding HTML elements by CSS selectors
Finding HTML Element by Id

<body>
<p id="intro">Finding HTML Elements by Id</p>
<p id="demo"></p>
<script>
const element =
document.getElementById("intro");
document.getElementById("demo").innerHTML =
"The text from the intro paragraph is: " +
element.innerHTML;
</script>
</body>
Finding HTML Element by tag name

<body>
<p>Finding HTML Elements by Tag Name.</p>
<p>This example demonstrates .</p>
<p id="demo"></p>
<script>
const element =
document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 'The
text in first paragraph (index 0) is: ' +
element[0].innerHTML;
</script>
</body>
Finding HTML Elements by Class
Name

<body>
<p class="intro">Hello World!</p>
<p class="intro">This example demonstrates the
method.</p>
<p id="demo"></p>
<script>
const x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML =
'The first paragraph (index 0) with class="intro" is:
' + x[0].innerHTML;
</script> </body>
Finding HTML Elements by CSS
Selectors

<body>
<p class="intro">Hello World!.</p>
<p class="intro">This example demonstrates the
<b>querySelectorAll</b> method.</p>
<p id="demo"></p>
<script>
const x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML =
'The first paragraph (index 0) with class="intro"
is: ' + x[0].innerHTML;
</script></body>
DHTML
◻ DHTML stands for Dynamic Hypertext
Markup language i.e., Dynamic
HTML.
◻ Dynamic HTML is not a markup or
programming language but it is a term
that combines the features of various
web development technologies for
creating the web pages dynamic and
interactive.
Components of Dynamic HTML

◻ HTML 4.0
◻ CSS
◻ JavaScript
◻ DOM.
◻ HTML 4.0
HTML is a client-side markup language, which is
a core component of the DHTML. It defines the
structure of a web page with various defined
basic elements or tags.

◻ CSS
CSS stands for Cascading Style Sheet, which
allows the web users or developers for
controlling the style and layout of the HTML
elements on the web pages.
◻ JavaScript
JavaScript is a scripting language which is done on a
client-side. The various browser supports JavaScript
technology. DHTML uses the JavaScript technology for
accessing, controlling, and manipulating the HTML
elements. The statements in JavaScript are the
commands which tell the browser for performing an
action.
◻ DOM

DOM is the document object model. It is a w3c


standard, which is a standard interface of programming
for HTML. It is mainly used for defining the objects and
properties of all elements in HTML.
PHP

Hypertext pre-
processor
Introduction:
◻ PHP is an acronym for "PHP: Hypertext
Preprocessor"
◻ PHP is a widely-used, open source
scripting language
◻ PHP scripts are executed on the server
◻ PHP is free to download and use
What is a PHP File?
◻ PHP files can contain text, HTML, CSS,
JavaScript, and PHP code
◻ PHP code is executed on the server, and
the result is returned to the browser as
plain HTML
◻ PHP files have extension ".php"
Why PHP ?
◻ PHP runs on various platforms (Windows,
Linux, Unix, Mac OS X, etc.)
◻ PHP is compatible with almost all servers
used today (Apache, IIS, etc.)
◻ PHP supports a wide range of databases
◻ PHP is easy to learn and runs efficiently
on the server side
PHP Syntax
◻ <!DOCTYPE html>
<html>
<body>
<h1>My first PHP page</h1>
<?php
echo "Hello World!";
?>
</body>
</html>
Declaring variables:
◻ <?php
$txt = "Hello world!";
$x = 5;
$y = 10.5;

echo $txt;
echo "<br>";
echo $x;
echo "<br>";
echo $y;
?>
Decisions :
◻ <?php
$t = 25;

if ($t < "10") {


echo "Have a good morning!";
} elseif ($t < "20") {
echo "Have a good day!";
} else {
echo "Have a good night!";
}
?>
Switch case:
◻ <?php
$favcolor = "red";

switch ($favcolor) {
case "red":
echo "Your favorite color is red!";
break;
case "blue":
echo "Your favorite color is blue!";
break;
case "green":
echo "Your favorite color is green!";
break;
default:
echo "Your favorite color is neither red, blue, nor
green!";
}
?>
Loops:
◻ while - loops through a block of code as
long as the specified condition is true
◻ do...while - loops through a block of
code once, and then repeats the loop as
long as the specified condition is true
◻ for - loops through a block of code a
specified number of times
◻ foreach - loops through a block of code
for each element in an array
◻ The foreach loop works only on arrays, and is
used to loop through each key/value pair in an
array.
◻ <?php
$colors
= array("red", "green", "blue", "yellow");

foreach ($colors as $value) {


echo "$value <br>";
}
?>
Functions:
<!DOCTYPE html>
<html>
<body>

<?php
function writeMsg() {
echo "Hello world!";
}
writeMsg();
?>

</body>
</html>
Functions with arguments:
◻ <?php
function familyName($fname, $year) {
echo "$fname Refsnes. Born in $year
<br>";
}

familyName("Hege", "1975");
familyName("Stale", "1978");
familyName("Kai Jim", "1983");
?>
Strings:
◻ The PHP strlen() function returns the length
of a string.
🞑 <?php
echo strlen("Hello world!"); // outputs 12
?>
◻ The PHP str_word_count() function counts
the number of words in a string.
🞑 <?php
echo str_word_count("Hello world!"); //
outputs 2
?>
◻ The PHP strrev() function reverses a string.
🞑 <?php
echo strrev("Hello world!"); // outputs !
dlrow olleH
?>
◻ The PHP str_replace() function replaces some
characters with some other characters in a
string.
🞑 <?php
echo str_replace("world", "Dolly", "Hello
world!"); // outputs Hello Dolly!
?>
Arrays:
◻ In PHP, there are three types of arrays:
Indexed arrays - Arrays with a numeric
index
Associative arrays - Arrays with named
keys
Multidimensional arrays - Arrays
containing one or more arrays
Indexed arrays:
◻ $cars = array("Volvo", "BMW", "Toyota");
◻ $cars[0] = "Volvo";
$cars[1] = "BMW";
$cars[2] = "Toyota";
◻ <?php
$cars
= array("Volvo", "BMW", "Toyota");
echo "I like " . $cars[0] . ", " .
$cars[1] . " and " . $cars[2] . ".";
?>
Loop Through an Indexed Array

<?php
$cars = array("Volvo", "BMW",
"Toyota");
$arrlength = count($cars);
for($x = 0; $x < $arrlength; $x++) {
echo $cars[$x];
echo "<br>";
}
?>
Associative array:
◻ Associative arrays are arrays that use
named keys that you assign to them.
<?php
$age
= array("Peter"=>"35", "Ben"=>"37
", "Joe"=>"43");
echo "Peter is " . $age['Peter'] . "
years old.";
?>
Loop Through an Associative Array

<?php
$age = array("Peter"=>"35",
"Ben"=>"37", "Joe"=>"43");
foreach($age as $x => $x_value) {
echo "Key=" . $x . ", Value=" .
$x_value;
echo "<br>";
}
?>
Multidimensional array:
◻ <?php
$cars = array (
array("Volvo",22,18),
array("BMW",15,13),
array("Saab",5,2),
array("Land Rover",17,15)
);

echo $cars[0][0].": In stock: ".$cars[0][1].", sold: ".$cars[0]


[2].".<br>";
echo $cars[1][0].": In stock: ".$cars[1][1].", sold: ".$cars[1]
[2].".<br>";
echo $cars[2][0].": In stock: ".$cars[2][1].", sold: ".$cars[2]
[2].".<br>";
echo $cars[3][0].": In stock: ".$cars[3][1].", sold: ".$cars[3]
[2].".<br>";
?>
Loop Through a multidimensional array

<?php
$cars = array
(array("Volvo",22,18),array("BMW",15,13),array("Saa
b",5,2),
array("Land Rover",17,15) );
for ($row = 0; $row < 4; $row++) {
echo "<p><b>Row number $row</b></p>";
echo "<ul>";
for ($col = 0; $col < 3; $col++) {
echo "<li>".$cars[$row][$col]."</li>";
}
echo "</ul>";
}
DBMS
Database management system
Data:
◻ Data is a collection of a distinct small
unit of information. It can be used in a
variety of forms like text, numbers,
media, bytes, etc. it can be stored in
pieces of paper or electronic memory,
etc.
Database:
◻ A database is an organized collection of data,
so that it can be easily accessed and managed.
◻ We can organize data into tables, rows,
columns, and index it to make it easier to find
relevant information.
◻ The main purpose of the database is to
operate a large amount of information by
storing, retrieving, and managing data.
◻ There are many databases available like
MySQL, Sybase, Oracle, MongoDB, Informix,
PostgreSQL, SQL Server, etc.
What is RDBMS?
◻ RDBMS stands for Relational Database
Management System.
◻ All modern database management
systems like SQL, MS SQL Server, IBM
DB2, ORACLE, My-SQL, and Microsoft
Access are based on RDBMS.
How it works.....
◻ Data is represented in terms of tuples
(rows) in RDBMS.
◻ A relational database is the most
commonly used database. It contains
several tables, and each table has its
primary key.
◻ Due to a collection of an organized set of
tables, data can be accessed easily in
RDBMS.
What is table/Relation?
◻ Everything in a relational database is
stored in the form of relations. The
RDBMS database uses tables to store
data. A table is a collection of related
data entries and contains rows and
columns to store data.
Properties of a Relation:
◻ Each relation has a unique name by which it is
identified in the database.
◻ Relation does not contain duplicate tuples.
◻ The tuples of a relation have no specific order.
◻ All attributes in a relation are atomic, i.e., each
cell of a relation contains exactly one value.
◻ A table is the simplest example of data stored
in RDBMS.
What is a row or record?
◻ A row of a table is also called a record or tuple. It
contains the specific information of each entry in
the table. It is a horizontal entity in the table.
Properties of a row:
◻ No two tuples are identical to each other in all

their entries.
◻ All tuples of the relation have the same format

and the same number of entries.


◻ The order of the tuple is irrelevant. They are

identified by their content, not by their position.


What is a column/attribute?
◻ A column is a vertical entity in the table
which contains all information associated
with a specific field in a table. For
example, "name" is a column in the
above table which contains all
information about a student's name.
Properties of an Attribute:
◻ Every attribute of a relation must have a
name.
◻ Null values are permitted for the
attributes.
◻ Default values can be specified for an
attribute automatically inserted if no other
value is specified for an attribute.
◻ Attributes that uniquely identify each tuple
of a relation are the primary key.
What is data item/Cells?
◻ The smallest unit of data in the table is
the individual data item. It is stored at
the intersection of tuples and attributes.
Properties of data items:
◻ Data items are atomic.
◻ The data items for an attribute should be
drawn from the same domain.
Degree:
◻ The total number of attributes that
comprise a relation is known as the
degree of the table.

You might also like