Images,Tables,Forms & Frames in
HTML
Contents
• Images
• img tag attributes
• Using Image as links
• Tables
• Table Tags
• Table Tag attributes
• Cellspacing & Cellpadding
• Colspan & Rowspan
• HTML Forms
• Radio button & Check box
• Form Input Types
• HTML Frames
HTML Image
• HTML img tag is used to display image on the
web page. HTML img tag is an empty tag that
contains attributes only, closing tags are not
used in HTML image element.
• Let's see an example of HTML image.
• <h2>HTML Image Example</h2>
• <img src="good_morning.jpg" alt="Good Mor
ning Friends"/>
• Output:
Attributes of HTML img tag
The src and alt are important attributes of HTML img tag. All attributes of HTML image
tag are given below:
1) src
It is a necessary attribute that describes the source or path of the image. It instructs
the browser where to look for the image on the server.
The location of image may be on the same directory or another server.
2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed. The
value of the alt attribute describe the image in words. The alt attribute is considered
good for SEO prospective.
3) width
It is an optional attribute which is used to specify the width to display the image. It is
not recommended now. You should apply CSS in place of width attribute.
4) height
It h3 the height of the image. The HTML height attribute also supports iframe, image
and object elements. It is not recommended now. You should apply CSS in place of
height attribute.
Use of height and width attribute with
img tag
• You have learnt about how to insert an image
in your web page, now if we want to give
some height and width to display image
according to our requirement, then we can set
it with height and width attributes of image.
• Example:
• <img src="animal.jpg" height="180" width="3
00" alt="animal image">
• Output:
Use of alt attribute
• We can use alt attribute with tag. It will
display an alternative text in case if image
cannot be displayed on browser. Following is
the example for alt attribute:
• <img src="animal.png" height="180" width="3
00" alt="animal image">
• Output:
Use <img> tag as a link
• We can also link an image with other page or
we can use an image as a link. To do this, put
<img> tag inside the <a> tag.
• <a href=“web.html”><img src="robot.jpg"
height="100" width="100">
</a>
HTML Table
• HTML table tag is used to display data in tabular form
(row * column). There can be many columns in a row.
• We can create a table to display data in tabular form,
using <table> element, with the help of <tr> , <td>, and
<th> elements.
• In Each table, table row is defined by <tr> tag, table
header is defined by <th>, and table data is defined by
<td> tags.
• HTML tables are used to manage the layout of the page
e.g. header section, navigation bar, body content,
footer section etc. But it is recommended to use div tag
over table to manage the layout of the page .
HTML Table Tags
Tag
Description
<tabl e>
It
defines a table.
<tr>
It
defines a ro w in a table.
<th>
It
defines a header cel l in a table .
<td>
It
defines a cell in a table.
<capti on>
It
defines the tabl e caption.
<colgroup>
It
specifies a group of one or more columns in
a
table
for formatting.
<col>
It
is used with <colgroup> element to
specify
column
properti es for each column.
<tbody>
It
is used to group the body content in a table.
<thead>
It
is used to group the header content in a table.
<tfooter>
It
is used to group the footer content in a table.
• Each table cell is defined by a <td> and a </td> tag.
• td stands for table data.
• Everything between <td> and </td> are the content of
the table cell.
• Each table row starts with a <tr> and ends with
a </tr> tag.
• tr stands for table row.
• Sometimes you want your cells to be table header
cells. In those cases use the <th> tag instead of
the <td> tag:
• th stands for table header.
• HTML Table Example
• Let's see the example of HTML table tag. It output is shown above.
• <table>
• <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></t
r>
• <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
• <tr><td>James</td><td>William</td><td>80</td></tr>
• <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
• <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
• </table>
• In the above html table, there are 5 rows and 3 columns = 5 * 3 = 15
values.
Output:
First_Name
Last_Name
Marks
Sonoo
Jaiswal
60
James
William
80
Swati
Sironi
82
Chetn a
Singh
72
HTML Table with Border
• HTML Border attribute
• You can use border attribute of table tag in HTML to specify
border. But it is not recommended now.
• <table border="1">
• <tr><th>First_Name</th><th>Last_Name</th><th>Marks<
/th></tr>
• <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
• <tr><td>James</td><td>William</td><td>80</td></tr>
• <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
• <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
• </table>
HTML Table with cell padding & cell
spacing
• Cell padding is the space between the cell
edges and the cell content.
• By default the padding is set to 0.
• Cell spacing is the space between each cell.
• By default the space is set to 2 pixels.
HTML Table Colspan & Rowspan
NAME
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
APRIL
• To make a cell span over multiple rows, use the rowspan attribute:
• Example:
• <table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
HTML FORMS
• An HTML form is used to collect user input. The user input is most
often sent to a server for processing.
• The <form> Element
• The HTML <form> element is used to create an HTML form for user
input:
• <form>
.
form elements
.
</form>
• The <form> element is a container for different types of input
elements, such as: text fields, checkboxes, radio buttons, submit
buttons, etc.
The <input> Element
Type
Description
<input type="text">
Displays a single
-line text input
field
<input type="radio">
Displays a radio button (for
selecting one of many choices)
<input type="checkbox">
Displays a checkbox (for selecting
zero or more of many choices)
<input type="submit">
Displays a submit button (for
submitting the form)
<input type="button">
Displays a clickable button
Text Fields
• The <input type="text"> defines a single-line
input field for text input.
• Example
• A form with input fields for text:
• <form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname">
<br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
• The <label> Element
• Notice the use of the <label> element in the example above.
• The <label> tag defines a label for many form elements.
• The <label> element is useful for screen-reader users, because the
screen-reader will read out loud the label when the user focus on
the input element.
• The <label> element also help users who have difficulty clicking on
very small regions (such as radio buttons or checkboxes) - because
when the user clicks the text within the <label> element, it toggles
the radio button/checkbox.
• The for attribute of the <label> tag should be equal to
the id attribute of the <input> element to bind them together.
Radio Buttons
• The <input type="radio"> defines a radio button.
• Radio buttons let a user select ONE of a limited number of choices.
• Example
• A form with radio buttons:
• <p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScr
ipt">
<label for="javascript">JavaScript</label>
</form>
Checkboxes
• The <input type="checkbox"> defines a checkbox.
• Checkboxes let a user select ZERO or MORE options of a limited number of
choices.
• Example
• A form with checkboxes:
• <form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
The Submit Button
• The <input type="submit"> defines a button for submitting the
form data to a form-handler.
• The form-handler is typically a file on the server with a script for
processing input data.
• The form-handler is specified in the form's action attribute.
• Example
• A form with a submit button:
• <form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><
br>
<input type="submit" value="Submit">
</form>
HTML Form Attributes
• The Action Attribute
• The action attribute defines the action to be performed when the form is
submitted.
• Usually, the form data is sent to a file on the server when the user clicks on the
submit button.
• In the example below, the form data is sent to a file called "action_page.php". This
file contains a server-side script that handles the form data:
• Example
• On submit, send form data to "action_page.php":
• <form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
The Target Attribute
• The target attribute specifies where to display the response
that is received after submitting the form.
• The target attribute can have one of the following values:
Value
Description
_blank
The response is displayed in a new window or tab
_self
The response is displayed in the current window
_parent
The response is displayed in the parent frame
_top
The response is displayed in the full body of the
window
framenam
e
The response is displayed in a named
iframe
The Method Attribute
• The method attribute specifies the HTTP method to be
used when submitting the form data.
• The form-data can be sent as URL variables
(with method="get") or as HTTP post transaction
(with method="post").
• The default HTTP method when submitting form data
is GET.
• Example
• This example uses the GET method when submitting
the form data:
• <form action="/action_page.php" method="get">
HTML Input Types
Here are the different input types you can use in HTML:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="reset">
<input type="search">
<input type="submit">
<input type="text">
HTML FRAMES
• With frames ,you can display more than one
HTML documents in the same browser
window.
The frameset element holds one or more
frame elements.
The frameset element states
How many col&row
How much percentage/pixels of space will
occupy each of them.
• VERTICAL FRAMESET
<frameset Cols=”25%,50%,25%”>
<frame src=”frame_a.htm”/>
<frame src=”frame_b.htm”/>
<frame src=”frame_c.htm”/>
</frameset>
Frame_a.htm
<html>
<body style=”background color:red”>
<h3>frame A</h3>
</body>
</html>
• FRAME_b.htm
<html>
<body style=”background color”green”>
<h3> frame B </h3>
</body>
</html>
• FRAME_c.htm
<html>
<body style=”background color:blue”>
<h3> frame C </h3>
</body>
</html>
THANK-YOU
