Embed Size (px)
Citation preview
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
