Agenda Links External and Internet Links Anchor Tag Text Hyperlinks Image Hyperlinks Images Image Attributes: src, alt, width, height, align, border

Links One of the features of web pages is the ability to display links to other web pages. In web terminology, links in a web page are referred to hyperlinks. Hyperlinks can be in the form of text (normally underlined to indicate a link). These links are to other existing web pages. Hyperlinks can also be in the form of images. In this example, a link can be used to send to web page author…

Links A hyperlink is a relationship between two anchors. An anchor tag is used to define how the anchors are related to create the link. There are different ways to link: External Link Link to a file Link to a specific location in a file (like a bookmark) Internal Link Link to a specific Location within the current file  Link Other Web page Link Other Web Page bookmark Web Page Link bookmark

Links Anchors At one end of the hyperlink is the source ( “tail”) anchor and at the other end of the hyperlink is the destination (or “head) anchor. The source (tail) anchor appears as the link you point and click The destination (head) anchor is either another web page or a bookmark in the web page (external link) or another bookmark in the same web page.

Links  External Text Hyperlink A text hyperlink is underlined text that when clicked, will take you to another place in that document or page, to an entirely new document or page or send an message. XHTML Code:  Q-107 Radio Result:  Q-107 Radio Q-107 Radio The anchor tag attribute href (hypertext reference) is used in this example to describe the URL to view when the hypertext link is clicked or “activated”

Links  External Image Hyperlink  An image hyperlink is an image that when clicked, will take you to another place in that document or page, to an entirely new document or page, or send an message. XHTML Code:  Result: The image tag will make web browser display image when becomes the link. Clicking image will link to URL described in the hypertext reference.

Links Additional Link Types External Link with bookmark eg. Note: in order to create this internal link, you must use similar anchor reference in destination web page before the part that deals with “keyword” i.e. Internal Link (bookmark) Same as with example above, but web page filename not required, and other anchor tag with name attribute must occur before the part that deals with “keyword” eg.

Images The use of images may make your web page more attractive to visitors. The tag is a non-empty tag that instructs the web browser how to display the image. Various attributes for the tag are used to provide a location to load the image, provide information regarding the image when the image is loading, as well as format the image in terms of size (width and height) and borders.

Images  src attribute The src attribute of the tag indicates the image location to display. The image location can be specified by a pathname relative to web page file’s location (relative pathname) or a URL (absolute pathname). eg.  Note: the minimum required attributes for the tag are src and alt (the alt attribute is discussed in the next slide)

Images  alt attribute The alt attribute (alternative name), is what shows up in place of the picture, if the picture fails to load or if the visitor has turned “loading images” off. The alternative name is just a brief summary of what the picture is, so if the picture does fail to load, the visitor can still tell what it is supposed to be eg. 

Images width and height attribute If you specify the height and width attributes, the browser uses them to reserve a place for the image on the page, and loads any text and other page elements instead of waiting for the image to load. eg.

Images align attribute The align attribute sets the alignment of the image. The default alignment of an image (in not specified) is left. You can assign the values of right and center to right-align and center align the image respectively. Notice the “American” spelling of center (i.e not centre which is the Canadian spelling – this won’t work) eg.

Images border attribute By default a border may appear around an image that is used in a link (i.e. an active image). You can remove borders to display an active image by assigning the border attribute a value of zero. eg You can increase the thickness of the border around an active image by assigning a larger value to the border attribute eg