A Smarter Way To Learn HTML & CSS(2015)

23
Images

Images on a webpage are almost always one of three types: jpg, gif, or png. In each case, the three initials refer to the file extension that denotes the image format. The jpg format is best for photographs and for illustrations with many subtle colors. The gif format can be used for line drawings, illustrations with just a few colors, and images of text. Gifs offer transparency, meaning that the background color can show through wherever you want it to. Gifs can be animated. Unless you need animation, the gif format is rarely your best choice. The png format is better. It has the same general features as gif, but has no animation. It’s preferred over gif because it gives you higher quality than a gif and in a smaller file size. A smaller file size means pages load faster.

An HTML file tells the browser which images to place on the page and where to place them, but the images themselves aren’t part of the HTML file. They’re individual jpg, gif, or png files that can be stored anywhere on the Internet. In practice, they’re usually placed in a subfolder under the site’s main folder. The name most often used for the subfolder is “images.”

Let’s assume that your site’s images are in the “images” subfolder of your site’s main folder. This is how to place an image called “founder.jpg” on your page.

img src="images/founder.jpg">

img src stands for “image source.” It tells the browser where to find the image. An equal sign comes next. Then there’s the path and file name, all in quotes.

There is no closing tag.

In the normal flow of HTML code, an image will be placed on the page in the same location as it appears in the code. For example, in the following code…

<h3>Our founder</h3>
<img src="images/founder.jpg">
<p>Our founder is no longer with us, alas.<p/>

…the photo appears under the heading and before the paragraph.

You can, although often not legally, display an image from another website. In that case, you have to include the whole URL.

<img src="http://www.asmarterwaytolearn.com/surprise.jpg">

The following displays an image stored in the subfolder “pics” of my website.

<img src="http://www.asmarterwaytolearn.com/pics/loris.jpg">

Unless you tell it otherwise in your CSS file, the browser will place an image all the way over on the left. Later, you’ll learn how to place it where you want it—for example, in the center of the page.

Add an image to your HTML file:
http://www.asmarterwaytolearn.com/loris.jpg.

Save the file and display it.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-23-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/23.html