Basic Attributes

Ok so now you know from my earlier post that a Tag describes a piece of an HTML document. So What is an Attribute?
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 :)

The Anatomy of an HTML Page

HTML documents simply give your web browser instructions about how to display the page, and on a simple level, that's all there is to it. HTML is stored as plain text, which means any text editor such as notepad, JEdit, or any other simple text editor is all you really need to write a web page. There are tools however, which offer features and tools to help you in the process, and I'll write more about those in later posts.
The instructions that make up web pages are written in Hyper-Text Markup Language, or HTML for short. Each page is divided by portions of text within Tags, which provide instructions for how to style the page and the elements it contains. Let's look at the basic anatomy of a simple web page as a whole:

<html>
  <head>
    <title>Hello HTML</title>
  </head>
  <body>
    <h1>This is the Page Headline!</h1>
    <p>This is some text in the body of the page.</p>
  </body>
</html>

You can see that the tags, enclosed in the < > braces tell the browser what part of the page each block of text belongs to, and how to display it. You'll also notice that all of the tags in this example have opening tags <...> and closing tags, which have a slash in them </...>. These define the start and end of each tag. So the browser knows that everything between the <body> and the </body> tags belong in the page's body portion of the document. Let's step through each tag, and I'll give you a basic understanding of what they do.
We start off with the <html> tag. This tells the browser that this page should be displayed as a web page, instead of another format such as an image or plain text document. The <head> specifies everything the browser needs to know about the page as a whole before the rest of it is loaded. In this example, we specify that the <title> of the page is "Hello HTML" which is the title you will see in the browser's title bar on the very top of the window. The page <body> contains only two pieces of text, a <h1> tag which means that text should be displayed in strong, bold, header-worthy text that you commonly see at the start of a post or a web page. The other tag is the <p> tag, or paragraph, which means that is a paragraph of text, and should be displayed with the appropriate spaces around it.

This was a really simple example of HTML, but hopefully you aren't feeling intimidated by the cryptic code you see associated with web-design. My goal is to ease the inexperienced user into this field, and I don't want to move too quickly. Stay tuned, up next is more about HTML Tags and something Tags have called Attributes.
See you next time :)

Introduction

Hello, I'm starting this beginner's guide to HTML for people who are interested in learning, but aren't sure where to take their first steps, or can't sit through boring and confusing explanations. I'll run through the basics to get you started, and hopefully then your learning process will be a little easier.
When I first learned HTML, there I became frustrated my the overwhelming amount of complicated tutorials, instructions, and guides available at the time, so I'm writing this in the hopes of creating a basics guide that other people can have an easier time learning than I did. There is still a learning process, but with a little practice and simple explanations it will all make sense in due time.