LISTS, TABLES & FRAMES

Lesson 4
Lecturer: Dr. Geoffrey Mariga, PhD
EMAIL: [email protected]
Contents

4.1 Lists
4.1.1 Ordered Lists
4.1.2 Unordered Lists
4.1.3 Definition Lists
4.1.4 Nested Lists
4.2 Tables
5.1 FRAMES

2
4.1 LISTs

 HTML supports 3 types of lists:

 Ordered Lists
 Unordered Lists
 Definition Lists
 Nested Lists

 Lists may be nested to obtain multiple hierarchy levels

3
4.1 LISTs
4.1.1 Ordered List - <ol>
 Lists whose elements must appear in a certain order

 Such lists usually have their items prefixed with a number or letter

 An ordered list starts with the <ol> tag and finishes with </ol> tag.

 Each list item writtin within the <li>... </li> tags.

 By default, ordered lists use decimal sequence numbers (1, 2, 3,

…)
<ol>
<li>Apples</li> 1. Apples
<li>Bananas</li> 2. Bananas
<li>Coconuts</li> 3. Coconuts
</ol>
4
4.1 LISTs
4.1.1 Ordered List - <ol>
 To change sequence type, use TYPE attribute in <OL> opening
tag;

 TYPE = “1” (default) – Decimal sequence (1, 2, 3, …)

 TYPE = “I” – Uppercase Roman numerals (I, II, III, …)
 TYPE = “i” – Lowercase Roman numerals (i, ii, iii, …)
 TYPE = “A” – Uppercase alphabetical (A, B, C, …)
 TYPE = “a” – Lowercase alphabetical (a, b, c, …)

<ol type=“a”>
<li>Apples</li> a. Apples
<li>Bananas</li> b. Bananas
<li>Coconuts</li> c. Coconuts
</ol>
5
4.1 LISTs
4.1.2 Unordered List - <ul>
 Lists whose elements do not have to appear in a certain order.

 An unordered list starts with the <ul> tag and finishes with
</ul> tag.

 Each list item written within the <li>...</li> tags.

 The list items are marked with bullets (typically small black
discs).

<ul>
<li>Apples</li> • Apples
<li>Bananas</li> • Bananas
<li>Coconuts</li> • Coconuts
</ul>
6
4.1 LISTs
4.1.2 Unordered List - <ul>
 To change the type of a an unordered list, use
TYPE attribute in <OL> opening tag;

 TYPE = “disc” (default) –

 TYPE = “circle” –
 TYPE = “square” –

<ul type=”square”>
<li>Apples</li>  Apples
<li>Bananas</li>  Bananas
<li>Coconuts</li>  Coconuts
</ul>

7
4.1 LISTs
4.1.3 Definition List - <dl>

 A definition list is a list of items, with a description of each item.

 More complex than the other 2 lists due to their having 2 elements
per list item

 <dl> tag defines a definition list.

 <dt> defines the item in the list.

 <dd> describes the item in the list.

8
4.1 LISTs
4.1.3 Definition List - <dl>

<dl>
<dt>Internet Explorer</dt>
<dd>Developed by Microsoft</dd>
<dt>Netscape</dt>
<dd>Developed by Netscape</dd>
</dl>

Internet Explorer
Developed by Microsoft
Netscape
Developed by Netscape

9
4.1 LISTs
4.1.4 Nested Lists
 Contained in another list element
 Lists can be nested of the same or different types
 Nesting the new list inside the original;
 Indents list one level and changes the bullet type to
reflect the Nesting
• Send us a letter, including:
<ul> 1. Your full name
<li>Send us a letter, including:</li> 2. Your order number
<ol> 3. You contact information
<li>Your full name</li> • Use the web form to send an email
<li>Your order number</li>
<li>Your contact information</li>
</ol>
<li> Use the web form to send an email </li>
</ul>

10
4.2 TABLEs
 Tables are used when you need to show "tabular data" i.e. information that
is logically presented in rows and columns.

 Building tables in HTML may at first seem complicated but if you keep cool
and watch your step, it is actually strictly logical - just like everything else in
HTML.
 All tags and text that apply to the table go inside
<TABLE>…</TABLE> tags
 TABLE Attributes;
 BORDER: lets you set the width of the table’s border in pixels
 ALIGN: specifies the horizontal alignment of the content in the entire
table, in a row or in a single cell. For example, left, center or right.
 WIDTH: pixels (absolute) or a percentage
 VALIGN: specifies the vertical alignment of the content in a cell. For
example, top, middle or bottom.

11
4.2 TABLEs
 CAPTION element is inserted directly above the table in the
browser window
 Helps text-based browsers interpret table data

 TABLE Elements
 THEAD element
 Header info

 For example, titles of table and column headers

 TBODY element
 Used for formatting and grouping purposes

12
4.2 TABLEs
 A table is divided into rows

 Each row is divided into data cells

 <TR>…</TR>
 stands for "table row"

 starts and ends horizontal rows.

 <TH>…</TH>
 suitable for titles and column headings

 used in the header part of a table.

 all major browsers will display the text in the <th>

element as bold and centered.

13
4.2 TABLEs

 <TD>...</TD>
 stands for "table data".
 starts and ends each cell in the rows of the table.
 holds the content of a data cell.
 used in the body part of a table.
 aligned left by default.
 a <td> tag can contain
 text, links, images, lists, forms, other tables, etc.

14
4.2 TABLEs
 Possible to make some data cells larger than others
 Cells can be merged with the rowspan and colspan attributes
 The values of these attributes specify the number of rows or
columns occupied by the cell
 Can be placed inside any data cell or table header cell
 Modified cells will cover the areas of other cells
 Reduces number of cells in that row or column

15
4.2 TABLEs
<html>
<body>
Horizontal Headers:
<h4>Horizontal Headers:</h4>
<table border="1">
Name Telephone Telephone
<tr>
<th>Name</th> Bill Gates 555 77 854 555 77 855
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
</body>
</html> 16
4.2 TABLEs
<html>
<body>
<h4>Vertical Headers:</h4> Vertical Headers:
<table border="1">
<tr>
First Name: Bill Gates
<th>First Name:</th>
<td>Bill Gates</td> Telephone: 555 77 854
</tr> Telephone: 555 77 855
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html> 17
4.2 TABLEs
<table border="1">
<caption> TABLE 1 </caption>
<THEAD>
<tr>
<th>Header 1</th> TABLE 1
<th>Header 2</th> Header 1 Header 2
</tr>
</THEAD> row 1, cell 1 row 1, cell 2
<TBODY> row 2, cell 1 row 2, cell 2
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</TBODY>
</table>
18
4.2 TABLEs
<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr><th>Name</th>
<th colspan="2">Telephone</th></tr>
<tr> Cell that spans two columns:
<td>Bill Gates</td>
<td>555 77 854</td> Name Telephone
<td>555 77 855</td>
Bill Gates 555 77 854 555 77 855
</tr>
</table> Cell that spans two rows:
<h4>Cell that spans two rows:</h4> First Name: Bill Gates
<table border="1">
<tr><th>First Name:</th><td>Bill Gates</td></tr> 555 77 854
<tr><th rowspan="2">Telephone:</th> Telephone:
<td>555 77 854</td>
555 77 855
</tr>
<tr><td>555 77 855</td></tr>
</table>
</body>
</html>

19
4.2 TABLEs
 COLGROUP element
 Used to group and format columns

 Each COL element

 In the <COLGROUP>…</COLGROUP> tag

 Can format any number of columns (specified by the SPAN

attribute)

 Background color or image

 Add to any row or cell

 Use BGCOLOR and BACKGROUND attributes

20
4.2 TABLEs

21
4.2 TABLEs

22
4.2 TABLEs

23
4.2 TABLEs

24
5.1 FRAMEs (not suppurted in HTML5!!!)
 Frames allow you to have multiple sections of the browser
window, called frames, each showing their own .html file
within the frame.
 This used to be common practice when trying to show
separate sections of a site in separate sections of the
browser window, such as a header at the top, navigation
at the side, and the rest was page content that someone
could scroll down without making the header and
navigation disappear.
 Frames in HTML documents are created and controlled
through the structure of three element types:
 FRAMESET,
 FRAME,
 NOFRAMES.
25
5.1 FRAMEs (not suppurted in HTML5!!!)
 The structure of a frame-enabling HTML document type is
similar to usual HTML structure. The key difference in an
HTML document type is that the BODY container element
is basically replaced by a FRAMESET container element.
The initial FRAMESET element describes the frames that
make up the page, and the FRAME elements specify the
sub-documents that appear initially in each.
 If used properly, frames make your site more readable
and usable
 The disadvantages of using frames are:
 Frames are not supported in HTML5!!!
 Frames are difficult to use. (Printing the entire page is
difficult).
 The web developer must keep track of more HTML
documents 26
5.1 FRAMEs (not suppurted in HTML5!!!)
The HTML frameset Element

<FRAMESET>
 Tell the browser that the page contains frames
 Holds one or more frame elements.
 COLS or ROWS attributes states;
 How many columns or rows there will be in the
frameset, and
 How much percentage/pixels of space will occupy
each of them.
 In the frameset, one of the columns or one of the rows
can be set to use the remaining space, with an asterisk
( * ).
27
5.1 FRAMEs (not suppurted in HTML5!!!)
The HTML frameset Element

<FRAMESET> - Examples
 <frameset cols="30%,70%">
 <frameset rows="30%,70%">
 <frameset cols="200,500">
 <frameset cols="25%,*">
 <frameset cols="25%,*,25%">
 <frameset rows="25%,*,25%">
 <frameset rows="30%, 20%,* ">

28
5.1 FRAMEs (not suppurted in HTML5!!!)
The HTML frame Element
 The <frame> tag defines one particular window (frame)
within a frameset and has no end tag.
 Each frame element can hold a separate document.
 In the example below we have a frameset with two
columns.
 the first column is set to 25% of the width of the
browser window.
 the second column is set to 75% of the width of the
browser window.
 the document "frame_a.html" is put into the first
column, and the document "frame_b.html" is put into
the second column:
<frameset cols="25%,75%">
<frame src="frame_a.html" />
<frame src="frame_b.html" />
</frameset>
29
5.1 FRAMEs (not suppurted in HTML5!!!)
The HTML frame Element
FRAME attributes:

 NAME - identifies specific frame, enabling hyperlinks to load

in their intended frame

 TARGET attribute of A element

 <A HREF = “links.html” TARGET = “main”> - opens the
page in the frame which name is main.
 TARGET = “_self” loads page in the same frame as anchor
element
 TARGET = “_parent” loads page in the parent FRAMESET

 SRC - gives the URL of the page that will be displayed in

the specified frame
30
5.1 FRAMEs (not suppurted in HTML5!!!)
The HTML frame Element
FRAME attributes:

 SCROLLING - Specifies whether or not to display scrollbars

in a frame
 yes
 no - Set to "no" to prevent scroll bars.
 auto
 FRAMEBORDER - Specifies whether or not to display a
border around a frame
 1
 0
 NORESIZE - Specifies that a frame is not resizable
 If a frame has visible borders, the user can resize it by
dragging the border. To prevent a user from doing this,
you can add noresize="noresize" to the <frame> tag. 31
5.1 FRAMEs (not suppurted in HTML5!!!)
The HTML <noframes> tag

 Add the <noframes> tag for browsers that do not

support frames.
 It can contain all the HTML elements that you can find
inside the <body> element of a normal HTML page.
 The <noframes> element can be used to link to a non-
frameset version of the web site or to display a message
to users that frames are required.
 The <noframes> element goes inside the <frameset>
element.

32
5.1 FRAMEs (not suppurted in HTML5!!!)
How to use <noframes> tag

 for browsers that do not support frames

<html>

<head>
<title>...</title>
</head>

<frameset cols="25%,50%,25%">
<frame src="frame_a.html">
<frame src="frame_b.html">
<frame src="frame_c.html">

<noframes> Your browser does not handle frames! </noframes>

</frameset>

</html>

33
5.1 FRAMEs (not suppurted in HTML5!!!)
How to use <noframes> tag

 RESULT:

34
5.1 FRAMEs (not suppurted in HTML5!!!)
Nested <FRAMESET> Tags

 A FRAMESET may contain a nested FRAMESET and FRAME

elements. When a FRAMESET element is nested within
another FRAMESET element, it acts as a subframe.
<html>
<head><title>...</title></head>

<frameset cols="20%,80%">
<frame src="frame_a.html">

<frameset rows="80%,20%">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>

</frameset>
</html>
35
5.1 FRAMEs (not suppurted in HTML5!!!)
Nested <FRAMESET> Tags

 RESULT:

36
5.1 FRAMEs (not suppurted in HTML5!!!)
 Example for Nested Frames:

<HTML>
<HEAD></HEAD>

<FRAMESET COLS = "110,*">

<FRAME NAME = "nav" SCROLLING = "no" SRC = "nav.html">
<FRAMESET ROWS = "175,*">
<FRAME NAME = "picture" SRC = "picture.html" NORESIZE>
<FRAME NAME = "main" SRC = "main.html">
</FRAMESET>

<NOFRAMES>
<P>This page uses frames, but your browser doesn't support them.</P>
<P>Get Internet Explorer at the
<A HREF = "http://www.microsoft.com/">MicrosoftWebSite</A></P>
</NOFRAMES>
</FRAMESET>

</HTML>

37
5.1 FRAMEs (not suppurted in HTML5!!!)
 Result:

38
5.2 IFRAMEs
 iFrame is used to display a web page within a web page.
 Set Height and Width
 The height and width attributes are used to specify the
height and width of the iframe.
 The attribute values are specified in pixels by default, but
they can also be in percent (like "80%").

<iframe src="demo.html" width="200" height="200"></iframe>

 Remove the Border

 The frameborder attribute specifies whether or not to
display a border around the iframe.
 Set the attribute value to "0" to remove the border.

<iframe src="demo_iframe.html" frameborder="0"></iframe>

39
5.2 IFRAMEs
 Use iframe as a Target for a Link
 An iframe can be used as the target frame for a link.
 The target attribute of a link must refer to the name
attribute of the iframe:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="http://sct.emu.edu.tr/it/itec229" target="iframe_a">
ITEC 229</a></p>

40