Images on a Web site come from external files. That means you need to copy an image into the same folder as your Web page page2.html (which you created on the page about HTML links). Do that now. Choose an image that is medium size and in one of the acceptable Web formats (jpg is safest for now). Call it pic.jpg.
Once your image file is there you need to add an element to the page2.html to tell the browser to show it. The element goes in the BODY of your page wherever you want the image to appear. For now put it in the middle of the second paragraph (maybe between the two sentences):
<p>Hello everyone this is my first Web page. <img src="pic.jpg" alt="my first picture" />Above is a title and this is a paragraph of text.</p>
There are a few things to notice about this image and its element. First is that there is no closing tag. This is one of the self-closing tags mentioned previously.
The next thing to notice is the attributes. The first is SRC= which tells the browser where to find the image file. The second attribute is ALT which tells the browser what ALTernative text to show if the image is missing or the user has chosen not to show it.
The third thing to notice is where the picture appears on the page. Save the file and look at it in a browser. The image will appear as if it was a piece of text but of course it is bigger than the text so it will mess up the text flow badly.
When CSS is introduced you will learn a number of ways for formatting images properly (using a DIV would be one). For now cheat by using another of the tags which do not need a matching closing tag. Add BR (break) tags to what is already there:
<p>Hello everyone this is my first Web page. <br /><img src="pic.jpg" alt="my first picture"><br /> Above is a title and this is a paragraph of text.</p>
At least now the image will appear on its own line. Save the file and view it.
That line of HTML is now a bit too long. Remember that line breaks in your code do not appear in the browser so you can safely break the line up. The breaks can go anywhere but some places make it easier to read than others:
<p>Hello everyone this is my first Web page.<br />
<img src="pic.jpg" alt="my first picture" /><br />
Above is a title and this is a paragraph of text.</p>
Get into the habit of breaking HTML code into manageable chunks.
