Вы находитесь на странице: 1из 215

INTRODUCTION

1
2
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of your browser window. If
you resize the browser window, the number of lines in this paragraph will change.
</p>
</body>
</html>
3
4
<html>
<body>

<p>
To break<br>lines<br>in
a<br>paragraph,<br>use the
br tag.
</p>

</body>
</html>

5
6
<html>
<body>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
<p>Note that your browser simply ignores your
formatting!</p>

</body>
</html>
7
8
<html>
<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 headinonly for headings. Don't use
them just to make something bold. Use other
tags for that.</p>
</body>
</html>g 6</h6>
<p>Use heading tags
9
10
<html>
<body>

<h1 align="center">This is heading 1</h1>

<p>The heading above is aligned to the center of this


page. The heading above is aligned to the center of
this page. The heading above is aligned to the center
of this page.</p>

</body>
</html>

11
12
<html>
<body>
<p>The hr tag defines a horizontal
rule:</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
</body>
</html>

13
14
<html>
<body>

<!--This comment will not be displayed-->


<p>This is a regular paragraph</p>

</body>
</html>

15
16
<html>
<body bgcolor="yellow">
<h2>Look: Colored
Background!</h2>
</body>
</html>

17
18
<html>
<body>
<b>This text is bold</b><br>
<strong>This text is strong</strong><br>
<big>This text is big</big><br>
<em>This text is emphasized</em><br>
<i>This text is italic</i><br>
<small>This text is small</small><br>
This text contains<sub>subscript</sub><br>
This text contains<sup>superscript</sup>
</body>
</html>

19
20
<html>
<body><pre>
This is
preformatted text.
It preserves both spaces
and line breaks. </pre>
<p>The pre tag is good for displaying computer
code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre></body>
</html>
21
22
<html>
<body>

<code>Computer code</code><br>
<kbd>Keyboard input</kbd><br>
<tt>Teletype text</tt><br>
<samp>Sample text</samp><br>
<var>Computer variable</var><br>
<p>
<b>Note:</b> These tags are often used to display
computer/programming code.</p>

</body>
</html> 23
24
<html>
<body>

<address>
Donald Duck<br>
BOX 555<br>
Disneyland<br>
USA
</address>

</body>
</html>

25
26
<html>
<body>

<p>
If your browser supports bi-directional override
(bdo), the next line will be written from the right
to the left (rtl):</p>

<bdo dir="rtl">
Here is some Hebrew text
</bdo>

</body>
</html>
27
28
Tables
Tables are defined with the <table> tag. A table is
divided into rows (with the <tr> tag), and each row is
divided into data cells (with the <td> tag). The letters
td stands for "table data," which is the content of a
data cell. A data cell can contain text, images, lists,
paragraphs, forms, horizontal rules, tables, etc.

<table border="1"> <tr> <td>row 1, cell 1</td>


<td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell
1</td> <td>row 2, cell 2</td> </tr> </table>

29
Tables and the Border Attribute
If you do not specify a border attribute the table will be
displayed without any borders. Sometimes this can be
useful, but most of the time, you want the borders to
show.
To display a table with borders, you will have to use the
border attribute:

<table border="1"> <tr> <td>Row 1, cell 1</td>


<td>Row 1, cell 2</td> </tr>
</table>

30
Headings in a Table
Headings in a table are defined with the <th> tag.

<table border="1"> <tr> <th>Heading</th>


<th>Another Heading</th>
</tr> <tr>
<td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr>
<tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td>
</tr>
</table>

31
Empty Cells in a Table
Table cells with no content are not displayed very well
in most browsers.

<table border="1"> <tr>


<td>row 1, cell 1</td>
<td>row 1, cell 2</td> </tr>
<tr> <td>row 2, cell 1</td>
<td></td>
</tr>
</table>

32
HTML TABLES

33
<html>
<body>
<h4>This table has no borders:</h4>
<table><tr>
<td>100</td> <td>200</td> <td>300</td>
</tr><tr>
<td>400</td> <td>500</td> <td>600</td>
</tr></table>
<h4>And this table has no borders:</h4>
<table border="0"> <tr>
<td>100</td> <td>200</td> <td>300</td>
</tr><tr>
<td>400</td> <td>500</td> <td>600</td>
</tr> </table> </body> </html>
34
35
<html> <body><h4>Table headers:</h4>
<table border="1">
<tr>
<th>Name</th> <th>Telephone</th> th>Telephone</th> </tr>
<tr>
<td>Bill Gates</td> <td>555 77 854</td>
<td>555 77 855</td> </tr> </table>

<h4>Vertical headers:</h4> <table border="1"> <tr>


<th>First Name:</th> <td>Bill Gates</td> </tr>
<tr>
<th>Telephone:</th> <td>555 77 854</td> </tr>
<tr>
<th>Telephone:</th> <td>555 77 855</td> </tr>
</table> </body> </html>

36
37
<html> <body>
<table border="1"> <tr>
<td>Some text</td> <td>Some text</td> </tr>
<tr>
<td></td> <td>Some text</td> </tr> </table>
<p> As you can see, one of the cells has no border. That is because it is empty. Try to
insert a space in the cell. Still it has no border. </p>
<p> The trick is to insert a no-breaking space in the cell. </p>
<p>No-breaking space is a character entity. If you don't know what a character
entity is, read the chapter about it. </p>
<p>The no-breaking space entity starts with an ampersand ("&"),
then the letters "nbsp", and ends with a semicolon (";")
</p>
<p> </p> </body> </html>

38
39
<html> <body>
<h4>
This table has a caption, and a thick border:
</h4>

<table border="6"> <caption>My Caption</caption>


<tr>
<td>100</td> <td>200</td> <td>300</td> </tr>
<tr>
<td>400</td> <td>500</td> <td>600</td> </tr>
</table>
</body>
</html>
40
41
<html> <body>
<h4>Cell that spans two columns:</h4>
<table border="1"> <tr>
<th>Name</th> <th colspan="2">Telephone</th> </tr>
<tr>
<td>Bill Gates</td> <td>555 77 854</td>
<td>555 77 855</td> </tr>
</table>
<h4>Cell that spans two rows:</h4>
<table border="1"> <tr>
<th>First Name:</th> <td>Bill Gates</td> </tr>
<tr>
<th rowspan="2">Telephone:</th> <td>555 77 854</td>
</tr>
<tr> <td>555 77 855</td> </tr> </table>
</body> </html>

42
43
<html> <body>
<table border="1"> <tr>
<td> <p>This is a paragraph</p>
<p>This is another paragraph</p> </td>
<td>This cell contains a table: <table border="1">
<tr> <td>A</td> <td>B</td> </tr>
<tr> <td>C</td> <td>D</td> </tr>
</table>
</td> </tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li> <li>bananas</li> <li>pineapples</li>
</ul> </td>
<td>HELLO</td> </tr> </table>
</body> </html>

44
45
<html> <body>
<h4>Without cellpadding:</h4>
<table border="1"> <tr>
<td>First</td> <td>Row</td> </tr>
<tr>
<td>Second</td> <td>Row</td> </tr> </table>

<h4>With cellpadding:</h4>
<table border="1" cellpadding="10"> <tr>
<td>First</td> <td>Row</td> </tr>
<tr>
<td>Second</td> <td>Row</td> </tr> </table>

</body> </html>

46
47
<html> <body>
<h4>Without cellspacing:</h4>
<table border="1"> <tr>
<td>First</td> <td>Row</td> </tr>
<tr>
<td>Second</td> <td>Row</td> </tr>
</table>

<h4>With cellspacing:</h4>
<table border="1" cellspacing="10"> <tr>
<td>First</td> <td>Row</td> </tr>
<tr>
<td>Second</td> <td>Row</td> </tr>
</table>

</body> </html>

48
49
<html> <body>
<h4>A background color:</h4>
<table border="1" bgcolor="red"> <tr>
<td>First</td> <td>Row</td> </tr>
<tr>
<td>Second</td> <td>Row</td> </tr>
</table>

<h4>A background image:</h4>


<table border="1" background="bgdesert.jpg">
<tr>
<td>First</td> <td>Row</td> </tr>
<tr>
<td>Second</td> <td>Row</td> </tr>
</table>

</body> </html>

50
51
<html> <body>
<h4>Cell backgrounds:</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background="bgdesert.jpg">
Second</td>
<td>Row</td>
</tr>
</table>

</body>
</html>

52
53
<html> <body> <table width="400" border="1"> <tr>
<th align="left">Money spent on....</th>
<th align="right">January</th>
<th align="right">February</th> </tr>
<tr>
<td align="left">Clothes</td> <td align="right">$241.10</td>
<td align="right">$50.20</td> </tr>
<tr>
<td align="left">Make-Up</td> <td align="right">$30.00</td>
<td align="right">$44.45</td> </tr>
<tr>
<td align="left">Food</td> <td align="right">$730.40</td>
<td align="right">$650.00</td> </tr>
<tr>
<th align="left">Sum</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th> </tr>
</table> </body> </html>
54
55
LIST

56
<html> <body> <h4>Numbered list:</h4> <ol>
<li>Apples</li> <li>Bananas</li> <li>Lemons</li>
<li>Oranges</li> </ol>
<h4>Letters list:</h4> <ol type="A">
<li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4> <ol type="a">
<li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li>
</ol>

<h4>Roman numbers list:</h4> <ol type="I">


<li>Apples</li> <li>Bananas</li>
<li>Lemons</li> <li>Oranges</li> </ol>

<h4>Lowercase Roman numbers list:</h4> <ol type="i">


<li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li>
</ol> </body> </html>
57
58
<html> <body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li> <li>Bananas</li> <li>Lemons</li>
<li>Oranges</li> </ul>

<h4>Circle bullets list:</h4> <ul type="circle">


<li>Apples</li> <li>Bananas</li>
<li>Lemons</li> <li>Oranges</li> </ul>

<h4>Square bullets list:</h4> <ul type="square">


<li>Apples</li> <li>Bananas</li>
<li>Lemons</li> <li>Oranges</li> </ul>

</body> </html>

59
60
<html> <body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html> 61
62
<html> <body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li> <li>Green tea
<ul>
<li>China</li> <li>Africa</li>
</ul> </li>
</ul>
</li>
<li>Milk</li>
</ul>

</body> </html>

63
64
<html>
<body>

<h4>A Definition List:</h4>


<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

</body>
</html>

65
66
<html>
<body background="background.jpg">

<h3>Look: A background image!</h3>

<p>Both gif and jpg files can be used as HTML backgrounds.</p>

<p>If the image is smaller than the page, the image will repeat itself.</p>

</body>
</html>

67
68
<html> <body> <p> An image <img src="hackanm.gif"
align="bottom" width="48" height="48"> in the text </p>

<p> An image <img src ="hackanm.gif"


align="middle" width="48" height="48"> in the text </p>

<p> An image <img src ="hackanm.gif"


align="top" width="48" height="48"> in the text </p>

<p>Note that bottom alignment is the default alignment</p>

<p> An image <img src ="hackanm.gif“ width="48" height="48"> in


the text </p>

<p> <img src ="hackanm.gif“ width="48" height="48">


An image before the text </p>
<p> An image after the text <img src ="hackanm.gif"
width="48" height="48"> </p> </body> </html>
69
70
<html> <body>
<p>
<img src ="hackanm.gif“ align ="left" width="48" height="48">
A paragraph with an image. The align attribute of the image is set to "left". The image
will float to the left of this text. </p>

<p>
<img src ="hackanm.gif"
align ="right" width="48" height="48">
A paragraph with an image. The align attribute of the image is set to "right". The
image will float to the right of this text.
</p>

</body> </html>

71
72
<html> <body>
<p>
<img src="hackanm.gif“ width="20" height="20"> </p>

<p>
<img src="hackanm.gif“ width="45" height="45"> </p>

<p>
<img src="hackanm.gif“ width="70" height="70"> </p>

<p>
You can make a picture larger or smaller changing the values in the "height" and
"width" attributes of the
img tag. </p>

</body> </html>

73
74
75
76
77
78
79
80
81
FRAME

82
The HTML that divide a browser
screen into two or more HTML
recogniable unique regions is
called frame

83
FRAME ADVANTAGES
•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

84
Frame Disadvantages
• 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

85
FRAME
• Frame template
<html>
<frameset …>

</frameset>
</html>

86
Frameset attributes
• 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>

87
<html>
<body bgcolor="red">
atul
</boby>
</html>

a.html

88
89
<html>
<body bgcolor="GREEN">
hello
</body>
</html>

b.html

90
91
<html>
<frameset rows="50%,40%,10%">
<frame src="a.html">
<frame src="b.html">
<frame src="a.html">

</frameset>
</html>
92
93
<html>
<frameset rows="50%,20%,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">

</frameset>
</html>

94
95
<html>
<frameset rows="*,*,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">

</frameset>
</html>
96
97
<html>
<frameset cols="*,*,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">
</frameset>
</html>

98
99
<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>

100
101
<html>
<frameset rows="*,*,*">
<frameset cols="*,*,*">
<frame src="a.html">
<frame src="a.html">
<frame src="a.html">
</frameset>
</frameset>
</html> 102
103
<html>
<frameset rows="*,*,*">
<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>
104
105
<html>
<frameset rows="*,*,*" >
<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>
106
107
Frameset attribute:frameborder

Indicates whether borders will be drawn between


frames cell
YES or 1specifies border;No or 0 specifies no border

108
<html>
<frameset rows="*,*,*" frameborder="0">
<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>
109
110
<html>
<frameset rows="*,*,*" frameborder="1">
<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>
111
112
<html>
<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>
113
114
<html>
<frameset rows="*,*,*" framespacing="25"
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>
115
116
<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>

117
118
<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>
119
120
<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>

121
122
<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>
123
124
125
<html>
<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>
126
127
<html>
<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>

128
129
hyperlinking
<html>
<body>
<a href="b.html">atul</a>
</body>
</html>

130
131
132
<html>
<frameset rows="50,50%">
<frame src="ftable.html">
<frame name="main" >
</frameset>
</html>

(nest.html)
133
<html>
<table border="5" align="center"
width="60%">
<tr>
<th> <a href="a.html" target="main"
>a</a></th>
<th> <a href="b.html"
target="main">b</a></th>
</table>
</html> (ftable.html)
134
135
136
137
138
139
FORMS

140
The web has moved from the age of static
pages to acting as a frontend for complex
application.
This makes it necessary for HTML to
support elements that are found in stand
along desktop application and link the
frontend HTML page with a backend
application that can be invoked
by clicking a button on the page.

141
A form is an area that can contain form
elements

142
An HTML form provides data gathering
functionality to a web page.HTML forms can
automatically submit data collected in its
control to a web server.
This is supported by the <FORM> element of
HTML.Forms are used for creating frontend
that can obtain elements like buttons ,
textfield in which you can
type, radio buttons , checkboxes and select
lists.

143
The Form has following
attributes:

1:Name
2:Action
3:Method

144
Name is a property or attributes associated
with each object used in a from.
Action attributes of the <form> and </form>
tags points to URL address of a program on
the web server that will processs 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
elememts back to the web server.the method
used can be either GET or POST.

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

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

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

148
Input:
The most used form tag is the
<input > tag .The type of input is
specified with the type
attributes.

149
<html>
<form>
First name:
<input type="text" name="fname">
<br>
Last name:
<input type="text" name="lname">
</form>
</html>
150
151
The form itself is not visible.Also
note that in most browsers, the
width of the text field is 20
characters by default.

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

153
<html>
<form>
First name :
<input type="text" name="fname"
size="50">
<br>
Last name:
<input type="text" name="lname">
</form>
</html>
154
155
<html>
<form>
First name :
<input type="text" name="fname"
size="50“ maxlength=“3”>
<br>
Last name:
<input type="text" name="lname">
</form>
156
157
Password:
a password textfield in which
each keystroke appears as an
dot.

158
<html>
<form>
First name :
<input type="password" name="fname"
size="50" maxlength="3">
<br>
Last name:
<input type="text" name="lname">
</form>

159
160
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”>
161
<html>
<form>
First name :
<input type="button" name="fname"
value="click">
<br>
Last name:
<input type="text" name="lname">
</form>
</html>
162
163
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.
164
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”>
165
<html>
<form>
First name :
<input type="submit" name="fname"
value="click">
<br>
Last name:
<input type="text" name="lname">
</form>
</html>
166
167
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”>

168
<html>
<form>
First name :
<input type="reset" name="fname"
value=“reset">
<br>
Last name:
<input type="text" name="lname">
</form>
</html>
169
170
171
172
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.
173
Syntax:

<input type=“checkbox” name=“name of


the button” value=“YES or NO”>

174
<html>
<form>
First name :
<input type="checkbox" name="fname"
value="no" >
<br>
Last name:
<input type="text" name="lname">
</form>
</html>
175
176
<html>
<form>
First name :
<input type="checkbox" name="fname"
value="YES" checked >
<br>
Last name:
<input type="text" name="lname">
</form>
</html>
177
178
<html>
<form>
first name:
<input type="button"
name="fname" >
</form>
</html>
179
180
<html>
<form>
first name:
<input type=“reset"
name="fname" >
</form>
</html>
181
182
<html>
<form>
first name:
<input type="Submit"
name="fname" >
</form>
</html>
183
184
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.

185
SYNTAX :
<Input type = “Radio” Name = “Radiogroup
Name” Value = “Default Value” checked>

186
<html>
<form>
First name :
<input type="radio" name="fname"
value="1" >
<br>
Last name:
<input type="text" name="lname">
</form>
</html>
187
188
<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>

189
190
<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>
191
192
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:
193
Name = “text” – provides the identifier part of the
all important NAMEVALUE pair 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.

194
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”.

195
<html>
<form>

<textarea rows="5" cols="30" >


hello class 3 year
</textarea>

</form>
</html>

196
197
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 :

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

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

200
<html>
<form>
<select name ="atul" size="3" >
<option>french fries1
<option>french fries2
<option>french fries3
<option>french fries4
<option>french fries5
</select>
</form>
</html>
201
202
<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>
203
204
<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>

205
206
Comments on HTML:
comments start with <!– and end
with -- >

207
<!– comments -- >
<html>
<head>
<title>
comments
</title>
</head>
</body>
</html>

208
<html>
<fieldset>
<legend>
STUDENT
</legend>
<form>
Height <input type="text" size="3">
Weight <input type="text" size="3">
</form>
</fieldset>
</html>
209
210
211
CSS
(Cascading style sheet)

212
DHTML:
Dhtml is a new and emerging
technology that has evolved to
meet the increasing demand
for eye catching web sites.

DHTML= HTML+ cascading style

sheet+ scripting language 213


HTML specifies a web pages elements like
table,form,frame,paragraph ,bulleted ,list etc
Cascading style sheet can be used to
determine an element’s size ,color
,position and number of the features.

214
Scripting language can be used
to manipulate the web pages
elememts so that
Style assigned to them can
change in response to a uesr’s
input.

215

Вам также может понравиться