HTML Lesson #2: Attributes

So, like I said, this week's HTML lesson is WAY LONG, and I had to give it it's own entry. Also, It gets a table of contents.

No, really, WAY LONG

Table of Contents
Introduction to Attributes
The Anchor Element and the HREF Attribute
The Target Attribute
The Name Attribute



HTML Lesson #2

So, I know that Francine requested Tables for the next HTML lesson, but personally, I think that's a little bit too advanced right now. So, I'm going to give you an element that uses attributes, so that you are ready for tables in the near future.

Last time, I went over the parts of your code, tags and elements. If you do not remember this information, now would be a good time to go back and review. No matter what code you are using, the structure of tags and elements will not change. To review this information, go here.

Today we are going to add another part to your elements: attributes. Attributes break down a code so that you can customize it even further. Not all elements use attributes. For example, the elements from last time do not. Then again, there is not much to customize when making your text bold, now is there?

Here is what W3Schools says about attributes:

HTML Attributes

HTML tags can have attributes. Attributes provide additional information about the HTML element.

Attributes always come in name/value pairs like this: name="value".

Attributes are always specified in the start tag of an HTML element.

When defining attributes, there are three main things to remember. First, your attribute will always be added to the opening tag of your element. This means that you will add all attributes for an element between the first set of < and >, but after the original designation.

Second, attributes always need both a name and value to work. You must first define the attribute of the element you want to change, and then define in what way you want to modify that attribute. Without a name or value an attribute will not do anything.

Third, all values must be enclosed in quotes. It does not matter if you use single quotes ('value') or double quotes ("value"), unless there are quotes in the value. For example, to define the name attribute as Swanky, you are free to use single or double quotes. However, to define the name attribute as Heather "Swanky" Swank, you must use single quotes because there are already double quotes in the value.

The Anchor Element and the HREF Attribute

One element that uses attributes is anchor, the link element. The tag for anchor is <a>. There are three main attributes you will use with this element- href, target, and name.

HREF is used to define your destination. You will use this attribute in nearly every single anchor element you create. HREF is where you type the address you are trying to link to. Let's walk through a very simple anchor element using the HREF attribute:

For this example, we will link to my blog: tales-of-swanky.blogspot.com

1. Begin your element with the opening tag with appropriate designation, but do not close the tag: <a
2. Next, add your attribute name: <a href=
3. Define the attribute value, the address to link to- do not add the ending / to any link when defining an attribute value- and close the tag: <a href="http://tales-of-swanky.blogspot.com">
4. Add the text you wish to be displayed as a link: <a href="http://tales-of-swanky.blogspot.com">Tales.of.Swanky
5. Close the element with the appropriate ending tag: <a href="http://tales-of-swanky.blogspot.com">Tales.of.Swanky</a>

If you've completed all the steps correctly, your links should display as follows:

Tales.of.Swanky

If your link does not work properly, go over the steps again and make sure you did not miss any of the aspects of you element. Pay close attention to the spelling of your address, and make certain that you have both added the http:// before the address and removed any forward slashes (/) that may appear at the end of your address. The forward slash at the end of an address will prevent your link from working as it confuses the HTML, so always be sure that you have removed it.

The Target Attribute

Now, you will notice, if you click on that link, that it redirects this page whereas most of my links open in a new window or tab, depending on your web browser. This is because there is no target attribute defined in the above example.

The target attribute is used to define where your link will open- the same window/tab or a new window/tab. If you do not include the target attribute the default setting of "same window/tab" will be used. To change this, you will have to add the target attribute and define the value as "_blank". This tells HTML to open the link in a blank window/tab. Let's add the target attribute to the previous example.

1. First, open your element: <a
2. Next, add your href attribute: <a href="http://tales-of-swanky.blogspot.com"
3. Add your next attribute name: <a href="http://tales-of-swanky.blogspot.com" target=
4. Define your attribute value and close the tag: <a href="http://tales-of-swanky.blogspot.com" target="_blank">
5. Define your hyper-link text: <a href="http://tales-of-swanky.blogspot.com" target="_blank">Tales.of.Swanky
6. Close the element with the appropriate ending tag: <a href="http://tales-of-swanky.blogspot.com" target="_blank">Tales.of.Swanky</a>

You're link should now display as follows, and open in a new window/tab:

Tales.of.Swanky

If you are having problems, make sure that you have the quotations around all of your attribute values, check your address, and check that you have added the underscore (_) at the beginning of your target attribute value.

The Name Attribute

The last attribute you will use with the anchor element is name. The name attribute, when used with anchor creates a *gasp* Named Anchor, which allows you to link to a specific section of a page, rather than to the beginning of the page. You can see examples of this in use at the very beginning of this entry with the table of contents. If you missed them, click here to see them again.

Yes, that was another example. Named Anchors are most usefully when creating tables of contents at the beginning of large pages. I do not use this attribute often, to be honest, though it is very handy to have in your repertoire. It makes organizing and navigating your page a breeze. However, it does make your anchor elements a bit more involved.

When using named anchors you will not only define the hyper-text (as we did above) but you will define the target-text as well. As with most of HTML, this is not as difficult as it sounds.

First, you should decide where you want your named anchors to appear and where you want them to link to- this is defining your target-text. For our examples, I will walk you through creating the Table of Contents at the beginning of this lesson.

There are four logical places to create 'chapters' to this lessons: the introduction of attributes and the three examples of attributes using the anchor element.

The first thing you have to do when creating named anchors is define your values and select your target-text. This part of the process will happen in your page or entry. You will write up your actual table of contents later.

1. First, open your anchor element: <a


2. Next, add your name attribute: <a name=


3. Add what ever text you wish, but remember what you use where, and close the tag: <a name="intro">


4. Next, type to text you wish to link to: <a name="intro">HTML Lesson #2


5. Lastly, close the tag: <a name="intro">HTML Lesson #2</a>

If you have defined the value correctly, the text will not display any differently.

Repeat this process for each occurrence of text on the page you want to link to. Remember to make note of what name you gave to each section of text. Through out my entry, I used "HTML Lesson #2", "The Anchor Element and the HREF Attribute", "The Target Attribute", and "The Name Attribute", defining them as "intro", "href", "target", and "name" respectively.

The second step in creating named anchors is to create the hyper-text links, or your table of contents. If you are linking from with in the same page, such as from one part of this entry to another, your addresses will be much simpler, but you can link to a certain section of a different page, as well. For the following examples, we will be linking to a section of the same page.

1. First, go to where you want to insert your links, or table of contents.


2. Open your anchor element: <a


3. Add your href attribute to create the link: <a href=


4. Add the value you defined for the first link, proceeded by a number sign (#) and close the tag: <a href="#intro">


5. Add the text you want to use as your actual link: <a name="#intro">HTML Lesson #2


6. Close the element with the appropriate tag: <a name="#intro">HTML Lesson #2</a>

If you have created your link correctly it should display like any other link. Repeat this process for each named anchor you have created. Remember to change the value for each link and do not forget to add the number sign to each value. Adding the number sign is what distinguishes the target-text from the actual link, or hyper-text. Using the name attribute with out the number sign defines where to link to- the target-text. Using the name attribute with the number sign defines the text to be used as a link- the hyper-text.

If you have created your table of contents correctly, the HTML code should look like this:

<a href="#intro">HTML Lesson #2</a>
<a href="#href">The Anchor Element and the HREF Attribute</a>
<a href="#target">The Target Attribute</a>
<a href="#name">The Name Attribute</a>

And display and function like this:

HTML Lesson #2
The Anchor Element and the HREF Attribute
The Target Attribute
The Name Attribute

Now, if you were attempting to link to a named anchor on a different page you had written, the actual address in the above example would be a little different. You would have to add the full address of the page the named anchor is on before the number sign in your link address. For an example, I have added a named anchor to the line "First, let me give you a basic understand of what HTML is and how it is used:" from my first HTML lesson that I will now show you how to link to from this lesson. I have already used this same named anchor in this entry, which you can see at the end of this paragraph.

First, you must either have already defined the target-text on your other page or go back and do so now. Again, just follow the steps here to do this.

Next you must create your hyper-text. We will follow the same process as before, with two alterations- adding the address of the external page to our href attribute value, and adding the target attribute. I always suggest using the target attribute when linking to an external page. I know I hate it when I click on a link and it doesn't open in a new tab because I loose what ever I was looking a to begin with. Because of this, I like to make sure all my external links open to a new window/tab.

For this example, the address of the entry we will be linking to is tales-of-swanky.blogspot.com/2008/10/cultural-expansion-through-language.html, and the value name defined on that page is "lesson1".

1. First, go to where you want to insert your link.


2. Open your anchor element: <a


3. Add your href attribute to create the link: <a href=


4. Add the value you defined for the first link, proceeded by a number sign (#)and the address of the external page you are linking to: <a href="http://tales-of-swanky.blogspot.com/2008/10/cultural-expansion-through-language.html#lesson1"


5. Add the target attribute and value, and close the tag: <a href="http://tales-of-swanky.blogspot.com/2008/10/cultural-expansion-through-language.html#lesson1" target="_blank">


6. Add the text you want to use as your actual link: <a href="http://tales-of-swanky.blogspot.com/2008/10/cultural-expansion-through-language.html#lesson1" target="_blank">HTML Lesson #1


7. Close the element with the appropriate tag: <a href="http://tales-of-swanky.blogspot.com/2008/10/cultural-expansion-through-language.html#lesson1" target="_blank">HTML Lesson #1</a>

Remember to add the number sign and value to the end of your address. If your link is not working, go back and make sure that your values are the same on both pages. In this example, the code for the target-text in Lesson 1 should look like this:

<a name="lesson1">First, let me give you a basic understand of <b>what HTML is and how it is used</b>:</a>

And should display as normal text:

First, Let me give you a basic understand of what HTML is and how it is used:

While the hyper-text in this lesson looks like this:

<a href="http://tales-of-swanky.blogspot.com/2008/10/cultural-expansion-through-language.html#lesson1" target="_blank">HTML Lesson #1</a>

And displays and functions like this:

HTML Lesson 1

Well, that is all I have for you this week. I hope this wasn't too much for you to digest in one go. I want you to be ready when I give you tables, and this is the bes introduction of attributes that I could think of. Also, it is possibly the most useful. Links are a wonderful thing, and as you've seen, can do much more than you would have thought!

Next time, I'll give you one more set of examples using attributes, and there will even be some crossover with this lesson. Oh yes, we are getting fancy now. ^_^

And now I have to go to bed as it is WAY to late for good little Swankies to be awake. Getting up for work tomorrow is going to be so hard...
Read More...

So, Updating?

Not my strongest suit, apparently. Now, not updating when I said I would? That's I'm ridiculously good at. I'm going to skip over the apologies and excuses about time constraints and just get right to the entry.

So, I've decided to adopt a structure similar to Francine's (which you can see at her blog Stop the World... I wanna get on!). I'll do a little update about ME and then I'll throw in some more HTML because I know that's what you really want to see. Also, I've started learning Arabic and Japanese from the same coalition of websites that Francine and Tony are learning German and Russian from (respectively). You might see a bit about that in here as well.

So, an update. Well, since the last time I wrote a lot has happened actually. I went to an SGA con in New Jersey a couple of weekends ago. That was AMAZING. I cant even begin to tell you all about it, so how about some highlights:

1. Laura realized that her new TomTom, bought just for this trip, and her iPod had been stolen just before we were getting ready to leave. So we had to call the cops, file a report, and then stop at the mall so she could get a new TomTom. It worked out though, because we got Starbucks before heading out. Starbucks makes everything better.

2. We had backstage passes and as awesome as that was, we had been a bit upset because we were not going to be able to meet Gary Jones (Walter of SG-1) because we were heading into NYC at the only time he was doing anything. Luckily, we stopped by the convention before heading into the city and got a chance to go backstage and meet him. ^_^ He's much cuter in person.

3. The aforementioned trip into NYC was to see Equus. Yes, the one with Harry Potter running around nekkid. That was not the reason we were going to see it... at least, that was not the reason I was going to see it. Regardless, this point is about the seats. We were in the Broadhurst Theatre, ironically where Richard Griffiths made his last Broadway appearance in The History Boys (for which he won a Tony) and also the home of the 2002 revival of Into the Woods and the 2006 revival of Les Miserable (yes, I threw in those little details for Francine's sake). If you don't know the theatre, it's small, as most of the theatres in NYC are, and the floor seats have three sections with 20 seats to a row each: left stage (the 200 block), right stage (the 000 block) and center stage (the 100 block). Our seats? E9 and E10. Yup. Center stage, almost exactly, fifth row. I know. You're jealous. You should be.

4. Our showing of Equus featured a charity donation thingy at the end, through which Laura got herself a poster and me a playbill, both signed by the whole cast. Again, I laugh at your jealousy. I know have Richard Griffths' (AKA Vernon Dursley and AMAZING ACTOR No. 1), Daniel Raddcliffe's (AKA Harry Potter and Boy-Who-Signs-Half-Like-an-Adult-Half-Like-a-Six-Year-Old) and Kate Mulgrew's (AKA Cptn. Jayneway and The Amazing Never Changing Hair Woman!) autographs. It was a geeky bonanza. I even got to see them coming out of the theatre and being swallowed by fans before getting into their TAXIS. I love NYC.

5. I managed to get all the foods I have been dying for since I left except real Italian sausage. Do you know how disturbing it is to have to eat bratwurst seasoned like Italian sausage? Trust me, it's disturbing.

6. CHUCK. That is all I have to say about that.

7. Radek Zalenka talking about what plans he has for the rest of his career now that SGA is over: "I've got my eyes on Brad Pitt. *uproarious laughter from crowd* His career, not his ass, you perverts."

8. Talking about Nekkid Daniel Radcliffe with Jason Momoa. *headdesk*

9. Seeing Francine and Tony, dispite how sort the visit was, was one of the best moments.

10. Having Laura laugh at me because while Harry Potter was running (litterally) around nekkid and half hard not ten feet from me I kept going "Dear God, look at that LIGHTING. How the hell did they get the light in there?" David Hersey is now my GOD.

Ok, other than that weekend... I still have a job, my father does not. *sigh* Because of this, I have decided tha I am going to (a) cu down on how much I am doing for the HPA in preperation for (b) if my father does not have a job again by the time Laura leaves I will have to get a second one myself. I am not looking forward to this. But such is life.

I have been listening to Last.Fm almost non-stop while I am at work. I love this. I get to listen to all these bands I LOVE with out ever having to spend the money to buy them. Depeche Mode has been high on the list recently. And XTC. Also, Iggy Pop, Cat Stevens, Bob Dylan, Sweet, and The Dancing Blue Jeans.

In other music news: A few weeks ago I played "Lucy in the Sky with Diamonds" on my guitar and sang it at the same time. Sounded like CRAP, but I was on key and in time and that's all that matters. I also have finally managed to play a bar cord! YAY! I am getting better tat this playing guitar thing. I think, mostly, because when I don;t want to get online right after getting home from work because I know there is something waiting for me for the HPA, and I don't feel like getting right to the cooking, and I certainly don;t want to get on the phone AGAIN, I practice my guitar. It's been most nights that I am home for a few weeks now. It's cool that I just looked down the other day and was like "Holy crap, when did I start positioning my hand like that? Isn't that the RIGHT way to play?" ^_^

Alright, I think that's it.

Because this week's HTML is WAY LONG, I'll have to post another entry for it. Sorry.
Read More...