 |
|
If you would like to receive weekly emails with articles like this one, email Nora
Two Ways to Use Images for Websites
The two main ways to use images for websites are 1) as inserted images, 2) as background images. Any image can be used either as an inserted image or as a background image. However, the browser creates different effects with inserted images than it does with background images; so, they are usually different types of images. This handout will help you understand why they are different and how to read through the code of a website and find how the images are used.
1. Inserted images are an element on a web page. These images have their own tag and properties. The code for computer image in the upper left corner of this page is
<img src="../../Images/Logos/Laptop.png" alt="The Computer Gal Logo - Laptop with coffee and plants" width="125" height="101" hspace="20" vspace="3">
The image tag is img, everything else is a list of the properties of that image as it is used on this page. The first property is the address where the server can find the image to send it to the viewer. Only inserted images can have alt tag or spacing properties.
The addresses for nserted images can always be found in the HTML file by doing a search for img. For the ImageReady for the Web class, we will use the Examples below to see how this works.
2. Background images are properties of another tag. Background images are commonly used as properties for pages, tables, cells, and CSS layers. They are not their own elements; so, they are subject to the properties of the other element. For example, if the element is smaller than the image, that image will cut off. Or, if the element is larger than the image, the image will tile to fit the size of the element. This tiling effect is one of the reasons to use background images. Another reason to use an image as a background is that you can insert text or other images over the top of a background.
Two Ways to Code Background Images
Background images can be coded as HTML or as CSS. HTML backgrounds are an older way to code background images, but the method still works, and there are many sites with old code. For a new web developer, it may be easier to use HTML background images during the learning process. However, over time, it is considered "best practices" to set your background images in CSS.
Finding the code for a background image requires understanding of how HTML and CSS coding works.
1. When background images are coded as HTML, the property code is : background="path-to-file". Note that the "path-to-file" is not literal. It means that you have to use the folder and file address for your image. Here are some examples.
<body background="Images/WovenBackground.gif">
<table background="Images/WovenBackground.gif">
<td background="Images/WovenBackground.fig">
To learn more about HTML coding, click here.
2. When background images are coded in CSS, the code for the image could show up in one of three places: a) inline with the HTML code, b) at the top of the HTML file in an internal style, c) in an external style sheet. The CSS code for a background image looks like this:
background-image: url(path-to-image);
The code may also be in a property that includes a background color:
background: #669933 url(path-to-image);
To learn more about how CSS works, click here.
Three Locations for CSS Background Image Code
- Inline - the CSS code is listed as a style property in the HTML tag
<body style="background: url(path-to-image)">
<table style="background: url(path-to-image)">
This method should be used rarely because it breaks the consistency of the site. - Internal Style - the CSS code for an internal style is listed at the top of the web page in the <head>. That makes that style information available to the whole web page, but not to other web pages. So, when you find that code, it only applies to that page.
<style type="text/css">
<!--
body
{
background-color: #D6DD7D;
background-image: url(../../Images/Backgrounds/StripesLightGreen.gif);
}
-->
</style>
- Exernal Style - are in a file that is separate from the HTML file. The styles appear similar to the internal styles:
body
{
background-color: #D6DD7D;
background-image: url(../../Images/Backgrounds/StripesLightGreen.gif);
}
It is not unusual to find that the style code is not lined up like the examples above. For instance, some people do not put the { on a separate line from the other code. Or, they might just have the whole code on one line, but it still means the same thing to the computer. Lining up the code as above makes it easier for a person to read.
To find the External Style sheet
- Go to the source code of an HTML file
- There are two ways that a style sheet can be attached to a web page: linking and importing. For our immediate purposes they have the same result - they make the information in a CSS style sheet available to the browser.
- The import method is an older method. Netscape Navigator could only use this method.
<style type="text/css" media="all">
@import "/001/001.css";
</style>
- The second case uses the linking method:
<link rel="stylesheet" href="/styles2.css" type="text/css">
- Notice that in both cases, part of the address is given: /001/001.css /styles2.css These addresses are "relative." That means that they don't have the full web address with the http://domainname.domain ... . However, you can figure out the address from them. In the case of the first example, the reason that there is a / in front of the folder/file information is that the style sheet file is at the root level of the web site. That means that you can go to http://csszengarden.com/001/001.css to get the style sheet. Using that information and your knowledge of relative links from previous classes, you should be able to find the CSS file on most sites.
Exercises to find Images
Each group take one site, listed below. Try to find at least one of the following in the code: 1) a background color, which is not created with an image, 2) a background image which is a picture, 3) a background image which adds dimension and interest to the page, 4) a background image in HTML code, 5) a background image in an internal style sheet, 6) a background image in an external style sheet, 7) the code for a delimiter, 8) a plain inserted image.
© 2011, Nora McDougall-Collins