Displaying Text & Images - HTML for Garden Geeks

Poncirus trifoliata ‘Flying Dragon’

Image courtesy of Landscapedia.info

Previously :: Part 1 |Part 2

Now in our previous 2 lessons, you learned about the basics of HTML structure. Today, we are going to create a basic version of our example to the right.

If you recall, we first have to set up our island of text that all other text is going to flow around. To set up a new island, we start with:

<div></div>

 This tells the computer that everything inside here is it's own thing independent of the rest of the page. Now let's add our picture by using the img tag.

<div><img src="http://www.landscapedia.info/images/plant_images/Poncirus_trifoliata__Flying_Dragon_Flying_Dragon_Hardy_Orange.jpg" /></div>

If you look inside the img tag, you will see something new, src which simply means source. If you look at the text we put in the quotations, it's a web address to the picture we want to use. We've told the computer to set us up an island of content and put inside of it a picture from a certain web address.

Now, behind the img tag, we can add a paragraph of text with

<p>Poncirus trifoliata 'Flying Dragon'</p>

Also, another paragraph citing the image source.

<p>Image courtesy of Landscapedia.info</p>

So now our entire code is

<div>
<img src="http://www.landscapedia.info/images/plant_images/Poncirus_trifoliata__Flying_Dragon_Flying_Dragon_Hardy_Orange.jpg" />
<p>Poncirus trifoliata 'Flying Dragon'</p>
<p>Image courtesy of Landscapedia.info</p>
</div>

 If you click on Edit HTML (or similar function) on your draft blog post, type that in.  You should see

Poncirus trifoliata 'Flying Dragon'
Image courtesy of Landscapedia.info

Looking at this, it looks very different from our finished example. Tomorrow, we are going to start formatting it so that it looks more like our example.