HTML Notes

Tables in HTML:
HTML <table>allows us to arrange data in tabular structure, using a model of

horizontal rows and vertical columns. A table is divided into rows and each row
is divided into cells.
A sample Table structure
An HTML Table start with < table > tag and ends with < /table > tag.
A table can contain an infinite number of table rows.
A table row start with < tr > tag and ends with < /tr > tag.
Each Table Row is divided into cells.
A Table cell start with < td > tag and end with < /td > tag.
Eg] The following HTML code create an HTML Table with 2 rows and each rows
contain 2 columns and fill the content A,B,C,D in cells respectively.
<html>
<body >
<table border=”1” >
<tr><td>A</td><td> B</td></tr>
<tr><td> C </td> <td> D </td></tr>
</table>
</body>
</html>
In the above picture you can see the Table starts with < table > and end with
< /table > tag and each row start with < tr > and end with < tr/ > tag and each
cells start with < td > and end with < /td > tag.
Table height and width

The width attribute specifies the width of a table or the width of a table cell.
The width can be set either as an absolute value in pixels, or as in percentage
(%).
<table border=1 width=100>
or
<table border=1 width=100%>
Eg]
<html>
<body >
<tr>
<td>
Table width is 100 pixel
</td>
</tr>
</table>
<br>
<table border=1 width=100%>
<tr>
<td>
Table width is 100 %
</td>
</tr>
</table>
</body>
</html>
Cell width:
You can set the width of a table cell using width attribute.
Eg]
<html>
<body >
<tr>
<td width=30%>
Cell width is 30%
</td>
<td width=70%>
Cell width is 70%
</td>
</tr>
</table>
</body>
</html>
Table and Cell height
<table height=400>
<td height=100>
Table border:
The HTML Table Border attribute sets the width of Border around the table
and table cells. We can set the Border attributes in pixels.
<table border="2">
In the above HTML code we set the Border attribute to 2, this applies a border
to each cell, and to the table as a whole. But whatever values you to set in the
Border attribute, only the size of the border around the table will change, the
border of the table cells remain 1 pixel width.
<html>
<body >
<table border=5>
<tr>
<td>
January
</td>
<td>
February
</td>
</tr>
<tr>
<td>
March
</td>
<td>
April
</td>
</tr>
</table>
</body>
</html>
In the above HTML code we set border=5 , you can see only the Border around
the table will change the size to 5 , but cells border inside the table will remain
1 pixel.
Table border colour:

The bordercolor attribute will change the color of the border around your
table.
<table border=5 Bordercolor=red>
Table caption:
A < caption > .. < /caption > tag of a Table represents the title of the table, it
should tell what the table is about. The caption text should be relatively short,
but informative. The caption element can only be used once per table and
must immediately follow the table start tag.
<caption>Table Caption</caption>
Eg]
<html>
<body >
<table border=1>
<caption>Table Caption</caption>
<tr>
<th>
Alphabets
</th>
<th>
Numbers
</th>
</tr>
<tr>
<td>
A
</td>
<td>
1
</td>
</tr>
<tr>
<td>
B
</td>
<td>
2
</td>
</tr>
</table>
</body>
</html>
Captions are placed above the table by default. Captions can also be placed
below, to the left, or to the right of the table, based on the value of the "align"
parameter.
<caption align=bottom>Table Caption</caption>
The above HTML code display caption at the bottom of a Table.
Table align:
Align attribute of Table can positioning Tables and their contents in relation to
other elements on the Web page. Align attributes can be set in two levels,
Table Alignment and the alignment of content inside the Table Cells.
1)Table alignment:
Alignment of the Html Table element defines the horizontal alignment of the
Table. You can Align an HTML Table left, right, and center horizontally .
<html>
<body >
<table border="2" align="left">
<tr><td>Table 1</td></tr>
<tr>
<td>Align Left</td>
</tr>
</table>
<br><br><br>
<table border="2" align="center">
<tr>
<td>Align Center</td>
</tr>
</table>
<br>
<table border="2" align="right">
<tr>
<td>Align Right</td>
</tr>
</table>
</body>
</html>
Table cell contents alignments:

In order to control the alignment of contents of an individual cell, use the Align
and Valign attributes to < td > tags. Align attribute can position your content
horizontally inside the Cell in three ways like Left, Right and Center. VAlign
attribute can position your content Vertically inside the Cell in four ways like
Top, Bottom, Middle and Baseline.
In the above picture there are two tables , first table has three columns and
each column Align horizontally left, right and center respectively. The second
table has three columns and each column vertically align Top, Bottom and
Middle respectively.
<html>
<body >
<h4>Horizontal Align (Align)</h4> <br><br>
<table border="2" width=300>
<tr>
<td align=Left >Left</td>
<td align=Right>Right</td>
<td align=Center>Center</td>
</tr>
</table>
<br><br>
<h4>Vertical Align (VAlign) </hr><br><br>
<tr height=50>
<td valign=top >Top</td>
<td valign=bottom>Bottom</td>
<td valign=middle>Middle</td>
</tr>
</table>
</body>
</html>
Merging of rows and columns:

A table is divided into rows and each row is divided into cells. In some
situations we need the Table Cells span across (or merged) more than one
column or row. In these situations we can use Colspan or Rowspan attributes.
Colspan:
The colspan attribute defines the number of columns a cell should span (or
merge) horizontally. That is, you want to merge two or more Cells in a row into
a single Cell.
<html>
<body >
<table border=1 >
<tr>
<td colspan=2 >
Merged
</td>
</tr>
<tr>
<td>
Third Cell
</td>
<td>
Forth Cell
</td>
</tr>
</table>
</body>
</html>
Rowspan:
The rowspan attribute specifies the number of rows a cell should span
vertically. That is , you want to merge two or more Cells in the same column as
a single Cell vertically.
<html>
<body >
<table border=1 >
<tr>
<td>
First Cell
</td>
<td rowspan=2 >
Merged
</td>
</tr>
<tr>
<td valign=middle>
Third Cell
</td>
</tr>
</table>
</body>
</html>
Cellspacing:
The Cellspacing attribute places space, in pixels, around each cell in the table.
<html>
<body >
<table border=1 bgcolor=red cellspacing=15>
<tr>
<td bgcolor=white>
January
</td>
<td bgcolor=white>
February
</td>
</tr>
<tr>
<td bgcolor=white>
March
</td>
<td bgcolor=white>
April
</td>
</tr>
</table>
</body>
</html>
In the above HTML code we set cell-spacing as 15. That means each adjacent
table cells create 15 pixels space to another. For display purpose set the table
background Color as Red and Cell background Color as White. So you can see
the cell spacing in red color.
If you want no spaces at all, you should set Cellspacing="0", otherwise the
default is Cellspacing="1" will set, even if you don't mention Cellspacing. The
below picture is the same HTML code with default Cellsapcing, that is no
Cellspacing is set or Cellspacing="1" .
The cellspacing is applied both vertically and horizontally. The cell spacing is
uniform for the entire table. Individual cell spacing between each row or
column cannot be specified.
Cellpadding:
CellPadding attribute is used to control the spacing between the contents of a
Cell and the Cell's border.
<html>
<body >
<table border=1 cellpadding=15>
<tr>
<td>
January
</td>
<td>
February
</td>
</tr>
<tr>
<td>
March
</td>
<td>
April
</td>
</tr>
</table>
</body>
</html>
The Cellpadding is uniform for the entire table, individual Cellpadding in Table
Cells cannot be specified. The padding amount specified is added to all four
sides of the cell.
Basically, cellpadding allows for more "white space" , if you want no spaces
around your text inside the Table Cell, you should set Cellpadding="0",
otherwise the default is Cellpadding="1" will set , even if you don't mention
Cellpadding.
The cellpadding attribute is similar to the cellspacing attribute, which is used to
create space between and outside of the table cells.
HTML description list or definition lists:

HTML Description List or Definition List displays elements in definition form like in
dictionary. The <dl>, <dt> and <dd> tags are used to define description list.
The 3 HTML description list tags are given below:
1. <dl> tag defines the description list.
2. <dt> tag defines data term.
3. <dd> tag defines data definition (description).
Eg]
<dl>
<dt>HTML</dt>
<dd>is a markup language</dd>
<dt>Java</dt>
<dd>is a programming language and platform</dd>
<dt>JavaScript</dt>
<dd>is a scripting language</dd>
<dt>SQL</dt>
<dd>is a query language</dd>
</dl>
Output:
HTML
is a markup language
Java
is a programming language and platform
JavaScript
is a scripting language
SQL
is a query language
<Marquee> tag:
It
scrolls the image or text up, down, left or right automatically.
Eg]
<marquee>This is an example of html marquee </marquee>
Following are the attributes of marquee tag:

1) behavior: It facilitates user to set the behavior of the marquee to one
of the three different types: scroll, slide and alternate.
2) Direction : defines direction for scrolling content. It may be left, right,
up and down.
3) Width: defines width of marquee in pixels or %.
4) Height: defines height of marquee in pixels or %.
5) Scrolldelay: defines scroll delay in seconds.(big number to slow down)
6) Bgcolor : defines background color.
Eg] <html>
<head>
<marquee bgcolor="red" height="500"width="400">welcome</marquee>
<marquee direction = "up" height="100%" width="100%">The
direction of text will be from bottom to top.</marquee>
<br><br>
<marquee direction = "down">The direction of text will be from top
to bottom</marquee>
<br><br>
<marquee direction = "left">The direction of text will be from left to
right</marquee>
<br><br>
<marquee direction = "right" >The direction of text will be from
right to left.
</marquee><br><br>
<marquee scrolldelay= "1000">hello</marquee><br>
<marquee width="100%" behavior="scroll" bgcolor="pink"> This is
an example of a scroll marquee... </marquee>
<marquee width="100%" behavior="slide" bgcolor="pink"> This is
an example of a scroll marquee... </marquee>
<marquee width="100%" behavior="alternate" bgcolor="pink">
This is an example of a scroll marquee... </marquee>
</head>
</html>
 Hyperlinks
(For this u need to have hyperlinks.html page and dolphins.jpg
image)
(1.HTML)
<html>
<head>
<title>hi</title>
</head>
<body>
<p>hello ...welcome</p>
<a href =" hyperlinks.html">goto homepage</a><br>
<a href=" https://www.gmail.com"> goto gmail</a><br>
<a href="2.html"><img src="dolphins.jpg"></a><br>
</body>
</html>
(2.HTML)
<html>
<body>
<body background="OIP.jpg">
<a href =" 1.html">goto next page</a><br>
<a href="hyperlinks.html">go back to homepage</a><br>
</body>
</html>
(HYPERLINKS.HTML)
<html>
<head>
<title> hyperlinks
</title></head>
<body>
<a href =" 1.html">goto next page</a><br>
<a href="2.html"><img src="dolphins.jpg"></a><br>
</body>
</html>
Eg)Another example for linking 2 pages:

(link1.html)
<html>
<head>
<title>hello</title>
</head>
<body>
<a href="link2.html"><IMG SRC=Dolphins.jpg></a>
</body>
</html>
(link2.html)
<html>
<head>
</head>
<body>
<a href="link1.html">go to previous page</a>
</body>
</html>
 EXAMPLE OF HEADINGS AND ONE HYPERLINK TO YOUTUBE
<html>
<head>
<title>my first page</title>
<marquee>welcome to my page</marquee>
</head>
<body text="red">
<h1>Heading no. 1</h1>
<a href="http://www.youtube.com">lets go to the first</a>
</body>
</html>
Eg2)
<html>
<head>
<marquee>hello all
</head>
<body>
<h6>hello</h6>
<h5>hello</h5>
<h4>hello</h4>
<h3>hello</h3>
<h2>hello</h2>
<h1>hello</h1>
</body>
</html>
 Example for definition list

<html>
<body><dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
 Images with their attributes:

<html>
<head>
<marquee>welcome to the image tag description</marquee>
</head>
<body>
<p><IMG SRC="Dolphins.jpg" align ="left" height= 101 width=100
border= 10>Enforcement of the Indian Constitution on January 26,
1950, marked the beginning of India as a republic country.
Since then every year on 26th January Indians celebrate the national
festival with pride.
The celebrations take place at Rajpath in the form of ceremonial
parades in front of the President of India and other international
delegates.
Thousands of people visit the ground to be a spectator of the
spectacle representing Unity and Cultural richness of the
country.</p>
<br><br>
<p><IMG SRC="Dolphins.jpg" align ="right" height= 101
width=100>Enforcement of the Indian Constitution on January 26,
festival with pride. The celebrations take place at Rajpath in the form
of ceremonial parades in front of the President of India and other
international delegates.
country.</p>
<br><br>
<p><IMG SRC="Dolphin.jpg" align ="middle" height= 101 width=100
alt="hello">Enforcement of the Indian Constitution on January 26,
country.</p>
<br><br>
<marquee>so many dolphins</marquee>
<p><IMG SRC="Dolphins.jpg" align ="top" height= 101
country.</p>
<br><br>
<p><IMG SRC="Dolphins.jpg" align ="bottom" height= 101
country.</p>
</body>
</html>
 Lists:
Eg1)<html>
<body>
<ol type="i">
<li>Aries
<li>virgo
<li>Leo</li>
<li>Oracle</li>
</ol>
<ul type="circle">
<li>Aries</li>
<li>virgo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>
</body>
</html>
Eg 2) <html>
<head>
<title> hyperlinks
</title></head>
<body>
<ol>
<li>built in
<ol>
<li>integral
<ol>
<li>integer
<li>char
</ol>
<li>floating
<ol>
<li>float
<li>double
</ol>
<li>
void
</ol>
<li>user defined
<ol>
<li>structure
<li>class
<li>union
<li>enumeration
</ol>
<li>derived
<ol>
<li>arrays
<li>functions
<li>pointers
</ol>
</ol>
</body>
</html>
</body>
</html>
 Marquee
Eg)
<html>
<head>
<marquee bgcolor="red" height="500"
width="400">welcome</marquee>
<marquee direction = "up" height="100%"
width="100%">The direction of text will be from bottom
to top.</marquee><br><br>
<marquee direction = "down">The direction of text will
be from top to bottom</marquee><br><br>
<marquee direction = "left">The direction of text will be
from left to right</marquee><br><br>
<marquee direction = "right" >The direction of text will
be from right to left.
</marquee><br><br>
<marquee scrolldelay= "1000">hello</marquee><br>
<marquee width="100%" behavior="scroll"
bgcolor="pink"> This is an example of a scroll
marquee... </marquee>
<marquee width="100%" behavior="slide"
<marquee width="100%" behavior="alternate"
</head>
</html>
2) <html>
<head>
<font color="blue" size="50"><marquee bgcolor="red" direction =
"up" height="100%" width="100%"><b>The direction of text
will be from bottom to top.</b></marquee></font><br><br>
</head>
</html>
 Table with valign

<html>
<body >
Horizontal Align (Align) <br><br>
<tr>
<td align=Left >Left</td>
<td align=Right>Right</td>
<td align=Center>Center</td>
</tr>
</table>
<br><br>
Vertical Align (VAlign) <br><br>
<tr height=50>
<td valign=top >Top</td>
<td valign=bottom>Bottom</td>
<td valign=middle>Middle</td>
</tr>
</table>
</body>
</html>
Horizontal rule:<hr>
The <hr> tag in HTML stands for horizontal rule and is used to insert a horizontal rule
or a thematic break in an HTML page to divide or separate document sections. The
<hr> tag is an empty tag and it does not require an end tag.
Following are the attributes:
1) Align: Used to specify the alignment of the horizontal rule.(by
default center)
 left
 center
 right
2)noshade: Used to specify the bar without shading effect.

3)size: Used to specify the height of the horizontal rule.
4) width: Used to specify the width of the horizontal rule.
Eg]<html>
<head>
<title>HTML hr tag</title>
</head>
<body>
<p>There is a horizontal rule below this paragraph.</p>
<hr>
<p>This is a horizontal rule above this paragraph.</p>
</body>
</html>
Output:
Eg] <html>
<head>
<title>hr tag with attributes</title>
</head>
<body>
<p>Normal horizontal line.</p>
<hr>

<p>Horizontal line with height of 30 pixels</p>
<hr size="30">

<p>Horizontal line with height of 30 pixels
and noshade.</p>
<hr size="30" noshade>
</body>
</html>
Output:
Font:
In HTML, you can change the size of text with the <font> tag using the size attribute.
The size attribute specifies how large a font will be displayed in either relative or
absolute terms. Close the <font> tag with </font> to return to a normal text size.
The default font size is 3, and the largest font size that can be displayed in a browser
is 7.
To increase or decrease the size of the font relative to the default size, use <font
size="+num"> or <font size="-num"> , where "num" is a number. For example, to
make the text two sizes bigger, use:
<font size="+2">This is bigger text.</font>
To make text one size smaller, use:
<font size="-1">This is smaller text.</font>
To specify an absolute font size, use <font size="num"> , where "num" is a number
from 1 to 7. (When you use absolute font sizes, the resulting display may be more
dependent on the browser and hardware of the person viewing the page than when
you use relative sizes.) For example, to display the smallest text possible, use:
<font size="1">This is really tiny text.</font>
Headings:
Align attribute
<h1 align=”right”>Heading no. 1</h1>
<h2 align=”center”>Heading no. 2</h2>
<h3 align=”left”>Heading no. 3</h3>
<h4 align= “justify”>Heading no. 4</h4>
<h5 align=”right”>Heading no. 5</h5>
<h6 align =”center”>Heading no. 6</h6>
Formatting tags
<html>
<head>
<title>formatting elements</title>
</head>
<body>
<p> <b>Write Your First Paragraph in bold text.</b></p>
<p><strong>This is an important content</strong>, and this is normal content
</p>
<p> <i>Write Your First Paragraph in italic text.</i></p>
<p><em>This is an important content</em>, which displayed in italic font.</p>
<p> <u>Write Your First Paragraph in underlined text.</u></p>
<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
<p>Hello <big>Write the paragraph in larger font.</big></p>
<p>Hello <small>Write the paragraph in smaller font.</small></p>

</body>
</html>
Images
Attributes of HTML img tag
The src and alt are important attributes of HTML img tag. All attributes of HTML image
tag are given below.
1) src
It is a necessary attribute that describes the source or path of the image. It instructs the
browser where to look for the image on the server.
The location of image may be on the same directory or another server.
2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed. The
value of the alt attribute describe the image in words.
3) width
It is an optional attribute which is used to specify the width to display the image. It is
not recommended now. You should apply CSS in place of width attribute.
4) height
It h3 the height of the image. The HTML height attribute also supports iframe, image and
object elements. It is not recommended now. You should apply CSS in place of height
attribute.
5) border
Use of height and width attribute with img tag

You have learnt about how to insert an image in your web page, now if we want to give
some height and width to display image according to our requirement, then we can set it
with height and width attributes of image.
<img src="dolphins.jpg" alt="Good Morning Friends">
<img src="dolphins.jpg" height="180" width="300" alt="animal image">
Creating an image link:
<a href=" "><img src="dolphins.jpg" height="100" width="100"></a>
How to align image in Html

<Html>
<Head>
<Title>
Align an Image at middle
</Title>
</Head>
<Body>
Hello User!
<p>This page helps us to understand how to align an image in Html.
<img align="top/left/bottom/middle/right" src="dolphins.jpg” width="100" heigh
t="100" >
It is first section in this page which describes how to specify an image at middle in a
pargraph using the Html tag.</p>
</Body>
</Html>
Lists
Ordered list
<ol type=”A”>
<li>HTML
<li>Java
<li>JavaScript
<li>SQL
</ol>
Unordered list
<ul type=”square”>
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
Start attribute:
You can use start attribute for <ol> tag to specify the starting point of numbering
you need. Following are the possible options −
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.
Following is an example where we used <ol type = "i" start = "4" >
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
iv. Beetroot
v. Ginger
vi. Potato
vii. Radish
The value Attribute
You can use the value attribute to specify a number for a list item. Any
subsequent list items increment their value from that initial value
(unless you override it with a new value).
Note that you can only use the value attribute when using
the <ol> element.
Also note that the ordinal value of the value attribute must be a valid
integer.
<ol>
<li value="11">Cats</li>
<li>Dogs</li>
<li>Birds</li>
</ol>
OUTPUT:
11.Cats
12.Dogs
13.Birds

HTML Notes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Notes

Uploaded by

Copyright:

Available Formats

Tables in HTML:

HTML <table>allows us to arrange data in tabular structure, using a model of

A sample Table structure

A table can contain an infinite number of table rows.

Each Table Row is divided into cells.

Table height and width

Table and Cell height

Table border colour:

<table border=5 Bordercolor=red>

Table cell contents alignments:

Merging of rows and columns:

HTML description list or definition lists:

Following are the attributes of marquee tag:

Eg)Another example for linking 2 pages:

 EXAMPLE OF HEADINGS AND ONE HYPERLINK TO YOUTUBE

 Example for definition list

 Images with their attributes:

 Table with valign

2)noshade: Used to specify the bar without shading effect.

<font size="+2">This is bigger text.</font>

To make text one size smaller, use:

<font size="-1">This is smaller text.</font>

<font size="1">This is really tiny text.</font>

Use of height and width attribute with img tag

Creating an image link:

How to align image in Html

You might also like