WEB TECHNOLOGY AND ITS

APPLICATIONS

Dept of CSE
MITE, Moodbidri
Syllabus

• Module – 1
Introduction to HTML, What is HTML and Where
did it come from?, HTML Syntax, Semantic
Markup, Structure of HTML Documents, Quick
Tour of HTML Elements, HTML5 Semantic
Structure Elements, Introduction to CSS, What is
CSS, CSS Syntax, Location of Styles, Selectors, The
Cascade: How Styles Interact, The Box Model, CSS
Text Styling.
• Module – 2
HTML Tables and Forms, Introducing Tables, Styling
Tables, Introducing Forms, Form Control Elements,
Table and Form Accessibility, Microformats, Advanced
CSS: Layout, Normal Flow, Positioning Elements,
Floating Elements, Constructing Multicolumn Layouts,
Approaches to CSS Layout, Responsive Design, CSS
Frameworks.
• Module – 3
JavaScript: Client-Side Scripting, What is JavaScript and
What can it do?, JavaScript Design Principles, Where
does JavaScript Go?, Syntax, JavaScript Objects, The
Document Object Model (DOM), JavaScript Events,
Forms, Introduction to Server-Side Development with
PHP, What is Server-Side Development, A Web Server’s
Responsibilities, Quick Tour of PHP, Program Control,
Functions
• Module – 4
PHP Arrays and Superglobals, Arrays, $_GET and $_POST
Superglobal Arrays, $_SERVER Array, $_Files Array, Reading/Writing
Files, PHP Classes and Objects, Object-Oriented Overview, Classes
and Objects in PHP, Object Oriented Design, Error Handling and
Validation, What are Errors and Exceptions?, PHP Error Reporting,
PHP Error and Exception Handling
• Module – 5
Managing State, The Problem of State in Web Applications, Passing
Information via Query Strings, Passing Information via the URL Path,
Cookies, Serialization, Session State, HTML5 Web Storage, Caching,
Advanced JavaScript and jQuery, JavaScript Pseudo-Classes, jQuery
Foundations, AJAX, Asynchronous File Transmission, Animation,
Backbone MVC Frameworks, XML Processing and Web Services,
XML Processing, JSON, Overview of Web Services.
Course Outcomes
• Adapt HTML and CSS syntax and semantics to build
web pages.
• Construct and visually format tables and forms using
HTML and CSS
• Develop Client-Side Scripts using JavaScript and Server-
Side Scripts using PHP to generate and display the
contents dynamically.
• Infer object oriented programming using JavaScript and
Server side programs using PHP.
• Inspect JavaScript frameworks like jQuery and
Backbone which facilitates developer to focus on core
features.
MODULE 1
What the Internet is?

• Internet is a huge collection of computers connected in a

communication network
• At the lowest level, since 1982, all connections use TCP/IP
• TCP/IP hides the differences among devices connected to the
Internet
Web or Internet?
– Web and internet are not the same thing
– The internet is a collection of computers and other devices to
communicate with each other
– The web is a collection of software and protocols that has been
installed on the computers on the internet
– The Web uses one of the protocols, http, that runs on the
Internet--there are several others (telnet, mailto, etc.)
What is an “Intranet”?
• One of the more common terms you might
encounter in web development is the term
“intranet” (with an “a”), which refers to an internet
network that is local to an organization or business.

• Only employees (or authorized external parties such

as customers or suppliers) have access to those
resources.
Client and Server

• Clients and Servers are programs that communicate with each

other over the Internet
• A Server runs continuously, waiting to be contacted by a Client
– Each Server provides certain services
– Services include providing web pages
• A Client will send a message to a Server requesting the service
provided by that server
– The client will usually provide some information, parameters,
with the request
Request-Response Loop
• Within the client-server model, the request-
response loop is the most basic mechanism on the
server for receiving requests and transmitting data in
response.
• The client initiates a request to a server and gets a
response that could include some resource like an
HTML file, an image or some other data
The Peer-to-Peer Alternative
• In the peer-to-peer model where each computer is
functionally identical, each node is able to send and
receive directly with one another.
• In such a model each peer acts as both a client and
server able to upload and download information.
The World-Wide Web

• A possible solution to the proliferation of different protocols being used

on the Internet
• Origins
– Tim Berners-Lee at CERN proposed the Web in 1989
• Purpose: to allow scientists to have access to many databases of
scientific work through their own computers
• The proposed new system was designed to allow a user anywhere
on the internet to search for and retrieve from servers
– Document form: hypertext
– Pages? Documents? Resources?
• We’ll call them documents
– Hypermedia – more than just text – images, sound, etc.
Web Browsers

• Browsers are clients - always initiate, servers react (although

sometimes servers require responses)
• Most requests are for existing documents, using HyperText Transfer
Protocol (HTTP)
– But some requests are for program execution, with the output
being returned as a document
Web Servers

• Provide responses to browser requests, either existing documents

or dynamically built documents
• Browser-server connection is now maintained through more than
one request-response cycle
• All communications between browsers and servers use Hypertext
Transfer Protocol (HTTP)
Routers
• The wireless router is perhaps the most visible
manifestation of the Internet in one’s home, in that it
is a device we typically need to purchase and install.
• Routers are in fact one of the most important and
ubiquitous hardware devices that makes the Internet
work.
• At its simplest, a router is a hardware device that
forwards data packets from one network to another
network.
Domain Name System (DNS)
• As elegant as IP addresses may be, human beings do
not enjoy having to recall long strings of numbers.
Instead of IP addresses, we use the Domain Name
System (DNS)
Domain name conversion
URL Components
• In order to allow clients to request particular
resources from the server, a naming
mechanism is required so that the client
knows how to ask the server for the file.
• For the web that naming mechanism is the
Uniform Resource Locator (URL).

http://www.funwebdev.com/index.php?page=17#article

Protocol Domain Path Query String Fragment

Query String
• They are the way of passing information such
as user form input from the client to the
server. In URL's they are encoded as key-value
pairs delimited by “&” symbols and preceded
by the “?” symbol
Keys

?username=john&password=abcdefg

Values
Delimiters
INTRODUCTION TO HTML
HTML
• HTML is defined as a markup language.
• A markup language is simply a way of annotating a
document in such a way to make the annotations
distinct from the text being annotated.
• The term comes from the days of print, when editors
would write instructions on manuscript pages that
might be revision instructions to the author or copy
editor.
• markup is a way to indicate information about the
content
• This “information about content” in HTML is
implemented via tags (aka elements).
• The markup in the previous slide consists of the red
text and the various circles and arrows on the one
page, and the little yellow sticky notes on the other
• HTML does the same thing but uses textual tags
What is the W3C?
• The W3C is the main standards organization for the
World Wide Web.
• To promotes compatibility the W3C produces
recommendations (also called specifications).
HTML: HyperText Markup Language
• HTML documents are simply text documents with
a specific form
– Documents comprised of content and markup tags
– Content: actual information being conveyed
– The markup tags tell the Web browser how to display
the page
– An HTML file must have an htm or html file extension
– An HTML file can be created using a simple text editor
History of HTML

1991 HTML first published

1995 HTML 2.0

After HTML 4.01 was released, focus shifted to
XHTML and its stricter standards.
1997 HTML 3.2

1999 HTML 4.01 XHTML 2.0 had even stricter standards than 1.0,
rejecting web pages that did not comply. It fell
2000 XHTML 1.0 out of favor gradually and was abandoned
completely in 2009.
2002
-2009 XHTML 2.0
HTML5 is much more tolerant and can handle
markup from all the prior versions.

Though HTML5 was published officially in 2012, it has

2012 HTML5
been in development since 2004.
HTML syntax
Elements and Attributes
• HTML documents are composed of textual content
and HTML elements.
• An HTML element can contain text, other elements,
or be empty. It is identified in the HTML document
by tags.
• HTML elements can also contain attributes. An HTML
attribute is a name=value pair that provides more
information about the HTML element.
• HTML tags are used to mark-up HTML elements
– Surrounded by angle brackets < and >
– HTML tags normally come in pairs, like <tagname>
(start tag) and </tagname> (end tag)
– The text between the start and end tags is the
element content
– Not case-sensitive
– Follow the latest web standards:
• Use lowercase tags
HTML Document Structure
• Entire document enclosed within <html> and </html>
tags
• <!DOCTYPE html>
The DOCTYPE tells the browser which type and version
of document to expect
• Two subparts:
– Head
• Enclosed within <head> and </head>
• Within the head, more tags can be used to specify title of the
page, meta-information, etc.
– Body
• Enclosed within <body> and </body>
• Within the body, content is to be displayed
• Other tags can be embedded in the body
Our First Example
• If you are running Windows, start Notepad
• Type in the following:

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

• Open this file using a browser,

What is HTML5?
• HTML5 is the newest version of HTML, only recently gaining
partial support by the makers of web browsers.
• It incorporates all features from earlier versions of HTML,
including the stricter XHTML.
• It adds a diverse set of new tools for the web developer to
use.
Goals of HTML5

• Support all existing web pages. With HTML5, there is no

requirement to go back and revise older websites.
• Reduce the need for external plugins and scripts to show
website content.
• Improve the semantic definition (i.e. meaning and purpose) of
page elements.
• Make the rendering of web content universal and
independent of the device being used.
• Handle web documents errors in a better and more consistent
fashion.
Other New Features in HTML5
• Built-in audio and video support (without plugins)
• Enhanced form controls and attributes
• The Canvas (a way to draw directly on a web page)
• Drag and Drop functionality
• Support for CSS3 (the newer and more powerful version of
CSS)
• More advanced features for web developers, such as data
storage and offline applications.
First Look at HTML5
Remember the DOCTYPE declaration from XHTML?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

In HTML5, there is just one possible DOCTYPE declaration and it is simpler:

<!DOCTYPE html>

Just 15 characters!

The DOCTYPE tells the browser which type and version of document to expect. This
should be the last time the DOCTYPE is ever changed. From now on, all future
versions of HTML will use this same simplified declaration.
The <html> Element
This is what the <html> element looked like in XHTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

lang="en">

Again, HTML5 simplifies this line:

<html lang="en">

The lang attribute in the <html> element declares which language the page content
is in. Though not strictly required, it should always be specified, as it can assist
search engines and screen readers.

Each of the world’s major languages has a two-character code, e.g. Spanish = "es", French =
"fr", German = "de", Chinese = "zh", Arabic = "ar".
The <head> Section

the HTML5 version:

<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>

</head>

Notice the simplified character set declaration, the shorter CSS stylesheet link text,
and the removal of the trailing slashes for these two lines.
Basic HTML5 Web Page
Putting the prior sections together, and now adding the <body> section and closing
tags, we have our first complete web page in HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
</head>
<body>
<p>HTML5 is fun!</p>
</body>
</html>

Let's open this page in a web browser to see how it looks…

Viewing the HTML5 Web Page

Even though we used HTML5, the page looks exactly the same in a web browser as it
would in XHTML. Without looking at the source code, web visitors will not know
which version of HTML the page was created with.
A QUICK TOUR OF HTML ELEMENTS
Basic Text Markup
 Text is normally placed in paragraph elements
1. Paragraph Elements
 The <p> tag breaks the current line and inserts a blank line
- the new line gets the beginning of the content of the paragraph - The
browser puts as many words of the paragraph’s content as will fit in each
line.
- The closing paragraph tag is required by XHTML
<!-- greet.hmtl A trivial document -->
<html>
<head> <title> Our first document </title>
</head>
<body> <p>
Greetings from your Webmaster!
</p> </body>
</html>
Basic Text Markup( conti….)
2. Line breaks
– The effect of the <br /> tag is the same as that of <p>, except for the blank
line
• No closing tag!
• Example of paragraphs and line breaks
On the plains of hesitation <p> bleach the
bones of countless millions </p> <br />
who, at the dawn of victory <br /> sat down
to wait, and waiting, died.

• Typical display of this text:

On the plains of hesitation

bleach the bones of countless millions

who, at the dawn of victory
sat down to wait, and waiting, died.
Basic Text Markup( conti….)
3. Headings
– Six sizes, 1 - 6, specified with <h1> to <h6>
– 1, 2, and 3 use font sizes that are larger than the
default font size
– 4 uses the default size
– 5 and 6 use smaller font sizes
<?xml version = ″1.0″?>
<!DOCTYPE html PUBLIC ″-//w3c//DTD XHTML 1.1//EN″
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

<!-- headings.html, An example to illustrate headings-->

<html xmlns = ″http://www.w3.org/1999/xhtml″>
<head> <title> Headings </title>
</head>
<body>
<h1> Aidan’s Airplanes (h1) </h1>
<h2> The best in used airplanes (h2) </h2>
<h3> "We’ve got them by the hangarful" (h3)
</h3>
<h4> We’re the guys to see for a good used
airplane (h4) </h4>
<h5> We offer great prices on great planes
(h5) </h5>
<h6> No returns, no guarantees, no refunds,
all sales are final (h6) </h6>
</body>
</html>
Basic Text Markup( conti….)

4. Blockquotes

-Content of <blockquote>
-To set a block of text off from the normal flow and appearance of text
-Browsers often indent, and sometimes italicize
Basic Text Markup( conti….)
6. Font Styles and Sizes (can be nested)
– Boldface - <b>
– Italics - <i>
– Larger - <big>
– Smaller - <small>
– Monospace - <code>
– Emphasis(italics)- <em>
– Strong (boldface)-<strong>
- <code>,<em>,<strong>- are called as content based style tags.
– Subscript - <sub>
– Superscript - <sup>
Basic Text Markup( conti….)
The <big> sleet <big> in <big> <i> Crete
</i><br /> lies </big> completely </big>
in </big> the street

The sleet in Crete

lies completely in the street

• These tags are not affected if they appear in the
content of a <blockquote>, unless there is a conflict
(e.g., italics)
– Superscripts and subscripts
• Subscripts with <sub>
• Superscripts with <sup>
Example: x₂³
Display: x23
Basic Text Markup( conti….)
<code> cost = quantity * price </code>
Display as:

Inline versus block elements:( 2 types of tags)

-Block elements CANNOT be nested in inline elements.
- the content of inline tag appears on the current line. Doesn’t include a line break.
- the content of block tag appears on a new line. includes a line break.

- All of this font size and font style stuff can be done with style sheets, but these tags are
not yet deprecated
Basic Text Markup( conti….)

7. Character Entities:
entities are the names for the character by the browser. An entity in a
document is replaced by its associated character by the browser.
Basic Text Markup( conti….)
8. Horizontal rules
– <hr /> draws a line across the display, after a line break

9. The meta element (for search engines):

Used to provide additional information about a document, with
attributes, not content.
- it has 2 attributes. 1. name 2. content
- the user makes the name as the value of the name attribute n
information through content attribute.
<meta name=“ keywords” content=“trees,stack,lists”/>
- Web search engines use the information provided with the meta
element to categorize the web document.
Links
<a>

Links are created using the <a> element (the “a”

stands for anchor).
A link has two main parts: the destination and the
label.

<a href="http://www.centralpark.com">Central Park</a>

Destination Label (text)

<a href="index.html"><img src="logo.gif" /></a>

Label (image)
Types of Links
You can use the anchor element to create a wide range of
links:
• Links to external sites (or to individual resources such
as images or movies on an external site).
• Links to other pages or resources within the current
site.
• Links to other places within the current page.
• Links to particular locations on another page.
• Links that are instructions to the browser to start the
user’s email program.
• Links that are instructions to the browser to execute a
Javascript function.
Different link destinations
Link to external site

<a href="http://www.centralpark.com">Central Park</a>

Link to resource on external site

<a href="http://www.centralpark.com/logo.gif">Central Park</a>

Link to another page on same site as this page

<a href="index.html">Home</a>

Link to another place on the same page

<a href="#top">Go to Top of Document</a>

Link to specific place on another page

<a href="productX.html#reviews">Reviews for product X</a>

Link to email

<a href="mailto://[email protected]">Someone</a>

Link to javascript function

<a href="javascript://OpenAnnoyingPopup();">See This</a>

Link to telephone (automatically dials the number

when user clicks on it using a smartphone browser)

<a href="tel:+18009220579">Call toll free (800) 922-0579</a>

Link Text
Links with the label “Click Here” were once a staple of
the web.
Today, such links are frowned upon, since:
• they do not tell users where the link will take them
• as a verb “click” is becoming increasingly inaccurate
when one takes into account the growth of mobile
browsers.
Instead, textual link labels should be descriptive.
“Click here to see the race results”
“Race Results” or “See Race Results”.
URL Absolute Referencing
• When referencing a page or resource on an
external site, a full absolute reference is
required: that is,
the protocol (typically, http://),
the domain name,
any paths, and then finally
the file name of the desired resource.
URL Relative Referencing
• Provide reference files within our site.
• This requires learning the syntax for so-called
relative referencing.
• When referencing a resource that is on the
same server as your HTML document, then
you can use briefer relative referencing.
• If the URL does not include the “http://” then
the browser will request the current server for
the file.
• If all the resources for the site reside within the
same directory (also referred to as a folder),
then you can reference those other resources
simply via their filename.
• However, most real-world sites contain too
many files to put them all within a single
directory.
• For these situations, a relative pathname is
required along with the filename.
• The pathname tells the browser where to
locate the file on the server.
Pathnames
Pathnames on the web follow Unix conventions.
• Forward slashes (“/”) are used to separate
directory names from each other and from file
names.
• Double-periods (“..”) are used to reference a
directory “above” the current one in the
directory tree.
URL Relative Referencing
Relative Link Type Example
Same Directory
• To link to a file within the same folder, simply use the file name.
Child Directory
• To link to a file within a subdirectory, use the name of the
subdirectory and a slash before the file name.
Grandchild/Descendant Directory
• To link to a file that is multiple subdirectories below the current
one, construct the full path by including each subdirectory name
(separated by slashes) before the file name.
Parent/Ancestor Directory
• Use “../” to reference a folder above the current one. If trying to
reference a file several levels above the current one, simply
string together multiple “../”.
Sibling Directory
• Use “../”to move up to the appropriate level, and then use the
same technique as for child or grandchild directories.
Root Reference
• An alternative approach for ancestor and sibling references is to
use the so called root reference approach. In this approach,
begin the reference with the root reference (the “/”) and then
use the same technique as for child or grandchild directories.
Note that these will only work on the server! That is, they will
not work when you test it out on your local machine.
Default Document
• Web servers allow references to directory names without file
names. In such a case, the web server will serve the default
document, which is usually a file called index.html (apache) or
default.html (IIS). Again, this will only generally work on the
web server.
Images

While the <img> tag is the oldest method for

displaying an image, it is not the only way.
For purely decorative images, such as background
gradients and patterns, logos, border art, and so on, it
makes semantic sense to keep such images out of the
markup and in CSS where they more rightly belong.
But when the images are content, such as in the
images in a gallery or the image of a product in a
product details page, then the <img> tag is the
semantically appropriate approach.
Images
Specifies the URL of the image to display Text in title attribute will be displayed in a popup
(note: uses standard relative referencing) tool tip when user moves mouse over image.

<img src="images/central-park.jpg" alt="Central Park" title="Central Park" width="80" height="40" />

Text in alt attribute provides a brief Specifies the width and height of
description of image’s content for users who image in pixels.
are unable to see it.
Lists
HTML provides three types of lists

Unordered lists. Collections of items in no particular

order; these are by default rendered by the browser as
a bulleted list.
Ordered lists. Collections of items that have a set
order; these are by default rendered by the browser as
a numbered list.
Definition lists. Collection of name and definition
pairs. These tend to be used infrequently. Perhaps the
most common example would be a FAQ list.
Lists
<ol>
<li>Introduction</li>
<li>Background</li>
Notice that the list item element <li>My Solution</li>
can contain other HTML <li>
elements <ol>
<li>Methodology</li>
<ul> <li>Results</li>
<li><a href="index.html">Home</a></li> <li>Discussion</li>
<li>About Us</li> </ol>
<li>Products</li> </li>
<li>Contact Us</li> <li>Conclusion</li>
</ul> </ol>
HTML5 Semantic Elements

•One substantial problem with modern, pre-HTML5 semantic

markup:
- most complex web sites are absolutely packed solid
with <div> elements.
•Unfortunately, all these <div> elements can make the
resulting markup confusing and hard to modify.
•Developers typically try to bring some sense and order to the
<div> chaos by using id or class names that provide some clue
as to their meaning.
Header and Footer
<header> <footer>

Most web site pages have a recognizable header and

footer section.
Typically the header contains
• the site logo
• title (and perhaps additional subtitles or taglines)
• horizontal navigation links, and
• perhaps one or two horizontal banners.
Header and Footer
<header> <footer>

The typical footer contains less important material,

such as
• smaller text versions of the navigation,
• copyright notices,
• information about the site’s privacy policy, and
• perhaps twitter feeds or links to other social sites.
Header and Footer

Both the HTML5 <header> and <footer> element can

be used not only for page headers and footers, they
can also be used for header and footer elements
within other HTML5 containers, such as <article> or
<section>.
<header>
<img src="logo.gif" alt="logo" />
<h1>Fundamentals of Web Development</h1>
...
</header>
<article>
<header>
<h2>HTML5 Semantic Structure Elements </h2>
<p>By <em>Randy Connolly</em></p>
<p><time>September 30, 2012</time></p>
</header>
...
</article>
Heading Groups
<hgroup>

The <hgroup> element can be used to group related

headings together within one container.

<header>
<hgroup>
<h1>Chapter Two: HTML 1</h1>
<h2>An Introduction</h2>
</hgroup>
</header>
<article>
<hgroup>
<h2>HTML5 Semantic Structure Elements </h2>
<h3>Overview</h3>
</hgroup>
</article>
Navigation
<nav>

The <nav> element represents a section of a page that

contains links to other pages or to other parts within
the same page.
Like the other new HTML5 semantic elements, the
browser does not apply any special presentation to
the <nav> element.
The <nav> element was intended to be used for major
navigation blocks, presumably the global and
secondary navigation systems.
Navigation
<header>
<img src="logo.gif" alt="logo" />
<h1>Fundamentals of Web Development</h1>
<nav role="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="browse.html">Browse</a></li>
</ul>
</nav>
</header>
Articles and Sections
<article> <section>

•The <article> element represents a section of content

that forms an independent part of a document or site;
for example, a magazine or newspaper article, or a
blog entry.
•The <section> element represents a section of a
document, typically with a title or heading.
Articles and Sections

According to the W3C, <section> is a much broader

element, while the <article> element is to be used for
blocks of content that could potentially be read or
consumed independently of the other content on the
page.
Sections versus Divs
How to decide which to use

•The WHATWG specification warns readers that the

<section> element is not a generic container element.
HTML already has the <div> element for such uses.
•When an element is needed only for styling purposes
or as a convenience for scripting, it makes sense to use
the <div> element instead.
•Another way to help you decide whether or not to
use the <section> element is to ask yourself if it is
appropriate for the element's contents to be listed
explicitly in the document's outline.
•If so, then use a <section>; otherwise use a <div>.
Figure and Figure Captions
<figure> <figcaption>

The W3C Recommendation indicates that the <figure>

element can be used not just for images but for any
type of essential content that could be moved to a
different location in the page or document and the
rest of the document would still make sense.
Figure and Figure Captions

•The <figure> element should not be used to wrap

every image.
•For instance, it makes no sense to wrap the site logo
or non-essential images such as banner ads and
graphical embellishments within <figure> elements.
•Instead, only use the <figure> element for
circumstances where the image (or other content) has
a caption and where the figure is essential to the
content but its position on the page is relatively
unimportant.
Figure and Figure Captions
<p>This photo was taken on October 22, 2011 with a Canon EOS 30D camera.</p>
<figure>
<img src="images/central-park.jpg" alt="Central Park" /><br/>
Figure could be <figcaption>Conservatory Pond in Central Park</figcaption>
moved to a </figure>
different <p>
location in
It was a wonderfully beautiful autumn Sunday, with strong sunlight and
document
expressive clouds. I was very fortunate that my one day in New York was
…
blessed with such weather!
But it has to
</p>
exist in the
document
(i.e., the
figure isn’t
optional)
Aside
<aside>

The <aside> element is similar to the <figure> element

in that it is used for marking up content that is
separate from the main content on the page.
But while the <figure> element was used to indicate
important information whose location on the page is
somewhat unimportant, the <aside> element
“represents a section of a page that consists of
content that is tangentially related to the content
around the aside element.”
The <aside> element could thus be used for sidebars,
pull quotes, groups of advertising images, or any other
grouping of non-essential elements.
What is CSS?
• CSS is a W3C standard for describing the
presentation (or appearance) of HTML elements.
• With CSS, we can assign
•font properties,
•colors,
•sizes,
•borders,
•background images,
•even the position of elements.
HTML is primarily concerned with content, rather than style
- However, tags have presentation properties, for which browsers have default
values

- The CSS1 cascading style sheet specification was developed in 1996 by W3C;
followed by CSS2 in 1998

- Provide the means to control and change presentation of HTML documents

- Not technically HTML, but can be embedded in HTML documents

- One of the most important capabilities of style sheets is that they allow you to
impose a standard style on a whole document, or even a whole collection of
documents

- Style is specified for a tag by the values of its properties

• CSS is a language in that it has its own syntax
rules.
• CSS can be added directly to any HTML
element (via the style attribute), within the
<head> element, or, most commonly, in a
separate text file that contains only CSS.
Benefits of CSS

• The degree of formatting control in CSS is significantly better than that

provided in HTML.

•Web sites become significantly more maintainable because all formatting

can be centralized into one, or a small handful, of CSS files.

•CSS-driven sites are more accessible.

•A site built using a centralized set of CSS files for all presentation will also
be quicker to download because each individual HTML file will contain less
markup.

•CSS can be used to adopt a page for different output mediums.

CSS Syntax
Rules, properties, values, declarations
• A CSS document consists of one or more style rules.
• A rule consists of a selector that identifies the HTML
element or elements that will be affected, followed
by a series of property and value pairs (each pair is
also called a declaration).
• A CSS rule-set consists of a selector and a declaration
block:
• The series of declarations is also called the
declaration block.
• A declaration block can be together on a
single line, or spread across multiple lines.
• The browser ignores white space
• Each declaration is terminated with a
semicolon.
• Each CSS declaration also contains a value for
a property
Style Locations
• CSS style rules can be located in three
different locations.
•Inline
•Embedded
•External
Inline Styles
• Style rules placed within an HTML element via
the style attribute

• An inline style only affects the element it is

defined within
Embedded StyleSheet
• Style rules placed within the <style> element
inside the <head> element
• While better than inline styles, using
embedded styles is also by and large
discouraged.
• Since each HTML document has its own
<style> element, it is more difficult to
consistently style multiple documents when
using embedded styles.
External Style Sheet
• Style rules placed within a external text file with the
.css extension

• This is by far the most common place to locate style

rules because it provides the best maintainability.
• When you make a change to an external style
sheet, all HTML documents that reference that
style sheet will automatically use the updated
version.
Selectors
• When defining CSS rules, you will need to first
need to use a select or to tell the browser which
elements will be affected.
CSS selectors allow you to select
•individual elements
•multiple HTML elements,
•elements that belong together in some way, or
•elements that are positioned in specific ways in
the document hierarchy.
1. Element Selectors
• Selects all instances of a given HTML element.
• Uses the HTML element name.
• You can select all elements by using the universal
element selector, which is the * (asterisk) character
example
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>

<p>Every paragraph will be affected by the style.</p>

<p>Me too!</p>
<p>And me!</p>

</body>
</html>
2. Grouping Selectors
• If you have elements with the same style definitions, You can select
a group of elements by separating the different element names
with commas
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p{
text-align: center;
color: red;
}
The above style can be written using group selector as:
h1, h2, p {
text-align: center;
color: red;
}
3. Class Selectors
• A class selector allows you to simultaneously
target different HTML elements regardless of
their position in the document tree.
• To select elements with a specific class, write a
period (.) character, followed by the name of
the class.
• In the example below, all HTML elements with
class="center" will be red and center-aligned
In the example below, all HTML elements with class="center" will
be red and center-aligned
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">"WELCOME"</h1>
<p class="center">Welcome to programming the web.</p>
<p> Introduction to HTML </p>

</body>
</html>
4. Id Selectors
• 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.
The style rule below will be applied to the HTML
element with id="para1":
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>

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

<p>This paragraph is not affected by the style.</p>

</body>
</html>
• Id selectors should only be used when referencing a
single HTML element since an id attribute can only
be assigned to a single HTML element.
• Class selectors should be used when (potentially)
referencing several related elements.
5. Attribute selectors
• Selects html elements either by presence of element attribute or by value of an attribute
<head>...... 1. [title]
<style> 2. a[title=”posts from this country”]
[title] { 3. [title~=”countries”]
cursor: help; 4. a[href^=”mailto”]
padding-bottom: 3px; 5. Img[src*=”flag”]
..... 6. a[href$=”.pdf]
}
</style> </head>
<body>
<div>
<img src=“.....” title=“flags” />
<h2><a href=“....” title=“post from “>country </a> </h2>
<p>this is our country flag</p>
<div>
<image src=“.....” title=“....” />
<image src=“.....” title=“....” />
<image src=“.....” title=“....” />
</div> </div> </body>
6. Pseudo element and pseudo –class selector
• A pseudo element selector is a away to select something that does not exist
explicitly as an element in the HTML document tree
<style>
a:link { :checked
text-decoration: underline; :first-child
color: blue; :first-letter
} :first-line
a:visited { other common elements
text-decoration: underline;
color:purple;
}
a:hover {
text-decoration: none;
font –weight: bold;
}
a: active {
background-color: yellow;
}
</style>
7. Contextual selector

• Allows to select elements based on their ancestors, descendants, or siblings.

Syntax:
div p {....} //(p element of div element)
#main div p:first-child {...} //(first p element of div element within id=main)

1. Descendant div p
2. Child div>h2
3. Adjacent sibling h3+p
4. General sibling h3~p
THE CASCADE: HOW STYLES INTERACT
• Why Conflict Happens
Because
 there are three different types of style sheets
(author created, user-defined, and the default
browser style sheet),
 author-created stylesheets can define multiple
rules for the same HTML element,
• CSS has a system to help the browser determine
how to display elements when different style
rules conflict.
Cascade
• The “Cascade” in CSS refers to how conflicting
rules are handled.
• The visual metaphor behind the term cascade
is that of a mountain stream progressing
downstream over rocks.
• The downward movement of water down a
cascade is meant to be analogous to how a
given style rule will continue to take
precedence with child elements.
Cascade Principles
• CSS uses the following cascade principles to
help it deal with conflicts:
inheritance,
specificity,
location
Inheritance
• Many (but not all) CSS properties affect not
only themselves but their descendants as well.
• Font, color, list, and text properties are
inheritable.
• Layout, sizing, border, background and spacing
properties are not.
div {
font-weight: bold; //inherited
margin: 50px; //not inherited
border: 1pt solid green;
}
P{
border: inherit;
margin: inherit;
}
Specificity
• Specificity is how the browser determines
which style rule takes precedence when more
than one style rule could be applied to the
same element.
• The more specific the selector, the more it
takes precedence (i.e., overrides the previous
definition).
body {
font-weight: bold;
color: red;
} ex: <body>
div { <p>.....</p>
font-weight: normal; <div>
color: magenta; <p>.....
} <p>...
P{ </div>
color:green; <div>.....</div>
}
.last {
Color: blue;
}
Specificity algorithm

Element selector
Descendant selector
Class and attribute selector overrides
Id selector
Id +additional selectors
Inline style attributes
Location
• When inheritance and specificity cannot
determine the precedence of style, location is
used
• Principle of location is that, when rules have
the same speficity, then latest are given more
weight
<head>
<link rel=“stylesheet” href=“stylesA.css” />
<link rel=“stylesheet” href=“stylesww.css” />
<style>
#example {
color: orange;
color: meganta;
}
</style>
</head>
<body>
<p id=“example” style=“color:red;”>
Sample text </p>
</body>
THE BOX MODEL
• In CSS, all HTML elements exist within an element
box.
• It is absolutely essential that you familiarize yourself
with the terminology and relationship of the CSS
properties within the element box.
• Content - The content of the box, where text and
images appear
• Padding - Clears an area around the content. The
padding is transparent
• Border - A border that goes around the padding and
content
• Margin - Clears an area outside the border. The
margin is transparent
background
• background :- for multiple multiple values in one
property
• background-attachment :- fixed, scroll
• background-color :-
• background-image :- multiple image in css3
• background-position :-bottom, center, left, right
• background-size :- in css3 also for image
• background-repeat :- repeat, repeat-x, repeat-y,
no-repeat
border
• border :- for multiple multiple values in one
property
• border -style :- solid, dotted, dashed, double etc
• border -width :- thin, medium etc or in units.
• border -color :- color units
• border -radius :-radius of rounded corner
• border -image :- url of image to use border
1. p { 2. p { 3. p {
border: solid 1pt red; border: solid 1pt red; border: solid 1pt red;
margin:0; margin:30px; margin:30px;
padding:0; padding:0; padding:30px;
} } }

Ex:
<div>
<p>......</p> div {
<p>.....</p> border: dotted 1pt green;
</div> padding:0;
<div> margin: 90px 20px;
<p>....</p> }
<p>......</p> p{
</div> border: solid 1pt red;
padding:0;
margin: 90px 20px;
}
• Calculate true element width and height for the following:
div {
box-sizing: content-box;
width:200px;
height:100px;
padding:5px;
margin: 10px;
border: dotted 2pt green;
}
</div>

• Limitation of height and overflow

p{
background-color: silver;
width: 200px;
height: 100px;
}
• overflow: visible; :hidden; :scroll; :auto;
• Box sizing via percents
width:100%, height:100%
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

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

<div>This text is the actual content of the box. We have added a 25px padding, 25px margin and a 25px
green border.
</body>
</html>
TEXT STYLING
• Text Properties
• CSS provides two types of properties that affect text.
•font properties that affect the font and its appearance.
•paragraph properties that affect the text in a similar
way no matter which font is being used.
• font
• font-family
• font-size :-1em=1*16pixel
• font-style
• font-variant
• font-weight
• Specifying the Font-Family