Chapter 4
Images, Links, Table
and Forms in HTML
Image Tag-You can insert
image in your web page by using <img> tag. The browser support
various format image formats like .gif(graphic Interchange Format),
.jpg(joint photographic experts group), bmp(bit map picture). etc.
<img> tag is an empty tag.
Syntax-
<img src=”image file name”>
Attributes in <img> tag:
src=”source”
alt=”alternate text”
height=”value in pixel or percentage”
width=”value in pixel or percentage”
align=”left/right/middle/top/bottom”
border=”value in pixel”
title=”tooltip text”
Linking
in HTML
A link in HTML is a connection from one
web resource to another. A link or hyperlink points to a documents or
to a specific element within a document.
To create hyperlink, we use <a>
tag where a means anchor. The hyperlink tag starts with <a>
and include the attribute 'href'=”URL” followed by some text and
then it has a corresponding closing tag </a>. The text between
the starting anchor tag and closing anchor tags is called the anchor
text.
Syntax:
<a href=”filename”>text</a>
Types of Linking
External Linking- When the user clicks
on the anchored text, another web document opens in the browser
window.
Internal Linking- Internal linking is
also known as section linking. An internal link allow to link to
another section of the same web page, so it basically scrolls the
page up or down to the desired location.
Linking a website
we can link a website in a web page by
using the external link.
Example: <a
href=”https://www.amazon.com”>Amazon</a>
this tag will directly take us to the
site www.amazon.com, when the
user clicks on amazon.
Need for linking- Links
are the most fundamental part of the world wide web. It is the links
that tie all together. The web author cannot put all the information
on one, page. It becomes easy for the author to create long pages and
then later link thereby making sections. The separate topics an be
dealt easily by the author in the form of separate web pages and then
links can be added to combine them.
Tables in HTML- Tables
display tabular data in the form of rows and columns. A table can
have appropriate 'caption'(table heading) that will provide
description of the table's data. A long description of the table by
using 'summary' attribute.
Various formatting features to the
table is border, bgcolor, bordercolor, align, frames, rules, width
etc.
Table rows can also be grouped into
head <THEAD>, Foot<TFOOT> and body <TBODY> tags.
When long tables are printed, the head and foot information may be
repeated on each page that contains table data.
Table Tags
The table tag contains all other tags that specify rows, caption, content and formattiing.
- <table> tag is used to create a table structure. It is a paired tag means start and end both tags it includes.
<table>
.
.
</table>
2.<TR> tag add rows to table.
3.<TD> tag defines the table data by creating columns in a row.
4.<TH> tag can be used to define the header row of the table showing table data in bold typeface.
5.<CAPTION> tag defines the caption or title of the table.
Example
<html>
<body>
<table border="1 px">
<caption>Employee table</caption>
<tr>
<th>Employee name</th>
<th>Department</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh</td>
<td>Marketing</td>
<td>30,000</td>
</tr>
<tr>
<td>Mukesh</td>
<td>Sales</td>
<td>25,000</td>
</tr>
</table>
</body>
</html>
output:
Attributes of Table tag:
A table can be created in HTML with the following purpose.
- Dividing the page into separate sections.
- Creating Menus.
- Adding interactive form fields.
- Easy alignment of images.
<table bgcolor="colorname/color code"
background="image filename"
border="value in pixel"
bordercolor="colorname/color code"
cellpadding="value in pixel"
cellspacing="value in pixel"
frame="void/above/below/lhs/rhs/hsides/vsides/box"
rules="all/cols/groups/none/rows"
height="value in pixel"
width="value in pixel"
align="left/center/right"
valign="Top/bottom"
summary="text">
The HTML <table> frame attribute is used to specify the visibility of outside borders.
Example:
<html>
<body>
<table frame="box">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
</table>
</body>
</html>
Output:
The HTML <table> rules attribute is used to specify the which parts of the inside borders that should be visible.
Example:
<html>
<body>
<table rules="rows">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
</table>
</body>
</html>
Output:
The main difference between rule and frame attribute is that the frame attribute is used to display a specific outer portion of a table border while the rules attribute is used to display a specific inside portion of a table border.
<TD> tag (table data tag)
The <TD> tag defines a standard cell in an HTML table. It is the container of the table. An HTML table has two kinds of cell.
- Header cells that contains header information(<TH> tag) are bold and Center aligned by default.
- Standard cells that contain data(<TD> tag) are regular and left aligned by default.
Attributes of <TD> tag:
<TD align="left/right/center"
valign="top/middle/bottom"
background="path of image file"
bgcolor="color name/color code"
rowspan="number of rows"
colspan="number of columns">
.
.
.
</TD>
The HTML <TD> rowspan attribute is used to specify the the number of rows a cell should span(merge or expand). If a rows span two rows, it means it will take up the space of two rows in that table.
Example:
<html>
<body>
<table border="1 px">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ajay</td>
<td rowspan="2">22</td>
</tr>
<tr>
<td>priya</td>
</tr>
</table>
</body>
</html>
Output:
The colspan attribute defines the number of columns a cell should span. Example:
<html>
<body>
<table border="1 px">
<tr>
<th>Months</th>
<th>Saving</th>
</tr>
<tr>
<td>January</td>
<td>Rs 80</td>
</tr>
<tr>
<td>February</td>
<td>Rs 100</td>
</tr>
<tr>
<td colspan="2">Sum</td>
</tr>
</table>
</body>
</html>
Output:
<TR> Tag (Table row)
The <TR> defines a row in a table. Rows are the container for cells and not columns. This element should contain any number of cells showing data <TD> or header information <TH>.
HTML forms:
Forms are a medium for collecting information from the user over internet. For example during user registration you would like to collect information such as name, email, phone, address etc.
A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP Script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.
The HTML <form> tag is used to create an HTML form and it has following syntax-
<form action="Script URL" method="GET/POST">
Form elements like input, textarea etc.
</form>
Form Attributes:
- Name: This specifies the name of the form.
- action: Back end script ready to process your passed data.
- method: Method to be used to upload data. The most frequently used are GET and POST method.
- target: specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc.
- encrypt: You can use the encrypt attribute to specify how the browser encodes the data before it sends to the browser
a) application/x-www-form-urlencoded
b)multipart/form data.
HTML Form Controls:
Controls are placed inside an HTML form where the use enter information. A control is identified by its name attribute and its value is specified by value attribute.
Text input Controls:
There are three types of text input used in forms.
- Single line text input control
- Password input control
- Multi line text input control
Syntax:
<input type="text"> for create single line text input control
<input type="password"> for create password input control
<textarea rows="5" cols="40">......................</textarea> for create multi line text input control
Note:Here <input> tag is empty tag while <textarea>....</textarea> tag is a container tag.
Checkbox Control:
Checkbox are used when more than one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to checkbox.
Example:
<html>
<head>
</head>
<body>
<form>
Programming Languages: <br>
<input type="checkbox" name="C" value="C"/>
<label>C</label> <br>
<input type="checkbox" name="Java" value="Java" checked="yes">
<label>Java</label> <br>
<input type="checkbox" name="Python" value="Python"/>
<label>Python</label> <br>
<input type="checkbox" name="PHP" value="PHP"/>
<label>PHP</label>
</form>
</body>
</html>
Radio Button Controls:Radio buttons are used when out of many options, just one option is required to be selected. They are aslo created using HTML <input> tag but type attribute is set to radio.
Example:
<html>
<body>
<h3>Input "radio" type</h3>
<form>
<p>Kindly Select your favorite color</p>
<input type="radio" name="color" value="red"> Red <br>
<input type="radio" name="color" value="blue"> blue <br>
<input type="radio" name="color" value="green">green <br>
<input type="radio" name="color" value="pink">pink <br>
</form>
</body>
</html>
Output:
Select Box control or Drop Down list box: A select box also called drop down box which provides option to list down various options in the form of drop down list. From where a user can select one or more options.
Example:
<html>
<head>
<title>dropdown list</title>
</head>
<body>
<h3>Select list or drop down list</h3>
<label for="">Select state</label>
<select name="state">
<option value="up">UttarPradesh</option>
<option value="mp">Madhayapradesh</option>
<option value="bihar">Bihar</option>
<option value="maharastra">Maharastra</option>
</select>
</body>
</html>A select box also called
Output:
The <option> tag defines an option that can be selected. By default the first item in the drop-down list is selected. To define a pre-selected option add the selected attribute to the option.
Example:
<option value="bihar" selected>Bihar</option>
Button Controls:
There are various ways in HTML to create clickable buttons. You can also create a clickable button using <input> tag by setting its type attribute to button. The type attribute can take the following values.
- Submit- This creates a button that automatically submit a form.
- Reset- This creates a button that automatically resets form controls to their initial values.
- Button- This creates a button that is used to trigger a client-side script when the user clicks that button.
Example:
<html>
<body>
<form action="#">
First name: <input type="text" name="FirstName" placeholder="enter firstname..."><br>
Last name: <input type="text" name="LastName" placeholder="enter lastname..."><br>
<input type="submit" value="Submit">
<input type="reset" value="reset">
<input type="button" name="Next" value="next">
</form>
</body>
</html>
Output:
Button tag<Button> Tag:
It is used for creating a button within an HTML form and inside the <button> tag, you can place content like text or images.
Example:
<button><img src="button_image_source" alt="add_alt_Text"></button>
Here <img> tag is used between the <button>.......</button> tag but in <input type="button">tag we can not add any text image or any other html tag because <input> tag is empty tag.
Embedding Audio and Video files in HTML:
The <embed> tag defines a container for an external resource such as a web page, a picture, a media player or a plug-in application.
Most browser no longer support Java applets and plug-ins. To display video or audio, it is better to use the <video> and <audio> tags.
<audio> tag:
To embed audio in html, we use <audio> tag. This tag supports chorme, firefox, Safari, Opera and edge in three audio formats- mp3, wav, ogg. Only safari browser does not support ogg format.
Syntax:
<audio>
<source src="file name" type="audio_file_type">
</audio>
Example:
<html>
<head>
<title>audio fie page</title>
</head>
<body>
<h2>Click play button to play audio</h2>
<audio src="srivalli.mp3" controls></audio>
</body>
</html>
Output:
Note: Before adding an audio source must be sure that the audio file is in the same directory and specified name.
<Video>Tag:
To embed video in HTML, we use the <video> tag. It contains one or more video sources at a time using <source> tag. It supports mp4, webm, and ogg in all modern browsers. Only ogg vedio format does'nt support in safari browser.
Syntax:
<video>
<source src="file_name" type="video_file_type">
</video>
Example:
<html>
<head>
<title>video file </title>
</head>
<body>
<video src="clip.mp4" controls></video>
</body>
</html>
Output:
The HTML <bgsound> tag is used to play the sound track in the background when you leave the page behind and open a new tab this tag will continuously play the track in the background. This tag is not for other browser expect the Internet Explorer. It does not display any graphical interface just played the track in the background.
Syntax:
<bgsound src="audio.mp3/wav/">
Attributes of Bgsound:- Src: This attribute holds the path of the track that will be played in the background.
- loop: This attribute holds a number that the number of times the track will play looping around.
Example:
<html>
<head>
<title>background sound</title>
</head>
<body>
<bgsound src="beep.wav" loop="5"></bgsound>
</body>
</html>
Note:The above code work only in internet explorer browser.
Comments
Post a Comment