49147180 IT 2353 Web Technology Notes

UNIT – I

Internet – History

• 1989 networking is started with ARPA net to provide three services: file transfer, remote printing and telnet

• 1972, e-mail service is added to that

• 1973, TCP/IP was proposed as a standard

• Regional network called SURAnet (Southern University Research Associations) was developed by university of

Maryland

• Another network called CSNET was also developed by NSF(National Science Foundation)

• Several protocols like FTP, SMTP were developed under ARPAnet

• January 1 1982. TCP/IP became standard protocol for ARPAnet on that day Internet was said to be born. That

time, TCP/IP was used to connect computers within the LAN and later it permits outside regional network to

communicate with it.

• Later, computers at several institution connected to it by phonenet(modem)

• And later, leased telephone lines were used.

• 1985, NSFNET was developed by NSF that connects super computer center placed in different locations

• Regional networks line SURA net, JuNcNet, NYSERnet, SDSCnet were developed with the capability of data

transmission at 56kb/s

• Later, data transmission updated to 1.5mb/s

• 1990, ARPAnet decommissioned and NSF became the center of internet

• 1990, internet was used for commercial purpose with dial up access

• 1995, internet services offered by Internet Service Providers(ISP)

Internet Protocols

Protocol means a detailed specification of how communication between computers will be carried out in order to serve

specific purpose.

TCP/IP

There are two protocols: Transmission Control Protocol and Internet Protocol.

TCP works on IP protocol. It offers services such as e-mail, web browsing, and file download, accessing remote data

bases etc., It is a higher-level Protocol more reliable and connection oriented. Before transmitting any msg. a

connection between s->d will be established using a ‘three way handshake’ method. At the end of the transmission, the

same connection will be detached using the three way handshaking method. TCP/IP is analogous to telephone service.

Analogies:

• IP ~ the telephone network

• TCP ~ calling someone who answers, having a conversation, and hanging up

• UDP ~ calling someone and leaving a message

• DNS ~ directory assistance

Internet Protocol (IP)

• IP is the fundamental protocol defining the Internet (as the name implies!)

• IP address:

– is a 32-bit number (in IPv4)

– Associated with at most one device at a time (although device may have more than one)

– Written as four dot-separated bytes, e.g. 192.0.34.166

• IP function: is to transfer data from source device to destination device

• IP source software creates a packet representing the data. The packet has two parts

– Header: contains source and destination IP addresses, length of data, etc.

– Data: contains actual message

• If destination device is on another LAN, packet is sent to a gateway that connects to more than one network as

shown in following fig.

When application on source wants tom transmit msg. it calls the IP s/w on the source machine and provides its data to

it. The ip s/w then creates a packet. After constructing the packet, it will be sent to the destination via the network. If the

destination is on another n/w, ip will deliver the packet to the gateway. Then the packet will be routed to the correct

destination by the gateway. The IP s/s running on the destination machine will receive the packet and pass it to an

application waiting for the data in the destination. IP also adds some error detection information called checksum to

each packet so that if a packet is corrupted can be detected by the destination.

TCP

• Limitations of IP:

– IP provides a no guarantee of packet delivery (packets can be dropped)

– In which the communication is one-way (source to destination)

• TCP adds concept of a connection on top of IP to overcome the draw backs of IP

– It provides guarantee that packets delivered

– It provides a two-way (full duplex) communication

� The following fig. illustrated the communication using TCP

• TCP also adds concept of a port

– TCP header contains port number representing an application program on the destination computer

– Some port numbers have standard meanings

• Example: port 25 is normally used for email transmitted using the Simple Mail Transfer Protocol

(SMTP)

– Other port numbers are available first-come-first served to any application

User Datagram Protocol (UDP)

• Like TCP in that:

– It builds on IP

– It provides port concept

• Unlike TCP in that:

– There is no connection concept

– There is no data transmission guarantee

• Advantage of UDP vs. TCP:

– Lightweight, so faster for one-time messages

DNS

• DNS is the “phone book” for the Internet

– It maps between host names and IP addresses

– DNS often uses UDP for communication

• Host names are in human understandable form. Easier to remember rather than representing it in numeric

form.

– e.g., www.example.org where labels separated by dots

– Final label is top-level domain. The domains are classified into:

• Generic domain: .com, .org, etc.

• Country-code domain: .us, .il, etc.

• Domains are divided into second-level domains, which can be further divided into subdomains, etc.

– E.g., in www.example.com, example is a second-level domain

• A host name plus domain name information is called the fully qualified domain name of the computer

– Above, www is the host name, www.example.com is the FQDN

• nslookup is a program that provides a command-line access to DNS A single host may have multiple IP

addresses.

World Wide Web

• The Web is the collection of machines (Web servers) on the Internet that provide information, particularly HTML

documents, via HTTP.

• Machines that access information on the Web are known as Web clients. A Web browser is software used by an

end user to access the Web.

• Distinctive feature of Web: support for hypertext (text containing links)

• It communicates via Hypertext Transport Protocol (HTTP)

• It uses Hypertext Markup Language (HTML)for Document representation

HTTP

• HTTP is based on the request-response communication model:

– Client sends a request

– Server sends a response

– HTTP is a stateless protocol: where the protocol does not require the server to remember anything

about the client between requests.

• Normally implemented over a TCP connection (80 is standard port number for HTTP)

• The following is the typical browser-server interaction using HTTP:

1. User enters Web address in browser

2. Browser uses DNS to locate IP address

3. Browser opens TCP connection to server

4. Browser sends HTTP request over connection

5. Server sends HTTP response to browser over connection

6. Browser displays body of response in the client area of the browser window

• The information transmitted using HTTP that is reguest-response message is often entirely text as shown below:

• It uses URI to trace the requested resource from the web server.

• Uniform Resource Identifier (URI)

– Syntax: scheme : scheme-depend-part

• Example: In http://www.example.com/, the scheme is http

– Request-URI is the portion of the requested URI that follows the host name (which is supplied by

the required Host header field)

• Example / is Request-URI portion of http://www.example.com/

• URI’s are of two types:

– Uniform Resource Name (URN)

• Can be used to identify resources with unique names, such as books (which have unique

ISBN’s)

• Scheme is urn

– Uniform Resource Locator (URL)

• Specifies location at which a resource can be found

• In addition to http, some other URL schemes are https, ftp, mailto, and file

HTTP Request

Each request message begins with a request line, which contains three critical pieces of information: A start line (which

contains the method the client is requesting; the URI of the resource upon which the client wishes the action to be

performed and the version of HTTP that the client is using). After the start line come a set of message headers related to

the request, followed by a blank line and then optionally, the message body of the request as shown below

• Structure of the request:

start line

header field(s)

blank line

optional body

• Start line

– Example: GET / HTTP/1.1

– Three space-separated parts:

• HTTP request method

• Request-URI

• HTTP version

– Common request methods:

HEAD Used to ask only for information about a document, not for the

document itself. It's often used by clients who use caching, to

see if the document has changed since it was last accessed.

GET Requests a representation of the specified resource.

POST Submits data to be processed to the identified resource.

PUT Uploads a representation of the specified resource.

DELETE Deletes the specified resource.

TRACE Echoes back the received request, so that a client can see what (if

any) changes or additions have been made by intermediate

servers.

OPTIONS Returns the HTTP methods that the server supports for specified

URL

• Header field structure:

After the request line come any of the headers that the client wants to include in the message; it is in these

headers that details are provided to the server about the request. The headers all use the same structure as

field name : field value

– Syntax

• Field name is not a case sensitive

• Field value may continue on multiple lines by starting continuation lines with white space

• Field values may contain MIME types (Multipurpose Internet Mail Extensions), quality

values. MIME is a convention for specifying content type of a message. In HTTP,

typically used to specify content type of the body of the response. MIME content type

organized as

• type / subtype where type and subtype define the Content-Type. Some

common content types:,

MIME Type Description

text/plain Plain text. Default if data is primarily text

and no other type detected.

text/html HTML. Default if common tags detected

and server does not supply image/* type.

image/gif Graphics Interchange Format (GIF).

image/jpeg JPEG image.

application/octet-

stream

Binary file. Default if data is primarily

binary.

• Common header fields:

Field Name Use

Host host name from URL (required)

User- Accept type of browser sending request

Connection: value close tells server to close connection after single

request/response

Content-Type: MIME type of (POST) body, normally application/x-www-form-

url encoded

Content-Length: bytes in body

Referer: URL of document containing link that supplied URI for

this HTTP request

Agent: MIME types of acceptable documents

HTTP Response

After receiving and interpreting a request message, a server responds with an HTTP response message.

• Structure of the response:

start line

header field(s)

blank line

optional body

• Status line: The first line of a Response message is the Status-Line, consisting of the protocol version followed

by a numeric status code and its associated textual phrase.

– Example: HTTP/1.1 200 OK

It has three space-separated parts:

– HTTP version

– status code

– reason phrase in text (intended for human use)

• Status code: to display the status of the response message

– is a three-digit number

– Classified into five classes. First digit is class of the status code:

1xx:

Informational

Request received, continuing process

2xx: Success The action was successfully received, understood,

and accepted

3xx: Redirection

Further action must be taken in order to complete

the request

4xx: Client Error The request contains bad syntax or cannot be

fulfilled

5xx: Server Error The server failed to fulfill an apparently valid request

Some common status codes:

200: OK.

302: This code indicates that a page has been temporarily redirected to another URL.

This means that the page is still active, just temporarily moved to another URL.

403: Some of you may have come across this, also known as the “Forbidden

Request”. Basically it means that you have made a legal request, but the server is

refusing to respond to it.

404: The most common of the Broken Site Errors! Basically this is where the URL no

longer exists or cannot be found, so you will be redirected to a broken holding page.

500: Just a generic Server error message, this comes up when there is nothing else to

explain a problem.

501: This is where the Server you a requesting information from does not understand

the method in which you are requesting the information, or there is not a fulfilled

request.

502: Simply an invalid response was received by the server, from the request that you

have made.

• Common header fields:

Accept-Ranges What partial content range types this server supports

Date The date and time that the message was sent

Last-Modified The last modified date for the requested object

Expires Gives the date/time after which the response is considered

old

ETag A hash code of the resource returned

Location Used in redirection, or when a new resource has been

created

Server A name for the server

Cache Control

It stores the copy of the loaded page for a specific amount of time (during which it’s considered adequate) allowing

user to use it instead of reloading this page from the server. Most of the web clients (browsers) can cache received

server responses and store the content on the user’s hard disk drive for further reuse.

To provide efficient caching one should take into consideration two main principles: adequacy and validation. Adequacy

means that the cached objects must be up-to-date, i.e. the same as on the server. Validation is an operation to check

whether stored data still corresponds to that on the web server. If the data is fresh, the local resource is used, otherwise

the data needs to be reloaded from the server.

• Cache advantages

– Reduces response time

– Less network traffic

– Less load on server

• Cache disadvantage

– Cached copy of resource may be invalid (inconsistent with remote version)

Cache Validation can be used to check whether a cached response is still good after it becomes stale. For example, if

the response has a Last-Modified header, a cache can make a conditional request using the If-Modified-Since header to

see if it has changed. The ETag (entity tag) mechanism also allows for both strong and weak validation.

Character Sets

Character sets are standards that map specific real world characters (code elements) to specific numbers (code points)

and then encode those code points as bytes (character encoding or encoding schemes). EG: ANSI and Unicode. The

physical file of a page is encoded in bytes according to a character set. The HTML of a page can also specify which

character set to use with a meta tag of this syntax in the <head> tag of the page:

<meta http-equiv="Content-Type" content="text/html; charset=CharacterSet">.

IANA maintains complete list of Internet-recognized character sets/encodings for web documents. US-ASCII character

set can be also used for such documents, but is not recommended. UTF-8 and ISO-8859-1 are supersets of US-ASCII

and provide international compatibility. UTF-8 can represent all ASCII characters using a single byte each and arbitrary

Unicode characters using up to 4 bytes each ISO-8859-1 is 1-byte code that has many characters common in Western

European languages, such as é

Web Clients

It typically refers to the Web browser in the user's machine. It is a software application for retrieving, presenting, and

traversing information resources on the web server. It is used to create a HTTP request message and for processing the

HTTP response message.

User agent: Any web client is designed to directly support user access to web servers is known as user agent. Web

browsers can run on desktop or laptop computers. Some of the browsers are: Internet Explorer, Mozilla, FireFox,

Chrome, Safari, Opera, Netscape Navigator

Web Browsers:

Browsers are software programs that allow you to search and view the many different kinds of information that's

available on the World Wide Web. The information could be web sites, video or audio information.

The following list explains the various parts that make up a web browser and an explanation of their purpose.

Status Bar: You will find the status bar at the very bottom of your browser window. It basically tells you what you are

doing at the moment. Mainly, it shows you load speed and the URL address of whatever your mouse is hovering over.

Title Bar: You will find this bar at the absolute top of your browser and in will be the colour blue for the major browsers.

The purpose of the Title bar is to display the title of the web page that you are currently viewing.

Menu Bar: The menu bar contains a set of dropdown menus

Navigational tool: A bar contains standard push button controls that allow the user to return to a previously viewed

page, to reverse and refresh the page, to display the home page and to print the page etc.

Toolbar Icons: You will find the Toolbar directly under the Title Bar. The Toolbar is where you will find the back button,

home button and the refresh button etc.

Client area: It is a display window which is the space in which you view the website.

Scroll Bars: The Scroll bars, usually located to the right of the Display Window, allows you to "scroll" (move down or up

the web page) so you can view information that is below or above what is currently in the Display Window.

- First graphical browser running on general-purpose platforms: Mosaic (1993)

• Primary tasks:

– Convert web addresses (URL’s) to HTTP requests

– Use DNS to map the web site address into its appropriate IP addresas

– Render (appropriately display) documents returned by a server

– Establish a TCP connection using IP address

Additional functionality:

– Execution of scripts (e.g., drop-down menus)

– Event handling (e.g., mouse clicks)

– GUI for controls (e.g., buttons)

– Secure communication with servers

– Display of non-HTML documents (e.g., PDF) via plug-ins

• Standard features

– Save web page to disk

– Find string in page

– Fill forms automatically (passwords, CC numbers, …)

– Set preferences (language, character set, cache and HTTP parameters)

– Modify display style (e.g., increase font sizes)

– Display raw HTML and HTTP header info (e.g., Last-Modified)

– Choose browser themes (skins)

– View history of web addresses visited

– Bookmark favorite pages for easy return

HTTP URL’s

• Browser uses authority to connect via TCP

• Request-URI included in start line (/ used for path if none supplied)

• Fragment identifier not sent to server (used to scroll browser client area)

Web Servers

• Basic functionality:

– It receives HTTP request via TCP

– It maps Host header to specific virtual host (one of many host names sharing an IP address)

– It maps Request-URI to specific resource associated with the virtual host

• File: Return file in HTTP response

• Program: Run program and return output in HTTP response

– It maps type of resource to appropriate MIME type and use to set Content-Type header in HTTP

response

– It Logs information about the request and response

• Secure Servers

– Since HTTP messages typically travel over a public network, to carry private information (such as credit

card numbers) it should be encrypted to prevent eavesdropping

• The protocol https URL scheme tells the browser to use encryption. Some of the other common

encryption standards are

• Secure Socket Layer (SSL)

• Transport Layer Security (TLS)

• Tomcat:

– A Java-based web server

– It provides container called as Catalina for running Java servlets (HTML-generating programs) as back-

end to Apache or IIS

– It can be used as a stand-alone using Coyote package. Some Coyote communication parameters are:

• Allowed/blocked IP addresses

• Max. simultaneous active TCP connections

• Max. queued TCP connection requests

• “Keep-alive” time for inactive TCP connections

– Some Catalina container parameters are:

• Virtual host names and associated ports

• Logging preferences

• Mapping from Request-URI’s to server resources

• Password protection of resources

• Use of server-side caching

– These parameters can be modified to tune the server performance

– Tomcat is a HTML-based server administration

– It can be viewed by using the url http://localhost:8080.

– localhost is a special host name that means “this machine”

The admintool utility is used to configure the behavior of the Tomcat Java Servlet/JSP container while it is running.

Changes made to Tomcat using admintool can be saved persistently so that the changes remain when Tomcat is

restarted, or can be saved for the current session only.

Running admintool

In the Web browser, point to the following URL: http://localhost:8080/admin, which displays in the Web browser

window:

Perform Tomcat Web Server Administration tasks. After you have made changes to Tomcat, select the Save button on

that page to save the attributes for the current Tomcat process. Select the Commit Changes button to write the changes

to the <JWSDP_HOME>/conf/server.xml file so that the changes to the Tomcat server are persistent and will be

retrieved when Tomcat is restarted. To log out of admintool, click Log Out button

Setting Server Properties

Select Tomcat Server in the left pane. The Server Properties display in the right pane. The Server element represents the

entire JSP/Servlet container. The server properties are shown in following table

Server Properties

Property Description

Port

Number

The TCP/IP port number on which this server waits for a shutdown command. This connection must be

initiated from the same server computer that is running this instance of Tomcat. The default value is 8005.

Values less than 1024 will generate a warning, as special software capabilities are required when using this

port

Debug

Level

The level of debugging detail logged by this server. Higher numbers generate more detailed output. If not

specified, the default debugging detail level is zero (0).

Shutdown The command string that must be received via a TCP/IP connection to the specified port number in order

to shut down Tomcat. The value for this property must contain at least 6 characters. The default value is

SHUTDOWN.

Configuring Services

Service elements are nested with the Server element. The Service element represents the combination of one or more

Connector components that share a single engine component for processing incoming requests.

For each Service element defined, you can create or delete the following elements:

• Connector elements represent the interface between the Service and external clients that send requests to it

and receive responses from it.

• Host elements represent a virtual host, which is an association of a network name for a server (such as

www.mycompany.com) with the particular server on which Tomcat is running.

• Logger elements represent a destination for logging, debugging, and error messages for Tomcat.

• Realm elements represent a database of user names, passwords, and roles assigned to those users.

• Valve elements represent a component that will be inserted into the request processing pipeline for the

associated container.

Connector Attributes

When you create or modify any type of Connector, the attributes shown in flowing table may be set, as needed.

Common Connector Attributes

Attribute Description

Accept Count The maximum queue length for incoming connection requests when all possible request processing

threads are in use. Any requests received when the queue is full will be refused. The default value is 10.

Connection

Timeout

The number of milliseconds this Connector will wait, after accepting a connection, for the request URI

line to be presented. The default value is 60000 (i.e. 60 seconds).

IP Address Specifies which address will be used for listening on the specified port, for servers with more than one

IP address. By default, this port will be used on all IP addresses associated with the server.

Port Number

The TCP port number on which this Connector will create a server socket and await incoming

connections. Your operating system will allow only one server application to listen to a particular port

number on a particular IP address.

Minimum The number of request processing threads that will be created when this Connector is first started.

This attribute should be set to a value smaller than that set for Maximum. The default value is 5.

Maximum

The maximum number of request processing threads to be created by this Connector, which therefore

determines the maximum number of simultaneous requests that can be handled. If not specified, this

attribute is set to 75.

Configuring Host Elements

The Host element represents a virtual host, which is an association of a network name for a server (such as

www.mycompany.com) with the particular server on which Tomcat is running.

Host Attributes

The attributes shown in following table may be viewed, set, or modified for a Host.

Host Attributes


Name The network name of this virtual host, as registered in your Domain Name Service server. One of the

Hosts nested within an Engine MUST have a name that matches the defaultHost setting for that Engine.

Application

Base

The Application Base directory for this virtual host. This is the path name of a directory that may contain

Web applications to be deployed on this virtual host. You may specify an absolute path name for this

directory, or a path name that is relative to the directory under which Tomcat is installed.

Debug Level The level of debugging detail logged by this Engine to the associated Logger. Higher numbers generate

more detailed output. If not specified, the default debugging detail level is zero (0).

Configuring Logger Elements

A Logger element represents a destination for logging, debugging, and error messages for Tomcat.

Logger Attributes

Common attributes for all of the Logger types are outlined in the following table

Logger Attributes


Directory

The absolute or relative path name of a directory in which log files created by this logger will be placed. If

a relative path is specified, it is interpreted as relative to the directory in which Tomcat is installed. If no

directory attribute is specified, the default value is logs (relative to the directory in which Tomcat is

installed).

Prefix The prefix added to the start of each log file's name. If not specified, the default value is catalina. To

specify no prefix, use a zero-length string.

Suffix The suffix added to the end of each log file's name. If not specified, the default value is .log. To specify no

suffix, use a zero-length string.

Timestamp Whether or not all logged messages are to be date and time stamped. Set to True to cause all logged

messages to be date and time stamped. Set to False to skip date/time stamping.

Tomcat writes the log information in a log file which in a plain text format. In general, the log entry has the following

format:

%h %l %t “%r” %s %b

%h - Remote host name

%l - Remote logical user name

%t - Date and time, in Common Log Format

%r - First line of the request URI

%s - HTTP status code of the response

%b - Bytes sent in body of response, excluding HTTP headers,

HTML introduction

HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language

HTML is not a programming language, it is a markup language. A markup language is a set of markup tags. HTML uses

markup tags to describe web pages. HTML markup tags are usually called HTML tags. HTML tags are keywords

surrounded by angle brackets like <html>

HTML tags normally come in pairs like <b> and </b>. The first tag in a pair is the start tag, the second tag is the end

tag. Start and end tags are also called opening tags and closing tags.

HTML documents describe web pages. HTML documents contain HTML tags and plain text

HTML documents are also called web pages. HTML tags are not case sensitive: <P> means the same as <p>.

An HTML element starts with a start tag / opening tag. An HTML element ends with an end tag / closing tag. The

element content is everything between the start and the end tag. Some HTML elements have empty content. Empty

elements are closed in the start tag. Most HTML elements can have attributes. HTML elements can be nested

Basic structure of HTML

HTML Element Tree

Document type declaration specifies name of root element: <!DOCTYPE html

Root of HTML document must be html. XHTML 1.0 requires that this element contain the xml namespace xmlns

attribute specification (name/value pair) as shown below.

� The body element contains information displayed in the browser client area

� The head element contains information used for other purposes by the browser:

� title (shown in title bar of browser window)

� scripts (client-side programs)

� style (display) information

HTML History

� 1990: HTML invented by Tim Berners-Lee

� 1993: Mosaic browser adds support for images, sound, video to HTML

� 1994-~1997: “Browser wars” between Netscape and Microsoft, HTML defined operationally by browser support

� ~1997-present: Increasingly, World-Wide Web Consortium (W3C) recommendations define HTML

HTML Versions

� HTML 4.01 syntax defined using Standard Generalized Markup Language (SGML)

� XHTML 1.0 syntax defined using Extensible Markup Language (XML)

� Primary differences between HTML and XHTML:

� HTML allows some tag omissions (e.g., end tags)

� XHTML element and attribute names are lower case (HTML names are case-insensitive)

� XHTML requires that attribute values be quoted

The following figure illustrates the relationship between the markup languages

� For HTML 4.01 and XHTML 1.0, the document type declaration can be used to select one of three “flavors”:

� Strict: W3C ideal

� Transitional: Includes deprecated elements and attributes (W3C recommends use of style sheets

instead)

� Frameset: Supports frames (subwindows within the client area)

HTML Document Type Declarations

Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

strict.dtd">

Frameset:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

frameset.dtd">

Transitional:

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

XHTML White Space

� There are four white space characters: carriage return, line feed, space, horizontal tab

� All white space is converted to space characters

� Leading and trailing spaces are trimmed

� Multiple consecutive space characters are replaced by a single space character

For example,

The above code displays

The above code displays

Unrecognized HTML Elements

By executing the above HTML code, it shows the output as

� Browsers ignore tags with unrecognized element names, attribute specifications with unrecognized attribute

names. It is best to use an HTML validator to check syntax

HTML References

Since < marks the beginning of a tag, how do you include a < in an HTML document? For that use markup known as a

reference

� Two types:

� Character reference specifies a character by its Unicode code point

� For <, use < or < or <

� Entity reference specifies a character by an HTML-defined name

� For <, use <

The following table lists the available references

� Since < and & begin markup, within character data or attribute values these characters must always be

represented by references (normally < and &)

� Good idea to represent > using reference (normally >)

� Reference provides consistency with treatment of <

� It avoids accidental use of the reserved string ]]>

� Non-breaking space ( ) produces space but counts as part of a word

� Ex: keep together keep together which produces the following output

- Non-breaking space often used to create multiple spaces. For example,

Empty Elements

HTML elements with no content are called empty elements. Empty elements can be closed in the start tag. Example:

<br> is an empty element without a closing tag

� XML allows two syntactic representations of empty elements

� Empty tag syntax <br /> is recommended for browser compatibility

� XML parsers also recognize syntax <br></br> (start tag followed immediately by end tag), but many

browsers do not understand this for empty elements

HTML Attributes

Attributes provide additional information about HTML elements. HTML elements can have attributes. Attributes provide

additional information about an element. Attributes are always specified in the start tag. Attributes come in name/value

pairs like: name="value"

Attribute Example

HTML links are defined with the <a> tag. The link address is specified in the href attribute:

Example

<a href="http://www.w3schools.com">This is a link</a>

Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style

quotes are also allowed. Attribute names and attribute values are case-insensitive. Below is a list of some attributes that

are standard for most HTML elements:

Attribute Value Description

class classname Specifies a classname for an element

id id Specifies a unique id for an element

style style_definition Specifies an inline style for an element

title tooltip_text Specifies extra information about an element (displayed as a tool

tip)

Common HTML Elements

HTML Headings

Headings are defined with the <h1> to <h6> tags.

<h1> defines the largest heading. <h6> defines the smallest heading.

Example

<h1>This is a heading</h1>



Browsers automatically add an empty line before and after a heading. H1 headings should be used as main headings,

followed by H2 headings, then the less important H3 headings, and so on.

Use pre to retain format of text and display using monospace font

HTML Lines

The <hr /> tag creates a horizontal line in an HTML page. The hr element can be used to separate content:

Example

<p>This is a paragraph</p>

<hr />


<hr />


HTML Comments

Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored

by the browser and are not displayed. Comments are written like this:

Example



HTML Paragraphs

HTML documents are divided into paragraphs.

Example


<p>This is another paragraph</p>

HTML Line Breaks

Use the <br> or <br /> tag if you want a line break (a new line) without starting a new paragraph. The <br /> element

is an empty HTML element. It has no end tag. Even if <br> works in all browsers, writing <br /> instead is more future

proof.

Example

<p>This is<br />a para<br />graph with line breaks</p>

HTML Text Formatting Tags

Tag Description

<b> Defines bold text

<big> Defines big text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines small text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<div> Element tag

•Useful for dividing parts of the page into sections.

•Creates a “box”with the following attributes:

–margin

–padding

–border

–height

–width

<span> Element tag

•Useful for applying style to text within another HTML element.

•Use SPARINGLY–unlike <h1> or <p>, <span> has no semantic meaning.

•Remember, HTML is for content and HTML tags are for describing that content to non-human or visually-impaired

readers. <span> is just used to make things “pretty.

Meta Tag

� HTML interacts with the search engines through using meta tag

HTML Links

Links are found in nearly all Web pages. Links allow users to click their way from page to page.

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new

section within the current document. When you move the cursor over a link in a Web page, the arrow will turn into a

little hand. Links are specified in HTML using the <a> tag.

The <a> tag can be used in two ways:

1. To create a link to another document, by using the href attribute

2. To create a bookmark inside a document, by using the name attribute

HTML Link Syntax

The HTML code for a link is simple. It looks like this: <a href="url">Link text</a>

The href attribute specifies the destination of a link.

Example

<a href="http://www.billabongschools.com/">Visit Billabong international schools</a>

which will display like this: Visit Billabong international schools Clicking on this hyperlink will send the user to Billabong

international schools ' homepage. The "Link text" doesn't have to be text. You can link from an image or any other

HTML element

HTML Links - The target attribute

The target attribute specifies where to open the linked document. The example below will open the linked document in

a new browser window:

Example

<a href=http://www.billabongschools/ target="_blank"> Visit Billabong international schools!</a>

HTML Links - The name attribute

The name attribute specifies the name of an anchor. The name attribute is used to create a bookmark inside an HTML

document. Bookmarks are not displayed in any special way. They are invisible to the reader.

Example

A named anchor inside an HTML document:

<a name="tips">Useful Tips Section</a>

HTML Images

HTML The <img> Tag and the Src Attribute In HTML, images are defined with the <img> tag. The <img> tag is empty,

which means that it contains attributes only, and has no closing tag. To display an image on a page, you need to use

the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.

Syntax for defining an image:

<img src="url" alt="some_text"/>

The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory

on "www.ex3.com" has the URL: http://www.ex3.com/images/boat.gif.

The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two

paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

HTML The Alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The value of the alt

attribute is an author-defined text:

<img src="boat.gif" alt="Big Boat" />

The alt attribute provides alternative information for an image if a user for some reason cannot view it.

HTML Tables

Used to organize data into rows and columns. Tables are defined with the <table> tag. A table is divided into rows (with

the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the

content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

The HTML code for the construction of above table is shown below:

<table border = "1" width = "40%" align = left>

<caption><strong>Price of Fruit</strong></caption>

<thead>

<tr> 

<th>Fruit</th> 

<th>Price</th>

</tr>

</thead>

<tbody>

<tr>

<td>Apple</td> 

<td>$0.25</td>

</tr>

<tr>

<td>Orange</td>

<td>$0.50</td>

</tr>

<tr>

<td>Banana</td>

<td>$1.00</td>

</tr>

<tr>

<td>Pineapple</td>

<td>$2.00</td>

</tr>

</tbody>

<tfoot>

<tr>

<th>Total</th> <!—the use of th here defines the content of header or footer cells �

<th>$3.75</th>

</tr>

</tfoot>

</table>

Some more examples:

<table border="1">

<tr>

<td>row 1, cell 1</td>


</tr>

<tr>



</tr>

</table>

The HTML code above looks in a browser:

row 1, cell 1 row 1, cell 2


HTML Table Headers

Header information in a table are defined with the <th> tag. The text in a th element will be bold and centered.

<table border="1">

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>



</tr>

<tr>



</tr>

</table>


Header 1 Header 2



HTML Tables and the Border Attribute

If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but

most of the time, we want the borders to show.

To display a table with borders, specify the border attribute:

<table border="1">

<tr>

<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

</tr>

</table>

Col span and Row span in Table

colspan and rowspan allow merging columns/rows

<colspan=“number”>

data cell spans more than one column

<rowspan=“number”>

data cell spans more than one row

Example:

<table border=“1” width=“60%”>

<caption> Average Grades </caption>

<tr>

<th colspan=“4”> Report </th>

</tr>

<tr>

<th> </th> <th> 2000 </th> <th> 2001 </th>

<th> 2002 </th>

</tr>

<tr>

<td> Maths </td> <td> A </td> <td rowspan=“2” valign=“center”> B </td><td>C</td>

</tr>

<tr>

<td> English </td> <td> C </td> <td> A </td>

</tr>

</table>


Cell Padding and Spacing

With the cellpadding and cellspacing attributes you will be able to adjust the white space on your tables. Spacing defines

the width of the border, while padding represents the distance between cell borders and the content within. Color has

been added to the table to emphasize these attributes.

HTML Code:

<table border="1" cellspacing="10"

bgcolor="rgb(0,255,0)">

<tr>

<th>Column 1</th>

<th>Column 2</th>

</tr>

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


</table>

Cellspacing and Padding:

Column 1 Column 2

Row 1 Cell 1 Row 1 Cell 2


And now we will change the cellpadding of the table and remove the cellspacing from the previous example.

HTML Code:

<table border="1" cellpadding="10"

bgcolor="rgb(0,255,0)">

<tr>

<th>Column 1</th>

<th>Column 2</th>

</tr>



</table>

Cell Pads:

Column 1 Column 2



The value you specify for padding and spacing is interpreted by the browser as a pixel values. So a value of 10 is simply

10 pixels wide. Most attributes that use numeric values for their measurements use pixels.

HTML Table Tags

Tag Description

<table> Defines a table

<th> Defines a table header

<tr> Defines a table row

<td> Defines a table cell

<caption> Defines a table caption

<colgroup> Defines a group of columns in a table, for formatting

<col /> Defines attribute values for one or more columns in a table

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

Nesting Elements

� If one element is nested within another element, then the content of the inner element is also content of the

outer element

� XHTML requires that elements be properly nested. The following code is not a valid code

� Most HTML elements are either block or inline

� Block element: browser automatically generates line breaks before and after the element content

� Ex: p,div

� Inline element: element content is added to the “flow”

� Ex: span, tt, strong, a

� Syntactic rules for nesting:

� Children of body tags must be blocks

� Blocks can contain inline elements

� Inline elements cannot contain blocks

Absolute URL

The word absolute, in English, means "not dependent on anything else". It also means “a complete and free from doubt".

When you use an absolute URL, you point directly to a file. Hence, an absolute URL specifies the exact location of a

file/directory on the internet. It also follows that each absolute URL is unique, which means that if two URLs are

identical, they point to the same file.

The general syntax of absolute URLs is the following:

scheme:// host:port/path/filename

For example:

http://www.webdevelopersnotes.com/images/email.gif specifies an image file email.gif located in the images directory,

under www.webdevelopersnotes.com domain name.

Similarly, the absolute URL of the document you are viewing is http://www.webdevelopersnotes.com/ design/

relative_and_absolute_urls.php3 which is a page in the directory called design on this web site.

Relative URL’s

A relative URL points to a file/directory in relation to the present file/directory.

It does not begin with a scheme part.

A situation: http://www.webdevelopersnotes.com/images/email.gif

http://www.webdevelopersnotes.com/ design/ relative_and_absolute_urls.php3

Look at the two URL above. We want to display the image file email.gif stored in the images directory of

www.webdevelopersnotes.com domain on this relative_and_absolute_urls.php3 page which is stored in the design

directory page of the same domain.

There are two ways to do this

Using an Absolute URL in an <img> tag

<img src="http://www.webdevelopersnotes.com/images/email.gif"width="..." height="..." />

Using a Relative URL in an <IMG> tag

<img src="../images/email.gif" width="..." height="..." />

How it works?

Now to access email.gif file from relative_and_absolute_urls.php3 page using a relative URL we put ../images/email.gif in

the SRC attribute. We, thus, instruct the browser to first go one level up (i.e. to the document root) and then move to

the images directory and pick up the file email.gif.

The two peroids (..) instruct the server to remove design/ relative_and_absolute_urls.php3 from the base URL and then

enters /images/email.gif and finally includes the image.

In general, a string that is consistent with the URL path syntax given earlier is known as relative URL. It is a shorthand of

absolute URL. The following table shows the different form of relative URL

Different form of

Relative URLs

d/e.html

../h/i.html

../f.html

/j.html

../../g.html

/k/l.html

If a relative URL begins with the slash /, it is interpreted as relative to the server root. If a relative URL contains the

special notation .., it means that one hierarchic part is removed from the URL which is similar to cd.. command

Base URL

The base URL is by default the URL of the document itself

Conversion from Relative URL to absolute URL

- a base URL is used for that

Assume a base URL of a document c.html is http://www.example.org/a/b/c.html. The following table illustrates the

conversion from relative to absolute url using base url.

Relative URL Absolute URL

d/e.html http://www.example.org/a/b/d/e.html

../f.html http://www.example.org/a/f.html

../../g.html http://www.example.org/g.html

../h/i.html http://www.example.org/a/h/i.html

/j.html http://www.example.org/j.html

/k/l.html http://www.example.org/k/l.html

Which URL type to use - Absolute or Relative?

A relative URL is preferred to use

It helps in web site maintenance

Also, it's easy to transfer a web site from one domain name to another. If you had used absolute URLs in all links and

SRC attributes, you'd have a difficult time updating each link on each page. With the use of relative URLs you have no

such problems.

Also, relative URLs would be shorter than absolute URLs and hence the file size of the web page would reduce

Web forms

� A form element is inserted into a web page by the <form> tag. The syntax:

<form method = “value1” action = “value2”> … </form>

� Attributes:

– method = “post” or “get”

� Indicates the way the Web server will organize and send you the form output

� post: causes changes to server data, e.g., update a database

� get: does not cause any changes in server-side data, e.g., make a database request

– action = “”

� Specifies the URL. When the user submits the form, the values entered in the form should be

sent to script that in the url

For example,

Form Controls

• Elements (controls) inside a form are introduced by the <input> tag

• <input type=“” name=“” value=“”>

– type=“element name” name=“variable name”

value=“value that sends to the server”

Example:

<input type =“text” name=“” value =“” size=“25” >

Text Fields

<input type="text" /> defines a one-line input field that a user can enter text into:

<form>

First name: <input type="text" name="firstname" /><br />

Last name: <input type="text" name="lastname" />

</form>

How the HTML code above looks in a browser:

First name:

Last name:

The default width of a text field is 20 characters.

Password Field

<input type="password" /> defines a password field:

<form>

Password: <input type="password" name="pwd" />

</form>

HTML code above looks in a browser:

Password:

The characters in a password field are masked shown as asterisks or circles

Radio Buttons

<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE one of a limited number of

choices:

<form>

<input type="radio" name="sex" value="male" /> Male<br />

<input type="radio" name="sex" value="female" /> Female

</form>

HTML code above looks in a browser:

Male

Female

Checkboxes

<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number

of choices.

*********

Submit Button

<input type="submit" /> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the page specified in the form's action

attribute. The file defined in the action attribute usually does something with the received input:

<form name="input" action="html_form_action.asp" method="get">

Username: <input type="text" name="user" />

<input type="submit" value="Submit" />

</form>

How the HTML code above looks in a browser:

Username:

If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a

page called "html_form_action.asp". The page will show you the received input

Form Controls: Label, hidden, text, submit button, reset button

Submit

Form control: Select

Form control: Text Area

For example,

Output will be:

From control: Menu

Output will be

HTML Form Tags

Tag Description

<form> Defines an HTML form for user input

<input /> Defines an input control

<textarea> Defines a multi-line text input control

<label> Defines a label for an input element

<fieldset> Defines a border around elements in a form

<legend> Defines a caption for a fieldset element

<select> Defines a select list (drop-down list)

<optgroup> Defines a group of related options in a select list

<option> Defines an option in a select list

<button> Defines a push button

HTML Frames

HTML frames allow authors to present documents in multiple views, which may be independent windows or

subwindows. Multiple views offer designers a way to keep certain information visible, while other views are scrolled or

replaced. For example, within the same window, one frame might display a static banner, a second a navigation menu,

and a third the main document that can be scrolled through or replaced by navigating in the second frame.

Here is a simple frame document:

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

"http://www.w3.org/TR/html4/frameset.dtd">

<HTML>

<HEAD>

<TITLE>A simple frameset document</TITLE>

</HEAD>

<FRAMESET cols="20%, 80%">

<FRAMESET rows="100, 200">

<FRAME src="contents_of_frame1.html">

<FRAME src="contents_of_frame2.gif">

</FRAMESET>


<NOFRAMES>

<P>This frameset document contains:

<UL>

<LI><A href="contents_of_frame1.html">Some neat contents</A>

<LI><IMG src="contents_of_frame2.gif" alt="A neat image">

<LI><A href="contents_of_frame3.html">Some other neat contents</A>

</UL>

</NOFRAMES>

</FRAMESET>

</HTML>

that might create a frame layout something like this:

With frames, you can display more than one HTML document in the same browser window. Each HTML document is

called a frame, and each frame is independent of the others.

The disadvantages of using frames are:

• Frames are not expected to be supported in future versions of HTML

• Frames are difficult to use. (Printing the entire page is difficult).

• The web developer must keep track of more HTML documents

The HTML frameset Element

The frameset element holds one or more frame elements. Each frame element can hold a separate document.

The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW MUCH

percentage/pixels of space will occupy each of them.

The HTML frame Element

The <frame> tag defines one particular window (frame) within a frameset.

In the example below we have a frameset with two columns.

The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the

browser window. The document "frame_a.htm" is put into the first column, and the document "frame_b.htm" is put into

the second column:

<frameset cols="25%,75%">

<frame src="frame_a.htm" />

<frame src="frame_b.htm" />

</frameset>

The frameset column size can also be set in pixels (cols="200,500"), and one of the columns can be set to use the

remaining space, with an asterisk (cols="25%,*").

HTML Frame Tags

Tag Description

<frameset> Defines a set of frames

<frame /> Defines a sub window (a frame)

<noframes> Defines a noframe section for browsers that do not handle frames

Setting the initial contents of a frame

The src attribute specifies the initial document the frame will contain.

The following example HTML document:

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

"http://www.w3.org/TR/html4/frameset.dtd">

<HTML>

<HEAD>

<TITLE>A frameset document</TITLE>

</HEAD>

<FRAMESET cols="33%,33%,33%">

<FRAMESET rows="*,200">


<FRAME src="contents_of_frame2.gif">

</FRAMESET>



</FRAMESET>

</HTML>

should create a frame layout something like this:

and cause the user agent to load each file into a separate view. The contents of a frame must not be in the same

document as the frame's definition.

Navigational frame

The navigation frame contains a list of links with the second frame as the target. The file called "tryhtml_contents.htm"

contains three links. The source code of the links:

<a href ="frame_a.htm" target ="showframe">Frame a</a><br>

<a href ="frame_b.htm" target ="showframe">Frame b</a><br>

<a href ="frame_c.htm" target ="showframe">Frame c</a>

The second frame will show the linked document.

Unit II

Style Sheets: CSS

CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements.

Every element type as well as every occurance of a specific element within that type can be declared an unique style,

e.g. margins, positioning, color or size.

Style Sheets are templates, very similar to templates in desktop publishing applications, containing a collection of rules

declared to various selectors (elements).

Style Sheet Languages

• Cascading Style Sheets (CSS)

– Applies to (X)HTML as well as XML documents in general

• Extensible Stylesheet Language (XSL)

– Often used to transform one XML document to another form, but can also add style

- A styled HTML document

produced by the style sheet style1.css:

Why CSS?

•Allows for much richer document appearances than HTML.

•Reduce workload by centralizing commands for visual appearance instead of scattered throughout the HTML doc.

•Use same style on multiple pages.

•Reduce page download size.

Use HTML for content; CSS for Presentation.

Types

Inline CSS

The first way to use CSS on your website is known as Inline CSS and is used inside the html tag directly and only affects

what is inside that element. This is a useful method when you are doing something like adding a Drop Cap or

something which will only be used once or twice however this isn't ideal if you are working on a large site.

Here's an example of an inline CSS tag:

<p style="background: blue; color: white;">

Here's our nice white text on a blue background.

</p>

Internal Style Sheet

The second way to utilize CSS on your site is the Internal Style Sheet which is placed in head of your page between the

<head>and</head> tags. You might want to use this when you only have one page on your website or you need a

page to look differently than the other pages which use your main CSS External Style sheet You could then use your

Inline Style Sheets to overwrite anything on a line by line basis should you need to. Remember, the Inline CSS takes

priority over the others.

Here is an example of an internal style sheet:

<style type="text/css">

body {

font-family: Tahoma, Verdana, Arial;

font-size: 12px;

color: #FFFFFF;

}

</style>

External Style Sheet

The THIRD method is the External Style Sheet. This is a document that lives outside of your web page. By placing some

code in the head of your web page between the <head>and</head> tags, you tell your web page to look for and use

the instructions from that file to interpret how to display your page.

This method is useful when you have two or more pages and will allow you to control the look across all of your pages

maintaining a consistent look throughout.

Here is an example of an external style sheet on a page:

<link rel="Style sheet" type="text/css" href="css/main.css" />

The above statement simply tells the browser to pull the style sheet in from an external location.

Using an external style sheet changes to the HTML document format can be done easily. one alteration to one file is

enough to change the entire site design.

@import (imported Style Sheet)

Imported Style Sheet is a sheet that can be imported to (combined with) another sheet. This allows creating one main

sheet containing declarations that apply to the whole site and partial sheets containing declarations that apply to

specific elements (or documents) that may require additional styling. By importing partial sheets to the main sheet a

number of sources can be combined into one.

To import a style sheet or style sheets include the @import notation or notations in the STYLE element. The @import

notations must come before any other declaration. If more than one sheet is imported they will cascade in order they

are imported - the last imported sheet will override the next last; the next last will override the second last, and so on. If

the imported style is in conflict with the rules declared in the main sheet then it will be overridden.

<LINK REL=STYLESHEET HREF="main.css" TYPE="text/css">

<STYLE TYPE="text=css">



</STYLE>

Alternate Style Sheet

Alternate Style Sheet is a sheet defining an alternate style to be used in place of style(s) declared as persistent and/or

preferred .

Persistent style is a default style that applies when style sheets are enabled but can disabled in favor of an alternate

style, e.g.:

<LINK REL=Stylesheet HREF="style.css" TYPE="text/css">

Preferred style is a default style that applies automatically and is declared by setting the TITLE attribute to the LINK

element. There can only be one preferred style, e.g.:

<LINK REL=Stylesheet HREF="style2.css" TYPE="text/css" TITLE="appropriate style description">

Alternate style gives an user the choice of selecting an alternative style - a very convenient way of specifying a media

dependent style. Note: Each group of alternate styles must have unique TITLE, e.g.:

<LINK REL="Alternate Stylesheet" HREF="style3.css" TYPE="text/css" TITLE="appropriate style description"

MEDIA=screen>

<LINK REL="Alternate Stylesheet" HREF="style4.css" TYPE="text/css" TITLE="appropriate style description"

MEDIA=print>

Combine multiple sheets into one

To combine multiple/partial style sheets into one set the TITLE attribute taking one and the same value to the LINK

element. The combined style will apply as a preferred style, e.g.:

<LINK REL=Stylesheet HREF="default.css" TITLE="combined">

<LINK REL=Stylesheet HREF="fonts.css" TITLE="combined">

<LINK REL=Stylesheet HREF="tables.css" TITLE="combined">

CSS Ruleset

There are two types of CSS rules: ruleset and at-rule. Ruleset identifies selector or selectors and declares style which is

to be attached to that selector or selectors. For example P {text-indent: 10pt} is a CSS rule. CSS rulesets consist of two

parts: selector, e.g. P and declaration, e.g. {text-indent: 10pt}.

P {text-indent: 10pt} - CSS rule (ruleset)

{text-indent: 10pt} - CSS declaration

text-indent - CSS property

10pt - CSS value

CSS Rule

-Parts of a style rule (or statement)

-Types of selector strings

• Type Selectors:

• Universal selectors:

• ID selectors:

• Class selectors

• Pseudo Class selectors

• Descendent selectors

Where rule applies to li element that is part of the content of an ol element that is part o

the content of a ul element

At-rule

is a second form of rule

-Reads style rules from specified URL

– Must appear at beginning of style sheet

Style Sheets and HTML

Style sheets referenced by <link> element are called external style sheets

Style sheets can be embedded directly in HTML document using <style> element

CSS Rule Cascade

What if more than one style declaration applies to a property of an element?

• The CSS rule cascade determines which style rule’s declaration applies

Rule cascading

Let us consider a style sheet that contains the following rules,

..........

* { font-weight:bold;}

.............

#p3 { background-color:red;}

..........

In such a case, both the rules can be applied to an element with id attribute value p3. That is, if multiple rules apply to

an element, and those rules provide declarations for different properties, then all of the declarations are applied to the

element. But if the rule,

#p3 {font-weight:12pt;}

also appears in the same style sheet for the document, then a conflict will occur and it is important to know which rule

will be applied to the font-weight property of the p3 element. In such situation, the browser will apply a ‘rule cascading’

in order to choose the appropriate declaration from multiple declarations.

Rule cascading: is a multistage sorting process that selects a single declaration from the multiple declarations and that

will apply the property value.

The following rules are used to determine which style rules will apply to a selector, given that it has more than one style

in conflict for that selector.

Step 1:

Gather all rules that apply to the selector

Find all the style declarations that implicitly or explicitly apply to the element or selector

Step 2:

Sort by origin and importance

This is the primary Cascade sorting method. The origin of the declaration is one of the following:

User Agent: It refers any one of the browser software. Style rules occurring in the browser is a default style

sheet that has the lowest precedence. In Mozilla 1.4, the menu View | Use Style offers a default style sheet.

User: it refers a person who is viewing the document. In Mozilla 1.4, the menu Edit|Preferences|Appearence

allows the user to provide a style sheet. Such user style sheets take precedence over browser style sheets.

Author: It refers a person who wrote the HTML document and if the style sheet is a kind of external or

embedded style sheet then the origin of the declaration is from Author which takes precedence over both of

these.

A style rule with higher precedence will win over an identical style rule with lower precedence as shown below:

Lowest

precedence <================>

Highest

precedence

Origin(Ownerships): Browser

Defaults

User’s

Style Sheet

Author's

Style Sheet

Specification

Method:

Linked

Style Sheet

Embedded

Style Sheet

Inline

Styles

Element

Selector

Specificity:

Contextual

Selector

Depth

CLASS ID

'important'

Style sheet designers can increase the weights of their declarations using ‘important’

p { font-size: 12pt ! important; font-style: italic }

In the example above, the first declaration has increased weight, while the last declaration has normal weight.

• A user rule with an important declaration will override an author rule with a normal declaration.

• An author rule with an important declaration will override a reader rule with an important declaration.

Step 3:

Sort by specificity of the CSS selector

More specific CSS selectors will override more general ones. To determine the "specificity" of a CSS selector, use

the following steps:

a) Count the number of ID selectors

b) Count the number of class and pseudo-class selectors.

c) Count the number of type selectors

Now concatenate these three numbers together to find the exact specificity of the selector. The selector with

the highest specificity number will be used.

Example:

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 */

LI.takenote {...} /* a=0 b=1 c=1 -> specificity = 11 */

UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity = 13 */

#p3 {...} /* a=1 b=0 c=0 -> specificity = 100 */

Step 4:

Sort by order specified

If two or more style rules have the same importance, origin and specificity, then the rule that is specified last

wins.

Style Inheritance

All selectors which are nested within selectors will inherit the property values assigned to the outer selector unless

otherwise modified. For example,

<head>

<style type="text/css">

body { font-weight : bold; }

li { font-style : italic; }

p { font-size : larger; }

span { font-weight : normal; }

</style>

</head>

<body>

<ul>

<li> List item outside and <span> inside </span> a span.

<p>

Embedded paragraph outside and <span> inside</span> a span.

</p>

</li>

<ul>

</body>

The word “inside” appears with a normal font weight while all other text is bold spaced. The first <span> will inherit the

italic property from its parent <li> element, while the second inherits the larger font size property from its parent <p>

element and italic property from its grandparent element <li>

Similarly the <p> element inherits the italic property from its parent element <li>.

There are some cases where the inner selector does not inherit the surrounding selector's values, but these should

stand out logically. For example,

Body { margin-top: 15px;}

P{ margin-top: 15px; }

property is not inherited; naturally, a paragraph would not have the same top margin as the document body.

Inline, block, parent, children elements

Inline elements: Elements which do not have line breaks. Can occur in block elements or other inline elements, cannot

contain block elements.

Inline elements in HTML 3.2; EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, TT, I, B, U, STRIKE, BIG, SMALL, SUB, SUP,

A, IMG, APPLET, FONT, BASEFONT, BR, SCRIPT, MAP, INPUT, SELECT, TEXTAREA

Block: Elements which do have line breaks. May occur in other block elements, cannot occur in inline elements, may

contain both block and inline elements.

Block elements in HTML 3.2; H1, H2, H3, H4, H5, H6, ADDRESS, P, DL, DT, DD, UL, OL, DIR, MENU, LI, DIV, CENTER,

BLOCKQUOTE, PRE, HR, ISINDEX, TABLE, FORM.

Parents and children: Elements which either contain (parents) or are in the content of (children) other elements. For

example,

<P>text<STRONG>text</STRONG>text</P>.

P is a parent of STRONG. STRONG is a child of P. If not specified otherwise, children will inherit parent's properties

CSS Properties

Property is a stylistic parameter (attribute) that can be influenced through CSS, e.g. FONT or WIDTH. There must always

be a corresponding value or values set to each property, e.g. font: bold or font: bold san-serif.

Shorthand property

Shorthand property is a property made up of individual properties that have a common "addressee". For example

properties: font-weight, font-style, font-variant, font-size, font-family, refer to the font. To reduce the size of style sheets

and also save some keystrokes as well as bandwidth they can all be specified as one shorthand property font, e.g.:

H1 {font-weight: bold;

font-style: italic;

font-variant: small-caps;

font-size: 160%;

font-family: serif}

can be all shorthanded to a space separated list:

H1 {font: bold italic small-caps 160% serif}

Note: To make things even simpler the line-height property can be specified together with the font-size property:

H1 {font: bold italic small-caps 160%/170% serif}

Value

Value is a 'physical' characteristic of the property. Property declares what should be formatted, e.g. FONT while value

suggests how the property should be formatted, e.g. 12pt. By setting the value 12pt to the property FONT it is

suggested that the formatted text be displayed in a 12 point font. There must always be a corresponding property to

each value or set of values.

H1 {font: bold 180%}

In the example above the H1 selector is declared the FONT property which in its turn is declared the values BOLD and

180%.

The values suggesting alternatives are specified in a comma separated list, e.g.

H1 {font-family: font1, font2}

Text Properties

General Comments: These properties let you control basic text formatting. Some of these can also be applied to

non-text elements.

Property Description Values Example

text-

transform

Set the case of the text. capitalize

uppercase

lowercase

none

p {text-transform: capitalize}

Capitalizes the first character of

each word in the paragraph.

H2 {text-transform: uppercase}

Displays all level two headlines

in all uppercase characters.

vertical-

align

Aligns the element vertically to the baseline. Can be

very useful with images.

baseline

sub

super

top

text-top

middle

bottom

text-

bottom

img {vertical-align: middle}

Places the image in the middle

of the baseline.

text-align Aligns the element horizontally across the page or

within division

left

right

center

justify

H3 {text-align: center}

Centers all level three headlines.

text-indent Sets the amount of indent for the first line of a text

block

CSS length

%

p {text-indent: 2em}

Indents the first line of the

paragraph 2 em spaces.

line-height Also known as "leading" or "line space." Specifies

the distance between baselines of consecutive lines

of text.

normal

CSS length

%

p {line-height: 12pt}

Sets 12 points of space from

baseline to baseline in

paragraph.

word-

spacing

Lets you control the space between words. normal

CSS length

p {word-spacing:1pt}

Puts an extra 1 point of space

between each word in the

paragraph

letter-

spacing

Lets you control the space between letters. normal

CSS length

p {letter-spacing: 0}

Prevents any extra space from

being added between letters in a

paragraph.

text-

decoration

Sets underlining, overlining, strike-through, or blink

attributes for the element. Vendors may be adding

their own text decoration formats, as well.

underline

*overline

line-

through

*blink

none

H1 {text-decoration: blink}

Make all level one headlines

blink. We don't recommend that

you use blink at all

Font Properties

General Comments: These properties let you control basic font characteristics.


font-

family

Specifies the font family, or typeface, to use

for the element.

You can specify a series of names and the first

available font is used.

family name

generic

name:

serif

sans-serif

cursive

fantasy

monospace

p {font-family: futura, helvetica, arial,

sans-serif}

Display the paragraph in Futura, if

available. If not, try Helvetica, Arial, and

finally, any sans-serif display.

font-style Specifies the style of type to use for the

element.

normal

italic

oblique

H2 {font-family: futura, helvetica, arial;

font-style: italic}

Uses the italic variation of the typeface

for all level two headlines.

font-

variant

Lets you select the small caps style of the

typeface.

normal

small-caps

H2 {font-family: futura, helvetica, arial;

font-variant: small-caps}

Uses the small-caps variation of the

typeface for all level two headlines.

font-

weight

Lets you select the weight or boldness of the

font.

lighter

normal

bold

bolder

blockquote {font-weight: bold}

Makes the blockquote bold.

100

200

300

...

900

font-size Let you select the size of the type in the font.

Font size may be specified in absolute units or

relative to the "current" size.

CSS length

%

larger

smaller

xx-small

x-small

small

medium

large

x-large

xx-large

p{font-size: 12pt}

displays the paragraph in 12 point type.

H1 {font-size: 150%}

Displays all level one headlines at 150%

of their normal size.

Placement Properties (Properties associated with box model)

General Comments: These properties let you specify where an element gets placed within its "box."


margin-

top

Places the top margin of the element; you can use

negative values.

**NOTE: For some reason, IE4.0 treats this style

command like Netscape 4.0 treats the padding

properties, i.e. it will add space to the top of every

cellif done with a table. With <div> the property

works normally.

CSS length

%

auto

div {margin-top: 2em}

Displays the top margin of the

division 2 em spaces down the

page.

margin-

bottom

Places the bottom margin of the element; you can

use negative values.

**See the note for margin-top

CSS length

%

auto

div {margin-bottom: 10%}

Places the bottom margin of

the div element 10 percent

down the page and diplays the

element from the bottom up.

margin-

left

Places the left margin of the element; you can use

negative values.

CSS length

%

auto

div {margin-top: 6em}

Displays the left margin of the

division 6 em spaces from the

left of the page.

margin-

right

Places the right margin of the element; you can use

negative values.

CSS length

%

auto

div {margin-right: 1em}

Displays the right margin of

the division 1 em space from

the right edge of the page.

padding-

top

Inserts padding at the top of the element.

(Theoretically. We have only been able to make

padding-top along with its related properties, work

with tables.)

CSS length

%

auto

Table {padding-top: 12pt}

Inserts 12 points of space at

the top of every cell in the

table.

padding-

bottom

Inserts padding at the bottom of the element. CSS length

%

auto

Table {padding-bottom: 12pt}

Inserts 12 points of space at

the bottom of every cell in the

table.

padding-

left

Inserts padding along the left side of the element. CSS length

%

auto

Table {padding-left: 2em}

Inserts 2 em spaces at the left

margin of every cell in the

table.

padding-

right

Inserts padding along the right side of the element. CSS length

%

auto

Table {padding-right: 2em}

Inserts 2 em spaces at the right

margin of every cell in the

table.

border-

width

Sets the width of the element's border.

thin

medium

thick

none

div {border-width: thin}

Displays a thin border around

the division.

border-

style

Sets the style of the element's border. none

*dotted

*dashed

solid

double

groove

ridge

inset

outset

table {border-style: dashed}

Displays a dashed border

around the table.

border-

color

Sets the color of the element's border. color name

hex value

rgb(R%, G%, B%)

rgb(R, G, B)

table {border-color: red}

Displays a red border around

the table.

border

border-

top

border-

bottom

border-

left

border-

right

Sets the width, color, and style of the border

simultaneously

width value

style value

color value

table {border: thick double red}

Displays a thick, double, red

border around the table.

table {border-top: thin dashed

red}

Diplays a thin, dashed, red

border at the top of the table.

height

Sets the height of the element.

**Note: We have had limited success (with

Netscape; no success in IE3.0) applying width and

height to <div> tags, and no success with images.

CSS length img.button {height: 70px}

Sets all button class images to

be 70 pixels high.

width

Sets the width of the element.

** See note for height.

CSS length img.button {width: 100px}

Sets all button class images to

be 100 pixels wide.

float Places the element to the left or right and flows text

around it.

right

left

none

img.button {float: left}

Places a button class image to

the left margin and flows text

around it.

Color and Background Properties

General Comments: These properties let you control the color and background of elements.


color

Sets the color of the

element.

color name

hex value

rgb(R%, G%, B%)

rgb(R, G, B)

p {color: red}

Displays the paragraph text in red.

background-

color

Sets the color for the

background of the

element.

color name

hex value

rgb(R%, G%, B%)

rgb(R, G, B)

H1 {background-color: green}

Displays the background area of all level one

headlines in green. (The effect is like having a green

bar behind the headline.)

background-

image

Specifies an image to

use for the

background of an

element.

url(URLname) blockquote {background-image:

url(..images/sand.gif)}

Displays the image "sand.gif" in the background

area of the blockquote.

background-

repeat

Specifies how and if a

background image is

repeated.

repeat

repeat-x

repeat-y

no-repeat

blockquote {background-image:

url(..images/sand.gif); background-repeat: repeat}

Displays the image "sand.gif" in the background

area of the blockquote and repeats the image

vertically and horizontally to fill the entire

background area.

background-

position

Sets the initial position

of the background

image.

vertical %

horizontal %

top

center

bottom

left

center

right

body {background-image: url(..images/sand.gif);

background position: center center}

Centers the background image vertically and

horizontally on the initial body screen.

Documents

49147180 IT 2353 Web Technology Notes