HTML Link tag for E-Mails
HTML Email Tag
There actually is not a separate HTML tag for creating an HTML email link. Instead you use a standard HTML anchor tag <a> and set the href property equal to the email adddress, rather than specifying a web URL. This is probably confusing and may take a little while to get used to.
HTML Code:
<a href= "mailto:abc@mail.com" >Email Example</a>
Email Link:
Additional HTML Email Code
By adding a couple extra goodies onto the email address in href you can have both the SUBJECT and the BODY of the email automatically populated for your visitors. This is great when receiving emails from a website to an email account that handles more mail than just from that one link on your site.
By defining a uniform subject that people will automatically have when clicking the link you will be able to tell right away whether or not an email came from the website or from another source (as long as your visitors don't mess with the subject that you give them).
- Subject - Populates the subject of the email with the information
that you provide. - Body - Populates the body of the email with the information that
you provide.
HTML Code:
<a href= "mailto: a@b.com?subject=Web Page Email&body=This email is from your website" > 2nd Email Example</a>
HTML - Image src
Above we have defined the src attribute. Src stands for source, the source of the image or more appropriately, where the picture file is located. As with links described in a previous lesson, you may use any standard URL to properly point the src attribute to a local or external source.
There are two ways to define the source of an image. First you may use a standard URL. (src=http://www.Tizag.com/pics/htmlT/sunset.gif) As your second choice, you may copy or upload the file onto your web server and access it locally using standard directory tree methods. (src="../sunset.gif") The location of this picture file is in relation to your location of your .html file.
URL Types:
| Local Src | Location Description |
| src="sunset.gif" | picture file resides in same directory as .html file |
| src="../sunset.gif" | picture file resides in previous directory as .html file |
| src="../pics/sunset.gif" | picture file resides in the pic directory in a previous directory as .html file |
A URL cannot contain drive letters, since a src URL is a relational source interpretation based on the location of your .html file and the location of the picture file. Therefore something like src="C:\\www\web\pics\" will not work. Pictures must be uploaded along with your .html file to your web server.
Each method has its pros and cons, for instance using the URL of pictures on other sites poses a problem if the web master(s) of the other site happen to change the physical location of the picture file. Copying the file directly to your web server solves this problem, however, as you continue to upload picture files to your system, you may eventually run short on hard drive space. Use your best judgement to meet your needs.
HTML - Alternative Attribute
The alt attribute specifies alternate text to be displayed if for some reason the browser cannot find the image, or if a user has image files disabled. Text only browsers also depend on the alt attribute since they cannot display pictures.
HTML Code:
<img src="http://example.com/brokenlink/sunset.gif" alt="Beautiful Sunset" />
Alternative Text:
HTML - Image Height and Width
To define the height and width of the image, rather than letting the browser compute the size, use the height and width attributes.
HTML Code:
<img src="sunset.gif" height="50" width="100">
Height and Width:
Above we have defined the src, height and width attributes. By informing the browser of the image dimensions it knows to set aside a place for that image. Without defining an image's dimensions your site may load poorly; text and other images will be moved around when the browser finally figures out how big the picture is supposed to be and then makes room for the picture.
Vertically and Horizontally Align Images
Use the align and valign attributes to place images within your body, tables, or sections.
- align (Horizontal)
- right
- left
- center
- valign (Vertical)
- top
- bottom
- center
Below is an example of how to align an image to the right of a paragraph.
HTML Code:
<p>This is paragraph 1, yes it is...</p>
<p>
<img src="sunset.gif" align="right">
The image will appear along the...isn't it?
</p>
<p>This is the third paragraph that appears...</p>
Image Wrap Arond:
This is paragraph 1, yes it is. I think this paragraph serves as a nice example to show how this image alignment works.
This is the third paragraph that appears below the paragraph with the image!
Images as Links
This will be a quick review of the links - image lesson. Images are very useful for links and can be created with the HTML below.
HTML Code:
<a href="http://www.tizag.com/">
<img src="sunset.gif"> </a>
Image Links:
Now your image will take you to our home page when you click it. Change it to your home page URL.
Thumbnails
Thumbnails are small size (Kilobytes) pictures that link to the larger, high quality picture. To make a thumbnail save a low-quality version of a picture and make it have smaller dimensions. Now make this low-quality picture into an image link and have it point to the the high-quality picture.
HTML Code:
<a href="sunset.gif"> <img src="thmb_sunset.gif"> </a>
Thumbnails:
HTML Gifs vs. Jpegs
Gifs are best used for banners, clip art, and buttons. The main reason for this is that gifs can have a transparent background which is priceless when it comes to web design. On the down side, gifs are usually larger files, not as compressed as a jpeg, which calls for slow load times and large transfer rates. Gifs are also limited to the 256 color scheme.
Jpegs however, have an unlimited color wheel, and have a high compression rate downsizing your load times and saving hard drive space. Jpegs don't allow for transparent backgrounds, but their size/quality ratio is outstanding. Its best to use Jpegs for photo galleries, or artwork to allow the viewer to catch that extra bit of detail. Avoid Jpegs for graphical design, stick to using them for thumbnails and backgrounds.
Comments