CTEC1414 Lecture 20

1. phones off(please) CTEC1414Lecture 20 XHTML and CSS Links, Images, Tables and Forms Bharti Patel

2. 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)

3. 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 <ahref = "no_fuses.html"></a> No Fuses this is the page that will be displayed when the link is clicked

4. 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/"> </a> Official BBC website this is the page that will be displayed when the link is clicked this is an absoluteurl

5. 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

6. 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 Note 1:a:hoverMUST come aftera:link and a:visited in the CSS definition in order to be effective!! the order is important Note 2:a:activeMUST come aftera:hover in the CSS definition in order to be effective!!

7. 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%}

8. 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

9. 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

10. 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

11. as page content Image element - 4 key attributes <imgsrc = "../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

12. For offering tool-tip text help when the image is hovered over 5th attribute <imgsrc = "../images/my-pic.jpg" alt = "my picture” width = "50px" height = "50px" title ="a pic of mine”/> Always use all 4 attributes the 5th is useful (on any element)

13. Positioning imagesleft, right and centre • Give an image element a class attribute • with value such as left, right or centre <imgclass="left"src=" " alt=" "/> • Define a style .left {float:left} .right {float:right} .centre {margin-left: auto; margin-right:auto;}

14. 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 */ }

15. as a hyperlink • wrap the<ahref=""> </a>around the image img element. <a href = "alaskaPage.html"> <imgsrc = "../images/alaska.png" alt = "alaska" width = "30px"; height = "30px";/> </a>

16. Tables • Used for presenting tabular data.

17. Basic table structure <!-- table 2 rows 3 columns + border --> <table border =“1”> </table> <tr> <!-- table row --> <td> </td> <!-- table data cell --> <td> </td> <td> </td> </tr> <tr> <!-- table row --> <td> </td> <!-- table data cell --> <td> </td> <td> </td> </tr>

18. <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>

19. 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>

20. additional features (2) #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;} • add a simple stylesheet

21. 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

22. form outline the form element has a method attribute and an action attribute <form method= "get"action= "#"> <div> </div> </form> 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 action the value of this is the URL of the file that will process the data #means use this page

23. line of text the prompt is simply the text My name: placed here in a span element with class attribute to allow it to be styled <form method= "get"action= "#"> <div> </div> </form> <span class="prompt"> </span> My name: <input type="text"name= "frmName"size="30"/> a line of text requires an empty <input> element with a type attribute set to "text “ nameattribute with value frmName which stores the text you enter the size attribute fixes the number of characters (30) that can be typed in

24. a group of radio buttons requires the <input> element with type attribute set to “radio“ thenameattribute value frmStudyType must be the same for each button in the group radio buttons allow choice of ONE of a number of options radio buttons the value attribute fixes the value passed <form method= "get"action= “#"> <div> </div> </form> <input type ="radio" name ="frmStudyType" value ="FT" checked="checked" />Full-Time <input type ="radio" name ="frmStudyType" value ="PT" />Part-Time the checked attribute allows one button to be pre-selected

25. checkboxes allow choice of more than 1 of a number of options check boxes a group of checkboxes requires the <input> element with type attribute set to "checkbox" thenameattribute value frmInterests must be the same for each box in the group <form method="get"action=“#"> <div> </div> </form> <input type ="checkbox" name ="frmInterests" value ="Music" checked="checked”/>Music <input type ="checkbox" name ="frmInterests" value ="Sport" />Sport the value attribute fixes the value passed the checked attribute allows one button to be pre-selected <input type ="checkbox" name ="frmInterests" value ="Other" />Other

26. the <select><option> pair enables a choice of ONE (or more) of a number of options via a drop down menu select option (combo box) <form method= "get" action= "#"> <div> </div> </form> the outer select element has aname attribute <select name="frmSex" multiple="multiple"> <option value="M">Male</option> <option value="F">Female</option> </select> <select name="frmSex"> the inner option element has the value to be passed contains the text displayed the attribute multiple = "multiple" allows more than one value to be selected often used with size="x"

27. 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 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>

28. this is more or less self evident cols = width of the text area rows = height text area <form method= "get" action= "#"> <div> </div> </form> <textareaname="text" rows="5"cols="35"> enter comments here </textarea>

29. 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

30. border the BOX model margin (space between elements) padding padding The element itself

31. 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

32. 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: red10pxdashed }

33. 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 }

34. 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 }

35. 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 }

36. bullet-proofing idea: text size • To make text appear in proportion • Do not use absolute sizes - pt or px • Use: body {font-size: small}/*12px*/ h1 {font-size: 150%}/*18px*/ h2 {font-size: 140%}/*15px*/ .notes {font-size: 90%}/*10px*/ etc.