<?

php

echo “Develops websites incorporating multi-media

technologies” ;

?>

A/L ICT – Lesson 10

<p> So, HTML formats a webpage and CSS defines how that formatting should be displayed.
Sounds like that is all we need to make a nice website, so what is PHP for? I am glad you asked!
PHP, as you recall, stands for PHP Hypertext Preprocessor and it does what its name implies: it
preprocesses hypertext.</p>
Competency 10: Develops websites incorporating multi-media technologies (using HTML 5)

The World Wide Web (WWW) invented by Tim Berners Lee in 1989 at the European Centre for
Nuclear Research, as a major application on the Internet. It was the first application on the Internet
that caught the attention of the public and it dramatically changed how people interact with the
network of computers. Essentially, the World Wide Web (WWW) is an application that runs on top
of the Internet, which is in turn made up of a lot of interconnected computers.

According to Wikipedia, World Wide Web is an information system where documents and other
web resources are identified by Uniform Resource Locators(URLs), which may may be interlinked
by hypertext, and are accessible over the Internet. The basic element in WWW is the web page that
a user views when he or she accesses it. Some of the computers on the Internet, called web
servers, are designed to serve the web pages. These web servers are always on computers and are
ready to serve the web pages all the time. The other computers request web pages from the web
servers and are called the client computers. The WWW operates on-demand, the users request
web pages from web servers whenever they want and receive them from web servers. The WWW
has many wonderful features that people like a lot; it provides a platform for any individual who
has access to a computer and the Internet to make information available on the web at very less
cost. Formatted Text, multimedia, graphics, forms, and applets are part of WWW and are accessible
by the client computers.

WWW also serves as a platform for many innovative applications like search engines such as
Google, other popular Google applications such as e-mail, Social media such as Facebook,
multimedia streaming platforms such as YouTube, online photo sharing applications such as Flickr,
etc.

A Web page can consist of a number of web objects such as a simple text file, for example, an
HTML file, an image file such as a jpeg file, a Java applet, an audio file or a video clip. The text in a
web page called hypertext means that it is the text, which contains links to other text. Any word in
a hypertext document can be specified as a pointer to a different hypertext document where more
information pertaining to that word can be found. A web page stored in a server computer can be
accessed by issuing the address of the server, which houses the resource or object, called a
Uniform Resource Locator (URL), or a hyperlink. Each URL has three components: the first part is
the protocol, which tells the browser how to communicate with a website’s server, in order to send
and retrieve information, the second part is the domain name, which is an identifier to a specific
site, and the third part is the path, which directs the browser to a specific page on the website.
Typically a web page will consist of a base HTML file and 80 several other objects that are
embedded into the base HTML file. Each embedded object will be referred to using its URL. If a
given web page has n number of other objects referred in it, then we have a total of (n+1) objects
on the web page including the base HTML file.
Web pages requested by clients can be viewed using a special application called web browsers.
Present-day web browsers are intelligent applications and they provide many features to the users.
Google Chrome, Mozilla Firefox, Internet Explorer and Apple’s Safari are examples of popular web
browsers. Web pages are written in HyperText Markup Language (HTML). The markup facility of
the HTML enables the web browsers to render plain text, combined with additional tags, as easily
readable attractive text on the display of computers. HTML Tags are symbols that indicate a visual
element for the page, such as a heading, that governs the size, color, and other properties of the
element. Each of these web browser applications have their strengths and weaknesses, and can
render the HTML code slightly differently. It would be better that when HTML code is written it
should be tested on each of this web browser applicaton software for completeness.

Parts of a URL

Popular web browsers

How the internet works

Domain name is used to uniquely identify a web site. This makes the users remember it somewhat
easily. However, an IP address is used to uniquely identify a computer on the Internet. What the
Domain Name Server does is converting the domain name to an IP address.

Competency Level 10.2: Analyses user requirements (multimedia contents)

Analyses user requirements (multimedia contents) Objectives of a web site should be defined well
to build a great web site. It helps the designer to identify the requirements of the users, to define
them and to satisfy the user requirements. A set of well defined such objectives and their usability
solutions can increase the user experience and will keep the users regularly visit the web sites.
Some possible questions about the objectives of a website are:

1. Why do you need a new website?

2. What outcomes do you want to achieve?
3. Do you have an existing website? Are there any problems with it?
4. How do you plan to improve the user experience? E.g. Speed, content, clarity, etc
5. What do you try to boost through the new website?
6. Are you going to inform about new opportunities available in your organization?
7. Are you planning to expand your business?
You have to define some goals of having a website that helps you to achive your objectives. For
example, increasing the number of inquiries to the website or increasing online sales can be
defined as goals for an online shopping website. You may also want to identify the key audiences
that you need to appeal to in order to reach your objectives. The set of your key audiences may
include the potential customers of your business and your employees. Once you have identified
the prospective audiences, it is better to list the priorities of these audiences and doing so will help
you in planning the design layout and the navigation design of your website.

Requirements Gathering for a Website

User requirements of a web site describe the needs of users, the functionalities that the web site
should do, and the goals of a web site. The designer of the website should define, document and
describe the user requirements of the web site. These requirements would change over time and
the designers should keep the website updated based on the changing requirements. Some of the
possible requirements that may be collected before commencing the design are listed below:

 Content – Determining the content of the web site that needs to be updated on the
web site is an essential part of the design.
 Layout of the design and the navigation pattern – Determining what would appear in
the layout of the website, and how the user would be able to navigate from the
home page to other pages.
 Usability – identifying the accessibility requirements of the web site.5
 Security – identifying the security requirements of the web site.
 Loading times – determining the loading speed of a website depending on the kind
of service it provides.
 Legal – identifying the legal implications that the web site must adhere to.

Competency Level 10.3: Identifies appropriate HTML tags to design a single web page.

Identifies appropriate HTML tags to design a single web page HTML Tags are symbols that
indicate a visual element for the page, such as a heading, that governs the size, color, and other
properties of the element. When a web browser loads a web page, it renders the content of the
web page on the computer’s display according to the included HTML markup and content. A
number of tools are available to create HTML pages and for learning purposes, the notepad
application available in desktop computer is sufficient. Notepad is a lightweight application that
enables the typing of HTML pages without much trouble. Typed web pages could be saved using
the extension .html. There exist multiple sophisticated tools that enable HTML typing and there
even other online resources available to type in HTML.

A number of tools are available to create HTML pages and for learning purposes, the notepad
application available in desktop computer is sufficient. Notepad is a lightweight application that
enables the typing of HTML pages without much trouble. Typed web pages could be saved using
the extension .html. There exist multiple sophisticated tools that enable HTML typing and there
even other online resources available to type in HTML.
 Tag or Description Example Output

Heading 1
<h1>Heading 1</h1>
<h2>Heading 2</h2>
Heading 2
Headings <h3>Heading 3</h3>
<h4>Heading 4</h4>
Heading 3
<h5>Heading 5</h5> Heading 4
<h6>Heading 6</h6>
Heading 5
Heading 6

This is a paragraph.
<p>This is a paragraph.</p>
Paragraphs This is a paragraph.
<p>This is a paragraph.</p>
This is a paragraph.
<p>This is a paragraph.</p>

Horizontal Rules <h1>This is heading 1</h1>

This is heading 1
The <hr> element is used to <p>This is some text.</p>
This is some text.
separate content (or define a <hr>
change) in an HTML page
Line Breaks <p>This is<br>a This is
Use <br> if you want a line paragraph<br>with line a paragraph
break (a new line) without breaks.</p> with line breaks.
starting a new paragraph:
<b> - Bold text or <p><b>This text is This text is bold.
<strong> - Important text bold.</b></p>

<i> - Italic text or <p><i>This text is This text is italic.

<em> - Emphasized text italic.</i></p>

<mark> - Marked text <p>Do not forget to buy Do not forget to

<mark>milk</mark> buy milk today.
today.</p>
<small> - Smaller text <p><small>This is some This is some smaller text.
smaller text.</small></p>
<del> - Deleted text <p>My favorite color is My favorite color is blue red.
<del>blue</del> red.</p>
<sub> - Subscript text <p>H₂O</p> H 2O

<sup> - Superscript text <p>21^stof 21st of May

May</p>
 Comments <!-- This is a comment --> This is a paragraph
HTML comments are not
displayed in the browser, but <p>This is a paragraph.</p>
they can help document your
HTML source code <!-- Remember to add more
information here -->
<ul type="disc”>  Coffee
<li>Coffee</li>  Tea
<li>Tea</li>  Milk
<li>Milk</li>
</ul>
<ul style="list-style-type:disc;">  Coffee
<li>Coffee</li>  Tea
<li>Tea</li>  Milk
<li>Milk</li>
</ul>
<ul style="list-style-type:circle;"> o Coffee
<li>Coffee</li> o Tea
<li>Tea</li> o Milk
Unordered Lists
<li>Milk</li>
</ul>
The CSS list-style-type
<ul style="list-style-  Coffee
property is used to define
type:square;">  Tea
the style of the list item
<li>Coffee</li>  Milk
marker.
<li>Tea</li>
<li>Milk</li>
</ul>
<ul>  Coffee
<li>Coffee</li>  Tea
<li>Tea o Black tea
<ul> o Green tea
<li>Black tea</li>  Milk
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Ordered Lists <ol type="1"> 1. Coffee
<li>Coffee</li> 2. Tea
<li>Tea</li> 3. Milk
<li>Milk</li>
</ol>
<ol start="50"> 50. Coffee
<li>Coffee</li> 51. Tea
<li>Tea</li> 52. Milk
<li>Milk</li>
</ol>
 Ordered Lists <ol> 1. Coffee
<li>Coffee</li> 2. Tea
<li>Tea 1. Black tea
<ol> 2. Green tea
<li>Black tea</li> 3. Milk
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
<ol type="a"> a. Coffee
<li>Coffee</li> b. Tea
<li>Tea</li> c. Milk
<li>Milk</li>
</ol>
Description Lists <dl> Coffee
The <dl> tag defines the <dt>Coffee</dt>
description list, the <dt> tag <dd>- black hot drink</dd> - black hot drink
defines the term (name), and <dt>Milk</dt>
the <dd> tag describes each <dd>- white cold drink</dd> Milk
term. </dl>
- white cold drink

<center> tag <center>Heading 1</center> Heading 1

<div> Tag <div class="myDiv">
The <div> tag defines a <h2>This is a heading in a div element</h2>
division or a section in an <p>This is some text in a div element.</p>
HTML document. </div>

HTML Images Syntax

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The <img> tag has two required attributes:

 src - Specifies the path to the image

 alt - Specifies an alternate text for the image

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

HTML Links – Hyperlinks

You can click on a link and jump to another document.

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

 _self - Default. Opens the document in the same window/tab as it was clicked

 _blank - Opens the document in a new window or tab

 _parent - Opens the document in the parent frame

 _top - Opens the document in the full body of the window

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

HTML Links - Use an Image as a Link

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

HTML Links - Create Bookmarks

Bookmarks can be useful if a web page is very long.To create a bookmark - first create the
bookmark, then add a link to it. When the link is clicked, the page will scroll down or up to the
location with the bookmark.

<a href="#C4">Jump to Chapter 4</a>

<h2 id="C4">Chapter 4</h2>

HTML Tables

 <table> Defines a table

 <th> Defines a header cell in a table

 <tr> Defines a row in a table

 <td> Defines a cell in a table

 <caption> Defines a table caption

<table style="width:100%">
<tr>
<th>Person 1</th>
<th>Person 2</th>
Person 1 Person 2 Person 3
<th>Person 3</th>
</tr> Emil Tobias Linus
<tr>
<td>Emil</td> 16 14 10
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
<table style="width:100%">
<tr>
<th colspan="2">Name</th>
<th>Age</th> Name Age
</tr>
<tr> Jill Smith 43
<td>Jill</td>
<td>Smith</td>
Eve Jackson 57
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
<table style="width:100%">
<caption>Contact Details</caption> Contact Details
<tr> Jill
<th>Name</th> Name
<td>Jill</td> 555-1234
</tr>
<tr> Phone
555-1234
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
HTML Forms

An HTML form is used to collect user input. The user input is most often sent to a server for
processing.

Text Fields
<form>
First name: <br>
<input type="text" name="fname" value="John"><br>
Last name: <br>
<input type="text" name="lname" value="Doe">
</form>
Radio Buttons
<form>
<input type="radio" name="fav_language"
value="HTML">
HTML<br>
<input type="radio" name="fav_language" value="CSS">
CSS<br>
<input type="radio" name="fav_language"
value="JavaScript">
JavaScript
</form>
Checkboxes
<form>
<input type="checkbox" name="vehicle1" value="Bike">
I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car">
I have a car<br>
<input type="checkbox" name="vehicle3" value="Boat">
I have a boat
</form>
The select Element
Choose a car:
<select id="cars" name="cars">
<option value="volvo" selected>Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The textarea Element
<form action="/action_page.php">
<textarea name="message" rows="10" cols="30">The
cat was playing in the garden.</textarea>
</form>
Grouping Form Data with Fieldset

<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
First name: <br>
<input type="text" name="fname"
value="John"><br>
Last name: <br>
<input type="text" name="lname"
value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Password field
<form>
Password: <br>
<input type="password" name="pwd">
</form>
Submit and Reset button

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

<input type="reset" value="Clear">
Date Picker

<form>
Birthday:
<input type="date" name="birthday">
</form>
File upload

Select a file:
<input type="file" name="myfile">
Others
Ex – <input type="color">
<input type="color">
<input type="datetime-local">
<input type="email">
<input type="month">
<input type="number">
<input type="range">
<input type="reset">
<input type="search">
<input type="tel">
<input type="time">
<input type="url">
<input type="week">
Input Restrictions

checked Specifies that an input field should be pre-selected when the page loads (for
type="checkbox" or type="radio")

<input type="checkbox" name="vehicle3" value="Boat" checked>I have a boat

max Specifies the maximum value for an input field

<input type="date" id="datemax" name="datemax" max="1979-12-31">

maxlength Specifies the maximum number of character for an input field

<input type="text" id="pin" name="pin" maxlength="4" size="4">

minlength Specifies the minimum number of character for an input field

<input type="text" id="pin" name="pin" minlength="5" size="4">

min Specifies the minimum value for an input field

<input type="date" id="datemin" name="datemin" min="2000-01-02"

required Specifies that an input field is required (must be filled out)

<input type="text" id="username" name="username" required>

size Specifies the width (in characters) of an input field

<input type="text" id="pin" name="pin" size="4">

placeholder Specifies a short hint

Enter a phone number: <input type="tel" name="phone" placeholder="123-45-

678" >
HTML Multimedia

Multimedia on the web is sound, music, videos, movies, and animations.

The controls attribute adds video/audio controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set, the
page might flicker while the video loads.

The <source> element allows you to specify alternative video/audio files which the browser may
choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do not
support the <video> element.

Playing a Video

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Playing a Audio

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Playing a YouTube Video

<iframe width="420" height="345"

src="https://www.youtube.com/embed/tgbNymZ7v
qY">
</iframe>
What is CSS?

Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements, how
elements are positioned and laid out, what background images or background colors are to be
used, different displays for different devices and screen sizes, and much more!

Advantages of CSS:

 Web designers needs to use few lines of programming for every page improving site speed.

 Cascading sheet not only simplifies website development, but also simplifies the
maintenance as a change of one line of code affects the whole web site and maintenance
time.

 It is less complex therefore the effort are significantly reduced.

 CSS changes are device friendly. With people employing a batch of various range of smart
devices to access websites over the web, there’s a requirement for responsive web design.

 It has the power for re-positioning. It helps us to determine the changes within the position
of web elements who are there on the page.

 These bandwidth savings are substantial figures of insignificant tags that are indistinct from
a mess of pages.

 Easy for the user to customize the online page

 It reduces the file transfer size.

CSS can be added to HTML documents in 3 ways:

Inline - by using the style attribute inside HTML elements

Internal - by using a <style> element in the <head> section

External - by using a <link> element to link to an external CSS file

CSS Syntax
1) Inline CSS

 An inline CSS is used to apply a unique style to a single HTML element.

 An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text color of
the <p> element to red:

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

2) Internal CSS

 An internal CSS is used to define a style for a single HTML page.

 An internal CSS is defined in the <head> section of an HTML page, within
a <style> element.

The following example sets the text color of ALL the <h1> elements (on that page) to blue, and
the text color of ALL the <p> elements to red. In addition, the page will be displayed with a
"powderblue" background color:

<html>
<head>
<style>
body {background-color: powderblue;}
h1{color: blue;}
p{color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

3)External CSS

 An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each HTML page:

<head>
<link rel="stylesheet" href="styles.css">
</head>
Cascading Order

What style will be used when there is more than one style specified for an HTML element?

All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules, where
number one has the highest priority:

1. Inline style (inside an HTML element)

2. External and internal style sheets (in the head section)

3. Browser default

So, an inline style has the highest priority, and will override external and internal styles and
browser defaults.

Example

Assume that an external style sheet has the following style for the <h1> element:

h1 {
color: navy;
}

If the internal style is defined after the link to the external style sheet, the <h1> elements will be
"orange":

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>

<body>

<h1>This is a heading</h1>

</body>
</head>
CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

1) The CSS element Selector

The element selector selects HTML elements based on the element name.

Example

Here, all <p> elements on the page will be center-aligned, with a red text color:

p{
text-align: center;
color: red;
}

2) The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique
element!

To select an element with a specific id, write a hash (#) character, followed by the id of the
element.

Example

The CSS rule below will be applied to the HTML element with id="para1":

#para1 {
text-align: center;
color: red;
}
3) The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

Example

In this example all HTML elements with class="center" will be red and center-aligned:

.center {
text-align: center;
color: red;
}

4) The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

h1, h2, p {
text-align: center;
color: red;
}

5) CSS element.class Selector

Select and style every <p> element with the class "intro":

p.intro {
background-color: yellow;
}

6) Anchor Pseudo-classes

/* unvisited link */ /* visited link */

a:link { a:visited {
color: #FF0000; color: #00FF00;
} }

/* mouse over link */ /* selected link */

a:hover { a:active {
color: #FF00FF; color: #0000FF;
} }
CSS font properties are,

font-size: xx-small | x-large | xx-large | larger | smaller | 20% | 2em | 7px;

font-weight: normal | bold | bolder | lighter | <number [1,1000]>;

font-style: normal | italic | oblique;

font-variant: normal | small-caps | initial | inherit;

font-family: family-name|generic-family|initial;

Font-family property can have values like family name (times, courier, arial, etc.) and

generic-family (serif, sans-serif, cursive, fantasy, monospace)

line-height: normal|number|length|percentage|initial;

font-stretch: normal | semi-condensed | condensed | extra-condensed | ultra-condensed |

semi-expanded | expanded | extra-expanded | ultra-expanded ;

font: <font-style> <font-variant> <font-weight> <font-size/line-height> <font-family>;

CSS background property is used to define the background effects on element. There are 5 CSS
background properties that affects the HTML elements:

background-color
background-image
 background-image: url("paper1.gif");
background-repeat
background-attachment
background-position

The CSS border properties are use to specify the style, color and size of the border of an element.
The CSS border properties are given below,

border-style
border-color

border-width

border-radius
CSS Lists

list-style-type: This property is responsible for controlling the appearance and shape of the

marker.

 list-style-type:decimal;
 list-style-type:lower-alpha;
 list-style-type:lower-roman;
 list-style-type:circle;
 list-style-type:square;
 list-style-type:disc;

list-style-image: It sets an image for the marker instead of the number or a bullet point.

list-style-position: It specifies the position of the marker.

list-style: It is the shorthand property of the above properties.

CSS Table

We can apply style on HTML tables for better look and feel. There are some CSS properties that are
widely used in designing table using CSS:

border

<style>
table, th, td {
border: 1px solid black;
}
</style>
border-collapse:collapse; (single border)
padding
width
height
text-align
color
background-color
CSS Text Propeties

text-align: justify | center | right | left | initial | inherit;

color: green | #00ff00;

CSS Box Model

In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of:
margins, borders, padding, and the actual content.

The following diagram illustrates how the CSS properties of width, height, padding, border and
margin dictate that how much space an attribute will occupy on a web page.

div {

width: 300px;

border: 15px solid green;

padding: 50px;
margin: 20px;

Total element width = width + left padding + right padding + left border + right border + left

margin + right margin

HTML Div Based Layout

Using the <div> elements is the most common method of creating layouts in HTML. The <div>

(stands for division) element is used for marking out a block of content, or set of other elements
inside an HTML document. It can contain further other div elements if required.

< html> .clearfix:after {

<head> content: ".";
<title>HTML Div Layout</title> display: block;
<style> height: 0;
body { clear: both;
font: 14px Arial,sans-serif; visibility: hidden;
margin: 0px; }
} .footer {
.header { background: #acb3b9;
padding: 10px 20px; text-align: center;
background: #acb3b9; padding: 5px;
} }
.header h1 { </style>
font-size: 24px; </head>
} <body>
.container { <div class="container">
width: 100%; <div class="header">
background: #f2f2f2; <h1>New Web Site</h1>
} </div>
.nav, .section { <div class="wrapper clearfix">
float: left; <div class="nav">
padding: 20px; <ul>
min-height: 170px; <li><a href="#">Home</a></li>
box-sizing: border-box; <li><a href="#">About</a></li>
} <li><a href="#">Contact</a></li>
.nav { </ul>
width: 20%; </div>
background: #d4d7dc; <div class="section">
} <h2>Welcome to our site</h2>
.section { <p>Here you will learn how to create
width: 80%; websites...</p>
} </div>
.nav ul { </div>
list-style: none; <div class="footer">
line-height: 24px; <p>copyright&copy; mysite.com</p>
padding: 0px; </div>
} </div>
.nav ul li a { </body>
color: #333; </html>
}
Output

Using the HTML5 Structural Elements

HTML5 has introduced the new structural elements such as <header>, <footer>, <nav>,
<section>, etc. to define the different parts of a web page in a more semantic way. You can
consider these elements as a replacement for commonly used classes such
as .header, .footer, .nav, .section, etc.

The following table provides a brief overview of new HTML5 structural elements.

Tag Description

<header> Represents the header of a document or a

section.

<footer> Represents the footer of a document or a

section.

<nav> Represents a section of navigation links.

<section> Represents a section of a document, such as

header, footer etc.

<article> Represents an article, blog post, or other self-

contained unit of information.

<aside> Represents some content loosely related to

the page content.
PHP Introduction

PHP is an acronym for "PHP: Hypertext Preprocessor"

PHP is a widely-used, open source scripting language

PHP scripts are executed on the server

PHP files can contain text, HTML, CSS, JavaScript, and PHP code

PHP code is executed on the server, and the result is returned to the browser as plain HTML

PHP files have extension ".php"

What Can PHP Do?

PHP can generate dynamic page content

PHP can create, open, read, write, delete, and close files on the server

PHP can collect form data

PHP can send and receive cookies

PHP can add, delete, modify data in your database

PHP can be used to control user-access

PHP can encrypt data

PHP Variables

A variable can have a short name (like x and y) or a more descriptive name (age, carname,
total_volume).

Rules for PHP variables:

A variable starts with the $ sign, followed by the name of the variable

A variable name must start with a letter or the underscore character

A variable name cannot start with a number

A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9, and _
)

Variable names are case-sensitive ($age and $AGE are two different variables)

Examples –

<?php
$txt = "Hello world!"; //string
$x = 5; //integer
$y = 10.5; //float
?>

Output Variables

The PHP echo statement is often used to output data to the screen. The following example will
show how to output text and a variable:

<?php
$txt = "ICT"; I love ICT!
echo "I love $txt!";
?>
<?php
$txt = "ICT";
I love ICT!
echo "I love " . $txt . "!";
?>
<?php
$x = 5;
$y = 4; 9
echo $x + $y;
?>
PHP Operators

The PHP arithmetic operators are used with numeric values to perform common arithmetical
operations, such as addition, subtraction, multiplication etc.

Operator Name Example Result

+ Addition $x + $y Sum of $x and $y

- Subtraction $x - $y Difference of $x and

$y

* Multiplication $x * $y Product of $x and $y

/ Division $x / $y Quotient of $x and $y

% Modulus $x % $y Remainder of $x
divided by $y

** Exponentiation $x ** $y Result of raising $x to

the $y'th power

PHP Increment / Decrement Operators

The PHP increment operators are used to increment a variable's value. The PHP decrement
operators are used to decrement a variable's value.

Operator Name Description

++$x Pre-increment Increments $x by one, then

returns $x

$x++ Post-increment Returns $x, then increments

$x by one

--$x Pre-decrement Decrements $x by one, then

returns $x

$x-- Post-decrement Returns $x, then decrements

$x by one
PHP Comparison Operators

The PHP comparison operators are used to compare two values (number or string):

Operator Name Example Result

== Equal $x == $y Returns true if $x is

equal to $y

=== Identical $x === $y Returns true if $x is

equal to $y, and they
are of the same type

!= Not equal $x != $y Returns true if $x is

not equal to $y

<> Not equal $x <> $y Returns true if $x is

not equal to $y

!== Not identical $x !== $y Returns true if $x is

not equal to $y, or
they are not of the
same type

> Greater than $x > $y Returns true if $x is

greater than $y

< Less than $x < $y Returns true if $x is

less than $y

>= Greater than or equal

to
$x >= $y Returns true if $x is
greater than or equal
to $y

<= Less than or equal to $x <= $y Returns true if $x is

less than or equal to
$y

PHP Logical Operators

The PHP logical operators are used to combine conditional statements.

Operator Name Example Result

And And $x and $y True if both $x and $y

are true
&&

Or Or $x or $y True if either $x or $y
is true
||

xor Xor $x xor $y True if either $x or $y

is true, but not both

! Not !$x True if $x is not true

PHP Conditional Statements

Very often when you write code, you want to perform different actions for different conditions.
You can use conditional statements in your code to do this.

In PHP we have the following conditional statements:

if statement - executes some code if one condition is true

if...else statement - executes some code if a condition is true and another code if that
condition is false

if...elseif...else statement - executes different codes for more than two conditions

switch statement - selects one of many blocks of code to be executed

Syntax
if (condition) {
code to be executed if this condition is true;
} elseif (condition) {
code to be executed if first condition is false and this condition is true;
} else {
code to be executed if all conditions are false;
}

Example
Output "Have a good morning!" if the current time is less than 10, and "Have a good day!" if the
current time is less than 20. Otherwise it will output "Have a good night!":

<?php
$t = date("H");

if ($t < "10") {

echo "Have a good morning!";
} elseif ($t < "20") {
echo "Have a good day!";
} else {
echo "Have a good night!";
}
?>
The PHP switch Statement

Use the switch statement to select one of many blocks of code to be executed.

Syntax
switch (n) {
case label1:
code to be executed if n=label1;
break;
case label2:
code to be executed if n=label2;
break;
case label3:
code to be executed if n=label3;
break;
...
default:
code to be executed if n is different from all labels;
}

This is how it works: First we have a single expression n (most often a variable), that is evaluated
once. The value of the expression is then compared with the values for each case in the structure. If
there is a match, the block of code associated with that case is executed. Use break to prevent the
code from running into the next case automatically. The default statement is used if no match is
found.

<?php
$favcolor = "red";
switch ($favcolor) {
case "red":
echo "Your favorite color is red!";
break;
case "blue":
echo "Your favorite color is blue!";
break;
case "green":
echo "Your favorite color is green!";
break;
default:
echo "Your favorite color is neither red, blue, nor green!";
}
?>
PHP Loops

Often when you write code, you want the same block of code to run over and over again a certain
number of times. So, instead of adding several almost equal code-lines in a script, we can use
loops.

Loops are used to execute the same block of code again and again, as long as a certain condition
is true.

In PHP, we have the following loop types:

while - loops through a block of code as long as the specified condition is true

do...while - loops through a block of code once, and then repeats the loop as long as the
specified condition is true

for - loops through a block of code a specified number of times

foreach - loops through a block of code for each element in an array

<?php The number is: 1

$x = 1; The number is: 2
The number is: 3
while($x <= 5) { The number is: 4
echo "The number is: $x <br>"; The number is: 5
$x++;
}
?>
<?php The number is: 1
$x = 1; The number is: 2
The number is: 3
do { The number is: 4
echo "The number is: $x <br>"; The number is: 5
$x++;
} while ($x <= 5);
?>
<?php The number is: 0
for ($x = 0; $x <= 3; $x++) { The number is: 1
echo "The number is: $x <br>"; The number is: 2
} The number is: 3
?>
<?php red
$colors = array("red", "green", "blue", "yellow"); green
blue
foreach ($colors as $value) { yellow
echo "$value <br>";
}
?>
PHP Functions

Besides the built-in PHP functions, it is possible to create your own functions.

A function is a block of statements that can be used repeatedly in a program.

A function will not execute automatically when a page loads.

A function will be executed by a call to the function.

In the example below, we create a function named "writeMsg()". The opening curly brace ( { )
indicates the beginning of the function code, and the closing curly brace ( } ) indicates the end of
the function. The function outputs "Hello world!". To call the function, just write its name followed
by brackets ():

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

writeMsg(); // call the function

?>

PHP Function Arguments

Information can be passed to functions through arguments. An argument is just like a variable.

<?php Jani Refsnes.

function familyName($fname) { Hege Refsnes.
echo "$fname Refsnes.<br>"; Stale Refsnes.
} Kai Jim Refsnes.
Borge Refsnes.
familyName("Jani");
familyName("Hege");
familyName("Stale");
familyName("Kai Jim");
familyName("Borge");
?>
<?php Hege Refsnes. Born in 1975
function familyName($fname, $year) { Stale Refsnes. Born in 1978
echo "$fname Refsnes. Born in $year <br>"; Kai Jim Refsnes. Born in 1983
}

familyName("Hege","1975");
familyName("Stale","1978");
familyName("Kai Jim","1983");
?>
PHP Arrays

What is an Array?

An array is a special variable, which can hold more than one value at a time, and you can access
the values by referring to an index number.

<?php

$cars = array("Volvo", "BMW", "Toyota");

echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";

?>

Output-

I like Volvo, BMW and Toyota.

Get The Length of an Array - The count() Function

The count() function is used to return the length (the number of elements) of an array

<?php
$cars = array("Volvo", "BMW", "Toyota");
echo count($cars);
?>

Output-

3
PHP Form Handling

The PHP superglobals $_GET and $_POST are used to collect form-data. The method attribute
specifies how to send form-data (the form-data is sent to the page specified in
the action attribute).

<form method="get|post" action=”process.php”>

Get Post
History Parameters remain in browser history Parameters are not saved in
because they are part of the URL browser history.
Bookmarked Can be bookmarked. Can not be bookmarked.
BACK GET requests are re-executed but may The browser usually alerts the
button/re- not be re-submitted to server if the user that data will need to be re-
submit HTML is stored in the browser cache. submitted.
behaviour
Encoding type application/x-www-form-urlencoded multipart/form-data or
(enctype application/x-www-form-
attribute) urlencoded Use multipart
encoding for binary data.
Parameters can send but the parameter data is Can send parameters, including
limited to what we can stuff into the uploading files, to the server.
request line (URL). Safest to use less than
2K of parameters, some servers handle
up to 64K
Restrictions on Yes, only ASCII characters allowed. No restrictions. Binary data is
form data type also allowed.
Security GET is less secure compared to POST POST is a little safer than GET
because data sent is part of the URL. So because the parameters are not
it's saved in browser history and server stored in browser history or
logs in plaintext. in web server logs.
Restrictions on Yes, since form data is in the URL and No restrictions
form data URL length is restricted. A safe URL
length length limit is often 2048 characters but
varies by browser and web server.
Usability GET method should not be used when POST method used when
sending passwords or other sensitive sending passwords or other
information. sensitive information.
Visibility GET method is visible to everyone (it will POST method variables are not
be displayed in the browser's address displayed in the URL.
bar) and has limits on the amount of
information to send.
Cached Can be cached Not cached
PHP MySQL Insert Data

We will create a table named "MyGuests", with five columns: "id", "firstname", "lastname",
"email" and "reg_date":

CREATE TABLE MyGuests (

id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
email VARCHAR(50),
reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)

The following examples add a new record to the "MyGuests" table:

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$sql = "INSERT INTO MyGuests (firstname, lastname, email)

VALUES ('John', 'Doe', 'john@example.com')";

if ($conn->query($sql) === TRUE) {

echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>
PHP MySQL Select Data

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT id, firstname, lastname FROM MyGuests";

$result = $conn->query($sql);

if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>";
}
} else {
echo "0 results";
}
$conn->close();
?>

Output

Code lines to explain from the example above:

First, we set up an SQL query that selects the id, firstname and lastname columns from the
MyGuests table. The next line of code runs the query and puts the resulting data into a variable
called $result.Then, the function num_rows() checks if there are more than zero rows returned.If
there are more than zero rows returned, the function fetch_assoc() puts all the results into an
associative array that we can loop through. The while() loop loops through the result set and
outputs the data from the id, firstname and lastname columns.
PHP MySQL Select Data (Using Table)

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT id, firstname, lastname FROM MyGuests";

$result = $conn->query($sql);

if ($result->num_rows > 0) {
echo "<table><tr><th>ID</th><th>Name</th></tr>";
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<tr><td>" . $row["id"]. "</td><td>" . $row["firstname"]. " " .
$row["lastname"]. "</td></tr>";
}
echo "</table>";
} else {
echo "0 results";
}

$conn->close();
?>

</body>
</html>
Excersices

What would be the output when the following HTML,CSS or PHP codes are executed?

1) 2)

<?php <?php
$x = 5 /* + 15 */ + 5; $txt = "ICT";
echo $x; echo "I love $txt!";
?> ?>

3) 4)

<?php <?php
$txt = "ICT"; $var1 = "Hello";
echo "I love " . $txt . "!"; $var2 = "World";
?> echo "$var1$var2";
?>

5) 6)

<?php <?php
$t = date("H"); //$t=20 $x = 1;

if ($t < "10") { while($x <= 5) {

echo "Have a good morning!"; echo "The number is: $x <br>";
} elseif ($t < "20") { $x++;
echo "Have a good day!"; }
} else { ?>
echo "Have a good night!";
}
?>
7) 8)

<?php <?php
$x = 0; $x = 6;

while($x <= 100) { do {

echo "The number is: $x <br>"; echo "The number is: $x <br>";
$x+=10; $x++;
} } while ($x <= 5);
?> ?>
9) 10)

<?php <?php
for ($x = 0; $x <= 100; $x+=10) { $colors = array("red", "green", "blue", "yellow");
echo "The number is: $x <br>";
} foreach ($colors as $value) {
?> echo "$value <br>";
}
?>
11) 12)

<?php <?php
for ($x = 0; $x < 10; $x++) { for ($x = 0; $x < 10; $x++) {
if ($x == 4) { if ($x == 4) {
break; continue;
} }
echo "The number is: $x <br>"; echo "The number is: $x <br>";
} }
?> ?>
13) 14)

<?php <?php
$cars = array("Volvo", "BMW", "Toyota"); $cars = array("Volvo", "BMW", "Toyota");
echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . echo count($cars);
"."; ?>
?>
15) 16)

<?php <?php
function familyName($fname) { function familyName($fname, $year) {
echo "$fname Refsnes.<br>"; echo "$fname Refsnes. Born in $year <br>";
} }

familyName("Jani"); familyName("Hege", "1975");

familyName("Hege"); familyName("Stale", "1978");
familyName("Stale"); familyName("Kai Jim", "1983");
familyName("Kai Jim"); ?>
familyName("Borge");
?>
17) 18)

<?php <?php
$favcolor = "red"; $x = 10;
$y = 3;
switch ($favcolor) {
case "red": echo $x ** $y;
echo "Your favorite color is red!"; ?>
break;
case "blue":
echo "Your favorite color is blue!"; <?php
break; $x = 10;
case "green": $y = 6;
echo "Your favorite color is green!";
break; echo $x % $y;
default: ?>
echo "Your favorite color is neither red, blue, nor
green!";
}
?>
19) 20)

<?php <?php
$x = 10; $x = 100;
echo ++$x; $y = "100";
?>
var_dump($x == $y);
<?php ?>
$x = 10;
echo $x++; <?php
?> $x = 100;
$y = "100";
<?php
$x = 10; var_dump($x === $y);
echo --$x; ?>
?>

<?php
$x = 10;
echo $x--;
?>
21) 22)
Fill the blanks. Note - add a new record to the Fill the blanks. Note - add a new record to the "Student"
"MyGuests" table, with 3 columns: "firstname", table, with 3 columns: "firstname", "lastname", "email".
"lastname", "email". User Name:root, User Name:root, Password:12#$%,Dbname:school
Password:12#$%,Dbname:mydb
<?php
<?php
$conn =
$conn = new mysqli_connect("localhost",.................................................
mysqli("localhost",........................................................... .);
.);
if (!$conn) {
if ($conn->connect_error) { die("Connection failed: " . mysqli_connect_error());
die("Connection failed: " . $conn->connect_error); }
}
$sql = "INSERT INTO ..........................
$sql = "INSERT INTO (........................................................................................)
.................(....................................................................... VALUES ('Aruna', 'Perera', 'Aruna@gmail.com')";
)
VALUES ('John', 'Doe', 'john@example.com')"; if (mysqli_query($conn, $sql)) {
echo "New record created successfully";
if ($conn->query($sql) === TRUE) { } else {
echo "New record created successfully"; echo "Error: " . $sql . "<br>" . mysqli_error($conn);
} else { }
echo "Error: " . $sql . "<br>" . $conn->error;
} mysqli_close($conn);
?>
$conn->close();
?>
23) 24)
MyGuests table
id firstname lastname <style>
1 John Doe table, th, td {
border: 1px solid black;
2 Mary Moe
}
3 Julie Dooley </style>
<?php
<?php
$conn = new
$conn = new mysqli("localhost","admin","15%#","mydb");
mysqli("localhost","admin","15%#","mydb");
if ($conn->connect_error) {
if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error);
die("Connection failed: " . $conn->connect_error); }
}
$sql = "SELECT id, firstname, lastname FROM MyGuests";
$sql = "SELECT id, firstname, lastname FROM MyGuests"; $result = $conn->query($sql);
$result = $conn->query($sql);
if ($result->num_rows > 0) {
if ($result->num_rows > 0) { echo "<table><tr><th>ID</th><th>Name</th></tr>";
while($row = $result->fetch_assoc()) { while($row = $result->fetch_assoc()) {
echo "id: " . $row["id"]. " - Name: " . echo "<tr><td>" . $row["id"]. "</td><td>" .
$row["firstname"]. " " . $row["lastname"]. "<br>"; $row["firstname"]. " " . $row["lastname"]. "</td></tr>";
} }
} else { echo "</table>";
echo "0 results"; } else {
} echo "0 results";
$conn->close(); }
?>
$conn->close();
?>
25) 26)

<html> <html>
<head> <head>
<style> <style>
p.center { h1, h2, p {
text-align: center; text-align: center;
color: red; color: red;
} }
</style>
p.large { </head>
font-size: 300%; <body>
}
</style> <h1>Hello World!</h1>
</head> <h2>Smaller heading!</h2>
<body> <p>This is a paragraph.</p>

<h1 class="center">heading </h1> </body>

<p class="center">paragraphp> </html>
<p class="center large">paragraph 2 <p>

</body>
</html>
27) 28)

<html> <html>
<head> <head>
<style> <style>
#para1 { *{
text-align: center; text-align: center;
color: red; color: blue;
} }
</style> </style>
</head> </head>
<body> <body>

<p id="para1">Hello World!</p> <h1>Hello world!</h1>

<p>Another paragraph </p>
<p>Every element on the page will be affected by the
</body> style.</p>
</html> <p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>
29) 30)

<html> <html>
<head> <head>
<style> <style>
table, th, td { table, th, td {
border: 1px solid black; border: 1px solid black;
border-collapse: collapse; border-collapse: collapse;
} }
</style> </style>
</head> </head>
<body> <body>

<table style="width:100%"> <table style="width:100%">

<tr> <tr>
<th>Name</th> <th colspan="2">Name</th>
<td>Jill</td> <th>Age</th>
</tr> </tr>
<tr> <tr>
<th rowspan="2">Phone</th> <td>Jill</td>
<td>555-1234</td> <td>Smith</td>
</tr> <td>43</td>
<tr> </tr>
<td>555-8745</td> <tr>
</tr> <td>Eve</td>
</table> <td>Jackson</td>
</body> <td>57</td>
</html> </tr>
</table>
</body>
</html>
31) Output

<form>

<label> Firstname </label>

<input type="text" name="firstname" size="15"/> <br>
<br>
<label> Middlename: </label>
<input type="text" name="middlename" size="15"/> <br>
<br>
<label> Lastname: </label>
<input type="text" name="lastname" size="15"/> <br>
<br>

<label>
Course :
</label>
<select name=”course”>
<option>Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
</select>

<br>
<br>
<label>
Gender :
</label><br>
<input type="radio" value="male" name=”gtype”/> Male
<br>
<input type="radio" value="female" name=”gtype”/>
Female <br>
<br>
<br>

<label>
Phone :
</label>
<input type="text" name="country code" value="+91"
size="2"/>
<input type="text" name="phone" size="10"/> <br> <br>
Address
<br>
<textarea cols="80" rows="5" value="address">
</textarea>
<br> <br>
<input type="button" value="Submit"/>
</form>