You Asked: Basic HTML Skills

I am by no means (just ask my colleagues) a Web guru of any kind, let alone Web design, but there are a few basic skills that save me time, money and a LOT of headaches.

And they’re skills that YOU should know, because they’ll allow you to not only customize your posts, but do fun things like embed media, play with alignment, add captions and more.

In this first installment, a few definitions to go over (with a lot of help from one of my very favorite sites, http://www.w3schools.com/):

DEFINITIONS

HTML

  • HTML stands for Hyper Text Markup Language
  • An HTML file is a text file containing small markup tags
  • The markup tags tell the Web browser how to display the page

Note: Depending on where you are writing or accessing your code, you will want to look for the HTML or SOURCE link/tab on your editor to find the code. If you’re writing through the WordPress dashboard, it’s here:

You can get to it in Live Writer, Ecto, etc., as well, but you might have to hunt around.

Tags

  • These are usually indicated by < and >, and they basically block off specific elements in the code (see above). This is a big generalization, but the < basically tells the code where the new element starts, and the > tells it where it finishes.

Note: an example of tags in HTML code, with elements marked by different colors:

<strong><em>HTML</em></strong>

<ul>
<li>HTML stands for <strong>H</strong>yper <strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage</li>
<li>An HTML file is a text file containing small <strong>markup tags</strong></li>
<li>The markup tags tell the Web browser <strong>how to display</strong> the page</li>
</ul>

WYSIWYG

  • This stands for “What You See Is What You Get.” Makes sense, huh? This is also known as a visual editor, and it’s what most non-developers use to create blog posts. It’s the reason that when you enter a photo, it looks like this:


and not the HTML that actually tells your blog what to spit out:

<img class=”aligncenter size-full wp-image-3826″ title=”Photo 104″ src=”http://katywidrick.com/wp-content/uploads/2011/02/Photo-104.jpg” alt=”” width=”384″ height=”288″ />

Embed Code(s)

  • A piece or pieces of code that allow you to place an image, video or other element in your post — the best examples are probably videos, and if you’ve ever posted a YouTube video on your site, you’ve probably used the embed code.

Depending on the source, the code will look something like this:

<iframe title=”YouTube video player” width=”480″ height=”390″ src=”http://www.youtube.com/embed/Z3ZAGBL6UBA” frameborder=”0″ allowfullscreen></iframe>

or

<object width=”480″ height=”390″><param name=”movie” value=”http://www.youtube.com/v/Z3ZAGBL6UBA?fs=1&amp;hl=en_US”></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/Z3ZAGBL6UBA?fs=1&amp;hl=en_US” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”480″ height=”390″></embed></object>

And once you embed it in your code, it will look like this:

Embed codes can be customized, so even if you play around with the size, color etc. when you get the code, you can tweak it even more using (aha!) HTML.

Example: using the same code above but adding <center> and </center> tags, I can put the video in the center of the post, rather than keeping it justified to the left.

There is much more to learn, grasshopper, so I’ll leave you with this for now.

In the next installment, I’ll go over some common HTML tags that you should know — so stay tuned, and if there are other questions I can answer for you, please let me know in the comments or by submitting something on my “Ask Me” page!

Get Updates By Email!

Don't miss a single post -- subscribe for free posts delivered right to your inbox.

Comments

    • says

      I am so jealous! There are many classes I wish I’d taken in school, and HTML is a big one. If you ever want to do a guest post with more blogging tips, let me know — we can trade!

  1. Andrew Henderson says

    Now you’re speaking my language :)

    w3schools is indeed an excellent resource for HTML beginners. Even being a more advanced web designer I find myself constantly popping in on the site to check this or that. If you find yourself loving HTML and wanting to know more, I highly suggest checking out http://www.lynda.com. While its certainly not cheap (aprox $25/month), they have detailed walk-throughs for just about every language and software that is available.

    p.s. I love the look of your site these days very clean and pretty. Reminds me of you :)

    • says

      AHHHH SQUEEEE Jump up and down my brother just commented on my blog!

      $25 a month is not a bad deal for bloggers who are making money with their websites, so thanks for the info!

      Wanna do a guest post for me on some basic stuff we should all know?

    • says

      Sarah —

      The codes go exactly where you want the change to happen. For example, if you want the following phrase to be centered:

      I love blogging

      You’d write:

      I love blogging

      Anything that comes before or after those tags won’t be affected.

      One caveat — WordPress can be funky when it comes to
      (line break) and

      (center) tags. If you blog through the WP dashboard, you’ll want to go into the HTML tab, make your changes and publish without going back to the visual editor. It’s a pain, but it’s one of the ONLY things I don’t love about WP.

      If you blog through Ecto or Live Writer, you shouldn’t have the same issues.

    • says

      AHHH that’s funny! I forgot that my comments actually allow HTML, so it took my commands and actually did what I was trying to explain…therefore, making my explanation a little less helpful. Let’s do this — if you still need help, reply by email and I’ll send it to you there.

Leave a Reply

Your email address will not be published. Required fields are marked *

Current ye@r *