UNIT ONE Lecture Notes

WEBTECHNOLOGY -241208 Lecture Notes - UNT-
UNIT - I
`
Web Essentials: Clients, Servers, and Communication. The nternet-Basic nternet Protocols -The
World Wide Web-HTTP request message-response message-Web Clients Web Servers-Case Study.
Markup Languages: XHTML. An ntroduction 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 Seets: CSS ntroduction to Cascading Style Sheets-Features-
Core Syntax-Style Sheets and HTML Style Rule Cascading and nheritance-Text Properties-Box Model
Normal Flow Box Layout-Beyond the Normal Flow-Other Properties-Case Study.
WE! ESSE"T#$LS: CL#E"TS, SE%&E%S, $"' C(MM)"#C$T#("
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 - #nternet system is te best e*ample +or 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,
n 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. ts 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 nternet is the web
The web servers such as Apache respond the requests from web clients such as Netscape.
THE CL#E"T.SE%&E% M('EL , M('EL / , CL#E"T.SE%&E%
1. Model 1 is the simplest of client/server model in web architecture.
2. The client sends Request to the Web Server through nternet.
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.
M('EL 0 1 WWW 'atabase Client.Server
1. n Model 2 the client sends Request to the Web Server through nternet.
3. f 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.
M('EL 2 1 WE! SE%&E% . $33L#C$T#(" SE%&E%
3. f 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.
M('EL 4 1 WE! SE%&E% . $33L#C$T#(" SE%&E%.'$T$!$SE SE%&E%
3. f 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.
M('EL 5: WE! SE%&E% . T%$"S$CT#(" SE%&E%.'$T$!$SE SE%&E%
3. f 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.
6. The Transaction ensures the ACD properties for several transactions with the Databases.
M('EL 6: WE! SE%&E% . T%$"S$CT#(" SE%&E%
3. f 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.
CH$%$CTE%#ST#CS (7 CL#E"TS $"' SE%&E%S
Client so+t8are
s an arbitrary application program
s 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 so+t8are
s a special-purpose, privileged program
s 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
#"TE%"ET
H#ST(%9 (7 THE #"TE%"ET
The nternet 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 nternet's founders; they were far
more concerned with robust message delivery in the face of an anticipated World War .
n fact, the very open nature of the nternet 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. n 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 nternet 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 nternet for weak
spots. t 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.
n the 1950s and early 1960s, prior to the widespread inter-networking that led to the nternet,
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.
WH$T #S $" #"TE%"ET :
The internet s 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.
H(W '(ES #"TE%"ET W(%;S
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).
- nternet Protocol (P).
t is called TCP/P
Large block of text/ data, the TCP divides into little Data Packets and add some special
information like - packet position.
- error correction code.
To make sure that packets at the destination can reassembled correctly and without any damage
to data
The role of P here is to put destination addressing information on such packets.
t is not necessary that all the packets will follow the same path from source to
destination.
S3EC#$L M$CH#"ES
Routers are used to load balance various paths that exist on networks
gateways allows different electronic networks to talk to nternet which TCP/P
Addresses are essential in the internet
The TCP/P is a mechanism for providing addresses for computers on the
internet address have two forms :
Person understandable which expressed as words (Domain name)
www.kongu.edu
Machine understandable which repressed as numbers
172.16.2.5.
Ex: murali@yahoo.com
username@host.subdomain.domain
username - is the name of the nternet 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 ndia
comes a large domain 'in'
S)!,'(M$#"S L$%<E '(M$#"S
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

#"TE%"ET $''%ES#"<
nternet Address consists TWO parts
1. Network Address (Net D)
2. Host Address (Host D)
There four types of internet address each 32 bit long :
"o- o+ bits in net #' "o- o+ bits Host #'
CL$SS $ 8 04
CL$SS ! 16 16
CL$SS C 24 8
CL$SS ' Multicasting all bits
CL$SS E For Future

n 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.
Wat can # do on #nternet :
Several activities can be performed if you have access to the nternet
To Publish research information
To create campus wide information systems
Use it for Teaching
Use it with SDN 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 nternet
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 #nternet
E-mail - mailbox
Mailing List
Usenet or Newsgroups
File Transfer Protocol (FTP)
Telnet (Remote login)
!%(WS#"< THE #"TE%"ET
There are many browsers for the nternet. They are
nternet Explorer ( E )
Netscape Navigator
Mosaic etc.
Gopher -presents the nternet as a series of hierarchical menus containing items that point to
another menu.
#"TE%"ET ST$"'$%'S
There are many standard organizations in the world. The two organizations are:
nternet Engineering Task Force(ETF) and
World Wide Web Consortium( W3c)
ETF is a relatively informal and it standards include TCP/P, MME, SMTP.
The W3C, by contrast, is a vendor organization, controlled by its dues-paying member corporations and it
standards include HTTP,HTML and XML
#"TE%"ET 3%#"C#3LES
TCP/P
UDP
P Addresses
domain names
the domain name system
ports
sockets
URL's
!$S#C #"TE%"ET 3%(T(C(LS :
TC3.#3
#ntroduction
TCP/P is the communication protocol for the nternet.
Computer Communication Protocol
A computer communication protocol is a description of the rules computers must follow to communicate
with each other.
Wat is TC3.#3:
TCP/P is the communication protocol for communication between computers on the nternet.
TCP/P stands for Transmission Control Protocol / nternet Protocol.
TCP/P defines how electronic devices (like computers) should be connected to the nternet, and how
data should be transmitted between them.
#nside TC3.#3
nside the TCP/P standard there are several protocols for handling data communication:
TCP (Transmission Control Protocol) communication between applications
UDP (User Datagram Protocol) simple communication between applications
P (nternet Protocol) communication between computers
CMP (nternet 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.
f 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.
P is Connection-Less
P is for communication between computers.
P is a "connection-less" communication protocol.
P does not occupy the communication line between two computers. P reduces the need for
network lines. Each line can be used for communication between many different computers at the
same time.
With P, messages (or other data) are broken up into small independent "packets" and sent
between computers via the nternet.
P is responsible for "routing" each packet to the correct destination.
P Routers
When an P packet is sent from a computer, it arrives at an P router.
The P 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/P
TCP/P is TCP and P working together.
TCP takes care of the communication between your application software (i.e. your browser) and
your network software.
P takes care of the communication with other computers.
TCP is responsible for breaking data down into P packets before they are sent, and for
assembling the packets when they arrive.
P is responsible for sending the packets to the correct destination.
TCP/P Addressing
TCP/P uses 32 bits, or four numbers between 0 and 255, to address a computer.
#3 $ddresses
Each computer must have an P address before it can connect to the nternet.
Each P packet must have an address before it can be sent to another computer.
This is an P address: 192.68.20.50
This might be the same P address: www.w3schools.com
An P Address Contains 4 Numbers.
Each computer must have a unique P address.
This is your P address: 203.129.193.196
TCP/P uses four numbers to address a computer. The numbers are always between 0 and 255.
P addresses are normally written as four numbers separated by a period, like this: 192.168.1.50.
TC3.#3 3rotocols
TCP/P is a large collection of different communication protocols.
A Family of Protocols
TCP/P is a large collection of different communication protocols based upon the two original
protocols TCP and P.
TC3 , Transmission Control 3rotocol
TCP is used for transmission of data from an application to the network.
TCP is responsible for breaking data down into P packets before they are sent, and for
assembling the packets when they arrive.
P - nternet Protocol
P takes care of the communication with other computers.
P is responsible for the sending and receiving data packets over the nternet.
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.
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.
MME - Multi-purpose nternet Mail Extensions
The MME protocol lets SMTP transmit multimedia files including voice, audio, and binary data
across TCP/P networks.
MAP - nternet Message Access Protocol
MAP 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 P 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.
CMP - nternet Control Message Protocol
CMP takes care of error-handling in the network.
ARP - Address Resolution Protocol
ARP is used by P to find the hardware address of a computer network card based on the P address.
RARP - Reverse Address Resolution Protocol
RARP is used by P to find the P address based on the hardware address of a computer network card
WWW,W(%L' W#'E WE!
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 nternet. The term is often mistakenly used as a
synonym for the nternet itself, but the Web is a service that operates over the nternet, as e-mail does.
The history of the nternet dates back significantly further than that of the World Wide Web.
The hypertext portion of the Web has an interesting history, notable influences being BM'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 saac
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.
#"T%(')CT#("
The nternet 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 nternet 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 nternet 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@computer.org" and
"http://www.acm.org" 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 nternet, covering history, technology, and usage. A trip to almost any bookstore will find
shelves of material written about the nternet
The nternet today is a widespread information infrastructure, the initial prototype of what is often
called the National (or Global or Galactic) nformation nfrastructure. ts 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., URs).
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.
#ntroduction to )%#s
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 "UR".
URs 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 UR that designates the W3C Technical Reports page:
http://www.w3.org/TR
This UR may be read as follows: There is a document available via the HTTP protocol residing on the
machine www.w3.org, accessible via the path "/TR". Other schemes you may see in HTML documents
include "mailto" for email and "ftp" for FTP.
7ragment identi+iers
Some URs refer to a location within a resource. This kind of UR ends with "#" followed by an anchor
identifier (called the fragment identifier). For instance, here is a UR pointing to an anchor named
section_2: http://somesite.com/html/top.html#section_2
%elative )%#s
A relative URI doesn't contain any naming scheme information. ts path generally refers to a resource on
the same machine as the current document. Relative URs may contain relative path components (e.g.,
".." means one level up in the hierarchy defined by the path), and may contain fragment identifiers.
Relative URs are resolved to full URs using a base UR. As an example of relative UR resolution,
assume we have the base UR "http://www.acme.com/support/intro.html". The relative UR in the
following markup for a hypertext link:
<A href="suppliers.html">Suppliers</A>
would expand to the full UR "http://www.acme.com/support/suppliers.html", while the relative UR in the
following markup for an image
<MG src="../icons/logo.gif" alt="logo">
would expand to the full UR "http://www.acme.com/icons/logo.gif".
n HTML, URsare used to:
Link to another document or resource, (see the A and LNK elements).
Link to an external style sheet or script (see the LNK and SCRPT elements).
nclude an image, object, or applet in a page, (see the MG, OBJECT, APPLET and
NPUT elements).
Create an image map (see the MAP and AREA elements).
Submit a form (see FORM).
Create a frame document (see the FRAME and FRAME elements).
Cite an external reference (see the Q, BLOCKQUOTE, NS and DEL elements).
Refer to metadata conventions describing a document (see the HEAD element).
SMT3
INTRODUCTION
Simple Mail Transfer Protocol (SMTP) is the de facto standard for e-mail transmissions across the
nternet. 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). t
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 MAP. Another SMTP server can trigger a
delivery in SMTP using ETRN.
#ntroduction to =HTT3>
H93E%TEXT T%$"S3(%T 3%(T(C(L
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
HTT3 %e?uest 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)
Start line .%e?uest line:
Consists of three parts:
1.Request Method (Example: GET)
2.Request-UR portion of web address
3.HTTP version (Example: HTTP/1.1
%E@)EST 1)%#:
Second part of the Start line is known as Request-UR
Uniform Resource dentifier (UR) is a string of characters used to identify a name or a resource
on the nternet.
Such identification enables interaction with representations of the resource over a network
(typically the World Wide Web) using specific protocols
Te )%L concept:
URL means 'Uniform Resource Locator'
t's a standard way of specifying any kind of information available on the nternet
Four elements of a URL specification:
Method (i.e., the protocol for object retrieval)
Host (i.e., location hostname or P-address)
Port (i.e., port-number for contacting server)
Path (i.e., pathname of the resource's file)
The URL Format:
)%" ,)%C,)%L :
URNs are used for identification,
URCs for including meta-information.
URLs for locating or finding resources
Comparison )%" vs- )%L :
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".
HTT3 %esponse:
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 %esponse,E*ample:
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>
WE! SE%&E%S $"' WE! CL#E"TS
All of the machines on the nternet 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.
'omain "ames:
Servers on the nternet also have human-readable names, called domain names. For example,
www.mywebsite.com
The name www.mywebsite.com actually has three parts:
The host name ("www")
The domain name ("mywebsite")
The top-level domain name ("com") .
"ame Servers= '"S>:

A set of servers called Domain Name Servers (DNS) maps the human-readable names to the P
addresses.
These servers are simple databases that map names to P addresses, and they are distributed all
over the nternet.
Most individual companies, SPs and universities maintain small name servers to map host names to P
addresses
M$%;)3 L$"<)$<ES: XHTML
Wat #s 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.
nclude spread-sheets, video clips, sound clips, and other applications directly in their documents.
$ !%#E7 H#ST(%9 (7 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.
HTML 2.0 (November 1995, see [RFC1866]) was developed under the aegis of the nternet
Engineering Task Force (ETF) 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. f 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 1990sbased 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 (http://www.w3.org). 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.
n 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.
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 SO/EC:10646 standard (see [SO10646]) 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
&ersions
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. t 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 writing.Throughout 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.
!$S#C XHTML S9"T$X $"' SEM$"T#CS
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 basicsanyone who's
computer literate should be able to piece together a basic page after learning some tagsbut 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.
f 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 'd now include Apple's Safari in, alongside
nternet 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.
S(ME 7)"'$ME"T$L HTML ELEME"TS
!lock,Level and #nline Elements
The entire range of elements can be divided into two basic types: block-level and inline. A bloc!
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>
"esting 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>
Te tml 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.
%e?uired $ttributes
xmlns: A URL specifying an XML namespace, which is http://www.w3.org/1999/
xhtml for XHTML documents
Optional Attributes
There are no optional attributes for the html element.
Standard $ttributes
dir
id
lang
xml:lang
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
http://www.w3.org/1999/xhtml (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 TTLE 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>


<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 
HEAD section enclosed between <head> and </head>
BODY section enclosed between <body> and </body>
%EL$T#&E )%LS
#"T%(')C#"< THE )%L
Every file or document available on the web resides at a unique address called a Uniform Resource
Locator (URL). The term Uniform Resource dentifier (UR) is sometimes used interchangeably with URL,
though UR is a more general term; a URL is a type of UR. We'll be using the term URL in this book to
discuss addressed file locations. t'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 UR"is 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. t might look something like this:
examples/chapter1/example.html
f 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: example.html
f 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:
../../example.html
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/example.html
XML C%E$T#"< HTML '(C)ME"TS
HTML '(CT93ES
f 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 PUBLC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
3artial 'T's
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 nternet Explorer 6 to display CSS layouts with the box model used
by nternet Explorer 5.
For the record, an example of an incomplete DTD looks like this:
<!DOCTYPE html PUBLC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/DTD/xhtml1-transitional.dtd">
n this case, the UR (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 odd
indeed.) The same thing happens if you leave out DTDs entirely. Therefore, al#a$s include a DTD and
al#a$s ensure it's complete
!asic XHTML 'ocument
<!DOCTYPE html PUBLC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>My first web page</title>
</head>
<body>
<p>XHTML is easy!</p>
</body>
</html>
Te 'octype
An XHTML document begins with a %ocument T$pe %eclaration (doct$pe, for short), a required
component thatas the name suggestsdeclares 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. !tri"t:
<!DOCTYPE html PUBLC "-//W3C//DTD XHTML 1.0 Strict//EN"
XHTML 1. Transitional:
<!DOCTYPE html PUBLC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1. #ra$eset:
<!DOCTYPE html PUBLC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
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. n 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
Te !asics o+ Lists ATables
A table consists of three elements: table, tr, and td. Listing 7-1 shows the code for a typical table.
&asic Tag "a$out of a Table
...
<table>
<tr>
<td>Row 1 Cell 1</td>
</tr>
<tr>
</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.
BtableC
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. f 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 $ttributes
class
dir
id
lang
style
title
xml:lang
Event $ttributes
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
<td>
The <td> tag marks the start of a new cell within a row in a table.
%e?uired $ttributes
No attributes are required for the <td> tag.
(ptional $ttributes
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: ndicates 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 !asic Table
n 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 7-2.T'e (ode for a &asic Table
<!DOCTYPE html
PUBLC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
</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.
7(%MS
H(W 7(%MS W(%;
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 'andler: 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 C(M3("E"TS (7 $ 7(%M
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 elementyou 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 ASP.NET. 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
attribute) in a )uer$ 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 URLincluding its query
stringmight 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.
!i$%le #or$ &ith a Te't Control and a !(b$it )(tton
<form method="post" action="/cgi-bin/formhandler.cgi">
<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>
%e?uired $ttributes
action: Specifies the URL of the form handler, which is the script or application that will process the
submitted form data
(ptional $ttributes
accept: ncludes a comma-separated list of accepted file MME 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 $ttributes
class
dir
id
lang
name
style
title
xml:lang
#nput
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.
%e?uired $ttributes
name: dentifies 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.
(ptional $ttributes
alt: Specifies an alternative text description (only for input type="image").
accept: ncludes a comma-separated list of accepted file MME 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 $ttributes
class
dir
id
lang
style
title
xml:lang
input typeDEte*tE
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. t 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. f 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. f you paste an overlong string of text into a field with a maxlength attribute, the text will be
truncated. f 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 typeDEpass8ordE
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.
* +ass&ord #or$ 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
asteriskssome 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 *) 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!('oice +ptions Using ('ecbo* (ontrols
<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">
<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>
T'e list of c'ecbo*es as it mig't appear in a bro#ser #it' default st$ling
#nput typeDEbuttonE
A button control is just that: a generic button. t 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. nstead 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.
#nput typeDEimageE
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
Usin, in%(t t-%e./i$a,e/ in +la"e o0 in%(t t-%e./s(b$it/
<p><input type="image" name="post" src="post.png" alt="Post your comment" /></p>
!utton
The button element works just like a submit, reset, or button input type, or even an input type="image"
controlactivating 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. n fact, a buttonmust 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 (http://www.digital-web.com/
articles/push_my_button/).
You can see an example of the button element which includes a bit of
emphasized text and an image.
* b(tton 1le$ent Containin, Te't and an I$a,e
<div>
<button type="submit" name="continue">
<strong>Continue to the next page</strong>
<imgsrc="next.png" 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).
ST9LE SHEETS :CSS
#ntroduction to Cascading Style Seets =CSS>
Wat is CSS:
CSS stands for Cascading Style Sheets
Styles define o8 to display HTML elements
Styles were added to HTML 4.0 to solve a problem
E*ternal Style Seets can save a lot of work
External Style Sheets are stored in CSS +iles
'HTML 1 '9"$M#C H93E% TEXT M$%;)3 L$"<)$<E
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 'emo
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.
7E$T)%ES
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. n this article, explore 10 of the exciting new
features in CSS 3, which is going to change the way developers who used CSS2 build websites.
/- CSS 2 Selectors
n 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 Ds for every element. nstead, 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"> 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.
0- CSS 2 %ounded 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: 10p
x; text-align:center; }</div>
HTML
1 <div class="code"><div class="box">Submit</div></div>
(utput
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.
2- CSS 2 !order #mage
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; border-
width: 10px;}</div>
HTML
1 <div class="code"><div id="col">my content</div></div>
4- CSS 2 !o* Sado8
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; h
eight: 50px; width: 100px; padding: 5px;}</div>
HTML
1 <div class="code"><div class="shadow"> my content </div></div>
(utput
5- CSS 2 Te*t Sado8
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>
(utput
\
6- CSS 2 <radient
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 ,
#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>
(utput
F- CSS 2 %<!$: Color, "o8 8it (pacity
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.
G- CSS 2 Trans+orm =Element %otation>
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> can rotate this element, by 180degree using -moz-transform property</p></
div>
(uptut
H- CSS 2 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 | ?
/I- CSS 2 Web 7onts
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("myfont.ttf"); 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.
C(%E S9"T$X:
CSS Synta*
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 E*ample
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:
E*ample
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;
}
Te id and class Selectors
n addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id"
and "class".
Te 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":
E*ample
#para1
{
text-align:center;
color:red;
}
Do "(T start an D name with a number! t will not work in Mozilla/Firefox.
Te 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 "."
n the example below, all HTML elements with class="center" will be center-aligned:
E*ample
.center {text-align:center;}
You can also specify that only specific HTML elements should be affected by a class.
n the example below, all p elements with class="center" will be center-aligned:
E*ample
p.center {text-align:center;}
When a browser reads a style sheet, it will format the document according to it.
!T2L1 !H11T! *ND HTML !T2L1 RUL1
De"larations
+ro%erties
A propert$ is assigned to a selector in order to manipulate its style. Examples of properties include color,
margin, and +ont.
3al(es
The declaration value is an assignment that a property receives. For example, the property color could
receive the value red.
<rouping
n 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 }
#neritance
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 !('9 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 */
3seudo,classes and 3seudo,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 CL$SS attribute. Normal
classes may be used with pseudo-classes and pseudo-elements as follows:
selector.class:pseudo-class { property: value }
or
selector.class:pseudo-element { property: value }
$ncor 3seudo,classes
Pseudo-classes can be assigned to the $ 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% }
7irst Line 3seudo,element
Often in newspaper articles, such as those in the Wall Street -ournal, 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
+irst,line pseudo-element may be used in any block-level element (such as 3, H/, etc.). An example of a
+irst,line pseudo-element would be:
P:first-line {
font-variant: small-caps;
font-weight: bold }
7irst Letter 3seudo,element
The +irst,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 +irst,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 (rder
When multiple style sheets are used, the style sheets may fight over control of a particular selector. n
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. J important
Rules can be designated as important by specifying J 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 J important statement:
BODY { background: url(bar.gif) white;
background-repeat: repeat-x ! important }
2. (rigin o+ %ules =$utorKs vs- %eaderKs>
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 J important rules since they will override any of the user's J 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 J important, since some styles are vital for the user to
be able to read a page. Any J 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 %ules: Calculating Speci+icity
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. t is simply a counting game to calculate the
specificity of a selector.
a. Count the number of #' attributes in the selector.
b. Count the number of CL$SS 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 L.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */
L.red {xxx} /* a=0 b=1 c=1 --> specificity = 011 */
L {xxx} /* a=0 b=0 c=1 --> specificity = 001 */
4. (rder o+ Speci+ication
To make it easy, when two rules have the same weight, the last rule specified wins.
(vervie8 o+ 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
C$SC$'#"<, $"' #"HE%#T$"CE
Speci+ied, 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").
Speci+ied values
User agents must first assign a specified value to a property based on the following mechanisms (in order
of precedence):
f 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.
n 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). n the cases where child
elements do not inherit the computed value, this is described in the property definition.
$ctual 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.
#neritance
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>
f 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. n 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. f 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'.
Te KineritK 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.
n 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. f 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;
}
Te Limport 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 UR 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 "mystyle.css";
@import url("mystyle.css");
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 UR.
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("fineprint.css") print;
@import url("bluish.css") projection, tv;
n the absence of any media types, the import is unconditional. Specifying 'all' for the medium has
the same effect.
Te cascade
Style sheets may have three different origins: author, user, and user agent.
$utor. 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.
)ser: 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).
)ser agent: Conforming user agents must apply a default st$le s'eet (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.
mported 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. mported 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"
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. t 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.
#mportant %ules
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. T'is is a semantic c'ange since (SS0, In (SS01 aut'or 23important2 rules too precedence over
user 23important2 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 selectorKs speci+icity
A selector's specificity is calculated as follows:
count the number of D 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 */
L {} /* a=0 b=0 c=1 -> specificity = 1 */
UL L {} /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+L {} /* a=0 b=0 c=3 -> specificity = 3 */
H1 + *[REL=up]{} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL L.red {} /* a=0 b=1 c=3 -> specificity = 13 */
L.red.level {} /* a=0 b=2 c=1 -> specificity = 21 */
#x34y {} /* a=1 b=0 c=0 -> specificity = 100 */
n 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 D 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 D=x97z style="color: red">
</BODY>
n 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.
3recedence o+ non,CSS presentational ints
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. f 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 p'ase1 t'is polic$ #ill mae it easier for st$listic attributes to coe*ist #it' st$le s'eets,
Note. In (SS01 t'e non!(SS presentational 'ints #ere given a specificit$ e)ual to 01 not 4, T'e c'ange is
due to t'e introduction of t'e universal selector1 #'ic' 'as a specificit$ of 4,
Tree Ways to #nsert CSS
There are three ways of inserting a style sheet:
External style sheet
nternal style sheet
nline style
E*ternal Style Seet
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="mystyle.css" />
</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;}
body {background-image:url("images/back40.gif");}
Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of "margin-
left:20px") will work in E, but not in Firefox or Opera.
#nternal Style Seet
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/back40.gif");}
</style>
</head>

#nline 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 Seets
f 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;
}
f 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 (ne
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. nternal style sheet (in the head section)
4. nline 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).
"ote: f 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!
)OX MOD1L 4 NORM*L #LOW4 )OX L*2OUT 4 )12OND TH1 NORM*L #LOW
$ll CSS !ackground 3roperties
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).
3roperty 'escription &alues CSS
background Sets all the background properties in
one declaration
bacground!color
bacground!image
bacground!repeat
1
bacground!attac'ment
bacground!position
inherit
background-attachment Sets whether a background image is
fixed or scrolls with the rest of the
page
scroll
fixed
inherit
1
background-color Sets the background color of an
element
color!rgb
color!'e*
color!name
transparent
inherit
1
background-image Sets the background image for an
element
url(UR")
none
inherit
1
background-position Sets the starting position of a
background image
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
*5 $5
*pos $pos
inherit
1
background-repeat Sets if/how a background image will
be repeated
repeat
repeat-x
repeat-y
no-repeat
inherit
1
TEXT 7(%M$TT#"<
T h i s t e x t i s s t y l e d wi t h s o me o f t h e t e x t f o r ma t t i n g p r o p e r t i e s . T h e
h e a d i n g u s e s t h e t e x t - a l i g n , t e x t - t r a n s f o r m, a n d c o l o r p r o p e r t i e s . T h e
p a r a g r a p h i s i n d e n t e d , a l i g n e d , a n d t h e s p a c e b e t w e e n c h a r a c t e r s i s
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 mo v e d f r o m t h e " T r y i t y o u r s e l f " l i n k .
Te*t 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.
E*ample
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
For W3C compliant CSS: f you define the color property, you must also define the background-color
property.
Te*t $lignment
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).
E*ample
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

Te*t 'ecoration
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:
E*ample
a {text-decoration:none;}
t can also be used to decorate text:
E*ample
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
t is not recommended to underline text that is not a link, as this often confuses users.
Te*t Trans+ormation
The text-transform property is used to specify uppercase and lowercase letters in a text.
t can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each
word.
E*ample
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

Te*t #ndentation
The text-indentation property is used to specify the indentation of the first line of a text.
E*ample
p {text-
indent:50px;}____
$ll CSS 7ont
3roperties
The number in the
"CSS" column
indicates in which
CSS version the
property is defined
(CSS1 or CSS2).
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
E*ample
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
n 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:
Te*t 'ecoration
The text-decoration property is mostly used to remove underlines from links:
E*ample
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
!ackground Color
The background-color property specifies the background color for links:
E*ample
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

E*ample
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
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
$ll CSS List 3roperties
list-style Sets all the properties for a list in one declaration list!st$le!t$pe
list!st$le!position
list!st$le!image
inherit
1
list-style-image Specifies an image as the list-item marker URL
none
inherit
1
list-style-position Specifies if the list-item markers should appear
inside or outside the content flow
inside
outside
inherit
1
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
Te CSS !o* Model
All HTML elements can be considered as boxes. n 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:
Explanation of the different parts:
Margin - Clears an area around the border. The margin does not have a background color, it is
completely transparent
!order - A border that goes around the padding and content. The border is affected by the
background color of the box
3adding - 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
n order to set the width and height of an element correctly in all browsers, you need to know how the box
model works.
Widt and Heigt o+ an Element
#mportant: 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:
Let's do the math:
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px
magine that you only had 250px of space. Let's make an element with a total width of 250px:
E*ample
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
!ro8sers Compatibility #ssue
f you tested the previous example in nternet Explorer, you saw that the total width was not exactly
250px.
E includes padding and border in the width, when the width property is set, unless a '(CT93E is
declared.
To fix this problem, just add a DOCTYPE to the code:
E*ample
<!DOCTYPE html PUBLC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
CSS !order
The CSS border properties allow you to specify the style and color of an element's border.
$ll CSS !order 3roperties
border Sets all the border properties in one declaration border!#idt'
border!st$le
border!color
1
border-bottom Sets all the bottom border properties in one
declaration
border!bottom!#idt'
border!bottom!st$le
border!bottom!color
1
border-bottom-color Sets the color of the bottom border border!color 2
border-bottom-style Sets the style of the bottom border border!st$le 2
border-bottom-width Sets the width of the bottom border border!#idt' 1
border-color Sets the color of the four borders color6name
'e*6number
rgb6number
transparent
inherit
1
border-left Sets all the left border properties in one border!left!#idt' 1
declaration border!left!st$le
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!st$le 2
border-left-width Sets the width of the left border border!#idt' 1
border-right Sets all the right border properties in one
declaration
border!rig't!#idt'
border!rig't!st$le
border!rig't!color
1
border-right-color Sets the color of the right border border!color 2
border-right-style Sets the style of the right border border!st$le 2
border-right-width Sets the width of the right border border!#idt' 1
border-style Sets the style of the four borders none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
1
border-top Sets all the top border properties in one
declaration
border!top!#idt'
border!top!st$le
border!top!color
1
border-top-color Sets the color of the top border border!color 2
border-top-style Sets the style of the top border border!st$le 2
border-top-width Sets the width of the top border border!#idt' 1
border-width Sets the width of the four borders thin
medium
thick
lengt'
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.
3ossible &alues
&alue 'escription
auto The browser sets the margin.
The result of this is dependant of the browser
lengt' Defines a fixed margin (in pixels, pt, em, etc.)
5 Defines a margin in % of the containing element
t is possible to use negative values, to overlap content.
$ll CSS Margin 3roperties
margin A shorthand property for setting the margin
properties in one declaration
margin!top
margin!rig't
margin!bottom
margin!left
1
margin-bottom Sets the bottom margin of an element auto
lengt'
5
1
margin-left Sets the left margin of an element auto
lengt'
5
1
margin-right Sets the right margin of an element auto
lengt'
5
1
margin-top Sets the top margin of an element auto
lengt'
5
1
CSS 3adding
The CSS padding properties define the space between the element border and the element content.
3adding
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.
3ossible &alues
&alue 'escription
lengt' Defines a fixed padding (in pixels, pt, em, etc.)
5 Defines a padding in % of the containing element
$ll CSS 3adding 3roperties
padding A shorthand property for setting all the padding
properties in one declaration
padding!top
padding!rig't
padding!bottom
padding!left
1
padding-bottom Sets the bottom padding of an element lengt'
5
1
padding-left Sets the left padding of an element lengt'
5
1
padding-right Sets the right padding of an element lengt'
5
1
padding-top Sets the top padding of an element lengt'
5
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.

UNIT ONE Lecture Notes

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

UNIT ONE Lecture Notes

Caricato da

Copyright:

Formati disponibili

WEBTECHNOLOGY -241208 Lecture Notes - UNT-

"ame Servers= '"S>:

Potrebbero piacerti anche