1 / 21

CMPC1M01 Computing Systems 1 More HTML: tables and forms

CMPC1M01 Computing Systems 1 More HTML: tables and forms. Outline. Sizes of things in HTML Tables (basics). Why sizes matter. Sizes can be specified as fixed relative Relative sizes change with screen, font etc., so the layout is preserved Fixed sizes assume a certain size of display.

zack
Download Presentation

CMPC1M01 Computing Systems 1 More HTML: tables and forms

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CMPC1M01 Computing Systems 1More HTML: tables and forms

  2. Outline • Sizes of things in HTML • Tables (basics)

  3. Why sizes matter • Sizes can be specified as • fixed • relative • Relative sizes change with screen, font etc., so the layout is preserved • Fixed sizes assume a certain size of display

  4. Sizes of things • HTML allows sizes to be specified in several ways • Absolute units: point, pixels, cm, … • size=“12pt”, height=“34px”, border=“2.5mm”, … • Relative to the display • width="30%”, … • In relative units: the em • em is the width of lowercase m in the current fontpadding="0.5em”, …

  5. Tables • Tables are used to display tabular information • Since HTML parsers ignore whitespace, tables were used in old versions of HTML to control layout • Tables start with an outer <table> tag • A table consists of rows defined with the <tr> tag • Each row is a series of cells, defined with the <td> tag • Say we wanted two columns of bulleted lists…

  6. Tables contd. • Table attributes • width and height control the dimensions of the table, these are usually best specified as a percentage of the browser window • cellpadding is the padding between the cell border and the content • cellspacing is the spacing between adjacent cells • border is the thickness of the table bordersall best specified as ems • If a cell is not defined, it is classed as empty and has no border

  7. This is all formatting – we’ll see how to do it properly later on…

  8. Tables contd. • The <th> tag can be used to define table headers (centres text and applies the bold style) • note, that it is applied to the cells, not the row • The align attribute can be applied to rows, <tr>, and cells, <td> • left, right, center, justify • The valign attribute can be applied to rows • top, middle, baseline, bottom

  9. Tables contd. • Tables, as with other tags, can be nested • Cells can be merged using • rowspan to specify that a cell (td/th) spans multiple rows • colspan to specify that a cell (td/th) spans multiple columns

  10. Structuring pages: div and span • The <span> tag is used to identify blocks of text – such as parts of a paragraph - which can be formatted in some way • The <div> tag is used to identify groups of elements which are to be treated together, particularly to structure the overall layout of a page • there’s a lot more to div tags than we will cover…

  11. Frames • Frames can be used to split the contents of the browser window • much better formatting now available • mentioned only because they have been widely used • Frame syntax • <frameset> defines the structure of the window splits • <frame src="…"> lists the frame contents • framesets can be nested and head/body tags not required • Deprecated • not part of XHTML • not part of HTML5

  12. Forms • The <form> tag defines an HTML form which can collect input from the user and send back to the server • can include formatting tags, text and browser input controls • The method parameter determines how the data is sent to the server • GET: form data is appended to the action URL forming a query string, e.g. processform.jsp?name=1M01&year=2010 • POS: form data is included in the HTTP headers when the action URL page is requested • The action parameter determines where the data is sent, and hence how a server will decide how to process the data • send to another web page to process, this may include saving to a database or performing calculations • email data using address

  13. Forms – Input controls • Text box • <input type="text"> • specify name and size (in characters) • use the value attribute to specify a default value • Submit button • used to submit the form data (according to action in <form>) • <input type="submit"> • specify name and value (button label) • Reset button • resets the data in the form to the default values • specify name and value (button label) • Check box • specify name and value to be sent to server if checked • box is checked using the checked attribute

  14. Forms – Input controls • Text area • specify name, number of rows and number of cols • text between start/end tags is the value submitted to server • Radio/Options control • <input type="radio"> • specify name, buttons are grouped together using this value • used checked attribute to select default value • the value attribute is the value submitted to the server • the <input> tag only defines the radio button, the text for each button is specified by normal HTML

  15. Forms – Input controls • Lists <select> • specify nameand size • if size = 1, list becomes a drop-down list (combo-box) • if size > 1, list is a normal list box • add multiple attribute to allow multiple selections • List value <option> • text between tag define what appears in list, by default this is the value of the option • to override the value sent to the server, use the value attribute • use the selected attribute to set the default value(s)

More Related