In today’s world, you can’t avoid the internet. It doesn’t matter if you’re a blogger who makes their living on the internet, or just someone who occasionally checks facebook. The internet is unavoidable, and it’s all run using a language called HTML and CSS. Most people run away screaming when you tell them to customize their code, or even to try something as simple as editing a button or image.
So take a deep breath, sit back, and let me promise: it’s so much easier than you think.
To all you code geeks out there: For the sake of this, I’m ignoring all other languages, because this is just supposed to be a very general overview. If you want to be fancy and talk about python and java that’s great, but don’t hijack my “basics of HTML and CSS” post to tell me I don’t know what I’m talking about.
Here’s some quick coding jargon to throw around at your next party (and here’s a full list, if my quick explanation isn’t enough for you, you nerd).
- Open tag
- Close tag
- <i> </i>
- Anything that you put between those two will be italic
- <b> </b>
- Anything you put there will be bold
- <p> </p>
- Anything between those two will create a paragraph. Each separate paragraph should start and end with one of those.
- Want a new line, but not a new paragraph? Just stick that baby in there and you’re good to go.
- My personal favorite, a simple line to break up your text
- <h1> </h1>
- This is how you make headings. Change the numbers to change the style (<h2> creates slightly smaller text, and so on).
- <center> </center>
- Anything between those two will be centered. By default, text usually aligns to the left.
Probably the number one thing most bloggers seem to struggle with. I have seen some TRULY epic fails. The majority of the problem seems to be in sidebars where you have to do all the editing with code, instead of having a text editor like you do in Microsoft Word or blog posts.
<img src=”URL HERE” />
The code about is what the very basic image code looks like.
Have you ever tried to put something in your sidebar (like a network button), only to realize that its way bigger than you thought, and the image is now spilling all over the place?
Yeah, it sucks.
If you’re used to doing all your blogging from the wordpress dashboard, then you’re used to being able to click and drag your images to make them whatever size you like.
Now lets say I’m adding my Linqia widget into my blog, and it’s WAY bigger than the other images I’ve got there. It looks pretty unprofessional, right?
So above is the line of code that I got from Linqia for my widget. You can see all kinds of crazy stuff, but what I want you to look at is just the bit that says <img …….. />
That’s an image class, it means it controls your images. So now we just need to resize it. My other widgets are 75 pixels tall, so I want them to be the same size. If you’re not sure what size you want your pictures to be, I suggest starting with 100 pixels and then going up and down from there until it looks good. Now I’m just going to add in this line of code: style=”height:75px;width:75px;”
As you can see, I pasted it right after <img because I need it to alter something within that “image class.”
Boom. I now have matching icons.
Add an Alt Title for SEO
Everyone worries about their SEO, so adding keywords at every opportunity is ALL THE RAGE. So here’s how you can add an alt title to any image on your blog.
Go to the image you’d like to edit, and find the <img just like you did last time. Now just paste alt=”INSERT WHATEVER KEYWORDS HERE” and you’re all good!
Links are super easy to format, so here’s the basic styling.
<a href=”URL YOU ARE LINKING TO” >URL NAME OR WHATEVER TEXT YOU WANT TO SHOW UP</a>
Easy enough, right? That’s all you need to create really, basic and still useable links.
You know when you mouse over a link and you get that awesome hover title? Hold your mouse over this. That’s a hover title, and it can be used to give your auidence a better idea of what they’re clicking. It’s an easy line of code.
To add one to a link you’ve already got, just paste title=”HOVER TEXT” in after <a so your text looks something like this:
<a title=”Join my newsletter if you think this is cool, yo” href=”http://thewritingcrafter.com/newsletter/”> Hold your mouse over this</a>
Make Paragraph Open in New Tab
Want people to be able to visit a page, but afraid they might not come back? Or maybe you just want to rick roll them? All you have to do is take your link, and add in a simple target=”_blank” which tells the link to do just that.
<a href=”https://youtu.be/dQw4w9WgXcQ?t=42s” target=”_blank” rel=”noopener”>rick roll</a>
You should never cheat on your home work (that’s called plagiarism, and it’s really shitty), but you can totally “cheat” your blog coding. Just open up a new post in wordpress, then format your link/image however you would like. Then go to the top where you see the “Visual” and “Text” tabs. Click the text tab and it will give you the code for what you just edited. Copy and paste that sucker.
*** Of course, this looses some of the options (like hover titles for links) but if you’re working on the fly, or just need to make an image smaller, its a great option.
Sometimes when you copy and paste code, it doesn’t work the way it should. In that case, you just need to find all the quotation marks (and trust me, there’s probably more than you think), and delete them, and retype them with a simple double quotation: “
For some reason, a lot of the time when you copy and paste code, it messes up the quotation marks, and then the code can’t register it, and the computer basically thinks you input AGISFNAvaobihfflkeqjnfdasvoibhk. No fun. So if you have code problems, the first thing to do is check your quotes.
Please be careful when you’re messing with code. I don’t recommend doing anymore than playing with widgets in your sidebar unless you really know what you’re doing, because you could seriously mess stuff up!!
That being said, if you need any further help, w3schools is the place to be!