WEB DEVELOPMENT

Internet
 The global system of interconnected computer networks with billions of
computers and other electronic devices.
 Internet use the protocol suite TCP/IP (Transmission Control Protocol/Internet
Protocol) to communicate with these devices.
 Internet can also be defined as a network of networks that consists of private,
public, academic, business, and government networks of local to global scope.
 These networks are connected by a broad array of electronic, wireless, and optical
networking technologies.
 Internet provides number of services
 World Wide Web (WWW)
 Email
 Video conferencing
 File sharing
 VoIP
 Online banking
 The Internet has no centralized governance, each connected network sets its own
policies.

World Wide Web (WWW)

 The World Wide Web is an information space where documents and other
resources are identified by Uniform Resource Locators (URLs), interlinked by
hypertext links, and accessible via the Internet.
 Sir Tim Berners-Lee, a British computer scientist has introduced the three
fundamental technologies that form the foundation of the WWW.
 HTML: Hyper Text Markup Language. The markup (formatting)
language for the web.
 URI: Uniform Resource Identifier. A unique address used to identify
each resource on the web.
 HTTP: Hypertext Transfer Protocol. A set of rules for the
communication of linked resources across the web.
 The Web is known as a client-server system.
 The Web servers (Server side) provide the resources or the services on the web
and web browsers (Client side) request information or services from web servers.
Web page
 A web page is a document written in Hyper Text Markup Language (HTML) that
is accessible through the Internet using a web browser.
 A web page can be accessed by a Uniform Resource Locator (URL) address and
may contain text, graphics, and hyperlinks to other web pages and files.
 A hyperlink is an element in an HTML document that directs to another HTML
document or a resource on the web.
 A web page can either be static or dynamic.
 Static web pages deliver the same prebuilt content each time the page is loaded,
while the content of dynamic web pages can be changed by a web application
each time they are accessed.
Website
 A collection of related web pages containing images, videos or other digital
assets.
 A website is hosted on at least one web server and accessible via a network such
as the internet.
Types of websites
 Informational websites
Designed to provide a customized and branded resource for its members,
potential and active customers or any other interested parties.
Ex. [Link], [Link]
 News websites
Designed to provide an online source of news.
Ex. Yahoo! News, [Link]
 Personal websites
Designed by an individual to provide content of a personal nature rather
than content about a company, organization or institution.
Ex. [Link], [Link]

 Commercial websites
Designed to provide an online space for buying and selling of products or
services directly through the website.
Ex. [Link], [Link]

 Educational websites
Designed to provide an online space for collection of materials and
resources for learners and educators.
Ex. [Link], [Link]
  Community websites
Designed to provide an online platform for people to build social networks
or social relations.
Ex. [Link], [Link]

 Web portal
Designed to bring information from various sources, like emails, online
forums and search engines, together in a uniform way.
Ex. [Link], [Link]

Structure of a Website
 A website is a collection of related web pages.
Basic pages of a website
 Home Page
 The first page on a website that is being accessed by a visitor.
 It is the initial or the main web page of a website.
 Used to provide a summary of the content or the information the website
offers.
 Used to facilitate navigation to other pages on the site by providing links.

 About
 Used to provide a description or an overview of website owners.

 Contact page
 Used to provide contact information for visitors to contact website owners.

 Products/Services
 Used to provide information about all of the products and services website
offers for its visitors.

Perspectives on website structure

End user’s perspective
 A web site should be attractive, useful, easy to navigate and including appropriate
current information.
Developer’s perspective
 A web site should be easily modifiable and scalable.
Basic structure of a web page
 A web page often organizes its content into multiple sections, Header, Footer, etc.
  While every web page does not share the exact structure (layout), most web pages
incorporate some or all of these basic sections.

Hyper Text Markup Language (HTML)

 HTML is a markup language that allows users to create static web pages.
 Hypertext is structured text that uses logical links (hyperlinks) to link pages in
text documents.
 HTML is used to describe the appearance and the layout of a web page.
 HTML contains markup elements which are used to design a HTML page.
 An element is a text instruction that tells the web browser how to display the
structure and the content of a page.
 These elements are represented as HTML tags.
HTML Tags
 HTML tags are keywords enclosed in angle brackets.
 They often come in pairs as an opening tag (Start tag) and a closing tag (End
tag).
  General format of a tag:
<Tag name> Tag content </Tag name>

Closing tag
Opening tag
(Starts with a forward slash)
 Tags can have Attributes.

<Tag name attribute = “Value”> Tag content </Tag name>

 Attributes provide additional information about an element (tag) to the browser.

 They are always specified in the opening tag.
Ex.
<h1 align = “Center”> Hello World! </h1>

 Not all HTML tags come in pairs.

Ex. <br> tag has no closing tag.
 Tags can be embedded or nested.
Ex. <head>
<title> Page Title </title>
</head>
 Html tags are not case sensitive.
Basic structure of a HTML Document
 HTML documents start with the <html> tag and end with </html> tag.
 Html documents are divided into two main sections.
1. Head section
2. Body section
 The Head section starts with <head> tag and ends with </head>.
 The Body section starts with <body> tag and ends with </body>.
Ex.
The Head section
 The head section provides general information (metadata) about the document,
including its title and links to its scripts and style sheets.
 These information are not displayed in the browser.

Tags used in the Head section

Titles
 The <title> tag used to define the document’s title.
Ex. <head>
<title> My first HTML </title>
</head>
Meta-information
 The <meta> tag can be used to:
 Offer keywords for search engines
Ex. <head>
<meta name = "keywords" content="HTML, CSS, php,
JavaScript" />
</head>

 Offer a description of a webpage for search engines

Ex. <head>
<meta name="description" content="Free tutorials of internet
technologies for dummies!" />
</head>

 Define the author of a web page

Ex. <head>
<meta name="author" content="DBVICTS">
</head>

 Automatically refresh the current web page after a given time interval in
seconds.
Ex. <head>
<meta http-equiv="refresh" content="60">
</head>
  Setting the Viewport for different devices
Ex. <head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
</head>

 <meta> tag has no closing/end tag. i.e. an Empty tag.

The Body section
 Contains the document's actual content.
 It supports many types of content to be included such as text, hyper-links, images,
videos, lists, tables, forms etc.
Tags used in the Body section
Body
 The <body> tag defines the document's body.
 Supports following attributes.
 bgcolor - Specifies the background color of a document
 text - Specifies the color of the text in a document
Ex.
<body bgcolor = "red" text = "white">
</body>
 background - Specifies a background image for a document
Ex.
<body background= "D:\Pictures\funny_cat.jpg">
</body>
 These attributes are deprecated in HTML5. CSS is used to apply styles to a web
page instead.
Comments
 <!—comment --> tag is used to insert comments in the document.
 Comments are not displayed in the browsers.
Ex. <body>
<!-- This is the body section-- >
</body>
Headings
 Html tags <h1> to <h6> are used to define Headings in a html document.
 <h1> defines the largest heading and <h6> defines the smallest heading.
Ex. <body>
<h1>Heading 1</h1>
 <h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
 “align” attribute can be used with heading tags with values: left, right, center and
justify.
Ex.
<body>
<h1 align = “center”> This heading is center aligned.</h1>
</body>
Paragraphs
 The <p> tag used to represents a paragraph text in a HTML document.
 The paragraph element acts as a container for the text between the opening tag <p>
and the closing tag </p>.
 HTML automatically leaves a blank line before and after a paragraph.
Ex.
<body>
<p> Hypertext Markup Language (HTML) is the standard markup
language for creating web pages and web applications. </p>
</body>
Line Breaks
 The <br> tag is used to insert a single line break.
 <br> tag has no closing/end tag. i.e. an Empty tag.
Ex.
<body>
This is the first line. <br>
This is the second line.
</body>

Text formatting
Bold text
 <b> is used to display text in boldface.
Ex.
<body>
<b>This text is bold</b>
</body>
 Italic text
 <i> is used to display text in italics.
Ex.
<body>
<i>This text is italic</i>
</body>

Underlined text
 <u> is used to underline text in a document.
Ex.
<body>
<u>This text is underlined</u>
</body>
Fonts
 The <font> tag specifies the font face, font size, and color of text.
Ex.
<body>
<font face="Arial" color="green" size = “5”>Hello World!</font>
</body>
Hyperlinks
 The <a> tag defines a hyperlink, a link from one page to another.
 The “href” attribute of <a> indicates the URL of the destination.
Ex.
<body>
<a href=”[Link] Devi Balika Vidyalaya website
</a>
</body>
 The “target” specifies where to open the linked document.
Ex.
<a href=”[Link] target = "_blank">Open Devi Balika
Vidyalaya website in a new tab</a>

 Hyperlinks can be created to:

 Different pages of a same site (Local link)
 Pages of different sites (External link)
 Different sections of the same page (Internal link / Bookmark)
  Creating a Bookmark
Ex.
<h1 id="article1"> Article 1 </h1>
<h1> Article 2 </h1>
<h1> Article 3 </h1>
<h1> Article 4 </h1>
<a href="# article1">Go to Article 1</a>
Images
 <img> tag is used to insert pictures to a web page.
 The <img> tag has two required attributes: src and alt.
 “src” attribute contains the location of the image.
 “alt” attribute specifies text to identify the image if for some reason user cannot
view it.

Ex.
<body>
<img src=" D:\Pictures\funny_cat.jpg " alt="A Funny Cat"
</body>

 “width and height” attributes specify the width and height values in pixels to
display the image.
Ex.
<body>
<img src = "D:\Pictures\funny_cat.jpg" alt="A Funny Cat" width="256"
height="192" />
</body>
 “align” attribute can be used to right, left or wrap text around the image.
 The <img> tag is an empty tag.

Tables
 <table> tag can be used to insert a table in to a HTML document.
 A table can be divided into rows with <tr> tag.
 Each row can be divided into data cells with <td> tag.
 Headings in a table can be defined with <th> tag.
 The text in <th> elements are bold and centered by default.
 Attribute “border” specifies the size of border thickness.
 Ex. A table with one column.
<table border="1">
<tr>
<td>A</td>
</tr>
</table>

A table with two rows and three columns.

<table border="1">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</table>

A table with headers

Student No Student Name Class

001 Peter Pan 10C
002 Jack Sparrow 10C

<table border="1">
<tr>
<th>Student No</th>
<th>Student Name</th>
<th>Class</th>
</tr>
<tr>
<td>001</td>
<td>Peter Pan</td>
<td>10C</td>
</tr>
<tr>
<td>002</td>
<td> Jack Sparrow </td>
 <td>10C</td>
</tr>
</table>

Cell merging
 Attributes “rowspan” and “colspan” can be used to merge cells in a HTML
table.
 The colspan attribute defines the number of columns a cell should span (or
merge) horizontally.
 The rowspan attribute specifies the number of rows a cell should span
vertically.

Ex. Original Table

First Cell Second Cell

Third Cell Fourth Cell

After Colspan
Merged

Third Cell Fourth Cell

<table border=1 >

<tr>
<td colspan=”2” >
Merged
</td>
</tr>
<tr>
<td>
Third Cell
 </td>
<td>
Forth Cell
</td>
</tr>
</table>

After Rowspan
First Cell

Third Cell Merged

<table border=1 >

<tr>
<td>
First Cell
</td>

<td rowspan="2" >

Merged
</td>
</tr>
<tr>
<td>
Third Cell
</td>
</tr>
</table>

 The <caption> tag is used to define a table caption.

 Must be inserted immediately after the <table> tag.
Ex.
<table>
<caption>Grade 13 ICT results-Term I</caption>
<tr>
<th>Student Name</th>
<th>Result</th>
</tr>
Lists
 HTML provides three ways for organizing information as lists.
1. Unordered list
2. Ordered list
3. Definition list

1. Unordered list
 An unordered list is used when the order of the list items does not matter.
 It starts with the <ul> tag and ends with </ul>.
 Each item is listed between <li> and </li> tags.
 The “type” attribute of <ul> tag can be used to specify the preferred bullet
type (disc, circle, square).
Ex. <ul type = “circle”>

 Default type is Disc.

Ex.
<p>My shopping list:</p>
My shopping list:
<ul>
 Chocolate
<li> Chocolate </li>
 Biscuit
<li>Biscuit</li>  Milk
<li>Milk</li>
</ul>

2. Ordered list
 Used to group a set of related items, in a specific order.
 Created using the <ol> tag, with each list item starts with the <li> tag.
 The “type” attribute can be used to specify the preferred numbering format
o Numbering (1)
o Uppercase letters (A)
o Lowercase letters (a)
o Uppercase roman (I)
o Lowercase roman (i)
Ex. <ol type = “A”>

 Default type is Numbering.

 Ex.
<p>Steps to create an html document:</p>
<ol>
<li> Open a Text Editor (Ex. Notepad)</li>
<li>Save your document as [Link]</li>
</ol>

Steps to create an html document:

1. Open a Text Editor (Ex. Notepad)

2. Save your document as [Link]

 The “start” attribute of <ol> tag can be used to specify the starting point of
numbering.
Ex. To continue an ordered list from 3 with in a new paragraph
<ol start = “3”>

3. Definition list
 A definition list is used to create a list of items with a description of each
item.
 Tags used in definition list
<dl> − Defines as a definition list
<dt> − List term/ item
<dd>− Term definition
Ex. <dl>
<dt>Internet</dt>
<dd>Network of networks </dd>
<dt>WWW</dt>
<dd> The part of the Internet that contains web pages </dd>
<dt>HTML</dt>
<dd>A markup language for creating web pages</dd>
</dl>
 Internet
Network of networks
WWW
The part of the Internet that contains web pages
HTML
A markup language for creating web pages

Nested Lists
 A nested list is a list within a list.
 Different types of list can be used to create a nested list.
Ex.
<h3>Most popular beverages:</h3>
<ol>
<li>Tea
<ul>
<li>Black Tea</li>
<li>Green Tea</li>
</ul> </li>
<li>Coffee</li>
<li>Milk</li>
</ol>

Most popular beverages:

1. Tea
 Black Tea
 Green Tea
2. Coffee
3. Milk
Multimedia objects
 Using <a> tag
Ex. Insert an audio file
<a href=" Songs\song.mp3"> An Audio Clip </a><br />
Insert a video file
<a href="Videos\video.mp4"> A Video Clip </a><br/>

 <embed> tag can also be used to insert multimedia objects like audio, video and
animation to a web page.
 The multimedia file will be automatically embedded to the page when it is getting loaded.
 Attributes of <embed>
Src - URL of the object to be embedded
Width - Width of the object in pixels
Height - Height of the object in pixels

Ex. Insert an audio file

<embed src = "Songs\song.mp3" width = "100" height = "60">
</embed>
Forms
 HTML form is an area to contain form elements or controls in a web page.
 It is one of the main points of interaction between a visitor and a web site.
 It allows web site developers to collect user input and process upon it.
 A form is defined with <form> tag.
Syntax:
<form action = " URL of Server-side script " method = "GET/POST">
form elements
</form>
Form attributes
 Action
Defines the location (URL) of the program in the server that receives the
information from the form and processes it.
 Method
Specifies how the information is sent from the browser to the server (The most
frequently used HTTP methods are GET and POST).
Form elements
 Input element
 Used to create input fields and interactive controls for web-based forms.
 <input> is an empty tag nested within the <form> tag.
Input element Attributes:
 Type
Defines the way the <input> element behaves. It allows specifying various
types of user input fields such as text, radio buttons and checkboxes.

 Name
Defines a name to identify the data collected by the element.
 Value
Defines input element’s current/initial value.
Available types for input element
 Text - A single-line text field
Ex.
Student name: <input type="text" name="studentName">

 Password - A single-line text field whose value is obscured/masked.

Ex.
Password: <input type = "password" name = "password">

 Radio - A radio button, allows a single value to be selected out of multiple

choices.
Ex.
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female

 Value for name attribute should be the same for each radio button.
 Checked attribute is used to specify a pre-selected value to be loaded.
  Checkbox - A check box, allows more than one option to be selected.
Ex.
Sports you like:
<input type="checkbox" name="sports" value="cricket"> Cricket
<input type="checkbox" name="sports" value="rugby"> Rugby
<input type="checkbox" name="sports" value="basketball"> Basketball

 Submit - A button that submits the form to web server.

Ex.
<input type="submit" value="Submit">

 Data will be sent/submitted to server side script mentioned in the form’s

“action” attribute.

 Reset - A button that resets the contents of the form to default values.
Ex.
<input type="reset">

 Select element
 Used to define a drop-down list in an HTML form.
 The <option> element is used to define a pre-defined option that can be selected.
Ex.
Country:
<select name="country">
<option value="SriLanka"> Sri Lanka </option>
<option value="India" > India </option>
<option value="Japan"> Japan </option>
</select>

 Selected attribute is used to specify a pre-defined value to be loaded.

<option value="India" Selected > India </option>
 Textarea element
 Used to define a multi-line text input field.
Ex.
Comment:<br>
<textarea name="comment" rows="10" cols="30"> Leave a
reply</textarea>

 Row and cols attributes indicate number of rows and columns of text area
box.

 Fieldset element
 Used to group related elements in a form.
 <legend> element can be used to define a caption for the grouped elements.
Ex.
<fieldset>
<legend>Log in:</legend>
User Name: <input type="text">
Password: <input type="password">
</fieldset>
CSS - Cascading Style Sheets
 CSS is a design language used to simplify the process of web page presentation.
 CSS defines how to display HTML elements.
Advantages of using CSS:
 Separation of style from the content
CSS removes the style formatting from the HTML document.
 Easy maintenance
One place of change for the entire site.
 More formatting options than HTML
Wider range of style attributes
 Multiple presentation
Allows the same markup page to be presented in different viewing
styles or on different devices (printing, mobile devices)
 Faster rendering
Pages load faster as CSS optimizes the source code.

The basic CSS syntax

 The Basic CSS syntax consists of 3 parts: a selector, a property, and a value
Selector { Property : Value;}

Preferred value for the property

The HTML element style applies to

Type of attribute of the HTML tag

Ex.
Selector – Paragraph tag
Property – Color
Value - Blue
p { color : blue; }

 The property and value pair is known as the declaration.

 One or more declarations can be included for the same selector inside the curly brackets
(declaration block) separated by semicolons.
Ex.
h1 { font-family : Arial;
color : red;
}
CSS selectors
 CSS selectors are used to choose the HTML element to apply styles based on:
 Element (the name of the element)
 Id
 Class
Element Selector
 Selects the element based on the element name.
Ex.
h2 { text-align: center;}
 in this case, all <h2> elements in the HTML document will be selected
and center-aligned.
Id Selector
 Selects a specific element by using the “id” attribute of an HTML element.
 Only the element having the matching “id” will be formatted according to the defined
style.
 An id selector is preceded by the hash character (“#”).
Ex.
#center { text-align: center;}

<h1 id = "center"> This h1 heading will be center-aligned.</h1>

<h1> This h1 will not be center-aligned.</h1>

 Id selector is used to identify one specific element and should be unique within an HTML
document.
Class Selector
 Selects a specific element by using the “class” attribute of an HTML element.
 All the elements having the matching “class” will be formatted.
 A class selector is preceded by a full stop (“.”)
Ex.
.text {
color: blue;
text-align: center;
}
<h1 class = "text"> this h1 heading will be blue and center-aligned.</h1>
<p class = "text"> this paragraph will be blue and center-aligned.</p>

 A class can be used to identify more than one element.

 Can be used to applying different styles to the same element.

 Ex.
[Link] {
color: blue;
text-align: center;
}

<p class = "text"> this paragraph will be blue and center-aligned.</p>

<p> this paragraph will NOT be blue and center-aligned.</p>

 Can apply more than one class selectors to a given element.

Ex.
.color {color: blue; }
.align {text-align: center;}

<p class = "color align">

This para will be styled by the classes color and align </p>
Grouping Selectors
 When there are elements with the same style definition, selectors can be grouped
together.
Ex.
h1, h2, p {
color: blue;
text-align: center;
}

Applying CSS to an HTML document

 There are three ways of inserting a style sheet.
1. In-line method
2. Internal method
3. External method

1. In-line method
 Uses attribute “style” of an HTML element to insert styles.
 Styles will be applied to a specific element only.
 The style attribute can contain any CSS property.
Ex.
<p style = " font-family: Arial; color: red;"> This in-line CSS will make
this specific paragraph in Arial and red.</p>
2. Internal method
 Uses <style> element to insert styles to an HTML document.
 Internal styles are defined within the Head section.
 Styles will be applied to all the elements in the document.
 Can be used when a whole page has a unique style.
Ex.
<head>
<style>
body {
background-color: #808000;
}

h1 {
font-family: Times New Roman;
color: maroon;
}
</style>
</head>
 in this case, defined styles will be applied to all the <h1> headings in the
HTML document.

3. External method
 Links an external style sheet to an HTML document.
 An external style sheet is a separate file with .css extension.
 Uses HTML <link> element to insert the external style sheet.
 The link is placed within the Head section of the document.
Ex.
<head>
<link rel= "stylesheet" type = "text/css"
href = "[Link]" >
</head>

[Link]

body {

background-color: #808000;

h1 {

font-family: Times New Roman;

color: maroon;

}
  Attributes of <link>
 rel - Specifies the relationship between the document and
the linked resource.
 type - Specifies the MIME (Multipurpose Internet Mail
Extensions) type
 href - Specifies the URL of the resource.
 media – An optional attribute to Specify the device the
document will be displayed on. (Screen, Print)

 External styles can be used for the entire, multiple-page website.

CSS rule of precedence
 The latter the style appears, the more priority it has. Therefore locally applied styles
will override any other styles applied before.
Ex.
<html>
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
<style>
h1 { color: red;} [Link]
</style> h1 { color: blue;}

</head>
<body>
<h1 style= "color: green;">This heading will be GREEN in color. </h1>
</body>
</html>
Appearance formatting
Background
 Colors
 Colors can be applied to an HTML document by using CSS properties.
 color : set a text color
Ex. p { color : blue;}

 background-color : set a background color

Ex. body { background-color: blue; }
 CSS uses color values to specify a specific color.
  The value can be represented as a name, a RGB value or a 6 digit
Hexadecimal code.
Ex.
h1 { color : blue;}
h1 { color : rgb(0,0,255);} A blue colored heading
h1 { color : #0000FF;}

 Images
 The background-image property can be used to insert an image to the page
background.
Ex. body { background-image: url ("[Link]");}
Text formatting
 Text Alignment
 The text-align property is used to set the alignment of a text to left, right,
centered, or justified.
Ex. h1 { text-align: center;}

 Text Decoration
 The text-decoration property is used to set or remove decorations from
text.
 It can be used to put underline, over line, line-through a text or to remove
text decorations.
Ex.
h1 { text-decoration: underline;}
a { text-decoration: none; }
Fonts
 CSS font properties are used to define the font family, boldness, size, and the style of a
text.

 font-family
 Sets the text of an element with a preferred font face.
Ex. h1 { font-family: Times New Roman;}
h1 { font-family: Arial;}
 font-style
 Makes a font either italic or oblique.
Ex. h1 { font- style: italic;}
 font-weight
 Used to increase or decrease how bold or light a font appears.
 Possible values are normal, bold, lighter or a numeric weight like 100, 200
or 300.
Ex. h1 { font- weight: bold;}
 h1 { font- weight: 900;}
 font-size
 Used to increase or decrease the size of a font.
 Can set the size in pixels or in %.
Ex. h1 { font- size: 20px;}
h1 { font- size: 200%;}
 Font
 Can be used to set all the font properties at once.
 Syntax:
Selector {font: font-style font-weight font-size font-family}

Ex. h1 {font: italic bold 20px Arial;}

Links
 CSS can be used to control different properties of a hyperlink (state, color, background-
color and text-decoration).

 State of a hyperlink
1. a:link - Indicates unvisited hyperlinks.
2. a :visited - Indicates visited hyperlinks
3. a :hover - Indicates a hyperlink with user's mouse pointer over it.
4. a :active - Indicates a hyperlink on which the user is currently clicking.

Ex.
a:link {color: blue;}
a:visited {color: red;}
a:hover {color: green;}
a:active {color: yellow;}
 Text-decoration
Ex.
a:link { text-decoration: none;}
Underlines of links has been removed.
a:hover {text-decoration: underline;}
Underlines will appear when user hovers over it.
Lists
 CSS properties can be used to control the appearance of HTML lists.

 list-style-type
 Used to control the appearance of the marker of the list items.
 Possible values:
For unordered lists – none, disc, circle, square
 For ordered lists – decimal, lower-alpha, upper-alpha, lower-roman,
upper- roman
Ex.
ul { list-style-type: square;}
ol{ list-style-type: upper-alpha;}
 list-style-image
 Use to specify an image for the marker
Ex.
ul { list-style-image: url(‘[Link]’);}
ol { list-style-image: url(‘[Link]’);}
.
Tables
 CSS can be used to improve the HTML table appearance.

 Border
 Use to specify table border styles.
Ex.
table, th, td {
border-width: 5px;
border-style: solid;
border-color: black;
}
OR
table, th, td { border: 1px solid black;}
 Possible vales for border-style: none, solid, dotted, dashed
 Border-collapse property is used to collapse borders (table border, table-
heading border and table-data border) into a single border.
Ex.
table {border-collapse: collapse;}
 Width and height of table cells can be set using CSS properties width and
height.
Ex.
th { height: 20px;}
Sets height of the table heading row to 20px.
table { width: 100px;}
Sets width of the table to 100px.
Comments
 Comments are used to improve the readability of the code.
 Comments are ignored by browsers.
 A CSS comment can be placed between /* */ notation.
 Ex.
/* This is a comment */
/* Comments
can be
multi lines */

Characteristics of a dynamic web page

 Displays different content on the same page layout depending on pre-defined
conditions.
Ex. Facebook displays different contents to each individual depending on their
preferences, friends, etc.
Youtube displays different video suggestions to each individuals.
 Two types of dynamic web pages:
1. Client-side dynamic web page
 Created using client-side scripting.
 Changes the content in response to an action within that web
page, such as a mouse or a keyboard action.
 Content is generated on the user's computer (client-side)
rather than the server.
Ex. Javascript

2. Server-side dynamic web page

 Created using server-side scripting.
 Changes the content when a web page is loaded or visited.
 Content is generated on the server.
Ex. PHP
PHP (PHP Hypertext Preprocessor)
 PHP is a server-side scripting language, for making dynamic and interactive Web
pages.
 It allows web developers to create dynamic content that interacts with databases.
 PHP scripts are executed on the server.
 A PHP page contains PHP elements embedded in HTML.
 The default file extension for PHP files is ".php".
 All PHP keywords, built-in functions and classes are NOT case sensitive but user
defined variables are case sensitive.
Basic PHP Syntax
 PHP code can be placed inside one of the three special markup tags.
1. <?php PHP code ?>
2. <? PHP code ?>
3. <script language = "php"> PHP code </script>
  PHP statements end with a semicolon (;).
 A PHP script can be placed anywhere in the document.
Ex.
<html>
<body>
<h1> Welcome to PHP </h1>
<?php
echo "Hello World! ";
?>
</body>
</html>

PHP Comments
 PHP comments are used to improve the readability of the code.
 It can either be single line or multi line.
Ex.
<?php
# A single line comment
// Another way to write single line comment

/* A PHP
Multi line
Comment */
?>
PHP Variables
 Variables are used to store values such as numeric values and character strings in a PHP
script.
 An identifier is used to a represent a variable.
 Identifier naming Conventions:
 All identifiers in PHP start with a $ sign.
 Must start with a letter or the underscore character (_).
 Cannot start with a number.
 Can only contain alpha-numeric characters and underscores (A-z, 0-9, and _).
Ex. Characters such as ` ~ ! @ # $ % ^ & * - ( ) + = [ ] { } : ; ‘ “ < > ? . , / | \ are
not allowed.
 Cannot contain spaces.
 Case sensitive.
Ex. $var and $Var are two different variables.
  Examples of valid identifiers
$firstname, $FirstName, $FIRSTNAME, $First_Name, $_ FirstName

 Examples of invalid identifiers

$First Name, $1stName, $First-Name

 The assignment operator (=) is used to assign a value to a variable.

Ex.
<?php
// Declaring variables
$word = "PHP!";
$number = 10;
$average = 99.99;
?>
 The value of a variable is the value of its most recent assignment.
Variable Scope
 Scope is the range of availability a variable has to the program in which it is declared or
it is the part of the script where the variable can be accessed.
 PHP variable scopes:
 Local variables
 A variable declared within a function is local to that function.
 Can only be accessed inside the scope of the function it’s declared.

Ex. <?php
function testScope()
{
// Local Variable of function testScope()
$var = 1;
// Accessing $var inside the function
echo "var = $var";
echo “<br>”;
}
// Calling Function testScope()
testScope();

// Accessing $var outside the function(This will generate an

error)
echo "var = $var";
echo "<br>"; Output:
?>
var = 1

var =

PHP Notice: Undefined variable

  Global variables
 A variable declared outside a function.
 Accessible from any part of the program.
Ex. <?php
// Declaring a Global variable
$var = 1;
function testScope()
{
// Accessing a Global variable within a function
//(Use keyword: global)
global $var;
echo "var = $var"; Output:
echo "<br>";
} var = 1
testScope(); var = 1
echo "var = $var";
?>
 Static
 When a function terminates (completes its execution), all of its
variables loose current values.
 A Static variable retains its value when the function terminates.
 Static variables have a local scope.
Ex.
<?php
<?php
//Count with a Static variable
//Count with a non-static variable
function counter()
function counter()
{
{
//Declaring a Staic variable
$counter = 0;
static $counter = 0;
$counter = $counter + 1;
$counter = $counter + 1;
echo $counter . “<br/>”;
echo $counter . “<br/>”;
}
}
counter();
counter();
counter();
counter();
counter();
counter();
?>
?>
Output:
Output:
1
1
1
2
1
3
PHP Data Types
 The values assigned to a PHP variable may be of different data types.
 PHP supports following data types:
1. Integers
 Whole numbers, without a decimal point.
 Can be specified as decimal, hexadecimal, octal or binary.
 Can be either positive or negative.
Ex. $Decimal_num = 123;
$Hexa_num = 0x1A;
$Octal_num = 0123;
$Binary_num = 0b1111;
$Negative_num = -123;

2. Doubles
 Floating-point numbers.
Ex. $float_num = 1.23;
3. Booleans
 Represents two possible values, either true or false.
Ex. $flag = True;

4. NULL
 Represents a variable with no value.
 Has only one value: NULL.
Ex. $var = NULL;
 A variable is considered to be null if:
 It has been assigned the constant NULL.
 It has not been set to any value yet.
 It has been unset().
5. Strings
 Sequences of characters.
 Can be any text holding letters, numbers or special characters.
Ex. $String_var1 = “Hello world!” // Double quotes
$String_var1 = ‘Hello world!' // Single quotes

6. Arrays
 Used to hold more than one value at a time in a single variable.
 Formally defined as an indexed collection of data values.
 An array can be created using the built-in array() function.
 Types of arrays:
 Indexed array
An array with a numeric key.
Ex.
<?php
 // Define an indexed array
// Method 1:
$colors = array("Red", "Green", "Blue");

// Method 2:
$colors[0] = "Red";
Output: $colors[1] = "Green";
Color number 3 is Blue $colors[2] = "Blue";

Red // Accessing indexed array values

Green // Accessing individual values
echo "Color number 3 is $colors[2]";
Blue echo "<br>";

//Accessing all values

foreach( $colors as $value )
{
echo "$value <br />";
}
?>

 Associative array
An array where each key has its own specific value.
Ex.
<?php
// Define an Associative array
// Method 1:
$color_codes = array ( "Red" => "#ff0000",
"Green" => "#00ff00",
"Blue" => "#0000ff" );
// Method 2:
$color_codes [‘Red’] = "#ff0000";
$color_codes [‘Green’] = "#00ff00";
$color_codes [‘Blue’] = "#0000ff ";
Output:
// Accessing Associative array values
Color code of Red is #ff0000 // Accessing individual values
#ff0000 echo "Color code of Red is ". $color_codes[‘Red’];
#00ff00 echo "<br>";
#0000ff //Accessing all values
 foreach($color_codes as $value )
{
echo "$value <br />";
}
?>
PHP Operators
 An operator is a character that represents a certain action.

 Arithmetic operators
 Used to perform arithmetic operations on numeric data.
Ex.
Operator Description Example
+ Addition $num1 + $num2
- Subtraction $num1 - $num2
* Multiplication $num1 * $num2
/ Division $num1 / $num2
% Modulus $num1 % $num2

 Assignment operators
 Used to assign values to variables.
 Assigns values from right side operands to the left side operand.
Ex.
Operator Description Example
= Assignment $num1 = 10
+= Add AND $num1 += $num2
assignment (i.e .$num1 = $num1 +$num2)
-= Subtract AND $num1 -= $num2
assignment (i.e .$num1 = $num1 - $num2)
*= Multiply AND $num1 *= $num2
assignment (i.e .$num1 = $num1 * $num2
/= Divide AND $num1 /= $num2
assignment (i.e .$num1 = $num1 / $num2
%= Modulus AND $num1 %= $num2
assignment (i.e .$num1 = $num1 % $num2
 Comparison Operators
 Used to compare two numeric or string values.
 The final result of comparison is a Boolean value, True or False.
Ex.
Operator Description
== Equal Returns true if value 1 is equal
to value 2
=== Identical Returns true if value 1 is equal
to value 2, AND they are of the
same data type
!= or < > Not equal Returns true if value 1 is not
equal to value 2
!= = Not identical Returns true if value 1 is not
equal to value 2, OR they are
not the same data type
< Less than Returns true if value 1 is less
than value 2
> Greater than Returns true if value 1 is greater
than value 2
>= Greater than or equal Returns true if value 1 is greater
than or equal to value 2
<= Less than or equal Returns true if value 1 is less
than or equal to value 2

 Increment/Decrement operators
 Used to increment or decrement a variable's value.
Ex.

Operator Description Example

Pre-increment Increments the variable by one, ++$var
then returns
Post-increment Returns the variable, then $var++
increment by one
Pre-decrement Decrements the variable by one, --$var
then returns
Post-decrement Returns the variable, then $var--
decrement by one

Ex. <?php
echo "Pre-increment<br>";
$x = 10;
 echo ++$x."<br>"; Output:
echo $x."<br>"; Pre-increment
11
echo "Post-increment<br>";
11
$x = 10; Post-increment
10
echo $x++."<br>"; 11
echo $x."<br>";
?>

PHP Control Structures

 Control structures are used to analyze variables in order to take decisions based on
given conditions.
 Two types of Control Structures:
[Link] Statements
Allows the division of execution path based on given conditions.

 if statement
Select an execution path if the given condition is true.
Ex. <?php
If($marks >= 40)
{
echo "You have passed the test!";
}
?>

 if...else statement
Select one execution path if the given condition is true or another if
the condition is false.
Ex. <?php
If($marks >= 40)
{
echo "You have passed the test!";
}
Else
{
echo "You have failed the test!";
}
?>
 if...elseif....else statement
Select an execution path when there are more than two conditions
are available.
Ex. <?php
if ($marks >= 75)
{
echo "A";
}
elseif ($marks >= 65)
{
echo "B";
}
elseif ($marks >= 55)
{
echo "C";
}
elseif ($marks >= 40)
{
echo "S";
}
Else
{
echo "W";
}
?>

 Switch statement
Tests an expression against a series of values (cases) until it finds a
match, and executes the corresponding path of that match.
Ex. <?php

switch ($subject)
{
case "Physics":
echo "My favorite subject is Physics";
break;

case "Maths":
echo "My favorite subject is Maths";
break;

case "IT":
echo "My favorite subject is IT";
break;
 default:
echo "I like all the subjects!";
}
?>
 “Break” statement is used to prevent the code from running into
the next case automatically.
 If none of the cases matches then the “default” statement will be
executed.

2. Control Loops
 Allows execution of a code block until the specified condition is true.
 Used to automate the repetitive tasks within a program.

 While loop
Executes a code block as long as the given expression is true.
Ex. <?php
$i = 0;
while( $i < 3) Output:
{
$i++; 1
echo ("$i <br>"); 2
}
echo ("Loop stopped at i = $i" ); 3
?> Loop stopped at i = 3

 Do...while loop
 Executes the code block once and evaluates the condition
at the end.
 It executes the code block at least once, even if the
condition is false the first time.

Ex. <?php
$i = 0; Output:
do
1
{
$i++; 2
echo ("$i <br>");
3
}
while( $i < 3 ); Loop stopped at i = 3
 echo ("Loop stopped at i = $i" );
?>

 For loop
A for loop is similar to the while loop but uses a counter to
execute a code block a certain number of times.

 for (initialization; condition; increment)

Ex.
. <?php
$x = 4;
for( $i = 0; $i<=3; $i++ )
{
$x -= 1;
echo ("$i <br>");
}
echo ("At the end of the loop x = $x and i = $i" );
?> Output:

At the end of the loop x = 0 and i = 4

 Foreach loop
Used to loop through each key/value pair in an array.
Ex. <?php
$colors = array("Red", "Green", "Blue");
foreach( $colors as $value )
{
echo "$value <br />";
}
?>
PHP functions
 A function is a self-contained block of code that performs a specific task.
 Functions allow the code to be properly organized and easy to maintain.
 Reduce the repetition of code within a program.
 Make it easier to eliminate the errors.
 PHP has two types of functions:
 1. Built-in Functions
2. User-Defined Functions

1. Built-in Functions
Standard PHP functions that can directly include i.e call within a PHP
scripts to perform a specific task.

Ex.
 is_numeric() - Returns true if numeric and false if it’s not
 count() - Return the length (the number of elements) of an array
 str_word_count() - Counts the number of words in a string

2. User-Defined Functions
Functions created by the programmer to perform a specific task.
Syntax:
function functionName()
{
code to be executed;
}
Ex.
<?php
/* Defining a PHP Function */
function writeMessage()
{
echo "Welcome to PHP!";
}

/* Calling a PHP Function */

writeMessage();
?>

 A user-defined function declaration starts with the key word “function”.

 Code to be executed should be put inside { and } braces.
 The function can be executed or called by its name.
 A function can have Parameters.
 When a function is called, data (Arguments) can be passed into the
function's parameters.
Ex.
<?php
function addTwoNumbers($num1, $num2)
{
$sum = $num1 + $num2;
echo "Sum of the two numbers is : $sum";
}
 addTwoNumbers(10, 10);
?>

Methods of Sending Information to Server

 A web browser communicates with the server typically using one of the two HTTP
methods:
1. GET
2. POST

1. The GET method

 Sends the user information by appending to the page request i.e. as URL
parameters.
 The requested URL and the encoded information are separated by the “ ? ”
character.
 Data sent usually are in strings of name and value pairs separated by
ampersands (&).
Ex.
[Link]
 Since the data sent by the GET method are displayed in the URL, GET
method is not suitable for passing sensitive information such as passwords
to the server.
 The GET method is restricted to send limited amount of information.
 $_GET associative array can be used to access all the information sent
using GET method.

2. The POST method

 Sends the user information via HTTP headers (HTTP headers are an
integral part of HTTP requests and responses that transfer data between a
Web server and a browser).
 Data sent through POST method are not visible in the URL.
 The POST method does not have any restriction on data size to be sent.
 $_POST associative array can be used to access all the information sent
using POST method.
PHP with MySQL
 Programs developed combining PHP with MySQL are cross-platform (Can develop on
Windows and run on Linux).
 In order to store or access data inside a MySQL database via a PHP script first need to
connect to the MySQL database server.
 PHP offers two extensions to connect to MySQL server.
1. MySQLi (MySQL Improved)
 MySQLi Procedural
 MySQLi Object-oriented
2. PDO (PHP Data Objects) extensions

 MySQLi Procedural

Connecting to a MySQL database Server

Ex. <?php
$servername = "localhost";
$username = "root";
$password = "";
$database= "php";
// Establish a connection
// mysqli_connect() returns a MySQLi link identifier on success or FALSE
on failure.
$conn = mysqli_connect ($servername, $username, $password, $database);
// Check connection
// Identical operator (= = =) returns true if $x is equal to $y, and they are of
the same type.

if ($conn === false)

{
// Display a message with the error description and exit the script
die("Error : Connection failed: " . mysqli_connect_error());
}
echo "Successfully connected.";
 // Close connection
mysqli_close($conn);
?>

Saving data into a MySQL database

Ex. <?php
// Establish a connection
$conn = mysqli_connect ("localhost", "root", "", "php");
// Inserting a record into ‘users” table in ‘php’ database
$sql = "INSERT INTO users (User_Name, Password) VALUES
('admin',password)";
// Performs a query against the database.
If (mysqli_query($conn, $sql))
{
echo "Records inserted successfully.";
}

else
{
// Display a message with the error description
echo "ERROR: Could not be able to execute $sql”.mysqli_error($conn);
}

// Close connection
mysqli_close($conn);
?>
Saving form data into a MySQL database
Ex.

<?php
$conn = mysqli_connect("localhost", "root", "", "php");
if(isset($_POST['submit']))
{
$uname=$_POST['User_Name'];
$password=$_POST['Password'];

$sql = "INSERT INTO users (User_Name, Password)

VALUES ('$uname','$password')";

If (mysqli_query($conn, $sql))
{
echo "Records inserted successfully.";
}

else
{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($conn);
}
}
// Close connection
mysqli_close($conn);
?>
<html>
<head>
<title> Sign in Form</title>
</head>
<body>
<form method = "POST" action = "#">
User Name:<br>
<input type="text" name="User_Name"/> <br>
Password:<br>
<input type="password" name="Password"/>
<input type="submit" name="submit" value="Sign in"/>
</form>
</body>
</html>

Set form values using retrieved data

Ex. <?php
$conn = mysqli_connect("localhost", "root", "", "php");
$sql = "SELECT * FROM users where User_Name = 'Peter'";
// Runs the query and puts the resulting data into a variable
$result = mysqli_query($conn, $sql);
// Fetch a row from the result set as an array.
while ($row = mysqli_fetch_array($result))
{
// Puts each column value into a variable
$userName = $row['User_Name'];
$password = $row['Password'];
}
?>
 <html>
<body>
<form action="#" method = "POST">
User Name:<br>
<input type="text" name="User_Name"
value= "<?php echo $userName;?>"/><br>
Password:<br>
<input type="text" name="Password"
value= "<?php echo $password;?>"/>
</form>
</body>
</html>

 MySQLi Object-oriented

Connecting to a MySQL database Server

<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "php";
// // Establish a connection by creating a mysqli object
$conn = new mysqli($servername, $username, $password, $database);

// Check connection by accessing the connect_error property of $conn object

// -> Object operator
if ($conn->connect_error)
{
die("Connection failed: " . $conn->connect_error);
 }
echo " Successfully connected";
?>

Saving data into a MySQL database

<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "php";
// Establish a connection by creating a mysqli object
$conn = new mysqli($servername, $username, $password, $database);
// Check connection by accessing the connect_error property of $conn object
// -> Object operator
if ($conn->connect_error)
{
die("Connection failed: " . $conn->connect_error);
}
$sql = "INSERT INTO users (User_Name, Password)
VALUES ('admin',password)";
// Performs a query against the database calling query() method of $conn object
if ($conn->query($sql) === TRUE)
{
echo " Records inserted successfully";
}

else
{
echo "Error: " . $sql . "<br>" . $conn->error;
 }
//Close Connection by calling method close().
$conn->close();
?>

Publishing and maintaining web sites

Website Publishing
Website publishing is the process of uploading the original content online.
Local publishing
Locally published websites are not accessible via the internet.
 Own computer (Localhost)
By installing a web server (Ex. WAMP, XAMPP) on the local machine web
developers run webpages in a web browser without publishing them live on the
Internet.
 Intranet
 An intranet site is focused on a restricted group of people, typically the
employees or subcontractors of a company or organization.
 The intranet is not accessible via the Internet; its web server is programmed to
respond only to requests made from inside the internal network of the
organization.

Global/ Internet publishing

 Globally published websites are visible on the World Wide Web.
 Prerequisites for Website Publishing on the internet.
 Internet Connection
An Internet connection is required to connect to a remotely
located web server.
 Web Server
The actual location where the website resides on.
 Domain name
A domain name is an identification string for the website. It
is the human readable form of an IP address.

 Web service providers

 Internet Service Provider (ISP)
Provides a connection to the Internet. Every Internet user
accesses the internet through an ISP.
  Web hosting provider
Provides an infrastructure to host a website. i.e. allows
individuals and organizations to make their website accessible via
the WWW.

Steps to Publish a Website on the World Wide Web

1. Registering the domain.
A preferred domain name can be registered through a Domain Name
Registrar (an accredited organization that sells domain names to the public).

2. Renting server space.

 Web hosting providers offer numerous ways to host a website:
Ex.
 Free or paid web hosting
 Shared or dedicated web hosting
(In dedicated web hosting client leases an entire web
server not shared with anyone else to host its website.)

 Once registered to a webhost, a server address, username and

password will be received and the complete website can be
transferred to the web server.

Factors affecting performance of website

 File types and sizes
Larger file sizes are and the more files are there to load on a page,
the longer it will take to load in the browser.
Ex. Videos, music and animation files can affect the performance of a website
depending on the size of each of these files.

 Plugins and widgets

Installing more widgets and plugins in the site can take more time to
load.

 Web hosting provider

The server speed, reliability and the security are vital factors on
website's performance. A right web host plan can boost website performance.
Ex. In a shared web hosting plan the amount of disk space and bandwidth
provided by the servers get limited and the security can be breached through
other shared sites.