Via Line25.com

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=https://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">

      <!--this is the section on how I found billie -->
      <div class="column">
         <h1>How it Started</h1>
         <img src="https://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="https://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="https://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="https://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.

Source : https://resources.bravenet.com