5 Basic tables Rows and cells Borders Headings Alignment Captions Percentage widths There is more to cover – not this year
Tables Tables are defined with the tag A table is divided into rows (with the tag), and each row is divided into data cells (with the tag) The letters td stands for "table data," which is the content of a data cell A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
9 Table borders If you do not specify a border attribute the table will be displayed without any borders Sometimes useful, but most of the time, you want the borders to show, at least during design. Table with a one pixel border Table with a fat border Table with no border
10 Table Headings Headings in a table are defined with the tag. Heading Another Heading row 1, cell 1 row 1, cell 2 Centred and bold
11 Alignment Within Tables My Grades January February Computing Concepts A How many rows? How many columns?
12 Table Captions Years Level C Level I Level H
13 Empty Cells Borders around empty table cells are missing To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders visible: A B C Empty cell filled with a non breaking space
14 Percentage widths A B C D What will this look like in a browser?
15 Table Review 1 Creates a table Creates a row Creates a cell Creates a header, centred and bold Creates a caption
16 Table Review 2 Attributes width align border There are more but not just yet
17 Draw this My Grades January February Computing Concepts A
Forms A form is an area that can contain form elements Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form A form is defined with the tag input elements
Form Structure A form is made up of four separate elements: Labels Boxes for entering text Option blocks check boxes radio buttons menus Buttons
Form Elements Text fields Text fields are used when you want the user to type letters, numbers, etc. in a form Radio Buttons Radio Buttons are used when you want the user to select one of a limited number of choices Check Boxes Checkboxes are used when you want the user to select one or more options of a limited number of choices.
Processing the Form A form is a means of collecting information The information needs to be processed A form uses the Action attribute to point to a script or program that will process the information The Method attribute works in conjunction with the Action attribute to specify how information is sent to the server
Action Attribute & the Submit Button When the user clicks on the "Submit" button, the content of the form is sent to the server. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.
29 What next? Cascading Style Sheets HTML assignment, at least 4 linked pages A list 2 images Table Colour and formatting Links Comments To get a higher mark you have to research beyond the course handouts and can demonstrate a wider knowledge of the use of HTML and demonstrate its effective use in our web pages
30 Further Reading Tutorial – highly recommended http://www.w3schools.com/html/ Reference http://www.w3.org/MarkUp/ Beginners book Mac Bride, Teach Yourself HTML Publishing on the World Wide Web (Teach Yourself) January 2003;Hodder Arnold Teach Yourself; ISBN: 0340859555,