phones off
(please)
XHTML and CSS
Links, Images, Tables and Forms
Bharti Patel
1
hyperlinks
We can create links from one page to
 another page on same site
◦ using a Relative address URL
 another page on another site
◦ using an Absolute address URL
 a named point within a page
◦ Same page (relative with a name)
◦ Another page (probably on same site) (relative)
hyperlinks
 To another page on same site
 e.g. from startrek.html to no_fuses.html
 Relative address URL as both are in same place
<a href = "no_fuses.html"> No Fuses
</a>
this is the page that will be displayed when the link is clicked
hyperlinks
 To another page on another site
 e.g. from startrek.html to an external site
 Use an Absolute address URL to give full directions
<a href ="http://www.bbc.co.uk/">Official BBC website </a>
this is an absolute url
this is the page that will be displayed when the link is clicked
hyperlinks states
 Hyperlinks may in one of 4 states
 a link that has not been visited
 a visited link
 a link being hovered over
 an active link
 blue and purple are the default colours
styling hyperlinks
 If you change the colours on your page the default
colours may not work well
 Changing link styles
 requires pseudo-classes – note the colon (:)
 a:link
 a:visited
 a:hover
 a:active
Use this ordering
the order
is
important
Note 1: a:hover MUST come
after a:link and a:visited in the
CSS definition in order to be
effective!!
Note 2: a:active MUST come
after a:hover in the CSS
definition in order to be
effective!!
hyperlink style examples
Change colors
a:link {color: #ff0000; background-color:transparent}
a:visited {color: #0000ff; background-color:transparent}
a:hover {color: #ffcc00; background-color:transparent}
Change font-size
a:link {color: #ff0000;
background-color:transparent}
a:visited {color: #0000ff; background-color:transparent}
a:hover {font-size: 150%}
Adding Images
Issues
◦ Colour depth (number of colours)
◦ File size – compressed
◦ Loss of detail due to compression
◦ Download speed – file size
Applications
◦ As content
◦ As background
◦ Enhancing styles
◦ effects
Adding Images
Image formats
 GIF – Graphical Interchange Format
 JPG (JEPEG) – Joint Photographic Expert
group
 PNG – Portable Network Graphics
 BMP – BitMaP -do not use – files are too
large
 TIFF – Tagged Image File Format
Using Images
as page content - <img/> element
as a background
as a replacement for a list bullet
as a heading (to replace text)
as a hyperlink
as page content
Image element - 4 key attributes
<img src = "../images/my-pic.jpg"
alt = "my picture”
width = "50px"
height = "50px" />
For offering alternate text that is
displayed if the image is not available
For specifying size of image so that page
is loaded more quickly, or for scaling
Always use all 4 attributes
alt is needed for validation
11
th
5
attribute
<img src = "../images/my-pic.jpg"
alt
= "my picture”
width = "50px"
height = "50px"
title = "a pic of mine”/>
For offering tool-tip text help when
the image is hovered over
Always use all 4 attributes
the 5th is useful (on any element)
12
Positioning images
left, right and centre
 Give an image element a class attribute
 with value such as left, right or centre
<img class= "left" src= " " alt= " "/>
 Define a style
.left
{float:left}
.right
{float:right}
.centre {margin-left: auto;
margin-right:auto;}
13
as a background
Not always a good idea
 text may be hard to read
#heading{
}
background-image:
url('../images/wall.jpg');
/* the image will repeat both across and
down the screen */ }
14
as a hyperlink
 wrap the<a href=""> </a> around the image
img element.
<a href = "alaskaPage.html">
<img src = "../images/alaska.png"
alt = "alaska"
width = "30px";
height = "30px";/>
</a>
15
Tables
 Used for presenting tabular data.
16
Basic table structure
<!-- table 2 rows 3 columns + border -->
<table border =“1”>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<!-- table row -->
<!-- table data cell -->
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<!-- table row -->
<!-- table data cell -->
</table>
17
<table border = "1">
<tr>
<td>Let us Get Started</td>
<td>John</td>
<td>3.45</td>
</tr>
<tr>
<td>So Long</td>
<td>Annie</td>
<td>3.45</td>
</tr>
<tr>
<td>Stay Together</td>
<td>John/Annie</td>
<td>2.50</td>
</tr>
</table>
18
additional features (1)
 column headings
 caption (title at top)
<caption>So Long by Timepiece</caption>
<tr>
<th>Title</th>
<th>Writer</th>
<th>Length</th>
</tr>
19
additional features (2)
 add a simple stylesheet
#album
{ width:400px;
height:200px;
float:left;
font-family: "Comic Sans MS“;}
table
{ color:red;
background-color:#CCC;}
caption
{ font-size:18pt;}
th
{ text-align: left;}
20
what is a form?
A form is used on a web page to send information to a
web site :
 questionnaire feedback
 details to purchase an item
 on-line test
prompt
line of text
select option
radio buttons
checkboxes
text area
submit
reset
21
form outline
<form method= "get" action= "#">
the form element has
<div>
a method attribute
and
an action attribute
the form element must
have an internal div
element to
make it valid XHTML
method
get means data is shown in the address bar
maximum size = 255 characters
post means data is sent in a separate package
no maximum size – more secure
</div>
</form>
action
the value of this is the URL of the file
that will process the data
# means use this page
22
line of text
<form method= "get" action= "#">
the prompt is simply the text
<div>
My name:
placed here in
a span element with class
attribute to allow it to be styled
<span class="prompt">My name: </span>
<input type="text" name= "frmName" size="30"/>
</div>
</form>
a line of text requires an empty
<input> element with a
type attribute set to "text “
name attribute with value frmName
which stores the text you enter
the size attribute fixes the number
of characters (30) that can be typed in23
radio buttons
a group of radio buttons
requires the <input>
element with type
attribute set to “radio“
radio buttons allow
choice of ONE of
a number of options
the name attribute value frmStudyType
must be the same for each button in the group
<form method= "get" action= “#">
<div>
the value attribute fixes the value passed
<input type
="radio"
name
="frmStudyType"
value ="FT"
checked="checked" />Full-Time
<input type
="radio"
name
="frmStudyType"
value ="PT" />Part-Time
</div>
</form>
the checked attribute allows one button
to be pre-selected
24
check boxes
a group of checkboxes requires
the <input> element with
type attribute set to "checkbox"
checkboxes allow
choice of
more than 1 of
a number of options
<form method= "get" action= “#">
the name attribute value frmInterests
<div>
must be the same for each box in the group
the value attribute fixes the value passed
<input type
="checkbox"
name
="frmInterests"
value ="Music"
checked="checked”/>Music
<input type
="checkbox"
name
="frmInterests"
the checked attribute
value ="Sport" />Sport
allows one button
to be pre-selected
</div>
</form>
<input type
name
value
="checkbox"
="frmInterests"
="Other" />Other
25
select option
(combo box)
the <select> <option> pair
enables a choice of ONE (or
more) of a number of options via
a drop down menu
<form method= "get" action= "#">
<div>
the outer select element
has a name attribute
<select name="frmSex" multiple="multiple">
<select name="frmSex">
<option value="M">Male</option>
<option value="F">Female</option>
the inner option element
</select>
has the value to be passed
</div>
contains the text displayed
</form>
the attribute
multiple = "multiple"
allows more than one value
to be selected often used with
size="x"
26
submit
and reset
these are more or less self evident
each button has three attributes.
The type attribute must have the value shown
the values of the name and value attributes can
be anything
<form method= "get" action= "#">
<div>
<button type="submit"
name="submit" value="submit“>Submit Details
</button>
<button type="reset"
name="reset" value="reset"> Reset
</button>
</div>
</form>
27
text area
this is more or less self evident
cols = width of the text area
rows = height
<form method= "get" action= "#">
<div>
<textarea name="text"
rows="5" cols="35">
enter comments here
</textarea>
</div>
</form>
28
making the form do something
the action attribute value
replace the # by the following to see the values you sent in your
form
"http://jsp.cs08.cse.dmu.ac.uk:8080/bharti/form.jsp"
the web server
my area the processing file
this file simply reads your parameters and their values and
displays them in a table
Year 2 Computer Science students do this sort of processing
29
the BOX model
margin (space between elements)
padding
The
element
itself
border
30
using the box
 All of div,p,h,span,img are box elements
 We can change the style of the box:
 padding
 border
 margin
 See the w3schools site for
 css properties
 effects with the box model
31
border properties
 To affect all 4 borders
 border-color
 h1 { border-color: red }
 border-style
 none, dotted, dashed, solid, double, groove, ridge, inset, outset,
inherit
 img { border-style: dashed }
 border-width
 p { border-width: 10px }
 border /* set any properties */
 #info { border: red 10px dashed }
32
border properties
(top, right, bottom, left)
 To affect one border
 border-top-color
 h1 { border-top-color: red }
 border-top-style
 none, dotted, dashed, solid, double, groove, ridge, inset, outset,
inherit
 img { border-top-style: dashed }
 border-top-width
 p { border-top-width: 10px }
 border-top
 #info { border-top: red 10px dashed }
33
margin properties
 To affect all 4 margins
 margin


h1 { margin: 5px }
h1 { margin: 5px 10px 15px 20px }
/* top right bottom left */
 To affect one margin
 margin-top (or right bottom left)


h1 { margin-top: 5px }
h1 { margin-left: 15px }
34
padding properties
 To affect all 4 sides of
padding
 padding


h1 { padding: 5px }
h1 { padding: 5px 10px 15px 20px }
 To affect one padding
 padding-top (or right bottom left}


h1 { padding-top: 5px }
h1 { padding-left: 15px }
35
bullet-proofing idea: text size
 To make text appear in proportion
 Do not use absolute sizes - pt or px
 Use:
body
h1
h2
.notes
{font-size: small}/*12px*/
{font-size: 150%} /*18px*/
{font-size: 140%} /*15px*/
{font-size: 90%} /*10px*/
etc.
36