Scribd
Upload
2 views

HTML Handout 1

The document provides an introduction to websites and HTML, explaining that a website consists of related web pages and HTML is the markup language used to create them. It details basic HTML tags, the structure and elements of tables, and how to create tables with various attributes such as colspan and rowspan. Additionally, it includes examples of HTML code for creating tables and exercises for practice.

Uploaded by

nachammai nagappan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

HTML Handout 1

The document provides an introduction to websites and HTML, explaining that a website consists of related web pages and HTML is the markup language used to create them. It details basic HTML tags, the structure and elements of tables, and how to create tables with various attributes such as colspan and rowspan. Additionally, it includes examples of HTML code for creating tables and exercises for practice.

Uploaded by

nachammai nagappan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

THE INDIAN PUBLIC SCHOOL – CAMBRIDGE INTERNATIONAL

CHAPTER 3

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 .html (or .htm) 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: https://www.youtube.com/watch?v=6Nyw7QtKAPY

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

You might also like