Web Development
2019 onwards
New syllabus
Advanced Level
Sri Lankan
1 | Page
Web Development
HTML
• HTML stands for Hyper Text Markup Language
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements are represented by tags
• HTML tags label pieces of content such as "heading", "paragraph",
"table", and so on
• Browsers do not display the HTML tags, but use them to render the
content of the page
Sample of HTML
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
2 | Page
Description of HTML Structure
<Html>
……….. Defines the html document
</Html>
<Head>
……… Header information
</Head>
<Title>
………… Title bar information
</Title>
<Body>
…………. Page contents
</Body>
3 | Page
Sample Structure of HTML
Structure
Sample Structure of HTML
Structure
4 | Page
• The <h1> element defines a large heading
• The <h6> element defines a small heading
According to size
<h1> > <h2> > <h3> > <h4> > <h5> > <h6>
Break Tag
• The <br> tag inserts a single line break.
• The <br> tag is an empty tag which means that it has no end tag.
Paragraph Tag
• Paragraph tag defines a paragraph
• This tag has opening and closing tag <p>…</p>
• This tag form white space or line space before and after the
paragraph
5 | Page
Paragraph Tag and Break
Tag
6 | Page
Bold Tag
We can use <b> and <strong> tags to bold the text.
Italic Tag
• We can use <i>, <cite> and <em> tags to italic the text
7 | Page
Center Tag
• It centralizes the text
Underline Tag
• It used to underline the text
8 | Page
Strike Tag
Mark Tag
9 | Page
Subscript Tag
Superscript Tag
10 | P a g e
Attributes
• All HTML elements can have attributes
• Attributes adds additional information about the tag
Example:
11 | P a g e
Opening and Closing Tag order
<b>
<u>
<i>
Welcome
</i>
</u>
</b>
Alignment
• Align tag is used to align the paragraph, tables, images and
objects
<p align=”right”> welcome </p>
• We can use right, left, center and justify to align the
paragraph.
12 | P a g e
Horizontal Rule
• The <hr> tag defines a thematic break in an HTML page (e.g. a
shift of topic).
• The <hr> element is most often displayed as a horizontal rule
that is used to separate content (or define a change) in an
HTML page.
13 | P a g e
Moving Text
• <marquee> tag gives the movement to the text
• Right to left is the default movement
<marquee direction=”right”> hello </marquee>
• We can use right, left, up and down for the movement
• Scrollamount is another attribute defines the speed of the
moving text
Example:
<marquee scrollamount=”20”> welcome </marquee>
List
• List can be categorized into 3 types
1. Ordered list
2. Unordered list
3. Definition list
❖ Ordered List
• An ordered list starts with the <ol> tag.
• Each list item starts with the <li> tag.
• Numberings will appear default
Type Description
type="1" The list items will be numbered
with numbers (default)
type="A" The list items will be numbered
with uppercase letters
type="a" The list items will be numbered
with lowercase letters
14 | P a g e
type="I" The list items will be numbered
with uppercase roman numbers
type="i" The list items will be numbered
with lowercase roman numbers
15 | P a g e
• We can change the Pattern
• When we have an idea to start the order from “F”
16 | P a g e
▪ Nested Ordered List
• Unordered List
▪ An unordered list starts with the <ul> tag. Each list item
starts with the <li> tag. Unordered list takes disc type as
the default
▪ We can use square, disc and circle
Type Description
disc Sets the list item marker to a
bullet (default)
circle Sets the list item marker to a
circle
square Sets the list item marker to a
square
17 | P a g e
• Nested Unordered List
18 | P a g e
Definition 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:
Table
• An HTML table is defined with the <table> tag.
• Each table row is defined with the <tr> tag.
• A table header is defined with the <th> tag. By default, table
headings are bold and centered.
• A table data/cell is defined with the <td> tag.
19 | P a g e
How to create
this table?
20 | P a g e
• When we give border as attribute
How to add title to table?
• <caption> tag defines the title
21 | P a g e
Colspan
How to make this below table?
Rowspan
How to make this below table?
22 | P a g e
Image
• In HTML, images are defined with the <img> tag.
• The <img> tag is empty, it contains attributes only, and does
not have a closing tag.
• The src attribute specifies the URL (web address) of the
image:
• The alt attribute provides an alternate text for an image, if the
user for some reason cannot view it (because of slow
connection, an error in the src attribute, or if the user uses a
screen reader).
Hyperlink
Hyperlink is an element in an html document that links to either
another portion of the document or to another document
altogether
Example :
23 | P a g e
❖ Anchor tag
Example 2:
<a href=”digital.pdf”>open </a>
❖ We can connect any type of file or images in hyperlink.
Example 3:
<a href =”web7.html” target=”_blank”> link </a>
24 | P a g e
(when we click the “link” displayed on the web page, “web7.html”
will open in another web page)
❖ Image Hyperlink
<a href =”web1.html”> <img src =”rose.jpg”> </a>
(rose.jpg image will display on the web page, when click the
image “web1.html” webpage will
open in the same web site)
Forms
❖ Text box
Further we can use some attributes
1.
25 | P a g e
2.
Size =Maximum numbers of characters to be displayed in the
textbox
3.
“Value” gives an idea to the user
26 | P a g e
4.
Maxlength = maximum numbers of characters can be input in the
textbox
❖ Password
27 | P a g e
❖ Submit Button
❖ Reset Button
28 | P a g e
How to
create this
form?
29 | P a g e
❖ Radio Button
30 | P a g e
❖ Check Box
❖ Form Image
31 | P a g e
❖ Text Area
❖ Dropdown List
32 | P a g e
Sound & Audio
Video
33 | P a g e
Text Elements
• Html elements defines the html document
• Html elements have opening and closing tags
HTML Entity Characters
• Less than - <
• Greater than - >
• Ampersand - &
• Copyright - ©
• Registered trade mark - ®
34 | P a g e
Frame
35 | P a g e
HTML Comments
• Comments are not displayed by the browser, but they can
help document your HTML source code.
• You can use comments to explain your code, which can help
you when you edit the source code at a later date. This is
especially useful if you have a lot of code.
Pre-Formatted Text
36 | P a g e
CSS
• cascading style sheet
• CSS is a language that describes the style of an HTML
document.
• CSS describes how HTML elements should be displayed.
37 | P a g e
p
{
font-family:arial;
}
h1
{
Color:pink; Font-size:12px;
}
❖ CSS can be classified into 3 types
• Internal style sheet
• External style sheet
• Inline style sheet
Internal Style Sheet
• By using the style attribute in HTML elements
• An internal CSS is defined in the <head> section of an HTML page, within a
<style> element
• Example
38 | P a g e
External Style Sheet
• Each HTML page must include a reference to the external
style sheet file inside the <link> element, inside the head
section.
• An external style sheet can be written in any text editor, and
must be saved with a .css extension.
• The external.css file should not contain any HTML tags
39 | P a g e
40 | P a g e
Inline Style Sheet
• An inline style may be used to apply a unique style for a single
element.
• To use inline styles, add the style attribute to the relevant
element.
• The style attribute can contain any CSS property.
41 | P a g e
Background Color
Body
{
Background-color:red;
}
Body
{
Background-color:#00FF00;
}
Font Family
p
{
font-family: "Times New Roman", Times, serif;
}
p
{
font-family: arial;
}
42 | P a g e
Margin
43 | P a g e
p
{ NOTE:
border: 1px solid red; 1px solid red;
margin-left: 100px; solid- style
} red- color
Borders
44 | P a g e
Output:
Group Selector
• It will be better to group the selectors, to minimize the code.
• To group selectors, separate each selector with a comma.
h1, h2, p
{
text-align: center;
color: red;
}
45 | P a g e
Text Decorations
h1
{
text-decoration: overline;
}
h2
{
text-decoration: line-through;
}
h3
{
text-decoration: underline;
}
h4
{
text-decoration: underline overline;
}
h4
{
text-decoration-color: blue;
}
46 | P a g e
47 | P a g e
h1
{
text-decoration: underline overline dotted red;
}
Background Image
body
{
background-image: url("paper.gif");
background-color: #cccccc;
}
List
The list-style-type property specifies the type of list item marker.
ul
{
list-style-type:circle;
}
ul
{
list-style-type:square;
}
ol
{
list-style-type: upper-roman;
}
48 | P a g e
ol
{
list-style-type: lower-alpha;
}
CSS Comment
• Comments are used to explain the code, and may help when
you edit the source code at a later date.
• Comments are ignored by browsers.
• A CSS comment starts with /* and ends with */
/* This is a single-line comment */
p{
color: red;
}
Font Style
p
{
font-style: italic;
}
p
49 | P a g e
{
font-style: bold;
}
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.
▪ Example:
#para1
{
text-align: center;
color: red;
}
50 | P a g e
51 | P a g e
Class Selector
• The .class selector selects elements with a specific class attribute.
• To select elements with a specific class, write a period (.) character,
followed by the name of the class.
52 | P a g e
PHP
❖ Instructions to run PHP…
• Install Appserv
▪ AppServ is a windows program that can turn your PC into Web
Server and Database Server by installing Apache, PHP, MySQL
services on your local machine.
▪ Download link - https://www.appserv.org/en/
▪ Further Installation tips – https://www.betterhostreview.com/appserv-
faq.html
• To run a PHP file, you have to save the file with extension .php
▪ For notepad ( "C:\AppServ\www\file1.php" )
53 | P a g e
▪ If you’re running in Notepad++ ( "C:\AppServ\www\file1.php" )
• To run php type “ localhost/yourfilename.php “ on the browser Address bar as
below.
54 | P a g e
Print
1. echo with “___”
2. echo with ‘___’
3. print
For All, this will be the Output
55 | P a g e
About PHP…
• PHP - Hypertext Preprocessor
• PHP is a server-side scripting language
• PHP is a powerful tool for making dynamic and interactive
web pages.
• PHP scripts are executed on the web server
• PHP is a widely-used, open source scripting language
Note: -
I. PHP can generate dynamic page content
II. PHP can create, open, read, write, delete and close files on
the server
III. PHP can collect form data
IV. PHP can send and receive cookies
V. PHP can add, delete, modify data in your database
VI. PHP can be used to control user-access
VII. PHP can encrypt data
56 | P a g e
Request
• PHP runs on various Oss
(windows, Linux, Unix, Mac OS X)
• PHP is compatible with all servers used (Apache, IIS)
• PHP supports a wide range of databases
• PHP is easy to learn and runs efficiently on the server side
HTTP Request Methods
❖ GET
❖ POST
57 | P a g e
GET Method
• Information sent from a form with the GET-Method is visible
for everyone [all visible names and values are displayed in the
URL]
• GET has limits on the amount of information to send
• May be used for sending non-sensitive data. (password)
• GET request can be cashed
• GET request remain in the browser history
• GET request can be bookmarked
POST Method
• Information sent from a form with the POST method is
invisible to others
• POST has no limits on the amount of information to send
• POST requests are never cached
• POST request does not remain in the browser history
• POST request cannot be bookmarked
58 | P a g e
Data Types
//These are Comments
//these wont Display
in the output
59 | P a g e
• More Examples
1.
Arithmetic operations
60 | P a g e
While Loops
61 | P a g e
Do While Loops
c
62 | P a g e
For Loops
63 | P a g e
Forms
❖ METHOD 1
• Step 1
▪ Create a file named Form1.html as shown in the figure
• Step 2
▪ Then create a file named example1.php
64 | P a g e
• Step 3
▪ Open the file Form1.html browser and enter the data in
the form
65 | P a g e
❖ METHOD 2
• step 1
• Step 2
• Save and type “ localhost/yourfilename.php “ on the browser Address bar as
below.
66 | P a g e
• Step 3
▪ Enter the Details and submit it
• Step 4
▪ Output
67 | P a g e
Cookies and Sessions
Request
❖ Cookie
68 | P a g e
❖ Session
• Session ID
1.
69 | P a g e
2.
3.
70 | P a g e
Array
1.
2.
71 | P a g e
3.
4.
72 | P a g e
Connecting MySQL to PHP
1. mysql_connect()
• opens a non-persistent MySQL connection
2. mysql_close()
• closes a non-presistent MySQL connection
3. mysql_error()
• returns the error description of the MySQL operation
4. mysql_fetch_array()
• returns a row from a recordset as an associative array
5. mysql_query()
• executes a query on a MySQL database
6. mysql_select_db()
• sets the active MySQL database
7. mysql_ASSOC
• columns are returned into the array with fieldname as
the array index
8. die()
• display a message
• used to print string messages
