Fun with fonts — using simple HTML in Posts

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

Pizzazz!

I do.

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:

<x>text…</x>

where “x” is replaced with a variety of possibilities. For example, after I bolded the above word “bold” this appeared in my HTML:

<strong>bold</strong>.

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:

<em>italics</em>.

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.

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

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

Now I’m just showing off. But I have a lot to learn.

Advertisements

Author: CMSmith

I enjoy reading, writing, gardening, photography, genealogy and travel. I have opinions about many things, but am trying to age gracefully and not continually tick people off with them. Sometimes I can’t help myself.

26 thoughts on “Fun with fonts — using simple HTML in Posts”

  1. Hey, that was really helpful! I have never messed around with the html stuff at all but knew there was a way to change font size, etc. Thanks for the tutorial. One of these days I may need to say something with EMPHASIS! Now I know how!!! Oh, btw, love the poem and the pics!

  2. HTML scares the crud out of me. However, I do sometimes use it when posting poetry because it’s the only way I can get my line breaks in correctly. I always forget how to do it by the next time I need to. I wish the font on my theme was larger and tried to change it to no avail so I figured it must be preset. Not sure if I’ll ever be brave or patient enough to use HTML, but thanks for the tips anyway!

    1. It is a little scary. But WordPress (and probably Blogger too) have a lot of safeguards so that you can’t crash the whole computer system. It’s not a big risk.

  3. Another great WordPress lesson, Christine. I love these! You explain it so simply. I’m a bit of a bonehead, when it comes to this stuff, so it’s nice having you take my hand and lead the way. Thank you.
    P.S. Don’t know if you noticed: but I added a black border around the photo of the gal with weights to my last post. Thanks to YOU. 🙂

  4. You can’t do this on comments like here. Can’t underline in comments either so every one thinks you are stupid when you put a book title in quotes. So some put the title in caps but they still think you are stupid because they accuse you of not having control of the pinky finger and keep hitting the caps lock key(actually this is true).

    1. The limitations can be frustrating sometimes, I know. I spent about an hour this morning trying to format my Harvest Moon post so that the journal entries were in a table and centered on the page, but left-aligned. Couldn’t make it happen on the web. It worked on my preview. Aarghh.

      Will keep at it.

  5. I have a LOT to learn about coding too. 🙂

    I may even need someone geeky to help me write a little script, if not a BIG script, something “in-house” if you will, to have my “Friends” page link buttons operate similarly to the “Top Commentators” plug-in. Am amassing so many peeps I want to keep it fun and fresh. But not really thinking on that TODAY!! 🙂 Blog hopping is my fun plan for this afternoon.

    Lovely Akemi poem, written eons ago, but still ringing true.

    Came here on Positive Hilary’s recommendation on my coding quest.

    1. Have fun blog-hopping. Glad you popped over here.

      Sounds like you are leaps and bounds ahead of me on the coding. It’s hard when you’re working with a platform like WordPress that allows and doesn’t allow things and you can’t always know exactly what is going to happen.

      I need to learn a lot more about plug-ins. So much to do.

      1. Hi Christine and Jannie .. so much to do in the learning of things isn’t there .. and I must say Jannie’s blog -shows so much creativity with all her buttons for us all. I hope she’ll find something useful from your links that you gave us, Christine … always useful.

        Glad Jannie picked up on the poem .. Nature is incredible the way it just keeps on going! No time to sit on its laurels ..

        See you both .. cheers Hilary

Comments

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s