CO1552 – Web Application Development

1. CO1552 – Web Application Development Lists, Special Characters, and Tables

2. Lists • There are two different types of lists within XHTML. • Ordered lists • numbered • and Unordered lists • those with a “bullet”, simply an icon or a dot next to the items. • Style sheets give us even more options regarding list styles.

3. Ordered list <ol> + <li> • An ordered list is numbered • We use a combination of tags to display an ordered list on the browser.<ol> <li>Number One</li> <li>Number Two</li> <li>Number Three</li></ol> • The <ol>…</ol> tag defines the section that is the ordered list. • The <li>…</li> tags define the list items to be displayed.

4. Unordered list <ul> +<li> • An unordered list is bulleted • Here we use a <ul>…</ul> tag instead.<ul> <li>This is a bullet point</li> <li>This is another bullet point</li></ul> • With unordered lists, we can alter the shape of the icon at the left hand side of the item by using CSS attributes

5. Special Characters • HTML is based around text only. • We use special characters to tell the browser that we are presenting instructions rather than text • for example the < > characters are special characters that inform the browser we are actually specifying a tag. • Within HTML, these special characters are reserved and have special meanings.

6. Less Than, More Than< … > • The less than and more than characters are used by HTML to represent a tag. • They are reserved and should not be used in plain HTML text. • For example,<strong> 4 < 10 and 10 > 2 = True </strong>will not display correctly. (you’ll see “4 2 = True”) • To output these characters in HTML, you should use the following,&gt; (greater than)&lt; (less than) • The example would be written correctly as,<strong> 4 &lt; 10 and10 &gt; 2 = True </strong>

7. Ampersand • The ampersand is used to let tell the browser that it is displaying a special character. • The ampersand is reserved, and requires a special character for itself. • For example,<em>John & Kate walked up a hill</em>should not be used. • To display an ampersand, use &amp;The above example would be correctly written as,<em>John &amp; Kate walked up a hill</em>

8. Other Characters • Quotation marks are properly used to surround values of attributes. • If you want to use a Quotation mark symbol directly in your web pages, you should use • &quot; • No matter how many times you have tried, browsers will ignore all white space that you insert in a HTML file. • If you had written the following HTML,John and KateIt would display in a web browser as,John and Kate • To insert spaces in a web page, you should use a non-breaking space.&nbsp; • Large amounts of extra space are better controlled through style sheet alignment and margin settings rather than by using lots of &nbsp; instructions.

9. HTML Tables • It is sometimes useful to display data in a tabular format.Facility Benefit Cost Computer faster data processing £700 • A table contains rows, columns and cells

10. Row • The shaded area is a row (there are three rows in total)

11. Column • The shaded area is a column (there are three columns in total)

12. Cell • The two shaded areas are two cells (there are 9 cells in total)

13. Table borders • A table has a “border” attribute • defines the number of pixels that are used to show the divisions between cells • can range from 0 upwards. • When the border attribute is equal to zero, the lines are not displayed.

14. Tables… • All of the facilities up to now can be written easily in HTML. • Using a combination of <table>, <tr> and <td> we can recreate each of the previous table scenarios. • When describing a table in HTML • we NEVER have to describe the number of columns that are to be displayed. • These are automatically calculated on our behalf by the browser.

15. Table Tag <table> • The <table> tag defines a table. • Within a table you must define table rows and table data (cells). • You use the <table> tag to define the start and end of a table, • use the <tr> tag to define the start and end of a row • and <td> tag to display any data within the table. • You CANNOT display anything within a table unless it is within a cell and a row.

16. Table Row Tag <tr> • Use the <tr> tag to tell the browser that you are inserting a row into the table. • You can only display <td> tags within a table row. • It is important to note that any attributes defined within a <tr> tag will define values across all cells within that row.

17. Table Data Tag<td>…</td> • A table data tag describes a cell • The table data tag is the real work-horse of HTML tables. • It is the only tag that will allow any item to be displayed within a table • anything outside of a <td> tag is displayed before or after the table.

18. Tables – Columns and Rows • XHTML will automatically calculate the number of columns in a table based on the number of cells within a row. • You must ensure that you have the same number of columns in each row. • If you don’t, then your table will not look as you wanted it to look …

19. Columns • <table border=”1”> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr></table> How many rows and how many columns?

20. Columns • <table border=”1”> <tr> <td rowspan=”2”></td> <td></td> </tr> <tr> <td></td> </tr></table> How many rows and how many columns? And how many cells on the rows?

21. Columns <table width="600" height=”200" border=”1”> <tr> <td width="20%" height="36">hello 1</td> <td width="80%”>hello 2</td> </tr> <tr> <td>hello 3</td> <td>hello 4</td> </tr> </table> How many rows and how many columns? And how wide and how high are the rows and cells?

22. Cellspacing & Cellpadding • These are attributes of the <table> tag. • Cellspacing specifies the space between cells, in pixels. • Cellpadding specifies the space between the cell border and the item within the cell, in pixels. • These attributes are intended to make it easier to read our tables, when they contain tabular data. • They are used in the same way margins are used.

23. Cellspacing and Cellpadding • It is possible to remove cellspacing and cellpadding altogether, by giving them a value of zero. • This will leave no gaps between cells or the items within the cells. • Cellspacing and cellpadding both have a default value of 2px, so you must specify a value of zero to achieve this result.

24. Table & Cell Widths • We can specify the width of a table either in terms of pixels or percentages. • If we use a percentage it is relative to the “thing” that contains the table tag. • For example if we define a table with 100% width • if the container of that table is the browser window • then the table will stretch across 100% of the browser window width. • However, if the container of the same table is a cell which is 200 pixels wide* • then that inner table will stretch for 100% of the width of the outer table cell • making the inner table 200 pixels wide.*you can nest tables inside other tables, so a table inside a cell is possible

25. Width • A table row will automatically take on the width of a table. • We can also specify the width of individual cells. • Be careful when specifying widths of individual cells • (next)>>

26. Width • For example, the following doesn’t entirely make sense: why?<table border=”1” width=”100%”><tr> <td width=”10”> <td width=”20”> <td width=”30”></tr></table> • Undefined numbers are interpreted as pixels: <td width=”10”> <td width=”20”> <td width=”30”> • If the table has automatically taken on the width of the user’s browser window, eg 800 pixels, • What is the browser to do with the 740 pixels that have not been defined in the table cells? 60 pixels

27. Column widths • It is also an important concept (and a difficult one) to understand that browsers will represent your columns down a table at the same width throughout • They follow the widths of the first row of cells

28. Tables for Formatting • One way of using tables is not to display “tabular data”, but to use table cells to help format the contents of the screen. • You can insert any XHTML element within a table cell, be it text, form elements, or images. • You have all seen web sites with a navigation bar on the top and the left, • and main text below on the right, • which is commonly done through the use of a table.

29. Maybe not … • Tables, particularly nested tables, can be very hard to navigate using only keyboard controls. Screen Readers, mostly older ones, are very poor at dealing with information which is presented in a side by side format. • Some people use browsers, such as Lynx, which linearize tables. When a table is used for layout, it is frequently the case that it is confusing or non-sensical when linearized: • Example:Wk Indicative content of lecturesTutorialsLabsWeb resources and notes issuedWk2Background to web – history, basic architecture, historical uses, DNS, FTP. Different uses made of the webThinking about using the Internet to find relevant informationPhotoshop exercise – building a roll-over button

30. Table headers • The intended function of the <table> tag (and its related tags) is to represent tabular data. • Tables used for formatting will probably not need table headers • Data tables on the other hand DO need table headers <th> • A table header is the top row • Identifies columns of similar information to devices such as screen readers • Default style sheet displays TH differently to TD

31. Exercise • Consider the layout of your assignment web page design • Will it be easy to create using a table? • Draw it on paper indicating all the cells you will need • Try creating a suitable layout in XHTML (preferably using Notepad, Textpad or the Dreamweaver code window only!)