Web Technologies III B.

Tech II Sem (R15)

UNIT - I

Web Basics and Overview: Introduction to Internet, World Wide Web, Web Browsers, URL, MIME, HTTP,
Web Programmers Tool box.
HTML Common tags: List, Tables, images, forms, frames, Basics of CSS and types of CSS.
Client-Side Programming (Java Script): Introduction to Java Script, declaring variables, functions, Event
handlers (onclick, onsubmit, etc.,) and Form Validation.

Introduction to Internet:- A global computer network providing a variety of information

and communication facilities, consisting of interconnected networks using standardized
communication protocols. "the guide is also available on the Internet"

The Internet is the global system of interconnected computer networks that use the Internet
protocol suite (TCP/IP) to link devices worldwide. It is a network of networks that consists of
private, public, academic, business, and government networks of local to global scope, linked by
a broad array of electronic, wireless, and optical networking technologies. The Internet carries a
vast range of information resources and services.

History of Internet
This marvelous tool has quite a history that holds its roots in the cold war scenario. A
need was realized to connect the top universities of the United States so that they can share all
the research data without having too much of a time lag. This attempt was a result of Advanced
Research Projects Agency (ARPA) which was formed at the end of 1950s just after the Russians
had climbed the space era with the launch of Sputnik. After the ARPA got success in 1969, it
didn‘t take the experts long to understand that how much potential can this interconnection tool
have. In 1971 Ray Tomlinson made a system to send electronic mail. This was a big step in the
making as this opened gateways for remote computer accessing i.e. telnet.

During all this time, rigorous paper work was being done in all the elite research
institutions. From giving every computer an address to setting out the rules, everything was
getting penned down. 1973 saw the preparations for the vital TCP/IP and Ethernet services. At
the end of 1970s, Usenet groups had surfaced up. By the time the 80s had started, IBM came up
with its PC based on Intel 8088 processor which was widely used by students and universities for
it solved the purpose of easy computing. By 1982, the Defense Agencies made the TCP/IP
compulsory and the term ―internet‖ was coined. The domain name services arrived in the year
1984 which is also the time around which various internet based marked their debut. A worm, or
a rust the computers, attacked in 1988 and disabled over 10% of the computer systems all over
the world. While most of the researchers regarded it as an opportunity to enhance computing as it
was still in its juvenile phase, quite a number of computer companies became interested in
dissecting the cores of the malware which resulted to the formation Computer Emergency
Rescue Team (CERT). Soon after the world got over with the computer worm, World Wide Web
came into existence. Discovered by Tim Berners-Lee, World Wide Web was seen as a service to
connect documents in websites using hyperlinks.

Page | 1
Web Technologies III B.Tech II Sem (R15)

World Wide Web

The World Wide Web (abbreviated WWW or the Web) is an information space where
documents and other web resources are identified by Uniform Resource Locators (URLs),
interlinked by hypertext links, and can be accessed via the Internet. English scientist Tim
Berners-Lee invented the World Wide Web in 1989. He wrote the first web browser computer
program in 1990 while employed at CERN in Switzerland. The Web browser was released
outside CERN in 1991, first to other research institutions starting in January 1991 and to the
general public on the Internet in August 1991.
The World Wide Web has been central to the development of the Information Age and is
the primary tool billions of people use to interact on the Internet. Web pages are primarily text
documents formatted and annotated with Hypertext Markup Language (HTML). In addition to
formatted text, web pages may contain images, video, audio, and software components that are
rendered in the user's web browser as coherent pages of multimedia content.
Embedded hyperlinks permit users to navigate between web pages. Multiple web pages
with a common theme, a common domain name, or both, make up a website. Website content
can largely be provided by the publisher, or interactively where users contribute content or the
content depends upon the users or their actions. Websites may be mostly informative, primarily
for entertainment, or largely for commercial, governmental, or non-governmental organizational
purposes

WWW is another example of client/server computing. Each time a link is followed, the client is
requesting a document (or graphic or sound file) from a server (also called a Web server) that's
part of the World Wide Web that "serves" up the document. The server uses a protocol called
HTTP or Hyper Text Transport Protocol. The standard for creating hypertext documents for the
WWW is Hyper Text Markup Language or HTML. HTML essentially codes plain text
documents so they can be viewed on the Web.

Browsers :
WWW Clients, or "Browser": The program you use to access the WWW is known as a
browser because it "browses" the WWW and requests these hypertext documents. Browsers can
be graphical, allows to see and hear the graphics and audio;

text-only browsers (i.e., those with no sound or graphics capability) are also available. All of
these programs understand http and other Internet protocols such as FTP, gopher, mail, and
news, making the WWW a kind of "one stop shopping" for Internet users.

Page | 2
Web Technologies III B.Tech II Sem (R15)

Year List of Web browsers

1991 World Wide Web (Nexus)
1992 Viola WWW, Erwise, MidasWWW, MacWWW (Samba)
1993 Mosaic, Cello,[2] Lynx 2.0, Arena, AMosaic 1.0
IBM WebExplorer, Netscape Navigator, SlipKnot 1.0, MacWeb, IBrowse, Agora (Argo),
1994 Minuet
Internet Explorer 1, Internet Explorer 2, Netscape Navigator 2.0, OmniWeb, UdiWWW,
1995 Grail
Arachne 1.0, Internet Explorer 3.0, Netscape Navigator 3.0, Opera 2.0,
1996 PowerBrowser 1.5,[4] Cyberdog, Amaya 0.9,[5] AWeb, Voyager
Internet Explorer 4.0, Netscape Navigator 4.0, Netscape Communicator 4.0, Opera
1997 3.0,[6] Amaya 1.0[5]
1998 iCab, Mozilla
1999 Amaya 2.0,[5] Mozilla M3, Internet Explorer 5.0
2000 Konqueror, Netscape 6, Opera 4,[7] Opera 5,[8] K-Meleon 0.2, Amaya 3.0,[5] Amaya 4.0[5]
2001 Internet Explorer 6, Galeon 1.0, Opera 6,[9] Amaya 5.0[5]
2002 Netscape 7, Mozilla 1.0, Phoenix 0.1, Links 2.0, Amaya 6.0,[5] Amaya 7.0[5]
2003 Opera 7,[10] Apple Safari 1.0, Epiphany 1.0, Amaya 8.0[5]
2004 Firefox 1.0, Netscape Browser, OmniWeb 5.0
Opera 8,[11] Apple Safari 2.0, Netscape Browser 8.0, Epiphany 1.8, Amaya 9.0,[5] AOL
2005 Explorer 1.0, Maxthon 1.0,Shiira 1.0
Mozilla Firefox 2.0, Internet Explorer 7, Opera 9,[12], SeaMonkey 1.0, K-Meleon 1.0,
2006 Galeon 2.0, Camino 1.0, Avant11, iCab 3
2007 Apple Safari 3.0, Maxthon 2.0, Netscape Navigator 9, NetSurf 1.0, Flock 1.0, Conkeror
Google Chrome 1, Mozilla Firefox 3, Opera 9.5,[13], Apple Safari 3.1, Konqueror 4, Amaya
2008 10.0,[5] Flock 2, Amaya 11.0[5]
Google Chrome 2–3, Mozilla Firefox 3.5, Internet Explorer 8, Opera 10,[14], Apple Safari 4,
2009 SeaMonkey 2, Camino 2,surf, Pale Moon 3.0[15]
Google Chrome 4–8, Mozilla Firefox 3.6, Opera 10.50,[16], Opera 11, Apple Safari 5, K-
2010 Meleon 1.5.4,
Google Chrome 9–16, Mozilla Firefox 4-9, Internet Explorer 9, Opera 11.50, Apple
2011
Safari 5.1, Maxthon 3.0, SeaMonkey 2.1–2.6
Google Chrome 17–23, Mozilla Firefox 10–17, Internet Explorer 10, Opera 12, Apple
2012
Safari 6, Maxthon 4.0, SeaMonkey 2.7-2.14
Google Chrome 24–31, Mozilla Firefox 18–26, Internet Explorer 11, Opera 15–18, Apple
2013 Safari 7, SeaMonkey 2.15-2.23
2014 Google Chrome 32–39, Mozilla Firefox 27–34, Opera 19–26, Apple Safari 8
2015 Google Chrome 40–47, Microsoft Edge, Mozilla Firefox 35–43, Opera 27–34, Vivaldi

Page | 3
Web Technologies III B.Tech II Sem (R15)

Google Chrome 48–55, Mozilla Firefox 44–50, Microsoft Edge 14, Opera 35–42, Apple
2016 Safari 10, SeaMonkey 2.24–2.30, Pale Moon 26.0.0[17], Pale Moon 27.0.0[18]
Google Chrome 56–60, Microsoft Edge 15, Mozilla Firefox 51–55.0.2, Opera 43–45, Opera
2017 Neon

Uniform Resource Locators, or URLs: A Uniform Resource Locator, or URL is the address of
a document found on the WWW. Browser interprets the information in the URL in order to
connect to the proper Internet server and to retrieve your desired document. Each time a click on
a hyperlink in a WWW document instructs browser to find the URL that's embedded within the
hyperlink.
The elements in a URL: Protocol://server's address/filename

Hypertext protocol: http://www.aucegypt.edu

File Transfer Protocol: ftp://ftp.dartmouth.edu
Telnet Protocol: telnet://pac.carl.org
News Protocol: news:alt.rock-n-roll.stones
What are Domains? Domains divide World Wide Web sites into categories based on the nature
of their owner, and they form part of a site's address, or uniform resource locator (URL).
Common top- level domains are:

.com—commercial enterprises .mil—military site

org—organization site (non-profits, int—organizations established by
etc.) international treaty
.net—network .biz—commercial and personal
.edu—educational site (universities, .info—commercial and personal
schools, etc.)
.gov—government organizations .name—personal sites
Additional three- letter, four- letter, and longer top- level domains are frequently added.
Each country linked to the Web has a two- letter top- level domain, for example .fr is France, .ie is
Ireland.
MIME (Multi-Purpose Internet Mail Extensions):- MIME is an extension of the
original Internet e- mail protocol that lets people use the protocol to exchange different kinds of
data files on the Internet: audio, video, images, application programs, and other kind s, as well as
the ASCII text handled in the original protocol, the Simple Mail Transport Protocol (SMTP). In
1991, Nathan Borenstein of Bellcore proposed to the IETF that SMTP be extended so that
Internet (but mainly Web) clients and servers could recognize and handle other kinds of data
than ASCII text. As a result, new file types were added to "mail" as a supported Internet Protocol
file type.

Page | 4
Web Technologies III B.Tech II Sem (R15)

Servers insert the MIME header at the beginning of any Web transmission. Clients use
this header to select an appropriate "player" application for the type of data the header indicates.
Some of these players are built into the Web client or browser (for example, all browsers come
with GIF and JPEG image players as well as the ability to handle HTML files); other players
may need to be downloaded.

New MIME data types are registered with the Internet Assigned Numbers Authority
(IANA).

MIME is specified in detail in Internet Request for Comments 1521 and 1522, which
amend the original mail protocol specification, RFC 821 (the Simple Mail Transport Protocol)
and the ASCII messaging header, RFC 822.

Hypertext Transport Protocol:

HTTP means HyperText Transfer Protocol. HTTP is the underlying protocol used by the World
Wide Web and this protocol defines how messages are formatted and transmitted, and what
actions Web servers and browsers should take in response to various commands.
For example, when you enter a URL in your browser, this actually sends an HTTP command to
the Web server directing it to fetch and transmit the requested Web page. The other main
standard that controls how the World Wide Web works is HTML, which covers how Web pages
are formatted and displayed.

HTTP is called a stateless protocol because each command is executed independently, without
any knowledge of the commands that came before it. This is the main reason that it is difficult to
implement Web sites that react intelligently to user input.

HTTPS: A similar abbreviation, HTTPS means Hyper Text Transfer Protocol Secure.
Basically, it is the secure version of HTTP. Communications between the browser and website
are encrypted by Transport Layer Security (TLS), or its predecessor, Secure Sockets Layer
(SSL).
The Web Programmer‟s Toolbox:
HTML - a markup language
o To describe the general form and layout of documents
 HTML is not a programming language - it cannot be used
describe computations.
o An HTML document is a mix of content and controls
 Controls are tags and their attributes
 Tags often delimit content and specify something about how the
content should be arranged in the document
For example, <p>Write a paragraph here </p> is an element.
 Attributes provide additional information about the content of a tag
For example, <img src = "redhead.jpg"/> <font color ="Red" />
Plug ins
o Integrated into tools like word processors, effectively converting them to
WYSIWYG HTML editors
Filters
o Convert documents in other formats to HTML

Page | 5
Web Technologies III B.Tech II Sem (R15)

Advantages of both filters and plug- ins:

o Existing documents produced with other tools can be converted to HTML
documents
o Use a tool you already know to produce HTML
Disadvantages of both filters and plug- ins:
o HTML output of both is not perfect - must be fine tuned
o HTML may be non-standard
o You have two versions of the document, which are difficult to synchronize
XML
o A meta-markup language (a language for defining markup language)
o Used to create a new markup language for a particular purpose or area
o Because the tags are designed for a specific area, they can be meaningful
JavaScript
o A client-side HTML-embedded scripting language
o Provides a way to access elements of HTML documents and dynamically change
them
Flash
o A system for building and displaying text, graphics, sound, interactivity, and
animation (movies)
o Two parts:
1. Authoring environment
2. Player
Supports both motion and shape animation
PHP
A server-side scripting language
Great for form processing and database access through the Web
Ajax
Asynchronous JavaScript + XML
 No new technologies or languages
Much faster for Web applications that have extensive user/server interactions
Uses asynchronous requests to the server
Requests and receives small parts of documents, resulting in much faster responses
Java Web Software
Servlets – server-side Java classes
JavaServer Pages (JSP) – a Java-based approach to server-side scripting
JavaServer Faces – adds an event-driven interface model on JSP
ASP.NET
Does what JSP and JSF do, but in the .NET environment
Allows.NET languages to be used as server-side scripting language
Ruby
A pure object-oriented interpreted scripting language
Every data value is an object, and all operations are via method calls
Both classes and objects are dynamic
Rails
A development framework for Web-based applications
Particularly useful for Web applications that access databases
Written in Ruby and uses Ruby as its primary user language

Page | 6
Web Technologies III B.Tech II Sem (R15)

HTML Common tags:-

HTML is the building block for web pages. HTML is a format that tells a computer how to
display a web page. The documents themselves are plain text files with special "tags" or codes
that a web browser uses to interpret and display information on your computer screen.

HTML stands for Hyper Text Markup Language

An HTML file is a text file containing small markup tags
The markup tags tell the Web browser how to display the page
An HTML file must have an htm or html file extension.

HTML Tags:- HTML tags are used to mark-up HTML elements .HTML tags are surrounded by the two
characters < and >. The surrounding characters are called angle brackets. HTML tags normally come in
pairs like and The first tag in a pair is the start tag, the second tag is the end tag . The text between the
start and end tags is the element content . HTML tags are not case sensitive, <B>means the same as <b>.

The most important tags in HTML are tags that define headings, paragraphs and line breaks.

Tag Description
<!DOCTYPE...> This tag defines the document type and HTML version.
<html> This tag encloses the complete HTML document and mainly comprises of
document header which is represented by <head>...</head> and document
body which is represented by <body>...</body> tags.
<head> This tag represents the document's header which can keep other HTML tags
like <title>, <link> etc.
<title> The <title> tag is used inside the <head> tag to mention the document title.

<body> This tag represents the document's body which keeps other HTML tags like
<h1>, <div>, <p> etc.
<p> This tag represents a paragraph.
<h1> to <h6> Defines header 1 to header 6

<br> Inserts a single line break

<hr> Defines a horizontal rule

<!--> Defines a comment

Headings:-
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading while <h6>
defines the smallest.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

Page | 7
 Web Technologies III B.Tech II Sem (R15)

Paragraphs:-

Paragraphs are defined with the <p> tag. Think of a paragraph as a block of text. You can use the
align attribute with a paragraph tag as well.

<p align="left">This is a paragraph</p>

<p align="center">this is another paragraph</p>

Note: You must indicate paragraphs with <p> elements. A browser ignores any
indentations or blank lines in the source text. Without <p> elements, the document becomes
one large paragraph. HTML automatically adds an extra blank line before and after a paragraph.

Line Breaks:-
The <br> tag is used when you want to start a new line, but don't want to start a new paragraph.
The <br> tag forces a line break wherever you place it. It is similar to single spacing in a
document.
This Code output
<p>This <br> is a para<br> graph with This
is a para
line breaks</p> graph with line breaks

Horizontal Rule The element is used for horizontal rules that act as dividers between sections
like this:

The horizontal rule does not have a closing tag. It takes attributes such as align and width
Code Output
<hr width="50%" align="center">

Sample html program

<!DOCTYPE html>
<html>
<head>
<title>This is document title
</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>

Type the above program in notepad and save with some file name eg:sample.html
Open the file with browser and the webpage looks like this

Page | 8
Web Technologies III B.Tech II Sem (R15)

Lists:-HTML offers web authors three ways for specifying lists of information.
All lists must contain one or more list elements. Lists are of three types
1)Un ordered list
2)Ordered List
3)Definition list

HTML Unordered Lists:An unordered list is a collection of related items that have no
special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is
marked with a bullet.
Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul> <li>Beetroot</li>
<li>Ginger</li> <li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

HTML Ordered Lists:- items are numbered list instead of bulleted, This list is created
by using <ol> tag.

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

Page | 9
 Web Technologies III B.Tech II Sem (R15)

HTML Definition Lists:- HTML and XHTML supports a list style which is called
definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is
the ideal way to present a glossary, list of terms, or other name/value list. Definition List makes
use of following three tags.
1). <dl> - Defines the start of the list
2). <dt> - A term
3).<dd> - Term definition
4). </dl> - Defines the end of the list

<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt> <dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt> <dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>

HTML tables:
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc.
into rows and columns of cells. The HTML tables are created using the <table> tag in which the
<tr> tag is used to create table rows and <td> tag is used to create data cells.

Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td> <td>Row 1, Column 2</td>
</tr>
<tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

Page | 10
Web Technologies III B.Tech II Sem (R15)

Table Heading: Table heading can be defined using <th> tag. This tag will be put to replace
<td> tag, which is used to represent actual data cell. Normally you will put your top row as table
heading as shown below, otherwise you can use <th> element in any row.

Tables Backgrounds: set table background using one of the following two ways:
1)bgcolor attribute - You can set background color for whole table or just for one cell.
2)background attribute - You can set background image for whole table or just for one cell. You
can also set border color also using bordercolor attribute.

<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title> </head>
<body>
<table border="1"bordercolor="red" bgcolor="yellow">
<tr> <th>Name</th>
<th>Salary</th> </tr>
<td>Jayapal </td> <td>50,000.00</td>
</tr>
<tr> <td>Ravi</td> <td>45,000.00</td>
</tr>
</table>
</body>
</html>

Images are very important to beautify as well as to depict many complex concepts in simple way
on your web page.
Insert Image:
insert any image in the web page by using <img> tag.
<img align="left|right|middle|top|bottom">

Attribute Values

Value Description

left Align the image to the left

right Align the image to the right

<img src="Image URL" ... attributes-
middle Align the image in the middle list/>

top Align the image at the top

bottom Align the image at the bottom

Page | 11
 Web Technologies III B.Tech II Sem (R15)

Example

<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body> <p>Simple Image Insert</p>
<img src="test.png" alt="Test Image" />
</body>
</html>

HTML FORMS:
HTML Forms are required 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, text area fields, drop-down menus, radio buttons,
checkboxes, etc.

<form action="Script URL" method="GET|POST"> form elements like input, text area etc. </form>

Page | 12
Web Technologies III B.Tech II Sem (R15)

HTML Form Controls :

There are different types of form controls that you can use to collect data using HTML
<img
form:src="Image URL" ... attributes-list/>
 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:
1)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.

<input type="text"> defines a one-line input field for text input:

Example:

<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>

2)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.
Input Type Password

<input type="password"> defines a password field:

<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>

Page | 13
 Web Technologies III B.Tech II Sem (R15)

3)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.

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

Checkboxes Controls:-
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.
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="C++" value="on"> C++
<br>
<input type="checkbox" name="C#" value="on"> C#
<br>
<input type="checkbox" name="JAVA" value="on"> JAVA
</form>
</body> </html>

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.

<!DOCTYPE ht ml>
<html> <head> <tit le>Radio Bo x Control</tit le> </head>
<body> <p>Select a Course</p>
<form>
<input type="radio" name="subject" value="C++"> C++
<br>
<input type="radio" name="subject" value="JAVA"> JA VA
<br>
<input type="radio" name="subject" value="HTML"> HTM L
</form> </body> </html>

Page | 14
Web Technologies III B.Tech II Sem (R15)

Select Box Controls :- A s elect 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.

<!DOCTYPE ht ml>
<html>
<head>
<title>Select Bo x Control</title>
</head>
<body>
<form>
<select name="dropdown">
<option value="C++" selected>C++</option>
<option value="JAVA">JA VA</option>
<option value="HTM L">HTM L</option>
</select>
</form>
</body>
</html>

File Select boxes:- 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.

<!DOCTYPE ht ml>
<html>
<head>
<title>File Upload Bo x</tit le>
</head>
<body>
<p>File Up load Bo x</p>
<form>
<input type="file" name="fileupload" accept="image/*" />
</form>
</body>
</html>

Hidden 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.

<html> <head> <title>File Upload Bo x</tit le> </head>

<body>
<form>
<p>Th is is page 10</p>
<input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Sub mit" />
<input type="reset" name="reset" value="Reset" />
</form> </body> </ht ml>

Page | 15
Web Technologies III B.Tech II Sem (R15)

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:

<!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="test1.png" />
</form>
</body> </html>

HTML frames: These 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.
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 rows attribute 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.

Page | 16
 Web Technologies III B.Tech II Sem (R15)

Note: HTML <frame> Tag. Not Supported in HTML5.

<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<iframe src="sample1.html" height="400" width="400"frameborder="1">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</iframe>
</body>
</html>

CSS stands for Cascading Style Sheets

CSS describes how HTML elements are to be displaye d on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
 Inline - by using the style attribute in HTML elements
 Inte rnal - by using a <style> element in the <head> section
 External - by using an external CSS file
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
This example sets the text color of the <h1> element to blue:

<h1 style="color:blue;">This is a Blue Heading</h1>

<html> <head> <title>Page Title</title> </head>

<body>
<h1 style="color:blue;">This is a Blue Heading</h1>
</body>
</html>

Page | 17
Web Technologies III B.Tech II Sem (R15)

Inte rnal CSS: An internal CSS is used to define a style for a single HTML page. An internal
CSS is defined in the <head> section of an HTML page, within a <style> element:

<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

External CSS:-
An external style sheet is used to define the style for many HTML pages. With an external style
sheet, you can change the look of an entire web site, by changing one file! To use an external
style sheet, add a link to it in the <head> section of the HTML page:

<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

An external style sheet can be written in any text editor. The file must not contain any HTML
code, and must be saved with a .css extension.
Here is how the "styles.css" looks:

body { background-color: powderblue; }

h1 { color: blue; }

p { color: red; }

Page | 18
Web Technologies III B.Tech II Sem (R15)

CSS Fonts: The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.

<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

CSS Border: The CSS border property defines a border around an HTML element.
CSS Padding: The CSS padding property defines a padding (space) between the text and the
border.
CSS Margin: The CSS margin property defines a margin (space) outside the border.

<html> <head>
<style>
h1 {
co lor: blue;
font-family : verdana;
font-size: 300%; }
p {
co lor: red; font-size: 160%; border: 2p x solid powderb lue; padding: 30p x; marg in: 50p x; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Page | 19