Chapter 5 BIE2313 | Web design

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Business Management & Globalisation BIE2313 | Web Design Objectives To be able to add Hypertext Link and multimedia files to HTML document. To understand how to add border to images. Identify the graphic formats for the World Wide Web. Discuss key points to consider when including graphics in WWW documents. Download a graphic file to your computer. Use the correct HTML format for Changing the links default color

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Business Management & Globalisation BIE2313 | Web Design Creating Links To create a link in HTML, you need two things: –The name of the file you want to link to –The text that will serve as the ‘hot spot’ (the text that will be highlighted in the browser, which your readers can then select to follow the link. To create a link, you use the HTML link tag.

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Business Management & Globalisation BIE2313 | Web Design Creating Links (cont.) The tag is often called an anchor tag, as it can also be used to create anchors for links. The HREF (Hypertext REFerence) attribute is used to specify the name or URL of the file where this link points. All of the text between tag will become the actual link on the screen and be highlighted or underlined. That’s the text that will be clicked on to jump to the document specified by the HREF attribute.

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Business Management & Globalisation BIE2313 | Web Design Linking Local Documents Using Relative Path Names When you specify the path name of a linked file within quotes, the browser looks for it in the same directory as the current file. Relative path names can also include directories. Eg:- – Click here  ”file.html” is located in the current directory. – Click here –  ”file.html” is located in the directory or folder and it is located in the current directory. Specifying relative path names allows you to move you documents around on your system and to other systems with less or no file modifications to fix the links.

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Business Management & Globalisation BIE2313 | Web Design Linking Local Documents Using Absolute Path Names Absolute path names always begin with a slash, which is the way they are differentiated from relative path names. Following the slash are all directories in the path from the top level to the file you are linking. Eg:- – Click here  ”file.html” is located in another directory or folder. – Click here –  ”file.html” is located in another drive i.e. D: If you specify your links as absolute path names and you move your file elsewhere on the disk, or rename a directory, then all your links will break and you’ll have to laboriously edit all your HTML files and fix them all.

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Business Management & Globalisation BIE2313 | Web Design Remote Links Links to other document on the Web is called remote links. It is still using the tag with an attribute, includes some text to serve as the link on your webpage. But instead of a file name or a path in the HREF, we use the URL (Uniform Resource Locator). I.e:- – Click here

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Business Management & Globalisation BIE2313 | Web Design Try this… Adding Hypertext Links Paragraph | Character | List | Yahoo!

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Business Management & Globalisation BIE2313 | Web Design Targeting Links to Specific Windows The target attribute specifies where to open the linked document. Attribute Values : _blank: Open the linked document in a new window _self: Open the linked document in the same frame as it was clicked (this is default) _top: Open the linked document in the full body of the window Frame name: Open the linked document in a named frame

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Business Management & Globalisation BIE2313 | Web Design Text and Link Colours To change the text and link color, you will need your color values in the form of hexadecimal numbers (as explained before). You can then add any of the following attributes to the body tag: –text – controls the color of all the document’s body text that is not a link, including heading, body text, text inside tables, and so on (black by default). –link – controls the color of normal, un-followed links in the document (blue by default). –vlink – controls the color of links you have visited (purple by default). –alink – controls the color of a link that has had the mouse button pressed on it, but not released (red by default)

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Business Management & Globalisation BIE2313 | Web Design Try this… Colored Text and Link This is a normal text Click here 1st Click here 2nd

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Business Management & Globalisation BIE2313 | Web Design Images and Links If you include an tag inside the opening and closing parts of a link tag ( ), that image serves as a clickable hot spot for the link itself. i.e. i.e. PUSH ME

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Business Management & Globalisation BIE2313 | Web Design Image Borders The BORDER attribute creates a border around an image. Normally, inline images do not have border unless they are also links. By specifying a value for BORDER, you can draw a border around an inline image or modify the width of the link border. i.e.:-

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Business Management & Globalisation BIE2313 | Web Design Multimedia on the Web External media are any files that are not directly viewable by a web browser on a web page. You can create a link in an HTML file to an external media file in exactly the same way that you link to another document by using the tag and the HREF attribute. In order for a browser to recognise your media file, it must have the appropriate extension for its file type. – music You can set up a link between a small image (icon) and an external media file. –

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Business Management & Globalisation BIE2313 | Web Design Common Format for Image, Audio and Movie Clip

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Business Management & Globalisation BIE2313 | Web Design End of Lecture