computing concepts advanced html: tables and forms
Post on 20-Dec-2015
227 Views
Preview:
TRANSCRIPT
Computing Concepts
Advanced HTML: Tables and Forms
2
Contents
Tables Forms
3
Why use Tables?
For tabular data Price list
For layout Used extensively for layout, not
covered today
The Basic Table
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 <table> tag A table is divided into rows (with the
<tr> tag), and each row is divided into data cells (with the <td> 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.
7
Tables
<table border="1"> <tr>
<td>row 1, cell 1</td> <td>row 1, cell 2</td>
</tr> <tr>
<td>row 2, cell 1</td> <td>row 2, cell 2</td>
</tr> </table>
8
Example
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 border="1">
Table with a fat border<table border="10">
Table with no border<table border=“0">
10
Table Headings
Headings in a table are defined with the <th> tag.
<table border="1"> <tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr> <td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
</table>
Centred and bold
11
Alignment Within Tables
<table > <tr> <th align="left">My Grades</th> <th align="right">January</th> <th align="right">February</th> </tr> <tr> <td align="left">Computing Concepts</td> <td align="right">A</td> <td align="right">A</td> </tr></table>
How many rows?How many columns?
12
Table Captions
<table><caption> Years </caption><tr> <td> Level C </td> <td> Level I </td> <td> Level H </td></tr></table>
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:
<table border="1"> <tr>
<td>A</td> <td>B</td> </tr> <tr>
<td>C</td> <td> </td> </tr>
</table> Empty cell filled with a non breaking space
Empty cell filled with a non breaking space
14
Percentage widths
<table width=“70%” >
<tr>
<td width=“50%”>A</td><td>B</td>
</tr>
<tr>
<td>C</td><td>D</td>
</tr>
</table>
What will this look like in a browser?
What will this look like in a browser?
15
Table Review 1
<table></table> Creates a table<tr></tr> Creates a row<td></td> Creates a cell<th></th> Creates a header, centred and bold<caption> </caption> Creates a caption
16
Table Review 2
Attributes width
align
border
There are more but not just yet
17
Draw this
<table width=“90%” border=“2”> <tr> <th width=“50%”>My Grades</th> <th>January</th> <th>February</th> </tr> <tr> <td align="left">Computing Concepts</td> <td align="right">A</td> <td align="right"> </td></tr></table>
18
Answer
19
Add Another Row
<table width=“90%” border=“2”> <tr> <th width=“50%”>My Grades</th> <th>January</th> <th>February</th> </tr> <tr> <td align="left">Computing Concepts</td> <td align="right">A</td> <td align="right"> </td></tr></table>
Write the code to add another row to this table
20
Another Row
<table width=“90%” border=“2”> <tr> <th width=“50%”>My Grades</th> <th>January</th> <th>February</th> </tr> <tr> <td align="left">Computing Concepts</td> <td align="right">A</td> <td align="right"> </td></tr><tr> <td align="left">PDP</td> <td align="right">Pass</td> <td align="right">Missed my tutor, Failed</td></tr></table>
Tip: Copy and Paste a row and change the content
Forms
Forms
A method of interaction between the user and a web site
HTML tags are used to build the interface and controls
CGI or Javascript technologies are used to process the form information
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 <form> tag
<form>
input elements
</form>
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.
Form Example
<form name="input“ action="html_form_submit.asp" method="get">
First name:<input type="text" name="firstname" /><br />Last name:<input type="text"name="lastname" />
</form>
29
What next?
Cascading Style SheetsHTML 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,
31
Questions?
top related