Last Updated:  May 2, 2009

Visual Reference: Images and Links

Table of Contents

Overview
  1. The Beginning
  2. Learning HTML
  3. Expanding Your HTML
  4. Better by Design
  5. "Color Me Happy!"
  6. CSS Enterprise
  7. Roll Over, CSS
  8. Domain Registration and Hosting
  9. Fire Up, FireFTP!  (Loading Files)
  10. "Video Only," Please
  11. Tools
  12. Portfolio: Bringing It All Together
  13. Visual Reference:
    1. HTML
    2. Images and Links
    3. HTML Template
    4. IE Specific CSS
    5. Meta Tags
    6. Special Characters
    7. HTML Lists
    8. CSS
    9. CSS Shorthand
    10. Colors

Images

What a standard page should look like: [view]. Point of fact: it can be just as easy to learn a user interface and all the subsequent menus, as it is to simply learn the code. That is why I take this approach. I have included a visual reference (VR) to make this task easier. The theory being that the only reason I use a wysiwyg is to figure out how to create the code ( in other words, to find the right terminology). With the visual reference sections, you get that exact experience.

image:
<img src="image goes here" />

Alternate text for an image:
<img src="image goes here" alt="sneaky pup" />

Image Size:
<img src="image goes here" width="50" height= "60" alt="sneaky pup" />
sneaky pup

Note:Even though using the size attributes can shrink an image, it is always better to actually "physically reduce" the image in a program such as Photoshop. This leaves you with a smaller file size and also avoids distortion.

Rollover Text:
<img src="image goes here" width="50" height="60" alt="sneaky pup" title="Sneaky Pup" />
sneaky pup

Links


link:
<a href="link address">link</a>

email link:
<a href="mailto:somesuchperson@gmail.com">contact</a>

VR-HTML > VR-Images and Links > VR-HTML Template