THE INDIAN PUBLIC SCHOOL – CAMBRIDGE INTERNATIONAL
HTML
What is a website?
A website is a collection of individual but related web pages that are often stored
together and hosted by a web server. Web pages can include different objects such
as text, sound, video and still images.
What is HTML?
HTML is an abbreviation for HyperText Markup Language. It is a text-based
language used to develop the webpage. Files are written in HTML using a simple
text editor like notepad or notepad++.Files are written in text format and are
usually saved with an .htm (or .html) file extension. These files are executed by web
browsers such as Microsoft Edge, Internet Explorer, Google Chrome or Mozilla
Firefox as web pages.
BASIC TAGS
1 HTML HANDOUT
THE INDIAN PUBLIC SCHOOL – CAMBRIDGE INTERNATIONAL
<th> Defines a header cell in a table
<tr> Defines a row in a table
<caption> Defines a table caption
<td> Defines a cell in a table
<p> Defines a paragraph
<title> Defines a title for the document
<br> Inserts a single line break
<b> Defines bold text
<i> Changes the text in italic style
<u> Underlines the text
<h1> <h2><h3><h4><h5><h6> Defines HTML headings
2 HTML HANDOUT
THE INDIAN PUBLIC SCHOOL – CAMBRIDGE INTERNATIONAL
Steps to run a HTML code :
Refer the video: [Link]
Tables
1. Introduction
Tables are data arranged into rows and columns to a web page. Tables may
be used to organize calendars, schedules, statistics, or other types of information. A
table cell may contain any sort of information, including numbers, text elements, and
even images and multimedia objects.
2. Table elements
The Figure given below which reveals the structure of table.
All of the table’s content goes into cells that are arranged into rows. Cells are the heart of
the table, because that’s where the actual content goes
A table element
Start and end table tags (<table> and </table>) are used to identify the beginning and
end
of the table.
A table rows
The element tr is used to define the table row (tag <tr> and </tr>). The tr element
contain
3 HTML HANDOUT
THE INDIAN PUBLIC SCHOOL – CAMBRIDGE INTERNATIONAL
number of cells.
A table cells
Cells contain either header information (titles for the columns) or data which may be
any content. The element th (<th> and </th>) is used as table header , it is displayed
differently from the other cells in the table. Table headers are important because they
provide information about the cells they precede. The element td (<td> and </td>) is
used as cell data. The number of columns in a table is determined by the number of
cells in each row. This is one of the things that make HTML tables potentially tricky.
Columns are implied with rows, for example, if a table has four columns then each
row must contain four td or th elements.
Example 1: For create a simple table with three rows and three columns that lists Food
Information
Caption
The caption element is used to give a table a title or brief description that displays
next to
4 HTML HANDOUT
THE INDIAN PUBLIC SCHOOL – CAMBRIDGE INTERNATIONAL
the table. The caption is displayed above the table by default.
Example 2
<html>
<table border = "1">
<caption>Student Information </caption>
<tr>
<th> Name </th>
<th> Class </th>
<th> Id </th>
</tr>
<tr>
<td> Student 1 </td>
<td> Second </td>
<td> 753 </td>
</tr>
<tr>
<td> Student 2</td>
<td> Third </td>
<td> 951</td>
</tr>
</table>
</html>
OUTPUT:
5 HTML HANDOUT
THE INDIAN PUBLIC SCHOOL – CAMBRIDGE INTERNATIONAL
3. Spanning Cells
One fundamental feature of table structure is cell spanning, which is the stretching of
a cell to cover several rows or columns.
• Column spans
Column spans are created with the colspan attribute in the td or th element, stretch a
cell
to the right to span over the subsequent columns as presented in example below
where a
column span is used to make a header apply to two columns.
Example 3
<html>
<table border = "5">
<tr>
<th colspan="2"> FAT </th>
</tr>
<tr>
<td> Saturated Fat(g) </td>
<td> UnSaturated Fat(g) </td>
</tr>
</table>
</html>
OUTPUT
6 HTML HANDOUT
THE INDIAN PUBLIC SCHOOL – CAMBRIDGE INTERNATIONAL
Note: Every row should have the same number of cells or equivalent colspan
values. In example 3, the second row has two td elements, and in the first row there
is only one th element but the colspan value is 2, so the implied number of columns
in each row is equal.
Activity 1 :
Write HTML Code for the following table
• Row spans
Row spans are created with the rowspan attribute, work just like column spans, but
they
cause the cell to span downward over several rows. In example 4, the first cell in the
table
spans down three rows
<html>
<table border = "2">
<tr>
<th rowspan="3"> Serving size </th>
<td> Small </td>
</tr>
7 HTML HANDOUT
THE INDIAN PUBLIC SCHOOL – CAMBRIDGE INTERNATIONAL
<tr>
<td> Medium </td>
</tr>
<tr>
<td> Large </td>
</tr>
</table> </html>
OUTPUT:
Activity 2:
Write HTML Code for the following table
bgcolor Attribute is use to specify the background color of a table.
Height and width attribute change the size of the table
html>
<head>
<title>
HTML table bgcolor Attribute
</title>
8 HTML HANDOUT
THE INDIAN PUBLIC SCHOOL – CAMBRIDGE INTERNATIONAL
</head>
<body>
<table border="1" bgcolor="green" height = "70%" width =
"60%">
<caption>
Author Details
</caption>
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>
<td>ECE</td>
</tr>
</table>
</body>
</html>
OUTPUT:
9 HTML HANDOUT
THE INDIAN PUBLIC SCHOOL – CAMBRIDGE INTERNATIONAL
10 HTML HANDOUT
