Preview

04 - Adding images or animations

 1. Adding images or animations into a webpage is not possible using HTML. Web pages can only display text.
Note: You can use the blank HTML Trinket to try things out yourself as you take the test.

  TRUE

  FALSE

 2. What is wrong with the following code which seeks to display the image "pig.jpg"?
<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
<img ="pig.jpg" alt="Pig" width="500" height="333">

</body>
</html>

Option 1: There is nothing wrong - it will work fine


Option 2: The second line should be: <html - image>


Option 3: The line that defines the image should be: <img source of pic="pig.jpg" alt="Pig" width="500" height="333">


Option 4: The line that defines the image should be: <img src="pig.jpg" alt="Pig" width="500" height="333">

  Option 3

  Option 4

  Option 1

  Option 2

 3. When defining an image, the 'src' attribute specifies the:

  the source (which means the no. of pixels used) of the image

  URL (web address) of the image

  location of the image on the screen when displayed (e.g. the coordinates)

  resolution of the image (e.g. how many bits are used to create it)

 4. The 'alt' attribute provides an alternate text for an image, if the user for some reason cannot view it (e.g. due to a slow connection)

  TRUE

  FALSE

 5. Ideally,the value of the alt attribute should__________________________

  define the size of the image

  frame the image in black

  describe the image

  delete the image

 6. You can use the ______attribute to specify the width and height of an image.
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

  image

  source

  byle

  style

 7. If not specified, the browser expects to find the image in the same folder as the web page.

  TRUE

  FALSE

 8. It is common to store images in a __________. You must then include the folder name in the src attribute:
Source: www.homeandlearn.oc.uk

  different web page

  random location with a random name

  sub-folder

  notepad file

 9. In this example, if the main page is 'index', and the image "ttio.gif" was stored in the images folder, what would the path be?
Option 1: <img src="ttio.gif" alt="TTIO ICON" style="width:128px;height:128px;">

Option 2: <images folder="/images/ttio.gif" alt="TTIO ICON" style="width:128px;height:128px;">

Option 3: <img src="images older = ttio.gif" alt="TTIO ICON" style="width:128px;height:128px;">

Option 4: <img src="/images/ttio.gif" alt="TTIO ICON" style="width:128px;height:128px;">
htmlfoldersstructure.gif

  Option 1

  Option 4

  Option 2

  Option 3

 10. HTML also allows animated GIFS (moving images)
<!DOCTYPE html>
<html>
<body>

<h2>Animated Images</h2>
<p>The GIF standard allows moving images.</p>

<img src="programming.gif" alt="Computer man" style="width:48px;height:48px;">

</body>
</html>

  FALSE

  TRUE

 11. To create an image that was also a hyperlink, you would _______________________
<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

  cut and paste the image into the notepad file you are working on

  put the'a' tag inside the 'img' tag

  put the 'img' tag inside the 'a' tag

  put the image itself in the page directly (by pasting it)

 12. The 'map' tag defines an image-map. An image-map is an image with clickable areas. In the example here from w3schools, the 'area' tags define ____________________
<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

  the areas that have been deleted from the image

  the map location (using GPS) of the person creating the image

  the google maps location for any given image

  the clickable areas in the image-map

 13. It is possible to add a background image in HTML. The following code shows it being done correctly.
<body style="background-image:url('clouds.jpg')">

<h2>Background Image</h2>

</body>

  TRUE

  FALSE

 14. What does the following code do?
<body>

<p style="background-image:url('clouds.jpg')">
...
</p>

</body>

  It adds a background image on the very bottom of the page and creates a random link

  adds a background image on a paragraph

  It adds a background image behind a single letter (e.g. the letter p)

  It doesn't do anything - you cannot add an image to a 'p' tag

 15. Is the following statement true or false?
Loading images takes time. Large images can slow down your page. Use images carefully.

  TRUE

  FALSE