Tags - HTML for Garden Geeks

Poncirus trifoliata ‘Flying Dragon’

Image courtesy of Landscapedia.info

Before I start, I want to acknowledge all of those IT pros who are going to roast me for oversimplifying things. However, I promised you that I'd show you just enough without making your head hurt. If you digest this and want more, then at the end, I'll suggest a few excellent resources to take my simplistic explanations to the next level. Let's get started.

Previously :: Part 1

The code on this web page does 2 things. First, it tells your computer what to display.  That's the words and pictures you see. Second, and as important, it tells your computer how to display it. It's the how that makes the magic.

To build our call-out image to the right, you have to know a little (and I do mean very little) about how a web page is structured. Surrounding each piece of content is a TAG. Tags tell the computer the how.

It's also the tags that intimidate the hell out of people. So we are going to start slowly by explaining the 4 different tags used in our example. Remember that if you open it, you have to close it, just like the front door to your house.

<div></div> tags define a stand alone element in a page. For example, the entire call-out is content independent of the text you are reading now. It behaves in its own way allowing the rest of the page to flow around it. Think of these tags as establishing islands in the sea of content on a page. If you open a <div> at the beginning of an element, you close with a </div> at the end of the element to tell the computer the start and end of the element.

<p></p> tags establish paragraphs of text such as Poncirus trifoliata 'Flying Dragon' in our example. Or this paragraph of text. If you open a <p>, you close with </p> at the end of the paragraph to tell the computer you are done with this paragraph.

<img /> tags tell the page to display an image. You close the tag within itself with the / before the closing bracket.

<a></a> tags tell the computer that the enclosed text/picture is hyperlinked to another web page either on this site or another one. You close this tag after the link text.

This will make a lot more sense as we work through our example. Tomorrow in Part 3, we'll start with the basics to display an image and text.