Creating Web Pages with Links, Images, and Formatted Text Information Presented by S. Cox

Linking To another web page within the same web site To a web page in another web site Within the same web page To an address 2

Link Attributes If you want to change the colors of text links or image link borders to override the browser defaults…. 3

Link Attributes AttributeFunction link Normal link Controls the color of a normal unvisited link and/or link without mouse pointer pointing to it Default color usually is blue vlink Visited link Controls the color of a link that has been clicked or visited Default color is usually purple or green alink Active link Controls the color of a link immediately after the mouse clicks the hyperlink Default color is usually green or red 4

Linking The and tags are used to create links on a web page…also called the anchor tag because it is used to create anchors for links Example of a link to a web page: linktext Example of an link: linktext – mailto – used to indicate it is an link Target – or name location in the same file 5

Linking Adding links within a Web page – goes around the text that you want to be the link – goes in the location you want the link to “jump” to within the same page 6

Tag Attributes and Functions AttributeFunction hrefSpecifies the URL of the linked page or file nameDefines a name for the current anchor so it may be the target or destination of another link. Each anchor on a web page must use a unique name. relIndicates a forward relationship from the current document to the linked document. The value of the rel attribute is a link type such as prev, next, index, or copyright. revIndicates a reverse relationship from the current document to the linked document. The value of the rev attribute is a link type such as prev, next, index, or copyright. typespecifies the content type of the linked page or file to help a browser determine if it can handle the resource type. 7

Using Absolute and Relative Paths Path – describes the location (folder or external web site) where the files can be found Absolute path – specifies the exact address for the file to which you are linking or displaying a graphic Relative paths – specify the location of a file, relative to the location of the file that is currently in use…utilizes the double period (..) 8

Font Attributes and Values Attribute and ValueFunction color=“#xxsxxx” Changes the font color Value inside quotation marks is a six-digit color code or color name Face=“fontname” Changes the font face or type Value inside quotation marks is the name of a font, such as Veranda, or Arial Size=“x” Changes the font size Value inside quotation marks is a number that represents size Values can be an actual font size of 1 (smallest) to 7 (largest) or a relative font size, such as +2 or -1 9

Text Formatting Logical style tags allow a browser to interpret the tag based on browser settings, relative to other text on a web page Physical style tags specify a particular font change that is interpreted strictly by all browsers 10

Text Formatting Tags HTML TagFunction Physical style tag that displays text as bold Increases the font size in comparison to the surrounding text </blockquote Designates a long quotation; indents margins on sections of text Logical style tag that displays text with emphasis (italicized) Physical style tag that displays text as italicized Sets enclosed text as preformatted material, meaning it preserves spaces and line breaks, often used for text in column format Decreases the font size in comparison to the surrounding text Logical style tag that displays text with stong emphasis (bold) Displays text as subscript (below normal text) Displays text as superscript (above normal text) Displays text as teletype or monospace text Displays text as underlined 11

Adding Images with Wrapped Text Using the align=“left” or align=“right” attribute in an image tag will allow the text to wrap around the image To control space around the image, use the hspace=“x” (horizontal space) or vspace=“x” (vertical space) attribute in the image tag…the x indicates the number in pixels 12

Using Thumbnail Images A thumbnail image is a smaller version of the image itself The thumbnail is used as a link that, when clicked, will load the full-sized image The HTML code to add a thumbnail image: 13