Saturday, August 11, 2012

<i>We must code</i>

Blogger recently did a redesign on its pages, and a lot of people don't appreciate it.

The spacing has gone weird, it likes to reset your font at random, and sometimes the background color will just do whatever the hell it wants. The problem is, I'm willing to bet, that you're working in "Compose" (that little button in the upper left, assuming you have the standard layout).

See, I have a little (very little) training in coding. And damn, but I wish I'd kept it up - in 1999, I could have made a ton of money just correcting a programming error in COBOL.

If you're having weird formatting issues, open that post, and click the button in the upper left labelled "HTML." What's probably going to happen is that a lot of crap that you've never seen before will suddenly appear in the middle of your post.

I know you don't care, but HTML stands for "HyperText Markup Language." It's just the commands that tell your computer how to do things on the internet. It's not usually scary, until you let a machine try to do it.

Because they use a program to put the HTML in the middle of your text. And one of the things that the program does is set your format for every paragraph (the font style, the font size, everything). And if you go back to something you've already written to change a few words, the program wants to reset the format again.

And sometimes, when you throw in a space it doesn't think is necessary, it'll throw some invisible symbol in there (usually starting with an ampersand and ending with a semicolon). You normally can't see those, but they exist.

And sometimes, there's so much unnecessary crap there that you can only barely find your text, hiding between various commands that have no real excuse for existing.

It's automated. Like any machine, it does exactly what it's been told to do, and doesn't vary in the slightest. So you just have to cut proto-Siri out of the equation. Here's what you do. And don't worry if you have no experience with computer code: we're going to start slow and work you up to it.

First, just accept the standard font and background. You can mess with those later when you're more comfortable with it. So, the first thing you need to do is to click the HTML button again. You're about to take a few (very few) tentative steps into the wonderful world of computer code.

Now, every HTML command gets bracketed by "greater than" and "less than" signs. That tells the computer to sit up and pay attention, because you're talking to it, by god!

So, for example, to tell it to put things into italics, you type <i>. That "i" tells it italics. (Exchange it for a "b" and you've just told it to bold the next bunch of letters.)

An important thing to remember at this point is that, just like in the Sorcerer's Apprentice, if you tell your computer to do something, it will keep doing it until it dies. So every command you open, you have to close. And in this case, that means that once you've told it to italicize something, you have to tell it to stop, usually with the same command, only preceded by a slash (so </i>). Think of the slash as you, telling your computer "stop, you bastard!"

In fact, once you've done it for a while, you'll discover that a lot of programming involves counting commands and seeing which one you didn't shut down. (Or counting parentheses and seeing which one you didn't close.)

The next thing you'll notice is that HTML doesn't like paragraphs. Everything you type ends up in one big block of text. To fix that, we have another command. We'll call it "break" (programmers like easy-to-remember commands, by the way.) It looks like this: <br/>

You'll notice that the slash is at the end. This one isn't paired up with a second command. It just inserts a break (what us old guys would call a "carriage return" - those of you too young to have used a typewriter... fuck you. You'll be old soon, too).

Me, I like double-spacing between paragraphs. So I end up typing <br/><br/> at the end of every paragraph.
Pro-tip: just to make it easy on you, after you enter the breaks (<br/>), hit "enter" and make a new paragraph (which the HTML will just ignore): it'll make it easier to edit your work later.
Now, there's just two more things to show you tonight.

The first is the hyperlink. It's a jump to a new web page. It goes like this: <a href="">

Now, inside those quotes, you'd put the address for whatever webpage you were interested in. If, for example, you were writing for a particularly slow audience and wanted to steer them to the Google homepage, you'd type <a href="">Google</a>

(Notice that the closing command was just "/a" - the first part of the command is the important part. Everything else is just details, giving it the specifics of what you want it to do).

And because we like to quote our sources sometimes, it's cool to be able to set them off from the stuff we wrote, perhaps slightly indented. To do this, you'd use the command <blockquote> at the beginning of the quote, and </blockquote> at the end. (Personally, I like to italicize those as well, which looks like this: <blockquote><i>quote goes here</i></blockquote>

To be honest, you don't have to get them in the exact order, either. I do, because it's easier to look at it and say "OK, I opened italics here, and closed them here. The hyperlink starts here and ends here." Like I said, if you get into any detailed coding, it's a good idea to have a simple system to follow.

So, to recap, if you type the following commands, you'll get the following results.

<i>Italics</i> gets you Italics

<b>Boldface</b> gets you Boldface

<a href="">Google</a> gets you a link to the Google homepage

If you need to set off a quote from the rest of your text, you use <blockquote>The quick brown fox jumped over the lazy dog.</blockquote>, which gets you this:
The quick brown fox jumped over the lazy dog.
And just so you know, you don't have to put breaks either before or after a blockquote. It already double-spaces on both sides of it.

Once you're comfortable with that, you can move on to more advanced commands. Which you can learn about by going to Google and asking for "HTML for background colors" (or whatever it is you want to change). But start slow: wait until you're comfortable with what you're doing right now.

No comments: