Step 5: Inserting a picture

Of course a web page does not simple consist of text but can contain all sort of content: pictures, graphics, audio files or videos. In this exercise you will add a picture of you to your website.

The picture should ideally have a width of 150 pixels. The height can be proportional. If you already know how to resize a picture make sure your picture has this width. If you do not know how to edit a picture don't worry and just use the picture as it is. For the sake of this exercise it is sufficient if you add any picture of you saved in the jpg-format.

For inserting a picture into your web page you will use the image source-tag <img src="filename.jpg">
The image tag has no end tag.

Instead of 'filename' you need to type the filename of your picture, e.g. christian_maurer_klein

Exercise:

1. Save your picture to your folder 'My Resume'.
   
   
2. Open your index.html file in the text editor.
   
   
3. Copy & paste the image source tag from above into your source code between the body tag and the font tag.
   
   
4. Overwrite 'filename' with the filename of your picture.
   
   
5. Save the file and then view it again in your web browser.
   
   
6. Your web page should now look similar to this example.
   
   
7. Can you see your picture on the web page? If yes, you can move on to step 6.