Put simply, an Attribute is something that describes part of a Tag. If you're thinking "So Tags describe HTML parts, and THEY have smaller pieces called attributes that describe smaller parts of them? Why does this have to be so complicated?" Fear not, it really isn't a big deal. Think of anything, lets say Tennis for example. Tennis involves a ball, which could be a Tag if there were a markup language to describe the sport. That ball would then have things that describe it, like green color, it's texture, etc. That's really all attributes are for.
So let's see an example. I'm going to toss another tag your way:
<img />
This is a tag for an image, or picture. By itself, it really can't do much. Imagine if you had to interpret this code yourself as a page, you wouldn't even have any instructions about what image to put there would you? Well browser's aren't magic, and they don't either. That's where are attributes come in. Let's add one to this tag.
<img src="tennisball.png" />
Hey, Now we have a picture!
In this example, the src (short for "source") attribute in the img tag tells the browser where to find the picture that's supposed to be there. Of course, your browser has no idea what a tennis ball is either, so I drew a quick picture with my favorite image editor to show you an example. I named the new picture file tennisball.png, and if this picture was in the same place as your web page, the browser would know to put this picture in that image tag in the HTML document.
Before we move on though, I need to address a couple of things I threw at you besides a tennis ball you might not have been expecting. First, I discussed the opening and closing tags in my last post, but the <img /> tag I just showed you doesn't have a separate closing tag. That's because some pieces of the page are self-contained and don't need well defined start and end points. We told the browser we want an image with the tag, told it WHAT image with an attribute, and there's nothing else we need to put there, so there's no need to have another tag to close it. The second thing is, I did in fact close it in a way by ending the tag with the /> instead of just >. This is a good coding practice I encourage you to follow: always close your self-contained tags with a slash like />. Many browsers will read <img src="..." > without the closing slash just fine. However, there are some OCD browsers out there that will throw a bad temper tantrum if they see a tag that isn't closed. I don't like it when my computers throw a tantrum, and I don't want to give it another reason to. YOU really don't either, but you REALLY REALLY don't want your site's viewers' computers to give them any problems when they surf your page. So make yourself get in the habit of putting the slash there to ensure a more peaceful interaction with our machines.
Ok so let's review the basic anatomy of an attribute. We have our tag, and then attributes which follow it, like <tag attribute="value" ...
Notice that there is the attribute's name, such as src, and then an equals sign, and then we put our value in quotes.
Let's see another example, this time we'll do a link. Now if you're reading this blog and you are indeed new to the world of web design, I must warn you: There is a <link tag, but trust me, it doesn't do what you think it does. I'll discuss that one later. What you know as a link is called an "anchor" in a document, but it would be too much to keep typing <anchor all the time, so it's shortened to <a. So here's a link (anchor) to my other blog:
<a href="http://randommusingsfromthenet.blogspot.com" target="_self">My other blog</a>
This will appear in your browser as something like :
My other blog
Styled like other links on the page. This time I told the browser where this link goes to with the href (hypertext reference) and the URL of my other blog. I also have another attribute called target, and the "_self" value there tells the browser to open that link in a new window or tab.
And I think that's enough for now, I'll let some of that sink in before I go into any more detail.
See you next time :)
No comments:
Post a Comment