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/xamppwindows.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: 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 requestprocessing 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 requestprocessing 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

Color: <select name=”color” size=”1”> Red Green Blue

Sorce code for ColorGetServlet.java. The doGet() method is available to process by HTTPGET 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(“ 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

or 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

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

elements with id attribute set to black. CSS Element Selector The element selector selects the HTML element by name. <style> p{ text-align: center; color: blue; }

This style will be applied on every paragraph.

Me too!

And me!

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

29

<style> #para1 { text-align: center; color: blue; }

Hello Javatpoint.com

This paragraph will not be affected.

CSS Class Selector The class selector selects HTML elements with a specific class attribute. <style> .c1 { text-align: center; color: blue; }

This heading is blue and center-aligned.

This paragraph is blue and center-aligned.

CSS Class Selector for specific element <style> p.center { text-align: center; color: blue; }

This heading is not affected

This paragraph is blue and center-aligned.

30

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

<style> *{ color: green; font-size: 20px; }

This is heading

This style will be applied on every paragraph.

Me too!

And me!

CSS Group Selector The grouping selector is used to select all the elements with the same style definitions. <style> h1, h2, p { text-align: center; color: blue; }

Hello Javatpoint.com

Hello Javatpoint.com (In smaller font)

This is a paragraph.

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:

Hello CSS

Inline CSS is applied on this heading.

This paragraph is not affected.

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}

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: 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: <style> h2, p { background-color: #b0d4de; }

My first CSS page.

Hello Javat. This is an example of CSS background-color.

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.

<style> body { background-image: url("a.jpeg"); margin-left:100px; }

Hello Java

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.

<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;}

No border.

A dotted border.

A dashed border.

A solid border.

A double border.

CSS border-width <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; }

Write your text here.

Write your text here.

Write your text here.

CSS border-color <style> p.one { border-style: solid; border-color: red; } p.two { border-style: solid; border-color: #98bf21; }

This is a solid red border

This is a solid green border

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



o

<em>

o

etc.

<style> p{ display: inline; }

Hello Javatpoint.com

Java Tutorial.

SQL Tutorial.

HTML Tutorial.

CSS Tutorial.

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. <style> p{ display: block; }

Hello Javatpoint.com

Java Tutorial.

SQL Tutorial.

36

HTML Tutorial.

CSS Tutorial.

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

clear

float

Description

Values

The clear property is used to avoid elements

left, right,

after the floating elements which flow around it.

both, none, inherit

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

<style> img { float: right; }

The following paragraph contains an image with style float:right. The result is that the image will float to the right in the paragraph.

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.

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. EXAMPLESbody { font-size: 100%; } h1 { color: red; } h1 { font-family: sans-serif; } h2 { font-family: serif; }

This font size is extremely small.

This font size is extra small

This font size is small

This font size is medium.

This font size is large.

38

This font size is extra large.

This font size is extremely large.

This font size is smaller.

This font size is larger.

This font size is set on 200%.

This font size is 20 pixels.

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

CSS margin Example <style> p{ background-color: pink; } p.ex { margin-top: 50px; margin-bottom: 50px; margin-right: 100px; margin-left: 100px; }

This paragraph is not displayed with specified margin.

This paragraph is displayed with specified margin.

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

normal

Description

This property is used to break words only at allowed break points.

break-word

It is used to break unbreakable words.

<style> p.test { width: 11em; background-color: #00ffff; border: 1px solid #000000; padding:10px; word-wrap: break-word; }

In this paragraph, there is a very long word: iamsooooooooooooooooooooooooooooooolongggggggggggggggg.The long word will break and wrap to the next line.

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

padding-top: | padding-right: | padding-bottom: | padding-left: |

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 is mandatory and must specify the xml namespace for the document.

o

, ,