Presentation is loading. Please wait.

Presentation is loading. Please wait.

BSc CM0133 Internet Computing 1 Tables Tables provide a means of organising the layout of data A table is divided into rows and columns: these specify.

Similar presentations


Presentation on theme: "BSc CM0133 Internet Computing 1 Tables Tables provide a means of organising the layout of data A table is divided into rows and columns: these specify."— Presentation transcript:

1 BSc CM0133 Internet Computing 1 Tables Tables provide a means of organising the layout of data A table is divided into rows and columns: these specify the cells of the table Cells can contain text, images, links, other tables... Tables can also be used for organising the layout of the web page itself.

2 BSc CM0133 Internet Computing 2 Tables main element table row table header table data Name Course Year A B Morgan Fishing 5 D P Jones Sailing 8

3 BSc CM0133 Internet Computing 3 Tables main element table row table header table data Name A B Morgan D P Jones Course Fishing Sailing Year 8 5

4 BSc CM0133 Internet Computing 4 Rows and Columns Cells can span multiple columns and multiple rows with the colspan and rowspan attributes Name Course Year A B Morgan Fishing 5 D J Jones Sailing 8

5 BSc CM0133 Internet Computing 5 The align and width attributes The align attribute determines the position of the text within a cell The width attribute determines the width of the row relative to the table Name Course Year Last Init. Morgan AB Fishing 5

6 BSc CM0133 Internet Computing 6 Table attributes align alignment relative to the page width in pixels or percentage of page width border - width of border (pixels) cellspacing separation between cells (pixels) cellpadding - space around data inside cell (pixels) bgcolor - background colour (inside cells) Furthermore The element puts a title above the table

7 BSc CM0133 Internet Computing 7 Table attributes Course Data Name Course Year A B Morgan Fishing 5

8 BSc CM0133 Internet Computing 8 Page formatting cats dogs butterflies This piece of text illustrates the idea of placing two columns of information in a web page... Note also that there is no border in this table. Tables can be used to organise the layout of the web page itself

9 BSc CM0133 Internet Computing 9 Frames and Framesets A frameset partitions a web browser window so that multiple web documents can be displayed simultaneously. Example application: To maintain a permanently visible directory of links within your site, while also displaying one or more selected documents from the site. –otherwise the directory of links must appear on every page, and this scrolls up with the page Note: framesets can cause problems for bookmarking and for "screen readers" (for visually-impaired users)

10 BSc CM0133 Internet Computing 10 Framesets The frameset element replaces the body element frameset has attributes cols or rows, defined in terms of pixels, percentage(%) or unspecified (*) –this splits the window into two or more columns or rows Frames 1

11 BSc CM0133 Internet Computing 11 Frame attributes The name attribute uniquely identifies the frame. It may be used as the target in an anchor ( ) element The src attribute specifies the web page to be placed in the frame initially (it may subsequently be overwritten) The scrolling attribute ( "auto", "yes", "no" ) specifies whether the frame is to have scroll bars The frameborder attribute ( "0", "1" ) specifies whether the frame is to have a border

12 BSc CM0133 Internet Computing 12 navigation.html The anchor tag has a target attribute –takes the name of the frame used to display the information All anchors below are targeted to the " mainF " frame Navigation Bar HTML Course Paragraphs Headings Unordered lists Ordered lists Nested lists Home

13 BSc CM0133 Internet Computing 13 intro.html A simple document which is initially placed in the " mainF " frame This is replaced when a user clicks on a link in the " navF " frame Internet Computing Welcome to the HTML Course Please select the subject of...

14 BSc CM0133 Internet Computing 14 Nested framesets Frames 2

15 BSc CM0133 Internet Computing 15 Noframes Frames 1 Something here for browsers not supporting frames Some browsers cannot process frames. Alternative content should be provided using the noframes element

16 BSc CM0133 Internet Computing 16 Forms Forms are user interfaces for data input Main application: to provide user input for –programs and databases located on a web server –local (client-side) scripts associated with the form Server-based programs may return data to the client as a web page Client-side scripts can read input data –To validate the data, prior to sending to server –To use in local processing which may output web page content that is displayed on the client

17 BSc CM0133 Internet Computing 17 Example applications Questionnaires to provide feedback on a web site e-commerce, to enter name, address, details of purchase and credit-card number –request brochures from a company –make a booking for holiday, cinema etc. –buy a book, cd, etc –obtain a map giving directions to a shop Run a database query and receive results (an important part of e-commerce)

18 BSc CM0133 Internet Computing 18 Input types text checkbox radio (buttons) select (options) textarea password button submit reset hidden file image

19 BSc CM0133 Internet Computing 19 The method and action attributes Tell us what you think The method attribute specifies the way that form data is sent to the server program –GET appends the data to the URL –POST sends the data separately The action attribute specifies a server program (e.g. a perl program.pl extension) that processes the form data Can also send an

20 BSc CM0133 Internet Computing 20 The input element: type="text " Tell us what you think Name Address The type attribute specifies the type of user input The name attribute gives an identifier to the input data The size attribute specifies the length of the input field The value attribute specifies an initial value for the text (optional)

21 BSc CM0133 Internet Computing 21 The input element: type="checkbox " How did you hear about this web site? A friend Search engine The name attribute is used to define a set of checkboxes The value attribute identifies the individual checkbox If the checked attribute is set the box is initially checked

22 BSc CM0133 Internet Computing 22 The input element: type="radio " Radio buttons are similar to checkboxes, but only one can be selected To select a button by default, use the checked attribute (for one button only) How did you hear about this web site? A friend Search engine

23 BSc CM0133 Internet Computing 23 The input element: type="button " Do you want to receive any further information: The name attribute uniquely identifies a button The value attribute gives a label to the button Actions can be associated with buttons- more later

24 BSc CM0133 Internet Computing 24 The input element: type="submit/reset" Thank you type="submit" –clicking this button sends the form data to the program (URL) specified in the action attribute of the form type="reset" –clicking this button clears all data entered so far

25 BSc CM0133 Internet Computing 25 The input element: type="password/file/hidden" type="password" –similar to type="text" except that the input is echoed with asterisks (so not visible) type="file" –provides a file dialogue box to specify a file that is sent to the server type="hidden" –similar to text input, but the value attribute is used to specify data that is to be sent to the server. Nothing appears on the screen. –The data might be set by a server program to keep track of the details of a particular transaction.

26 BSc CM0133 Internet Computing 26 The textarea element Used for multi-line text input The size of the input area is specified with the cols and rows attributes Any text placed inside the element appears in the input area (this can be deleted). Please write your comments: put text here

27 BSc CM0133 Internet Computing 27 The select element How do you rate this site? Good Bad Ugly The select element provides a menu of options An option can be selected by default using the selected attribute (otherwise the first in the list is initially selected)


Download ppt "BSc CM0133 Internet Computing 1 Tables Tables provide a means of organising the layout of data A table is divided into rows and columns: these specify."

Similar presentations


Ads by Google