Subscribe to my RSS Parajunkee on Twitter Like on Facebook! Goodreads YouTube Tumblr
Paypal
Google Email Me! google Amazon profile
Paranormal Romance, Urban Fantasy, books, movie, giveaways and more! This blog has moved. View latest greatest info at parajunkee.com

12.30.2010

Book Blogging 101 - Basic HTML Bloggers Should Know

This is where I pretend that I know what I'm talking about.

Spawned from the Big Sis, Little Blog program, Book Blogging 101 was born. Do you have a question? Leave it in the google docs form and I'll try and answer them in the order they are received.

Q: You do a lot of HTML right?? How do I make a link?



Today's post is a tutorial on basic HTML that every blogger should know.

 

First things first, what is HTML?

wiki defines HTML as... HTML, which stands for HyperText Markup Language, is the predominant markup language for web pages. A markup language is a set of markup tags, and HTML uses markup tags to describe web pages.

WTF? Right?

Basically HTML is the code behind the page. The internet is an interpretation of data. Pictures aren't sent from one address to the other, data is streamed. That data is coded, and your browser, whether it is Internet Explorer *stink face*, Firefox *happy face* or other less commonly used browser such as Chrome and Safari, interprets that code into pictures. So you see a pretty purple page and your browser sees:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Purple Page</title>
<style type="text/css">
<!--
body {
background-color: #609;
}
-->
</style></head>
<body>
</body>
</html>


Now I don't expect you to be a coding master, like me *snicker*, but there are a few things that you really should know as a blogger. Things that will make your life easier. A basic understanding of HTML might help, also.

Let's start here...
HTML is a series of tags. Each tags does a certain function. You might even know these tags, you've probably seen them around a bit. Tags are things like b for bold, em for emphasis and p for paragraph. Each tag means a different thing and the more tags you know the more things you can do. Each programmer has a good bit of these tags memorized, but mostly we rely on sites like w3schools and such to look up tags that we don't know by memory.

Each tag will be nestled within greater than and less than symbols. This tells the browser that it is an opening tag and a closing a tag. So, you should know that a browser looks for this to know that it is code:

Open: <TAG>
Close: </TAG>

the / symbol is telling the browser that it is time to close this certain function. If you miss a < or > your code will not work.

 

Tags your Should Know.

H1 - Heading 1 <h1>Your Header 1</h1>

H2 - Heading 2<h2>Your Header 2</h2>

H3 - Heading 3 - they go all the way to Heading 6. This is how you show hierchy in your posts, headers, subheaders etc. It also helps with SEO.

ALIGN:

<center> Center </center>
<left> Left Align </left>
<right> Right Align </right>

LINKS:

Now it gets a bit more complicated, because now we are introducing TAG ATTRIBUTES. Once you open a link tag you have a few options to style and command these tags, these extras are call attributes. You can tell the browser what to link to and you can tell it how to link to a certain URL. This is handy if you don't want them to leave your page. I use this a lot when I link to external links. There are tons of attributes that you can add to each tag and they change for a lot of tags. But, I'm only going to focus on a few here.

The link tag is:
<a> </a>

But there is a lot more to it, because you have to tell it where to link to:

<a href="YOUR LINK">Text Description</a>

Very important to have the http://www.yourlink.com completely spelled out and in quotation marks. If you forget a quotation mark your code will not work. Also you want to write some sort of descriptive text so they know where to click. That is where I have 'Text Description'

The URL that you are linking to is an external link, so you don't want them leaving your page. This is where we give the broswer a target.

<a href="YOUR LINK" target="_blank">Text</a>

The tag you are worried about is that _blank - which is telling the browser to open a BLANK page.
Here is how you would link to my blog:

<a href="http://www.parajunkee.com" target="_blank">Parajunkee's View</a>

The code shows this: Parajunkee's View

 

Link to your email.

There is actually a different kind of link to open someone's email client with your email address. It is really simple though. You start it just like you would a regular link, but instead of putting a URL you put your email address, with mailto: in front of it.

<a href="mailto:parajunkee@gmail.com">Email Me!</a>

Shows like this:
Email Me!

Resizing Images


You've seen it a lot around the blogoverse. Those images that "pop out" of sidebars. I mean, you have your sidebars set to 230 pixels and that happy image that you want to put on your sidebar is 300 pixels. You only have the code, so you can't resize it in a blogger picture window. So let's breakdown that code:

This is the code for my button.

<center><a href="http://www.parajunkee.com"><img src="http://farm5.static.flickr.com/4124/5192724855_fce67087f9_o.png" border="0" /></a></center>

If you notice there are a few tags you might recognize. Look for the first tag <center> then the <a> tag follows, which is linking to parajunkee.com. Then it is the <img> tag which is telling the browser that it wants to display an image. The SRC attribute within the <img> tag is telling the browser that this is the source of the image and the link that follows is the link to the image that I have hosted on flickr. Following the SRC attribute is a BORDER attribute. This is telling the browser that you shouldn't put a border around the image. This happens a lot in web pages, it will put a default border of 1pixel if the image has a link attributed to it.

Now the unfortunate thing about this image is that it is 300 pixels wide. Your sidebar is only 230 pixels, so this image will pop out of your sidebars.

There are a few attributes that are common within the <img> tag and that is height and width tags.

In it's native format the image would show as:
<img src="http://farm5.static.flickr.com/4124/5192724855_fce67087f9_o.png" width="300" height="428" />

You can actually not list the height if you specify the width and the height will sort itself out, which is a good thing to remember. You don't want to keep the height at 428 when you resize the width, this will distort the image and make it look really funky. Also the default is pixels, but you can switch to a percentage, which is something I like to do. So in order to do this let's go back to our original code:

<center><a href="http://www.parajunkee.com"><img src="http://farm5.static.flickr.com/4124/5192724855_fce67087f9_o.png" border="0" /></a></center>

Now let's add a width attribute with a percentage. You can do anything from 0% to 100%, you can even go more than 100%, but you don't want to do that, because then you would bust out of your sidebars again, or you would distort the time image and make it look very pixelated. So, I'm going to set it to 98% width, just because I don't want it to max out the sidebar.

Give it a little room:
<center><a href="http://www.parajunkee.com"><img src="http://farm5.static.flickr.com/4124/5192724855_fce67087f9_o.png" border="0" width="98%"/></a></center>

For those image scrollers or challenge badges you want to add, and want to have perfectly aligned with all the other images on your sidebar, this is a wonderful HTML attribute to know.

I'm going to stop here, but there is more to learn! Stay tuned for part II.




Ask your BB101 Questions here...

4 comments:

Akoss said...

Thank you <3
the tips about the images are really great.

Anonymous said...

Um..I think I have headache...

Laura (All of Everything) said...

Omg this is so handy, thanks! *goes to fix busted sidebar*

Angela's Anxious Life said...

Thanks for the email me HTML!!! I have been trying to figure that one out for a while now!!

Angie

Post a Comment

Let me have it...