Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

HTML/CSS Tutorials

Hyperlinks

A (Anchor) Tag:

To create a link, we use the anchor <a> tag. Don't be confused by the <link> tag which we discussed earlier. This is the syntax:

<a href="http://www.thePageYouWantToLinkTo.html">Click here to view my photos</a>

'A' stands for anchor and 'HREF' stands for Hypertext REFerence. As with any HTML tag it is very important to close the tag. If you forget to close your anchor tag, the rest of your document will appear as a hyperlink.

E-Mail Links:

<a href="mailto:yourname@yourdomain.com">yourname@yourdomain.com</a>

An e-mail link works like every other link except instead of http:// you use mailto: and then your email address. Between the open and closing <a></a> tags you can enter whatever you would like your users to click on. When your users click the link their mail program will open with an e-mail addressed to you.

NOTE: There is no space between the colon and your e-mail address.

You can also add a default subject line to your e-mail by adding '?subject=insert your subject line here' after your email address like this:

<a href="mailto:yourname@yourdomain.com?subject=insert your subject line here">Email Me</a>

CSS for links:

You can style your links inline, if you wish, but it is much easier to do in an embedded or external style sheet. CSS provides four pseudo-classes which allow you to apply styling rules to different states of an element. Here are the four pseudo-classes, as applied to links, and what they define:

  • a:link - defines the default style of your link
  • a:visited - defines the style of your link after the user has already clicked it
  • a:active - defines the style of the link while someone is actively clicking on it
  • a:hover - defines the style of the link while the user's mouse is hovering over it.

You can do a lot to your links with CSS, including creating navigation for your website. A navigation is, by definition, a list of pages on your website. Further along we will style these links to be a part of a list, but for now, we will simply style them the way we would like.

So let's create some straight-forward links for our website pages:

<a href="index.html">Home</a>
<a href="aboutUs.html">About Us</a>
<a href="contactUs.html">Contact Us</a>
<a href="favoriteLinks.html">Our Favorite Links</a>

Now let's define our pseudo-classes with CSS:

a:link {font: bold 12px arial, sans-serif; color: #5e6151; text-decoration: underline;}
a:visited {font: bold 12px arial, sans-serif; color: #5e6151; text-decoration: none;}
a:hover {font: bold 12px arial, sans-serif; color: #af0b1c; text-decoration: underline;}
a:active {font: bold 12px arial, sans-serif; color: #af5962; text-decoration: none;}

Now, by default people will identify my links because they are a different color, they are bold, and they are underlined. Once they have been visited I style them to blend back in a little by removing the underline (text-decoration: none;). When a user's mouse hovers over a link, I have styled a nice maroon-red to grab their attention; and when they are actively clicking on my link I have given it a different color, with no underline - this way they know they have clicked in the right spot and not missed it.

Open a link in a new window:

Let's consider some scenarios where you would like your link to open in a new window - easy. All you need to do is add the target attribute to your anchor like this:

<a href="http://www.thePageYouWantToLinkTo.html" target="_blank">Click here to view my photos</a>

By adding the target="_blank" attribute; our link will open in a new browser window.

Note: There are five different values you can pass through the target attribute but for now, we will only use _blank.

What if we want more control over the opening window? For example, we have a small timetable or map that we wish to open in a new window, but we still want the user to see our main window behind. In this case we want to control the width and height of our new window. We will need to use a little bit of client-side javascript to do this.

This is the syntax for opening a new, controlled, window:

<a href="javascript:void(0);" onClick="window.open('theUrlOfYourNewWindow','theTitleOfYourNewWindow');">Click</a>

You will notice that in the href attribute we have 'javascript:void(0);'. By using the javascript void(0) operator we tell the browser not to load a new page. The operator returns a value of null. We use the 'onclick' event handler to stimulate the launch of a new window.

In the onclick event handler we see a javascript function which calls the creation of a new window via: window.open(). Within the parentheses we have a list of parameters which must be included in this order:

the link url in single quotations; a comma; the title of the window in single quotations; another comma; a list of features separated by commas and enclosed in single quotations.

You should not include spaces in any of these parameters. For the third part of our window.open() function we can include features to enhance our window. Here is a list of the features you can include, but you don't have to use them all, just make sure you're using the right syntax. By default most of these features will be set to 'yes'. You can enter the word 'yes', the number '1', or just the name of the feature to turn it on; conversely you can enter the word 'no' or the number '0' to turn a feature off.

  • a menubar
  • a toolbar
  • the location bar
  • the directories bar
  • a status line
  • scrollbars
  • allow the window to be resized
  • width (in pixels)
  • height (in pixels)
  • alignment from the left of the screen
  • alignment from top of the screen

Let's see it in action:

<a href="javascript:void(0);" onclick="window.open('http://www.yourURL.com','new_window','toolbar=1,location=1,directories=1,status=1,menubar=1,scrollbars=0,resizable=0,width=500,height=300')">Open my new window</a>


Build your Own!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <title>My dog Billie-Mae</title>
      <meta name="keywords" content="billie-mae, dog, mutt, canine, pet, friendship, animal, rescue">
      <meta name="description" content ="Pictures and stories about my dog Billie-Mae and the funny things she does">
      <meta name="author" content ="Andrea">
      <meta name="copyright" content ="Copyright ? 2006 Andrea">
      <link rel="stylesheet" type="text/css" href="css/billie-style.css">
      <style type="text/css">
            body {background: #b5c69c url(http://assets.bravenet.com/common/images/resourcecenter/articles/htmlTutorials/img_36.gif) repeat}
            #header {width: 768px; background-color: #b6c39a; border: 1px solid #000000; border-bottom-width: 0px; text-align: center;}
            .column { width: 355px; height: 400px; padding: 10px; border: 1px solid #000000; float: left; background-color: #b5c69c}
            .column p { font: 12px arial, sans-serif;}
            .column img { float: right; margin-left: 5px;}
            h1 {width: 355px; font: bold 16px arial, sans-serif; color: #af0b1c; border-bottom: 1px solid #af0b1c}
            #wrapper {width: 770px; font: 12px arial, sans-serif; margin: auto;}
            a:link {font: bold 12px arial, sans-serif; color: #5e6151; text-decoration: underline;}
            a:visited {font: bold 12px arial, sans-serif; color: #5e6151; text-decoration: none;}
            a:hover {font: bold 12px arial, sans-serif; color: #af0b1c; text-decoration: underline;}
            a:active {font: bold 12px arial, sans-serif; color: #af5962; text-decoration: none;}
      </style>
   </head>
   <body>
      <div id="wrapper">
            <div id="header"><img src="http://photos.bravenet.com/166/366/683/3/4B3DA81507.gif" border="0"></div>
            <!--here is my unstyled navigation -->
            <a href="index.html">Home</a>
            <a href="aboutUs.html">About Us</a>
            <a href="contactUs.html">Contact Us</a>
            <a href="favoriteLinks.html">Our Favorite Links</a><br><br>
            <!--this is the section on how I found billie -->
            <div class="column">
                  <h1>How it Started</h1>
                  <img src="http://photos.bravenet.com/166/366/683/3/F88EB5A65E.gif" border="0">
                  <p>It was a warm sunny spring day in <a href="javascript:void(0);" onclick="window.open('map.html','PedroOhio','toolbar=0,menubar=0,location=0,directories=0,staus=0,scrollbars=0,resizable=0,width=400,height=400,top=100,left=100');">Pedro Ohio</a> when a colleague and I went to a local farm to ask if we could do some surveys on the <em>'crick'</em> that ran through the back of their property. </p>
                  <p>The farmer who owned the land approached us with a jocular, gap-toothed smile and asked us do y'all like puppies?. I responded with a tentative "yyeeesss -why?". "Well..." he said, "my girlfriend found this puppy out in the back forty, and I'm a gonna have-ti shoot it... that is... unless you want it." I responded immediately with "don't shoot the little puppy, I will come back for it at the end of the day."</p>
                  <p>This is the story of how I found Billie-Mae. When I went back to pick her up she was a tiny five week old puppy, bloated with worms, covered in lice, ticks and fleas, starving, with a puncture hole through one eyeball.</p>
            </div>
            <!-- this is the section on how she turned out -->
            <div class="column" style="margin-left: 16px;">
                  <h1>How it Turned Out</h1>
                  <img src="http://photos.bravenet.com/166/366/683/3/AF337E590C.gif" border="0">
                  <p>With time and care and a lot of flea baths, Billie's hair grew back in the soft velour of most puppies. The local vet told me that she was a very special dog because of her genetic history. The story in that area is one of dog over-population due to a general lack of spaying and neutering. </p>			
                  <p>Dogs run wild <em>-literally</em>. According to the vet, Billie-Mae is about a sixth generation wild dog. After this period of interbreeding and feral living she has become just like many other dogs in the world that are feral. They develop common characteristics such as medium height, stocky chest, pointy ears and curly tail. I like to call her my "Yankee Dingo".</p>
                  <p>Apart from a few allergies she has turned out to be quite healthy and vivacious despite her rough start.</p>
            </div>
            <hr style="clear: left; margin-top: 20px; color: #8e9675; width: 100%; height: 1px;">
            <a href="mailto:myemail@addie.com">Email me</a>
     </div>
</body>
</html>

Note my changes resulting from this tutorial in red.

Now you do yours!