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

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 No Fuses 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 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 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 - element as a background as 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 attributes alt is needed for validation

5 th 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 5 th 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 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 around the image img element. <img src = "../images/alaska.png" alt = "alaska" width = "30px"; height = "30px";/> 15

Tables Used for presenting tabular data. 16

Basic table structure 17

Let us Get Started John 3.45 So Long Annie 3.45 Stay Together John/Annie

additional features (1) column headings caption (title at top) So Long by Timepiece Title Writer Length 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 the form element has a method attribute and an action attribute 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 the form element must have an internal div element to make it valid XHTML 22

line of text a line of text requires an empty 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 in My name: the prompt is simply the text My name: placed here in a span element with class attribute to allow it to be styled 23

radio buttons 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 element with type attribute set to “ radio “ the checked attribute allows one button to be pre-selected the name attribute value frmStudyType must be the same for each button in the group the value attribute fixes the value passed 24

check boxes 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 requires the element with type attribute set to "checkbox" the checked attribute allows one button to be pre-selected the name attribute value frmInterests must 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) Male Female the pair enables a choice of ONE (or more) of a number of options via a drop down menu the outer select element has a name attribute 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" 26

submit and reset Submit Details <button type="reset" name="reset" value="reset"> 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 27

text area <textarea name="text" rows="5" cols="35"> enter comments here this is more or less self evident cols = width of the text area rows = height 28

making the form do something the action attribute value replace the # by the following to see the values you sent in your form " 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

padding margin (space between elements) the BOX model border padding The element itself 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 {font-size: small} /*12px*/ h1 {font-size: 150%} /*18px*/ h2 {font-size: 140%} /*15px*/.notes {font-size: 90%} /*10px*/ etc. 36