Learning HTML for Kids!

What’s on this page?



 

Home Table of Contents The Code Resources About 


Chapter Eight

Images Part 1

What would a webpage look like without graphics? Pretty boring to say the least! There was a time when the Internet was filled with just plain, boring text. Remember, in those early days the Internet’s sole purpose was to exchange information. The real change came when designers added graphics. Nowadays, we’ve become used to seeing bright and colorful pages.

Some details

It wasn’t always so easy to place images onto a webpage. From the start, images were memory and space hogs. But during the past several years, designers have worked hard to keep image files small, while also increasing the quality of the artwork that appears on the Internet today.

Three file formats have been developed to help keep files small, while maintaining a high level of quality:


.gif files: graphic interchange format (pronounced like Jif peanut butter)

.jpg files: joint photographic experts group (pronounced jay-peg)

.png file: portable network graphics (pronounced ping)

Images in 72-96 DPI–Say what???

Images come in all sizes and shapes. There is a real difference between images for print and images for the screen. Digital images are created by combining thousands of pixels— those little dots that make up an image on a computer screen. In fact, the period is close to the size of one pixel.

Images should be saved at 72 or 96 dpi (dots per inch).


You can find the size of your image by placing your cursor over the image and then right-click (Windows) or control-click (MAC) on it and  select Properties. A dialog box will appear. Click the Details tab and there you will find the dimensions (size) and resolution (dpi).


By knowing the dimensions of your image, you can then indicate the height and width in your code. More on this below.

The Image tag <img>

To place an image onto a page you will need to use the image tag. There are two very important things to remember about the image tag:

  1. It’s an empty tag (remember, that means there’s no closing tag, only a beginning).
  2. It requires attributes to be effective.


Here is the syntax:


The image tag <img> has several attributes:


src= identifies the image and tells the browser where to get the image.


Height= & width= tell the browser the size of the graphic (speeds up the downloading process).


alt= gives alternative text for those who are not viewing their pages with images.



Let’s go through each one of the attributes in more detail.

SRC= attribute

To help the browser identify and find an image, you use the following command:


<img src="filename.gif">


How the browser finds your files.

I’d like to cover a couple of important things here. The name of your file is important,  such as your home page should always be named index.html. It is equally important to direct the browser to where the file is located. The browser will not show your image if it can’t find it.

 

The browser will first look into the main folder and seek out the html files.  The text will be loaded first and then the image files. The browser downloads all the easy stuff first (the text) and then the larger and more complex graphic files last. See Managing Files for more help.


Alt attribute
When an image cannot be displayed by the browser blank boxes will appear. The alt attribute lets the user know what’s in the picture by providing descriptive text.


The alt attribute also helps those who are blind or visually impaired. These folks use screen reader software programs that tell them what’s displayed on the screen. The alt attribute text gives them a “picture” of what is present on the page.

Height & Width attribute

When placing your images in the webpage, the browser looks for the height and width of your images. This is an excellent feature because it allows the browsers to set the space size aside while laying out the balance of the page. If you do not specify the size, the browser will stretch it or reduce it to fit.


As discussed above you can find the dimensions of your images in the image properties dialog box.

Image Hotspots

Instead of using text as a link (hotspot), it's very common to use an image. It's simple too! Just include the image tag within the link tag<a>.


Here’s the syntax:


<a href="http://www.domainname.com">

<img src="filename.gif"></a>


Amazing!

You read through this whole chapter. Now let’s see if we can apply what we learned!


Chapter Nine: Images Part II





Privacy Statement
Learning HTML for Kids
© 1999-2015 by Jill Jeffers Goodell 

Table of Contents 

IMages

DPI

<img>

scr=

height=

width=

alt=

Image hotspot