1 - Introduction

Concept of WWW.
∙ WWW is stands for World Wide Web.
∙ The World Wide Web (WWW) is a global information medium which users can read and write via
computer connected to the internet.
∙ The Web, or World Wide Web, is basically a system of Internet servers that support specially
formatted documents. The documents are formatted in a markup language called HTML
(Hypertext Markup Language) that supports links to other documents, as well as graphics,
audio, and video files.
∙ In short, World Wide Web (WWW) is collection of text pages, digital photographs, music files,
videos, and animations you can access over the Internet.
∙ Web pages are primarily text documents formatted and annotated with Hypertext Markup
Language (HTML). In addition to formatted text, web pages may contain images, video, and
software components that are rendered in the user's web browser as coherent pages of
multimedia content.
∙ The terms Internet and World Wide Web are often used without much distinction. However, the
two are not the same.
∙ The Internet is a global system of interconnected computer networks. In contrast, the World
Wide Web is one of the services transferred over these networks. It is a collection of text
documents and other resources, linked by hyperlinks and URLs, usually accessed by web
browsers, from web servers.
∙ There are several applications called Web browsers that make it easy to access the World Wide
Web; For example: Firefox ,Microsoft's Internet Explorer, Chrome Etc. ∙ Users access the World-
Wide Web facilities via a client called a browser, which provides transparent access to the WWW
servers. User can access WWW via two way such us :
History of WWW:
∙ Tim Berners-Lee, in 1980 was investigating how computer could store information with random
links. In 1989, while working at European Particle Physics Laboratory, he proposed to idea of
global hypertext space in which any network-accessible information could be referred to by
single “universal Document Identifier”. After that in 1990, this idea expanded with further
program and knows as World Wide Web.
Internet and WWW
∙ The Internet, linking your computer to other computers around the world, is a way of
transporting content. The Web is software that lets you use that content…or contribute your
own. The Web, running on the mostly invisible Internet, is what you see and click on in your
computer’s browser.
What is The Internet?
∙ The Internet is a massive network of networks, a networking infrastructure. It connects millions
of computers together globally, forming a network in which any computer can communicate
with any other computer as long as they are both connected to the Internet. Information that
travels over the Internet does so via a variety of languages known as protocols. So we can says
that Internet is network of computer which connect to together and any computer
communicate with any other computer.
 What is The Web (World Wide Web)?
∙ The World Wide Web, or simply Web, is a way of accessing information over the medium of the
Internet. It is an information-sharing model that is built on top of the Internet. ∙ The Web uses the
HTTP protocol, only one of the languages spoken over the Internet, to transmit data. The Web also
utilizes browsers, such as Internet Explorer or Firefox, to access Web documents called Web pages
that are linked to each other via hyperlinks. Web documents also contain graphics, sounds, text
and video.
Different between Internet and WWW
∙ The Web is a Portion of The Internet. The Web is just one of the ways that information can be
disseminated over the Internet. The Internet, not the Web, is also used for email, which relies
on SMTP, Usenet news groups, instant messaging and FTP. So the Web is just a portion of the
Internet.
HTTP Protocol: Request and Response.
∙ HTTP stands for Hypertext Transfer Protocol.
∙ HTTP is based on the client-server architecture model and a stateless request/response protocol
that operates by exchanging messages across a reliable TCP/IP connection. ∙ An HTTP "client" is a
program (Web browser) that establishes a connection to a server for the purpose of sending one
or more HTTP request messages. An HTTP "server" is a program (generally a web server like
Apache Web Server) that accepts connections in order to serve HTTP requests by sending HTTP
response messages.
∙ Errors on the Internet can be quite frustrating — especially if you do not know the difference
between a 404 error and a 502 error. These error messages, also called HTTP status codes are
response codes given by Web servers and help identify the cause of the problem.
∙ For example, "404 File Not Found" is a common HTTP status code. It means the Web server
cannot find the file you requested. The file -- the webpage or other document you try to load in
your Web browser has either been moved or deleted, or you entered the wrong URL or
document name.
∙ HTTP is a stateless protocol means the HTTP Server doesn't maintain the contextual information
about the clients communicating with it and hence we need to maintain sessions in case we
need that feature for our Web-applications
∙ HTTP header fields provide required information about the request or response, or about the
object sent in the message body. There are four types of HTTP message headers: o General-
header:
These header fields have general applicability for both request and response
messages. o Request-header:
These header fields have applicability only for request messages.
o Response-header:
These header fields have applicability only for response messages.
o Entity-header:
These header fields define Meta information about the entity-body.

Prof. Arjun Bala, CE Department

| 2160708 – Web Technology
2

∙ As mentioned, whenever you enter a URL in the address box of the browser, the browser
translates the URL into a request message according to the specified protocol; and sends the
 request message to the server.
∙ For example, the browser translated the URL http://www.test101.com/doc/index.html into the
following request message:

GET /docs/index.html HTTP/1.1

Host: www.test101.com
Accept: image/gif, image/jpeg, */*
Accept-Language: en-us
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)

Here,Step by step communication between client and server mention into followingfigure.

Fig
1: Communication between HTTP Client and HTTP Server
Web Browser and Web Server.
∙ Web server and web browser are the terms which are commonly used for website. The basic
purpose of both is to develop a platform for internet web directory. So that any users can
anytime access any kind of website. Major difference between them is on their function and
how they perform their functions. Check for the detail of both topics before understanding the
differences between them.

Web Browser
∙ Web browser is a client, program, software or tool through which we sent HTTP request to web
server. The main purpose of web browser is to locate the content on the World Wide Web and
display in the shape of web page, image, audio or video form.
We can also call it a client server because it contacts the web server for desired information. If the
requested data is available in the web server data then it will send back the requested
information again via web browser.
∙ Microsoft Internet Explorer, Mozilla Firefox, Safari, Opera and Google Chrome are examples of
web browser and they are more advanced than earlier web browser because they are capable
to understand the HTML, JavaScript, AJAX, etc. Now days, web browser for mobiles are also
available, which are called micro browser.

Web Server
∙ Web server is a computer system, which provides the web pages via HTTP (Hypertext Transfer
Protocol). IP address and a domain name is essential for every web server.
∙ Whenever, you insert a URL or web address into your web browser, this sends request to the
 web address where domain name of your URL is already saved. Then this server collects the all
information of your web page and sends to browser, which you see in form of web page on
your browser.
∙ Lot of web server software is available in the market in shape of NCSA, Apache, Microsoft and
Netscape. Storing, processing and delivering web pages to clients are its main function. All the
communication between client (web browser) and server takes place via HTTP. ∙ Here, we can
easily understand concept of web browser and web server by following figure.

Fig 2: Communication between web Browser and Web Server

Feature of Web 2.0.

∙ Web 2.0 is term that was introduced in 2004 and refers to the second generation of the World
Wide Web.The term "2.0" comes from the software industry, where new versions of software
programs are labeled with an incremental version number.
∙ Some examples of features considered to be part of Web 2.0 are listed below: o
Blogs :
It also known as Web logs, these allow users to post thoughts and updates about their life on
the Web.
o Wikis:
Wikis - sites like Wikipedia and others enable users from around the world to add and update
online content.
o Social Networking:

Sites like Facebook and MySpace allow users to build and customize their own profile sand
communicate with friends.
o Web Application:
Web application is a broad range of new applications make it possible for users to run
programs directly in a Web browser.as Web logs, these allow users to post thoughts and
updates about their life on the Web.
o User Participation:
In traditional web the contents are solely provider by the web site owner or company, but in
web 2.0 the users participate in content sourcing. This is also known as Crowd sourcing.
Examples: Wikipedia & You Tube.
o Long Tail:
The traditional web was like a retail business the product is sold directly to user and the
revenue generated. But in web 2.0 the niche product is not sold directly but offered as a
service on demand basis and income is generated as monthly fee and pay per consumption.
o Rich User Experience :
Traditional web are built with HTML and CSS CGI and had been offered as a static page. On the
 other hand Web 2.0 uses AjaxAsynchronous JavaScript + XML) presenting dynamic, rich user
experience to users.
Example: Google Provided Google Maps and Google Suggest.
∙ Web 2.0 technologies provide a level user interaction that was not available before. Websites
have become much more dynamic and interconnected, producing "online communities" and
making it even easier to share information on the Web. Because most Web 2.0 features are
offered as free services, sites like Wikipedia and Facebook have grown at amazingly fast rates

Web Design Issues

Browser & Operating Systems

∙ Web pages are written using different HTML tags and viewed in browser window. ∙ The different
browsers and their versions greatly affect the way a page is rendered, as different browsers sometimes
interpret same HTML tag in a different way.
∙ Different versions of HTML also support different sets of tags.
∙ The support for different tags also varies across the different browsers and their versions. ∙ Same
browser may work slightly different on different operating system and hardware platform. ∙ To
make a web page portable, test it on different browsers on different operating systems.

Bandwidth and Cache

∙ Users have different connection speed, i.e. bandwidth, to access the Web sites. ∙ Connection speed
plays an important role in designing web pages, if user has low bandwidth connection and a web page
contains too many images, it takes more time to download. ∙ Generally, users have no patience to wait
for longer time than 10-15 seconds and move to other site without looking at contents of your web
page.
∙ Browser provides temporary memory called cache to store the graphics.
∙ When user gives the URL of the web page for the first time, HTML file together with all the graphics
files referred in a page is downloaded and displayed.

Display Resolution
∙ Display resolution is another important factor affecting the Web page design, as we do not have any
control on display resolution of the monitors on which user views our pages.
∙ Display or screen resolution is measured in terms of pixels and common resolutions are 800 X 600 and
1024 X 786.
∙ We have three choices for Web page design.
o Design a web page with fixed resolution.
o Make a flexible design using HTML table to fit into different resolution.
o If the page is displayed on a monitor with a higher resolution, the page is displayed on left
hand side and some part on the right-hand side remains blank. We can use centered design
to display page properly.
o (Not For Exam) Ideally we should use some frameworks for designing like Bootstrap/Material
design.

Look & Feel

∙ Look and feel of the website decides the overall appearance of the website.
∙ It includes all the design aspects such as
o Web site theme
o Web typography
o Graphics
o Visual structure
 o Navigation etc…

Page Layout and Linking

∙ Website contains of individual web pages that are linked together using various navigational links. ∙
Page layout defines the visual structure of the page and divides the page area into different parts to
present the information of varying importance.
∙ Page layout allows the designer to distribute the contents on a page such that visitor can view it easily
and find necessary details.

Locating Information
∙ Webpage is viewed on a computer screen and the screen can be divided into five major areas such as
center, top, right, bottom and left in this particular order.
∙ The first major area of importance in terms of users viewing pattern is the center, then top, right,
bottom and left in this particular order.

Making Design user-Centric

∙ It is very difficult for any Web designer to predict the exact behavior of the Web site users. ∙ However,
idea of general behavior of common user helps in making design of the Web site user centric.
∙ Users either scan the information on the web page to find the section of their interest or read the
information to get details.

Sitemap
∙ Many a times Web sites are too complex as there are a large number of sections and each section
contains many pages.
∙ It becomes difficult for visitors to quickly move from one part to other.
∙ Once the user selects a particular section and pages in that section, user gets confused about where
he/she is and where to go from there.
∙ To make it simple, keep your hierarchy of information to few levels or provide the navigation bar on
each page to jump directly to a particular section.

Tips for Effective Navigation.

∙ Navigation links are either text based, i.e. a word or a phrase is used as a link, or graphical, i.e. a
image, i.e. a icon or a logo is used as a link.
∙ Navigation links should be clear and meaningful.
∙ It should be consistent.
∙ Link should be understandable.
∙ Organize the links such that contents are grouped logically.
∙ Provide search link, if necessary, usually on top of the page. Use common links such as ‘about us’ or
‘Contact us’.
∙ Provide the way to return to first page.
∙ Provide the user with information regarding location
∙ Horizontal navigation bar can be provided on each page to directly jump to any section

HTML

What is HTML?
∙ Stands for Hypertext Markup Language.
 ∙ Most documents that appear on the World Wide Web were written in HTML.
∙ HTML is a markup language, not a programming language. In fact, the term HTML is an acronym that
stands for Hypertext Markup Language.
∙ We can apply this markup language to your pages to display text, images, sound and movie files, and
almost any other type of electronic information.
∙ We use the language to format documents and link them together, regardless of the type of computer
with which the file was originally created.

HTML Elements
∙ An element consists of three basic parts: an opening tag, the element's content, and finally, a closing
tag.
<p> - opening paragraph tag
Element Content - paragraph words
</p> - closing tag

∙ Every (web) page requires four critical elements: the html, head, title, and body elements.

1. <html> Element...</html>
o <html> begins and ends each and every web page.
o Its purpose is to encapsulate all the HTML code and describe the HTML document to the web
browser.
<html></html>

2. <head> Element
o The <head> element is "next" as they say. As long as it falls somewhere between your <html> tag
and your web page content (<body>).
o The head functions "behind the scenes." Tags placed within the head element are not directly
displayed by web browsers.
o We will be placing the <title> element here.
o Other elements used for scripting (JavaScript) and formatting (CSS) will eventually be introduced
and you will have to place them within your head element.
<html>
<head>
</head>
</html>

3. The <title> Element

o Place the <title> tag within the <head> element to title your page.
o The words you write between the opening and closing <title></title> tags will be displayed at the
top of a viewer's browser.
<html><head><title>My WebPage!</title></head></html>

4. The <body> Element

o The <body> element is where all content is placed. (Paragraphs, pictures, tables, etc).
o The body element will encapsulate all of your webpage's viewable content.
 <html>
<head><title>My WebPage!</title></head>
<body>
Hello World! All my content goes here!
</body>
</html>

HTML Tags
o A web browser reads an HTML document top to bottom, left to right.
o Each time the browser finds a tag, it is displayed accordingly (paragraphs look like paragraphs,
tables look like tables, etc).
o Tags have 3 major parts: opening tag(s), content(s), and closing tag(s).
o Recall that a completed tag is termed an element.

1. Paragraph Tag <p>

o The <p> tag defines a paragraph. Using this tag places a blank line above and below the text of
the paragraph.

<p>Avoid losing floppy disks with important school...</p>

<p>For instance, let's say you had a HUGE school...</p>

2. HTML - Headings 1:6

o A heading in HTML is just what we might expect, a title or subtitle.
o By placing text inside of <h1> (heading) tags, the text displays bold and the size of the text
depends on the number of heading (1-6).
o Headings are numbered 1-6, with 1 being the largest heading and 6 being the smallest.

<html><body>
<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3>
<h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6>
</body></html>

3. Line Breaks
o Line breaks are different then most of the tags we have seen so far. A line break ends the line
you are currently on and resumes on the next line.

HTML Lists
<p>Darshan<br />
Computer<br
/></p>

o There are 3 different types of lists.

o A <ol> tag starts an ordered list, <ul> for unordered lists, and <dl> for definition lists.
 1. <ul> - unordered list; bullets
2. <ol> - ordered list; numbers
3. <dl> - definition list; dictionary

1. HTML Ordered Lists

o Use the <ol> tag to begin an ordered list. Place the <li> (list item) tag between your opening <ol>
and closing </ol> tags to create list items.
o Ordered simply means numbered, as the list below demonstrates.

<ol>
<li>Find a Job</li>
<li>Move Out</li>
</ol>

o Start your ordered list on any number besides 1 using the start attribute.
<ol start="4" >
<li>Buy Food</li>
<li>Get a Degree</li>
</ol>

o There are 4 other types of ordered lists. Instead of generic numbers you can replace them with
Roman numerals or letters, both capital and lower-case. Use the type attribute to change the
numbering.

<oltype="a">
<oltype="A">
<oltype="i">
<ol type="I">
</ol>

2. HTML Unordered Lists

o Create a bulleted list with the <ul> tag. The bullet itself comes in three subtypes: squares, discs,
and circles.
o The default bullet displayed by most web browsers is the traditional full disc.

<ul>
<li>Milk</li>
<li>Chocolate</li>
</ul>

o There are 3 other types of unordered lists.

<oltype="square">
<ol type="disc">
<oltype="circle">
</ol>
 3. HTML Definition Term Lists
o Make definition lists as seen in dictionaries using the <dl> tag. These lists displace the term word
just above the definition itself for a unique look. It's wise to bold the terms to displace them
further.
∙ <dl> - defines the start of the list
∙ <dt> - definition term
∙ <dd> - defining definition

<dl>
<dt><b>Fromage</b></dt>
<dd>French word for cheese.</dd>
<dt><b>Voiture</b></dt>
<dd>French word for car.</dd>
</dl>
4. HTML Nested Lists
o You can also nest one list within another, so you could make an unordered list inside a <html>
<ol>
<li> Clear out garage</li>
<ul>
<li> Tomatoes</li>
</ul>
<li> repair fence </li>
</ol>

numbered one:
</html>

HTML - Formatting Elements

o Several tags exist to further amplify text elements. These formatting tags can make text bold,
italic, sub/superscripted, and more.

Tag Description Example

<b> The <b> tag specifies bold text. <b>Bold Text</b>

<i> The <i> tag specifies italic text. <i>Italic Text</i>

<em> The<em> tag specifies emphasis text <em>Emphasized Text</em>

<sup> The <sup> tag defines superscript text. <p>This text contains
Superscript text appears half a character above ^superscript
the baseline. Superscript text can be used for text.</p>
footnotes, like WWW [1].

<sub> The <sub> tag defines subscript text. Subscript <p>An example of
text appears half a character below the baseline. _{subscripted
Subscript text can be used for chemical Text}</p>
 formulas, like H2O.

<tt> The <tt> tag defines teletype text. <p><tt>This text is teletype
text.</tt></p>

<blink> The <blink> tag is used for blinking the text. <blink> blinking text tag</blink>

HTML Color Coding System - Color Names

There are 3 different methods to set color.

o We can set color using three methods.

a. Using color name

<body bgcolor=”red”>
<font color=”red”>

b. Using RGB(Red, Green, Blue) value

<body bgcolor=”rgb(72,0,0)”>
<font color=”rgb(72,0,0)”>

c. Using Hexadecimal value

<body bgcolor=”#ffff00”>
<font color=”#ffff00”>

HTML - Font and Basefont

o The <font> tag is used to add style, size, and color to the text on your site. Use the size, color,
and face attributes to customize your fonts.
o Use a <basefont> tag to set all of your text to the same size, face, and color.

1. Font Size
o Set the size of your font with size. The range of accepted values is from 1(smallest) to
7(largest).The default size of a font is 3.

<p><font size="5">Here is a size 5 font</font></p>

2. Font Color
o Set the color of your font with color.

<font color="#990000">This text is hexcolor #990000</font><br />

<font color="red">This text is red</font>

3. Font Face
o Choose a different font face using any font you have installed.

<p><font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph has

 had its font...</font></p>

4. Basefont - Set a Solid Base

o With the basefont tag you will be able to set the default font for your web page.
HTML Code:
<html><body>
<basefont size="2" color="green"><p>This paragraph has had its font...</p>
</basefont>
</body></html>

HTML - Hypertext Reference (href) or Hyperlinks

o The href attribute defines reference that the link refers to. Basically this is where the user will be
taken if they wish to click this link.
o Use the <a></a> tags to define the start and ending of an anchor.
o Decide what type of href attribute you need and place this attribute into the opening tag. o The
text you place between the opening and closing tags will be shown as the link on a page. Use the
demonstration below as a reference.
o Hypertext references can be Internal, Local, or Global.
o Internal - Links to anchors on the current page
o Local - Links to other pages within your domain
o Global - Links to other domains outside of your site

Internal - href="#anchorname"
Local - href="../pics/picturefile.jpg"
Global - href=http://www.xyz.com/
<a href="http://www.google.com/" target="_blank" >Google Home</a> <a
href="http://www.espn.com/" target="_blank" >ESPN Home</a> <a
href="http://www.yahoo.com/" target="_blank" >Yahoo Home</a>

Link Targets
o The target attribute defines whether to open the page in a separate window, or to open the link
in the current browser window.
HTML Code:
target=" _blank" Opens new page in a new browser
window

target=" _self" Loads the new page in current window

target=" _parent" Loads new page into a frame that is

superior to where the link lies

target=" _top" Loads new page into the current

browser window, cancelling all
frames

Anchors
 o To link to sections of your existing page a name must be given to the anchor.
o In the example below, we've created a mini Table of Contents for this page.
o By placing blank anchors just after each heading, and naming them, we can then create
reference links to those sections on this page as shown below.
o First, the headings of this page contain blank, named anchors. They look like this.

<h2>HTML Links and Anchors<a name="top"></a></h2>

<h2>HTML Text Links<a name="text"></a></h2>
<h2>HTML Email<a name="email"></a></h2>

o Now create the reference links, placing the # symbol followed by the name of the anchor in the
href of the new link.

<a href="#top">Go to the Top</a>

<a href="#text">Learn about Text Links</a>
<a href="#email">Learn about Email Links</a>

HTML – Images
o Use the <img /> tag to place an image on your web page.

1. Image src
<imgsrc="sunset.gif
" />

o Above we have defined the src attribute.

o Src stands for source, the source of the image or more appropriately, where the picture file is
located.
o There are two ways to define the source of an image. First you may use a standard URL.
(src=http://www.Xyz.com/pics/htmlT/sunset.gif) As your second choice, you may copy or upload
the file onto your web server and access it locally using standard directory tree methods.
(src="../sunset.gif")
o The location of this picture file is in relation to your location of your .html file.

URL Types:
Local Src Location Description
src="sunset.gif" picture file resides in same directory as .html file

src="../sunset.gif" picture file resides in previous directory as

.html file

src="../pics/sunset.gif" picture file resides in the pic directory in a

previous directory as .html file
 o A URL cannot contain drive letters
o Therefore something like src="C:\\www\web\pics\" will not work. Pictures must be uploaded
along with your .html file to your web server.

2. Alternative Attribute
o The alt attribute specifies alternate text to be displayed if for some reason the browser cannot
find the image, or if a user has image files disabled.

<imgsrc="http://example.com/brokenlink/sunset.gif" alt="Beautiful Sunset" />

3. Image Height and Width

o To define the height and width of the image, rather than letting the browser compute the size,
use the height and width attributes.

<imgsrc="sunset.gif" height="50" width="100">

4. Vertically and Horizontally Align Images

o Use the align and valign attributes to place images within your body, tables, or sections.
1. align (Horizontal)
1. right 2. left 3. center
2. valign (Vertical)
1. top 2. bottom 3. center
o Below is an example of how to align an image to the right of a paragraph

<p>This is paragraph 1, yes it is...</p>

<p><imgsrc="sunset.gif" align="right">The image will appear along the...isn't it? </p>

5. Images as Links
o Images are very useful for links and can be created with the HTML below.

<a href="http://www.xyz.com/"><imgsrc="sunset.gif"></a>

HTML Forms
o A form will take input from the viewer and depending on your needs, you may store that data
into a file, place an order, gather user statistics, register the person to your web forum, or
maybe subscribe them to your weekly newsletter.

Making a Form
o <form> is main tag to build a form.
o It has a few optional attributes too. Below is an example of the form element.

<form action=”processform.php” method=”post”>

</form>

o The action attribute tells the HTML where to send the collected information, while the method
attribute describes the way to send it.

Type of Input
o The main tag for collecting information from the user is <input>.
 o The tag itself contains a name attribute, so that we can refer to the input by a name, and the size
of the entry box in characters.
o There are quite few different types of input to choose from:
o <input type=”text”/> this is the default input type and accepts characters and numbers into a
text box. It can also have a value attribute attached to it, which will give it an initial value. o <input
type=”password”/> this is similar to the above text box but anything that is typed cannot be seen;
instead an asterisk is printed to cover up the entry. As the name suggests, this is used for password
entry.
o <input type=”checkbox”/> this gives a box that can be toggled between checked and unchecked.
It can initially be set to one or the other with checked=”checked”.
o <input type=”radio”/> this is similar to checkbox but in group of radio buttons only one can be
selected at a time. This can also have an initial checked state on one of the radio buttons. o <input
type=”file”/>This will give a box to allow you to choose a file similar to when you open or save files
usually on your machine. It can be used to select a file on the local machine for upload to a server.

o <input type=”submit”/> this allows a form to be submitted. When pressed, the information will
be passed on for processing, usually to a script mentioned in the action attribute option of the
form.
o <input type=”image”/> this will also submit the form when selected and, like the img tag,
requires the src attribute to specify an associated image.
o <input type=”button”/> this makes a button available.
o <input type=”reset”/> this will reset the form to its initial state when selected.
o <input type=”hidden”/> this allows hidden data(not seen by the user) to be passed along with
the form.

HTML Text Fields

o The <input> has a few attributes that you should be aware of.
o type - Determines what kind of input field it will be. Possible choices are text, submit, and
password.
o name - Assigns a name to the given field so that you may reference it later.
o size - Sets the horizontal width of the field. The unit of measurement is in blank spaces.
o maxlength - Dictates the maximum number of characters that can be entered.

<form method="post" action="mailto:[email protected]">

Name: <input type="text" size="10" maxlength="40" name="name"><br />
Password: <input type="password" size="10" maxlength="10"
name="password">
</form>

HTML Radio Buttons

o Radio buttons are a popular form of interaction. You may have seen them on quizzes,
questionnaires, and other web sites that give the user a multiple choice question. that relate to
the radio button.

<form method="post" action="mailto:[email protected]">

What kind of shirt are you wearing? <br />
Shade:
<input type="radio" name="shade" value="dark">Dark
<input type="radio" name="shade" value="light">Light <br />
</form>
 </form>

HTML Check Boxes

o Check boxes allow for multiple items to be selected for a certain group of choices. The check
box's name and value attributes behave the same as a radio button.

<form method="post" action="mailto:[email protected]">

Select your favorite cartoon characters.
<input type="checkbox" name="toon" value="Goofy">Goofy
<input type="checkbox" name="toon" value="Donald">Donald
<input type="checkbox" name="toon" value="Bugs">Bugs Bunny
</form>
</form>

HTML Drop Down Lists

o Drop down menues are created with the <select> and <option> tags. <select> is the list itself and
each <option> is an available choice for the user.

<form method="post" action="mailto:[email protected]">

College Degree?
<select name="degree">
<option>Choose One</option>
<option>Some High School</option>
<option>High School Degree</option>
</select>
</form>
</form>

HTML Selection List

o Yet another type of form, a highlighted selection list. This form will post what the user highlights.
Basically just another type of way to get input from the user.
o The size attribute selects how many options will be shown at once before needing to scroll, and
the selected option tells the browser which choice to select by default.

<form method="post" action="mailto:[email protected]">

Musical Taste
<select multiple name="music" size="4">
<option value="emo" selected>Emo</option>
<option value="metal/rock" >Metal/Rock</option>
<option value="hiphop" >Hip Hop</option><option value="ska" >Ska</option>
<option value="jazz" >Jazz</option>
</form>
</form>

HTML Text Areas

o Text areas serve as an input field for viewers to place their own comments onto forums and the
like use text areas to post what you type onto their site using scripts. For this form, the text area
 is used as a way to write comments to somebody.
o Rows and columns need to be specified as attributes to the <textarea> tag.

o Another attribute to be aware of is the wrap. Wrap has 3 values.

<form method="post" action="mailto:[email protected]">

<textarea rows="5" cols="20" name="comments"> Enter Comments Here
</textarea>
</form>

HTML Tables
o The <table> tag is used to begin a table. Within a table element are the <tr> (table rows) and
<td> (table columns) tags.

<table border="1">
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
</table>
Row 1 Cell 1 Row 1 Cell 2

Row 2 Cell 1 Row 2 Cell 2

o Content is placed within tables cells. A table cell is defined by <td> and </td>.The border
attribute defines how wide the table's border will be.

Spanning Multiple Rows and Cells

o Use rowspan to span multiple rows and colspan to span multiple columns.
o Note: if you would like to place headers at the top of your columns, use the <th> tag as shown
below. By default these headers are bold to set them apart from the rest of your table's content.

<table border="1"><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>

<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell
3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
Column 1 Column 2 Column 3

Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3

Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1

Cell Padding and Spacing

o 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.
 <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>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
</table>
o And now we will change the cellpadding of the table and remove the cellspacing from the
previous example.

<table border="1" cellpadding="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>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
</table>

HTML - <!-- Comments -->

o A comment is a way for you as the web page developer to control what lines of code are to be
ignored by the web browser.
o Comment syntax may be a little complicated, there is an opening and a closing much like tags.
1. <!-- Opening Comment
2. -- > Closing Comment

<!--Note to self: This is my banner image! Don't forget -->

<imgsrc="http://www.website.com/pics/anyimage.jpg" height="100" width="200"/>
What is an HTML Form? Discuss different form attributes
∙ Form is a data collection mechanism within HTML that allows the design of various styles of input to
suit most types of information.
∙ An input element can vary in many ways, depending on the type attribute. An input element can
be of type textfield, checkbox, password, radiobutton, submit button, and more.
∙ Following are attributes of <form>.

1. Name:
▪ Thename attribute specifies thenameofaformwhichisusedtoreferenceelementsinaJavaScript.

<form action="URL"> Value : URL

Description : Where to send the form data.

2. Action:
▪ The required action attribute specifies where to send the form-data when a form
issubmitted.
<form action="URL"> Value : URL
Description : Where to send the form data.

3. Method :
▪ The method attribute specifies how to send form-data (the form-data is sent to the
pagespecified in the action attribute).

<form method="get|post">
Value : get
Description : Default. Appends the form-data to the URL in name/value pairs:
 URL?name=value&name=value
Value : post
Description : Sends the form-data as an HTTP post transaction.

4. Target
▪ The target attribute specifies a name or a keyword that indicates where to display the
response that is received after submitting the form.
<form target="_blank|_self|_parent|_top|framename">
Value Description

_blank Theresponseisdisplayedinanewwindowortab

_self Theresponseisdisplayedinthesameframe(thisisdefault)

_parent Theresponseisdisplayedintheparentframe

_top Theresponseisdisplayedinthefullbodyofthewindow

framename Theresponseisdisplayedinanamedframe

Explain following terms with example.

(1)<optgroup> :
∙ The <optgroup> is used to group related options in a drop-down list. If you have a long list of
options, groups of related options are easier to handle for a user.

<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

(2)<span>:
∙ The <span> tag is used to group inline-elements in a document.
∙ The <span> tag provides no visual change by itself.
∙ The <span> tag provides a way to add a hook to a part of a text or a part of a document. ∙ When
the text is hooked in a <span> element you can add styles to the content, or manipulate
thecontent with for example JavaScript.

<p>Mymotherhas<spanstyle="color:lightblue">lightblue</span>eyes.</p>

Introduction to HTML5
∙ The DOCTYPE declaration for HTML5 is very simple:
 <!DOCTYPE html>
∙ The character encoding (charset) declaration is also very simple:
<meta charset="UTF-8">
∙ New HTML5 Elements:
o New semantic elements like <header>, <footer>, <article>, and <section>.
o New form control attributes like number, date, time, calendar, and range.
o New graphic elements: <svg> and <canvas>.
o New multimedia elements: <audio> and <video>.
o Elements Removed in HTML5
The following HTML4 elements have been removed from HTML5:
Element Use instead

<acronym> <abbr>

<applet> <object>

<basefont> CSS

<big> CSS

<center> CSS

<dir> <ul>

<font> CSS

<frame>

<frameset>

<noframes>

<strike> CSS

<tt> CSS

What is CSS?
∙ CSS stands for Cascading Style Sheets
∙ Styles define how to display HTML elements
∙ External Style Sheets can save a lot of work
∙ External Style Sheets are stored in CSS files

Importance of CSS
∙ CSS defines HOW HTML elements are to be displayed.
∙ Styles are normally saved in external .css files. External style sheets enable you to change the
appearance and layout of all the pages in a Web site, just by editing one single file.
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.
What is the difference between class and id?

The id Selector
∙ The id selector is used to specify a style for a single, unique element.
∙ The id selector uses the id attribute of the HTML element, and is defined with a "#". ∙
The style rule below will be applied to the element with id="para1":

#para1
{ text-align:center; color:red; }

The class Selector

∙ The class selector is used to specify a style for a group of elements. Unlike the id selector, the class
selector is most often used on several elements.
∙ This allows you to set a particular style for many 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:

.center {text-align:center;}
∙ We can use more than one class in a single element

<a class=”Center bold italic”>

Explain different ways to write the CSS. / Explain CSS with all types. / Enlist
and explain methods of using CSS in web page.
∙ There are three ways of inserting a style sheet:
o External style sheet
o Internal/Embedded style sheet
o Inline style
1. External Style Sheet
o When using CSS it is preferable to keep the CSS separate from your HTML.
o Placing CSS in a separate file allows the web designer to completely differentiate between
content (HTML) and design (CSS).
o External CSS is a file that contains only CSS code and is saved with a ".css" file extension.
o This CSS file is then referenced in your HTML using the <link> instead of <style>.

File Creation
o Open up notepad.exe, or any other plain text editor and type the following CSS code.
body{ background-color: gray;} p { color: blue; }h3{ color: white; }
o Save the file as a CSS (.css) file.
 o Name the file "test.css" (without the quotes). Now create a new HTML file and fill it with
the following code.

<html><head>
<link rel="stylesheet" type="text/css" href="test.css" /></head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because we changed it with CSS! </p>
</body></html>

Why Use External CSS?

o It keeps your website design and content separate.

o It's much easier to reuse your CSS code if you have it in a separate file. Instead of typing
the same CSS code on every web page you have, simply have many pages refer to a single
CSS file with the "link" tag.
o You can make drastic changes to your web pages with just a few changes in a single CSS
file.

2. Internal/Embedded CSS
o This type of CSS is only for Single Page.
o When using internal CSS, we must add a new tag, <style>, inside the <head> tag. The HTML
code below contains an example of <style>'s usage.
<html><head>
<style type="text/css"></style>
</head><body>
<p>Your page's content!</p></body>
</html>

Creating Internal CSS Code

o Below is an example of simple CSS code.
<html><head>
<style type="text/css">
p {color: white; }
body {background-color: black; }
</style></head><body>
<p>White text on a black background!</p></body>
</html>

3. Inline CSS
o It is possible to place CSS right in your HTML code, and this method of CSS usage is referred
to as inline css.
o Inline CSS has the highest priority out of external, internal, and inline CSS.
o This means that you can override styles that are defined in external or internal by using
inline CSS.
o If you want to add a style inside an HTML element all you have to do is specify the desired
CSS properties with the style HTML attribute.
 <html><head>
<link rel="stylesheet" type="text/css" href="test.css" /></head>
<body>
<p style="background: blue; color: white;">A new background andfont color with
inline CSS</p></body>
</html>

Explain CSS Background with all its attributes

∙ CSS background properties are used to define the background effects of an element.
1. CSS Background Color
o The background-color property specifies the background color of an element.

o The background color of a page is defined in the body selector:

o Below is example of CSS backgrounds
body {background-color:#b0c4de;}

2. CSS Background Image

o The background-image property specifies an image to use as the background of an
element.

body {background-image:url('paper.gif');}
3. Background Image Repeat
o You can have a background image repeat vertically (y-axis), horizontally (x-axis), in both
directions, or in neither direction.
p {background-image: url(smallPic.jpg); background-repeat: repeat; }
h4 {background-image: url(smallPic.jpg); background-repeat: repeat-y; }
ol {background-image: url(smallPic.jpg); background-repeat: repeat-x; }
ul {background-image: url(smallPic.jpg);background-repeat: no-repeat; }

4. CSS Fixed Background Image

o The background-attachment property sets whether a background image is fixed or scrolls
with the rest of the page.
textarea.noScroll { background-image: url(smallPic.jpg); background-attachment:
fixed;} textarea {
background-image: url(smallPic.jpg);
background-attachment: scroll; }

5. CSS Background Image Positioning

o The background-position property sets the starting position of a background image.
p {background-image: url(smallPic.jpg); background-position: 20px 10px;}
h4 {background-image: url(smallPic.jpg); background-position: 30% 30%;}
ol {background-image: url(smallPic.jpg); background-position: top center;}

Explain CSS Font with all its attributes

∙ CSS font properties define the font family, boldness, size, and the style of a text.

1. CSS Font Color

o Set the text-color for different elements:
h4 { color: red; }
 h5 { color: #9000A1; }
h6 { color: rgb(0, 220, 98); }
2. CSS Font Family
o The font family of a text is set with the font-family property.

h4 { font-family: sans-serif; }h5 { font-family: serif; }

h6 { font-family: arial; }

3. CSS Font Size

o The font-size property sets the size of the text.
p { font-size: 120%; } ol{ font-size: 10px; } ul{ font-size: x-large; }
4. CSS Font Style
o The font-style property is mostly used to specify italic text.
o This property has three values:
▪ normal - The text is shown normally
▪ italic - The text is shown in italics
▪ oblique - The text is "leaning" (oblique is very similar to italic, but less supported) p
{ font-style: italic; }h4{ font-style: oblique; }
5. CSS Font Weight
o The font-weight property sets how thick or thin characters in text should be displayed.
p { font-weight: 100; } ul{ font-weight: bolder; }
}
6. CSS Font Variant
o The font-variant property specifies whether or not a text should be displayed in a small
caps font.

p { font-variant: small-caps; }}

Explain CSS Text with all its attributes.

∙ While CSS Font covers most of the traditional ways to format your text, CSS Text allows you to
control the spacing, decoration, and alignment of your text.
1. Text Decoration
o The text-decoration property is used to set or remove decorations from text. o The text-
decoration property is mostly used to remove underlines from links for design purposes.

h4{ text-decoration: line-through; }

h5{ text-decoration: overline; }
h6{ text-decoration: underline; }
a { text-decoration: none; }

2. Text Indent
o The text-indentation property is used to specify the indentation of the first line of a text.
p { text-indent: 20px; } h5 { text-indent: 30%; }

3. Text Align
o The text-align property is used to set the horizontal alignment of a text.
p { text-align: right; }
h5{ text-align: justify; }
 4. Text Transform
o The text-transform property is used to specify uppercase and lowercase letters in a text.

p { text-transform: capitalize; } h5{ text-transform: uppercase; }

5. CSS White Space

o The white-space attribute allows you to prevent text from wrapping until you place a break
<br /> into your text.
p { white-space: nowrap; }

6. CSS Word Spacing

o With the CSS attribute word-spacing you are able to specify the exact value of the spacing
between your words. Word-spacing should be defined with exact values.
p { word-spacing: 10px; }

7. CSS Letter Spacing

o With the CSS attribute letter-spacing you are able to specify the exact value of the spacing
between your letters. Letter-spacing should be defined with exact values.
p { letter-spacing: 3px; }

Explain 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:

o Margin - Clears an area around the border. The margin does not have a background color, it
is completely transparent
o Border - A border that goes around the padding and content. The border is affected by the
background color of the box
o Padding - Clears an area around the content. The padding is affected by the background
color of the box
o Content - The content of the box, where text and images appear
Explain CSS Padding.
∙ The CSS padding properties define the space between the element border and the element content.
p {padding: 15px; border: 1px solid black;
}
∙ 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 puddings at once.
1. Possible Values
Value Descriptions

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

% Defines a padding in % of the containing element.

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

2. Padding - Shorthand property

o To shorten the code, it is possible to specify all the padding properties in one property.
This is called a shorthand property.
padding:25px 50px;

Explain CSS Margin.

∙ The CSS margin properties define the space around elements.
p {margin: 5px; border: 1px solid black; }

∙ 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.
Value Descriptions

auto The browser calculates a margin

length Specifies a margin in px, pt, cm, etc. Default value is 0px

% Specifies a margin in percent of the width of

the containing element

inherit Specifies that the margin should be inherited from

the parent element

1. Margin - Individual sides

o In CSS, it is possible to specify different margins for different sides:
margin-top:100px;
margin-bottom:100px;
 margin-right:50px;
margin-left:50px;

Prof. Arjun Bala, CE Department

| 2160708 – Web Technology
7

4 - CSS
2. Margin - Shorthand property
o To shorten the code, it is possible to specify all the margin properties in one property. This
is called a shorthand property.

margin:100px 50px;

Explain CSS Border with all its attributes.

∙ The CSS border properties allow you to specify the style and color of an element's border.
1. Border Style Types
o The border-style property specifies what kind of border to display.

p.solid {border-style: solid; } p.double {border-style: double; } p.groove {border-style: groove; }

p.dotted {border-style: dotted; } p.dashed {border-style: dashed; } p.inset {border-style: inset; }
p.outset {border-style: outset; } p.ridge {border-style: ridge; } p.hidden {border-style: hidden; }

2. Border Width
o The border-width property is used to set the width of the border.

table { border-width: 7px; border-style: outset; }

td { border-width: medium; border-style: outset; }
p { border-width: thick; border-style: solid; }

3. Border Color
o The border-color property is used to set the color of the border.
o Border colors can be any color defined by RGB, hexadecimal, or key terms. Below is an
example of each of these types.

table { border-color: rgb( 100, 100, 255); border-style: dashed; }

td { border-color: #FFBD32; border-style: ridge; }
p { border-color: blue; border-style: solid; }

4. Border: border-(direction)
o If you would like to place a border on only one side of an HTML element, or maybe have a
unique look for each side of the border, then use border-(direction).
o The direction choices are of course: top, right, bottom, and left. CSS allows you to treat
each side of a border separately from the other three sides.
o Each side can have its own color, width, and style set, as shown below.
p { border-bottom-style: dashed ; border-bottom-color: yellow; border-bottom-width: 5px;
} h4 { border-top-style: double; border-top-color: purple; border-top-width: thick; }

Explain CSS Lists with all its attributes.

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

1. CSS List Style Type

o Specify all the list properties in one declaration.
▪ Unordered list styles: square, circle, disc (default), and none
▪ Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal
(default), and none

ol { list-style-type: upper-roman; }
ul { list-style-type: circle; }

2. CSS Lists with Images

o Specify an image as the list-item marker in a list:

ul { list-style-image: url("listArrow.gif"); }
ol { list-style-image: url("listArrow2.gif"); }

3. CSS List Position

o With Specify that the the list-item markers should appear inside the content flow (results
in an extra indentation)

ul { list-style-position: inside; }
ol { list-style-position: outside; }
∙ Note: "Outside" is actually the default setting for indentation.

Explain CSS Links

1. CSS Anchor/Link States
o The four links states are:
▪ a:link - a normal, unvisited link
▪ a:visited - a link the user has visited
▪ a:hover - a link when the user mouse over it
▪ a:active - a link the moment it is clicked

a:link{color:#FF0000;} /*unvisited link*/

a:visited{color:#00FF00;} /* visited link */
a:hover{color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
2. Text Decoration
o The text-decoration property is mostly used to remove underlines from links.
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
3. Background Color
o The background-color property specifies the background color for links.
 a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

Explain CSS Position with example.

∙ With the knowledge of CSS Positioning we will be able to manipulate the exact position of your
HTML elements.
1. Position Relative
o Relative positioning changes the position of the HTML element relative to where it
normally appears.
o If we had a header that appears at the top of our page, we could use relative positioning to
move it a bit to the right and down a couple of pixels. Below is an example.
h3 {position: relative; top: 15px;left: 150px;}
p {position: relative; left: -10px;}

2. Position Absolute
o With absolute positioning, you define the exact pixel value where the specified HTML
element will appear.
o The point of origin is the top-left of the browser's viewable area, so be sure you are
measuring from that point.
h3 {position: absolute; top: 50px;left: 45px;}
p{position: absolute; top: 75px;left: 75px;}

Explain CSS Layers. / z-index property

∙ CSS allows you to control which item will appear on top with the use of layers. ∙
In CSS, each element is given a priority.
∙ If there are two overlapping CSS positioned elements, the element with the higher priority will
appear on top of the other.
∙ To manually define a priority, set the z-index value. The larger the value, the higher the priority the
element will have.
h4{position: relative; top: 30px;left: 50px; z-index: 2;}
p {position: relative; z-index: 1;background-color: #FFCCCC;}
∙ This paragraph has a z-index of 1, which is less than the header.
∙ If we had not defined the z-index, by default the paragraph would have been on top of the header
because it appears later in our HTML code.

Explain CSS Float property.

∙ With CSS float, an element can be pushed to the left or right, allowing other elements to wrap
around it.
∙ Wrapping text around an image is easy when using the CSS Float attribute.
∙ You have a choice to either float the picture to the left or to the right and the rest is done for you.

img.floatLeft { float: left; margin: 4px;}

img.floatRight { float: right; margin: 4px;}
<body>
<img src="sunset.gif" class="floatLeft"><p>The images are contained with...</p>
<img src="sunset.gif" class="floatRight"><p>This second paragraph has
 an...</p> </body>

Introduction to CSS3
∙ CSS3 is the latest standard for CSS.
∙ CSS3 is completely backwards-compatible with earlier versions of CSS.
∙ CSS3 has been split into "modules". It contains the "old CSS specification" (which has been split into
smaller pieces). In addition, new modules are added.
∙ CSS3 Transitions are a presentational effect which allow property changes in CSS values, such as
those that may be defined to occur on :hover or :focus, to occur smoothly over a specified
duration – rather than happening instantaneously as is the normal behaviour.
∙ Transition effects can be applied to a wide variety of CSS properties, including background-color,
width, height, opacity, and many more.
∙ Some of the most important CSS3 modules are:
o Selectors
o Box Model
o Backgrounds and Borders
o Image Values and Replaced Content
o Text Effects
o 2D/3D Transformations
o Animations
o Multiple Column Layout
o User Interface

XML

What is XML?
∙ XML is a meta-language, which can be used to store data & act as a mechanism to transfer information
between dissimilar systems.
∙ XML stands for EXtensible Markup Language.
∙ XML is a markup language much like HTML.
∙ XML was designed to describe data.
∙ XML tags are not predefined in XML. You must define your own tags.
∙ XML is self describing.
∙ XML uses a DTD (Document Type Definition) to formally describe the data.

<?xml version=”1.0”?>
<Person>
<Firstname>Ralph</Firstname>
<Lastname>Mosely</Lastname>
</Person>

Difference between XML and HTML

 XML HTML

XML was designed to store data and transferthe HTML was designed to display data.
data.

XML focuses on what data is. HTML focus on how data looks.

In XML you can design your own tag. HTML has predefined tags.

XML uses parser to check & read xml fileseg. DOM, HTML don’t use any kind of parser
SAX

Use of XML
∙ Used to exchange data between dissimilar systems.
∙ Used to describe content of document.
∙ XML can be used as database to store data.

Features of XML
∙ XML has its own tag so it’s self describing.
∙ Language Independent:Any language is able to read & write XML.
∙ OS Independent: can be work on any platform.
∙ Readability: It’s a plain text file in user readable format so you can edit or viewin simple editor.

∙ Hierarchical: It has hierarchical structure which is powerful to express complex data and simple to
understand.

XML Key Component

1.) XML Root Element
o XML must have root element. The first element after xml version declaration in file is a root
element.

<bookstore>
<book category="CHILDREN">
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
</bookstore>

o In above example <bookstore> is root element.

2.) XML Element

o An XML element is everything from (including) the element's start tag to (including) the
element's end tag.
o An element can contain:
 ▪ other elements
▪ text
▪ attributes
▪ or a mix of all of the above...
o In above example <title>, <author>, <year> and <price> are elements.

3.) XML Attribute

o Attributes provide additional information about an element.
o Attributes often provide information that is not a part of the data. In the example below,the
file type is irrelevant to the data, but can be important to the software that wants to
manipulate the element

<file type="gif">computer.gif</file>

o XML Attributes Must be Quoted

o Attribute values must always be quoted. Either single or double quotes can be used. For a
person's sex, the person element can be written like this:

<person sex="female"> or <person sex='female'>

4.) XML Namespace

o The XML namespace is a special type of reserved XML attribute that you place in an XML tag.
o The reserved attribute is actually more like a prefix that you attach to any namespace you
create.
o This attribute prefix is "xmlns:” which stands for XML Namespace.
o The colon is used to separate the prefix from your namespace that you are creating. o xmlns
must have a unique value that no other namespace in the document has. What is commonly
used is the URI (Uniform Resource Identifier) or the more commonly used URL.

Xmlns=”http://www.mydomian.com/ns/animals/1.1”

Create a XML file that contains Book Information.

<xml version=”1.0”?>
<bookstore>
<book>
<title>Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
<book>
<title>WAD</title>
<author>Ralph Mosely</author>
<year>2001</year>
 <price>395</price>
</book>
</bookstore>

DTD (Document Type Definition)

∙ The purpose of a DTD is to define the legal building blocks of an XML document. Itdefines the
document structure with a list of legal elements. A DTD can be declaredinline in your XML
document, or as an external reference.
∙ Internal DTD
o This is an XML document with a Document Type Definition:

<?xml version="1.0"?>
<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Ravi</to>
<from>Ketan</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

o The DTD is interpreted like this:

▪ !ELEMENT note (in line 2) defines the element "note" as having four elements:
"to,from,heading,body".
▪ !ELEMENT to (in line 3) defines the "to" element to be of the type "CDATA". ▪
!ELEMENT from (in line 4) defines the "from" element to be of the type "CDATA" ∙ External DTD
o This is the same XML document with an external DTD

<?xml version="1.0"?>
<!DOCTYPE note SYSTEM "note.dtd">
<note>
<to>Ravi</to>
<from>Narendra</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
 </note>

o This is a copy of the file "note.dtd" containing the Document Type Definition:

<?xml version="1.0"?>
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>

DTD - Elements
∙ In the DTD, XML elements are declared with an element declaration. An element declaration has the
following syntax:

<!ELEMENT element-name (element-content)>

∙ Empty elements
o Empty elements are declared with the keyword EMPTY inside the parentheses:

<!ELEMENT img (EMPTY)>

∙ Elements with data
o Elements with data are declared with the data type inside parentheses:

<!ELEMENT element-name (#CDATA)>

or
<!ELEMENT element-name (#PCDATA)>
or
<!ELEMENT element-name (ANY)>
example:
<!ELEMENT note (#PCDATA)>

o #CDATA means the element contains character data that is not supposed to be parsed bya
parser.
o #PCDATA means that the element contains data that IS going to be parsed by a parser.
o The keyword ANY declares an element with any content.
o If a #PCDATA section contains elements, these elements must also be declared.
∙ Elements with children (sequences)
o Elements with one or more children are defined with the name of the children
elementsinside the parentheses:

<!ELEMENT element-name (child-element-name)>

or
<!ELEMENT element-name (child-element-name,child-element-name,.....)>
 example:
<!ELEMENT note (to,from,heading,body)>

o When children are declared in a sequence separated by commas, the children must appearin
the same sequence in the document. In a full declaration, the children must also bedeclared,
and the children can also have children. The full declaration of the notedocument will be:
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#CDATA)>
<!ELEMENT from (#CDATA)>
<!ELEMENT heading (#CDATA)>
<!ELEMENT body (#CDATA)>

∙ Wrapping
o If the DTD is to be included in your XML source file, it should be wrapped in aDOCTYPE
definition with the following syntax:
<!DOCTYPE root-element [element-declarations]>
example:
<?xml version="1.0"?>
<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#CDATA)>
<!ELEMENT from (#CDATA)>
<!ELEMENT heading (#CDATA)>
<!ELEMENT body (#CDATA)>
]>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend</body></note>

∙ Declaring only one occurrence of the same element

<!ELEMENT element-name (child-name)>

example
<!ELEMENT note (message)>

o The example declaration above declares that the child element message can only occurone
time inside the note element.
∙ Declaring minimum one occurrence of the same element

<!ELEMENT element-name (child-name+)>

 example
<!ELEMENT note (message+)>

o The + sign in the example above declares that the child element message must occur oneor
more times inside the note element.
∙ Declaring zero or more occurrences of the same element

<!ELEMENT element-name (child-name*)>

example
<!ELEMENT note (message*)>

o The * sign in the example above declares that the child element message can occur zeroor
more times inside the note element.
∙ Declaring zero or one occurrences of the same element

<!ELEMENT element-name (child-name?)>

example
<!ELEMENT note (message?)>

o The? Sign in the example above declares that the child element message can occur zeroor
one times inside the note element.

DTD – Attributes
∙ Attributes provide extra information about elements.
∙ Attributes are placed inside the start tag of an element.
∙ Declaring Attributes
o In the DTD, XML element attributes are declared with an ATTLIST declaration. Anattribute
declaration has the following syntax:
<!ATTLIST element-name attribute-name attribute-type default-value>

o As you can see from the syntax above, the ATTLIST declaration defines the elementwhich can
have the attribute, the name of the attribute, the type of the attribute, and thedefault
attribute value.
o The attribute-type can have the following values:
Value Explanation

CDATA The value is character data

(eval|eval|..) The value must be an enumerated value

ID The value is an unique id

IDREF The value is the id of another element

IDREFS The value is a list of other ids

NMTOKEN The value is a valid XML name

NMTOKENS The value is a list of valid XML names

ENTITY The value is an entity

 ENTITIES The value is a list of entities

NOTATION The value is a name of a notation

xml: The value is predefined

o The attribute-default-value can have the following values:

Value Explanation

#DEFAULT value The attribute has a default value

#REQUIRED The attribute value must be included in the

element

#IMPLIED The attribute does not have to be included

#FIXED value The attribute value is fixed

∙ Attribute declaration example

DTD example:
<!ELEMENT square EMPTY>
<!ATTLIST square width CDATA "0">
XML example:
<square width="100"></square>

o In the above example the element square is defined to be an empty element with
theattributes width of type CDATA. The width attribute has a default value of 0.

XML Schema
∙ An XML Schema describes the structure of an XML document.
∙ XML Schema is an XML-based alternative to DTD.
∙ The XML Schema language is also referred to as XML Schema Definition (XSD).
∙ XML Schema is a W3C Recommendation.

XSD Elements
∙ XML Schemas define the elements of your XML files. It’s of two types:
o Simple
o Complex Type

XSD Simple Elements

∙ A simple element is an XML element that can contain only text. It cannot contain any other elements
or attributes.
∙ Defining a Simple Element
o The syntax for defining a simple element is:

<xs:element name="aaa" type="bbb"/>

 o Where aaa is the name of the element and bbb is the data type of the element.
o XML Schema has a lot of built-in data types. The most common types are:
▪ xs:string
▪ xs:decimal
▪ xs:integer
▪ xs:Boolean
▪ xs:date
▪ xs:time
∙ Example
o Here are some XML elements:

<lastname>Refsnes</lastname>
<age>36</age>
<dateborn>1970-03-27</dateborn>

o And here are the corresponding simple element definitions:

<xs:element name="lastname" type="xs:string"/>

<xs:element name="age" type="xs:integer"/>
<xs:element name="dateborn" type="xs:date"/>

XSD Complex Elements

∙ A complex element is an XML element that contains other elements and/or attributes. ∙
There are four kinds of complex elements:
o empty elements
o elements that contain only other elements
o elements that contain only text
o elements that contain both other elements and text
∙ Examples of Complex Elements
o A complex XML element, "product", which is empty:

<product pid="1345"/>
o A complex XML element, "employee", which contains only other elements:

<employee>
<firstname>John</firstname>
<lastname>Smith</lastname>
</employee>

o A complex XML element, "food", which contains only text:

<food type="dessert">Ice cream</food>

o A complex XML element, "description", which contains both elements and text:
<description>
It happened on <date lang="norwegian">03.03.99</date> ....
</description>
XSD Attributes
∙ Simple elements cannot have attributes. If an element has attributes, it is considered to be of a
complex type. But the attribute itself is always declared as a simple type.
∙ How to Define an Attribute?
o The syntax for defining an attribute is:

<xs:attribute name="aaa" type="bbb"/>

o Where aaa is the name of the attribute and bbb specifies the data type of the attribute.
∙ Default and Fixed Values for Attributes
o Attributes may have a default value OR a fixed value specified.
o A default value is automatically assigned to the attribute when no other value is specified.
o In the following example the default value is "EN":

<xs:attribute name="lang" type="xs:string" default="EN"/>

o A fixed value is also automatically assigned to the attribute, and you cannot specifyanother
value.
o In the following example the fixed value is "EN":

<xs:attribute name="lang" type="xs:string" fixed="EN"/>

∙ Optional and Required Attributes

o Attributes are optional by default. To specify that the attribute is required, use the
"use"attribute:
<xs:attribute name="lang" type="xs:string" use="required"/>

Difference between DTD and XML Schema

XML Schema DTD

Markup Any global element can be root. Can specify only the root

validation No ambiguous content support. element in the instance

document. No ambiguous
content support.

Namespace Yes. Declarations only where No.

support multiple namespaces are used.

Code reuse Can reuse definitions using Poorly supported. Can use
named types. parameter entities.

Data type Provides flexible set of data No real data type support.
Validatio types. Provides multi-field key
n cross references. No co-
occurrence constraints.

XSL
What is XSL?
∙ XSL stands for EXtensible Stylesheet Language.
∙ XSL = Style Sheets for XML
∙ XSL describes how the XML document should be displayed!
∙ XSL - More Than a Style Sheet Language
∙ XSL consists of three parts:
o XSLT-a language for transforming XML documents
o XPath-a language for navigating in XML documents
o XSL-FO-a language for formatting XML documents

What is XSLT?
∙ XSLT stands for XSL Transformations.
∙ XSLT is the most important part of XSL.
∙ XSLT transforms an XML document into another XML document.
∙ XSLT uses XPath to navigate in XML documents.

Explain XSL Transformation and XSL Elements

∙ The style sheet provides the template that transforms the document from one structure to another. ∙
In this case <xsl:template> starts the definition of the actual template, as the root of the source XML
document.
∙ The match = “/” attribute makes sure this begins applying the template to the root of the source XML
document.

Linking
∙ The style sheet is linked into the XML by adding the connecting statement to the XML document:
<?xml-stylesheet type=”text/xsl” href=”libstyle.xsl” ?>
XSL Transformations
∙ XSLT is the most important part of XSL.
∙ XSLT is used to transform an XML document into another XML document, or another type of
document that is recognized by a browser, like HTML and XHTML. Normally XSLT does this by
transforming each XML element into an (X)HTML element.
∙ With XSLT you can add/remove elements and attributes to or from the output file. You can also rearrange and
sort elements, perform tests and make decisions about which elements to hide and display, and a lot more.
∙ A common way to describe the transformation process is to say that XSLT transforms an XML
source-tree in to an XML result-tree.
∙ XSLT Uses XPath:
o XSLT uses XPath to find information in an XML document.
o XPath is used to navigate through elements and attributes in XML documents.
∙ XSLT Works as:
o In the transformation process, XSLT uses XPath to define parts of the source document
that should match one or more predefined templates.
o When a match Is found, XSLT will transform the matching part of the source document into
the result document.

XSL Elements
∙ XSL contains many elements that can be used to manipulate, iterate and select XML, for output. o
value-of
o for-each
o sort
 o if
o choose

<xsl:value-of> Element
∙ The <xsl:value-of> element extracts the value of a selected node.
∙ The <xsl:value-of> element can be used to select the value of an XML element and add it to the output.
∙ Syntax
<xsl:value-of select="expression" />
o expression: This is Required. An XPath expression that specifies which node/attribute to
extract the value from. It works like navigating a file system where a forward slash (/) selects
subdirectories.

<xsl:for-each> Element
∙ The XSL <xsl:for-each> element can be used to select every XML element of a specified node-set.

<xsl:if> Element
∙ To put a conditional if test against the content of the XML file, add an <xsl:if> element to the XSL
document.
∙ Syntax
<xsl:if test="expression">
...some output if the expression is
true...
</xsl:if>

<xsl:sort> Element
∙ The <xsl:sort> element is used to sort the output.
∙ <xsl:sort select="artist"/>
∙ The select attribute indicates what XML element to sort on.

Example using value-of, for-each and if

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<xsl:if test="price &gt; 10">
 <tr>
<td>
<xsl:value-of select="title"/>
</td>
<td><
xsl:value-of select="artist"/>
</td>
</tr>
</xsl:if>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

<xsl:choose> Element
∙ The <xsl:choose> element is used in conjunction with <xsl:when> and <xsl:otherwise> to express
multiple conditional tests.
Syntax
<xsl:choose>
<xsl:when test="expression">
... some output ...
</xsl:when>
<xsl:otherwise>
... some output ....
</xsl:otherwise>
</xsl:choose>

<xsl:apply-templates> Element
∙ The <xsl:apply-templates> element applies a template to the current element or to the current
element's child nodes.
∙ If we add a select attribute to the <xsl:apply-templates> element it will process only the child element
that matches the value of the attribute. We can use the select attribute to specify the order in which
the child nodes are processed.
∙ Look at the following XSL style sheet:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
 <body>
<h2>My CD Collection</h2>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>

<xsl:template match="cd">
<p>
<xsl:apply-templates select="title"/>
<xsl:apply-templates select="artist"/>
</p>
</xsl:template>
</xsl:stylesheet>

Explain transforming with XSLT.

∙ It is possible to convert an XML document to XHTML using the browser’s own parser. However, this is
not always possible:
o The browser at the client end may not be suitable or equipped to do the transformation. o It
may not be a good idea to include the reference to the style sheet or even have the style sheet
available!
∙ The answer to this process the document and style sheet outside of the browser’s own mechanism for
doing this task.
∙ This task can be done either on the client side or the server side.

Using JavaScript
∙ One way to process and transform XML on the client side is using JavaScript, which has several
features for doing the task very well.
<html>
<body>
<script type=”text/javascript”>
//Load the XML document
var xml= new ActiveXObject(“Microsoft.XMLDOM”)
xml.async=false
xml.load(“lib.xml”)
//Load the XSL document
var xsl= new ActiveXObject(“Microsoft.XMLDOM”)
xsl.async= false
xsl.load(“libstyle.xsl”)
//Do the actual transform
document.write(xml.transformNode(xsl))
</script>
</body>
 </html>

∙ Above example shows one way to transform with JavaScript using Microsoft’s proprietary Application
Programming Interface (API) for the Internet Explorer browser.
∙ It is also possible to process XML using the DOM.
∙ Using both the of these mechanisms it is possible to also traverse an XML document and process either
according to a style sheet or simply using the JavaScript to make the stylistic decisions. ∙ Apart from
JavaScript, it is also possible to use other programming languages (such as Java and .Net) to process and
then output a transformed document.

3.1 Introduction of CSS

CSS stands for Cascading Style Sheets. It is a simple design language
intended to simplify the process of making web pages presentable. CSS
handles the look and feel part of a web page. Using CSS, you can control the
color of the text, the style of fonts, the spacing between paragraphs, how
columns are sized and laid out, what background images or colors are used, as
well as a variety of other effects.
CSS works with HTML and other Markup Languages (such as XHTML
and XML) to control the way the content is presented. Cascading Style Sheets
is a means to separate the appearance of a webpage from the content of a
webpage.

3.1.1 Definition

Cascading Style Sheets (CSS) is a simple mechanism used to format

the layout of Web Pages and adding style (e.g., fonts, colors, spacing...) to
web documents that previously could only be defined in a page's HTML. CSS
describes how HTML elements are to be displayed on screen, paper, or in
other media. It can control the layout of multiple web pages all at once.

3.1.2 Advantages

The advantages of CSS are:

❖ CSS saves time - You can write CSS once and then reuse the same
sheet in multiple HTML pages.
❖ Pages load faster – Increases Download Speed
❖ Easy maintenance - To make a global change, all the elements in all
the web pages will be updated automatically.
❖ Superior styles to HTML – It is better look to your HTML page
in comparison to HTML attributes.
❖ Multiple Device Compatibility - Style sheets allow content to
be optimized for more than one type of device.
❖ Global web standards - Now HTML attributes are being deprecated
and it is being recommended to use CSS

3.1.3 What is the “Cascade” part of CSS?

 The cascade part of CSS means that more than one style sheet can be
attached to a document, and all of them can influence the presentation. For
example, a designer can have a global style sheet for the whole site, but a local
one for say, controlling the link color and background of a specific page. Or, a
user can use own style sheet if s/he has problems seeing the page, or if s/he just
prefers a certain look.

3.2 CSS Syntax

A CSS style rule is made of three parts:

1. Selector: A selector is an HTML tag at which a style will be applied.
This could be any tag like <h1>, <p> or <table> etc.
2. Property: A property is a type of attribute of HTML tag. Put simply,
all the HTML attributes are converted into CSS properties. They
could be color, border, bgcolor etc.
3. Value: Values are assigned to properties. For example, color property
can have the value either red or #F1F1F1 etc.

The format or syntax of CSS is:

Selector {property:
value}
Example:You can define a heading as follows:

h1 {color:
red; font-size :15px}

Property
Selector Value Property Value

Here h1 is a selector , color and font-size are properties and

the given value red, and 15px are the value of that property.
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.
3.2.1 Rules/ Principle of CSS
1. Every statement must have a selector and a declaration. The declaration
comes immediately after the selector and is contained in a pair of curly
braces.
2. The declaration is one or more properties separated by semicolons. 3.
Each property has a property name followed by a colon and then the value
for that property. There are many different types of values, but any given
property can only take certain values as set down in the specification. 4.
Sometimes a property can take a number of values, as in the font-family.
The values in the list should be separated by a comma and a space. 5.
Sometimes a value will have a unit as well as the actual value, as in the
1.3em. You must not put a space between the value and its unit. 6. As with
HTML, white space can be used to make your style sheet easier to read
and write.
2
3.2.2Parts of style sheet
A style sheet consists of one or more rules that describe how
document elements should be displayed. A rule in CSS has two parts:
the selector and the declaration. The declaration also has two parts, the
property and the value. Let's take a look at a rule for a heading 1 style:
h1 { font-family: verdana, "sans serif"; font-size: 1.3em } This
expression is a rule that says every h1 tag will be verdana or other
sans-serif font and the fontsize will be 1.3em. Let's take a look at the
different parts of this rule.

Selector
{
property1: some value;
property2: some value;
}
The declaration contains the property and value for the selector. The property
is the attribute you wish to change and each property can take a value. The
property and value are separated by a colon and surrounded by curly braces:
body { background-color: black}
If the value of a property is more than one word, put quotes around that value:
body { font-family: "sans serif"; } If you wish to specify more than one
property, you must use a semi-colon to separate each property. This rule
defines a paragraph that will have blue text that is centered.
p { text-align: center; color: blue }
You can group selectors. Separate each selector with a comma. The example
below groups headers 1, 2, and 3 and makes them all yellow. h1, h2, h3 {
color: yellow}
3.3 CSS Selectors
You can define selectors in various simple ways based on your comfort. Let
me put these selectors one by one. Three types of CSS Selectors
1. The Element selectors
2. The ID Selectors
3. The Class Selectors
3.3.1 The Element selectors
A CSS declaration always ends with a semicolon, and declaration
groups are surrounded by curly brackets: example -
p {color:red;text-align:center;}
To make the CSS more readable, you can put one declaration on each
line, like this:
p
{
color:red;
text-align:center;
}
3.3.2 The ID selectors
The id selector is used to specify a style for a single, unique
element.The id selector uses the id attribute of the HTML element, and
is defined with a "#". Example –
Imagine within the body element of our html page, we have the
following paragraph element
 <p id=”welcome”>Welcome to the 1st CSS
Document </p>
We can then create a CSS rule with the id selector:

#welcome
{
color:red;
text-align:center;
}
3.3.3 The Class selectors
The class selector is used to specify a style for a group of elements.
Unlike the id selector, the class selector is most often used on several
elements. This allows you to set a particular style for many 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:

Imagine within the body element of our html page, we have the
following header element
<h2 class=”center”>Summary</h2>
We can then create a CSS rule with the class selector:
.center {text-align:center;}

4
You can also specify that only specific HTML elements should be
affected by a class. In the example below, all p elements with
class="center" will be center-aligned: example
p.center {text-align:center;}
Some of the other selectors are used in CSS, they are :
3.3.3.1 Universal selector
An asterisk (*) is the universal selector for CSS. It matches a single
element of any type. Omitting the asterisk with simple selectors has the
same effect. For instance, *.warning and. warning are considered equal.
Rather than selecting elements of a specific type, the universal selector
quite simply matches the name of any element type: Example-
*
{
Color:#000000;
}
This rule renders the content of every element in our document in
black. 3.3.3.2 Attribute Selector
You can also apply styles to HTML elements with particular attributes.
The style rule below will match all the input elements having a type
attribute with a value of text:
input[type="text"]
{
color: #000000;
}
The advantage to this method is that the <input type="submit" />
element is unaffected, and the color applied only to the desired text
fields.There are following rules applied to attribute selector.
p[lang] - Selects all paragraph elements with a lang attribute.
 p[lang="fr"] - Selects all paragraph elements whose lang attribute
has a value of exactly "fr".
p[lang~="fr"] - Selects all paragraph elements whose lang
attribute contains the word "fr".
p[lang|="en"] - Selects all paragraph elements whose lang
attribute contains values that are exactly "en", or begin with
"en-".
3.4 Ways to insert CSS

There are three ways of inserting a style sheet:

1. External style sheet
2. Internal style sheet
3. Inline style
3.4.1 External style sheet
An external style sheet is ideal when the style is applied to many pages.
With an external style sheet, you can change the look of an entire Web site by
changing one file. Each page must link to the style sheet using the <link> tag.
The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css" href="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");}

Notes : 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.

3.4.2 Internal style sheet

An internal style sheet should be used when a single document has a
unique style. You define internal styles in the head section of an HTML page,
by using the <style> tag, like this:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back1.gif");}
</style>
</head>
3.4.3 Inline style sheet
An inline style loses many of the advantages of style sheets by mixing content
with presentation. Use this method sparingly! To use inline styles you use the style
attribute in the relevant tag. The style attribute can contain any CSS property. The
example shows how to change the color and the left margin of a paragraph:
 6
<p style="color:sienna;margin-left:20px">This is a
paragraph.</p>
3.5 Background image handling
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element. The background image for a
page can be set like this:body {background
image:url('paper.gif');}
Example
<html>
<head>
<Title>This is my Internal css page</Title> <style type="text/css">
body
{
background-image:url
("C:/Users/SAI/Desktop/Desktop/100MSDCF/11.
jpg");
}
</style>
</head>
<body>
Background Image
</body>
</html>

The output of the above example is :

7
You can set the following background properties of an element:
The background-image property is used to set the background image of
an element.
The background-repeat property is used to control the repetition of an
image in the background.
The background-position property is used to control the position of an
image in the background.
The background-attachment property is used to control the scrolling of
an image in the background.
The background property is used as shorthand to specify a number of other
background properties.
3.5.1 Repeat the Background Image
The following example demonstrates how to repeat the background image
if an image is small. You can use no-repeat value for the background-repeat
property if you don't want to repeat an image. In this case, the image will display
only once. By default, the background-repeat property will have a repeat value.
<table style="background-image:url(/https/www.scribd.com/images/pattern1.gif); background-
repeat: repeat;">
<tr><td>
This table has background image which repeats multiple times.
</td></tr>
</table>
 The following example which demonstrates how to repeat the background image
vertically.
<table style="background-image:url(/https/www.scribd.com/images/pattern1.gif); background-
repeat: repeat-y;">
<tr><td>
This table has background image set which will repeat vertically.
</td></tr> </table>

The following example demonstrates how to repeat the background image

horizontally.
<table style="background-image:url(/https/www.scribd.com/images/pattern1.gif); background-
repeat: repeat-x;">
<tr><td>
This table has background image set which will repeat horizontally.
</td></tr> </table>

3.5.2 Set the Background Image Position

The following example demonstrates how to set the background image position
100 pixels away from the left side.
<table style="background-image:url(/https/www.scribd.com/images/pattern1.gif);
background-position:100px;">
<tr><td>
Background image positioned 100 pixels away from the left.
</td></tr>
</table>

3.6 Background colour Management using CSS

The background-color property specifies the background color of an element. The background color of a
page is defined in the body selector: Example

body {background-color:#b0c4de;}
<p style="background-color:yellow;">
This text has a yellow background color. </p>

With CSS, a color is most often specified by:

1. a HEX value - like "#ff0000"
2. an RGB value - like "rgb(255,0,0)"
3. a color name - like "red"
In the example below, the h1, p, and div elements have different background colors:
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

3.6.1 CSS Colors - Hex Codes

A hexadecimal is a 6 digit representation of a color. The first two digits
(RR) represent a red value, the next two are a green value (GG), and the last are
the blue value (BB). Each hexadecimal code will be preceded by a pound or hash
sign ‘#’. Following are the examples to use Hexadecimal notation.
3.6.2 CSS Colors - Short Hex Codes
This is a shorter form of the six-digit notation. In this format, each digit is
replicated to arrive at an equivalent six-digit value. For example: #6A7 becomes
#66AA77.

3.6.3 CSS Colors - RGB Values

This color value is specified using the rgb( ) property. This property takes
three values, one each for red, green, and blue. The value can be an integer
between 0 and 255 or a percentage. NOTE: All the browsers does not support
rgb() property of color, so it is recommended not to use it.
3.7 Text Management using CSS
CSS is a language that describes the style of an HTML document. You can set the
following text properties of an element:

The color property is used to set the color of a text.

The direction property is used to set the text direction.
The letter-spacing property is used to add or subtract space between the
letters that make up a word.
The word-spacing property is used to add or subtract space between the
words of a sentence.
The text-indent property is used to indent the text of a paragraph. The
text-align property is used to align the text of a document. The text-
decoration property is used to underline, overline, and strikethrough text.
11
The text-transform property is used to capitalize text or convert text to
uppercase or lowercase letters.
The white-space property is used to control the flow and formatting of text.
The text-shadow property is used to set the text shadow around a text.

3.7.1 Set the Text Color

The following example demonstrates how to set the text color. Possible
value could be any color name in any valid format.
<p style="color:red;">This text will be written in red. </p>

3.7.2 Set the Text Direction

The following example demonstrates how to set the direction of a text.
Possible values are ltr or rtl.
<p style="direction:rtl;">This text will be rendered from right to left
</p> 3.7.3. Set the Space between Characters
The following example demonstrates how to set the space between
characters. Possible values are normal or a number specifying
space.

<p style="letter-spacing:5px;">This text is having space between letters.

</p>

3.7.4 Set the Space between Words

The following example demonstrates how to set the space between words.
Possible values are normal or a number specifying space.
 <p style="word-spacing:5px;">This text is having space between words.
</p>

3.7.5 Set the Text Indent

The following example demonstrates how to indent the first line of a
paragraph. Possible values are % or a number specifying indent
space.

<p style="text-indent:1cm;">
This text will have first line indented by 1cm and this line will
remain at its actual position this is done by CSS text-indent
property.
</p>

3.7.6 Set the Text Alignment

The following example demonstrates how to align a text. Possible values

are left, right, center, justify.

<p style="text-align:right;"> This will be right aligned. </p>

<p style="text-align:center;"> This will be center aligned.
</p> <p style="text-align:left;"> This will be left aligned. </p>

12
3.7.7 Decorating the Text

The following example demonstrates how to decorate a text. Possible

values are none, underline, overline, line-through, blink.

<p style="text-decoration:underline;"> This will be underlined </p>

<p style="text-decoration:line-through;"> This will be striked through.
</p>
<p style="text-decoration:overline;"> This will have a over line. </p> <p
style="text-decoration:blink;">This text will have blinking effect </p>

3.7.8 Set the Text Cases

The following example demonstrates how to set the cases for a text.
Possible values are none, capitalize, uppercase, lowercase.

<p style="text-transform:capitalize;"> This will be capitalized </p>

<p style="text-transform:uppercase;"> This will be in uppercase
</p> <p style="text-transform:lowercase;"> This will be in
lowercase </p>
The output of the above program is :
3.8 Font Management using CSS
A font is the combination of typeface and other qualities, such as size, pitch,
and spacing. For example, Times Roman is a typeface that defines the shape
of each character. Within Times Roman, however, there are many fonts to
choose from -- different sizes, italic, bold, and so on.You can set the following
font properties of an element:

The font-family property is used to change the face of a font.

 The font-style property is used to make a font italic or oblique.
The font-variant property is used to create a small-caps effect.
The font-weight property is used to increase or decrease how bold or light
a font appears.
The font-size property is used to increase or decrease the size of a font.
The font property is used as shorthand to specify a number of other font
properties.

3.8.1 Set the Font Family

Following is the example, which demonstrates how to set the font family
of an element. Possible value could be any font family name.
<p style="font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the default serif font
depending on which font you have at your system. </p>

3.8.2 Set the Font Style

The following example demonstrates how to set the font style of an

element. Possible values are normal, italic and oblique.

<p style="font-style:italic;">This text will be rendered in italic

style </p>
3.8.3 Set the Font Variant
The following example demonstrates how to set the font variant of an
element. Possible values are normal and small-caps.

<p style="font-variant:small-caps;"> This text will be rendered as small

caps </p>
3.8.4 Set the Font Weight
The following example demonstrates how to set the font weight of an
element. The font-weight property provides the functionality to specify
how bold a font is. Possible values could be normal, bold, bolder, lighter,
100, 200, 300, 400, 500, 600, 700, 800, 900.
<p style="font-weight:bold;"> This font is bold. </p>
<p style="font-weight:bolder;"> This font is bolder. </p>
<p style="font-weight:900;"> This font is 900 weight. </p>

3.8.5 Set the Font Size

The following example demonstrates how to set the font size of an
element. The font-size property is used to control the size of fonts.
Possible values could be xx-small, x-small, small, medium, large, x-large,
xx-large, smaller, larger, size in pixels or in %.

<p style="font-size:20px;"> This font size is 20 pixels </p>

<p style="font-size:small;"> This font size is small </p>
<p style="font-size:large;"> This font size is large </p>

3.8.6 Set the Font Size Adjust

The following example demonstrates how to set the font size adjust of an
element. This property enables you to adjust the x-height to make fonts
more legible. Possible value could be any number.

<p style="font-size-adjust:0.61;">This text is using a font-size-adjust

 value. </p>
3.8.7 Set the Font Stretch

The following example demonstrates how to set the font stretch of

an element. This property relies on the user's computer to have an
expanded or condensed version of the font being used.
Possible values could be normal, wider, narrower, ultra-condensed,
extra-condensed, condensed, semi-condensed, semi-expanded,
expanded, extra-expanded, ultra-expanded.
<p style="font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that your computer
doesn't have a condensed or expanded version of the font being
used. </p>

3.9 Managing hyperlinks using CSS

An element in an electronic document that links to another place in the same
document or to an entirely different document. A hyperlink, or simply a link, is a
reference to data that the reader can directly follow either by clicking, tapping, or
hovering. A hyperlink points to a whole document or to a specific element within
a document. Hypertext is text with hyperlinks. The text that is linked is called
anchor text. You can set the following properties of a hyperlink:

The :link signifies unvisited hyperlinks.

The :visited signifies visited hyperlinks.
The :hover signifies an element that currently has the user's mouse pointer
hovering over it.
The :active signifies an element on which the user is currently clicking.

Usually, all these properties are kept in the header part of the HTML document.
Remember a:hover MUST come after a:link and a:visited in the CSS definition in
order to be effective. Also, a:active MUST come after a:hover in the CSS
definition as follows:

<style type="text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>

3.9.1 Set the Color of Links

The following example demonstrates how to set the link color. Possible
values could be any color name in any valid format.

<style type="text/css">
a:link {color:#000000}
</style>

<a href="/html/index.htm">Black Link</a>

3.9.2 Set the Color of Visited Links

 The following example demonstrates how to set the color of the visited
links. Possible values could be any color name in any valid format.

<style type="text/css">
a:visited {color: #006600}
</style>
<a href="/html/index.htm">Click this link</a>

17
3.9.3 Change the Color of Links when Mouse is Over
The following example demonstrates how to change the color of links
when we bring a mouse pointer over that link. Possible values could be
any color name in any valid format.
<style type="text/css">
a:hover {color: #FFCC00}
</style>

<a href="/html/index.htm">Bring Mouse Here</a>

3.9.4 Change the Color of Active Links

The following example demonstrates how to change the color of active

links. Possible values could be any color name in any valid format.

<style type="text/css">
a:active {color: #FF00CC}
</style>

<a href="/html/index.htm">Click This Link</a>

3.10 Managing List using CSS

Lists are very helpful in conveying a set of either numbered or bulleted points.
This chapter teaches you how to control list type, position, style, etc., using CSS.
We have the following five CSS properties, which can be used to control lists:

The list-style-type allows you to control the shape or appearance of the

marker.
The list-style-position specifies whether a long point that wraps to a
second line should align with the first line or start underneath the start of
the marker.
The list-style-image specifies an image for the marker rather than a bullet
point or number.
The list-style serves as shorthand for the preceding properties.
The marker-offset specifies the distance between a marker and the text in
the list.

3.10.1 The list-style-type Property

The list-style-type property allows you to control the shape or style of a bullet
point (also known as a marker) in case of unordered lists and the style of
numbering characters in ordered lists. Here are the values, which can be used for
an unordered list:
Value Description

None NA

disc A filled-in
(default) circle

Circle An empty
circle

Square A filled-in
square

Here are the values, which can be used for an ordered list:
Value Description Example

Decimal Number 1,2,3,4…..

decimal 0 before the number 01, 02,

leading …..
zero

lower Lowercase alphanumeric a, b, c, ….

alpha characters

upper Uppercase alphanumeric A, B, C,

alpha characters D, E..

lower Lowercase Roman i, ii, iii, iv,

roman numerals v

upper Uppercase Roman I, II, III,

roman numerals IV, V

3.10.2 The list-style-position Property

The list-style-position property indicates whether the marker should
appear inside or outside of the box containing the bullet points. It can have
one of the two values:
Value Description

None NA

Inside If the text goes onto a second line, the text will wrap
underneath the marker. It will also appear indented to
where the text would have started if the list had a value of
outside.

Outside If the text goes onto a second line, the text will be
aligned with the start of the first line (to the right of the
bullet).
20
Example :
<html>
<head>
<Title>This is my inline css page</Title>
</head>
<body>
<ul style="list-style-type:circle; list-stlye
position:outside;"><li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style="list-style-type:square;list-style
position:inside;"><li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style-type:decimal;list-stlye
position:outside;"><li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-alpha;list-style-position:inside;">

<li>Maths</li>
<li>Social Science</li><li>Physics</li>
</ol>
</body>
</html>
3.11 Designing Tables using CSS
Tables are an excellent way to organize and display information on a page. You
can set the following properties of a table:

∙ The border-collapse specifies whether the browser should control the

appearance of the adjacent borders that touch each other or whether each
cell should maintain its style.
∙ The border-spacing specifies the width that should appear between table
cells.
∙ The caption-side captions are presented in the <caption> element. By
default, these are rendered above the table in the document. You use the
caption-side property to control the placement of the table caption.
∙ The empty-cells specify whether the border should be shown if a cell is
empty.
∙ The table-layout allows browsers to speed up the layout of a table by using
the first width properties it comes across for the rest of a column rather
than having to load the whole table before rendering it.

3.11.1 The order-collapse Property

This property can have two values collapse and separate. The following
example uses both the values:

<html>
 <head>
<Title>This is my inline css page</Title>
</head>
<body>
<style type="text/css">
table.one
{border-collapse:collapse;}
table.two
{border-collapse:separate;}
td.a
{
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b
{
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}

22
</style>
<table class="one">
<caption>Collapse Border Example</caption>
<tr><td class="a"> Cell A Collapse Example</td></tr>
<tr><td class="b"> Cell B Collapse Example</td></tr>
</table><br />
<table class="two">
<caption>Separate Border Example</caption>
<tr><td class="a"> Cell A Separate Example</td></tr>
<tr><td class="b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>

3.11.2 The border-spacing Property

The border-spacing property specifies the distance that separates the
adjacent cells’ borders. It can take either one or two values; these should be units
of length. If you provide one value, it applies to both vertical and horizontal
borders. Or you can specify two values, in which case, the first refers to the
horizontal spacing and the second to the vertical spacing:
NOTE: Unfortunately, this property does not work in Netscape 7 or IE 6.
Now let's modify the previous example and see the effect:
<style type="text/css">
table.one
{
border-collapse:separate; width:400px;
border-spacing:10px;
}
table.two
{
border-collapse:separate; width:400px;
border-spacing:10px 50px;
}
</style>
<table class="one" border="1">
<caption>Separate Border Example with border-
spacing</caption> <tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table><br />
<table class="two" border="1">
<caption>Separate Border Example with border-
spacing</caption> <tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>

3.11.3 The empty-cells Property

The empty-cells property indicates whether a cell without any content should have
a border displayed. This property can have one of the three values - show, hide, or
inherit. Here is the empty-cells property used to hide borders of empty cells in the
<table> element.

Example:

<html>
<head>
<Title>This is my inline css page</Title>
</head>
<body>
<style type="text/css">
table.empty
{
width:350px;
border-collapse:separate;
empty-cells:hide;
}
td.empty
{
padding:5px;
border-style:solid;

24
border-width:1px;
border-color:#999999;}
</style>
<table class="empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td><td
class="empty">value</td></tr> <tr>
<th>Row Title</th>
<td class="empty">value</td><td class="empty"></td>
</tr>
</table>
</body>
</html>
3.12 Working with Box Model
You have seen the border that surrounds every box i.e. element, the padding that
can appear inside each box, and the margin that can go around them. In this
chapter, we will learn how to change the dimensions of boxes. We have the
following properties that allow you to control the dimensions of a box.
The height property is used to set the height of a box.
The width property is used to set the width of a box.
The line-height property is used to set the height of a line of text.
The max-height property is used to set a maximum height that a box can
be.
The min-height property is used to set the minimum height that a box can
be.
The max-width property is used to set the maximum width that a box can
be.
The min-width property is used to set the minimum width that a box can
be.

3.12.1 The Height and Width Properties

The height and width properties allow you to set the height and width for boxes.
They can take values of a length, a percentage, or the keyword auto.
3.12.2 The line-height Property

The line-height property allows you to increase the space between lines of text.
The value of the line-height property can be a number, a length, or a percentage.
3.12.3 The max-height Property

The max-height property allows you to specify the maximum height of a box. The
value of the max-height property can be a number, a length, or a percentage.

NOTE: This property does not work in either Netscape 7 or IE 6.

3.12.4 The max-width Property

The max-width property allows you to specify the maximum width of a box. The
value of the max-width property can be a number, a length, or a percentage.
NOTE: This property does not work in either Netscape 7 or IE 6.

3.13 Designing borders using CSS

The border properties allow you to specify how the border of the box representing
an element should look. There are three properties of a border you can change:

The border-color specifies the color of a border.

 The border-style specifies whether a border should be solid, dashed line,
double line, or one of the other possible values.
The border-width specifies the width of a border.

3.13.1 The border-color Property

The border-color property allows you to change the color of the border
surrounding an element. You can individually change the color of the bottom, left,
top and right sides of an element's border using the properties:

border-bottom-color changes the color of bottom border.

border-top-color changes the color of top border.
border-left-color changes the color of left border.
border-right-color changes the color of right border.

3.13.2 The border-style Property

The border-style property allows you to select one of the following styles of
border:
none: No border. (Equivalent of border-width:0;)
solid: Border is a single solid line.
dotted: Border is a series of dots.
dashed: Border is a series of short lines.
double: Border is two solid lines.
groove: Border looks as though it is carved into the page.
ridge: Border looks the opposite of groove.
inset: Border makes the box look like it is embedded in the page.
outset: Border makes the box look like it is coming out of the canvas.
hidden: Same as none, except in terms of border-conflict resolution for table
elements.

You can individually change the style of the bottom, left, top, and right borders of
an element using the following properties:

border-bottom-style changes the style of bottom border.

border-top-style changes the style of top border.
border-left-style changes the style of left border.
border-right-style changes the style of right border.

3.14 Designing outline using CSS

Outlines are very similar to borders, but there are few major differences as
well: An outline does not take up space.
Outlines do not have to be rectangular.
Outline is always the same on all sides; you cannot specify different values
for different sides of an element.

NOTE: The outline properties are not supported by IE 6 or Netscape 7. You can
set the following outline properties using CSS.

The outline-width property is used to set the width of the outline.

 The outline-style property is used to set the line style for the outline.
The outline-color property is used to set the color of the outline.
The outline property is used to set all the above three properties in a single
statement.

3.14.1 The outline-width Property

The outline-width property specifies the width of the outline to be added to the
box. Its value should be a length or one of the values thin, medium, or thick, just
like the border-width attribute. A width of zero pixels means no outline.

3.14.2 The outline-style Property

The outline-style property specifies the style for the line (solid, dotted, or dashed)
that goes around an element. It can take one of the following values:
none: No border. (Equivalent of outline-width:0;)
solid: Outline is a single solid line.
dotted: Outline is a series of dots.
dashed: Outline is a series of short lines.
double: Outline is two solid lines.
groove: Outline looks as though it is carved into the page.
ridge: Outline looks the opposite of groove.
inset: Outline makes the box look like it is embedded in the page.
outset: Outline makes the box look like it is coming out of the canvas.
hidden: Same as none.

3.14.3 The outline-color Property

The outline-color property allows you to specify the color of the outline. Its value
should either be a color name, a hex color, or an RGB value, as with the color and
border-color properties. Here is an example:

3.15 Setting Page Margin using CSS

The margin property defines the space around an HTML element. It is
possible to use negative values to overlap content. The values of the margin
property are not inherited by the child elements. Remember that the adjacent
vertical margins (top and bottom margins) will collapse into each other so that the
distance between the blocks is not the sum of the margins, but only the greater of
the two margins or the same size as one margin if both are equal.
We have the following properties to set an element margin.
The margin specifies a shorthand property for setting the margin
properties in one declaration.
The margin-bottom specifies the bottom margin of an element.
The margin-top specifies the top margin of an element.
The margin-left specifies the left margin of an element.
The margin-right specifies the right margin of an element.

3.15.1 The Margin Property

 The margin property allows you to set all of the properties for the four
margins in one declaration. Here is the syntax to set margin around a paragraph:
<style type="text/css">
p {margin: 15px}
all four margins will be 15px

p {margin: 10px 2%}

top and bottom margin will be 10px, left and right margin will be 2% of the total
width of the document.

p {margin: 10px 2% -10px}

top margin will be 10px, left and right margin will be 2% of the total width of the
document, bottom margin will be -10px

p {margin: 10px 2% -10px auto}

top margin will be 10px, right margin will be 2% of the total width of the
document, bottom margin will be -10px, left margin will be set by the browser
</style>

3.15.2 The margin-bottom Property

The margin-bottom property allows you to set the bottom margin of an element. It
can have a value in length, %, or auto.

3.15.3 The margin-left Property

The margin-left property allows you to set the left margin of an element. It can
have a value in length, %, or auto. Here is an example:

4.1 Padding using CSS

The padding property allows you to specify how much space should appear
between the content of an element and its border: The value of this attribute
should be either a length, a percentage, or the word inherits. If the value is inherit,
it will have the same padding as its parent element. If a percentage is used, the
percentage is of the containing box. The following CSS properties can be used to
control lists. You can also set different values for the padding on each side of the
box using the following properties:
The padding-bottom specifies the bottom padding of an element.
The padding-top specifies the top padding of an element.
The padding-left specifies the left padding of an element.
The padding-right specifies the right padding of an element.
The padding serves as shorthand for the preceding properties.

4.1.1 The padding-bottom Property

The padding-bottom property sets the bottom padding (space) of an element. This
can take a value in terms of length of %.
4.1.2 The padding-top Property
The padding-top property sets the top padding (space) of an element. This can take a
value in terms of length of %. Here is an example:
4.2 Setting Display Using CSS
The display property is the most important CSS property for controlling layout.
The display property specifies if/how an element is displayed. Every HTML
element has a default display value depending on what type of element it is. The
default display value for most elements is block or inline. A block element is
often called a block-level element. An inline element is always just called an
inline element.

4.2.1 Block-level Elements

A block-level element always starts on a new line and takes up the full width
available (stretches out to the left and right as far as it can).

The <div> element is a block-level element.

Examples of block-level elements:

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
<div>
div is the standard block-level element. A block-level element
starts on a new line and stretches out to the left and right as far as it
can. Other common block-level elements are p and form, and new
in HTML5 are header, footer, section, and more.
</div>
4.2.2 Inline Elements
An inline element does not start on a new line and only takes up
as much width as necessary. This is an inline <span>
element inside a paragraph.
Span is the standard inline element. An inline element can wrap
some text inside a paragraph <span> like this </span> without
disrupting the flow of that paragraph. The a element is the most
common inline element, since you use them for links.
Examples of inline elements:
<span>
<a>
<img>
CSS Syntax
Display: value;

The values of display property have the following meanings:

Block -This value causes an element to generate a block box. Inline-block

- This value causes an element to generate an inline-level block container. The
inside of an inline-block is formatted as a block box, and the element itself is
formatted as an atomic inline-level box. Inline - This value causes an
element to generate one or more inline boxes.
list-item - This value causes an element (e.g., LI in HTML) to generate a
principal block box and a marker box.
None - This value causes an element to not appear in the formatting
 structure

Here are some examples of the display property:

p { display: block }
em {display: inline }
li { display: list-item }
4.3 Setting width and Maxwidth using CSS
Setting the width of a block-level element will prevent it from stretching out to the
edges of its container. Then, you can set the margins to auto, to horizontally center
the element within its container. The element will take up the specified width, and
the remaining space will be split equally between the two margins:

This <div> element has a width of 500px, and margin set to

auto.
Note: The problem with the <div> above occurs when the browser window is smaller than the width of
the element. The browser then adds a horizontal scrollbar to the page. Using max-width instead, in this
situation, will improve the browser's handling of small windows. This is important when making a site
usable on small devices:

This <div> element has a max-width of 500px, and margin

set to auto.

Tip: Resize the browser window to less than 500px wide, to see the difference
between the two divs!

Setting Position using CSS

CSS helps you to position your HTML element. You can put any HTML element
at whatever location you like. You can specify whether you want the element
positioned relative to its natural position in the page or absolute based on its
parent element. Now, we will see all the CSS positioning related properties with
examples.

4.4.1 Relative Positioning

Relative positioning changes the position of the HTML element relative to where
it normally appears. So "left:20" adds 20 pixels to the element's LEFT position.
You can use two values top and left along with the position property to move an
HTML element anywhere in an HTML document.

Move Left - Use a negative value for left.

Move Right - Use a positive value for left.
Move Up - Use a negative value for top.
Move Down - Use a positive value for top.

NOTE: You can use the bottom or right values as well in the same way as top and
left.
4.4.2 Absolute Positioning
An element with position: absolute is positioned at the specified coordinates
relative to your screen top-left corner. You can use two values top and left along
with the position property to move an HTML element anywhere in HTML
document.
 Move Left - Use a negative value for left.
Move Right - Use a positive value for left.
Move Up - Use a negative value for top.
Move Down - Use a positive value for top.

NOTE: You can use bottom or right values as well in the same way as top and
left.
Here is an example:
<div style="position: absolute; left: 80px; top: 20px; background-color:
yellow ;">
This div has absolute positioning.
</div>
4.4.3 Fixed Positioning
Fixed positioning allows you to fix the position of an element to a particular spot
on the page, regardless of scrolling. Specified coordinates will be relative to the
browser window. You can use two values top and left along with the position
property to move an HTML element anywhere in the HTML document.

Move Left - Use a negative value for left.

Move Right - Use a positive value for left.
Move Up - Use a negative value for top.
Move Down - Use a positive value for top.

NOTE: You can use bottom or right values as well in the same way as top and
left.

Here is an example:

<div style="position:fixed;left:80px;top:20px; background

color:yellow;">
This div has fixed positioning.
</div>

4.5 Setting the float property using CSS

A float is a box that is shifted to the left or right on the current line. The most
interesting characteristic of a float (or "floated" or "floating" box) is that content
may flow along its side (or be prohibited from doing so by the property).

With CSS float, an element can be pushed to the left or right, allowing other
elements to wrap around it. Float is very often used for images, but it is also
useful when working with layouts.

A line box is next to a float when there exists a vertical position that satisfies all
of these four conditions:
(a) At or below the top of the line box,
(b) At or above the bottom of the line box
(c) Below the top margin edge of the float, and
(d) Above the bottom margin edge of the float.

4.5.1 Elements Float

 Elements are floated horizontally; this means that an element can only be
floated left or right, not up or down. A floated element will move as far to the left
or right as it can. Usually this means all the way to the left or right of the
containing element. The elements after the floating element will flow around it.
The elements before the floating element will not be affected. If an image is
floated to the right, a following text flows around it, to the left:
Example:

img { float:right; }

If you place several floating elements after each other, they will float next to each
other if there is room. Here we have made an image gallery using the float
property:

Example

.thumbnail { float:left; width:110px; height:90px; margin:5px; }

4.5.2 Turning off Float - Using Clear

Elements after the floating element will flow around it. To avoid this, use
the clear property. The clear property specifies which sides of an element
other floating elements are not allowed. Add a text line into the image
gallery, using the clear property:

Example:
.text_line { clear:both; }

4.5.3 All CSS Float Properties

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

clear Specifies which sides of left right 1

an element where other both none
floating elements are not inherit
allowed

float Specifies whether or not left right 1

a box should float none
inherit

4.6 Inline Block Properties

It has been possible for a long time to create a grid of boxes that fills the
browser width and wraps nicely (when the browser is resized), by using the float
property. However, the inline-block value of the display property makes this even
easier. Inline-block elements are like inline elements but they can have a width
and a height.

Examples
The old way - using float (notice that we also need to specify a clear property for
the element after the floating boxes):
<!DOCTYPE html>
<html>
<head>
<style>
.floating-box
{
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}

.after-box
{
clear: left;
border: 3px solid red;
}
</style>
</head>
<body>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="after-box">Another box, after the floating
boxes...</div> </body>
</html>
4.7 Horizontal Alignment in CSS

In CSS, several properties can be used to align elements horizontally and

vertically.
4.7.1 Center Align Elements

To horizontally center a block element (like <div>), use margin: auto;

Setting the width of the element will prevent it from stretching out to the edges of
its container. The element will then take up the specified width, and the remaining
space will be split equally between the two margins:
Example:

.center
{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}

Note: Center aligning has no effect if the width property is not set (or set to
100%).
4.7.2 Center Align Text

To just center the text inside an element, use text-align:

center; Example:
.center
{
text-align: center;
border: 3px solid green;
}
4.7.3 Center an Image

To center an image, use margin: auto; and make it into a block

element: img
{
display: block;
margin: auto;
width: 40%;
}

4.7.4 Left and Right Align - Using position

One method for aligning elements is to use position: absolute;:

Example:

.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}

Note: Absolute positioned elements are removed from the normal flow,
and can overlap elements.
Tip: When aligning elements with position, always define margin and padding for
the <body> element. This is to avoid visual differences in different browsers.
There is also a problem with IE8 and earlier, when using position. If a container
element (in our case <div class="container">) has a specified width, and the
!DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px
margin on the right side. This seems to be space reserved for a scrollbar. So,
always set the !DOCTYPE declaration when using position:

<!DOCTYPE html>
<html>
<head>
<style>
body
{
margin: 0;
padding: 0;
}
.container
 {
position: relative;
width: 100%;
}
.right
{
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
</style>
</head>
<body>

<h2>Right Align</h2>

<div class="container">
<div class="right">
<p><b>Note: </b>When aligning using the position property,
always include the !DOCTYPE declaration! If missing, it can
produce strange results in IE browsers.</p>
</div>
</div>
</body>
</html>
4.8 Working with Combinatory
A combinatory is something that explains the relationship between the selectors. A
CSS selector can contain more than one simple selector. Between the simple
selectors, we can include a combinatory.
There are four different combinatory in CSS:
descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)
4.8.1 Descendant Selector

The descendant selector matches all elements that are descendants of a

specified element.

The following example selects all <p> elements inside <div> elements:

Example
div p
{
background-color: yellow;
}
4.8.2 Child Selector
 The child selector selects all elements that are the immediate children of a
specified element.

The following example selects all <p> elements that are immediate
children of a <div> element:

Example
<div > p {
background-color: yellow;
}
4.8.3 Adjacent Sibling Selector

The adjacent sibling selector selects all elements that are the adjacent
siblings of a specified element. Sibling elements must have the same
parent element, and "adjacent" means "immediately following". The
following example selects all <p> elements that are placed immediately
after <div> elements:

Example:
div + p {
background-color: yellow;
}

4.8.4 General Sibling Selector

The general sibling selector selects all elements that are siblings of a
specified element. The following example selects all <p> elements that are
siblings of <div> elements:
Example:
div ~ p {
background-color: yellow;
}

4.9 Working with Pseudo-class

A pseudo-class is used to define a special state of an element. For example, it
can be used to:
Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus

Syntax
The syntax of pseudo-classes:

selector: pseudo-class
{
property: value;
}
4.9.1 Anchor Pseudo-classes
Links can be displayed in different ways:
Example
 /* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */

a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}
Note: a: hover MUST come after a: link and a:visited in the CSS
definition in order to be effective!a:active MUST come after a:hover in the
CSS definition in order to be effective! Pseudo-class names are not case
sensitive.

4.9.2 Pseudo-classes and CSS Classes

Pseudo-classes can be combined with CSS classes: When you hover over
the link in the example, it will change color:
Example
a.highlight:hover
{
color: #ff0000;
}
Hover on <div>
An example of using the: hover pseudo-class on a <div>
element: Example
div:hover
{
background-color: blue;
}
4.9.3 Simple Tooltip Hover
Hover over a <div> element to show a <p> element (like a
tooltip): Hover over me to show the <p> element.
p
{
display: none;
background-color: yellow;
padding: 20px;
}

div:hover p
{
display: block;
}
4.9.4 The: first-child Pseudo-class
The: first-child pseudo-class matches a specified element that is the first
child of another element.
4.9.5 Match the first <p> element
In the following example, the selector matches any <p> element that is the
first child of any element:

Example
p: first-child

{
color: blue;
}

Match the first <i> element in all <p> elements

In the following example, the selector matches the first <i> element in all
<p> elements: Example
p i:first-child
{
color: blue;
}
Selector Example Example description

:active a:active Selects the active link

:checked input:checked Selects every checked <input>

element

:disabled input:disabled Selects every disabled <input>

element

:empty p:empty Selects every <p> element that has

no children

:enabled input:enabled Selects every enabled <input>

element

:first-child p:first-child Selects every <p> elements that is

the first child of its parent

:first-of-type p:first-of-type Selects every <p> element that is

the first <p> element of its parent

:focus input:focus Selects the <input> element that

has focus

:hover a:hover Selects links on mouse over

:in-range input:in-range Selects <input> elements with a

value within a specified range

:invalid input:invalid Selects all <input> elements with

an invalid value

:lang(language) p:lang(it) Selects every <p> element with a

lang attribute value starting with
"it"
:last-child p:last-child Selects every <p> elements that is
the last child of its parent

:last-of-type p:last-of-type Selects every <p> element that is

the last <p> element of its parent

:link a:link Selects all unvisited links

:not(selector) :not(p) Selects every element that is not a

<p> element

:nth-child(n) p:nth-child(2) Selects every <p> element that is

the second child of its parent

:nth-last p:nth-last Selects every <p> element that is

child(n) child(2) the second child of its parent,
counting from the last child

:nth-last-of p:nth-last-of Selects every <p> element that is

type(n) type(2) the second <p> element of its
parent, counting from the last child

:nth-of-type(n) p:nth-of Selects every <p> element that is

type(2) the second <p> element of its
parent

:only-of-type p:only-of Selects every <p> element that is

type the only <p> element of its parent

:only-child p:only-child Selects every <p> element that is

the only child of its parent

:optional input:optional Selects <input> elements with no

63
"required" attribute

:out-of-range input:out-of Selects <input> elements with a

range value outside a specified range

:read-only input:read Selects <input> elements with a

only "readonly" attribute specified

:read-write input:read Selects <input> elements with no

write "readonly" attribute

:required input:required Selects <input> elements with a

"required" attribute specified

:root root Selects the document's root element

:target #news:target Selects the current active #news

element (clicked on a URL
containing that anchor name)

:valid input:valid Selects all <input> elements with a

valid value

:visited a:visited Selects all visited links

4.10 Working with Pseudo-elements

CSS pseudo-elements are used to add special effects to some selectors. You do
not need to use JavaScript or any other script to use those effects. A simple syntax
of pseudo-element is as follows:

selector: pseudo-element {property: value}

CSS classes can also be used with the pseudo-elements:

selector. class: pseudo-element {property: value}

The most commonly used pseudo-elements are as follows:

Value Description

:first-line Use this element to add special styles to the

first line of the text in a selector.

:first Use this element to add special style to the

letter first letter of the text in a selector.

:before Use this element to insert some content before

an element.

:after Use this element to insert some content after

an element.

64
4.10.1 The: first-line pseudo-element

The following example demonstrates how to use the: first-line element to add
special effects to the first line of elements in a document.

The above program will produce the following result :

4.10.2 The: first-letter pseudo-element

The following example demonstrates how to use the: first-letter element to add special
effect to the first letter of elements in the document.
4.10.3 The: before pseudo-element

The : before pseudo-element can be used to insert some content before the
content of an element. The following example demonstrates how to use
:before element to add some content before any element.

<style type="text/css">
p:before
{
content: url(/https/www.scribd.com/images/bullet.gif)
}
</style>
<p> This line will be preceded by a bullet.</p>
 <p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>

4.10.4 The: after pseudo-element

The :after pseudo-element can be used to insert some content after the
content of an element. The following example demonstrates how to use:
after element to add some content after any element.

<style type="text/css">
p:after
{
content: url(/https/www.scribd.com/images/bullet.gif)
}
</style>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>

4.10.5 The ::selection Pseudo-element

The: selection pseudo-element matches the portion of an element that is selected
by a user. The following CSS properties can be applied to:
selection: color, background, cursor, and outline. The following example makes
the selected text red on a yellow background: Here is an example:

<!DOCTYPE html>
<html>
<head>
<style>
::-moz-selection { /* Code for Firefox */
color: red;
background: yellow;
}
::selection {
color: red;
background: yellow;
}
</style>
</head>
<body>
<h1>Select some text on this page:</h1>
<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>
<p><strong>Note:</strong> ::selection is not supported in Internet
Explorer 8 and earlier versions.</p>
<p><strong>Note:</strong> Firefox supports an alternative, the ::-moz
selection property.</p>
</body>
</html>

4.11 Creating a navigation bar

A navigation bar (or navigation system) is a section of a graphical user
interface intended to aid visitors in accessing information. Navigation bars are
implemented in file browsers, web browsers and as a design element of some web
sites. A set of buttons or images in a row or column that serves as a control point
to link the user to sections on a Web site. The navigation bar may also be a
single graphic image with multiple selections.
4.11.1 Navigation Bar = List of Links
A navigation bar needs standard HTML as a base. In our examples we will build
the navigation bar from a standard HTML list. A navigation bar is basically a list
of links, so using the <ul> and <li> elements makes perfect sense: Example <ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Now let's remove the bullets and the margins and padding from the list:
ul
{
list-style-type:none;
margin:0;
padding:0;
}
Example explained:
list-style-type:none - Removes the bullets. A navigation bar does not need
list markers
Setting margins and padding to 0 to remove browser default settings

The code in the example above is the standard code used in both vertical, and
horizontal navigation bars.
4.11.2 Vertical Navigation Bar
To build a vertical navigation bar we only need to style the <a> elements, in
addition to the code above:
Example
a { display:block; width:60px; }
Example explained:
display:block - Displaying the links as block elements makes the whole link
area clickable (not just the text), and it allows us to specify the width
width:60px - Block elements take up the full width available by default. We
want to specify a 60 px width .
Note: Always specify the width for <a> elements in a vertical navigation bar. If
you omit the width, IE6 can produce unexpected results. You can also set the
width of <ul>, and remove the width of <a>, as they will take up the full width
available when displayed as block elements. This will produce the same result as
our previous example:

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
 li a {
display: block;
}

4.11.3 Center Links & Add Borders

Add text-align:center to <li> or <a> to center the links. Add the border property to
<ul> add a border around the navbar. If you also want borders inside the navbar,
add aborder-bottom to all <li> elements, except for the last one:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}

li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>

 <p>In this example, we center the navigation links and add a border to the
navigation bar.</p>

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

4.11.4 Horizontal Navigation Bar

There are two ways to create a horizontal navigation bar. Using inline or
floating list items. Both methods work fine, but if you want the links to be the
same size, you have to use the floating method. Create a basic horizontal
navigation bar with a dark background color and change the
background color of the links when the user moves the mouse over
them:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li { float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
 li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

4.12 Working with images

Images play an important role in any webpage. Though it is not recommended to

include a lot of images, but it is still important to use good images wherever
required. CSS plays a good role to control image display. You can set the
following image properties using CSS.

The border property is used to set the width of an image border.

The height property is used to set the height of an image.

The width property is used to set the width of an image.
The -moz-opacity property is used to set the opacity of an image.

4.12.1 The Image Border Property

The border property of an image is used to set the width of an image border. This
property can have a value in length or in %. A width of zero pixels means no
border.

4.12.2 The Image Width Property

The width property of an image is used to set the width of an image. This property
can have a value in length or in %. While giving value in %, it applies it in respect
of the box in which an image is available.