In this session you are going to download a couple of graphics and place them into a web page and then investigate some of the <img> tag attributes.

You'll answer some questions as you go through in your blog and then paste the URL to the page you have just created into your blog. To make it easier, I have collected all the questions together at the end of this page - just go there, highlight the question text and paste it in to a new blog entry entitled Graphics and HTML.

Since the best way to learn this stuff is to practice, when you have finished with the first graphic and captions you should go ahead and add a second graphic image with the same attributes except this time align it to the opposite side of the page to the first graphic.

1. Use Netscape to browse to the BBC sport web page www.bbc.co.uk/sport and in the search field type jason robinson and press [Enter] - he's the full-back in the England rugby aka "Billy Whizz".

2. Choose this link:
   Jason Robinson
   A profile of this player for the 2003 Rugby World Cup

3. Right-click on the graphic, choose Save Image As, browse to H:\www and create a new folder called graphics (remember to press [Enter] once you have created the folder). Open this folder and Save.

4. Open up H: folder and drag the address icon into it
   .

5. Return to the results page and choose another Jason Robinson link - eg Robinson ready for big test.
   Repeat the process to save graphic and link.

1. Start up Dreamweaver and configure as normal. Make sure that the Properties pane is visible (Windows —> Properties).

2. Choose the test site from the Files pane or, if it ain't there, create it from scratch (Site —> New Site).
   Create a new page and title it Rugby Photons
   Save in a file called rugby_pics.htm in H:\www.

3. Click on Show Code/Design View button.
   
   Now the code is shown in the top window and it's rendering in the bottom.

4. In the Code View window make a level 2 header <h2> with the text Rugby Pictures

5. Now click in Design View panel and press [Enter]
   Observe in the Code View panel that a new paragraph is generated.

6. In the adjacent Files panel open up the graphics folder (click on the + box)
   now drag the icon for the Jason Robinson graphic from the Files pane into the Design pane underneath the heading.

7. Note the html code that's generated - View in popup window

   Question 1: In the img tag what do the attributes width and height represent?
   What units are they in?

You are now going to do several things with this graphic:

1. Give the graphic a name and id. These can act as an anchor.
2. Add alt and title attributes. See what happens in the browser.
3. Change size of the display of the graphic and see the effect in the browser.
4. Change image alignment (left, right) to see what happens.
5. Add a URL link to the source site for the graphic.
6. Add a border to see the effect.
7. Change target to _blank and see how this makes a difference.
8. Add clear attribute to <br> to make text appear below graphic.

1. Name Graphic
   Select graphic in the Design pane.
   In Properties pane click in the box under "Image 16K" and type in Jason Robinson
   
   Note what appears in the Code View - you may need to scroll sideways to see it.
   Question 2: What attribute codes appear?

2. Alt and title attributes
   In the Alt: box type Jason gets stuck in (or similar text). Press [Enter]
   Unfortunately, there is no place in the Properties pane to type in a title so we'll do that in the Code pane.
   In the Code pane click inside the <img ..... > tag in a space between attributes.
   Hit the Space bar and choose title from the pull-down and press [Enter]
   Type in Jason's got the ball between the quotes " ... ". Make sure there's a space between the end quote and the next attribute.
   
   Save the file and display as a web URL in Netscape (here's the instructions if you can't remember what to do). Pass the mouse slowly over the graphic.
   Question 3: Which text appears as the pop-up. The alt or title text?

   Now open Internet Exploder and drop the address icon from Netscape into it. The page should appear.
   Question 4: Now which text appears as the pop-up. The alt or title text?
   So why does one need both alt and title attributes on a graphic?

3. Effect of changing width & heigth.
   Click on the graphic and write down the current width and height and it's size.
   Let's pretend that you'd rather have it smaller and that you yield to the temptation to change the W and H parameters. So, now type in a smaller number into W & H (eg W - 100, H - 55).

   Question 5:What's happened to the picture?
   Has the image size changed?
   What else gives you a clue that something's amiss (hint: what's different about the numbers in W & H) ?

   View in popup window

   To fix this just click the Rest Size button in the Properties pane.

4. Change Image Alignment.
   Click in Code View pane on the line immediatley below the <img> tag. Press [Enter] a few times to create some space. Insert a paragraph <p> and type a caption for the picture, somthing like Jason struggles mightily for England

   Question 6a: Where does the caption text appear?

   Now, in the Design pane select the graphic and in the Properties pane choose Align: right from the pulldown menu.
   Question 6b: What happens to the graphic and caption?

   Now choose Align: left
   Question 6c: Now what happens?

5. Add URL link to source page for graphic.
   Find the shortcut for this graphic what you saved on H:. Right-click on it and choose Properties.
   Select the URL and Copy (Ctrl-C).
   Back in Dreamweaver, click in the Link: box and paste in the URL.

   Question 7: What code gets added?

6. Border.
   In the Border box type 2. Save the file.
   Now switch to the Netscape tab with the web URL and reload.

   Question 8: What has changed about the graphic?

7. Target.
   In the Properties box pull down the menu and choose _blank. Save.
   Now go back to your page in Netscape and reload. Click on the graphic.

   Question 9: What happens when you click on the graphic (2 things)?

   Change the border back to 0 and save the file. View in popup window

8. Text below graphic.
   With graphic aligned left or right, click after the caption text and press [Enter]
   Add another paragraph of text He thinks that they'll do well in the rugby world cup.
   But what if you want this paragraph to appear under the graphic instead of next to it?

After the caption paragraph (& before the one what you just typed in) type the following tag:

<br clear="all" />

Note that the next paragraph is now below the graphic:

View in popup window

Paste these questions into a new blog entry (Subj: Graphic attribute Qs) and answer them as you go through the exercise.

Then paste the URL to the page you have just created into the end of this blog entry.
Forgotten how to do this? Check out the post entry section of Create Blog.

Question 1: In the img tag what do the attributes 
width and height represent?
            What units are they in?


Question 2: What attribute codes appear?


Question 3: Which text appears as the pop-up. 
The alt or title text?

Question 4: Now which text appears as the pop-up. 
The alt or title text?
So why does one need both alt and title attributes 
on a graphic?

Question 5: What's happened to the picture?
            Has the image size changed?
            What else gives you a clue that something's amiss

Question 6a: Where does the caption text appear?
Question 6b: What happens to the graphic and caption?
Question 6c: Now what happens?

Question 7: What code gets added?

Question 8: What has changed about the graphic?

Question 9: What happens when you click on the graphic 
(2 things)?

Go back to Top