Subscribe to my updates via email by entering your email address below:



Sponsors


more hey lady!


currently reading

  • Succubus Blues (Georgina Kincaid, Book 1)

  • Birds of Paradise: A Novel


We will always miss you:


Love this shirt:


Website development by:

Temptation Designs

Meta



search

recent posts

did you say that outloud?

cringe worthy

categories

A Little HTML Help

**I’ve bolded all of the actual html to make it stand out from the actual text.

Ever wonder how to fix those little things on your blog? Or how to make your posts that much more appealing? Or how that pesky html works? I don’t know if I can really help you on any of that, but I can teach you a little html. I don’t really know why it works, just how it works.

This tutorial will really be a conglomoration of any html I think might help you. Let’s get started.

First of all, as far as I can tell, html is what you’re telling the computer to do. So anytime you tell the computer to do something, you also have to tell it to stop. That’s why if you want to do italics, you put <i>, but when you want the italics to be done with, you put </i>. That slash thingy is telling the computer STOP!

Italics, bold…those are easy.

As I showed you, italics is <i>, and to end it you put </i>.

For bold, you put <b> and to end it you put </b>. (or you could use <strong> and </strong>…they’re basically the same thing, but if you really want to know the difference, click here.

Need some space between your paragraphs? You can use <p>, which is what is considered the standard space between paragraphs. Or you can use <br>, but you’d need two <br>s to equal one <p>. <br> is what you might use for an address, where you want the lines to be as close together as normal typing. With <p>, you’ll actually get space between the lines.

You have to type this stuff into the html “page” or “sheet”. WordPress, when you type a post, has a Visual and an HTML page. If I type this html into the visual page, then it shows exactly what I’ve typed, i.e., it won’t bold anything, won’t italicize anything, and won’t make a horizontal line. But if I type this stuff into the html page (and you can switch back and forth no problem…that’s how I’m typing this post), then my commands, so to speak, show up.

Huh? What?

Now for some neater stuff.

Want a horizontal line across your page…or whatever? You could do this in your sidebar (and it would stay in your sidebar), too. Just type <hr/>. It’ll look like this:


You don’t have to do anything else! I don’t know why it works, it just does.

Want to put an image in your sidebar? Get the “location” of the file (in wordpress, you have to have that image uploaded to your sight, even if it’s not inserted into a post), copy that location, and then you want to type <img src=”andthisiswheretheimage’slocationwillbepasted”>. See? Clear as mud.

Want your image to become a hyperlink? Meaning do you want your image to become a link so people can click through that image to where ever? Easy peasy! Before the <img src=”andthisiswheretheimage’slocationwillbepasted”>, type <a href=”andnowtypetheURL”>.

But if you do that, you have to end the whole thing with </a>.

Basically, it’ll look something like this:

<a href=”http://trishsdiary.wordpress.com”> <img src=”http://trishsdiary.somewhere.wordpress.com”> </a>

What if you want to have text that is a hyperlink? Easy to do when you write a post, but in your sidebar, you have to do the work yourself. It will look something like this:

<a href=”http://whatevertheURLis.com”>Whatever You Want To Name This</a>

WordPress has been putting these annoying borders around images lately. Don’t want a border? Just type border=”0″ before the closing > of the image location. So it’ll look something like this:

<img src=”imagelocation” border=”0″>

Frankly, that’s pretty much all I use while I’m blogging. I hope I didn’t mess anything up, but if I did, feel free to correct me in the comments. Let me know if you have any questions. I’m happy to help! And if you can think of anything else that’s useful, let us know!

If you leave a comment with html, the comments are set up to convert the html, so you have to spell it out. Just see wordlily’s first three comments. πŸ˜€

| Tags: , 18 comments »

18 Responses to “A Little HTML Help”

  1. wordlily

    Sometimes it’s fun to use or [and their appropriate close tags] in a blog post, to show words crossed out.

    [Reply]

  2. wordlily

    Sigh. My code disappeared. That’s (without the spaces, though): or

    [Reply]

  3. wordlily

    Alas. The code is STRIKE or S in the same angle brackets depicted in the post.

    [Reply]

  4. Alyce

    I didn’t know how to make the horizontal line. I also didn’t know what the difference was between “br” and “p” as far as the spacing. Thanks!

    What’s sad is that I took a basic html class in 1999, but have forgotten most of it because I didn’t use it in all those years.

    [Reply]

  5. Bookfool, aka Nancy

    Coolness. I’m saving this post, thanks. I knew a few of those, but not a lot.

    [Reply]

  6. Rebecca

    Those are all the same ones I use, and the basics are doing me just fine! Thanks for posting this…I think it was a great idea.

    [Reply]

  7. Veens

    I used some HTML too

    Thanks :-),/i>

    Cool

    [Reply]

  8. Christine

    Very useful — thanks πŸ™‚

    [Reply]

  9. fyreflybooks

    Adding align=”left” or align=”right” into your IMG tags (after the src=”whatever”) will make your images show up on the specified side of the column and will make text show up next to them, instead of underneath.

    [Reply]

  10. Melody

    Thanks for the tips, Trish! Very useful! πŸ™‚

    [Reply]

  11. Shelly Burns

    All of that sounds great, but still like Greek to me. I am new to all of this, and the one thing I want is to add the cool buttons to my side bars. I use Edublogs, and can’t figure out all the widgets. Really confused on the HTML stuff, but hopefully with time, it will come.

    [Reply]

  12. tanabata

    OK, I still don’t really understand the difference between b and strong! Oh well, it hasn’t seemed to matter so far. πŸ˜‰
    I didn’t know the code for the horizontal line, thanks for that.

    [Reply]

  13. Jeane

    I appreciated reading that explanation of the difference between bold and strong you linked to. Now it makes sense! And I always wondered how people made a line across the page or strikethroughs, tho I never found an instance of wanting to use them myself. Now if I do, I’ll know how! Thanks!

    [Reply]

  14. Jessica

    Hooray for the horizontal line!

    [Reply]

  15. Lisa

    Horizontal line! I keep meaning to look that up and now I don’t have to!

    [Reply]

  16. icedtea

    Thanks for the heads up on wordpress adding borders to the images recently – I thought that was just the template I was using.

    Want to put an image in your sidebar? Get the β€œlocation” of the file (in wordpress, you have to have that image uploaded to your site, even if it’s not inserted into a post…

    You don’t have to add the image to your media library. Another option is to load the image to a free hosting site and use that address – Tinypic is an example.

    [Reply]

  17. Kim L

    I took an entire class on web design, but it has come down to knowing those commands you mentioned. Oh, and I can make a picture “float” to the left or right. I learned a bunch of stuff about Cascading Style Sheets, but not enough to really know how to do anything cool.

    [Reply]

  18. Dawn

    “Build on the basics” … good advice for lots of things we attempt!

    Thanks for the primer!

    [Reply]

Leave a Reply



Back to top