1. Department of Information Technology Chapter 8 - Creating Hypertext links Lecturer: Ms Melinda Chung

2. Department of Information Technology 2 of 17 Links There are four types of links: Links to other places in this document Links to other documents on this computer Links to documents on other computers Email links The general format of a link is Text to show The a tags are called Anchors

3. Department of Information Technology 3 of 17 Links to other places in this document 2 Parts Mark the place to go to with an Anchor Part 1 is here Make a link to go to that place with another Anchor Go to part 1 The # sign indicates a location within a document

4. Department of Information Technology 4 of 17 Links to other documents on this computer Make a link to go to the other document with an Anchor Text or image to display as a link Some example Go to slide 13 Go to next week's contents These are also known as Relative Links Can also use locations within those documents with # example: Go to slide 13

5. Department of Information Technology 5 of 17 Links to documents on other computers Use an Anchor to create the link text to display as a link Example: Charles Sturt University http:// means connect to another computer These are also known as Absolute Links

6. Department of Information Technology 6 of 17 Email links The fourth type of link Example: Rafilda This is also known as Absolute Link

7. Department of Information Technology 7 of 17 Pictures Which Picture format is best JPEG, GIF, PNG ? JPEG: good for colour photographs GIF: 8 bit line diagrams PNG: a newer format, good for photographs and line diagrams (not supported by older browsers) Diagrams on Web pages should NOT be greater than ~50KB each (for reasonable download times) Images and other media are stored as separate files, with references to their URL within the HTML

8. Department of Information Technology 8 of 17 Pictures To include a picture/image, use Eg for a picture in the same directory as the HTML doc or, if it is on another computer The alt attribute must be included for Strict XHTML

9. Department of Information Technology 9 of 17 Pictures align attribute - specifies the alignment of the image in relation to the text, for example: results in the text appearing to the left of the image there is NO - to center an image, use NOT inside the image tag To place the text following an image to appear below it, using the tag, for example:, or

10. Department of Information Technology 10 of 17 Pictures Helpful to include Height and Width attributes in an IMG Tag Allows browser to layout page before graphics download Don’t use Height and Width to 'shrink' images (still takes a long time to download 'small' large images) Can also make a picture a link:

11. Department of Information Technology 11 of 17 Colours and Browsers Not all colours can be displayed on computers - an approximation is made - called dithering Some old computers have a colour table of 256 (8 bit), with only 216 that can used between Macs and PCs - called the browser safe colour palette These 216 colours can be seen (and coded) at: http://www.visibone.com/colorlab/ http://www.lynda.com/hex.html If you use one of these 216 colours it will look the same whether on a Mac or PC browser

12. Department of Information Technology 12 of 17 Colours Colours represented by six-digit number/letter combinations consist of three sets of two-digit numbers, representing the amount of red, green, blue as hexadecimal values in the range 00-FF Example: 000000 - black (no color) FF0000 - red 0000FF - blue FFFFFF - white (fully saturated with all three colours)

13. Department of Information Technology 13 of 17 Colours Can also use common named colours Example: color=“red" same as color="#FF0000" color=“blue" same as color="#0000FF" Others include “lime", “purple", “cyan“ List of colour names http://www.accessv.com/~email/webpages/colorcodes.html

14. Department of Information Technology 14 of 17 Comment Tags To explain your XHTML codes, provide better understanding of tags used Not display by browser Show up when viewing source codes Begins with <!-- Ends with --> Example: Expected to be used in your assignment 2

15. Department of Information Technology 15 of 17 Special Characters Non-breaking space Quotation mark (") " Ampersand (&) & Less-than sign (<) < Greater-than sign (>) > Copyright symbol ( © ) © See the following for loooong list of other special chars http://www.ramsch.org/martin/uni/fmi-hp/iso8859-1.html

16. Department of Information Technology 16 of 17 Horizontal Rules Horizontal lines can be placed in the document, as follows: Note: end tag with Example: Note: size & width are displayed as number of pixels

17. Department of Information Technology 17 of 17 Some Sites for your reference Investigate various Web Pages and see what looks good and what looks bad Bad examples: http://www.fixingyourwebsite.comhttp://www.fixingyourwebsite.com Lots of information on XHTML http://www.w3schools.com The definitive XHTML site http://www.w3.org/TR/xhtml1/ XHTML validator http://validator.w3.org/