Monday, February 16, 2009

Read the Readings

This is your first HTML lesson with Dr. RT (Panzer Time!). Since students are not allowed to address professors by their first names, you will refer to me from here on out as Dr. Panzer Time! or as Panzer-Time!-Sensei (or as Panzer-Time!-Sempai, if you are so inclined).

Since nobody anywhere knows how to manually embed an image, and since I'll be embedding images in this lesson, I'll start with embedding an image. It works like this:



In that picture, you see a snippet of HTML. On the end you have the little corner things. That's what tells the browser (Firefox or Safari or Internet Explorer) what parts of a page are code and what parts are plain text. In HTML, everything is done with "tags" that have the little angley corners on them. In most cases, you put the tag with the instruction you want, like "b" for "bold," followed by some text that gets made bold, followed by another tag that has "/b."

The "img" tag, which we just saw, works a little differently. There's only one tag for one image. It closes itself - that's what the slash is for. It has the word "src" followed by an equals sign. That tells the image tag where to look for the actual image. The URL, in quotes, does that. The URL I used for that image was
"http://i167.photobucket.com/albums/u158/RT_Jones/1.jpg."

Next we have the "a" tag. The "a" tag is a lot like the "img" tag in that it has an equals sign and a URL. However, the "a" tag usually wraps itself around text and has a separate closing tag. Check it out:



This time, instead of "src," "href" is used. "href" stands for something like Hyper-Reference or something like that. It's only ever used with the "a" tag, but it does the same thing as "src" does in the image tag. Notice that there's a few words in the middle of the two "a" tags. These are what's used for the link - linking is what "a" tags do.

There's more things that can be taught, but that's probably all for now.




Just for fun:

<img src="http://www.pe.com/imagesdaily/2008/06-25/berlin0625_300.jpg" />

goes to:

11 comments:

muffin godess said...

In one ear.


Out the other.

RT (Panzer Time!) said...

Hey! It's not that hard, seriously. I learned this in like fourth grade. It's a life skill.

miranda said...

Dema's Attempt!

miranda said...

(by the way there is no space between the ">" and the link text)

RT (Panzer Time!) said...

You can do it with or without a space. I tend to do it with one. Standard HTML only recognizes one space anyway, so I could put like five and it would only show up as one.

You link doesn't work because you used a bad URL. Get a new one and give 'er another go.

miranda said...

Dema's Second Attempt!

RT (Panzer Time!) said...

That one worked. Nicely played! Melora, why can't you be more like Dema?

muffin godess said...

Because I'm not?

Anyways. Dema wouldn't want me to be. She's got that covered. It'd be like human cloning. Blech. I'd have to change my name to Dolly.*




*Note: the following above is a joke.

RT (Panzer Time!) said...

Hello, Dolly! (breaks into song and dance deal)

muffin godess said...

Umm....not quite.

RT (Panzer Time!) said...

Can't I have a little fun?