So after a three month hiatus with these posts, I'm finally getting back at it again! In honor of my third blogoversary last year, I began this series of Guides that contain all my knowledge that I've gleaned from being a blogger. I'm currently celebrating my fourth blogoversary at the end of March (yay!!!) and there will be a bit of a surprise for that (aka a giveaway and other special things coming in June... probably). But back to this Guide. I've done four other Guide's before this which I've linked below for your convenience. And, without further ado, onto the basics of HTML!
The Pursuit of Reviewers
Review Writing
Blog Design
The Wonders of Images
The Pursuit of Reviewers
Review Writing
Blog Design
The Wonders of Images
HTML is actually rather simple once you get the hang of it. Mostly, it's just practice, practice, practice. In the other sections of this post, I'll be detailing specific codes you can use but this section is more about the general stuff.
HTML basically consists of a starting tag and an ending tag. I'll use the italics tag as an example. To make text italic, you use a starting tag, <i>, and an ending tag, </i>, with your text sandwiched in the middle. The absence of a slash in the starting tag tells the program to begin the alteration there and the slash in the ending tag tells the program to stop that alteration. It's important that you always include a starting and ending tag.
Every single command in HTML is based in this idea!
 |
| Slightly unrelated but I couldn't resist a Star Trek theme! (Pinterest) |
In Summary: The HTML language is based in started and ending tags that border the text you want to alter.
This is the most basic kind of HTML and it's the first code I ever learned!
Italics: <i>YOUR TEXT HERE</i>
Bold: <b>YOUR TEXT HERE</b>
Underline: <u>YOUR TEXT HERE</u>
<spoiler>YOUR TEXT HERE</spoiler>
 |
| Askideas |
These alterations are mainly useful in Goodreads but they're also useful if you want to create your own gadgets (there's a gadget specifically in Blogger for HTML so you can write some code and it'll show up on your sidebar; see my images Guide for more information).
Another useful tag for bloggers includes the blockquote tag. It makes your text sit in the middle of the page like so:
“If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.” ― J.K. Rowling, Harry Potter and the Goblet of FireThis tag is:
<blockquote>YOUR TEXT HERE</blockquote>
See? I told you it was pretty intuitive!
In Summary: Border your text with the correct tag (HTML is a very intuitive coding language so don't get to wound up!).
Images:
For general images, you use the <img> tag.
<img scr="IMAGE URL HERE">
It's also a very good practice to add an alt attribute. This is the text that is displayed when an image is unable to load.
<img scr="IMAGE URL HERE" alt="ALT TEXT HERE">
To alter the image height and width, you just add on more into the brackets.
<img scr="IMAGE URL HERE" alt="ALT TEXT HERE" style="width:PIXEL WIDTH;height:PIXEL HEIGHT;">
You may not be super familiar with how big a pixel is but that's how images are measured in code so it does take a little trial and error. Start with numbers around 500-600 (500px, 550px, etc) and see what works.
For example this is the code behind this image:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAgLFTd99P6W-tpv-TO-f5bcHB72SsICOZYs-49jt6di_UVRidaVswj4k-VXuOhZpoObhIvitDAD0V-mw7umuLbTBKYgww9Uf6-5jAVAn2kUrpamcOpU0RGAUGJlCQefiTAP35d1UVqidA/s1600/spock+meme.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="621" data-original-width="500" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAgLFTd99P6W-tpv-TO-f5bcHB72SsICOZYs-49jt6di_UVRidaVswj4k-VXuOhZpoObhIvitDAD0V-mw7umuLbTBKYgww9Uf6-5jAVAn2kUrpamcOpU0RGAUGJlCQefiTAP35d1UVqidA/s320/spock+meme.jpg" width="257" /></a>
The <a> tags on either end start and end the image that's also being used as a link.
The href= tag is where you will go if you click on the image. In this case, it'll take you to a larger version of it (go ahead and try it and you'll get it). If you want the image to go someplace in particular, you can replace that web address with any other website.
The style= and imageanchor= tags are what determine what it looks like on the page and where it sits relative to everything else. In the first <a> tag, this is all included within it: <a href="link" imageanchor=...>
The img border= tag determines if there's a border or not.
The width= and height= tags determine how big it is (in pixels).
The src= tag is the image itself (the link you see is the sort of 'self hosting' link. Once you publish the post, that link will become active because the image now resides on your website. If you don't publish it, that link doesn't go anywhere).
There is no alt= tag here because generally I don't take the time to do that (although I really should).
Links:
These are a simple variation of the image coding. To make this link for the homepage of my blog, the coding is:
<a href="http://www.blueeyebooks.blogspot.com/" target="_blank">the homepage of my blog</a>
Here, the <a> tag appears again, bordering everything. Again, within the bracket of the first <a> tag is the href= tag: <a href="link">
The href= tag refers to where the link is going.
The target= tag is indicating that I want the computer to open a new tab (aka the '_blank' part) when the link is clicked (if you don't want it there, you simply omit it; there are also different things you can put there for different results (see the last section)).
Then comes the text that you want to be linked with no special tag.
 |
| Memegen |
Personally, I don't write my own code all the time but it comes in handy a lot when Blogger is being glitchy and I need to alter it myself. It also helps when inserting HTML you get from someplace else so you can tell where you're inserting it relative to the other things you already have on the page. Just try taking a peek at the HTML version of your blog posts and try and identify some of the tags used. The more you're exposed to something, the less foreign it becomes and the easier it is to understand!
In Summary: <a> tags are used for links and <img> tags are used for images. href= is used to make a link go where it needs to go and you can specialize each accordingly.
There are some things on this blog and I worked up myself, or I found examples of it ages ago and adapted it (I'm sorry, I can't link back to where I found most of them because it was forever ago!).
The code for my 'Contact Me' buttons on the side bar is:
<a href="https://www.goodreads.com/user/show/22129064-laura-w" target="_blank"><img alt=" photo Goodreads icon_zpsnxmzc7hp.jpg" src="http://i347.photobucket.com/albums/p441/lauraew333/cfeb01e0-1550-4dea-88c9-26f7f5156669_zpsv8dvch1i.png" border="0" / /></a><a href="https://www.instagram.com/blueeyebooks/" target="_blank"><img alt=" photo Instagram icon_zpsuah5q9cy.jpg" src="http://i347.photobucket.com/albums/p441/lauraew333/31ad3829-f213-4807-8067-b4d734a1a8c5_zpsnxcsa9pv.png" border="0" / /></a><a href="https://twitter.com/blueeyebooks" target="_blank"><img alt=" photo Twitter icon_zpsikif7jtx.jpg" src="http://i347.photobucket.com/albums/p441/lauraew333/df12e2ca-0232-49e0-abb5-679da7bb36be_zps2dum6uuc.png" border="0" / /></a><a href="https://www.bloglovin.com/blogs/blue-eye-books-12681889" target="_blank"><img alt=" photo Bloglovin icon_zps5yq62ceu.jpg" src="http://i347.photobucket.com/albums/p441/lauraew333/f1986c42-86d6-48bf-88eb-7bc1fcb208d0_zpsutsa18iu.png" border="0" / /></a><a href="https://plus.google.com/107896155625745387787" target="_blank"><img alt=" photo Google Plus icon_zpsvwjvtxe8.jpg" src="http://i347.photobucket.com/albums/p441/lauraew333/492ef38b-e09c-4004-b0ba-66fd2e760900_zps8tfgcio0.png" border="0" / /></a><a href="https://www.facebook.com/blueeyebooks" target="_blank"><img alt=" photo 539b734b-c2d3-498c-bc89-b1068163f96d_zpswfeefnzu.jpg" src="http://i347.photobucket.com/albums/p441/lauraew333/dab93ec2-4ba4-40d9-bf97-11b4c46f4f1f_zpssjbvjmlj.png" border="0" / /></a>
You can see the different parts of the code (Goodreads, Instagram, Twitter, Bloglovin, Google Plus, and Facebook). Basically, it's a glorified way to get tiny images with links attached all together in one gadget. The basic code is below. I use photobucket to store images so my code can pull from there where they are hosted (that's what all the photobucket links are). You need to host all your images somewhere and while photobucket can be kind of slow and glitchy, it's served my needs thus far.
<a href="link" target="_blank"><img alt="alternate text to be displayed" src="where the image is" border="0" / />
 |
| Make a Meme |
I also use a bit of code for my yearly progress bar:
<a href="https://www.goodreads.com/user_challenges/4224718">Yearly Goal</a>
<div style="width: 185px; height: 15px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0);"><div style=" width: 36%; height: 15px; background: none repeat scroll 0% 0% rgb(11, 204, 243); font-size: 8px; line-height: 8px;"></div></div>
36/100 books
The first part is the link to wherever you want it to go (I made mine go to my Goodreads challenge page).
The next part is what you want the progress bar to be titled.
This part is where the dimensions of the bar come in (in pixels). You can play around with this a bit until you get the right size for your sidebars.
This part is where you can select background color for your bar (aka the white part on mine). (this part is a bit of CSS but it's worth it!) There are a lot of great websites out there for getting the numbers associated with a certain color (you want the rgb numbers) but I really like this one.
The next part is for the border which you can also color (but I chose to keep black).
The next part is for the colored bar itself (mine is blue). The percentage is where you change how far the bar progresses (since I've read 36/100 books (as noted at the bottom) I have it at 36%).
The last part is for the text at the bottom saying how many books you've read and how big the font is.
 |
In Summary: Once you get used to the basic format of HTML, it's relatively easy to understand more complex levels. And don't be afraid to tinker with things to see what happens!
There is a LOT to know about HTML and I didn't want to make the post too long (plus I only wanted to include what I use on a regular basis), so if you're interested in learning more, I've included some really helpful websites where I've learned a lot of my HTML!
KhanAcademy is an amazing resource and they have all sorts of interactive classes for all different types of coding. It provides some great practice situations too.
HTML.com is a great place if you ever forget how to do that one thing (like links) and you need a quick reminder on the order of things. They have a great reference guide.
w3schools is a great place if you also just need a quick reference guide. They have great step-by-step tutorials on how to slowly work up the complexity of a bit of code from images to tables to page organization.
Small Review does some fabulous HTML tutorials as well that I didn't have time to include in this guide including how to do those fancy colored boxes, internal links, and blog rolls! Definitely check it out for more information!
Practice Board is a great place to practice your HTML and perfect a chunk of code before putting it on your blog!
In Summary: There are so many resources for learning more and more is always better!
 |
And there you have it! Do you use the same sorts of code I do on a regular basis? Do you do your own coding? Any additions? Any code you want me to explain in greater detail in a future post? Let me know!
This is so cool. I actually learned some stuff and coding has always been rather complicated to me. So thanks!
ReplyDeleteThanks, Carrie! One of my long-term goals this summer is to learn a lot more HTML and start learning a bit more CSS! It always seems like the more I know, the better I can make my blog. I'm glad you got something out of it :) Thanks for stopping by, Carrie!
DeleteAwesome! The only HTML I do is change picture sizes. The rest looks like gobbledygook to me. You make it almost look easy. What I want to learn to do on blogger is put pictures side by side but I’m super lazy.
ReplyDeleteThank you :) Haha I'm glad . It's taken me four years to figure this all out and that's because I've been actively looking around for stuff so it definitely looks intimidating at first! How I normally do it is insert one picture, make it a bit smaller, put my cursor right next to it (it should flash in the bottom right corner of the picture), then insert another picture and it should show up right next to it. You can also drag them around so they sit next to each other. I've never looked at the code for that particular maneuver but I definitely should; thanks for reminding me, Jenny!
DeleteThis is an excellent basics to HTML post Laura! While I know all this that is only because I recently started self hosting and you in fact HAVE to know quite a lot of HTML if you want some of the same alterations as in WP... I had to get the color code and now I do a lot of my formatting in the text window because its easy to copy and paste formatting that way! ❤️
ReplyDeleteThank you, Dani! I'm hoping to work up to self-hosting in a year or two after I learn a bit more so it makes for a smoother transition :) I completely get editing it all in the text window! I just started using those colored boxes around the book's info and it's so much easier to write a post that uses a lot of those boxes if I just completely write it in that window. I admire you for making the leap to self-hosting and really embracing all the coding!
DeleteI often nip in and edit Blogger html too, especially when it's being cranky. I like to use basic tables with border=0 to keep things looking neat.
ReplyDeleteIt's really useful then, isn't it? I used to just give up writing my post but now I can actually fix the problem which is so wonderful. Yes, I've noticed! I've been meaning to try those out, especially for wrap-ups. Thanks for reminding me and stopping by, Stephanie!
Delete