Learning HTML for Kids!
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.
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-
.png file: portable network graphics (pronounced ping)
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-
By knowing the dimensions of your image, you can then indicate the height and width in your code. More on this below.
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:
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.
To help the browser identify and find an image, you use the following command:
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.
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.
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.
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:
You read through this whole chapter. Now let’s see if we can apply what we learned!