WEB AND INTERNET TECHNOLOGIES (15A05605) III B.

Tech II Sem (CSE)

UNIT I
Introduction to Web Technologies: Introduction to Web servers like Apache 1.1, IIS XAMPP(Bundle Server),
WAMP(Bundle Server),Handling HTTP Request and Response, installations of above servers, HTML and CSS:HTML
5.0 , XHTML, CSS 3.

Internet
 The Internet is a global network of networks that enables computers of all kinds to directly and transparently
communicate and share services throughout the world.
 In 1969 the precursor of Internet is born: ARPAnet.
 ARPA = Advanced Research Projects Agency sponsored by the American Department of Defense (DOD).
 Designed to connect military research centers.
 Distributed computer system able to survive a nuclear attack.
 Problem: ARPAnet could connect only networks of the same type.
 In 1970, ARPA starts developing the Transmission Control Protocol / Internet Protocol (TCP/IP), a technology for
connecting networks of different types (produced by different companies).
 Other networks appear, such as CSNET and BITNET.
 The Internet = a network of networks.
 People around the world share ideas, information, comments, and stories.

Popular services:
 Email (electronic mail) is the most popular service.
 You can send and receive mail (electronic text), faster and cheaper than surface mail.
 Example email address: [email protected]
 Web browsing to find information.
 Example: www.google.com

Features of the Internet

 Mailinglists: you can subscribe to lists on various subjects to receive emails, you can post (send) messages, you can
unsubscribe. Some lists are moderated.
 Newsgroups are collections of messages on various subjects
 FTP (File Transfer Protocol). You can copy files from one computer to another over the Internet.
 Telnet or remote login. Permits your computer to log onto another computer and use it as if you were there.
 You need to provide your username and password, for security reasons.
 Chatrooms. You can exchange messages with other people, anonymously (using a nickname).
 Internet services for companies: e-commerce, etc.

World Wide Web (WWW)

 The World Wide Web allows computer users to locate and view multimedia-based documents (i.e., documents with text,
graphics, animations, audios or videos) on almost any subject.
 Even though the Internet was developed more than three decades ago, the introduction of the World Wide Web is a
relatively recent event. In 1990, Tim Berners-Lee of CERN (the European
 Laboratory for Particle Physics) developed the World Wide Web and several communication protocols that form the
backbone of the Web.
 The Internet and the World Wide Web surely will be listed among the most important and profound creations of
humankind.
 In the past, most computer applications executed on “stand-alone” computers (i.e., computers that were not connected
to one another).
 The W3C is also a standardization organization.
Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 1
 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

 Web technologies standardized by the W3C are called Recommendations. W3C Recommendations include the
Extensible Hyper-Text Markup Language (XHTML), Cascading Style Sheets (CSS), Hypertext Markup Language
(HTML; now considered a “legacy” technology) and the Extensible Markup Language (XML).
 The W3C homepage (www.w3.org) provides extensive resources on Internet and Web technologies.
Web Contents
 Web content is the textual, visual or aural content that is encountered as part of the user experience on websites.
 It may include, among other things: text, images, sounds, videos and animations.

HTML web content

 Even though we may embed various protocols within web pages, the "web page" composed of "html" (or some
variation) content is still the dominant way whereby we share content. And while there are many web pages with
localized proprietary structure (most usually, business websites), many millions of websites abound that are structured
according to a common core idea.
 A web search engine is designed to search for information on the World Wide Web.
 The search results are generally presented in a list of results and are often called hits
 The information may consist of web pages, images, information and other types of files. Some search engines also mine
data available in databases or open directories.
 Unlike Web directories, which are maintained by human editors, search engines operate algorithmically or are a mixture
of algorithmic and human input.
Types of Website Content
 Static Web Site
 Dynamic Web Site
Static Web Site
 A static web page (sometimes called a flat page) is a web page that is delivered to the user exactly as stored.
 Consequently a static web page displays the same information for all users, from all contexts, subject to modern
capabilities of a web server to negotiate content-type or language of the document where such versions are available
and the server is configured to do so.
 Static web pages are often HTML documents stored as files in the file system and made available by the web server
over HTTP.
 However, loose interpretations of the term could include web pages stored in a database, and could even include pages
formatted using a template and served through an application server, as long as the page served is unchanging and
presented essentially as stored.
 Static Web pages are very simple in layout and informative in context. Creation of static website content requires great
level of technical expertise and if a site owner is intended to create static web pages, they must be very clear with their
ideas of creating such pages since they need to hire a web designer.

Advantages
 No programming skills are required to create a static page.
 Inherently publicly cacheable (i.e. a cached copy can be shown to anyone).
 No particular hosting requirements are necessary.
 Can be viewed directly by a web browser without needing a web server or application server, for example directly from a
CDROM or USB Drive.
Dynamic Web Sites
 A dynamic web page is a kind of web page that has been prepared with fresh information (content and/or layout), for
each individual viewing.
 It is not static because it changes with the time (ex. anews content), the user (ex. preferences in a login session), the
user interaction (ex. web page game), the context (parametric customization), or any combination of the foregoing.

Client Server Model

 Web pages can be accessed through internet using client-server technology.
Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 2
 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

 Created web pages are stored in server.

 Client-Server Model is used to access web pages which are stored in server.
 Client will send a request (HTTP Request) to the server in the form of URL (Uniform Resource Locator).
 HTTP Request consists of three messages namely header, body, and ok messages.
 Server will receive the HTTP Request and process the request in it.
 If requested page is found in the server, it will locate it and send the Response (HTTP Response).
 Response body consists of header, body and ok messages.
 Client will receive the response and display the web page in the browser window.

Client Side Scripting and Server Side Scripting

 A web application (or webapp), unlike standalone application, runs over the Internet. Examples of webapps are google,
amazon, ebay, facebook and twitter.
 A webapp is typically a 3-tier (or multi-tier) client-server database application run over the Internet as illustrated in the
diagram below.
 It comprises five components:
o HTTP Server: E.g., Apache HTTP Server, Apache Tomcat Server, Microsoft Internet Information Server (IIS), nginx,
Google Web Server (GWS), and others.
o HTTP Client (or Web Browser): E.g., Internet Explorer (MSIE), FireFox, Chrome, Safari, and others.
o Database: E.g., Open-source MySQL, Apache Derby, mSQL, SQLite, PostgreSQL, OpenOffice's Base; Commercial
Oracle, IBM DB2, SAP, SyBase, MS SQL Server, MS Access; and others.
o Client-Side Programs: could be written in HTML Form, JavaScript, VBScript, Flash, and others.
o Server-Side Programs: could be written in Java Servlet/JSP, ASP, PHP, Perl, Python, CGI, and others.

Hypertext Transfer Protocol (HTTP)

 HTTP is an application layer protocol runs over TCP/IP. The IP provides support for routing and addressing (via an
unique IP address for machines on the Internet); while TCP supports multiplexing via 64K ports from port number 0 to
65535. The default port number assigned to HTTP is TCP port 80.
 HTTP is an asynchronous request-response application-layer protocol. A client sends a request message to the server.
The server then returns a response message to the client. In other words, HTTP is a pull protocol, a client pulls a page
from the server (instead of server pushes pages to the clients).
HTTP Request and HTTP Response

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 3

 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

HTTP is based on the client-server architecture model and a stateless request/response protocol that operates
by exchanging messages across a reliable TCP/IP connection.
An HTTP "client" is a program (Web browser or any other client) that establishes a connection to a server for the
purpose of sending one or more HTTP request messages. An HTTP "server" is a program (generally a web server like
Apache Web Server or Internet Information Services IIS, etc.) that accepts connections in order to serve HTTP requests
by sending HTTP response messages.
HTTP makes use of the Uniform Resource Identifier (URI) to identify a given resource and to establish a
connection. Once the connection is established, HTTP messages are passed in a format similar to that used by the
Internet mail and the Multipurpose Internet Mail Extensions (MIME).

HTTP requests and HTTP responses use a generic message format of RFC 822 for transferring the required
data. This generic message format consists of the following four items.

 A Start-line
 Zero or more header fields followed by CRLF
 An empty line (i.e., a line with nothing preceding the CRLF)
 indicating the end of the header fields
 Optionally a message-body

In the following sections, we will explain each of the entities used in an HTTP message.
Message Start-Line
A start-line will have the following generic syntax:
start-line = Request-Line | Status-Line

We will discuss Request-Line and Status-Line while discussing HTTP Request and HTTP Response messages
respectively. For now, let's see the examples of start line in case of request and response:

GET /hello.htm HTTP/1.1 (This is Request-Line sent by the client)

HTTP/1.1 200 OK (This is Status-Line sent by the server)

Header Fields
HTTP header fields provide required information about the request or response, or about the object sent in the
message body. There are four types of HTTP message headers:
 General-header: These header fields have general applicability for both request and response messages.
 Request-header: These header fields have applicability only for request messages.
 Response-header: These header fields have applicability only for response messages.
 Entity-header: These header fields define meta information about the entity-body or, if no body is present, about the
resource identified by the request.
All the above mentioned headers follow the same generic format and each of the header field consists of a name
followed by a colon (:) and the field value as follows:
message-header = field-name ":" [ field-value ]
Following are the examples of various header fields:
User-Agent: curl/7.16.3 libcurl/7.16.3 OpenSSL/0.9.7l zlib/1.2.3
Host: www.example.com
Accept-Language: en, mi
Date: Mon, 27 Jul 2009 12:28:53 GMT
Server: Apache
Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT
ETag: "34aa387-d-1568eb00"
Accept-Ranges: bytes
Content-Length: 51
Vary: Accept-Encoding
Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 4
 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

Content-Type: text/plain
Message Body

The message body part is optional for an HTTP message but if it is available, then it is used to carry the entity-
body associated with the request or response. If entity body is associated, then usually Content-Type and Content-
Length headers lines specify the nature of the body associated.

A message body is the one which carries the actual HTTP request data (including form data and uploaded, etc.)
and HTTP response data from the server ( including files, images, etc.). Shown below is the simple content of a
message body:
<html>
<body>
<h1>Hello, World!</h1>
</body>
</html>

After receiving and interpreting a request message, a server responds with an HTTP response message:

 A Status-line
 Zero or more header (General|Response|Entity) fields followed by CRLF
 An empty line (i.e., a line with nothing preceding the CRLF)
 indicating the end of the header fields
 Optionally a message-body
The following sections explain each of the entities used in an HTTP response message.
Message Status-Line
A Status-Line consists of the protocol version followed by a numeric status code and its associated textual phrase. The
elements are separated by space SP characters.
 Status-Line = HTTP-Version SP Status-Code SP Reason-Phrase CRLF
 HTTP Version
 A server supporting HTTP version 1.1 will return the following version information:
 HTTP-Version = HTTP/1.1
 Status Code
The Status-Code element is a 3-digit integer where first digit of the Status-Code defines the class of response and the
last two digits do not have any categorization role. There are 5 values for the first digit:
S.NO Code and Description

1xx: Informational
1
It means the request was received and the process is continuing.

2xx: Success
2
It means the action was successfully received, understood, and accepted.

3xx: Redirection
3
It means further action must be taken in order to complete the request.

4xx: Client Error

4
It means the request contains incorrect syntax or cannot be fulfilled.

5xx: Server Error

5
It means the server failed to fulfill an apparently valid request.

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 5

 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

HTTP status codes are extensible and HTTP applications are not required to understand the meaning of all
registered status codes. A list of all the status codes has been given in a separate chapter for your reference.

Introduction to Web Servers

 Web Server is a program that automatically downloads pages from the Web
 An application server works with a Web server to handle requests for dynamic content, such as servlets, from Web
applications. A Web server uses a Web server plug-ins to establish and maintain persistent HTTP and HTTPS
connections with an application server.
 The web server software offers access to documents stored on the server.
 Clients can browse the documents in a web browser.
 The documents can be for example static Hypertext Markup Language (HTML) files, image files or various script files,
such as Common Gateway Interface (CGI), Javascript or Perl files. The communication between clients and server is
based on the Hypertext Transfer Protocol (HTTP)

Many web servers are available in the market to develop web applications. We will discuss the Following Web Servers.
 Apache1.1
 IIS (Internet Information Services)
 XAMPP
 WAMP
Apache
 Introduced in 1995 and based on the popular NCSA httpd 1.3, Apache is now the most used web server in the world.
 One of the reasons to its popularity is that it is free to use. Also, since the source code is free, it is possible to modify the
web server
 Being threaded (threaded or process-driven depending on the operating system, on Unix, Apache uses processes,
while threads are used in Win32 environments) means that Apache maintains a pool of software threads ready to serve
incoming requests.
 When a request enters the web server, it is assigned one of the free threads, that serves it throughout the requests’
lifetime.

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 6

 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

 Apache puts a limit on the number of threads that are allowed to run simultaneously.
 If that number has been reached, requests are rejected.
 Over 56% of Internet Web servers run Apache or an Apache derivative
 Apache is the most commonly used Web Server on Linux systems. Web Servers are used to serve Web Pages
requested by client computers. Clients typically request and view Web Pages using Web Browser applications such as
Firefox, Opera, or Mozilla
What’s “Open-Source”?
 Open-Source refers to software that is not only free, but includes the source as well
 Users are free to make whatever modifications they like to make the software work better for them
 Users are generally encouraged to submit improvements for inclusion in the master distribution
 Use <http://www.apache.org/dist/>
Modules in Apache
 What makes Apache so attractive is also its architecture.
 The software is arranged in a kernel part and additional packages called modules.
 The kernel is responsible for opening up sockets for incoming TCP connections, handling static files and sending back
the result.
 Whenever something else than a static file is to be handled, one of the designated modules takes over
 Modules are convenient when new functionality should be added to a web server, because nothing has to be changed
in the kernel
 In Apache, every request goes through a life-cycle, that consists of a number of phases, as shown in Figure below
 To install the Apache2 module for MySQL authentication, you can run the following command from a terminal prompt:
o sudo apt-get install libapache2-mod-auth-mysql
 Apache is a very complex web server, mainly because of the vast number of features provided. Fortunately, most of this
functionality stays in clearly separated and independent program modules, which facilitates program understanding and
maintenance.
o http://www.apache .org/httpd
 Apache is a public domain Web server developed by a loosely knit group of programmers. Public domain refers to any
program that is not copyrighted.
 Public-domain software is free and can be used without restrictions.
 The first version of Apache, based on the NCSA httpd Web server, was developed in 1995.
 Because it was developed from existing NCSA code plus various patches, it was called a patchy server - hence the
name Apache Server.
 The home page of the Apache HTTP server project, also known as the Apache.
 Here you can find official information about the Apache web server. Any new Apache release is announced on this site.
 Whenever a security problem occurs, you can find the details (and fixes) there.
 The site also provides information about the people behind Apache.
 It is under direct control of the Apache Group core team and is located in San Francisco, California.
 As a result of its sophisticated features, excellent performance, and low price - free, Apache has become the world's
most popular Web server.
 Source code for the apache is freely available, anyone can adapt the server for specific needs, and there is a large
public library of Apache add-ons. Add ons' refers to a product designed to complement another product.
 The original version of Apache was written for UNIX, but there are now versions that run under OS/2, Windows and
other platforms.
 Apache has been shown to be substantially faster, more stable, and more feature-full than many other web servers
 The Apache Group maintains rigorous standards before releasing new versions of their server, and the server runs
without a hitch on over one half of all WWW servers available on the Internet
 The Apache Group and the free Apache HTTP server stand as an appealing throwback to the early, less-commercial
 Free and open standards supported and maintained by the people who use them are still a good thing for the Web
 The Apache httpd server is a powerful, flexible, HTTP/1.1 compliant web server.

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 7

 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

 It implements the latest protocols, including HTTP/1.1 (RFC2616) and is highly configurable and extensible with third-
party modules.
 Apache can handle run-time execution of external applications (scripts)
 Server-side includes allow the server to modify pages at run-time before sending them
 Java servlet modules are available, but not yet part of the base package (still under development)
 SSL-enabled versions of Apache are available, both from commercial vendors and under open-source licence
IIS
 Internet Information Services (IIS) is a flexible, general-purpose web server from Microsoft that runs on Windows
systems to serve requested HTML pages or files.
 An IIS web server accepts requests from remote client computers and returns the appropriate response.
 This basic functionality allows web servers to share and deliver information across local area networks, such as
corporate intranets, and wide area networks, such as the internet.
 A web server can deliver information to users in several forms, such as static webpages coded in HTML; through file
exchanges as downloads and uploads; and text documents, image files and more.
How IIS works
 IIS works through a variety of standard languages and protocols.
 HTML is used to create elements such as text, buttons, image placements, direct interactions/behaviors and hyperlinks.
 The Hypertext Transfer Protocol (HTTP) is the basic communication protocol used to exchange information between
web servers and users.
 HTTPS -- HTTP over Secure Sockets Layer (SSL) -- uses Transport Layer Security or SSL to encrypt the
communication for added data security.
 The File Transfer Protocol, or its secure variant, FTPS, can transfer files.
Install IIS 5.1
 Open Control Panel from the Start Menu.
 Click on Add or Remove Programs.
 Click on Add/Remove Windows Components.
 Select Internet Information Services from the Windows Component Wizard.
 Select Next. The Wizard may prompt you for your XP Installation Disc.
 IIS 5.1 will now be installed.
XAMPP
Letter Meaning
X as an ideographic letter referring to cross-platform
A Apache or its expanded form, Apache HTTP Server
M MySQL
P PHP
P PERL

 XAMPP is a small and light Apache distribution containing the most common web development technologies in a single
package. Its contents, small size, and portability make it the ideal tool for students developing and testing applications in
PHP and MySQL.
 XAMPP is available as a free download in two specific packages: full and lite.
 While the full package download provides a wide array of development tools, this article will focus on using XAMPP Lite
which contains the necessary technologies that meet the Ontario Skills Competition standards. As the name implies, the
light version is a small package containing Apache HTTP Server, PHP, MySQL, phpMyAdmin, Openssl, and SQLite.
Obtaining and Installing XAMPP
 As previously mentioned, XAMPP is a free package available for download and use for various web development tasks.
All XAMPP packages and add-ons are distributed through the Apache Friends website at the address:
http://www.apachefriends.org/.
Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 8
 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

 Once on the website, navigate and find the Windows version of XAMPP Lite and download the self-extracting ZIP
archive. After downloading the archive, run and extract its contents into the root path of a hard disk or USB drive.
 If extracted properly you will notice a new xampplite directory in the root of your installation disk.
 In order to test that everything has been installed correctly, first start the Apache HTTP Server by navigating to the
xampplite directory and run the apache_start.bat batch file.
 The below Screen Appears

 In order to stop all Apache processes do not close the running terminal application, but instead run another batch file in
the xampplite directory called apache_stop.bat.
 The next step is to write a simple “Hello World” program in PHP that will test the configuration of PHP under XAMPP.
 In the previous pages we installed and ran the Apache HTTP Server with success. The next step is to write a simple
“Hello World” program in PHP that will test the configuration of PHP under XAMPP.
 In a text editor, such as TextPad, write the following lines of code:
Example: <HTML> <Head>
<Title>Hello World</Title>
</Head> <Body> <? echo “Hello World”: ?> </Body> </Html>

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 9

 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

 The above code example starts a new XHTML document with the page title set as “Hello World” and then prints a single
line of text, Hello World, using the echo PHP language construct.
 In order to run and test this PHP program, save it into your xampplite\htdocs directory with the file name of
helloWorld.php. Then, to view it in your browser, simply type in http://localhost/helloWorld.php into the address bar. If
done correctly, you will see your Hello World line of text in the web browser as shown in FIGURE 2.
Windows Install
 Installing PHP/MySQL on Windows using XAMPP requires nothing more than mastering the following skills:
 Using an Internet Browser, such Internet Explorer, Mozilla, or Firebird Locating the xampp folder that was created by the
extract Double-clicking on a few files
 If you've got these basic skills, you're ready to go!
 Click on this link http://www.apachefriends.org/en/xampp-windows.html to download the latest version of XAMPP for
Windows.. The EXE (7-zip) is recommended. It is smaller (almost half the ZIP version) and also self-extracting.
 Download it to the C:\ directory, double-click on it and a dialogue box appears.
 Click the Extract button.
 Everything will be extracted to a created folder called "xampp" under the C:\ directory. (You could, if you like, place it in
another subdirectory of your choosing.)
 Double-click on the file setup_xampp.bat which is in the subdirectory containing the XAMPP installation.
 Follow the directions it displays on the screen.
Configuration
 The "Apache" and "MySQL" folders created by the XAMPP installation will have batch files for installing Apache and
MySQL as services. Run these two batch files.
 Then create a shortcut in your Windows Startup folder
 that points to the file "ApacheMonitor.exe" which is located in the \apache\bin subdirectory. Finally, go to the Windows
Control Panel and configure these services - Apache and MySQL - to start manually.
 You want to minimize the services that run automatically for security purposes.
 The next time you start up your Windows machine, the Apache Monitor will appear in your system tray.
 Double-click on it to open it up, click on the button to start up Apache.
 Click on the Services button to bring up the Services window to start MySQL.
 The ApacheMonitor is handy for when you want to restart Apache after making changes to the php.ini.
Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 10
 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

 A few helpful notes:

 The php.ini file in \xampp\apache\bin is the one to edit when PHP runs as an apache module
 Web pages go in the \xampp\htdocs directory (the DocumentRoot) Files for the XAMPP splash page are in
\xampp\htdocs\xampp
 Default installation of XAMPP is "wide open", i.e., MySQL has no root password and register_globals is On
 If you can't see the flag icons to switch from German to English, change scrolling to "yes" in index.html
 After installing MySQL as a service, remember to copy \xampp\mysql\my_example.cnf to C:\my.cnf
 The file type may indicate a "SpeedDial" shortcut, but MySQL will treat it as a configuration file
WAMP
 WAMP is an acronym for Windows, Apache, MySQL and PHP. It is a combination of independently created software’s
bundled together into a SINGLE installation package to set up a SERVER on your machine with out any hassles. It
comes with the GPL License.
Contents Of WAMP Server (Package)
 Apache
 My Sql
 Paperphp
 MYAdmin
 SQLite_Manager
 Zend Optimizer
INSTALLING THE SERVER SOFTWARE
 Once the software has finished downloading, find it on your desktop (Figure 1)

 Double click on it to start the installation process. (Figure 2)

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 11

 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

 Close any other applications you've got open, then click on the “Next” button and read the License Agreement (Figure 3)

 Click on “I accept the agreement”, and then click on the “Next” button.
 You can choose where WampServer2 is installed. (Figure 4)

 I would recommend leaving the default of “C:\wamp”, then click on the “Next” button.
 The next choice (Figure 5) is a matter of personal preference. Leave blank or make your choice, then click on the “Next”
button.

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 12

 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

 Click on “Install” (Figure 6)

 Wait (Figure 7)! Press the wall switch to “ON” and boil the kettle. Make yourself a coffee!

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 13

 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

 WampServer2 may be able to tell what browser you usually use. If not, it will display a page like this (Figure 8) and ask
you to choose.

 Choose your browser then click on the “Open” button. If you're not sure, just click on the “Open” button.
 Depending on your firewall settings, you may be asked to allow the Apache Server to access your networks. (Figure 9)

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 14

 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

 Click on “Allow access” to your private network.

 Leave the default values. (Figure 10) Then click on the “Next” button.

 Click on the “Launch WampServer 2 now” box to enter a tick. (Figure 11). Then click on the “Finish” button

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 15

 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

LAUNCHING YOUR SERVER

 When WampServer2 has launched, you should see an icon like this (Figure 12) at the bottom right of your computer
screen.

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 16

 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

Web Technologies
 Then click on the green “W” WampServer2 icon. Clicking the WampServer2 icon displays the Wamp Server menu.
(Figure 15). From where you can access all the various parts of the server.

 Click on the top part of the menu, where it says “Localhost” (Figure 16)

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 17

 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

UNIT-I Department of Computer Science & Engineering Web Technologies

 If your installation was completed correctly, your browser should look like this (Figure 17)

 Your WampServer2 will close down whenever you close Windows, and it won't re-start automatically when you re-start
windows.
 To re-start the server simply click on the icon on your desktop or launch bar, or go to “Start”, “All Programs”.
HTML
 HTML Stands for Hyper Text Markup Language
 Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications
 Web browsers receive HTML documents from a web server or from local storage and render the documents into
multimedia web pages.
 HTML describes the structure of a web page semantically and originally included cues for the appearance of the
document.
 HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such
as interactive forms may be embedded into the rendered page.
 HTML provides a means to create structured documents by denoting structural semantics for text such as headings,
paragraphs, lists, links, quotes and other items.
 HTML elements are delineated by tags, written using angle brackets. Tags such as <img /> and <input /> directly
introduce content into the page.
 Other tags such as <p> surround and provide information about document text and may include other tags as sub-
elements. Browsers do not display the HTML tags, but use them to interpret the content of the page.
 HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content
of web pages.
 Inclusion of CSS defines the look and layout of content.
 The World Wide Web Consortium (W3C), maintainer of both the HTML and the CSS standards, has encouraged the
use of CSS over explicit presentational HTML since 1997
 In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN
researchers to use and share documents.
 In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system.[6] Berners-Lee specified HTML and
wrote the browser and server software in late 1990.

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 18

 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

 The first publicly available description

on of HTML was a document called "HTML Tags", first mentioned on the Internet by
Tim Berners-Lee in late 1991
HTML Versions
Version Year
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
 HTML markup consists of several key components, including those called tags (and their attributes), character-
based data types, character references and entity references
references.
 HTML tags most commonly come in pairs like <h1> and </h1>, although some represent empty elements and so are
unpaired, for example <img>.
 The first tag in such a pair is the start tag,, and the second is the end tag (they are also called opening tags and closing
tags).
 Another important component is the HTML document type declaration,
declaration which triggers standards mode rendering.
 The following is an example of the classic "Hello, World!" program:
program

<!DOCTYPE html>
<html>
<head>
<title>This
>This is a title</
title</title>
</head>
<body>
<p>Hello
>Hello world!</
world!</p>
</body>
</html>

 The text between <html> and </html> describes the web page, and the text between <body body> and </body> is the
visible page content. The markup text <title>This
>This is a title</
title</title> defines the browser page title.

 The Document Type Declaration <!DOCTYPE html> is for HTML5.

Elements
 HTML documents imply a structure of nested HTML elements.. These are indicated in the document by HTML tags,
enclosed in angle brackets thus: <p>
 The start tag may also include attributes within the tag

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 19

 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

 Attributes can provide additional information about the HTML elements on your page.
 For instance, if we add the bgcolor attribute, we can tell the browser that the background color of your page should be
blue, like this: <body bgcolor="blue">.
Element examples
 Header of the HTML document: <head>...</head> . The title is included in the head, for example:

<head>
<title>The Title</title>
</head>

 Headings: HTML headings are defined with the <h1> to <h6> tags:

<h1>Heading level 1</h1>

<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

 Paragraphs:

<p>Paragraph 1</p> <p>Paragraph 2</p>

 Line breaks: <br> . The difference between <br> and <p> is that br breaks a line without altering the semantic
structure of the page, whereas p sections the page into paragraphs.
 This is a link in HTML. To create a link the <a> tag is used. The href attribute holds the URL address of the link.
<a href="https://www.wikipedia.org/">A link to Wikipedia!</a>

 Inputs:
 There are many possible ways a user can give input/s like:

1 <input type="text" /> <!-- This is for text input -->

2 <input type="file" /> <!-- This is for uploading files -->
3 <input type="checkbox" /> <!-- This is for checkboxes -->

 Comments:

<!-- This is a comment -->

Other HTML Tags

 As mentioned before, there are logical styles that describe what the text should be and physical styles which actually
provide physical formatting. It is recommended to use the logical tags and use style sheets to style the text in those
tags.
Logical Tags Physical Tags Tag Description
Tag Description
<abbr> Defines an abbreviation
<b> Defines bold text
<acronym> Defines an acronym
<big> Defines big text
<address> Defines an address element
Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 20
 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

<cite> Defines a citation <i> Defines italic text

<code> Defines computer code <small> Defines small text
text
<sup> Defines superscripted text
<blockquote> Defines a long quotation
<sub> Defines subscripted text
<del> Defines text
<tt> Defines teletype text
<dfn> Defines a definition term
<u> Deprecated. Use styles instead
<em> Defines emphasized text
<ins> Defines inserted text
<kbd> Defines keyboard text
<pre> Defines preformatted text
<q> Defines a short quotation
<samp> Defines sample computer code
<strong> Defines strong text
<var> Defines a variable

 Character tags like <strong> and <em> produce the same physical display as <b> and <i> but are more uniformly
supported across different browsers.
HTML Character Entities
 Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If
we want the browser to actually display these characters we must insert character entities in place of the actual
characters themselves.
The Most Description Entity Name Entity Number
Common
Character
Entities: Result
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" quotation mark &quot; &#34;
' apostrophe &apos; (does not &#39;
work in IE)
HTML Lists
 HTML provides a simple way to show unordered lists (bullet lists) or ordered lists (numbered lists).
Unordered Lists
 An unordered list is a list of items marked with bullets (typically small black circles). An unordered list starts with the <ul>
tag. Each list item starts with the <li> tag. This Code
Code Would Display
<ul> <li>Coffee</li> <li>Milk</li> </ul> Coffee
Milk

Ordered Lists

 An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag.
Each list item starts with the <li> tag.
This Code Would Display

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 21

 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

<ol> <li>Coffee</li> <li>Milk</li> </ol> 1. Coffee

2. Milk

 Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
Definition Lists
 Definition lists consist of two parts: a term and a description. To mark up a definition list, you need three HTML
elements; a container <dl>, a definition term <dt>, and a definition description <dd>.
This Code Would Display
<dl> <dt>Cascading Style Sheets</dt> Cascading Style Sheets Style sheets are used
<dd>Style sheets are used to provide to provide presentational suggestions for
presentational suggestions for documents documents marked up in HTML.
marked up in HTML. </dd> </dl>
 Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc
HTML Links
 HTML uses the <a> anchor tag to create a link to another document or web page.
The Anchor Tag and the Href Attribute
 An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
 The syntax of creating an anchor:
 <a href="url">Text to be displayed</a>
 The <a> tag is used to create an anchor to link from, the href attribute is used to tell the address of the document or
page we are linking to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.
This Code Would Display
<a href="http://www.austincc.edu/">Visit ACC!</a> Visit ACC!
The Target Attribute
 With the target attribute, you can define where the linked document will be opened. By default, the link will open in the
current window. The code below will open the document in a new browser window:
 <a href=http://www.austincc.edu/ target="_blank">Visit ACC!</a>
Email Links
 To create an email link, you will use mailto: plus your email address. Here is a link to ACC's Help Desk:
<a href="mailto:[email protected]">Email Help Desk</a>
 To add a subject for the email message, you would add ?subject= after the email address. For
example:
 <a href="mailto:[email protected]?subject=Email Assistance">Email Help Desk</a>

HTML Images
The Image Tag and the Src Attribute
 The <img> tag is empty, which means that it contains attributes only and it has no closing tag.
 To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute
is the URL of the image you want to display on your page. The syntax of defining an image:
This Code Would Display
<img src="graphics/chef.gif">

 Not only does the source attribute specify what image to use, but where the image is located. The above image,
graphics/chef.gif, means that the browser will look for the image name chef.gif in a graphics folder in the same folder
as the html document itself.
The Alt Attribute
 The alt attribute is used to define an alternate text for an image. The value of the alt attribute is

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 22

 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

author-defined text:
<img src="graphics/chef.gif" alt="Smiling Happy Chef ">
 The alt attribute tells the reader what he or she is missing on a page if the browser can't load images.
 The browser will then display the alternate text instead of the image. It is a good practice to include the alt attribute for
each image on a page, to improve the display and usefulness of your document for people who have text-only browsers
or use screen readers.
Image Dimensions
 When you have an image, the browser usually figures out how big the image is all by itself. If you put in the image
dimensions in pixels however, the browser simply reserves a space for the image, thenloads the rest of the page. Once
the entire page is loads it can go back and fill in the images. Without dimensions, when it runs into an image, the
browser has to pause loading the page, load the image, then continue loading the page. The chef image would then be:

<img src="graphics/chef.gif" width="130" height="101" alt="Smiling Happy Chef">

Tables
 Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data
cells (with the <td> tag). The letters td stands for table data, which is the content of a data cell. A data cell can contain
text, images, lists, paragraphs, forms, horizontal rules, tables, etc.,
This Code Would Display
<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr> row 1, cell 1 row 1, cell 2
<tr> row 2, cell 1 row 2, cell 2
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Headings in a Table
 Headings in a table are defined with the <th> tag.
This Code Would Display
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Cell Padding and Spacing
 The <table> tag has two attributes known as cellspacing and cellpadding. Here is a table example without these
properties. These properties may be used separately or together.
This Code Would Display
<table border="1">
<tr>
<td>some text</td>
Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 23
 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

<td>some text</td>
</tr>
<tr>
<td>some text</td>
<td>some text</td>
</tr>
</table>
FORM
 HTML Forms are required, when you want to collect some data from the site visitor.
For example, during user registration you would like to collect information such as
name, email address, credit card, etc.

 A form will take input from the site visitor and then will post it to a back-end
application such as CGI, ASP Script or PHP script etc. The back-end application will
perform required processing on the passed data based on defined business logic
inside the application.

 There are various form elements available like text fields, textarea fields, drop-down
menus, radio buttons, checkboxes, etc.

The HTML <form> tag is used to create an HTML form and it has following syntax −

<form action = "Script URL" method = "GET|POST">

form elements like input, textarea etc.

</form>
 Sometimes you need to add music or video into your web page. The easiest way to
add video or sound to your web site is to include the special HTML tag
called <embed>. This tag causes the browser itself to include controls for the
multimedia automatically provided browser supports <embed> tag and given media
type.

 You can also include a <noembed> tag for the browsers which don't recognize the
<embed> tag. You could, for example, use <embed> to display a movie of your
choice, and <noembed> to display a single JPG image if browser does not support
<embed> tag.

Example
Here is a simple example to play an embedded midi file −
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 24

WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

Form Attributes
Apart from common attributes, following is a list of the most frequently used form attributes −

Sr.No Attribute & Description

1 action
Backend script ready to process your passed data.

2 method
Method to be used to upload data. The most frequently used are GET and
POST methods.

3 target
Specify the target window or frame where the result of the script will be
displayed. It takes values like _blank, _self, _parent etc.

There are different types of form controls that you can use to collect data using HTML form −

 Text Input Controls

 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 File Select boxes
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button

Text Input Controls

There are three types of text input used on forms −

 Single-line text input controls − This control is used for items that require only one
line of user input, such as search boxes or names. They are created using
HTML <input> tag.
 Password input controls − This is also a single-line text input but it masks the
character as soon as a user enters it. They are also created using HTMl <input> tag.
 Multi-line text input controls − This is used when the user is required to give details
that may be longer than a single sentence. Multi-line input controls are created using
HTML <textarea> tag.

Single-line text input controls

This control is used for items that require only one line of user input, such as search boxes
or names. They are created using HTML <input> tag.
Example
Here is a basic example of a single-line text input used to take first name and last name
<!DOCTYPE html>
<html>

<head>
<title>Text Input Control</title>
</head>

<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 25

WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

</form>
</body>

</html>
This will produce the following result −
Attributes
Following is the list of attributes for <input> tag for creating text field.

Sr.No Attribute & Description

1 type
Indicates the type of input control and for text input control it will be set to text.

2 name
Used to give a name to the control which is sent to the server to be recognized and get
the value.

3 value
This can be used to provide an initial value inside the control.

4 size
Allows to specify the width of the text-input control in terms of characters.

5 maxlength
Allows to specify the maximum number of characters a user can enter into the text box.

Password input controls

This is also a single-line text input but it masks the character as soon as a user enters it.
They are also created using HTML <input>tag but type attribute is set to password.
Example
Here is a basic example of a single-line password input used to take user password
<!DOCTYPE html>
<html>

<head>
<title>Password Input Control</title>
</head>

<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>

</html>
This will produce the following result −
Attributes
Following is the list of attributes for <input> tag for creating password field.

Sr.No Attribute & Description

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 26

WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

1 type
Indicates the type of input control and for password input control it will be set
to password.

2 name
Used to give a name to the control which is sent to the server to be recognized and get
the value.

3 value
This can be used to provide an initial value inside the control.

4 size
Allows to specify the width of the text-input control in terms of characters.

5 maxlength
Allows to specify the maximum number of characters a user can enter into the text box.

Multiple-Line Text Input Controls

This is used when the user is required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML <textarea> tag.
Example
Here is a basic example of a multi-line text input used to take item description
<!DOCTYPE html>
<html>

<head>
<title>Multiple-Line Input Control</title>
</head>

<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>

</html>
This will produce the following result −
Attributes
Following is the list of attributes for <textarea> tag.

Sr.No Attribute & Description

1 name
Used to give a name to the control which is sent to the server to be recognized and get
the value.

2 rows
Indicates the number of rows of text area box.

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 27

WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

3 cols
Indicates the number of columns of text area box

Checkbox Control
Checkboxes are used when more than one option is required to be selected. They are also created
using HTML <input> tag but type attribute is set to checkbox..
Example
Here is an example HTML code for a form with two checkboxes
<!DOCTYPE html>
<html>

<head>
<title>Checkbox Control</title>
</head>

<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>

</html>
This will produce the following result −
Attributes
Following is the list of attributes for <checkbox> tag.

Sr.No Attribute & Description

1 type
Indicates the type of input control and for checkbox input control it will be set
to checkbox..

2 name
Used to give a name to the control which is sent to the server to be recognized and get
the value.

3 value
The value that will be used if the checkbox is selected.

4 checked
Set to checked if you want to select it by default.

Radio Button Control

Radio buttons are used when out of many options, just one option is required to be selected.
They are also created using HTML <input> tag but type attribute is set to radio.
Example
Here is example HTML code for a form with two radio buttons −
<!DOCTYPE html>
<html>

<head>
<title>Radio Box Control</title>
</head>

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 28

WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>

</html>
This will produce the following result −
Attributes
Following is the list of attributes for radio button.

Sr.No Attribute & Description

1 type
Indicates the type of input control and for checkbox input control it will be set to
radio.

2 name
Used to give a name to the control which is sent to the server to be recognized and get
the value.

3 value
The value that will be used if the radio box is selected.

4 checked
Set to checked if you want to select it by default.

Select Box Control

A select box, also called drop down box which provides option to list down various options in
the form of drop down list, from where a user can select one or more options.
Example
Here is example HTML code for a form with one drop down box
<!DOCTYPE html>
<html>

<head>
<title>Select Box Control</title>
</head>

<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>

</html>
This will produce the following result −
Attributes
Following is the list of important attributes of <select> tag −

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 29

WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

Sr.No Attribute & Description

1 name
Used to give a name to the control which is sent to the server to be recognized and get
the value.

2 size
This can be used to present a scrolling list box.

3 multiple
If set to "multiple" then allows a user to select multiple items from the menu.

Following is the list of important attributes of <option> tag −

Sr.No Attribute & Description

1 value
The value that will be used if an option in the select box box is selected.

2 selected
Specifies that this option should be the initially selected value when the page loads.

3 label
An alternative way of labeling options

File Upload Box

If you want to allow a user to upload a file to your web site, you will need to use a file
upload box, also known as a file select box. This is also created using the <input> element but
type attribute is set to file.
Example
Here is example HTML code for a form with one file upload box −
<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>

</html>
This will produce the following result −
Attributes
Following is the list of important attributes of file upload box −

Sr.No Attribute & Description

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 30

WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

1 name
Used to give a name to the control which is sent to the server to be recognized and get
the value.

2 accept
Specifies the types of files that the server accepts.

Button Controls
There are various ways in HTML to create clickable buttons. You can also create a clickable
button using <input>tag by setting its type attribute to button. The type attribute can take
the following values −

Sr.No Type & Description

1 submit
This creates a button that automatically submits a form.

2 reset
This creates a button that automatically resets form controls to their initial values.

3 button
This creates a button that is used to trigger a client-side script when the user clicks
that button.

4 image
This creates a clickable button but we can use an image as background of the button.

Example
Here is example HTML code for a form with three types of buttons
<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
</body>

</html>
This will produce the following result −
Hidden Form Controls
Hidden form controls are used to hide data inside the page which later on can be pushed to the
server. This control hides inside the code and does not appear on the actual page. For example,
following hidden form is being used to keep current page number. When a user will click next
page then the value of hidden control will be sent to the web server and there it will decide
which page will be displayed next based on the passed current page.
Example
Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 31
WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

Here is example HTML code to show the usage of hidden control −

<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>

</html>

<body>
<embed src = "/html/yourfile.mid" width = "100%" height = "60" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>
</html>

The <embed> Tag Attributes

Following is the list of important attributes which can be used with <embed> tag.

Note −The align and autostart attributes deprecated in HTML5. Do not use these attributes.

Sr.No Attribute & Description

1 align

Determines how to align the object. It can be set to either center, left or right.

2 autostart

This boolean attribute indicates if the media should start automatically. You can set it
either true or false.

3 loop

Specifies if the sound should be played continuously (set loop to true), a certain number
of times (a positive value) or not at all (false)

4 playcount

Specifies the number of times to play the sound. This is alternate option for loop if you

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 32

WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

are usiong IE.

5 hidden

Specifies if the multimedia object should be shown on the page. A false value means no
and true values means yes.

6 width

Width of the object in pixels

7 height

Height of the object in pixels

8 name

A name used to reference the object.

9 src

URL of the object to be embedded.

10 volume

Controls volume of the sound. Can be from 0 (off) to 100 (full volume).

Supported Video Types

You can use various media types like Flash movies (.swf), AVI's (.avi), and MOV's (.mov) file types inside embed tag.

 .swf files − are the file types created by Macromedia's Flash program.
 .wmv files − are Microsoft's Window's Media Video file types.
 .mov files − are Apple's Quick Time Movie format.
 .mpeg files − are movie files created by the Moving Pictures Expert Group.

 <!DOCTYPE html>
 <html>

 <head>
 <title>HTML embed Tag</title>
 </head>

 <body>
 <embed src = "/html/yourfile.swf" width = "200" height = "200" >
 <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
 </embed>
Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 33
WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

 </body>

 </html>

Frames
HTML frames are used to divide your browser window into multiple sections where each section can load a
separate HTML document. A collection of frames in the browser window is known as a frameset. The window is divided
into frames in a similar way the tables are organized: into rows and columns.
Disadvantages of Frames
There are few drawbacks with using frames, so it's never recommended to use frames in your webpages −
 Some smaller devices cannot cope with frames often because their screen is not big enough to be divided up.
 Sometimes your page will be displayed differently on different computers due to different screen resolution.
 The browser's back button might not work as the user hopes.
 There are still few browsers that do not support frame technology.
Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines, how to divide the
window into frames. The rowsattribute of <frameset> tag defines horizontal frames and cols attribute defines vertical
frames. Each frame is indicated by <frame> tag and it defines which HTML document shall open into the frame.
Note − The <frame> tag deprecated in HTML5. Do not use this element.
Example
Following is the example to create three horizontal frames −

<!DOCTYPE html>
<html>

<head>
<title>HTML Frames</title>
</head>

<frameset rows = "10%,80%,10%">

<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>

</frameset>

</html>
This will produce the following result −
Example
Let's put the above example as follows, here we replaced rows attribute by cols and changed their width. This will create
all the three frames vertically −

<!DOCTYPE html>
<html>

<head>
<title>HTML Frames</title>
</head>
Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 34
WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

<frameset cols = "25%,50%,25%">

<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>

</html>
This will produce the following result −
The <frameset> Tag Attributes
Following are important attributes of the <frameset> tag −
Sr.No Attribute & Description

cols
Specifies how many columns are contained in the frameset and the size of each column. You can specify the
width of each column in one of the four ways −
Absolute values in pixels. For example, to create three vertical frames, use cols = "100, 500, 100".
A percentage of the browser window. For example, to create three vertical frames, use cols = "10%, 80%,
10%".
1
Using a wildcard symbol. For example, to create three vertical frames, use cols = "10%, *, 10%". In this case
wildcard takes remainder of the window.
As relative widths of the browser window. For example, to create three vertical frames, use cols = "3*, 2*, 1*".
This is an alternative to percentages. You can use relative widths of the browser window. Here the window is
divided into sixths: the first column takes up half of the window, the second takes one third, and the third takes
one sixth.

rows
This attribute works just like the cols attribute and takes the same values, but it is used to specify the rows in
2
the frameset. For example, to create two horizontal frames, use rows = "10%, 90%". You can specify the height
of each row in the same way as explained above for columns.

border
3 This attribute specifies the width of the border of each frame in pixels. For example, border = "5". A value of
zero means no border.

frameborder
4 This attribute specifies whether a three-dimensional border should be displayed between frames. This attribute
takes value either 1 (yes) or 0 (no). For example frameborder = "0" specifies no border.

framespacing
5 This attribute specifies the amount of space between frames in a frameset. This can take any integer value. For
example framespacing = "10" means there should be 10 pixels spacing between each frames.
The <frame> Tag Attributes
Following are the important attributes of <frame> tag −
Sr.No Attribute & Description

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 35

WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

src
1 This attribute is used to give the file name that should be loaded in the frame. Its value can be any URL. For
example, src = "/html/top_frame.htm" will load an HTML file available in html directory.

name
This attribute allows you to give a name to a frame. It is used to indicate which frame a document should be
2
loaded into. This is especially important when you want to create links in one frame that load pages into an
another frame, in which case the second frame needs a name to identify itself as the target of the link.

frameborder
3 This attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the
frameborder attribute on the <frameset> tag if one is given, and this can take values either 1 (yes) or 0 (no).

marginwidth
4 This attribute allows you to specify the width of the space between the left and right of the frame's borders and
the frame's content. The value is given in pixels. For example marginwidth = "10".

marginheight
5 This attribute allows you to specify the height of the space between the top and bottom of the frame's borders
and its contents. The value is given in pixels. For example marginheight = "10".

noresize
6 By default, you can resize any frame by clicking and dragging on the borders of a frame. The noresize attribute
prevents a user from being able to resize the frame. For example noresize = "noresize".

scrolling
7 This attribute controls the appearance of the scrollbars that appear on the frame. This takes values either "yes",
"no" or "auto". For example scrolling = "no" means it should not have scroll bars.

longdesc
8 This attribute allows you to provide a link to another page containing a long description of the contents of the
frame. For example longdesc = "framedescription.htm"
Browser Support for Frames
If a user is using any old browser or any browser, which does not support frames then <noframes> element should be
displayed to the user.
So you must place a <body> element inside the <noframes> element because the <frameset> element is supposed to
replace the <body> element, but if a browser does not understand <frameset> element then it should understand what
is inside the <body> element which is contained in a <noframes> element.
You can put some nice message for your user having old browsers. For example, Sorry!! your browser does not support
frames. as shown in the above example.
Frame's name and target attributes
One of the most popular uses of frames is to place navigation bars in one frame and then load main pages into a
separate frame.
Let's see following example where a test.htm file has following code −

<!DOCTYPE html>
<html>

<head>
<title>HTML Target Frames</title>
</head>

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 36

WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

<frameset cols = "200, *">

<frame src = "/html/menu.htm" name = "menu_page" />
<frame src = "/html/main.htm" name = "main_page" />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>

</html>
Here, we have created two columns to fill with two frames. The first frame is 200 pixels wide and will contain the
navigation menu bar implemented by menu.htm file. The second column fills in remaining space and will contain the
main part of the page and it is implemented by main.htm file. For all the three links available in menu bar, we have
mentioned target frame as main_page, so whenever you click any of the links in menu bar, available link will open in
main page.
Following is the content of menu.htm file

<!DOCTYPE html>
<html>

<body bgcolor = "#4a7d49">

<a href = "http://www.google.com" target = "main_page">Google</a>
<br />
<br />

<a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>

<br />
<br />

<a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>

</body>

</html>
Following is the content of main.htm file −

<!DOCTYPE html>
<html>

<body bgcolor = "#b5dcb3">

<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>

</html>
When we load test.htm file, it produces following result −
Now you can try to click links available in the left panel and see the result. The targetattribute can also take one of the
following values −
Sr.No Option & Description

1 _self

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 37

WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

Loads the page into the current frame.

_blank
2
Loads a page into a new browser window. Opening a new window.

_parent
3
Loads the page into the parent window, which in the case of a single frameset is the main browser window.

_top
4
Loads the page into the browser window, replacing any current frames.

targetframe
5
Loads the page into a named targetframe.

Cascading Style Sheets (CSS)

 Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the
process of making web pages presentable.
 CSS handles the look and feel part of a web page.
 Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how
columns are sized and laid out, what background images or colors are used, as well as a variety of other
effects.
 CSS is easy to learn and understand but it provides a powerful control over the presentation of an HTML
document
Advantages of CSS
 CSS saves time - You can write CSS once and then reuse the same sheet in multiple HTML pages. You can
define a style for each HTML element and apply it to as many web pages as you want.
 Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write
one CSS rule of a tag and apply it to all the occurrences of that tag. So, less code means faster download
times.
 Easy maintenance - To make a global change, simply change the style, and all the elements in all the web
pages will be updated automatically. Superior styles to HTML - CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.
 Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of device. By
using the same HTML document, different versions of a website can be presented for handheld devices such as
PDAs and cell phones or for printing.
 Global web standards – Now HTML attributes are being deprecated and it is being recommended to use CSS.
So it’s a good idea to start using CSS in all the HTML pages to make them compatible with future browsers
A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in
your document. A style rule is made of three parts:
Selector: A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc.
Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS
properties. They could be color, border, etc.
Value: Values are assigned to properties. For example, color property can have the value either red or #F1F1F1 etc.

You can put CSS Style Rule Syntax as follows:

Selector { property: value }
Example: You can define a table border as follows:
table{ border :1px solid #C00; }
Here table is a selector and border is a property and the given value 1px solid #C00 is the value of that property. You
can define selectors in various simple ways based on your comfort. Let me put these selectors one by one.

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 38

WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

Multiple Style Rules

You may need to define multiple style rules for a single element. You can define these rules to combine multiple
properties and corresponding values into a single block as defined in the following example:
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
 Here all the property and value pairs are separated by a semicolon (;). You can keep them in a single line or
multiple lines. For better readability, we keep them in separate lines.

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 39

WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

 For a while, don't bother about the properties mentioned in the above block. These properties will be explained in
the coming chapters and you can find the complete detail about properties in CSS References.

Grouping Selectors
 You can apply a style to many selectors if you like. Just separate the selectors with a comma, as given in the
following example:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
This define style rule will be applicable to h1, h2 and h3 element as well. The order of the list is irrelevant. All the
elements in the selector will have the corresponding declarations applied to them.

You can combine the various class selectors together as shown below:
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}
There are three ways to associate styles with your HTML document. Most commonly used methods are inline CSS and
External CSS.
Embedded CSS - The <style> Element
You can put your CSS rules into an HTML document using the <style> element. This tag is placed inside the
<head>...</head> tags. Rules defined using this syntax will be applied to all the elements available in the document.
Here is the generic syntax:
<head>
<style type="text/css" media="...">
Style Rules
............
</style>
</head>
Attributes
Attributes associated with <style> elements are:
Attribute Value Description
type text/css Specifies the style sheet language as a content-type
(MIME type). This is a required attribute.
media screen tty tv projection handheld print Specifies the device, the document will be displayed
Braille aural all on. Default value is all. This is an optional attribute.

Example
Following is an example of embed CSS based on the above syntax:
<head>
<style type="text/css" media="all">
h1{
color: #36C;
}
</style>
Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 40
 WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

</head>
Inline CSS - The style Attribute
You can use style attribute of any HTML element to define style rules. These rules will be applied to that element only.
Here is the generic syntax:
<element style="...style rules....">
Attributes Attribute Value Description
style style rules The value of style attribute is a
combination of style
declarations separated by
semicolon (;).
Example
Following is the example of inline CSS based on the above syntax:
<h1 style ="color:#36C;"> This is inline CSS </h1>
External CSS - The <link> Element
The <link> element can be used to include an external stylesheet file in your HTML document.
An external style sheet is a separate text file with .css extension. You define all the Style rules within this text file and
then you can include this file in any HTML document using <link> element.
Here is the generic syntax of including external CSS file:
<head>
<link type="text/css" href="..." media="..." />
</head>
Attributes:
Attributes associated with <style> elements are:
Attribute Value Description
type text/css Specifies the style sheet language as a content-type
(MIME type). This attribute is required.
href URL Specifies the style sheet file having Style rules. This
attribute is a required.
media screen tty tv projection handheld print Specifies the device the document will be displayed
braille aural all on. Default value is all. This is an optional attribute.

Example

Consider a simple style sheet file with a name mystyle.css having the following rules:

h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Now you can include this file mystyle.css in any HTML document as follows:
<head>
<link type="text/css" href="mystyle.css" media="all" />
</head>

Imported CSS is the another method of adding styles to the web page
Imported CSS - @import Rule

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 41

WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

@import is used to import an external stylesheet in a manner similar to the <link> element. Here is the generic syntax of
@import rule.
<head>
<@import "URL";
</head>
Example
Following is the example showing you how to import a style sheet file into an HTML document:
<head>
@import "mystyle.css";
</head>
CSS Rules Overriding
We have discussed four ways to include style sheet rules in an HTML document. Here is the rule to override any Style
Sheet Rule.
 Any inline style sheet takes the highest priority. So, it will override any rule defined in <style>...</style> tags or the
rules defined in any external style sheet file.
 Any rule defined in <style>...</style> tags will override the rules defined in any external style sheet file.
 Any rule defined in the external style sheet file takes the lowest priority, and the rules defined in this file will be
applied only when the above two rules are not applicable.
CSS Comments
Many times, you may need to put additional comments in your style sheet blocks. So, it is very easy to comment any
part in the style sheet. You can simply put your comments inside /*.....this is a comment in style sheet.....*/.

You can use /* ....*/ to comment multi-line blocks in similar way you do in C and C++ programming languages.
Example
/* This is an external style sheet file */
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
/* end of style rules. */
COLOR
• The color property allows you to specify the color of text inside an element.
• You can specify any color in CSS in one of three ways:
– rgb values: These express colors in terms of how much red, green and blue are used to make it up.
For example: rgb(100,100,90)
– hex codes: These are six-digit codes that represent the amount of red, green and blue in a color,
preceded by a pound or hash # sign. For example: #ee3e80
– color names: There are 147 predefined color names that are recognized by browsers. For example:
DarkCyan
/* color name */
h1 {
color: DarkCyan;}
/* hex code */
h2 {
color: #ee3e80;}
/* rgb value */
p{
color: rgb(100,100,90);}

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 42

WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

• background-color: CSS treats each HTML element as if it appears in a box, and the background-color
property sets the color of the background for that box.
• You can specify your choice of background color in the same three ways you can specify foreground colors:
RGB values, hex codes, and color names
body {
background-color: rgb(200,200,200);}
h1 {
background-color: DarkCyan;}
h2 {
background-color: #ee3e80;}
p{
background-color: white;}
Color Codes

Opacity
• CSS3 introduces the opacity property which allows you to specify the opacity of an element and any of its child
elements.
• The value is a number between 0.0 and 1.0 (so a value of 0.5 is 50% opacity and 0.15 is 15% opacity).
• The CSS3 rgba property allows you to specify a color, just like you would with an RGB value, but adds a
fourth value to indicate opacity. This value is known as an alpha value and is a number between 0.0 and 1.0
(so a value of 0.5 is 50% opacity and 0.15 is 15% opacity).
p.one {
background-color: rgb(0,0,0);
opacity: 0.5;}
p.two {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.5);}
TEXT
• The properties that allow you to control the appearance of text can be split into two groups:
• Those that directly affect the font and its appearance (including the typeface, whether it is regular, bold or
italic,and the size of the text)
• Those that would have the same effect on text no matter what font you were using (including the color of text
and the spacing between words and letters)
Generic font family (font-family )property

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 43

WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

Font property
• The font-family property allows you to specify the typeface that should be used for any text inside the
element(s) to which a CSS rule applies.
body {
font-family: Georgia, Times, serif;}
h1, h2 {
font-family: Arial, Verdana, sans-serif;}
.credits {
font-family: "Courier New", Courier, monospace;}

• font-size:The font-size property enables you to specify a size for the font. There are several ways to specify the
size of a font. The most common are: px,%,em
body {
font-family: Arial, Verdana, sans-serif;
font-size: 12px;}
h1 {
font-size: 200%;}
h2 {
font-size: 1.3em;}
• The font-weight property allows you to create bold text. There are two values that this property commonly takes:
– normal:This causes text to appear at a normal weight.
– bold :This causes text to appear bold.
.credits { font-weight: bold;
font-style: italic;}
• If you want to create italic text, you can use the font-style
• property. There are three values this property can take:
– Normal:This causes text to appear in a normal style (as opposed to italic or oblique).
– Italic:This causes text to appear italic.
– Oblique:This causes text to appear oblique.
• The text-transform property is used to change the case of text giving it one of the following values:
– uppercase :This causes the text to appear uppercase.
– lowercase:This causes the text to appear lowercase.
– capitalize:This causes the first letter of each word to appear capitalized.
h1 {text-transform: uppercase;
}
h2 {
text-transform: lowercase;
}
.credits {

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 44

WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

text-transform: capitalize;}
• The text-decoration property allows you to specify the following values:
– none :This removes any decoration already applied to the text.
– underline:This adds a line underneath the text.
– overline:This adds a line over the top of the text.
– line-through:This adds a line through words.
– Blink:This animates the text to make it flash on and off.
• You can also control the gap between words using the word-spacing property.
h1, h2 {text-transform: uppercase;
letter-spacing: 0.2em;}
.credits {
font-weight: bold;
word-spacing: 1em;}

• line-height: use for the vertical space between lines of text

p { line-height: 1.4em;}
• You can control the space between each letter with the letter-spacing property.
• You can also control the gap between words using the word-spacing property.
h1, h2 {text-transform: uppercase;
letter-spacing: 0.2em;}
.credits {
font-weight: bold;
word-spacing: 1em;}
• The text-align property allows you to control the alignment of text. The property can take one of four values:
– left:This indicates that the text should be left-aligned.
– right:This indicates that the text should be right-aligned.
– center:This allows you to center text.
– justify:This indicates that every line in a paragraph, except the last line, should be set to take up the
full width of the containing box.
• The vertical-align property is used align text in inline elements. The values its takes as follows:
– baseline
– Sub
– super
– top
– text-top
– middle
– bottom
– text-bottom
• The text-indent property allows you to indent the first line of text within an element.
• The amount you want the line indented by can be specified in a number of ways but is usually given in pixels or
ems.
• It can take a negative value, which means it can be used to push text off the browser window.
h1 {
background-image: url("images/logo.gif");
background-repeat: no-repeat;
text-indent: -9999px;}
.credits {
text-indent: 20px;}

• The text-shadow property is used to create a drop shadow, which is a dark version of the word.
• It can also be used to create an embossed effect by adding a shadow that is slightly lighter than the text.

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 45

WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

• The value of this property is quite complicated because it can take three lengths and a color for the drop
shadow.
• The first length indicates how far to the left or right the shadow should fall.
• The second value indicates the distance to the top or bottom that the shadow should fall.
• The third value is optional and specifies the amount of blur that should be applied to the drop shadow.
• The fourth value is the color of the drop shadow.
p.one { background-color: #eeeeee;
color: #666666;
text-shadow: 1px 1px 0px #000000;}
p.two {background-color: #dddddd;
color: #666666;
text-shadow: 1px 1px 3px #666666;}
p.three {background-color: #cccccc;
color: #ffffff;
text-shadow: 2px 2px 7px #111111;}
p.four {
background-color: #bbbbbb;
color: #cccccc;
text-shadow: -1px -2px #666666;}
p.five {
background-color: #aaaaaa;
color: #ffffff;
text-shadow: -1px -1px #666666;}
• You can specify different values for the first letter or first line of text inside an element using :first-letter and
:first-line.
• Technically these are not properties. They are known as pseudo-elements.
p.intro:first-letter {
font-size: 200%;}
p.intro:first-line {
font-weight: bold;}
• In CSS, there are two pseudo classes that allow you to set different styles for links that have and have not yet
been visited.
:link:This allows you to set styles for links that have not yet been visited.
:visited:This allows you to set styles for links that have been clicked on.
a:link {
color: deeppink;
text-decoration: none;}
a:visited {
color: black;}
a:hover {
color: deeppink;
text-decoration: underline;}
a:active {
color: darkcyan;}
• There are three pseudo-classes that allow you to change the appearance of elements when a user is interacting
with them.
:hover:This is applied when a user hovers over an element with a pointing device such as a mouse. This has
commonly been used to change the appearance of links and buttons when a user places their cursor over them.
:active:This is applied when an element is being activated by a user; for example, when a button is being pressed
or a link being clicked.
:focus:This is applied when an element has focus. Any element that you can interact with, such as a link you can
click on or any form control can have focus.
Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 46
WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

input {
padding: 6px 12px 6px 12px;
border: 1px solid #665544;
color: #ffffff;}
input.submit:hover {
background-color: #665544;}
input.submit:active {
background-color: chocolate;}
input.text {
color: #cccccc;}
input.text:focus {
color: #665544;}
BOX
• You can set several properties that affect the appearance of these boxes. In this chapter you will see how to:
– Control the dimensions of your boxes
– Create borders around boxes
– Set margins and padding for boxes
– Show and hide boxes
• By default a box is sized just big enough to hold its contents. To set your own dimensions for a box you can use
the height and width properties.
The most popular ways to specify the size of a box are to use pixels, percentages, or ems. Traditionally, pixels have
been the most popular method because they allow designers to accurately control their sizediv.box {

height: 300px;
width: 300px;
background-color: #bbbbaa;}
p{
height: 75%;
width: 75%;
background-color: #0088dd;}
• Some page designs expand and shrink to fit the size of the user's screen. In such designs, the min-width
property specifies the smallest size a box can be displayed at when the browser window is narrow, and the
max-width property indicates the maximum width a box can stretch to when the browser window is wide.
h2, p {
width: 400px;
font-size: 90%;
line-height: 1.2em;}
h2 {
color: #0088dd;
border-bottom: 1px solid #0088dd;}
p { min-height: 10px;
max-height: 30px;}
• The overflow property tells the browser what to do if the content contained within a box is larger than the box
itself. It can have one of two values:
– hidden :This property simply hides any extra content that does not fit in the box.
– scroll:This property adds a scrollbar to the box so that users can scroll to see the missing content.
p.one {
overflow: hidden;}
p.two {
overflow: scroll;}
• Every box has three available properties that can be adjusted to control its appearance:

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 47

WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

– Every box has a border (even if it is not visible or is specified to be 0 pixels wide). The border
separates the edge of one box from another.
– margin sit outside the edge of the border. You can set the width of a margin to create a gap between
the borders of two adjacent boxes.
– padding is the space between the border of a box and any content contained within it. Adding padding
can increase the readability of its contents.
• The border-width property is used to control the width of a border. The value of this property can either be
given in pixels or using one of the following values:
– thin
– medium
– thick
• You can control the individual size of borders using four separate properties:
– border-top-width
– border-right-width
– border-bottom-width
– border-left-width
p.one {
border-width: 2px;}
p.two {
border-width: thick;}
p.three {
border-width: 1px 4px 12px 4px;}
• border using the border-style property. This property can take the following values:
– solid a single solid line
– dotted a series of square dots (if your border is 2px wide, then the dots are 2px squared with a 2px gap
between each dot)
– dashed a series of short lines
– double two solid lines (the value of the border-width property creates the sum of the two lines)
– groove appears to be carved into the page
– ridge appears to stick out from the page
– inset appears embedded into the page
– outset looks like it is coming out of the screen
– hidden / none no border is shown
• You can individually change the styles of different borders using:
– border-top-style
– border-left-style
– border-right-style
– border-bottom-style
p.one {border-style: solid;}
p.two {border-style: dotted;}
p.three {border-style: dashed;}
p.four {border-style: double;}
p.five {border-style: groove;}
p.six {border-style: ridge;}
p.seven {border-style: inset;}
p.eight {border-style: outset;}
• You can use border-color to specify the color of a border using either RGB values, hex codes or CSS color
names.
• It is possible to individually control the colors of the borders on different sides of a box using:
– border-top-color
– border-right-color
– border-bottom-color
Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 48
WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

– border-left-color
p.one {
border-color: #0088dd;}
p.two {
border-color: #bbbbaa #111111 #ee3e80 #0088dd;}
• The border property allows you to specify the width, style and color of a border in one property (and the values
should be coded in that specific order).
p{
width: 250px;
border: 3px dotted #0088dd;}
• The padding property allows you to specify how much space should appear between the content of an element
and its border.
• It is measured in px,%,em
• You can specify different values for each side of a box using:
– padding-top
– padding-right
– padding-bottom
– padding-left
p{
width: 275px;
border: 2px solid #0088dd;}
p.example {
padding: 10px;}
• The margin property controls the gap between boxes. Its value is commonly given in pixels, although you may
also use percentages or ems.
• You can specify values for each side of a box using:
– margin-top
– margin-right
– margin-bottom
– margin-left
p{
width: 200px;
border: 2px solid #0088dd;
padding: 10px;}
p.example {
margin: 20px;}

• The display property allows you to turn an inline element into a block-level element or vice versa, and can also
be used to hide an element from the page. The values this property can take are:
– lnline This causes a block-level element to act like an inline element.
– block This causes an inline element to act like a block-level element.
– inline-block This causes a block-level element to flow like an inline element, while retaining other
features of a block-level element.
– none This hides an element from the page. In this case, the element acts as though it is not on the
page at all.
li {
display: inline;
margin-right: 10px;}
li.coming-soon {
display: none;}
• The visibility property allows you to hide boxes from users but It leaves a space where the element
would have been. This property can take two values:
Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 49
WEB AND INTERNET TECHNOLOGIES (15A05605) III B.Tech II Sem (CSE)

– hidden This hides the element.

– visible This shows the element.

• The border-image property applies an image to the border of any box. It takes a background image and slices it
into nine pieces. This property requires three pieces of information:
– 1: The URL of the image
– 2: Where to slice the image
– 3: What to do with the straight edges; the possible values are:
• stretch stretches the image
• repeat repeats the image
• round like repeat but if the tiles do not fit exactly, scales the tile image so they will
p.one {
-moz-border-image: url("images/dots.gif")
11 11 11 11 stretch;
-webkit-border-image: url("images/dots.gif")
11 11 11 11 stretch;
border-image: url("images/dots.gif")
11 11 11 11 stretch;}
p.two {
-moz-border-image: url("images/dots.gif")
11 11 11 11 round;
-webkit-border-image: url("images/dots.gif")
11 11 11 11 round;
border-image: url("images/dots.gif")
11 11 11 11 round;}

• The box-shadow property allows you to add a drop shadow around a box. It works just like the text-shadow
property use at least the first of these two values as well as a color:
– Horizontal offset Negative values position the shadow to the left of the box.
– Vertical offset Negative values position the shadow to the top of the box.
– Blur distance If omitted, the shadow is a solid line like a border.
– Spread of shadow If used, a positive value will cause the shadow to expand in all directions, and a
negative value will make it contract.

Annamacharya Inst. of Technology & Sciences :: Tirupati Page | 50