Summary: Now that we've seen how to put text on a page and adjust its style (color, size, etc.), we can get fancier and add images and links.
web browsers are happy to display a few different picture formats.
Web browsers are NOT always able to automatically show "psd" (photoshop) files nor "bmp" (bitmap) nor "tif" (tiff) images, so don't use these images. (Most image editing programs have a way to "save as" or "export" to create a jpg/gif/png for web use.)
Howto: make an folder/directory called "images" next to your html file and put some pictures in it. (You can drag pictures off of webpages and drop them onto your images folder.) Within the html file, add the following command:
<img src="images/dogs.jpg" width="384" height="256" alt="look like beagles!" />
I'm assuming your picture is called "dogs.jpg" and is 384x256 size. (You can discover its actual size by dragging the picture onto a browser, which will respond by showing the picture in a page that gives its dimensions in the little caption frame at the top of the window. PS: don't put blanks nor punctuation in the names of your picture files.)
Web browsers respond to an "a" (action) tag by highlighting some clickable text and jumping to another page when you actually click.
Howto: make another html file in the same folder/directory as your original page. (Easiest way is to go into an existing html page and save with a new name, and don't use punctuation nor blank spaces nor capital letters in that file name. For example, "Bob's page.html" is badly named, while "bob.html" is fine.)
Let's suppose I have a page called "index.html" and another called "bob.html". Within the HTML body of the "index.html" file, add the following command:
<a href="bob.html">PRESS HERE</a>
Voila! The index.html page will show a "PRESS HERE" which will be underlined and which will jump you to your other page, assuming you've spelled the other page's name properly and have put the other page in the same folder where index.html lives.
We can make a clickable ("hyperlink") picture with the following mess of code.
<a href="bob.html" title="this picture will really jump">
<img src="frog.gif" alt="green frog" width="33%" height="33%" />
</a>
Example:
