How to Find Images in Website Code

0
8

Note: while this article shows you how to isolate the images on anyone’s website, it is against copyright law for anyone to actually copy  those images for their own website without express permission to do so. Please use this article as a  tool to further your understanding of images for the web only!

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, a browser creates different effects with inserted images than it does with background images; so, they are usually different types of images. The following 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. An example of the code for an inserted image is:

<img src="../../Images/Logos/Laptop.png" alt="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 (src) 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.

You can find the code for a webpage you are viewing in your browser by going to View -> Source (or Page Source). The addresses for nserted images can always be found in the HTML by doing a search (Ctrl + F) for 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.

</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;

    

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);

Three Locations for CSS Background Image Code

1. Inline – the CSS code is listed as a style property in the HTML tag    

    

This method should be used rarely because it breaks the consistency of the site.

2. Internal Style – the CSS code for an internal style is listed at the top of the web page in the . 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.

&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;

3. External 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.

@import “/001/001.css”;

– The second case uses the linking method:

– 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://domainname.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.

Conclusion

At first, learning to read all these different types of coding is a real puzzle, but if you practice on various sites, you will start to see the patterns!

Source

Leave a Reply