HTML
HTML stands for Hyper Text Markup Language which is used for creating web pages and web
applications.
Hyper Text
HyperText simply means "Text within Text." A text has a link within it, is a hypertext.
Whenever you click on a link which brings you to a new webpage, you have clicked on a
hypertext.
HyperText is a way to link two or more web pages (HTML documents) with each other.
Markup language
A markup language is a computer language that is used to apply layout and formatting
conventions to a text document.
Markup language makes text more interactive and dynamic. It can turn text into images, tables,
links, etc.
Example of a HTML program
<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>
Description of HTML Example
<!DOCTYPE>: It defines the document type or it instruct the browser about the version of HTML.
<html > :This tag informs the browser that it is an HTML document. Text between html tag describes the web
document. It is a container for all other elements of HTML except <!DOCTYPE>
<head>: It should be the first element inside the <html> element, which contains the metadata(information
about the document). It must be closed before the body tag opens.
<title>: As its name suggested, it is used to add title of that HTML page which appears at the top of the browser
window. It must be placed inside the head tag and should close immediately. (Optional)
<body> : Text between body tag describes the body content of the page that is visible to the end user. This tag
contains the main content of the HTML document.
<h1> : Text between <h1> tag describes the first level heading of the webpage.
<p> : Text between <p> tag describes the paragraph of the webpage
HTML Heading
A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to display on the
webpage.
When you place the text within the heading tags <h1>.........</h1>, it is displayed on the browser in the
bold format and size of the text depends on the number of heading.
There are six different HTML headings which are defined with the <h1> to <h6> tags, from highest
level h1 (main heading) to the least level h6 (least important heading).
h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading and h6
is used for least important.
HTML Formatting
HTML Formatting is a process of formatting text for better look and feel
These tags are used to make text bold, italicized, underlined etc
1) Bold Text ( <b> )
The HTML <b> element is a tag which display text in bold font.
If you write anything within <b>............</b> element, is shown in bold letters.
Example:
<p> <b>Write Your First Paragraph in bold text.</b></p>
2) Italic Text (<i>)
The HTML <i> tag displays the enclosed content in italic font
If you write anything within <i>............</i> element, is shown in italic letters.
Example:
<p> <i>Write Your First Paragraph in italic text.</i></p>
3) HTML Marked formatting (<mark>)
If you want to mark or highlight a text, you should write the content within
<mark>.........</mark>
Example:
<h2> I want to put a <mark> Mark</mark> on your face</h2>
4) Underlined Text
If you write anything within <u>.........</u> element, is shown in underlined text
Example:
<p> <u>Write Your First Paragraph in underlined text.</u></p>
5) Strike Text
Anything written within <strike>.......................</strike> element is displayed with
strikethrough.
It is a thin line which cross the statement
Example:
<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
Write Your First Paragraph with strikethrough
6) Monospaced Font
If you want that each letter has the same width then you should write the content
within <tt>.............</tt> element.
<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
7) Superscript Text
If you put the content within <sup>..............</sup> element, is shown in superscript;
means it is displayed half a character's height above the other characters
<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
8) Subscript Text
If you put the content within <sub>..............</sub> element, is shown in subscript ;
means it is displayed half a character's height below the other characters
<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
9) Deleted Text
Anything that puts within <del>..........</del> is displayed as deleted text
Example:
<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
Output
10) Inserted Text
The <ins> tag in HTML is used to specify a block of inserted text.
The <ins> tag is typically used to mark a range of text that has been added to the
document.
The inserted text is rendered as underlined text by the web browsers Example:
<p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>
11) Larger Text
If you want to put your font size larger than the rest of the text then put the content within
<big>.........</big>.
It increases one font size larger than the previous one
Example:
<p>Hello <big>Write the paragraph in larger font.</big></p>
12) Smaller Text
If you want to put your font size smaller than the rest of the text then put the content
within <small>.........</small>tag.
It reduces one font size than the previous one.
<p>Hello <small>Write the paragraph in smaller font.</small></p>
HTML Attributes
An attribute is used to provide extra or additional information about an tag or
element
All HTML elements can have attributes. Attributes provide additional information
about an element.
It takes two parameters : a name and a value. These define the properties of the
element and is placed inside the opening tag of the element. The name parameter
takes the name of the property we would like to assign to the element and the value
takes the properties value or extent of the property names that can be aligned over
the element.
Every name has some value that must be written within quotes
1) src Attribute
If we want to insert an image into a webpage, then we need to use the <img>
tag and the src attribute.
We will need to specify the address of the image as the attribute’s value
inside the double quote
<html>
<head>
<title>src Attribute</title>
</head>
<body>
<img src="C:/pictures ">
</body>
</html>
2) The width and height Attribute
This attribute is used to adjust the width and height of an image
<html>
<head>
<title>Width and Height</title>
</head>
<body>
<img src="C:/pictures" width="300px" height="100px" >
</body>
</html>
3) The id Attribute
This attribute is used to provide a unique identification to an element.
Situations may arise when we will need to access a particular element which
may have a similar name as the others.
In that case, we provide different ids to various elements so that they can be
uniquely accessed
html>
<head>
<title>id Attribute</title>
</head>
<body>
<p id = "ui">This is unique to this paragraph<br>
<p id = "vv">This is also unique to this paragraph
</body>
</html>
4) The style Attribute
This attribute is used to provide various CSS(Cascading Style Sheets) effects to the
HTML elements such as increasing font-size, changing font-family, coloring etc
<html>
<head>
<title>style Attribute</title>
</head>
<body>
<h2 style="font-family:Times New Roman;">Hello </h2>
<h3 style="font-size:20px;">Hello </h3>
<h2 style="color:#8CCEF9;">Hello</h2>
<h2 style="text-align:center;">Hello</h2>
</body>
</html>
OUTPUT
Hello
Hello
Hello
Hello
5) The href Attribute
This attribute is used to specify a link to any address.
This attribute is used along with <a> tag.
The link put inside the href attribute gets linked to the text displayed inside
the <a> tag.
On clicking on the text we will be redirected to the link.
By default, the link gets opened in the same tab but by using
the target attribute and setting its value to “_blank”, we will be redirected
to another tab or another window based on the browsers configuration.
<html>
<head>
<title>link Attribute</title>
</head>
<body>
<a href="[Link]
Click to open in the same tab
</a>
<a href="[Link] target="_blank">
Click to open in a different tab
</a>
</body>
</html>
OUTPUT
Click to open in the same tab Click to open in a different tab
HTML Table
• HTML table tag is used to display data in tabular form (row * column). There can be many columns in
a row.
• The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows
and <td> tag is used to create data cells
Output
Here, the border is an attribute of <table> tag and it is used to put a border across all the cells. If you do
not need a border, then you can use border = “0”.
Table Heading
• Table heading can be defined using <th> tag
• This tag will be put to replace <td> tag, which is used to represent actual data cell.
• Normally you will put your top row as table heading as shown below, otherwise you can use <th>
element in any row.
• Headings, which are defined in <th> tag are centered and bold by default
Cellpadding and Cellspacing
There are two attributes called cellpadding and cellspacing which you will use to adjust the white space
in your table cells
The cellspacing attribute defines space between table cells, while cellpadding represents the distance
between cell borders and the content within a cell.
Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a single column. Similar
way you will use rowspan if you want to merge two or more rows.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = “1”>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = “2”>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = “3”>Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Table Height and Width
➢ You can set a table width and height using width and height attributes.
➢ You can specify table width or height in terms of pixels or in terms of percentage of available screen
area
Table Header, Body, and Footer
➢ Tables can be divided into three portions – a header, a body, and a foot.
➢ The head and foot are rather similar to headers and footers in a word-processed document that
remain the same for every page, while the body is the main content holder of the table.
➢ The three elements for separating the head, body, and foot of a table are –
<thead> − to create a separate table header.
<tbody> − to indicate the main body of the table.
<tfoot> − to create a separate table footer.
/**************************************************************************\
Lists in HTML
• HTML offers three ways for specifying lists of information
• The types of lists that can be used in HTML are :
➢ ui : An unordered list. This will list items using plain bullets.
➢ oi : An ordered list. This will use different schemes of numbers to list your items.
➢ di : A definition list. This arranges your items in the same way as they are arranged in a
dictionary.
Unordered HTML List
• An unordered list starts with the “ul” tag.
• Each list item starts with the “li” tag
• The list items are marked with bullets i.e small black circles by default.
With the style attribute, different types of bullets are possible.
Example: ul style=”list-style-type:circle”> and <ul style=”list-style-type:square”>
This will output circle bullets and square bullets respevtively
HTML Ordered List
• An ordered list starts with the “ol” tag.
• Each list item starts with the “li” tag.
• The list items are marked with numbers by default.
If the ordered list has to appear A, B, C... , a, b, c... I, II, III, IV and i, ii, iii, iv etc then we follow these:
<ol type=”A”>
<ol type=”a”>
<ol type=”I”>
<ol type=”i”>
HTML Description List
• 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.
Nested List in HTML
• A nested list is a list which has a list inside a list
HTML form
HTML Form is a document which stores information of a user on a web server
using interactive controls.
An HTML form contains different kind of information such as username,
password, contact number, email id etc.
The elements used in an HTML form are check box, input box, radio buttons,
submit buttons etc.
Using these elements the information of an user is submitted on a web server.
The form tag is used to create an HTML form.
Input Element in HTML Forms
Input Elements are the most common elements which are used in HTML
forms.
Various user input fields can be created such as textfield, check box,
password field, radio button, submit button etc.
The most common input elements are listed below:
Text Field
The text field is a one line input field allowing the user to input text.
Text Field input controls are created using the “input” element with a type
attribute having value as “text”.
<!DOCTYPE html>
<html>
<h3>Example Of Text Field</h3>
<body>
<form>
Email id: <br> <input type=”text” name=”Email id”>
</form>
</body>
</html>
Password Field
Password fields are a type of text field in which the text entered is masked using asterisk
or dots for prevention of user identity from another person who is looking onto the screen
Password Field input controls are created using the “input” element with a type attribute
having value as “password”.
<!DOCTYPE html>
<html>
<h3>Example of Password Field</h3>
<body>
<form>
Password: <input type=”password” name=”user-pwd” >
</form>
</body>
</html>
Text area
Text Area is a multiple line text input control which allows user to provide a
description or text in multiple lines.
A Text Area input control is created using the “textarea” element.
<!DOCTYPE html>
<html>
<h3>Example of a Text Area Box</h3>
<body>
<form>
Description: <textarea rows=”5” cols=”50” name=”Description”>
</form>
</body>
</html>
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 using the “input” element with a type attribute
having value as “radio”.
<!DOCTYPE html>
<html>
<h3>Example of Radio Buttons</h3>
<body>
<form>
SELECT GENDER
<br>
<input type=”radio” name=”gender” id=”male”> Male <br>
<input type=”radio” name=”gender” id=”female”> Female <br>
</form>
</body>
</html>
Checkboxes
Checkboxes are used to let the user select one or more options from a pre-defined set of
options.
Checkbox input controls are created using the “input” element with a type attribute
having value as “checkbox”.
<!DOCTYPE html>
<html>
<h3>Example of HTML Checkboxes</h3>
<body>
<form>
<b>SELECT SUBJECTS</b>
<br>
<input type=”checkbox” name=”subject” id=”maths”> Maths
<input type=”checkbox” name=”subject” id=”science”> Science
<input type=”checkbox” name=”subject” id=”english”> English
</form>
</body>
</html>
Drop down list
Drop down lists re used to allow users to select one or more than one option from a
pull-down list of options.
It is created using two elements which are “select” and “option”.
List items are defined within the select element.
<!DOCTYPE html>
<html>
<h3>Example of a Select Box</h3>
<body>
<form>
Country:<select name=”country”>
<option value=”India”>India</option>
<option value=”Sri Lanka”>Sri Lanka</option>
<option value=”Australia”>Australia</option>
</select>
</form>
</body>
</html>
Reset And Submit Button
The submit Button allows the user to send the form data to the web server.
The Reset Button is used to reset the form data and use the default values
<!DOCTYPE html>
<html>
<h3>Example of a Submit And Reset Button</h3>
<body>
<form>
Username: <input type=”text” name=”username” >
<input type=”submit” value=”Submit”>
<input type=”reset” value=”Reset”>
</form>
</body>
</html>
File select / File Upload boxes in HTML Forms :
File select boxes are used to allow the user to select a local file and send it as an attachment
to the web server.
It is similar to a text box with a button which allows the user to browse for a file
.Instead of browsing for the file, the path and the name of the file can also be written.
File select boxes are created using the “input” element with a type attribute having value as
“file”.
<!DOCTYPE html>
<html>
<h3>Example of a File Select Box</3>
<body>
<form>
Upload: <input type="file" name="upload" id="fileselect">
</form>
</body>
</html>
Attributes Used in HTML Forms
The Action Attribute :
The action to be performed after the submission of the form is decided by the action
attribute.
Generally, the form data is sent to a webpage on the web server after the user clicks
on the submit button.
<!DOCTYPE html>
<html>
<h3>Example of a Submit And Reset Button</h3>
<body>
<form action="[Link]" method="post" id="users">
<label for="username">Username:</label>
<input type="text" name="username" id="Username">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
If you click the submit button, the form data would be sent to a page called [Link]
Target Attribute in HTML Forms
The Target attribute is used to specify whether the submitted result will open in the
current window, a new tab or on a new frame.
The default value used is “self” which results in the form submission in the same
window.
For making the form result open in a new browser tab, the value should be set to
“blank”
<!DOCTYPE html>
<html>
<body>
<form action="/[Link]" target="_blank">
Username:<br>
<input type="text" name="username">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
After clicking on the submit button, the result will open in a new browser tab.
Name Attribute in Html Forms
The name attribute is required for each input field.
If the name attribute is not specified inan input field then the data of that field would
not be sent at all.
<!DOCTYPE html>
<html>
<body>
<form action="[Link]" target="_blank">
Username:<br>
<input type="text">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
In the above code, after clicking the submit button, the form data will be sent to a page
called /[Link].
The data sent would not include the username input field data since the name attribute is
omitted
Method Attribute
It is used to specify the HTTP method used to send data while submitting the form.
There are two kinds of HTTP Methods, which are GET and POST.
The GET Method –
<!DOCTYPE html>
<html>
<body>
<form action="/[Link]" target="_blank" method="GET">
Username:<br>
<input type="text" name="username">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
In the GET method, after the submission of the form, the form values
will be visible in the address bar of the new browser tab
In the post method, after the submission of the form, the form values will not be visible in
the address bar of the new browser tab as it was visible in the GET method.
CSS (Cascaded Style Sheets)
CSS stands for Cascading Style Sheets.
It is a style sheet language which is used to describe the look and formatting of a
document written in markup language.
It provides an additional feature to HTML.
It is generally used with HTML to change the style of web pages and user interfaces.
Before CSS, tags like font, color, background style, element alignments, border and
size had to be repeated on every web page.
This was a very long process. For example: If you are developing a large website
where fonts and color information are added on every single page, it will be become a
long and expensive process
Adding CSS to HTML
CSS is added to HTML pages to format the document according to information in the
style sheet.
There are three ways to insert CSS in HTML documents.
1. Inline CSS
2. Internal CSS
3. External CSS
1) Inline CSS
Inline CSS is used to apply CSS on a single line or element.
2) Internal CSS
Internal CSS is used to apply CSS on a single document or page.
It can affect all the elements of the page. It is written inside the style tag within head section
of html.
For example:
3) External CSS
External CSS is used to apply CSS on multiple pages or all pages. Here, we write all the CSS
code in a css file. Its extension must be .css for example [Link].
For example:
p
{
color:blue
}
You need to link this [Link] file to your html pages like this:
<link rel="stylesheet" type="text/css" href="[Link]">
The link tag must be used inside head section of html
For demonstration of applications of CSS, internal CSS is used
CSS Background
CSS background property is used to define the background effects on element. There are 5
CSS background properties that affects the HTML elements:
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
1) CSS background-color
The background-color property is used to specify the background color of the element.
<!DOCTYPE html>
<html>
<head>
<style>
h2,p{
background-color: red;
}
</style>
</head>
<body>
<h2>My first CSS page.</h2>
<p>Hello Javatpoint. This is an example of CSS background-color.</p>
</body>
</html>
2) CSS background-image
The background-image property is used to set an image as a background of an
element.
By default the image covers the entire element. You can set the background image for
a page like this.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("[Link]");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
3) CSS background-repeat
By default, the background-image property repeats the background image horizontally
and vertically. Some images are repeated only horizontally or vertically.
The background looks better if the image repeated horizontally only
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("[Link]");
background-repeat: repeat-x; }
</style>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
background-repeat: repeat-y;
If background-repeat: no-repeat is given, then the image will not repeat throught the window
4) CSS background-position
The background-position property is used to define the initial position of the
background image.
By default, the background image is placed on the top-left of the webpage.
You can set the following positions:
1. center
2. top
3. bottom
4. left
5. right
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("[Link]");
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
File select / File Upload boxes in HTML Forms :
File select boxes are used to allow the user to select a local file and send it as an attachment
to the web server.
It is similar to a text box with a button which allows the user to browse for a file
.Instead of browsing for the file, the path and the name of the file can also be written.
File select boxes are created using the “input” element with a type attribute having value as
“file”.
<!DOCTYPE html>
<html>
<h3>Example of a File Select Box</3>
<body>
<form>
Upload: <input type="file" name="upload" id="fileselect">
</form>
</body>
</html>
Attributes Used in HTML Forms
The Action Attribute :
The action to be performed after the submission of the form is decided by the action
attribute.
Generally, the form data is sent to a webpage on the web server after the user clicks
on the submit button.
<!DOCTYPE html>
<html>
<h3>Example of a Submit And Reset Button</h3>
<body>
<form action="[Link]" method="post" id="users">
<label for="username">Username:</label>
<input type="text" name="username" id="Username">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
If you click the submit button, the form data would be sent to a page called [Link]
Target Attribute in HTML Forms
The Target attribute is used to specify whether the submitted result will open in the
current window, a new tab or on a new frame.
The default value used is “self” which results in the form submission in the same
window.
For making the form result open in a new browser tab, the value should be set to
“blank”
<!DOCTYPE html>
<html>
<body>
<form action="/[Link]" target="_blank">
Username:<br>
<input type="text" name="username">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
After clicking on the submit button, the result will open in a new browser tab.
Name Attribute in Html Forms
The name attribute is required for each input field.
If the name attribute is not specified inan input field then the data of that field would
not be sent at all.
<!DOCTYPE html>
<html>
<body>
<form action="[Link]" target="_blank">
Username:<br>
<input type="text">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
In the above code, after clicking the submit button, the form data will be sent to a page
called /[Link].
The data sent would not include the username input field data since the name attribute is
omitted
Method Attribute
It is used to specify the HTTP method used to send data while submitting the form.
There are two kinds of HTTP Methods, which are GET and POST.
The GET Method –
<!DOCTYPE html>
<html>
<body>
<form action="/[Link]" target="_blank" method="GET">
Username:<br>
<input type="text" name="username">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
In the GET method, after the submission of the form, the form values
will be visible in the address bar of the new browser tab
In the post method, after the submission of the form, the form values will not be visible in
the address bar of the new browser tab as it was visible in the GET method.
PHP
• PHP stands for Hypertext Preprocessor
• PHP is a server-side scripting language.
• It is an open source interpreted scripting language
• It is most popular scripting language for developing a dynamic web site
In PHP, ‘echo' is the command used for displaying
Eg:- echo “Hello World”
$a=10;
echo $a;
Array in PHP
An array is a data structure that stores one or more similar type of values in a single value.
For example if you want to store 100 numbers then instead of defining 100 variables its easy to
define an array of 100 length
Types of arrays used in PHP are:-
Numeric Array
• These arrays can store numbers, strings and any object but their index will be represented
by numbers.
• By default array index starts from zero.
• By function array function, explicitly feeding values to each array slot or using loop we
can initialise an array
• foreach is the special for loop used in PHP to traverse through array elements instead of
using normal for loop
Example
<html>
<body>
<?php
/* First method to create array. */
$numbers = array( 1, 2, 3, 4, 5);
foreach( $numbers as $value ) {
echo "Value is $value <br />";
/* Second method to create array. */
$numbers[0] = "one";
$numbers[1] = "two";
$numbers[2] = "three";
$numbers[3] = "four";
$numbers[4] = "five";
foreach( $numbers as $value ) {
echo "Value is $value <br />";
?>
</body>
</html>
Associative Arrays
• The associative arrays are very similar to numeric arrays in terms of functionality but they are
different in terms of their index.
• Associative array will have their index as string so that you can establish a strong association
between key and values.
• To store the salaries of employees in an array, a numerically indexed array would not be the
best choice. Instead, we could use the employees names as the keys in our associative array,
and the value would be their respective salary.
Example :
<html>
<body>
<?php
/* First method to associate create array. */
$salaries = array(“mohammad” => 2000, “qadir” => 1000, “zara” => 500);
echo “Salary of mohammad is “. $salaries[‘mohammad’] . “<br />”;
echo “Salary of qadir is “. $salaries[‘qadir’]. “<br />”;
echo “Salary of zara is “. $salaries[‘zara’]. “<br />”;
/* Second method to create array. */
$salaries[‘mohammad’] = “high”;
$salaries[‘qadir’] = “medium”;
$salaries[‘zara’] = “low”;
echo “Salary of mohammad is “. $salaries[‘mohammad’] . “<br />”;
echo “Salary of qadir is “. $salaries[‘qadir’]. “<br />”;
echo “Salary of zara is “. $salaries[‘zara’]. “<br />”;
?>
</body>
</html>
Multidimensional Arrays
• A multi-dimensional array each element in the main array can also be an array and each element
in the sub-array can be an array, and so on.
• Values in the multi-dimensional array are accessed using multiple index.
Example:
<html>
<body>
<?php
$marks = array(
"mohammad" => array (
"physics" => 35,
"maths" => 30,
"chemistry" => 39
),
"qadir" => array (
"physics" => 30,
"maths" => 32,
"chemistry" => 29
),
"zara" => array (
"physics" => 31,
"maths" => 22,
"chemistry" => 39
);
/* Accessing multi-dimensional array values */
echo "Marks for mohammad in physics : " ;
echo $marks['mohammad']['physics'] . "<br />";
echo "Marks for qadir in maths : ";
echo $marks['qadir']['maths'] . "<br />";
echo "Marks for zara in chemistry : " ;
echo $marks['zara']['chemistry'] . "<br />";
?>
</body>
</html>
[Link]