IS1824: Introduction to Internet Multimedia Lecture 5: Layout in HTML Rob Gleasure [email protected] .

IS1824: Introduction to Internet MultimediaLecture 5: Layout in HTML

Rob Gleasure

[email protected]://girtab.ucc.ie/rgleasure/index.html

IS1824

Today’s lecture Layout

Tables Lists

Exercise

Before we go any further…

As the year goes on, we will make a significant number of web pages keeping track of individual pages gets quite difficult

Ensure that you have a folder on your PC/USB/whatever for all is1811 class work Inside that folder, create a new folder to save the pages and files

created in each class, e.g. ‘lecture5’ or ‘2nd Nov’

Back up your is1811 folder and any other ongoing coursework regularly. The odds are very high at some point over the next two years that, if you don’t back up your work, you will lose important work at some point

Tables in HTML

A commonly used means of breaking up a HTML page is to use Tables

Tables are defined with the <table> tag.

A table is divided into rows with the <tr> tag

Each row is divided into data cells with the <td> tag The letters td stands for "table data,“ A data cell can contain text, images, lists, paragraphs, forms,

horizontal rules, tables, etc.

Tables in HTML

Rows

Columns

Cells

Tables in HTML

Why would we use tables? We can divide up our whole page into manageable sections,

such as margins, headers, footers, navigation bars, etc.

Tables in HTML

Lets try out some basic html for a table

<html> <head>

<title>Lecture 5</title> </head> <body>

<h1 align = “center”> Tables in HTML </h1><table border="1">

<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>

</table></body>

</html>

Tables in HTML

The Border attribute If you do not specify a border attribute the table will be

displayed without any borders. Sometimes this can be useful, but you may want the borders to

show. To display a table with borders, you will have to use the

border attribute:<table border="1”>

Empty cells in a table To avoid weird things happening with empty cells, we will

include a non-breaking space

Tables in HTML

Headings in a table are defined with the <th> tag.

<html> <head>

<title> Lecture 5</title> </head> <body>

<h1 align = “center”>Tables in HTML</h1><table border="1">

<tr> <th>Heading</th> <th>Another Heading</th> </tr>

<tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td>

</tr> <tr> <td>row 2, cell 1</td>


</table></body>

</html>

Tables in HTML

Some attributes of note valign

Stands for Vertical align, in our previous example we set valign = “top”. This means that content will be aligned with the top of the row.

Valign can have the values top, middle, bottom or baseline.

align Content can be aligned left, right, or center

Tables in HTML

Columns The <col> tag sets the properties for each column in a table. It come after the table opening tag, but before any rows have

been begun It can be very important to make proper use of the <col> tag

when using tables

Tables in HTML

Columns We can set things like the alignment and width of all the cells in a

column using the <col> tag We can also use the span attribute to specify that we want to

effect more than one column, for example, if we wanted to have the 2nd and 3rd columns to be identical we could first specify the attributes for the 1st column, i.e.

<col width = “20%”>

And then include the following<col span = “2” width = “40%”>

Tables in HTML

Try inserting the following line into the code we tried out from slide 9

<html> <head>

<title> Lecture 5</title> </head> <body>

<h1 align = “center”>Tables in HTML</h1><table border="1">

<col width=“25%”><col width=“25%”> <tr> <th>Heading</th>

<th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td>

<td>row 1, cell 2</td></tr> <tr> <td>row 2, cell 1</td>


</table></body>

</html>

Lists in HTML

HTML supports ordered, unordered and definition lists:

1. Unordered Lists An unordered list is a list of items. The list items are

marked with bullets (typically small black circles). An unordered list starts with the <ul> tag. Each list item

starts with the <li> tag.

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

Lists in HTML

2. Ordered Lists An ordered list is also a list of items. The list items are

marked with numbers. An ordered list starts with the <ol> tag. Each list item starts

with the <li> tag.

<ol> <li>Coffee</li> <li>Milk</li>

</ol>

Lists in HTML

3. Definition Lists A definition list is not a list of items. This is a list of terms

and explanation of the terms. A definition list starts with the <dl> tag. Each definition-list

term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

Exercise

Create a new page called tables.html On this page, create a new table

Give this table 2 rows Give this table 3 columns Use the <col> tag to set the width of the first (left hand) column as

25%, the width of the second (middle) column as 50% and the third (right) column as 25%

Set the text that appears on the tab of the browser as lecture 5 exercise

Create a heading (h1) in the middle cell of the top row containing the text Learning to use tables

Align the text (including the heading) in the top-centre cell to be centred

Add a medium heading (h3) to the centre column on the bottom row containing the text The centre cell…

Exercise

Add a small heading (h5) to the first column of the second row with the text Reasons we use tables

Create an unordered list in the first column of the second row with the following items

To provide a structure to the page visually To group sections of a page together To allow formatting to be applied to whole sections of a page

en masse Add the following text as a paragraph (using the <p> tag) to the

second column of the second row

When tables are used to format a page, this area is usually prime ‘real estate’. Traditionally, in a 3 column layout, the left hand column will be used to provide links or navigation to other parts of the site/related pages and the right hand column (if it exists) will be used for less important content. This area is for content which designers wish to expose users to for prolonged periods of time.

Exercise

You should get a page that ends up looking like this

Try setting the border of the table in your page to be =“1”

IS1811

Next week Hypertext links in HTML Incorporating images into HTML

Want to read more?

Fairly exhaustive list of HTML table attributes http://www.w3.org/TR/html401/struct/tables.html

HTML table tutorials http://www.w3schools.com/html/html_tables.asp http://www.tizag.com/htmlT/tables.php http://www.quackit.com/html/html_table_tutorial.cfm

IS1824: Introduction to Internet Multimedia Lecture 5: Layout in HTML Rob Gleasure [email protected] .

Documents