Scribd
Upload
161 views73 pages

HTML - Part I

HTML is a markup language used to define the structure and layout of web pages. It uses tags to indicate elements like headings, paragraphs, lists, and links. There are different types of lists in HTML - unnumbered lists use bullet points, numbered lists number items sequentially, and definition lists define terms. Images and other files can be embedded using the <img> tag. Hyperlinks allow linking to other pages using the <a> tag.

Uploaded by

Deepika Singh
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
161 views73 pages

HTML - Part I

HTML is a markup language used to define the structure and layout of web pages. It uses tags to indicate elements like headings, paragraphs, lists, and links. There are different types of lists in HTML - unnumbered lists use bullet points, numbered lists number items sequentially, and definition lists define terms. Images and other files can be embedded using the <img> tag. Hyperlinks allow linking to other pages using the <a> tag.

Uploaded by

Deepika Singh
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 73

HTML – Part I

About HTML
• Hyper Text Markup Language-: Constitutes a
collection of platform independent styles
that define the various components of a web
document.
• Styles indicated by markup tags.
• What is HTML really?
• Plain-text documents can be created
using any text editor.
About HTML
• What is a markup language?
One where we can embed special tags or
formatting commands in the text. To describe
how the text should be displayed / printed.

• HTML is a markup language


Special formatting codes (called tags)
to adjust fonts, create bulleted lists,
create forms, display images, create
tables, etc.
HTML Tags
• The left and right angle brackets are used to
enclose all special instructions, called tags.
• Two classes of tags:
• Those which appear in pairs.
<i> Good morning </i>
• Those which appear individually.
<img src=“baby.jpg”>
• Browsers interpret the tags to display a HTML
page in properly formatted form.
Some Points
• Most of the tags belong to the first category.
<tag-name> …… directives …… </tag-name>
• Tags are case insensitive
<HEAD>, <Head> and <head> are all equivalent.
• Tags may be nested
<html> <head>…</head> <body>…</body>
</html>
• Most browsers have a VIEW SOURCE menu
option.
• The HTML version of the page can be displayed.
Some Points (contd.)
• Browsers ignore all extra spaces and carriage
returns within a HTML document.
• Why?
• Browsers have to reformat the document to
fit in the current display area.
• It is good practice to use white spaces in a
HTML document.
• Improves readability.
Some Points (contd.)
• Unrecognized tags
Browsers normally ignore tags it does not
recognize.
• Comment lines
• Comments are included between <!---
and --->.
• Comments cannot be nested.
• <!--- A comment here --->
<!--- Another comment in
two lines --->
HTML Document Structure
• A HTML document consists of two major
portions:
• Head
Contains information about the document, like
the title and “meta” data describing the
contents.
• Body
Contains the actual matter of the document.
Gets displayed within the browser window.
A Simple HTML Document
<html>
<head>
<title> Title of the Document </title>
</head>
<body text=white bgcolor=“blue”>
This is the content of the document.
This is an <i> italic </i> font.
</body>
</html> VIEW
Structural HTML Tags
• <html> …….. </html>
Used to bracket an entire HTML document.
• Optional for most browsers.
• Attributes:
lang = language code
Language code indicates the primary
language of the document.
• bn – Bengali, hi – Hindi, en – English
Structural HTML Tags
• <head> ……. </head>
• Used to provide information about a web page.
• Nests within itself other tags like
<base>, <meta> and <title>.
• <base>
• Attribute: href=url
• Specifies the base pathname for all relative URLs
in the document.
• No end tag.
Structural HTML Tags
• <meta>
Used to provide information about a document.
• Keywords or descriptions to aid search engines.
• <title> ……. </title>
• Specifies the title of a HTML document.
• Usually appears on the title bar of the browser
window.
Structural HTML Tags
• <body> ……. </body>
• Used to bracket the body of a HTML document.
• Attributes:
• background=url -> specifies an image file to be
used as tiling background.
• bgcolor=color -> Sets the background color of
the document.
• text=color -> Sets the default color for the
normal text in the document.
How to specify colors?
• Two ways:
• By specifying the red, green, blue or
RGB components.
• Each color encoded in 8 bits.
• 00 means that the color is turned off;
• FF means fully turned on.
• Example:
• <body text=“#FFFFFF”
• bgcolor=“#0000FF”>
How to specify colors?
• How to specify colors? (contd.)
By specifying the color name.
• Some of the colors that are supported by browsers
are:
• Aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, yellow, white
• Many other colors are possible.
Example:
• <body text=white>
• <body bgcolor=“yellow”>
Topics for Self-study
• Hyper Text Markup Language
• http://www.w3schools.com/html/default.as
p
• Hyper Text Transport Protocol
• http://www.comptechdoc.org/independent/
web/http/reference/
• http://www.jmarshall.com/easy/http/
Text Formatting in HTML
• Paragraphs and Headings
• <Hn> ……. </Hn>
• Used to generate headings, 1 ≤ n ≤ 6.
• Six different levels of headings.
• <H1> is the largest, <H6> is the smallest.
• • <P>
• Paragraph marker, used to separate text into
paragraphs.
• End tag </P> is optional.
• A series of paragraph tags <p><p>…<p>
with no intervening text is treated as a single <p>.
Text Formatting in HTML(contd..)
• <BR>
• Used to indicate that the text following
• <BR> should begin on the next line.
• The amount of line spacing is less than
that of a <P> break.
• Example:
• This is the first line. <br>
• This is the second line. <br>
• This is the third.
Text Formatting in HTML(contd..)
• <HR>
• Produces a horizontal line, which can be used to
delimit sections.
• Length of the line can be specified.
• Examples:
• <hr>
• <hr size=“20”> [ noshade option possible ]
• <hr width=“75%”>
• <hr align=“right” width=120>
• Across full width of browser, 20 pixels thick, 75% of
available page width, and 120 pixels right-justified.
Text Formatting in HTML(contd..)
• <address> ……. </address>
• Supplies the contact information of the author.
• Generally formatted in italics, with a line break above
and below.
• Example:
<address>
• Chinmoy Misra<br>
• School of Computer Applications. <br>
• KIIT University, INDIA <br>
• Email: [email protected]
• </address>
Text Formatting in HTML(contd..)
• <b> ……. </b>
• Displays the enclosed text in bold.
• • <i> ……. </i>
• Displays the enclosed text in italics.
Text Formatting in HTML(contd..)
• <pre> ……. </pre>
Allows browser to display carefully laid out text.
• Used to display program listings.
• Example:
<pre>
main()
{
int i, j;
abc ();
}
</pre>
Text Formatting in HTML(contd..)
• <sub> ……. </sub>
• Displays the enclosed text as subscript.
<sup> ……. </sup>
• Displays the enclosed text as superscript.
• <font> ……. </font>
• Specifies the style of the enclosed text.
Attributes:
• color = color name
• face = typeface
• size = value [1 to 7; 3 is the default] [can also specify
as +n or –n]
Text Formatting in HTML(contd..)
• <center> ……. </center>
• Centers the enclosed elements horizontally
on the page.
• <P align=option> ……. </P>
• Used to align a paragraph.
• Option can be left, right or center.
Text Formatting in HTML(contd..)
• Demonstrate how different kinds of lists may
be specified in HTML.
Demonstrate how hyperlinks may be
specified in a HTML document.
• Demonstrate how inline images and other
documents may be embedded within a HTML
document.
HTML Lists
• Types of Lists
• There are a number of tags for building lists.
• Serves the purpose of improving the readability
of the text.
• Depending on the way the list items are
displayed, lists may be divided into three
types:
• Unnumbered list
• Numbered list
• Definition list
Unnumbered List
• Used to display a set of related items that
appear in no particular order.
• Each item is indented with a preceding bullet
symbol.
• Specified using the tag:
• <UL> ……… </UL>
• The individual items in the list are specified
using the <LI> tag.
• Attributes:
type = disc | circle | square
Unnumbered List
• The <LI> items can contain multiple
paragraphs, specified using <P>.
Example:
<UL>
<LI> First item of the list
<LI> Second item of the list
<LI> Third item of the list
</UL>
Unnumbered List (Example 1)
<html>
<head><title> Bulleted list 1 </title></head>
<body text=white bgcolor=blue>
<h2> The flowers I like: </h2>
<h3>
<UL>
<LI> Rose
<LI> Lotus
<LI> Daffodil
<LI> Marigold
</UL>
</h3>
</body>
</html>
Unnumbered List (Example 2)
<html>
<head><title> Bulleted list 2 </title></head>
<body text=white bgcolor=blue>
<h2> The flowers I like: </h2>
<h3>
<UL type=square>
<LI> Rose
<LI> Lotus
<LI type=circle> Daffodil
<LI> Marigold
</UL>
</h3>
</body>
</html>
Unnumbered List (Example 2)
<html>
<head><title> Bulleted list 2 </title></head>
<body text=white bgcolor=blue>
<h2> The flowers I like: </h2>
<h3>
<UL type=square>
<LI> Rose
<LI> Lotus
<LI type=circle> Daffodil
<LI> Marigold
</UL>
</h3>
</body>
</html>
Numbered List
Numbered or ordered lists are used when the
sequence of the items is important.
• Specified using the tag:
<OL> ……… </OL>
• The individual items in the list are specified
• using the <LI> tag.
• •Example:
<OL>
<LI> This is number one
<LI> This is number two
<LI> This is number three
</OL>
Numbered List
• The list items are numbered sequentially
as 1,2,3,…
• Attributes:
• type = 1 | A | a | I | I
• Specifies the style of numbering.
• 1,2,3,… or A,B,C,… or a,b,c,… or I,II,III,… or
• i,ii,iii,…
Numbered List (Example 1)
<html>
<head><title> Numbered list 1 </title></head>
<body text=white bgcolor=blue>
<h2> To cook Maggi you must: </h2>
<h3>
<OL>
<LI> Put some water to boil
<LI> Put in noodles and masala
<LI> Wait for 2 minutes
<LI> Serve in a plate
</OL>
</h3>
</body>
</html>
Numbered List (Example 1)
<html>
<head><title> Numbered list 1 </title></head>
<body text=white bgcolor=blue>
<h2> To cook Maggi you must: </h2>
<h3>
<OL>
<LI> Put some water to boil
<LI> Put in noodles and masala
<LI> Wait for 2 minutes
<LI> Serve in a plate
</OL>
</h3>
</body>
</html>
Numbered List (Example 2)
<html>
<head><title> Numbered list 2 </title></head>
<body text=white bgcolor=blue>
<h2> To cook Maggi you must: </h2>
<h3>
<OL type =A>
<LI> Put some water to boil
<LI> Put in noodles and masala
<LI> Wait for 2 minutes
<LI> Serve in a plate
</OL>
</h3>
</body>
</html>
Numbered List (Example 3)
<html>
<head><title> Numbered list 3 </title></head>
<body text=white bgcolor=blue>
<h2> To cook Maggi you must: </h2>
<h3>
<OL type =I>
<LI> Put some water to boil
<LI> Put in noodles and masala
<LI type=1> Wait for 2 minutes
<LI> Serve in a plate
</OL>
</h3>
</body>
</html>
Definition List
• Specified using the tag:
• <DL> ……… </DL>
• Each definition comprises of a definition
term (<DT>) and a definition description
(<DD>).
• Web browsers format each definition on
• a new line and indent it.
Definition List (Example)
<html>
<head><title> Definition list 1 </title></head>
<body text=white bgcolor=blue>
<h2> Some important protocols: </h2>
<h3><DL>
<DT> TCP
<DD> Transmission Control Protocol
<DT> UDP
<DD> User Datagram Protocol
<DT> IP
<DD> Internet Protocol
</DL></h3>
</body>
</html>
Nesting of Lists
• Any list can be nested within another list.
• When unnumbered lists are nested, the
browser automatically uses a different
bullet symbol for each level.
• When numbered lists are nested, by
default, every level is numbered using
the arabic numerals (1, 2, 3, …).
Nesting of Lists (Example 1)
<html><head><title> List Nesting 1 </title></head>
<body text=white bgcolor=blue>
<H3> My favorite languages are:
<UL>
<LI> Java <BR>
<UL>
<LI> object-oriented
<LI> platform independent
<LI> can be embedded within HTML
</UL> <BR>
<LI> Perl <BR>
<UL>
<LI> a scripting language
<LI> powerful string handling capabilities
<LI> widely used for writing CGI scripts
</UL>
</UL> </H3>
</body></html>
Nesting of Lists (Example 2)
<html><head><title> List Nesting 2 </title></head>
<body text=white bgcolor=blue>
<H3> My favorite languages are:
<OL>
<LI> Java <BR>
<UL>
<LI> object-oriented
<LI> platform independent
<LI> can be embedded within HTML
</UL> <BR>
<LI> Perl <BR>
<OL>
<LI> a scripting language
<LI> powerful string handling capabilities
<LI> widely used for writing CGI scripts
</OL>
</OL> </H3>
</body></html>
Nesting of Lists (Example 2)
<html><head><title> List Nesting 2 </title></head>
<body text=white bgcolor=blue>
<H3> My favorite languages are:
<OL>
<LI> Java <BR>
<UL>
<LI> object-oriented
<LI> platform independent
<LI> can be embedded within HTML
</UL> <BR>
<LI> Perl <BR>
<OL>
<LI> a scripting language
<LI> powerful string handling capabilities
<LI> widely used for writing CGI scripts
</OL>
</OL> </H3>
</body></html>
Specifying Hyperlinks
• Chief power of HTML comes from its ability
to link text and/or image to another
document or section of a document.These
links are called hyperlinks.
Browser by default highlights the hyperlinks
with color and/or underline.
Specifying Hyperlinks
• Specified using the anchor tag:
<A> ……. </A>
• Requires an attribute called “HREF” which
specifies the path of the resource to be linked.
• Example:
• <A HREF=“face.jpg”> portrait </A>
• <a href=www.google.com> search </a>
• <a href=“mailto:[email protected]”> Mail me
</a>
• <a href=slides/ch5.pdf> download pdf </a>
Relative versus Absolute URLs
• Relative URL
• Provides a link to another document relative
to the location of the current document.
• Commonly used when referring to
documents residing on the same web site.
• Examples:
• <a href=“TENNIS/sania.html”> Sania Mirza </a>
• <a href=“../NEWS/cricket.html”> Cricket </a>
• These kind of links are called relative links.
Relative versus Absolute URLs
• Absolute URL
• The complete path name of the document in
the server is specified.
• Necessary when linking to documents on
other servers.
• Example:
<a
href=“www.iitkgp.ac.in/people/isg/paper5.pdf”
>
One of my recent papers </a>
Relative versus Absolute URLs
• Anchors can be used to go to a particular
section in a document.
• Within the same (or different) document.
• Two steps involved.
• Define a named section in a document.
• <a name=“tennis”> <h2>About tennis</h2> </a>
• Provide a link to the named section.
• <a href=“#tennis”> Information on Tennis </a>
• <a href=“http://www.sunny.com/xyz.html #LAN”>
• Local Area Networks </a>
Hyperlinks (Example)
<html><head><title> Link to Other Sites </title></head>
<body text=white bgcolor=blue link=red vlink=green>
My favorite search engines are:
<ol>
<li> <a href="http://www.google.com"> Google </a>
<li> <a href="http://www.yahoo.com"> Yahoo </a>
<li> <a href="http://www.khoj.com"> Khoj </a>
</ol>
<hr>
<address>
Mr. Chinmoy Misra<BR> <BR>
<a href="mailto:[email protected]"> <img src="mbox.gif"
align=middle> </a>
</address>
</body></html>
Inline Images and Other
Documents
• Supported image formats:
• JPEG, GIF, PNG
• Specified using the standalone tag:
• <IMG>
• Attributes of <IMG>:
• SRC: specifies the URL of the image file
• HEIGHT: height (in pixels) to be set aside for the
image.
• WIDTH: width (in pixels) to be set aside for
the image.
Inline Images and Other
Documents
• The HEIGHT and WIDTH attributes tells the
browser to set aside appropriate space (in
pixels) for the image as it downloads the
rest of the file.
• Some browsers stretch or shrink an image to fit
into the allotted space.
• Example:
• <IMG SRC=blackrose.gif>
• <img src=tiger.jpg height=80 width=150>
Inline Images (Example 1)
• <html><body>
An image
<img src=book.gif align="bottom" width="48"
height="48">
in the text
<p> An image
<img src =book.gif align="middle" width="48"
height="48">
in the text
<p> An image
<img src =book.gif align="top" width="48"
height="48">
in the text
</body></html>
Inline Images (Example 2)
<html>
<body>
<img src =book.gif align ="left" width="48"
height="48">
A paragraph with an image. The image will float to the
left of this text.
<p>
<img src =book.gif align ="right" width="48"
height="48">
A paragraph with an image. The image will float to the
right of this text.
</body>
</html>
Inline Images (Example 3)
<html>
<body>
<img src="book.gif" width="20" height="20"> <p>
<img src="book.gif" width="45" height="45"> <p>
<img src="book.gif" width="70" height="70"> <p>
Resizing an image by changing the values in the
"height" and "width" attributes of the img tag.
</body>
</html>
Inline Images (Example 4)
<html>
<body>
It is possible to use an image as a link. Click on the
image below to go to google.
<P>
<a href=“www.google.com">
<img src=book.gif>
</a>
</body>
</html>
HTML Tables
• Tables are made up of cells, arranged into
rows.
• Table is a matrix like object that holds other
objects such as text, images, buttons and etc.
• Each row is represented by <TR> …</TR>
• Each column is represented by <TD>…</TD>
• Header Rows is represented by
• Use tags <TABLE>, <TR>, <TD>.
HTML Tables(Examples)
• An example:
<html>
<body>
<table>
<tr>
<td> Good </td> <td> Bad </td>
</tr>
<tr>
<td> Cute </td> <td> Ugly </td>
</tr>
</table>
</body>
</html>
HTML Tables
• Table Header is represented by <TH>..</TH>
• Data is represented by <TR> ..</TR>
• The attributes that can be included in tables
• Align: Horizontal Alignment of cell contents(Left,center,
Right)
• Valign: Vertical Alignment of cell contents(Top, Middle,
Bottom)
• Width: Width to a specific number of pixels or percentage of
available screen width
HTML Tables
• Border: Controls the border around the table
• Cellpadding: Maintain the distance between border and
table data
• Cellspacing: Controls the distance between the data in a cell
and the boundaries of the cell
• Colspan: It is used inside a <TH> or <TD> tag to instructs the
browser to take up more than one column.This attribute is
useful when one row of the table needs to be a certain
number of columns wide.
• Rowspan:Take up more than one row. Ex: rowspan=3.
HTML Tables
• Border: Controls the border around the table
• Cellpadding: Maintain the distance between border and
table data
• Cellspacing: Controls the distance between the data in a cell
and the boundaries of the cell
• Colspan: It is used inside a <TH> or <TD> tag to instructs the
browser to take up more than one column.This attribute is
useful when one row of the table needs to be a certain
number of columns wide.
• Rowspan:Take up more than one row. Ex: rowspan=3.
HTML Tables (Example-23)
<Html><Body> <TABLE>
<CAPTION>BigCorp's Computer Systems and Specifications</CAPTION>
<TR><TH>System 486</TH><TH>System 586</TH><TH>System 686</TH>
<TR><TD>486DX2-66 CPU</TD><TD>120 MHZ AMD586</TD><TD>200 Mhz
Pentium Pro</TD>
<TR><TD>8 MB RAM</TD><TD>16 MB RAM</TD><TD>16 MB RAM</TD>
<TR><TD>500 MB HD</TD><TD>1 GB HD</TD><TD>1.4 GB HD</TD>
<TR><TD>14.4 Modem</TD><TD>28.8 Modem</TD><TD>28.8
Modem</TD>
<TR><TD>desktop case</TD><TD>minitower case</TD><TD>tower
case</TD>
<TR><TD>DOS/Win 3.1</TD><TD>Windows 95</TD><TD>Windows NT
4.0</TD>
</TABLE> </Body> </Html>
HTML Tables (Example-24)
<Html><Body> <TABLE>
<H3>Favorite Ice Cream Flavors</H2>
<TABLE BORDER>
<CAPTION ALIGN="BOTTOM">Data from the <I>New
Jersey Times</I></CAPTION>
<TR><TH>Date</TH><TH>Chocolate</TH><TH>Vanilla</
TH>
<TR><TH>1970</TH><TD>50%</TD><TD>50%</TD>
<TR><TH>1980</TH><TD>76%</TD><TD>24%</TD>
<TR><TH>1990</TH><TD>40%</TD><TD>60%</TD>
</TABLE> </Body> </Html>
HTML Tables (Example-25)
<Html><Body> <TABLE>
<H2>Coming Events</H2>
<P>Click any of the days highlighted in the calendar to read about the event scheduled for that
day.</P>
<TABLE BORDER WIDTH="75%">
<CAPTION>BigCorp's Calendar of Events - November 1996</CAPTION>
<TR ALIGN="CENTER"><TH>Sun</TH><TH>Mon</TH><TH>Tue</TH><TH>Wed</TH><TH>Thu</TH>
<TH>Fri</TH><TH>Sat</TH>
<TR ALIGN="CENTER"><TD COLSPAN="5">&nbsp;</TD><TD>1</TD><TD>2</TD>
<TR ALIGN="CENTER"><TD>3</TD><TD>4</TD><TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD>
<TD>9</TD>
<TR ALIGN="CENTER"><TD>10</TD><TD><A
HREF="nov11.html">11</A></TD><TD>12</TD><TD>13</TD><TD><A
HREF="nov14.html">14</A></TD><TD>15</TD><TD>16</TD>
<TR ALIGN="CENTER"><TD><A HREF="nov17.html">17</A></TD><TD>18</TD><TD>19</TD>
<TD><A HREF="nov20.html">20</A></TD><TD>21</TD><TD>22</TD><TD>23</TD>
<TR ALIGN="CENTER"><TD>24</TD><TD>25</TD><TD>26</TD><TD>28</TD><TD>29</TD><TD>
30</TD><TD>31</TD>
</TABLE>
</Body> </Html>
HTML Tables With background color
• We can use background colors for tables in
new browsers. You can specify background
color options inside <TABLE> tag.
• To put color in Table header use the tag
<TH>..</TH>
To put color in Table data use the
tag<Td>..</Td>
HTML Tables (Example-26)
<HTML>
<HEAD>
<TITLE>Example 26</TITLE>
</HEAD>
<BODY>
<TABLE width="300" BGCOLOR="#66CCFF">
<TR>
<TD width="50%">A</TD>
<TD width="50%">B</TD>
</TR>
<TR>
<TD width="50%">C</TD>
<TD width="50%">D</TD>
</TR>
</TABLE>
</BODY>
</HTML>
HTML Tables (Example-27)
<HTML>
<HEAD>
<TITLE>Example 27</TITLE>
</HEAD>
<BODY>
<TABLE width="300" BORDER=1 align=center>
<TR BGCOLOR="#66CCFF">
<TD width="50%">A</TD>
<TD width="50%">B</TD>
</TR>
<TR BGCOLOR="#CCFFFF">
<TD width="50%">C</TD>
<TD width="50%">D</TD>
</TR>
</TABLE>
</BODY>
</HTML>
HTML Tables (Example-28)
<HTML>
<HEAD>
<TITLE>Example 28</TITLE>
</HEAD>
<BODY bgcolor=lightgray><B> Specifying Coloured Table Cells></B>
<br><br><br></br></br></br><center>
<TABLE width="300" BORDER=1 align=center>
<TR ><TH BGCOLOR=gray> NAME></TH>
<TH BGCOLOR=gray> AGE></TH></TR>
<TD width="50%">A</TD>
<TD width="50%">B</TD>
</TR>
<TR align=center><Td bgcolor=black><Font color=white>shilpa</font></Td>
<Td bgcolor=violet><font color=red>21</font></td><tr>
<TR align=center><Td bgcolor=blue><Font color=white>Vaishali</font></Td>
<Td bgcolor=Red><font color=blue>21</font></td><tr>
<caption align=bottom><br><B> Personal Information</B></Caption>
</TABLE>
</center></BODY>
</HTML>
HTML Tables (Example-29)
<HTML>
<HEAD>
<TITLE>Example 28</TITLE>
</HEAD>
<BODY bgcolor=lightgray><B> Specifying Coloured Table Cells></B>
<br><br><br></br></br></br><center>
<TABLE width="300" BORDER=1 align=center>
<TR ><TH BGCOLOR=gray rowspan=2> NAME></TH>
<TH BGCOLOR=gray colspan=3> Marks></TH></TR>
<tr><th>Power Builder</Th><Th>Visual Basic</Th><Th>Devloper 2000</Th></Tr>
<TR align=center><Td> Shilpa</Td><TD> 21</TD><Td> 45</Td><Td>30</Td>
<TR align=center><Td> Vaishali</Td><TD> 29</TD><Td> 40</Td><Td>32</Td>

<caption align=bottom><br><B> Personal Information</B></Caption>


</TABLE>
</center></BODY>
</HTML>
HTML Tables (Example-29)
• web page separated into two sections by a
vertical line (a side-line), you could set up it
up as a one row, two column table.
HTML Tables (Example-30)
<HTML>
<HEAD>
<TITLE>Example 28</TITLE>
</HEAD>
<BODY bgcolor=lightgray><B> Specifying Coloured Table Cells></B>
<br><br><br></br></br></br><center>
<TABLE BORDER="1" CELLSPACING="0"
CELLPADDING="10" WIDTH="100%" HEIGHT="600">
<TR VALIGN="TOP">
<TD WIDTH="30%" BGCOLOR="#FFFF00">This side is colored yellow
<P>Feel free to place anything on this side.
<P>This cell is 30% of the browser screen width.
<TD WIDTH="70%">This side just shows plain text.
<P>You can color it too if you want.
<P>This side is 70% of the width of the screen.
<P>Both sides are 600 pixels long.
<P>But you can change it to anything you want.
</TABLE>
<caption align=bottom><br><B> Personal Information</B></Caption>
</TABLE>
</center></BODY>
</HTML>
HTML Tables Color
HTML Tables Color
HTML Tables Color

You might also like