Download presentation
Presentation is loading. Please wait.
1
Images & Hyperlinks
2
Intro What is it? Getting your image Inserting Moving Resizing
Cropping
3
What is it? Images are a way to enhance Convey messages without words
Focus points
4
Getting Your Image Sources Pictures taken Pictures on the web
Make sure you get permission before publishing Screen capture Supplied images “Paint” creations
5
Inserting Inserting Images with HTML Editors
Depending on which HTML editor you buy, you’ll have two choices for adding images: Visual editor: If you have a visual editor, you can simply drag and drop the image where you want it, or click the “insert image” quick link. Text editor: If you have a text editor, you add <img src=”filename” /> where you want the image to go.
6
Moving Automatic Manual Drag to desired location Move location in code
Works in some editors Manual Move location in code <img src="yourImageUrl.jpeg" style="position: absolute; top: 10px; left: 10px;"/> In that code, yourImageUrl.jpeg would be placed 10px from the top and 10px from the left.
7
Resizing With both choices, you want to make sure a height, width and alternate text is set. For example, if your image is 500 pixels wide and 150 pixels tall, your code should look like this: <img src=”filename” height=”150” width=”500” alt=”” /> In the quotes of the alt, give your image a name or description. Keep in mind that blind users will be hearing this description, so don’t just call it “image.”
8
Cropping Resize to fit location
Done in an image editor prior to placement Best place here…powerpoint Open powerpoint On blank slide paste in image Right-click on image Select crop tool Crop image
9
Hyperlinks There are three different kinds of links you can have on your website: Links to anchors on the current page (Internal). Links to other pages within the current site (Local) Links to pages outside the current site (Global).
10
How You simply: Specify the target in the <a href=" ">.
Then add the text that should work as a link. Finally add an </a> tag to indicate where the link ends.
11
Make It Different Define colors for all links on the page
The general color of text links is specified in the <body> tag, like in the example below: <body link="#C0C0C0" vlink="#808080" alink="#FF0000"> link - standard link - to a page the visitor hasn't been to yet. (standard color is blue - #0000FF). vlink - visited link - to a page the visitor has been to before. (standard color is purple - #800080). alink - active link - the color of the link when the mouse is on it. (standard color is red - #FF0000).
12
Make It Different Define colors for individual links on the page
You might want one or more links to have different colors than the rest of the page Placing font tags between the <a href> and the </a> tag. This method will work on all browsers except MSIE 3. Click <a href=" color="FF00CC">here</font></a> to go to yahoo. Using a style setting in the <a> tag. This method works on MSIE3 and newer browsers. Click <a href=" rgb(0,255,0)">here</a> to go to yahoo.
13
Links In A New Page To open in another window or frame than the link itself is placed in. To do this you simply add a target="" to the <a href>. This example will open yahoo in a new window: <a href=" Predefined targets are: _blank loads the page into a new browser window. _self loads the page into the current window. _parent loads the page into the frame that is superior to the frame the hyperlink is in. _top cancels all frames, and loads in full browser window.
14
The Underline or “Hover”
The A:hover tells the browser that when the mouse is over a link the underline should appear Example: <html> <head> <title>This is my page</title> <style type="text/css"> <!-- A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {text-decoration: underline}
15
Example (cont.) --> </style> </head> <body> Welcome to my world!<br> <a href=" Link To Yahoo has no underline</a> </body> </html>
16
The Underline To turn off the effect for just a single link, add a style property to the<a href> tag: <a href=" style="text-decoration: none">Go to Yahoo</a>
17
Putting It All Together
<html> <head> <title>This is my page</title> <STYLE TYPE="text/css"><!-- A.set1:link {color: #FF00FF; } A.set1:active {color: #FFFF00; } A.set1:visited {color: #00FFFF; } A.set2:link {color: #AA00FF; background: FF00AA; text-decoration: none} A.set2:active {color: #FF00AA; background: none transparent;} A.set2:visited {color: #FFFF00; text-decoration: none} --></STYLE> </head> <body> Welcome to my world!<br> <a href=" Yahoo </a> <a href=" Hotbot </a> </body> </html>
18
Links links are done much the same as links to other pages, using the <a href> tag. An link would require the following code: <a href="mailto:your address"> Me</a> This will result in the visitor's program opening a new with your address already in the To: field. If you wish to have a specific subject in the , you can add it to the html code using subject= setting : <a Send </a>
19
Links Suppose you want an link for your visitors containing specific text in the body of their message, simply add &body=: <a send me a copy of your new program!">Send </a> Or combine all the options and allow your visitor to send with the address, subject and text already entered. <a &body=Please send me a copy of your new program!"> Me</a>
Similar presentations
