Embed Size (px)
Citation preview
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 e-mail address
2
Link Attributes
• If you want to change the colors of text links or image link borders to override the browser defaults….
• <body link=“color” vlink=“color” alink=“color”>
3
Link AttributesAttribute Function
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 <a> and </a> 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:<a href=“URL”>linktext</a>
• Example of an Email link:<a href=“mailto:[email protected]”>linktext</a>– mailto – used to indicate it is an email link
• Target – or name location in the same file5
Linking
• Adding links within a Web page– <a name=“targetname”></a> goes around the
text that you want to be the link– <a href=“#targetname”> goes in the location you
want the link to “jump” to within the same page
6
<a> Tag Attributes and FunctionsAttribute Function
href Specifies the URL of the linked page or file
name Defines 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.
rel Indicates 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.
rev Indicates 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.
type specifies 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 ValuesAttribute and Value Function
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 TagsHTML Tag Function
<b></b> Physical style tag that displays text as bold
<big></big> Increases the font size in comparison to the surrounding text
<blockquote></blockquote
Designates a long quotation; indents margins on sections of text
<em></em> Logical style tag that displays text with emphasis (italicized)
<i></i> Physical style tag that displays text as italicized
<pre></pre> Sets enclosed text as preformatted material, meaning it preserves spaces and line breaks, often used for text in column format
<small></small> Decreases the font size in comparison to the surrounding text
<strong></strong> Logical style tag that displays text with stong emphasis (bold)
<sub></sub> Displays text as subscript (below normal text)
<sup></sup> Displays text as superscript (above normal text)
<tt></tt> Displays text as teletype or monospace text
<u></u> 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:<a href=“largeimage.gif”><img src=“thumbnail.gif” /></a>
13
