Infernal Monologue

Facebook is Man-Made!

Facebook just got a whole lot hotter:

But, wait. What's this?

Vibe has only one fan, Scipio Garling

Isn't that just the saddest thing you've ever seen?

Vibe only has one fan. Scipio Garling of The Absorbascon.

I had to preserve it, if only for the sake of accuracy.

Labels: comics, DC, The Magical Fantastical Internet

I'm of two minds about Google's gradual takeover of the internet (and eventually the Earth). On the one hand, any one person or group with a lot of control will eventually lead to corruption, abuse of power, and/or reduction in quality of service. On the other hand, Google's pretty awesome.

Take this, for example.

So my brother tells me that there's a new trailer for littlebigplanet out. Like any right-minded American, I immediately scour the internet for the movie of sackboys (littlebigplanet's avatars for exploring player-created levels) in a Godzilla parody.

Google's "Did You Mean" feature, however, had other ideas.

Google Did You Mean function suggesting Blackzilla trailer

And it was right.

Because even though that wasn't what I meant at the time I hit the "Search" button, my desire to watch a Blackzilla trailer is so strong that it applies retroactively.

Labels: The Magical Fantastical Internet, video games

The Universally Useful Cascading Style Sheets!

Hi, boys and girls! Is everyone ready for another adventure in the magical, fantastical Internet?

Yeah!

Well, all right!

This week we're going to learn how to take any HTML tag and bend it to our will. Do you remember how HTML tags work, boys and girls? Let's take a look at a standard image tag:

<img src="http://www.infernal-monologue.com/images/mfiBanner.gif" alt="Magical, Fantastical Internet banner" title="Ta-da! Rollover text!" height="300" width="400" />

It's always a good idea to define your heights and widths, kids, and the title is great for rollover text. And don't forget to add your alt text or Angry Mr. Ada will get you! The image tag above should give us:

Magical, Fantastical Internet banner

Now that we're reminded how an HTML tag works, let's look at two new tags: div tags and span tags. We'll start with div tags.

Did you notice up above, when I showed you the HTML code? Don't bother scrolling up, I'll recreate it down here:

<img src="http://www.infernal-monologue.com/images/mfiBanner.gif" alt="Magical, Fantastical Internet banner" title="Ta-da! Rollover text!" height="300" width="400" />

But that's a little too much to work with, isn't it, kids? Let's clean it up:

The quick brown fox jumped over the lazy dog.

Much better! Now let's take a look at how it works:

<div style="font-family: Courier New, Courier, mono; background-color: #B2B299; padding: 10px;">The quick brown fox jumped over the lazy dog.</div>

Wow. A lot to take it, right, boys and girls? Well, don't panic, we'll take it one step at a time.

First of all, you can see our actual text right at the end there, followed by the closing div tag. Nothing new there.

The new bit is the "style" attribute. This is what makes Cascading Style Sheets work. You can use the style attribute to change darn near anything about any HTML tag.

Let's take a look at the "properties" - the first part of the style, before the colon - used. There's "font-family", which lets you choose and prioritize fonts; "background-color", which lets you change the color of the background; and "padding", which lets you set how much spacing you have between the text and the border.

The best part is that the properties are pretty self-explanatory. But the "values" of the properties are where the action's at.

I wanted the HTML example to look like the Create a Post area of Blogger, so I went with monospace fonts like Courier New and Courier. I wanted the background to be a slightly darker colour than than my normal background colour, and with a bit of tweaking I discovered that #B2B299 fit the bill nicely. And I wanted to make it as easy to read as possible, so I put 10px (or "pixels") worth of space between the text and the border.

But wait. We don't have a border, do we, boys and girls? Wanna make one?

Yeah!

Okay! We'll keep it simple, since this is the first time you all at home are adding a CSS property, but then we'll try a special project, okay?

So, since we want a border, what do you suppose the property is going to be? That's right, "border". To make it show up, we have to tell it what kind of border we want, like "solid". And what colour do we want to make the border? How about "red", keeping in the theme of this site? That leaves us with this:

border: red solid;

And we just add that to the style attribute we used earlier:

<div style="font-family: Courier New, Courier, mono; background-color: #B2B299; padding: 10px; border: red solid;">The quick brown fox jumped over the lazy dog.</div>

Hey, look at that! Nice job.

Flash: "Besides, I've always been a bit... impulsive."

Now, as a special project, let's try to recreate a narration box from the latest issue of Flash, the Fastest Man Alive. In it, the new Flash, Bart Allen, has specially colured narration boxes, like the one on the right.

What all do we have there? The actual text, of course. But it's red, on a yellow background, with a red border. Given that, we have:

<div style="color: red; background-color: yellow; border: solid red;">Besides, I've<br />always been a<br />bit... <span style="font-weight: bold;">impulsive</span>.</div>

Did you catch that? We just had the first appearance of the span tag! It's essentially the same as the div tag, but it can be used "inline" instead of changing an entire block of text. I also added line breaks so it will match the narration box. So now we've got: