Do you ever get a little tired of the mundane? Black letters composing words forming uniform lines that run across the page and turn into a block of text? Same after same after same. Do you ever yearn for
Sometimes I just want to say something Big. Other times a whisper will do.
I’m going to show you a couple of font tips today so you can liven up your posts if you feel a little happy, or crazy, or just bored.
Please understand that I am not an expert, but merely a novice. I’m not teaching you anything from a podium of vast experience. Think of me more as the kid next door who discovered something cool, grabs your hand and says, “Come and see.”
(Although I am using WordPress, I have an account on Blogger. Both WordPress and Blogger allow you to edit HTML.)
Do the four letters H, T, M, L in close proximity scare you?
Not any more.
Back to my handy little screen shot where I’ve circled the “Visual” and “HTML” tabs at the top. If you’re like I used to be, you never click on the HTML tab. But if you learn a couple of easy tricks, this tab is the path to more flexibility with your fonts and other aspects of your posts.
HTML or Hyper Text Markup Language is not precisely a computer language. It uses markup tags to describe web pages. I got that all from the tutorial at w3schools.com where you can find a lot of handy information. The good thing is once you understand a few simple and basic ideas you can use some of the markup tags to change the way your font is “described” or appears on your post. In fact you already are using them, you just may not realize it.
If I make something bold or put text in italics, a markup tag is added to the HTML of this post. If I click on the HTML tag I will see mostly what I’ve typed in this post, but I will also see the tags I’ve used. Tags appear as two sets of pairs of brackets, or whatever you call the little arrow marks:
where “x” is replaced with a variety of possibilities. For example, after I bolded the above word “bold” this appeared in my HTML:
The “<strong>” just tells the computer to make the following text “strong” or bold. The text that will be bold in this case is simply the word “bold,” but the tag would apply to anything I put between those bracketts. The second set of bracketts, “</strong> signifies the end of bolding. Every tag needs a beginning and a slash ending.
The italics tag I placed above looks like this in HTML:
Where “em” tells the computer to italicize and the beginning and end brackets contain the text I want to be in italics. It’s quite simple, really.
You may not know what tags to use. Neither do I. WordPress has a nice little explanation with a link to a terrific help sheet at w3school.com. The help sheet contains tons of tags, most of which I don’t have a clue how to use. And by the way, the code for the links in this paragraph looks like this in HTML:
<a href=”http://en.support.wordpress.com/code/”>Wordpress has a nice little explanation</a>
<a href=”http://www.w3schools.com/tags/default.asp”>help sheet at w3school.com</a>
The tag for a link is “a.” The first bracket includes the “a” and then has to describe where the link goes to which is “href=http://www. etc.” The text between the brackets is what I highlighted when I added the link. And the tag closes with the slash and “a.” Fortunately WordPress kindly puts all of this in there for us automatically when we add a link, but we could do it ourselves if we needed to.
I hope I haven’t lost you. Go to one of your posts where you used bold or italics or a link and check out the HTML.
A very simple thing to do is use headings. WordPress has already identified the font type and size for your theme. Along with these descriptions, they have created heading styles. There are six, numbered from 1 to 6. The HTML tag for the headers is simply an “h” followed by the number 1-6. In theory, I think heading number 4 is the same size as the paragraph text you use. Headings 1-3 are larger, and 5-6 are smaller, but when I look at mine on the web, it doesn’t seem to hold completely true. My 5 and 6 look the same, and 4 looks bigger than paragraph font. It’s a mystery.
It’s very simple to add a heading. Here is the code for the first one above: <h1>Header 1</h1>
And for the last one: <h6>Header 6</h6>
You get the idea.
The only problem with headers is that you can’t change the size mid-line. A heading applies to an entire line. Don’t ask me why. But to do what I did at the beginning of this post:
“Sometimes I just want to say something Big. Other times a whisper will do,”
you have to use the “span” tags which look like this for the above line:
<span style=”font-size: large;”>Big.</span>
<span style=”font-size: xx-small;”>whisper</span>
To add Pizzazz! I added a color definition. I don’t know much about what colors are available, so I will have to play some and get back to you later.
Here’s what the “pizzazz” tags look like:
<em><span style=”color: purple; font-size: xx-large;”>Pizzazz!</span></em>.
You can see the “em” for the italics, the span style defines a color, and font-size. Both tags have a closing tag, “/span” and “/em.”
I think that’s probably more than enough for one day. Try out a heading or header tag “<h1> fascinating title</h1>.
I leave you with a little poem to ponder
What a delight it is
When, of a morning,
I get up and go out
To find in full bloom a flower
That yesterday was not there.
Tachibana Akemi, 1812-1868 Japanese Poet