UNIT-I

INTRODUCTION TO WEB TECHNOLOGIES

Web technology is the development of the mechanism that allows two of more computer
devices to communicate over a network.
For instance, in a typical office setting, a number of computers plus additional devices such
as printers may be interconnected via a network, allowing for quick and convenient
transmission of information. The processes involved in web technology are complex and
diverse, which is why major businesses employ whole departments to deal with the issue.
Web technology has revolutionized communication methods and has made operations far
more efficient.

Advantages of web technology:

 Web technology offers convenience and a high speed of communication in the
computer world.
 Whether in the office or the home, processes using a computer are more swift and
straightforward with the use of a network.
 Web technology allows messages to be sent around a system, whereas before it may
have been necessary to employ a runner or leave your workspace to communicate a
message.
 Web technology reduces costs and makes a company more efficient, raising business
potential.

Disadvantages of web technology:

 Matters involving web technology can be very complicated, and it would be difficult
for someone without relevant experience to sort a network problem out. This means it
is necessary to employ someone with the specific skills to solve network issues, which
costs money.
 Additionally, the existence of a network provides the opportunity for an attack on the
computer system. Weaknesses in a network could be exploited; important information
could be stolen or destroyed and malware could infect the various network systems.
For this reason, network security is another issue that must be considered when using
web technology.

Web server can refer to either the hardware (the computer) or the software (the computer
application) that helps to deliver Web content that can be accessed through the Internet.

TYPES OF THE WEB SERVERS AND INSTALLATION STEPS:

1. APACHE TOMCAT WEB SERVER:

Most popular Web server in the world developed by the Apache software
foundation. Apache web server is an open source and can be installed as almost all operating
systems including Linux, Unix, Windows, FreeBSD, Mac OS X and more. About 60% of
webserver machines run the Apache web server. Can have Apache with Tomcat module to
have JSP and J2EE related support.

1
Guide to download and install Tomcat 6:

Downloading and installing tomcat

Click the link: http://tomcat.apache.org/download-60.cgi and follow the steps according to
your requirement to achieve Tomcat server.

Step1: Installation of JDK:

Before beginning the process of installing Tomcat on your system, ensure first the availability
of JDK on your system program directory. Install it on your system if not already installed
(because any version of tomcat requires the Java 1.6 or higher versions) and then set the class
path (environment variable) of JDK. To set the JAVA_HOME Variable: you need to
specify the location of the java run time environment to support the Tomcat else Tomcat
server can not run.
This variable contains the path of JDK installation directory.
set JAVA_HOME=C:\Program Files\Java\jdk1.6

Note: it should not contain the path up to bin folder. Here, we have taken the URL path
according to our installation convention.
For Windows OS, go through the following steps:

Start menu->Control Panel->System->Advanced tab

->Environment Variables->New->set the Variable name
= JAVA_HOME and variable value = C:\Program
Files\Java\jdk1.6

Now click on all the subsequent ok buttons one by one. It will set the JDK path.

Step 2: For setting the class path variable for JDK, do like this:

Start menu->Control Panel->System->Advanced tab

->Environment Variables->New->
Set PATH="C:\Program Files\Java\jdk1.6\bin";
%PATH%

OR
First, right click on the

My Computer->properties->advance->Environment
Variables->path.

Now, set bin directory path of JDK in the path variable

Step 3: The process of installing Tomcat 6.0 begins here from now. It takes various steps for
installing and configuring the Tomcat 6.0. For Windows OS, Tomcat comes in two forms:
.zip file and .exe file (the Windows installer file). Here we are exploring the installation
process by using the .exe file. First unpack the zipped file and simply execute the '.exe' file.

2
A Welcome screen shot appears that shows the beginning of installation process. Just click on
the 'Next' button to proceed the installation process.

Steps 4: A screen of 'License Agreement' displays.

Click on the 'I Agree' button.

Step 5: A screen shot appears asking for the 'installing location'

Choose the default components and click on the 'Next' button.

3
Step 6:

A screen shot of 'Configuration Options' displays on the screen. Choose the location for the
Tomcat files as per your convenience. You can also opt the default Location

The port number will be your choice on which you want to run the tomcat server. The port
number 8080 is the default port value for tomcat server to proceed the HTTP requests. The
user can also change the 'port number' after completing the process of installation; for this,
users have to follow the following tips.

Go to the specified location as " Tomcat 6.0 \conf \server.xml ". Within the server.xml file
choose "Connector" tag and change the port number.

Now, click on the 'Next' button to further proceed the installation process.

Step 7:

A Window of Java Virtual Machine displays on the screen

4
This window asks for the location of the installed Java Virtual Machine. Browse the location
of the JRE folder and click on the Install button. This will install the Apache tomcat at the
specified location.

Step 8:

A processing window of installing displays on the screen.

To get the information about installer click on the "Show details" button

Step 9: A screen shot of 'Tomcat Completion' displays on the screen.

Click on the 'Finish' button.

Step 10: A window of Apache Service Manager appears with displaying the running process.

5
Let the running process goes on.

Step 11: After completing the installation process, the Apache Tomcat Manager appears on
the toolbar panel like shown in the below picture.

Configuring Tomcat Manager

To Configure the Tomcat Manager, there are two ways; either user can configure Tomcat
directly from the toolbar panel or can configure it from Control Panel Section.

i) Configuring from toolbar Panel

To Configure Apache Tomcat web server from the toolbar panel, you have to press 'double
click' on the appeared icon.

6
A configured window appears on the desktop. Now, just click on the Startup button. The
installation process will be completed.

ii) Configuration from the Control Panel

To configure the Apache Tomcat Manager, Users will have to follow the follwing steps:

Click on the Start up button -- select Control Panel -- Administrator Tool -- Services -- select
Apache Tomcat.
The following screen displays on the monitor.

Double click on the Apache Tomcat. The window of Apache Tomcat Properties appears on
the screen.

7
Now, Click on the start up button. The Apache Tomcat is now ready to function.

To operate it, follow the below steps of processing.

Start the Tomcat Server:

1.Start the tomcat server from the bin folder of Tomcat 6.0 directory by double clicking the
"tomcat6.exe" file. OR create a shortcut of this .exe file at your desktop.
2. Now Open web browser and type URL http://localhost:8080 in the address bar to test the
server
3. To Stop the Tomcat Server: Stop the server by pressing the "Ctrl + c" keys.

The screen of Apache Tomcat software looks like this:

2. XAMPP (BUNDLE SERVER):

It is a free and open source cross platform Web server solution stack package, consisting
mainly Apache HTTP Server, MySQL data base and interpreters for scripts written in
PHP and Perl programming languages.

XAMPP's name is an acronym for:

X (to be read as "cross", meaning cross-platform)
Apache HTTP Server
MySQL
PHP
Perl

8
  It is a form of mini-server that can run on almost any windows os.
 It is a package of independently created program installed computers use a Microsoft
windows os.
 It is a windows web development environment. It allows to create web applications
with Apache, PHP and the MySQL database. It also comes with PHPMyAdmin to
easily manage databases.
 It installs automatically and its usage is very intuitive.

Installing XAMPP on Windows:

1. Download the software from: http://www.apachefriends.org/en/xampp-

windows.html#641. Select the Installer option under the Basic Package. You may be
taken to a page that presents you with a bunch of different download locations. Just
click one of the download buttons, and then save the file to your desktop. Once
downloaded, the installer works like most Windows installers.

In Internet Explorer, you may get a warning about downloading the file. Click the
yellow information bar that appears above the Web page in IE, and choose Download
File…

2. Double-click the .exe file you downloaded.

A window opens, asking you to select the language you’d like to use.

If a warning dialog appears click the "Allow" option to install XAMPP.

3. Choose a language from the menu, and then click OK.

A Setup Wizard window appears, ready to step you through the setup process.

In Vista you may see a message warning you that XAMPP may not work when
installed in the C:\Program Files directory. The default installation is in C:\XAMPP
so you don’t have to worry about this problem.

4. Click the Next button.

The installer suggests putting the application on your main drive at C:\XAMPP. You
can pretty much install it anywhere, but with the Vista operating system you may
encounter problems if you install it in C:\Program Files.
5. Click the Next button once again.
The XAMPP Options window appears (see below). In most cases, it’s fine to leave all
the window’s checkboxes just as you see; see the note below for details.

9
 If you plan on doing a lot of development, day in and day out, you might want to turn
on the “Install Apache as service” and “Install MySQL as service” checkboxes. A
service starts up every time you turn on your computer, so Apache, PHP, and MySQL
are always running. However, if you won’t be building database sites frequently, or
you don’t have a lot of RAM in your computer, don’t turn on these boxes (you’ll just
have to manually start the servers when you wish to build dynamic pages, using the
XAMPP control panel described on the next page).

6. Click Install.
The installer places all the files onto your system. This process takes a while, since a
lot of programs and files are being installed.
7. Finally, click the Finish button.
A window appears “congratulating” you (way to double-click the installer program!),
and asking whether you wish to start the XAMPP Control panel.
8. Click Yes, to open the XAMPP Control Panel (see screenshot below).
The XAMPP Control Panel lets you start and stop the Apache Web server and
MySQL database server.

In this figure, both Apache and MySQL are currently NOT running, as indicated by
the word Start to the right of their names. Click the Start buttons to turn the servers
on. You can open the Control Panel by clicking the XAMPP Control Panel shortcut
on your desktop.

9. If the buttons to the right of Apache and MySQL say Start, click them to start
the Web server and the MySQL database server.
You probably get a Windows security alert about both MySQL and Apache: Click the
Unblock button in both cases. This action allows the two servers to run, and tells the
Windows firewall protection service that everything is OK.If Apache and MySQL are
already running, these buttons say Stop. (Clicking them turns off the Web server and
MySQL.) Whenever you start Apache, PHP automatically starts as well. At this point,
you should have a complete testing server running on your machine. You just need to
make sure it’s working.

10
 10. To do so, launch a Web browser, and, in the Location bar, type http://localhost/.
You encounter a page that lists a bunch of languages; click the language you prefer,
and you’re taken to a kind of Web-based control panel for XAMPP (see screenshot
below).

Once installed, you can view your XAMPP home page from http://localhost/xampp/.
From the left-hand list of links, you can access helpful programs and information,
such as phpMyAdmin (for working with the MySQL database) and phpinfo() for
finding out more about the server setup.

Once you’ve installed XAMPP, you’ll see a shortcut called XAMPP Control Panel on your
desktop. Double-click this icon to control the servers you’ve just installed—you can turn the
servers off and on, as well as turn them into services (which launch each time you start up
your computer).

To uninstall XAMPP, just go to the location where you installed XAMPP (like C:\XAMPP\)
and run the program named Uninstall.exe. This action, however, deletes any databases you
created, and destroys any Web pages that you placed on the server. To prevent this process,
just follow these steps: First, use phpMyAdmin to export any database you wish to save (you
can find instructions at http://php.about.com/od/learnmysql/ss/mysql_backup_3.html), and
then make a copy of your Web pages which are located in the C:\XAMPP\htdocs folder.

11
3. WAMP (BUNDLE SERVER):
WAMPs are packages of independently created programs installed on computers that use a
Microsoft Windows operating system.

WAMP is an acronym formed from the initials of the operating system Microsoft Windows
and the principal components of the package: Apache, MySQL and one of PHP, Perl or
Python. Apache is a web server. MySQL is an open-source database. PHP is a scripting
language that can manipulate information held in a database and generate web pages
dynamically each time content is requested by a browser. Other programs may also be
included in a package, such as phpMyAdmin which provides a graphical user interface for
the MySQL database manager, or the alternative scripting languages Python or Perl.

Install WAMP Server on XP and Windows:

WAMP stands for Windows Apache MySQL PHP. WAMP Server is an open source
software, which is free to use under the GPL licence (General Public Licence). Wamp is a
combination of numbers of software that allows to develop dynamic website with Apache
Server, MySQL database and PHP script language.
It also provides the facility of PHPMYAdmin and SQLite manager to handle the database
more easily and effectively.
We are installing the WAMP 2.0i version, that includes the latest version of Apache 2.2.11,
PHP 5.3.0 and MySQL 5.1.36.
Let's see installation of Wamp on XP step by step :

1. Search on Google :
If you don't have Wamp so you can search on google and download from there.

12
 2. Download Wamp: You can download wamp from any website by clicking on download
tab or link.

3. Save File

4. Double Click on Installer WampServer 2.0i

13
5. Click Run to Install

6. Click Next

7. Select Option I accept and then click on next.

14
8. Choose the directory and click next.

9. Select Additional Icon :You can select either one or both the icon and then click on next button.

10. Click Install

15
11. Installing Process:The installing process going on wait for while to install the wamp.

12. Click Next

13. Click Finish :The moment you click on finish button, your Wamp Server installed on
your computer.

16
14. Take a look on Wamp Setting.

Look at your right hand side of your task bar, there was a small wamp icon in the shape of
semi-circle.
Just left click on the icon and look at all the setting are available here. You can also change
the setting according to your requirement.

15. Take a look on WampServer.

17
The WampServer shows all the configuration of all the software and also two tools on the left
hand side. The first one is phpinfo() from there you can get information about the php and
the second one is phpmyadmin, this is your database and you can create database by clicking
on the phpmyadmin. Let's see the image of database :

Running & Testing on WAMP server: It provides a simple and effective way to use wamp
server, how to run a program , how to enable few features and so on.
 After successful installation you can see a folder inside the C:\drive named wamp.
Inside folder there will be many files and folders like: alias, bin, lang, logs, scripts,
tmp etc.
 Develop PHP programs inside the www folder e.g C:\wamp\www. Now start the
wamp server either by double click on the icon appear on the desktop or go to start
option and select wamp server.
 After selecting the wamp server you can see an icon appear on the tray as sown in
below figure

 Initially the icon will be partially red, it means no service is currently running, click
on it and a popup menu will appear, select the start all services option. Now the color
of the icon should change to white that means all services are running, if the color of
the icon appears half yellow then all services are not running the follow either of these
steps.
 Left click on the icon, select apache, go to service option , click start/ resume
service.
 Left click on the icon , select MySQL, go to service option, click start/resume
service.

18
Another option is left click on the icon and select restart all services.

 To check whether the server is running or not again click on the icon of wamp server
and select Localhost option. Home page of the server will be displayed in Internet
Browser.

 Develop a small program to check whether your server is running or not. Open the
c:\wamp\www folder , create a new folder named PHP, and open a blank text file
write the following code:
<?=”Hello PHP”?>
In the above code <?= ?> is an alternate of echo language construct, to enable this
option click on the wamp server icon on task bar, select PHP, select PHP settings, and
then check the short open tag option.

19
 Then save the file with any name and .php extension. Start the server, click on the
localhost link, it will open the home page of the server and then click on the php link,
it will display the list of file name as link.

20
  Click it and it will display Helo PHP in the web browser.
 IIS is a web server similar to WAMP, which could be installed in your system, in case
IIS is installed and currently running in your system then you need to stop the service.
To stop IIS server go to Start option, select Control Panel, Administrative tool, select
services. In the service window search IIS service and stop the service.

4. IIS (INTERNET INFORMATION SERVICE)

IIS is a web server application and set of feature extension modules created by
Microsoft for use with Microsoft windows. Versions of IIS are as follows
 IIS 1.0- was initially released as a free add-on, a set of web-based services for
Windows NT 3.51.
 IIS 2.0- Includes Windows NT 4.0
 IIS 3.0- Service pack3 of Windows NT 4.0.
 IIS 4.0- Service pack3 of Windows NT 4.0
 IIS 5.0- shipped with Windows 200 ad introduced additional authentication methods.
 IIS5.1-shipped with Windows XP professional and introduced additional
authentication methods.
 IIS6.0-introduced with Windows server 2003 and Windows XP professional.
 IIS 7.0-redesign and rewrite of IIS and it was shipped with windows vista and
windows server 2008
 IIS 7.5-it supports different types of protocols introduced with Windows7 and
Windows server 2008.
 IIS 8.0 is only available in Windows Server 2012 and Windows 8. IIS 8.0 includes
Application Initialization, centralized SSL certificate support, and multicore scaling
on NUMA hardware, among other new features.

IIS 7.5 supports HTTP, HTTPS, FTP, FTPS, SMTP and NNTP. It is an integral part of the
Windows Server family of products (and their client counterparts in the cases of Windows
NT 4.0 and Windows 2000), as well as certain editions of Windows XP, Windows Vista and
Windows 7.

The first Microsoft web server was a research project at the European Microsoft Windows
NT Academic Centre (EMWAC).

IIS features or modules:

IIS 6.0 and higher support the following authentication mechanisms:
 Anonymous authentication
 Basic access authentication
 Digest access authentication
 Integrated Windows Authentication
 UNC authentication
 .NET Passport Authentication (Removed in Windows Server 2008 and IIS 7.0)
 Certificate authentication

21
IIS 7.0 has a modular architecture. Modules, also called extensions, can be added or removed
individually so that only modules required for specific functionality have to be installed. IIS 7
includes native modules as part of the full installation. These modules are individual features
that the server uses to process requests and include the following

 HTTP modules – Used to perform tasks specific to HTTP in the request-processing

pipeline, such as responding to information and inquiries sent in client headers,
returning HTTP errors, and redirecting requests.
 Security modules – Used to perform many tasks related to security in the request-
processing pipeline, such as specifying authentication schemes, performing URL
authorization, and filtering requests.
 Content modules – Used to perform tasks related to content in the request-processing
pipeline, such as processing requests for static files, returning a default page when a
client does not specify a resource in a request, and listing the contents of a directory.
 Compression modules – Used to perform tasks related to compression in the request-
processing pipeline, such as compressing responses, applying Gzip compression
transfer coding to responses, and performing pre-compression of static content.
 Caching modules – Used to perform tasks related to caching in the request-processing
pipeline, such as storing processed information in memory on the server and using
cached content in subsequent requests for the same resource.
 Logging and Diagnostics modules – Used to perform tasks related to logging and
diagnostics in the request-processing pipeline, such as passing information and
processing status to HTTP.sys for logging, reporting events, and tracking requests
currently executing in worker processes.

IIS 7.5 includes the following additional or enhanced security features:

 Client certificate mapping
 IP security
 Request filtering
 URL authorization
Authentication changed slightly between IIS 6.0 and IIS 7, most notably in that the
anonymous user which was named "IUSR_{machine name}" is a built-in account in Vista
and future operating systems and named "IUSR". Notably, in IIS 7, each authentication
mechanism is isolated into its own module and can be installed or uninstalled

IIS Installation in Windows XP are as follows

You will need your Windows XP Professional CD with you and you will need to be able to
log in as an administrator on your computer.
Step1: Control panel
Go to control panel -> Add /Remove programs

Step2: Windows Configuration

Click Add/Remove Windows Components

22
Step3: Select IIS
The Windows Component Wizard will appear. You need to select the Internet Information
Service(IIS) checkbox and then click Next

Step4: Insert your XP Professional CD

Now you will probably be asked to insert your Windows XP professional CD

Do not be concerned if you do not see this step. It means your system has probably been
installed via the network, meaning you don't have to locate and insert your CD.

Step5: Installing
Once your WIndows XP Professional CD (or network based installation) is available you will
see a window like the following, indicating that Internet Information Services is being
installed.

23
Step6: Finished
When installation has finished you will see the following window, which shows that you
have successfully installed Microsoft Internet Information Services 5.1

HANDLING HTTP REQUEST AND RESPONSE

Whenever your web browser fetches afile (a page, a picture etc) from a web server, it
does so using HTTP (Hyper Text Transfer Protocol).
HTTP is a request / response protocol, which means your computer sends a request from
some file ( e.g. Get me the file “home.html”) and web server sends back a response (“ Here’s
the file”, followed by file itself)
Java Servlets are programs that run on a Web or Application server and act as a
middle layer between a request coming from a Web browser or other HTTP client and
databases or applications on the HTTP server.
Following diagram shows the position of Servelts in a Web Application.

A servlet life cycle can be defined as the entire process from its creation till the destruction.
The following are the paths followed by a servlet

 The servlet is initialized by calling the init () method.

 The servlet calls service() method to process a client's request.
 The servlet is terminated by calling the destroy() method.
 Finally, servlet is garbage collected by the garbage collector of the JVM

24
HTTPServlet class provides specialized methods that handle the various types of HTTP
requests. A Servlet developer typically overrides one of these methods. Methods are
doDelete(), doGet(), doOptions(), doPost(), doPut() and doTrace().
For handling the input, HTTP request makes use of two commonly used methods such as
GET and POST as
1. Handling HTTP-GET request
2. Handling HTTP-POST request

Handling HTTP-GET Request:

Develop a Servlet that handles an HTTP-GET request. The Servlet is invoked when a form
on a web page (HTML) is submitted. Write two programs
1. HTML Script in which Servlet is invoked
2. Servlet program
HTML Source code ColorGet.html is defines a form that contains a select element and a
submit button. Notice action parameters of the form tag specify a URL. URL identifies a
servlet to process the HTTP-GET request.
HTML program is as follows
<html>
<body>
<center>
<form name=”Form1” action=http://localhost:8080/servlet/ColorGetServlet>
<B> Color:</B>
<select name=”color” size=”1”>
<option value=”Red”>Red</option>
<option value=”Green”>Green</option>
<option value=”Blue”>Blue</option>
</select>
<br>
<input type=”submit” value=”submit”>
</form>
</center>
</body>
</html>

Sorce code for ColorGetServlet.java. The doGet() method is available to process by HTTP-
GET requests that are sent to this servlet. It uses getParameter() method of HTTP servlet
request to obtain selection that are made by user. A response is then formulated as

// Import required java libraries

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;

// Extend HttpServlet class

public class ColorGetServlet extends HttpServlet {

public void doGet(HttpServletRequest request,

HttpServletResponse response)
throws ServletException, IOException

25
 {
String color=request.getParameter(“color”);
// Set response content type
response.setContentType("text/html");
PrintWriter pw = response.getWriter();
pw.println(“<B> The Selected color is:”);
pw.println(color);
pw.close();
}
}

Compile the Servlet and then perform the steps to test the example
1. Start the Servletrunner
2. Display the web page in a browser
3. Select a color
4. Submit the web page
After completing the steps, the browser displays the response that is dynamically generated
by the Servlet. Parameters for an HTTP-GET request are included as part of the URL that is
sent to the web server. Assume that the user selects the red option and submit the form. The
URL sent from the browser to the server in the following
http://localhost:8080/servlet/ColorGetServlet ? color=red
Here ? is for query string

Handling HTTP-POST Request:

It is same as the HTTP-GET but instead of Get use the Post and also create HTML program
and also Servlet program same as above but mention the method name as Post.

CLIENT-SERVER MODEL
The client-server model is a distributed communication framework of network processes
among service requestors, clients and service providers. The client-server connection is
established through a network or the Internet.

The client-server model is a core network computing concept also building functionality for
email exchange and Web/database access. Web technologies and protocols built around the
client-server model are:

 Hypertext Transfer Protocol (HTTP)

 Domain Name System (DNS)
 Simple Mail Transfer Protocol (SMTP)
 Telnet

Clients include Web browsers, chat applications, and email software, among others. Servers
include Web, database, application, chat and email, etc.

A server manages most processes and stores all data. A client requests specified data or
processes. The server relays process output to the client. Clients sometimes handle
processing, but require server data resources for completion.

26
The client-server model differs from a peer-to-peer (P2P) model where communicating
systems are the client or server, each with equal status and responsibilities. The P2P model is
decentralized networking. The client-server model is centralized networking.

One client-server model drawback is having too many client requests underrun a server and
lead to improper functioning or total shutdown. Hackers often use such tactics to terminate
specific organizational services through distributed denial-of-service (DDoS) attacks.

Important questions in UNIT-I:

1. Explain in detail Apache web server and its installation procedure
2. a. How to handle HTTP requests and response? Explain in detail.
b. Write a short note on client/server model
3. a. What is a web server?
b. Mention any three web servers and explain them.
4. What are the different types of web servers? Discuss briefly.
5. What is Bundle server? Explain different types of bundle servers?
6. Explain the installation procedure of WAMP server?
7. Explain XAMPP server?
8. Explain the installation procedure of XAMPP server?

27
 What is CSS?
 CSS stands for Cascading Style Sheets.
 It provides an additional feature to HTML.
 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.

CSS - Syntax
A style rule is made of three parts −

 Selector − A selector is an HTML tag at which a style will be applied. This could be any
tag like <h1> or <table> etc.

 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 etc.

 Value - Values are assigned to properties. For example, color property can have value
either red or #F1F1F1 etc.

Example: You can define a table border as follows

table{ border :1px solid #C00; }

The Type Selectors

This is the same selector we have seen above. Again, one more example to give a color to all
level 1 headings:

h1 {

color: #36CFFF;

The Universal Selectors

simply matches the name of any element type −

* {

color: #000000;

This rule renders the content of every element in our document in black.

The Class Selectors

All the elements having that class will be formatted according to the defined rule.

.black {

color: #000000;

This rule renders the content in black for every element with class attribute set to black in our
document.

For example:

28
 h1.black {

color: #000000;

This rule renders the content in black for only <h1> elements with class attribute set to black.

The ID Selectors
All the elements having that id will be formatted according to the defined rule.

#black {

color: #000000;

This rule renders the content in black for every element with id attribute set to black in our
document.

For example −

h1#black {

color: #000000;

This rule renders the content in black for only <h1> elements with id attribute set to black.

CSS Element Selector

The element selector selects the HTML element by name.

<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

CSS Id Selector

The id selector selects the id attribute of an HTML element to select a specific element.

<html>
<head>

29
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Javatpoint.com</p>
<p>This paragraph will not be affected.</p>
</body>
</html>

CSS Class Selector

The class selector selects HTML elements with a specific class attribute.

<html>
<head>
<style>
.c1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="c1">This heading is blue and center-aligned.</h1>
<p class="c1">This paragraph is blue and center-aligned.</p>
</body>
</html>

CSS Class Selector for specific element

<html>
<head>
<style>
p.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is not affected</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>

30
 CSS Universal Selector

The universal selector is used as a wildcard character. It selects all the elements on the pages.

<html>
<head>
<style>
*{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

CSS Group Selector

The grouping selector is used to select all the elements with the same style definitions.

<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
<h2>Hello Javatpoint.com (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>
How to add CSS

There are three ways to insert CSS in HTML documents.

1. Inline CSS
2. Internal CSS

31
 3. External CSS

1) Inline CSS

Inline CSS is used to apply CSS on a single line or element.

For example:

<p style="color:blue">Hello CSS</p>

<h2 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h2>
<p>This paragraph is not affected.</p>

2) Internal CSS

Internal CSS is used to apply CSS on a single document or page. It can affect all the elements of
the page.

It is written inside the style tag within head section of html.

For example:

<style>
p{color:blue}
</style>

3) External CSS

External CSS is used to apply CSS on multiple pages or all pages. Here, we write all the CSS code
in a css file. Its extension must be .css for example style.css.

For example:

p{color:blue}

You need to link this style.css file to your html pages like this:

<link rel="stylesheet" type="text/css" href="style.css">

The link tag must be used inside head section of html.

CSS Comments

Comments are single or multiple lines statement and written within /*............*/ .

32
 CSS Background

CSS background property is used to define the background effects on element.

1) CSS background-color

The background-color property is used to specify the background color of the element.

You can set the background color like this:

<html>
<head>
<style>
h2, p {
background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>My first CSS page.</h2>
<p>Hello Javat. This is an example of CSS background-color.</p>
</body>
</html>

2) CSS background-image

The background-image property is used to set an image as a background of an element. By default

the image covers the entire element.

<html>
<head>
<style>
body {
background-image: url("a.jpeg");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Hello Java</h1>
</body>
</html>

CSS Border

The CSS border is a shorthand property used to set the border on an element.

33
 The CSS border properties are given below

o border-style
o border-color
o border-width
o border-radius

CSS border-style

none It doesn't define any border.

dotted It is used to define a dotted border.

dashed It is used to define a dashed border.

solid It is used to define a solid border.

double It defines two borders with the same border-width value.

<html>
<head>
<style>
p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
</style>
</head>
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
</body>
</html>

CSS border-width

<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}

34
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 1px;
}
</style>
</head>

<body>
<p class="one">Write your text here.</p>
<p class="two">Write your text here.</p>
<p class="three">Write your text here.</p>
</body>
</html>

CSS border-color

<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: #98bf21;
}
</style>
</head>
<body>
<p class="one">This is a solid red border</p>
<p class="two">This is a solid green border</p>
</body>
</html>

CSS display inline

The inline element takes the required width only. It doesn't force the line break so the flow of text
doesn't break in inline example.

The inline elements are:

35
 o <span>
o <a>
o <em>
o <b> etc.

<html>
<head>
<style>
p{
display: inline;
}
</style>
</head>
<body>
<p>Hello Javatpoint.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>

Output:

Hello Javatpoint.com Java Tutorial. SQL Tutorial. HTML Tutorial. CSS Tutorial.

CSS display block

The CSS display block element takes as much as horizontal space as they can.

Means the block element takes the full available width.

They make a line break before and after them.

<html>
<head>
<style>
p{
display: block;
}
</style>
</head>
<body>
<p>Hello Javatpoint.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>

36
 <p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>

Output:

Hello Javatpoint.com

Java Tutorial.

SQL Tutorial.

HTML Tutorial.

CSS Tutorial.

CSS Float

The CSS float property is a positioning property.

It is used to push an element to the left or right, allowing other element to wrap around it.

It is generally used with images and layouts.

CSS Float Properties

Property Description Values

clear The clear property is used to avoid elements left, right,

after the floating elements which flow around it. both, none, inherit

float It specifies whether the box should float or not. left, right, none,

inherit

CSS Float Property Values

Value Description

left It is used to float the element to the left.

right It is used to float the element to the right.

37
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>The following paragraph contains an image with style
<b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<img src="a.jpeg" alt="Good Morning Friends"/>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>

CSS Font

CSS Font property is used to control the look of texts.

By the use of CSS font property you can change the text size, color, style and more.

EXAMPLES-

body {
font-size: 100%;
}
h1 { color: red; }
h1 { font-family: sans-serif; }
h2 { font-family: serif; }
<p style="font-size:xx-small;"> This font size is extremely small.</p>
<p style="font-size:x-small;"> This font size is extra small</p>
<p style="font-size:small;"> This font size is small</p>
<p style="font-size:medium;"> This font size is medium. </p>
<p style="font-size:large;"> This font size is large. </p>

38
<p style="font-size:x-large;"> This font size is extra large. </p>
<p style="font-size:xx-large;"> This font size is extremely large. </p>
<p style="font-size:smaller;"> This font size is smaller. </p>
<p style="font-size:larger;"> This font size is larger. </p>
<p style="font-size:200%;"> This font size is set on 200%. </p>
<p style="font-size:20px;"> This font size is 20 pixels. </p>
EXAMPLE-2

<style>
body {
font-size: 100%;
}
h2 { font-style: italic; }
h3 { font-style: oblique; }
h4 { font-style: normal; }
}
</style>

CSS margin Example

<html>
<head>
<style>
p{
background-color: pink;
}
p.ex {
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>
CSS Word Wrap

CSS word wrap property is used to break the long words and wrap onto the next line.

This property is used to prevent overflow when an unbreakable string is too long to fit in the
containing box.

39
 CSS Word Wrap Values

Value Description

normal This property is used to break words only

at allowed break points.

break-word It is used to break unbreakable words.

<html>
<head>
<style>
p.test {
width: 11em;
background-color: #00ffff;
border: 1px solid #000000;
padding:10px;
word-wrap: break-word;
}
</style>
</head>
<body>
<p class="test"> In this paragraph, there is a very long word:
iamsooooooooooooooooooooooooooooooolongggggggggggggggg.The long word will break and wrap to
the next line.</p>
</body>
</html>

padding

The padding properties specify the width of the padding area of a box.
[Syntax]

padding-top: <length> | <percentage>

padding-right: <length> | <percentage>
padding-bottom: <length> | <percentage>
padding-left: <length> | <percentage>

40
 XHTML - Introduction
XHTML stands for EXtensible HyperText Markup Language.

Why we use XHTML

XHTML combines strength of HTML and XML.

Also, XHTML pages can be rendered by all XML enabled browsers.

XHTML defines quality standard for your webpages.easily maintain, edit, convert and format your
document in the long run.

XHTML syntax is very similar to HTML syntax and almost all the valid HTML elements are valid in
XHTML as well.

It is a cross between HTML and XML language.

XHTML is almost identical to HTML but it is stricter than HTML.

XHTML is HTML defined as an XML application. It is supported by all major browsers.

HTML vs XHTML

There are some changes in XHTML as compared to HTML. These changes can be categorized in
three parts:

Changes in Document Structure

o All documents must have a DOCTYPE.

o The xmlns attribute in <html> is mandatory and must specify the xml namespace for the
document.

o <html>, <head>, <title>, and <body> are mandatory with their respective closing tags.

Changes in XHTML Tags

o All XHTML tags must be in lower case.

o All XHTML tags must be closed.

o All XHTML tags must be properly nested.

o The XHTML documents must have one root element.

Changes in XHTML Tags

o All XHTML attributes must be added properly.

o All XHTML attributes must be in lower case.

o The name attribute has changed.

o XHTML attributes cannot be shortened.

o XHTML attribute values must be quoted.

41
 XHTML Syntax

XHTML syntax is very similar to HTML syntax and all the valid HTML elements are also valid in
XHTML. But XHTML is case sensitive so you have to pay a bit extra attention while writing an
XHTML document to make your HTML document compliant to XHTML.

You must remember the following important points while writing a new XHTML document or
converting existing HTML document into XHTML document:

o All documents must have a DOCTYPE.

o All tags must be in lower case.

o All documents must be properly formed.

o All tags must be closed.

o All attributes must be added properly.

o The name attribute has changed.

o Attributes cannot be shortened.

o All tags must be properly nested.

1.Tags must be in lower case

XHTML is case-sensitive markup language. So, all the XHTML tags and attributes must be written
in lower case.

<!-- Invalid in XHTML -->

<A Href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</A>
<!-- Valid in XHTML -->
<a href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</a>

2.Closing Tags are mandatory

An XHTML must have an equivalent closing tag

<!-- Invalid in XHTML -->

<p>This paragraph is not written according to XHTML syntax.

<!-- Invalid in XHTML -->

<img src="/images/xhtml.gif" >

<!-- Valid in XHTML -->

<p>This paragraph is not written according to XHTML syntax.</p>

42
<!-- Valid in XHTML-->
<img src="/images/xhtml.gif" />

3.Attribute Quotes

All the XHTML attribute's values must be quoted

<!-- Invalid in XHTML -->

<img src="/images/xhtml.gif" width=250 height=50 />

<!-- Valid in XHTML -->

<img src="/images/xhtml.gif" width="250" height="50" />

4.Attribute Minimization

XHTML doesn't allow you to minimize attributes. You have to explicitly state the attribute and its
value.

<!--Invalid in XHTML -->

<option selected>

<!-- valid in XHTML-->

<option selected="selected">

5.The id Attribute

The id attribute is used to replace the name attribute.

Instead of using name = "name", XHTML prefers to use id = "id".

<!-- Invalid in XHTML -->

<img src="/images/xhtml.gif" name="xhtml_logo" />

<!-- Valid in XHTML -->

<img src="/images/xhtml.gif" id="xhtml_logo" />

6.The language attribute

In XHTML, the language attribute of script tag is deprecated so you have to use type attribute
instead of this.

<!-- Invalid in XHTML -->

<script language="JavaScript" type="text/JavaScript">
document.write("Hello XHTML!");
</script>

43
<!-- Valid in XHTML -->
<script type="text/JavaScript">
document.write("Hello XHTML!");
</script>

7.Element Prohibitions

The following elements are not allowed to have any other element inside them.

Element Prohibition

<a> It must not contain other <a> elements.

<pre> It must not contain the <img>, <object>, <big>, <small>, <sub>, or <sup>
elements.

<button> It must not contain the <input>, <select>, <textarea>, <label>, <button>,
<form>, <fieldset>, <iframe> or <isindex> elements.

<label> It must not contain other <label> elements.

<form> It must not contain other <form> elements.

8.Empty Elements

They include a space before the trailing / and > of empty elements. For example, <br />, <hr />,
and <img src="/html/xhtml.gif" alt="xhtml" />.

XHTML Doctypes

There are three types of Document Type Definitions (DTDs). The easiest and most commonly used
is the XHTML Transitional document.

A list of the XHTML Doctypes:

o Strict

o Transitional

o Frameset

1.XHTML 1.0 Strict DTD

It is recommended to use when you want to use Cascading Style Sheet (CSS) strictly and avoiding
to write most of the XHTML attributes.

44
 Add the following DTD at the top of your XHTML document.

Syntax:

<!DOCTYPE html PUBLIC "-

//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">

2. XHTML 1.0 Transitional DTD

It is recommended to use when you want to use many XHTML attributes as well as few Cascading
Style Sheet (CSS) properties.

Add the following DTD at the top of your XHTML document.

Syntax:

<!DOCTYPE html PUBLIC "-

//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht
ml1-transitional.dtd">

3.XHTML 1.0 Frameset DTD

It is recommended to use when you want to use HTML Frames to partition the browser window
into two or more frames.

Add the following DTD at the top of your XHTML document.

<!DOCTYPE html PUBLIC "-

//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">

45