17/10/11
2 The form element ( ) is used to include a number of form elements together so that they can be referenced by some other code in order to read information from the user The individual form elements are implemented using the tag and its type attribute
3 Textboxes ( ) Checkboxes ( ) Radio Buttons ( ) Buttons: ( )
4 Password Textboxes ( ) Submit Buttons ( ) Reset Buttons ( )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> Type your first name: Type your last name: If you click the "Submit" button, you will send your input to a new page called newpage.html. 5
6 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Using the form Tag with the <!-- For readability of this example we will exclude the meta tags --> Forms Using the <form> tag and the <input /> tag Your Name: Your Password: Indicate your favorite color: Blue Red Choose one or more of the following:
7
8 textarea element allows larger blocks of text to be submitted The textarea element uses the tags use the rows and cols attributes to set the size of the textarea
9 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Using the textarea tag Forms Using the <textarea> Input your Comments: Some default Content </body
10
11 set the height of the text area by setting the rows attribute and set the width by setting the cols attribute default content to appear in your text area, you place it between the open ( ) and close ( ) tags
12 If you are thinking of using a form on your page, make sure that it is absolutely necessary Never nest forms within forms
Sometimes a textbox is not suitable Use a list box List box has two tags The select tag indicates that a list box will be created. The option tag represents a unique choice for the list box. has two main properties: name and size. 13
Ireland United Kingdom 14
Apple Orange Pear Plum 15
Name as per textfield Size indicates how many items are shown at one time The value which uniquely identifies each of the option The text after the is what the user will see 16
Useful for recording user opinions/preferences Not mutually exclusive Created with an Input Tag Type=checkbox Can group checkboxes by giving them all the same name Value property must be unique The value property is what the processing script will receive Label for the Checkbox is denoted by the text that follows the input tag checked=“checked” 17
My interests: Reading Singing 18
Allow one or no options to be selected from a group of options. The name of the button group are kept the same but keep the value for each button different. Type=Radio 19
Male: <input type="radio" checked="checked" name="Sex" value="male“ /> Female: <input type="radio" name="Sex" value="female“ /> Example 20
To include a table use the tags For each row we need a set of tags where the tr stands for table row Each cell within our table can be implemented using either (table header) tags or (table data) tags The tags will, by default, render their content in bold writing and will align their content to the center Use these to give a column in your table a heading 21
tags will render their content normally, without any emphasis on the text or change to the alignment unless specified Tables can also have a caption to describe what they are supposed to be holding information - tags These align the text to the center, but do not place any emphasis on the text 22
Introduction to Tables Introduction to Lists Unordered lists: have discs as the bullet points for each list item allow the user to see a list of items make the contenteasier to understand by structuring the important points 23
Ordered Lists - three reasons for using them They give order to your list items You can use them for "Top Ten"lists They can be used to create "Tables of Content" 24
25
Use the align attribute of the tag to change the position of the table on the page Use the align attribute of the (or ) tag to change the alignment of the content of your table cells 26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Changing table alignment Advanced Tables Changing the Alignment of the Table and Table Data Default <th> Alignment Left <th> Alignment Right <th> Alignment Center <td> Alignment Default <td> Alignment Right <td> Alignment 27
28
When we want to have a cell in one row spanning a number of columns in another row we use the colspan attribute The colspan attribute takes a numeric value equal to the number of columns you want your cell to span 29
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Using COLSPAN Advanced Tables Using Colspan Row1, Cell1 Row1, Cell2 Row2, Cell1 30
31
The rowspan attribute is used when you want a cell to span a number of rows Its use is very similar to the use of the colspan attribute 32
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Using Rowspan <!-- For readability of this example we will exclude the meta tags --> Advanced Tables Using ROWSPAN Spanning two rows Row1 Cell2 Row2, Cell2 </body 33
34
35 The rowspan attribute is used when you want a cell to span a number of rows Its use is very similar to the use of the colspan attribute
36 Frames are a device used in XHTML that allow you display more than one web page at a time Their use is widespread, although they are deprecated from XHTML, which is why they have their own DTD that they must conform to (Frameset) If you try to validate an XHTML document that uses frames as either Transitional or Strict XHTML, your document will not be valid
37 use the tags instead of the tags Within the tags include a tag for each page that we want to include use a set of tags to include content that can be viewed by users whose user agent does not support frames (such as older browsers, mobile devices etc.)
38 use the src attribute of the tag to specify the XHTML file that we want to be included in that frame cols attribute of the tag specifies how many frames we will have on our page and their width (either in percentage of the browser window, pixels or using the wildcard (*) operator rows attribute of the tag also allows us to specify the number of frames that we will have on our page length ways
39 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " Using the frameset, frame and noframes tags This content will only appear if the user agent you are using does not support frames
40
41 to display a number of frames at a time but want to change the orientation (i.e. we want to specify the cols attribute but also the rows attribute) - nest frameset elements within other frameset elements
42 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " Nesting Frames This content will only appear if the user agent you are using does not support frames
43
44 What style will be used when there is more than one style specified for an HTML element? Generally speaking we can say that all the styles will "cascade" into a new "virtual" Style Sheet by the following rules, where number four has the highest priority: Browser default External Style Sheet Internal Style Sheet (inside the tag) Inline Style (inside HTML element)
45 An individual element style is declared using the style attribute. E.g. Hello The style attribute allows you to specify a style for an element.
46 An inline style should be used when a unique style is to be applied to a single occurrence of an element. To use inline styles you use the style attribute in the relevant tag.
47 E.G Hello In this case the style specifies two properties font size and font colour. The attributes are separated by a semi colon. Note that inline styles override any other styles applied in the document.
48 Without style sheets the browser completely controls the look and feel of the web pages. If the designer implements a particular style to the page, they take control of how it should look in the browser.
1.What does xHTML mean? 2.Why is it important to do analysis before developing a website? 3.How is a HTML page processed? 4.What tags are essential when writing a HTML file? 49
10a.html 10a.html Customer-friendly : design guidelines for e-commerce (Feller, 2000) Nielson