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

Using Images

Including Images in your Markup:

Well now that I have some content on my page, I want to include some images. Working with images is fairly straight-forward. In order for an image to appear on your web page, it has to be available online. This means that you should create a directory in your webspace called 'images' and you should upload all of your images there, then you can access them freely using HTML (see our tutorial on using FTP). The two favored formats for an online image is either .gif or .jpg (also called JPEG), but lately .png has also become somewhat standard.

Note: the ideal format for an image depends on how it was made. If you have an image that was made using a vector drawing program or has large blocks of continuous color, the best fit would be a .gif. If you are saving a photograph, your best fit would be a .jpg.

IMG Tag:

For a straight and simple insertion of an image into your code, use the following tag syntax:

<img src=http://www.yourDomainName.com/images/imageName.gif" alt="My website image" border="0">

The alt attribute is very important and should not be forgotten. It can be replaced with the title attribute and both give a description of your image in case it does not load for some reason. Both will also cause a 'tool-tip' or small text box to appear when a user's mouse hovers over your image, so you can add more descriptive information if you wish.

I have put the border attribute within the image tag because when an image is included in a link (which we will be covering a bit later on) it places a default border on the image. It is a good habit to code a border of 0.

We looked at padding, margins, and floats in the last tutorial. We can also use these style declarations on an image.

Let's look at our two column layout from the last tutorial and add some images using the <img> tag.

Here is the HTML:

<div id="wrapper">
<div style="width: 768px; background-color: #b6c39a; border: 1px solid #000000; border-bottom-width: 0px; text-align: center "><img src="http://photos.bravenet.com/166/366/683/3/4B3DA81507.gif" border="0"></div>
<!--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" style="float: right; margin-left: 5px;"> <p>It was a warm sunny spring day in Pedro Ohio 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" style="float: right; margin-left: 5px;"> <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 who 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> </div>

Since we have an embedded style sheet, I'm going to give those images a class name and take the inline style out.

<img class="billieImage" src="http://photos.bravenet.com/166/366/683/3/AF337E590C.gif" border="0">

I'll do the same for my div tag containing the header image:

<div id="header"><img src="http://photos.bravenet.com/166/366/683/3/4B3DA81507.gif" border="0"></div>

So my style rule for class name billieImage will be:

.billieImage { float: right; margin-left: 5px;}

But we learned a quicker way when we were dealing with Divisions and Paragraphs so let's use the same method for the '.billieImage' elements. I remove the class and style attributes from the IMG tag and use the class from the division named 'column'. My style declaration will look like the one for my paragraph.

.column img { float: right; margin-left: 5px;} - Much quicker and cleaner.  

The rule for id header will be:

#header {width: 768px; background-color: #b6c39a; border: 1px solid #000000; border-bottom-width: 0px; text-align: center;}

I will leave the header id alone as it defines only one instance and can't be grouped with the others.

Note: Why did I wrap my header image in a div? Well the width of my website is 770px, but my image was only 760px, so I added a div with the same background color and centered it. Just a little trick. I removed the bottom-border because there was already a top border on my navigation.

Background Images:

Let's take a look at using CSS to insert background images. The syntax for backgrounds takes advantage of the following properties in their respective order.
background-color, background-image, background-repeat, background-attachment, background-position.

We're going to style a background image on the <body> tag. Seeing as there is only one body tag in our document, I'm not going to give it a class, but rather refer to it directly. If you want different background images for different pages (which I do not recommend as people will think they're switching web sites - read our article on website design) then using a class would be a good way to differentiate between pages.

Here is our rule for the body tag:

body {background: #b5c69c url(http://assets.bravenet.com/common/images/resourcecenter/articles/htmlTutorials/img_36.gif) repeat;}

I have used the following properties in this order:

background-color; my hexadecimal code,
background-image; url(place the path to your image here),
background-repeat; if you want to show it only once or if you want it to tile in various ways.

Click on the links to see the different values available for each property.

NOTE: there is no period or number sign in front of a tag that is referred to directly.

You can, of course, use properties separately. For example I have now placed a background-color property on our two divs with the class .column. Our rule now looks like this:

.column { width: 355px; height: 400px; padding: 10px; border: 1px solid #000000; float: left; background-color: #b5c69c}

You can use the background style declaration on any element of your page. To find free background images or clip art look in our clip art section.

Content Dividers:

There are several ways to create a divider in your content. When I say divider, I mean something like this:

divider

This is an image, and you can insert it using the HTML tag <img>.

HR Tag:

Another way to create a divider is to use the HTML tag <HR> which stands for Horizontal Rule (read an article on the HR Tag).

Yet another way is to add a border-bottom property to your container element. You can style the border by using different values such as:none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.

Build Your Own!

Here is the code for my webpage. Since our last tutorial I have added a background image to the body of the page, a background-color to our two divs, two images using the <img> tag, and a <hr> tag with the class 'footer' to separate out my footer. I've highlighted them in red.

div style="float: right;">View the Page!
<!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;}
         .footer { clear: left; margin-top: 20px; color: #8e9675; width: 100%; height: 1px;}
      </style>
   </head>
   <body>
      <div id="wrapper">
         <div id="header"><img src="http://photos.bravenet.com/166/366/683/3/4B3DA81507.gif" border="0"></div>
         <!--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 Pedro Ohio 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 class="footer">
      </div>
   </body>
</html>

NOTE: I used a clear:left on my footer to stop elements from floating after my last div.

Now you do yours!