Jan's Illustrated Computer Literacy 101 Logo:Jegsworks Jan's Illustrated Computer Literacy 101

Home > Jan's CompLit 101 > Working with the Web > HTML & CSS Basics > Images > Add More
Icon: Arrow - Previous pagePrevious    NextIcon: Arrow - Next page

Jan's Working with the Web

   Images: Add More Images

In this lesson you will add some more images to Hector's page.

To put spaces between the images requires using a special code for spaces,   since the browser will squish together all white space in the HTML code into just one space.

No spaces between images:


<p style="text-align:center;"><img alt="Butterfly" height="75" src="butterfly.gif" width="100"><img alt="Butterfly" height="75" src="butterfly.gif" width="100"><img alt="Butterfly" height="75" src="butterfly.gif" width="100"><img alt="Butterfly" height="75" src="butterfly.gif" width="100"><img alt="Butterfly" height="75" src="butterfly.gif" width="100"></p>

Four spaces between images:

Butterfly    Butterfly    Butterfly    Butterfly    Butterfly

<p style="text-align:center;"><img alt="Butterfly" height="75" src="butterfly.gif" width="100">&nbsp;&nbsp;&nbsp; <img alt="Butterfly" height="75" src="butterfly.gif" width="100">&nbsp;&nbsp; &nbsp;<img alt="Butterfly" height="75"
src="butterfly.gif" width="100">&nbsp;&nbsp;&nbsp;&nbsp;<img alt="Butterfly" height="75" src="butterfly.gif" width="100"> &nbsp;&nbsp;&nbsp;<img alt="Butterfly" height="75" src="butterfly.gif" width="100"></p>

In the HTML code any space between the code for a space &nbsp; and the next character counts as an additional space.

So in the source code  This is text&nbsp;     and here is more text puts 2 spaces between the words text and and. One space is from the special code for a non-breaking space and one is from all the white space squashing down to a single space on the page.

Icon Step-by-Step

Step-by-Step: More Images

 Icon Step-by-Step

What you will learn: to add spaces
to insert multiple images with space between

 Start withIcon: Class diskhector7-Lastname-Firstname.htm, resource files

Save As

  1. Icon: Class diskWith Notepad showing hector7-Lastname-Firstname.htm, from the menu select  File  >  Save as .
  2. Use the name   hector8-Lastname-Firstname.htm  to save the page to the web project2 folder on your Class disk.

Add Spaces

Shortly you will be inserting images of the two children, Ricardo and Rosa, on the same line as the image of Hector and Carla. You need some space between the images. In the browser it can be hard to tell how many spaces you have and why they are there.

TipImages wrap too: If the pictures need more space than the window allows, they will wrap just like text does. If the image is larger than the window at maximum size., the browser will show horizontal and vertical scrollbars, as needed.

  1. Click to the left of the IMG tag to put the cursor on the same text line.
  2. hector8 with spaces in front of IMG tag - NotepadPress the spacebar exactly 12 times.
    The existing text moves over to the right, of course.
  3. Icon: Class diskSave.
  4. hector8 in browser after adding spaces before IMG tag Switch to your browser and view hector8-Lastname-Firstname.htm.
    The image of Hector and Carla did not move over 12 spaces! Does it look like it moved over any at all? If you were watching very carefully, you saw the image move over just one space.

    TipCollapsing white space: Any sequence of spaces in your HTML code collapses to only 1 space when you view your page in a browser.

  5. hector8 with nonbreaking spaces in NotepadSwitch back to Notepad.
  6. Delete the blank spaces to the left of the IMG tag.
  7. Type &nbsp;&nbsp;&nbsp; to the left of the  < that starts the IMG tag.

    Each &nbsp; creates a space that will show in the browser.

    The letters for this code come from the words non-breaking space. You can create as many spaces as you like with this code.

  8. Icon: Class diskSave.
  9. hector 8 with nonbreaking spaces in browserSwitch back to the browser and Refresh the window.

    The image scoots over 3 spaces. This is enough to see

    Hurrah! You have learned a way to precisely control the white space in a line of text or images.

    Icon: Trouble Problem: Image did not move over
    Check the Address bar. Are you viewing hector8 or are you still showing hector7?
    Solution: Edit the address to show hector8-Lastname-Firstname.htm from your Class disc.

  10. Icon: Class disk Save.

Insert More Images with Space Between

Now you can insert the photos of Ricardo and Rosa.

  1. Switch back to Notepad.
  2. Click in the line with the IMG tag to put the cursor in that line.
  3. Cursor is at the right of the IMG tag and there are no extra spaces beyond it. (Notepad)Press the END key to be sure the cursor is at the end of the line with the photo.
  4. If the cursor is not directly to the right of the final > in the IMG tag, delete the extra spaces.
  5. Press the space bar once.
  6. Add the photo of Ricardo using the path for the source HTML/ricardo.jpg
     <img src="HTML/ricardo.jpg">
  7. Press the space bar once after the new IMG tag.
  8. Add the photo of Rosa.
    <img src="HTML/rosa.jpg">
    Code for 3 images (Notepad)
  9. Icon: Class disk Save.
  10. hector8 with three images - Too large to see (browser)Switch to your browser and Refresh.
    Whoops. The pictures of Ricardo and Rosa do not fit on the line with Hector and Carla.
    To resize this with code (not the best plan) you need to know the original sizes and do some arithmetic.
  11. Open or return to a File Explorer window that shows the contents of your Class disk - the folder HTML.
  12. Click on ricardo.jpg and find its dimensions.
  13. Find the dimensions for rosa.jpg.
  14. Calculate new dimensions that are half of the originals for both images.
    (Just divide the width and the height by 2.)
  15. Return to Notepad and add the width and height attributes to the image tags. Use the values you calculated.
    Note, if you mix up the width and the height, the image will be deformed.
  16. Two images resized half (browser)Icon: Class disk Save.
  17. Return to your browser and Refresh

    Hmm. Not very attractive yet! Ricardo's picture is way too tall and Rosa is too tiny.

Resizing with a graphics program gives you more control. Smaller files reduces the download time also. You will fix these pictures in a later lesson!