I first began teaching myself HTML back in the days of MySpace. Since starting my blog, however, I’ve learned some very complicated ones. If you’re a newbie to HTML, these next five codes are ones it is pretty much essential to know! Having a basic knowledge of how these codes work is a great start to understanding more difficult HTML that you might be interested in applying to your blog as you become familiar with it.
- <img src=”URL to the image”>
This code is how you put an image on your page. It’s for hosting outside of your blog provider, such as Photobucket or ImageShack. I prefer to use outside hosting because Google makes a very confusing mess of just trying to add a photo if you choose to upload it and have it hosted by them.
- Links that open in a new window.
The code <a href=”URL to site”>Site Name</a> is how you make a link. With this set-up, when a visitor clicks on the link, they leave your blog and are directed to the new site. I don’t care for that because I might not be done what I’m trying to say in my post!
So by adding the element target=”_blank” after the URL to the site, the link will open up in a new window. Now the viewer can decide if they want to close out of your page. So it would look like this:
<a href=”URL to site” target=”_blank”>Site Name</a>
3. Using images as links.
In most blogs, you don’t see the URL to the link written out in text. Instead, people use buttons or images or icons. So this code is very important! I gave you the code to make a URL clickable in my second most useful code. Now we’re going to combine numbers 1 and 2!
So first, you start the code that makes a link active:
<a href=”URL to site”>
(Now you could add target=”_blank” after the second quotation if you want it to open in a new window 😉
After you close the start of the link code, you simply begin the image code!
<a href=”URL”><img src=”URL to image”>
And then you end the link by placing </a> at the end.
Your finished code will look like this:
<a href=”http://www.blahblahblahblah.com”><img src=”http://blahblahblah.jpg”></a>
and visitors to your site will just see the image and have the ability to click on it to get to the site!
- Hiding specific parts of your blog.
If you want to hide something that your blog doesn’t offer an easy option to, there are many, many codes that will do this for you. Most are short and sweet, but it does gets tricky because you need to be very specific with these codes. I personally have found this site very helpful in providing the correct codes and clearly directing me where to paste them.
<a href=”http://helplogger.blogspot.com/” target=”_blank”>HelpLogger</a>
There is a search box where you can type in your query. For example, if you want to get rid of Blogger’s navigation bar at the very top of the page, type “how to hide navbar” in the search box and BAM! The exact match and similar results are brought up!
I think blogger has maybe 5 different fonts you can automatically select per each post and maybe 5 different sizes for the text. If you’re looking for something in the middle of that, all you have to do is a couple changes to blogger’s generated code. So if you’re not experienced in HTML, select any font face and any size. Then click the tab that says “HTML” instead of “Compose.” Look for the area of text that you want to change. This could take a second or a couple minutes if you don’t know exactly what you’re looking for.
My suggestion? Press Ctrl +F to pull up the “find” box. Start typing in the start of the text you’re looking for to change. You’ll find it highlighted within all the HTML. Now right before the text begins, you’ll see a series of HTML markup, like this:
<span style=”font-family: Helvetica Neue, Arial, Helvetica, sans-serif; font-size: large;”>Hello. This is text.</span>
Although it looks confusing, it’s very easy to see what’s going on here. <span style= is really a way of saying, “I want the following words to be formatted like this…” So it’s the opening to your HTML code. Always leave the quotations within the < and >. Find the part of the code that says “font-family:” You’ll see a name or a series of names of fonts. Select and delete those names up to this ;
Your code will look like this:
<span style=”font-family:; font-size: large;”>Hello. This is text.</span>
Now you can change the font. You have to keep it a web-friendly font when changing it in this case, and this site gives you a list of them:
<a href=”http://www.angelfire.com/fl5/html-tutorial/fontlist.htm” target=”_blank”>Font list</a>.
Depending on your browser, some of them might not work. Choose one you like, such as brush script mt, and select it with your mouse, and click “copy.”
Head back over to your blog post and paste the font name where you deleted the other fonts. So your code would look like this:
<span style=”font-family: brush script mt; font-size: large;”>Hello. This is text.</span>
When you click “Compose” again, you’ll see the applied font live!
Next I’ll move onto font size, but I just want to remind you to make sure you have <span style=”codes codes”> closed with </span> when you’ve reached the end of the text you want to transform.
So Google uses your font size choices as “smallest, small, normal, large, largest.” Many times I don’t like any of those sizes! You can change the font size to something more specific by deleting the word “large” in your code. (Or whatever size you have there.) Make sure you leave the colon before it and the semi colon after it.
There are a couple of different ways you can decide your font size now. You can using the numbers 1 through 7, with 7 being the largest. Or you can use the “pt” scale, which has much more variety. You’re probably familiar with this–average letter typing is done with 12pt size. Here is a complete font size conversion chart…but you really can continue going after 36pt and 48px.
I hope my brief tutorial on these basic elements of HTML have opened a door for you to begin learning codes to design your ideal blog!!
This post was contributed by Dorothy Donahue, an Etsy rockstar! You can find her blog at zzzonkowl.blogspot.com.