Feb 28, 2012 / Intermediate

HTML, CSS, IDK

One of the best things about blogging on WordPress.com is that, within moments of signing up, you can get a site up and running without any website building experience. No prior knowledge required.

However, you may have heard the phrase that “scripting is the new literacy.” Since I work in support on WordPress.com, one of the more common questions that I see asked is, “I published a post, and now my sidebar is at the bottom of the page. What happened?” Usually, these types of layout issues are caused by improperly formatted HTML within a recently published post. It can be tricky to locate the culprit, especially if you don’t have much experience with HTML.

If you haven’t heard of HTML or CSS before, here’s the run down: HTML is a markup language that essentially tells your internet browser how to display your webpage. This includes formatting the text on your page to inserting images. CSS is a styling language that allows you to change the look of your HTML. For example, with CSS, you can tell the internet browser to display all items marked in italics in the color blue and center-aligned. It also allows you to do more fancy formatting with your site, including laying out your actual webpage with sidebars, footers, and so on.

With the Visual Editor, you don’t need to know any of this to publish a nice looking post. However, I find that being able to modify the appearance of my site is one of the more fun aspects of blogging. Additionally, if you write poetry or are trying to emphasize a particular section of your post, it can be nice to learn how to introduce some additional formatting. (This is usually done by what’s known as “in-line” CSS, which means the your CSS code is written directly into the HTML editor.)

Some of the resources below offer excellent tutorials, ranging from basic to advanced, on HTML and CSS. While they may not have a direct impact on your writing practice, as online writers it’s beneficial to know what’s going on behind the scenes of your posts — this way, as you want to play with the appearance of your online presence or, of course, if anything breaks, you’re completely prepared to take on the job.

Show Comments

28 Comments

Comments are closed.

Close Comments

Comments

  3. I love the way you post these little tid-bits of information a little at a time. Absorbing the knowledge is not so overwhelming presented as such. Thank you. Some of us are still feeling our way through the computer lingo and every little bit helps. 😉

    Like

  4. Thanks for the links. Are there any help pages specific to WordPress and the HTML allowed there? For example. I have tried to insert a   but it never seems to stick. Is this just not allowed?

    I also tried to tab something over and it ends up with a vertical gray line beside it.

    Like

  9. And what means “IDK”? I also miss the terms “Open Source” and “MM”. “Open Source” is the programming-code which WordPress is using and which is the secret behind all the compatibility-problems with simple “Word”-formatting and the IE9 , and “MM” is Matt Mullenweg whose permanently changing ideas could give one the impression of being his laboratory-rat.

    Occupy WordPress

    Like

  10. Great post! Thanks for the resources. It’s never that simple trying to find great sources to help you understand code.

    Like

  11. Thank you Erica, for this post. I am not a total beginner when it comes to html or css but was not aware of the fact that I could implement them in my blog. Perhaps I can do some experimenting on my next article. Also great that you’ve summed up some useful links. There is always more to learn!

    Like

  12. Thank you all, I’m overwhelmed at so much to learn, after reading your comments I don’t feel so alone.

    Here’s to creating new neurons♥

    Like

  23. One thing that I often recommend to people whose HTML breaks, is downloading the free program Notepad++ and using it to check that all tags that should have them, have mates. It’s so much easier to find orphan HTML tags when the software color-codes things for you!

    Like