1

CTEC1414Lecture 20

XHTML and CSSLinks, Images, Tables and Forms

Bharti Patel

phones off (please)

hyperlinksWe can create links from one page toanother 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)

hyperlinksTo another page on same sitee.g. from startrek.html to no_fuses.html

Relative address URL as both are in same place

<a href = "no_fuses.html"> </a>No Fuses

this is the page that will be displayed when the link is clicked

hyperlinksTo another page on another sitee.g. from startrek.html to an external site

Use an Absolute address URL to give full directions

<a href ="http://www.bbc.co.uk/"> </a>

this is an absolute url

this is the page that will be displayed when the link is clicked

Official BBC website

hyperlinks states

Hyperlinks may in one of 4 statesa link that has not been visiteda visited link a link being hovered overan active linkblue and purple are the default colours

styling hyperlinksIf you change the colours on your page the

default colours may not work wellChanging link styles

requires pseudo-classes – note the colon (:)a:link a:visited a:hovera:activeUse 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 colorsa:link {color: #ff0000; background-color:transparent}a:visited {color: #0000ff; background-color:transparent}a:hover {color: #ffcc00; background-color:transparent}

Change font-sizea:link {color: #ff0000; background-color:transparent}a:visited {color: #0000ff; background-color:transparent}a:hover {font-size: 150%}

Adding ImagesIssues

◦ 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 formatsGIF – Graphical Interchange FormatJPG (JEPEG) – Joint Photographic Expert group

PNG – Portable Network GraphicsBMP – BitMaP -do not use – files are too large

TIFF – Tagged Image File Format

Using Imagesas page content - <img/> element

as a backgroundas a replacement for a list bullet

as a heading (to replace text)as a hyperlink

<img src = "../images/my-pic.jpg" alt = "my picture” width = "50px" height = "50px" />

11

as page content Image element - 4 key attributes

For specifying size of image so that page is loaded more quickly, or for scaling

For offering alternate text that is displayed if the image is not available

Always use all 4 attributesalt is needed for validation

5th 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 whenthe image is hovered over

Always use all 4 attributesthe 5th is useful (on any element)

12

Positioning imagesleft, right and centreGive an image element a class attributewith 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 hyperlinkwrap 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

<tr> <!-- table row --> <td> </td> <!-- table data cell --> <td> </td> <td> </td> </tr>

<!-- table 2 rows 3 columns + border -->

<table border =“1”>

</table>

<tr> <!-- table row --> <td> </td> <!-- table data cell --> <td> </td> <td> </td> </tr>

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 headingscaption (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 feedbackdetails to purchase an itemon-line test

promptline of textselect optionradio buttonscheckboxestext areasubmitreset

21

form outline<form method= "get" action= "#"> <div>

</div></form>

the form element hasa method attributeandan action attribute

methodget means data is shown in the address barmaximum size = 255 characters

post means data is sent in a separate packageno maximum size – more secureactionthe value of this is the URL of the filethat will process the data# means use this page

the form element must have an internal div element tomake it valid XHTML

22

line of text<form method= "get" action= "#"> <div>

</div></form>

a line of text requires an empty<input> element with atype attribute set to "text “name attribute with value frmNamewhich stores the text you enter the size attribute fixes the numberof characters (30) that can be typed in

<input type="text" name= "frmName" size="30"/>

<span class="prompt"> </span>My name:

the prompt is simply the textMy name:placed here in a span element with classattribute to allow it to be styled

23

radio buttons

<form method= "get" action= “#"> <div>

</div></form>

radio buttons allow choice of ONE of a number of options

<input type ="radio" name ="frmStudyType" value ="FT" checked="checked" />Full-Time<input type ="radio" name ="frmStudyType" value ="PT" />Part-Time

a group of radio buttons requires the <input> element with type attribute set to “radio“

the checked attribute allows one buttonto be pre-selected

the name attribute value frmStudyTypemust be the same for each button in the group

the value attribute fixes the value passed

24

check boxes

<form method= "get" action= “#"> <div>

</div></form>

checkboxes allow choice of more than 1 of a number of options

<input type ="checkbox" name ="frmInterests" value ="Music" checked="checked”/>Music<input type ="checkbox" name ="frmInterests" value ="Sport" />Sport

a group of checkboxes requiresthe <input> element withtype attribute set to "checkbox"

the checked attribute allows one buttonto be pre-selected

the name attribute value frmInterestsmust be the same for each box in the group

the value attribute fixes the value passed

<input type ="checkbox" name ="frmInterests" value ="Other" />Other

25

select option (combo box)

<form method= "get" action= "#"> <div>

</div></form>

<option value="M">Male</option> <option value="F">Female</option></select>

the <select> <option> pair enables a choice of ONE (or more) of a number of options viaa drop down menu

the outer select element has a name attribute

the inner option element has the value to be passedcontains the text displayed

<select name="frmSex"> <select name="frmSex" multiple="multiple">

the attribute multiple = "multiple"allows more than one valueto be selected often used with size="x"

26

submit and reset

<form method= "get" action= "#"> <div>

</div>

</form>

<button type="submit" name="submit" value="submit“>Submit Details</button><button type="reset" name="reset" value="reset"> Reset</button>

these are more or less self evidenteach button has three attributes.The type attribute must have the value shown the values of the name and value attributes can be anything

27

text area

<form method= "get" action= "#"> <div>

</div></form>

<textarea name="text" rows="5" cols="35"> enter comments here</textarea>

this is more or less self evidentcols = width of the text arearows = height

28

making the form do somethingthe action attribute valuereplace 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 anddisplays them in a table

Year 2 Computer Science students do this sort of processing

29

padding

margin (space between elements)

the BOX model

border

padding

The element

itself

30

using the boxAll of div,p,h,span,img are box elementsWe can change the style of the box:

paddingbordermargin

See the w3schools site forcss propertieseffects with the box model

31

border propertiesTo 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 borderborder-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 propertiesTo affect all 4 margins

margin h1 { margin: 5px } h1 { margin: 5px 10px 15px 20px }

/* top right bottom left */

To affect one marginmargin-top (or right bottom left)

h1 { margin-top: 5px } h1 { margin-left: 15px }

34

padding propertiesTo affect all 4 sides of paddingpadding

h1 { padding: 5px } h1 { padding: 5px 10px 15px 20px }

To affect one paddingpadding-top (or right bottom left}

h1 { padding-top: 5px } h1 { padding-left: 15px }

35

bullet-proofing idea: text sizeTo make text appear in proportionDo not use absolute sizes - pt or pxUse:

body {font-size: small}/*12px*/h1 {font-size: 150%} /*18px*/h2 {font-size: 140%} /*15px*/.notes {font-size: 90%} /*10px*/

etc.

36