Chapter 7-WebApplication PDF
Chapter 7-WebApplication PDF
Chapter 7-WebApplication PDF
Web Applications
Other Tags
The following tags are frequently used within a paragraph.
Tags Description
<B> ….</B> Specifies Bold Text
<I> …. </I> Specifies Italics Text.
<U> ….</U> Specifies Underline Text.
<TT> … <TT> Specifies Type writer text (fixed –width font)
<Sub>…. </Sub> Specifies the Subscript like 2 in H2O
<Sup> …. <Sup> Specifies the Subscript like 2 in X2
Commonly used Container Tags…
<Font> …. </Font>
The Font tag defines the size, style and colour of the text. HTML
uses Relative font size from 1 to 7. Default value is 3. Each
successive Font size is 20% larger or smaller than default size.
Attributes Value Description
Size Values Specifies the relative size of the font.
(1 -7)
Color Color Specifies the color of the text.
Face Font Specifies the Font name. You can define multiple
name fonts separated by , so that if first font is not
supported/ available the second can be used.
Example: <Font Size = 4 color = Red > How are You </Font>
<Font Face =“ Arial” > Hello </Font>
<Font Face = “Broadway”, “Arial” > Good Bye </Font>
Commonly used Container Tags…
<A> …. </A> Linking other Web Page or WebSite
Anchor tag defines the Active link of other Web page or File.
A hand shaped cursor appears when mouse is rolled over the
text, which indicates the active link.
Attributes Value Description
HREF File/Web Specifies the Web page or Web URL (Address) to
URL be linked with given text.
Example: <A Href = “www.google.com” > Google </A>
<A Href = “resume.doc” > My Bio-Data </A>
<A Href = “www.kvsangathan.nic.in/vacancy.htm” >
Vacancy at Kendriya Vidyalaya </A>
<Base Font>
This Tag allow you to define the basic (default) size for the font,
which is used for normal text, where <Font> is not defined.
Attributes Value Description
Size (1 -7) Specifies the relative size of the font.
Color Color Specifies the color of the text.
Face Font name Specifies the Font name.
Example: <BASEFONT Size = 4 color = Red >
<BASEFONT Face =“ Arial” Size =4 >
Student’s Details
Name Age Class
Output Ajay 14 9
Amit 12 7
Attributes in <Table> Tag
Attributes Value Description
Background Color Specifies the background image file (.jpg, .gif
etc.)
Bgcolor Color Specifies the background color.
Border Value Defines the outline border size (0 – no border)
Bordercolor Color Specifies the color of border.
Frame Above, Below, Specifies the portion of border will display.
Box, Hsides, Used with Border attribute.
Vsides etc.
Rules All, Cols, Rows, Specifies the inside border edges to be
None displayed.
Cellspacing Value Space between cells.
Cellpadding Value Space between the cell border and cell data.
Height Value Defines the height of table in pixel.
Width Value Defines the width of table in pixel.
Align Left, Right, Specifies the alignment of table across the
Center page.
Example: <Table Bgcolor=“Red” Border=3 Rules =“All” Align= center>
Attributes in <TD> Tag
Attributes Value Description
Background Color Specifies the background image file (.jpg, .gif
etc.) for a cell.
Bgcolor Color Specifies the background color for a cell.
Rowspan Value Defines the Span of a cell in respect rows.
Colspan Value Defines the span of cell in respect of columns.
Width Value Defines the width of cell in pixel or % of table.
Align Left, Right, Center Specifies the alignment of data in the cell.
VAlign Top, Middle, Bottom Defines Vertical Alignment, when rowspan of a
cell is more than one row.
<Table >
<TR>
<TD> Item1</TD><TD RowSpan=2 VAlign=“Middle” >Item2<TD>Item3</TD>
</TR>
<TR> Item1 Item3
<TD>Item4</TD><TD>Item5</TD> Item2
</TR> Item4 Item5
</TABLE>
Example Coding
<HTML>
<HEAD>
<TITLE> Computer Viruses</TITLE>
</HEAD>
<BODY BGCOLOR= #00ffff Topmargin=40 leftmargin=40>
<BASEFONT SIZE=3 FACE="Arial">
<IMG src="photo1.jpg" width="78" height="46" align="left">
<H1> What is Computer Virus?</H1>
<p align=left> A <b>virus</b> is basically an <i>executable file</i> that is designed
such that it is able to infect documents, has ability to survive by <u>replicating</u>
itself.<br> Usually to avoid detection, a virus disguises itself as a legitimate program that a
user would not normally suspect to be virus. </p>
<H2> Whar Virus can do? </H2>
<p> <font size=5 color= #ff0000 >Viruses </font>are designed to corrupt or delete data
on the hard disk, i.e. on the FAT (File Allocation Table).</p>
<H2> Types of Virus </H2>
<hr size=6 width=100% noshade>
<Font color= Maroon>
<p> Boot Sector Viruses </p>
<p> File or Program Viruses</p>
<a href="http://www.google.com/" ><font color="#ffff00" size=3> Get more on
Google.com</font></a>
</BODY>
</HTML>
How it works…
Forms in HTML
Forms are means to collect information/data from the Site-
visitor or client.
<FORM> … </Form> is used to define a form in <BODY>
section of HTML page.
Form contains some GUI controls to interact with users.
Some of important controls are-
Buttons
Submit Button
Reset Buttons
Push Buttons
Check Boxes
Radio Buttons
Combo Boxes (Menus)
Password field
Text Input (Text Field, Text Area etc.)
Creating Forms
<FORM> ….. </FORM>
This Tag can be used in <BODY> section to create
a form. It may contains many other input controls.
Commonly used Attributes are-
Attributes Value Description
Name String Specifies the name of the form
Action Script It specifies the Script or email-ID or URL which
or URL will receive data (destination of form’s data).
Method Get Specifies how the form-data is submitted.
Post Get- form data is submitted as URL variables.
Form Post-form data is submitted as HTTP post.
Form- Opens a new form as per specified URL.
Example: <Form Method=Get Action=“www.google.com”>
Commonly used method is-
<Form Method=Post Action=“mailto:[email protected]”>
Adding Input Controls on the Form
<INPUT >
This Tag defines various input controls to get input from the user.
Attributes Value Description
Type Text Defines a Text Box.
Radio Defines a Radio Button.
Checkbox Defines a Check Box
Button,
Password Creates a Password input box. Image &
Submit Creates a Submit Button. File are not
Reset Creates a Reset Buttons. covered in
Button Creates a push buttons. the syllabus
Image Creates an image collector.
File Creates a file collector.
Name String It specifies the name of the input control.
Value String/Val Specifies the initial value for the control.
Size value Specifies the size of control.
Example: <INPUT Type=“Text” Name=“St_name”>
<INPUT Type=“Submit” Name=“MyButton” Value=“Submit”>
Adding Input Controls on the Form
<SELECT>… </SELECT>
This Tag creates a Drop-down Option menu from which user may
select an option.
<SELECT Name=“name” Size=“Value>
<OPTION Value=“Value” [Selected]> Prompt </OPTION>
…………………………………………………
</SELECT>
Example
<SELECT Name=“Stream”>
<OPTION Value=“Science” > Science </OPTION>
<OPTION Value=“Commerce”> Commerce </OPTION>
<OPTION Value=“Arts” > Arts </OPTION>
</SELECT>
Suppose we
Mother Board
want to make an
XML document
Asus
which is
P3B-F
displayed in
1230.00
browser as
shown here
TFT Monitor
LG Electronics
995e
8500.00
Example to create XML document.
Preparation of XML (test.xml) document Prolog