1. Web Technologies COMP6115 Session 2: Planning, Designing, Constructing and Testing Static Web Sites Dr. Paul Walcott Department of Computer Science, Mathematics and Physics University of the West Indies, Cave Hill Campus Barbados 29/11/06 © 2006/2007 Dr. Paul Walcott

2. Constructing Web Pages So far we have only constructed a simple Web page So far we have only constructed a simple Web page In order to construct a more complicated Web page we need to learn some more XHTML elements. In order to construct a more complicated Web page we need to learn some more XHTML elements. In this section we will look at: In this section we will look at: –,,,,,,,, –,,,,,,,, Also see the following Web sites: http://www.zvon.org/xxl/xhtmlReference/Output/index.html http://www.w3schools.com/tags/default.asp Also see the following Web sites: http://www.zvon.org/xxl/xhtmlReference/Output/index.html http://www.w3schools.com/tags/default.asp http://www.zvon.org/xxl/xhtmlReference/Output/index.html http://www.w3schools.com/tags/default.asp http://www.zvon.org/xxl/xhtmlReference/Output/index.html http://www.w3schools.com/tags/default.asp

3. Constructing Web Pages (Cont’d) Bold Function Function –Renders as bold text An XHTML 1.0 Code Example An XHTML 1.0 Code Example This text is bold This text is bold Things to Note Things to Note –Although this is valid XHTML 1.0 you should really use styles sheets instead Most browsers will render the tag in bold anyway Most browsers will render the tag in bold anyway –The BOLD element is not a child of the BODY element – it is a child of DIV though

4. Constructing Web Pages (Cont’d) Strong Function Function –Renders as strong emphasised text An XHTML 1.0 Code Example An XHTML 1.0 Code Example This is strong text This is strong text Things to Note Things to Note –Most browsers will render the tag in bold –The BOLD element is not a child of the BODY element – it is a child of DIV though

5. Constructing Web Pages (Cont’d) Italics Function Function –Renders as italics text An XHTML 1.0 Code Example An XHTML 1.0 Code Example This text is in italics This text is in italics Things to Note Things to Note –Although this is valid XHTML 1.0 you should really use styles sheets instead Most browsers will render the tag (emphasise) in italics anyway Most browsers will render the tag (emphasise) in italics anyway –The BOLD element is not a child of the BODY element – it is a child of DIV though

6. Constructing Web Pages (Cont’d) Emphasise Function Function –Emphasises text An XHTML 1.0 Code Example An XHTML 1.0 Code Example This text is emphasised This text is emphasised Things to Note Things to Note –Most browsers will render this tag as italics –The BOLD element is not a child of the BODY element – it is a child of DIV though

7. Constructing Web Pages (Cont’d) Paragraph Function Function –Specifies a paragraph An XHTML 1.0 Code Example An XHTML 1.0 Code Example This is a paragraph This is a paragraph Things to Note Things to Note –This element is separated from other elements by a vertical break

8. Constructing Web Pages (Cont’d) PreFormat Function Function –Specifies pre-formatted text An XHTML 1.0 Code Example An XHTML 1.0 Code Example This text is on the first line This text is on the first line This text is on the second line This text is on the second line and, this text is on the third line and, this text is on the third line

9. Constructing Web Pages (Cont’d) PreFormat Things to Note Things to Note –Line breaks and spaces embedded in text with tags are normally preserved –A fixed pitch font is normally used –Is a child of the tag

10. Constructing Web Pages (Cont’d) Horizontal Rule Function Function –Inserts a horizontal rule/line An XHTML 1.0 Code Example An XHTML 1.0 Code Example Things to Note Things to Note –This tag must be closed

11. Constructing Web Pages (Cont’d) Anchor Tag Function Function –Defines an anchor; creates a bookmark within a document or a hyperlink to another document An XHTML 1.0 Code Example An XHTML 1.0 Code Example Section 1 Section 1 … Link to Section 1 Link to Section 1 Go to Google Go to Google http://www.google.com

12. Constructing Web Pages (Cont’d) Tables Function Function –Creates a table An XHTML Code Example An XHTML Code Example – – row 1, col 1 row 1, col 2 row 2, col 1 row 2, col 2 row 1, col 1 row 1, col 2 row 2, col 1 row 2, col 2

13. Constructing Web Pages (Cont’d) Tables Things to note Things to note –Tables may be nested –The table element is a child of the body element Optional attributes for the tag Optional attributes for the tag –Cellspacing – specifies the spacing in pixels between adjacent cells –Cellpading – specifies the spacing in pixels between the contents of a cell and the cell border

14. Constructing Web Pages (Cont’d) Tables Optional attributes for the tag (Cont’d) Optional attributes for the tag (Cont’d) –Width – sets the width of the table The width of a cell may be expressed as a number of pixels or a % of the screen’s width The width of a cell may be expressed as a number of pixels or a % of the screen’s width –Border – specifies the size of the border in pixels, a value of 0 means that there is no border

15. Constructing Web Pages (Cont’d) Tables Attributes for the tag Attributes for the tag –Rowspan – allows cells in adjacent rows to be merged –Colspan – allows cells in adjacent columns to be merged –Valign – sets the vertical alignment of the cell –Align – sets the horizontal alignment of the cell contents

16. Constructing Web Pages (Cont’d) Since tables are so important (they are widely used on the Web today) it is important to get a good grasp of them Since tables are so important (they are widely used on the Web today) it is important to get a good grasp of them We will achieve this through an extensive set of examples We will achieve this through an extensive set of examples

17. Constructing Web Pages (Cont’d) In our first example a simple table without a border is created In our first example a simple table without a border is created Notice how we use indentation in the XHTML code to make it easier to distinguish between the rows and the columns Notice how we use indentation in the XHTML code to make it easier to distinguish between the rows and the columns On our screenshot the code is in the left window, while the rendered XHTML is in the right window On our screenshot the code is in the left window, while the rendered XHTML is in the right window

18. Constructing Web Pages (Cont’d)

20. In our next example, we use the border attribute of the tag to give the table a border In our next example, we use the border attribute of the tag to give the table a border Constructing Web Pages (Cont’d)

22. In our next example we increase the number of pixels between the contents of the cell and the cell border In our next example we increase the number of pixels between the contents of the cell and the cell border This is achieved using the cellpadding attribute of the tag This is achieved using the cellpadding attribute of the tag Constructing Web Pages (Cont’d)

24. In our next example we increase the number of pixels between adjacent cells In our next example we increase the number of pixels between adjacent cells This is achieved using the cellspacing attribute of the tag This is achieved using the cellspacing attribute of the tag Constructing Web Pages (Cont’d)

26. Sometimes we want a cell in a table to span more than one cell Sometimes we want a cell in a table to span more than one cell This is achieved through the colspan attribute which merges adjacent horizontal cells This is achieved through the colspan attribute which merges adjacent horizontal cells The value this attribute is set to determines the number of cells that are merged The value this attribute is set to determines the number of cells that are merged See our example See our example Constructing Web Pages (Cont’d)

28. We can set the horizontal alignment of the contents of a cell through the use of the align attribute as shown in our next illustration We can set the horizontal alignment of the contents of a cell through the use of the align attribute as shown in our next illustration Constructing Web Pages (Cont’d)

30. Not only can we merge cells horizontal, we can also do it vertically Not only can we merge cells horizontal, we can also do it vertically This can be seen in our next example This can be seen in our next example –Notice the use of the rowspan attribute In addition this example demonstrates how vertical align is achieved through the use of the valign attribute In addition this example demonstrates how vertical align is achieved through the use of the valign attribute Constructing Web Pages (Cont’d)

32. If you need to change the height or width of a cell you should use cascading style sheets If you need to change the height or width of a cell you should use cascading style sheets An interesting occurs when a given cell is left blank An interesting occurs when a given cell is left blank –the given cell will not have a border To solve this problem simply add a non- breaking space (i.e. ) To solve this problem simply add a non- breaking space (i.e. ) Constructing Web Pages (Cont’d)

33. Special Characters In HTML special characters, called character entities, are represented in two possible ways: In HTML special characters, called character entities, are represented in two possible ways: – &code; – &#number; A list of some of the popular special characters have been presented below A list of some of the popular special characters have been presented below Constructing Web Pages (Cont’d)

34. Code Special Character A non-breaking space << >> ¼¼ & or & & "“ ©© &apos;‘ Constructing Web Pages (Cont’d)

35. References [1] Darnell, Rick, et al., “HTML4: Unleased”, Sams.net Publishing, First Edition, 1997 [2] Deitel, H., Deitel, P., Nieto, Frank, L., Lin, Ted, M., Sadhu, Praveen, “XML: How to Program”, Prentice-Hall Inc., 2001