CHAPTER 10
HTML-I
BASIC HTML ELEMENTS
HTML (Hyper Text Markup Language) is a document-layout and
hyperlink-specification language i.e., a language used to design the
layout of a document and to specify the hyperlink.
HTML tells the browser how to display the contents of a hypertext
document i.e., a document including text, images and other support
media.
HTML : What it is HTML: What it is not
Web Page Layout Language Word Processing Tool
Hyperlink Specification Language Programming Language
WRITING HTML DOCUMENTS
HTML is made up of Tag and Attribute.
TAG
A Tag is a coded HTML command that indicates how part of web page should
be displayed. All HTML tags are contained with angle brackets (< >) e.g.,
<HEAD> is a tag. Similarly <H1> is a tag.
ATTRIBUTE
An Attribute is a special word used inside tag to specify additional information
to tag such as color, alignment etc.
You can type HTML in capital letters as well as in small letters.
HTML DOCUMENT STRUCTURE
This tag identifies the document as an HTML
document. An HTML document begins with
<HTML> and ends with </HTML>
<HTML>
The <HEAD> tag contains
<HEAD> information about the
document, including its
<TITLE> Title of page is written here </TITLE> title, and document
description.
</HEAD>
The <HEAD> tag is entered
between <HTML> tags.
<BODY>
This tag contains the
The HTML tags that define your page go document title. The title
here specified inside <TITLE> tag
appears on the browses’
</BODY>
title bar.
</HTML>
The <BODY> tag encloses all the tags,
attributes and information to be
displayed in the web page.
The <BODY> tag is entered below the
closing </HEAD> tag and above the
closing <HTML> tag.
HEADER
BODY
WHERE TO WRITE HTML CODE
1. Open Text Editor, (Notepad in case of Windows Operating System).
2. Type the HTML code in it.
3. Save the file with extension .html/.htm
4. To view the created HTML file in browser , double click on the file.
CONTAINER ELEMENTS
HTML container elements require a starting as well as an ending tag. Some
examples of container elements are:
<HTML> …………………..</HTML>
<HEAD> …………………..</HEAD>
<TITLE> …………………..</TITLE>
<B> …………………..</B>
EMPTY ELEMENTS
HTML Empty elements require just a starting tag and not an ending tag. Some
examples of Empty Container are:
<br>
<hr>
<img>
HTML TAG STRUCTURE
1. Every HTML tag consists of a tag name, sometimes followed by an
optional list of attributes, all placed between opening and closing angle
brackets (< and >).
2. A tag attribute’s value, if any, is given after the equal sign (=) in quotes
generally after the attribute name. For example,
<A href = http://www.netscape.com/yellowpages>
Some examples of HTML tags with attributes are:
<body bgcolor = “red”>
TAG ATTRIBUTE
BASIC HTML TAGS
1. The HTML Tag
The <HTML> and </HTML> tags are used to mark the beginning and
end of an HTML document.
This tag does not have any effect on appearance of document.
This tag is used to make browsers and other programs know that this
is an HTML document.
Attributes of HTML tag
(i) The DIR attribute
This attribute can have values either ltr(left-to-right) or rtl(right-to-left).
e.g. <HTML dir = ltr>
(ii) The LANG attribute
This attribute of <HTML> tag specifies the language you’ve generally
used within the document.
To specify base language of web page, the LANG attribute is used. e.g.
“en” is used to specify English Language and “fr” is used to specify
French language.
e.g. <HTML lang = en>
HTML Tag
Type Container Element
Function Delimits a complete HTML document
Attributes DIR, LANG
Contains Head-tag, body-tag
2. The HEAD Tag
The HEAD tag is used to define the document header.
<HEAD> tag contains information about the document, including its title
and document description.
HEAD Tag
Type Container Element
Function It defines the document header.
Attributes -
Contains <Title> tag
3. The TITLE Tag
TITLE Tag
Type Container Element
Function Define the document title.
Attributes -
Used Inside <HEAD>….</HEAD> tags
Problem: To display the web page title as ‘My First HTML Page’.
<HTML>
<HEAD>
<TITLE> My First Page </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
4. The Body Tag
The body tag defines the document’s body. It contains all the contents of an
HTML document, such as text, images, lists, table, etc.
Attribute of Body Tag
1. Background attribute
This attribute allow you to include a background image.
<BODY background =”Pic.jpg”>
This above statement will set pic.jpg image as background of the body of
web page.
2. Background color, Text Color, Link Color
By default browsers display text in black.
If you want to change the color or text (by TEXT attribute), color of links (by
LINK attribute), color of active links (by ALINK attribute) and background color
(by BGCOLOR attribute ).
Consider the following:
<BODY bgcolor = “teal” text = “magenta” link = “yellow” alink = “red”>
- The background color is teal. (bgcolor = “teal”)
- Text color is magenta.
- Links that have not been visited recently are made yellow(link = “yellow”)
- Links that are currently being clicked on (alink = “lime”)
Problem: To make the background appear black, text lime , links yellow and
recently visited links red.
<HTML>
<HEAD>
<TITLE>Attributes of Body Tag </TITLE>
</HEAD>
<BODY bgcolor =”black” text= “white” link =”red” alink =”yellow”>
Informatics practices Class XII
<a href=”https://www.google.com”> Click here to access google search
engine</a>
</BODY>
</HTML>
Setting Left and Top Margins
- The margin refer to the blank area left from the edge of page.
- If you want to leave some blank area in the left side, you can use
LEFTMARGIN attribute as follows:
<BODY leftmargin = value>
The value is the number of pixels (72 pixels make an inch) to be left blank.
e.g. <BODY leftmargin = “60”>
- If you want to set the top margin i.e. distance from the top edge, you can
use TOPMARGIN attribute.
e.g. <BODY topmargin = “70”>
This will make the body-text appear 70 pixels away from top edge of the
page.
Problem: To make body text appear 60 pixels away from the top edge of
page and 75 pixels away from left edge of page.
<HTML>
<HEAD>
<TITLE>Usage of Margins </TITLE>
</HEAD>
<BODY topmargin = “60” leftmargin = “75”>
Information Technology is an important subject of Engineering.
</BODY>
</HTML>
5. Heading in HTML (H1 …… H6 Tags)
- HTML has six levels of headings, numbered 1 through 6, with 1 being the
largest.
- Headings are typically displayed in larger or bolder fonts than normal
body text.
Attribute of Heading tag
1. ALIGN - used to set the alignment of heading. It can take either LEFT,
RIGHT or CENTER as its value.
Problem: To display multiple headings in multiple forms using H1 …. H6 tags.
<HTML>
<HEAD>
<TITLE> Headings in HTML </TITLE>
</HEAD>
<BODY>
<H1> Level 1 Heading </H1>
<H2 align = “center”> Level 2 Heading </H2>
<H3> Level 3 Heading </H3>
<H4 align = “right”> Level 4 Heading </H4>
<H5> Level 5 Heading </H5>
<H6 align = “left”> Level 6 Heading </H6>
</BODY>
</HTML>
6. <P> (Paragraph) Tag
- To start a new paragraph, <P> tag is used. It is a container tag.
Attribute of <P> tag
1. ALIGN - used to set the alignment of paragraph. It can take either
LEFT, RIGHT or CENTER as its value.
Problem: To display text with line and paragraph breaks.
<html>
<head>
<title> Paragraph</title>
</head>
<body>
<p> This will start a new paragraph</p>
<p align=”center”> Again starting of new paragraph </p>
</body>
<html>
7. <BR> tag
- To end one line , and to jump to the next <BR> tag is used.
<html>
<head>
<title> Paragraph</title>
</head>
<body>
Writing a line. I want to write in next line.<br/>
I am in a new line.
</body>
<html>
8. <CENTER> Tag
- To centralize a segment of text, just type the text between <CENTER> and
</CENTER>.
For example, the code
<CENTER> This is centralized </CENTER>
Will make text – This is centralized – appear centralized on browser
window.
9. Horizontal Rules - <HR> - Tag
- The <HR> tag produces a horizontal line spread across the width of the
browser window.
Attributes of <HR> tag
(i) Size
This attribute allows you to set the size of the horizontal rule.
Problem: To display horizontal rules of various sizes.
<HTML>
<HEAD>
<TITLE> Various Horizontal Rule </TITLE>
</HEAD>
<BODY>
<P> This is conventional document text. </P>
<HR>
The next three horizontal rules are of different sizes.
<HR size=12>
<HR size =36>
<HR size =72>
<BODY>
</HTML>
(ii) width Attribute of <HR>
The length of horizontal rules can be controlled with width
attribute.
Problem: To display horizontal rules of different widths.
<HTML>
<HEAD>
<TITLE>Width of Horizontal Rule</TITLE>
</HEAD>
<BODY>
<P>
The following two rules have widths of 100 and 200 pixels respectively
<HR width=100><br><br>
<HR width=200>
</BODY>
</HTML>
10.<FONT> tag
It lets you change the size, style and color of the text – It is
generally used for changing the appearance of a short segment of
text.
Attributes of <FONT> tag
(i) size: used to specify the size of the text.
(ii) color : used to change the color of text.
(iii) face : used to change the way of displaying text.
Problem : To display a paragraph on red color in size 4 but its first letter
should be of size 7 and of blue color.
<HTML>
<HEAD>
<TITLE>Base Font</TITLE>
</HEAD>
<BODY>
<FONT size=7 color=”blue”> U </FONT>
<FONT size=4 color=”red”> sing the largest font </FONT>
</BODY>
</HTML>
Problem: To display text in a particular font-type.
<HTML>
<HEAD>
<TITLE>Font Faces</TITLE>
</HEAD>
<BODY>
<FONT size=7 color=”blue” face=”Broadway,Arial, Albertus”>
The font are displaying .
</FONT><br>
This is the text without any specific font.
</BODY>
</HTML>
11.<BASEFONT> tag
- This tag lets you define the basic size for the font, the browser will use to
render normal document text.
Attribute of <BASEFONT> tag
size – its value determines the document’s base font size. It have
value between 1 and 7.
Problem: To display text by changing base font sizes.
<HTML>
<HEAD>
<TITLE> Base Font </TITLE>
</HEAD>
<BODY>
This text is being displayed in default font size as no basefont size hase been
set as yet.
<BASEFONT size =5>
This text has base font size =5.
</BODY>
</HTML>
Comments <!.... and …..>
- Comment are one type of textual content which appear in your HTML
code, but are not rendered by user’s browser.
- Comments are given between special <!-- and --> characters.
- Browsers ignore the text between comment characters.
LOGICAL AND PHYSICAL TEXT STYLES
HTML has two types of styles for individual words or sentences:
(i) Logical and
(ii) Physical styles
LOGICAL TEXT STYLES
- Logical styles render the text according to its meaning e.g. <EM> is for
emphasizing something and <STRONG> is for strongly emphasizing some
thing.
- Various logical styles are:
<DFN> - for a word being defined. Typically displayed in italics.
<EM>- for emphasis. Typically displayed in italics.
<CITE> - for titles of books, films, etc. Typically displayed in italics.
<STRONG>- for strong emphasis. Typically displayed in bold.
(all above mentioned tags are container elements)
PHYSICAL TEXT STYLES
- It indicate the specific type of appearance for a section e.g. bold, italics
etc.
- Various physical text styles are;
<B> - bold text
<I> - italic text
<U> - underlined text
(all above mentioned tags are container elements)
SUBSCRIPT AND SUPERSCRIPT
- To write something like H20, you can write it as H <SUB>2</SUB>O.
- Similarly, to write something like X2 , you can write it as X<SUP>2</SUP>.
SPECIAL CHARACTERS
- The left angle bracket (<), the right angle bracket (>) and the ampersand
(&) have special meaning in HTML and therefore cannot be used in normal
text.
- To use one of the three characters in an HTML document, you must enter
its escape sequence instead as illustrated below:
< - the escape sequence for <
> - the escape sequence for >
& - the escape sequence for &
Problem: To display special characters.
<HTML>
<HEAD>
<TITLE> Special characters </TITLE>
</HEAD>
<BODY>
<P> < and > and & are special characters that are displayed
Using escape sequence. </P>
</BODY>
</HTML>
MCQ’s
1. With which HTML tag do you apply attributes that modify text sizes,
font-face, and color ?
(a) <font>
(b) <mod>
(c) <f>
(d) <text>
2. Which HTML tag would you apply the bgcolor attribute to in order to
change the background color of the web page?
(a) <html>
(b) <head>
(c) <body>
(d) <p>
3. In which section of an HTML document do you enter the <title>
element?
(a) The body section
(b) The footer section
(c) The style section
(d) The head section
4. In which HTML element do you apply attributes that modify the
background image?
(a) The <html> element.
(b) The <head> element.
(c) The <background> element
(d) The <body> element
5. Which of the following heading tags will cause a browser to render text
at the largest default size?
(a) <h3>
(b) <h2>
(c) <h5>
(d) <h4>
6. Which of the following is the proper syntax to start an HTML comment?
(a) <!--
(b) <!>
(c) <comment>
(d) <notate>
7. Which one of the following is the HTML tag used to insert a horizontal
rule?
(a) <h1>
(b) <hr>
(c) <rule>
(d) <br>
8. What HTML container tags do you apply to text to format the text as a
paragraph?
(a) <para></para>
(b) <text></text>
(c) <p></p>
(d) <style></style>
9. Which HTML tags cause browsers to render text as italics?
(a) <italics></italics>
(b) <ital></ital.>
(c) <i></i>
(d) <b></b>
10.Interpret this statement: <strong> Michelle</strong>
(a) It makes Michelle strong.
(b) It highlights Michelle as being strong.
(c) It will print out Michelle in bold font.
(d) It will print strong Michelle.
11.HTML tags are case sensitive. (a) True (b) False
12.The page title is inside the ________ tag.
(a) Body
(b) Head
(c) Division
(d) Table
13.<H1> is the smallest header tag. (a) True (b) False
CHAPTER- 11
HTML- II LIST, TABLES AND FORMS
LISTS IN HTML
There are three basic types of lists in HTML: unnumbered, numbered and
definition.
Unnumbered or unordered Lists
- Unordered (or Unnumbered) lists are indented lists with a special bullet
symbol in front of each of them.
- E.g.
Apple
Orange
Grapes
- In order to make above list <UL> tag is used in HTML.
<UL>
<LI>Apple</LI>
<LI>Orange</LI>
<LI>Grapes</LI>
</UL>
- The <LI> items can contain multiple paragraphs also.
Attributes of <UL> (unordered list) tag
1. The type attribute
- By default, a solid circle is used for the bullets. However, you can change
the bullet style using type attribute.
- The attribute may have a value of either disc, circle or square.
Problem: To display various bullet types.
<HTML>
<HEAD>
<TITLE>Various Bullet Styles</TITLE>
</HEAD>
<BODY>
<UL>
<LI> One</LI>
<LI>Two </LI>
<LI>Three </LI>
</UL>
<UL type=”circle”>
<LI> One</LI>
<LI>Two </LI>
<LI>Three </LI>
</UL>
<UL type=”square”>
<LI> One</LI>
<LI>Two </LI>
<LI>Three </LI>
</UL>
</BODY>
</HTML>
Numbered Lists or Ordered Lists
- Ordered ( or Numbered) lists are indented lists that have numbers or letters
in front of each of them.
- A numbered list is identical to an unnumbered list, except it uses <OL>
instead of <UL>.
- The items that are tagged with <LI> appear numbered e.g. 1,2,3 etc. on the
browser window.
e.g. consider the following HTML code :
<OL>
<LI>Oranges</LI>
<LI>peaches</LI>
<LI>grapes</LI>
</OL>
And the output produced is:
1. Oranges
2. peaches
3. grapes
Attributes of <OL> (ordered list) tag
1. The start attribute
- Normally, browsers automatically number ordered list items beginning with
the Arabic numeral 1.
- The start attribute for the <OL> tag lets you change that beginning value. To
start numbering a list at 5, for example, you may write:
<OL start =5>
<LI> This is item number 5.</LI>
<LI> This is item number 6.</LI>
<LI> And so forth…..</LI>
</OL>
2. The type attribute
- By default, browsers number ordered list items with a sequence of Arabic
numerals.
- Besides being able to start the sequence at some number other than 1, you
can use the type attribute with the <OL> tag to change the numbering style
itself.
Type Value Generated style Sample sequence
A Capital letters A, B, C, D
a Lowercase Letters a, b, c, d
I Capital roman numerals I, II , III, IV
i Lowercase roman numerals i, ii, iii, iv
1 Arabic numerals 1, 2, 3, 4
Problem: To display many ordered lists.
<HTML>
<HEAD>
<TITLE>Many Ordered Lists</TITLE>
</HEAD>
<BODY>
<H4> Numbered List : </H4>
<OL>
<LI>Apples</LI>
<LI>Oranges</LI>
<LI>Peaches</LI>
</OL>
<H4>Letters list :</H4>
<OL type=”A”>
<LI>Apples</LI>
<LI>Oranges</LI>
<LI>Peaches</LI>
</OL>
<OL type =”a” start= 5>
<LI>Apples</LI>
<LI>Oranges</LI>
<LI>Peaches</LI>
</OL>
</BODY>
</HTML>
Definition Lists
- Definition lists are indented lists without any bullet symbol or any number
in front of each item.
- The following is an example of a definition list:
<DL>
<DT> NCSA
<DD> NCSA, the National center for supercomputing Applications, is located
on the campus of
University of Illinois.
<DT> Cornell Theory Center
<DD> CTC is located on the campus of Cornell University in Ithaca, New York.
</DL>
The output looks like:
NCSA
NCSA, the National center for supercomputing Applications, is located on
the campus of
University of Illinois.
Cornell Theory Center
CTC is located on the campus of Cornell University in Ithaca, New York.
TABLES
- HTML tables allow you to arrange data into rows and columns of cells.
VARIOUS TABLE TAGS
1. <table> - wraps up a table and its elements.
2. <tr> - which defines a table row.
3. <th> - which defines table header.
4. <td> - which defines data cells.
5. <caption> - which defined title for the table.
CREATING SIMPLE TABLE
<HTML>
<HEAD>
<TITLE>CREATING TABLE</TITLE>
</HEAD> <TABLE> starts and ends the entire
thing.
<BODY>
<TABLE>
<CAPTION>A SIMPLE TABLE</CAPTION>
<TR>
<TD>ONE</TD> <CAPTION>and </CAPTION>
<TD> TWO</TD> places a caption over your table.
<TD>THREE </TD>
</TR>
<TR> is used when you want a
<TR> new table row to begin.
<TD>FOUR </TD>
<TD> FIVE</TD>
<TD> SIX</TD>
</TR>
</TABLE> <TD> denotes Table Data.
</BODY>
</HTML>
<TABLE> tag
- The table tag begins the process of building a table.
- Its attributes are:
BORDER
BORDERCOLOR
FRAME
RULES
CELLSPACING & CELLPADDING
ALIGN
BACKGROUNG
BGCOLOR
HEIGHT AND WIDTH
- BORDER attribute
A table’s border is specified through BORDER attribute.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE border= “1”>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TABLE>
</BODY>
</HTML>
- BORDERCOLOR attribute
Used to specify the color of table’s border.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE border= “1” bordercolor=”red”>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TABLE>
</BODY>
</HTML>
- Displaying select border sides – FRAME attribute
Allows you to state which portion of the border will render (display).
Values that can be specified for FRAME attribute are:
above - displays top edge only
below – displays bottom edge only
border – displays all four sides
box – display all four sides( like border)
hsides – displays top and bottom edges
lhs – displays left edge only
rhs – displays right edge only
void – displays no border
vsides – displays left and right sides
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE border= “1” bordercolor=”red” frame =”above”>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TABLE>
</BODY>
</HTML>
- RULES attribute
The RULES attribute like FRAME, also works with the BORDER
attribute, except RULES deals with the inside border edges.
Values that can be specified for RULES attribute are:
all – displays all borders
cols – displays border between cells.
groups – displays borders between all cell group
none – hides all interior borders
rows – displays borders between rows only
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE border= “1” bordercolor=”red” rules =”rows”>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TABLE>
</BODY>
</HTML>
- Cellspacing & cellpadding attributes
CELLSPACING – gives the amount of space between cells.
CELLPADDING – gives the amount of space between the cell border and the
cell contents.
<TABLE border=”3” cellspacing =”1” cellpadding =”1”>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</TABLE>
- ALIGN attribute
To align table in center, right or on left side, ALIGN attribute is used.
e.g.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE align=”center”>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TABLE>
</BODY>
</HTML>
- BACKGROUND attribute
Used to set an image as background of a table.
e.g.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE align=”center” background=”flower.jpg”>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TABLE>
</BODY>
</HTML>
- BGCOLOR attribute
Used to add a color in table’s background.
e.g.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE bgcolor=”red”>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TABLE>
</BODY>
</HTML>
- HEIGHT AND WIDTH attributes
Use to specify the height and width of the table.
e.g.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE height=”100px” width=”40px”>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TABLE>
</BODY>
</HTML>
<TD> tag
- It denotes the table data.
Attributes of <TD> tag
ALIGN
WIDTH
BACKGROUND
BGCOLOR
ROWSPAN
COLSPAN
VALIGN
- ALIGN attribute
This attribute is used to control the horizontal alignment of the
contents of a cell.
e.g.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=”320PX”>
<TR>
<TD ALIGN=”center”>Cell Data</TD>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TABLE>
</BODY>
</HTML>
- WIDTH attribute
Used to define width of cells.
e.g.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD width=”100px”>Cell Data</TD>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TABLE>
</BODY>
</HTML>
- BACKGROUND and BGCOLOR attribute
Background attribute is used to set an image as background in a data
cell.
BGCOLOR attribute is used to change background color of data cells.
e.g.
<html>
<head>
<title>Table</title>
</head>
<body>
<table border=”3”>
<tr>
<td background=”pearls.jpg”></td>
<td></td>
<td></td>
</tr>
<tr>
<td bgcolor=”red”></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
- ROWSPAN and COLSPAN attribute
The rowspan and colspan attributes are used to specify the span of a
cell.
TABLE 1
ITEM 1 ITEM 3
ITEM 2
ITEM 4 ITEM 5
In this table, cell 2 of first
row, has a span of two rows.
TABLE 2
ITEM 1 ITEM 2
ITEM 3 ITEM 4 ITEM 5
Cell 2 of first row, has a span of
two columns.
Such type of cells can be created with the help of ROWSPAN and COLSPAN
attributes of <TD> tag.
For TABLE 1 shown above, the code is
<table border=”2”>
<tr>
<td> ITEM 1</td>
<td rowspan=2>ITEM 2</td>
<td>ITEM 3</td>
</tr>
<tr>
<td>ITEM 4</td>
<td>ITEM 5</td>
</tr>
</table>
For TABLE 2 shown above, the code is
<table border=”2”>
<tr>
<td> ITEM 1</td>
<td colspan=2>ITEM 2</td>
</tr>
<tr>
<td>ITEM 3</td>
<td>ITEM 4</td>
<td>ITEM 5</td>
</tr>
</table>
Q: write HTML code to create the following table:
1 2
A
3 4
C D
Sol:
<html>
<head>
<title>Table</title>
</head>
<body>
<table border=”2”>
<tr>
<td rowspan=2 > A </td>
<td> 1 <td>
<td> 2 </td>
</tr>
<tr>
<td> 3 <td>
<td> 4 </td>
</tr>
<tr>
<td> C <td>
<td colspan=2> 4 </td>
</tr>
</table>
</body>
</html>
- VALIGN attribute
In cells that have span of more than one rows, data can also be
vertically aligned using VALIGN attribute.
The possible values that a VALIGN attribute may take are : top,
middle and bottom.
<html>
<head>
<title>Table</title>
</head>
<body>
<table border=”2”>
<tr>
<td valign=”bottom” rowspan=2 > A </td>
<td> 1 <td>
<td> 2 </td>
</tr>
<tr>
<td> 3 <td>
<td> 4 </td>
</tr>
<tr>
<td> C <td>
<td colspan=2> 4 </td>
</tr>
</table>
</body>
</html>
<TH> Tag
- It stands for table header. The contents declared as header are displayed in
a distinctive style i.e. bold.
e.g.
<html>
<head>
<title>Header Tag</title>
</head>
<body>
<table border=”2”>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
</tr>
<tr>
<td>ONE</td>
<td>TWO</td>
<td>THREE</td>
</tr>
</table>
</body>
</html>
- <TR> tag
It stands for table row.
Used to start a new row in a table.
- <THEAD> tag
It is used to define a set of header rows.
It can be used only one time in a table.
- <TFOOT> tag
It is used to define a set of footer rows.
Like <thead>, it can be used only one time in a table.
- <TBODY> tag
It is used to define the table body.
It can be used only one time in a table.
HTML FORMS
HTML forms are means to collect information/data from the site-visitor. It is done
with the help of controls that collect the information and send it over.
CONTROLS
Users interact with forms through named controls. A control’s “control name” is
given by its name attribute.
CREATING FORMS
- To create or use a form in your web page, you need to make use of <form>
tag of HTML. A simple syntax of using <form> is as follows:
<FORM action=”back-end-script “ method = “ posting method“>
Define here the form elements like input, textarea etc.
</FORM>
Attributes of <FORM> tag
name – This is the name of the form.
action – here you will specify any script URL which will receive
uploaded data.
method – here you will specify method to be used to upload data. It
takes following values:
GET
POST
CREATING TEXT BOX
- The text boxes are single-line text input controls that are created using an
<INPUT> element whose type attribute has a value as “text”.
e.g.
<FORM action=”mailto:[email protected]” method=”post”>
First Name:
<INPUT type = “text” name=”first_name”/>
<br>
Second Name:
<INPUT type = ”text” name=”last_name”/>
</FORM>
Attributes of <INPUT> tag
value – Provides an initial value for the text input control that the
user will see when the forms loads.
size – Allow you to specify the width of the text-input control.
maxsize – Allows you to specify the maximum number of characters
into the text box.
CREATING PASSWORD BOX
- It hides the characters input in the text box and shows a dot or asterisk in
place of every character entered.
- A password box is created as per following syntax:
<INPUT type =”password” name =”<name of password box> “ >
e.g.
<FORM>
Login:
<INPUT type = “text” name=”login”/>
<br>
Password:
<INPUT type = ”password” name=”pwd”/>
</FORM>
CREATING TEXT AREA
- Multiple line text input control can be created using <TEXTAREA> tag.
- A text area can be created as per following syntax:
<TEXTAREA rows =”rows here” cols=”columns here” name=”name of text area”>
e.g.
<FORM>
Description : <br/>
<TEXTAREA rows=”5” cols=”50” name=”descrip”>
Enter Description here ……….
</TEXTAREA>
</FORM>
CREATING BUTTONS
There are two ways of creating the buttons:
1. Creating buttons with INPUT tag.
2. Creating buttons with BUTTON tag.
CREATING BUTTON WITH <INPUT> TAG
- While creating buttons with help of <INPUT> tag, type attribute can take
three values:
submit : This creates a button that automatically submits a form.
reset : This creates a button that automatically resets form controls
to their initial values.
button : This creates a simple button.
e.g.
<FORM>
<INPUT type=”submit” name=”Submit”/>
<br/><br/>
<INPUT type=”reset” name=”Reset”/>
<INPUT type=”button” name=”Button”/>
</FORM>
CREATING BUTTONS WITH BUTTON TAG
<Button type=”button-type”>name</Button>
e.g.
<FORM>
<BUTTON type=”submit”>SUBMIT</BUTTON>
<br/><br/>
<BUTTON type=”reset”>RESET</BUTTON>
<BUTTON type=”button”>Button</BUTTON>
</FORM>
CREATING CHECKBOXES
- Check boxes are created using the <INPUT> tag with type attribute set to
“checkbox” as per the following syntax:
<INPUT type =”checkbox” name=”nameofcheckbox” value=”valuetobeused”>
- When a checkbox is selected, its name-value pair is sent for processing.
e.g.
<FORM>
<INPUT type=”checkbox” name=”s1” value=”Maths”/>Maths
<INPUT type=”checkbox” name=”s2” value=”Physics”/>Physics
<INPUT type=”checkbox” name=”s3” value=”English”/>English
<INPUT type=”checkbox” name=”s4” value=”B.Studies”/>Business Studies
<INPUT type=”submit” value=”Select Subject”/>
</FORM>
CREATING RADIOBOX
- Radio Buttons are used when only one option is required to be selected.
- Radio buttons are created using the <INPUT> tag with type attribute set to
“radio” as per the following syntax:
<INPUT type =”radio” name=”nameofradiobutton” value=”valuetobeused”>
e.g.
<FORM>
<INPUT type=”radio” name=”stream” value=”Science”/>Science
<INPUT type=”radio” name=”stream” value=”Commerce”/>Commerce
<INPUT type=”radio” name=”stream” value=”Humanities”/>Humanities
<INPUT type=”submit” value=”Select Stream”/>
</FORM>
SELECT BOX CONTROL
- Drop down box or select box is used to select one option at a time.
- A drop down box (select box) is created with SELECT and OPTION tag pair,
as per the following syntax:
<SELECT name=”name here”>
<OPTION value=”value here”>Item name</OPTION>
……..
</SELECT>
e.g.
<FORM>
<SELECT name=”Stream”>
<OPTION value=”Science”>Science</OPTION>
<OPTION value=”Commerce”>Commerce</OPTION>
<OPTION value=”Humanities”>Humanities</OPTION>
</SELECT>
</FORM>
