What is a picture that is not part on the HTML file?

It's an external resource! It's likely going to be one of 3 file formats, the Joint Photographic Exchange Graphic (JPEG) format, the Compuserve Graphics Interchange Format (GIF) or the Portable Network Graphic Format (PNG.)

JPEGs are compressed with a lossy algorithm (meaning the compressed data cannot be recovered.) This keeps them small, while still maintaining Excellent quality. JPEGs are most often used for photos.

GIFs are a 256 color, lossless compression file. You only get 256 color, but one can be transparent. GIFs are best used for simple drawing, like icons and buttons. GIF can also be animated

PNG is a 16 million color lossless compression file that was built as replacement for GIF. This format allows for both pure transparency, as well as alpha level transparency. This transparency allow for effects like shadows. You can also put pictures in PNG, but they almost never compress as well as a comparable JPEG.

To use the external file on a webpage, you simply use the image tags source attribute to point to the address of the file:

<img src="http://www.example.com/i/logo.png" alt="AJS" />

Viola! You can also use relative addressing. So if this were my homepage, I could instead code as:

<img src="i/logo.png" alt="AJS" />