SVCE TIRUPATI

SVCE TIRUPATI
COURSE MATERIAL

WEB AND INTERNET TECHNOLOGIES

SUBJECT (15A05605)

UNIT 1

COURSE B.TECH

DEPARTMENT COMPUTER SCIENCE & ENGINEERING

SEMESTER 32

K BHANU PRAKASH
PREPARED BY
N NARENDRA REDDY
(Faculty Name/s) Assistant Professors

Version V-5

PREPARED / REVISED DATE 26-04-2021

BTECH_CSE-SEM 32
SVCE TIRUPATI

TABLE OF CONTENTS – UNIT 1

SVCES. TIRUPATI
NO CONTENTS PAGE NO.
1 COURSE OBJECTIVES 1
2 PREREQUISITES 1
3 SYLLABUS 1
4 COURSE OUTCOMES 1
5 CO - PO/PSO MAPPING 1
6 LESSON PLAN 2
7 ACTIVITY BASED LEARNING 2
8 LECTURE NOTES 2
1.1 INTRODUCTION TO WEB TECHNOLOGIES 4
1.2 HANDLING HTTP REQUEST AND RESPONSE 12
1.3 IIS XAMPP(BUNDLE SERVER) 13
1.4 WAMP(BUNDLE SERVER) 13
1.5 INSTALLATIONS OF ABOVE SERVERS 14
1.6 HTML AND CSS: HTML 5.0 20
1.7 XHTML 47
1.8 CSS 3 60
9 PRACTICE QUIZ 84
10 ASSIGNMENTS 84
11 PART A QUESTIONS & ANSWERS (2 MARKS QUESTIONS) 85
12 PART B QUESTIONS 85
13 SUPPORTIVE ONLINE CERTIFICATION COURSES 85
14 REAL TIME APPLICATIONS 85
15 CONTENTS BEYOND THE SYLLABUS 86
16 PRESCRIBED TEXT BOOKS & REFERENCE BOOKS 86
17 MINI PROJECT SUGGESTION 86

BTECH_CSE-SEM 32
SVCE TIRUPATI

1. Course Objectives
The objectives of this course is to
• To introduce client side scripting with Javascript and DHTML
• To introduce server side programming with Java servlets, JSP and PHP.
• To learn the basic web concepts and Internet protocols

2. Prerequisites
Students should have knowledge on
1. Object Oriented Programming through Java.
2. SQL QURIES.

3. Syllabus
UNIT III
Introduction to Web Technologies: Introduction to Web servers like Apache 1.1, IIS
XAMPP(Bundle Server), WAMP(Bundle Server),Handling HTTP Request and Response,
installations of above servers, HTML and CSS: HTML 5.0 , XHTML, CSS 3.
4. Course outcomes
1. Student must be able to apply a web page and identify its elements and
attributes.
2. Student must be able to analyze web pages using XHTML and Cascading Styles
sheets
3. Student should be able design dynamic web pages.
4. Student must be able implement web applications using PHP.

5. Co-PO / PSO Mapping

WIT PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 P10 PO11 PO12 PSO1 PSO2

CO1 3 2 2 3

CO2 3 2 3 2

CO3 3 2 3 2 3

CO4 3 2 3 3 2

1|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI

6. Lesson Plan

Lecture No. Weeks Topics to be covered References

1 Introduction to Web Technologies T1

2 Introduction to Web servers like Apache 1.1 T1, R1

1
3 IIS XAMPP(Bundle Server) T1, R1

4 WAMP(Bundle Server) T1, R1

5 Handling HTTP Request and Response T1, R2

6 installations of above servers T1, R1

2
7 HTML and CSS: HTML 5.0 T1, R1

8 XHTML T1, R1

9 CSS 3 T1, R1
3
10 Discussion of Previous year university questions in question papers T1, R1

7. Activity Based Learning

1. Create dynamic and interactive web sites
2. How to parse and use XML data

2|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
8. Lecture Notes
1.1 Introduction to Web Technologies
Working of Internet
Although the physical network connections, the hardware
communication devices and the software communication protocols are
required for communication across the Internet, the application software
provides useful functionalities.
In a network application, two application programs participate in any
communication: one application initiates communication and the other
accepts it. This is known as the Client-Server interaction. This is the
methodology used for internet communication.
Client-Server
Client and Server are two applications involved in communication. These
components work together over a network. It involves the client
requesting serve from the server. The Server provides the requested
service.
The typical features of the Client are:
➢ It is front-end of an application.
➢ It manages user-interface portion.
➢ It validates data entered by the user.
➢ It dispatches requests to server program.
The typical features of the Server are:
➢ Performs a back-end task.
➢ Receives requests from clients.
➢ Executes database retrievals and updates.
➢ Manages data integrity.
➢ Dispatches response to clients.
Web Browsers
A Web browser is a software program that is used to access the World
Wide Web(WWW).It allows users to view Web pages and navigate
between them.Examples of Web Browsers are: Mozilla, Microsoft Internet
Explorer, Opera, Chrome, Netscape etc.
Web Browsers are known as Universal Clients because they act as the
common Client for all Web-based applications. They are the Web Clients
that request services from a Web Server, Which is located somewhere on
the Internet or Intranet.
Server Program & Server System
Generally, the term `Server' refers to a program that waits for a request
and provides service.However, a Computer that runs many such Server
programs is also known as a Server.
Computers that have fast CPUs, large memories and powerful operating
systems are also called Server Machines(or Server Systems or Server

3|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
Computers).
―A Server is the program that provides Service to a client".
Working of Server
A server offers one or more Services to clients. By default, it does not do
any processing until a client sends in a request. It waits for a client to make
a request. This is known as `listening mode of the server.
A typical client server interaction happens as follows:
1. The client sends a request for a server.
2. On receiving a request, the service assigns one of the threads in the
pool to process the task and continues to wait for further request.
3. The thread executes the code for the requested service.
4. After execution, it sends the response back to the client.
5. It then returns to the thread pool.

World Wide Web(WWW)

The World Wide Web(WWW) is an information sharing model that allows
accessing information over the medium of the Internet. It is the collection
of electronic documents that are linked together. These electronic
documents are known as `Web Pages'. A collection of related WebPages
is known as a `Web Site.
A Web Site is resides on Server computers that are located in around the
world. Information on the WWW is always accessible, from anywhere in the
world.
The basic architecture is characterized by a Web Browser that displays
information content and Web Server that transfer's information to the
client. This architecture depends on three key standards for creating,
publishing and finding

Figure 1.1: Working of Server

Web documents on the Web:

HTML: Hyper Text Markup Language for creating and editing document
content.

4|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
URL: Uniform Resource Locator for locating resource on the Internet.
HTTP: Hyper Text Transfer Protocol to transfer the data.
HTML: Hyper Text Markup Language
HTML is the authoring language used to create documents on the
WWW. HTML makes documents readable across variety of computing
platforms.
URL: Uniform Resource Locator
URL is the unique address that identifies each web page or a resource on
the Internet. It indicates where the web pages are stored on the Internet.
URL is the standard way of addressing resources on the Internet that are
part of WWW.
It supplies the Internet Address of a resource on the WWW, alone with
protocol by which the resource is accessed. URLs are used by Web
Browsers to connect to a specific server and to get a specific document
or page on the Web.
The URL looks like
Protocol://ServerDomainName/Path
Examples
http://www.google.com

Protocol
Resource

http://192.168.10.1/download

Protocol IP address of the Resource

1.2 HTTP: Hyper Text Transfer Protocol

Web browsers and Web Servers communicate with each other using the
HTTP. It is a simple protocol, which standardizes the way requests are sent
and processed. This allows different Clients to communicate with any
vendor‘s server without compatibility problems.
HTTP is an application level protocol of the TCP/IP suite, which is used to
deliver virtually all files and other data on WWW.
It is used to transmit resources that are identified by URL. The most
common kinds of resources can be a file, but it can also be dynamically
generated content, which is the result of execution of a script or an
application on the server.
Features of the HTTP protocol:
• Simple request-response model based protocol.
• Application layer protocol built on TCP/IP.

5|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
• Plain-text protocol (Non-Secure)
• Stateless protocol
• Does not define how network connection is initiated or managed
• Standardized
HTTP Request-Response
HTTP is a simple Request-Response protocol. A HTTP Client, such as a Web
Browser initiates a request by establishing a TCP/IP connection to a
particular port on a remote host. A HTTPServer listening on that port waits
for the Client to send a request, upon receiving the request, the server
send back a response.

Figure 1.2: HTTP Request-Response

1. A HTTP Client initiates a connection to the Web Server.
2. Once the connection is established, it sends a Request message to the
Server.
3. To this message, the server returns a response.

HTTP Request
The HTTP Request has the following message format for transferring
entities: A request line,Zero or more header lines, Ablank line which
separates the headers from the message body.
The request line of the HTTP request includes:
• The method to be applied on the resource.
• The identifier of the resource.
• The Protocol version in use.
The method filled in request line of HTTP indicates the method to be
performed on the object identified by the URL. Some methods are: GET,
POST and HEAD.
GET: The GET method is most frequently used method. It is used by default
to GET static content. The method can also be used to submit data from a
HTML Web Page to the Server. In GETmethod, the data submitted will be
6|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
sent as a part of the URL. Hence, in GET method:
• Parameters are encoded and passed along with the URL.
• Usually, parameters are passed as name-value pair.
• There is a physical restriction on the size of it being sent.
POST: A POST method is used to send data as a part of the HTTP message
body. In Certain cases the Client may need to send megabytes of
information. In these situations POSTmethod is the right choice.
A POST request passes all its data of unlimited length, directly as a part of
its HTTPrequest body. The exchange is invisible to client. The URL does not
contain the data submitted. Consequently, POST requests cannot be
book marked or emailed or in some cases, even reloaded.
Hence, confidential information sent to the Server, such as the credit card
number, should be sent via post method.
HEAD: The HEAD method is similar to GET method, except that it asks the
server to return only the Response headers and not the content. This
method is useful for client to check the characteristics of the resource
without actually downloading it, thus saving bandwidth. HTTP Clients
usually use the HEAD method when they do not need the files contents.
HEAD is used for the following purposes:
• To determine the document's size.
• To know the document's modification time.
• To know general availability of a Web Page.
HTTP Response
In response to a HTTP Request sent by a HTTP Client, the server sends a
HTTP Response.The HTTP Response to requests is usually a program output
and not a static file. The first line of a Response message is a status line. It
consists of
• The protocol version
• Numeric status code
• Description of the status code
HTTP status code: The response status line contains the status of processing
of the HTTPrequest. In case of success, it will contain the status code 200
and description ―OK". The status line in this case will be: In case of error,
the server sends an appropriate error code back to the Client. The HTTP
error codes are standardized. Some of the commonly found error codes:
The error or success codes of the HTTP response are standardized in the
following manner:
Page5 200 OK
HTTP/1.0
sor Department o

7|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
HTTP/1.0 404 Page Not
Found HTTP/1.0 500 Internal
Server Error
1XX Indicates informational message only
2XX Indicates success of some kinds.
3XX Redirects the Client to anotherURL.
4XX Indicates an error on Client'sport.
5XX Indicates an error on Server'sport
HTTP Response Headers:The Response must contain header line describing
the following.

• MIME-type of the data being sent in response.

• Date and Time stamp.
• Content size etc.
The HTTP Response message body contains the required data.
Web Servers
A Web Server is a server program running on a computer whose purpose
is to serve Web Pages to other computer when required. Every computer
on the Internet that contains a Web site will have a Web Server program.
The most common use of web servers is to host websites, but there are
other uses such as gaming, data storage, running enterprise applications,
handling email, FTP, or other web uses.
Many generic web servers also support server-side scripting using Active
Server Pages (ASP), PHP, or other scripting languages. This means that the
behaviour of the web server can be scripted in separate files, while the
actual server software remains unchanged. Usually, this function is used to
create HTML documents dynamically ("on-the-fly") as opposed to
returning static documents.
Examples of Web Servers:
1. Apache Web Server
2. Microsoft Internet Information Server (IIS)
3. XAMPP (Bundle server)
4. WAMP (Bundle server)

Apache HTTP Server

The Apache HTTP Server commonly referred to as Apache, is a web server
program not able for playing a key role in the initial growth of the World
Wide Web (WWW). It became the first web server software to exceed the
100 million web site mile stone. Typically Apache is run on a Unix-like
Operating system, and was developed for use on Linux.
Apache is developed and maintained by an Open community of
developers under the support and approval of the Apache Software
Foundation (ASF). The application is available for wide variety of
operating system, including UNIX, Free BDS, Solaris, Linux, Novel Netware,
OSX, Microsoft Windows, OS/2 etc., Released under the Apache license,
8|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
Apache is open-source software.
The main design goal of Apache is not to be the fastest Web server,
Apache does have performance similar to other \high-performance"
Web Servers. Instead of implementing a single architecture Apache
provide a variety of Multi Processing Modules (MPMs) which allow Apache
to run process-based, where compromises in performance need to be
made, and the design of Apache is to reduce latency and increase
throughput, relative to simply handling more requests, thusensuring
consistent and reliable processing or requests within reasonable time
frames.
Features of Apache:
• It implemented as compiled modules which extend the core
functionality, thus the range from server-side programming support to
authentication scheme.
• Password-protected pages for a multitude of users (It supports password
authentication and digital certificate authentication).
• Customized error pages.
• Display of code in numerous levels of HTML, and the capability to
determine at what level the browser can accept the content.
• Virtual hosting allows one Apache installation to serve many different
actual Websites.
• Usage and error logs in multiple and customizable formats
• Directory Index directives to multiple files.
• URL aliasing or rewriting with no fixed limit
• Robustness and security

Architecture of the Apache Web Server

Microsoft Internet Information Server (IIS)

It is the second most popular Web Server software. It consists of Services
9|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
including File Transfer Protocol (FTP), Hyper Text Transfer Protocol (HTTP),
Simple Mail Transfer Protocol (SMTP) and others that enable a Windows
machine to manage Websites. The latest version (IIS 7.6) also includes
various modules for security, logging compression and diagnostics.
Because of IIS is provided for Windows systems only, the choice to use IIS
necessitates the choice of a Windows Server and therefore increases
running costs. Windows is also prone to more malware attacks, and has a
reputation as a less secure server option.
But this presents a problem if you'd like to develop and even deploy your
PHP-driven website on a Windows server running Microsoft's IIS web server.
In recent years, Microsoft, in collaboration with Zend Technologies Ltd.,
has made great strides towards boosting both the stability and
performance of PHP running on both Windows and IIS.

Features:
• IIS 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.

10|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
• Security Module: Used to perform many tasks related to security in the
requesting- processing pipeline (Authentication Scheme, URL
authentication)
• Content Module: Used to perform tasks related to content in the
requesting-processing pipeline (Such as processing requests for static
pages, returning default page etc.,)
• Compression Module: Used to perform tasks related to compression in
the requesting- processing pipeline (Such as compression responses,
performing pre-compression of staticcontent.)
• Caching Module: Used to perform tasks related to caching in the
requesting-processing pipeline (Such as storing processed information in
the memory on the server and using cached content in subsequent
request for the same resource.)
• Logging and Diagnostics Module: Used to perform tasks related to
Logging and Diagnostics in the requesting-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 additional security features: Client-certificate mapping, IP
security, Request filtering, URL authentication.
1.3XAMPP (Bundle Server)
XAMPP is a free and open-source cross platform Web Server Solution stack
package, consisting mainly of Apache HTTP Server, MySQL database, and
interpreter for scripts written in the PHP and Perl programming languages.
X: Cross-Platform
A:Apache
M:MySQL
P: PHP
P: Perl
Officially, XAMPP's designers intended it for use only as a development
tool, to allow Website designers and programmers to test their work on
their own computer without any access to the Internet. To make this as
easy as possible many important security features are disabled by default.
XAMPP sometimes used to actually Server Web Pages on the World Wide
Web.
Note: XAMPP is also provided support for creating and manipulating
databases in MySQL and SQL Lite among others.
Benefits:
• Self contained, multiple instances of XAMPP can exist on a single
computer, and any given instance can be copied from one computer to
another.
• It automatically starts at system logon.
• You can start and stop Web Server and database stack with one
command.

11|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
• Run in back ground.
• XAMPP is portable so you can carry it around on a thumb drive.
• The security settings are strict by default, nobody but you will be able to
access the WebServer.
• PHP error reporting is enabled by default, which helps when debugging
scripts.

1.4WAMP (Bundle Server)

WAMP is the bundle of Apache, MySQL and PHP for Windows. These are
the things you need to run a dynamic web sites on your computer in
Windows. i.e equal to XAMPP.WAMPs are packages of independently-
created programs installed on computers that use a Microsoft Windows
operating system.
Benefits:
• Scripting language that can manipulate the information held in
database and generate Web pages dynamically each time the content
is requested by browser.
• Other packages are also included like phpMyAdmin which provides a
GUI for database manager.
Some of the bundle servers are: LAMP:Linux, Apache, Mysql, PHP.
SAMP:Solaris, Apache, Mysql,PHP. MAMP:Mac OS, Apache, Mysql, PHP.
1.4 Installation of Web Servers

1.4 Installing Apache and PHP on Windows:

Apache needs to be installed and operational before PHP and MySQL
1. Download theApache 2.x Win32 MSIinstallerbinary.It'sdownloadable
fromhttp://httpd.apache.org/.
Select the ―Download from a mirror‖ link on the left side of the
page and download the best available version. A mirror is a download
location. The file that you save to your desktop will be named similarly to
apache2.2.4-win32-x86-nossl.msi (the exact version number will vary).
1. Install Apache using the Installation Wizard. Double-click the MSI installer
file on your desktop, and you see the installer shown in Figure 1.3

12|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
Figure 1.3 Figure 1.4
2. Accept the license terms by clicking the radio button shown in Figure
1.4. Click Next.
3. You'll see a Read This First box, as shown in Figure 1.5. Additionally, this
window offers number of excellent resources related to the web server.
Click Next.

Figure 1.5 Figure 1.6

4. In the dialog shown in Figure 1.6, enter all pertinent network information.
Click Next.
5. In the next screen, shown in Figure 1.7, select the setup type. The Typical
install will work for your purposes. Click Next.

Figure 1.7 Figure 1.8

6. Accept the default installation directory, as shown in Figure 1.8. Click
Next.

13|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
7. As Figure 1.9 shows, it's time to begin the installation. Click Install. The
installer installs a variety of modules, and you will see some DOS windows

appear and disappear.

Figure 1.9 Figure 1.10
8. Click Finish when the installer is done.
9. Test your installation by entering http://localhost/ in your browser's
location field. Remember, local host is just the name that translates to the
IP address 127.0.0.1, which is always the address of the local computer.
10. After entering the URL in your browser, the default Apache page
displays, which is similar to the one shown in Figure 1.10. The installation
was successful if you see the text ―It works!".This page may be different
depending on which version of Apache you install.
Generally, if you see text that doesn't mention an error, the installation was
successful.
Installing PHP
Go to http://www.php.net/downloads.php to download the latest version
of PHP; both binaries and source code can be found on this web site.

1. The file that you save to your desktop will be named similarly to php-
5.2.1-win32-installer.msi(the exact version number will vary).
2. Install PHP using the Installation Wizard. Double-click the MSI installer
file on your desktop, and you‘ll see the installer shown in Figure 1.11.

Figure 1.11 Figure 1.12

14|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
3. Click Next. The License Terms dialog appears as shown in Figure 1.12
4. Click the checkbox to accept the licensing terms. Click Next.
5. The Destination Folder dialog appears (see Figure 1.13). Select the
destination folder.
You may use the default of C:\Program Files\PHP or C:\PHP (used in this
material that modify the PHP configuration files assume C:\PHP). Click
Next.

Figure 1.13 Figure 1.14

6. The Web Server Setup dialog appears as shown in Figure 1.14. Select
―Apache 2.2.xModule" and click Next. If you were using a different web
server like IIS, you could select that option here.
7. The Apache Configuration Directory dialog specifies where you
installed Apache so that the installer can set up the Apache configuration
to use PHP for you. It should be similar to C:\Program Files\Apache
Software Foundation\Apache2.2\, as shown in Figure 1.15.

Figure 1.15 Figure 1.16

8. Figure 1.16 shows the ―Choose Items to Install dialog. The defaults on
this dialog areall OK. If you changed the base install directory, you may
also need to change it here.Click Next.
9. Click Install on the ―Ready to install screen to confirm the installation.

15|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
10. Click Yes to confirm configuring Apache when the dialog shown in
Figure 1-17 appears.

Figure 1.17: Dialog confirming that the installer will configure Apache
11. Click OK on the Apache Config dialog to acknowledge the successful
Apache update for―httpd.conf‖.
12. Click OK on the Apache Config dialog to acknowledge the successful
Apache update formime.types.
13. The Successful Installation dialog appears.
14. Restart the Apache server by selecting Start → All Programs →
Apache HTTP Server
2.x.x → Control Apache Server → Restart, so that it can read the new
configuration directives that the PHP installer placed in the httpd.conf
configuration file. This file tells Apache to load the PHP process as a
module. Alternatively, in the system tray, double-click the Apache icon
and click the Restart button.
Installing Apache for Linux/UNIX
To download the Apache distribution for Linux, start at the
Apache Server Web site,
http://httpd.apache.org/,and follow the link to Download. The current
version is 2.2.4, and I prefer

*.tar.gz files, so the file used as an example throughout this section is

httpd-2.2.4.tar.gz.
1. Type cp httpd-2.2.4.tar.gz /usr/local/ and press Enter to copy the
Apache installation file to the/usr/local/src directory.
2. Go to /usr/local/src by typing cd/usr/local/src and pressing Enter.
3. Unzip the Apache installation le by typing gunzip httpd-2.2.4.tar.gz
and pressing Enter.
4. Extract the files by typing tar -xvf httpd-2.2.4.tar and pressing Enter. A
directory structure will be created, and you‘ll be back at the prompt. The
parent directory will be/usr/local/src/httpd- 2.0.49/.
5. Enter the parent directory by typing cd httpd-2.2.4 and pressing Enter.
6. Type the following and press Enter to prepare to build Apache:
./configure --prefix=/usr/local/apache2 --enable-module=so
The configuration script will run through its process of checking your
configuration and creating make files, and then it will put you back at the
prompt.
7. Type make and press Enter. This second step of the installation process
will produce many lines of output on your screen. When it is finished, you

16|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
will be back at the prompt.
8. Type make install and press Enter. This final step of the installation
process will again produce many lines of output on your screen. When it is
finished, you will be back at the prompt.
If your installation process produces any errors up to this point, go through
the process again or check the Apache Web site for any system-specific
notes. In the next section, you'll make some minor changes to the Apache
conguration file before you start Apache for the first time.
Configuring Apache on Linux
To run a basic installation of Apache, the only changes you need to make
are to the server name, which resides in the master configuration file
called httpd.conf. This file lives in theconf directory, within the Apache
installation directory. So if your installation directory is/usr/local/apache2/,
the configuration files will be in /usr/local/apache2/conf/.
To modify the basic configuration, most importantly the server name,
open the httpd.conffile with a text editor and look for a heading called
Main server configuration. You will find two important sections of text.
We are going to change the values in the configuration file so that
Apache knows where to find things and who to send complaints to. The
ServerAdmin, which is you, is simply the e-mail address that people can
send mail to in reference to your site. The ServerName is what Apache
uses to route incoming requests properly.
1. Change the value of ServerAdmin to your e-mail address.
2. Change the value of ServerName to something accurate and
remove the preceding # so that the entry looks like this:
ServerName somehost.somedomain.com
3. Save the file.
Installing PHP for Linux
To download the PHP source distribution, visit the Downloads page at the
PHP Web site:www.php.net/downloads.php.

1. The current source code version is 6.0.0, and that version number will
be used in thefollowing steps.
2. Once downloaded to your system, type cp php-6.0-dev.tar.gz
/usr/local/src/ and press Enter to copy the PHP source distribution to the
/usr/local/src/ directory.
3. Go to /usr/local/src/ by typing cd /usr/local/src/ and pressing Enter.
4. Unzip the source file by typing gunzip php-6.0-dev.tar.gz and pressing
Enter.
5. Extract the files by typing tar -xvf php-6.0-dev.tar and pressing Enter.
This will createa directory structure and then put you back at the prompt.
The parent directory will be/usr/local/src/php-6.0.0/.
6. Enter the parent directory by typing cd php-6.0-dev and pressing
Enter.
17|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
7. Type the following and press Enter to prepare to build PHP:
./configure --prefix=/usr/local/php5 --with-mysql=/usr/local/mysql/
--with-apxs2=/usr/local/apache2/bin/apxs

The configuration script will run through its process of checking your
configuration and creating makefiles and then will put you back at the
prompt.
8. Type make and press Enter. This second step of the installation process
will produce many lines of output on your screen. When it is finished, you
will be back at the prompt.
9. Type make install and press Enter. This final step of the installation
process will produce many lines of output on your screen. When it is
finished, you will be back at the prompt.
Now, to get a basic version of PHP working with Apache, all you need to
do is to make a few modifications to the httpd.conffile.
Configuring Apache to Use PHP
The installation process will have placed a module in the proper place
within the Apache directory structure. Now you must make some
modifications to the httpd.conffile before starting up Apache with PHP
enabled.
1. Open the httpd.conffile in your text editor of choice.
2. Look for the following line, which will have been inserted into the file
by the installation process:
LoadModule php6_module modules/libphp6.so
You want this line to be uncommented, so ensure that it is (as shown).
3. Look for the following lines:
# AddType allows you to add to or override the MIME configuration #
filemime.types for specific file types.
#AddType application/x-tar .tgz

4. Add to these lines the following:

AddType application/x-httpd-php .phtml .php
5. Save and close the httpd.conffile.
Installing IIS and PHP on Windows
Installing IIS Services:

a) Install windows in to your machine.

b) After installing windows, go to control panel.
c) In control panel, double click add/remove programs.
d) In the left part of the window, you can see the option add/remove
windows component .click on add/remove window components.
e) Now, you can see the internet information services as a checkbox,
initially unchecked.
f) Select that checkbox and click ok, automatically the system will ask for
windows CD (windows XP only ie., Win7 won‘t ask for any CD),insert
18|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
windows CD & click ok. It will install IIS on your system.
g) After installation, open control panel, double click on administration
tools, double click on internet services manager icon. This opens the
internet information services window (or)type "inetmgr" at start & run
command.
h) Place the documents that will be requested from IIS either in the
default directory i.e., c:\onetpub\wwwroot)in a virtual directory.
i) A virtual directory is an alias for an existing directory that resides on the
local machine or on the network.
j) In the IIS window, the left pane contains the web server directory
structure.
k) The name of the machine running IIS is listed under IIS.
l) Clicking the # symbol to the left of the machine name displays default
FTP site, default web site, default SMTP virtual server.
m) FTP site is a file protocol site. the default website is an HTTP site.
n) The default SMTP virtual server allows you to create a
simple mail transfer protocol(SMTP)sever for sending electronic
mail(e-mail).
o) Expand the default website directory by clicking '+'.The default web
server sub directories are virtual directories.
p) In this directory, we will create a virtual directory for the HTTP web site.
to create a virtual directory with in this directory, right click on default web
site, select "new", then virtual directory. this starts the virtual directory
creation wizard.
q) In the virtual directory alias dialog, enter the name for the virtual
directory & click next.
r) In the website content directory dialog, enter the path for the directory
containing the documents that client will view. click next.
s)The access permissions dialog presents the virtual directory security level
choices, includes read, run script, execute,write, browse.

Installing & configuring PHP in windows with IIS Server:-

1. Download php zip file from php.net

2. Install IIS in the system.
3. Extract all of the files from the downloaded zip file into c:\php.
4. Php5 includes a CGI Executable as well as he server module. the DLL's
needed for their executable scan be found in the root of the php
folder(c:\php).
5. phpts.dll needs to be available to the web browser to do this , you have
3 options.
a) copy php5ts.dll to the web servers directly(c:/input/user).
b) copy php5ts.dll to the windows system directory(sys32).
c) add to path directory path environment variables.
19|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
6. Right click on my computer and choose properties.
7. Select advanced tab click the environment variables button.
8. In the system variables click on "path" select edit
9. Go to the end of the line add a semicolon(;) if there is not one already
add c:\php and click ok.
10. Restart the computer once to effect the changes.
11. Now we want to setup config file for php, php.ini.
12. In c:\php you will find two files named
php.ini_production, php.ini_development. Selectphp.ini_production.
13. Rename it to php.ini.
14. Open php.ini search doc_root = c:\inetpub\wwwroot.
15. cgi.force_redirect = 0 and save it.

Move to php with IIS:-

1.Open IIS.
2.Expand the IIS directories, right click on default websites under home
directory tab , set execute permissions to scripts only.
3.Click on configuration click and button.
4.Browse the path to phpi.e..to insert php5 is api.dll. i.e..(c:\php\php5 is
api.dll) set extension to phpok.
5.Under isapi filters, add, set filter name to php. Set executable to
c:\php\php5 isapi.dll okapply.
6.Open note pad type: <?php echo phpinto(); ?>. Save it as phpinfo.php in
c:\inetpub\wwwroot. Open web browser as type
http://localhost/phpinfo.php.
Installing a XAMPP on Linux
If you know much about Linux, you may have already set up and installed
PHP and MySQL. Ifnot, your best bet is probably to look at XAMPP for Linux,
which is available athttp://apachefriends.org/en/xampp-linux.html.
The process is relatively simple. After downloading, go to a Linux shell and
log in as thesystem administrator (root) by typing:su
Enter your system administration password. Many desktop Linux systems
allow you to useyour personal account's password for the administration
password. Some systems, includingthe popular Ubuntu, encourage you
not to use su to log in as root, but to precede each systemadministration
command with sudo instead. You'll know what to do if you've performed
anyadministrative tasks on your system. Now extract the downloaded
archive file to /opt with thefollowing command (inserting the appropriate
filename if the version you downloaded is a laterversion):
tarxvfz xampp-linux-1.6.8a.tar.gz -C /opt
Any XAMPP version that was already installed will be overwritten by this
command. Oncethe command finishes, XAMPP will be installed below the
/opt/lampp directory. To start it,enter the following: /opt/lampp/lampp
20|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
start
You should now see something like this on
your screen: Starting XAMPP 1.6.8a...
LAMPP: Starting
Apache...
LAMPP: Starting
MySQL... LAMPP
started.

Ready. Apache and MySQL are running.

Now you are ready to test the setup. Type the following URL into your web
browsers addressbar:http://localhost

Figure 1.18: XAMPP for Linux, installed and running

Installing XAMPP on Windows
The following steps cover installing XAMPP on Windows:
1. Download the Basic Package XAMPP MSI installer found at
http://www.apachefriends.org/en/xampp-windows.html
2. Double-click the MSI installer file on your desktop, and you‘ll see the
installer shown inFigure 1.19
3. Select English and click the OK button.
4. The Setup Wizard appears as shown in Figure 1.20. Click Next.
5. The dialog shown inFigure 1.21 is displayed. Click Next toaccept the
default installationdirectory.

21|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI

Figure 1.19 Figure 1.20

Figure 1.20: The Xampp Setup Wizard

Figure 1.21: Select the installation directory

6. The XAMPP Options dialog displays, as shown in Figure 1.22. Leave the
Service Section checkboxes unchecked so you don‘t install the
components as services; instead, you'll start them from the Control Panel.
Click Install.

22|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI

Figure 1.22: Choose your installation options

7. The Completing the XAMPP Setup Wizard displays. Click Finish.
8. The option to start the Control Panel displays, Click Yes.
9. The Control Panel launches, as shown in Figure 1.23. The Control Panel
can start and stop the services, as well as aid in their configuration.

Figure 1.23: The Control Panel starts and stops the components
Installing WAMP
If you are installing WampServer 2.1d, then these following steps will help
you that how to install the WampServer 2.1d in your computer with
windows 7. This server can be found fordownload at official web page
WampServer.
1. It is the time to install WampServer on our windows. You will receive a
Security Warningafter opening WampServer file. It is absolutely normal to
run WampServer setup on windows.(Fig 1.24)

23|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI

Figure 1.24: Installation Starting of WampServer

2.You will see a standard setup wizard of windows after clicking Run
button on securitywarningdialog(Fig 1.25)

Figure 1.25: WampServer 2 Setup Wizard

3. You have to agree the license of WampServer before selecting
installation destination atyour windows machine.(Fig. 1.26)
4. It is very important step of WampServer installation. I will recommend
installingWampServerat the drive other than Windows 7 installation.
Suppose your Windows 7 is install in Cdrive so you should install
WampServer on D, E or any other location in hard drive exceptC drive.
I am going to install WampServer in D drive. Now you can click on Next
button afterselecting installation location for WampServer 2.1d.(Fig. 1.27)

24|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI

Figure 1.27: Select Destination Location of WampServer

5. When you click on the Next button then a Select Additional Tasks
dialog will appear onyour screen, if you would like setup to perform while
installing WampServer 2. You cancheck following options,
• Create a Quick Launch icon
• Create a Desktop icon
I have not interested to create any icon in the above locations, but you
can do. You willbe at ―Ready to Install" window after clicking Next
button.(Figure 1.28)
6. Setup is now ready to begin installing WampServer 2.1d on
your computer. Click on Install button to start installation of
WampServer 2.1d.(Figure 1.29)

Figure 1.28: Select Additional Tasks

25|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI

Figure 1.29: WampServer 2.1d Ready to Install

7. Now your WampServer is starting to install in your computer.(Figure

1.30)
Figure 1.30: WampServer Installing
8. You will receive a dialog for choosing your default browser for
WampServer. You canchoose your favorite browser for WampServer as
default, or simply click ―Open" if you are not sure about the installation or
executable files of your favorite browser.(Figure 1.31)

26|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
Figure 1.31: Choice of Default Browser
9. WampServer installation has completed now and setup will guide you
for Apache configurations in the next steps.(Figure 1.32)

Figure 1.32: Complete the Installation

10. You will notice a ―Windows Firewall" standard dialog while
configuring Apache byWampServer.(You may not observe this, if your
windows firewall is not active). Click on ―Allow Accessby leaving default
options as such to proceed for PHP mail parameters.(Figure 1.33)

Figure 1.33: Apache HTTP Server

11. After allowing access to Apache server, you are at SMTP server
configuration dialog. Youcan specify the SMTP server and the address mail
to be used by PHP when using thefunction mail(). I will recommend the
following values,
• SMTP: localhost
• Email: Your email address.
Click Next after putting the above values for the installation fiinal
dialog.(Figure 1.34)
27|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI

Figure 1.34: PHP Mail Parameters

Figure 1.35: WampServer 2 Setup Wizard Completion

12. You have successfully installed WampServer 2.1 d along with Apache,
MySql, PHP, phpMyAdmin and SqlBuddy at your computer.Click ―Finish"
tostartWampServer along with other services. Leave ―Launch WampServer 2
now" check-box checked to start WampServer automatically after
installation.(Fig1.35)

1.6 HTML Introduction

HTML is the standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language
HTML describes the structure of Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as "heading",
"paragraph", "table", and so on

28|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
A Simple HTML Document
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
HTML Tags
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a forward
slash inserted before the tag name
HTML Versions
Since the early days of the web, there have been many versions of HTML:
Version Year

HTML 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2000

HTML5 2014

HTML Documents
All HTML documents must start with a document type declaration:

29|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
<!DOCTYPE html>. The HTML document itself begins with <html> and ends
with </html>.The visible part of the HTML document is between <body>
and </body>. Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least
important heading:
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag:
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML

elements.
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided
as attributes:
Example
<imgsrc="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
30|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI

HTML Elements
An HTML element usually consists of a start tag and end tag, with the
content inserted in between:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
<p>My first paragraph.</p>
Empty HTML Elements
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a
line break). Empty elements can be "closed" in the opening tag like this:
<br />.
HTML5 does not require empty elements to be closed. But if you want
stricter validation, or if you need to make your document readable by
XML parsers, you must close all HTML elements properly.
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value" The
width and height Attributes
Images in HTML have a set of size attributes, which specifies the width
and height of the image: Example
<imgsrc="img_girl.jpg" width="500" height="600">
The style Attribute
The style attribute is used to specify the styling of an element, like color,
font, size etc. Example
<p style="color:red">I am a paragraph</p>
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least
important heading. Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Bigger Headings
Each HTML heading has a default size. However, you can specify the size
for any heading with the style attribute:
Example
<h1 style="font-size:60px;">Heading 1</h1>

31|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and ismost often
displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an
HTML page: Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
View HTML Source Code:
To find out, right-click in the page and select "View Page Source" (in
Chrome) or "View Source" (in IE), or similar in other browsers. This will open
a window containing the HTML source code of the page.
Inspect an HTML Element:
Right-click on an element (or a blank area), and choose "Inspect" or
"Inspect Element" to see what elements are made up of (you will see both
the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the
Elements or Styles panel that opens.
HTML Line Breaks
The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new
paragraph:
Example
<p>This is<br>a paragraph<br>with line breaks.</p>
The HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually
Courier), and it preserves both spaces and line breaks:
Example
<pre>
My Bonnie lies over the ocean. My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</pre>
HTML Formatting Elements
In the previous chapter, you learned about the HTML style attribute.

HTML also defines special elements for defining text with a special
meaning. HTML uses elements like <b> and <i> for formatting output, like
bold or italic text. Formatting elements were designed to display special
32|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
types of text:
HTML Text Formatting Elements
Tag Description

<b> Defines bold text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

HTML <b> Elements

The HTML <b> element defines bold text,

without any extra importance. Example
<!DOCTYPE
html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</html>
HTML Comment Tags
You can add comments to your HTML source by using the following
syntax:
<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the opening tag, but not in
the closing tag.
Note:Comments are not displayed by the browser, but they can
help document your HTML source code.
With comments you can place notifications and reminders in your HTML:
Example
<!-- This is a comment -->

<p>This is a paragraph.</p>

33|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
<!-- Remember to add more information here -->
HTML colors are specified using predefined color names, or RGB,
HEX, HSL, RGBA, HSLA values.
Color Names
In HTML, a color can be specified by using a color name:
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
Example

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Loremipsum...</p>

Text Color Example

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Loremipsum...</p>
<p style="color:MediumSeaGreen;">Utwisienim...</p>
Border Color Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Styling HTML with CSS
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper,
or in other media. CSS saves a lot of work. It can control the layout of
multiple web pages all at once.

CSS can be added to HTML elements in 3 ways:

Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file
The most common way to add CSS, is to keep the styles in separate CSS
files. However, here we will use inline and internal styling, because this is
easier to demonstrate, and easier for you to try it yourself.
Tip: You can learn much more about CSS in our CSS Tutorial.

Inline CSS
An inline CSS is used to apply a unique style to a single HTML element. An
inline CSS uses the style attribute of an HTML element.
34|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
This example sets the text color of the <h1> element to blue:
Example
<h1 style="color:blue;">This is a Blue Heading</h1>
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a
<style> element: Example
<!DOCTYPE html>
<html>
<head>
<style>
body
{background-
color:
powderblue;} h1
{color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
External CSS
An external style sheet is used to define the style for many HTML pages.
With an external style sheet, you can change the look of an entire web
site, by changing one file!
To use an external style sheet, add a link to it in the
<head> section of the HTML page: Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
An external style sheet can be written in any text editor. The file must not
35|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
contain any HTML code, and must be saved with a .css extension.
Here is how
the"styles.css
" looks: body
{
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
CSS Fonts
The CSS color property defines the text color to be used. The CSS font-
family property defines the font to be used. The CSS font-size property
defines the text size to be used.
Example
<!DOCTYPE html>
<html>
<head><style> h1 {
color: blue;font-family: verdana; font-size: 300%;
}
p{
color: red;
font-family: courier; font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
CSS Border
The CSS border property defines a border around an HTML
element:Example
p

{
border: 1px solid powderblue;
}
36|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
CSS Margin
The CSS margin property defines a margin (space) outside the border:
p
{
border: 1px solid powderblue; margin: 50px;
}
The id Attribute
To define a specific style for one special element, add an id attribute to
the element:
<!DOCTYPE html>
<html>
<head><style> #p01 {color: blue;
}
</style> External
</head> Referenc
es
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id="p01">I am different.</p>
</body>
</html>
The class Attribute
To define a style for a special type of elements, add a class
attribute to the element:
<p class="error">I am different</p>
then define a style for the elements with the specific class:
Example
error {color: red;
}

37|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
External style sheets can be referenced with a full URL or with a
path relative to the current web page.
This example uses a full URL to link to a style sheet:
Example
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
This example links to a style sheet located in the html folder on
the current web site:
Example
<link rel="stylesheet" href="/html/styles.css">
This example links to a style sheet located in the same folder as
the current page:
Example
<link
rel="stylesheet"hre
f="styles.css">HTM
L LinksHyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.When
you move the mouse over a link, the mouse arrow will turn into a
little hand.
Note: A link does not have to be text. It can be an image or any
other HTML element. HTML Links - Syntax
In HTML, links are defined with the <a> tag:
<a href="url">link text</a> Example
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
The href attribute specifies the destination address
(https://www.w3schools.com/html/) of the link. The link text is the visible
part (Visit our HTML tutorial).
Clicking on the link text will send you to the specified address.
Note: Without a forward slash on subfolder addresses, you might generate
two requests to the server. Many servers will automatically add a forward
slash to the address, and then create a new request.
HTML Images
Images can improve the design and the appearance of a web
page. Example
<imgsrc="pulpitrock.jpg"
alt="Mountain View">
Image Maps
Use the <map> tag to define an image-map. An image-map is an image
with clickable areas. In the image below, click on the computer, the
phone, or the cup of coffee:

38|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI

<!DOCTYPE html>
<html>
<body>
<p>Click on the computer, the phone, or the cup of coffee to go to a
new page and read more about the topic:</p>
<imgsrc="workplace.jpg" alt="Workplace" usemap="#workmap"
width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer"
href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone"
href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee"
href="coffee.htm">
</map>
</body>
</html>
HTML Tables
Defining an HTML Table

An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with
the <th> tag. By default, table headings are bold and centered. A table
data/cell is defined with the <td> tag.
Example
<!DOCTYPE html>
<html>
39|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
<body>

<table style="width:100%"><tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th></tr><tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td></tr><tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td></tr><tr>
<td>John</td>
<td>Doe</td>
<td>80</td></tr>
</table>

</body>
</html>
Note: The <td> elements are the data containers of the table. They can
contain all sorts of HTML elements; text, images, lists, other tables, etc.
HTML Table - Adding a Border
If you do not specify a border for the table, it will be displayed without
borders.
A border is set using the CSS border property:
<!DOCTYPE html>
<html>
<head><style> table, th, td {
border: 1px solid black;
}</style></head><body>

<table style="width:100%"><tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th></tr><tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td></tr><tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td></tr><tr>
<td>John</td>
<td>Doe</td>
<td>80</td></tr></table></body></html> Output:

40|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
HTML Table - Collapsed Borders
If you want the borders to collapse into one border, add the CSS border-
collapse property: Example

table, th, td {
border:
1px
solid
black;
border-
collaps
e:
collaps
e;
}
HTML Table - Adding Cell Padding
Cell padding specifies the space between the cell content and its
borders.
If you do not specify a padding, the table cells will be displayed without
padding. To set the padding, use the CSS padding property:Example th,
td {
padding: 15px;
}
HTML Table - Left-align Headings
By default, table headings are bold and centered.To left-align the table
headings, use the CSS text-align property:
Example
th {
text-align: left;
}
Adding a Caption
To add a caption to a table, usethe <caption> tag:
Example
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th></tr>

41|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
<tr>
<td>January</td>
<td>$100</td></tr>
<tr>
<td>February</td>
<td>$50</td></tr>
</table>
A Special Style for One Table
To define a special style for a special table, add an id attribute to the
table:
Example
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th></tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td></tr>
</table>
Now you can define a
special style for this table:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
HTML Lists

HTML List Example

An Unordered List:

• Item
• Item
• Item
• Item
An Ordered List:
1. First item
2. Second item
3. Third item
4. Fourth item
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li>
tag. The list items will be marked with bullets (small black circles) by
42|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
default: Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<l
i>
M
ilk
<
/li
>
</ul>
Unordered HTML List - Choose List Item Marker
The CSS list-style-type property is used to define the style of the list item
marker:
Value Description
disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

square Sets the list item marker to a square

none The list items will not be marked

Example - Disc
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description
type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

43|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the
term (name), and the <dd> tag describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

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. Example
<div>Hello</div>
<div>World</div>
Block level elements in HTML:

<address>

<article>

<aside>

<blockquote>

<canvas>

<dd>

44|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
<div>

<dl>

<dt>

<fieldset>

<figcaption>

<figure>

<footer>

<form>

<h1>-<h6>

<header>

<hr>

<li>

<main>

<nav>

<noscript>

<ol>

<output>

<p>

<pre>

<section>

<table>

<tfoot>

<ul>

<video>

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.
45|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
Example
<span>Hello</span>
<span>World</span>

Inline elements in HTML:

<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>

The <div> Element

The <div> element is often used as a container for other HTML elements.
The <div> element has no required attributes, but both style and class are
common. When used together with CSS, the <div> element can be used
to style blocks of content: Example

46|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million
inhabitants.</p>
</div>

The <span> Element

The <span> element is often used as a container for some text.
The <span> element has no required attributes, but both style and class
are common. When used together with CSS, the <span> element can be
used to style parts of the text: Example
<h1>My <span style="color:red">Important</span> Heading</h1>

HTML The class Attribute

Using The class Attribute
The class attribute specifies one or more class names for an HTML element.
The class name can be used by CSS and JavaScript to perform certain
tasks for elements with the specified class name.
Example
Using CSS to style all elements with the class name "city":
<style>
.city {
backgro
und-
color:
tomato;
color:
white;
padding: 10px;
}
</style>

<h2 class="city">London</h2>

<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>

<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>

<p>Tokyo is the capital of Japan.</p>

HTML Iframes
47|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
An iframe is used to display a web page within a web page.
Iframe - Set Height and Width
Use the height and width attributes to specify the size of the iframe.
The attribute values are specified in pixels by default, but they can also be
in percent (like "80%").

Syntax
An HTML iframe is defined with the <iframe> tag:
<iframesrc="URL"></iframe>
The src attribute specifies the URL (web address) of the inline frame page.
<!DOCTYPE html>
<html>
<body>
<iframesrc="demo_iframe.htm" height="200" width="300"></iframe>
</body>
</html>
Iframe - Remove the Border
By default, an iframe has a border around it.To remove the border, add
the style attribute and use the CSS border property:
Example
<iframesrc="demo_iframe.htm" style="border:none;"></iframe>

HTML Layouts
Websites often display content in multiple columns (like a magazine or
newspaper). HTML5 offers new semantic elements that define the different
parts of a web page:
• <header> - Defines a header for a
document or a section
• <nav> - Defines a container for navigation
links
• <section> - Defines a section in a document
• <article> - Defines an dependent
self-contained article
• <aside> - Defines content aside from the
content (like a sidebar)
• <footer> - Defines a footer for a
document or a section
• <details> - Defines additional details
<summary> - Defines a heading for the <details> element

CSS Floats
It is common to do entire web layouts using the CSS float property. Float is
easy to learn - you just need to remember how the float and clear
48|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
properties work. Disadvantages: Floating elements are tied to the
document flow, which may harm the flexibility.
Float Example

City Gallery
• London
• Paris
• Tokyo

London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan
area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to
its founding by the Romans, who named it Londinium.
Copyright © W3Schools.com

Example:
<!DOCTYPE html>
<html>
<head><style>div.container {
width: 100%;
border: 1px solid gray;
}

header, footer { padding: 1em; color: white;background-color:

black; clear: left;
text-align: center;
}

nav {
float: left;max-width: 160px; margin: 0; padding: 1em;
}

navul {list-style-type: none; padding: 0;

}

navul a {
text-decoration: none;
}

article {
margin-left: 170px;
border-
left: 1px
solid
gray;
49|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
padding
: 1em;
overflow: hidden;
}
</style>
</head>
<body>

<div class="container">

<header>
<h1>City Gallery</h1>
</header>
<nav><ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li></ul>
</nav>

<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million
inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement
for two millennia, its history going back to its founding by the Romans, who
named it Londinium.</p>
</article>

<footer>Copyright &copy; W3Schools.com</footer>

</div>

</body>
</html>
HTML Forms
The HTML <form> element defines a form that is used to collect user input:
<form>
.
form elements

.
</form>
an HTML form contains form elements.

50|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
Form elements are different types of input elements, like text fields,
checkboxes, radio buttons, submit buttons, and more.

The <input> Element

The <input> element is the most important form element.
The <input> element can be displayed in several ways,
depending on the type attribute. Here are some
examples:
Type Description

<input type="text"> Defines a one-line text input field

<input type="radio"> Defines a radio button (for selecting one of

many choices)
<input Defines a submit button (for submitting the
type="submit"> form)
Text Input
<input type="text"> defines a one-line input field for text input:

Example:
<!DOCTYPE html>
<html>
<body>

<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of a text input field is 20

characters.</p>

</body>
</html>
This is how it will look
like in a browser:
First name:

Last name:

Note: The form itself is not visible. Also note that the default width of a text
51|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
field is 20 characters.
Radio Button Input
<input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices:

Example
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other">Other
</form>
This is how the HTML code above will be displayed in a browser: Male
Female Other
The Submit Button
<input type="submit"> defines a button for submitting the form data to a
form-handler. The form-handler is typically a server page with a script for
processing input data.

The form-handler is specified in the form's action attribute:

Example
<form
action="/acti
on_page.ph
p"> First
name:<br>
<input type="text"
name="firstname"
value="Mickey"><br> Last
name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
This is how the HTML code above will be displayed in a browser:
First name:
Mickey

Last name:
Mouse

Submit

Input Type Reset

52|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
<input type="reset"> defines a reset button that will reset all form values to
their default values: Example

<form
action="/acti
on_page.ph
p"> First
name:<br>
<input type="text"
name="firstname"
value="Mickey"><br> Last
name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
input Type Checkbox
<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of

choices.
Example
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
This is how the HTML code above will

be displayed in a browser: I have a

bikeI have a car

HTML5 Input Types

HTML5 added several new input types:
• color
• date
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url

53|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
•week
New input types that are not supported by older web browsers, will
behave as <input type="text">.

Input Type Color

The <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input
field.

Example
<form>
Select your favorite color:<input type="color" name="favcolor">
</form>
Input Type Date
The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input
field.

Example<form> Birthday:
<input type="date" name="bday">
</form>
You can also add restrictions to dates:

Example
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday"
max="1979-12-31"><br> Enter a
date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>

Input Type Datetime-local

The <input type="datetime-local"> specifies a date and time input field,
with no time zone. Depending on browser support, a date picker can
show up in the input field.

Example
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>

Input Type Email

The <input type="email"> is used for input fields that should contain an e-
54|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
mail address. Depending on browser support, the e-mail address can be
automatically validated when submitted. Some smartphones recognize
the email type, and adds ".com" to the keyboard to match email input.

Example<form> E-mail:
<input type="email" name="email">
</form>

Input Type Month

The <input type="month"> allows the user to select a month and year.
Depending on browser support, a date picker can show up in the input
field.

Example
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>

Input Type Number

The <input type="number"> defines a numeric input field. You can also set
restrictions on what numbers are accepted.

The following example displays a numeric input field, where you can enter
a value from 1 to 5:

Example
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>

The <select> Element

The <select> element defines a drop-down list: Example

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <option> elements defines an option that can be selected. By
default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:
Allow Multiple Selections:
Use the multiple attribute to allow the user to select more than one value:
55|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
Example
<select name="cars" size="4" multiple>

<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
Example

<textarea
name="message"
rows="10" cols="30">The
cat was playing in the
garden.
</textarea>
The rows attribute specifies the visible number of lines in a text area. The
cols attribute specifies the visible width of a text area.
This is how the HTML code above will be displayed in a browser: You can
also define the size of the text area by using CSS:

56|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
Example
<textarea name="message"
style="width:200px; height:600px"> The
cat was playing in the garden.
</textarea>
The <button> Element
The <button> element
defines a clickable
button: Example

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML5 Form Elements
HTML5 added the following form elements:
• <datalist>
• <output>
Note: Browsers do not display unknown elements. New elements that are
not supported in older browsers will not "destroy" your web page.

HTML5 <datalist> Element

The <datalist> element specifies a list of pre-defined options for an
<input> element. Users will see a drop-down list of the pre-defined options
as they input data.
The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element.

Example
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option
value="
Opera"
>
<option
value="
Safari">
</datalist>
</form>

HTML5 <output> Element

The <output> element represents the result of a calculation (like one
performed by a script).
70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
Example
Perform a calculation and show the result in an <output> element:
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0
<input type="range" id="a"
name="a" value="50"> 100
+
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>HTML <frame>Tag.Example
A simple three-framed page:
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
Frameset tag is not supported by html5.
1.7 CSS
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages
all at once
• External stylesheets are stored in CSS files Why Use CSS?
CSS is used to define styles for your web pages, including the design,
layout and variations in display for different devices and screen sizes.
CSS Syntax
A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by
semicolons. Each declaration includes a CSS property name and a
value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks
are surrounded by curly braces.
In the following example all <p> elements will be center-
70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
aligned, with a red text color:Example p {
color: red;
text-align: center;
}

CSS Selectors
CSS selectors are used to "find" (or select) HTML elements based on their
element name, id, class, attribute, and more.

The element Selector

The element selector selects elements based on the element name.
You can select all <p> elements on a page like this (in this case, all <p>
elements will be center- aligned, with a red text color):Example p {text-
align: center; color: red;
}
The id Selector
The id selector uses the id attribute of an HTML element to select a
specific element.
The id of an element should be unique within a page, so the id selector is
used to select one unique element!
To select an element with a specific id, write a hash (#) character,
followed by the id of the element. The style rule below will be applied to
the HTML element with id="para1":Example #para1 {text-align: center;
color: red;
}
The class Selector
The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character,
followed by the name of the class.
In the example below, all HTML elements with class="center" will be red
and center-aligned: Example.center {text-align: center; color: red;
}
You can also specify that only specific HTML elements should be affected
by a class. In the example below, only <p> elements with class="center"
will be center-aligned:Example
p.center
{
text-align: center; color: red;
}
Grouping Selectors
If you have elements with the same style definitions, like this:
h1
{
70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
text-align: center; color: red;
}

h2 {text-align: center; color: red;

}

p{
text-align: center;
color: red;
}
It will be better to group the selectors, to minimize the code. To group
selectors, separate each selector with a comma.
In the example below we have grouped the selectors from the code
above:Example h1, h2, p {text-align: center; color: red;
}
CSS Comments
Comments are used to explain the code, and may help when you edit
the source code at a later date. Comments are ignored by browsers.
A CSS comment starts with /* and ends with */. Comments can also span
multiple lines Example p {
color: red;
/* This is a single-line comment */ text-align: center;
}

/* This isa multi-line comment */

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

• External style sheet
• Internal style sheet
• Inline style

External Style Sheet

With an external style sheet, you can change the look of an entire
website by changing just one file! Each page must include a reference to
the external style sheet file inside the <link> element. The<link> element
goes inside the <head> section:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
<p>This is a paragraph.</p>

</body>
</html>
An external style sheet can be written in any text editor. The file should
not contain any html tags. The style sheet file must be saved with a .css
extension.
Here is how the "mystyle.css" looks:
body
{
background-color: lightblue;
}

h1 {color: navy; margin-left: 20px;

}
Note: Do not add a space between the property value and the
unit (such as margin-left: 20 px;). The correct way is: margin-left:
20px;
Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the <head>
section of an HTML page:
Example
<head><style> body {
background-color: linen;
}

h1 {color: maroon; margin-left: 40px;

}
</style>
</head>
Inline Styles
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant
element. The style attribute can contain any CSS property.
The example below shows how to change the color and the left margin
of a <h1> element:
Example
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
Tip: An inline style loses many of the advantages of a style sheet
(by mixing content with presentation).

Cascading Order
What style will be used when there is more than one style specified for an

70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
HTML element? Generally speaking we can say that all the styles will
"cascade" into a new "virtual" style sheet by the following rules, where
number one has the highest priority:
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default
So, an inline style (inside a specific HTML element) has the highest priority,
which means that it will override a style defined inside the <head> tag, or
in an external style sheet, or a browser default value.
CSS Colors
Colors are specified using predefined color names, or RGB, HEX, HSL,
RGBA, HSLA values.

Color Names
In HTML, a color can be specified by using a color name:
• Tomato
• Orange
• DodgerBlue
• MediumSeaGreen
• Gray
• SlateBlue
• Violet
• LightGray
Example

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Loremipsum...</p>

Text Color
Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Loremipsum...</p>
<p style="color:MediumSeaGreen;">Utwisienim...</p>
Border Color
You can set the color of borders:
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL
values, RGBA values, and HSLA values:
Same as color name "Tomato":
Example
70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
RGB Value
In HTML, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color
between 0 and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its
highest value (255) and the others are set to 0.
To display the color black, all color parameters must be set to 0, like this:
rgb(0, 0, 0).
To display the color white, all color parameters must be set to 255, like
this: rgb(255, 255, 255).
HEX Value
In HTML, a color can be specified using a hexadecimal value in the form:
#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values
between 00 and ff (same as decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its highest
value (ff) and the others are set to the lowest value (00).Example #ff0000
#0000ff #3cb371#ee82ee #ffa500 #6a5acd HSL Value
In HTML, a color can be specified using hue, saturation, and lightness
(HSL) in the form:
hsl(hue, saturation, lightness)

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green,
and 240 is blue. Saturation is a percentage value, 0% means a shade of
gray, and 100% is the full color. Lightness is also a percentage, 0% is black,
50% is neither light or dark, 100% is white
Example
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
Saturation

Saturation can be describe as the intensity of a color. 100% is pure color,

no shades of gray50% is 50% gray, but you can still see the color.0% is
completely gray, you can no longer see the color.
Example
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

RGBA Value

RGBA color values are an extension of RGB color values with an alpha
channel - which specifies the opacity for a color.An RGBA color value is
specified with:
rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0
(not transparent at all):
Example
rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

HSLA Value

HSLA color values are an extension of HSL color values with an

alpha channel - which specifies the opacity for a color.
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0
(not transparent at all):
Example
hsla(9, 100%, 64%, 0)
70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)

CSS Backgrounds

The CSS background properties are used to define the background

effects for elements. CSS background properties:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Background Color
The background-color property specifies the background color of an
element. The background color of a page is set like this:
Example
body {
background-color: lightblue;
}
Background Image
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:
Example
body {
background-image: url("paper.gif");
}
Background Image - Repeat Horizontally or Vertically
By default, the background-image property repeats an image both
horizontally and vertically.
Some images should be repeated only horizontally or vertically, or they
will look strange, like this:
Example
body {
background-image: url("gradient_bg.png");
}

70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
If the image above is repeated only horizontally (background-repeat:
repeat-x;), the background will look better:
Example
body {
background-image:
url("gradient_bg.png"
); background-
repeat: repeat-x;
}
Tip: To repeat an image vertically, set background-repeat: repeat-y;
Background Image - Set position and no-repeat
Showing the background image only once is also specified by the
background-repeat property:
Example
body {background-image: url("img_tree.png"); background-repeat: no-
repeat;
}
In the example above, the background image is shown in the same
place as the text. We want to change the position of the image, so that it
does not disturb the text too much.The position of the image is specified
by the background-position property:
Example
body {background-image: url("img_tree.png"); background-repeat: no-
repeat; background-position: right top;
}
Background Image - Fixed position
To specify that the background image should be fixed (will not scroll with
the rest of the page), use the background-attachment property:
Example
body {background-image: url("img_tree.png"); background-repeat: no-
repeat; background-position: right top; background-attachment: fixed;
}
Border Style
The border-style property specifies what kind of border to display. The
following values are allowed:
• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border.
The effect depends on the border-color value
• ridge - Defines a 3D ridged border. The effect depends on the border-
color value
• inset - Defines a 3D inset border. The effect depends on the border-
70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
color value
• outset - Defines a 3D outset border. The effect depends on the border-
color value
• none - Defines no border
• hidden - Defines a hidden border
The border-style property can have from one to four values (for
the top border, right border, bottom border, and the left border).
Example p.dotted
p.dashed border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Result:
A dotted border.

A dashed border.

A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.A hidden border. A mixed border.Border WidthThe border-width
property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by
using one of the three pre- defined values: thin, medium, or thick.The
border-width property can have from one to four values (for the top
border, right border, bottom border, and the left border).5px border-
width
Example
p.one {border-style: solid; border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
}

hree {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
Border Color
The border-color property is used to set the color of the four borders.
The color can be set by:
• name - specify a color name, like "red"
• Hex - specify a hex value, like "#ff0000"
• RGB - specify a RGB value, like "rgb(255,0,0)"
• transparent
The border-color property can have from one to four values (for
the top border, right border, bottom border, and the left border).
If border-color is not set, it inherits the color of the element. Red
borderExample
p.one {
border-style: solid; border-color: red;
}

p.two {
border-style: solid; border-color: green;
}

p.three {
border-style: solid;
border-color: red green blue yellow;
}
Border - Individual Sides
From the examples above you have seen that it is possible to specify
a different border for each side.
In CSS, there are also properties for specifying each of the borders
(top, right, bottom, and left): Different Border Styles
Example
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Border - Shorthand Property
As you can see from the examples above, there are many
properties to consider when dealing with borders.
70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
To shorten the code, it is also possible to specify all the individual
border properties in one property.
The border property is a shorthand property for the following
individual border properties:
• border-width
• border-style (required)
• border-color
Example
p{
border: 5px solid red;
}
Rounded Borders
The border-radius property is used to add rounded borders to an
element:
Example
p{
border: 2px solid red;
border-radius: 5px;
}
CSS Margins
This element has a margin of 70px.
The CSS margin properties are used to create space around
elements, outside of any defined borders.With CSS, you have full
control over the margins. There are properties for setting the margin
for each side of an element (top, right, bottom, and left).

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:
• margin-top
• margin-right
• margin-bottom
• margin-left
All the margin properties can have the following values:
• auto - the browser calculates the margin
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the
parent element
Tip: Negative values are allowed.
The following example sets different margins for all four sides of a
<p> element:
Example
p{
margin-top: 100px;
margin-bottom: 100px;
70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
margin-right: 150px;
margin-left: 80px;}
Margin - Shorthand Property
margin: 25px 50px 75px 100px;
• top margin is 25px
• right margin is 50px
• bottom margin is 75px
• left margin is 100px
p

{
margin: 25px 50px 75px 100px;
}
The auto Value
You can set the margin property to auto to horizontally center the
element within its container. The element will then take up the
specified width, and the remaining space will be split equally
between the left and right margins:
Example
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
The inherit Value
This example lets the left margin of the <p class="ex1"> element be
inherited from the parent element (<div>):
Example
div {
border: 1px solid red;
margin-left: 100px;
}

x1 {
margin-left: inherit;
}
CSS Padding

The CSS padding properties are used to generate space around an

element's content, inside of any defined borders.With CSS, you have
full control over the padding. There are properties for setting the
padding for each side of an element (top, right, bottom, and left).

70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an
element:
• padding-top
• padding-right
• padding-bottom
• padding-left
All the padding properties can have the following values:
• length - specifies a padding in px, pt, cm, etc.
• % - specifies a padding in % of the width of the containing element
• inherit - specifies that the padding should be inherited from
the parent element
Note: Negative values are not allowed.
The following example sets different padding for all four sides of a
<div> element:
Example
div{
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Padding - Shorthand Property

padding: 25px 50px 75px 100px;

• top padding is 25px
• right padding is 50px
• bottom padding is 75px
• left padding is 100px
div {
padding: 25px 50px 75px 100px;
}
Setting height and width
The height and width properties are used to set the height and width of
an element.The height and width can be set to auto (this is default.
Means that the browser calculates the height and width), or be specified
in length values, like px, cm, etc., or in percent (%) of the containing
block.
This element has a height of 200 pixels and a width of 50%
Example
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
The CSS Box Model
All HTML elements can be considered as boxes. In CSS, the term "box
70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
model" is used when talking about design and layout.The CSS box
model is essentially a box that wraps around every HTML element.
It consists of:
• margins,
• borders,
• padding, and
• the actual content.
The image below illustrates the box model:

Explanation of the different parts:

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is
transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is
transparent
The box model allows us to add a border around elements, and to
define space between elements.
Example
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
Text Transformation
The text-transform property is used to specify uppercase and
lowercase letters in a text.It can be used to turn everything into
uppercase or lowercase letters, or capitalize the first letter of each
word:
Example
p.uppercase {
text-transform: uppercase;
}

70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}
Letter Spacing
The letter-spacing property is used to specify the space between the
characters in a text.The following example demonstrates how to increase
or decrease the space between characters:
Example
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
Line Height
The line-height property is used to specify the space between lines:
Example
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
Word Spacing
The word-spacing property is used to specify the space between
the words in a text.The following example demonstrates how to
increase or decrease the space between words:
Example
h1 {
word-spacing: 10px;
}

h2 {
word-spacing: -5px;
}
Text Shadow
The text-shadow property adds shadow to text.The following
example specifies the position of the horizontal shadow (3px), the
position of the vertical shadow (2px) and the color of the shadow
(red):
70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
Example
h1 {
text-shadow: 3px 2px red;
}
Font Family
The font family of a text is set with the font-family property.The font-
family property should hold several font names as a "fallback"
system. If the browser does not support the first font, it tries the next
font, and so on.Start with the font you want, and end with a generic
family, to let the browser pick a similar font in the generic family, if no
other fonts are available.

Note: If the name of a font family is more than one word, it must
be in quotation marks, like: "Times New Roman".
More than one font family is specified in a comma-separated
list:
Example
p{
font-family: "Times New Roman", Times, serif;
}

Font Style
The font-style property is mostly used to specify italic text. 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)
Example
p.normal
{
font-style: normal;
}

p.italic {
font-style: italic;
}

blique {
font-style: oblique;
}
Set Font Size With Pixels
Setting the text size with pixels gives you full control over the text
size:
Example

70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
h1 {
font-size: 40px;
}

h2 {
font-size: 30px;
}

p{
font-size: 14px;
}
CSS Icons
How To Add Icons
The simplest way to add an icon to your HTML page, is with an icon
library, such as Font Awesome.Add the name of the specified icon
class to any inline HTML element (like <i> or <span>).All the icons in
the icon libraries below, are scalable vectors that can be
customized with CSS (size, color, shadow, etc.)

Font Awesome Icons

To use the Font Awesome icons, add the following line inside the
<head> section of your HTML page:
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font- awesome.min.css">
Note: No downloading or installation is required!
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font- awesome.min.css">
</head>
<body>

<i class="fafa-cloud"></i>
<i class="fafa-heart"></i>
<i class="fafa-car"></i>
<i class="fafa-file"></i>
<i class="fafa-bars"></i>

</body>
</html>
70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
Bootstrap
Icons
To use the Bootstrap glyphicons, add the following line inside the
<head> section of your HTML page:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootst
rap.min.css">
Note: No downloading or installation is required!
Example
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3
.3.7/css/bootstrap.min.css">
</head>
<body>

<i class="glyphiconglyphicon-cloud"></i>
<i class="glyphiconglyphicon-remove"></i>
<i class="glyphiconglyphicon-user"></i>
<i class="glyphiconglyphicon-envelope"></i>
<i class="glyphiconglyphicon-thumbs-up"></i>

</body>
</html>
Styling Links

Links can be styled with any CSS property (e.g. color, font-family,
background, etc.).

In addition, links can be styled differently depending on what state they

are in. 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 mouses over it
• a:active - a link the moment it is clicked Example
/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;

70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
Background Color
The background-color property can be used to specify a background
color for links:
Example
a:link {
background-color: yellow;
}

a:visited {
background-color: cyan;
}

a:hover {
background-color: lightgreen;
}

a:active {
background-color: hotpink;
}
CSS List Properties
The CSS list properties allow you to:
• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items
Different List Item Markers
The list-style-type property specifies the type of list item marker.The
following example shows some of the available list item markers:
<!DOCTYPE html>
<html>
<head><style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>

<p>Example of unordered lists:</p>

<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>

<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>
</html>
An Image as The List Item Marker
The list-style-image property specifies an image as the list item marker:
Example
ul {
list-style-image: url('sqpurple.gif');
70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
}
Remove Default Settings
The list-style-type:none property can also be used to remove the
markers/bullets. Note that the list also has default margin and padding.
To remove this,
• add margin:0 and
• padding:0 to <ul> or <ol>:
Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Styling List With Colors
We can also style lists with colors, to make them look a little more
interesting.
Anything added to the <ol> or <ul> tag, affects the entire list, while
properties added to the <li> tag will affect the individual list items:Example
ol {
background: #ff9999;
padding: 20px;
}

ul {
background: #3399ff;
padding: 20px;
}

ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}

ul li {
background: #cce5ff;
margin: 5px;
}
Table Borders

To specify table borders in CSS, use the border property.

The example below specifies a black border for <table>, <th>, and <td>
elements:
Example

70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
table, th, td {
border: 1px solid black;
}
Collapse Table Borders
The border-collapse property sets whether the table borders should be
collapsed into a single border:
Example
table {
border-collapse: collapse;
}

table, th, td {
border: 1px solid black;
}
1.8 XHTML
What Is XHTML?
• XHTML stands for EXtensibleHyperText Markup Language
• XHTML is almost identical to HTML
• XHTML is stricter than HTML
• XHTML is HTML defined as an XML application
• XHTML is supported by all major browsers
Why XHTML?
Many pages on the internet contain "bad" HTML.
This HTML code works fine in most browsers (even if it does not follow the
HTML rules):
<html>
<head>
<title>This is bad HTML</title>

<body>
<h1>Bad HTML
<p>This is a paragraph
</body>
Today's market consists of different browser technologies. Some browsers
run on computers, and some browsers run on mobile phones or other
small devices. Smaller devices often lack the resources or power to
interpret "bad" markup.
XML is a markup language where documents must be marked up
correctly (be "well-formed"). By combining the strengths of HTML and XML,
XHTML was developed.
XHTML is HTML redesigned as XML.

The Most Important Differences from HTML:

Document Structure
70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
• XHTML DOCTYPE is mandatory
• The xmlns attribute in <html> is mandatory
• <html>, <head>, <title>, and <body> are mandatory
XHTML Elements
• XHTML elements must be properly nested
• XHTML elements must always be closed
• XHTML elements must be in lowercase
• XHTML documents must have one root element
XHTML Attributes
• Attribute names must be in lower case
• Attribute values must be quoted
• Attribute minimization is forbidden
<!DOCTYPE ....> Is Mandatory
An XHTML document must have an XHTML DOCTYPE declaration.
A complete list of all the XHTML Doctypes is found in our HTML Tags
Reference.
The <html>, <head>, <title>, and <body> elements must also be present,
and the xmlns attribute in<html> must specify the xml namespace for the
document.
This example shows an XHTML document with a minimum of required
tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
some content

</body>
</html>

XHTML Elements Must Be Properly Nested

In HTML, some elements can be improperly nested within each other, like
this:
<b><i>This text is bold and italic</b></i>
In XHTML, all elements must be properly nested within each other, like this:
<b><i>This text is bold and italic</i></b> XHTML Elements Must
Always Be Closed This is wrong:

<p>This is a paragraph
<p>This is another paragraph This is correct:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
Empty Elements Must Also Be Closed
This is wrong:A break: <br>
A horizontal rule: <hr>
An image:
<imgsrc="happy.gif" alt="Happy face">
This is correct:
A break: <br />
A horizontal rule: <hr />
An image: <imgsrc="happy.gif" alt="Happy face" />
XHTML Elements Must Be In Lower Case
This is wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
This is correct:
<body>
<p>This is a paragraph</p>
</body>
XHTML Attribute Names Must Be In Lower Case
This is wrong:
<table WIDTH="100%">
This is correct:
<table width="100%">
Attribute Values Must Be Quoted
This is wrong:
<table width=100%>
This is correct:
<table width="100%">
Attribute Minimization Is Forbidden
Wrong:
<input type="checkbox" name="vehicle" value="car" checked /> Correct:
<input type="checkbox" name="vehicle" value="car" checked="checked"
/>
Wrong:
<input type="text" name="lastname" disabled /> Correct:
<input type="text" name="lastname" disabled="disabled" />

How to Convert from HTML to XHTML

1. Add an XHTML <!DOCTYPE> to the first line of every page
2. Add an xmlns attribute to the html element of every page
3. Change all element names to lowercase
4. Close all empty elements
5. Change all attribute names to lowercase
6. Quote all attribute values.

70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI

9. Practice Quiz

1.HTML stands for?

a). Hyper Text Markup Language
b). High Text Markup Language
c). Hyper Tabular Markup Language
d). None of these
2. Which of the following tag is used to mark a beginning of paragraph ?
a). <TD>
b).<br>
c). <p>
d).<TR>
3. The attribute of <form>tag
a). Method
b). Action
c). Both (a)&(b)
d). None of these
4. Markup tags tell the web browser
a). How to organise the page
b). How to display the page
c). How to display message box on page
d). None of these
5. www is based on which model?
a). Local-server
b). Client-server
c). 3-tier
d). None of these
6. Which of the following attributes of text box control allow to limit the maximum
character?
a). size
b). len
c). maxlength
d). all of these
7. HTML is a subset of
a). SGMT
b). SGML
c). SGMD
d). None of these
8. Which of the following is a container?
a). <SELECT>
b) <BODY>

70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
c).<INPUT>
d). Both (a) and (b)
9. The attribute, which define the relationship between current document and
HREF'ed URL is
a). REL
b). URL
c). REV
d). all of these
10. <DT>Tag is designed to fit a single line of our web page but <DD>tag will
accept a
a). line of text
b). full paragraph
c). word
d). request

10.Assignments
S.No Question BL CO
Design and create the page(s) for accepting the values of
1 name and marks in a table then displays them in the 2 1
descending order of the marks.
2 How can we create nested lists? Explain with an example? 2 1
3 How can we create forms in HTML? Explain with examples 3 1
Write HTML code to create a frame with a table contents on
the left side of the window, and have each entry in the table
4 3 1
of contents. Use internal linking to scroll down the document
frame to the appropriate subsection.
5 Explain the purpose of cascading style sheets 2 1

11. Part A- Question & Answers

S.No Question& Answers BL CO
1 Define Internet?
Ans. The internet is the world’s largest IP-based network. It is an
amorphous group of computers in many different countries on
1 1
all seven continents that talk to each other using the IP
protocol.

2 What is HTML?
Ans. Hypertext is ordinary text that has been designed with
extra features such as formatting, images, multimedia and links
to other documents. Markup is the process of taking ordinary
2 1
text and adding extra symbols. Each of the symbols used for
markup in HTML is a command that tells a browser how to
display the text. HTML is the technical term for the format used
to create normal web pages.
3 Write The Format Of Html Program. 1 2
70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI
Ans. <HTML>
<HEAD>
<TITLE> This is the Title </TITLE>
</HEAD>
<BODY>
…. Type the body of the program.
</BODY>
</HTML>
4 What are HTML forms?
Ans. An HTML form is used to allow a user to input data on a
web page and the element used is form element and its main
attributes are action and method. Its format is 1 1
<form action = http://www.example.org method =
“get”><form>

5 Discuss about comments in HTML.

Ans. A comment in HTML, like comments in other computer
languages, is something that is intended to be read by the
programmers but to be ignored by the software processing the
document. A comment begins with the string of characters <!—
which must contain no white space. A comment ends with the 1 2
string --> again with no white space.
<!-- Single line Comment Multi line Comments -->

6 What are the types of list supported by HTML?

Ans. There are three types of list supported by HTML.
Unordered – A bullet list 1 1
Ordered – a number list

7 What Do You Mean By Column Spanning and Row Spanning?

Ans.Rowspanning is used to merge (combine) two or more
2 1
rows. Column spanning is used to merge (combine) two or
more columns.

12. Part B- Questions

S.No Question BL CO
1 Explain different forms of selectors? 1 1
2 What is CSS? Explain different mechanisms used to apply 2 1
CSS to HTML pages?
3 What is a frame? How can we create nested frames? 2 1
4 Explain the following input components in HTML forms with 3 1
proper syntax of the corresponding HTML tags. Text Input,
Selectable list with multiple selection option, Radio Buttons.
5 Explain the syntaxes of anchor tags? 2 1

70|W I T - U N I T - I

BTECH_CSE-SEM 32
SVCE TIRUPATI

13. Supportive Online Certification Courses

1. Internet Technology - Video course By Prof.IndranilSenguptaconducted by
IIT Kharagpur

14. Real Time Applications

S.No Application CO
1 Realtime web analytics 1

2 Digital Advertising 2

3 E-Commerce 1

4 Massively Multiplayer Online Games 1

5 Project Management & Collaboration 2

15. Contents Beyond the Syllabus

1. XML version is 1.1
2. HTML 5.2 –WORLD WIDE CONSTORIUM
16. Prescribed Text Books & Reference Books
Text Book
1. Beginning PHP and MySQL, 3rd Edition, Jason Gilmore, Apress Publications
(Dream tech.).
2. PHP 5 Recipes A problem Solution Approach Lee Babin, Nathan A Good,
Frank M.Kromann and Jon Stephens.

References:
1. Deitel and Deitel and Nieto, “Internet and World Wide Web - How to
Program”, Prentice Hall, 5 th Edition, 2011.
2. Herbert Schildt, “Java-The Complete Reference”, Eighth Edition, McGraw Hill
Professional, 2011.

17. Mini Project Suggestion

1. Speech Enabled Airline Reservation System
2. Shop Management System
3. Leave Application Management System
4. Blogging platform with PHP
5. Simple PHP Blog without database
6. VoiceXML-based address book access using php

70|W I T - U N I T - I

BTECH_CSE-SEM 32