I’ve been around for awhile now . . . in fact, I just renewed daddyrunsalot.com, which means that I’ve been around for, at least a year1. One thing I’ve noticed, though, is that, among bloggers (well, around my group of bloggers, who are split evenly between mothers and want-to-be-parents and perverts and aspiring writers), there seems to be a very split camp for HTML. There are those that are comfortable with it, and there are those that get freaked-the-fuck-out whenever they have to look at HTML code.
However, HTML is the least of your worries. Sure, if you fuck up the HTML on your page, you can make it so that things just won’t work right. But, at the same time, if you fuck up the code that renders your page (see sidebar), you can take down your entire website, or the web server hosting your website.
But, if you know HTML . . . well, you can do whatever the heck you want to do with your blog . . . make things look exactly the way you want. All I’m going to do today, is explain what HTML is and how it works.
HTML stands for HyperText Markup Language, and it’s the language that dictates how a web page is to be interpreted by your web browser. Most of the “code” in a HTML page is just regular old text — the content that gets displayed. However, sometimes you want to send something special to the browser to make a word look different and that’s where HTML comes in.
HTML tags always start with a “less-than” symbol (<) and end with a “greater-than” symbol (>). I can tell you that the HTML tag for “bold” is just, b, so if we wanted to get some text displaying as bold, we’d start with <b> . . . but that’s only the start. Because we also need to tell the web browser where to end displaying the bold text, and, to do that, we repeat the tag, but we put the “forward-slash” (/) before it. So, if I wanted to write the word “bold” in bold in a post, the code would look like: <b>bold</b>.
Anytime we have something that should appear as anything besides “just regular text” on a blog post, we’ll need HTML4 to get that done. This means, anytime we want to include the following, we need to pull out HTML:
- Bullet Points
- Images
- highlighted text
- different text sizes
- different fonts
- links
Now, most of the time, we know where something will begin and where it something will end, as we’re writing it. For example, when I write a link (which is designated with the A tag in HTML, as A stands for anchor, and we want to anchor a piece of text so that, if you click on it, you’ll go somewhere else), I know the first character that I want to have as part of my link, and I know the last character that I want to have as part of my link. So, I know where to put my <a> and where to put my </a>
However, sometimes, like an image (which, in HTML, is an IMG tag), I just want the image on the page by itself . . . I don’t need to say “stop showing the image, dammit.” In this case, we put the forward-slash within the tag itself, to say “we don’t need a stop displaying the image“. So, if I wanted to include an image of my family, I would put all of the instructions into a single IMG tag, like tihs: <img src="http://daddyrunsalot.com/wp-content/uploads/2011/10/64284472909548749bf33222097df386_7-300x300.jpg" alt="Daddy Runs a Lot and Family" />.
But, well, there’s more to that than just the IMG tag . . . there are two attributes as well. Because, well, just saying “put an image here” isn’t enough . . . you need to tell the browser which image to display. So, when you have an image, you need to say “I’m putting an image here,” and then you need to say “and here is the source file for this image” (which is where the src) comes from. And, because I got my start designing web applications so that the blind could use them, I always place some “Alternate Text,” (the ALT attribute) to describe what’s in the image, in case my reader doesn’t have use of his or her eyes.
Here are some of the more-common HTML tags that you’ll use when blogging.
| Tag | Definition | Example | Notes |
|---|---|---|---|
| A | Anchor (link somewhere) | <a href=”http://daddyrunsalot.com”>Daddy Runs a Lot</a> | You need to use the href attribute here, so that you can say “this is where the person should go, after they click the link.” And, if you’re linking to another website, always be sure to include that “http://” at the beginning |
| B | Bold | <b>Daddy Runs a Lot</b> | |
| P | Paragraph | <p>Daddy Runs a Lot</p> | This will put space above, and below, what you’re writing |
| BR | Line Break | Daddy Runs a Lot<br /> | This will not place space above or below, but will just start the text you’re writing on the next line |
| IMG | Image | <img src=”http://daddyrunsalot.com/wp-content/uploads/2011/10/64284472909548749bf33222097df386_7-300×300.jpg” alt=”Daddy Runs a Lot and Family” /> | You need the SRC attribute to say “this is where the image is stored.” The ALT attribute is optional, meaning that most web browsers won’t care if you leave it off |
| I | Italic | <i>Daddy Runs a Lot</i> |
Ok, so how do I accomplish my footnotes? I use a combination of tags. When I’m ready to put in a footnote, I start with the superscript tag, which is SUP. Then, I create a link using the hash symbol, which means “don’t link to another page, but I’m naming something on this page. Then, at the bottom of my page, I’m defining a section that links to the footnote. For example, I’m going to create my fifth footnote here, and the code will look like this:
<sup><a href="#footnote5">5</a></sup>5
And then, at the bottom of this page, I’ll use a division tag, DIV, which is a convenient way to say “I’m going to divide this page as a special section.” To this, I’ll add the ID attribute so that I can name it, and I’ll name it “footnote5” because that’s what I’m pointing to in the href=”#foonote5 attribute of my anchor tag above.
<div id="footnote5"><sup>5</sup> This is the fifth footnote<div>
And that sir, is one of the many reasons why I won’t blog. Yikes!!
I promise, it’s not all that bad . . . but, most bloggers just stick with MS Word-type interface and get their work done that way.
your different fonts looks dangerously like Comic Sans.
I’ve learned html while blogging but still don’t know what CSS. Care to demistify that in the future?
We’ll definitely get into CSS in the next few weeks — next week, I think, is nested HTML tags – then, we’ll head onto CSS.
OH BABY! I LOVE WHEN YOU TALKED NESTED TAGS! RAWR!
(yes, that needed ALLCAPS)
LOLOL. I wont fit in!
I’m not a Mom, I don’t particularly want to be a Mom right now, I am definitely NOT as aspiring writer. (I grew up with a Real Writer- no aspiring, I think once you have passed the 10 books published mark you are just a writer yep? and I dont want to be that!)
And I am not a Pervert that I am aware of, though i did stare particularly lustfully at a photograph this morning, Of Pancakes, strawberries and whipped cream. In my defense, I just ran 10 miles….
That’s kind of cool about growing up with a writer . . . though I’d imagine it being difficult to want to write, when you grow up with it.
I definitely left “runners” out of my readers, though . . .
I have to admit that is all greek to me but I now have a reference to look back to as I move forward. Thank you
That’s what I was setting out to do – glad to be of help!
I’m a novice and a bit of a sponge, so yay for this! I Stumbled it, too…
You will soak this up — it’s really quite logical.
LOVE this! But I suspect you knew I’d say that.
So it’s not just me who thinks in code? I have the freakish tendancy to think about what I’d really like to say to someone when they ask me for help with something I know they can handle on their own. Except I see it in code in my freak brain. For example:
…Sure I’ll help you out,
since I have nothing else to do, you lazy mother-funo problem.I do the same thing, too – adding in the CSS to make things all-caps and larger, when I want to tell someone off.
This actually helped me tonight, thanks!
That’s actually really cool – glad to help!
Yeah, I’m in the “FTFO” camp….
I freak when it comes to this stuff….but when you are teaching it’s much easier to understand! 🙂