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/):
- 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.
- 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>
- 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″ />
- 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>
<object width=”480″ height=”390″><param name=”movie” value=”http://www.youtube.com/v/Z3ZAGBL6UBA?fs=1&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&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!