Tag Archives: html

Learning the Ways of the Geek Part 2 [HTML 101]

This post is more for people like my mom. If you’re html savvy, you may wish to skip this or let me know if I am clearly clueless!

Back in the day, I had a LiveJournal, which I’d update from time to time with horrible teenager things. You may scoff now and think to yourself, “How emo/Mark Zuckerberg of you,” but wait! Good ol’ Eljay may seem a bit outdated now or seem to be the region where IRL socially inept folks hang with their virtual buds, but when I was 16 it was the shiz! It, along with that Frontpage lesson I had around the same time, is one of the only reasons I sort of understand how things like html and hex codes work. If you wanted to change your background to have a tiled image of your favorite cat, change your background to be bright pink, or add a “cut” when posts got to be too long, you had to scroll through the LJ FAQs for code to post or tags to add in the right place. I remember thinking, “What is all this #ffffff nonsense?” Or “Why isn’t there some magical way to create an excerpt for my post?” Well, we live in more advanced times-Wordpress times!-and doing some of those things are a lot easier now.

I think I had a point to make somewhere in that ramble…hmm, well something something…ah yes! Now, a mere 10 years later, I have finally taken on the task of making sense of all that stuff. My friend Brendan pointed me in the direction of  this tutorial for creating your own WordPress theme and I’ve found it to be pretty useful. Okay, it is from 2007 and doesn’t have any instructions for Mac users, but whatevs, it’s still pretty good. I also happened to have some nice people help me figure out how to install MAMP and get everything I needed to use up and running (I’m still figuring out what all that is) while I was at Super Happy Dev House over the weekend.

Within the next week or so I plan to do a screencast and post it here about what I’ve learned, but I’ve gotta go to a happy hour at that awesome warehouse I mentioned yesterday, so I’ll leave it for later. For now I’ll leave you with my basic understanding of all this internet stuff. Mom, if you’re reading this, you’ll probably find this pretty neat.

HTML: HTML is sort of like the skeleton of your website and looks like this (the text in blue):

You use it to make sure that all the pieces your structure needs are there. Just as your body has two arms, two legs, two eyes, a nose, etc., your website (or at least your blog) will need a title, a header, a footer, and space for posts and comments. You can edit the way it all looks to some extent with HTML, but it’s fairly limiting and is more functional than it is pretty.

CSS: CSS is where style comes in. Sticking with the body analogy, it’s kind of like your DNA (I don’t do science so please forgive me if this makes no sense). It looks like this:

What makes you unique from others (other than your sparkling personality, of course) is how you look. Do you have green, blue, or brown eyes? A short or round face? Short torso and long legs? HTML gives you the basics but CSS lets you make your website stand out- at least in appearance. Change your font, give yourself that pink background you always wanted, or add a margin somewhere. This is where the fun happens.

PHP: This is what makes a lot of the magic happen. It’s kind of like the connections between your brain and the rest of your body- maybe a bit of your memory too. It looks like this (the white text):

PHP performs functions so that stuff actually happens on your site. If you want all of your blog entries to list a title, author name, and a link to the next post, you have to include a PHP code. From my very basic understanding of it, you ask it to perform a certain task, such as search for posts, and it will display the result. So if you add a command to include a “Next Page” link after every 5 posts, it will search to see if you have enough posts on your page. If you have fewer than 5, no link will appear. Once you have five or more, the link should show up on your site. Similarly, if someone searches for something on your site and it doesn’t exist, he or she will receive a “Not Found” message- or whatever text you’ve indicated (I chose “nope” for my draft site!).

That’s all I’m going to attempt to explain for now because I am running late for that happy hour!

Does any of this make sense?