WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

UNIT - I`

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

WEB ESSENTIALS: CLIENTS, SERVERS, AND COMMUNICATION

• Client – it is an independent system, which have its own Operating System other software

• Server- it is an other independent system, which have its own Operating System other software

• Client and server communicate each other by using middleware software like ODBC• Example - Internet system is the best example for client- server model.

• A Client /server model application typically stores large quantities of data on an expensive, high powered server, while most of the program logic and user interface is handled by client software running on relatively cheap Personal computers

• Normally server primarily sends data, while a client primarily receives it, • In a client/server model a client initiates a conversation, while server waits for clients

to start conversation • Some servers process and analyze the data before sending the results to the client.

Its called application servers• A file and database server will retrieve information and send it to a client, but it

would not process the information• The most popular client/server system on the Internet is the web• The web servers such as Apache respond the requests from web clients such as

Netscape.

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

1. Model 1 is the simplest of client/server model in web architecture.2. The client sends Request to the Web Server through Internet.3. The Request is acknowledged by the Web Server and it sends Responses to the Client.4. Now the Server sends the Requested information to the Client from Web Server.5. At the end of data transfer, the Client disconnects from the Server.

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

MODEL 3 – WEB SERVER / APPLICATION SERVER1. In Model 3 the client sends Request to the Web Server through Internet.2. The Request is acknowledged by the Web Server and it sends Responses to the Client.

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

3. If the information is not available, then the Server searches data in the Application Server also.4. Now the Server sends the Requested information to the Client from Web Server or from Application Server.5. At the end of data transfer, the Client disconnects from the Server.

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

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

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

CHARACTERISTICS OF CLIENTS AND SERVERS• Client software

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

• Server software– Is a special-purpose, privileged program– Is invoked automatically when a system boots, and continues to execute

through many sessions– Runs on shared computers– Waits passively for contact from arbitrary remote clients.– Accepts contact from arbitrary clients but offers a single service– Requires powerful hardware and a sophisticated operating system

INTERNET

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

HISTORY OF THE INTERNET

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

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

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

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

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

WHAT IS AN INTERNET ?

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

• Global connection of interconnected networks.

HOW DOES INTERNET WORKS

Move data between two specific computers.We require

- the address of the destination.- a safe mean of moving data in the form of electronic signals

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

• There exist a set of rules which governs the sending and receiving of data on the internet.• Rules are implemented in two parts in the network software.

- Transmission Control Protocol (TCP).- Internet Protocol (IP).

It is called TCP/IP• Large block of text/ data, the TCP divides into little Data Packets and add some special information like - packet position.

- error correction code.• To make sure that packets at the destination can reassembled correctly and without any damage to data– The role of IP here is to put destination addressing information on such packets.– It is not necessary that all the packets will follow the same path from source to destination.• SPECIAL MACHINES– Routers are used to load balance various paths that exist on networksgateways allows different electronic networks to talk to Internet which TCP/IP• Addresses are essential in the internet• The TCP/IP is a mechanism for providing addresses for computers on the internet address have two forms :

Person understandable which expressed as words (Domain name) www.kongu.edu Machine understandable which repressed as numbers

172.16.2.5.Ex: murali@yahoo.com

username@host.subdomain.domainusername - is the name of the Internet account.Host - individual machines at a particular location.Hosts and local networks are grouped together into domains,which are grouped into

one or more larger domains.Ex:

apartment-> complex -> town -> country.Sub-domains may corresponds to organizations such as NASA or COMPUSERVE such

as India comes a large domain ‘in’

SUB-DOMAINS LARGE DOMAINScom - commercial au - Australianet - network usa - USA mil - military in - india org - organization sg - singapore edu - education cn - canada gov - government jp -Japanint - international

INTERNET ADDRESING

Internet Address consists TWO parts1. Network Address (Net ID)2. Host Address (Host ID)There four types of internet address each 32 bit long : No. of bits in net ID No. of bits Host ID CLASS A 8 24CLASS B 16 16CLASS C 24 8

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

CLASS D Multicasting all bitsCLASS E For Future In which only CLASS A, B & C are mostly used• These may be used for– Unicast - Single computer– Multicast - Set of computers all reside in different location– Any-cast - Set of computers all reside in single location.

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

Tools and Services on Internet• E-mail - mailbox• Mailing List• Usenet or Newsgroups• File Transfer Protocol (FTP)• Telnet (Remote login)

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

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

INTERNET PRINCIPLES TCP/IP UDP IP Addresses domain names

the domain name system

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

ports

sockets

URL's

BASIC INTERNET PROTOCOLS :

TCP/IP

Introduction

TCP/IP is the communication protocol for the Internet.

Computer Communication Protocol

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

What is TCP/IP?

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

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

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

Inside TCP/IP

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

TCP (Transmission Control Protocol) communication between applications UDP (User Datagram Protocol) simple communication between applications

IP (Internet Protocol) communication between computers

ICMP (Internet Control Message Protocol) for errors and statistics

DHCP (Dynamic Host Configuration Protocol) for dynamic addressing

TCP Uses a Fixed Connection TCP is for communication between applications. If one application wants to communicate with another via TCP, it sends a

communication request. This request must be sent to an exact address. After a "handshake" between the two applications, TCP will set up a "full-duplex" communication between the two applications.

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

The "full-duplex" communication will occupy the communication line between the two computers until it is closed by one of the two applications.

UDP is very similar to TCP, but simpler and less reliable. IP is Connection-Less IP is for communication between computers. IP is a "connection-less" communication protocol. IP does not occupy the communication line between two computers. IP reduces the

need for network lines. Each line can be used for communication between many different computers at the same time.

With IP, messages (or other data) are broken up into small independent "packets" and sent between computers via the Internet.

IP is responsible for "routing" each packet to the correct destination. IP Routers When an IP packet is sent from a computer, it arrives at an IP router. The IP router is responsible for "routing" the packet to the correct destination,

directly or via another router. The path the packet will follow might be different from other packets of the same

communication. The router is responsible for the right addressing, depending on traffic volume, errors in the network, or other parameters.

TCP/IP TCP/IP is TCP and IP working together. TCP takes care of the communication between your application software (i.e. your

browser) and your network software. IP takes care of the communication with other computers. TCP is responsible for breaking data down into IP packets before they are sent, and

for assembling the packets when they arrive. IP is responsible for sending the packets to the correct destination. TCP/IP Addressing TCP/IP uses 32 bits, or four numbers between 0 and 255, to address a computer.

IP Addresses Each computer must have an IP address before it can connect to the Internet. Each IP packet must have an address before it can be sent to another computer. This is an IP address: 192.68.20.50

This might be the same IP address:  www.w3schools.com An IP Address Contains 4 Numbers. Each computer must have a unique IP address. This is your IP address: 203.129.193.196 TCP/IP uses four numbers to address a computer. The numbers are always between 0

and 255. IP addresses are normally written as four numbers separated by a period, like this:

192.168.1.50.

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

original protocols TCP and IP.

TCP - Transmission Control Protocol TCP is used for transmission of data from an application to the network. TCP is responsible for breaking data down into IP packets before they are sent, and

for assembling the packets when they arrive. IP - Internet Protocol IP takes care of the communication with other computers.

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

IP is responsible for the sending and receiving data packets over the Internet.

HTTP - Hyper Text Transfer Protocol HTTP takes care of the communication between a web server and a web browser. HTTP is used for sending requests from a web client (a browser) to a web server,

returning web content (web pages) from the server back to the client. HTTPS - Secure HTTP HTTPS takes care of secure communication between a web server and a web

browser. HTTPS typically handles credit card transactions and other sensitive data. SSL - Secure Sockets Layer The SSL protocol is used for encryption of data for secure data transmission. SMTP - Simple Mail Transfer Protocol SMTP is used for transmission of e-mails. MIME - Multi-purpose Internet Mail Extensions The MIME protocol lets SMTP transmit multimedia files including voice, audio, and

binary data across TCP/IP networks. IMAP - Internet Message Access Protocol IMAP is used for storing and retrieving e-mails. POP - Post Office Protocol POP is used for downloading e-mails from an e-mail server to a personal computer. FTP - File Transfer Protocol FTP takes care of transmission of files between computers. NTP - Network Time Protocol NTP is used to synchronize the time (the clock) between computers.

DHCP - Dynamic Host Configuration ProtocolDHCP is used for allocation of dynamic IP addresses to computers in a network.SNMP - Simple Network Management ProtocolSNMP is used for administration of computer networks.LDAP - Lightweight Directory Access ProtocolLDAP is used for collecting information about users and e-mail addresses from the internet.ICMP - Internet Control Message ProtocolICMP takes care of error-handling in the network.ARP - Address Resolution ProtocolARP is used by IP to find the hardware address of a computer network card based on the IP address.RARP - Reverse Address Resolution ProtocolRARP is used by IP to find the IP address based on the hardware address of a computer network card

WWW-WORLD WIDE WEB

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

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

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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

INTRODUCTIONThe Internet has revolutionized the computer and communications world like nothing

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

The Internet represents one of the most successful examples of the benefits of sustained investment and commitment to research and development of information infrastructure. Beginning with the early research in packet switching, the government, industry and academia have been partners in evolving and deploying this exciting new technology. Today, terms like "bleiner@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 Internet, covering history, technology, and usage. A trip to almost any bookstore will find shelves of material written about the Internet

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

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

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

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

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

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

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

Introduction to URIs

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

URIs typically consist of three pieces:

The naming scheme of the mechanism used to access the resource. The name of the machine hosting the resource. The name of the resource itself, given as a path.

Consider the URI that designates the W3C Technical Reports page:

http://www.w3.org/TR

This URI 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.

Fragment identifiers

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

Relative URIs

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

Relative URIs are resolved to full URIs using a base URI. As an example of relative URI resolution, assume we have the base URI "http://www.acme.com/support/intro.html". The relative URI in the following markup for a hypertext link:

<A href="suppliers.html">Suppliers</A>

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

would expand to the full URI "http://www.acme.com/support/suppliers.html", while the relative URI in the following markup for an image

<IMG src="../icons/logo.gif" alt="logo">

would expand to the full URI "http://www.acme.com/icons/logo.gif".

In HTML, URIsare used to:

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

SMTP

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

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

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

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

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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

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

Request:• Client sends a Request to a Server by:

– clicking a link on a webpage– submitting a form– typing a web page address in the browser address field

HTTP Request Message:• The Browser uses the URL to create the request message• The HTTP request message consists of:

– Request/ start line

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

– requests headers / header field– Blank line– request / message body (optional)

Start line /Request line:Consists of three parts:1.Request Method (Example: GET)2.Request-URI portion of web address 3.HTTP version (Example: HTTP/1.1

REQUEST –URI:• Second part of the Start line is known as Request-URI• Uniform Resource Identifier (URI) is a string of characters used to identify a name or

a resource on the Internet. • Such identification enables interaction with representations of the resource over a

network (typically the World Wide Web) using specific protocols

The URL concept:• URL means ‘Uniform Resource Locator’• It’s a standard way of specifying any kind of information available on the Internet• Four elements of a URL specification:

– Method (i.e., the protocol for object retrieval)– Host (i.e., location hostname or IP-address)– Port (i.e., port-number for contacting server)– Path (i.e., pathname of the resource’s file)

The URL Format:

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

URN ,URC,URL :

• URNs are used for identification,• URCs for including meta-information. • URLs for locating or finding resources

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

"what" vs. "where".

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

screen.

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

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

WEB SERVERS AND WEB CLIENTS

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

• Those machines that provide services (like Web servers or FTP servers) to other machines are servers.

• And the machines that are used to connect to those services are clients.

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

Domain Names:• Servers on the Internet 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") .–

Name Servers( DNS):• A set of servers called Domain Name Servers (DNS) maps the human-readable

names to the IP addresses. • These servers are simple databases that map names to IP addresses, and they are

distributed all over the Internet.Most individual companies, ISPs and universities maintain small name servers to map host names to IP addresses

MARKUP LANGUAGES: XHTML

What Is HTML?

HyperText Markup Language (HTML) is the computer coding language used to convert ordinary text into active text for display and use on the web and also to give plain,

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

unstructured text the sort of structure human beings rely on to read it. Without some kind of structure imposed on it, plain text would just run together with nothing to distinguish one string of words from another.

To publish information for global distribution, one needs a universally understood language, a kind of publishing mother tongue that all computers may potentially understand. The publishing language used by the World Wide Web is HTML (from HyperText Markup Language).

HTML gives authors the means to:

Publish online documents with headings, text, tables, lists, photos, etc. Retrieve online information via hypertext links, at the click of a button. Design forms for conducting transactions with remote services, for use in searching

for information, making reservations, ordering products, etc. Include spread-sheets, video clips, sound clips, and other applications directly in their documents.

A BRIEF HISTORY OF HTML

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

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

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

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

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

HTML first appeared in the early 1990s—based on the preexisting Standard Generalized Markup Language (SGML)—and was created specifically for marking up documents for use

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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.

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

HTML 4HTML 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 ISO/IEC:10646 standard (see [ISO10646]) as the document character set for HTML. This is the world's most inclusive standard dealing with issues of the representation of international characters, text direction, punctuation, and other world language issues.

HTML now offers greater support for diverse human languages within a document. This allows for more effective indexing of documents for search engines, higher-quality typography, better text-to-speech conversion, better hyphenation, etc.

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

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

Versions

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

XHTML is a reformulation of HTML following the more stringent rules of eXtensible Markup Language (XML), which is a powerful language that allows web authors to create choose from. XHTML is similar to HTML 4.01, with just a few more rules dictating how itmust be written. XHTML 1.0 is the current version, and XHTML 1.1 and 2.0 are already under development but haven’t yet been finalized as formal recommendations as of this 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.

BASIC XHTML SYNTAX AND SEMANTICS

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

If you’re relatively new to web design, you may be wondering about the best platform and software for creating websites. Ultimately, it matters little which platform you choose, as long as you have access to the most popular browsers for testing purposes (a list that I’d now include Apple’s Safari in, alongside Internet Explorer, Firefox, and Opera). Regarding software, there’s an overview in Appendix E (“Browsers Guide”), but this isn’t an exhaustive guide, so do your own research and find software to your liking.

SOME FUNDAMENTAL HTML ELEMENTS

Block-Level and Inline Elements

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

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

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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

Nesting Elements

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

The html Element

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

Required Attributes • xmlns: A URL specifying an XML namespace, which is http://www.w3.org/1999/xhtml for XHTML documentsOptional AttributesThere are no optional attributes for the html element.Standard Attributes• 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 TITLE element

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

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

is a PARAGRAPH element that contains a BOLD element

an HTML document has two main structural elements

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

HEAD contains setup information for the browser & the Web page

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

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

<html>

<!-- Dave Reed page01.html 1/16/04 -->

<!-- Demo web page -->

<head>

<title>Title for Page</title>

</head>

<body>

Text that appears in the page

</body>

</html>

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

Comments appear between <!-- and -->

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

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

RELATIVE URLS

INTRODUCING THE URL

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

A relative URLis one that points to a resource within the same site by referencing only the path and/or file, omitting the protocol and hostname since those can be safely assumed. It might look something like this: examples/chapter1/example.htmlIf 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.htmlIf 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

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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 CREATING HTML DOCUMENTS

HTML DOCTYPES

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/frameset.dtd">

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

In this case, the URI (web address) is relative. Unless you have the DTD in the relevant place on your own website, the browser will display the page this DTD is included on in quirks mode. (And, quite frankly, if you do have the DTD on your website instead of using the one on the W3C’s site, you are very odd indeed.) The same thing happens if you leave out DTDs entirely. Therefore, always include a DTD and always ensure it’s complete

Basic XHTML Document

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""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>

The DoctypeAn XHTML document begins with a Document Type Declaration (doctype, for short), a required component that—as the name suggests—declares what type of document this is

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

and the set of standardized rules the document intends to follow. Each “flavor” of XHTML has its own corresponding doctype.

• XHTML 1.0 Strict:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">• XHTML 1.0 Transitional:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">• XHTML 1.0 Frameset:<!DOCTYPE html PUBLIC "-//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. In fact, it’s not truly part of the document’s markup at all; it merely relays information about the document to the user-agent so it can determine what kind of document it’s dealing with and render the page according to the proper rules.

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

The Basics of Lists &TablesA table consists of three elements: table, tr, and td. Listing 7-1 shows the code for a typical table.

Basic Tag Layout of a Table...<table><tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr><tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr></table>

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

<table>The <table> tag set defines where a table starts and ends. You can place table headers, rows, cells, and other tables within a table.

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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

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

Standard Attributes• class• dir• id• lang• style• title• xml:langEvent Attributes• 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.

Required AttributesNo attributes are required for the <td> tag.

Optional Attributes• abbr: Specifies a shortened version of the content in a cell. You use this optional attribute to provide nonvisual browsers a shortened version of long content.• align: Specifies the alignment of cell content. Possible values are center, char, justify, left, and right. The use of the CSS property text-align is the preferred method.• axis: Places a cell into conceptual categories. These categories form an axis in an n-dimensional space. User agents can then give users access to the categories.

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

• char: Specifies which character the text should be aligned on. This requires the use of the align attribute with the value set as char.• charoff: Specifies in pixels or as a percentage how far the alignment should be adjusted to the first character to align on. This requires the use of the align attribute with the value set as char.• colspan: Specifies the number of columns this cell should occupy.• rowspan: Indicates the number of rows this cell should occupy.• scope: Specifies if a cell provides header information for the rest of the row that contains it or for the rest of the column. Valid values are col, colgroup, row, and rowgroup.• valign: Specifies the vertical alignment of cell content. Possible values are baseline, bottom, middle, and top.

Coding a Basic TableIn 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.The Code for a Basic Table<!DOCTYPE htmlPUBLIC "-//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"><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

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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.

FORMSHOW FORMS WORK

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

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

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

The form element requires an action attribute in its opening tag, whose value is the URL of the form handler. That form handler may be a document or script elsewhere on the website, a back-end application, or the very same document the form resides in if its data will be handled exclusively on the client side by JavaScript or if the XHTML document has been integrated with some kind of scripting language such as PHP, Ruby, ASP, or 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 query string consisting of all the form’s name/value pairs. The form handler can then interpret and process that URL, extracting values from the exposed query string. A method of post sends the data set directly to the form handler application (not in a visible URL query string) for processing at the server.

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

Simple Form with a Text Control and a Submit Button

<form method="post" action="/cgi-bin/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" />

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

<input type="submit" name="subscribe" value="Subscribe" /></p></form>

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

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

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

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

Input

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

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

Optional Attributes• alt: Specifies an alternative text description (only for input type="image").

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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

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

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

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

usernames to be 12 characters long only), it’s helpful to indicate the maximum length in a note near the form control.

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

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

input type="checkbox"

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

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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

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

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

Input type="image"An image control behaves essentially like a submit button; activating the control will submit the form. But an input type="image" control allows you to substitute the standard button with a more decorative graphic. As with other images in XHTML, an image control requires a src attribute to specify the image file’s URL and an alt attribute to provide an alternative text description when the image isn’t available (see Chapter 5 for more about the alt attribute). Alternative text is especially vital for image form controls to ensure that the form can be successfully completed, even when the image can’t be seen. Without auseful 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

Using input type="image" in Place of input type="submit"<p><input type="image" name="post" src="post.png" alt="Post your comment" /></p>

Button

The button element works just like a submit, reset, or button input type, or even an input type="image" control—activating a button element (with the click of a mouse or press of a key) will submit or reset the form or trigger a scripted response. The button element is inline and requires a type attribute (with a value of submit, reset, or button), and like other form controls, a button may appear only within a form. However, unlike the input element, a button element is not empty; it can contain text or other elements,

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

offering many more design and semantic options than a simple input element. In 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 ofemphasized text and an image.

A button Element Containing Text and an Image<div><button type="submit" name="continue"><strong>Continue to the next page</strong><imgsrc="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).STYLE SHEETS :CSS

Introduction to Cascading Style Sheets (CSS)

What is CSS?

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

DHTML – DYNAMIC HYPER TEXT MARKUP LANGUAGE

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.

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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

CSS DemoAn HTML document can be displayed with different styles:

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

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

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

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

FEATURES

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

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

1. CSS 3 Selectors

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

The most useful attributes for selectors are:

[attr^=val] –- matches a DOM element with the attribute attr and a value starting with val

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

[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 valCSS

<div class="code"><style>  

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

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

</style></div> 

HTML

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

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

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

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

2. CSS 3 Rounded Corners

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

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

CSS

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

HTML

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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

Output

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

3. CSS 3 Border Image

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

CSS

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

HTML

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

4. CSS 3 Box Shadow

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

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

CSS

1 <div class="code">.shadow{ background-color: #EEEEEE; box-shadow:3px 3px 3px 2px #797979; height: 50px; width: 100px; padding: 5px;}</div> 

HTML

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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

Output

5. CSS 3 Text Shadow

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

CSS

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

HTML

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

Output

\

6. CSS 3 Gradient

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

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

CSS

1 <div class="code">#gradient { background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #E6C674),color-stop(1, #F7ECCA)); background-image: -moz-linear-

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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> 

Output

7. CSS 3 RGBA: Color, Now with Opacity

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

CSS

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

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

8. CSS 3 Transform (Element Rotation)

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

Here's how rotate an element in CSS 3.

CSS

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

HTML

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

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

property</p></div> 

Ouptut

9. CSS 3 Multicolumn Layout

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

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

CSS

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

HTML

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

view plain | print | copy to clipboard | ?

10. CSS 3 Web Fonts

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

CSS

1 <div class="code">@font-face { src: url("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.

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

CORE SYNTAX:

CSS Syntax

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 ExampleCSS 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:Examplep{color:red;text-align:center;}

CSS CommentsComments 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;

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

font-family:arial;}

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

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

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

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

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

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

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

STYLE SHEETS AND HTML STYLE RULE

DeclarationsPropertiesA property is assigned to a selector in order to manipulate its style. Examples of properties include color, margin, and font.ValuesThe declaration value is an assignment that a property receives. For example, the property color could receive the value red.GroupingIn 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 }InheritanceVirtually all selectors which are nested within selectors will inherit the property values assigned to the outer selector unless otherwise modified. For example, a color defined for the BODY will also be applied to text in a paragraph.There are some cases where the inner selector does not inherit the surrounding selector's values, but these should stand out logically. For example, the margin-top property is not inherited; intuitively, a paragraph would not have the same top margin as the document body.CommentsComments are denoted within style sheets with the same conventions that are used in C programming. A sample CSS1 comment would be in the format:/* COMMENTS CANNOT BE NESTED */Pseudo-classes and Pseudo-elementsPseudo-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 formselector:pseudo-class { property: value }orselector:pseudo-element { property: value }Pseudo-classes and pseudo-elements should not be specified with HTML's CLASS attribute. Normal classes may be used with pseudo-classes and pseudo-elements as follows:selector.class:pseudo-class { property: value }orselector.class:pseudo-element { property: value }Anchor Pseudo-classesPseudo-classes can be assigned to the A element to display links, visited links and active links differently. The anchor element can give the pseudo-classes link, visited, or active. A visited link could be defined to render in a different color and even a different font size and style.An interesting effect could be to have a currently selected (or "active") link display in a slightly larger font size with a different color. Then, when the page is re-selected the visited

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

link could display in a smaller font size with a different color. The sample style sheet might look like this:A:link { color: red }A:active { color: blue; font-size: 125% }A:visited { color: green; font-size: 85% }First Line Pseudo-elementOften in newspaper articles, such as those in the Wall Street Journal, the first line of text in an article is displayed in bold lettering and all capitals. CSS1 has included this capability as a pseudo-element. A first-line pseudo-element may be used in any block-level element (such as P, H1, etc.). An example of a first-line pseudo-element would be:P:first-line { font-variant: small-caps; font-weight: bold }First Letter Pseudo-elementThe first-letter pseudo-element is used to create drop caps and other effects. The first letter of text within an assigned selector will be rendered according to the value assigned. A first-letter pseudo-element may be used in any block-level element. For example:P:first-letter { font-size: 300%; float: left }would create a drop cap three times the normal font size.Cascading OrderWhen multiple style sheets are used, the style sheets may fight over control of a particular selector. In these situations, there must be rules as to which style sheet's rule will win out. The following characteristics will determine the outcome of contradictory style sheets.1. ! important Rules can be designated as important by specifying ! important. A style that is designated as important will win out over contradictory styles of otherwise equal weight. Likewise, since both author and reader may specify important rules, the author's rule will override the reader's in cases of importance. A sample use of the ! important statement:

BODY { background: url(bar.gif) white;

background-repeat: repeat-x ! important }

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

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

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

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

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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 LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */

LI.red {xxx} /* a=0 b=1 c=1 --> specificity = 011 */

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

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

Overview of rules

1. Styles can be inherited from a parent2. Later styles over-rule earlier styles3. Styles can combine from different sources4. Style definitions can use any combination of element, id, classname and modifier5. You can specify an element with a certain element type AND id and classname(s)6. Styles can apply to elements nested in a particular way

CASCADING, AND INHERITANCE

Specified, computed, and actual valuesOnce a user agent has parsed a document and constructed a document tree, it must assign, for every element in the tree, a value to every property that applies to the target media type. The final value of a property is the result of a three-step calculation: the value is determined through specification (the "specified value"), then resolved into an absolute value if necessary (the "computed value"), and finally transformed according to the limitations of the local environment (the "actual value"). Specified valuesUser agents must first assign a specified value to a property based on the following mechanisms (in order of precedence): If the cascade results in a value, use it. Otherwise, if the property is inherited, use the value of the parent element, generally the computed value. Otherwise use the property's initial value. The initial value of each property is indicated in the property's definition. Since it has no parent, the root of the document tree cannot use values from the parent element; in this case, the initial value is used if necessary.

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

Computed values Specified values may be absolute (i.e., they are not specified relative to another value, as in 'red' or '2mm') or relative (i.e., they are specified relative to another value, as in 'auto', '2em', and '12%'). For absolute values, no computation is needed to find the computed value. Relative values, on the other hand, must be transformed into computed values: percentages must be multiplied by a reference value (each property defines which value that is), values with relative units (em, ex, px) must be made absolute by multiplying with the appropriate font or pixel size, 'auto' values must be computed by the formulas given with each property, certain keywords ('smaller', 'bolder', 'inherit') must be replaced according to their definitions. In most cases, elements inherit computed values. However, there are some properties whose specified value may be inherited (e.g., the number value for the 'line-height' property). In the cases where child elements do not inherit the computed value, this is described in the property definition.

Actual valuesA 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. InheritanceSome values are inherited by the children of an element in the document tree. Each property defines whether it is inherited or not. Suppose there is an H1 element with an emphasizing element (EM) inside:<H1>The headline <EM>is</EM> important!</H1>If no color has been assigned to the EM element, the emphasized "is" will inherit the color of the parent element, so if H1 has the color blue, the EM element will likewise be in blue. To set a "default" style property for a document, authors may set the property on the root of the document tree. In HTML, for example, the HTML or BODY elements can serve this function. Note that this will work even if the author omits the BODY tag in the HTML source since the HTML parser will infer the missing tag.

For example, since the 'color' property is inherited, all descendants of the BODY element will inherit the color 'black': BODY { color: black; }Specified percentage values are not inherited; computed values are. For example, given the following style sheet:BODY { font-size: 10pt }H1 { font-size: 120% }and this document fragment: <BODY> <H1>A <EM>large</EM> heading</H1></BODY>

the 'font-size' property for the H1 element will have the computed value '12pt' (120% times 10pt, the parent's value). Since the computed value of 'font-size' is inherited, the EM element will have the computed value '12pt' as well. If the user agent does not have the 12pt font available, the actual value of 'font-size' for both H1 and EM might be, for example, '11pt'.

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

The 'inherit' valueEach property may also have a specified value of 'inherit', which means that, for a given element, the property takes the same computed value as the property for the element's parent. The inherited value, which is normally only used as a fallback value, can be strengthened by setting 'inherit' explicitly. In the example below, the 'color' and 'background' properties are set on the BODY element. On all other elements, the 'color' value will be inherited and the background will be transparent. If these rules are part of the user's style sheet, black text on a white background will be enforced throughout the document.

BODY { color: black !important; background: white !important;}

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

The @import ruleThe '@import' rule allows users to import style rules from other style sheets. Any @import rules must precede all rule sets in a style sheet. The '@import' keyword must be followed by the URI of the style sheet to include. A string is also allowed; it will be interpreted as if it had url(...) around it. The following lines are equivalent in meaning and illustrate both '@import' syntaxes (one with "url()" and one with a bare string):

@import "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 URI. The following rules have the same effect as if the imported style sheet were wrapped in an @media rule for the same media, but it may save the UA a fruitless download. @import url("fineprint.css") print;@import url("bluish.css") projection, tv;In the absence of any media types, the import is unconditional. Specifying 'all' for the medium has the same effect.

The cascadeStyle sheets may have three different origins: author, user, and user agent. Author. The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally. User: The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behave as if it did). User agent: Conforming user agents must apply a default style sheet (or behave as if they did) prior to all other style sheets for a document. A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See "A sample style sheet for HTML 4.0" for a recommended default style sheet for HTML 4.0 documents. Note that the default style sheet may change if system settings are modified by the user (e.g., system colors). However, due to limitations in a user agent's internal implementation, it may be impossible to change the values in the default style sheet.

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

Style sheets from these three origins will overlap in scope, and they interact according to the cascade. The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence. By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is reversed, however, for "!important" rules. All rules user and author rules have more weight than rules in the UA's default style sheet. Imported style sheets also cascade and their weight depends on their import order. Rules specified in a given style sheet override rules imported from other style sheets. Imported style sheets can themselves import and override other style sheets, recursively, and the same precedence rules apply.

Cascading orderTo 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. It is therefore important that the user agent give the user the ability to turn off the influence of a certain style sheet, e.g., through a pull-down menu.

Important Rules

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

Note. This is a semantic change since CSS1. In CSS1, author "!important" rules took precedence over user "!important" rules. Declaring a shorthand property (e.g., 'background') to be "!important" is equivalent to declaring all of its sub-properties to be "!important". The first rule in the user's style sheet in the following example contains an "!important" declaration, which overrides the corresponding declaration in the author's styles sheet. The second declaration will also win due to being marked "!important". However, the third rule in the user's style sheet is not "!important" and will therefore lose to the second rule in the author's style sheet (which happens to set style on a shorthand property). Also, the third

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

author rule will lose to the second author rule since the second rule is "!important". This shows that "!important" declarations have a function also within author style sheets.

/* From the user's style sheet */P { text-indent: 1em ! important }P { font-style: italic ! important }P { font-size: 18pt }

/* From the author's style sheet */P { text-indent: 1.5em !important }P { font: 12pt sans-serif !important }P { font-size: 24pt }

Calculating a selector's specificityA selector's specificity is calculated as follows: count the number of ID attributes in the selector (= a) count the number of other attributes and pseudo-classes in the selector (= b) count the number of element names in the selector (= c) ignore pseudo-elements. Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity. Some examples:

* {} /* a=0 b=0 c=0 -> specificity = 0 */LI {} /* a=0 b=0 c=1 -> specificity = 1 */UL LI {} /* a=0 b=0 c=2 -> specificity = 2 */UL OL+LI {} /* a=0 b=0 c=3 -> specificity = 3 */H1 + *[REL=up]{} /* a=0 b=1 c=1 -> specificity = 11 */UL OL LI.red {} /* a=0 b=1 c=3 -> specificity = 13 */ LI.red.level {} /* a=0 b=2 c=1 -> specificity = 21 */#x34y {} /* a=1 b=0 c=0 -> specificity = 100 */

In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, but for the purpose of step 3 of the cascade algorithm, they are considered to have an ID selector (specificity: a=1, b=0, c=0). For the purpose of step 4, they are considered to be after all other rules.

<HEAD><STYLE type="text/css"> #x97z { color: blue }</STYLE></HEAD><BODY><P ID=x97z style="color: red"></BODY>

In the above example, the color of the P element would be red. Although the specificity is the same for both declarations, the declaration in the "style" attribute will override the one in the STYLE element because of cascading rule 4.

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

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

Three Ways to Insert CSSThere are three ways of inserting a style sheet: External style sheet Internal style sheet Inline style

External Style SheetAn 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 IE, but not in Firefox or Opera.

Internal Style SheetAn 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>

Inline StylesAn 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:

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Multiple Style SheetsIf 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;}

If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:

color:red;text-align:right;font-size:20pt;

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

Multiple Styles Will Cascade into OneStyles can be specified: inside an HTML element inside the head section of an HTML page in an external CSS fileTip: Even multiple external style sheets can be referenced inside a single HTML document.Cascading orderWhat 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 default2. External style sheet3. Internal style sheet (in the head section)4. Inline style (inside an HTML element)

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).

Note: If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!

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

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

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

background Sets all the background properties in one declaration

background-colorbackground-imagebackground-repeat background-attachment background-positioninherit

1

background-attachment Sets whether a background image is fixed or scrolls with the rest of the page

scrollfixedinherit

1

background-color Sets the background color of an element

color-rgbcolor-hexcolor-nametransparentinherit

1

background-image Sets the background image for an element

url(URL)noneinherit

1

background-position Sets the starting position of a background image

left topleft centerleft bottomright topright center

1

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

right bottomcenter topcenter centercenter bottomx% y%xpos yposinherit

background-repeat Sets if/how a background image will be repeated

repeatrepeat-xrepeat-yno-repeatinherit

1

TEXT FORMATTINGT h i s t e x t i s s t y l e d w i t h s o m e o f t h e t e x t f o r m a 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 fi e d . T h e u n d e r l i n e i s r e m o v e d f r o m t h e " T r y i t y o u r s e l f " l i n k .

Text Color

The color property is used to set the color of the text. The color can be specified by: name - a color name, like "red" RGB - an RGB value, like "rgb(255,0,0)" Hex - a hex value, like "#ff0000"The default color for a page is defined in the body selector.

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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

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

property. Text AlignmentThe 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.

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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).Exampleh1 {text-align:center;}p.date {text-align:right;}p.main {text-align:justify;}

Text DecorationThe 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:Examplea {text-decoration:none;}

It can also be used to decorate text:Exampleh1 {text-decoration:overline;}h2 {text-decoration:line-through;}h3 {text-decoration:underline;}h4 {text-decoration:blink;}

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

Text TransformationThe text-transform property is used to specify uppercase and lowercase letters in a text.It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.Examplep.uppercase {text-transform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

Text IndentationThe text-indentation property is used to specify the indentation of the first line of a text.Examplep {text-indent:50px;}____

All CSS Font PropertiesThe 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 LinksLinks 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,

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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 clickedExample

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 StylesIn the example above the link changes color depending on what state it is in.Lets go through some of the other common ways to style links:Text DecorationThe text-decoration property is mostly used to remove underlines from links:Examplea:link {text-decoration:none;}a:visited {text-decoration:none;}a:hover {text-decoration:underline;}a:active {text-decoration:underline;}

Background ColorThe background-color property specifies the background color for links:Example

CSS ListsThe CSS list properties allow you to: Set different list item markers for ordered lists

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

Set different list item markers for unordered lists Set an image as the list item marker

Exampleul{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 markero 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

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

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

list-style-typelist-style-positionlist-style-imageinherit

1

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

1

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

insideoutside

1

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

inherit

list-style-type Specifies the type of list-item marker nonedisccirclesquaredecimaldecimal-leading-zeroarmeniangeorgianlower-alphaupper-alphalower-greeklower-latinupper-latinlower-romanupper-romaninherit

The CSS Box Model

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

Explanation of the different parts:

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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

Width and Height of an ElementImportant: 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)= 300pxImagine that you only had 250px of space. Let's make an element with a total width of 250px:Example

The total width of an element should always be calculated like this:Total element width = width + left padding + right padding + left border + right border + left margin + right marginThe 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

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

Browsers Compatibility IssueIf you tested the previous example in Internet Explorer, you saw that the total width was not exactly 250px.IE includes padding and border in the width, when the width property is set, unless a DOCTYPE is declared.To fix this problem, just add a DOCTYPE to the code:Example<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""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 Border

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

border Sets all the border properties in one declaration

border-widthborder-styleborder-color

1

border-bottom Sets all the bottom border properties in one declaration

border-bottom-widthborder-bottom-styleborder-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-style 2

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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

border-color Sets the color of the four borders color_namehex_numberrgb_numbertransparentinherit

1

border-left Sets all the left border properties in one declaration

border-left-widthborder-left-styleborder-left-color

1

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

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

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

border-right Sets all the right border properties in one declaration

border-right-widthborder-right-styleborder-right-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-style 2

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

border-style Sets the style of the four borders nonehiddendotteddashedsoliddoublegrooveridgeinsetoutsetinherit

1

border-top Sets all the top border properties in one declaration

border-top-widthborder-top-styleborder-top-color

1

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

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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

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

border-width Sets the width of the four borders thinmediumthicklength

The CSS margin properties define the space around elements.

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

auto The browser sets the margin.The result of this is dependant of the browser

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

% Defines a margin in % of the containing element

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

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

margin A shorthand property for setting the margin properties in one declaration

margin-topmargin-rightmargin-bottommargin-left

1

margin-bottom Sets the bottom margin of an element autolength%

1

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

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

length%

margin-right Sets the right margin of an element autolength%

1

margin-top Sets the top margin of an element autolength%

1

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

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

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

% Defines a padding in % of the containing element

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

padding A shorthand property for setting all the padding properties in one declaration

padding-toppadding-rightpadding-bottompadding-left

1

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

1

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

1

WEBTECHNOLOGY -241208 Lecture Notes - UNIT-I

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

1

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

1

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

1. Font Attributes

2. Color and Background attributes

3. Text Attributes

4. Border Attributes

5. Margin Attributes and

6. List Attributes.