GROUP 1

Working With
Text
Tables
Lists
Frames
HTML Text Formatting Elements

TAG DESCRIPTION
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
b> Defines bold text
<em> Defines emphasized text 
<mark> Defines marked/highlighted text
<i> Defines a part of a text in an alternate voice or mood
HTML <b> and <strong> Elements

 The HTML <b> element defines the bold text, without any extra

importance
For Example:
 <b>The text in between will be boldened</b>

 The HTML <strong> element defines text with strong importance.

The content inside is typically displayed in bold.
For Example:
 <strong>The text in between is important!</strong>
HTML <i> Element

 The HTML <i> element defines a part of text in an alternate voice or

mood. The content inside is typically displayed in italic.
Tip: The <i> tag is often used to indicate a technical term, a phrase
from another language, a thought, a ship name, etc.
For Example:
 <i>The in between will be put italics</i>
HTML <em> Element

  <em> element defines emphasized text. The content inside is

typically displayed in italic.
Tip: A screen reader will pronounce the words in <em> with an
emphasis, using verbal stress.
For Example:
 <em>The text in between will be emphasized</em>
HTML <small> and <mark> Elements

 The HTML <small> element defines smaller text:

For Example
 <small>The text in between will be smaller text.</small>

 The HTML <mark> element defines text that should be marked or

highlighted:
For Example
 <p>Do not forget to buy <mark>milk</mark> today.</p>
HTML <del> and <ins> Elements

 The HTML <del> element defines text that has been deleted from a

document. Browsers will usually strike a line through deleted text:
For Example
 <p>My favorite color is <del>blue</del> red.</p>
 The HTML <ins> element defines a text that has been inserted into
a document. Browsers will usually underline inserted text:
For Example
 <p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
HTML <sub> and <sup> Elements

 The HTML <sub> element defines subscript text. Subscript text appears

half a character below the normal line, and is sometimes rendered in a
smaller font. Subscript text can be used for chemical formulas, like H2O:
For Example
 <p>This is _subscripted text.</p>
 The HTML <sup> element defines superscript text. Superscript text
appears half a character above the normal line, and is sometimes rendered
in a smaller font. Superscript text can be used for footnotes, like WWW[1]:
For Example
 <p>This is ^{superscripted} text.</p>
 HTML Tables
HTML Tables:
 Tables are nothing but the tabular format, a combination of rows
and columns just like a simple Microsoft Excel sheet.
What are tables used for?
 Tables are used for displaying the data in a tabular format.
 Next, it can be used to compare and contrast some topics.
 Tables can also be used for designing and layout of a webpage
Continued…

 But now days this practice is termed to be a bad practice, because

for designing and layout purpose you can use CSS (Cascading
Style Sheet).
 So, remember that all sort of designing and layout i.e. headers,
footers etc. should all be done using CSS.
HTML Table Tags
TAG DESCRIPTION
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for
formatting
<thread> Groups the header content in a table
<col> Specifies column properties for each column within a
<colgroup> element
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Table Cells

 Each table cell is defined by a <td> and </td> tagm - Td stand for table data
 Everything between <td> and </td> are the content of the table cell
Example
 <table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>
Table Rows

 Each table row starts with a <tr> and end with a </tr> tag - tr stands for table row.
For Example
 <table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>
Simple Table Syntax:

 We have understood what is table and for what purpose it is used.

Now we will understand how it is created.
 HTML has some tags used to create a table.
 These tags are table tag and end of table tag, tr tag and end of tr tag and td and
end of td tag.
 In the syntax for creating table we have a table tag.
 Within table tag we have a tr tag.
 Then after that we have td tag within tr tag.
 The syntax for creating table is as shown in the figure
Table creating Syntax

 <!DOCTYPE html>
<html>
< head>
<title> HTML Table header </title>
</head>
</body>
<table border = “1”>
<tr>
<th> Name </th>
<th> Reg Number </th>
</tr>
<tr>
<td> Jim </td>
<td> R124537G </td>
</tr>
Continued…

 <tr>
<td> Rob </td>
<td> R129538H </td>
</tr>
</table>
</body>
</html>
Table Attributes

Cellpadding and Cellspacing Attributes

 There are two attributes called cellpadding and cellspacing which you will use to
adjust the white space in your table cells. The cellspacing attribute defines space
between table cells, while cellpadding represents the distance between cell
borders and the content within a cell.
 bgcolor attribute − You can set background color for whole table or just for one
cell.
Table Height and Width
 You can set a table width and height using width and height attributes. You can
specify table width or height in terms of pixels or in terms of percentage of
available screen area.
Table attributes Syntax

 <!DOCTYPE html>
<html>
< head>
<title> HTML Table header </title>
</head>
</body>
<table border = “1” cellpadding = “5” cellspacing = “5” bgcolor “yellow height = “200” width =
“400”>
<tr>
<th> Name </th>
<th> Reg Number </th>
</tr>
continued

<tr>
<td> Jim </td>
<td> R124537G </td>
</tr>
<tr>
<td> Rob </td>
<td> R129538H </td>
</tr>
</table>
</body>
</html>
Other Attributes

 Colspan and Rowspan Attributes

 You will use colspan attribute if you want to merge two or more columns into a
single column. Similar way you will use rowspan if you want to merge two or
more rows.
Understanding the syntax

 First of all, let us understand the full form of the tags.

 tr – table row.
 td – table data.
 table tag and end of table tag are used to create a table.
 table tag is the starting tag and end of table tag signifies end of
the table.
Explanation

 A table contains rows and columns.

 tr tag and end of tr tag are used to create rows in the table.
 The number of tr tags in the syntax specify the number of
horizontal rows in the table.
 The columns and content in the table is created using td tag and
end of td tag.
 The number of td tags in a tr tag specify the number of columns
in that particular row.
Continued…

 Thus,
starting tag for tr
starting tag for td Name end of td tag
starting tag for td Reg Number end of td tag
end of tr tag
 creates two columns in a row, having “Name ana Reg Number” as its data.
 Note one thing, by default table has no border.
 For applying border, you need to use “border” attribute of table tag.
 Eg: To get a single line border, inside starting of table tag you need to use border
attribute having value =1.
HTML Lists:

What are lists used for?

 Lists are used to group together related pieces of information.
 It is used for ranking the data; I mean numbering or bulleting the
data according to its rank.
 It can also be used for designing and layout formatting.
 For an example: You can design a menu on webpage using lists
HTML Lists:

 HTML contains three types of lists.

 Ordered List
 Un-ordered List
 Definition List
 Ordered List – Ordered list has numbering done for each item or data.
 Un-ordered List – Un-ordered list has bullets for each item.
 Definition List – This List is somewhat of the form having a definition
heading and then its definition below. It is normally not used frequently.
HTML Lists:

 Now, let’s learn the syntax for Lists.

 Lists Syntax:
 Ordered List:
 Syntax for ordered list is as shown
HTML Ordered Lists

 If you are required to put your items in a numbered list instead of bulleted, then
HTML ordered list will be used. This list is created by using <ol> tag. The
numbering starts at one and is incremented by one for each successive ordered list
element tagged with <li>.
 Example
HTML Ordered Lists Syntax

 <!DOCTYPE html>
<html>
<head>
<title> List of fruits </title>
</head>
<body>
<ol type = “1”>
<li> Banana </li>
<li> Apple </li>
<li> Orange </li>
</ol>
</body>
</html>
HTML Ordered Lists

 OUTPUT :

 1 Banana
 2 Apple
 3 Orange
HTML Ordered Lists

 <!DOCTYPE html>
<html>
<head>
<title> List of fruits </title>
</head>
<body>
<ol type = “A”>
<li> Banana </li>
<li> Apple </li>
<li> Orange </li>
</ol>
</body>
</html>
HTML Ordered Lists

OUTPUT :

 I Banana
 II Apple
 III Orange
HTML Unordered Lists

 An unordered list is a collection of related items that have no special order or

sequence. This list is created by using HTML <ul> tag. Each item in the list is
marked with a bullet.
 The type Attribute
 You can use type attribute for <ul> tag to specify the type of bullet you like. By
default, it is a disc. Following are the possible options −
 <ul type = “circle”>
 <ul type = “square”>
 <ul type = “disc”>
HTML Unordered Lists

 <!DOCTYPE html>
<html>
<head>
<title> List of fruits </title>
</head>
<body>
<ul type = “disc”>
<li> Banana </li>
<li> Apple </li>
<li> Orange </li>
</ul>
</body>
</html>
HTML Unordered Lists

OUTPUT :

 Banana
 Apple
 Orange
HTML Unordered Lists Syntax

 <!DOCTYPE html>
<html>
<head>
<title> List of fruits </title>
</head>
<body>
<ul type = “square”>
<li> Banana </li>
<li> Apple </li>
<li> Orange </li>
</ul>
</body>
</html>
HTML Unordered Lists

OUTPUT :
 Banana
 Apple
 Orange
HTML Definition Lists

 HTML and XHTML supports a list style which is called definition lists where

entries are listed like in a dictionary or encyclopedia. The definition list is the
ideal way to present a glossary, list of terms, or other name/value list.
Definition List makes use of following three tags.

TAG DESCRIPTION
<dl> Defines the start of the list
<dt> A term
<dd> Term definition
</dl> Defines the end of the list
HTML Definition Lists Syntax

 <!DOCTYPE html>
<html>
<head>
<title> List of fruits </title>
</head>
<body>
<dl>
<dt> Banana </dt>
<dd> It is yellow </dd>
<dt> Apple </dt>
<dd> It is red </dd>
</dl>
</body>
</html>
HTML Definition Lists

OUTPUT

 Banana
 It is yellow
 Apple
 It is red
Frames

 HTML frames are used to divide your browser window into multiple sections
where each section can load a separate HTML document. A collection of frames
in the browser window is known as a frameset. The window is divided into frames
in a similar way the tables are organized: into rows and columns.

Creating Frames
 To use frames on a page we use <frameset> tag instead of <body> tag. The
<frameset> tag defines, how to divide the window into frames. The rows attribute
of <frameset> tag defines horizontal frames and cols attribute defines vertical
frames. Each frame is indicated by <frame> tag and it defines which HTML
document shall open into the frame.
Frames syntax

 <!DOCTYPE html>
<html>
<head>
<title> HTML FRAMES </title>
</head>
<frameset rows = “50%, 50%” >
<frame name “top” src = “top.html” />
<frame name “bottom” src = “bottom.html” />
</frameset>
</html>
Frames

 OUTPUT :
Frames syntax

 <!DOCTYPE html>
<html>
<head>
<title> HTML FRAMES </title>
</head>
<frameset cols = “25%, 25%, 50%” >
<frame name “left” src = “left.html” />
<frame name “centre” src = “centre.html “/>
<frame name “right” src = “right.html” />
</frameset>
</html>

Frames

 OUTPUT :
Attributes of Frameset tag

Cols
 Specifies how many columns are contained in the frameset and the size of each
column.
 A percentage of the browser window. For example, to create three vertical frames,
use cols = “25%, 25%, 50%".

Rows
 This attribute works just like the cols attribute and takes the same values, but it is
used to specify the rows in the frameset. For example, to create two horizontal
frames, use rows = "10%, 90%". You can specify the height of each row in the
same way as explained above for columns.
Continued…

Border
 This attribute specifies the width of the border of each frame in pixels. For example, border
= "5". A value of zero means no border.

Framespacing
 This attribute specifies the amount of space between frames in a frameset. This can take
any integer value. For example framespacing = "10" means there should be 10 pixels
spacing between each frames.

Frameborder
 This attribute specifies whether a three-dimensional border should be displayed between
frames. This attribute takes value either 1 (yes) or 0 (no). For example frameborder = "0"
specifies no border.
Continued…

SRC
 This attribute is used to give the file name that should be loaded in the frame. Its
value can be any URL. For example, src = "top_frame.htm" will load an HTML
file available in html directory.

Name
 This attribute allows you to give a name to a frame. It is used to indicate which
frame a document should be loaded into. This is especially important when you
want to create links in one frame that load pages into an another frame, in which
case the second frame needs a name to identify itself as the target of the link.
Continued…

Marginwidth
 This attribute allows you to specify the width of the space between the left and
right of the frame's borders and the frame's content. The value is given in pixels.
For example margin width = "10".

Marginheight
 This attribute allows you to specify the height of the space between the top and
bottom of the frame's borders and its contents. The value is given in pixels. For
example marginheight = "10".