Unit-1

Introduction to Web Technologies

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 ofabove servers, HTML and CSS: HTML 5.0 , XHTML, CSS 3.

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 some where on the Internet or Intranet.
Server Program & Server System
Genrally, 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 Computers).
―A Server is the program that provides Service to a client".

Working of Server

Page 2
 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.

Figure 1.1: Working of Server

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 Web documents on the Web:
HTML: Hyper Text Markup Language for creating and editing document content.
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 plotforms.
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.

Page 3
 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

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.
 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 GET
method, the data submitted will be 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:
HTTP/1.0 200 OK

Page 5
 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 another URL.
4XX Indicates an error on Client's port.
5XX Indicates an error on Server's port
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, 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:

Page 6
  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 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.

Page 7
  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.
XAMPP (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.
 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.
WAMP (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.

Page 8
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
Installing Apache and PHP on Windows:
Apache needs to be installed and operational before PHP and MySQL
1. Download the Apache 2.x Win32 MSI installer binary. It's downloadable
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).
2. 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

Figure 1.3 Figure 1.4

3. Accept the license terms by clicking the radio button shown in Figure 1.4. Click Next.
4. You'll see a Read This First box, as shown in Figure 1.5. Additionally, this window offersa
number of excellent resources related to the web server. Click Next.

Page 9
 Figure 1.5 Figure 1.6
5. In the dialog shown in Figure 1.6, enter all pertinent network information. Click Next.
6. 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

7. Accept the default installation directory, as shown in Figure 1.8. Click Next.
8. 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

9. Click Finish when the installer is done.

Page 10
10. 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.
11. 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

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.

Page 11
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.
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 for
mime.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/.

Page 12
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 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.
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.

Page 13
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 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).

Page 14
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.
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 php i.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

Page 15
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 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.

Page 16
4. The Setup Wizard appears as shown in Figure 1.20. Click Next.
5. The dialog shown in Figure 1.21 is displayed. Click Next to accept the default
installationdirectory.

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.

Page 17
 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)

Page 18
Figure 1.24: Instalation 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)

Page 19
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)

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

Page 20
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)

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)

Page 21
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
Access"by 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)

Page 22
 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)

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
A Simple HTML Document
Example
<!DOCTYPE html>
<html>

Page 23
<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: <!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>

Page 24
<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
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
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

Page 25
  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
<img src="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>
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most 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.

Page 26
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 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>

Page 27
 <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>

<!-- 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;">Lorem ipsum...</p>
Text Color
Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</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:

Page 28
  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.
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>

Page 29
<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 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:

Page 30
Example
p{
border: 1px solid powderblue;
}
CSS Margin
The CSS margin property defines a margin (space) outside the border:
Example
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>
</head>
<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
p.error {
color: red;
}
External References
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

Page 31
<link rel="stylesheet" href="styles.css">
HTML Links - Hyperlinks
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
<img src="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:

<!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>

Page 32
<img src="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>
<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.

Page 33
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:

HTML Table - Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property:
Example

Page 34
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
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, use the <caption> tag:
Example
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<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>

Page 35
 <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 default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
nordered 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>

Page 36
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

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>

Page 37
Block level elements in HTML:
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<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.
Example
<span>Hello</span>
<span>World</span>

Inline elements in HTML:

<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>

Page 38
<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
<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":

Page 39
<style>
.city {
background-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
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:
<iframe src="URL"></iframe>
The src attribute specifies the URL (web address) of the inline frame page.
<!DOCTYPE html>
<html>
<body>
<iframe src="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
<iframe src="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:

Page 40
  <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 independent 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 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;

Page 41
}

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

nav ul {
list-style-type: none;
padding: 0;
}

nav ul a {
text-decoration: none;
}

article {
margin-left: 170px;
border-left: 1px solid gray;
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>

Page 42
 <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.
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 type="submit"> Defines a submit button (for submitting the 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>

Page 43
<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 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="/action_page.php">
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

Page 44
Input Type Reset
<input type="reset"> defines a reset button that will reset all form values to their default values:
Example
<form action="/action_page.php">
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 bike
I have a car

HTML5 Input Types

HTML5 added several new input types:
 color
 date
 datetime-local
 email
 month
 number
 range
 search
 tel
 time
 url
 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:

Page 45
 <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-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

Page 46
<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:
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:

Page 47
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).
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>

Page 48
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.

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

Page 49
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 {
text-align: center;
color: red;
}

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

p{
text-align: center;

Page 50
 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 is
a 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>
<p>This is a paragraph.</p>

</body>
</html>

Page 51
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 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

Page 52
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;">Lorem ipsum...</p>
Text Color
Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</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
<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.

Page 53
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%)
Saturation
Saturation can be describe as the intensity of a color.
100% is pure color, no shades of gray
50% 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):

Page 54
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)
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.

Page 55
Some images should be repeated only horizontally or vertically, or they will look strange, like this:
Example
body {
background-image: url("gradient_bg.png");
}
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

Page 56
  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-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 {border-style: 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 Width
The 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;

Page 57
 border-width: medium;
}

p.three {
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 border
Example
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

Page 58
As you can see from the examples above, there are many properties to consider when dealing with
borders.
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;
margin-right: 150px;
margin-left: 80px;
}

Page 59
Margin - Shorthand Property
 margin: 25px 50px 75px 100px;
o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px
Example
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;
}

p.ex1 {
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).

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

Page 60
  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;
o top padding is 25px
o right padding is 50px
o bottom padding is 75px
o left padding is 100px
Example
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 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:

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

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

Page 62
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):
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

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

p.oblique {
font-style: oblique;
}
Set Font Size With Pixels
Setting the text size with pixels gives you full control over the text size:
Example
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

Page 64
<!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="fa fa-cloud"></i>

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

</body>
</html>
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/bootstrap.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="glyphicon glyphicon-cloud"></i>

<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-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

Page 65
  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;
}

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

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

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>

Page 67
<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');
}
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;

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

XHTML
What Is XHTML?
 XHTML stands for EXtensible HyperText 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:

Page 69
Document Structure
 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>

Page 70
Empty Elements Must Also Be Closed
This is wrong:
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif"
alt="Happy face">This is correct:
A break: <br />
A horizontal rule: <hr />
An image: <img src="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:
<ta
ble
wid
th=
100
%>
Thi
s is
corr
ect:
<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