Back to the basics pt5
Hopefully everyone has kept up with what we have discussed so far. Let’s look at some often used tags and css. The <div></div> is typically the most used tag. This get used a lot to divide structure and sequence information into formatting that makes sense. Want to insert an image, well we need the <img> tag. This on is a little different. A standard formatting would look something like this. <img src=”images/logo.jpg” id=”logo” class=”logoimg” alt=”A logo tagline” /> Notice there is no separate ending slash tag, its included there at the end. What we have is an instance of an image. We are telling the HTML to look in a folder called images for a file called logo.jpg. Spelling is extremely important here, since the instance name and actual file have to match exactly. We have given it an id of logo and a class of logopic. These are important in styling them using css. And finally, we have an alt specification. This is the “alternate” text value for the image. This should probably be a very short explanation of the image, since search engines can’t really see images, only text. To help loading time quicken, you may want to add width and height tags also, so the browser doesn’t have to scan the image and generate this information itself. You would simply add width=”200″ height=”150″ inside the tag (that will denote a length in pixels).
This is one way to insert an image file inside HTML. Another would be using the background reference from css. Any tag that can be set dimensions to, can also have a bg. You could create a div <div class=”logopic”></div>. With css, define the class and create a bg. It might look something like this.
.logopic {
background-image: url(images/logo.jpg);
width: 163px;
height: 69px;
}
Now I have told the browser that anytime it sees a div with a class of logopic, it needs to generate a 163 pixel wide 69 pixel high div and display the image logo.jpg as the background. Keep in mind that the default for a bg is to repeat both along the x and y (up and down) unless otherwise stated. So if I don’t want to create a checkered repeating picture of my image bg, I need to tell css- background-repeat: no-repeat;. Or if I want a pattern repeated across the width of the div- background-repeat: x; or from top to bottom, background-repeat: y;. This is telling the browser to repeat the image across the respective axis’. This is how you create repeating patters, like tile work on a bathroom floor. Repeating patters are great for saving space. It takes more time for the browser to load a 1000 pixel wide 100 pixel tall image of a gradient than to load a 1 pixel wide 100 pixel tall slice of the image and repeat it across 1000 pixel wide div. I hope this makes sense, you have to think about how the images is sliced and how the browser will be repeating it.
Well, there are two methods for generating images in HTML. There are a few others, but these are the most common. If I need to go in depth more regarding repeating bg, please comment back, and I will try to explain more.
