images. intro what is it? getting your image inserting moving resizing cropping
TRANSCRIPT
Images
Intro
• What is it?• Getting your image• Inserting• Moving• Resizing• Cropping
What is it?
• Images are a way to enhance• Convey messages without words• Focus points
Getting Your Image
• Sources• Pictures taken• Pictures on the web
• Make sure you get permission before publishing• Screen capture• Supplied images• “Paint” creations
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.
Moving
• Automatic• Drag to desired location
• 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.
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.”
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
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).
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.
Make It Different
Define colors for all links on the pageThe 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).
Make It DifferentDefine colors for individual links on the pageYou 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="http://www.yahoo.com"><font 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="http://www.yahoo.com" style="color: rgb(0,255,0)">here</a> to go to yahoo.
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="http://www.yahoo.com" target="_blank"> 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.
The Underline or “Hover”The A:hover tells the browser that when the mouse is over a link the underline should appearExample:<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}
Example (cont.)
--></style>
</head>
<body>Welcome to my world!<br><a href="http://www.yahoo.com">This Link To Yahoo has no underline</a></body>
</html>
The Underline
To turn off the effect for just a single link, add a style property to the<a href> tag: <a href="http://www.yahoo.com" style="text-decoration: none">Go to Yahoo</a>
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="http://www.yahoo.com CLASS=set1> Yahoo </a><a href="http://www.hotbot.com CLASS=set2> Hotbot </a></body>
</html>
Email Links
Email links are done much the same as links to other pages, using the <a href> tag.An email link would require the following code: <a href="mailto:youremailaddress">Email Me</a> This will result in the visitor's email program opening a new email with your address already in the To: field. If you wish to have a specific subject in the email, you can add it to the html code using subject= setting : <a href="mailto:[email protected]?subject=SweetWords">Send Email</a>
Email Links
Suppose you want an email link for your visitors containing specific text in the body of their message, simply add &body=: <a href="mailto:[email protected]?body=Please send me a copy of your new program!">Send Email</a> Or combine all the options and allow your visitor to send email with the address, subject and text already entered. <a href="mailto:[email protected]?subject=SweetWords&body=Please send me a copy of your new program!">Email Me</a>