Anchored Links
Without links, the World Wide Web wouldn't be a web at all! To add a link... you will use the < a href="location" > opening tag and < /a > closing tag. Whatever appears between these two tags will become underlined and colored, and if you click on the underlined text it will send the browser to the location within the quotes.
Example of a link...
Visit Elemental Compass!
Visit < a href="http://www.elementalcompass.com/" >Elemental Compass< /a >!
If you are just linking to a page in the same directory as your current page, you don't need the domain, just the page name. If you have a page called contactme.html, you can use the code < a href="contactme.html" >Contact Me< /a >.
Note: Although links are usually used to send people to other web pages, you may also use links to send email to a specific address by using a location of mailto:user@host.
Example of a Mailto: Link...
Send email to Elemental Friends!
Send email to < a href="mailto:friends@elementalcompass.com" >Elemental Friends< /a >
If you want a link to open in a new window, add target="_blank" the end of the anchor tag, e.g. < a href="http://www.witchvox.com/" target="_blank" >WitchVox.com< /a >.
Example of a link opening in a new window...
Visit < a href="http://www.witchvox.com/" target="_blank" >WitchVox.com< /a >.
Adding Images
You may also add images (pictures) to your web page, as long as the image is in the .gif or .jpg (or .jpeg) file formats. You will not be able to use .bmp format files! The basic tag for in-line images is < img src="location" >. It is also recommended to add HEIGHT and WIDTH attributes to the IMG tag, which will allow the image to take proper proportions on a browser that is not currently viewing images. It is also recommended to use the ALT="what picture is" to tell a person what a picture is in case it is still loading or they are not viewing images. (The IMG tag has no closing tag!)
Basic In-Line Image
Example of a basic in-line image...
< img src="http://www.elementalcompass.com/images/ecompasslogo.gif" width="200" height="50" ALT="Elemental Compass" >
If your image is in the same directory as your HTML file, just use the image name. If your file is welcome.jpg, you can use < img src="welcome.jpg" > Then add the appropriate height, width, and alt attributes as mentioned above.
Combining Links and Images
Many times you may want to have an image that is linked, so that if someone clicks the image, the person will be taken to another page. This is rather simple- you just need to place the IMG tag within the A HREF tags. (< a href="location_of_link" >< img src="location_of_image" >< /a >) You may also use the ALIGN tags with images!
Example of a Linked Image
< a href="http://www.davesite.com/" >< img src="http://www.elementalcompass.com/images/ecompasslogo.gif" align="right" >< /a >
if you want the image to be linked without the colored link border, add border="0". Example:
< a href="http://www.elementalcompass.com/" >< img src="http://www.elementalcompass.com/images/ecompasslogo.gif" align="right" border="0" >< /a >
The CENTER tag and DIV tag
The center tag pretty much explains itself! The opening center tag is < center > and the closing center tag is < /center >. Whatever you put between will be centered on the current line!
Example of CENTER tag...
Center Works!!!
< center >< h1 >Center Works!!!< /h1 >< /center >
Note: Recently, the W3C (the group that decides on HTML standards) has recommended that when writing HTML, you use < div align="center" > centered text< /div > instead of the center tag. Although div does not work in many older web browsers, it works in virtually all recent versions of popular web browsers. The neat thing about div is that you can align both left and right in addition to center.
The BODY attributes
In HTML Basics you learned the BODY tag. The BODY tag has many attributes... here are the most useful ones...
- BACKGROUND="location_of_image" - Background image for web page. Example: If you have kitten.jpg in the same directory as your HTML file, use < body background="kitten.jpg" > to load it as your background image.
- BGCOLOR="#hexadecimal_here" - Hexadecimal Color Code for Background Color
- LINK="#hexadecimal_here" - Hexadecimal Color Code for Links (if left blank, most browsers default to blue.)
- VLINK="#hexadecimal_here" - Hexadecimal Color Code for Links the User has Already Visited (if left blank, most browsers default to purple.)
- TEXT="#hexadecimal_here" - Hexadecimal Color Code for Text Color
- Visit our HTML Color Chart in the Tutorial Section for help in choosing the right hex code for your color
If you are looking for special effects such as links without an underline, or links that change color when you move the mouse over them, you need to use CSS (Cascading Style Sheets) with your HTML code. Visit our CSS tutorials for more information.
| Red | Green | Blue |
|---|
| #FF0000 | #00FF00 | #0000FF |
