Scribd
Upload
105 views55 pages

HTML Basics for Beginners

The document discusses HTML headings, tags, and text formatting. It provides examples of how to use heading tags (<h1>-<h6>), line break tags (<br>), bold (<b>), italic (<i>), and underline (<u>) tags. It also demonstrates how to change background and text colors using the <body> tag's bgcolor and text attributes. The document teaches how to specify fonts, sizes, and colors within the <font> tag and how to align text using the <p> tag's align attribute.

Uploaded by

ramesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
105 views55 pages

HTML Basics for Beginners

The document discusses HTML headings, tags, and text formatting. It provides examples of how to use heading tags (<h1>-<h6>), line break tags (<br>), bold (<b>), italic (<i>), and underline (<u>) tags. It also demonstrates how to change background and text colors using the <body> tag's bgcolor and text attributes. The document teaches how to specify fonts, sizes, and colors within the <font> tag and how to align text using the <p> tag's align attribute.

Uploaded by

ramesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 55

Dr.

Kamesh Duvvuri

Internet Programming

HTML
Headings:
What we will Learn
Heading tag: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<br> tag
Comment Tag: <!-- -- >

In the last lecture, we learned that the first tag on the web page we made is the HTML tag
which tells the browser that the document is HTML;
<html>
The last tag on the page is the end HTML tag, which tells the browser that the HTML bit
has finished;
</html>
Did you notice the '/' bit which tells the browser that this is the end tag, not the start?
Heading
Today we will learn about heading tag, which looks like <h1> or <h2> or <h3> or <h4>
or <h5> or <h6>.
Let us take an example to understand this tag.
<html>
<head>
<title >My Home Page with a heading</title>
</head>
<body>
<h1>My Heading</h1>
You write things here...
</body>
</html>

Write the code above and save as an .html file.


And the output looks something like this

My Heading
You write things here.

Take another example


<html>
<head>

Dr. Kamesh Duvvuri

Internet Programming

<title >My Home Page with a heading</title>


</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is normal text!</p>
</body>
</html>

And the output is now,

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

This is normal text!


So, that was different ways of representing text.
Let us study about <br> tag. Please write the code below and save as an .html file
<html>
<head>
<title >My Home Page with a heading</title>
</head>
<body>
My name is Harshit.
I am studying at University of Suwon
.
</body>
</html>
The output will be
My name is Harshit I am studying at University of Suwon
Q) Can any one tell me what is the problem with the above output?

Dr. Kamesh Duvvuri

Internet Programming

A) When I wrote the code, I made two lines, one line contains my name and the other line
contains the name of University. But the output shows two lines one after the other.
So that means, HTML does not interpret the <return> key.
The solution to the above problem is <br> take. <br> tag is also called as blank rule. It
inserts a line.
<html>
<head>
<title >My Home Page with a heading</title>
</head>
<body>
My name is Harshit. <br>
I am studying at University of Suwon
.
</body>
</html>
Now the output will be
My name is Harshit.
I am studying at University of Suwon.

Q What is the output for the code below?


<html>
<head>
<title >My Home Page with a heading</title>
</head>
<body>
My name is Harshit. <br> I am studying at University of Suwon.
</body>
</html>
Answer)

Comments
Q) Why do we need comments?, infact every language supports comments, be it C,
C++ or Java?
Answer) When we write a page with a lot of code, and we come back to it later to wonder
what we did, it can be made easier if we have comments in the document which don't
show up in the browser.
For example

Dr. Kamesh Duvvuri

Internet Programming

<html>
<head>
<!-- This is the title of my page
<title>My Page</title>
</head>
<body>
<!--This is the start of my page! As if I didn't know
that - I did say it was a trivial example!-->

<!--Start of my heading-->
<h1>My Heading - What my page is about.</h1>
<!--End of my heading-->
</body>
So the output is

My Heading - What my page is about.


Everthing contained in <!-- -- > is not visible on the browser.

Today we will discuss about formatting the text on the browser. That is
How to make our text appear as bold, italic or underlined
To set the page color, i.e. background color and Text color
Formatting the text
The following are the tags for bold, underline, italic
<b> </b> for bold
<u> </u> for underline
<i> </i> for italic
Let us look at an example
<html>
<head>
<title>Welcome to my Home Page</title>
</head>
<body>
My name is <b>Harshit Kumar</b>.<br>
I am </i> at <u>University of Suwon</u>.<br>
My major is <i>computer science</i>
</body>
</html>

Dr. Kamesh Duvvuri

Internet Programming

The output will be


My name is Harshit Kumar.
I am at University of Suwon.
My major is computer science
Q) What is the output of the following code?
html>
<head>
<title>Welcome to my Home Page</title>
</head>
<body>
My name is <b><u><i>Harshit Kumar</b></u></i>.
</body>
</html>
A)
Q) What is the default background color of webpage?
A) White.
Q) How can I change the background color of a web page?
A) We can change the background color of a web page by using bgcolor attribute of
<body> tag.
Let us discuss an example to understand this
Write the code below and save as an .html file.
<html>
<head>
<title>Welcome to my Home Page</title>
</head>
<body bgcolor="blue">
My name is Harshit Kumar
</body>
</html>
The output is

The text color can also be changed, i.e. we can change the background color and text
color.
Write the code below and save as an .html file.
<html>
<head>
<title>Welcome to my Home Page</title>

Dr. Kamesh Duvvuri

Internet Programming

</head>
<body bgcolor="black" text="yellow">
My name is Harshit Kumar
</body>
</html>

The output is
If you put <body bgcolor=black> or
<body bgcolor=#FFE4C4>, then you will get the same effect on the page color, i.e.
background color will be black. The # tells the browser that the number is hexadecimal.
bgcolor="red"
bgcolor="#FF0000"
Similarly, by using the colour name or the code shown in the following table, you will get
the same colour results;
aliceblue
Code=#F0F8FF

antiquewhite
#FAEBD7

aqua
#00FFFF

aquamarine
#7FFFD4

azure
#F0FFFF

beige
#F5F5DC

bisque
#FFE4C4

black
#FFE4C4

blanchedalmond
#FFEBCD

blue
#0000FF

blueviolet
#8A2BE2

brown
#A52A2A

burlywood
#DEB887

cadetblue
#5F9EA0

chartreuse
#7FFF00

chocolate
#D2691E

coral
#FF7F50

cornflowerblue
#6495ED

cornsilk
#FFF8DC

crimson
#DC143C

cyan
#00FFFF

darkblue
#00008B

darkcyan
#008B8B

darkgoldenrod
#B8860B

darkgray
#A9A9A9

darkgray
#A9A9A9

darkkhaki
#BDB76B

darkmagenta
#8B008B

darkolivegreen
#556B2F

darkorange
#FF8C00

darkorchid
#9932CC

darkred
#8B0000

darksalmon
#E9967A

darkseagreen
#8FBC8F

darkslateblue
#483D8B

darkslategray
#2F4F4F

darkturquoise
#00CED1

darkviolet
#9400D3

deeppink
#FF1493

deepskyblue
#00BFFF

dimgray
#696969

dodgerblue
#1E90FF

firebrick
#B22222

floralwhite
#FFFAF0

forestgreen

fuchsia

gainsboro

ghostwhite

Dr. Kamesh Duvvuri

Internet Programming

#228B22

#FF00FF

#DCDCDC

#F8F8FF

gold
#FFD700

goldenrod
#DAA520

gray
#808080

green
#008000

greenyellow
#ADFF2F

honeydew
#F0FFF0

hotpink
#FF69B4

indianred
#CD5C5C

indigo
#4B0082

ivory
#FFFFF0

khaki
#F0E68C

lavender
#E6E6FA

lavenderblush
#FFF0F5

lawngreen
#7CFC00

lemonchiffon
#FFFACD

lightblue
#ADD8E6

lightcoral
#F08080

lightcyan
#E0FFFF

lightgoldenrodyellow lightgreen
#FAFAD2
#90EE90

lightgrey
#D3D3D3

lightpink
#FFB6C1

lightsalmon
#FFA07A

lightseagreen
#20B2AA

lightskyblue
#87CEFA

lightslategray
#778899

lightsteelblue
#B0C4DE

lightyellow
#FFFFE0

lime
#00FF00

limegreen
#32CD32

linen
#FAF0E6

magenta
#FF00FF

maroon
#800000

mediumaquamarine mediumblue
#66CDAA
#0000CD

mediumorchid
#BA55D3

mediumpurple
#9370DB

mediumseagreen
#3CB371

mediumslateblue
#7B68EE

mediumspringgreen
#00FA9A

mediumturquoise
#48D1CC

mediumvioletred
#C71585

midnightblue
#191970

mintcream
#F5FFFA

mistyrose
#FFE4E1

moccasin
#FFE4B5

navajowhite
#FFDEAD

navy
#000080

oldlace
#FDF5E6

olive
#808000

olivedrab
#6B8E23

orange
#FFA500

orangered
#FF4500

orchid
#DA70D6

palegoldenrod
#EEE8AA

palegreen
#98FB98

paleturquoise
#AFEEEE

palevioletred
#DB7093

papayawhip
#FFEFD5

peachpuff
#FFDAB9

peru
#CD853F

pink
#FFC0CB

plum
#DDA0DD

powderblue
#B0E0E6

purple
#800080

red
#FF0000

rosybrown
#BC8F8F

royalblue
#4169E1

saddlebrown
#8B4513

salmon
#FA8072

sandybrown
#F4A460

seagreen
#2E8B57

seashell
#FFF5EE

sienna
#A0522D

silver
#C0C0C0

skyblue
#87CEEB

slateblue

slategray

snow

springgreen

Dr. Kamesh Duvvuri

Internet Programming

#6A5ACD

#6A5ACD

#FFFAFA

#00FF7F

steelblue
#4682B4

tan
#D2B48C

teal
#008080

thistle
#D8BFD8

tomato
#FF6347

turquoise
#40E0D0

violet
#EE82EE

wheat
#F5DEB3

white
yellow
#FFFFFF
#FFFF00
Today we will learn
Using the Font tag
Align the text

yellowgreen
#9ACD32

Font means a specific size and style of the text. Size means the width of the text, and
style means whether the text is Arial, Times New Roman, etc.
Type the following code in notepad and save the file as .html.
<html>
<head>
<title>
Using the Font tag
</title>
</head>
<body>
Here is normal text without any font tag. <br>
<html>
<head>
<title>
Using the Font tag
</title>
</head>
<body>
Here is normal text without any font tag. <br>
<font face="arial" size="4"> This is a text with font type Arial and font size
4</font>
</body>
</html>
</body>
</html>
The output will be
Here is normal text without any font tag.

This is a text with font type Arial and font size 4


Q) Try the above code with font Batang, and print the output?

Dr. Kamesh Duvvuri

Internet Programming

You can also specify the color with the font tag. i.e. color is another attribute of the font
tag. For example
Type the following code in notepad and save the file as .html.
<html>
<head>
<title>
Using the Font tag
</title>
</head>
<body>
Here is normal text without any font tag. <br>
<html>
<head>
<title>
Using the Font tag
</title>
</head>
<body>
Here is normal text without any font tag. <br>
<font face="arial" size="4" color=blue> This is a text with font type Arial and
font size 4</font>
</body>
</html>
</body>
</html>
The output will be
Here is normal text without any font tag.

This is a text with font type Arial and font size 4

Align the text


To align the text means whether the text will appear on the left of the page or
right of the page or center of the page.
Type the following code in notepad and save as .html file.
<html>
<head>
<title>
Using the Align tag
</title>
</head>
<body>
My name is Harshit Kumar
<p>I am a student of University of Suwon</p>
</body>

Dr. Kamesh Duvvuri

Internet Programming

</html>
The output will be
My name is Harshit Kumar
I am a student of University of Suwon

If there was no <p> tag, then two statements My name is Harshit Kumar and I am a
student of University of Suwon would come one after the other on the same line.
Whereas <p> tag inserted a new line between the two statements, doing some what the
same as <br> tag.
If you notice the output very carefully there is some difference between <p> tag and <br>
tag.
Q) What is the difference between the <p> tag and <br> tag?
A) The difference is <p> tag inserts a double new line between two statements whereas
<br> tag inserts single new line between two statements. Actually <p> tag means
paragraph tag, and <p> tag indicates the browser to start a new paragraph.
Now let us come back to aligning the text
Type the following code and save as .html file.
<html>
<head>
<title>
Using the Align tag
</title>
</head>
<body>
My name is Harshit Kumar
<p align="right">I am a student of University of Suwon</p>
</body>

Dr. Kamesh Duvvuri

Internet Programming

</html>
The output is
My name is Harshit Kumar
I am a student of University of Suwon
So, You can see that the second statement is aligned towards the right. Similarly the align
attribute of <p> tag can be used as left or center.
Q) Try the above code with <p align=left> and also with <p align=center>? Show
what the output is?
Today we will learn
Create a Link to new pages using <a href=>.
Writing the text as a List of Items using <UL>, <LI>, <OL>.
Creating a link to a new page mean that you make one web page which contains a link to
another page and when you click on the link, another page opens. For example
Type the following code and save as first.html
<html>
<head>
<title> First Page</title>
</head>
</body>
My name is Harshit Kumar. <br>
I am teaching at Suwon University <br>
To know about my hobbies, <a href="hobby.html">click here</a>
</body>
</html>
Now what you will see in the output is, an underline below Click here and the color will
be blue. This is a link, which links to a new page, and all the links appear as blue color
i.e.
The output will be
My name is Harshit Kumar.
I am teaching at Suwon University
To know about my hobbies click here
When you will left click mouse on the link click here, a new web-page hobby.html
should open. But as such hobby.html is not created. So we need to create this page also.
If clicking on a link displays The link cannot be displayed, then such a link is called as
broken link. A web-site should not contain broken link.

Dr. Kamesh Duvvuri

Internet Programming

Now you can type the code below and save as hobby.html, remember that hobby.html
should be saved in the same directory which contains first.html.
<html>
<head>
<title>This is my hobby page</title>
</head>
<body>
<b>My hobbies are</b><br>
<p align="center">Football</p>
<p align="center">Listening Music </p>
<p align="center">Reading</p>
</body>
</html>
After clicking on the click here, a new page hobby.html will open, and the output will
be
My hobbies are
Football
Listening Music
Reading
The <a href=> is also called as anchor tag.
Q) What will happen if the <a> tag is used as follows, and use click on click here
<a href=> click here </a> ?
A) The same page will be refreshed again.

Q) I told you that both the html files i.e. first.html and hobbies.html should be in the
same directory, what if both of them are not in the same directory?
A) The answer to this is relative addressing, which we will discuss in later lecture, but
right now remember the word relative addressing.
I listed above my hobbies; there is a tag which helps in listing. The name of the tag is
<UL> tag. <UL> tag is also known as Un-ordered List tag.
Write the code below which does not use <UL> tag, and save as hobby.html.
<html>
<head>

Dr. Kamesh Duvvuri

Internet Programming

<title>This is my hobby page</title>


</head>
<body>
<b>My hobbies are</b><br>
<p>Football</p>
<p>Listening Music </p>
<p>Reading</p>
</body>
</html>
After clicking on the click here, a new page hobby.html will open, and the output will
be
My hobbies are
Football
Listening Music
Reading
So, there is not proper indentation. The hobbies football, listening music, reading should
appear towards the right.
The <UL> tag will do the required indentation.
<html>
<head>
<title>This is my hobby page</title>
</head>
<body>
<b>My hobbies are</b><br>
<ul>
<p>Football</p>
<p>Listening Music </p>
<p>Reading</p>
</ul>
</body>
</html>
And, now the output is
My hobbies are
Football
Listening Music

Dr. Kamesh Duvvuri

Internet Programming

Reading
So, now the hobbies football, Listening music, Reading are indented towards the right.
I can further improve upon the hobbies listing.
Q) How can I have a bullet (dark solid circle) before each hobby?
A) There is different tag called as <LI> which is used with the <UL> tag.
Type the code below in notepad and save as hobby.html
<html>
<head>
<title>This is my hobby page</title>
</head>
<body>
<b>My hobbies are</b><br>
<ul>
<li>Football</li>
<li>Listening Music </li>
<li>Reading</li>
</ul>
</body>
</html>

So, the output is


My hobbies are

Football
Listening Music
Reading

What I have done, I have replaced the <p> tag with the <li> tag, still keeping the <ul>
tag.
Q) What if I want numbers instead of bullets?
A) For that, I have to replace <UL> with <OL>.
Please type the code below in notepad and save as hobby.html
<html>
<head>
<title>This is my hobby page</title>
</head>
<body>

Dr. Kamesh Duvvuri

Internet Programming

<b>My hobbies are</b><br>


<ol>
<li>Football</li>
<li>Listening Music </li>
<li>Reading</li>
</ol>
</body>
</html>
The output will be
My hobbies are
1. Football
2. Listening Music
3. Reading
We can also do nesting of lists, for details see below.

Nested Lists
Write the following code and save as .html file
<html>
<head>
<title>Country visit</title>
</head>
<body>
<b>The countries and cities that I have visited are</b><br>
<UL>
<li>Oman</li>
<UL>
<li>Muscat</li>
<li>Salalah</li>
<li>Nizwa</li>
</UL>
<li>South korea</li>
<ul>
<li>Seoul</li>
<li>Suwon</li>
<li>incheon</li>
</Ul>

Dr. Kamesh Duvvuri

Internet Programming

</UL>
</body>
</html>

The output will be


The countries and cities that I have visited are

Oman
o
o
o

Muscat
Salalah
Nizwa
South korea
o Seoul
o Suwon
o incheon

Oman and South Korea are countries. Muscat, Salalah, Nizwa are cities in Oman whereas
Seoul, Suwon, Incheon are cities in South Korea.
Today we will learn about
Create an Email link and External link.
Insert graphics.
Link to specific section in another document.
Create an Email link
When you visit a web site, generally at the bottom you see a link for mail to the
creator of the website. The subject of todays lecture is how to create such link. Such a
link which on clicking opens an email client is called as email link.
Please type the following code in notepad and save as .html file.
<html>
<head>
<title>mail</title>
</head>
<body>
My name is Harshit Kumar. <br>
I am studying at University of Suwon <br>
To mail me, Please <a href="mailto:[email protected]">Click here</a>
</body>
</html>
The output will be

Dr. Kamesh Duvvuri

Internet Programming

My name is Harshit Kumar.


I am studying at University of Suwon
To mail me, Please Click here
When you will click on Click here, mail client will open, through which you can send
email.
Create an External Link
When you visit a web site, you find links to other websites. When you click on the
link, another web site opens. Such a link which on clicking opens another website is
called as external link
Please type the following code in notepad and save as .html file.
<html>
<head>
<title>mail</title>
</head>
<body>
My name is Harshit Kumar. <br>
I am studying at University of Suwon <br>
The sites I visit for fun are
<ol>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.hotmail.com">Hotmail</a></li>
</ol>
To mail me, Please <a href="mailto:[email protected]">Click here</a>
</body>
</html>
The output will be
My name is Harshit Kumar.
I am studying at University of Suwon
The sites I visit for fun are
1. Yahoo
2. Hotmail
To mail me, Please Click here
So, when you will click on Yahoo, yahoo website will open, and if you will click on
Hotmail, Hotmail website will open.
Insert Graphics

Dr. Kamesh Duvvuri

Internet Programming

Most of the websites that you visit contain graphics along with text. So graphics
need to be inserted in a web page.
To understand this, you need an image file, please download an image file from the
internet or locate for an image file on your computer. I have got an image file by the
name of asia.gif.
<html>
<head>
<title>mail</title>
</head>
<body>
My name is Harshit Kumar. <br>
I am studying at University of Suwon <br>
Below is the map of Asia<br>
<img src="asia.gif" alt="map of asia">
</body>
</html>
And the output is
My name is Harshit Kumar.
I am studying at University of Suwon
Below is the map of Asia

Dr. Kamesh Duvvuri

Internet Programming

Link to specific section in another document


In lecture5 we discussed about, how to make a link from one document to another
document. Now we will learn about how to make a link to specific part inside a
document.
Lets take the previous example
Type the following code and save as first.html
<html>
<head>
<title> First Page</title>
</head>
</body>
My name is Harshit Kumar. <br>
I am teaching at Suwon University <br>
My hobbies are <br>
<a href="hobbies.html#soccer">Soccer</a><br>
<a href="hobbies.html#music">Music</a><br>
<a href="hobbies.html#read">Reading</a><br>

</body>
</html>
And type the following code and save as hobbies.html
<html>
<head>
<title>This is my hobby page</title>
</head>
<body>
<b>My hobbies are</b><br>
<a name="music">
<p align="center">Listenin Music</p></a>
<p>
I like listening to music a lot.<br>
I like rock, instrumental music.<br>
My favorites are <br>
<ul>
<li>Michael Jackson</li>
<li>Aerosmith</li>
<li>Savage Garden</li>
<li>Celin Deon</li>
<li>Guns & Roses</li>
<li>Britny Spears</li>
<li>50 Cents</li>

Dr. Kamesh Duvvuri

Internet Programming

<li>Richard Marx</li>
<li>Elton John</li>
<li>Bryan Adams</li>
<li>All Saints</li>
<li>Backstreet Boys</li>
<li>Bon Jovi </li>
<li>Eminem</li>
<li>Enrique Iglesias</li>
<li>Eric Clapton</li>
<li>George Michael</li>
<li>Faithless</li>
<li>Queeb</li>
<li>Cher</li>
<li>Janet Jackson</li>
<li>Jennifer Lopez</li>
<li>Jewel</li>
<li>Kylie Minogue</li>
</ul>

</p>
<a name="read">
My favorites are <br>
<ul>

<p align="center">Reading </p></a>

<li>Computer Books</li>
<li>Fiction</li>
<li>Non-fiction</li>
<li>Science</li>
<li>Newspaper</li>
</ul>
<a name="soccer"><p align="center">Soccer</p></a>
<ul>
My favorite players are
<li>David Batty, Leeds United </li>
<li>Marcus Bent, Ipswich Town </li>
<li>Craig Burley, Derby County </li>
<li>Mike Salmon, Ipswich Town </li>
<li>David Seaman, Arsenal </li>
<li>Craig Short, Blackburn Rovers </li>
<li>Dean Windass, Middlesbrough</li>
</ul>
</body>
</html>

Dr. Kamesh Duvvuri

Internet Programming

Now when you will click on soccer, hobbies.html will open and scroll down, so that
you can see the details about soccer. Similarly, when you click on music , hobbies.html
will open and if required, page will scroll down, so that you can see the details about
music.

Links to Specific Sections within the Same Document


The above concept can also be used for linking a specific section with in the same
document. For example.
<html>
<head>
<title>This is my hobby page</title>
</head>
<body>
<b>My hobbies are</b><br>
<a href="#music">Listening Music</a><br>
<a href="#read">Reading</a><br>
<a href="#soccer">Soccer</a><br>
<a name="music"><p align="center">Listenin Music</p></a>
<p>
I like listening to music a lot.<br>
I like rock, instrumental music.<br>
My favorites are <br>
<ul>
<li>Michael Jackson</li>
<li>Aerosmith</li>
<li>Savage Garden</li>
<li>Celin Deon</li>
<li>Guns & Roses</li>
<li>Britny Spears</li>
<li>50 Cents</li>
<li>Richard Marx</li>
<li>Elton John</li>
<li>Bryan Adams</li>
<li>All Saints</li>
<li>Backstreet Boys</li>
<li>Bon Jovi </li>
<li>Eminem</li>
<li>Enrique Iglesias</li>
<li>Eric Clapton</li>
<li>George Michael</li>
<li>Faithless</li>
<li>Queeb</li>

Dr. Kamesh Duvvuri

Internet Programming

<li>Cher</li>
<li>Janet Jackson</li>
<li>Jennifer Lopez</li>
<li>Jewel</li>
<li>Kylie Minogue</li>
</ul>

</p>
<a name="read">
My favorites are <br>
<ul>

<p align="center">Reading </p></a>

<li>Computer Books</li>
<li>Fiction</li>
<li>Non-fiction</li>
<li>Science</li>
<li>Newspaper</li>
</ul>
<a name="soccer"><p align="center">Soccer</p></a>
<ul>
My favorite players are
<li>David Batty, Leeds United </li>
<li>Marcus Bent, Ipswich Town </li>
<li>Craig Burley, Derby County </li>
<li>Mike Salmon, Ipswich Town </li>
<li>David Seaman, Arsenal </li>
<li>Craig Short, Blackburn Rovers </li>
<li>Dean Windass, Middlesbrough</li>
</ul>
</body>
</html>
In this lecture, we will learn about
Using an Image as a Link
Aligning Images
Using an Image as a Link
I am using three images, for my hobby page. Type the following code and save as
.html file.
<html>
<head>
<title> First Page</title>
</head>

Dr. Kamesh Duvvuri

Internet Programming

</body>
My name is Harshit Kumar. <br>
I am teaching at Suwon University <br>
My hobbies are <br>
<a href="hobbies.html#soccer"><img src="soccer.gif" alt=soccer></a><br>
<a href="hobbies.html#music"><img src="music.gif" alt=music></a><br>
<a href="hobbies.html#read"><img src="book.gif" alt=book></a><br>
</body>
</html>
The above code is similar to the previous code, but the only difference is instead of text,
now there are images. Earlier clicking on text opens a new page, but now clicking on link
will open a new page.

Aligning Images
With the <img src= > tag, you can specify the width and height of the image i.e.
<img src= width= height= >
<html>
<head>
<title> First Page</title>
</head>
</body>
My name is Harshit Kumar. <br>
I am teaching at Suwon University <br>
My hobbies are <br>
<a href="hobbies.html#soccer"><img src="soccer.gif" alt=soccer width=100
height=100></a><br>
<a href="hobbies.html#music"><img src="music.gif" alt=music width=100
height=100></a><br>
<a href="hobbies.html#read"><img src="book.gif" alt=book width=100
height=100></a><br>
</body>
</html>
The above code will reduce the size of the image, and make the web page look more
sensible.
You have some flexibility when displaying images. You can have images separated from
text and aligned to the left or right or centered. Or you can have an image aligned with
text. Try several possibilities to see how your information looks best.
You can align images to the top or center of a paragraph using the ALIGN= attributes
TOP and MIDDLE. i.e.

Dr. Kamesh Duvvuri

Internet Programming

<img src= align=top/middle>


Let us take an example, and see how image and text look without align attribute and with
align attribute. First take an example of how image and text look without align attribute.
<html>
<head>
<title> First Page</title>
</head>
</body>
My name is Harshit Kumar. <br>
I am teaching at Suwon University <br>
My hobbies are <br>
<a href="hobbies.html#soccer"><img src="soccer.gif" alt=soccer width=100
height=100></a>Soccer<br>
<a href="hobbies.html#music"><img src="music.gif" alt=music width=100
height=100> </a>Music<br>
<a href="hobbies.html#read"><img src="book.gif" alt=book width=100
height=100></a>Book<br>
</body>
</html>

So, the output is


My name is Harshit Kumar.
I am teaching at Suwon University
My hobbies are

Soccer

Dr. Kamesh Duvvuri

Internet Programming

MusicMusic

Book
The output shows that, the text is at the bottom of the image, whereas it looks better to be
text in the middle of the image or at the top of the image.
Let us take another example, and see how text and image text and image look with align
attribute. We have used align=middle.
<html>
<head>
<title> First Page</title>
</head>
</body>
My name is Harshit Kumar. <br>
I am teaching at Suwon University <br>
My hobbies are <br>
<a href="hobbies.html#soccer"><img src="soccer.gif" alt=soccer width=100
height=100
align=middle></a>Soccer<br>
<a href="hobbies.html#music"><img src="music.gif" alt=music width=100
height=100 align=middle></a>Music<br>
<a href="hobbies.html#read"><img src="book.gif" alt=book width=100
height=100 align=middle></a>Book<br>
</body>
</html>
The output can be seen on the browser.
In this lecture, we will learn about
-

How to create Table


Escape Sequences: Special Characters

Tables are very useful while creating HTML pages; especially tables solve the alignment
problem. A table tag has headings where you explain what the columns/rows include,
rows for information, and cells for each item. In the following table, the first two rows
contain the heading information, each detail row explains an HTML table tag, and each
cell contains a paired tag or an explanation of the tag's function.
Dr. Kamesh Duvvuri

Internet Programming

Table Elements
Element

Description

<TABLE> ...
</TABLE>

defines a table in HTML. If the BORDER attribute is present, your


browser displays the table with a border.

<CAPTION> ...
</CAPTION>

defines the caption for the title of the table. The default position of
the title is centered at the top of the table. The attribute
ALIGN=BOTTOM can be used to position the caption below the
table.
NOTE: Any kind of markup tag can be used in the caption.

<TR> ... </TR>

specifies a table row within a table. You may define default


attributes for the entire row: ALIGN (LEFT, CENTER, RIGHT)
and/or VALIGN (TOP, MIDDLE, BOTTOM).

<TH> ... </TH>

defines a table header cell. By default the text in this cell is bold and
centered. Table header cells may contain other attributes to
determine the characteristics of the cell and/or its contents.

<TD> ... </TD>

defines a table data cell. By default the text in this cell is aligned left
and centered vertically. Table data cells may contain other attributes
to determine the characteristics of the cell and/or its contents.

Here is the single cell table, the simplest table possible.


<CENTER>
<table border=1>
<tr>
<td>here is a single-celled table!</td>
</tr>
</table>
</CENTER>

The output on the browser is


here is a single-celled table!

<html>
<head>
<title> Using Table Tag</title>
</head>
<body>
Dr. Kamesh Duvvuri

Internet Programming

<table border=1>
<caption> Time Table for Mar-June 2005</caption>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thrusday</th>
<th>Friday</th>
</tr>
<tr>
<td>9:30-10:20</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td><font color="blue">109</font></td>
</tr>
<tr>
<td>10:30-11:20</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td><font color="blue">109</font></td>
</tr>
<tr>
<td>11:30-12:20</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td><font color="blue">109</font></td>
</tr>
<tr>
<td>12:30-1:20</td>
<td>-</td>
<td>-</td>
<td><font color="blue">312</font></td>
<td>-</td>
<td>-</td>
</tr>

Dr. Kamesh Duvvuri

Internet Programming

<tr>
<td>1:30-2:20</td>
<td>-</td>
<td><font color="blue">306</font></td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>2:30-3:20</td>
<td>-</td>
<td><font color="blue">306</font></td>
<td>-</td>
<td><font color="blue">309</font></td>
<td>-</td>
</tr>
<tr>
<td>3:30-4:20</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td><font color="blue">309</font></td>
<td>-</td>
</tr>
<tr>
<td>4:30-5:20</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td><font color="blue">309</font></td>
<td>-</td>
</tr>
<table>
</body>
</html>
Time Table for Mar-June 2005
Monday Tuesday Wednesday Thrusday Friday
9:30-10:20 109
10:30-11:20 -

109

11:30-12:20 -

109

Dr. Kamesh Duvvuri

Internet Programming

12:30-1:20 -

312

1:30-2:20

306

2:30-3:20

306

309

3:30-4:20

309

4:30-5:20

309

Escape Sequences: Special Characters (a.k.a. Character Entities)


Special characters are composed of short sequence of characters that are translated by the
browser and displayed as a single character.
Special characters begin with an ampersand(&) and end with a semicolon (;), for example
&nbsp, which is used for giving spaces between words or characters
To understand &nbsp; type the following code in notepad
<html>
<head>
<title>Using nbsp </title>
</head>
<body>
My name is Harshit
</body>
</html>

Kumar.

The output is
My name is Harshit Kumar.
Although I gave so many spaces between Harhsit and Kumar, still the output shows
only one space.
This means that browser shrink the spaces, so to insert spaces, we need &nbsp;.
Type the following code in notepad
<html>
<head>
<title>Using nbsp </title>
</head>
<body>
My name is Kamesh&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Duvvuri.
</body>
Dr. Kamesh Duvvuri

Internet Programming

</html>

The output is
My name is Kamesh

Duvvuri

In this lecture, we will learn about


- Frames

What are Frames?


Frames are a way to put one more than one page at a time on a computer screen. Usually
frames are made, to add a menu on one side, and the corresponding pages on the other
side by clicking each option of the menu.

Here is the code for the above


<html>
<head><title>Using Frames</title></head>
<frameset cols="15%,85%">
<frame src="menu_bar.htm" name="sidemenu">
<frame src="main.htm" name="mainwindow">
</frameset>

Note that there is no actual body coding involved when creating frames.

Dr. Kamesh Duvvuri

Internet Programming

About <frameset> and <frame>


The frameset tag is used to declare multiple frames. As you can see in the above example,
there was one frameset, and it reads as
<frameset cols="15%,85%">
This tells the browser that we are creating column of framed pages, in this case two
frames, each in one column. The first one will take the 15% of the total browser screen
and the second one will take 85% of the total browser screen.
After that we use frame tag, which actually loads the desired web page. Each frame must
have a source, such as src=webpage.html. So, because we used two framed areas
within the frameset, we need two frame tags, each of them to load a page.
<frameset cols="15%,85%">
<frame src="menu_bar.htm" name="sidemenu">
<frame src="main.htm" name="mainwindow">
</frameset>

If we would like to add a third column, we would need to add a third size definition in the
cols (so that all would add up to 100%) and another frame tag inside the frameset.
In the above case we had a vertical menu bar; we can also have a horizontal menu bar.
For that we have to use rows instead of cols. For example
<frameset rows="15%,85%">
<frame src="menu_bar.htm" name="sidemenu">
<frame src="main.htm" name="mainwindow">
</frameset>

Linking with Frames


Now, let us take an example which you have been using, yes it is your course URL i.e.
http://kumarharmuscat.tripod.com/iprogram. I am using frames in that.
<html>
<head>
<title>Internet Programming</title>
</head>
<frameset cols="20%,80%">
<frame name="lp" src="leftpane.html">

Dr. Kamesh Duvvuri

Internet Programming

<frame name="rp" src="ip.html">


</frameset>
</html>
So, in the above code, I have divided the whole webpage into two frames, first frame
contains the menu and is on the left, second frame load the menu link.
Let us look at the coding of leftpane.html
<html>
<body>
<B>Intenet Programming</B>
<font size=2 type="arial">
<a href="ipcontents.html" target="rp">Course Contents</a><br>
<a href="ethics.html" target="rp">Code Of Ethics</a><br>
<a href="qb.html" target="rp">Assignment</a><br>
<a href="schedule.html" target="rp">Lecture Notes</a><br>
<a href="project.html" target="rp">Project</a><br>
</body>
</html>
Notice, that there is no head tag here. It is quite obvious that I dont need a head tag now,
because this webpage is contained inside another webpage.
The output of this web page is
Intenet Programming
Course Contents
Grading Policy
Assignment
Lecture Notes
Project

Dr. Kamesh Duvvuri

Internet Programming

So, when you click on Course Contents, your course content opens, when you click on
Grading policy, the page corresponding to grading policy i.e. ethics.html opens and
same is the case with other links.
Q How come when you click on the menu option, the page opens in the second frame?
A) This is possible through the target attribute of anchor tag.
Notice two things, when I created frames, I gave a name to each frame.
<html>
<head>
<title>Internet Programming</title>
</head>
<frameset cols="20%,80%">
<frame name="lp" src="leftpane.html">
<frame name="rp" src="ip.html">
</frameset>
</html>
So, the name of frame on the left is lp, and the name of frame on the right is rp.
If I dont specify target attribute in the anchor tag, then on clicking the menu option, the
page will open in the first frame on the left, and nothing will open in the second frame.
So, I specify where I want the page to open.
There are other possibilities with the target attribute of anchor tag.
- target="_blank" - link is loaded into a new blank browser window (and your
old window stays open).
- target="_self" - link is loaded into frame that link was clicked in. (this is the
default selection. Leave it out if you so please.)
- target="_top" - link is loaded into current full browser window, and all frames
disappear, leaving the new linked page to occupy the entire window.

Special attributes of

<frame>

Q) Can I change the size of the frame using my mouse, I mean taking my mouse over the
vertical bar, then left click and dragging it to the left or right?
A) Yes

Dr. Kamesh Duvvuri

Internet Programming

Q) What if I dont want the user to drag the vertical boundary?


A) The solution is below

<html>
<head>
<title>Internet Programming</title>
</head>
<frameset cols="20%,80%">
<frame name="lp" src="leftpane.html" noresize>
<frame name="rp" src="ip.html">
</frameset>
</html>
The other useful attribute is scrolling. Say you always want a scrollbar to appear in the
main window. Add scrolling="yes". Want there to never be a scrollbar? Add
scrolling="no".
To understand more about scrolling, type the following code
<html>
<head>
<title>Internet Programming</title>
</head>
<frameset cols="20%,80%">
<frame name="lp" src="leftpane.html">
<frame name="rp" src="ip.html" scrolling="yes">
</frameset>
</html>

More Advanced Frames


Dr. Kamesh Duvvuri

Internet Programming

Let us discuss move advanced frames now, where we will see how to
divide the browser window into more than two frames. Take an example
first

<frameset cols="15%,85%">
<frameset rows="20%,80%">
<frame src="timetable.html">
<frame src="hobbies.html" name="sidemenu">
</frameset>
<frame src="first.html" name="mainwindow">
</frameset>
In the above code, browser window is divided into two frames vertically, first frame is
15% of the total size of the browser, and the second frame is 85% of the total size of the
browser. Then again the first frame is divided into two more frames, i.e. the frame which
occupied 15% is again divided into two frames horizontally, and the ratio is 20% and
80%.
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame>
<frame>
</frameset>
<frameset cols="50%,50%">
<frame>
<frame>
</frameset>

The above code will divide the browser window into four frames, each of equal size.
<frameset cols="33%,33%,33%">
<frame>
<frame>
<frame>
</frameset>

The above code will divide the browser window vertically into three frames each
occupying 33% of the total browser window size.
<frameset rows="25%,50%,25%">
<frame>
<frame>
<frame>
</frameset>

The above code will divide the browser window horizontally into three frame, first frame
occupies the 25% of the total browser window, second frame occupies the 50% of the
total browser window, and third frame occupies the 25% of the total browser window.

Dr. Kamesh Duvvuri

Internet Programming

In this lecture, we will learn about


- Using Forms
This topic is very important; actually this topic is the base for web programming. Forms
are used for taking input from the user. After receiving input from the user, that
information is generally stored in database, and for storing information in the database,
either CGI, or ASP, or JSP, or some other scripting language is used. So after this, we can
study ASP also.
So, whatever you will learn in this chapter, will be used later when you will learn ASP.
There is a tag for making forms and it is <form> tag. Like each tag, a form opens by
<form> and closes by <form>. The <form> tag must contain method and action attribute.
Method and action are two important attribute for a <form> tag, there are other attributes
also which are not that important.
The method attribute of <form> tag can be either get or post i.e.
<form method=get>
Or
<form method=post>
I will explain the difference between them later on.
Let us discuss about the other attribute first. A Form consists of some input boxes, list
boxes, check boxes so as to accept input from the user. After user enter input, he presses
the submit button, and all the inputs are processed. This statement all the inputs are
processed, means that the inputs are generally saved or inputs are used to generate some
information for the user.
For example, if you are searching for a particular book on the internet, you have to fill up
a form. That form may ask you for the name of the book, or the name of author i.e. you
have to provide some input. The input provided by you is then processed, obviously
HTML cannot process the input, and HTML can only accept the input from the user. The
processing of input can be done using only scripting languages, like ASP, or JSP.
So to process the input, this HTML page passes the information to another web page
which is made in ASP or JSP or in some other scripting language. Action attribute of the
<form> tag specified the name of that web page.
So,

<form method=get action=process.asp>


Or
<form method=post action=process.asp>

Let us now discuss about form elements i.e. input box, list box, check box etc, which are
used for accepting inputs from the user and we will come back to <form> tag latter.

Forms: input TEXT


Dr. Kamesh Duvvuri

Internet Programming

The above box is called as a text box; we want a text box like this in our HTML form.
For this, we have a tag
<input type=text name=u_name>
Let us see how it works, type the following code in notepad and save as a html file.
<html>
<head>
<title>Using Form tag-text box</title>
</head>
<body>
<form method="post" action="">
Enter your name:&nbsp;&nbsp;<input type="text" name="u_name">
</form>
</body>
</html>
The output will be
Enter your name:
There is another attribute that can be used with <input type=text>, and it is value.
<html>
<head>
<title>Using Form tag-text box</title>
</head>
<body>
<form method="post" action="">
Enter your name:&nbsp;&nbsp;<input type="text" name="u_name"
value="Harshit">
</form>
</body>
</html>

The output will be

Dr. Kamesh Duvvuri

Internet Programming

Enter your name:


If you want the user should be able to enter password, and that password appears as *
the screen, then
<input type=password name=u_pass>
Type the following code
<html>
<head>
<title>Using Form tag-text box</title>
</head>
<body>
<form method="post" action="">
Enter your name:&nbsp;&nbsp;<input type="text" name="u_name"
value="Harshit"> <br>
Enter your password:&nbsp;&nbsp; <input type="password"
name="u_pass">
</form>
</body>
</html>
And the output is
Enter your name:
Enter your password:

There are two more attributes of the <input> tag, size and maxlength. Size attribute
defines the initial width of the control, and maxlength attribute specifies the maximum
number of character a user can enter.
For example:
Type the following code in notepad and save as .html
<html>
<head>
<title>Using Form tag-text box</title>
</head>
<body>

Dr. Kamesh Duvvuri

Internet Programming

<form method="post" action="">


Enter your name:&nbsp;&nbsp;<input type="text" name="u_name"
value="Harshit" maxlength="10"> <br>
Enter your password:&nbsp;&nbsp; <input type="password"
name="u_pass">
</form>
</body>
</html>

Forms: additional input types


There are other input types that can be used with < input type= >. We have used
type=text/password.
Type can also be used as <input type=checkbox/radio/image/submit/button/hidden>.
Let us take an example for each type, and try to understand this.
Type the following code which is for checkbox.
<html>
<head>
<title>Using Form tag-text box</title>
</head>
<body>
<form method="post" action="">
Which fruit do you like? <br>
<input type="checkbox" name="fruit" value="apple"> Apple <br>
<input type="checkbox" name="fruit" value="Mango"> mango <br>
<input type="checkbox" name="fruit" value="Orange"> Orange <br>
</form>
</body>
</html>
The output is
Which fruit do you like?
Apple
mango
Orange

Notice that in the above code,


type=checkbox.
Dr. Kamesh Duvvuri

Internet Programming

All the input tag has a common name, i.e. name=fruit. You can give any name,
but name should be common for all the checkboxes

If you think that most people like apples, you can pre-select it, some thing like this.
<input type="checkbox" name="fruits" value=apple checked> Apples<br>
Type the following code,
<html>
<head>
<title>Using Form tag-text box</title>
</head>
<body>
<form method="post" action="">
Which fruit do you like? <br>
<input type="checkbox" name="fruit" value="apple"
checked> Apple <br>
<input type="checkbox" name="fruit" value="Mango">
mango <br>
<input type="checkbox" name="fruit" value="Orange">
Orange <br>
</form>
</body>
</html>
And the output is
Which fruit do you like?
Apple
mango
Orange
Radio buttons are sets of circle-like selectors in which the user may only make one
choice. The only difference between radio button and check box is number of selections.
With checkbox user can select more than one option but with the radio button, use can
only select one option.
The above code with radio button is like this.
<html>
<head>
<title>Using Form tag-text box</title>
</head>

Dr. Kamesh Duvvuri

Internet Programming

<body>
<form method="post" action="">
Which fruit do you like? <br>
<input type="radio" name="fruit" value="apple"> Apple
<br>
<input type="radio" name="fruit" value="Mango"> mango
<br>
<input type="radio" name="fruit" value="Orange">
Orange <br>
</form>
</body>
</html>

The output is
Which fruit do you like?
Apple
mango
Orange
Notice that
Type=radio
All the input tag has a common name radio.
We will discuss later on about type=image/button/submit/hidden

Forms: textarea and option/select


<textarea> tag allows the user to enter multiple lines of text. It also has an opening and
closing tag, like most of the form elements. It is used as follows
<textarea name=u_text rows=4 cols=10 wrap=virtual>,
I think only one thing needs explanation here, and it is wrap, wrap=virtual means if
user types any thing, the text should not go beyond the right side of the box.
Type the following code to understand more about <textarea>
<html>
<head>
<title>Using Form tag-TextArea</title>
</head>
<body>

Dr. Kamesh Duvvuri

Internet Programming

<form method="post" action="">


Write a short note about urself<br>
<textarea name=u_text rows=4 cols=10
wrap=virtual>If you write something here, it will appear in the browser also.
</textarea>
</form>
</body>
</html>

Write a short note about urself

Anything you include between the opening and closing textarea tags will appear in the
textarea box.

The <select> element works a lot like a radio button, except in that it used a cool drop
down box. It also has a closing tag, </select>. Choices for the drop down box are
created by using <option> tags.
<select name="fav">
<option value="apples">apples</option>
<option value="oranges">oranges</option>
<option value="bananas">bananas</option>
</select>

Which fruit is your favorite?

Now let us put all this into one form, and then complete this lecture.
<html>
<head>
<title>Using Form tag-text box</title>
</head>
<body>
<form method="post" action="">

Dr. Kamesh Duvvuri

Internet Programming

Enter your name:&nbsp;&nbsp;<input type="text" name="u_name"


value="Harshit"> <br>
Enter your password:&nbsp;&nbsp; <input type="password" name="u_pass"><br>

Write a short note about urself<br>


<textarea name=u_text rows=4 cols=10 wrap=virtual>If you write something
here, that will appear in the
browser also.
</textarea><br>
Which fruit do you like? <br>
<input type="checkbox" name="fruit" value="apple"> Apple <br>
<input type="checkbox" name="fruit" value="Mango"> mango <br>
<input type="checkbox" name="fruit" value="Orange"> Orange <br>
Which fruit do you like? <br>
<input type="radio" name="fruit" value="apple"> Apple
<br>
<input type="radio" name="fruit" value="Mango"> mango
<br>
<input type="radio" name="fruit" value="Orange">
Orange <br>

<select name="fav">
<option value="apples">apples</option>
<option value="oranges">oranges</option>
<option value="bananas">bananas</option>
</select>
</form>
</body>
</html>

The output will be


Enter your name:
Enter your password:
Write a short note about urself

Dr. Kamesh Duvvuri

Internet Programming

Which fruit do you like?


Apple
mango
Orange
Which fruit do you like?
Apple
mango
Orange

So, user will provide input, but after providing input he has to submit the input, for
submitting input, we need a button.
So, next topic is How to make a button in HTML page. Very simple, tag for that is
<input type = submit name=sub_b >
Insert the line in the above code, and the output will be
Enter your name:
Enter your password:
Write a short note about urself

Which fruit do you like?


Apple
mango
Orange
Which fruit do you like?
Apple
mango
Orange

Dr. Kamesh Duvvuri

Internet Programming

If you click on the submit button, all the inputs will be passed to the page specified in
action attribute of form tag. This topic we will discuss later when we will discuss ASP.
-

More about body tag- Setting up link colors


More about body tag- Setting up Background Image
Meta tags

In previous lecture, you learned the BODY tag. The BODY tag has many attributes... here are
the most useful ones...

BACKGROUND="location_of_image"

BGCOLOR="name of color"

LINK="name of color"

- Background image for web page.


Example: If you have kitten.jpg in the same directory as your HTML file, use
<body background="kitten.jpg"> to load it as your background image.

Sets the Background Color for the web page

- Color Code for Links (if left blank, most browsers

default to blue.)

VLINK="name of color"

TEXT="name of color"

- Code for Links the User has Already Visited (if left
blank, most browsers default to purple.)

More About Table Tag


TWO DEMONSTRATIONS OF ROWSPAN
Item 1 Item 2 Item 3

Dr. Kamesh Duvvuri

Internet Programming

Item 4

Item 5

<TABLE BORDER>
<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>

Item 1

Item 2 Item 3 Item 4


Item 5 Item 6 Item 7

<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Item 1</TD>
<TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR>
<TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD>
</TR>
</TABLE>

DEMONSTRATION OF COLSPAN
Item 1 Item 2
Item 3 Item 4 Item 5
<TABLE BORDER>
<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>

DEMONSTRATION OF HEADERS, <TH>


Head1 Head2 Head3
A
B
C
D

<TABLE BORDER>
<TR>
<TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH>
</TR>

Dr. Kamesh Duvvuri

Internet Programming

<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

DEMONSTRATION OF COLSPAN AND HEADERS,


Head1 Head2
A B C D
E

F G H

<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>

DEMONSTRATION OF MULTIPLE HEADERS, COLSPAN


Head1

Head2

Head 3 Head 4 Head 5 Head 6


A

<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TH>Head 3</TH> <TH>Head 4</TH>
<TH>Head 5</TH> <TH>Head 6</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>

Dr. Kamesh Duvvuri

Internet Programming

DEMONSTRATION OF SIDE HEADERS

Head1 Item 1 Item 2 Item 3


Head2 Item 4 Item 5 Item 6
Head3 Item 7 Item 8 Item 9
<TABLE BORDER>
<TR><TH>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR>
<TR><TH>Head2</TH>
<TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD></TR>
<TR><TH>Head3</TH>
<TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD></TR>
</TABLE>

DEMONSTRATION OF SIDE HEADERS, ROWSPAN


Head1

Item 1 Item 2 Item 3 Item 4


Item 5 Item 6 Item 7 Item 8

Head2 Item 9 Item 10 Item 3 Item 11


<TABLE BORDER>
<TR><TH ROWSPAN=2>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item
4</TD>
</TR>
<TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item
8</TD>
</TR>
<TR><TH>Head2</TH>
<TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item
11</TD>
</TR>
</TABLE>

SAMPLE TABLE USING ALL OF THESE

Dr. Kamesh Duvvuri

Internet Programming

<TABLE BORDER>
<TR>
<TD>
<TH ROWSPAN=2></TH>
<TH COLSPAN=2>Average</TH>
</TD>
</TR>
<TR>
<TD><TH>Height</TH><TH>Weight</TH></TD>
</TR>
<TR>
<TH ROWSPAN=2>Gender</TH>
<TH>Males</TH><TD>1.9</TD><TD>0.003</TD>
</TR>
<TR>
<TH>Females</TH><TD>1.7</TD><TD>0.002</TD>
</TR>
</TABLE>

CLEVER USES OF ROWSPAN/COLSPAN


A

12
34

C D
<TABLE BORDER>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
</TR>
<TR>
</TR>
</TABLE>

ADJUSTING MARGINS AND BORDERS


A TABLE WITHOUT BORDERS
Item 1
Item 3
Item 2
Item 4
Item 5

Dr. Kamesh Duvvuri

Internet Programming

<TABLE>
<TR>

<TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item

3</TD>
</TR>
<TR>
</TR>
</TABLE>

<TD>Item 4</TD> <TD>Item 5</TD>

A TABLE WITH A BORDER OF 10


Item 1 Item 2
Item 3 Item 4
<TABLE BORDER=10>
<TR>
<TD>Item 1</TD> <TD> Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD> <TD>Item 4</TD>
</TR>
</TABLE>

CELLPADDING AND CELLSPACING


A

<TABLE BORDER CELLPADDING=10 CELLSPACING=0>


<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

Cellpadding tag is used to create space between the text inside your
table and the border surrounding the text.

A B C
D E F
Cellspacing tag is used to create space between different cells
within your table.

Dr. Kamesh Duvvuri

Internet Programming

<TABLE BORDER CELLPADDING=0 CELLSPACING=10>


<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

<TABLE BORDER CELLPADDING=10 CELLSPACING=10>


<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>


<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

ALIGNMENT, CAPTIONS, AND SUBTABLES


DEMONSTRATION OF MULTIPLE LINES IN A TABLE
January

February

This is cell 1 Cell 2


Cell 4

March
Another cell,
cell 3

and now this


Cell 6
is cell 5

<TABLE BORDER>
<TR>

Dr. Kamesh Duvvuri

Internet Programming

<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR>
<TD>This is cell 1</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
<TR>
<TD>Cell 4</TD>
<TD>and now this<br>is cell 5</TD>
<TD>Cell 6</TD>
</TR>
</TABLE>

ALIGN=LEFT|RIGHT|CENTER
can be applied to individual cells or whole ROWs
January

February

March

all aligned center

Cell 2

Another cell,
cell 3

aligned right aligned to center

default,
aligned left

<TABLE BORDER>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR ALIGN=center>
<TD>all aligned center</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
<TR>
<TD ALIGN=right>aligned right</TD>
<TD ALIGN=center>aligned to center</TD>
<TD>default,<br>aligned left</TD>
</TR>
</TABLE>

VALIGN=TOP|BOTTOM|MIDDLE
can be applied to individual cells or whole ROWs

Dr. Kamesh Duvvuri

Internet Programming

January

February

all aligned to top and now this


is cell 2
aligned to the top

March
Cell 3

default alignment,
aligned to the bottom center

<TABLE BORDER>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR VALIGN=top>
<TD>all aligned to top</TD>
<TD>and now this<br>is cell 2</TD>
<TD>Cell 3</TD>
</TR>
<TR>
<TD VALIGN=top>aligned to the top</TD>
<TD VALIGN=bottom>aligned to the bottom</TD>
<TD>default alignment,<br>center</TD>
</TR>
</TABLE>

Meta Tag
The <META> tag can be used for a few different purposes. META tag are used in search
engines. When a search engine finds your page, it adds your page to the searchable
database with some information. The information that it adds is actually information
contained in meta tag.
<meta name="description" content="description of page goes here">
<meta name="keywords" content="keywords go here">

Meta tags are not visible in the web page unless the user selects to 'view source'.
<html>
<head>
<title>Using Meta Tags </title>
<meta name="description" content="Joe's Collection of Cool Sound files
for you to use in your home page!">
<meta name="keywords" content="music sounds midi wav joe collection">
</head>
<body>
Page Goes Here
</body>
</html>

Dr. Kamesh Duvvuri

Internet Programming

Dr. Kamesh Duvvuri

Internet Programming

You might also like