Lecture 4

Transcript Lecture 4

17/10/11
 The form element
(<form></form>) 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 <input />
tag and its type attribute
2




Textboxes (<input type= “text” />)
Checkboxes (<input type= “checkbox” />)
Radio Buttons (<input type= “radio” />)
Buttons: (<input type= “button” />)
3
 Password Textboxes (<input type=
“password” />)
 Submit Buttons (<input type= “submit”
/>)
 Reset Buttons (<input type= “reset” />)
4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"><html>
<body>
<form name="input" action="newpage.html"
method="get or post">
Type your first name:
<input type="text" name="FirstName" size="20">
<br>Type your last name:
<input type="text" name="LastName" size="20">
<br>
<input type="submit" value="Submit">
</form>
<p>
If you click the "Submit" button, you will send your
input to a new page called newpage.html.
</p>
</body>
</html>
5

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Using the form Tag with the </title>

</head>
<body>
<h1>Forms</h1>
<h2>Using the <form> tag and the <input /> tag</h2>
<form name="feedbackfrm">
Your Name: <input type="text" /><br />
Your Password: <input type="password" /><br />
Indicate your favorite color:<br />
<input type="radio" checked="true" value="blue"/>Blue<br />
<input type="radio" value="red"/>Red<br />
Choose one or more of the following:<br />
<input type="checkbox" checked = "true" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="submit" value="submit your form" /><br />
<input type="reset" value="clear your form" /><br />
</form>
</body>
</html>
6
7
 textarea element allows larger
blocks of text to be submitted
 The textarea element uses the
<textarea></textarea> tags
 use the rows and cols attributes to
set the size of the textarea
8

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Using the textarea tag</title>
</head>
<body>
<h1>Forms</h1>
<h2>Using the <textarea></h2>
<form name="feedbackfrm">
Input your Comments:<br />
<textarea rows="5" cols="25">Some default Content</textarea><br />
<input type="submit" value="submit your form" /><br />
<input type="reset" value="clear your form" /><br />
</form>
</body
</html>
9
10
 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 (<textarea>) and close
(</textarea>) tags
11
 If you are thinking of using a form
on your page, make sure that it is
absolutely necessary
 Never nest forms within forms
12
 Sometimes a textbox is not suitable
 Use a list box
 List box has two tags
<select>
<option>
 The select tag indicates that a list box will be created.
 The option tag represents a unique choice for the list box.
 <select> has two main properties: name and size.
13
<select name=“box1” size=“20”>
<option>Ireland</option>
<option>United Kingdom</option>
</select>
14
<html>
<body>
<form>
<select name="fruit“ size=“1”>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pear">Pear</option>
<option value="plum">Plum</option>
</select>
</form>
</body>
</html>
15
 Name as per textfield
 Size indicates how many items are shown at one time
 <option> </option>The value which uniquely identifies each of the option
 The text after the <option> 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
html>
body>
form>
My interests:
br />
eading
input type="checkbox" name="Reading" checked="checked“ />
br />
inging
input type="checkbox" name="Singing“ />
/form>
/body>
/html>
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
Example
ml>
ody>
rm>
le:
put type="radio" checked="checked"
me="Sex" value="male“ />
/>
male:
put type="radio"
me="Sex" value="female“ />
orm>
ody>
tml>
20
 To include a table use the <table></table> tags
 For each row we need a set of <tr></tr> tags where the tr stands for
table row
 Each cell within our table can be implemented using either <th></th>
(table header) tags or <td></td> (table data) tags
 The <th></th> 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
 <td></td> 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 <caption></caption>
tags
 These align the text to
the center, but do not
place any emphasis on
the text
22

<html>
<head>
<title>Introduction to Tables
</title>
</head>
<body>
<p>
<table border="1">
<caption>Introduction to Lists</caption>
<tr>
<th>Unordered lists: </th>
</tr>
<tr>
<td>
<ul>
<li>have discs as the bullet points for each list item</li>
<li>allow the user to see a list of items</li>
<li>make the contenteasier to understand by structuring the important points</li>
</ul>
</td>
</tr>
<tr>
23
<th>Ordered Lists - three reasons for using
them</th>
</tr>
<tr>
<td>
<ol>
<li>They give order to your list items</li>
<li>You can use them for "Top Ten"lists</li>
<li>They can be used to create "Tables of Content"</li>
</ol>
</td>
</tr>
</table>
</p>
</body>
</html>
24
25
 Use the align attribute of the
<table> tag to change the position
of the table on the page
 Use the align attribute of the <td>
(or <th>) tag to change the
alignment of the content of your
table cells
26

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Changing table alignment</title>
</head>
<body>
<h1>Advanced Tables</h1>
<h2>Changing the Alignment of the Table and Table Data</h2>
<table border="1" align ="center" width="75%">
<tr>
<th>Default <th> Alignment</th>
<th align="left">Left <th> Alignment</th>
<th align="right">Right <th> Alignment</th>
</tr>
<tr>
<td align="center">Center <td> Alignment</td>
<td>Default <td> Alignment</td>
<td align="right">Right <td> Alignment</td>
</tr>
</table>
</body>
</html>
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

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Using COLSPAN</title>
</head>
<body>
<h1>Advanced Tables</h1>
<h2>Using Colspan</h2>
<table border="1" align ="center" width="75%">
<tr>
<td colspan="2" align="center">Row1, Cell1</td>
<td>Row1, Cell2</td>
</tr>
<tr>
<td>Row2, Cell1</td>
<td>Row2, Cell1</td>
<td>Row2, Cell1</td>
</tr>
</table>
</body>
</html>
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

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Using Rowspan</title>

</head>
<body>
<h1>Advanced Tables</h1>
<h2>Using ROWSPAN</h2>
<table border="1" align ="center" width="75%">
<tr>
<td rowspan="2" align="center">Spanning two rows</td>
<td>Row1 Cell2</td>
</tr>
<tr>
<td>Row2, Cell2</td>
</tr>
</table>
</body
</html>
33
34
 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
35
 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
36
 use the
<frameset></frameset>
tags instead of the
<body></body> tags
 Within the <frameset>
tags include a <frame />
tag for each page that we
want to include
 use a set of
<noframes></noframes>
tags to include content
that can be viewed by
users whose user agent
does not support frames
(such as older browsers,
mobile devices etc.)
37
 use the src attribute of the
<frame /> tag to specify the
XHTML file that we want to be
included in that frame
 cols attribute of the
<frameset> 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
<frameset> tag also allows us
to specify the number of
frames that we will have on
our page length ways
38

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Using the frameset, frame and noframes tags</title>
</head>
<frameset cols = "*,35%">
<frame src = "form1.html" />
<frame src = "radio.html" />
<noframes>
<body>
This content will only appear
if the user agent you are using
does not support frames
</body>
</noframes>
</frameset>
</html>
39
40
 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
41

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Nesting Frames</title>
</head>
<frameset rows = "*,*">
<frame src = "form1.html" />
<frameset cols = "*,*">
<frame src = "form1.html" />
<frame src = "radio.html" />
</frameset>
<noframes>
<body>
This content will only appear
if the user agent you are using
does not support frames
</body>
</noframes>
</frameset>
</html>
42
43
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 <head>
tag)
 Inline Style (inside HTML element)
44
 An individual element style is
declared using the style attribute.
 E.g.
<p style =“font-size: 20pt”> Hello</p>
 The style attribute allows you to
specify a style for an element.
45
 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.
46
E.G
<p style=“font-size:20pt;color: blue”>Hello</p>
 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.
47
 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.
48
1.
2.
3.
4.
What does xHTML mean?
Why is it important to do
analysis before developing a
website?
How is a HTML page
processed?
What tags are essential when
writing a HTML file?
49
 http://www.useit.com/alertbox/97
10a.html
 Customer-friendly : design
guidelines for e-commerce (Feller,
2000)
 http://www.useit.com/ Nielson
 http://www.w3schools.com/
50
 http://www.w3.org/WAI/mobile/

Lecture 4

Transcript Lecture 4

Directory