Graphics



Graphics Besides hyperlinks, the other great advantage of the Web is the ability to integrate graphic images into a document. Some would argue that this represents one of the greatest strengths of the Web. Graphics are certainly used as heavily as hyperlinks, and represent most of the data which is transferred, so it's fitting that we spend some time discussing them. Again throughout this lesson, students are required to practise the new tags in their own documents. You will be asked to e-mail the files as attachments in the training report sheet below. If you are unable to make your own .gif or .jpeg files it is possible to take any image off the Web. Visit a site that has graphics you would like to use. To save an image you must click down on the image keeping the mouse button down (for PC users you must use the right hand button), you will be presented with a pull down menu. Select the save image as option and then follow the instructions to download the file. Make sure that the file is in a directory that you can direct your html links at easily. We would recomend placing all your html and image files together for the purposes of these exercises. IMG Tag Images are placed in Web documents using the IMG tag. This tag is empty, and therefore has no closing tag. The basic form of the image tag is <IMG>, but just like <A>, <IMG> by itself is pointless-- it will do nothing. Visually speaking, images are part of a Web document, but in reality an HTML file and any graphics it refers to are actually all separate files. These files are all stored on a Web server, but don't have to all be in the same exact place. (Often, server administrators will set up separate directories for pictures.) In order to make the IMG tag work, you need to use an SRC attribute. SRC stands for "source," as in, "the source of this graphic." (One way to read a typical image tag is "image source equals..." You'll see what I mean in a minute.) The value of SRC is the URL of the graphic you want to have displayed on your Web page. Thus, a typical image tag will take the form: <IMG SRC="URL of graphic"> The URL of the graphic is just like the URLs used in the anchor tag (see previous session), except in this case the location used is that of the graphic file. A graphic named "blat.gif" located in the directory "pics" on the server "www.site.edu" would have the URL http://www.site.edu/pics/blat.gif. You can use either relative or full URLs to refer to the graphic file. In relation to the text, the browser puts a graphic wherever an image tag occurs in the document. It will do this as though the graphic were just another piece of the text (which, in a certain way, it is). For example, if you put an image tag between two sentences, the browser would show the first sentence, then the graphic, and then the second sentence right after the graphic. Thus... Here is my dingbat<BR> <IMG SRC="vroom3.gif"><BR> Its great is'nt it? ...will look like this: Here is my dingbat Its great is'nt it? Images can be placed almost anywhere within the body of the document. They can be between paragraphs, within paragraphs, in list items or definition-list definitions, and even within headings. Take a look at a few examples. Placing images within links is also possible. To do so, merely place the IMG tag within the anchor container. For example: <A HREF="http://www.site.net/"> <IMG SRC="generic-image.gif"> </A> You can also mix in text to either side of the image, or both sides: it doesn't matter. Let's say that you wanted to put a link to a copyright notice, and you wanted to draw attention to the link with a small warning symbol. It might go something like this: <A HREF="tcopy.htm"> <IMG SRC="warning.gif"> Unauthorized duplication is prohibited! </A> The above markup would then appear as: Unauthorized duplication is prohibited! As you can see, if you do include text within the anchor container, then it will be a part of the anchor along with the image. There are two other attributes to the IMG tag which should be discussed. Both are less frequently used than SRC (because SRC is so essential) but each is important in its own way. ALT The ALT attribute is used to define "alternate text" for an image. The value of ALT is author-defined text, enclosed in double-quotes, and ALT text can be any amount of plain text, long or short. To pick one of an infinite number of examples, a warning symbol could be marked up as follows: <IMG SRC="warning.gif" ALT="Warning!!!"> This ALT text will have no effect whatsoever in a graphical browser with image loading turned on. So what's the point? ALT improves the display and usefulness of your document for people who are stuck with text-only browsers such as Lynx, or who have turned image loading off. Since these users cannot see graphics, the browser will substitute a marker such as "[IMAGE]" for any image tag. This is, in effect, a placeholder, but a frustrating one, since there isn't any way for the user to tell what the image is, or what it says, or what its purpose is. However, if ALT text has been defined, the browser will display that text instead of the placeholder. This makes the display a lot nicer and more useful for users who can't or don't want to see the graphics, and doesn't affect users who can see graphics at all. A common trick to make image placeholder disappear in text-only browsers is to set the ALT text to be a single space: <IMG SRC="generic-image.gif" ALT=" "> In addition to character-based browsers, some graphical browsers will use the ALT text if automatic image-loading has been turned off. Therefore, ALT is really more of a consideration to the reader than it is a necessary component of the image tag, but it is still important to the design of any intelligently constructed Web page. ALIGN As was pointed out in Example 1, a lot of vertical space can be wasted when graphics are integrated into paragraphs. This is because ordinary HTML 2.0 does not support anything which allows for multiple lines of text flowing past a graphic. However, the text can be shifted within the vertical space which is created by the graphic. In addition to having the text lined up with the bottom of the graphic, you can align it to either the top or the middle of the graphic. This is accomplished using the ALIGN attribute, as in the following: <IMG SRC="generic-image.gif" ALIGN=top> This will cause the top of any text on the same line as that graphic to be aligned with the top of the graphic. There is also an ALIGN=middle option, which will align the text's baseline with the middle of the graphic, and of course ALIGN=bottom, which is the default display strategy for most browsers. Try it out for yourselves. Getting the Right Format The "universal" standard (at least for the near future) is the GIF file format. GIF stands for Graphic Interchange Format, and all graphical browsers use that format for in-lined images. While this may change to some degree in the future, for now, my advice is to use GIF files in order to ensure maximum cross-browser compatibility. The other main graphical file format that is used is JPG. This is equally compatable across browsers. training report sheet Please use the above material to answer the following questions:- Email address Name 1 Graphics should be: used liberally seen and not heard in the Graphic Interchange Format 2 The ALT-text for the tag <IMG SRC=pic.gif ALT=Figure 1> is: pic.gif Figure 1 Figure =Figure 1 3 ALT text is: used in the place of primary text used in the place of a graphic in a non-graphic browser something Dan wrote 4 The relative position of text to a graphic can be changed using: the ALIGN attribute the SRC attribute sheer force of will a cattle prod 5 Send an e-mail to dingbats@mcr1.poptel.org.uk and attach the html and image files you created in this session. (see Attaching a File to a Message)