Html

The Internet
 The Internet is a global system
of interconnected computer
networks
 Uses(TCP/IP) to serve billions of
users worldwide

Evolution of the Internet and World
Wide Web
ARPANET
• Research Project of MIT funded by ARPA (
Advanced Research Projects Agency of the
department of Defense).
Goal
• To allow multiple users to send and receive
information simultaneously over the same
communication paths.

Evolution of the Internet and World
Wide Web
• Internet born in 1969 - called ARPANET
• 1969 ARPANET was connection of computers
at UCLA, Stanford

The World Wide Web
• In 1989, Tim Berners-Lee had
suggested a way to let all
users, but particularly
scientists, browse each others’
papers on the Internet.
• He developed HTML, URLs,
and HTTP.

The Internet and Web: What’s the
Difference?
The Internet ->physical
connection of millions of
networks.
The Web uses ->Internet for
its existence.
The Web consists of
hypertext embedded on
Web pages that are hosted
on Web sites.

Web 1.0: The shopping carts & static web
• 1990s & early 2000s.
• “read-only web.”
• Limited interaction between sites and web
user.
• Supports only static pages.
• first shopping cart applications, which most e-
commerce website owners

Web 2.0: The writing and participating web
• “read-write” web
• It allows user to use the web as platform to
create collaborative, community based sites
like social networking sites, blogs, etc

Web 2.0: The writing and participating web
• Few remarkable developments of Web 2.0 are
Twitter, YouTube, eZineArticles, Flickr and
Facebook.
• It introduce Rich Internet Applications(RIAs)
– responsiveness
– rich features & functionality
– Look & Feel

Web 3.0: The semantic executing web
• “read-write-execute” web
• It supports interactive services and machine to
machine interactions.
• Semantic markup refers to the
communication gap between human web
users and computerized applications.

Web 3.0: The semantic executing web
• A web service is a software system designed
to support computer-to-computer interaction
over the Internet.
• By combining a semantic markup and web
services, the Web 3.0 promises the potential
for applications that can speak to each other
directly.

Web 4.0: “Mobile Web”
• The next step is not really a new version, but is
a alternate version of what we already have.
• Web needed to adapt to it’s mobile
surroundings.
• Web 4.0 connects all devices in the real and
virtual world in real-time.

Web 5.0: Open, Linked and Intelligent Web =
Emotional Web
• read-write-execution-concurrency web.
• Web 5.0 still is in developing mode
• Web 5.0 will be about the (emotional)
interaction between humans and computers.
• The interaction will become a daily habit for a
lot of people based on neuro technology

Basic Web Architecture
• The web is a two-tiered architecture.
– A web browser displays information content,
– and a web server that transfers information to the
client.

Tiered Web Architectures
• Web applications are usually implemented
with 2-tier, 3-tier, or multitier (N-tier)
architectures
• Each tier is a platform (client or server) with a
unique responsibility

2-Tier C-S Architecture
• Tier 1: Client platform, hosting a web browser
• Tier 2: server platform, hosting all server
software components

2-Tier Characteristics
• Advantage:
– Inexpensive (single platform)
• Disadvantages
– Interdependency (coupling) of components
– No redundancy
– Limited scalability
• Typical application
– 10-100 users
– Small company or organization, e.g., law office, medical
practice, local non-profit

Web Browser
• The primary purpose is to
bring information resources to
the user.
• An application for retrieving,
presenting, and traversing
information resources.

Web Server
• The term web server or webserver can mean
one of two things:
– A computer program that accepts HTTP requests
and return HTTP responses with optional data
content.
– A computer that runs a computer program as
described above.

HTML
HyperText Markup Language

HTML
• Document layout
language (not a
programming
language)
• Defines structure and
appearance of Web
pages

URI
Universal Resource Identifier

URI
• URLs are location dependent
• It contains four distinct parts: the protocol type, the
machine name, the directory path and the file name.
• There are several kinds of URLs: file URLs, FTP URLs,
and HTTP URLs.

HTTP
HyperText Transfer Protocol

HTTP
• HTTP is a request/response standard of a client and a
server.
• Typically, an HTTP client initiates a request.
• Resources to be accessed by HTTP are identified
using Uniform Resource Identifiers (URIs).

Status Codes
The first line of the HTTP response is called
the status line.
The way the user agent handles the response
primarily depends on the code and
secondarily on the response headers.
Success: 2xx
Redirection: 3xx
Client-Side Error: 4xx
Server-Side Error: 5xx

3-Tier C-S Architecture
• Tier 3 takes over part of the server function
from tier 2, typically data management

Database-driven Website Architecture

Server-side processing
• In server-side processing, the Web server:
– Receives the dynamic Web page request
– Performs all of the processing necessary to create
the dynamic Web page
– Sends the finished Web page to the client for
display in the client’s browser

Client-side processing
• Client-side processing
– Some processing needs to be “executed” by the
browser, either to form the request for the
dynamic Web page or to create or display the
dynamic Web page.
Eg. Javascript code to validate user input

3-Tier Characteristics
• Advantages
– Improved performance, from specialized hardware
– Improved scalability
• Disadvantages
– No redundancy
• Typical Application
– 100-1000 users
– Small business or regional organization, e.g., specialty retailer, small
college

Multitier Application Architecture
Client-Server Architecture
• The architecture of a computer system is the
high-level (most general) design on which the
system is based
– Client: a component that makes requests
clients are active initiators of transactions
– Server: a component that satisfies requests
servers are passive and react to client requests

Multitier C-S Architecture
• A multitier (N-tier) architecture is an expansion of
the 3-tier architecture
• Web-based applications are often multitier
applications
• Also called n-tier applications
• Divides functionality into separate tiers (i.e.,
logical groupings of functionality).

Multitier Application Architecture (cont.)
• 3 tier’s are:
– Bottom tier
– Middle tier
– Top tier
• Bottom tier:
– Also called the data tier or the information tier
– Maintains the application’s data.
– This tier typically stores data in a relational database management system
(RDBMS).

Characteristics Summary
2-Tier
3-Tier
N-Tier
10
100
1000
users
•large e-commerce, business, or
organization
•small e-commerce, regional
business or organization
•local business or organization
capacity
scalability
redundancy
cost

Server and Client side processing
• Server-side processing
– PHP
– ASP
– ASP.NET
– Perl
– J2EE
– Python
– Ruby
• Client-side processing
– CSS
– HTML
– JavaScript

• HTML5 (HyperText Markup Language 5)
– markup language that specifies the structure and content of
documents that are displayed in web browsers
• Some basics :
– Tables ->structuring information from databases
– forms ->collecting information from web-page visitors
– internal linking for easier page navigation
– meta elements for specifying information about a document
Basics of HTML5

We’ll create HTML5 documents
• HTML5 markup text in a text editor (such as
Notepad, TextEdit, vi, emacs)
• Saving it with the .html or .htm filename
extension.
• web servers store HTML5 documents.
• Clients -> web browsers running on your local
computer or Smartphone
• Request specific resources
Editing HTML5

• This first example displays the message
Welcome to HTML5! in the browser.
First HTML5 Example

Browsers render the page in standards mode
• What version of HTML the page is written in
Document Type Declaration

To improve readability and describe the
content of a document.
The browser ignores comments when your
document is rendered.
Comments start with <!-- and end with --
>.
Comments

The html element has:
– head section (represented by the head element)
– body section (represented by the body element).
Head section -> such as the character set (UTF-8,
the most popular character-encoding scheme for
the web
Also has CSS3 style sheets & scripts for creating
dynamic web pages.
Head section

 page’s content, which the browser displays when the
user visits the web page.
Body Section

 A start tag consists of the element name in angle brackets
– For example, <html>
 An end tag - forward slash (/) in angle brackets
– For example, </html>
 Each attribute has a name and a value separated by an equals
sign (=).
Start & End Tag

Nested element, because it’s enclosed in the
head element’s start and end tags.
The title element describes the web page.
Title Element

All text placed between the <p> and </p>
tags forms one paragraph.
Paragraph Element

• h1 through h6
– Heading element h1-> largest font.
– Each successive heading element (i.e., h2, h3, etc.)
is rendered in a progressively smaller font.
Headings

• A hyperlink references or links to other
resources, such as HTML5 documents and
images.
• Web browsers typically underline text
hyperlinks and color them blue by default.
Linking

strong element ->high importance.
Links are created using the a (anchor)
element.
Attribute href (hypertext reference)
specifies a resource’s location, such as
– a web page or location within a web page
– a file
– an e-mail address
Linking (Cont.)

Hyperlinking to an E-Mail Address
– Anchors can link to an e-mail address using a
mailto: URL
• When a user clicks this type of anchored link, most
browsers launch the default e-mail program
• e.g., Mozilla Thunderbird, Microsoft Outlook or
Apple Mail
• To write an e-mail message to the linked address.
Linking (Cont.)

The most popular image formats used by web
developers today are PNG (Portable Network
Graphics) and JPEG (Joint Photographic Experts
Group).
Users can create images using specialized
software, such as Adobe Photoshop Express
(www.photoshop.com), G.I.M.P.
(www.gimp.org), Inkscape (www.inkscape.org)
and many more.
Images may also be acquired from various
websites, many of which offer royalty-free
images.
Images

The img element’s src attribute specifies an
image’s location
Every img element must have an alt
attribute, which contains text that is displayed if
the client cannot render the image
– The alt attribute makes web pages more accessible
to users with disabilities, especially vision
impairments
– Width and height are optional attributes
 If omitted, the browser uses the image’s actual width and
height
 Images are measured in pixels
Images (cont.)

<!DOCTYPE html>

<html>
<head>
<meta charset = "utf - 8">
<title>image </title>
</head>
<body>
<p>
<img src = "C:UserszsamsungDesktop " width ="420" height =
"430" alt =" sample pic">
</p>
</body>
</html>

Void Elements
 Some HTML5 elements (called void elements)
contain only attributes and do not mark up text (i.e.,
text is not placed between a start and an end tag).
 You can terminate void elements (such as the img
element) by using the forward slash character (/)
inside the closing right angle bracket (>) of the start
tag.
 For example, lines 15–16 of Fig. 2.6 could be written
as follows:
<img src = "jhtp.png" width = "92" height = "120"
alt = "Java How to Program book cover" />
Images (Cont.)

Using Images as Hyperlinks
By using images as hyperlinks, you can create
graphical web pages that link to other
resources.
Clicking an image in this example takes the
user to a corresponding web page—one of
the other examples in this chapter.
Images (Cont.)

• Unordered list element ul
– creates a list in which each item in the list begins
with a bullet symbol (typically a disc)
– Each entry is an li (list item) element. Most
web browsers render these elements with a line
break and a bullet symbol at the beginning of
the line.
Lists

Nested Lists
Lists may be nested to represent hierarchical
relationships, as in a multi-level outline.
Figure 2.11 demonstrates nested lists and
ordered lists.
The ordered-list element ol creates a list in
which each item begins with a number.
Lists (Cont.)

Lists (Continued)
Definition Lists:
• Used to specify list of terms and their definitions
• <dl> tag is used, <dt> is used to specify definition
term and <dd> is used to give definitions
Definition term – displayed on the left margin
Definitions – shown on the line or lines following the
term, which are indented

Lists (Continued)
Ex: Definition Lists
<dl>
<dt>80</dt>
<dd>HTTP</dd>
<dt>21</dt>
<dd>FTP</dd>
</dl>
o/p:
80
HTTP
21
FTP

Text Markup (Continued)
Block Quotations:
• Looks different from other contents
1. Block of text is indented – both sides(left,
right)
2. Block is set in italic
• <blockquote> tag is used

Font styles and sizes:
• <b>, <i> tags can be used
• <big>,<small> tags specifies relative sizes, can
be nested
• <big> - font size is larger than preceding text
• <small> - does the opposite of <big>
• <sub>, <sup> - subscript and superscript tags

Tags Categorization
1. Block level tags – breaks the current line, content appears on
a new line
Ex: <hn>, <blockquote>, <p>, <ul>, <ol>, <li>, <table>,
<form> and etc.
2. Inline/text level tags – content appears on the current line
Physical <b>,<i>,<big>,<small>,<font>,<sup>,<sub>
Logical <em>,<strong>
Hypertext Links  <a>
Images  <img>
3. Character level elements – special characters

Character Entities:
• Provides collection of special characters
• Can’t be typed directly
• Represented as entities – (& , < , >)
 entities are replaced by associated
characters by the browser.
• In HTML5 special characters can be included
directly.

Meta Element:
• To provide additional information about a document
• No content, all are specified through attributes
• Name and content attributes are used, no closing tag
• Common value for name is “keywords” -> the value
of content attribute is keywords (document related)
• Name is “description” ->
Ex: <meta name=“keywords” content=“binary trees,
linked lists, stacks” />

– Tables are frequently used to organize data into rows and
columns.
– The table element defines an HTML5 table
– The summary attribute summarizes the table’s contents
and is used by speech devices to make the table more
accessible to users with visual impairments.
– The caption element specifies a table’s title.
– It’s good practice to include a general description of a
table’s information in the table element’s summary
attribute—one of the many HTML5 features that make
web pages more accessible to users with disabilities.
 Speech devices use this attribute to make the table more
accessible to users with visual impairments.
Tables

<body>
<table border ="1">
<caption><strong>SAVINGS TABLE </strong></caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>Jan</td>
<td> $100</td>
</tr>
<tr>
<td>March</td>
<td> $800</td>
</tr>
</table>
</body>
</html>

• A table can be split into three distinct sections:
– Head (thead element)
• Table titles
• Column headers
– Body (tbody element)
• Primary table data
– Table Foot (tfoot element)
• Calculation results
• Footnotes
• Above body section in the code, but displays at the bottom
in the page
Tables (Cont.)

• tr Element
– Defines individual table rows
– Element th
• Defines a header cell
• Td Element
– Contains table data elements
Tables (Cont.)

Attributes of <th> tag
• Used to combine multiple rows and columns.
• Multiple level rows are combined with rowspan and columns are
merged with colspan attribute
Ex: <tr>
<th rowspan=“3” >Weight</th>
<th colspan=“3”>Fruits</th>
</tr>
<tr>
<th>Orange</th>
<th>Apple</th>
<th>Strawberry</th>
</tr>
<tr>
<td> 3 Kg</td>
<td> 1 Kg</td>
<td> 0.5 Kg</td>
</tr>

Attributes of table tags
• align and valign
• align has three values left, right and center
• Used for horizontal placement of contents
• Default alignment of <th> cell is center
• Default alignment of <td> cell is left
• align is specified in <tr> - applies to all cells in a row
• align is included in <th> or <td>, it only applies to
that cell

Attributes of table tags
• <valign> is used with <th> and <td>
• Possible values are top and bottom
• Default alignment for both heading and data is center
cellpadding and cellspacing
• Used in <table> tag
cellpadding – to specify the space between the content of a
cell & the inner walls of the cell
cellspacing – to specify the distance between the cells

Table Sections
• Three parts – header, body and footer
• Denoted as thead, tbody and tfoot in XHTML
• Header includes column labels
• Body includes data and row labels
• Footer contains total for the column data
• Table can have multiple body sections, browsers
delimit them with thicker horizontal lines

Using rowspan and colspan with Tables
Following figure introduces two new attributes
that allow you to build more complex tables.
You can merge data cells with the rowspan
and colspan attributes
– The values of these attributes specify the number of
rows or columns occupied by the cell.
– Can be placed inside any data cell or table header
cell.
Tables (Cont.)

• HTML5 provides forms for collecting
information from users.
• Following simple form that sends data to the
web server for processing.
Forms

method Attribute of the form Element
A form is defined by a form element
– Attribute method specifies how the form’s data is
sent to the web server.
– Using method = "post" appends form data to the
browser request, which contains the protocol (HTTP)
and the requested resource’s URL.
– The other possible value, method = "get",
appends the form data directly to the end of the URL
of the script, where it’s visible in the browser’s
Address field.
– The action attribute of the form element specifies
the script to which the form data will be sent
Forms (Cont.)

action Attribute of the form Element
– The action attribute of the form element
specifies the script to which the form data will be
sent.
– Since we haven’t introduced server-side
programming yet, we set this attribute to
http://www.deitel.com for now.
– input elements that specify data to provide to
the script that processes the form (also called the
form handler).
– An input’s type is determined by its type
attribute.
Forms (Cont.)

Hidden Inputs
 Forms can contain visual and nonvisual components.
 Visual components include clickable buttons and other
graphical user interface components with which users
interact.
 Nonvisual components, called hidden inputs, store any data
that you specify, such as e-mail addresses and HTML5
document file names that act as links.
Forms (Cont.)

text input Element
 The text input inserts a text field into the form, which
allows the user to input data.
 The label element provides users with information about
the input element’s purpose
 The size attribute specifies the number of characters
visible in the text field.
 Optional attribute maxlength limits the number of
characters input into a text field.
Forms (Cont.)

submit and reset input Elements
 The submit input element is a button.
– When the submit button is pressed, the form’s data is sent to the
location specified in the form’s action attribute.
 The value attribute sets the text displayed on the button.
 The reset input element allows a user to reset all form
elements to their default values.
Forms (Cont.)

Basic Form Fields
input
• type
• text, submit and reset
input
• type
• checkbox
• checked
Texta
rea
• rows
• cols
select
• selected
• option

New HTML5 Form input Types
• These are not yet universally supported by all
browsers.

• Input type color
• Input type date
• Input type datetime
• Input type datetime local
• Input type time
• Input type month
• Input type week

• Input type email
• Input type search
• Input type url
• Input type number
• Input type range
• Input type tel

input Type color
• The color input type enables the user to enter
a color.
• Earlier days, most browsers render the color
input type as a text field in which the user
can enter a hexadecamal code or a color
name.
• Now, when you click a color input,
browsers will likely display a color picker
similar to the Microsoft Windows color dialog.

input Type date
• The date input type enables the user to enter a date in the
form yyyy-mm-dd.
• Firefox and Internet Explorer display a text field in which a
user can enter a date such as 2012-01-27.
• Chrome and Safari display a spinner control—a text field with
an up-down arrow () on the right side—allowing the user to
select a date by clicking the up or down arrow.
• The start date is the current date.
• Opera displays a calendar from which you can choose a date.
• In the future, when the user clicks a date input, browsers
are likely to display a date control

input Type datetime
• The datetime input type enables the user to
enter a date (year, month, day), time (hour,
minute, second, fraction of a second) and the
time zone set to UTC (Coordinated Universal
Time or Universal Time, Coordinated).
• Currently, most of the browsers render
datetime as a text field; Chrome renders an
up-down control and Opera renders a date
and time control.

input Type week
• The week input type enables the user to select a year and
week number in the format yyyy-Wnn, where nn is 01–
53—for example, 2012-W01 represents the first week of
2012. Internet Explorer, Firefox and Safari render a text
field.
• Chrome renders an up-down control.
• Opera renders week control with a down arrow that, when
clicked, brings up a calendar for the current month with the
corresponding week numbers listed down the left side.

input Type datetime-local
• The datetime-local input type enables the
user to enter the date and time in a single
control.
• The data is entered as year, month, day, hour,
minute, second and fraction of a second.
• Internet Explorer, Firefox and Safari all display
a text field.
• Opera displays a date and time control.

input Type month
• The month input type enables the user to
enter a year and month in the format yyyy-
mm, such as 2012-01.
• If the user enters the data in an improper
format (e.g., January 2012) and submits
the form, a callout stating that an invalid value
was entered appears.

input Type time
• The time input type enables the user to enter
an hour, minute, seconds and fraction of
second.
• The HTML5 specification indicates that a time
must have two digits representing the hour,
followed by a colon (:) and two digits
representing the minute.

Input type email
• autofocus
• required
• placeholder
• validation

Validation
• The new HTML 5 input types are self validating on the
client side, eliminating the need to add complicated
JavaScript code to your web pages to validate user input,
reducing the amount of invalid data submitted and
consequently reducing Internet traffic between the server
and the client to correct invalid input.
• The server should still validate all user input.
• When a user enters data into a form then submits the form
the browser immediately checks the self-validating
elements to ensure that the data is correct .

Form non validate
• If you want to bypass validation, you can add
the formnovalidate attribute to input type
submit in line 101:
<input type = "submit" value =
"Submit" formnovalidate />

input date range
• The min attribute sets the minimum valid number.
• The max attribute sets the maximum valid number.

Page-Structure Elements
• HTML5 introduces several new page-structure
elements that meaningfully identify areas of
the page as headers, footers, articles,
navigation areas, asides, figures and more.

header Element
• The header element creates a header for this page that
contains both text and graphics.
• The header element can be used multiple times on a
page and can include HTML headings (<h1> through
<h6>), navigation, images and logos and more.
time Element
• The time element, which does not need to be enclosed in a
header, enables you to identify a date (as we do here), a
time or both.

nav Element
• The nav element groups navigation links.
• For example, Recent Publications can be
listed with ul element and li element that
may link to the corresponding web page for
each book.

figure Element and figcaption Element
• The figure element describes a figure (such as
an image, chart or table) in the document so
that it could be moved to the side of the page
or to another page.
• The figcaption element provides a caption for
the image in the figure element.

article Element
• The article element describes standalone
content that could potentially be used or
distributed elsewhere, such as a news article,
forum post or blog entry.
• You can nest article elements. For
example, you might have reader comments
about a magazine nested as an article
within the magazine article.

summary Element and details Element
• The summary element displays a right-
pointing arrow next to a summary or caption
when the document is rendered in a browser .
• When clicked, the arrow points downward
and reveals the content in the details element.

section Element
• The section element describes a section of a
document, usually with a heading for each
section—these elements can be nested.
• In this example, we broke the document into
three sections—the first is Recent
Publications.
• The section element may also be nested in
an article.

aside Element
• The aside element describes content that’s
related to the surrounding content (such as an
article) but is somewhat separate from
the flow of the text.
• For example, an aside in a news story might
include some background history.

meter Element
• The meter element renders a visual representation of a
measure within a range .
• In this example, we show the results of a recent web survey
we did.
• The min attribute is "0" and a max attribute is "54" —
indicating the total number of responses to our survey.
• The value attribute is "14", representing the total
number of people who responded “yes” to our survey
question.

footer Element
• The footer element describes a footer—
content that usually appears at the bottom of
the content or section element.
• In this example, we use the footer to
describe the copyright notice and contact
information.

Text-Level Semantics: mark Element and
wbr Element
• The mark element highlights the text that’s
enclosed in the element.
• The wbr element indicates the appropriate
place to break a word when the text wraps to
multiple lines.
• You might use wbr to prevent a word from
breaking in an awkward place.

Brief History of Web content
• Web started to exchange information.
• Text without structure rapidly became
unmangeable.
• HTML – Gave Structure to the text.
• Up until 1996, the standard method for
creating and distributing information via a
website.

HTML Formatting
• Plain text is dull !
• HTML allows formatting of text.
Red Text
<p> <font color = “red” > Red Text </font> </p>
Blue Centered Text
<p align=“center”> <font color=“blue”> Blue
Centered Text </font> </p>

Styles Solved a Big Problem
•HTML was never intended to contain tags for formatting a
document.
•HTML was intended to define the content of a document
•To solve this problem, the World Wide Web Consortium (W3C)
created CSS.
•All browsers support CSS today.
•CSS Saves a Lot of Work!
•CSS defines HOW HTML elements are to be displayed.

HTML and CSS Difference
Structure
Templates
can be used
HTML
Layout
Presentation
– colors,
fonts
CSS

Separating Styles from Web
Content

Placement of Styles
• Inline Styles – One time Style – High Priority
• Internal Styles / Embedded Styles
• External Styles – First Choice – Least Priority

CSS Syntax
A CSS rule has two main parts: a selector, and one or more
declarations:

CSS Comments
•Comments are used to explain your code, and may help you
when you edit the source code at a later date.
•Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with "*/", like this:
/*This is a comment*/
p
{
text-align:center; /*This is another comment*/
color:black;
font-family:arial;
}

Inline Styles
•Individual elements can have the styles applied
within the HTML tag itself.
Red Text
<p style = “color: Red”> Red Text </p>
Blue Centered Text
<p style = “color: Blue;text-align:center”> Blue
Centered Text </p>
SAME DISADVANTAGES – BETTER INT/EXT

Internal / External Style - Syntax
Selector
{
property1: value1;
property2: value2;
. . .
}

Internal Styles
<html>
<head>
<style>
p Html Selector
{
text-align : center;
color : Blue;
}
</style>
</head>
<body>
<p> Blue Centered Text </p>
</body>
</html>

Internal Styles
<body>
<h1> <font face = “sans-serif” color = “#3366CC> First Title
</font> </h1>
<p> …. </p>
<h2> <font face = “sans-serif” color = “#3366CC> Second Title
</font> </h2>
<p> …. </p>
<h2> <font face = “sans-serif” color = “#3366CC> Third Title
</font> </h2>
<p> …. </p>
</body>

Internal Styles
<head>
<style>
h1,h2
{
font-family: sans-serif;
color: #3366CC;
}
</style>
</head>

External Style
• Disadvantages of Internal Styles – Placing the
set of codes in all webpages.
• Saved as .css
<link rel = “stylesheet” type = “text/css”
href = “ styles.css” />

Class Selector
• Disadvantage of HTML Selector
• Advantage of Class Selector
• Syntax:
.classname
{
property : value;
. . .
}
<p class = classname> .. </p>

id selector
• Syntax:
#par
{
property : value;
. . .
}
<p id = “par”> .. </p>

CSS Syntax:
Selector Strings
• Single element type:
• Multiple element types:
• All element types:
• Specific elements by id:

CSS Syntax:
Selector Strings
• Elements belonging to a style class:
– Referencing a style class in HTML:
• Elements of a certain type and class:
this span belongs to three style classes

CSS Syntax:
Selector Strings
• Source anchor elements:
• Element types that are descendents:
pseudo-classes

CSS Syntax:
Selector Strings
• Source anchor elements:
• Element types that are descendants:
rule applies to li element that is
part of the content of an ol element
that is part of the content of a ul element

CSS STYLING
• The background-color property specifies the background
color of an element.
Example: body {background-color:#b0c4de;}
The background color can be specified by:
* name - a color name, like "red"
* RGB - an RGB value, like "rgb(255,0,0)"
* Hex - a hex value, like "#ff0000“

Background Image
• The background-image property specifies an image to use as
the background of an element.
• By default, the image is repeated so it covers the entire
element.
The background image for a page can be set like this:
Example:
body {background-image:url('paper.gif');}

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
Background - Shorthand property
The shorthand property for background is simply
"background":
Example:
body {background:#ffffff url('img_tree.png') no-repeat
right top;}

Text Color
• The default color for a page is defined in the body selector.
Example : body {color:blue;} h1 {color:#00ff00;}
Text Alignment
The text-align property is used to set the horizontal alignment
of a text.
Example:
h1 {text-align:center;} p.date {text-align:right;}

Text Decoration
• The text-decoration property is used to set or remove
decorations from text.
Example:
a {text-decoration:none;}
h1 {text-decoration:overline;}
h4 {text-decoration:blink;}

Text Transformation
• It can be used to turn everything into uppercase
or lowercase letters, or capitalize the first letter of
each word.
Example:
p.uppercase {text-transform:uppercase;}
p.capitalize {text-transform:capitalize;}

CSS Font Properties
• Many properties, such as font-size, have a value that is a
CSS length
• All CSS length values except 0 need units

CSS Font Properties
Computed value
of font-size
property

CSS Font Properties
• font shortcut property:
specifying line-height (here, twice cell height)
any order size and family required,
order-dependent

CSS Font Family
* font family - a specific font family (like "Times New
Roman" or "Arial")
• The font family of a text is set with the font-family
property.
Note: If the name of a font family is more than one word,
it must be in quotation marks, like font-family: "Times
New Roman".

Font Style
The font-style property is mostly used to specify italic text.
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)
Example:
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Set Font Size With Pixels
• Setting the text size with pixels, gives you full control
over the text size:
Example:
h1 {font-size:40px;}

Set Font Size With Em
• 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
Example:
h1 {font-size:2.5em;} /* 40px/16=2.5em */

Styling Links
• Links can be style with any CSS property (e.g. color,
font-family, background-color).
The four links states are:
* a:link - a normal, unvisited link
* a:visited - a link the user has visited
* a:hover - a link when the user mouses over it
* a:active - a link the moment it is clicked

Text Decoration
• The text-decoration property is mostly used to
remove underlines from links:
Example:
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

Background Color
• background-color property specifies the background
color for links:
Example:
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

Different List Item Markers
The type of list item marker is specified with the list-
style-type property:
Example:
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

An Image as The List Item Marker
• To specify an image as the list item marker,
use the list-style-image property:
Example:
ul
{
list-style-image: url('sqpurple.gif');
}

List - Shorthand property
• It is also possible to specify all the list properties in
one, single property. This is called a shorthand
property.
• The shorthand property used for lists, is the list-style
property:
Example:
ul
{
list-style: square url("sqpurple.gif");
}

CSS BOX MODEL
• All HTML elements can be considered as boxes.
• The CSS box model is essentially a box that wraps around HTML
elements, and it consists of: margins, borders, padding, and the
actual content.
• The image below illustrates the box model:

CSS Box Model
• Every rendered element occupies a box:
(or inner edge)
(or outer edge)

The CSS Box Model
Content
Padding
Border
Margin
With margin, border
and padding
properties, each of the
4 sides can be specified
independently

Margins & Padding
Margins and Padding may seem similar at first
glance. But each has its own effect on content,
particularly on any backgrounds assigned to
block and div elements.
Content
Padding
Margin

Margins & Padding
Margins
Margins define the space around elements outside the border
Margin properties can have negative values in order to
deliberately overlap content
Margin properties will affect the position of background
elements (graphics and/or colours) in relation to the edges of
the containing block element
Margin properties can be defined independently on top, right,
bottom and left, or all-at-once using CSS shorthand

Margins & Padding
Padding
Padding defines the space around elements inside the border;
i.e between the border and the content itself
Padding properties cannot have negative values
Padding properties do not affect the position of background
elements (graphics and/or colours) in the containing block
element; only the position of content.
Padding properties can be defined independently on top,
right, bottom and left, or all-at-once using CSS shorthand

Margins and Padding: Margin Collapse
When 2 or more vertical margins meet, they
will collapse to form a single margin
The height of this combined margin will be
equal the height of the larger of the 2 margins
Margin collapse applies when:
2 or more block elements are stacked one above
the other,
or when one block element is contained within
another block element

Margin Collapse: Stacked Elements
Content Area
Content Area
Margin-bottom: 30px
Margin-top: 20px
Before
Content Area
Content Area
Margin-bottom: 30px
After
Margins
collapse to
form a single
margin

Margin Collapse: Contained Elements
Content Area
Margin-top: 30px
Before After
Margins
collapse to
form a single
marginMargin-top: 20px
Content Area
Margin-top: 30px
Containing (outer) block
element
Inner block element
* Note: only applies if there are no borders or
padding separating the margins.

Width and Height of an Element
Important: When you specify the width and height
properties of an element with CSS, you are just setting
the width and height of the content area. To know the
full size of the element, you must also add the padding,
border and margin.
• The total width of the element in the example below is
300px:
width:250px;
padding:20px;
border:10px solid gray;
margin:20px;

CSS Shorthand: Margin & Padding
For margin and padding (and others), CSS provides a number
of shorthand properties that can save on writing lines and
lines of code. Instead of writing this:
#container {
margin-top: 0;
margin-right: 5px;
margin-bottom: 6px;
margin-left: 5px;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 12px;
}
Content Area
6
5 5
12 10
30
12
0

CSS Shorthand: Margin & Padding
…Its much easier to write this:
#container {
padding: 20px 10px 30px 12px;
margin: 0px 5px 6px 5px;
}
The sequence order is always
clockwise, starting from the top
Content Area
6
5 5
12 10
30
20
0

CSS Shorthand: Margin and Padding
You can also apply just one value, example:
#container {
padding: 20px;
margin: 5px;
}
Which will apply the value
specified equally on all 4 sides Content Area
5
5 5
20 20
20
20
5

CSS Shorthand: Margin and Padding
And you can apply two values, example:
#container {
padding: 10px 20px;
margin: 0px 5px;
}
The first value is applied to
the top and bottom
The second value is applied to
the left and right
Content Area
0
5 5
20 20
10
10
0

CSS Shorthand: Margin and Padding:
auto
A useful value to remember is ‘auto’:
#container {
padding: 10px 20px;
margin: 0px auto;
}
Usually applied to the left &
right areas of the margin
property, auto is useful for
centering a block container
element in the browser window
Content Area
0
auto auto
20 20
10
10
0

Borders
Borders can be applied to any block element
Borders always come outside the padding area, but inside the
margin area.
Border properties cannot have negative values
If a border is not specified, the default is no-border (i.e. no
border appears and no space between any margin and
padding is allocated for a border)
Border properties can be defined independently on top, right,
bottom and left, or all-at-once using CSS shorthand

Borders
The core border properties are:
Width: absolute (px, in, cm, or ‘thin’, ‘medium’,
‘thick’), or relative (ems)
Style: dotted, dashed, solid, double, groove, ridge,
inset, outset, hidden, etc
Color: ‘blue’, ‘red’, #FF9900, etc
You can also create the effect of a border by
using a graphic image in a CSS background
property, instead of the border property

CSS BORDER
• The border-width property is used to set the width of the
border.
• The width is set in pixels, or by using one of the three pre-
defined values: thin, medium, or thick.
• Note: The "border-width" property does not work if it is used
alone. Use the "border-style" property to set the borders first.
Example:
p.one
{
border-style:solid;
border-width:5px;
border-color:green;
}

CSS Box Model
• If multiple declarations apply to a property,
the last declaration overrides earlier
specifications
Left border is 30px wide,
inset style, and red

CSS Floats: “Normal Flow”
CSS boxes for block
elements are stacked, one
above the other, so that
they’re read from top to
bottom.
In CSS, this is said to be the
“normal flow”.
(Note that CSS boxes for inline
elements are placed next to each
other, within boxes for block
elements, and will normally wrap
according to the width of the
containing block.) But…

Floats: Positioning CSS Boxes
…we can position block
element boxes side-by-
side in CSS using floats.
Setting the float
property to left or
right causes a box to
be taken out of its
position in the
normal flow and
moved as far left or
right as possible.
text text text text text text text text text text
inline
inline
inlineblock

Float Values
The Float property has
three value options:
float: left;
float: right;
float: none;
inline
inline
inlineblock

Restoring the Normal Flow: “Clear”
To restore the “normal
flow”, we can use the
clear property.
The clear property has
three value options:
clear: left;
clear: right;
clear: both;
These specify which
side of the element’s
box may not have a
float next to it.
inline
inline
inlineblock
block

Normal Flow Layout
html
body
div d1
div d2
div d3
div d4
Top edges of
block boxes are
in document order

Webpages can be divided using <div>
• <div id="container" style="width:500px">
• <div id="header" style="background-
color:#FFA500;"> <h1>……….</h1></div>
• <div id="content”<p>…….</p></div>
• <div id=“aside”>……………..</div>
• <div id=“footer”>……………..</div>
<div>

<!DOCTYPE html>
<html> <body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br> CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;
text-align:center;">
Copyright © W3Schools.com
</div>
</div>
</body></html>

CSS Positioning
The third core concept to understand in CSS layout (after the
‘box model’ and ‘floats’), is positioning.
There are two types of positioning that can be applied to CSS
boxes:
• Relative Positioning
• Absolute Positioning
Understanding the differences between the two is difficult at
first, but important!

CSS Positioning: Relative Positioning
A relatively positioned element will stay exactly where it is, in
relation to the normal flow.
You can then offset its position “relative” to its starting point in
the normal flow:
Box 1 Box 2 Box 3
Containing box

CSS Positioning: Relative Positioning
In this example, box 2 is offset 20px, top and left. The result is
the box is offset 20px from its original position in the normal
flow. Box 2 may overlap other boxes in the flow, but other
boxes still recognise its original position in the flow.
Left: 20px
top: 20px
Position: relativeBox 1
Box 2
Box 3
Containing box
#myBox {
position: relative;
left: 20px;
top: 20px;
}

CSS Positioning: Absolute Positioning
An absolutely positioned box is taken out of the normal flow,
and positioned in relation to its nearest positioned ancestor
(i.e. its containing box).
If there is no ancestor box, it will be positioned in relation to
the initial containing block, usually the browser window.
Left: 20px
top: 20px
Position: absolute
Box 1
Box 2
Box 3
Containing box (relatively positioned ancestor)

CSS Positioning: Absolute Positioning
An absolutely positioned box can be offset from its initial
position inside the containing block, but other boxes within
the block (and still within the normal flow) act as if the box
wasn’t there.
Left: 20px
top: 20px
Position: absolute
Box 1
Box 2
Box 3
Containing box (relatively positioned ancestor)
#myBox {
position: absolute;
left: 20px;
top: 20px;
}

CSS Positioning: Fixed Positioning
Fixed Positioning is a sub-category of Absolute Positioning
Allows the creation of floating elements that are always fixed
in the same position in the browser window, while the rest of
the content scrolls as normal
(rather like the effect of fixed background attachments)
PROBLEM: fixed positioning is not supported in IE5 and IE6(!),
but can be made to work with javascript for those browsers

Floats & Positioning
Summary:
Floats (also a form of positioning) takes boxes out of the normal flow
and “floats” them left or right edges of the containing block
Relative Positioning is “relative” to the element’s initial position in the
normal flow.
Absolute Positioning is “relative” to the nearest positioned ancestor,
or (if one doesn’t exist) the initial container block (usually the browser
window)
Fixed Positioning is fixed in one position “relative” to the browser
window only — does not scroll with content (Not supported in IE5,
IE6)

Beyond Normal Flow
• Properties used to specify positioning:
– position: static (initial value), relative,
or absolute,fixed
• Element is positioned if this property not static
• Properties left, right, top, bottom apply to
positioned elements
– Primary values are auto (initial value) or CSS length
– float: none, left, or right
• Applies to elements with static and relative
positioning only

Background Images in CSS
It is also possible to use the background CSS
property any block element (including div’s) to
place a background image behind other
elements.
Background images can be…
• small images that repeat horizontally or vertically
to fill a flexible background space, or
• one single image that fills a space of fixed size.

Background Images in CSS: Fixed
Position
Background images will normally scroll with the containing
box, and the rest of the page
But they can also be “fixed”, staying in the same position in the
layout, while the rest of the content scrolls.
#sidebar {
float: right;
width: 300px;
margin-left: 25px;
background-image: url(images/harbour.jpg);
background-attachment: fixed;
}

Using Background Images
Background images are useful in allowing us to
visually define a page, and separate content
into a deliberate visual hierarchy.
The ability to to repeat images in a background
box, and reuse the SAME images across a
number of boxes, means we can make very
efficient use of images.
Wherever possible, background images should
be used in conjunction with background
colours.

CSS Display and Visibility - Hiding an Element -
display:none or visibility:hidden
• Hiding an element can be done by setting the display property to
"none" or the visibility property to "hidden".
• However, notice that these two methods produce different
results:
• visibility:hidden hides an element, but it will still take up the
same space as before. The element will be hidden, but still affect
the layout.
Example
h1.hidden {visibility:hidden;}

Changing How an Element is Displayed
• Changing an inline element to a block element, or
vice versa, can be useful for making the page look a
specific way, and still follow web standards.
The following example displays list items as inline
elements:
Example
li {display:inline;}

• :hover pseudoclass
– used to apply styles to an element when the
mouse cursor is over it
• display property
– allows a programmer to decide if an element is
displayed as a block element, inline element, or is
not rendered at all (none)
Drop-Down Menus

• CSS media types
– allow you to decide what a page should look like
depending on the kind of media being used to
display the page
– Most common media type for a web page is the
screen media type, which is a standard
computer screen
Media Types and Media Queries

• A block of styles that applies to all media types is
declared by @media all and enclosed in curly
braces
• To create a block of styles that apply to a single
media type such as print, use @media print
and enclose the style rules in curly braces
(Cont.)

• Other media types in CSS include:
– handheld
• Designed for mobile Internet devices
– braille
• For machines that can read or print web pages in braille
– speech
• Allow the programmer to give a speech-synthesizing
web browser more information about the content of
the web page
– print
• Affects a web page’s appearance when it is printed

• Following simple classic example that applies
one set of styles when the document is
viewed on all media (including screens) other
than a printer, and another when the
document is printed.
• To see the difference, look at the screen
captures below the paragraph or use the Print
Preview feature in your browser if it has one.
(Cont.)

Media Queries
 Allow you to format your content to specific output
devices.
 Include a media type and expressions that check the
media features of the output device.
(Cont.)

– width—the width of the part of the screen on which the
document is rendered, including any scrollbars
– height—the height of the part of the screen on which the
document is rendered, including any scrollbars
– device-width—the width of the screen of the output device
– device-height—the height of the screen of the output device
– orientation—if the height is greater than the width,
orientation is portrait, and if the width is greater than the
height, orientation is landscape
– aspect-ratio—the ratio of width to height
– device-aspect-ratio—the ratio of device-width to
device-height
Common media features

Text Shadows
• The CSS3 text-shadow property makes it easy to add
a text shadow effect to any text
• The text-shadow property has four values which
represent:
– Horizontal offset of the shadow—the number of pixels that
the text-shadow will appear to the left or the right of
the text. A negative value moves the text-shadow to
the left; a positive value moves it to the right.
– Vertical offset of the shadow—the number of pixels that
the text-shadow will be shifted up or down from the
text. A negative value moves the shadow up, whereas a
positive value moves it down.

– blur radius—the blur (in pixels) of the shadow.
A blur-radius of 0px would result in a shadow
with a sharp edge (no blur). The greater the value,
the greater the blurring of the edges.
– color—determines the color of the text-
shadow.

• Rounded Corners
• Box-shadow property
• Border-image
CSS3 Borders

Rounded Corners
• The border-radius property allows you to add rounded corners to an
element
• For the first rectangle, we set the border-radius to 15px. This adds
slightly rounded corners to the rectangle.
• For the second rectangle, we increase the border-radius to 50px,
making the left and right sides completely round.
• Any border-radius value greater than half of the shortest side length
produces a completely round end.
• You can also specify the radius for each corner with border-top-
left-radius, border-top-right-radius, border-bottom-
left-radius and border-bottom-right-radius.

Image Borders
• The CSS3 border-image property uses images
to place a border around any block-level
element
• We set a div’s border-width to 30px,
which is the thickness of the border we’re
placing around the element.
• Next, we specify a width of 234px, which is
the width of the entire rectangular border.

Introducing Vendor Prefixes
Vendor Prefixes
• Vendor prefixes and are used for properties
that are still being finalized in the CSS
specification but have already been
implemented in various browsers.

Image Borders (cont.)
Stretching an Image Border
• In this example, we create two image border styles.
• In the first, we stretch (and thus distort) the sides of the
image to fit around the element while leaving the corners of
the border image unchanged (not stretched).

• The border-image property has six values:
– border-image-source—the URL of the image to use in the border (in
this case, url(border.png)).
– border-image-slice—expressed with four space-separated values in
pixels. These values are the inward offsets from the top, right, bottom
and left sides of the image. The border-image-slice divides the
image into nine regions: four corners, four sides and a middle, which is
transparent unless otherwise specified.

– border-image-repeat—specifies how the regions of the border image
are scaled and tiled (repeated).
• Indicating stretch just once creates a border that will stretch the top,
right, bottom and left regions to fit the area.
• You may specify two values for the border-image-repeat property.
• If we specified stretch repeat, the top and bottom regions of the
image border would be stretched, and the right and left regions of the
border would be repeated (i.e., tiled) to fit the area.
• Other possible values for the border-image-repeat property
include round and space.
• If you specify round, the regions are repeated using only whole tiles, and
the border image is scaled to fit the area.
• If you specify space, the regions are repeated to fill the area using only
whole tiles, and any excess space is distributed evenly around the tiles.

Repeating an Image Border
• Next, we create an image border by repeating the regions to
fit the space.
• The border-image property includes four values:
– border-image-source—the URL of the image to use
in the border (once again, url(border.png)).
– border-image-slice—in this case, we provided two
values expressed in percentages for the top/bottom and
left/right, respectively.
– border-image-repeat—the value repeat specifies
that the tiles are repeated to fit the area, using partial tiles
to fill the excess space.

• CSS3 animations allows animation of most
HTML elements without using JavaScript or
Flash!
(1) @keyframes rule
(2) Animation property- name , duration
Animations

• Keyframes hold what styles the element will have at
certain times.
• animation will gradually change from the current style
to the new style at certain times
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
• keywords "from" and "to“ also use (0% (start) and
100% (complete)).
@keyframes

• To get an animation to work, you must bind the
animation to an element.
• If the animation-duration property is not specified,
the animation will have no effect, because the
default value is 0
animation-name: example;
animation-duration: 4s;
Animation property

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: example; /* Chrome, Safari,
Opera */
-webkit-animation-duration: 5s; /* Chrome, Safari, Opera
*/
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
}
/* Standard syntax */
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier
versions.</p>
<div></div>
<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>
</body>
</html>

• animation-delay--Specifies a delay for the start of an animation
• animation-direction--Specifies whether an animation should play in reverse
direction or alternate cycles
• animation-duration--Specifies how many seconds or milliseconds an
animation takes to complete one cycle
• animation-iteration-count--Specifies the number of times an animation
should be played
• animation-name--Specifies the name of the @keyframes animation
• animation-play-state--Specifies whether the animation is running or paused
• animation-timing-function--Specifies the speed curve of the animation
CSS3 Animation Properties

animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: 3;/* set to infinite to
continue forever*/
animation-direction: alternate;
Shorthand syntax:
animation: myfirst 5s linear 2s infinite alternate
Animation properties

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: 3;
-webkit-animation-direction: alternate;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: 3;/* set to infinite to continue forever*/
animation-direction: alternate;
}

@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9
and earlier versions.</p>
<div></div>

• Write a HTML code which include Table, Hyper
link, Text formatting, Ordered and unordered
list to display your resume.
• Write HTML code to accept input from the
user for course registration. Input will include
Name, Age and Email-id. Write code for
validating input data.

• Write a style sheet such that
– The web page will have the background image
“img.jpg”.
– The table headings will have red background color.
– All the headings on the page will be alligned to
left.
– The hyperlinks on the web page will not have
underline.
– Paragraphs in the web page will have left and right
margins of 100px.

Html

More Related Content

What's hot

Similar to Html

Recently uploaded

Html