Unit 1 HTML
Uploaded by
Mahek BhardwajUnit 1 HTML
Uploaded by
Mahek BhardwajWeb Development
Technology
Need of Subject
Web technology is the establishment and use of mechanisms that
make it possible for different computers to communicate and
share resources. Web technologies are infrastructural building
blocks of any effective computer network: Local Area Network
(LAN), Metropolitan Area Network (MAN) or a Wide Area
Network (WAN), such as the Internet. Communication on a
computer could never be as effective as they are without the
plethora of web technologies in existence.
Web Technologies
1) Mark-up languages including HTML, CSS, XML, CGI and HTTP;
2) Programming Languages and Technologies which help in creating applications
for the web; some of the languages are Perl, C#, Java and Visual Basic .Net;
3) Web servers and server technologies which facilitate request handling on a
network where different users have to share the same resources and communicate
with one another;
4) Databases, which are crucial for data and information storage on a computer
network; and
5) Business applications customized for specific execution of tasks on a network.
In short, web technology provides a platform for effective communication among
different users and devices on a computer network.
https://en.wikiversity.org/wiki/Web_Technologies_Master_List
INTRODUCTION TO HTML
HTML
HTML stands for Hyper Text Markup Language, which
is the most widely used language on Web to develop web
pages.
HTML was created by Berners-Lee in late 1991 but
"HTML 2.0" was the first standard HTML specification
which was published in 1995. HTML 4.01 was a major
version of HTML and it was published in late 1999.
Though HTML 4.01 version is widely used but currently
we are having HTML-5 version which is an extension to
HTML 4.01, and this version was published in 2012.
HTML
HTML stands for Hyper Text Markup Language
Hyper Text: is text displayed on a computer display or other
electronic devices with references (hyperlinks) to other text
which the reader can immediately access, or where text can be
revealed progressively at multiple levels of detail (also called
StretchText).
Markup : Markup languages are designed for the processing,
definition and presentation of text. The language specifies code
for formatting, both the layout and style, within a text file. The
code used to specify the formatting are called tags.
HTMLis a an example of a widely known and used markup
language
IMPLEMENTATION
WHERE WE WRITE CODE :
1.Text Editor
1.Wordpad (In Windows OS)
2.Gedit Text Editor (Ubundu in LINUX)
2.FrontPage or Dreamweaver
WHERE WE EXECUTE :
1.Double Click that HTML File. (or)
2.Right click – Open With Internet Explorer
HTML Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html >
Example Explained
The DOCTYPE declaration defines the document type to be
HTML
The text between <html> and </html> describes an HTML
document
The text between <head> and </head> provides information about
the document
The text between <title> and </title> provides a title for the
document
The text between <body> and </body> describes the visible page
content
The text between <h1> and </h1> describes a heading
The text between <p> and </p> describes a paragraph
HTML Page Structure
Example 2
<!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>
Basic Tags
Heading Tags
Any document starts with a heading. You can use
different sizes for your headings. HTML also has six
levels of headings, which use the elements <h1>, <h2>,
<h3>, <h4>, <h5>, and <h6>. While displaying any
heading, browser adds one line before and one line after
that heading.
Example 3
<!DOCTYPE html>
<html><head>
<title>Heading Example</title></head><body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Paragraph Tag
The <p> tag offers a way to structure your text into
different paragraphs. Each paragraph of text should go in
between an opening <p> and a closing </p> tag.
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title></head>
<body><p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
Output
Here is a first paragraph of text.
Here is a second paragraph of text.
Here is a third paragraph of text.
Line Break Tag
Whenever you use the <br /> element, anything following
it starts from the next line. This tag is an example of an
empty element, where you do not need opening and
closing tags, as there is nothing to go in between them.
The <br /> tag has a space between the characters br and
the forward slash. If you omit this space, older browsers
will have trouble rendering the line break, while if you
miss the forward slash character and just use <br> it is not
valid in XHTML
Example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body><p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
Output
Hello
You delivered your assignment ontime.
Thanks
Mahnaz
HTML Tags
HTML tags are keywords (tag names) surrounded by angle
brackets:
<tagname>content</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a slash before the
tag name
Link Tag
Html Links : Html links are defined with the <a> tag
Syntax : <a href="http://www.gmail.com">Gmail</a>
Example : <html>
<body>
<a href="http://www.gmail.com">Gmail</a>
</body>
</html>
Gmail If we click this link it goes to gmail
O/P : account
Image Tag
HTML Images :
HTML images are defined with the <img> tag.
Syntax : <img src "123.jpg" width="104" height="142" />
Example :
<html>
<body>
<img src="word.jpg" width="104" height="142" />
</body>
</html>
O/P:
Image mapping
Definition and Usage
The <map> tag is used to define a client-side image-map.
An image-map is an image with clickable areas.
The required name attribute of the <map> element is
associated with the <img>'s usemap attribute and creates a
relationship between the image and the map.
The <map> element contains a number of <area>
elements, that defines the clickable areas in the image
map.
Example
<!DOCTYPE html>
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>
Output
HTML RULES
HTML Rules (Lines) :
The <hr /> tag is used to create an horizontal rule (line).
Example:
<html><body>
O/P :
Exnora
<h3>Exnora</h3>
<hr /> Safety Exnora
<h3>Safety Exnora</h3>
</body></html>
HTML COMMENTS
HTML Comments :
Comments can be inserted in the HTML code to make
it more readable and understandable. Comments are ignored by the
browser and are not displayed.
Syntax : <!-- some text →
Example :
<html><body> O/P :
<!--It will not be displayed-->
<h3>Plant Trees </h3>
Plant Trees
</body></html>
HTML TEXT FORMATTING
Some Formatting Tags are 1.b-Bold, 2.i-Italic, 3.code-
Computer code,4.sub-Subscript & 5.sup-Superscript
<html><body>
<b>Confidence</b><br />
<big>Hardwork</big><br />
<i>Preseverance</i><br />
<code>Samsung CRT</code><br /> Implement it as a Exercise
This is<sub> subscript</sub><br /> (Practical)
This is<sup> superscript</sup>
</body></html>
HTML STYLE ATTRIBUTES
Tags Description
<center> Defines centered content
<font> Defines HTML fonts
<s> and <strike> Defines strikeout text
<u> Defines underlined text
Attributes Description
Align Defines the alignment of text
Bgcolor Defines the background color
Color Defines the text color
STYLE EXAMPLE
<html>
<h1 style="text-align:center">NATURE</h1>
<body style="background-color:yellow">
<p style="font-family:Purisa;color:red">Plant Tree</p>
<p style="font-family:times;color:red">Save Our Generation</p>
<p style="font-size:40">Value Our Environment</p>
</body> </html>
NATURE
Plant Tree
O/P : Save Our Generation
Value Our Environment
HTML TABLES
Tables are defined with the <table> tag.
A table is divided into rows (with the <tr> tag),
Each row is divided into data cells (with the <td> tag). The letters td
stands for "table data," which is the content of a data cell.
Headings in a table are defined with the <th> tag.
<table border="1">
<tr> <td>row 1, cell 1</td> row1,cell1 row1,cell2
<td>row 1, cell 2</td> </tr>
<tr> <td>row 2, cell 1</td>
row2,cell1 row2,cell2
<td>row 2, cell 2</td></tr>
</table>
TABLE FEATURES
1.Table with a caption :
<caption>My Caption</caption>
2.Table cells that span more than one row/column :
<th colspan="2">Telephone</th>
<th rowspan="2">Telephone:</th>
3.Cell padding :
<table border="1" cellpadding="10">
4.Cell spacing :
<table border="1" cellspacing="10">
5.Add a background color or a background image to a table :
<table border="1" bgcolor="red">
HTML LISTS
HTML supports ordered, unordered and definition lists.
Ordered Lists :
An ordered list is also a list of items. The list items are marked with
numbers.
An ordered list starts with the <ol> tag. Each list item starts with the <li>
tag.
Unordered Lists :
An unordered list is a list of items. The list items are marked with bullets
(typically small black circles).
An unordered list starts with the <ul> tag. Each list item starts with the
<li> tag.
Definition Lists :
A definition list is not a list of single items. It is a list of items (terms),
with a description of each item (term).
A definition list starts with a <dl> tag (definition list).
Each term starts with a <dt> tag (definition term).
Each description starts with a <dd> tag (definition description).
Unordered List : Ordered List : Definition List :
Think Positve 1.Fail Success
Fail First,
Never Depressed 2.Work Hard Happy
Keep Smiling 3.Win Smile Always
4.Teach
Centering Content
You can use <center> tag to put any content in the center of
the page or any table cell.
Output
This text is not in the center.
This text is in the center.
Horizontal Lines
Horizontal lines are used to visually break up sections of a
document. The <hr> tag creates a line from the current
position in the document to the right margin and breaks
the line accordingly.
Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body><p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
Output
Preserve Formatting
Sometimes you want your text to follow the exact format of how it
is written in the HTML document. In those cases, you can use the
preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag
will preserve the formatting of the source document.
Output
Nonbreaking Spaces
Suppose you want to use the phrase "12 Angry Men."
Here you would not want a browser to split the "12,
Angry" and "Men" across two lines:
An example of this technique appears in the movie "12
Angry Men." In cases where you do not want the client
browser to break text, you should use a nonbreaking space
entity instead of a normal space.
Example
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie
"12 Angry Men."</p>
</body>
</html>
Output
An example of this technique appears in the movie
"12 Angry Men."
HTML Elements
An HTML element is defined by a starting tag. If the element
contains other content, it ends with a closing tag, where the element
name is preceded by a forward slash as shown below with few tags:
Start Tag Content End Tag
<p> This is paragraph content. </p>
<h1> This is heading content. </h1>
<div> This is division content. </div>
<br />
So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML
element. There are some HTML elements which don't need to be closed, such
as <img.../>, <hr /> and <br /> elements. These are known as void elements.
Nested HTML Elements
HTML 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 you want to set. For example, the
paragraph <p> element in the example carries an attribute
whose name is align, which you can use to indicate the
alignment of paragraph on the page.
The value is what you want the value of the property to be set
and always put within quotations. The below example shows
three possible values of align attribute: left, center and right.
HTML Images
Insert Image: <img src="Image URL" ... attributes-list/>
Set Image Location
Set Image Width/Height: width= “150”, height =“150”
Set Image Border: border =“3”
Set Image Alignment: align=“right”
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body> <p>Setting image Alignment</p>
<img src="/html/images/test.png" alt="Test Image"
border="3" width="150" height="100" align="right"/>
</body>
</html>
Output
HTML Text Links
A webpage can contain various links that take you
directly to other pages and even specific parts of a given
page. These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web sites
by clicking on words, phrases, and images. Thus you can
create hyperlinks using text or images available on a
webpage.
Linking Documents
A link is specified using HTML tag <a>. This tag is called
anchor tag and anything between the opening <a> tag
and the closing </a> tag becomes part of the link and a
user can click that part to reach to the linked document.
Following is the simple syntax to use <a> tag.
<a href="Document URL" ... attributes-list>Link
Text</a>
The target Attribute
This attribute is used to specify the location where linked
document is opened. Following are possible options:
Option Description
_blank Opens the linked document in a new window or tab.
_self Opens the linked document in the same frame.
_parent Opens the linked document in the parent frame.
_top Opens the linked document in the full body of the window.
targetframe Opens the linked document in a named targetframe.
Example
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="https://www.tutorialspoint.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href="/html/index.htm" target="_blank">Opens in New</a> |
<a href="/html/index.htm" target="_self">Opens in Self</a> |
<a href="/html/index.htm" target="_parent">Opens in Parent</a> |
<a href="/html/index.htm" target="_top">Opens in Body</a>
</body>
</html>
Output
Click any of the following links
Opens in New | Opens in Self | Opens in Parent |
Opens in Body
Use of Base Path
When you link HTML documents related to the same
website, it is not required to give a complete URL for
every link. You can get rid of it if you use <base> tag in
your HTML document header. This tag is used to give a
base path for all the links. So your browser will
concatenate given relative path to this base path and will
make a complete URL.
Example
<!DOCTYPE html>
<html>
<head>
<title>Base Tag Example</title>
<base href="https://www.tutorialspoint.com/">
</head>
<body>
<p>Click following link</p>
<a href="/html/index.htm" target="_blank">HTML Tutorial</a>
</body>
</html>
Now given URL <a href="/html/index.htm" is being considered as <a
href="https://www.tutorialspoint.com/html/index.htm".
Setting Link Colors
You can set colors of your links, active links and visited links using link,
alink and vlink attributes of <body> tag.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="https://www.tutorialspoint.com/"></head>
<body alink="#54A250" link="#040404" vlink="#F40633"><p>Click
following link</p>
<a href="/html/index.htm" target="_blank" >HTML Tutorial</a>
</body>
</html>
HTML Image Links
<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title> </head>
<body>
<p>Click following link</p>
<a href="https://www.tutorialspoint.com" target="_self">
<img src="/images/logo.png" alt="Tutorials Point"
border="0"/> </a>
</body></html>
Assignment
Create Tables as below:
Other useful commands for Tables
63
FRAME
64
The HTML that divide a browser
screen into two or more HTML recogniable
unique regions is called frame
HTML Frames
HTML frames are used to divide your browser window into
multiple sections where each section can load a separate
HTML document. A collection of frames in the browser
window is known as a frameset. The window is divided
into frames in a similar way the tables are organized: into
rows and columns.
Each HTML document is called a frame, and each frame is
independent of the others.
FRAME ADVANTAGES
66
• Certain parts of the interface are always on the screen
• Can avoid retyping common sections of multiple web
pages
• A convenient way to mix text oritented HTML with java
applets
Frame Disadvantages
67
The meaning of the “BACK” and “FORWARD”
buttons are be confusing
Poorly designed frames can get the user lost
Hard to find real URL of a page you want
Some old browsers do not support frame
Security
FRAME
68
Frame template
<html>
<frameset …>
</frameset>
</html>
Frameset attributes
69
COLS,ROWS
-a comma-separated list of pixel values, percentages
values
-Frameset entries should always specify at least two
rows or columns
<frameset rows=“50,10%”>
......
</frameset>
70
<html>
<body bgcolor="red">
atul
</boby>
</html>
a.html
71
72
<html>
<body bgcolor="GREEN">
hello
</body>
</html>
b.html
73
74
<html>
<frameset rows="50%,40%,10%">
<frame src="a.html">
<frame src="b.html">
<frame src="a.html">
</frameset>
</html>
75
<html> 76
<frameset rows="50%,20%,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">
</frameset>
</html>
77
78
<html>
<frameset rows="*,*,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">
</frameset>
</html>
79
80
<html>
<frameset cols="*,*,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">
</frameset>
</html>
81
82
<html>
<frameset rows="*,*,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">
</frameset>
<frameset cols="*,*,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">
</frameset>
</html>
83
84
<html>
<frameset rows="*,*,*">
<frameset cols="*,*,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">
</frameset>
</frameset>
</html>
85
<html>
<frameset rows="*,*,*">
86
<frameset cols="*,*,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">
</frameset>
<frame src="a.html">
<frame src="a.html">
</frameset>
</html>
87
<html>
<frameset rows="*,*,*" > 88
<frameset cols="*,*,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">
</frameset>
<frameset cols="*,*,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">
</frameset>
<frameset cols="*,*,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">
</frameset>
</frameset>
</html>
89
Frameset attribute:frameborder
90
INDICATES WHETHER BORDERS WILL
BE DRAWN BETWEEN FRAMES CELL
YES OR 1SPECIFIES BORDER;NO OR 0
SPECIFIES NO BORDER
<html>
<frameset rows="*,*,*" frameborder="0">
91
<frameset cols="*,*,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">
</frameset>
<frameset cols="*,*,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">
</frameset>
<frameset cols="*,*,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">
</frameset>
</frameset>
</html>
92
<html>
<frameset rows="*,*,*" frameborder="1">
93
<frameset cols="*,*,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">
</frameset>
<frameset cols="*,*,*">
<frame src="a.html" frameborder="0">
<frame src="a.html" frameborder="0">
<frame src="a.html">
</frameset>
<frameset cols="*,*,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">
</frameset>
</frameset>
</html>
94
<html> 95
<frameset rows="*,*,*" framespacing=“25” frameborder="0">
<frameset cols="*,*,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">
</frameset>
<frame src="a.html">
<frame src="a.html">
</frameset>
</html>
96
<html>
<frameset rows="*,*,*" framespacing="25"
97
frameborder="1">
<frameset cols="*,*,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">
</frameset>
<frame src="a.html">
<frame src="a.html">
</frameset>
</html>
98
99
<html>
<frameset rows="*,*,*" framespacing="25"
bordercolor="green">
<frameset cols="*,*,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">
</frameset>
<frame src="a.html">
<frame src="a.html">
</frameset>
</html>
100
101
<html>
<frameset rows="*,*,*" framespacing="25"
bordercolor="green" >
<frameset cols="*,*,*">
<frame src="a.html" noresize>
<frame src="a.html">
<frame src="a.html">
</frameset>
<frame src="a.html">
<frame src="a.html">
</frameset>
</html>
102
103
<html>
<frameset rows="*,*,*" framespacing="5" bordercolor="green" >
<frameset cols="*,*,*">
<frame src="a.html" marginwidth="150">
<frame src="a.html">
<frame src="a.html">
</frameset>
<frame src="a.html">
<frameset cols="*,*,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">
</frameset>
</frameset>
</html>
104
105
<html>
<frameset rows="*,*,*" framespacing="5"
bordercolor="green" >
<frameset cols="*,*,*">
<frame src="a.html" marginheight="50">
<frame src="a.html">
<frame src="a.html">
</frameset>
<frame src="a.html">
<frame src="a.html">
</frameset>
</html>
106
107
<html> 108
<frameset rows="*,*,*" framespacing="5“
bordercolor="green" >
<frameset cols="*,*,*">
<frame src="a.html" scrolling="yes">
<frame src="a.html">
<frame src="a.html">
</frameset>
<frame src="a.html">
<frame src="a.html">
</frameset>
</html>
109
<html> 110
<frameset cols="*,*,*">
<frameset rows="*,*,*">
<frame src="a.html" >
<frame src="a.html">
<frame src="a.html">
</frameset>
<frameset rows="*,*">
<frame src="a.html" >
<frame src="a.html" >
</frameset>
<frameset rows="*,*">
<frame src="a.html">
<frame src="a.html">
</frameset>
</frameset>
</html>
111
hyperlinking
112
<HTML>
<BODY>
< A H R E F = " B . H T M L " > AT U L < / A >
</BODY>
</HTML>
113
114
115
<html>
<frameset rows="50,50%">
<frame src="ftable.html">
<frame name="main" >
</frameset>
</html>
(nest.html)
116
<html>
<table border="5" align="center"
width="60%">
<tr>
<th> <a href="f:\frame\a.html" target="main"
>a</a></th>
<th> <a href="f:\frame\b.html"
target="main">b</a></th>
</table>
</html> (ftable.html)
117
118
119
120
DIFFERENCE BETWEEN DIV AND FRAME
A <div> is a generic container element for grouping and styling, whereas a <frame> creates
divisions within a web page and should be used within the <frameset> tag.
<DIV >
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used to group block-elements to format them with CSS.
Tips and Notes
Tip: The <div> element is very often used together with CSS, to layout a web page.
Note: By default, browsers always place a line break before and after the <div> element.
However, this can be changed with CSS.
<FRAME>
The <frame> tag is not supported in HTML5.
The <frame> tag defines one particular window (frame) within a <frameset>.
Each <frame> in a <frameset> can have different attributes, such as border, scrolling, the ability
to resize, etc.
Note: If you want to validate a page containing frames, be sure the <DOCTYPE> is set to either
"HTML Frameset DTD" or "XHTML Frameset DTD".
HTML - <span> Tag
The HTML <span> tag is used for grouping and applying
styles to inline elements.
There is a difference between the span tag and the div tag.
The span tag is used with inline elements whilst the div
tag is used with block-level content.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body> <p>This is a paragraph <span style = "color:#FF0000;">
This is a paragraph</span>This is a paragraph</p>
<p><span style = "color:#8866ff;"> This is another
paragraph</span></p>
</body> </html>
iframe
The <iframe> tag specifies an inline frame.
An inline frame is used to embed another document
within the current HTML document.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
<iframe src = "https://www.tutorialspoint.com/index.htm" width =
"100%"></iframe>
<p>Document content also go here...</p>
</body>
</html>
Output
DHTML
DHTML is NOT a language.
DHTML is a TERM describing the art of making dynamic
and interactive web pages.
DHTML combines HTML, JavaScript, DOM, and CSS.
HTML FORMS
HTML Forms are used to collect user input.
A form is an area that can contain form elements.
Form elements are elements that allow the user to enter information
like,
1. text fields,
2. textarea fields,
3. drop-down menus,
4. radio buttons,
5. checkboxes,
6. Action Attribute and the Submit Button,etc.
129
The Form has following attributes:
1:Name
2:Action
3:Method
Name is a property or attributes associated with each
object used 130
in a form.
Action attributes of the <form> and </form> tags
points to URL address of a program on the web
server that will process the form data captured and
being sent back.
Method attributes of a form is used to specify the
method used to send data captured from elements
back to the web server. The method used can be
either GET or POST.
131
The Get method sends the data captured by form
elements to the web server encoded into the URL,
which points to web server .The data captured in the
form elements is appended to the URL. This
technique is used when there is a small amount of
data that can be sent back to the web server.
By using this method 1024 bytes of data can be
sent.
132
The POST method sends the data captured by
form elements back to the web server as a stream
bit-stream of data .When there is a large amount
of data to be sent back to web server, this method
is used.
133
If the method attributes is not specified within the
<form>and </form> tags ,the default method used
by the browser to sent data back to the web server
is the GET method .HTML elements used to
capture form data are specified as attributes of the
<input> and </input> tags used within the <form>
tags.
134
Input:
The most used form tag is the <input > tag .The
type of input is specified with the type attributes.
135
<html>
<form>
First name:
<input type="text" name="fname">
<br>
Last name:
<input type="text" name="lname">
</form>
</html>
136
137
The form itself is not visible. Also note that in
most browsers, the width of the text field is 20
characters by default.
138
Type indicates what kind of elements should
appear on the form. Name assigns a name to go
with the input field or value that corresponds to the
<input> tag.
139
<html>
<form>
First name :
<input type="text" name="fname" size="50">
<br>
Last name:
<input type="text" name="lname">
</form>
</html>
140
141
<html>
<form>
First name :
<input type="text" name="fname" size="50“
maxlength=“3”>
<br>
Last name:
<input type="text" name="lname">
</form>
142
143
Password:
a password textfield in which each keystroke
appears as an dot.
144
<html>
<form>
First name :
<input type="password" name="fname" size="50"
maxlength="3">
<br>
Last name:
<input type="text" name="lname">
</form>
145
146
Button:
An HTML button elements is commonly used
form object. It is generally used to trigger
appropriate form level processing.
Syntax:
<input type=“button” name=“name of the
button” value=“buttonlabel”>
<html> 147
<form>
First name :
<input type="button" name="fname"
value="click">
<br>
Last name:
<input type="text" name="lname">
</form>
</html>
148
149
Submit button: The submit button is a special
purpose button. The submit button, submits,
the current data held in each data aware, form
elements, to a web server for further
processing.
The type SUBMIT tells the browser to bundle
the form data and pass it all to the CGI script
indicated by the ACTION attribute.
150
SUBMIT is the button the reader use to send in the
filled – out form, so a form without an <input>
field of type SUBMIT.
Syntax:
<input type=“submit” name=“name of submit
button” value=“default value”>
<html> 151
<form>
First name :
<input type="submit" name="fname"
value="click">
<br>
Last name:
<input type="text" name="lname">
</form>
</html>
152
153
Reset button: Creates a button labeled
“RESET” in your form .It is to clear a
form ,contents and start again .Be sure to place
it well away from other controls so that the
user does not clear the form by mistake.
Syntax:
<input type=“reset” name=“name of the
button” value=“label”>.
154
<html>
<form>
First name :
<input type="reset" name="fname” value=“reset">
<br>
Last name:
<input type="text" name="lname">
</form>
</html>
155
156
157
158
Checkbox:
A checkbox is an HTML form object behave as a toggle
switch .This means a checkbox can be in either one or
two states ,either checked or unchecked .A checkbox is
used to return a single specific value to a web server .
Either ‘T’ or ‘F’,’1’or ‘0’ can be returned depending
upon whether the checkbox is checked or unchecked .
Based on the value returned from the HTML form ,a
web server script can decide what further processing the
web server should do.
159
Syntax:
<input type=“checkbox” name=“name of the button”
value=“YES or NO”>
160
<html>
<form>
First name :
<input type="checkbox" name="fname"
value="no" >
<br>
Last name:
<input type="text" name="lname">
</form>
</html>
161
<html> 162
<form>
First name :
<input type="checkbox" name="fname"
value="YES" checked >
<br>
Last name:
<input type="text" name="lname">
</form>
</html>
163
164
<html>
<form>
first name:
<input type="button" name="fname" >
</form>
</html>
165
166
<html>
<form>
first name:
<input type=“reset" name="fname" >
</form>
</html>
167
168
<html>
<form>
first name:
<input type="Submit" name="fname" >
</form>
</html>
169
170
RADIO: The radio button element has two states
and can toggle between them. The one special
exception is that when several radio buttons are
combined into a radio button group only a single
radio button can be selected at any given time.
Giving the same name to all the radio buttons places
them in the same radio group.
171
SYNTAX :
<Input type = “Radio” Name = “Radiogroup Name”
Value = “Default Value” checked>
172
<html>
<form>
First name :
<input type="radio" name="fname" value="1" >
<br>
Last name:
<input type="text" name="lname">
</form>
</html>
173
174
<html>
<form>
First name :
<input type="radio" name="fname" value="1" >
<input type="radio" name="fname" value="1" >
<input type="radio" name="fname" value="1" >
<br>
Last name:
<input type="text" name="lname">
</form>
</html>
175
176
<html>
<form>
First name :
<input type="radio" name="fname" value="1" >
<input type="radio" name="fname" value="1" >
<input type="radio" name="fname" value="1" checked >
<br>
Last name:
<input type="text" name="lname">
</form>
</html>
177
178
Textarea element : The textarea element provides a
way to create a custom sized, multiple line, text
entry object, which can be placed on an HTML
form. It allows you to create input elements of more
or less arbitrary size on a form. Any text that appears
between the opening and closing tags is displayed
within the text area on screen. <TEXTAREA> takes
three important attributes:
Name = “text” – provides the identifier part of the all
important NAMEVALUE pair179 delivered to the server.
Rows = “number” – specifies the number of lines of text
that the text area will display on screen. If the number of
row is given as 5, if does not mean that the user can type
only 5 lines. It actually means that on screen, 5 rows will be
displayed at a time.
Cols = “number” – specifies the number of characters that
can fit onto any one row of the text area. This value also
sets the width of the textarea on screen. <TEXTAREA
Name = “Remark” Rows = “3” Cols = “45”.
180
<html>
<form>
<textarea rows="5" cols="30" >
hello class 3 year
</textarea>
</form>
</html>
181
182
Select and option elements : A select object or an HTML
form appears as drop-down list or a scrollable list of
selectable items. To conserve form space, the scrollable list
of selectable items is used. The list of items to choose from
is described between the <select>…. </select> tags using
the <option> tag. The <option> tag is not a paired tag. The
attribute of <select> tag are as follows :
183
Name= “text” – provides a name that is passed to the server as
the identifying portion of the name value pair for this element.
Size= “number” – controls the number of elements that the
pick list displays, even though you can still define more than
this number of elements, it keeps the size of the list more
manageable on screen.
184
Multiple – indicates that multiple selections
form a list are possible. If the flag is not
present in the <select> statement, then the
user can select only one element form the
pick list.
<html> 185
<form>
<select name ="atul" size="3" >
<option>french fries1
<option>french fries2
<option>french fries3
<option>french fries4
<option>french fries5
</select>
</form>
</html>
186
187
<html>
<form>
<select name ="atul" size="5" >
<option>french fries1
<option>french fries2
<option>french fries3
<option>french fries4
<option>french fries5
</select>
</form>
</html>
188
189
<html>
<form>
<select name ="atul" size="5" multiple>
<option>french fries1
<option>french fries2
<option>french fries3
<option>french fries4
<option>french fries5
</select>
</form>
</html>
190
191
Comments on HTML:
comments start with <!– and end with -- >
192
<!– comments -- >
<html>
<head>
<title>
comments
</title>
</head>
</body>
</html>
193
<html>
<fieldset>
<legend>
STUDENT
</legend>
<form>
Height <input type="text" size="3">
Weight <input type="text" size="3">
</form>
</fieldset>
</html>
194
195
HTML Input Attributes
Value
Readonly
Disabled
Size
Maxlength
Value
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
Readonly
<form action="">
First name:<br>
<input type="text" name="firstname" value="John"
readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
Disabled
<form action="">
First name:<br>
<input type="text" name="firstname" value="John"
disabled>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
Size
<form action="">
First name:<br>
<input type="text" name="firstname" value="John"
size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
Maxlength
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
You might also like
- Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSPNo ratings yetWeb Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP98 pages
- Introduction To Web Technology: Unit 3 HTMLNo ratings yetIntroduction To Web Technology: Unit 3 HTML49 pages
- It Spring Edutech: Chapter 1: Getting Started With HTMLNo ratings yetIt Spring Edutech: Chapter 1: Getting Started With HTML12 pages
- Tools For Identifying Biodiversity: Progress and Problems100% (2)Tools For Identifying Biodiversity: Progress and Problems480 pages
- Hyper Text Markup Language (HTML) : Unit 5No ratings yetHyper Text Markup Language (HTML) : Unit 512 pages
- Project "Build": Development MethodologiesNo ratings yetProject "Build": Development Methodologies16 pages
- GFGFG: Lorem Ipsum Is A Pseudo-Latin Text Used in Web Design, Typography, Layout, andNo ratings yetGFGFG: Lorem Ipsum Is A Pseudo-Latin Text Used in Web Design, Typography, Layout, and7 pages
- New Intelisys: High-End Gen-Set ControllerNo ratings yetNew Intelisys: High-End Gen-Set Controller4 pages
- Compact Performance CP Fieldbus Node 13: Programming and DiagnosisNo ratings yetCompact Performance CP Fieldbus Node 13: Programming and Diagnosis103 pages
- Approaches To Software Engineering - Isaac Computer ScienceNo ratings yetApproaches To Software Engineering - Isaac Computer Science9 pages
- Embedded Automotive Testing by - Xuan Thuong CaoNo ratings yetEmbedded Automotive Testing by - Xuan Thuong Cao30 pages
- Tamil Nadu - Esanjeevani National SummitNo ratings yetTamil Nadu - Esanjeevani National Summit23 pages