1. Informatics Computer School CS114 Web Publishing HTML Lesson 2

2. 2 Lesson Outline §Introduction to hyperlinks §Using different types of hyperlinks §Introduction to images §Formatting images §Sample codes

3. 3 Introduction to hyperlinks Hyperlink A method that allows one to link to another document, file, location or another section from anywhere. A very useful and easy to use feature. Hyperlinks are written using and tags. The text that are placed within the tags are the hyperlinks. If an user were to click on it, hyperlink will be activated. One can place text or image as the hyperlink.

4. 4 Basic Outline of an hyperlink code Click me! Legend: A - Anchor HREF - Hyperlink Reference Note: this code would not work as we have not specified where to link to if the user clicked on the the text ‘Click me!’.

5. 5 Basic Tags It informs that, the particular message is a hyperlink and an anchor (hand symbol) should be displayed. It should be closed with a symbol. The Hyperlink Reference instruction. It informs whether the link is to another page, location or some document. The protocol that must be used if one were to link to an external website.

6. 6 The protocol that must be used if one were to link to an email client. The protocol that must be used if were to open a document on a browser. The protocol that must be used if one were to link to another section on the same page.

7. 7 Sample Codes for hyperlinks Code 1 (To link to another page one same site) Click here to go to main page! This would work if the main_page.htm is in the same folder as this page. If not, then you will have to write the full path of the file name. e.g.“project/htmlfiles/main_page.htm”

8. 8 Code 2 (To link to an external website) Click to go to Yahoo! Click to go to MSN!

9. 9 Code 3 (To link to an email client) Send me a mail Note: This code will actually allow the browser to launch an email client (for example Microsoft Outlook) on the system and place the above email address on the To bar.

10. 10 Code 4 (To link to an email client) Click here to open my Information page as a Word document

11. 11 Code 5 (To link to another section on the same page) Click to go to section 1 { place other information here…} This is section 1. Note: This codes will work if the html page is rather long. The codes must be written in a pair of and tags. The tag is to identify a particular location on that page. The is to link to that particular location.

12. 12 Basic Tags for Images Image Source- specifies where the file is located. Specifies the thickness of the border surrounding the image. Specifies the height of the image in pixels. Specifies the width of the image in pixels. Allows one to display the alternate text of some image. Useful when the browser has difficulties in displaying the image as then this alternate text will be displayed.

13. 13 Basic Tags for Images Specifies in pixels the size of the vertical space surrounding the image. Specifies in pixels the size of the horizontal space surrounding the image. Specifies how the text surrounding the image will be displayed. The different attributes are Top, Bottom and Middle.

14. 14 Sample Codes for Images Code 1 Note: A simple code to display an image. The full path of the location must be keyed in if the image is in a different folder.

15. 15 Code 2 Note: A code to display an image with a border thickness of 2 and also specify the alternate text. The alternate text will be displayed if the image could not be displayed or the user brings his mouse over the image.

16. 16 Code 3 This text will be displayed at the top level of the image. This text will be displayed at the middle level of the image. This text will be displayed at the bottom level of the image.

17. 17 Code 4 An image with a horizontal space of 10 pixels and a vertical space of 10 pixels.

18. 18 Code 5 (To place an image as the hyperlink) Note: A simple piece of code that allows the use of an image as a hyperlink. When a mouse is brought over the image, the cursor symbol will change into an anchor.The other attributes of the image could also be used and some text may also be added to allow better readability.