UNIT-1

Web Essentials: Clients, Servers, and Communication- Terminologies -HTML5-Introduction-HTML

Tags: Attributes-HTML-Basic Formatting Tags- Basics Formatting, and Fonts -Grouping Using Div
and Span, Hyperlink, Lists, Tables, HTML Images, Frames Audio and Video-HTML Form.

1.1 Web essentials: Clients, Servers, and Communication- Terminologies

1. Server:
A server is a computer program or device that provides a service to another computer
program and its user, also known as the client.
The system that provides information to client
Example:
 Web server sends requested web pages.
 Database servers are used to store and manage databases that are stored on the server
and to provide data access for authorized users
2. Client:
The software that resides on the remote machine, communicates with the server,
fetches the information, processes it, and then displays it on the remote machine is called the client.
It initiates contact with server.
It requests service from server.
Web client implemented in browser.
The system that access the information provided by the server.

3. Protocols:
In computing, a protocol is a set of rules which is used by computers to communicate with
each other across a network. It controls or enables the connection, communication, and data transfer
between computing endpoints. The Internet Protocol Suite is the set of communications protocols
used for the Internet. : The Transmission Control Protocol (TCP) and the Internet Protocol (IP).

4. Internet:
The Internet is a global system of interconnected computer networks that use the standard
Internet Protocol Suite (TCP/IP) to serve billions of users worldwide. It is a network of networks that
consists of millions of private, public academic, business, and government networks.
5. Web Page:
A Web page is a document or single unit of information that belongs to a web site
and consists of information on that site. A Web page can contain text, video, graphics, audio files,
and links to various other web pages.

6. Website:
Collection of Webpages is called Web Site.

7. Web server:
A web server is software and hardware that uses HTTP (Hypertext Transfer Protocol) and
other protocols to respond to client requests made over the World Wide Web. The main job of a web
server is to display website content through storing, processing and delivering webpages to users.
Besides HTTP, web servers also support SMTP (Simple Mail Transfer Protocol) and FTP (File
Transfer Protocol), used for email, file transfer and storage.
Web server hardware is connected to the internet and allows data to be exchanged with other
connected devices, while web server software controls how a user accesses hosted files. The web
server process is an example of the client/server model. All computers that host websites must have
web server software.
Web servers are used in web hosting, or the hosting of data for websites and web-based
applications -- or web applications.

8. WEB Browsers / Web Client:

A web client is a software that access the web server by sending HTTP Request message
It is software which provides Graphical user Interface (GUI) to users to navigate the Internet
easily.
Example: Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, Netscape Navigator,
and Opera.
The purpose of a web browser is to connect to web servers, request documents, and then
properly format and display those documents. Each web page is a file written in a language called the
Hypertext Markup Language (HTML).
 Web browsers convert web addresses (URL’s) to HTTP requests.
 Communicate with web servers via HTTP.
 And properly display the documents returned by a server.
9. WWW:
The World Wide Web, abbreviated as WWW and commonly known as the Web, is a system
of interlinked hypertext documents accessed via the Internet. With a web browser, one can view web
pages that may contain text, images, videos, and other multimedia and navigate between them via
hyperlinks.
World Wide Web (WWW): is a collection of Internet Servers that provide an easy to use
point and click interface.

10. Hypertext Transfer Protocol (HTTP)

• The hypertext transfer protocol (HTTP) was developed by Tim Berners-Lee in1991.
 It provides communication between web servers and browsers
• HTTP was designed to transfer pages between machines. It is implemented over TCP/IP.
• The client (or Web browser) makes a request for a given page and the Server is responsible for
finding it and returning it to the client.

There are four messages with in this protocol

Connection: Establishes a connection between the client and the server
Request: Ask for a Resource
Response: Delivers the Resource
Close: Terminates the Connection
11. URI: URI (Uniform Resource Identifier): It identifies an object on the Internet. Uniform Resource
Identifier (URI) is an identifier that is intended to be associated with a particular resource on World
Wide Web.
i) URL: URL is a pointer to a particular resource on the internet at a particular location
Syntax:
Protocol://username@hostname:port/path/filename
Example:
http://localhost:8086/cmrsite/Register.html
ii) URN: Uniform Resource Names: URN is a name for a particular resource but without
reference to a particular location.
Syntax:
urn: namespace: resourcename
Example:
urn:isbn:15659287
Client Server Communication
 All web activity begins on the client side you could type a web address into the
browser
 The browser first consult with the DNS to translate the home page name into
an IP Address
 It then sends a request to the server using the HTTP Standard
 A server spends most of its time listening to the network waiting for a document
request.

https://programmingtrick.com/html-
assignments

1.2 Hypertext Markup Language (HTML)

 HTML stands for Hypertext Markup Language, and it is the most widely used language to
display the document in the web browsers in the form of a Web Pages.
 HTML was developed by Tim Berners-Lee in 1989.
 HTML is not a programming language, it is a markup language.
 Hypertext refers to the way in which Web pages (HTML documents) are linked together.
Thus, the link available on a webpage is called Hypertext.
 As its name suggests, HTML is a Markup Language which means we use HTML to simply
"mark-up" a text document with tags that tell a Web browser how to structure it to display.
 HTML is used to create webpage that contains simple text or complex multimedia objects
like sound, moving images, video and java applets
 A markup language is a set of markup tags
  HTML uses markup tags to describe web pages
 The tags describes document content.
 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages

HTML Versions
 Since the early days of the web, there have been many versions of HTML:
Version Year
 HTML 1991
 HTML+ 1993
 HTML 2.0 1995
 HTML 3.2 1997
 HTML 4.01 1999
 XHTML 1.0 2000
 HTML5 2012
 XHTML5 2013

HTML Tags
 HTML markup tags are usually called HTML tags
 HTML tags are keywords (tag names) surrounded by angle brackets like <html>
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, with a forward slash before the tag name
 Start and end tags are also called opening tags and closing tags
Syntax:
<tagname>content</tagname>
Tag:
i) Pair tag: tag which has both start tag and end tag
ii) Singular tag: tag which has only starting tag but no ending tag.

Html

HTML page structure

<!DOCTYPE html> Head Body

Title
<html>
<head>
<title>This is document title</title>
</head>
<body>
</body>
</html>

First Web page

<!DOCTYPE html>
<html>
<head>
<title>
My First Page
</title>
</head>
<body>
Welocme to Internet and Web Technology
</body>
</html>
HTML Tags

Tag Description

<!DOCTYPE...> This tag defines the document type and HTML version.

This tag encloses the complete HTML document and mainly comprises of
<html> document header which is represented by <head>...</head> and document
body which is represented by <body>...</body> tags.

This tag represents the document's header which can keep other HTML tags
<head>
like <title>, <link> etc.

<title> The <title> tag is used inside the <head> tag to mention the document title.

This tag represents the document's body which keeps other HTML tags like
<body> <h1>, <div>, <p> etc. It is the visible page content. It defines main content of
the web page except the document that uses frames.

Element:
An HTML file is made of
elements. These elements are
responsible for creating web pages
and define content in that webpage.
An element in HTML usually consist
of a start tag <tag name>, close tag
</tag name> and content inserted
between them. Technically, an
element is a collection of start tag,
attributes, end tag, content between
them.

Attributes:
 An attribute is used to define the characteristics of an HTML element and is placed inside the
element's opening tag.
 All attributes are made up of two parts − a name and a value
 The name is the property we want to set.
  For example, the paragraph <p> element in the example carries an attribute whose name is
align, which we can use to indicate the alignment of paragraph on the page.
 The value is what we want the value of the property to be set and always put within
quotations. The three possible values of align attribute: left, center and right

<element attribute_name="value">content</element>
<p align=”left”> This is a paragraph </p>

HTML Basic tags:

<body>
The BODY tag contains all the text and graphics of the document with all the HTML tags that are
used for control and formatting of the page.
Attribute Value Description
bgcolor color It determines the background color of the content
text color It determines the color of the text in the document.
backgrou File
Image to be used a background
nd path

<!DOCTYPE html>
<html>
<head>
<title>Heading Demo</title>
</head>
<body text="blue" bgcolor="olive">
Welcome to internet and Web technology
</body>
</html>
HEADING
Used to produce section headings for an HTML document. Six different levels are provided
in html. <h1> is largest and bold and <h6> may look like normal text.
Attributes: align.
Values: left, right, center, justify

<h1>.....</h1>
<h2>.....</h2>
<h3>....</h3>
<h4>.....</h4>
<h5>..../h5>
<h6>.....</h6>
Example
<html>
<head>
<title>Heading Demo</title>
</head>
<body>
<h1 align='right'> Web programming</h1>
<h2> Web programming</h2>
<h3> Web programming</h3>
<h4> Web programming</h4>
<h5> Web programming</h5>
<h6> Web programming</h6>
</body>
</html>
Paragraph: <p>....</p>(End tag optional)
It used to denote paragraph of the text. It results in a section of text with blank space above and
below
Attribute: To align the text of paragraph: align
Values: left, right, center, justify
<html>
<head>
<title> About HTML</title>
</head>
<body>
<h1> HTML AND CSS</h1>
<p> HTML is a Hyper Text Markup Language. It has tags which describes the
contents
to be displayed</p>
<p> HTML Elements are divided into Text-level elements and block level
elements</p>
</body>
</html>
Line breaks <br>
It causes the browser to start a new line. It is an empty element. An empty element is a one
that is not allowed to contain any content.

<hr/>Horizontal rule

Adds a horizontal line to the element. Like br element, hr is an empty element.

Attributes:
i) size :specifies a thickness in pixels.( Sets the height, in pixels, of the rule.)
ii) width: specifies horizontal width(length) in pixels. By default width is 100.
iii) Align: Sets the alignment of the rule on the page. If no value is specified, the default
value is left.
iv) Noshade : turns off the embossed look of rue. By default is turned on.
v) color :Sets the color of the rule through color name or hexadecimal value.

<!doctype html>
<html>
<head>
<title> BR and HR Demo</title>
</head>
<body>
 <h1>Healthy food</h1>
<hr/ color="green">
<p> Fruits and vegetables are healthy foods</p>
<hr size=6 color="blue"/>
<h1>Unhealthy food</h1>
<p> Potato chips, chocolate and fried foods are unhealthy foods<br/>We have
to avoid eating too much of unhealthy food</p>
<hr width=”75%” size=6 color="red"/>
</body>
</html>

<!doctype html>
<html>
<head>
<title> Exercise 1</title>
</head>
<body bgcolor="aqua">
<hr/ color="red" size="6">
<h2><center>Welcome to Internet and Web Technology</center></h2>
<hr/ color="red" size="6">
 <p>III B.Tech - IT : V Semester<br/>19IT5351R Internet and Web
Technology<br/>Autonomous Institution</p>
<hr/ color="olive" size="4">
</body>
</html>

pre(preformatted text)<pre>....</pre>
This tag is used to preserve the white spaces and lines in the text. Most browsers will display
the content in the pre element using monospace font.

<html>
<head>
<title> About HTML</title>
</head>
<body>
<h1> HTML AND CSS</h1>
<p> HTML is a Hyper Text Markup Language.
It has tags which describes the contents to be
displayed</p>
<pre> HTML Elements are divided into
Text-level elements
and block level elements<pre>
</body>
</html>
HTML – Formatting Tags:
 Bold Text:
Text that appears within <b>...</b> element, is displayed in bold
<html>
<head>
<title>Formatting Text</title>
</head>
<body>
<p><b> Web Technology</b> is my favourite subject</p>
</body>
</html>
 Italic Text:
Text that appears within <i>...</i> element is displayed in italicized

<html>
<head>
<title>Formatting Text</title>
</head>
<body>
<p><i> Web Technology </i>is my favourite subjcet</p>
</body>

</html

 Underlined Text:
Text that appears within <u>...</u> element, is displayed with underline
 <html>
<head>
<title>Formatting Text</title>
</head>
<body>
<p><u> Web Technology</u> is my favourite subjcet</p>
</body>
</html>

 Strike Text:

Text that appears within <strike>...</strike> element is displayed with

strikethrough, which is a thin line through the text.

<html>
<head>
<title>Formatting Text</title>
</head>
<body>
<p><strike> Web Technology </strike> is my favourite subject</p>
</body>
</html>

 Monospaced Font:
The content of a <tt>...</tt> element is written in monospaced font. H owever, each letter has
the same width.

<html>
 <head>
<title>Formatting Text</title>
</head>
<body>
<p><tt> Web Technology</tt> is my favourite subjcet</p>
</body>
</html>

 Superscript Text:
The content of a ^... element is written in superscript

<html>
<head>
<title>Formatting Text</title>
</head>
<body>
<p>^{Web Technology} is my favourite subjcet</p>
</body>
</html>

 Subscript Text:
The content of a _... element is written in subscript

<html>
<head>
<title>Formatting Text</title>
</head>
<body>
<p>_{Web Technology} is my favourite subjcet</p>
 </body>

</html>

 Inserted Text:
Text that appears within <ins>...</ins> element is displayed as inserted text.

<html>
<head>
<title>Formatting Text</title>
</head>
<body>
<p><ins> Web Technology</ins> is my favourite subjcet</p>
</body>
</html>

 Deleted Text:
Text that appears within <del>...</del> element, is displayed as deleted text.

<html>
<head>
<title>Formatting Text</title>
</head>
<body>
<p><del> Web Technology</del> is my favourite subjcet</p>
</body>
 </html>

 Larger Text:
The content of the <big>...</big> element is displayed one font size larger than the rest of
the text surrounding it

<html>
<head>
<title>Formatting Text</title>
</head>
<body>
<p><big> Web Technology</big> is my favourite subjcet</p>
</body>
</html>

 Smaller Text:
The content of the <small>...</small> element is displayed one font size smaller than the
rest of the text surrounding it .

<html>
<head>
<title>Formatting Text</title>
</head>
<body>
<p><small> Web Technology</small> is my favourite subjcet</p>
 </body>
</html>

 Empathized

Text that appears within <em>...</em> element is displayed as emphasized text in Italics

<html>
<head>
<title>Formatting Text</title>
</head>
<body>
<p><em> Web Technology</em> is my favourite subjcet</p>
</body>
</html>

 <strong>....</strong>:
Text that appears within <strong>...</strong> element is displayed in boldface
<html>
<head>
<title>Formatting Text</title>
</head>
<body>
<p><strong> Web Technology</strong> is my favourite subjcet</p>
</body>
</html>

 Marked Text:
Text that appears within <mark>...</mark> element, is displayed as marked with yellow
ink.
<html>
<head>
<title>Formatting Text</title>
</head>
<body>
<p><mark> Web Technology</mark> is my favourite subject marked in yellow
color</p>
</body>
</html>

Fonts and Colors

The HTML <font> tag specifies the font face, font size, and color of text. It is not supported in
HTML5.
Attributes:
 color:
 This attribute sets the text color using either a named color or a color specified in the
hexadecimal #RRGGBB format or rgb(128, 128, 128)
 Face:
This attribute contains a comma-separated list of one or more font names
 Size:
This attribute specifies the font size as either a numeric or relative value. Numeric
values range from 1 to 7 with 1 being the smallest and 3 the default
Attribute Value Description

rgb(x,x,x)
color #xxxxxx Specifies the color of text
colorname

face font_family Specifies the font of text

Specifies the size of text. Numeric values range from 1 to 7

size number
with 1 being the smallest and 3 the default

<font color="color_name|hex_number|rgb_number">

Value Description
color_name Specifies the text color with a color name (like "red")
hex_number Specifies the text color with a hex code (like "#ff0000")
rgb_number Specifies the text color with an rgb code (like "rgb(255,0,0)")

Demo
<html>
<head>
<title> About HTML</title>
</head>
<body>
<h1> HTML AND CSS</h1>
<p><font color="green" face="Comic Sans MS"> HTML is a Hyper Text Mark-
up language. It has tags which describes the contents to be displayed</font></p>
</body>
</html>

Reference color
White #FFFFFF rgb(255, 255, 255)
Silver #C0C0C0 rgb(192, 192, 192)
Gray #808080 rgb(128, 128, 128)
Red #FF0000 rgb(255, 0, 0)
Maroon #800000 rgb(128, 0, 0)
Yellow #FFFF00 rgb(255, 255, 0)
Olive #808000 rgb(128, 128, 0)
Lime #00FF00 rgb(0, 255, 0)
Green #008000 rgb(0, 128, 0)
Aqua #00FFFF rgb(0, 255, 255)
Teal #008080 rgb(0, 128, 128)
Blue #0000FF rgb(0, 0, 255)
Navy #000080 rgb(0, 0, 128)
Fuchsia #FF00FF rgb(255, 0, 255))
Purple #800080 rgb(128, 0, 128))
Font for Microsoft OS and browser

Font Font Font

Andale Mono Arial Arial Bold
Arial Italic Arial Bold Italic Arial Black
Comic Sans MS Comic Sans MS Bold Courier New
Courier New Bold Courier New Italic Courier New Bold Italic
Georgia Georgia Bold Georgia Italic
 Georgia Bold Italic Impact Lucida Console
Lucida Sans Unicode Marlett Minion Web
Symbol Times New Roman Times New Roman Bold
Times New Roman Italic Times New Roman Bold Italic Tahoma
Trebuchet MS Trebuchet MS Bold Trebuchet MS Italic
Trebuchet MS Bold Italic Verdana Verdana Bold
Verdana Italic Verdana Bold Italic Webdings

HTML – Comments
 Comment is a piece of code which is ignored by any web browser.
 HTML comments are placed in between <!-- ... --> tags.

<!DOCTYPE html>
<html>
<head> <!-- Document Header Starts -->
<title>This is document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
</body>
</html>

HTML Entity
Images
The HTML <img> element embeds an image into the document. It is an inline element
Inserts a image into the document. <img src=” “/>.It allows animated gif also.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
Attributes:
i) src : Gives the image file. attribute specifies the URL (web address) of the image:. It
is the required attribute.
ii) alt: It displays the text when it is not possible to display the images.
<img src="monkey.jpg" alt="The little monkey is sitting on the tree">
iii) border: width of the border around the image
iv) height: height of the image in pixels
 iv) width: width of the image in pixels
Demo
<html>
<head>
<title>Image</title>
</head>
<body>
<h1>A beautiful red flower </h1>
<img src="flower.jpg" height="200" width="200" />
</body>
</html>

If the browser not able to render the image

<html>
<head>
<title>Image</title>
</head>
<body>
<h1>A beautiful red flower </h1>
<img src="flowe.jpg" alt="A red flower" height="200" width="200" border="10"/>
</body>
</html>

Hyper Links :< a>.....</a>

HTML links are hyperlinks .A hyperlink is an element, text or image that can click on and
jump to another document
The HTML <a> element (or anchor element) creates a hyperlink to other web pages, files,
locations within the same page, email addresses, or any other URL.
It is used to make a link to another document.
<a href=” “>link text</a>
Attribute:
 i) href : specifies url33333333333333333333333333333333 of a document to be
requested. The content of anchor can be text or image.
ii) target: It specifies where to open the linked document.
values:
_blank : opens a linked document in the new window or tab
_self : opens a linked document in the current window
_parent : opens a linked document in the parent frame
_top : opens a linked document in the full body of window
Demo.html
<html>
<head>
<title> Link</title> <body>
<h1> <font color="Blue"> III year IT </h1>
<a href ="welcome.html"><font color="green"> Click here</font></a>
</body>
</html>

welcome.html
<html>
<head>
<title> Link</title>
</head>
<body>
<h2> <font color="brown" >Welcome you all for the academic year 2018-2019</font><h2>
</body>
</html>
Link Titles
The title attribute specifies extra information about an element. The information is most often shown
as a tooltip text when the mouse moves over the element.
<html>
<head>
<title> Link</title>
</head>
<body>
<h1> <font color="Blue"> III year IT </h1>
<a href ="welcome.html" title ="web technology"> Click here</a>
</body>
</html>

HTML Links - Create a Bookmark

i) HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
ii) Bookmarks can be useful if your webpage is very long.
iii) To make a bookmark, you must first create the bookmark, and then add a link to it.
iv) When the link is clicked, the page will scroll to the location with the bookmark.

Use the id attribute (id="value") to define bookmarks in a page

i) create a bookmark with the id attribute:

 <h2 id="C4">Chapter 4</h2>
ii) Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

<a href="#C4">Jump to Chapter 4</a>

Demo1

Demo2
Link.html
<html>
<head>
<title>Link</title>
</head>
<body>
<a href="information.html" >Web programming</a>
</body>
</html>
Information.html
<html>
<head>
<title>Details</title>
</head>
<body>
<h3>server side programming</h3>
<h3>client side programming</h3>
</body>
</html>

Uses of links:
 Link logically related items together using links in the web page
 Use of links enhances the readability of web documents
We can set colors of your links, active links and visited links using link, alink and vlink attributes of <body>
tag

Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag:
Demo.htm
 l</html>
<head>
<title>Image</title>
</head>
<body>
<h1>The little monkey enjoying in the forest </h1>
<a href="about.html"> <img src="index1.jpg" alt="The cute little monkey"/></a>
</body>
</html>
about.html

<html>
<head>
<title> About Monkey </title>
</head>
<body >
<h1> About Monkey ! </h1>
<p> <font color="green"> Monkeys are one of the funniest animals in nature. They
are full of curiosity and adventure, mischief and intelligence. </font></p>
</body>
</html>
Image maps

An image-map is an image with clickable areas. The <map> tag defines an image-map.
The name attribute of <map> gives the map a name so that it can be referenced. The name attribute
of the <map> tag 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> tags.
<area> tag defines the clickable areas in the image-map.
Attributes of area tag:
Shape: The shape of the associated hot spot.
values :
rect, which defines a rectangular region;
circle, which defines a circular region;
poly, which defines a polygon;
and default, which indicates the entire region beyond any defined shapes
href : The hyperlink target for the area. Its value is a valid URL.
Coords : A set of values specifying the coordinates of the hot-spot region.
alt : A text string alternative to display on browsers that do not display images
Demo.html
<html>
<head>
<title>Image</title>
</head>
<body>
<h1>The little monkey enjoying in the forest </h1>
<img src="index1.jpg" alt="The cute little monkey " usemap="#workmap"/>
<map name="workmap">
<area shape="circle" coords="84,44,44" alt="Monkeys eyes" href="eyes.html">
</map>
 </body>
</html>

Eyes.html
<html>
<head>
<title> Monkeys eyes</title>
</head>
<body>

<h2> The two little eyes to see the nature </h2>

</body>

</html>

3.
Formatting tags

HTML elements:
HTML elements are divided into two categories: block-level elements and inline (Text level)
elements
Inline elements:
The inline element does not cause a line break (start on a new line) and does not take up the full
width of a page, only the space bounded by its opening and closing tag. It is usually used within
other HTML elements. inline elements can start anywhere in a line.
 Begin within a line
 Does not start a new line

Its width only extends as far as it is defined by its tags

An example of an inline element is the <strong> tag, which makes the font of the text content
contained within boldface. An inline element generally only contains other inline elements, or it can
contain nothing at all, such as the <br /> break tag.

Other examples of inline elements are:

 anchor <a> tag
 emphasis <em> tag

 image <img> tag

block level elements

A block-level element always starts on a new line and takes up the full width of a page, from
left to right. A block-level element can take up one line or multiple lines and has a line break before
and after the element. By default, block-level elements begin on new lines.that block elements create
"larger" structures than inline elements. block-level elements may contain inline elements and other
block-level elements.
Other examples of the block-level tag are:

 Heading tags <h1> to <h6>

 List (Ordered, Unordered, Description and List Item) tags <ol> , <ul> ,<dl> , <li>

 Pre-formatted text tag <pre>

 Blockquote tag <blockquote>

Div element
The <div> element is usually used as a container for other HTML elements and to separate
them for the rest.
The <div> element is an unstyled tag, in other words, using it does not change the look of an
HTML element.
It is used to wrap the information in a document so that wrapped information can be treated as a
unit. The section of documents can be independently controlled
A <div> element is a block level element.
Attribute: align
Values: left, right, center or justify

<span> element
The <span> element can be used as a container for HTML text. But essentially, it is used to
style a certain text within a larger text element. The <span> element does not automatically style an
HTML element
<span> element is used as an inline element .
The body sections have block level and text level elements

Block level elements: It break the flow of document and start at the beginning of new line.It causes
paragraph breaks

Eg: heading, paragraph, basic text section, list, tables, horizontal ines,input

Text level elements: Does not cause paragraph breaks

Eg: tags for font, hyperlink, embedded image, applet

5

5.List:
List is the collection of elements or items. Three types of list
i) Unordered list: A bullet list
ii) Ordered list: A numbered list
iii) Definition List :A list of terms and definition for each
i)Unordered list:
The unordered list starts with <ul> tag and each list item starts with <li> tag
<ul>
<li>........ </li>
<li>........ </li>
</ul>
Attribute:

type=”disc|circle|square”

<html>
<head>
<title>unordered list</title>
</head>
<body>
<h1>Programming language</h1>
<ul type="circle">
 <li> C</li>
<li>C++</li>
<li>Java</li>
</ul>

</body>
</html>

ii) Ordered list

The ordered list is a list of items which must follow some specific sequence. The ordered
list starts with <ol> and each list item starts with <li>
<ol>
<li>....</li>
<li>.....</li>
</ol>
Attributes
i)type=1|a|A|I|i
ii)start=value
<html>
<head>
<title>ordered </title>
</head>
<body>
<h1>Programming Language</h1>
<ol type="A">
<li>C</li>
<li>C++</li>
 <li>Java</li>

</ol>
</body>
</html>

iii)Definition list:
The list is not numbered or bulleted.<DL>....</DL> tag is used for definition list..It contains
one or more definition terms<DT>...</DT> and definition description terms<DD>....</DD>
<DL>
<DT>.....</DT>
<DD>.....</DD>
</DL>
<html>
<head>
<title>Description list</title>
</head>
<body>
<dl>
<dt>Term one</dt>
<dd>ONE</dd>
<dt>Term two</dt>
<dd>TWO</dd>

</dl>
</body>
</html>

Tables:
 Tables are used to organize data into rows and columns in a web document.
 It is matrix of rows and columns, in which each intersection of a row and a column is called
a cell.
 HTML tables are created using <table> tag, in which <tr> defines individual table row.Data
cells conatin individual pieces of data and is defined eith <td> element in each reow.
 Number of rows is determined by number of <tr>element. Number of columns is determined
by maximum number of <td> element within any row.
 <thead> contains the header information such as column name
 <tfoot> contains the footer information like calculation results
 <tbody> contains the table body

<table>
<tr>
<td>data</td>
<td> data</td>
</tr>
<tr>
<td>data</td>
<td> data</td>
</tr>
</table>
Demo1

<html>
 <head>
<title>Table</title>
</head>
<body>
<table border>
<caption>Student Table</caption>
<tr>
<th> REG NO</th>
<th> MARKS</th>
</tr>
<tr>
<td>1</td>
<td>78</td>
</tr>
<tr>
<td>2</td>
<td>87</td>
</tr>

</table>
</body>
</html>

Demo2:
Table
<html>
<head>
<title> Table</title>
 </head>
<body>
<h1> Fruits</h1>
<table border="1">
<caption><strong> Price of the fruit</strong></caption>
<thead>
<th> Fruit</th>
<th> Price</th>
</thead>
<tfoot>
<th> Total</th>
<th> 100</th>
</tfoot>
<tbody>
<tr>
<td> Apple</td>
<td> $80</td>
</tr>
<tr>
<td> Orange</td>

<td> $20</td>
</tr>
</tbody>
<table>
</body>
</html>
Table heading:
Table heading can be defined using <th> tag replacing <td>.The content of <th>element is
boldface and centre horizontally.
Caption element:
define title or explanation for the table.It is shown at the top of the table.It have align
attribute.<caption align=”bottom”>Table1</caption>

<table>element attributes

<table>tag with no attributes yields borderless left aligned table.

Attribute
1. align : By default left. Values are left, right, center
2. border :used to put a border across a cell.<table border=”1”>.Value 0 turns off the
border.
3. cellspacing : It determines amount of space between two adjacent cell .or between side
of the cell and border of the table. By default 3 pixels.
<table border=”1” cellspacing=”4”> </table>
4. cell padding attribute: It determines the distance between cell border and content
within the cell.
5. bgcolor : specify color for whole table or just for one cell.
6. background :specify background image for whole table.
7. bordercolor, bordercolordark ,bordercolorlight :specifies colors to use borders of
the table
<tr> table row attributes
1. align: horizontal alignment for the content of table cells. value: left, right, center, justify.
2. valign: vertical alignment for the content of table cells. value: top, middle, bottom.
3. bgcolor:sets the color for the table, overriding any value set for the table.
4. bordercolor,bordercolordark,bordercolorlight:specify color to use border of the row
Table heading and table data attributes<th>and <tr>
1. colspan:merge two or more columns into a single column.
2. rowspan: merge two or more rows,<th rowspan=”3”>.
The other attributes are align, valign, bgcolor, bordercolor, bordercolordark,
bordercolorlight, height, width

<html>
<head>
<title>Table</title>
</head>
<body>
<table border="1" cellspacing="5">
<tr>
<th colspan="2">student details</th>
</tr>
<tr>
<th> REG NO</th>
<th> MARKS</th>
</tr>
<tr>
<td>1</td>
<td>78</td>
 </tr>
<tr>
<td>2</td>
<td>87</td>
</tr>

</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>HTML rowspan Attribute</title>
</head>
<table border align=”center” >
<tr>
<th colspan="5">Number of Students</th>
</tr>
<tr>

<td rowspan="3">III </td>

<th> section</th>
<th>Boys</th>
<th>Girls</th>

<tr>
<td>A</td>
<td>45</td>
<td>50</td>
 </tr>
<tr>
<td>B</td>
<td>45</td>
<td>50</td>

</tr>
<tr>
<td rowspan="3">IV</td>
</tr>
<tr>
<td>A</td>
<td>45</td>
<td>50</td>

</tr>
<tr>
<td>B</td>
<td>45</td>
<td>50</td>

</tr>

</table>
</body>
</html>

Frames:

HTML Frames are used to divide our browser window into multiple sections where each section can
load separate HTML documents. we can display more than one HTML document in the same
browser window.

Each HTML document is called a frame, and each frame is independent of the others. A collection
of frames in the browser window is said to be frameset.

The disadvantages of using frames are:

 Frames are not expected to be supported in future versions of HTML
Frames are difficult to use. (Printing the entire page is difficult).
The web developer must keep track of more HTML documents

Frame 1 Frame2

Frame3

HTML Element :< frameset>.........</frameset>

The frameset element holds one or more frame elements. Each frame element can hold a separate
document.

The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW
MUCH percentage/pixels of space will occupy each of them.

Attributes: rows, cols, frameborder, border, framespacing, bordercolor.

rows: The row attribute divides the browser window of the frame horizontally

 <frameset rows=”60,*”> : divides frame into two row. One row is of 60 pixels and other
row occupies remaining of the window

cols: The cols attribute divides the browser window of the frame vertically.

 <frameset cols=”60,*”>: divides frame into two columns. One column is of 60 pixels and
other occupies remaining of the window.

 <frameset rows=”20%,30%,50%” cols=”30%,*”> : divides frame into three row and two
column.

The size of the row and column can be integer ( pixels).integer followed by %(percentage of
total available space) and * (whatever space left).

Note: Frameset entries should always specify atleast two rows or column.

Note: HTML frames can be used to divide our browser window into multiple sections where each
section can load a separate HTML document.
Frameborder: indicates whether border will be drawn between frame cells. frameborder=0
indicates no border between frame cells

A Frameset element can contain nested FRAMESET that futher subdivide the window or it can
contain frame element that reference the url of the actual document that will be displayed in the
frame cell border: width of the border of each frame in pixels .A value 0 means no border.

<frameset cols=”60,*” border=”4”>

Framespacing:An amount of space between frames in the frameset.

<frameset cols=”60,*” border=”4 framespacing=”10”>

The HTML frame Element

The <frame> tag defines one particular window (frame) within a frameset. In the example
below
we have a frameset with two columns
To specify the content of framecell
<frame src=” “/> is used

Attributes
1. src :specify the file name should be loaded in the frame.
2. name : name of the frame. It is used when we create links in one frame and loads a page in
another frame.
3. noresize: By default we can resize the frame by clicking and dragging on borders of frame.
It prevents from resizing the frame.
4. scrolling: This attribute controls the appearance of scrollbars that appear on frame.
values: yes,no,auto
scrolling=”yes” (always have scrollbars)
scrolling=”no”(no scrollbar)
scrolling=”auto”(frame have scrollbar if required)
5. frameborder : specifies whether or not borders of the frame are shown.It overrides the
value given in the frameborder attribute on the <frameset> tag.
6. marignwidth : specifies left and right cell margin
7. mariginheight: specifies top and bottom cell margin
Basic Notes - Useful Tips
Note: Add the <noframes> tag for browsers that do not support frames.
Important: we cannot use the <body></body> tags together with the <frameset></frameset> tags
However, if you add a <noframes> tag containing some text for browsers that do not support frames,
we will have to enclose the text in <body></body> tags
Frame.html

<html>
<head>
<title>Frame</title>
</head>

<frameset cols="60%,*" border="20">

<frame src="ordered.html"/>
<frame src="unordered.html"/>
</frameset>

</html>

ordered.html
<html>
<head>
<title>ordered </title>
</head>
<body>
<h1>Programming Language</h1>
<ol type="A">
<li>C</li>
<li>C++</li>
<li>Java</li>

</ol>
</body>
</html>
unordered.html
<html>
<head>
<title>unordered list</title>
</head>
<body>
<h1>programming language</h1>
<ul type="circle">
<li> C</li>
<li>C++</li>
<li>Java</li>

</ul>

</body>
</html>

Use of link (use of frame name and target attribute):

i) Use of hyperlink in one frame and display the target information within the same
frame or different frame.
 ii) One use of frame is writing html documents that provide navigation tools.i.e place
navigation bar in one frame and load main page into a separate frame

Demo:

Create a Frame

<html>
<head>
<title>Frames Document1</title>
</head>
<frameset cols="40%,50%">
<frame src="x.htm">
<frameset rows="25%,25%">
<frame src="y.htm">
<frame src="z.htm">
</frameset>
</html>
<html>
<head>
<title>Frames Document2</title>
</head>
<frameset cols="40%,60%">
<frame src=" a.html">
<frameset rows="20%,20%,20%">
<frame src="x.html">
<frame src="y.html">

<frame src="z.html">
</frameset>
</html>

<html>
<head>
<title>Frames Document3</title>
<head>
<frameset rows="30%,30%,30%">
<frame src="x.html">
<frame src="y.html">
<frame src="z.html">
</frameset>
</html>

<html>
<head>
<title>Frames Document4</title>
</head>
<frameset rows="50%,50%">
<frameset cols="25%,25%">
<frame src="y.html">
<frame src="z.html">
</frameset>
<frame src="x.html">
</frameset>
</html>
Frame Demo using link:

Framedemo.html

<html>
<head>
<title> frame set</title>
</head>
<frameset cols="200,*">
<frame src="menu.html" name="menupage"/>
<frame src="main.html" name="mainpage"/>
</frameset>
</html>
menu.html
<html>
<body bgcolor="yellow">
<ol>
<li> <a href="javas.html" target="mainpage"> Java script </a>
<li> <a href="ser.html" target="mainpage"> Servlet </a>
<li> <a href="php.html" target="mainpage"> php</a>
<ol>
</body>

</html>
main.html

<html>
<body bgcolor="red">
<h1> <font color="olive">Click any link to show results</font></h1>
</body>
</html>
javas.html

<html>
<head>
<title> Javascript</title>
 </head>
<body bgcolor="pink>
<h1> Welcome to the tutorial of Java script</h1>
<p> <font color="blue"><b> Java script</b> is a client side programming
language</font></p>
</body>
</html>

ser.html
<html>
<head>
<title> Javascript</title>
</head>
<body color="olive">
<h1> Welcome to the tutorial of Servlet</h1>
<p> <font color="green"><b> Servlet</b> is a server side programming
language</font></p>
</body>
</html>
php.html
<html>
<head>
<title> Javascript</title>
</head>
<body bgcolor="violet">
<h1> Welcome to the tutorial of PHP</h1>
<p> <b> PHP</b> is a server side programming language>/p>
<p> Expansion of PHP is HyperText Preprocessor</p>
</body>
</html>
Framedemo.html
Clicking Javascript link : javas.html

Clicking servlet link: ser.html

Clicking php link: php.html

Forms:
 HTML form is used to allow a user to input data on a webpage.
 HTML forms are used to pass data to a server
 Form is a layout by which user interacts with the web page.
 An HTML form can contain input elements like text fields, checkboxes, radio-buttons, and
menu, submit buttons and more. A form can also contain select lists, textarea, fieldset,
legend, and label elements.
 <form> .....</form> tag is used to create a form.
<form>

input elements

</form>
Why forms

Web understands that a user is sometimes required to provide his own input. These types of
interaction include:

 signing up and logging in to websites

 entering personal information (name, address, credit card details…)

 filtering content (by using dropdowns, checkboxes…)

 performing a search

 uploading files

To accommodate for these needs, HTML provides interactive form controls:

 text inputs (for one or multiple lines)

 radio buttons

 checkboxes

 dropdowns

 upload widgets

 submit buttons
form Attributes
1. action: contains an address that defines where the form information will be sent.
2. method: can be either GET or POST and defines how the form information will be sent
Have two values: get: data appended at the end of url ,post: data sent on separate line of
the body

S.No. GET POST

1. Get method passes the request parameter POST method passes request parameter in
in the URL String.so less secure request body.so more secure
2 GET method is visible to everyone (it POST method variables are not displayed in
will be displayed in the browser's the URL.
address bar)
3 Get method can only pass a limited Post method can pass a large amount of data.
amount of data.
Get method facilitates bookmarking and Post method doesn’t provide such facilities
cache storing.
3. GET method should not be used when POST method used when sending passwords
sending passwords or other sensitive or other sensitive information.
information.
4 Easier to hack More difficult to hack
5 Since the get method doesn’t involve a Slower than the get method.
large amount of data, it is fast.
6 Get method is the default method for Post method has to be specified and is not the
HTML form submission. default method for an HTML form
submission.

eg:<form action=”http://www.example.org” method=”get”>

</form>
 All the form elements are contained in div, p or table elements.
HTML forms: Label
 Label is used to associate text with another element of the form.
HTML forms: The Input element
The <input> element is used to select user information.
<input /> element specifies field where the user can enter the data.
An <input> element can vary in many ways, depending on the type attribute.
An <input> element can be of type text field, checkbox, password, radio button, submit button, and
more
Attibute of input element
1. type =text|password|checkbox|radio|submit|reset|file|hidden|image|button
2. name=Assigns the name for the control
3. value =initial value of the control. It is optional except when the type attribute has the value
"radio" or "checkbox".
4. size =initial width of the control. The width is given in pixels except when type attribute has
the value "text" or "password". In that case, its value refers to the (integer) number of
characters.
5. maxlength = When the type attribute has the value "text" or "password". specify the
maximum number of characters a user can enter into the text box
6. checked= When the type attribute has the value "radio" or "checkbox", this boolean attribute
specifies that the button is on.
7. Placeholders: Text inputs can display a placeholder text, which will disappear as soon as
some text is entered.
A)Text Fields:
<input type="text"> defines a one-line input field that a user can enter text into.
<html>
<head>
<title>form</title>
</head>
<body>
<h1> Sign up</h1>
<form>
<label>Enter the name:</label> <input type="text"
placeholder="username"/></p>
<p>Enter password :< input type="password"
placeholder="password"/>
</form>
</body>
</html>
B) Button:
Three types of buttons
1. submit buttons: When activated, a submit button submits a form. A form may
contain more than one submit button. A submit button is used to send the form
data to a web server. When submit button is clicked the form data is sent to the file
specified in the form's action attribute to process the submitted data.
<input type=”submit” value=”SUBMIT”/>
2. reset buttons: When activated, a reset button resets all controls to their initial
values.The values never transmitted to server side.
<input type=”submit” value=”SUBMIT”/>
3. push buttons: Push buttons have no default behaviour. Each push button may have
client-side scripts associated with the element's event attributes.
<input type=”button” value=”add”/>

Attributes:
i) name : name of the button. If the name is supplied, then only the name and
value of button was actually clicked are sent.
ii) value :change the value of the button.
iii) disabled: To disable a button. It does not receive the input.
Demo
<html>
<head>

<title>form</title>
</head>
<body>
<h1> Sign up</h1>
<form >
<p>Enter the name:<input type="text" name="t1"/></p>
<p>Enter password:<input type="password" name="p1"/>
<p><input type="Submit" value="Sign In" />
<input type="reset" value="cancel" />
<input type="button" value="click me" />

</form>
</body>
</html>

C. Text Area Element

<textarea>....</textarea> element allows user to enter multiple lines of data. The input
element is an empty element (no end tag), while textarea is not empty. Any character data placed
between start and end tag of textarea is displayed as default text in the textarea box when page is
loaded.

Attributes:
 i) rows: This attribute specifies the number of visible text lines. Users should be able to
enter more lines
ii) cols: This attribute specifies the visible width in average character widths
iii) name: name of text area
Demo
<html>
<head>
<title>form</title>
</head>
<body>
<h1> Feed Back</h1>
<form >
Enter comments:<textarea rows="3" cols="30"> </textarea>
<p><input type="button" value="send"/>

</form>
</body>
</html>

D) Checkbox Checkboxes let a user: checkbox select ONE or MORE options of a limited
number of choices. Checkbox allows multiple options can be selected. Several checkboxes in a form
may share the same control name. Checkboxes (and radio buttons) are on/off switches that may be
toggled by the user. Clicking a checkbox is optional

Attribute: checked. By default, a checkbox input is unchecked.

Checkbox is checked when the page is loaded.
The attribute name/value pair is send to the server, if the user checks the
corresponding
checkbox.
<html>
<head>
<title>form</title>
</head>
<body>
<h1> Welcome to Study center</h1>
<form >
<h4>Select The course</h4>
</br><input type="checkbox" name="cor" value="Javascript"/> Javascript</br>
<input type="checkbox" name="cor" value="python"/> python</br>
<input type="checkbox" name="cor" value="PHP"/> PHP</br>
<input type="checkbox" name="cor" value="HTML and CSS"/>HTML and
CSS</br>
<p><input type="submit" value="Send"/>
</form>
</body>
</html>

E) Radio buttons

 Radio buttons let a user select ONLY ONE one of a limited number of choices:.
 The input tag specifes type attribute as “radio”.
 one or more radio button have same value for their name attribute
  Checked: The radio button is initially checked when the page is initially loaded. choosing
one of the radio buttons is mandatory.
<input type=”radio” name=”color” value=”red” checked/>RED
Demo
<html>
<head>
<title>form</title>
</head>
<body>
<h1> Registeration</h1>
<form >
Select The Gender :
<p> <input type="radio" name="gend" value="MALE"/> Male
<input type="radio" name="gend" value="FEMALE"/>Female
<p><input type="submit" value="Register"/>
</form>
</body>
</html>

F) Combo box or List Box or Menu or Select Box:

If the number of options to choose from takes up too much space, we can use <select>
dropdown menus
A select box is a dropdown list of options that allows user to select one or more option from
a pull-down list of options.
Select box is created using the <select> element and <option> element.
The option elements within the <select> element define each list item.
 The <select>......</select> element presents set of options to the user.
The <option>.....</option> element specifies the menu choices and is valid inside a <select>
element
<select name=”name”>
<option value=”value1”>choice1</option>
<option value=”value2”>choice2</option>
<option value=”value3”>choice3</option>
</select>
Attributes of <select> element:
i).name: indentifies the menu
ii) size: gives the number of visible rows
iii) multiple: multiple entries can be selected simultaneously
Attributes of <option> element:
i) selected: It specifies particular menu item shown is selected when the page is loaded
ii) value: the value is send the serevr,if current option is selected
<html>
<head>
<title>Combo or menu or listbox</title>
</head>
<body>
<form>
<h1>Select the programming language</h1>
<select name="lang">
<option value="c">C</option>
<option value="c++">c++</option>
<option value="java">Java</option>
</select>
</form>
</body>
</html>
Multiple choice dropdown menus

If we add the multiple attribute, you can provide the ability to select multiple choices.

<html>
<head>
<title>Combo or menu or listbox</title>
</head>
<body>
<form>
<h1>Select the programming language</h1>
<select name="lang" multiple>
<option value="c">C</option>
<option value="c++">c++</option>
<option value="java">Java</option>
</select>

</form>
</body>
</html>
Demo2:

<html>
<head>
<title>Registeration form</title>
</head>
<body>
<h1> Register the following details</h1>
<form action="/signup" method="POST">
<fieldset>

<p> Title<input type="radio" name="title" value="mr"> Mr

<input type="radio" name="title" value="mrs"> Mrs
<input type="radio" name="title" value="miss">Miss
<p>First name<input type="text" name="fname" placeholder="first_name">
<p>Last name <input type="text" name="lname"placeholder"last_name">
<p>Email<input type="email" name="em" placeholder="email">
<p>Phone number<input type="tel" name="telp" placeholder="phone">
<p>Password <input type="password" name="pass"
placeholder="password">
<p>Confirm your password
<input type="password" name="pass1"
placeholder="password_confirm">
<p>Course
<select>
<option>C</option>
<option>C++</option>
<option>Java</option>
<option>HTML&CSS</option>
<option>Java script</option>
<option>Servlet</option>
<option>PHP</option>
<option>Python</option>
</select>
<p><input type="checkbox" value="terms">
 I agree to the <a href="/terms">terms and conditions</a>
<p> <button>
Sign up
</button>
</fieldset>
</form>
</body>

</html>

Demo2.html

<html>
<head>
<title>Contact Form</title>
</head>
<body>
 <h2>Contact Us</h2>
<p>Please fill in this form and send us.</p>
<form action="process-form.php" method="post">
<p> Name:^*
<input type="text" name="name" id="inputName">
<p> Email:^*
<input type="text" name="email" id="inputEmail">
<p> Subject:
<input type="text" name="subject" id="inputSubject">
<p>Message:^*
<textarea name="message" id="inputComment" rows="5"
cols="30"></textarea>
<p><input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
Demo3: The HTML <fieldset> element is used to group several controls as well as labels (<label>)
within a web form.
<html>
<head>
<title> form validation</title>
</head>
<body>
<div align="center" style="color:brown">
<form name="myform" onSubmit="validate()">

<h1> Registration form</h1>

<p>Name: <input type="text" name="ntxt"/></p><label>^*minimum
five
charctes</label>
<p> Password:<input type="password" name="passtxt" /></p>
<p> Re-typepassword<input type="password" name="passtxt1"/></p>
<p> Gender:
Male:<input type="radio" name="g" value="M"/>
female:<input type="radio" name="g" value="F"/>
<p> C:<input type="checkbox" name="c" value="c"/>
C++:<input type="checkbox" name="c" value="c++"/>
Java:<input type="checkbox" name="c" value="java"/>
<p> <input type="submit" value="Submit"/>
<input type="reset" value="RESET"/></p>
</form>
</div>
</body>
</html>
Other values of type attribute:

password,image,file,email,color,hidden,date,datatime,month,number,time,url,week,search
HTML Forms - The Input Element
The most important form element is the input element.

The input element is used to select user information.

An input element can vary in many ways, depending on the type.attribute. An input
element can be of type text field, checkbox, password,radio button, submit button, and more.
Text Fields
<input type="text" /> defines a one-line input field that a user can enter text into:
<form>
First name:<input type=”text” name=’firstname”><br/>
Last name:<input type=”text” name=’lastname”><br/>
</form>
How the HTML code above looks in a browser:
First name: Last name:
Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

Password Field
<input type="password" /> defines a password field:
<form><input type=”password” name=”pass”/>
</form>
How the HTML code above looks in a browser:
Password:
Note: The characters in a password field are masked (shown as asterisks or circles).

Radio Buttons
<input type="radio" /> defines a radio button. Radio buttons let a
user select ONLY ONE one of a limited number of choices:
<form> <input type="radio" name="sex" value="male" />
Male<br /> <input type="radio" name="sex" value="female" />
Female </form>
Checkboxes

<input type="checkbox" /> defines a checkbox. Checkboxes let a user

select ONE or MORE options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input
type="checkbox" name="vehicle" value="Car" /> I have a car </form>
Submit Button
<input type="submit" /> defines a submit button.
A submit button is used to send form data to a server. The data is sent to
the page specified in the form's action attribute. The file defined in the
action attribute usually does something with the received input:
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
How the HTML code above looks in a browser:
Username:
If you type some characters in the text field above, and click the "Submit"
button, the browser will send your input to a page called
"html_form_action.asp". The page will show you the received input
Scripting basics: Client side scripting and server side scripting

Script:

A script is a program or sequence of instruction that is interpreted or carried out by another

program rather than by a computer processor.

Client side scripting:

Client-side scripting is a computer programs on the web which are executed on the client
side by the user web browser. It defines operation to be performed on client machine.

Various web browsers are Internet Explorer, Mozilla Firefox, opera, Google chrome

XHTML, java script, vbscript

Server side scripting:

Server side scripting is a computer program runs on the server to give response to the client
request. It defines operation to be performed on server machine.
The web server are IIS(Internet Information systems),Apache Tomcat
Servelt, JSP, PHP, ASP, pearl

JAVA SCRIPT

Java script is developed by Brendan Eich at Netscape

Java script is a client side which makes the web page more dynamic and interactive.

 Java script is embedded directly into HTML pages to add interactivity and dynamic to
HTML page

 Javascript is an interpreted language.

 Web browser contains a java script interpreter which process the commands written in java
script

 Java script validate form data before it is submitted to the server

 Javascript can read and write HTML elements or change the content of HTML elements.

Introduction to Javascript:

The HTML tag <script> is used to insert a java script into a HTML page.

We can embed the JavaScript directly or indirectly in the XHTML document anywhere in the
<head>...</head> and <body>....</body>

I) Dirctly embedding

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Java script</title>
<script type="text/javascript">
document.write("Web programming");
</script>
</head>
 <body>

</body>
</html>

ii) Indirectly embedding: The script is written in some other file and embed the script in HTML
document.

1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Java script</title>

<script type="text/javascript" src="first.js">

</script>
</head>
<body>

</body>
</html>

first.js

document.write("Web programming");

The document.write command is a standard java script command for writing output to a page
document: object represents the XHTL document the browser currently displaying

writeln:instructs the browser to display the string.

Scripts in the <head>:

Scripts to be executed when they are called or when an even is triggered, go in the head section

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>java script</title>
<script type="text/javascript">
function message()
{
alert("The alert is called")
}
</script>
</head>
<body onload="message()">

</body>
</html>
Scripts in the <body>:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Java script</title>
</head>
<body>
<script type="text/javascript">
alert("Web progrmming");
</script>
</body>

</html>

The popup boxes

i)alert box
ii)confirm box
iii)prompt bo
i)alert box:
i) An alert box is used when we want to make sure information comes through to the user
ii) When an alert box pops up,the user will have to click “OK” to proceed.
ii) confirm box:
i) A confirm box is used if we want the user to verify or accept something
ii) When a confirm box pops up, the user will have to click either ”ok” or ”cancel” to proceed.
iii)If the user clicks “ok”, the box returns true. If the user clicks “cancel”, the box returns false.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>conform</title>
</head>
<body>
<script type="text/javascript">
window.confirm("do you want contnue?");
</script>
</body>
</html>

iii) prompt box:

i)It is used if we want the user to input a value. It is a popup box which displays a text window in
which the user can enter something.
ii) It has two buttons “ok” and “cancel”. if the user clicks “ok” the box returns the input value. if the
user clicks “cancel “the box returns null.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>prompt</title>
 </head>
<body>
<script type="text/javascript" >
var a,b;
a=window.prompt("Enter Integer A");
b=window.prompt("Enter Integer B");
a=parseInt(a);
b=parseInt(b);
c=a+b;
document.write("The sum is"+c);
</script>
</body>
</html>
Input :Assignment

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>prompt</title>
</head>
<body>
<script type="text/javascript" >
var a=90,b=4;
c=a+b;
document.write("The sum is"+c);
</script>
</body>
</html>

Literals:

Literals are the string of character that directly represents values in the language.

i) numeric literals: numbers can be written as integer or decimal or scientific notation.

Eg:10,20.3,-12.4e12 ,oxA23(hexadecimal)
ii)String literals: sequence of character .It can be written in a double quotes(“ “ ) or in
 single quotes(‘ ‘) Eg:”web”,’webb’
iii)Boolean literals: true or false.
iv)null :null means no value. The null value can be assigned by using reserved word null
v)undefined: A variable is declared and not assigned any value to it is an undefined value

Variables and Data types

variables

 Variables hold the data values.

 Identifiers are name given to the variables.
 Variable names are begin with either letter or underscore or dollar sign and is followed by
any number of letters, underscore, dollars and digits
 It should not start with digits.
 There is no limit on the length of the identifiers
Datatypes
In Java script,we can declare the variable using reserved word var. The value of this variable can
be anything ,it can be numeric, string, Boolean.
Every variable has a value and every value belongs to one of six javascript datatyps
1) Numeric value is of type Number
2) String value is of type String
3) True or false is of type Boolean
4) Null
5) Undefined-variable declared and not assigned a value
6) Every object is of type object
Eg var num=34.6;
var name=”web”;