Adding Images

If you have followed the first page in the village webclub, the next step might be adding an image.

You could conect via ftp and upload images, but it might be simpler and more fun to use the terminal.

NB. I am very much working this out as I go along, there may be better ways.

steps

In this secanario I imaging you have made an index.html page and want to add an image. There are to steps, uploading an image to your space and adding the html fragment to add thatto your webpage.

Uploading an image

What suprised me about this was you do this without using ssh to log on to the server. You could log on in one terminal window to edit the webpage and have another window or tab open to upload files.

In my tilde space I've made a folder to keep my images in inside my public_html page. I did this by:

  1. logging on to the club
  2. moving into the public_html folder: cd public_html
  3. Creating an images sub folder: mkdir images

Uploading the image

I have an image on my desktop called logo.gif:

  1. I open a terminal window and type scp
  2. I drag the gif into the terminal window and drop it, the line of code now reads:
    scp /Users/john/Desktop/logo.gif

    3. I finish the line with my logon details for the club and the path to where I want the file to go:
    scp /Users/john/Desktop/logo.gif johnjohnston@ds106.club:/home/johnjohnston/public_html/images/

  3. I press return and fill in my password.The file uploads.

Adding the image to your page

  1. I log on to the ds106.club and move into the public_html folder (cd public_html).
  2. I edit my index.html file nano index.html
  3. I need to movethe cursor with the arrow keys to the place I want to add my image.
  5. I type <img src="images/logo.gif">
  6. I write out my page with control-o, I do not close nano until I've switched to the browser and checked my page.
  8. I can control-x and close nano and look at my newly improved page again.

Remember to make sure your quotes balance and you close your angle brackets.

and note we need to tell the browser the gif is in the images folder.

Be seeing you