If you know nothing about HTML, this is where you can start !!

HTML Basics
HTML,Text, Images,Tables
Sukhpal Singh Gill
PhD Research Scholar
Thapar University, Patiala

How the Web Works?
 WWW use classical client / server architecture
 HTTP is text-based request-response protocol
2
Page request
Client running a
Web Browser
Server runningWeb
Server Software
(IIS, Apache, etc.)
Server response
HTTP
HTTP

What is a Web Page?
 Web pages are text files containing HTML
 HTML – Hyper Text Markup Language
 A notation for describing
 document structure (semantic markup)
 formatting (presentation markup)
 Looks (looked?) like:
 A Microsoft Word document
 The markup tags provide information about
the page content structure
3

Creating HTML Pages
 An HTML file must have an .htm or .html file
extension
 HTML files can be created with text editors:
 NotePad, NotePad ++, PSPad
 Or HTML editors (WYSIWYG Editors):
 Microsoft FrontPage
 Macromedia Dreamweaver
 Netscape Composer
 Microsoft Word
 Visual Studio 4

HTML Basics
Text, Images,Tables, Forms

HTML Structure
 HTML is comprised of “elements” and “tags”
 Begins with <html> and ends with </html>
 Elements (tags) are nested one inside another:
 Tags have attributes:
 HTML describes structure using two main sections:
<head> and <body>
6
<html> <head></head> <body></body> </html>
<img src="logo.jpg" alt="logo" />

HTML Code Formatting
 The HTML source code should be formatted to
increase readability and facilitate debugging.
 Every block element should start on a new line.
 Every nested (block) element should be indented.
 Browsers ignore multiple whitespaces in the page
source, so formatting is harmless.
 For performance reasons, formatting can be
sacrificed
7

First HTML Page
8
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
test.html

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
First HTML Page:Tags
9
Opening tag
Closing tag
An HTML element consists of an opening tag, a closing tag
and the content inside.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
First HTML Page: Header
10
HTML header

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
First HTML Page: Body
11
HTML body

Some SimpleTags
 HyperlinkTags
 ImageTags
 Text formatting tags
12
<a href="http://www.telerik.com/"
title="Telerik">Link to Telerik Web site</a>
<img src="logo.gif" alt="logo" />
This text is <em>emphasized.</em>
<br />new line<br />
This one is <strong>more emphasized.</strong>

Some SimpleTags – Example
13
<!DOCTYPE HTML>
<html>
<head>
<title>Simple Tags Demo</title>
</head>
<body>
<a href="http://www.telerik.com/" title=
"Telerik site">This is a link.</a>
<br />
<br />
<strong>Bold</strong> and <em>italic</em> text.
</body>
</html>
some-tags.html

Some SimpleTags – Example (2)
14
<!DOCTYPE HTML>
<html>
<head>
<title>Simple Tags Demo</title>
</head>
<body>
<a href="http://www.telerik.com/" title=
"Telerik site">This is a link.</a>
<br />
<br />
<strong>Bold</strong> and <em>italic</em> text.
</body>
</html>
some-tags.html

Tags Attributes
 Tags can have attributes
 Attributes specify properties and behavior
 Example:
 Few attributes can apply to every element:
 id, style, class, title
 The id is unique in the document
 Content of title attribute is displayed as hint
when the element is hovered with the mouse
 Some elements have obligatory attributes
15
Attribute alt with value "logo"

Headings and Paragraphs
 HeadingTags (h1 – h6)
 ParagraphTags
 Sections: div and span
16
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<div style="background: skyblue;">
This is a div</div>

Headings and Paragraphs –
Example
17
<!DOCTYPE HTML>
<html>
<head><title>Headings and paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<div style="background:skyblue">
This is a div</div>
</body>
</html>
headings.html

<!DOCTYPE HTML>
<html>
<head><title>Headings and paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<div style="background:skyblue">
This is a div</div>
</body>
</html>
Headings and Paragraphs –
Example (2)
18
headings.html

Introduction to HTML
HTML Document Structure in Depth

Preface
 It is important to have the correct vision and
attitude towards HTML
 HTML is only about structure, not appearance
 Browsers tolerate invalid HTML code and parse
errors – you should not.
20

HTML vs. XHTML
 XHTML is more strict than HTML
 Tags and attribute names must be in lowercase
 All tags must be closed (<br/>, <img/>) while
HTML allows <br> and <img> and implies
missing closing tags (<p>par1 <p>par2)
 XHTML allows only one root <html> element
(HTML allows more than one)
21

<body> Section: Introduction
 The <body> section describes the viewable
portion of the page
 Starts after the <head> </head> section
 Begins with <body> and ends with </body>
22
<html>
<head><title>Test page</title></head>
<body>

</body>
</html>

Text Formatting
 Text formatting tags modify the text between
the opening tag and the closing tag
 Ex. <b>Hello</b> makes “Hello” bold
<b></b> bold
<i></i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text – strike through
23

Text Formatting – Example
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0 transitional.<br />
Next line.</p>
</body>
</html>
text-formatting.html

Text Formatting – Example (2)
25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0 transitional.<br />
Next line.</p>
</body>
</html>
text-formatting.html

Hyperlinks: <a>Tag
 Link to a document called form.html on the
same server in the same directory:
 Link to a document called parent.html on
the same server in the parent directory:
 Link to a document called cat.html on the
same server in the subdirectory stuff:
26
<a href="form.html">Fill Our Form</a>
<a href="../parent.html">Parent</a>
<a href="stuff/cat.html">Catalog</a>

Hyperlinks: <a>Tag (2)
 Link to an external Web site:
 Always use a full URL, including "http://", not
just "www.somesite.com"
 Using the target="_blank" attribute opens
the link in a new window
 Link to an e-mail address:
27
<a href="http://www.devbg.org" target="_blank">BASD</a>
<a href="mailto:bugs@example.com?subject=Bug+Report">
Please report bugs here (by e-mail only)</a>

Hyperlinks: <a>Tag (3)
 Link to a document called apply-now.html
 On the same server, in same directory
 Using an image as a link button:
 Link to a document called index.html
 On the same server, in the subdirectory english of
the parent directory:
28
<a href="apply-now.html"><img
src="apply-now-button.jpg" /></a>
<a href="../english/index.html">Switch to
English version</a>

Links to the Same Document –
Example
29
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br />
...the rest of the table of contents...

<h2 id="section1">Introduction</h2>
... Section 1 follows here ...
<h2 id="section2">Some background</h2>
<h3 id="section2.1">Project History</h3>
... Section 2.1 follows here ...
links-to-same-document.html

Links to the Same Document –
Example (2)
30
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br />
...the rest of the table of contents...

<h2 id="section1">Introduction</h2>
<h2 id="section2">Some background</h2>
<h3 id="section2.1">Project History</h3>
... Section 2.1 follows here ...
links-to-same-document.html

 Inserting an image with <img> tag:
 Image attributes:
 Example:
Images: <img> tag
src Location of image file (relative or absolute)
alt Substitute text for display (e.g. in text mode)
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border
<img src="/img/basd-logo.png">
<img src="./php.png" alt="PHP Logo" />
31

MiscellaneousTags
 <hr />: Draws a horizontal rule (line):
 <center></center>: Deprecated!
 <font></font>: Deprecated!
32
<hr size="5" width="70%" />
<center>Hello World!</center>
<font size="3" color="blue">Font3</font>
<font size="+4" color="blue">Font+4</font>

a. Apple
b. Orange
c. Grapefruit
Ordered Lists: <ol>Tag
 Create an Ordered List using <ol></ol>:
 Attribute values for type are 1, A, a, I, or i
33
1. Apple
2. Orange
3. Grapefruit
A. Apple
B. Orange
C. Grapefruit
I. Apple
II. Orange
III. Grapefruit
i. Apple
ii. Orange
iii. Grapefruit
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>

Unordered Lists: <ul>Tag
 Create an Unordered List using <ul></ul>:
 Attribute values for type are:
 disc, circle or square
34
• Apple
• Orange
• Pear
o Apple
o Orange
o Pear
 Apple
 Orange
 Pear
<ul type="disk">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>

Definition lists: <dl> tag
 Create definition lists using <dl>
 Pairs of text and associated definition; text is in
<dt> tag, definition in <dd> tag
 Renders without bullets
 Definition is indented
35
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>

Lists – Example
36
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>A markup lang…</dd>
</dl>
lists.html

HTML Special Characters
££British Pound
€€Euro
""Quotation Mark
¥¥JapaneseYen
——Em Dash
 Non-breaking Space
&&Ampersand
>>GreaterThan
<<LessThan
™™Trademark Sign
®®RegisteredTrademark Sign
©©Copyright Sign
SymbolHTML EntitySymbol Name
37

Special Characters – Example
38
<p>[>>  Welcome
  <<]</p>
<p>►I have following cards:
A♣, K♦ and 9♥.</p>
<p>►I prefer hard rock ♫
music ♫</p>
<p>© 2006 by Svetlin Nakov & his
team</p>
<p>Telerik Academy™</p>
special-chars.html

Special Chars – Example (2)
39
<p>[>>  Welcome
  <<]</p>
<p>►I have following cards:
A♣, K♦ and 9♥.</p>
<p>►I prefer hard rock ♫
music ♫</p>
<p>© 2006 by Svetlin Nakov & his
team</p>
<p>Telerik Academy™</p>
special-chars.html

HTMLTables
 Tables represent tabular data
 A table consists of one or several rows
 Each row has one or more columns
 Tables comprised of several core tags:
<table></table>: begin / end the table
<tr></tr>: create a table row
<td></td>: create tabular data (cell)
 Tables should not be used for layout. Use CSS
floats and positioning styles instead
41

HTMLTables (2)
 Start and end of a table
 Start and end of a row
 Start and end of a cell in a row
42
<table> ... </table>
<tr> ... </tr>
<td> ... </td>

Simple HTMLTables – Example
43
<table cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>

<table cellspacing="0" cellpadding="5">
<tr>
</tr>
<tr>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>
Simple HTMLTables – Example (2)
44

Complete HTMLTables
 Table rows split into three semantic sections:
header, body and footer
 <thead> denotes table header and contains
<th> elements, instead of <td> elements
 <tbody> denotes collection of table rows that
contain the very data
 <tfoot> denotes table footer but comes
BEFORE the <tbody> tag
 <colgroup> and <col> define columns (most
often used to set column widths)
45

Complete HTMLTable: Example
46
<table>
<colgroup>
<col style="width:100px" /><col />
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
</tbody>
</table>
header
footer
Last comes the body (data)
th
columns

<table>
<colgroup>
<col style="width:200px" /><col />
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
</tbody>
</table>
Complete HTMLTable:
Example (2)
47
table-full.html
Although the footer is
before the data in the
code, it is displayed last
By default, header text
is bold and centered.

NestedTables
 Table data “cells” (<td>) can contain nested
tables (tables within tables):
48
<table>
<tr>
<td>Contact:</td>
<td>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>
nested-tables.html

<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class=“3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>
Column and Row Span –
Example (2)
49
table-colspan-rowspan.html
Cell[2,3]Cell[1,3]
Cell[3,2]
Cell[2,2]
Cell[1,2]
Cell[2,1]Cell[1,1]

50
Background Color
 It is very common to see web pages with
their background color set to white or some
other colors.
 To set your document’s background color,
you need to edit the <BODY> element by
adding the BGCOLOR attribute.The
following example will display a document
with a white background color:
<BODY BGCOLOR=“#FFFFFF”></BODY>

51
TEXT Color
 TheTEXT attribute is used to control the
color of all the normal text in the
document.The default color for text is
black.TheTEXT attribute would be added
as follows:
<BODY BGCOLOR=“#FFFFFF”
TEXT=“#FF0000”></BODY>
In this example the document’s page
color is white and the text would be red.

52
Using Image Background
 The BODY element also gives you ability of
setting an image as the document’s
background.
 An example of a background image’s HTML
code is as follows:
<BODY BACKGROUND=“hi.gif”
BGCOLOR=“#FFFFFF”></BODY>

53
PreviewingYour Work
 Once you have created your basic starting
document and set your document properties it is
a good idea to save your file.
 To save a file, in NotePad, follow these steps:
1. Locate and click on the menu called “File”.
2. Select the option under File Menu labeled “Save
As”.
3. In the “File Name” text box, type in the entire
name of your file (including the extension name
.html).

54
Headings, <Hx> </Hx>
 Inside the BODY element, heading elements H1
through H6 are generally used for major
divisions of the document. Headings are
permitted to appear in any order, but you will
obtain the best results when your documents
are displayed in a browser if you follow these
guidelines:
1. H1: should be used as the highest level of heading, H2 as
the next highest, and so forth.
2. You should not skip heading levels: e.g., an H3 should
not appear after an H1, unless there is an H2 between
them.

55
Headings, <Hx> </Hx>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
</BODY>
</HTML>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

56
Paragraphs, <P> </P>
 Paragraphs allow you to add text to a
document in such a way that it will
automatically adjust the end of line to suite
the window size of the browser in which it is
being displayed. Each line of text will stretch
the entire length of the window.

57
Paragraphs, <P> </P>
<HTML><HEAD>
</HEAD>
<BODY></H1> Heading 1 </H1>
<P> Paragraph 1, ….</P>
<H6> Heading 6</H6>
</BODY></HTML>
Heading 1
Paragraph 1,….
Heading 2
Paragraph 2,….
Heading 3
Paragraph 3,….
Heading 4
Paragraph 4,….
Heading 5
Paragraph 5,….
Heading 6
Paragraph 6,….

58
Break, <BR>
 Line breaks allow you to decide where the text will
break on a line or continue to the end of the window.
 A <BR> is an empty Element, meaning that it may
contain attributes but it does not contain content.
 The <BR> element does not have a closing tag.

59
Break, <BR>
<HTML>
<HEAD>
</HEAD>
<BODY>
<P>Paragraph 1, <BR>
Line 2 <BR> Line 3 <BR>….
</P>
</BODY>
</HTML>
Heading 1
Paragraph 1,….
Line 2
Line 3
….

60
Bold, Italic and other Character Formatting
Elements
<P> <FONT SIZE=“+1”>One Size
Larger </FONT> - Normal –
<FONT SIZE=“-1”>One Size
Smaller </FONT> <BR>
<B> Bold</B> - <I> italics</I> - <U>
Underlined </U> -
<FONTCOLOR=“#FF0000”>
Colored </FONT> <BR>
<EM> Emphasized</EM> -
<STRONG> Strong </STRONG>
- <TT>TeleType </TT> <BR>
One Size Larger - Normal – One
Size Smaller
Bold - italics - Underlined -
Colored
Emphasized - Strong -TeleType

61
Alignment
 Some elements have attributes for alignment
(ALIGN) e.g. Headings, Paragraphs and
Horizontal Rules.
 TheThree alignment values are : LEFT, RIGHT,
CENTER.
 <CENTER></CENTER>Will center elements.

62
Lists
In this chapter you will learn how to create a variety of lists.
Objectives
Upon completing this section, you should be able to
1. Create an unordered list.
2. Create an ordered list.
3. Create a defined list.
4. Nest Lists.

63
List Elements
 HTML supplies several list elements. Most list elements are
composed of one or more <LI> (List Item) elements.
 UL : Unordered List. Items in this list start with a list mark
such as a bullet. Browsers will usually change the list mark
in nested lists.
<UL>
<LI> List item …</LI>
</UL>

64
List Elements
 You have the choice of three bullet types: disc(default),
circle, square.
 These are controlled in Netscape Navigator by the “TYPE”
attribute for the <UL> element.
<ULTYPE=“square”>
</UL>
 List item …
 List item …

65
List Elements
 OL: Ordered List. Items in this list are numbered
automatically by the browser.
<OL>
</OL>
1. List item …
2. List item …
3. List item
 You have the choice of setting theTYPE Attribute to one

66
List Elements
 You can specify a starting number for an ordered
list.
<OLTYPE =“i”>
</OL>
<P> text ….</P>
<OLTYPE=“i” START=“3”>
</OL>

67
List Elements
i. List item …
ii. List item …
Text ….
iii. List item …

68
List Elements
 DL: Definition List.This kind of list is different from the
others. Each item in a DL consists of one or more Definition
Terms (DT elements), followed by one or more Definition
Description (DD elements).
<DL>
<DT> HTML </DT>
<DD> HyperText Markup Language </DD>
<DT> DOG </DT>
<DD>A human’s best friend!</DD>
</DL>
HTML
HyperText Markup Language
DOG

69
Nesting Lists
 You can nest lists by inserting a UL, OL, etc., inside a list item
(LI).
EXample
<ULTYPE = “square”>
<LI> List item …
<OLTYPE=“i” START=“3”>
</OL>

70
<H1 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H1>
<OL TYPE=“a” START=“2”>
<LI>Be able to swim </LI>
<LI>Wear a life jacket at all times </LI>
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe </LI>
<LI>Use the canoe for support and </LI>
<LI>Swim to shore
</UL> </LI>
<LI>Don't overexert yourself </LI>
<LI>Use a bow light at night </LI>
</OL>
What will be the output?

71
<H1ALIGN="CENTER">SAFETYTIPS FOR
CANOEISTS</H1>
<OLTYPE="a" START="2">
<LI>Be able to swim </LI>
<LI>Wear a life jacket at all times </LI>
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe </LI>
<LI>Use the canoe for support
<OL type="I" start="4">
<LI> Be careful </LI>
<LI> Do not look around</LI>
</LI> </OL>
<LI>Swim to shore
</UL> </LI>
<LI>Don't overexert yourself </LI>
<LI>Use a bow light at night </LI>
</OL>
What
will
be the
output?

72
Images
In this chapter you will learn about images and
how to place images in your pages.
Objectives
Upon completing this section, you should be
able to
1. Add images to your pages.

73
Images
 <IMG>This element defines a graphic image on the
page.
 Image File (SRC:source): This value will be a URL
(location of the image) E.g.
http://www.domain.com/dir/file.ext or /dir/file.txt.
 AlternateText (ALT):This is a text field that describes
an image or acts as a label. It is displayed when they
position the cursor over a graphic image.
 Alignment (ALIGN):This allows you to align the
image on your page.

74
Some Examples on images
1) <IMG SRC=“jordan.gif“ border=4>
2) <IMG SRC=" jordan.gif" width="60"
height="60">
3) <IMG SRC=“jordan.gif" ALT="This is a text
that goes with the image">
4) <IMG SRC=" jordan.gif “ Hspace="30"
Vspace="10" border=20>
5) < IMG SRC =" jordan.gif“ align="left">
blast blast blast blast blast

75
Anchors, URLs and Image Maps
In this chapter you will learn about Uniform Resource
Locator, and how to add them as Anchor or Links inside
your web pages.
Objectives
Upon completing this section, you should be able to
1. Insert links into documents.
2. Define LinkTypes.
3. Define URL.
4. List some commonly used URLs.

76
HOWTO MAKE A LINK
1) The tags used to produce links are the <A>
and </A>. The <A> tells where the link should start and
the </A> indicates where the link ends. Everything between
these two will work as a link.
2)The example below shows how to make the word
Here work as a link to yahoo.
Click <A HREF="http://www.yahoo.com">here</A> to
go to yahoo.

77
<body LINK="#C0C0C0"VLINK="#808080"
ALINK="#FF0000">
 LINK - standard link - to a page the visitor hasn't been to
yet. (standard color is blue - #0000FF).
VLINK - visited link - to a page the visitor has been to
before. (standard color is purple - #800080).
ALINK - active link - the color of the link when the mouse is
on it. (standard color is red - #FF0000).
If the programmer what to change the color
 Click <a href="http://www.yahoo.com"><font
color="FF00CC">here</font></a> to go to yahoo.
More on LINKs

78
Internal Links
 Internal Links : Links can also be created inside large documents
to simplify navigation.Today’s world wants to be able to get
the information quickly. Internal links can help you meet these
goals.
1. Select some text at a place in the document that you would like
to create a link to, then add an anchor to link to like this:
<A NAME=“bookmark_name”></A>
The Name attribute of an anchor element specifies a location in
the document that we link to shortly. All NAME attributes in a
document must be unique.

79
E-Mail (Electronic Mail)
E.g. mailto:kmf@yahoo.com
 The type of service is identified as the mail client
program.This type of link will launch the users
mail client.
 The recipient of the message is kmf@yahoo.com
<A HREF=“mailto:kmf@yahoo.com”>Send me
More Information </A>

80
Tables
In this chapter you will learn that tables have many uses in
HTML.
Objectives:
Upon completing this section, you should be able to:
1. Insert a table.
2. Explain a table’s attributes.
3. Edit a table.
4. Add a table header.

81
Tables
 The <TABLE></TABLE> element has four sub-
elements:
1. Table Row<TR></TR>.
2. Table Header <TH></TH>.
3. Table Data <TD></TD>.
4. Caption <CAPTION></CAPTION>.
 The table row elements usually contain table
header elements or table data elements.

82
Tables
<table border=“1”>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> Row1, Col1 </td>
</tr>
<tr>
</tr>

83
Tables
Column 1 Header Column 2 Header
Row1, Col1 Row1, Col2
Row2, Col1 Row2, Col2

84
Tables Attributes
 BGColor: Some browsers support background
colors in a table.
 Width: you can specify the table width as an
absolute number of pixels or a percentage of the
document width.You can set the width for the
table cells as well.
 Border:You can choose a numerical value for the
border width, which specifies the border in pixels.
 CellSpacing: Cell Spacing represents the space
between cells and is specified in pixels.

85
Table Attributes
 CellPadding: Cell Padding is the space
between the cell border and the cell
contents and is specified in pixels.
 Align: tables can have left, right, or center
alignment.
 Background: Background Image, will be
titled in IE3.0 and above.
 BorderColor, BorderColorDark.

86
Table Caption
 A table caption allows you to specify a line of text
that will appear centered above or bellow the
table.
<TABLE BORDER=1 CELLPADDING=2>
<CAPTION ALIGN=“BOTTOM”> Label For MyTable
</CAPTION>
 The Caption element has one attribute ALIGN that
can be eitherTOP (Above the table) or BOTTOM

87
Table Header
 Table Data cells are represented by theTD
element. Cells can also beTH (Table Header)
elements which results in the contents of
the table header cells appearing centered
and in bold text.

88
<TABLE BORDER=1 width=50%>
<CAPTION> <h1>Spare Parts <h1> </Caption>
<TR><TH>Stock Number</TH><TH>Description</TH><TH>List
Price</TH></TR>
<TR><TD bgcolor=red>3476-AB</TD><TD>76mm
Socket</TD><TD>45.00</TD></TR>
<TR><TD >3478-AB</TD><TD><font color=blue>78mm Socket</font>
</TD><TD>47.50</TD></TR>
<TR><TD>3480-AB</TD><TD>80mm Socket</TD><TD>50.00</TD></TR>
</TABLE>
BasicTable Code

89
Table Data andTable Header Attributes
<Table border=1 cellpadding =2>
<tr> <th> Column 1 Header</th> <th> Column 2
Header</th> </tr>
<tr> <td colspan=2> Row 1 Col 1</td> </tr>
<tr> <td rowspan=2>Row 2 Col 1</td>
<td> Row 2 Col2</td> </tr>
<tr> <td> Row 3 Col2</td> </tr>
</table>

90
Table Data andTable Header Attributes
Column 1 Header Column 2 Header
Row 1 Col 1
Row 2 Col 1
Row 2 Col 2
Row 3 Col 2

91
SpecialThings to Note
 TH,TD andTR should always have end tags.
Although the end tags are formally optional, many browsers will
mess up the formatting of the table if you omit the end tags. In
particular, you should always use end tags if you have aTABLE
within aTABLE -- in this situation, the table parser gets hopelessly
confused if you don't close yourTH,TD andTR elements.
 A defaultTABLE has no borders
By default, tables are drawn without border lines.You need the
BORDER attribute to draw the lines.
 By default, a table is flush with the left margin
TABLEs are plopped over on the left margin. If you want centered
tables,You can either: place the table inside a DIV element with
attribute ALIGN="center".
Most current browsers also supports table alignment, using the
ALIGN attribute. Allowed values are "left", "right", or "center", for
example: <TABLE ALIGN="left">.The values "left" and "right" float
the table to the left or right of the page, with text flow allowed
around the table.This is entirely equivalent to IMG alignment

92
<TABLE BORDER width=“750”>
<TR> <TD colspan=“4” align=“center”>Page
Banner</TD></TR>
<TR> <TD rowspan=“2” width=“25%”>Nav
Links</TD><TD colspan=“2”>Feature
Article</TD> <TD rowspan=“2”
width=“25%”>Linked Ads</TD></TR>
What will be the output?

If you know nothing about HTML, this is where you can start !!

More Related Content

What's hot

Similar to If you know nothing about HTML, this is where you can start !!

More from Dr Sukhpal Singh Gill

Recently uploaded

If you know nothing about HTML, this is where you can start !!