BLDEA S. B. S.

ARTS, COMMERCE AND SCIENCE COLLEGE FOR WOMEN

BCA PROGRAM

WEB TECHNOLOGIES
Asst.Prof. Gururaj N.Kulkarni

2024
 WEB TECHNOLOGIES

 Introduction and Web Design:

 Introduction to Internet, WWW and Web 2.0,Web browsers,
 Web protocols and Web servers,
 Web Design Principles and Web site structure,
 client-server technologies, Client side tools and technologies,
 Server side Scripting, URL, MIME, search engine, web serverApache,
 IIS, proxy server, HTTP protocol.
 Introduction to HTML. HTML5 Basics tags, Formatting tags in HTML,
 HTML5 Page layout and Navigation concepts,
 Semantic Elements in HTML, List, type of list tags, tables and form tags in HTML,
 multimedia basics, images, iframe, map tag, embedding audio and video clips on webpage

1. A brief Introduction to the Internet:

ORIGINS:

• In the 1960 the US Department of Defense (DoD) became interested in developing a new large
scale computer network in the 1960.

• The purposes of this network were communications, program sharing and remote computer
access for researchers working on defense related contracts.

• The DoD Advanced Research Projects Agency (ARPA) funded the construction of the first such
network, which connected about a dozen ARPA funded research laboratories and university.

• The first node of this network was established at |UCLA in 1969. Because it was funded by
ARPA, the network was named ARPAnet.

• The primary use of ARPAnet was simple text based communications through E-mail , because
ARPAnet was available only to laboratories and universities that conducted ARPA funded
research.

• Other networks were developed during the late 1970 and early 1980 with BITNET and CSNET
among them.

• BITNET, which is an acronym for because it’s Time Network, begun at the city University of New
York. It was built initially to provide electronics e-mail and file transfer.

• CSNET, which is an acronym for Computer Science Network, connected the University of
Delaware, University of Wisconsin.

2. WHAT THE INTERNET IS:

• The internet is a huge collection of computers connected in a communications network.

• These computers are of every imaginable size, configuration and manufacture.

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 2

 WEB TECHNOLOGIES
• In fact, some of the devices connected to the internet such as plotters and printers are not
computers at all.

• The innovation that allows all of these diverse devices to communicate with each other is a
single.

• Low level protocol, the Transmission Control Protocol/ Internet Protocol (TCP/IP).

• TCP/IP became the standard for computer network connection in 1982 and it can be used
directly to allow a program on one computer to communicate with a program on another
computer via the internet.

• TCP/IP provides the low level interface that allows all computers (and other device) connected
to the internet to appear exactly the same.

• Rather than connecting every computer on the internet directly to every other computer on the
internet, normally the individual computers in an organization are connected to each other in
local network.

3. INTERNET PROTOCOL ADDRESS:

• Internet nodes are identified by names, for computers, they are identified by numeric
addresses.

• This exactly parallels the relationship between a variable name in program which is for people
and the variables numeric memory address, which is for machine.

• The Internet Protocol (IP) address of a machine connected to the internet is a unique 32 bit
number.

• IP addresses usually are written as four 8 bit numbers, separated by periods. The four routing
computers to decide where a message must go next to get to its destination.

• For example , a small organization may be assigned 256 IP address , such as 191.57.126.0 to
191.57.126.255

• 8 bit number IP addresses such as 12.0.0.0 to 12.255.255.255

• Next to developed the most significant to expand the address size from 32 bit to 128 bit.

DOMAIN NAMES:

• People have difficulty dealing with and remembering numbers, machine on the internet also
have textual names.

• These names begin with the name of the host machine, followed by progressively larger
enclosing collection of machine called domains.

• There may be two, three or more domain names.

• The first domain name, which appears immediately to the right of the host name, is the domain
of which the host is a part.

• Second domain name gives the domain of which the first domain is a part organization in which
the host resides, which is largest domain in the sites name.

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 3

 WEB TECHNOLOGIES
• Example : Domain Name

• .com – Commercial Organization , .org – Nonprofit Organization , .net- Networking organization

etc

• http://msoft.com/index.html

• The first part of the address indicates the protocol to be used.

• Second part specifies the IP address or domain name where the resource is located.

• The above URL specifies a web page to be fetched using the HTTP protocol.

WORLD WIDE WEB:

• In 1989 a small group of people led by Tim Berners-Lee at CERN or European Laboratory for
particle Physics proposed a new protocol for the Internet as well as a system of document
access to use it.

• The intent of this new system, which the group named the World Wide Web, to allow users to
use the internet to exchange document describing their work. (limited group in placed around
the world)

• The proposed new system was designed to allow a user anywhere on the internet to search for
and retrieve documents from database an any number of different document serving
computers.

• For the form of its documents, the system used hypertext, which is text with embedded links to
text in other document to allow non sequential browsing of textual material.

• Documents are sometimes just text usually with embedded links to other documents, but they
often also include images, sound recording or other kinds of media.

• When document contain non textual information, it is called hyper media.

WEB BROWSERS:

• When two computers communicate over some network, in many cases one acts as a client and
other as a server.

• The client initiates the communication, which is often a request for information stored on the
server, which sends that information back to the client.

• The web as well as many other systems, operates in this client/server configuration.

• Documents provided by sever on the web are requested by browsers which are programs
running on client machine. They are called browsers.

• Because they allow the users to browse the resource available on server.

• The first browsers were text based they were not capable of displaying any sort of graphic
information nor did they have a graphical user interface.

• By late 1993, version of Mosaic for Apple Macintosh and Microsoft Window system had been
released, to support graphical user interface.

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 4

 WEB TECHNOLOGIES
• A browser is a client on the web because it initiates the communication with a server which
waits for a request from a client before doing anything.

• In the simplest case, a browser requests a static document from a server. The server locates the
document and sends it to the browser, which displays it for the user.

WEB SERVERS:

• Web servers are programs that provide documents to requesting browsers. The server are slave
programs, they are only when request are made to them by browser running on other
computers on the internet.

• The most commonly used web servers are Apache, which has been implemented for a variety of
computer platforms and Microsoft Internet Information Server (IIS) which runs under Windows
operating system.

WEB SERVER OPERATIONS:

• Web browsers initiate network communications with server by sending them URL.

• A URL can specify one of two different things, the address of a data file stored on the server that
is to be sent to the client, or a program returned to the client.

• All the communications between a web client and a web server use the standard web protocol ,
Hypertext Transfer Protocol (HTTP)

• When a web server begins executing it informs the operating system under which it is running
that it is now ready to accept incoming network connections through a specific port on the
machine.

• While in this running state, the server runs as a background process in the operating system
environment.

• A web client or browser, opens a network connection to a web server, sends information
request and possibly data to the server, and receives information from the server and close the
connection.

GENERAL SERVER CHARACTERISTICS:

• The file structure of a web server has two separate directories. The root of one this is called the
document root.

• The file hierarchy that grows from the document root stores the web document to which the
server has direct access and normally serves to clients.

• The root of the other directory is called the server root. This directory, along with its descendant
directories, stores the server and its support software.

• The files stored directly in the document root are those available to clients do not access the
document root directly in URL rather, the server maps requested URL to the document root,
whose location is not known to client.

• Many servers allow part of the servable document collection to be stored outside the directory
at the document root

• The secondary areas from which document can be served are called virtual document trees.

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 5

 WEB TECHNOLOGIES
• Many servers can support more than one site on a computer, potential reducing the cost of
each site and making their maintenance more convenient such secondary hosts are called
virtual hosts.

• Some servers can serve documents that are in the document root of other machine on the web ,
in this case they are called proxy server.(Proxy servers help improve web performance by
storing a copy of frequently used WebPages.)

APACHE:

• The name Apache has nothing to do with the Native American tribe of the same name.

• Rather it came from the nature of its first version, which was a patchy version of the http server.

• Apache is by far the most widely used web server.

• The primary reasons for this are as follows, it is an excellent server because it’s both fast and
reliable.

• Furthermore, it is open source software, which means it is free and managed by a large team of
volunteers, a process that efficiently and effectively maintains the system.

IIS (INTERNET INFORMATION SERVER):

• Windows based web server use IIS. Apache and IIS provide similar varieties of services.

• From point of view of the site manager, the most important different between Apache and IIS is
that Apache is controlled by a configuration file that is edited by the manager to change Apache
behavior.

• With IIS, server behavior is modified by changes made through a window based management
program, named the IIS snap-in , which controls both IIS and FTP.

• This program allows the site manager to set parameters for the server.

UNIFORM RESOURCE LOCATOR (URL):

• URL is used to identify documents on the internet. There are many different kinds of resources ,
identified by different forms of URL.

URL FORMAT:

• All URLs have the same general format Scheme : Object –Address

• The scheme is often a communication protocol. Common scheme include http, ftp, gopher,
telnet, file, mail-to and news.

• Different scheme use objects address that have different forms. Our main interest is in the HTTP
protocol , which supports the web.

• It is used to request and send extensible Hypertext Markup Language(XHTML) documents.

• In the case of http , the form of the object address of a URL is as follows.

Fully-qualified-domain-name/path-to-document

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 6

 WEB TECHNOLOGIES
• URL can never have embedded space also; there is a collection of special characters that cannot
appear in a URL, including semicolons, colons and ampersands.

• To include a space or one of the disallowed special characters in a URL, the character must be
coded as a percent sign followed by the two digit hexadecimal ASCII code for the character.

• For example, if San José is a domain name, it must be typed as san%20jose (20 is the
hexadecimal ASCII code for a space).

• All of the details of URL can be found at http://www.w3.org/addressing/URL/URI_overview.html

URL PATH:

• The path to the document for the HTTP protocol is similar to path to a file or directory in the file
system of an operating system.

• A sequence of directory names and s filename, all separated by whatever separator character
the operating system uses.

• For UNIX server, the path is specified with forward slashes for windows servers, it is specified
with backward slashes.

• The path in a URL can differ from a path to a file because a URL need not include all directories
on the path.

• In most cases, the path to the document is relative to some base path that is specified in the
configuration files of the server; such paths are called partial paths.

http://www.xyz.com/storefront.html

• If specified document is a directory rather than a single document , the directory name is
followed immediately by a slash , as in the following

http://www.xyz.com/department/

• Sometimes a directory is specified (with the trailing slash) but its name is not given ,

http://www.xyz.com/

• The server then search at the top level of directory in which servable it recognize as a home
page.

MULTIPURPOSE INTERNET MAIL EXTENSION:

• A browser needs some way of determining the format of a document it receives from a web
server.

• Without knowing the form of a document, the browser would be unable to render it.

TYPES SPECIFICATION:

• MIME was developed to allow different kinds of documents to be sent using internet mail.

• These could be various kinds of text, video, data or sound data.

• MIME was adopted as the way to specify document types transmitted over the web.

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 7

 WEB TECHNOLOGIES
• A web server attaches a MIME format specification to beginning of the document that it is about
to provide to a browser.

• When the browser receives the document from a web server , it uses the included MIME format
specification

Type/subtype

• The most common MIME types are text, image and video. The most common text subtype is
Plain and HTML.

• The most common image subtypes are “gif” and “jpeg” and “QuickTime”.

• A list of MIME specification is stored in the configuration files of every web server.

• Server determines the type of a document by using the filenames extension as the key into a
table of types.

• For example, the extension “.html” tells the server that it should attach text/html to the
document before sending it to the requesting browser.

EXPERIMENTAL DOCUMENT TYPE:

• The name of an experimental subtype begins with “x-” as, in video/x – msvideo.

• Any web provider can add an experimental subtype by having its name added to the list of
MIME specification stored in the web provider’s server.

• Every browser has a set of MIME specification it can handle, all can deal with text/plain
(unformatted text) and text/html (html files) , among others.

HYPERTEXT TRANSFER PROTOCOL:

• All web communication transaction use the same protocol, the Hypertext Transfer Protocol
(HTTP).

• The current version of HTTP is 1.1. It is formally defined as RFC 2616 , which consortium (W3C)
,http://www.w3.org

• HTTP consists of two phases, the request and the response. Each HTTP communication (request
or response) between a browser and a web server consists of two parts, a header and a body.

• The header contains information about the communication, the body contains the data of the
communication, it there is any.

THE REQUEST PHASE:

• The general form of an HTTP request is as follows :

1. HTTP method domain part of the URL HTTP version.

2. Header fields

3. Blank line

4. Message body

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 8

 WEB TECHNOLOGIES
• The following is an example of the first line of an HTTP request.

GET/storefront.html HTTP/1.1

HTTP REQUEST:

• GET – Returns the content of the specified document.

• HEAD – Return the header information for the specified document.

• POST – Execute the specified document, using the enclosed data.

• PUT – Replace the specified document with the enclosed data.

• DELETE – Delete the specified document.

• The first line of an http communication is any number of header fields, most of which are
optional.

• The format of a header field is the field name following by colon and the value of the field.

1. GENERAL – For general information such as the date.

2. REQUEST – Included in request header.

3. RESPONSE – For response header

4. ENTITY – Used both request and response headers.

THE RESPONSE PHASE:

• The general form of an HTTP response is as follows :

1. Status line

2. Response header fields

3. Blank line

4. Response body

• The status line includes the http version used , a three digit status code for the response

• And a short textual explanation of the status code.

HTTP/1.1 200 OK

• The status code begin with 1,2,3,4 or 5 .

• The general meaning of the five categories specified by this first digit.

FIRST DIGIT CATEGORY

1 INFORMATIONAL
2 SUCCESS
3 REDIRECTION
4 CLIENT ERROR
5 SERVER ERROR

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 9

 WEB TECHNOLOGIES

• One of the more common status codes is one users never want to see :

• 404 not found, which means the requested file could not be found.

• Of course, 200 ok is what users want to see because it means the request was handled without
error.

• The 500 code means the server has encountered a problem and was not able to fulfill the
request.

• In HTTP version prior to 1.1, when a server finished sending a response to the client, the
communication connection was closed.

SECURITY:

• The browser and web server are indeed large and complex software system, so security is a
significant problem in web application.

• One of the aspects of web security is the matter of getting ones data from the browser to the
server and having the server deliver data back to the browser without anyone or any device
intercepting or corrupting that data along the way.

• Consider just the simplest case that of transmitting a credit card number to a company from
which a purchase is being made.

• The security issues for this transaction are as follows :

1. PRIVACY: It must not be possible for the credit card number to be stolen while on its way to the
company server.

2. INTEGRITY: It must not be possible for the credit card number to be modified on its way to the
company server.

3. AUTHENTICATION: It must be possible for both the purchaser and the seller to be certain of
each other identify.

4. NONREPUDATION: It must be possible legally prove that the message was actually sent and
received.

• The basic tool to support privacy and integrity is encryption. Data to be transmitted is converted
or encrypted into a different form.

• Which is virtually impossible to decrypt for someone (or some computer)? Both encryption and
decryption are done with a key and a process (applying the key to the data).

• First developed for the internet. XYZ person used a crude encryption process on the message he
sent to his field generals while at war.

• Until the middle 1970, the process used the same key for both encryption and decryption.
Because both the sender and receiver used the same key.

• This problem was solved in 1976 by Whitfield differ and Martin Hellman of Stanford University,
who developed public key encryption.

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 10

 WEB TECHNOLOGIES
• In public key encryption a public key to encrypt message and the private key to decrypt
messages.

PRINCIPLES OF WEB DESIGN:

 Web Design principles are one of the most important steps and practices that one must
ensure in order to obtain a professional web design. Principles of web design aim to simplify
the web design process into some set of systems and procedures which when followed, lead
to a professional web design.
 Now there is no fixed number of Web Design principles and every designer has their own
principles. After all, this is not math but design. However, upon researching and learning from
multiple design professionals, we have come up with a list of design principles that are more
or less consistent among various designers and give the best results.
 Web design principles that the most important and most commonly used ones.
Balance
 Balance simply means visual harmony. Good balance is like trying to create a Visual
Harmony on your website. For example, avoiding one side of the website from having all
the information when the other side has almost nothing. Balance can be measured in
three forms: symmetrically, asymmetrically and radially.
 Note:- Next four practices are together called C.R.A.P. (Contrast, Repetition, Alignment,
Proximity)
Alignment
 Alignment is the way in which elements are placed on the website. The most common
usage of alignment is with text alignment, making the text written left, center, right or
justify align.
 But alignment is more than just about text alignment, it is also used to add interest into
your design. designers use alignment to add creativity to their designs. Good alignment
ensures proper readability which in turn ensures good communication of your message.
Proximity
 Proximity of elements means how close the elements are to other elements. the primary
use of proximity Is for creating relationships between elements, like objects go together
and distantly related objects are further away from each other.
 Proximity is the design principle designers are often referring to when they speak about
white space in the design, so proximity like white space helps your elements breathe and
make sections distinct from one another. bad proximity can have negative effects on your
website.
Repetition
 Repetition is basically creating a pattern in user’s mind looking at the user interface.
Repetition is all about the consistency and the unity of the design in trying to create
cohesion between all the elements. Repetition is probably the most used in naturally
intuitive design principle. It is extremely unlikely that a website doesn’t even have the
modest amount of repetition.
 The most obvious example of repetition is typography, think about it, every paragraph is
designed the same font size, every H1 heading should look like every other H1 heading
and every H2 heading should look like every other H2 heading and so on, this ends up
creating a cohesion.
 Repetition also helps in creating brand, style, consistency, a better user experience and of
course repetition. Repetition should be consistent throughout a website’s typography,
sets of buttons, stylings, spacings and very importantly header and footer. here’s an

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 11

 WEB TECHNOLOGIES
Contrast
 Contrast is a design principle where we try and differentiate one or more elements/visuals
from others by differentiating them by help of colors, fonts, typography, repetition,
alignment, or anything else. The idea is to make a particular element or visual to stand out
to the users.
 In design terms – The visual design principle of contrast refers to the juxtaposition of two
visually different elements. Contrast is when you notice the difference between two
objects in the user interface and that difference emphasizes that they are different.
 This distinction might mean that they belong to different categories or have different
functions or behave differently etc. To know more about Contrast you can check out this
article – Why Color Contrast Matters in UI/UX Design ?
Accessibility
 Accessibility is designing products services (in our case, it’s designing UI/UX) and
environments in an all-inclusive manner. In simpler terms, it means designing for
everybody, keeping in mind the people who might have some special needs and taking
care of those needs in the product experience and interface.
 For example you can create a new feature of listening to news in your social media app
and improve its accessibility by also providing the transcript in some commonly used
languages so that the feature becomes accessible to people with hearing issues.
Design thinking
 Design thinking is basically a creative way to solve problems. It is the sum of all the
processes that results in designing of a prototype, The most important skills for design
thinking are – having empathy for the users and prototyping.
 Design thinking involves five main steps:
 Understand the challenge
 Defining the problem.
 Coming up with solutions
 Creating a prototype
 Test the prototype and iterate.

WEB SITE STRUCTURE:

Html used predefined tags and attributes to tell the browser how to display content, means in which
format, style, font size, and images to display. Html is a case insensitive language. Case
insensitive means there is no difference in upper case and lower case ( capital and small letters) both
treated as the same, for r example ‘D’ and ‘d’ both are the same here.
There are generally two types of tags in HTML:

1. Paired Tags: These tags come in pairs. That is they have both opening(< >) and closing(</ >) tags.
2. Empty Tags: These tags do not require to be closed.

Tags and attributes: Tags are individuals of html structure, we have to open and close any tag with a
forward slash like this <h1> </h1>. There are some variations with the tag some of them are self-
closing tag which isn’t required to close and some are empty tag where we can add any attributes in
it. Attributes are additional properties of html tags that define the property of any html tags. i.e.
width, height, controls, loops, input, and autoplay. These attributes also help us to store information
in meta tags by using name, content, and type attributes. Html documents structured mentioned
below:

Structure of an HTML Document

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 12
 WEB TECHNOLOGIES
An HTML Document is mainly divided into two parts:

 HEAD: This contains the information about the HTML document. For Example, the Title of the
page, version of HTML, Meta Data, etc.
 BODY: This contains everything you want to display on the Web Page.

<!DOCTYPE html>

<!-- Defines types of documents : Html 5.O -->

<!DOCTYPE html>

<!-- Defines types of documents : Html 5.O -->

<html lang="en">

<!-- DEfines languages of content : English -->

<head>

<!-- Information about website and creator -->

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Defines the compatibility of version with browser -->

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- for make website responsive -->

<meta name="author" content="Mr.X">

<meta name="Linkedin profile" content="WWW.linkedin.com/Mr.X_123" >

<!-- To give information about author or owner -->

<meta name="description "

content="A better place to learn computer science">

<!-- to explain about website in few words -->

<title>GeeksforGeeks</title>

<!-- Name of website or content to display -->

</head>

<body>

<!-- Main content of website -->

<h1>GeeksforGeeks</h1>

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 13

 WEB TECHNOLOGIES
<p>A computer science portal for geeks</p>

</body>

</html>

<!DOCTYPE html>: This tag is used to tells the HTML version. This currently tells that the version
is HTML 5.0
<html> </html> : <html> is a root element of html. It’s a biggest and main element in
complete html language, all the tags , elements and attributes enclosed in it or we can say
wrap init , which is used to structure a web page. <html> tag is parent tag of <head>
and <body> tag , other tags enclosed within <head > and <body>.

In <html > tag we use “lang” attributes to define languages of html page such as <html
lang=”en”> here en represents English language. some of them are : es = Spanish , zh-Hans =
Chinese, fr= french and el= Greek etc.
<head>: Head tag contains metadata, title, page CSS etc. Data stored in the <head> tag is not
displayed to the user, it is just written for reference purposes and as a watermark of the
owner.

Note: for better understanding refer above code of html.

<title> = to store website name or content to be displayed.
<link> = To add/ link css( cascading style sheet) file.
<meta> = 1. to store data about website, organisation ,
creator/ owner
2. for responsive website via attributes
3. to tell compatibility of html with browser
<script> = to add javascript file.

<body>: A body tag is used to enclose all the data which a web page has from texts to links. All the
content that you see rendered in the browser is contained within this element. Following tags and
elements used in the body.
1 . <h1> ,<h2> ,<h3> to <h6>
2. <p>
3. <div> and <span>
4. <b>, <i> and<u>
5. <li>,<ul>and<ol>.
6. <img> , <audio> , <video> and<iframe>
7. <table> <th> , <thead>and<tr>.
8. <form>
9. <label> and <input> others………

CLIENT-SERVER TECHNOLOGIES:
The Client-server model is a distributed application structure that partitions task or workload between
the providers of a resource or service, called servers, and service requesters called clients. In the
client-server architecture, when the client computer sends a request for data to the server through
the internet, the server accepts the requested process and deliver the data packets requested back to
the client. Clients do not share any of their resources. Examples of Client-Server Model are Email,
World Wide Web, etc.

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 14

 WEB TECHNOLOGIES
How the Client-Server Model works ?
In this article we are going to take a dive into the Client-Server model and have a look at how
the Internet works via, web browsers. This article will help us in having a solid foundation of the WEB
and help in working with WEB technologies with ease.

 Client: When we talk the word Client, it mean to talk of a person or an organization using a
particular service. Similarly in the digital world a Client is a computer (Host) i.e. capable of
receiving information or using a particular service from the service providers (Servers).
 Servers: Similarly, when we talk the word Servers, It mean a person or medium that serves
something. Similarly in this digital world a Server is a remote computer which provides
information (data) or access to particular services.
So, its basically the Client requesting something and the Server serving it as long as its present in the
database.

CLIENT SIDE TOOLS AND TECHNOLOGIES:

OVERVIEW OF XHTML:

• XHTML is not programming language. It cannot be used to describe computations; its purpose is
to describe the general form and layout of documents to be displayed by a browser.

• The XHTML is not the first markup language used with computers. Tex and LaTex are older
markup languages for use with digital text.

• They are now used primarily to specify how mathematical expression and formula should
appear in print.

• An XHTML document is a mixture of content and controls. The controls are specified by the tags
of XHTML.

• The name of tag specifies the category of its content. Most XHTML tags consist of a pair of
syntactic markers that are used to delimit particular kinds of content.

• The pair of tags and their content together is called an element.

• For example, a paragraph element specifies that its content, which appears between its opening
tag <p> and its closing tag </p>, is a paragraph.

• Some tag includes attribute specification that provide some additional information for the
browser.

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 15

 WEB TECHNOLOGIES
• In the following example , the attribute specifies the location of its image content

<img src=“ab.jpg”/>

OVERVIEW OF XML:

• HTML is defined using the standard generalized markup language (SGML), which is a language
for defining markup languages (such language is called Meta markup languages).

• XML (eXtensible Markup Language) is a simplified version of SGML, designed to allow users to
easily create markup languages.

• XHTML is defined using XML, whereas XHTML users must use the predefined set of tags and
attributes, when a user creates his or her own markup language using XML.

• The set of tags and attributes are designed for the application at hand.

• The greater advantage of XML is that application programs can be written to use the meanings
of the tags in the given markup language to find specific kinds of data and process its
accordingly.

• The syntax rules of XML along with the syntax rules for specific XML based markup language,
allow documents to be validated before any application attempts to process their data.

OVERVIEW OF JAVASCRIPT:

• JavaScript is a client side scripting language whose primary uses in web programming are to
validate form data and to create dynamic XHTML documents.

• JavaScript “programs” are usually embedded in XHTML documents. These XHTML documents
are downloaded.

• When they are requested by browsers, the JavaScript code in an XHTML document is
interpreted by the browser on the client.

OVERVIEW OF JAVA:

• Java was designed by Sun Microsystems which controls its continuing development. Java
designers realized that java.

• It would be a powerful way to provide a computational capability for XHTML documents rather
than running programs on the web server to provide a computational capability.

• A special kinds of java program called an “Applet” can be resident on the server , but a compiled
version of the applet can be downloaded to the browser

• When requested by the XHTML document being displayed by the browser.

• Compiled java is represented in an idealized machine language called “byte codes”. When the
browser receives a byte code applet, it “executes” it using a Java Virtual Machine (JVM), which is
an interpreter for byte codes.

• The primary differences are that JavaScript code is physically part of an XHTML document,
whereas applets are stored separately from the XHTL. Moreover JavaScript is less powerful than
java.

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 16

 WEB TECHNOLOGIES
• There are many computational tasks in a web interaction that must occur on the server, such as
processing order forms and accessing server resident data bases.

• A form of java class called a served can be used for these applications.

• Java can also be used a server side scripting language.

OVERVIEW OF PHP:

• PHP is a server side scripting language specifically designed for web applications .PHP code is
embedded in XHTML documents as is the case with JavaScript.

• With PHP, however, the code is interpreted on the server before the XHTML document is
delivered to the requesting client.

• A requested document that includes PHP code and insert its output into the XHTML document.

• PHP is similar to JavaScript, both in terms of its syntactic appearance and in terms of the
dynamic nature of its string and array.

• Both JavaScript and PHP use dynamic data typing meaning that the type of a variable is
controlled by the most recent assignment to it.

• PHP arrays are a combination of PERL’s arrays and PERL’s hashes (associative arrays).

• The language includes a large number of predefined functions for manipulating arrays. PHP
provide supports for many different database management systems.

OVERVIEW OF AJAX:

• AJAX shorthand for Asynchronous Java Script + XML. The idea of AJAX is relatively simple, but
results in a different way of viewing and building web interactions.

• This new approach results in an enriched web experience for those using a certain category of
web interaction.

• In a traditional(as opposed to AJAX) web interaction , the client sends messages to the server ,
either through clicking a link in the document being displayed on the browser or by submitting
forms to the server.

• After the link has been clicked or the form has been submitted, the client waits until the server
responds with a new document.

• The entire browser display is then replaced by the new document. In complicated documents
take a significant amount of time to be transmitted from the server to the client and more time
to be rendered by the browser.

• In an AJAX web application, there are two variations form the traditional web interaction.

• First, the communication from the browser to the server is asynchronous that is, the browser
need not wait for the server to respond.

• The browser user can continue whatever he or she was doing while the server finds and
transmits the requested document and the browser renders the new document.

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 17

 WEB TECHNOLOGIES
• Second, the document [provided by the server usually is only a relatively small part of the
displayed document and therefore it takes less time to be transmitted and rendered.

• These two changes can result in much faster interactions between the browser and the server.

• The goal of AJAX is to have web based application becomes closer to desktop (client resident)
applications, in terms of the speed of interactions and there by the users experience.

SERVER SIDE SCRIPTING:

Web servers are used to execute server-side scripting. They are basically used to create dynamic
pages. It can also access the file system residing at the webserver. A server-side environment that
runs on a scripting language is a web server.
Scripts can be written in any of a number of server-side scripting languages available. It is used to
retrieve and generate content for dynamic pages. It is used to require to download plugins. In this
load times are generally faster than client-side scripting. When you need to store and retrieve
information a database will be used to contain data. It can use huge resources of the server. It
reduces client-side computation overhead. The server sends pages to the request of the user/client.
OVERVIEW OF RAILS:

• Rails is a development framework for web based applications that access databases. ASP.NET is
also a development framework for web based applications.

• Rail because of its intimate connection with Ruby , is often called Ruby on Rails or simply RoR

• Rails was developed by David Heinemeier Hansson in the early 2000 and was released to the
public in July 2004.

• Since then, it has rapidly gained widespread interest and usages. Rails is based on the Model
View Controller (MVC) architecture for applications, which clearly separates the presentation
and the data model from program logic.

• Rails applications are tightly bound to relational database. Many web applications are closely
integrated with database access, so this is a widely applicable architecture.

• Rails can and often is used in conjunction with AJAX. Rails use the JavaScript framework
prototype to support AJAX and interactions with the JavaScript model of the document being
displayed by the browser.

OVERVIEW OF PERL:

• Before applets and embedded scripts were developed, a computational capability was provided
for XHTML documents by allowing the document to request the execution of virtually any
program on the server.

• This is done using the Common Gateway Interface (CGI). Briefly, CGI is a standard way in which a
browser and a server communicate to run a program on the server and return the output of that
program to the browser.

• CGI programs can be written in any programming language that is supported by the server
machine. The most common used language for CGI program is PERL.

• The features of PERL that make it ideal for CGI programming are its direct access to operating
system functions.

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 18

 WEB TECHNOLOGIES
• It is a powerful character string pattern matching operations PERL is very expressive and
powerful language.

• PERL syntax is similar to that of C. However, PERL code is not compiled into machine language
and executed, as in C. Instead, it is compiled to an intermediate language and interpreted

Client-side scripting Server-side scripting

Source code is not visible to the user because its

output
Source code is visible to the user.
of server-sideside is an HTML page.

Its main function is to provide the Its primary function is to manipulate and provide
requested output to the end user. access to the respective database as per the request.

In this any server-side technology can be used and it

It usually depends on the browser and its does not
version. depend on the client.

It runs on the user’s computer. It runs on the webserver.

There are many advantages linked with

The primary advantage is its ability to highly customize,
this like faster.
response
response times, a more interactive
requirements, access rights based on user.
application.

It does not provide security for data. It provides more security for data.

It is a technique used in web development It is a technique that uses scripts on the webserver to
in which scripts run on the client’s produce a response that is customized for each client’s
browser. request.

HTML, CSS, and javascript are used. PHP, Python, Java, Ruby are used.

No need of interaction with the server. It is all about interacting with the servers.

It reduces load on processing unit of the

It surge the processing load on the server.
server.

INTRODUCTION TO HTML:
HTML5 BASICS TAGS:

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 19

 WEB TECHNOLOGIES
BASIC TEXT MARKUP :

PARAGRAPH :
• Text is a normally organized into paragraph in the body of a document . In fact , the XHTML
standard does not allow text to be placed directly in a document body.
• Textual paragraph appears as the content of a paragraph element specified with the tag <p> .In
displaying the content of a paragraph.
• The browser puts as many words as will fits on the lines in the browser window . The browser
supplies a line break at the end of each line .

EXAMPLE:
<p> wel come
to
asp college
</p>
EXAMPLE :
<html>
<head>
<title> OUR FIRST DOCUMENT </title>
</head>
<body>
<p>
WEL COME TO S B S COLLEGE OF COMMERCE BCA DEPT
</p>
</body>
</html>
OUT PUT
OUR FIRST DCOUMENT
WEL COME TO S B S COLLEGE OF COMMERCE BCA DEPT

LINE BREAK :
• When the content of a paragraph element would be displayed at a position other than at the
beginning of a line , the browser breaks the current line and inserts a blank line.
• The break tag differs from the paragraph tag in that it can have no content and therefore has no
closing tag .
• The break tag is specified as <br /> . The slash indicate that the tag is both an opening and
closing tag.
• The space before the slash represent the absent content.
EXAMPLE :
<P> WEL COME TO <br /> A S PATIL COLLEGE OF COMMERCE </p>
OUT PUT :
WEL COME TO
A S PATIL COLLEGE OF COMMERCE

PRESERVING WHITESPACE :

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 20

 WEB TECHNOLOGIES
• The whitespace in text , that is , to prevent the browser from eliminating multiple space and
ignoring embedded line breaks .
• This can be specified with the <pre> tag
EXAMPLE :
<p> <pre>
Mary
had a
little
lamb
</pre>
</p>
OUT PUT :
Mary
had a
little
lamb

HEADINGS :
• Text is often separated into section in documents by beginning each section with a heading .
• In XHTML , there are six levels of headings specified by the <h1> , <h2> , <h3> , <h4> , <h5> and
<h6>
• The <h1> specifies the highest level heading . Headings are displayed in a boldface font , whose
default size depends on the number in heading tag.
• On most browser <h1> , <h2> and <h3> use font sizes that are larger than that of the default
size of text <h4> uses the default size and <h5> and <h6> use smaller sizes.
EXAMPLE :
<html>
<body>
<h1> Admin </h1>
<h2> User </h2>
<h3> The Best </h3>
</body>
</html>

BLOCK QUOTATION :
• Block of the text to be set off from the normal flow of text in a document . In many cases , such
a block is a long quotation.
• The <blockquote> tag is designed for this situation . Browser designer determine how the
content of this tag , it can be made to look different from the surrounding text.
• The block of text is indented , either on the left or right side or both . Another possibilities is that
the block is set in italic.
EXAMPLE :
<html>
<body>
<p> sakjvc,vn,sdfkjf

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 21

 WEB TECHNOLOGIES
Sdlfkjdslkjflsjd</p>
<p><blockquote>
Sfsdifuoisusdfsfd
Sdfdsfsdfsdfsdf
</blockquote></p>
</body></html>

FONT STYLES AND SIZES :

• Web designer used a collection of tags to set font style and size . For example <i> tag specifies
italics and <b> tag specifies bold.
• There are a few tags for fonts that are still in widespread use called content based style tags .
There are three of the most commonly used content based tags.
• The emphasis tag <em> specifies that its textual content is special and should be displayed in
some way that indicates this most of browser use italic.
• The strong tag <strong> is like the emphasis tag , bit more browser often set the content of
strong elements in bold.
• The <code> tag is used to specifies a monospace font , usually used for program code
EXAMPLE ; cost = quantity * price
• The subscript and superscript characters can be specified by the <sub> and <sup> tag . There are
not content based tag.
EX : x₁³ + y₁²

CHARACTER ENTITIES :
• XHTML provide a collection of special characters that are sometimes needed in a document but
cannot be typed as themselves.
• In some cases , these characters are used in XHTML in some special way , for example > , < and
&.
• In other ways , the character do not appear on a keyboard such as the small raised circle that
represents “degree” in a references to temperature.
• List some of the most commonly used entities.

CHARACTER ENTITY MEANINGS

& &amp AMPERSAND
< &lt LESS THAN
> &gt GREATER THAN
“ &quot DOUBLE QUOTE
‘ &apos SINGLE QUOTE
¼ &frac14 ONE QUARTER
½ &frac12 ONE HALF
¾ &frac34 THREE QUARTER
O &deg DEGREE
(SPACE) &nbsp NONBREAKING SPACE

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 22

 WEB TECHNOLOGIES
HORIZONTAL RULES :

• The part of a document can be seprated from each other , making the document easier to read
by placing horizontal lines between them.
• Such lines are called horizontal rules. And the block tag that created them is <hr/>.
• The tag <hr/>causes a line break (ending the current line)
• NOTE : Again the slash in the <hr/> tag , it indicating that this tag has no content and no closing
tag.

THE META ELEMENT :

• The meta element is used to provide additional information about a document. It has no
content, rather , all of the provided information is specified through attribute.
• The two attribute that are used to provide information are name and content. The user make up
a name as the value of the name attribute and specifies information through the content
attribute.
• One commonly chosen name is “keyword”
<meta name=“keyword” element =“binary tree , linked list />
<meta name = “title” content =“Miguel” />
<meta name=“keyword” content=“Novel , Kannada Literature />

IMAGES :
• The image is stored in a file , which is specified by an XHTML request . The image is inserted into
the display of the document by the browser.

IMAGE FORMATS :
• The two most common methods of representing images are Graphic Interchange Format (gif)
and Joint Photographic Experts Group (jpeg) format.
• Files in both of these formats are compressed to reduce storage needs and provide faster
transfer over the internet.
• The gif format to provide for the specific purpose of moving images. It uses 8 bit color
representations for pixels, allowing a pixel to have 256 different colors.
• The jpeg format uses 24 bit color representation for pixels, which allows jpeg images to include
more than 16 million different colors. file that stores jpeg images use the “ .jpg” extension on
their names.
• Jpeg is better at shrinking an image than the one used by gif . This compression process actually
loses some of the color accuracy of the image.
• The jpeg is can be smaller than the gif image. Because of this jpeg images are often preferred to
gif images. The disadvantage of jpeg is that, it does not support transparency.
• The third image format is now gaining popularity Portable Network Graphics (png) . This was
designed 1961.
• Actually, png provide a good replacement for both gif and jpeg because it has the best
characteristics of both .

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 23

 WEB TECHNOLOGIES
• One drawback of png is that because its compression algorithm does not scarifies picture clarity
, its images require more space than comparable jpeg images

IMAGES :
• The image is stored in a file , which is specified by an XHTML request . The image is inserted into
the display of the document by the browser.

IMAGE FORMATS :
• The two most common methods of representing images are Graphic Interchange Format (gif)
and Joint Photographic Experts Group (jpeg) format.
• Files in both of these formats are compressed to reduce storage needs and provide faster
transfer over the internet.
• The gif format to provide for the specific purpose of moving images . It uses 8 bit color
representations for pixels , allowing a pixel to have 256 different colors.
• The jpeg format uses 24 bit color representation for pixels , which allows jpeg images to include
more than 16 million different colors. file that stores jpeg images use the “ .jpg” extension on
their names.
• Jpeg is better at shrinking an image than the one used by gif . This compression process actually
loses some of the color accuracy of the image.
• The jpeg is can be smaller than the gif image . Because of this jpeg images are often preferred to
gif images . The disadvantage of jpeg is that , it does not support transparency.
• The third image format is now gaining popularity Portable Network Graphics (png) . This was
designed 1961.
• Actually , png provide a good replacement for both gif and jpeg because it has the best
characteristics of both .
• One drawback of png is that because its compression algorithm does not scarifies picture clarity
, its images require more space than comparable jpeg images

THE <img /> TAG :

• The image tag <img /> , which is an inline tag , specifies an image that is appear in a document .
• The image tag includes two attribute “src” , which specifies filee the file containing the image
and “alt” , which specifies text to be displayed when it is not possible to display the image.
• If the file is in the same directory as the XHTML file of the document , the value of “src” is just
the image filename .
• In many cases , image files are stored in a subdirectory of the directory where the XHTML files
are stored.
EX : <img src=“ab.jpg” alt=“picture1” />
<html>
<body>
<p>Wel Come to S B S College <br/>
<br/>
<img src=“a1.jpg” alt=“pic01” />
<br/>
</p>
</body></html>

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 24

 WEB TECHNOLOGIES

HYPERTEXT LINKS :
• A hypertext link in an XHTML document , which simply call a link here , acts as a pointer to some
resource.
• That resource can be XHTML document anywhere on the web.

LINKS :
• A link that pointers to a different document specifies the address of that document such an
address might be a filename a directory path and filename or a complete URL.
• Links are specified in an attribute of an anchor tag <a> , which is an inline tag.
• The anchor tag that specifies a link is called the source of that link. The document whose
address is specified in a link is called target of that link.
• The creating links only one is required to “href “ specifies the target of the link . If the target is in
another document in the same directory , the target is just the documents filename .
• If the target document is in some other directory the UNIX pathname.
• Abc/xyz.html use slash symbol only directory file access in that time abc.html
EX : <p> 1999 picture 210 px <br />
<a href=“abc.html” > Information </a>
</p>

TARGET WITHIN DOCUMENTS :

• If the target of a link is not at the beginning of a document , it must be some element within a
document.
• The target element can include an “ id ” attribute , which can then be used to identify it in an
href attribute.
<h2 id=“avionics”>Avionics</h2>
• Nearly all elements can be include an id attribute . The value of an id attribute must be unique
within the document .
• If the target is in the same document as the link , the target is specified in the href attribute
value by preceding the id value with a pound sign “ # “
<a href =“#avionics”> what about avionics</a>
• When the target is a part or fragment of another document , the name of the part is specified at
the end of the URL separated by a pound sign #
<a href=“aid.html # avionics”>Avionics</a>

LISTS :

UNORDERED LIST :
• The <ul> tag , which is a block tag , creates an unordered list. Each item in a list is specified with
an <li> tag (li is an acronym for list item).
• Any tags can appear in a list item including nested list.
EXAMPLE :
<body>
<h3>Common Heading</h3>

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 25

 WEB TECHNOLOGIES
<ul>
<li>BCA</li>
<li>BBA</li>
</ul>
</body>
Common Heading
. BCA
. BBA
ORDERED LIST :
• An ordered list is created within the block tag <ol>. The items are specified and displayed just
like those for unordered lists.
• Except that the items in an ordered list are preceded by sequential values instead of bullets.
EXMAPLE :
<body>
<h3>Common Heading</h3>
<ol>
<li>BCA</li>
<li>BBA</li>
</ol>
</body>
OUT PUT
Common Heading
1. BCA
2. BBA

DEFINITION LIST :
• A definition list is given as the content of a <d1> tag , which is a block tag . Each term to be
defined in the definition list is given as the content of a <dt> tag.
• The definition themselves are specified as the content of <dd> tag . This tag usually displayed on
the left margin.
EXAMPLE :
<body>
<h3>Single Engine Airplanes<h3>
<dl>
<dt>152</t>
<dd>Two Placee Trainer </dd>
<dt>172</dt>
<dd>Smaller four place trainer</dd>
</dl><body>
OUT PUT :
Single Engine Airplane
152
Two Place Trainer

TABLES :

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 26

 WEB TECHNOLOGIES

BASIC TABLE TAGS :

• A table is specified as the content of the block tag <table> . The most common attribute for the
<table> tag is border . There are two kinds of lines in tables
• The line around the outside of the whole table is called the border , and the lines that separate
the cells from each other are called rules.
• The browser has default widths for table border and rules , which is used if the border attribute
is assigned the value border . Otherwise , a number can be given as a border value , which
specifies the border with in pixels.
• For example , border =“3” specifies a border 3 pixels wide . A browser value of “0” specifies no
border and no rules.
• In most cases , a displayed table is preceded by a title , which is given as the content of a
<caption> tag , which can immediately follow the opening <table> tag.
• The cell of a table are specified one row at a time . Each row of a table is specified with row
table <tr> .
• Within each row , the row label is specified by the table heading tag <th>
EXAMPLE :
<html>

<head>
<title> Table with text and image </title>
</head>
<body>
<table border = "border">
<caption>Web Programming Details</caption>
<tr>
<th> CSS</th>
<th> Image </th>
</tr>
<tr>
<td> CSS1 </td>
<td> <img src = "a.jpg" alt = "cant display"/></td>
</tr>
<tr>
<td> CSS 2</td>
<td> <img src =
"b.jpg" alt = "cant
display"/></td> </tr>
</table>
</body>
</html>

THE ROWSPAN AND COLSPAN ATTRIBUTE :

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 27

 WEB TECHNOLOGIES
• Tables have multiple level of rows or columns labels in which one label corners two or more
secondary labels . In such cases , multiple level labels can be spcified with the rowspan and
colspan attribute.
• The colspan attribute specification in a table header or table tag tells the browser to make call
as wide as the specified number of rows below it in table .
• The rowspan attribute of the table heading and table data tag does for rows and colspan does
for columns.
<html>
<head><title>row-span and column-span</title>
</head>
<body>
<p> Illustration of Row span</p><table
border="border">
<tr>
<th rowspan="2"> RNSIT </th>
<th>ISE</th></tr>
<tr><th>CSE</th>
</tr></table>
<p> Illustration of Column span</p><table
border="border">
<tr><th colspan="2"> RNSIT </th>
</tr><tr><th>ISE</th><th>CSE</th>
</tr></table>
</body>
</html>

THE ALIGN AND VALIGN ATTRIBUTES :

• The placement of the content within a table cell can be specified with the align and valign
attributes in the <tr> , <th> and <td> tags.
• The align attribute has the possible values left , right and center , with the meanings for
horizontal placement of the content within cell.
• The default alignment for the “ th “ cells is center , for “ td “ cells it is left . If align is specified in
a <tr> tag , it only applies to that cell.
• The valign attribute of the <th> and <td> tags has the possible values top and bottom . The
default vertical alignment for the both headings and data is center . Because valign applies only
to a single cell.
EXAMPLE :
<html>
<head>
<title> Align and valign </title>
</head>
<body>
<p>Table having entries with different alignments</p>
<table border="border">

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 28

 WEB TECHNOLOGIES
<tr align = "center">
<th> </th>
<th> Puneeth </th>
<th> Ram</th>
<th> Sudeep </th>
</tr>
<tr>

<th> Rani </th>

<td align = "left"> abc </td>
<td align = "center"> pqr </td>
<td align = "right"> xyz</td>
</tr>
<tr>
<th> <br/>Rani <br/><br/><br/></th>
<td>SSS</td>
<td valign = "top"> WWW</td>
<td valign = "bottom"> ERRR </td>
</tr>
</table>
</body>

</html>

THE CELLPADDING AND CELLINGSPACING ATTRIBUTE :

• The table tag has two attribute that can be used to specify the spacing between the content of a
table cell and the cell edge and the spacing between adjacent cell.
• The cellpadding attribute is used to specify the spacig between the content of a cell and the
inner walls of the cell.
• The cellspacing attribute is used to specify the distance between cells in a table.

EXAMPLE :
<html>
<head>
<title> cell spacing and cell padding </title>
</head>
<body>
<h3>Table with space = 10, pad = 50</h3>
<table border = "7" cellspacing = "10"
cellpadding = "50"> <tr>
<td> Divya </td>
<td>Chethan </td>
</tr>
</table>
<h3>Table with space = 50, pad = 10</h3>

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 29

 WEB TECHNOLOGIES
<table border = "7" cellspacing =
"50" cellpadding = "10"> <tr>
<td> Divya </td>
<td>Chethan </td>
</tr>
</table>
</body>
</html>

TABLE SECTIONS :
• Tables occur in two and sometimes three parts : header , body and footer (not all tables have a
natural footers ).
• These three parts can be denoted in XHTML with the thead , tbody and tfoot elements.
• The header includes the column labels , the body includes the data of the table , including the
row label.
• The footer , when it appears sometimes has the column labels repeated after the body.

FORMS :
• The most common way for a user to communicate information from a web browser to the
server is through a form .
• XHTML provides tags to generate the commonly used objects on a screen form . These objects
are called “ controls ” or “ widget ” .
• These are controls for single line and multiple line text collection , checkboxes , radiobuttons
and menu , among others.

THE <form> TAG :

• All of the components of a form appears in the content of a <form> tag . This tag which is a
block tag , can have several differnet attributes , only one of which , “action” is required .
• The action attribute specifies the URL of the application on the web server that is called when
user clicks the “submit” button.
• So the value of their action attribute will be the empty string (“ “ ) . The “ method “ attribute of
<form> specifies one of the two techniques , “get” or “post” used to pass the form data to the
server.
• The “get “ is the default , so if no method attribute is given in the <form> tag , “get” will be used.
• The alternative techniques , the form data is “post” . In both techniques , the form data is coded
into a text string when the user click the submit button.

THE <input> TAG :

• Many of the commonly used controls are specified with the inline tag <input> , which is used for
text , passwords , checkbox , radio button , action buttons , Reset , submit and palin.
• The one attribute of this tag , that is required for all of the controls. All of the previously listed
controls excepted Reset and Submit also require a name attribute.
• Which becomes the name of the value of the control within the form data? The controls for
checkbox and radio button require value attributes , which initializes the value of the control.

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 30

 WEB TECHNOLOGIES
TEXT BOX :
• A text control , which use usually refer to as a text box . Creates a horizontal box into which the
user can type a line of text.
• Textbox are often used to gather information from the user , such as the users name or address
. The default size of text box is often 20 characters.
• And also consider a similar textbox that includes a maxlength attribute.
• If the contents of a textbox should not be displayed , when it is entered by the user , a password
controls can be used
<title>Text Box</title>
</head>
<body>
<form action = " ">
<p>
<label>Enter your Name:
<input type = "text" name = "myname" size = "20"
maxlength = "20" /> </label>
</p>
</form>
</body>
</html>

CHECK BOX :
• Checkbox and radio button are used to collect multiple choice input form the user . A checkbox
controls is a single button that is either on or off .
• If a checkbox button is on , the value associated with the name of the button is the strings
assigned to its value attribute.
• A checkbox button does not contribute to form data if it is off . Every checkbox button requires a
name attribute and a value attribute in its <input> tag.
<html>
<head>
<title>CheckBox</title>
</head>
<body>
<h3>Your Favorite Books?</h3>
<form action = " ">
<p>
<label><input type="checkbox" name="act" value="one"/>C++</label>
<label><input type="checkbox" name="act" value="two"/>DBMS</label>
<label><input type="checkbox" name="act" value="three"/>JAVA</label>
<label><input type="checkbox" name="act" value="four"/>C</label>
<label><input type="checkbox" name="act" value="four"/>DMS</label>
</p>
</form>
</body> </html>

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 31

 WEB TECHNOLOGIES
RADIO BUTTON :
• This button are closely related to checkbox buttons. The difference between a group of radio
buttons and a group of check box is that only one radio button can be on or pressed at any time.
• Every time radio button is pressed , the button is the group that was previously on is button off.
• The type value for radio buttons is radio. All radio button in a group must have the name
attribute set in the <input> tag , and all radio buttons in a group have the same name .

<html>
<head>
<title>RadioButton</title> </head>
<body>
<h3>Your Favourite Book?</h3> <form action = " ">
<p>
<label><input type="radio" name="act" value="one"/>DBMS</label>
<label><input type="radio" name="act" value="two"/>C++</label>
<label><input type="radio" name="act" value="three"/>JAVA</label>
<label><input type="radio" name="act" value="four"/>DMS</label>
</p>
</form>
</body>
</html>

THE <select> TAG :

• If the number of possible choice large the displayed form becomes too long to display . In these
cases , a menu should be used . A menu is specified with a <select> tag (rather than the <input>
tag).
• There are two kinds of menus, those in which only one menu item can be selected at a time
(which are related to radio button) and those in which multiple menu items can be selected at a
time.
• Which takes the value “multiple “ , to the <select> tag . When only one menu is the value if the
name attribute of the <select> tag and chose menu item.
• The size attribute can be included in this tag . Size specifies the number of menu items that are
to be displayed for the user. If no size attribute is specified the value 1 is used.
• If the value for size attribute is 1 and multiple is not specified, just one menu item is displayed
with a downward scroll arrow.
• If either multiple is specified or the size attribute is set to a number grater than 1 , the menu is
usually displayed as a scroll list.
• Each of item in a menu is specified with an <option> tag , nested in the select element . The
content of an <option> tag is the value of the menu item.
<html>
<head> <title> Menu </title>
</head>
<body>
<p>

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 32

 WEB TECHNOLOGIES
BLDEA ENG COLLEGE Branches - Information Science, Computer
Science, Electronics, Electrical, Mechanical </p>

<form action = "">

<p>
With size = 1 (the default)
<select name = "branches">
<option> Information Science </option>
<option> Computer Science </option>
<option> Electronics </option>
<option> Electrical </option>
<option> Mechanical </option>
</select>
</p>
</form>
</body>
</html>

TEXT AREA TAG (<textarea>) :

• This tag is used to create such a control . The text type into the area created by this tag , it is not
limited in length and there is implicit scrolling when needed , both vertically and horizontally.
• The rows and cols attribute should usually be included and set to reasonable sizes . If some
default text is to be included in the text area .
<html>
<head>

<title> text area </title>

</head>
<body>
<form action=" ">
<h3> Enter your comments</h3>
<p>
<textarea name="feedback" rows="5" cols="100">
</textarea>
</p>
</form>
</body>

</html>

THE ACTION BUTTON :

• The reset button clears all of the controls in the form to their initial states . The submit button
has two actions .
• First one , the form data is encoded and sent to the server.

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 33

 WEB TECHNOLOGIES
• Second , the server is requested to execute the server resident program specified in the action
attribute of the <form> tag.
• Every form requires a submit button , the submit and reset buttons are created with the <input>
tag.
<html>
<head>
<title> action buttons </title>
</head>
<body>
<form action=" ">
<p>
<input type="SUBMIT" value="SUBMIT"/>
<input type="RESET" value="RESET"/>
</p>
</form>
</body>
</html>
FRAMES :
• The browser display window an be used to display more than one document at a time .
• The window can be divided into rectangular areas , each of which is frame. Each frame is
capable of displaying situation , among the most common of these is having a table of contents
displayed in one frame.
• The table of contents can include links that , when followed , lead to the targeted parts of the
main document being displayed in the other frame.

FRAMESETS :
• The number of frames and their layout in the browser window are specified with the <frameset>
tag . This tag , a element takes place of the body element in a document.
• This tag must have either a rows or a cols attributes and often they have both.
• The rows attribute specifies the number of rows of frames that will occupy the window.
• There are 3 kinds of values for rows number , percentage and asterisk. Normally two or more
values , separated by commas are given in a quoted string .
• When number is used as value , it specifies the height of one row in pixels.
<frameset rows=“200,300,400”>
• This frameset will have three rows of frames , because no cols attribute was included the frame
extend over the entire width of the browser window .
• In different capability , it is more practical to specify rows with percentage.
<frameset rows=“22% 33% 45%” >
• The cols attribute is very much like the rows attribute , except that it specifies the number of
columns of frame.
• For example , the following tag specifies that the window is to have six frame in three equal
height rows and two columns.

<frameset rows=“33% 33% 33%” cols = “ 25% , * “ >

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 34

 WEB TECHNOLOGIES
FRAMES :
• The content of a frame is specified with the <frame> tag , which can appear only in the content
of a frameset element.
• Each frame defined in a frameset has an associated <frame> tag that gives the filename of a
document that supplies its content .
• The sequence of <frame> tags in a frameset is important because the order dictates which
frame get which content . The frames in the frameset appear by rows.
• The content of a frame is specified as the value of the “src” attribute in the <frame> tag.
<frame src=“apple.html” >
• If <frame> tag has no “src” attribute the browser display an empty frame . If the frameset
specifies more frame than , this tag , the unspecified frames are displayed as empty frames.
• If a <frame> tag includes a “name” attribute , the content of its associated frame can be
changed by the selection of a link in some other frame that specifies that name .

EXAMPLE : Reference book

• This document has two frame . The left frame displays content.html , the right frame display
fruit.html . Because the second frame has a name , it can be the target of a link from another
frame in this case content.html show below.
The content.html document is a list of links to the fruit description documents.
• Each link must give both an “href” attribute for the document file name and target attribute to
specify the name of the frame in which document is to be displayed.

EXAMPLE : Reference book

HTML FORMATTING ELEMENTS:

Formatting elements were designed to display special types of text:

 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

Example

<b>This text is bold</b>

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 35

 WEB TECHNOLOGIES
The HTML <strong> element defines text with strong importance. The content inside is typically
displayed in bold.

Example

<strong>This text is important!</strong>

HTML <i> and <em> Elements

The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is
typically displayed in italic.

Tip: The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a
ship name, etc.

Example

<i>This text is italic</i>

The HTML <em> element defines emphasized text. The content inside is typically displayed in italic.

Tip: A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.

Example

<em>This text is emphasized</em>

HTML <small> Element

The HTML <small> element defines smaller text:

Example

<small>This is some smaller text.</small>

HTML <mark> Element

The HTML <mark> element defines text that should be marked or highlighted:

Example

<p>Do not forget to buy <mark>milk</mark> today.</p>

HTML <del> Element

The HTML <del> element defines text that has been deleted from a document. Browsers will usually
strike a line through deleted text:

Example

<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element

The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually
underline inserted text:

Example

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 36

 WEB TECHNOLOGIES
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

HTML <sub> Element

The HTML <sub> element defines subscript text. Subscript text appears half a character below the
normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical
formulas, like H2O:

Example

<p>This is _subscripted text.</p>

HTML <sup> Element

The HTML <sup> element defines superscript text. Superscript text appears half a character above the
normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like
WWW[1]:

Example

<p>This is ^{superscripted} text.</p>

HTML5 PAGE LAYOUT AND NAVIGATION CONCEPTS:

Page layout is the part of graphic design that deals with the arrangement of visual elements on a page.
Page layout is used to make the web pages look better. It establishes the overall appearance, relative
importance, and relationships between the graphic elements to achieve a smooth flow of information
and eye movement for maximum effectiveness or impact.

 divs have a special class/id associated with them.

<div class = "header"> ..... </div>
<div class = "section"> ..... </div>
<div class = "footer"> ..... </div>

Page Layout Information:

 Header: The part of the front end which is used at the top of the page. <header> tag is used to
add a header section on web pages.s

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 37

 WEB TECHNOLOGIES
Syntax:
<header>
<h1> ----- </h1>
<h2> ----- </h2>
----------------
----------------
</header>
 Navigation bar: The navigation bar is the same as the menu list. It is used to display the content
information using hyperlinks. <nav> tag is used to add the nav section(nav elements) in web
pages.
Syntax:
<nav>
<ul>
<li> ..... </li>
<li> ..... </li>
</ul>
</nav>

 Index / Sidebar: It holds additional information or advertisements and is not always necessary to
be added to the page.
 Content Section: The content section is the central part where content is displayed.<main> tag is
used to add the main content of the webpages.
 Footer: The footer section contains the contact information and other query related to web
pages. The footer section is always put on the bottom of the web pages. The <footer> tag sets the
footer on web pages.
Syntax:
<footer>
.....
</footer>

SEMANTIC ELEMENTS IN HTML:

 A semantic element clearly describes its meaning to both the browser and the developer.
 Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
 Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

HTML <section> Element

The <section> element defines a section in a document.

According to W3C's HTML documentation: "A section is a thematic grouping of content, typically with a
heading."

Examples of where a <section> element can be used:

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 38

 WEB TECHNOLOGIES
 Chapters
 Introduction
 News items
 Contact information

A web page could normally be split into sections for introduction, content, and contact information.

Ex:

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization
working on issues regarding the conservation, research and restoration of the
environment, formerly named the World Wildlife Fund. WWF was founded in
1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF
originated from a panda named Chi Chi that was transferred from the Beijing
Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

HTML <article> Element

The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to

distribute it independently from the rest of the web site.

Examples of where the <article> element can be used:

 Forum posts
 Blog posts
 User comments
 Product cards
 Newspaper articles

Example

Three articles with independent, self-contained content:

<article>

<h2>Google Chrome</h2>

<p>Google Chrome is a web browser developed by Google, released in

2008. Chrome is the world's most popular web browser today!</p>

</article>

<article>

<h2>Mozilla Firefox</h2>

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 39

 WEB TECHNOLOGIES
<p>Mozilla Firefox is an open-source web browser developed by Mozilla.
Firefox has been the second most popular web browser since January,
2018.</p>

</article>

<article>

<h2>Microsoft Edge</h2>

<p>Microsoft Edge is a web browser developed by Microsoft, released in

2015. Microsoft Edge replaced Internet Explorer.</p>

</article>

Nesting <article> in <section> or Vice Versa?

The <article> element specifies independent, self-contained content.

The <section> element defines section in a document.

Can we use the definitions to decide how to nest those elements? No, we cannot!

So, you will find HTML pages with <section> elements containing <article> elements, and <article>
elements containing <section> elements.

HTML <header> Element

The <header> element represents a container for introductory content or a set of navigational links.

A <header> element typically contains:

 one or more heading elements (<h1> - <h6>)

 logo or icon
 authorship information

Note: You can have several <header> elements in one HTML document. However, <header> cannot be
placed within a <footer>, <address> or another <header> element.

<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural
environment,
and build a future in which humans live in harmony with nature.</p>
</article>

HTML <footer> Element

The <footer> element defines a footer for a document or section.

A <footer> element typically contains:

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 40

 WEB TECHNOLOGIES
 authorship information
 copyright information
 contact information
 sitemap
 back to top links
 related documents

You can have several <footer> elements in one document.

Example

A footer section in a document:

<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>

MAP TAG:

The <map> tag is used to define an image map. An image map is an image with clickable areas.

The required name attribute of the <map> element is associated with the <img>'s usemap attribute and
creates a relationship between the image and the map.

The <map> element contains a number of <area> elements, that defines the clickable areas in the image
map.

<img src="planets.gif" width="145" height="126" alt="Planets"

usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

EMBEDDING AUDIO AND VIDEO CLIPS ON WEBPAGE:

HTML stands for HyperText Markup Language. It is used to design web pages using a markup language.
It is a combination of Hypertext and Markup language. HTML uses predefined tags and elements that
tell the browser how to properly display the content on the screen. So, in this article, we will learn how
to embed audio and video in HTML. In order to insert multimedia files on web pages, we already know
how to insert images in HTML.

How to embed audio in HTML?

To embed audio in HTML, we use the <audio> tag. Before HTML5, audio cannot be added to web pages
in the Internet Explorer era. To play audio, we used web plugins like Flash. After the release of HTML5, it
is possible. This tag supports Chrome, Firefox, Safari, Opera, and Edge in three audio formats – MP3,
WAV, OGG. Only Safari browser doesn’t support OGG audio format.

Syntax:

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 41

 WEB TECHNOLOGIES
<audio>

<source src="file_name" type="audio_file_type">

</audio>

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Click play button to play audio</h2>
<audio src="./test.mp3" controls></audio>
</body>
</html>
To embed video in HTML, we use the <video> tag. It contains one or more video sources at a time
using <source> tag. It supports MP4, WebM, and Ogg in all modern browsers. Only Ogg video format
doesn’t support in Safari browser.
Syntax
<video>
<source src="file_name" type="video_file_type">
</video>
Example:

In this example, we will add a video to our webpage. To add video, we will use the <video> tag defining
source using <source> tag. Create an HTML file just like an audio file example and save the video file in
the same directory. Suppose a video file name test.mp4 save in the same directory where your HTML
file was saved.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Click play button to play video</h2>
<video src="./test.mp4" controls></video>
</body>
</html>

Prepared By: Asst.Prof : Gururaj N.Kulkarni Page 42