lOMoARcPSD|25602207

UNIT ONE lecture notes

Computer Science (Anna University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Gokul M (gokulcrizy13@[Link])
 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

UNIT - I
`
Web Essentials: Clients, Servers, and Communication. The Internet-Basic Internet Protocols -The World
Wide Web-HTTP request message-response message-Web Clients Web Servers-Case Study. Markup
Languages: XHTML. An Introduction to HTML History-Versions-Basic XHTML Syntax and Semantics-Some
Fundamental HTML Elements-Relative URLs-Lists-tables-Frames-Forms-XML Creating HTML Documents
Case Study. Style Sheets: CSS Introduction to Cascading Style Sheets-Features-Core Syntax-Style Sheets
and HTML Style Rule Cascading and Inheritance-Text Properties-Box Model Normal Flow Box Layout-
Beyond the Normal Flow-Other Properties-Case Study.

WEB ESSENTIALS: CLIENTS, SERVERS, AND COMMUNICATION

• Client – it is an independent system, which have its own Operating System other software
• Server- it is an other independent system, which have its own Operating System other software
• Client and server communicate each other by using middleware software like ODBC
• Example - Internet system is the best example for client- server model.

• A Client /server model application typically stores large quantities of data on an expensive, high
powered server, while most of the program logic and user interface is handled by client software
running on relatively cheap Personal computers
• Normally server primarily sends data, while a client primarily receives it,
• In a client/server model a client initiates a conversation, while server waits for clients to start
conversation
• Some servers process and analyze the data before sending the results to the client. Its called
application servers
• A file and database server will retrieve information and send it to a client, but it would not
process the information
• The most popular client/server system on the Internet is the web
• The web servers such as Apache respond the requests from web clients such as Netscape.

THE CLIENT/SERVER MODEL - MODEL 1 - CLIENT/SERVER

1. Model 1 is the simplest of client/server model in web architecture.

2. The client sends Request to the Web Server through Internet.
3. The Request is acknowledged by the Web Server and it sends Responses to the Client.
4. Now the Server sends the Requested information to the Client from Web Server.
5. At the end of data transfer, the Client disconnects from the Server.

MODEL 2 – WWW Database Client/Server

1. In Model 2 the client sends Request to the Web Server through Internet.
2. The Request is acknowledged by the Web Server and it sends Responses to the Client.
3. If the information is not available, then the Server searches data in the Database Server also.
4. Now the Server sends the Requested information to the Client from Web Server or from Database
Server.
5. At the end of data transfer, the Client disconnects from the Server.

MODEL 3 – WEB SERVER / APPLICATION SERVER

1. In Model 3 the client sends Request to the Web Server through Internet.
2. The Request is acknowledged by the Web Server and it sends Responses to the Client.
3. If the information is not available, then the Server searches data in the Application Server also.
4. Now the Server sends the Requested information to the Client from Web Server or from Application
Server.
5. At the end of data transfer, the Client disconnects from the Server.

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

MODEL 4 – WEB SERVER / APPLICATION SERVER/DATABASE SERVER

1. In Model 4 the client sends Request to the Web Server through Internet.
2. The Request is acknowledged by the Web Server and it sends Responses to the Client.
3. If the information is not available, then the Server searches data in the Application Server and
Database Server also.
4. Now the Server sends the Requested information to the Client from Web Server or from Application
Server or Database Server.
5. At the end of data transfer, the Client disconnects from the Server.

MODEL 5: WEB SERVER / TRANSACTION SERVER/DATABASE SERVER

1. In Model 5 the client sends Request to the Web Server through Internet.
2. The Request is acknowledged by the Web Server and it sends Responses to the Client.
3. If the information is not available, then the Server searches data in the Transaction Server and
Database Server also.
4. Now the Server sends the Requested information to the Client from Web Server or from Transaction
Server or Database Server.
5. At the end of data transfer, the Client disconnects from the Server.
6. The Transaction ensures the ACID properties for several transactions with the Databases.

MODEL 6: WEB SERVER / TRANSACTION SERVER

1. In Model 6 the client sends Request to the Web Server through Internet.
2. The Request is acknowledged by the Web Server and it sends Responses to the Client.
3. If the information is not available, then the Server searches data in the Web Server, Transaction Server,
Application Server and Database Server also.
4. Now the Server sends the Requested information to the Client from Web Server or from Transaction
Server or Database Server or Application Server.
5. At the end of data transfer, the Client disconnects from the Server.

CHARACTERISTICS OF CLIENTS AND SERVERS

• Client software
– Is an arbitrary application program
– Is invoked directly by a user, and executes only for one session.
– Runs locally on user’s personal computer
– Actively initiates contact with server
– Can access multiple services as needed
– Does not required special hardware or a sophisticated operating system

• Server software
– Is a special-purpose, privileged program
– Is invoked automatically when a system boots, and continues to execute through many
sessions
– Runs on shared computers
– Waits passively for contact from arbitrary remote clients.
– Accepts contact from arbitrary clients but offers a single service
– Requires powerful hardware and a sophisticated operating system

INTERNET

HISTORY OF THE INTERNET

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

The Internet was originally designed for sharing information between collaborating scientists. And at
the time (early 70s) personal computers didn't yet exist. Nor, for that matter, were there widespread data
network lines. So, security didn't much enter into the thinking of the Internet's founders; they were far
more concerned with robust message delivery in the face of an anticipated World War III.

In fact, the very open nature of the Internet protocols likely contributed to its enormous success
through the 1990s and today.

But when so many people can connect so easily, there are bound to be a few bad apples trying to
ruin the party. In earlier days, a tremendous amount of technical know-how was required to crack into
computers through the network. Gradually the software used by these l33t hax0rs ("elite hackers" in the
lingo) made it onto the Internet and could be wielded by any old pimply-faced high-school punk, the
aptly named "script kiddies". (The self-titled Mafia Boy who cracked CNN, eBay, Yahoo!, and others in
2000, was a 15-year old Montreal brat who fit nicely into this category.)

These software tools are now run automatically by programs that search the Internet for weak
spots. It is said that an unprotected computer will be targeted within 15 minutes of its initial network
connection. Some security companies set up such computers (called "honeypots") from time to time to
attract just this sort of malicious attention in order to study the means and methods of the attackers.

In the 1950s and early 1960s, prior to the widespread inter-networking that led to the Internet,
most communication networks were limited by their nature to only allow communications between the
stations on the network. Some networks had gateways or bridges between them, but these bridges were
often limited or built specifically for a single use. One prevalent computer networking method was based
on the central mainframe method, simply allowing its terminals to be connected via long leased lines.
This method was used in the 1950s by Project RAND to support researchers such as Herbert Simon, in
Pittsburgh, Pennsylvania, when collaborating across the continent with researchers in Santa Monica,
California, on automated theorem proving and artificial intelligence.

WHAT IS AN INTERNET ?

• The internet Is a global connection of people computers which are linked together by cables and
Telephone lines making communication possible among them in a common language.

• Global connection of interconnected networks.

HOW DOES INTERNET WORKS

Move data between two specific computers.

We require
- the address of the destination.
- a safe mean of moving data in the form of electronic signals
• There exist a set of rules which governs the sending and receiving of data on the internet.
• Rules are implemented in two parts in the network software.
- Transmission Control Protocol (TCP).
- Internet Protocol (IP).
It is called TCP/IP
• Large block of text/ data, the TCP divides into little Data Packets and add some special
information like - packet position.
- error correction code.

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

• To make sure that packets at the destination can reassembled correctly and without any damage
to data
– The role of IP here is to put destination addressing information on such packets.
– It is not necessary that all the packets will follow the same path from source to
destination.
• SPECIAL MACHINES
– Routers are used to load balance various paths that exist on networks
gateways allows different electronic networks to talk to Internet which TCP/IP
• Addresses are essential in the internet
• The TCP/IP is a mechanism for providing addresses for computers on the
internet address have two forms :
Person understandable which expressed as words (Domain name)
[Link]
Machine understandable which repressed as numbers
[Link].
Ex: murali@[Link]
username@[Link]
username - is the name of the Internet account.
Host - individual machines at a particular location.
Hosts and local networks are grouped together into domains,which are grouped into one or more
larger domains.
Ex:
apartment-> complex -> town -> country.
Sub-domains may corresponds to organizations such as NASA or COMPUSERVE such as India
comes a large domain ‘in’

SUB-DOMAINS LARGE DOMAINS

com - commercial au - Australia
net - network usa - USA
mil - military in - india
org - organization sg - singapore
edu - education cn - canada
gov - government jp -Japan
int - international

INTERNET ADDRESING

Internet Address consists TWO parts

1. Network Address (Net ID)
2. Host Address (Host ID)
There four types of internet address each 32 bit long :
No. of bits in net ID No. of bits Host ID
CLASS A 8 24
CLASS B 16 16
CLASS C 24 8
CLASS D Multicasting all bits
CLASS E For Future

In which only CLASS A, B & C are mostly used

• These may be used for
– Unicast - Single computer
– Multicast - Set of computers all reside in different location
– Any-cast - Set of computers all reside in single location.

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

What can I do on Internet ?

Several activities can be performed if you have access to the Internet
• To Publish research information
• To create campus wide information systems
• Use it for Teaching
• Use it with ISDN for multimedia conferencing
• Refer to the pictures of an art gallery
• Have an electronic copy of classics such as alice in wonderland
• Have an electronic copy of journals and magazine from the Internet
• To meet people around the world
• To refer the job listings and requirements
• To get free public domain programs, Movies, songs etc.
To send mail at any time

Tools and Services on Internet

• E-mail - mailbox
• Mailing List
• Usenet or Newsgroups
• File Transfer Protocol (FTP)
• Telnet (Remote login)

BROWSING THE INTERNET

• There are many browsers for the Internet. They are
– Internet Explorer ( IE )
– Netscape Navigator
– Mosaic etc.
• Gopher -presents the Internet as a series of hierarchical menus containing items that point to
another menu.

INTERNET STANDARDS
• There are many standard organizations in the world. The two organizations are:
– Internet Engineering Task Force(IETF) and
– World Wide Web Consortium( W3c)
IETF is a relatively informal and it standards include TCP/IP, MIME, SMTP.
The W3C, by contrast, is a vendor organization, controlled by its dues-paying member corporations and it
standards include HTTP,HTML and XML

INTERNET PRINCIPLES
 TCP/IP
 UDP
 IP Addresses
 domain names

 the domain name system

 ports

 sockets

 URL's

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

BASIC INTERNET PROTOCOLS :

TCP/IP

Introduction

TCP/IP is the communication protocol for the Internet.

Computer Communication Protocol

A computer communication protocol is a description of the rules computers must follow to communicate
with each other.

What is TCP/IP?

TCP/IP is the communication protocol for communication between computers on the Internet.

TCP/IP stands for Transmission Control Protocol / Internet Protocol.

TCP/IP defines how electronic devices (like computers) should be connected to the Internet, and how
data should be transmitted between them.

Inside TCP/IP

Inside the TCP/IP standard there are several protocols for handling data communication:

 TCP (Transmission Control Protocol) communication between applications

 UDP (User Datagram Protocol) simple communication between applications

 IP (Internet Protocol) communication between computers

 ICMP (Internet Control Message Protocol) for errors and statistics

 DHCP (Dynamic Host Configuration Protocol) for dynamic addressing

 TCP Uses a Fixed Connection

 TCP is for communication between applications.
 If one application wants to communicate with another via TCP, it sends a communication request.
This request must be sent to an exact address. After a "handshake" between the two
applications, TCP will set up a "full-duplex" communication between the two applications.
 The "full-duplex" communication will occupy the communication line between the two computers
until it is closed by one of the two applications.
 UDP is very similar to TCP, but simpler and less reliable.
 IP is Connection-Less
 IP is for communication between computers.
 IP is a "connection-less" communication protocol.

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

 IP does not occupy the communication line between two computers. IP reduces the need for
network lines. Each line can be used for communication between many different computers at
the same time.
 With IP, messages (or other data) are broken up into small independent "packets" and sent
between computers via the Internet.
 IP is responsible for "routing" each packet to the correct destination.
 IP Routers
 When an IP packet is sent from a computer, it arrives at an IP router.
 The IP router is responsible for "routing" the packet to the correct destination, directly or via
another router.
 The path the packet will follow might be different from other packets of the same
communication. The router is responsible for the right addressing, depending on traffic volume,
errors in the network, or other parameters.
 TCP/IP
 TCP/IP is TCP and IP working together.
 TCP takes care of the communication between your application software (i.e. your browser) and
your network software.
 IP takes care of the communication with other computers.
 TCP is responsible for breaking data down into IP packets before they are sent, and for
assembling the packets when they arrive.
 IP is responsible for sending the packets to the correct destination.
 TCP/IP Addressing
 TCP/IP uses 32 bits, or four numbers between 0 and 255, to address a computer.

IP Addresses
 Each computer must have an IP address before it can connect to the Internet.
 Each IP packet must have an address before it can be sent to another computer.
 This is an IP address: [Link]
This might be the same IP address: [Link]
 An IP Address Contains 4 Numbers.
 Each computer must have a unique IP address.
 This is your IP address: [Link]
 TCP/IP uses four numbers to address a computer. The numbers are always between 0 and 255.
 IP addresses are normally written as four numbers separated by a period, like this: [Link].

TCP/IP Protocols
 TCP/IP is a large collection of different communication protocols.
 A Family of Protocols
 TCP/IP is a large collection of different communication protocols based upon the two original
protocols TCP and IP.

TCP - Transmission Control Protocol

 TCP is used for transmission of data from an application to the network.
 TCP is responsible for breaking data down into IP packets before they are sent, and for
assembling the packets when they arrive.
 IP - Internet Protocol
 IP takes care of the communication with other computers.
 IP is responsible for the sending and receiving data packets over the Internet.

 HTTP - Hyper Text Transfer Protocol

 HTTP takes care of the communication between a web server and a web browser.
 HTTP is used for sending requests from a web client (a browser) to a web server, returning web
content (web pages) from the server back to the client.

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

 HTTPS - Secure HTTP

 HTTPS takes care of secure communication between a web server and a web browser.
 HTTPS typically handles credit card transactions and other sensitive data.
 SSL - Secure Sockets Layer
 The SSL protocol is used for encryption of data for secure data transmission.
 SMTP - Simple Mail Transfer Protocol
 SMTP is used for transmission of e-mails.
 MIME - Multi-purpose Internet Mail Extensions
 The MIME protocol lets SMTP transmit multimedia files including voice, audio, and binary data
across TCP/IP networks.
 IMAP - Internet Message Access Protocol
 IMAP is used for storing and retrieving e-mails.
 POP - Post Office Protocol
 POP is used for downloading e-mails from an e-mail server to a personal computer.
 FTP - File Transfer Protocol
 FTP takes care of transmission of files between computers.
 NTP - Network Time Protocol
 NTP is used to synchronize the time (the clock) between computers.
DHCP - Dynamic Host Configuration Protocol
DHCP is used for allocation of dynamic IP addresses to computers in a network.
SNMP - Simple Network Management Protocol
SNMP is used for administration of computer networks.
LDAP - Lightweight Directory Access Protocol
LDAP is used for collecting information about users and e-mail addresses from the internet.
ICMP - Internet Control Message Protocol
ICMP takes care of error-handling in the network.
ARP - Address Resolution Protocol
ARP is used by IP to find the hardware address of a computer network card based on the IP address.
RARP - Reverse Address Resolution Protocol
RARP is used by IP to find the IP address based on the hardware address of a computer network card

WWW-WORLD WIDE WEB

The World Wide Web ("WWW" or simply the "Web") is a global information medium which users
can read and write via computers connected to the Internet. The term is often mistakenly used as a
synonym for the Internet itself, but the Web is a service that operates over the Internet, as e-mail does.
The history of the Internet dates back significantly further than that of the World Wide Web.

The hypertext portion of the Web has an interesting history, notable influences being IBM's Generalized
Markup Language and Ted Nelson's Project Xanadu. Since its implementation in the 1990s as an
academic system for sharing papers, the World Wide Web has evolved far beyond what its creators
imagined.

The concept of a home-based global information system goes back at least as far as Isaac
Asimov's short story "Anniversary" ( Amazing Stories, March 1959), in which the characters look up
information on a home computer called a "Multivac outlet" -- which was connected by a "plantewide
network of circuits" to a mile-long "super-computer" somewhere in the bowels of the Earth. One
character is thinking of installing a Mulitvac, Jr. model for his kids.

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

INTRODUCTION
The Internet has revolutionized the computer and communications world like nothing before. The
invention of the telegraph, telephone, radio, and computer set the stage for this unprecedented
integration of capabilities. The Internet is at once a world-wide broadcasting capability, a mechanism for
information dissemination, and a medium for collaboration and interaction between individuals and their
computers without regard for geographic location.

The Internet represents one of the most successful examples of the benefits of sustained
investment and commitment to research and development of information infrastructure. Beginning with
the early research in packet switching, the government, industry and academia have been partners in
evolving and deploying this exciting new technology. Today, terms like "bleiner@[Link]" and
"[Link] trip lightly off the tongue of the random person on the street. 1

This is intended to be a brief, necessarily cursory and incomplete history. Much material currently exists
about the Internet, covering history, technology, and usage. A trip to almost any bookstore will find
shelves of material written about the Internet

The Internet today is a widespread information infrastructure, the initial prototype of what is
often called the National (or Global or Galactic) Information Infrastructure. Its history is complex and
involves many aspects - technological, organizational, and community. And its influence reaches not only
to the technical fields of computer communications but throughout society as we move toward increasing
use of online tools to accomplish electronic commerce, information acquisition, and community
operations.

What is the World Wide Web?

The World Wide Web (Web) is a network of information resources. The Web relies on three mechanisms
to make these resources readily available to the widest possible audience:

A uniform naming scheme for locating resources on the Web (e.g., URIs).

Protocols, for access to named resources over the Web (e.g., HTTP).

Hypertext, for easy navigation among resources (e.g., HTML).

The ties between the three mechanisms are apparent throughout this specification.

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

Introduction to URIs

Every resource available on the Web -- HTML document, image, video clip, program, etc. -- has an
address that may be encoded by a Universal Resource Identifier, or "URI".

URIs typically consist of three pieces:

 The naming scheme of the mechanism used to access the resource.

 The name of the machine hosting the resource.
 The name of the resource itself, given as a path.
Consider the URI that designates the W3C Technical Reports page:

[Link]

This URI may be read as follows: There is a document available via the HTTP protocol residing on the
machine [Link], accessible via the path "/TR". Other schemes you may see in HTML documents
include "mailto" for email and "ftp" for FTP.

Fragment identifiers

Some URIs refer to a location within a resource. This kind of URI ends with "#" followed by an anchor
identifier (called the fragment identifier). For instance, here is a URI pointing to an anchor named
section_2: [Link]

Relative URIs

A relative URI doesn't contain any naming scheme information. Its path generally refers to a resource on
the same machine as the current document. Relative URIs may contain relative path components (e.g.,
".." means one level up in the hierarchy defined by the path), and may contain fragment identifiers.

Relative URIs are resolved to full URIs using a base URI. As an example of relative URI resolution,
assume we have the base URI "[Link] The relative URI in the
following markup for a hypertext link:

<A href="[Link]">Suppliers</A>

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

would expand to the full URI "[Link] while the relative URI in
the following markup for an image

<IMG src="../icons/[Link]" alt="logo">

would expand to the full URI "[Link]

In HTML, URIsare used to:

 Link to another document or resource, (see the A and LINK elements).

 Link to an external style sheet or script (see the LINK and SCRIPT elements).
 Include an image, object, or applet in a page, (see the IMG, OBJECT, APPLET and INPUT
elements).
 Create an image map (see the MAP and AREA elements).
 Submit a form (see FORM).
 Create a frame document (see the FRAME and IFRAME elements).
 Cite an external reference (see the Q, BLOCKQUOTE, INS and DEL elements).
 Refer to metadata conventions describing a document (see the HEAD element).

SMTP

INTRODUCTION
Simple Mail Transfer Protocol (SMTP) is the de facto standard for e-mail transmissions across the
Internet. Formally SMTP is defined in RFC 821 (STD 10) as amended by RFC 1123 (STD 3) chapter 5.
The protocol used today is also known as ESMTP and defined in RFC 2821

SMTP is a relatively simple, text-based protocol, in which one or more recipients of a message are
specified (and in most cases verified to exist) along with the message text and possibly other
encoded objects. The message is then transferred to a remote server using a procedure of queries
and responses between the client and server. Either an end-user's email client, a.k.a. MUA (Mail User
Agent), or a relaying server's MTA (Mail Transport Agents) can act as an SMTP client.

An email client knows the outgoing mail SMTP server from its configuration. A relaying server
typically determines which SMTP server to connect to by looking up the MX (Mail eXchange) DNS
record for each recipient's domain name (the part of the email address to the right of the at (@)
sign). Conformant MTAs (not all) fall back to a simple A record in the case of no MX. Some current
mail transfer agents will also use SRV records, a more general form of MX, though these are not
widely adopted. (Relaying servers can also be configured to use a smart host.)

The SMTP client initiates a TCP connection to server's port 25 (unless overridden by configuration). It
is quite easy to test an SMTP server using the telnet program (see below).

SMTP is a "push" protocol that does not allow one to "pull" messages from a remote server on
demand. To do this a mail client must use POP3 or IMAP. Another SMTP server can trigger a delivery
in SMTP using ETRN.

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

Introduction to (HTTP)
HYPERTEXT TRANSPORT PROTOCOL
HTTP is a form of Communication Protocol
The Basic Structure of HTTP Communication follows: Request-Response Model

Request:
• Client sends a Request to a Server by:
– clicking a link on a webpage
– submitting a form
– typing a web page address in the browser address field

HTTP Request Message:

• The Browser uses the URL to create the request message
• The HTTP request message consists of:
– Request/ start line
– requests headers / header field
– Blank line
– request / message body (optional)

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

Start line /Request line:

Consists of three parts:
[Link] Method (Example: GET)
[Link]-URI portion of web address
[Link] version (Example: HTTP/1.1

REQUEST –URI:
• Second part of the Start line is known as Request-URI
• Uniform Resource Identifier (URI) is a string of characters used to identify a name or a resource
on the Internet.
• Such identification enables interaction with representations of the resource over a network
(typically the World Wide Web) using specific protocols

The URL concept:

• URL means ‘Uniform Resource Locator’
• It’s a standard way of specifying any kind of information available on the Internet
• Four elements of a URL specification:
– Method (i.e., the protocol for object retrieval)
– Host (i.e., location hostname or IP-address)
– Port (i.e., port-number for contacting server)
– Path (i.e., pathname of the resource’s file)

The URL Format:

URN ,URC,URL :

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

• URNs are used for identification,

• URCs for including meta-information.
• URLs for locating or finding resources

Comparison URN vs. URL :

• A URN is similar to a person's name, while a URL is like a street address.
• The URN defines something's identity, while the URL provides a location. Essentially, "what" vs.
"where".

HTTP Response:
• The Server receive a request and uses its URL to decide how to handle it
• it might simply fetch an html file and return its content back to the client
• it might execute an external program
• Browser does not care how the request is handled all it needs is a response
• The browser reads the HTML tags in the response and formats the page onto your screen.

HTML Response-Example:
• HTTP/1.1 200 OK
• Last-Modified: Mon, 20Mar 2006 23:23:07 GMT
• Date:Tue, 30 Mar 2006 18:00:01 GMT
• Status: 200
• Content-Type: text/html
• Servlet-Engine: Tomcat Web Server/5.0
• Content-Length: 59
• <html>
• <body>
• <h1> hello world!</h1>
• </body>
• </html>

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

WEB SERVERS AND WEB CLIENTS

• All of the machines on the Internet can be categorized as two types:

– servers
– client
• Those machines that provide services (like Web servers or FTP servers) to other machines are
servers.
• And the machines that are used to connect to those services are clients.

Domain Names:
• Servers on the Internet also have human-readable names, called domain names. For example,
[Link]
• The name [Link] actually has three parts:
– The host name ("www")
– The domain name (“mywebsite")
– The top-level domain name ("com") .
–
Name Servers( DNS):
• A set of servers called Domain Name Servers (DNS) maps the human-readable names to the IP
addresses.
• These servers are simple databases that map names to IP addresses, and they are distributed all
over the Internet.

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

Most individual companies, ISPs and universities maintain small name servers to map host names to IP
addresses

MARKUP LANGUAGES: XHTML

What Is HTML?

HyperText Markup Language (HTML) is the computer coding language used to convert ordinary text into
active text for display and use on the web and also to give plain, unstructured text the sort of structure
human beings rely on to read it. Without some kind of structure imposed on it, plain text would just run
together with nothing to distinguish one string of words from another.
To publish information for global distribution, one needs a universally understood language, a
kind of publishing mother tongue that all computers may potentially understand. The publishing language
used by the World Wide Web is HTML (from HyperText Markup Language).

HTML gives authors the means to:

 Publish online documents with headings, text, tables, lists, photos, etc.
 Retrieve online information via hypertext links, at the click of a button.
 Design forms for conducting transactions with remote services, for use in searching for
information, making reservations, ordering products, etc.
Include spread-sheets, video clips, sound clips, and other applications directly in their documents.

A BRIEF HISTORY OF HTML

HTML was originally developed by Tim Berners-Lee while at CERN, and popularized by the Mosaic
browser developed at NCSA. During the course of the 1990s it has blossomed with the explosive growth
of the Web. During this time, HTML has been extended in a number of ways. The Web depends on Web
page authors and vendors sharing the same conventions for HTML. This has motivated joint work on
specifications for HTML.

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

HTML 2.0 (November 1995, see [RFC1866]) was developed under the aegis of the Internet
Engineering Task Force (IETF) to codify common practice in late 1994. HTML+ (1993) and HTML 3.0
(1995, see [HTML30]) proposed much richer versions of HTML. Despite never receiving consensus in
standards discussions, these drafts led to the adoption of a range of new features. The efforts of the
World Wide Web Consortium's HTML Working Group to codify common practice in 1996 resulted in HTML
3.2 (January 1997).

Most people agree that HTML documents should work well across different browsers and
platforms. Achieving interoperability lowers costs to content providers since they must develop only one
version of a document. If the effort is not made, there is much greater risk that the Web will devolve into
a proprietary world of incompatible formats, ultimately reducing the Web's commercial potential for all
participants.

Each version of HTML has attempted to reflect greater consensus among industry players so that
the investment made by content providers will not be wasted and that their documents will not become
unreadable in a short period of time.

HTML has been developed with the vision that all manner of devices should be able to use
information on the Web: PCs with graphics displays of varying resolution and color depths, cellular
telephones, hand held devices, devices for speech for output and input, computers with high or low
bandwidth, and so on.

HTML first appeared in the early 1990s—based on the preexisting Standard Generalized Markup
Language (SGML)—and was created specifically for marking up documents for use on the newly born
World Wide Web. Since its inception, HTML has gone through many changes and enhancements. New
features have been added, while other features have become outdated and removed from the
specifications. The formal act of retiring a feature from standard specifications is known as deprecation;
deprecated features should be phased out and avoided in new documents.

The technical specifications or all official versions of HTML are freely available from the W3C at its
website ([Link] These specifications can be difficult to read because they’re extremely
technical in nature, written primarily for computer scientists and software vendors who program web
user-agents. But this kind of standardization is essential for the widespread adoption of the web, ensuring
that websites operate consistently across different browsers and operating systems. The web is intended
to be “platform independent” and “device independent,” and adherence to web standards is what makes
this possible.

In the early years of the web, the language specifications were not always followed as closely as they
should have been. Competing browsers supported different features and introduced nonstandard features
of their own. This made web development troublesome for authors in those days, often leading them to
create multiple versions of their sites aimed at different browsers. Thankfully, this is no longer necessary.
The web browsers of today follow the standards much more consistently than the previous generation
did, advancing the web toward the ultimate goal of a truly universal medium.

HTML 4
HTML 4 extends HTML with mechanisms for style sheets, scripting, frames, embedding objects,
improved support for right to left and mixed direction text, richer tables, and enhancements to forms,
offering improved accessibility for people with disabilities.

HTML 4.01 is a revision of HTML 4.0 that corrects errors and makes some changes since the
previous revision.

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

Internationalization

This version of HTML has been designed with the help of experts in the field of internationalization, so
that documents may be written in every language and be transported easily around the world. This has
been accomplished by incorporating [RFC2070], which deals with the internationalization of HTML.

One important step has been the adoption of the ISO/IEC:10646 standard (see [ISO10646]) as
the document character set for HTML. This is the world's most inclusive standard dealing with issues of
the representation of international characters, text direction, punctuation, and other world language
issues.
HTML now offers greater support for diverse human languages within a document. This allows
for more effective indexing of documents for search engines, higher-quality typography, better text-to-
speech conversion, better hyphenation, etc.

HTML consists of encoded markers called tags that surround and differentiate bits of text, indicating the
function and purpose of the text those tags “mark up.” Tags are embedded directly in a plain-text
document where they can be interpreted by computer software. They’re called tags because, well, that’s
what they are. Just as a price tag displays the cost of an item and a toe tag identifies a cadaver, so too
does an HTML tag indicate the nature of a portion of content and provide vital information about it. The
tags themselves are not displayed and are distinct from the actual content they envelop

Versions

As HTML has progressed and evolved over time, new versions of the language have been released to
introduce the new features and deprecate the old. The very first version of HTML, 1.0, was published in
1993. It was further refined and extended with HTML 2.0 in 1995, followed closely by HTML 3.0 in 1996.
Version 4.0 was published in 1997, and a few minor (but significant) changes were released in 1999 as
HTML 4.01. This was to be the final, complete specification for the HTML language. A new kid called
eXtensible HTML, or XHTML, joined the class in 2000, and it was praised as the wave of the future.

XHTML is a reformulation of HTML following the more stringent rules of eXtensible Markup Language
(XML), which is a powerful language that allows web authors to create choose from. XHTML is similar to
HTML 4.01, with just a few more rules dictating how itmust be written. XHTML 1.0 is the current version,
and XHTML 1.1 and 2.0 are already under development but haven’t yet been finalized as formal
recommendations as of this [Link] the rest of this book, you’ll be learning how to author
your own web documents following the XHTML 1.0 specifications. Even so, HTML 4.01 is still very much
aliveand kicking, so most of what you’ll learn from this book can be applied just as well to that earlier
language.

BASIC XHTML SYNTAX AND SEMANTICS

The foundation of the majority of web pages is HyperText Markup Language, commonly known by its
initials, HTML. A curious facet of the language is that it’s easy to pick up the basics—anyone who’s
computer literate should be able to piece together a basic page after learning some tags—but it has
enough flexibility and scope to keep designers interested and experimenting, especially when HTML is
combined with Cascading Style Sheets (CSS), which we’ll discuss later in this chapter. This section
presents an overview of HTML tags and elements, and how HTML and XHTML relate to web standards.

If you’re relatively new to web design, you may be wondering about the best platform and software for
creating websites. Ultimately, it matters little which platform you choose, as long as you have access to
the most popular browsers for testing purposes (a list that I’d now include Apple’s Safari in, alongside

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

Internet Explorer, Firefox, and Opera). Regarding software, there’s an overview in Appendix E (“Browsers
Guide”), but this isn’t an exhaustive guide, so do your own research and find software to your liking.

SOME FUNDAMENTAL HTML ELEMENTS

Block-Level and Inline Elements

The entire range of elements can be divided into two basic types: block-level and inline. A block-
level element is one that contains a significant block of content that should be displayed on its own line,
to break apart long passages of text into manageable portions such as paragraphs, headings, and lists.
An inline element usually contains a shorter string of text and is rendered adjacent to other text on the
same line, such as a few emphasized words within a sentence.

Many nonempty, block-level elements can contain other block-level elements, and all can contain text and
inline elements. A nonempty, inline element, on the other hand, can contain only text or other inline
elements. For example, the em element is inline and is used to add emphasis to the text within it, while
the p element is block-level and designates a paragraphof text. Because em is inline, it cannot contain
block-level elements, so the following example is wrong and invalid:

<em><p>Hello, world!</p></em>

Nesting Elements

Elements can be nested like Russian nesting dolls, each one residing within its containing element. They
must be nested correctly, with each closing tag appearing in the correct order to close an inner element
before you close its container. The following markup is an example of an improperly nested set of
elements:
<p><em>Hello, world!</p></em>
The opening <em> tag occurs after the opening <p> tag, but the closing </p> tag occurs beforethe
closing </em> tag. To ensure correct nesting of elements, always close them in the reverse order in
which they were opened:
<p><em>Hello, world!</em></p>

The html Element

The actual markup begins after the doctype with the html element, which acts as a container for the
entire document. This is known as the root element, the one from which all other elements sprout and
grow. The html element has no other properties of its own; it’s strictly a container that defines where the
document begins and ends. Any elements or content that appear outside this element (apart from the
doctype, which isn’t an element) will make the entire document invalid.

Required Attributes
• xmlns: A URL specifying an XML namespace, which is [Link]
xhtml for XHTML documents
Optional Attributes
There are no optional attributes for the html element.
Standard Attributes
• dir
• id
• lang
• xml:lang

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

A namespace is where element and attribute names are specified for XML languages. XML is an
extensible markup language, allowing authors to define their own customized elements and attributes.
For example, an animal element with a species attribute could be useful for documents about animals,
and such customized names could be defined in a special namespace. XHTML 1.0, on the other hand, has
a predefined set of element and attribute names, and the correct URL of its namespace is
[Link] (XHTML 1.1 and 2 can be extended with a custom namespace, but those
versions of XHTML haven’t yet been released as official standards). The namespace is declared in an
XHTML document via the xmlns attribute of the root html element.

An HTML element is an object enclosed by a pair of tags

<title>My Home Page</title> is a TITLE element

<b>This text appears bold.</b> is a BOLD element

<p>Part of this text is <b>bold</b>.</p>

is a PARAGRAPH element that contains a BOLD element

an HTML document has two main structural elements

 HEAD contains setup information for the browser & the Web page

e.g., the title for the browser window, style definitions, JavaScript code, …

 BODY contains the actual content to be displayed in the Web page

<html>

<!-- Dave Reed [Link] 1/16/04 -->

<!-- Demo web page -->

<head>

<title>Title for Page</title>

</head>

<body>

Text that appears in the page

</body>

</html>

HTML documents begin and end with <html> and </html> tags

Comments appear between <!-- and -->

HEAD section enclosed between <head> and </head>

BODY section enclosed between <body> and </body>

RELATIVE URLS

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

INTRODUCING THE URL

Every file or document available on the web resides at a unique address called a Uniform Resource
Locator (URL). The term Uniform Resource Identifier (URI) is sometimes used interchangeably with URL,
though URI is a more general term; a URL is a type of URI. We’ll be using the term URL in this book to
discuss addressed file locations. It’s this address that allows a web-connected device to locate a specific
file on a specific server in order to download and display it to the user (or employ it for some other
purpose; not all files on the web are meant to be displayed).

A relative URLis one that points to a resource within the same site by referencing only the path and/or
file, omitting the protocol and hostname since those can be safely assumed. It might look something like
this: examples/chapter1/[Link]
If the destination file is held within the same directory as the file where the URL occurs, the path can be
assumed as well so only the file name and extension are required, like so: [Link]
If the destination is in a directory above the source file, that relative path can be indicated by two dots
and a slash (../), instructing the browser to go up one level to find the resource. Each occurrence of ../
indicates one up-level directive, so a URL pointing two directories upwards might look like this:

../../[Link]
Almost all web servers are configured to interpret a leading slash in a relative URL as the site root
directory, so URLs can be “site root relative,” showing the full path from the site root down:
/examples/chapter1/[Link]

XML CREATING HTML DOCUMENTS

HTML DOCTYPES

If you wish to work with HTML markup rather than XHTML, your documents still need a DOCTYPE to pass
validation. The three DOCTYPEs for HTML 4.01 more or less match those for HTML: Strict, Transitional,
and Frameset.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"[Link]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]

Partial DTDs
Always include full DTDs. Some older web design packages and online resources provide incomplete or
outdated ones that can switch browsers into “quirks” mode, displaying your site as though it were written
with browser-specific, old-fashioned markup and CSS, and rendering the page accordingly (as opposed to
complying strictly with web standards. The argument for quirks mode was largely down to backward-
compatibility. For example, it enabled Internet Explorer 6 to display CSS layouts with the box model used
by Internet Explorer 5.
For the record, an example of an incomplete DTD looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/DTD/[Link]">

In this case, the URI (web address) is relative. Unless you have the DTD in the relevant place on your
own website, the browser will display the page this DTD is included on in quirks mode. (And, quite
frankly, if you do have the DTD on your website instead of using the one on the W3C’s site, you are very

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

odd indeed.) The same thing happens if you leave out DTDs entirely. Therefore, always include a DTD
and always ensure it’s complete

Basic XHTML Document

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

"[Link]
<html xmlns="[Link] lang="en" xml:lang="en">
<head>
<title>My first web page</title>
</head>
<body>
<p>XHTML is easy!</p>
</body>
</html>

The Doctype
An XHTML document begins with a Document Type Declaration (doctype, for short), a required
component that—as the name suggests—declares what type of document this is and the set of
standardized rules the document intends to follow. Each “flavor” of XHTML has its own corresponding
doctype.

• XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
• XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
• XHTML 1.0 Frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"[Link]

The doctype declaration is a sort of tag, but despite its enclosing angle brackets, it’s not an element in
XHTML, so it doesn’t require a closing tag or trailing slash. In fact, it’s not truly part of the document’s
markup at all; it merely relays information about the document to the user-agent so it can determine
what kind of document it’s dealing with and render the page according to the proper rules.

The doctype must appear in your XHTML documents exactly as we’ve shown here, complete with
capitalization and quotes, though it doesn’t have to be broken onto two lines. Other versions of HTML
have their own doctypes, but we’ll be using XHTML 1.0

The Basics of Lists &Tables

A table consists of three elements: table, tr, and td. Listing 7-1 shows the code for a typical table.

Basic Tag Layout of a Table

...
<table>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
</table>

Figure shows what this basic table looks like within a visual web browser. You can see that it creates a set
of columns and rows, similar to a spreadsheet.

<table>
The <table> tag set defines where a table starts and ends. You can place table headers, rows, cells, and
other tables within a table.
Required Attributes
The <table> tag doesn’t have any required attributes.
Optional Attributes
• border: Specifies the width of a table’s border in pixels.
• cellpadding: Specifies the amount of space between the cell walls and the content in pixels or as a
percent.
• cellspacing: Specifies the amount of space between cells in pixels or as a percent.
• frame: Specifies how the outer borders of a table should be displayed. You use this attribute along with
the border attribute. Possible values are above, below, border, box, hsides, lhs, rhs, void, and vsides.
• rules: Specifies the horizontal and vertical divider lines. You use this attribute along with the border
attribute. Possible values are all, cols, groups, none, and rows.
• summary: Specifies a summary of the tables for special browsers that provide speech synthesizing and
nonvisual capabilities. If you need to use a table for layout purposes, you shouldn’t use the summary
attribute, as it will confuse the nonvisual browser user.
• width: Specifies the width of the table in pixels or as a percent. The use of the CSS property width is
the preferred method.

<tr>
The <tr> tag marks the start of a new row in a table.

Standard Attributes
• class
• dir
• id
• lang
• style
• title
• xml:lang
Event Attributes
• onclick
• ondblclick
• onkeydown
• onkeypress
• onkeyup

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

• onmousedown
• onmousemove
• onmouseout
• onmouseover
• onmouseup
<td>
The <td> tag marks the start of a new cell within a row in a table.

Required Attributes
No attributes are required for the <td> tag.

Optional Attributes
• abbr: Specifies a shortened version of the content in a cell. You use this optional attribute to provide
nonvisual browsers a shortened version of long content.
• align: Specifies the alignment of cell content. Possible values are center, char, justify, left, and right. The
use of the CSS property text-align is the preferred method.
• axis: Places a cell into conceptual categories. These categories form an axis in an n-dimensional space.
User agents can then give users access to the categories.
• char: Specifies which character the text should be aligned on. This requires the use of the align
attribute with the value set as char.
• charoff: Specifies in pixels or as a percentage how far the alignment should be adjusted to the first
character to align on. This requires the use of the align attribute with the value set as char.
• colspan: Specifies the number of columns this cell should occupy.
• rowspan: Indicates the number of rows this cell should occupy.
• scope: Specifies if a cell provides header information for the rest of the row that contains it or for the
rest of the column. Valid values are col, colgroup, row, and rowgroup.
• valign: Specifies the vertical alignment of cell content. Possible values are baseline, bottom, middle, and
top.

Coding a Basic Table

In keeping with the restaurant theme used throughout the book, the code in Listing 7-2 creates a table
that contains price information for different pizzas.
Listing [Link] Code for a Basic Table
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
<html xmlns="[Link]
<head>
<title>A Basic Table</title>
</head>
<body>
<table border="1" summary="Prices for types of pizza by size">
<tr>
<td scope="col">Pizza Type</td>
<td scope="col">Small</td>
<td scope="col">Medium</td>
<td scope="col">Large</td>
</tr>
<tr>
<td scope="row">Thin Crust</td>
<td>3.99</td>
<td>4.99</td>
<td>6.99</td>

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

</tr>
<tr>
<td scope="row">Deep Dish</td>
<td>4.99</td>
<td>6.99</td>
<td>8.99</td>
</tr>
<tr>
<td scope="row">Stuffed Crust</td>
<td>5.99</td>
<td>7.99</td>
<td>9.99</td>
</tr>
</table>
</body>
</html>

This table associates the prices of the pizzas with their type and size. You start with the <table> tag, and
then you use the <tr> tag to create rows. You create a row for each type of pizza in the restaurant, and
you create cells within each row to hold the different prices. This table is a perfect way to store the
tabular data.

FORMS
HOW FORMS WORK

Defined in simplest terms, a form is any section of a web page where a user can input information
(though sometimes form elements are used to display information rather than collect it). Your visitors can
enter text into blank fields, make choices by checking boxes, select options from menus, and then click a
button to send it all away for processing. These interactive devices are called controls, and their contents
are the controls’ values.

A form isn’t really complete until it’s submitted. The information that was entered will be transmitted to
the server in a form data set consisting of all the form controls and their values. The job of processing
the data set falls to a form handler: a script or program that has been designed to interpret and utilize
the submitted data. Many form handlers are also designed to validate the entered values, making sure all
the required information has been entered and properly formatted. Handling submitted form data is
something

THE COMPONENTS OF A FORM

As the name of the element implies, form defines the portion of an XHTML document that can receive
input from the user. This is a block-level element that acts as a container for other specialized form
elements, as well as any other elements needed to give the form structure. But even though form is a
block-level element, its contents must be held in block level containers of their own; like the body
element, a form cannot have inline children. To include multiple, separate forms within a single
document, each must be contained by its own form element—you can’t nest a form within a form.

The form element requires an action attribute in its opening tag, whose value is the URL of the form
handler. That form handler may be a document or script elsewhere on the website, a back-end
application, or the very same document the form resides in if its data will be handled exclusively on the
client side by JavaScript or if the XHTML document has been integrated with some kind of scripting
language such as PHP, Ruby, ASP, or [Link]. A method attribute is optional and can accept two values,
get or post, to indicate the particular HTTP method to use when the form is submitted. When the method
value is get, the submitted data set will be appended to the form handler’s URL (from the action

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

attribute) in a query string consisting of all the form’s name/value pairs. The form handler can then
interpret and process that URL, extracting values from the exposed query string. A method of post sends
the data set directly to the form handler application (not in a visible URL query string) for processing at
the server.

The get method should be used to request static data from the server for temporary use (for example,
searching the web for a definition of the word idempotent), especially when the URL—including its query
string—might be reused. The post method is most often used to send data to the server where it will be
saved for use in the future (for example, submitting a comment to a weblog) or when a URL with a
visible query string isn’t desirable for reasons of security and privacy. The default form method is get,
which will be assumed if the method attribute isn’t included.

Simple Form with a Text Control and a Submit Button

<form method="post" action="/cgi-bin/[Link]">

<p><label for="email">Enter your E-mail address to subscribe ➥
to our mailing list.</label></p>
<p><input type="text" name="email" id="email" />
<input type="submit" name="subscribe" value="Subscribe" /></p>
</form>

Required Attributes
• action: Specifies the URL of the form handler, which is the script or application that will process the
submitted form data
Optional Attributes
• accept: Includes a comma-separated list of accepted file MIME types when files are being posted
through the form (via an input type="file" control).
• accept-charset: Specifies the accepted character encoding for data submitted through the form. When
this attribute is missing, the accepted character encoding is assumed to be the same as that of the parent
document.

enctype: Specifies the content type used to post the form. The default value for this attribute is
application/x-www-form-urlencoded, and a value of multipart/ form-data should be used if the submitted
form will include files uploaded via an input type="file" control.

• method: Specifies which HTTP method will be used to submit the form data, either get or post.

Standard Attributes
• class
• dir
• id
• lang
• name
• style
• title
• xml:lang

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

Input

Many common form controls can be created with the inline input element, and each type of input control
is defined with a corresponding type attribute. Because the input element is inline, several can appear
side by side, but all must be held in a block-level container (remember that the form element cannot have
inline children). The input element is also an empty element, so it can hold no text content, can hold no
other elements, and must be closed with a trailing slash (/>). An input element is replaced by a
functional form control when a browser renders the document.

Required Attributes
• name: Identifies the control so it can be matched with its value when the form is submitted. A markup
validator may not generate an error if this attribute is missing, but it’s required in order to successfully
handle the form.

Optional Attributes
• alt: Specifies an alternative text description (only for input type="image").
• accept: Includes a comma-separated list of accepted file MIME types (only for input type="file").
• accesskey: Assigns a keyboard shortcut to a control for easier and quicker access through keyboard
navigation. The value of this attribute is the character corresponding to the access key. The exact
keystroke combination needed to activate an access key varies between browsers and operating systems.
• checked="checked": When present, sets an initial checked state for checkboxes or radio buttons (only
for input type="checkbox" and input type="radio"). Remember that all attributes must have a quoted
value in XHTML, so it must appear as checked="checked", as redundant as that seems.
• disabled="disabled": When present, disables the control so it cannot receive focus or be modified. The
value of a disabled control is not submitted. Many visual browsers will display disabled controls in a
“grayed-out” style.
• ismap="ismap": Declares that the control is a server-side image map (only for input type="image").
• maxlength: Specifies the maximum number of characters that can be entered in a text field (only for
input type="text" or input type="password").
• readonly="readonly": Specifies that the control may only display a value and cannot be modified. This
differs from disabled in that a read-only control can still receive focus and its value is still submitted with
the form (only for input type="text" or input type="password").
• size: Specifies the width of a text, password, or file control when displayed (only for input type="text",
input type="password", or input type="file"). The value of this attribute is a number of characters, so the
actual rendered width will depend on the font size. By default, most browsers will display text and
password fields around 20 or 25 characters wide.
• src: Specifies the source URL of an image file (only for input type="image").
• tabindex: Specifies the control’s position in the tabbing order when active controls are cycled through
using the Tab key.

type: Specifies the type of form control the element will create. The default value is text.
• usemap: Specifies the URL of a client-side image map (only for input type="image").
• value: Specifies the initial value of a control before it has been modified by the user.
Standard Attributes
• class
• dir
• id
• lang
• style
• title
• xml:lang

input type="text"

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

This type of input element creates a single-line field in which your visitor can type whatever text you
might require, such as a name, address, or short answer to a question. It usually appears in visual
browsers as a white, rectangular box with a slightly inset border. These single-line text fields are best for
very short bits of text, no more than a few words. If the entered text exceeds the width of the field, the
excess characters will run off to the left of the control so the latter text is shown but the first portion
appears truncated. Rest assured that the complete text is still there; it’s just not all visible. Longer,
multiline passages of text can be entered into the specialized textarea element, covered later in this
chapter. An input type="text" element may carry an optional maxlength attribute, defining the maximum
number of characters (including spaces) that can be entered. Unfortunately, web browsers offer no
indication that a text field has a maximum allowed length; when you reach the limit, it simply stops
accepting anything you type. If you paste an overlong string of text into a field with a maxlength
attribute, the text will be truncated. If you need to use a maxlength attribute on a text field (for example,
a username field to log in to a system that allows usernames to be 12 characters long only), it’s helpful to
indicate the maximum length in a note near the form control.

input type="password"
This control is similar to a text field; it’s a single-line field and will usually appear as a rectangular box
with a white background and an inset border. But unlike a regular text field, a password field obscures
the entered text, usually as a series of asterisks (*) or solid dots. This offers a bit of added security and
privacy, preventing someone from peering over your shoulder to sneak a peek at your secret password
when you’re logging into a secure system. But this is very light security, protecting your password from a
casual glance only. A properly secured form should be encrypted when it’s submitted to the server; don’t
count on just visually obscuring passwords to keep a determined crook at bay.

A Password Form Control

<div>
<label for="password">
Enter your password <em>(maximum 12 characters)</em>
</label>
<input type="password" name="password" id="password" maxlength="12" />
</div>
Figure : shows how a graphical browser renders the markup, with the entered text obscured as a string
of asterisks—some browsers obscure passwords as dots instead.

input type="checkbox"

A checkbox control is a choice toggle in the form of a small square filled with a check mark (or sometimes
an x) when the control is selected. Checkboxes are used when several options are available and more
than one can be selected, in the sense of “check all that apply.”
A Set of Multiple-Choice Options Using Checkbox Controls
<p>Choose your toppings:</p>
<ul>
<li>
<label for="top1">
<input type="checkbox" id="top1" name="top1" ➥
value="pepperoni" checked="checked" />
Pepperoni
</label>
</li>
<li>
<label for="top2">

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

<input type="checkbox" id="top2" name="top2" value="xcheese" />

Extra cheese
</label>
</li>
<li>
<label for="top3">
<input type="checkbox" id="top3" name="top3" value="onions" />
Onions
</label>
</li>
<li>
<label for="top4">
<input type="checkbox" id="top4" name="top4" value="mushrooms" />
Mushrooms
</label>
</li>
<li>
<label for="top5">
<input type="checkbox" id="top5" name="top5" value="olives" />
Olives
</label>
</li>
</ul>

The list of checkboxes as it might appear in a browser with default styling

Input type="button"
A button control is just that: a generic button. It has no inherent function; it merely serves as a clickable
widget that can trigger a client-side script. The button’s text can be set via the value attribute and will
typically default to “Button” if no value is provided. Instead of embedding these scripted buttons in your
markup, it’s usually preferable to use clientside JavaScript to generate the control. After all, the button
won’t function without a client-side script to imbue it with purpose, and a control that works only with a
script needn’t be displayed if the script isn’t available.

Input type="image"
An image control behaves essentially like a submit button; activating the control will submit the form. But
an input type="image" control allows you to substitute the standard button with a more decorative
graphic. As with other images in XHTML, an image control requires a src attribute to specify the image
file’s URL and an alt attribute to provide an alternative text description when the image isn’t available
(see Chapter 5 for more about the alt attribute). Alternative text is especially vital for image form controls
to ensure that the form can be successfully completed, even when the image can’t be seen. Without a
useful alt attribute, people using text browsers or screen readers will have difficulty identifying the
button, making it nearly impossible for them to submit the form

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

Using input type="image" in Place of input type="submit"

<p><input type="image" name="post" src="[Link]" alt="Post your comment" /></p>

Button

The button element works just like a submit, reset, or button input type, or even an input type="image"
control—activating a button element (with the click of a mouse or press of a key) will submit or reset the
form or trigger a scripted response. The button element is inline and requires a type attribute (with a
value of submit, reset, or button), and like other form controls, a button may appear only within a form.
However, unlike the input element, a button element is not empty; it can contain text or other elements,
offering many more design and semantic options than a simple input element. In fact, a button must hold
some content, because an empty button element will have no default label. Web developer Aaron
Gustafson offers an informative overview of the button element’s usefulness and flexibility in his article
“Push My Button” ([Link]
articles/push_my_button/).
You can see an example of the button element which includes a bit of
emphasized text and an image.

A button Element Containing Text and an Image

<div>
<button type="submit" name="continue">
<strong>Continue to the next page</strong>
<imgsrc="[Link]" width="28" height="20" alt="" />
</button>
</div>
When a browser renders this on-screen (as shown in Figure 8-9), the entire element becomes an active
push button to submit the form. By default, a button element will have the same appearance as an input
button but can be easily styled with CSS (whereas some browsers such as Safari will not allow input
buttons to be styled at all).
STYLE SHEETS :CSS

Introduction to Cascading Style Sheets (CSS)

What is CSS?

 CSS stands for Cascading Style Sheets

 Styles define how to display HTML elements
 Styles were added to HTML 4.0 to solve a problem
 External Style Sheets can save a lot of work
 External Style Sheets are stored in CSS files

DHTML – DYNAMIC HYPER TEXT MARKUP LANGUAGE

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

DHTML is a new and emerging technology that has evolved to meet the increasing demand for eye-
catching and mind-catching web sites.

DHTML combines HTML with Cascading Style Sheets (CSS) and Scripting Languages. HTML specifies a
web page’s elements like table, frame, paragraph, bulleted list, etc. CSS can be used to determine an
element’s size, color, position and a number of other features.

Scripting Languages (JavaScript and VBScript) can be used to manipulate the web page’s elements so
that styles assigned to them can change in response to a user’s input.

The combined technology of HTML and CSS becomes DHTML.

Similarly the combined technology of HTML and Scripting Languages also becomes DHTML.

CSS Demo
An HTML document can be displayed with different styles:

CSS are powerful mechanism for adding styles (e.g. Fonts, Colors, and Spacing) to web documents.

They enforce standards and uniformity throughout a web site and provide numerous attributes to
create dynamic effects.

The advantage of a style sheet includes the ability to make global changes to all documents from a
single location. Style sheets are said to cascade when they combine to specify the appearance of a page.

The style assignment process is accomplished with the <STYLE>…</STYLE> tags.

FEATURES

The latest version of Cascade Style Sheets, CSS 3, was developed to make Web design easier but it
became a hot topic for a while because not all browsers supported it. However, trends change quickly in
technology and all browser makers currently are implementing complete CSS 3 support. Making that
process easier for the browser manufacturers is CSS 3's modularized specification, which allows them to
provide support for modules incrementally without having to perform major refactoring of the browsers'
codebases. The modularization concept not only makes the process of approving individual CSS 3
modules easier and faster, but it also makes documenting the spec easier.

Eventually, CSS 3 -- along with HTML5 -- are going to be the future of the web. You should begin making
your Web pages compatible with these latest specifications. In this article, I explore 10 of the exciting
new features in CSS 3, which is going to change the way developers who used CSS2 build websites.

1. CSS 3 Selectors

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

In addition to the selectors that were available in CSS2, CSS 3 introduces some new selectors. Using
these selectors you can choose DOM elements based on their attributes. So you don't need to specify
classes and IDs for every element. Instead, you can utilize the attribute field to style them.

The most useful attributes for selectors are:

 [attr^=val] –- matches a DOM element with the attribute attr and a value starting with val
 [attr$=val] –- matches a DOM element with the attribute attr and a value ending with the suffix
val
 [attr*=val] –- matches a DOM element with the attribute attr and a value containing the
substring val
CSS

<div class="code"><style>

p[title^="car"] {color: red;}

img[src*="birth"] {border:3px solid green;}

</style></div>

HTML

1 <div class="code"><img src="happy_birthdays.jpg" />

2 <p title="container">I am displaying a container. And this attribute won't match me. </p>

3 <p title="carousel">This carousel will match</p></div>

Apparently, the new CSS 3 selectors make styling different elements on a webpage pretty easy.

2. CSS 3 Rounded Corners

Rounded corner elements can spruce up a website, but creating a rounded corner requires a designer to
write a lot of code. Adjusting the height, width and positioning of these elements is a never-ending chore
because any change in content can break them.

CSS 3 addresses this problem by introducing the border-radius property, which gives you the same
rounded-corner effect and you don't have to write all the code. Here are examples for displaying rounded
corners in different places of a website.

CSS

1 <div class="code"> .box{ border: 2px solid orange; border-radius : 25px; width: 100px; padding: 1

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

0px; text-align:center; }</div>

HTML

1 <div class="code"><div class="box">Submit</div></div>

Output

With the introduction of rounded corners, CSS 3 eliminates the need for including external images or
using any sort of JavaScript code to position the images. All you need is the border-radius property.

3. CSS 3 Border Image

Another exciting feature in CSS 3 is the ability to swap out a border with an image. The property border-
image allows you to specify an image to display instead of a plain solid-colored border.

CSS

1 <div class="code">#col{border-image:url(border_image.png) 100 100 100 100 round round; borde

r-width: 10px;}</div>

HTML

1 <div class="code"><div id="col">my content</div></div>

4. CSS 3 Box Shadow

A box shadow allows you to create a drop shadow for an element. Usually this effect is achieved using a
repeated image around the element. However, with the property box-shadow this can be achieved by
writing a single line of CSS code.

After previously removing this property from the CSS 3 Backgrounds and Borders Module, the W3C added
it back in the last working draft.

CSS

1 <div class="code">.shadow{ background-color: #EEEEEE; box-shadow:3px 3px 3px 2px #797979;

height: 50px; width: 100px; padding: 5px;}</div>

HTML

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

1 <div class="code"><div class="shadow"> my content </div></div>

Output

5. CSS 3 Text Shadow

The new text-shadow property allows you to add drop shadows to the text on a webpage. Prior to CSS 3,
this would be done by either using an image or duplicating a text element and then positioning it. A
similar property called box-shadow is also available in CSS 3.

CSS

1 <div class="code">p{ text-shadow: #aaa 2px 2px 2px; }</div>

HTML

1 <div class="code"><p>My text is more beautiful, than a normal webfont</p></div>

Output

6. CSS 3 Gradient

While the Gradient effect is a sleek Web design tool, it can be a drain on resources if not implemented
correctly using current CSS techniques. Some designers use a complete image and put in the background
for the gradient effect, which increases the page load time.

Here are examples of the linear gradient property in CSS 3. To date, it is supported only in Safari 4 and
Chrome (WebKit) and Firefox 3.6.

CSS

1 <div class="code">#gradient { background-image: -webkit-gradient(linear,left bottom,left top,color-

stop(0, #E6C674),color-stop(1, #F7ECCA)); background-image: -moz-linear-gradient(center bottom

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

, #E6C674 0pt, #F7ECCA 100%); height: 50px;}</div>

HTML

1 <div class="code"><p id="gradient">My text is more beautiful, than a normal webfont</p></div>

Output

7. CSS 3 RGBA: Color, Now with Opacity

The RGB property in CSS is used to set colors for different elements. CSS 3 introduces a modification and
added opacity manipulation to this property. RGB has been transformed to RGBA (Red Green Blue Alpha
channels), which simplifies how you control the opacity of elements.

CSS

1 <div class="code">p {background: rgba(217, 127, 185, .5); }</div>

The above CSS code will make the opacity of p tags 50%, as specified in the RGBA property.

8. CSS 3 Transform (Element Rotation)

CSS 3 also introduced a property called transform, which enables rotating Web elements on a webpage.
As of now, if a designer wants to rotate of an element, he or she uses JavaScript. Many JavaScript
extensions/plugins are available online for this feature, but they can make the code cumbersome and
most importantly consume more resources.

Here's how rotate an element in CSS 3.

CSS

1 <div class="code">p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg);} </div>

HTML

1 <div class="code"><p>I can rotate this element, by 180degree using -moz-transform property</p
></div>

Ouptut

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

9. CSS 3 Multicolumn Layout

Almost every webpage today is divided into columns or boxes, and adjusting these boxes so they display
correctly on different browsers takes a toll on Web designers. CSS 3 solves this problem with the
multicolumn layout property; all you have to do is specify the number of columns you need and they will
be created.

This property is currently supported by the Firefox and WebKit browsers.

CSS

1 <div class="code">#col{-moz-column-count:3;-webkit-column-count:3;} </div>

HTML

1 <div class="code"><div id="col"> text truncated, due to length</div></div>

view plain | print | copy to clipboard | ?

10. CSS 3 Web Fonts

CSS 3 also facilitates embedding any custom font on a webpage. Fonts are dependent on the client
system and Web pages can render only fonts that are supported by the browser or the client machine. By
using the @font-face property, you can include the font from a remote location and can then use it.

CSS

1 <div class="code">@font-face { src: url("[Link]"); font-family: "myfont_bold"; }</div>

This is really helpful in regional websites, where it provides support to various region-specific fonts such
as Japanese, Devanagari, and so on.

CORE SYNTAX:

CSS Syntax

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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

The selector is normally the HTML element you want to style.

Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value.

CSS Example
CSS declarations always ends with a semicolon, and declaration groups are surrounded by curly brackets:
p {color:red;text-align:center;}

To make the CSS more readable, you can put one declaration on each line,
like this:
Example
p
{
color:red;
text-align:center;
}

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;
}

The id and class Selectors

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id"
and "class".

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

The id Selector
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#".
The style rule below will be applied to the element with id="para1":
Example
#para1
{
text-align:center;
color:red;
}

Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class
selector is most often used on several elements.
This allows you to set a particular style for any HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
In the example below, all HTML elements with class="center" will be center-
aligned:
Example
.center {text-align:center;}

You can also specify that only specific HTML elements should be affected by a class.
In the example below, all p elements with class="center" will be center-
aligned:
Example
[Link] {text-align:center;}

When a browser reads a style sheet, it will format the document according to it.

STYLE SHEETS AND HTML STYLE RULE

Declarations
Properties
A property is assigned to a selector in order to manipulate its style. Examples of properties include color,
margin, and font.
Values

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

The declaration value is an assignment that a property receives. For example, the property color could
receive the value red.
Grouping
In order to decrease repetitious statements within style sheets, grouping of selectors and declarations is
allowed. For example, all of the headings in a document could be given identical declarations through a
grouping:
H1, H2, H3, H4, H5, H6 {
color: red;
font-family: sans-serif }
Inheritance
Virtually all selectors which are nested within selectors will inherit the property values assigned to the
outer selector unless otherwise modified. For example, a color defined for the BODY will also be applied
to text in a paragraph.
There are some cases where the inner selector does not inherit the surrounding selector's values, but
these should stand out logically. For example, the margin-top property is not inherited; intuitively, a
paragraph would not have the same top margin as the document body.
Comments
Comments are denoted within style sheets with the same conventions that are used in C programming. A
sample CSS1 comment would be in the format:
/* COMMENTS CANNOT BE NESTED */
Pseudo-classes and Pseudo-elements
Pseudo-classes and pseudo-elements are special "classes" and "elements" that are automatically
recognized by CSS-supporting browsers. Pseudo-classes distinguish among different element types ( e.g.,
visited links and active links represent two types of anchors). Pseudo-elements refer to sub-parts of
elements, such as the first letter of a paragraph.
Rules with pseudo-classes or pseudo-elements take the form
selector:pseudo-class { property: value }
or
selector:pseudo-element { property: value }
Pseudo-classes and pseudo-elements should not be specified with HTML's CLASS attribute. Normal
classes may be used with pseudo-classes and pseudo-elements as follows:
[Link]:pseudo-class { property: value }
or
[Link]:pseudo-element { property: value }
Anchor Pseudo-classes
Pseudo-classes can be assigned to the A element to display links, visited links and active links differently.
The anchor element can give the pseudo-classes link, visited, or active. A visited link could be defined to
render in a different color and even a different font size and style.
An interesting effect could be to have a currently selected (or "active") link display in a slightly larger font
size with a different color. Then, when the page is re-selected the visited link could display in a smaller
font size with a different color. The sample style sheet might look like this:
A:link { color: red }
A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }
First Line Pseudo-element
Often in newspaper articles, such as those in the Wall Street Journal, the first line of text in an article
is displayed in bold lettering and all capitals. CSS1 has included this capability as a pseudo-element. A
first-line pseudo-element may be used in any block-level element (such as P, H1, etc.). An example of a
first-line pseudo-element would be:
P:first-line {
font-variant: small-caps;
font-weight: bold }

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

First Letter Pseudo-element

The first-letter pseudo-element is used to create drop caps and other effects. The first letter of text within
an assigned selector will be rendered according to the value assigned. A first-letter pseudo-element may
be used in any block-level element. For example:
P:first-letter { font-size: 300%; float: left }
would create a drop cap three times the normal font size.
Cascading Order
When multiple style sheets are used, the style sheets may fight over control of a particular selector. In
these situations, there must be rules as to which style sheet's rule will win out. The following
characteristics will determine the outcome of contradictory style sheets.
1. ! important
Rules can be designated as important by specifying ! important. A style that is designated as important
will win out over contradictory styles of otherwise equal weight. Likewise, since both author and reader
may specify important rules, the author's rule will override the reader's in cases of importance. A sample
use of the ! important statement:

BODY { background: url([Link]) white;

background-repeat: repeat-x ! important }

2. Origin of Rules (Author's vs. Reader's)

As was previously mentioned, both authors and readers have the ability to specify style sheets. When
rules between the two conflict, the author's rules will win out over reader's rules of otherwise equal
weight. Both author's and reader's style sheets override the browser's built-in style sheets.

Authors should be wary of using ! important rules since they will override any of the user's ! important
rules. A user may, for example, require large font sizes or special colors due to vision problems, and such
a user would likely declare certain style rules to be ! important, since some styles are vital for the user to
be able to read a page. Any ! important rules will override normal rules, so authors are advised to use
normal rules almost exclusively to ensure that users with special style needs are able to read the page.

3. Selector Rules: Calculating Specificity

Style sheets can also override conflicting style sheets based on their level of specificity, where a more
specific style will always win out over a less specific one. It is simply a counting game to calculate the
specificity of a selector.

a. Count the number of ID attributes in the selector.

b. Count the number of CLASS attributes in the selector.
c. Count the number of HTML tag names in the selector.
Finally, write the three numbers in exact order with no spaces or commas to obtain a three digit number.
(Note, you may need to convert the numbers to a larger base to end up with three digits.) The final list of
numbers corresponding to selectors will easily determine specificity with the higher numbers winning out
over lower numbers. Following is a list of selectors sorted by specificity:

#id1 {xxx} /* a=1 b=0 c=0 --> specificity = 100 */

UL UL [Link] {xxx} /* a=0 b=1 c=3 --> specificity = 013 */

[Link] {xxx} /* a=0 b=1 c=1 --> specificity = 011 */

LI {xxx} /* a=0 b=0 c=1 --> specificity = 001 */

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

4. Order of Specification
To make it easy, when two rules have the same weight, the last rule specified wins.

Overview of rules

1. Styles can be inherited from a parent

2. Later styles over-rule earlier styles
3. Styles can combine from different sources
4. Style definitions can use any combination of element, id, classname and modifier
5. You can specify an element with a certain element type AND id and classname(s)
6. Styles can apply to elements nested in a particular way

CASCADING, AND INHERITANCE

Specified, computed, and actual values

Once a user agent has parsed a document and constructed a document tree, it must assign, for every
element in the tree, a value to every property that applies to the target media type.
The final value of a property is the result of a three-step calculation: the value is determined through
specification (the "specified value"), then resolved into an absolute value if necessary (the "computed
value"), and finally transformed according to the limitations of the local environment (the "actual value").
Specified values
User agents must first assign a specified value to a property based on the following mechanisms (in order
of precedence):
 If the cascade results in a value, use it.
 Otherwise, if the property is inherited, use the value of the parent element, generally the
computed value.
 Otherwise use the property's initial value. The initial value of each property is indicated in the
property's definition.
Since it has no parent, the root of the document tree cannot use values from the parent element; in this
case, the initial value is used if necessary.
Computed values
Specified values may be absolute (i.e., they are not specified relative to another value, as in 'red' or
'2mm') or relative (i.e., they are specified relative to another value, as in 'auto', '2em', and '12%'). For
absolute values, no computation is needed to find the computed value.
Relative values, on the other hand, must be transformed into computed values: percentages must be
multiplied by a reference value (each property defines which value that is), values with relative units (em,
ex, px) must be made absolute by multiplying with the appropriate font or pixel size, 'auto' values must
be computed by the formulas given with each property, certain keywords ('smaller', 'bolder', 'inherit')
must be replaced according to their definitions.
In most cases, elements inherit computed values. However, there are some properties whose specified
value may be inherited (e.g., the number value for the 'line-height' property). In the cases where child
elements do not inherit the computed value, this is described in the property definition.

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

Actual values
A computed value is in principle ready to be used, but a user agent may not be able to make use of the
value in a given environment. For example, a user agent may only be able to render borders with integer
pixel widths and may therefore have to approximate the computed width. The actual value is the
computed value after any approximations have been applied.
Inheritance
Some values are inherited by the children of an element in the document tree. Each property defines
whether it is inherited or not.
Suppose there is an H1 element with an emphasizing element (EM) inside:
<H1>The headline <EM>is</EM> important!</H1>
If no color has been assigned to the EM element, the emphasized "is" will inherit the color of the parent
element, so if H1 has the color blue, the EM element will likewise be in blue.
To set a "default" style property for a document, authors may set the property on the root of the
document tree. In HTML, for example, the HTML or BODY elements can serve this function. Note that this
will work even if the author omits the BODY tag in the HTML source since the HTML parser will infer the
missing tag.
For example, since the 'color' property is inherited, all descendants of the BODY element
will inherit the color 'black':
BODY { color: black; }
Specified percentage values are not inherited; computed values are.
For example, given the following style sheet:
BODY { font-size: 10pt }
H1 { font-size: 120% }
and this document fragment:
<BODY>
<H1>A <EM>large</EM> heading</H1>
</BODY>
the 'font-size' property for the H1 element will have the computed value '12pt' (120% times 10pt, the
parent's value). Since the computed value of 'font-size' is inherited, the EM element will have the
computed value '12pt' as well. If the user agent does not have the 12pt font available, the actual value of
'font-size' for both H1 and EM might be, for example, '11pt'.
The 'inherit' value
Each property may also have a specified value of 'inherit', which means that, for a given element, the
property takes the same computed value as the property for the element's parent. The inherited value,
which is normally only used as a fallback value, can be strengthened by setting 'inherit' explicitly.
In the example below, the 'color' and 'background' properties are set on the BODY element. On all other
elements, the 'color' value will be inherited and the background will be transparent. If these rules are part
of the user's style sheet, black text on a white background will be enforced throughout the document.
BODY {
color: black !important;
background: white !important;
}

*{
color: inherit !important;
background: transparent;
}

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

The @import rule

The '@import' rule allows users to import style rules from other style sheets. Any @import rules must
precede all rule sets in a style sheet. The '@import' keyword must be followed by the URI of the style
sheet to include. A string is also allowed; it will be interpreted as if it had url(...) around it.
The following lines are equivalent in meaning and illustrate both '@import' syntaxes (one with "url()" and
one with a bare string):
@import "[Link]";
@import url("[Link]");
So that user agents can avoid retrieving resources for unsupported media types, authors may
specify media-dependent @import rules. These conditional imports specify comma-separated
media types after the URI.
The following rules have the same effect as if the imported style sheet were wrapped in an
@media rule for the same media, but it may save the UA a fruitless download.
@import url("[Link]") print;
@import url("[Link]") projection, tv;
In the absence of any media types, the import is unconditional. Specifying 'all' for the medium
has the same effect.

The cascade
Style sheets may have three different origins: author, user, and user agent.
 Author. The author specifies style sheets for a source document according to the conventions of
the document language. For instance, in HTML, style sheets may be included in the document or linked
externally.
 User: The user may be able to specify style information for a particular document. For example,
the user may specify a file that contains a style sheet or the user agent may provide an interface that
generates a user style sheet (or behave as if it did).
 User agent: Conforming user agents must apply a default style sheet (or behave as if they did)
prior to all other style sheets for a document. A user agent's default style sheet should present the
elements of the document language in ways that satisfy general presentation expectations for the
document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font).
See "A sample style sheet for HTML 4.0" for a recommended default style sheet for HTML 4.0 documents.
Note that the default style sheet may change if system settings are modified by the user (e.g., system
colors). However, due to limitations in a user agent's internal implementation, it may be impossible to
change the values in the default style sheet.
Style sheets from these three origins will overlap in scope, and they interact according to the cascade.
The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest
weight takes precedence.
By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is
reversed, however, for "!important" rules. All rules user and author rules have more weight than rules in
the UA's default style sheet.
Imported style sheets also cascade and their weight depends on their import order. Rules specified in a
given style sheet override rules imported from other style sheets. Imported style sheets can themselves
import and override other style sheets, recursively, and the same precedence rules apply.

Cascading order
To find the value for an element/property combination, user agents must apply the following sorting
order:
 Find all declarations that apply to the element and property in question, for the target media
type. Declarations apply if the associated selector matches the element in question.
 The primary sort of the declarations is by weight and origin: for normal declarations, author style
sheets override user style sheets which override the default style sheet. For "!important" declarations,
user style sheets override author style sheets which override the default style sheet. "!important"

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

declaration override normal declarations. An imported style sheet has the same origin as the style sheet
that imported it.
 The secondary sort is by specificity of selector: more specific selectors will override more general
ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
 Finally, sort by order specified: if two rules have the same weight, origin and specificity, the latter
specified wins. Rules in imported style sheets are considered to be before any rules in the style sheet
itself.
Apart from the "!important" setting on individual declarations, this strategy gives author's style sheets
higher weight than those of the reader. It is therefore important that the user agent give the user the
ability to turn off the influence of a certain style sheet, e.g., through a pull-down menu.

Important Rules

CSS attempts to create a balance of power between author and user style sheets. By default, rules in an
author's style sheet override those in a user's style sheet (see cascade rule 3).
However, for balance, an "!important" declaration (the keywords "!" and "important" follow the
declaration) takes precedence over a normal declaration. Both author and user style sheets may contain
"!important" declarations, and user "!important" rules override author "!important" rules. This CSS feature
improves accessibility of documents by giving users with special requirements (large fonts, color
combinations, etc.) control over presentation.

Note. This is a semantic change since CSS1. In CSS1, author "!important" rules took precedence over
user "!important" rules.
Declaring a shorthand property (e.g., 'background') to be "!important" is equivalent to declaring all of its
sub-properties to be "!important".
The first rule in the user's style sheet in the following example contains an "!important" declaration,
which overrides the corresponding declaration in the author's styles sheet. The second declaration will
also win due to being marked "!important". However, the third rule in the user's style sheet is not "!
important" and will therefore lose to the second rule in the author's style sheet (which happens to set
style on a shorthand property). Also, the third author rule will lose to the second author rule since the
second rule is "!important". This shows that "!important" declarations have a function also within author
style sheets.
/* From the user's style sheet */
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }

/* From the author's style sheet */

P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }
Calculating a selector's specificity
A selector's specificity is calculated as follows:
 count the number of ID attributes in the selector (= a)
 count the number of other attributes and pseudo-classes in the selector (= b)
 count the number of element names in the selector (= c)
 ignore pseudo-elements.
Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.
Some examples:
* {} /* a=0 b=0 c=0 -> specificity = 0 */
LI {} /* a=0 b=0 c=1 -> specificity = 1 */
UL LI {} /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+LI {} /* a=0 b=0 c=3 -> specificity = 3 */

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

H1 + *[REL=up]{} /* a=0 b=1 c=1 -> specificity = 11 */

UL OL [Link] {} /* a=0 b=1 c=3 -> specificity = 13 */
[Link] {} /* a=0 b=2 c=1 -> specificity = 21 */
#x34y {} /* a=1 b=0 c=0 -> specificity = 100 */
In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, but
for the purpose of step 3 of the cascade algorithm, they are considered to have an ID selector
(specificity: a=1, b=0, c=0). For the purpose of step 4, they are considered to be after all other rules.
<HEAD>
<STYLE type="text/css">
#x97z { color: blue }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: red">
</BODY>
In the above example, the color of the P element would be red. Although the specificity is the same for
both declarations, the declaration in the "style" attribute will override the one in the STYLE element
because of cascading rule 4.

Precedence of non-CSS presentational hints

The UA may choose to honor presentational hints from other sources than style sheets, for example the
FONT element or the "align" attribute in HTML. If so, the non-CSS presentational hints must be translated
to the corresponding CSS rules with specificity equal to zero. The rules are assumed to be at the start of
the author style sheet and may be overridden by subsequent style sheet rules.
Note. In a transition phase, this policy will make it easier for stylistic attributes to coexist with style
sheets.
Note. In CSS1, the non-CSS presentational hints were given a specificity equal to 1, not 0. The change is
due to the introduction of the universal selector, which has a specificity of 0.

Three Ways to Insert CSS

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

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you
can change the look of an entire Web site by changing one file. Each page must link to the style sheet
using the <link> tag. The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css" href="[Link]" />
</head>

An external style sheet can be written in any text editor. The file should not contain any html tags. Your
style sheet should be saved with a .css extension. An example of a style sheet file is shown below:
hr {color:sienna;}
p {margin-left:20px;}

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

body {background-image:url("images/[Link]");}

Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of "margin-
left:20px") will work in IE, but not in Firefox or Opera.

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal
styles in the head section of an HTML page, by using the <style> tag, like this:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/[Link]");}
</style>
</head>

Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this
method sparingly!
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS
property. The example shows how to change the color and the left margin of a paragraph:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values will be
inherited from the more specific style sheet.
For example, an external style sheet has these properties for the h3 selector:
h3
{
color:red;
text-align:left;
font-size:8pt;
}

And an internal style sheet has these properties for the h3 selector:
h3
{
text-align:right;
font-size:20pt;

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
color:red;
text-align:right;
font-size:20pt;

The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by
the internal style sheet.

Multiple Styles Will Cascade into One

Styles can be specified:
 inside an HTML element
 inside the head section of an HTML page
 in an external CSS file
Tip: Even multiple external style sheets can be referenced inside a single HTML document.
Cascading order
What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the
following rules, where number four has the highest priority:
1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a
style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).
Note: If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the
external style sheet will override the internal style sheet!

BOX MODEL - NORMAL FLOW- BOX LAYOUT - BEYOND THE NORMAL FLOW

All CSS Background Properties

CSS background properties are used to define the background effects of an element.
CSS properties used for background effects:

The number in the "CSS" column indicates in which CSS version the property
is defined (CSS1 or CSS2).
Property Description Values CSS

background Sets all the background properties in background-color 1

one declaration background-image
background-repeat

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

background-attachment
background-position
inherit

background-attachment Sets whether a background image isscroll 1

fixed or scrolls with the rest of thefixed
page inherit

background-color Sets the background color of ancolor-rgb 1

element color-hex
color-name
transparent
inherit

background-image Sets the background image for anurl(URL) 1

element none
inherit

background-position Sets the starting position of aleft top1

background image left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%
xpos ypos
inherit

background-repeat Sets if/how a background image willrepeat 1

be repeated repeat-x
repeat-y
no-repeat
inherit

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

TEXT FORMATTING
This text is styled with some of the text formatting properties. The
heading uses the text-align, text-transform, and color properties. The
paragraph is indented, aligned, and the space between characters is
s p e c i f i e d . T h e u n d e r l i n e i s r e m o v e d f r o m t h e " Tr y i t y o u r s e l f " l i n k .

Text Color

The color property is used to set the color of the text. The 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"
The default color for a page is defined in the body selector.

Example
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

For W3C compliant CSS: If you define the color property, you must also define the background-color

property.
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line
has equal width, and the left and right margins are straight (like in
magazines and newspapers).
Example
h1 {text-align:center;}
[Link] {text-align:right;}
[Link] {text-align:justify;}

Text Decoration
The text-decoration property is used to set or remove decorations from text.
The text-decoration property is mostly used to remove underlines from links
for design purposes:
Example
a {text-decoration:none;}

It can also be used to decorate text:

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

Example
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

It is not recommended to underline text that is not a link, as this often confuses users.

Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or
capitalize the first letter of each word.
Example
[Link] {text-transform:uppercase;}
[Link] {text-transform:lowercase;}
[Link] {text-transform:capitalize;}

Text Indentation
The text-indentation property is used to specify the indentation of the first
line of a text.
Example
p {text-
indent:50px;}____

All CSS Font

Properties
The number in the
"CSS" column
indicates in which
CSS version the
property is defined
(CSS1 or CSS2).

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

CSS Links

Links can be styled

in different ways.
Styling Links
Links can be styled
with any CSS
property (e.g.
color, font-family,
background, etc.).
Special for links
are that they can
be styled
differently
depending on what
state they are in.
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
Example

When setting the style for several link states, there are some order rules:
 a:hover MUST come after a:link and a:visited
 a:active MUST come after a:hover

Common Link Styles

In the example above the link changes color depending on what state it is in.
Lets go through some of the other common ways to style links:
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;}

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

a:active {text-decoration:underline;}

Background Color
The background-color property specifies the background color for links:
Example

CSS Lists
The CSS list properties allow you to:
 Set different list item markers for ordered lists
 Set different list item markers for unordered lists
 Set an image as the list item marker

Example
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url([Link]);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

Example explained:
 For ul:
o Set the list-style-type to none to remove the list item marker
o Set both padding and margin to 0px (for cross-browser compatibility)
 For li:
o Set the URL of the image, and show it only once (no-repeat)
o Position the image where you want it (left 0px and down 5px)
o Position the text in the list with padding-left

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

All CSS List Properties

The number in the "CSS" column indicates in which CSS version the property
is defined (CSS1 or CSS2).
Property Description Values CSS

list-style Sets all the properties for a list in one declaration list-style-type 1
list-style-position
list-style-image
inherit

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

none
inherit

list-style-position Specifies if the list-item markers should appear inside 1

inside or outside the content flow outside
inherit

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

disc
circle
square
decimal
decimal-leading-zero
armenian
georgian
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
lower-roman
upper-roman
inherit

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about
design and layout.
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins,
borders, padding, and the actual content.
The box model allows us to place a border around elements and space elements in relation to other
elements.
The image below illustrates the box model:

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

Explanation of the different parts:

 Margin - Clears an area around the border. The margin does not have a background color, it is
completely transparent
 Border - A border that goes around the padding and content. The border is affected by the
background color of the box
 Padding - Clears an area around the content. The padding is affected by the background color of
the box
 Content - The content of the box, where text and images appear
In order to set the width and height of an element correctly in all browsers, you need to know how the
box model works.

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:

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

Let's do the math:

250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px
Imagine that you only had 250px of space. Let's make an element with a
total width of 250px:
Example

The total width of an element should always be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin +
right margin
The total height of an element should always be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top
margin + bottom margin

Browsers Compatibility Issue

If you tested the previous example in Internet Explorer, you saw that the total width was not exactly
250px.
IE includes padding and border in the width, when the width property is set, unless a DOCTYPE is
declared.
To fix this problem, just add a DOCTYPE to the code:
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html>
<head>
<style type="text/css">
[Link]
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

CSS Border

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

The CSS border properties allow you to specify the style and color of an element's border.
All CSS Border Properties
The number in the "CSS" column indicates in which CSS version the property
is defined (CSS1 or CSS2).
Property Description Values CSS

border Sets all the border properties in one declaration border-width 1

border-style
border-color

border-bottom Sets all the bottom border properties in oneborder-bottom-width 1

declaration border-bottom-style
border-bottom-color

border-bottom-color Sets the color of the bottom border border-color 2

border-bottom-style Sets the style of the bottom border border-style 2

border-bottom-width Sets the width of the bottom border border-width 1

border-color Sets the color of the four borders color_name 1

hex_number
rgb_number
transparent
inherit

border-left Sets all the left border properties in one border-left-width 1

declaration border-left-style
border-left-color

border-left-color Sets the color of the left border border-color 2

border-left-style Sets the style of the left border border-style 2

border-left-width Sets the width of the left border border-width 1

border-right Sets all the right border properties in oneborder-right-width 1

declaration border-right-style
border-right-color

border-right-color Sets the color of the right border border-color 2

border-right-style Sets the style of the right border border-style 2

border-right-width Sets the width of the right border border-width 1

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

border-style Sets the style of the four borders none 1

hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit

border-top Sets all the top border properties in oneborder-top-width 1

declaration border-top-style
border-top-color

border-top-color Sets the color of the top border border-color 2

border-top-style Sets the style of the top border border-style 2

border-top-width Sets the width of the top border border-width 1

border-width Sets the width of the four borders thin

medium
thick
length

The CSS margin properties define the space around elements.

Margin
The margin clears an area around an element (outside the border). The margin does not have a
background color, and is completely transparent.
The top, right, bottom, and left margin can be changed independently using separate properties. A
shorthand margin property can also be used, to change all margins at once.
Possible Values
Value Description

auto The browser sets the margin.

The result of this is dependant of the browser

length Defines a fixed margin (in pixels, pt, em, etc.)

% Defines a margin in % of the containing element

It is possible to use negative values, to overlap content.

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

All CSS Margin Properties

The number in the "CSS" column indicates in which CSS version the property
is defined (CSS1 or CSS2).
Property Description Values CSS

margin A shorthand property for setting the marginmargin-top 1

properties in one declaration margin-right
margin-bottom
margin-left

margin-bottom Sets the bottom margin of an element auto 1

length
%

margin-left Sets the left margin of an element auto 1

length
%

margin-right Sets the right margin of an element auto 1

length
%

margin-top Sets the top margin of an element auto 1

length
%

CSS Padding
The CSS padding properties define the space between the element border and the element content.

Padding
The padding clears an area around the content (inside the border) of an element. The padding is affected
by the background color of the element.
The top, right, bottom, and left padding can be changed independently using separate properties. A
shorthand padding property can also be used, to change all paddings at once.
Possible Values
Value Description

length Defines a fixed padding (in pixels, pt, em, etc.)

% Defines a padding in % of the containing element

Downloaded by Gokul M (gokulcrizy13@[Link])

 lOMoARcPSD|25602207

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

All CSS Padding Properties

The number in the "CSS" column indicates in which CSS version the property
is defined (CSS1 or CSS2).
Property Description Values CSS

padding A shorthand property for setting all the padding padding-top 1

properties in one declaration padding-right
padding-bottom
padding-left

padding-bottom Sets the bottom padding of an element length 1

%

padding-left Sets the left padding of an element length 1

%

padding-right Sets the right padding of an element length 1

%

padding-top Sets the top padding of an element length 1

%

The attributes that can be specified to the <STYLE> tag are

1. Font Attributes

2. Color and Background attributes

3. Text Attributes

4. Border Attributes

5. Margin Attributes and

6. List Attributes.

Downloaded by Gokul M (gokulcrizy13@[Link])