Download presentation
Presentation is loading. Please wait.
Published byBruce Clark Modified over 9 years ago
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
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.