is1824: introduction to internet multimedia lecture 5: layout in html rob gleasure [email protected]
TRANSCRIPT
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>
<td>row 2, cell 2</td></tr>
</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>
<td>row 2, cell 2</td></tr>
</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