1. Images

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 where you want the image to go.

6. Moving Automatic Drag to desired location Works in some editors Manual Move location in code 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: 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. Then add the text that should work as a link. Finally add an 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 tag, like in the example below: 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 and the tag. This method will work on all browsers except MSIE 3. Click here to go to yahoo. Using a style setting in the tag. This method works on MSIE3 and newer browsers. Click here 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. This example will open yahoo in a new window: 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: This is my page <!-- A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {text-decoration: underline}

15. Example (cont.) --> Welcome to my world! This Link To Yahoo has no underline

16. The Underline To turn off the effect for just a single link, add a style property to the tag: Go to Yahoo

17. Putting It All Together This is my page Welcome to my world! Yahoo Hotbot

18. Email Links Email links are done much the same as links to other pages, using the tag. An email link would require the following code: Email Me 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 : Send Email

19. Email Links Suppose you want an email link for your visitors containing specific text in the body of their message, simply add &body=: Send Email Or combine all the options and allow your visitor to send email with the address, subject and text already entered. Email Me