Welcome to the first installment of the Tech Help for Bloggers Series. This series is focused on providing technical tips and advice to help you understand and get the most out of your blogging experience. During the next month, a number of topics related to blogging will be covered. Here is the schedule of posts:
Today we are covering the basics of HTML coding.
----------------------------------------------------------------------------------------------------------
Quick Intro to HTML coding
After reading the very helpful suggestions and questions that
you submitted to me in my previous post, I decided to restructure this series a little bit to give a more comprehensive look at HTML coding, starting with the basics of what it is and the general rules for how to write it. The next couple posts will progressively build on these basics and provide practical ways to use HTML to improve your blog.
HTML stands for Hyper Text Markup Language. It's a language that is used to describe web pages. Like any language it has a specific set of rules that govern how to use it correctly to communicate what you want. HTML uses a set of tags (or keywords) to structure and describe page content, much like how sentence structure and grammar are used in spoken languages. These HTML tages are written in a very specific way, surrounded by brackets like this
<html> and often together in pairs like this
<html> and
</html>. Think of these brackets like you would punctuation. The first tag
<html> indicates the opening tag, while the second
</html> indicates the closing tag--designated by the forward slash before the tag name.
All pieces of HTML code are essentially built using these opening and closing bracketed tags with other tags contained in between describing different web pages conditions. The important thing to remember when writing HTML, is to make sure to use the correct tag to indicate what you intend (that is the correct sentence structure) with the correct opening and closing brackets (punctuation) to create the structure needed to effectively communicate what you intend. Let's quickly look at the parts of a very useful piece of HTML:
<a href="http://www.YourWebsiteAddress.com/"><img src="www.URLofImageLocation.com" width="150" height="150" alt="Name of Your Website" /></a>
This piece of HTML describes an image with a linked website address (could be a blog button). This is the first tag of the code:
<a href="http://www.YourWebsiteAddress.com/">
When you pair it down to the basics, <a> describes a link (URL). We use also the abbreviation href= (Hyperlink Reference equals) with <a> to indicate what that tag should link to, that is "http://www.YourWebsiteAddress.com/". Now let's look at the second tag:
<img src="www.URLofImageLocation.com" width="150" height="150" alt="Name of Your Website" />
The second tag, <img> describes the image that will be displayed. We use the abbreviation src= (Source equals) with <img> to indicate the source (URL) of that image. Following the URL is some useful information that further describes the image (adjectives if you will). Width and height are pretty self-explanatory as they indicate the size of the image in pixels. If you wanted to rescale your image, you would need to proportionately change these numbers so that your image doesn't stretch. Last of all, the piece, alt=, indicates the alternate name for the image that would display when you mouse over it.
Finally, for this piece of code, you need only one closing tag on the end because <img> doesn't require one. It's special and here's why; the closing for <img> is typed simply as /> because it is only designating a holding space for the referenced image rather than actually inserting it into the page. It is enough to close simply with </a> to end the line of code since <img> is essentially nested within <a>. It's a special instance (much like you'll find in other languages, especially English actually!).
I realized that I had never written up a proper blog post to talk about my progress with the My Precious Quilt Along. After finishing my Sunglow Loulouthi HST quilt top for the first round of the QAL, I decided to tackle a quilt pattern that I had been wanting to make for a while, Camille Roskelley's Swoon. I wanted to make this quilt using my stash of Hope Valley to give it a bright, vintage look. Since each block in the Swoon quilt calls for two FQ's, I paired my fabrics together in this shot (previously blogged about) to start to get an overall idea of the mix of color and value I wanted.
This past week I decided to try out a new (to me) linky party, Amy's One Thing, One Week Challenge. I figured that it would help me to work more steadily towards my FAL goals and keep me on track to meet some of the deadlines I have in the coming months. Thanks Amy for hosting!
Today I am guest posting over at Quilter in the Gap as part of Rhonda's FAL festivities. I'm sharing a tutorial to get you ready for the 3rd quarter and to help you tackle all of those great projects on your new list. Curious about what it could be? Head on over to Quilter in the Gap to check out my tutorial (I'll give you a hint, the project is in the photo below).
