1. IS1824: Introduction to Internet Multimedia Lecture 5: Layout in HTML Rob Gleasure R.Gleasure@ucc.ie http://girtab.ucc.ie/rgleasure/index.html

2. IS1824 Today’s lecture  Layout Tables Lists  Exercise

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

4. Tables in HTML A commonly used means of breaking up a HTML page is to use Tables Tables are defined with the tag. A table is divided into rows with the tag Each row is divided into data cells with the tag  The letters td stands for "table data,“  A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

5. Tables in HTML Rows Columns Cells

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

7. Tables in HTML Lets try out some basic html for a table Lecture 5 Tables in HTML row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

8. 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: Empty cells in a table  To avoid weird things happening with empty cells, we will include a non-breaking space

9. Tables in HTML Headings in a table are defined with the tag. Lecture 5 Tables in HTML Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

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

11. Tables in HTML Columns  The 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 tag when using tables

12. Tables in HTML Columns  We can set things like the alignment and width of all the cells in a column using the 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 2 nd and 3 rd columns to be identical  we could first specify the attributes for the 1 st column, i.e. And then include the following

13. Tables in HTML Try inserting the following line into the code we tried out from slide 9 Lecture 5 Tables in HTML Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

14. 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 tag. Each list item starts with the tag. Coffee Milk

15. 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 tag. Each list item starts with the tag. Coffee Milk

16. 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 tag. Each definition-list term starts with the tag. Each definition-list definition starts with the tag. Coffee Black hot drink Milk White cold drink

17. 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 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…

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

19. 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”

20. IS1811 Next week  Hypertext links in HTML  Incorporating images into HTML

21. Want to read more? Fairly exhaustive list of HTML table attributes  http://www.w3.org/TR/html401/struct/tables.html http://www.w3.org/TR/html401/struct/tables.html HTML table tutorials  http://www.w3schools.com/html/html_tables.asp http://www.w3schools.com/html/html_tables.asp  http://www.tizag.com/htmlT/tables.php http://www.tizag.com/htmlT/tables.php  http://www.quackit.com/html/html_table_tutorial.cfm http://www.quackit.com/html/html_table_tutorial.cfm