BCA5B09|Web Programming using PHP

Unit I [8 T + 8 P]
•Introduction web-documents: Static, Dynamic, Active •Web programming: client side and
server side scripting •HTML 5: Document Structure, Elements, Attributes, Types of Elements
and Attributes •Basic HTML Data types •Using HTML5 form elements: datalist, keygen, output,
progress, meter •File uploading using forms •Frameset and frames •CSS: External CSS, CSS3
•CSS Syntax •CSS Selector: Universal, Class, ID •Working with Lists and Tables •CSS ID and
Class •Navigation Bar •Image Gallery •Image Opacity
Unit II [8 T + 9 P]
•Javascript: Introduction •Client side programming, script tag, comments, variables •Including
JavaScript in HTML: head, body, external •Data types •Operators: Arithmetic, Assignment,
Relational, Logical •Conditional Statements, Loops, break and continue •Output functions: write,
writeln, popup boxes: prompt, alert, confirm •Functions: Built-in Global Functions: alert(),
prompt(), confirm(), isNan(), Number(), parseInt() •User Defined Functions •Calling Functions
with Timer •Events Familiarization: onLoad, onClick, onBlur, onSubmit, onChange •Document
Object Model (Concept) •Objects: String, Array, Date.
Unit III [10 T + 10 P]
•PHP: Introduction •Server side programming •Role of Web Server software •Including PHP
Script in HTML: head, body, external •Comments, Data types, variables and scope, echo and
print •Operators: Arithmetic, Assignment, Relational, Logical •Conditional Statements, Loops,
break and continue •User Defined Functions
Unit IV [8 T + 9 P]
•Working with PHP: Passing information between pages •HTTP GET and POST method
•Cookie, Session •String functions: strlen, strops, strstr, strcmp, substr, str_replace, string case
•Array constructs: array(), list() and foreach() •Header()
Unit V [10 T + 10 P]
•PHP & PostgreSQL: Features of PostgreSQL •data types •PostgreSQL commands •CREATE
DATABASE •CREATE TABLE •DESCRIBE TABLE (\d table_name or using
usinginformation_schema) •SELECT •SELECT INTO •CREATE AS •DELETE •UPDATE
•INSERT •PHP - PostgreSQL Integration •Establishing Database Connection (pg_connect(),
pg_connection_status(), pg_dbname()) •Getting Error String (pg_last_error()) •Closing database
•Connection (pg_close()) •Executing SQL statements (pg_query(), pg_execute()) •Retrieving
Data (pg_fetch_row(), pg_fetch_array(), pg_fetch_all(), pg_fetch_assoc(), pg_fetch_object(),
pg_num_rows(), pg_num_fields(), pg_affected_rows(), pg_num_rows(), pg_free_result())
•Insertion and Deletion of data using PHP •Displaying data from PostrgreSQL database in
webpage •Introduction to AJAX •Implementation of AJAX in PHP •Simple example for partial
page update
 BCA5B09|Web Programming using PHP
Unit I
1. Introduction web-documents
a. WWW Overview
WWW stands for World Wide Web. A technical definition of the World Wide Web is: all
the resources and users on the Internet that are using the Hypertext Transfer Protocol
(HTTP). A broader definition comes from the organization that Web inventor Tim
Berners-Lee helped found, the World Wide Web Consortium (W3C). The World Wide
Web is the universe of network-accessible information, an embodiment of human
knowledge.
In simple terms, The World Wide Web is a way of exchanging information between
computers on the Internet, tying them together into a vast collection of interactive
multimedia resources. Internet and Web is not the same thing: Web uses internet to
pass over the information.
b. Evolution
World Wide Web was created by Timothy Berners Lee in 1989
at CERN in Geneva. World Wide Web came into existence as a proposal by him, to
allow researchers to work together effectively and efficiently at CERN. Eventually it
became World Wide Web.
c. Web browser
A web browser (commonly referred to as a browser) is a software application for
retrieving, presenting, and traversing information resources on the World Wide Web.
An information resource is identified by a Uniform Resource Identifier (URI/URL) and
may be a web page, image, video or other piece of content. Hyperlinks present in
resources enable users easily to navigate their browsers to related resources. The
major web browsers are Firefox, Google Chrome, Internet Explorer/Microsoft
Edge, Opera, and Safari. The first web browser was invented in 1990 by Sir Tim
Berners-Lee. Berners-Lee is the director of the World Wide Web Consortium (W3C),
which oversees the Web's continued development, and is also the founder of the World
Wide Web Foundation. His browser was called WorldWideWeb and later renamed
Nexus.
d. Web server
A web server is a computer system that processes requests via HTTP, the
basic network protocol used to distribute information on the World Wide Web. The term
 BCA5B09|Web Programming using PHP
can refer to the entire system, or specifically to the software that accepts and
supervises the HTTP requests. The primary function of a web server is to store, process
and deliver web pages to clients. The communication between client and server takes
place using the Hypertext Transfer Protocol (HTTP). Pages delivered are most
frequently HTML documents, which may include images, stylesheets and scripts in
addition to text content.
e. Web hosting
Web hosting is a service that allows organizations and individuals to post a website or
web page onto the Internet. A web host, or web hosting service provider, is a business
that provides the technologies and services needed for the website or webpage to be
viewed in the Internet. Websites are hosted, or stored, on special computers called
servers. When Internet users want to view your website, all they need to do is type your
website address or domain into their browser. Their computer will then connect to your
server and your webpages will be delivered to them through the browser. Most hosting
companies require that you own your domain in order to host with them. If you do not
have a domain, the hosting companies will help you purchase one.
f. Web Pages
Web page is a document available on World Wide Web. Web Pages are stored on web
server and can be viewed using a web browser. A web page can contain huge
information including text, graphics, audio, video and hyperlinks. These hyperlinks are
the link to other web pages. Collection of linked web pages on a web server is known
as website. There is unique Uniform Resource Locator (URL) is associated with each
web page.
g. Static Web page
Static web pages are also known as flat or stationary web page. They are loaded on
the client’s browser as exactly they are stored on the web server. Such web pages
contain only static information. User can only read the information but can’t do any
modification or interact with the information. Static web pages are created using only
HTML. Static web pages are only used when the information is no more required to be
modified.
 BCA5B09|Web Programming using PHP

A static web document resides in a file that it is associated with a web server. The author
of a static document determines the contents at the time the document is written.
Because the contents do not change, each request for a static document results in
exactly the same response.
h. Dynamic Web page
Dynamic web page shows different information at different point of time. It is possible
to change a potation of a web page without loading the entire web page. It has been
made possible using Ajax technology. A dynamic web document does not exist in a
predefined form. When a request arrives the web server runs an application program
that creates the document. The server returns the output of the program as a response
to the browser that requested the document. Because a fresh document is created for
each request, the contents of a dynamic document can vary from one request to
another.
 SERVER-SIDE DYNAMIC WEB PAGE
It is created by using server-side scripting. There are server-side scripting parameters
that determine how to assemble a new web page which also includes setting up of
more client-side processing.
 CLIENT-SIDE DYNAMIC WEB PAGE
It is processed using client side scripting such as JavaScript and then passed in
to Document Object Model (DOM).
 BCA5B09|Web Programming using PHP
i. Active Web page
An active web document consists of a computer program that the server sends to the
browser and that the browser must run locally. When it runs, the active document
program can interact with the user and change the display continuously.
 ADVANTAGES AND DISADVANTAGES OF EACH DOCUMENT TYPE
Advantages Disadvantages
Static  Simplicity, reliability and efficient.  inflexibility, it can be
 The browser can place a copy in a inconvenient, time consuming
cache on a local disk. and costly to change static
documents

Dynamic  Ability to report current information  Document cannot change after

(current stocks prices, current reaching the client
weather conditions, current  creators must have knowledge of
availability of tickets for a concert). programming
 Because both static and dynamic
documents use HTML, a browser
does not know whether the server
extracted the page from a disk file or
obtained the page dynamically from
a computer program.

Active  Ability to update information  cost of creating, testing, and

continuously. For example, only an running;
active document can change the  security: documents and export
display quickly enough to show an information;
animated image.

Domain Name System (DNS)

The DNS is the way that internet domain names are located and translated into IP addresses.
The DNS maps the name; people use to locate a website to the IP address that a computer
uses to locate a website. It is very difficult to remember IP address of all the computers. To
overcome this problem a system has been developed which assigns name to some computers
and maintains a database of those names and corresponding IP addresses. These names are
called domain names. Examples of domain names are google.com, kerala.gov.in.
Generic domain names
 com- commercial business
 edu – educational institutions
 BCA5B09|Web Programming using PHP
 gov – government agencies
 org – organizations
Country specific domain names
 in – india
 ca – Canada
 ch – china
Uniform Resource Locator
Uniform Resource Locator (URL) refers to a web address which uniquely identifies a document
over the internet. The URL contains the name of the protocol to be used to access the resource
and a resource name. The first part of a URL identifies what protocol to use as the primary
access medium. The second part identifies the IP address or domain name. A URL is the most
common type of Uniform Resource Identifier (URI). URI is strings of characters used to identify
a resource over a network. URLs are essential to navigating the internet.
https://en.wikipedia.org/wiki/Internet#History indicates:
 The HTTPS protocol is used; and
 The URL will retrieve the webpage at the point marked with the named anchor History.
Web programming
Web programming refers to the writing, markup and coding involved in Web development, which
includes Web content, Web client and server scripting and network security. The most common
languages used for Web programming are XML, HTML, JavaScript, Perl 5 and PHP.

2. Web programming: client side and server side scripting

a. Scripting Languages
Scripting languages are like programming languages that allow us to write programs in
form of script. These scripts are interpreted not compiled and executed line by line.
Scripting language is used to create dynamic web pages.
b. Client-side Scripting
Client-side scripting refers to the programs that are executed on client-side. Client-side
scripts contain the instruction for the browser to be executed in response to certain
user’s action. Client-side scripting programs can be embedded into HTML files or also
can be kept as separate files. The client-side environment used to run scripts is usually
a browser. The processing takes place on the end users computer. The source code is
transferred from the web server to the user’s computer over the internet and run directly
in the browser. The scripting language needs to be enabled on the client computer.
Sometimes if a user is conscious of security risks they may switch the scripting facility
 BCA5B09|Web Programming using PHP
off. When this is the case a message usually pops up to alert the user when script is
attempting to run.
 CLIENT-SIDE PROGRAMMING
Much like the server-side, Client-side programming is the name for all of the programs
which are run on the Client.
Uses:
1. Make interactive webpages.
2. Make stuff happen dynamically on the web page.
3. Interact with temporary storage, and local storage (Cookies, local Storage).
4. Send requests to the server, and retrieve data from it.
5. Provide a remote service for client-side applications, such as software
registration, content delivery, or remote multi-player gaming.
Example languages:
1. JavaScript (primarily)
2. HTML*
3. CSS*
4. Any language running on a client device that interacts with a remote service is a
client-side language.
HTML and CSS aren't really "programming languages". They are markup syntax by
which the Client renders the page for the User. Following table describes commonly
used Client-Side scripting languages:

S.N. Scripting Language Description

1. JavaScript
It is a prototype based scripting language. It inherits its naming conventions from
java. All java script files are stored in file having .js extension.

2. ActionScript
It is an object oriented programming language used for the development of
websites and software targeting Adobe flash player.

3. Dart
It is an open source web programming language developed by Google. It relies on
source-to-source compiler to JavaScript.
 BCA5B09|Web Programming using PHP
4. VBScript
It is an open source web programming language developed by Microsoft. It is
superset of JavaScript and adds optional static typing class-based object oriented
programming.

c. Server-side Scripting
Server-side scripting acts as an interface for the client and also limit the user access the
resources on web server. It can also collect the user’s characteristics in order to
customize response. A server is a computer system that serves as a central repository
of data and programs and is shared by clients. The server-side environment that runs a
scripting language is a web server. A user's request is fulfilled by running a script
directly on the web server to generate dynamic HTML pages. This HTML is then sent to
the client browser. It is usually used to provide interactive web sites that interface to
databases or other data stores on the server. This is different from client-side scripting
where scripts are run by the viewing web browser, usually in JavaScript. The primary
advantage to server-side scripting is the ability to highly customize the response based
on the user's requirements, access rights, or queries into data stores.
 SERVER-SIDE PROGRAMMING
Server-side programming is the general name for the kinds of programs which are run
on the Server.
Uses:
1. Process user input.
2. Display pages.
3. Structure web applications.
4. Interact with permanent storage (SQL, files).
Example Languages:
1. PHP
2. Python
3. ASP.Net in C#, C++, or Visual Basic.
4. Nearly any language (C++, C#, Java). These were not designed specifically for
the task, but are now often used for application-level web services.
Following table describes commonly used Server-Side scripting languages:

S.N. Scripting Language Description

 BCA5B09|Web Programming using PHP
1. ASP
Active Server Pages (ASP) is server-side script engine to create dynamic web
pages. It supports Component Object Model (COM) which enables ASP web sites
to access functionality of libraries such as DLL.

2. ActiveVFP
It is similar to PHP and also used for creating dynamic web pages. It uses
native Visual Foxpro language and database.

3. ASP.net
It is used to develop dynamic websites, web applications, and web services.

4. Java
Java Server Pages are used for creating dynamic web applications. The Java
code is compiled into byte code and run by Java Virtual Machine (JVM).

5. Python
It supports multiple programming paradigms such as object-oriented, and
functional programming. It can also be used as non-scripting language using third
party tools such as Py2exe or Pyinstaller.

6. PHP
PHP is a server scripting language, and a powerful tool for making dynamic and
interactive Web pages. PHP is a widely-used, free, and efficient alternative to
competitors such as Microsoft's ASP.

d. Examples of scripting languages

Specialized scripting languages include:
 Perl (Practical Extraction and Report Language). This is a popular string processing
language for writing small scripts for system administrators and web site
maintainers. Much web development is now done using Perl.
 Hypertalk is another example. It is the underlying scripting language of HyperCard.
 Lingo is the scripting language of Macromedia Director, an authoring system for
develops high-performance multimedia content and applications for CDs, DVDs and
the Internet.
 AppleScript, a scripting language for the Macintosh allows the user to send
commands to the operating system to, for example open applications, and carry out
complex data operations.
 BCA5B09|Web Programming using PHP
 JavaScript, perhaps the most publicized and well-known scripting language was
initially developed by Netscape as LiveScript to allow more functionality and
enhancement to web page authoring that raw HTML could not accommodate. A
standard version of JavaScript was later developed to work in both Netscape and
Microsoft's Internet Explorer, thus making the language to a large extent, universal.
This means that JavaScript code can run on any platform that has a JavaScript
interpreter.
 VBScript, a cut-down version of Visual Basic, used to enhance the features of web
pages in Internet Explorer.
3. HTML 5:
HTML stands for Hyper Text Markup Language. It is a formatting language used to
define the appearance and contents of a web page. It allows us to organize text,
graphics, audio, and video on a web page.
Key Points:
 The word Hypertext refers to the text which acts as a link.
 The word markup refers to the symbols that are used to define structure of the
text. The markup symbols tells the browser how to display the text and are often
called tags.
 The word Language refers to the syntax that is similar to any other language.
HTML was created by Tim Berners-Lee at CERN. HTML5 is the latest version of
Hypertext Markup Language.
 HTML is a markup language that uses tags to create web pages that can be
viewed in a browser.
 CSS or Cascading Style Sheets are used for the layout and design of web
pages.
 JavaScript is a programming language written within an HTML page that allows
for creating interactive effects on web pages.
 HTML 5 is the fifth and current major release of the HTML standard. HTML 5 had
its first draft released in 2008, and by 2014 it was the World Wide Web
Consortium recommendation.
 This new version of the HTML standard brought a diverse range of new
improvements, such as new elements and a redefined API.
 BCA5B09|Web Programming using PHP
XHTML
XHTML stands for EXtensible HyperText Markup Language. The XHTML 1.0 is the first
document type in the XHTML family. XHTML was developed by World Wide Web
Consortium (W3C) to help web developers make the transition from HTML to XML
(EXtensible Markup Language). XHTML documents can be written to operate better than
they did before in existing browsers as well as in new browsers. XHTML documents can
utilize applications such as scripts and applets that rely upon either the HTML Document
Object Model or the XML Document Object Model. XHTML gives you a more consistent,
well-structured format so that your webpages can be easily parsed and processed by
present and future web browsers. Since XHTML is an official standard of the W3C, your
website becomes more compatible with many browsers and it is rendered more accurately.
Web developers and web browser designers are constantly discovering new ways to
express their ideas through new markup languages. In XML, it is relatively easy to introduce
new elements or additional element attributes.
DHTML
DHTML stands for Dynamic HTML; it is totally different from HTML. The DHTML is based on
the properties of the HTML, javascript, CSS, and DOM (Document Object Model which is
used to access individual elements of a document) which helps in making dynamic content.
It is the combination of HTML, CSS, JS, and DOM. The DHTML make use of Dynamic
object model to make changes in settings and also in properties and methods. DHTML
allows different scripting languages in a web page to change their variables, which enhance
the effects, looks and many others functions after the whole page have been fully loaded or
under a view process, or otherwise static HTML pages on the same. DHTML is used to
create interactive and animated web pages that are generated in real-time, also known as
dynamic web pages so that when such a page is accessed, the code within the page is
analyzed on the web server and the resulting HTML is sent to the client’s web browser.
Components of DHTML are
 HTML: HTML stands for Hypertext Markup Language and it is a client-side markup
language. It is used to build the block of web pages.
 JavaScript: It is a Client-side Scripting language.
 CSS: The abbreviation of CSS is Cascading Style Sheet. It helps in the styling of the
web pages and helps in designing of the pages. The CSS rules for DHTML will be
modified at different levels using JavaScript with event handlers which add a
significant amount of dynamism with very little code.
 DOM: It is known as Document Object Model which is used to access individual
elements of a document. It is a way to manipulate the static contents.
 BCA5B09|Web Programming using PHP
Features
 Tags and their properties can be changed using DHTML.
 It is used for real-time positioning.
 Dynamic fonts can be generated using DHTML.
 It makes a webpage dynamic and be used to create animations, games, applications
along with providing new ways of navigating through websites.
Difference between HTML and DHTML
1. DHTML is a collection of technologies but HTML is a markup language.
2. DHTML is capable of creating dynamic web pages but HTML is used to create static
web pages.
3. DHTML is used to create animations and dynamic menus but HTML is not used.
4. DHTML sites are comparatively faster but HTML sites are slow.
5. DHTML used as server side code but HTML cannot be used as server side code.
6. DHTML needs database connectivity but not in case of HTML.
7. Files in DHTML are stored using .dhtm while HTML uses .html extension.
8. DHTML requires processing from the browser but HTML does not need processing
from the browser.
HTTP
HTTP means HyperText Transfer Protocol. HTTP is the underlying protocol used by the
World Wide Web and this protocol defines how messages are formatted and transmitted,
and what actions Web servers and browsers should take in response to various commands.
Client sends requests to web servers for web elements such as web pages and images. A
new connection is established between the client and the server each time the client makes
a request. When you type a URL into a web browser, HTTP will work as follows.
1. If your URL contains a domain name (eg: www.gmail.com), the browser will first
connect domain name server and retrieves the corresponding IP address (unique
address) of the web server.
2. The web browser connects to the web server and sends an http request for the
desired web page. The web server receives the request and checks for the desired
page.
3. If the desired page exists, the web server sends it.
4. If the server cannot find the requested page it will send an http 404 error message
(404 means page not found).
5. The web browser receives the page back and the connection is closed. The browser
then parses through the web page and looks for other page elements it needs to
complete the web page.
 BCA5B09|Web Programming using PHP
a. HTML Page Structure

Below is a visualization of an HTML page structure:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Note: Only the content inside the <body> section (the white area above) is displayed in a
browser.
Version Information – ‘Doctype’
A basic HTML page always starts with the Document Type Declaration or doctype. This
is a way to tell the browsers what type of document it is. The doctype is always the first
item at the top of any HTML file. Then sections and subsections come, each possibly
has its own heading and subheading. These heading and sectioning elements helps the
reader to perceive the content meaning.
 BCA5B09|Web Programming using PHP
<!DOCTYPE html>
The doctype can be written in uppercase, lowercase, or mixed case. The character
encoding (charset) declaration is also very simple:
<meta charset="UTF-8">
The default character encoding in HTML5 is UTF-8.
b. Elements
An HTML element usually consists of a start tag and end tag, with the content
inserted in between:
<tagname>Content goes here...</tagname>

 The <html> Element

The <html> element follows the doctype information, which is used to inform the
browser that this is an HTML document. You can use the lang attribute with
the en value to specify that the document is in English. But nowadays, even
the lang attribute is unnecessary for the document to validate or function correctly.
Don’t forget to include the closing </html> tag:
<!DOCTYPE HTML>
<html lang="en">
</html>

 The <head> Section

The next part is the head section. The <head> element contains metadata (document
title, character set, styles, links, scripts), specific information about the web page that is
not displayed to the user.

 The <meta> element

The <meta> element is used to specify the metadata to provide browsers and search
engines with technical information about the web page. For example, if you want to
specify the author of your document, you may use the <meta> element like this:
<meta name="Author" content="W3docs">
To define the character encoding for the document, you need to set the charset attribute
with the utf-8 value in nearly all cases. UTF-8 is the default character encoding for
HTML5.
<meta charset="utf-8">
 BCA5B09|Web Programming using PHP
Setting the Viewport
HTML5 introduced a method to let web designers take control over the viewport,
through the <meta> tag. The viewport is the user's visible area of a web page. It varies
with the device, and will be smaller on a mobile phone than on a computer screen. You
should include the following <meta> viewport element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A <meta> viewport element gives the browser instructions on how to control the page's
dimensions and scaling. The width=device-width part sets the width of the page to
follow the screen-width of the device (which will vary depending on the device). The
initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the
browser.
Here is an example of a web page without the viewport meta tag, and the same web
page with the viewport meta tag:
Tip: If you are browsing this page with a phone or a tablet, you can click on the two links
below to see the difference.
Without the viewport meta tag With the viewport meta tag

 The <title> element

Use the <title> element to define the title of your document.
<title>W3Docs - Learn Programming Languages Online.</title>
 BCA5B09|Web Programming using PHP
 The <link> element
Next is the <link> element which sets the relationship between the current document
and the external resource. Generally, it is used to link to the external CSS stylesheet.
Required attributes for the <link> element are rel, href and type.
<link rel="stylesheet" type="text/css" href="style.css">

 The <body> Element

The <body> of a document contains the content of the document. The content may be
presented by a user agent in different ways. For example, the content can be text,
images, links, colors, graphics, etc.
<body>
...
</body>
Between the body tags there can be many different elements, to which you can give
style by using CSS properties. Just add an id or class selector to your HTML element
and in the <style> section mention about your preferred styling options (color, size, font,
etc.).
<style>
.header-style {
color: blue;
}
</style>
<body>
<header class=”header-style”>
</body>

 The <script>
In HTML5 the <script> tag is used for the practices for embedding JavaScript. For
example, it is related with the page loading speed.
<script src="js/scripts.js"></script>

 Headings (h1-h6 elements)

The <h1>-<h6> heading elements are used to give a short description about the coming
section. <h1> is considered to the most important, and <h6> as the least important one.
<body>
<h1>First-level heading</h1>
<h2>Second-level heading</h2>
 BCA5B09|Web Programming using PHP
<h3>Third-level heading</h3>
<h4>Forth-level heading</h4>
<h5>Fifth-level heading</h5>
<h6>Sixth-level heading</h6>
</body>

 The <header> Element

Use the <header> element to define a header for the document or section. It usually
contains a logo, search bar, navigation links, etc. The <header> element specifies a
header for a document or section. The <header> element should be used as a container
for introductory content. You can have several <header> elements in one document.
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>

 The <nav> Element

The <nav> element defines a set or a block of navigation links, either within the current
document or to other documents. Note, that not all links in the HTML document can be
placed inside the <nav> element; it can only include major navigation blocks.
Notice that NOT all links of a document should be inside a <nav> element.
The <nav> element is intended only for major block of navigation links.
<header>
<nav>
<ul>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
</ul>
</nav>
</header>

 The <aside> Element

The <aside> element defines some content aside from the content it is placed in (like a
sidebar). The <aside> content should be related to the surrounding content.
 BCA5B09|Web Programming using PHP
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

 The <figure> and <figcaption> Elements

The purpose of a figure caption is to add a visual explanation to an image. In HTML5,
an image and a caption can be grouped together in a <figure> element:
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
The <img> element defines the image, the <figcaption> element defines the caption.

 The <article> Element

The <article> element is used to define an independent, self-contained content (articles,
blog posts, comments, etc.). The content of the element has its own meaning and it is
easily differentiated from the rest of the webpage content. An article should make its
own sense, and it should be possible to read it independently from the rest of the web
site.
Examples of where an <article> element can be used:
 Forum post
 Blog post
 Newspaper article
<article>
<p>Text of the article</p>
</article>

 The <section> Element

The <section> element is used to group standalone sections within a webpage
containing logically connected content (news block, contact information etc.).
The <section> element defines a section in a document.
 BCA5B09|Web Programming using PHP
According to W3C's HTML5 documentation, "A section is a thematic grouping of
content, typically with a heading." A home page could normally be split into sections for
introduction, content, and contact information.
<section>
<h1>Header</h1>
<p>Some paragraph for example</p>
</section>
<section>
<h1>Header 2</h1>
<p>Another paragraph for example.</p>
</section>

 The <footer> Element

The <footer> element specifies footer for a document or section. A <footer> element
should contain information about its containing element. Footer typically contains the
author of the document, copyright information, links to terms of use, contact information,
etc. You may have several <footer> elements in one document.
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:[email protected]">
[email protected]</a>.</p>
</footer>

 Example
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
html, body {
height: 100%;
}
body {
display: flex;
flex-wrap: wrap;
margin: 0;
 BCA5B09|Web Programming using PHP
}
.header-menu, footer {
display: flex;
align-items: center;
width: 100%;
}
.header-menu {
justify-content: flex-end;
height: 60px;
background: #1c87c9;
color: #fff;
}
h2 {
margin: 0 0 8px;
}
ul li {
display: inline-block;
padding: 0 10px;
list-style: none;
}
aside {
flex: 0.4;
height: 165px;
padding-left: 15px;
border-left: 1px solid #666;
}
section {
flex: 1;
padding-right: 15px;
}
footer {
padding: 0 10px;
background: #ccc;
}
</style>
</head>
<body>
 BCA5B09|Web Programming using PHP
<header class="header-menu">
<nav>
<ul>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>Learn HTML</h2>
<small>Hyper Text Markup Language</small>
</header>
<p>Our free HTML tutorial for beginners will teach you HTML and how to create your
website from the scratch. HTML isn't difficult, so hoping you will enjoy learning.</p>
</article>
<article>
<header>
<h2>Start Quiz "HTML Basic"</h2>
<small>You can test your HTML skills with W3docs' Quiz.</small>
</header>
<p>You will get 5% for each correct answer for single choice questions. In multiple choice
question it might be up to 5%. At the end of the Quiz, your total score will be displayed.
Maximum score is 100%.</p>
</article>
</section>
<aside>
<h2>Our Books</h2>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
<p>PHP</p>
</aside>
<footer>
<small>Company © W3docs. All rights reserved.</small>
 BCA5B09|Web Programming using PHP
</footer>
</body>
</html>

 HTML5 Semantic Elements

Semantics is the study of the meanings of words and phrases in a language. A
semantic element clearly describes its meaning to both the browser and the developer.
Semantic elements = elements with a meaning.
Examples of non-semantic elements: <div> and <span> -Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its
content.
Many web sites contain HTML code like:

<div id="nav"> :- to indicate navigation

<div class="header"> :- header
<div id="footer"> :- footer
 HTML Layout Elements
HTML5 offers new semantic elements to define different parts of a web page:
 <header> - Defines a header for a document or a section
 <nav> - Defines a container for navigation links
 <section> - Defines a section in a document
 <article> - Defines an independent self-contained article
 <aside> - Defines content aside from the content (like a sidebar)
 <footer> - Defines a footer for a document or a section
 BCA5B09|Web Programming using PHP

 <details> - Defines additional details

 <summary> - Defines a heading for the <details> element

 HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

This is a paragraph.
This is a paragraph.
This is a paragraph.
Note: Browsers automatically add some white space (a margin) before and after a
paragraph.

 HTML Links
HTML links are defined with the <a> tag:
<!DOCTYPE html>
<html>
<body>
<a href="https://www.w3schools.com">This is a link</a>
</body>
</html>
 BCA5B09|Web Programming using PHP

This is a link
The link's destination is specified in the href attribute. Attributes are used to provide
additional information about HTML elements.

 HTML Block and Inline Elements

Every HTML element has a default display value depending on what type of element it is. The
default display value for most elements is block or inline.

Block-level Elements
A block-level element always starts on a new line and takes up the full width available
(stretches out to the left and right as far as it can). The <div> element is a block-level
element.
Examples of block-level elements:
<div>, <h1> - <h6>, <p>, <form>

Inline Elements
An inline element does not start on a new line and only takes up as much width as
necessary.

This is an inline <span> element inside a paragraph.

Examples of inline elements:

<span>, <a>, <img>

 The <div> Element

The <div> element is often used as a container for other HTML elements. The <div>
element has no required attributes, but both style and class are common. When used
together with CSS, the <div> element can be used to style blocks of content:
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.
 BCA5B09|Web Programming using PHP

 The <span> Element

The <span> element is often used as a container for some text. The <span> element has
no required attributes, but both style and class are common. When used together with CSS,
the <span> element can be used to style parts of the text:
<h1>My <span style="color:red">Important</span> Heading</h1>

My Important Heading

 HTML Grouping Tags

Tag Description

<div> Defines a section in a document (block-level)

<span> Defines a section in a document (inline)

HTML The class attribute

The HTML class attribute makes it possible to define equal styles for elements with the
same class name. Here we have three <div> elements that points to the same class name:
<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>
<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital of England. It is the most populous city in the United Kingdom, with a
 BCA5B09|Web Programming using PHP

metropolitan area of over 13 million inhabitants.</p>

</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>

London
London is the capital of England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its
history going back to its founding by the Romans, who named it Londinium.

Paris
Paris is the capital and most populous city of France.
Situated on the Seine River, it is at the heart of the Île-de-France region, also known as the
région parisienne.
Within its metropolitan area is one of the largest population centers in Europe, with over 12
million inhabitants.

Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous
metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace, and the home of the
Japanese Imperial Family.
The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million
people and the world's largest urban economy.
 BCA5B09|Web Programming using PHP

Using the class Attribute on Inline Elements

The HTML class attribute can also be used for inline elements:
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>

My Important Heading
This is some important text.

HTML Frames
HTML frames are used to divide your browser window into multiple sections where each section

can load a separate HTML document. A collection of frames in the browser window is known as
a frameset. The window is divided into frames in a similar way the tables are organized into

rows and columns.

Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag
defines how to divide the window into frames. The rows attribute of <frameset> tag defines

horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame>
tag and it defines which HTML document shall open into the frame.
 BCA5B09|Web Programming using PHP

<frameset> attributes

Attribute Value Description

cols pixels Not supported in HTML5.

% Specifies the number and size of columns in a frameset
*

rows pixels Not supported in HTML5.

% Specifies the number and size of rows in a frameset
*

<frameset cols="25%,*,25%">
<frame src="frame_a.htm">
<frame>
<frame src="frame_c.htm">
</frameset>
<frameset rows="50%,*”>
<frame src="frame_a.htm">
<frame src="frame_c.htm">
</frameset>

An iframe is used to display a web page within a web page.

Iframe Syntax
An HTML iframe is defined with the <iframe> tag:
<iframe src="URL"></iframe>
The src attribute specifies the URL (web address) of the inline frame page.
Iframe - Set Height and Width
Use the height and width attributes to specify the size of the iframe. The attribute values are
specified in pixels by default, but they can also be in percent (like "80%").
<iframe src="demo_iframe.htm" height="200" width="300"></iframe>

This page is
displayed in an
iframe
 BCA5B09|Web Programming using PHP

Iframe - Remove the Border

By default, an iframe has a border around it. To remove the border, add the style attribute
and use the CSS border property:
<iframe src="demo_iframe.htm" style="border:none;"></iframe>

This page is
displayed in an
iframe

With CSS, you can also change the size, style and color of the iframe's border:
<iframe src="demo_iframe.htm" style="border:2px solid grey;"></iframe>

This page is
displayed in an
iframe

HTML Images (JPEG,GIF,PNG)

HTML images are defined with the <img> tag. The source file (src), alternative text (alt),
width, and height are provided as attributes:

HTML Images Syntax

<img src="url" alt="some_text" style="width:width;height:height;">
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

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). If a browser cannot find an image, it will display the value of the alt attribute:
 BCA5B09|Web Programming using PHP

<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

The alt attribute is required. A web page will not validate correctly without it.
<!DOCTYPE html>
<html>
<body>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
</body>
</html>

The image size is specified in pixels: width="104" means 104 screen pixels wide.
The alt attribute specifies an alternative text to be used, when an image cannot be displayed.
The value of the attribute can be read by screen readers. This way, someone "listening" to the
webpage, e.g. a blind person, can "hear" the element.

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image. The values are
specified in pixels (use px after the value):
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Note: Always specify the width and height of an image. If width and height are not specified, the
page will flicker while the image loads.

Width and Height, or Style?

Both the width, height, and style attributes are valid in HTML5. However, we suggest using the
style attribute. It prevents internal or external styles sheets from changing the original size of
images:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
 BCA5B09|Web Programming using PHP

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>

Using the style attribute:

Using the width and height attributes:

Images in another Folder

If not specified, the browser expects to find the image in the same folder as the web page.
However, it is common to store images in a sub-folder. You must then include the folder
name in the src attribute:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Images on another Server

Some web sites store their images on image servers. Actually, you can access images from
any web address in the world:
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

Animated Images
The GIF standard allows animated images:
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Note that the syntax of inserting animated images is no different from non-animated images.

Image Floating
Use the CSS float property to let the image float to the right or to the left of a text:
<!DOCTYPE html>
 BCA5B09|Web Programming using PHP

<html>
<body>
<p><strong>Float the image to the right:</strong></p>
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p><p><strong>Float the image to the left:</strong></p>
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>
<p>Please use the CSS float property. The align attribute is deprecated in HTML 4, and not supported in
HTML5.</p>
</body></html>

Please use the CSS float property. The align attribute is deprecated in HTML 4, and not supported in
HTML5.

Image Maps
Use the <map> tag to define an image-map. An image-map is an image with clickable
areas. The name attribute of the <map> tag is associated with the <img>'s usemap attribute
and creates a relationship between the image and the map. The <map> tag contains a
number of <area> tags, that defines the clickable areas in the image-map:
<!DOCTYPE html>
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
 BCA5B09|Web Programming using PHP

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

The HTML <pre> Element

The HTML <pre> element defines preformatted text. The text inside a <pre> element is
displayed in a fixed-width font (usually Courier), and it preserves both spaces and line
breaks:
<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

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

The pre tag preserves both spaces and line breaks:

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

HTML Styles
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
 BCA5B09|Web Programming using PHP

<p style="font-size:36px;">I am big</p>

</body>
</html>

I am normal
I am red
I am blue

I am big
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute. The HTML style
attribute has the following syntax:

<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.

HTML Background Color

The background-color property defines the background color for an HTML element. This
example sets the background color for a page to powderblue:
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

HTML Text Color

The color property defines the text color for an HTML element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
 BCA5B09|Web Programming using PHP

This is a heading
This is a paragraph.
HTML Fonts
The font-family property defines the font to be used for an HTML element:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body></html>

This is a heading
This is a paragraph.
HTML Text Size
The font-size property defines the text size for an HTML element:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>

This is a heading
This is a paragraph.
HTML Text Alignment
The text-align property defines the horizontal text alignment for an HTML element:
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
 BCA5B09|Web Programming using PHP

</html>

Centered Heading
Centered paragraph.
HTML Text Formatting
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is_subscript and ^superscript</p></body></html>

This text is bold

This text is italic
This is subscript and superscript
HTML Formatting Elements
In the previous chapter, you learned about the HTML style attribute. HTML also defines
special elements for defining text with a special meaning. HTML uses elements like <b> and <i>
for formatting output, like bold or italic text. Formatting elements were designed to display
special types of text:
 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
Note: Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in the
meaning of these tags: <b> and <i> defines bold and italic text, but <strong> and <em> means
that the text is "important".

HTML Quotation and Citation Elements

<!DOCTYPE html>
 BCA5B09|Web Programming using PHP

<html>
<body>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
</body>
</html>

Here is a quote from WWF's website:

For 50 years, WWF has been protecting the future of
nature. The world's leading conservation organization,
WWF works in 100 countries and is supported by 1.2
million members in the United States and close to 5
million globally.
HTML <q> for Short Quotations
The HTML <q> element defines a short quotation. Browsers usually insert quotation marks
around the <q> element.

HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from another source.
Browsers usually indent <blockquote> elements.

HTML <abbr> for Abbreviations

The HTML <abbr> element defines an abbreviation or an acronym. Marking abbreviations can
give useful information to browsers, translation systems and search-engines.
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

HTML <address> for Contact Information

The HTML <address> element defines contact information (author/owner) of a document or an
article. The <address> element is usually displayed in italic. Most browsers will add a line break
before and after the element.
<address>
Written by John Doe.<br>
 BCA5B09|Web Programming using PHP

Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

Written by John Doe.

Visit us at:
Example.com
Box 564, Disneyland
USA
HTML <cite> for Work Title
The HTML <cite> element defines the title of a work. Browsers usually display <cite> elements
in italic.
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

The Scream by Edvard Munch. Painted in 1893.

HTML <bdo> for Bi-Directional Override
The HTML <bdo> element defines bi-directional override. The <bdo> element is used to
override the current text direction:
<bdo dir="rtl">reverse </bdo>

esrever
HTML Computer Code Elements
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>

var x = 5;var y = 6;document.getElementById("demo").innerHTML = x + y;

Notice that the <code> element does not preserve extra whitespace and line-breaks. To fix this,
you can put the <code> element inside a <pre> element:
<pre>
<code>
var x = 5;
var y = 6;
 BCA5B09|Web Programming using PHP

document.getElementById("demo").innerHTML = x + y;
</code>
</pre>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;

HTML Computer Code Formatting

HTML normally uses variable letter size and spacing. This is not what we want when displaying
computer code. The <kbd>, <samp>, and <code> elements are all displayed in fixed letter size
and spacing.

HTML <kbd> For Keyboard Input

The HTML <kbd> element defines keyboard input:
<kbd>File | Open...</kbd>
File | Open...

HTML <samp> For Computer Output

The HTML <samp> element defines sample output from a computer program:
<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
demo.example.com login: Apr 12 09:10:17 Linux 2.6.10-
grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189

HTML <var> For Variables

The HTML <var> element defines a variable. The variable could be a variable in a mathematical
expression or a variable in programming context:
Einstein wrote: <var>E</var> = <var>m</var><var>c</var>².

Einstein wrote: E = mc2.

HTML Comments
Comment tags are used to insert comments in the HTML source code. You can add comments
to your HTML source by using the following syntax:
<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the opening tag, but not in the closing tag.
Note: Comments are not displayed by the browser, but they can help document your HTML
source code.
 BCA5B09|Web Programming using PHP

With comments you can place notifications and reminders in your HTML:
Comments are also great for debugging HTML, because you can comment out HTML lines of
code, one at a time, to search for errors:

Conditional Comments
You might stumble upon conditional comments in HTML:
<!--[if IE 9]>
.... some HTML here ....
<![endif]-->

Conditional comments defines some HTML tags to be executed by Internet Explorer only.

HTML Links (Hyperlinks)

Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML links are hyperlinks. You can click on a link and jump to another document. When you
move the mouse over a link, the mouse arrow will turn into a little hand.
Note: A link does not have to be text. It can be an image or any other HTML element.

In HTML, links are defined with the <a> tag:

Local Links
The example above used an absolute URL (A full web address). A local link (link to the same
web site) is specified with a relative URL (without http://www....).

HTML Link Colors

By default, a link will appear like this (in all browsers):
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
You can change the default colors, by using styles:
<style>
a:link {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
</style>

HTML Links - The target attribute

 BCA5B09|Web Programming using PHP

The target attribute specifies where to open the linked document. The target attribute can have
one of the following values:
 _blank - Opens the linked document in a new window or tab
 _self - Opens the linked document in the same window/tab as it was clicked (this is
default)
 _parent - Opens the linked document in the parent frame
 _top - Opens the linked document in the full body of the window
 framename - Opens the linked document in a named frame
This example will open the linked document in a new browser window/tab:
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Tip: If your webpage is locked in a frame, you can use target="_top" to break out of the frame:
<a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>

Image as Link
It is common to use images as links:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image
(when the image is a link).
Linking to Internal References
<a href=”#point1”>Internal reference<a>
<br>
<br>
<a id=”Point1”>

Linking to Other Web Pages

<a href=”index.html”>home page</a>

When you click the word “home page,” the index.html” page will be loaded into the same
window, replacing the current page.
Linking to External Web Site
< p >For more details <a href=”http://www.Google.com/”> Click here< /a >< /p >

Linking to Images
HTML allows images inside the <a>element. When you use an image, you should make sure
that the image gives a clear indication of where the link will take you.
<a href=”sample.html”><img src=”tulips.jpg”></a>

Linking to E -mail Addresses

 BCA5B09|Web Programming using PHP

HTML <a> tag provides you option to specify an email address to send an email. While using
<a> tag as an email tag, you will use mailto: email address along with href attribute. Following is
the syntax of using mailto instead of using http.
<a href = "mailto: [email protected]">Send Email</a>

This code will generate the following link which you can use to send email. When user clicks this
link, it launches one Email Client (like Lotus Notes, Outlook Express etc.) installed on your
user's computer.
<link>: The <link> tag defines a link between a document and an external resource. The <link>
tag is used to link to external style sheets.

Attribute Value Description

href URL Specifies the location of the linked document

Required. Specifies the relationship between the current

rel stylesheet
document and the linked document

Example:
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>

Create a Bookmark
HTML bookmarks are used to allow readers to jump to specific parts of a Web page. Bookmarks
can be useful if your webpage is very long. To make a bookmark, you must first create the
bookmark, and then add a link to it. When the link is clicked, the page will scroll to the location
with the bookmark.
First, create a bookmark with the id attribute:
<h2 id="tips">Useful Tips Section</h2>

Then, add a link to the bookmark ("Useful Tips Section"), from within the same page:
<a href="#tips">Visit the Useful Tips Section</a>

Or, add a link to the bookmark ("Useful Tips Section"), from another page:
<a href="html_tips.html#tips">Visit the Useful Tips Section</a>

External Paths
External pages can be referenced with a full URL or with a path relative to the current web
page. This example uses a full URL to link to a web page:
 BCA5B09|Web Programming using PHP

<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>

This example links to a page located in the html folder on the current web site:
<a href="/html/default.asp">HTML tutorial</a>

This example links to a page located in the same folder as the current page:
<a href="default.asp">HTML tutorial</a>

HTML Tables
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.
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Note: The <td> elements are the data containers of the table. They can contain all sorts of
HTML elements; text, images, lists, other tables, etc.

Adding a Border
If you do not specify a border for the table, it will be displayed without borders. A border is set
using the CSS border property:
table, th, td {
border: 1px solid black;
}
Remember to define borders for both the table and the table cells.
 BCA5B09|Web Programming using PHP

Collapsed Borders
If you want the borders to collapse into one border, add the CSS border-collapse property:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

Adding Cell Padding

Cell padding specifies the space between the cell content and its borders. If you do not specify
padding, the table cells will be displayed without padding. To set the padding, use the
CSS padding property:
th, td {
padding: 15px;
}

Left-align Headings
By default, table headings are bold and centered. To left-align the table headings, use the
CSS text-align property:
th {
text-align: left;
}

Adding Border Spacing

Border spacing specifies the space between the cells. To set the border spacing for a table, use
the CSS border-spacing property:
table {
border-spacing: 5px;
}

Note: If the table has collapsed borders, border-spacing has no effect.

Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
 BCA5B09|Web Programming using PHP

<td>55577854</td>
<td>55577855</td>
</tr>
</table>

Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>

Adding a Caption
To add a caption to a table, use the <caption> tag:
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

Note: The <caption> tag must be inserted immediately after the <table> tag.
 BCA5B09|Web Programming using PHP

A Special Style for One Table

To define a special style for a special table, add an id attribute to the table:
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Now you can define a special style for this table:

table#t01 {
width: 100%;
background-color: #f1f1c1;
}

HTML Lists
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will
be marked with bullets (small black circles) by default:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

 Coffee
 Tea
 Milk

Value Description

disc Sets the list item marker to a bullet (default)

 BCA5B09|Web Programming using PHP

circle Sets the list item marker to a circle

square Sets the list item marker to a square

none The list items will not be marked

<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

 Coffee
 Tea
 Milk
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

o Coffee
o Tea
o Milk
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

 Coffee
 Tea
 Milk
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Coffee
 BCA5B09|Web Programming using PHP

Tea
Milk
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will
be marked with numbers by default:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

1. Coffee
2. Tea
3. Milk
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

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
1. Coffee
2. Tea
3. Milk
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
A. Coffee
 BCA5B09|Web Programming using PHP

B. Tea
C. Milk
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
a. Coffee
b. Tea
c. Milk
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
I. Coffee
II. Tea
III. Milk
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
i. Coffee
ii. Tea
iii. Milk

HTML Description Lists

HTML also supports description lists. A description list is a list of terms, with a description of
each term. The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term:

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

Coffee
 BCA5B09|Web Programming using PHP

- black hot drink

Milk
- white cold drink
Nested HTML Lists
List can be nested (lists inside lists):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

 Coffee
 Tea
o Black tea
o Green tea
 Milk
Note: List items can contain new list, and other HTML elements, like images and links, etc.

Horizontal Lists
HTML lists can be styled in many different ways with CSS. One popular way is to style a list
horizontally, to create a menu:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
 BCA5B09|Web Programming using PHP

}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

 Home •News •Contact •About

HTML Forms
The HTML <form> element defines a form that is used to collect user input:
<form>
.
form elements
.
</form>

An HTML form contains form elements. Form elements are different types of input
elements, like text fields, checkboxes, radio buttons, submit buttons, and more.
 BCA5B09|Web Programming using PHP

The <input> Element

The <input> element is the most important form element. The <input> element can be displayed
in several ways, depending on the type attribute. Here are some examples:

Text Input
<input type="text"> defines a one-line input field for text input:
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>

First name:

Last name:

Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

Radio Button Input

<input type="radio"> defines a radio button. Radio buttons let a user select ONE of a limited
number of choices:
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>

Male
Female
Other
Input Type Checkbox
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE
options of a limited number of choices.
 BCA5B09|Web Programming using PHP

<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>

I have a bike I have a car

Input Type Password
<input type="password"> defines a password field:
<form>
User name:<br> <input type="text" name="username"><br>
User password:<br> <input type="password" name="psw">
</form>

The Submit Button

<input type="submit"> defines a button for submitting the form data to a form-handler. The form-
handler is typically a server page with a script for processing input data. The form-handler is
specified in the form's action attribute:
<form action="/action_page.php">
First name:<br> <input type="text" name="firstname" value="Mickey"><br>
Last name:<br> <input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>

First name:
Mickey

Last name:
Mouse

Submit

Input Type Reset

<input type="reset"> defines a reset button that will reset all form values to their default values:
 BCA5B09|Web Programming using PHP

<form action="/action_page.php">
First name:<br> <input type="text" name="firstname" value="Mickey"><br>
Last name:<br> <input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>

First name:
Mickey

Last name:
Mouse

Submit Reset

If you change the input values and then click the "Reset" button, the form-data will be reset to
the default values.

The Action Attribute

The action attribute defines the action to be performed when the form is submitted. Normally,
the form data is sent to a web page on the server when the user clicks on the submit button. In
the example above, the form data is sent to a page on the server called "/action_page.php".
This page contains a server-side script that handles the form data:
<form action="/action_page.php">

If the action attribute is omitted, the action is set to the current page.

The Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used when submitting
the form data:
<form action="/action_page.php" method="get">
or:
<form action="/action_page.php" method="post">

When to Use GET?

The default method when submitting form data is GET. However, when GET is used, the
submitted form data will be visible in the page address field:
/action_page.php?firstname=Mickey&lastname=Mouse

Note: GET must NOT be used when sending sensitive information! GET is best suited for short,
non-sensitive, amounts of data, because it has size limitations too.
 BCA5B09|Web Programming using PHP

When to Use POST?

Always use POST if the form data contains sensitive or personal information. The POST
method does not display the submitted form data in the page address field. POST has no size
limitations, and can be used to send large amounts of data.

The Name Attribute

Each input field must have a name attribute to be submitted. If the name attribute is omitted, the
data of that input field will not be sent at all. This example will only submit the "Last name" input
field:
<form action="/action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>

Input Type Color

The <input type="color"> is used for input fields that should contain a color. Depending on
browser support, a color picker can show up in the input field.
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>

Note: type="color" is not supported in Internet Explorer 11 and earlier versions or Safari 9.1 and
earlier versions.
Input Type Date
The <input type="date"> is used for input fields that should contain a date. Depending on
browser support, a date picker can show up in the input field.
 BCA5B09|Web Programming using PHP

<form>
Birthday:
<input type="date" name="bday">
</form>

You can also add restrictions to dates:

<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>

Input Type Datetime-local

The <input type="datetime-local"> specifies a date and time input field, with no time zone.
Depending on browser support, a date picker can show up in the input field.
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>

Input Type Email

The <input type="email"> is used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when
submitted. Some smartphones recognize the email type, and adds ".com" to the keyboard to
match email input.
<form>
E-mail:
<input type="email" name="email">
</form>

Input Type Month

The <input type="month"> allows the user to select a month and year. Depending on browser
support, a date picker can show up in the input field.
 BCA5B09|Web Programming using PHP

<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>

Input Type Number

The <input type="number"> defines a numeric input field. You can also set restrictions on what
numbers are accepted. The following example displays a numeric input field, where you can
enter a value from 1 to 5:
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>

Numeric restrictions will apply in the input field:

<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Input Type Range

The <input type="range"> defines a control for entering a number whose exact value is not
important (like a slider control). Default range is 0 to 100. However, you can set restrictions on
what numbers are accepted with the min, max, and step attributes:
<form>
<input type="range" name="points" min="0" max="10">
</form>

Points:
 BCA5B09|Web Programming using PHP

Input Type Search

The <input type="search"> is used for search fields (a search field behaves like a regular text
field).
<form>
Search Google:
<input type="search" name="googlesearch">
</form>

Input Type Tel

The <input type="tel"> is used for input fields that should contain a telephone number.
The tel type is currently supported only in Safari 8.
<form> Telephone: <input type="tel" name="usrtel">
</form>

Input Type Time

The <input type="time"> allows the user to select a time (no time zone). Depending on browser
support, a time picker can show up in the input field.
<form>
Select a time:
<input type="time" name="usr_time">
</form>

Input Type Url

The <input type="url"> is used for input fields that should contain a URL address. Depending on
browser support, the url field can be automatically validated when submitted. Some
smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
<form>
Add your homepage:
<input type="url" name="homepage">
</form>

Input Type Week

The <input type="week"> allows the user to select a week and year. Depending on browser
support, a date picker can show up in the input field.
<form>
Select a week:
<input type="week" name="week_year">
</form>
 BCA5B09|Web Programming using PHP

Grouping Form Data with <fieldset>

The <fieldset> element is used to group related data in a form. The <legend> element defines a
caption for the <fieldset> element.
<form action="/action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

HTML Form Elements

The <select> Element
The <select> element defines a drop-down list:
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

The <option> element defines an option that can be selected. By default, the first item in the
drop-down list is selected. To define a pre-selected option, add the selected attribute to the
option:
<option value="fiat" selected>Fiat</option>

The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

The <button> Element

The <button> element defines a clickable button:
<button type="button" onclick="alert('Hello World!')">Submit</button>
 BCA5B09|Web Programming using PHP

HTML Input Attributes

The value Attribute
The value attribute specifies the initial value for an input field:
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
</form>

Input Restrictions
Here is a list of some common input restrictions (some are new in HTML5):

Attribute Description

disabled Specifies that an input field should be disabled

max Specifies the maximum value for an input field

maxlength Specifies the maximum number of character for an input field

min Specifies the minimum value for an input field

pattern Specifies a regular expression to check the input value against

readonly Specifies that an input field is read only (cannot be changed)

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

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

step Specifies the legal number intervals for an input field

value Specifies the default value for an input field

c. Attributes
HTML Attributes
Attributes provide additional information about HTML elements.
 All HTML elements can have attributes
 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"
 BCA5B09|Web Programming using PHP

The href Attribute

HTML links are defined with the <a> tag. The link address is specified in the href attribute:
<a href="https://www.w3schools.com">This is a link</a>

The src Attribute

HTML images are defined with the <img> tag. The filename of the image source is
specified in the src attribute:
<img src="img_girl.jpg">

The width and height Attributes

Images in HTML have a set of size attributes, which specifies the width and height of the
image: The image size is specified in pixels: width="500" means 500 pixels wide.
<img src="img_girl.jpg" width="500" height="600">

The alt Attribute

The alt attribute specifies an alternative text to be used, when an image cannot be displayed.
The value of the attribute can be read by screen readers. This way, someone "listening" to the
webpage, e.g. a vision impaired person, can "hear" the element. The alt attribute is also useful if
the image does not exist:
<img src="img_girl.jpg" alt="Girl with a jacket">

The style Attribute

The style attribute is used to specify the styling of an element, like color, font, size etc.
<p style="color:red">I am a paragraph</p>

The lang Attribute

The language of the document can be declared in the <html> tag. The language is declared with
the lang attribute. Declaring a language is important for accessibility applications (screen
readers) and search engines:
<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

The first two letters specify the language (en). If there is a dialect, use two more letters (US).
 BCA5B09|Web Programming using PHP

The title Attribute

Here, a title attribute is added to the <p> element. The value of the title attribute will be
displayed as a tooltip when you mouse over the paragraph:
<!DOCTYPE html>
<html>
<body>
<h2>The title attribute</h2>
<p title="I'm a tooltip">
Mouse over this paragraph, to display the title attribute as a tooltip.
</p>
</body>
</html>

HTML Attributes
Below is an alphabetical list of some attributes often used in HTML:

Attribute Description

alt Specifies an alternative text for an image, when the image cannot be displayed

disabled Specifies that an input element should be disabled

href Specifies the URL (web address) for a link

id Specifies a unique id for an element

src Specifies the URL (web address) for an image

style Specifies an inline CSS style for an element

title Specifies extra information about an element (displayed as a tool tip)

HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a
horizontal rule. The <hr> element is used to separate content (or define a change) in an HTML
page:
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
 BCA5B09|Web Programming using PHP

<p>This is some text.</p>

<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
</body></html>

This is heading 1

This is some text.

This is heading 2

This is some other text.

This is heading 2

This is some other text.

HTML Input Attributes
HTML5 added the following attributes for <input>:
 autocomplete
 autofocus
 form
 formaction
 formenctype
 formmethod
 formnovalidate
 formtarget
 height and width
 list
 min and max
 multiple
 pattern (regexp)
 placeholder
 required
 step
 BCA5B09|Web Programming using PHP

and the following attributes for <form>:

 autocomplete
 novalidate
 autofocus

The autocomplete Attribute

The autocomplete attribute specifies whether a form or input field should have
autocomplete on or off. When autocomplete is on, the browser automatically complete the
input values based on values that the user has entered before.
Tip: It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or
vice versa.
The autocomplete attribute works with <form> and the following <input> types: text, search,
url, tel, email, password, datepickers, range, and color.

The novalidate Attribute

The novalidate attribute is a <form> attribute. When present, novalidate specifies that the form
data should not be validated when submitted.

The autofocus Attribute

The autofocus attribute specifies that the input field should automatically get focus when the
page loads.
First name:<input type="text" name="fname" autofocus>

The form Attribute

The form attribute specifies one or more forms an <input> element belongs to.
Tip: To refer to more than one form, use a space-separated list of form ids.
<form action="/action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>Last name: <input type="text" name="lname" form="form1">
 BCA5B09|Web Programming using PHP

The form action Attribute

The formaction attribute specifies the URL of a file that will process the input control when
the form is submitted. The formaction attribute overrides the action attribute of the <form>
element. The formaction attribute is used with type="submit" and type="image". An HTML
form with two submit buttons, with different actions:
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="/action_page2.php"
value="Submit as admin">
</form>

The form enctype Attribute

The form enctype attribute specifies how the form data should be encoded when submitted
(only for forms with method="post"). The form enctype attribute overrides the enctype attribute
of the <form> element. The form enctype attribute is used with type="submit" and type="image".
Send form-data that is default encoded (the first submit button), and encoded as "multipart/form-
data" (the second submit button):
<form action="/action_page_binary.asp" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>

The form method Attribute

The form method attribute defines the HTTP method for sending form-data to the action URL.
The form method attribute overrides the method attribute of the <form> element. The form
method attribute can be used with type="submit" and type="image". The second submit button
overrides the HTTP method of the form:
<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" formaction="action_page_post.asp"
value="Submit using POST">
</form>
 BCA5B09|Web Programming using PHP

The form target Attribute

The form target attribute specifies a name or a keyword that indicates where to display the
response that is received after submitting the form. The form target attribute overrides the target
attribute of the <form> element. The form target attribute can be used with type="submit" and
type="image".
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>

The pattern Attribute

The pattern attribute specifies a regular expression that the <input> element's value is
checked against. The pattern attribute works with the following input types: text, search, url,
tel, email, and password.
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country
code">

The placeholder Attribute

The placeholder attribute specifies a hint that describes the expected value of an input field (a
sample value or a short description of the format). The hint is displayed in the input field before
the user enters a value. The placeholder attribute works with the following input types: text,
search, url, tel, email, and password.
<input type="text" name="fname" placeholder="First name">

The required Attribute

The required attribute specifies that an input field must be filled out before submitting the form.
The required attribute works with the following input types: text, search, url, tel, email, password,
date pickers, number, checkbox, radio, and file.
Username: <input type="text" name="usrname" required>

The step Attribute

The step attribute specifies the legal number intervals for an <input> element. Example: if
step="3", legal numbers could be -3, 0, 3, 6, etc.
<input type="number" name="points" step="3">
 BCA5B09|Web Programming using PHP

HTML Google Maps

<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map">My map will go here
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.12),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</div>
</body>
<html>

Example Explained
The mapOptions variable defines the properties for the map. The center property specifies
where to center the map (using latitude and longitude coordinates). The zoom property specifies
the zoom level for the map (try to experiment with the zoom level). The mapTypeId property
specifies the map type to display. The following map types are supported: ROADMAP,
SATELLITE, HYBRID, and TERRAIN.
The line: var map=new google.maps.Map(document.getElementById("map"), mapOptions);
creates a new map inside the <div> element with id="map", using the parameters that are
passed (mapOptions).

HTML5 Video
Before HTML5, a video could only be played in a browser with a plug-in (like flash). The
HTML5 <video> element specifies a standard way to embed a video in a web page.
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
 BCA5B09|Web Programming using PHP

</video>
<p>Video courtesy of
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p></body>
</html>

How it Works
The controls attribute adds video 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 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.

HTML <video> Autoplay

To start a video automatically use the autoplay attribute:
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

The autoplay attribute does not work in mobile devices like iPad and iPhone.

HTML5 Audio
Before HTML5, audio files could only be played in a browser with a plug-in (like flash). The
HTML5 <audio> element specifies a standard way to embed audio in a web page.
<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>

HTML Audio - Media Types

File Format Media Type

MP3 audio/mpeg

OGG audio/ogg
 BCA5B09|Web Programming using PHP

WAV audio/wav

HTML Audio - Methods, Properties, and Events

HTML5 defines DOM methods, properties, and events for the <audio> element. This allows you
to load, play, and pause audios, as well as set duration and volume. There are also DOM
events that can notify you when an audio begins to play, is paused, etc. For a full DOM
reference, go to our HTML5 Audio/Video DOM Reference.

Grouping HTML Elements

There are two important tags which we use very frequently to group various other HTML tags
(i) <div> tag and (ii) <span> tag
The <div> tag
This is the very important block level tag which plays a big role in grouping various other HTML
tags and applying CSS on group of elements. Even now <div> tag can be used to create
webpage layout where we define different parts (Left, Right, Top etc.) of the page using <div>
tag. This tag does not provide any visual change on the block but this has more meaning when
it is used with CSS.
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
</ul>
</div>
<!-- Second group of tags -->
<div style = "color:green">
 BCA5B09|Web Programming using PHP

<h4>This is second group</h4>

<p>Following is a list of fruits</p>

<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</div>
</body>
</html>

The <span> tag

The HTML <span> is an inline element and it can be used to group inline-elements in an HTML
document. This tag also does not provide any visual change on the block but has more meaning
when it is used with CSS. The difference between the <span> tag and the <div> tag is that the
<span> tag is used with inline elements whereas the <div> tag is used with block-level
elements.
<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is <span style = "color:red">red</span> and this is
<span style = "color:green">green</span></p>
</body>
</html>

HTML5 <keygen> Tag

The <keygen> element generates an encryption key for passing encrypted data to a

server. When an HTML form is submitted, the browser will generate a key pair and store

the private key in the browser's local key storage and send the public key to the server.

Syntax
The basic syntax of the <keygen> tag is given with:
HTML: <keygen>; XHTML: <keygen />
 BCA5B09|Web Programming using PHP

The example below shows the <keygen> tag in action.

<form action="process-key.php" method="post">

<label>Username: <input type="text" name="username"></label>
<label>Encryption: <keygen name="key"></label>
<input type="submit" value="Submit">
</form>

HTML5 <datalist> Tag

The <datalist> element specifies a set of pre-defined options for an <input> element. It can be
used to provide the quick choices for an input field like an "autocomplete" feature. Its not only
saves the time of a user but also reduces errors, because the user has less likelihood of making
a spelling mistake. The list attribute of the input element is used to bind it together with a datalist
element.

Syntax
The basic syntax of the <datalist> tag is given with:
HTML / XHTML: <datalist> ... </datalist>

The example below shows the <datalist> tag in action.

<p>Enter your favorite browser name:</p>

<input type="text" list="browsers">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>

HTML5 <output> Element

The <output> element represents the result of a calculation (like one performed by a
script).Perform a calculation and show the result in an <output> element:
 BCA5B09|Web Programming using PHP

<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>

HTML <progress> Tag

The <progress> tag represents the progress of a task.
Downloading in progress:
<progress value="22" max="100"></progress>
Tip: Use the <progress> tag in conjunction with JavaScript to display the progress of a task.
Note: The <progress> tag is not suitable for representing a gauge (e.g. disk space usage or
relevance of a query result). To represent a gauge, use the <meter> tag instead.

HTML <meter> Tag

The <meter> tag defines a scalar measurement within a known range, or a fractional value. This
is also known as a gauge.
Examples: Disk usage, the relevance of a query result, etc.
Note: The <meter> tag should not be used to indicate progress (as in a progress bar). For
progress bars, use the <progress> tag.

Use the meter element to measure data within a given range (a gauge):
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>
 BCA5B09|Web Programming using PHP

Attribute Value Description

form form_id Specifies one or more forms the <meter> element belongs to

high number Specifies the range that is considered to be a high value

low number Specifies the range that is considered to be a low value

max number Specifies the maximum value of the range

min number Specifies the minimum value of the range

optimum number Specifies what value is the optimal value for the gauge

value number Required. Specifies the current value of the gauge

HTML <input type="file">

Example
Define a file-select field:
Select a file: <input type="file" name="myFile">

Definition and Usage

The <input type="file"> defines a file-select field and a "Browse" button for file uploads.
To define a file-select field that allows multiple files to be selected, add the "multiple"
attribute. HTML <input> accept Attribute
Example
Specify what file types the user can pick from the file input dialog box:
<form action="/action_page.php">
<input type="file" name="pic" accept="image/*">
<input type="submit">
</form>

Definition and Usage

The accept attribute specifies a filter for what file types the user can pick from the file
input dialog box (only for type="file").
Note: The accept attribute can only be used with <input type="file">.
 BCA5B09|Web Programming using PHP

Tip: Do not use this attribute as a validation tool. File uploads should be validated on the
server.

<marquee> tag
The HTML <marquee> tag is used for scrolling piece of text or image displayed either
horizontally across or vertically down your web site page depending on the settings.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
<marquee direction = "up">The direction of text will be from bottom to top.</marquee>
</body>
</html>

Attribute Value Description

behavior Scroll, slide, alternate Defines the type of scrolling.

bgcolor rgb(x,x,x), #xxxxxx, Deprecated − Defines the direction of scrolling

colorname the content.

direction Up, down, left, right Defines the direction of scrolling the content.

height pixels or % Defines the height of marquee.

hspace pixels Specifies horizontal space around the

marquee.

loop number Specifies how many times to loop. The default

value is INFINITE, which means that the
marquee loops endlessly.

scrolldelay seconds Defines how long to delay between each jump.

scrollamount number Defines how far to jump.

 BCA5B09|Web Programming using PHP

width pixels or % Defines the width of marquee.

vspace pixels Specifies vertical space around the marquee.

blink Tag
The HTML <blink> tag is used to enclose a text to make it blink. This tag was supported by
Netscape and now this is obsolete.
<!DOCTYPE html>
<html>
<head>
<title>HTML blink Tag</title>
</head>
<body>
<blink>This text will blink in Netscape Version 5.0</blink>
</body>
</html>

Browser Support
Chrome Firefox IE Opera Safari Android

Not Not Not Not Not Not

Supported Supported Supported Supported Supported Supported

Cascading Style Sheets

Cascading Style Sheets (CSS) is a simple design language intended to simplify the
process of making web pages presentable. CSS is created and maintained through a
group of people within the W3C called the CSS Working Group. Using CSS, you can
 BCA5B09|Web Programming using PHP

control the color of the text, the style of fonts, what background images or colors are
used as well as a variety of other effects.

Advantages of CSS
CSS saves time − You can write CSS once and then reuse same sheet in multiple
HTML pages.
Pages load faster − If you are using CSS, you do not need to write HTML tag attributes
every time. Just write one CSS rule of a tag and apply it to all the occurrences of that
tag.
Easy maintenance − To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.

CSS Syntax
A CSS comprises of style rules that are interpreted by the browser and then applied to
the corresponding elements in your document. A style rule is made of three parts
Selector − A selector is an HTML tag at which a style will be applied. This could be any
tag like <h1> or <table> etc.
Property − A property is a type of attribute of HTML tag. They could be color, border etc.
Value − Values are assigned to properties. For example, colorproperty can have value
either red or #F1F1F1 etc.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.A
CSS declaration always ends with a semicolon, and declaration blocks are surrounded
by curly braces.
Example
p{ color: red;
text-align: center; }

CSS Comments
Comments are used to explain the purpose of code. Comments are ignored by
browsers. A CSS comment starts with /* and ends with */. Comments can also span
multiple lines:
 BCA5B09|Web Programming using PHP

Example
/* Single Line*/
/*Multiple Line*/

CSS Selectors
CSS selectors are used to "find" (or select) HTML elements based on their element
name, id, class, attribute, and more.
The element Selector
The element selector selects elements based on the element name.
Example
p { text-align: center;
color: red; }

The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be 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. An id name cannot start with a number!
Example
<head><style>
#para1 {
text-align: center;
color: red;
}
#para2 {
color: green;
}
</style></head><body>
<p id="para1">Hello</p>
<p id="para2">Good Morning</p>
</body></html>

The 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.
Example
 BCA5B09|Web Programming using PHP

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

User can create class selector for specific element.

Example – for <p> element
p.center {
text-align: center;
color: red;
}

HTML elements can also refer to more than one class.

Example
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">Red and center-aligned.</p>
<p class="large">Font-size.</p>
<p class="center large">Red, center-aligned, and in a large font-size.</p>
</body>
</html>

Grouping Selectors
If you have elements with the same style definitions, like this:
 BCA5B09|Web Programming using PHP

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

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

It will be better to group the selectors, to minimize the code. To group selectors,
separate each selector with a comma.
Example
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello!</h1>
<h2>Dear</h2>
<p>Minu</p>
</body>
</html>

Inserting CSS
There are three ways of inserting a style sheet:
 External style sheet
 Internal style sheet
 Inline style

External Style Sheet

An external style sheet can be written in any text editor. The file should not contain any
html tags. The style sheet file must be saved with a .css extension. With an external
style sheet, you can change the look of an entire website by changing just one file. Each
page must include a reference to the external style sheet file inside the <link> element.
The <link> element goes inside the <head> section:

Example
 BCA5B09|Web Programming using PHP

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Contents of myStyle.css
body { background-color: lightblue; }
h1 { color: navy; margin-left: 20px;}

Internal Style Sheet

An internal style sheet may be used if one single page has a unique style. Internal
styles are defined within the <style> element, inside the <head> section of an HTML
page:
Example
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

Inline Styles
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.
Example
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

Multiple Style Sheets

 BCA5B09|Web Programming using PHP

If some properties have been defined for the same selector (element) in different style
sheets, the value from the last read style sheet will be used.
Example
Assume that an external style sheet has the following style for the <h1> element:
h1 { color: navy; }

Then, assume that an internal style sheet also has the following style for the <h1>
element:
h1 { color: orange; }

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

Cascading Order
In some situations there is more than one style specified for an HTML element. In this
time all the styles will "cascade" into a new "virtual" style sheet by the following rules,
where number one has the highest priority:
 Inline style (inside an HTML element)
 External and internal style sheets (in the head section)
 Browser default
So, an inline style (inside a specific HTML element) has the highest priority, which
means that it will override a style defined inside the <head> tag, or in an external style
sheet, or a browser default value.

CSS font
The CSS font properties define the font family, boldness, size, and the style of a text. In
CSS, there are two types of font family names:
 generic family - a group of font families with a similar look (like "Serif" or
"Monospace")
 font family - a specific font family (like "Times New Roman" or "Arial")

Generic family Font family Description

 BCA5B09|Web Programming using PHP

Times New Roman Serif fonts have small lines at the ends on
Serif
Georgia some characters

Arial "Sans" means without - these fonts do not

Sans-serif
Verdana have the lines at the ends of characters

Courier New All monospace characters have the same

Monospace
Lucida Console width

Font Properties

Property Description

font Sets all the font properties in one declaration

font-family Specifies the font family for text

font-size Specifies the font size of text

font-style Specifies the font style for text

font-variant Specifies whether or not a text should be displayed in a small-caps font

font-weight Specifies the weight of a font

font-family property
The font-family property is used to specify the font. If the name of a font family is more
than one word, it must be in quotation marks, like: "Times New Roman". More than one
font family is specified in a comma-separated list:
font-family: "Times New Roman", Times, serif;

font-style property
The font-style property is used to specify the style of a font. This property has three
values:
normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
p.normal { font-style: normal;}

font-size property
 BCA5B09|Web Programming using PHP

The font-size property is used to set the size of the text. If you do not specify a font
size, the default size for normal text, like paragraphs, is 16px (16px=1em).
Set Font Size With Em
To allow users to resize the text (in the browser menu), many developers use em
instead of pixels. The em size unit is recommended by the W3C. 1em is equal to the
current font size. The default text size in browsers is 16px. So, the default size of 1em is
16px. The size can be calculated from pixels to em using this formula: pixels/16=em
h1 { font-size: 2.5em; /* 40px/16=2.5em */}

font-weight property
The font-weight property specifies the weight of a font. Values are normal and bold.
h1{ font-weight: normal;}
h1{ font-weight: bold; }

font-variant property
The font-variant property specifies whether or not a text should be displayed in a small-
caps font. In a small-caps font, all lowercase letters are converted to uppercase letters.
Converted uppercase letters appears in a smaller font size than the original uppercase
letters in the text.
Example
h1{ font-variant: normal; }
h1{ font-variant: small-caps;}

CSS Text Properties

Property Description

color Sets the color of text

direction Specifies the text direction/writing direction

text-align Specifies the horizontal alignment of text

text-decoration Specifies the decoration added to text

text-indent Specifies the indentation of the first line in a text-block

text-shadow Specifies the shadow effect added to text

 BCA5B09|Web Programming using PHP

text-transform Controls the capitalization of text

text-overflow Specifies how overflowed content that is not displayed should

be signaled to the user

vertical-align Sets the vertical alignment of an element

color property
The color property is used to set the color of the text.
Values are
 a color name - like "red"
 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"
h1 { color: green; }

direction property
The direction property is used to change the text direction of an element:
Values are
 ltr : The writing direction is left-to-right. This is default
 rtl : The writing direction is right-to-left
div { direction: rtl; }

text-align property
The text-align property specifies the horizontal alignment of text in an element.
Values are
 Left : left alignment
 Right : right alignment
 center : center alignment
 justify : combination of left and right alignment
h1 { text-align: center;}

text-decoration property
The text-decoration property specifies the decoration added to text. Values are
 None : Defines a normal text. This is default
 Underline : Defines a line below the text
 Overline : Defines a line above the text
 line-through : Defines a line through the text
 BCA5B09|Web Programming using PHP

 initial : Sets this property to its default value.

 Inherit : Inherits this property from its parent element.

text-transform property
The text-transform property controls the capitalization of text. Values are
 none : No capitalization. This is default
 capitalize : Transforms the first character of each word to uppercase
 uppercase : Transforms all characters to uppercase
 lowercase : Transforms all characters to lowercase
p.uppercase { text-transform: uppercase;}

Background Property
The CSS background properties are used to define the background effects for
elements.
Property Description
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
background-color Sets the background color of an element
background-image Sets the background image for an element
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated

It is possible to specify all the background properties in one single property. This is
called a shorthand property.
body { background: #ffffff url("img_tree.png") no-repeat right top;}

When using the shorthand property the order of the property values is:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
background-color property
The background-color property specifies the background color of an element. Values
are
 a valid color name - like "red"
 a HEX value - like "#ff0000"
 BCA5B09|Web Programming using PHP

 RGB value - like "rgb(255,0,0)"

body { background-color: lightblue; }

background-image property
The background-image property specifies an image to use as the background of an
element. By default, the background-image property repeats an image both horizontally
and vertically.
body { background-image: url("paper.gif"); }

When using a background image, use an image that does not disturb the text.
background-repeat property
background-repeat property is used to repeat an image only horizontally or vertically.
Values are
 repeat-y : To repeat an image vertically set background-repeat: repeat-y;
 repeat-x: To repeat an image horizontally set background-repeat: repeat-x;
 no-repeat : To display background image only once set background-repeat: no-
repeat;
body { background-image: url("gradient_bg.png");
background-repeat: repeat-x; }

background-position property
The position of the image is specified by the background-position property. Values are
 left top
 left center
 left bottom
 right top
 right center
 right bottom
 center top
 center center
 center bottom.
body {
background-image: url("img_tree.png");
background-position: right top; }
 BCA5B09|Web Programming using PHP

background-attachment property
To specify that the background image should be fixed (will not scroll with the rest of the
page), use the background-attachment property. Values are
 scroll : The background scrolls along with the element. This is default
 fixed: The background is fixed with regard to the viewport
body {
background-image: url("img_tree.png");
background-attachment: fixed; }

CSS List Properties

In HTML, there are two main types of lists:
 unordered lists (<ul>) - the list items are marked with bullets
 ordered lists (<ol>) - the list items are marked with numbers or letters
Property Description

list-style-image Specifies an image as the list-item marker

Specifies if the list-item markers should appear inside or outside the content
list-style-position
flow

list-style-type Specifies the type of list-item marker

list-style Sets all the properties for a list in one declaration

list-style-image property
The list-style-image property specifies an image as the list item
ul { list-style-image: url('sqpurple.gif'); }

list-style-position property
The list-style-position property specifies whether the list-item markers should appear
inside or outside the content flow. Values are inside and outside.
ul { list-style-position: inside;}

list-style-type property
The list-style-type property specifies the type of list item marker. The following example
shows some of the available list item markers:
 BCA5B09|Web Programming using PHP

ul.a { list-style-type: circle; }

ul.a { list-style-type: disc;}
ul.b { list-style-type: square; }
ol.c { list-style-type: upper-roman;}
ol.d { list-style-type: lower-alpha; }
ol.u { list-style-type: none;}
ol.v { list-style-type: inherit;}

list-style property
The list-style property is a shorthand property. It is used to set all the list properties in
one.
ul { list-style: square inside url("sqpurple.gif"); }

When using the shorthand property, the orders of the property values are:
 list-style-type (if a list-style-image is specified, the value of this property will be
displayed if the image for some reason cannot be displayed)
 list-style-position (specifies whether the list-item markers should appear inside or
outside the content flow)
 list-style-image (specifies an image as the list item marker)
If one of the property values above is missing, the default value for the missing property
will be inserted, if any.

Styling List with Colors

We can also style lists with colors, to make them look a little more interesting. Anything
added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li>
tag will affect the individual list items:
Example
ol { background: #ff9999; }
ul { background: #3399ff;}
 BCA5B09|Web Programming using PHP

CSS Table
Table is used to display the text in cells.
CSS Table Properties
Property Description

border Sets all the border properties in one declaration

border-collapse Specifies whether or not table borders should be collapsed

border-spacing Specifies the distance between the borders of adjacent cells

caption-side Specifies the placement of a table caption

border property
border property is used to set all the border properties in one declaration.
table { border: 1px solid black;}
table, th, td { border: 1px solid black;}

The border shorthand property sets all the border properties in one declaration. The
properties that can be set, are (in order): border-width, border-style, and border-color.
border-collapse property
The border-collapse property sets whether the table borders should be collapsed into a
single border.
table { border-collapse: collapse;}

border-spacing property
The border-spacing property specifies the distance between the borders of adjacent
cells
table {
border-collapse: separate;
border-spacing: 10px 50px;
}

caption-side property
The caption-side property is used to specify the placement of a table caption.
caption { caption-side: bottom;}

Table Width and Height

Width and height of a table are defined by the CSS Dimension properties width and
height. The example below sets the width of the table to 100%, and the height of the
<th> elements to 50px:
 BCA5B09|Web Programming using PHP

table { width: 100%; }

th { height: 50px;}

Horizontal Alignment
The CSS Text property text-align sets the horizontal alignment (like left, right, or center)
of the content in <th> or <td>. By default, the content of <th> elements are center-
aligned and the content of <td> elements are left-aligned.
th { text-align: left;}

Vertical Alignment
The CSS Text property vertical-align sets the vertical alignment (like top, bottom, or
middle) of the content in <th> or <td>. By default, the vertical alignment of the content in
a table is middle (for both <th> and <td> elements).
td {
height: 50px;
vertical-align: bottom;
}

Table Padding
To control the space between the border and the content in a table, use the CSS
Padding property padding with <td> and <th> elements: The padding property is a
shorthand property for the following individual padding properties:
 padding-top
 padding-right
 padding-bottom
 padding-left

th, td {
padding: 15px;
text-align: left;
}

Horizontal Dividers
Add the border-bottom property to <th> and <td> for horizontal dividers. The border-
bottom shorthand property sets all the bottom border properties in one declaration. The
properties in order are:
border-bottom-width, border-bottom-style and border-bottom-color
th, td { border-bottom: 1px solid #ddd;}
 BCA5B09|Web Programming using PHP

Table Color
To change table color use CSS background property background-color and text color of
<th> elements:
th {
background-color: yellow;
color: white;
}

CSS Positioning Properties

Property Description

bottom Sets the bottom margin edge for a positioned box

left Sets the left margin edge for a positioned box

overflow Specifies what happens if content overflows an element's box

Specifies what to do with the left/right edges of the content if it overflows the
overflow-x
element's content area

Specifies what to do with the top/bottom edges of the content if it overflows the
overflow-y
element's content area

position Specifies the type of positioning for an element

right Sets the right margin edge for a positioned box

top Sets the top margin edge for a positioned box

z-index Sets the stack order of an element

position property
The position property specifies the type of positioning method used for an element.
There are four different position values:
 static
 relative
 fixed
 absolute
Elements are then positioned using the top, bottom, left, and right properties. However,
these properties will not work unless the position property is set first. They also work
differently depending on the position value.
 BCA5B09|Web Programming using PHP

position: static;
HTML elements are positioned static by default. Static positioned elements are not
affected by the top, bottom, left, and right properties. An element with position: static; is
not positioned in any special way; it is always positioned according to the normal flow of
the page:
div.static { position: static; }

position: relative;
An element with position: relative; is positioned relative to its normal position. Setting
the top, right, bottom, and left properties of a relatively-positioned element will cause it
to be adjusted away from its normal position. Other content will not be adjusted to fit into
any gap left by the element.
div.relative {
position: relative;
left: 30px;
}

position: fixed;
An element with position fixed is positioned relative to the viewport, which means it
always stays in the same place even if the page is scrolled. The top, right, bottom, and
left properties are used to position the element. Fixed element is positioned in the lower-
right corner of the page.
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
}

position: absolute;
An element with position: absolute is positioned relative to the nearest positioned
ancestor. if an absolute positioned element has no positioned ancestors, it uses the
document body, and moves along with page scrolling.
div.relative {
position: relative;
width: 400px;
height: 200px;
 BCA5B09|Web Programming using PHP

border: 3px solid #73AD21;

}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}

Overlapping Elements
When elements are positioned, they can overlap other elements. The z-index property
specifies the stack order of an element (which element should be placed in front of, or
behind, the others). An element can have a positive or negative stack order. Because
the image has a z-index of -1, it will be placed behind the text.
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1; }

If two positioned elements overlap without a z-index specified, the element positioned
last in the HTML code will be shown on top

CSS Float Properties

Property Description

Specifies on which sides of an element where floating elements are not allowed to
clear
float

float Specifies whether or not an element should float

overflow Specifies what happens if content overflows an element's box

Specifies what to do with the left/right edges of the content if it overflows the
overflow-x
element's content area

Specifies what to do with the top/bottom edges of the content if it overflows the
overflow-y
element's content area
 BCA5B09|Web Programming using PHP

float property
The float property specifies whether or not an element should float.
img { float: right; }

Value Description

none The element is not floated, and will be displayed just where it occurs in the text. This is default

left The element floats to the left

right The element floats the right

clear Property
The clear property is used to control the behavior of floating elements. Elements after a
floating element will flow around it. To avoid this, use the clear property. The clear
property specifies on which sides of an element floating elements are not allowed to
float:
Value Description

none Default. Allows floating elements on both sides

left No floating elements allowed on the left side

right No floating elements allowed on the right side

both No floating elements allowed on either the left or the right side

div { clear: left;}

overflow property
The overflow property specifies what happens if content overflows an element's box.
Value Description

visible The overflow is not clipped. It renders outside the element's box. This is default

hidden The overflow is clipped, and the rest of the content will be invisible

scroll The overflow is clipped, but a scroll-bar is added to see the rest of the content

auto If overflow is clipped, a scroll-bar should be added to see the rest of the content

div {
width: 150px; height: 150px;
overflow: scroll;
}
 BCA5B09|Web Programming using PHP

image gallery
CSS can be used to create an image gallery.

CSS Image Opacity / Transparency

The CSS opacity property is used to create transparent images.
img { opacity: 0.4; }

The opacity property can take a value from 0.0 - 1.0. The lower value, the image is
more transparent.
Image Sprites
An image sprite is a collection of images put into a single image. A web page with many
images can take a long time to load and generates multiple server requests. Using
image sprites will reduce the number of server requests and save bandwidth. Instead of
using three separate images, we use this single image ("img_navsprites.gif"):

#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0; }

 <img id="home" src="img_trans.gif"> - Only defines a small transparent image

because the src attribute cannot be empty. The displayed image will be the
background image we specify in CSS.
 width: 46px; height: 44px; - Defines the portion of the image we want to use
 background: url(img_navsprites.gif) 0 0; - Defines the background image and its
position (left 0px, top 0px)