Wednesday, May 23, 2018

A Guide: The Basics of HTML

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

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>
Strikethrough: <strike>YOUR TEXT HERE</strike>

There is also another type of alteration that is really useful in Goodreads: the spoiler alteration.  If you want to make text hidden in a spoiler link in Goodreads, this is the command:

<spoiler>YOUR TEXT HERE</spoiler>


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 Fire
This 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!).

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="" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="621" data-original-width="500" height="320" src="" 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).

These are a simple variation of the image coding.  To make this link for the homepage of my blog, the coding is:

<a href="" 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 window (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.


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="" target="_blank"><img alt=" photo Goodreads icon_zpsnxmzc7hp.jpg" src="" border="0" / /></a><a href="" target="_blank"><img alt=" photo Instagram icon_zpsuah5q9cy.jpg" src="" border="0" / /></a><a href="" target="_blank"><img alt=" photo Twitter icon_zpsikif7jtx.jpg" src="" border="0" / /></a><a href="" target="_blank"><img alt=" photo Bloglovin icon_zps5yq62ceu.jpg" src="" border="0" / /></a><a href="" target="_blank"><img alt=" photo Google Plus icon_zpsvwjvtxe8.jpg" src="" border="0" / /></a><a href="" target="_blank"><img alt=" photo 539b734b-c2d3-498c-bc89-b1068163f96d_zpswfeefnzu.jpg" src="" 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="">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. 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!

I know, I know, this has nothing to do with it but just look at Sherlock!!!  I enjoy Sherlock...

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!

Sunday, May 20, 2018

Review Sunday: Q by Luther Blissett (aka a team of authors)

Standalone to date
Released: 1999

"In 1517, Martin Luther nails his ninety-five theses demanding reform of the Catholic Church to the door of Wittenburg Cathedral, setting off a period of upheaval, war, civil war and violence we now know as the Reformation.

In this age devastated by wars of religion, a young theology student adopts the cause of the heretics and the disinherited. Across the chessboard of Europe, from the German plains to the flourishing Dutch cities and down to Venice, the gateway to the East, our hero, a 'Survivor', a radical Protestant Anabaptist who goes under many names, and his enemy, a loyal papal spy and heretic hunter known mysteriously as "Q" play a game in which no moves are forbidden and the true size of the stakes remain hidden until the end. What begins as a personal struggle to reveal each other's identity becomes a mission that can only end in death."

Friday, May 18, 2018

50/50 Friday (85): Book You Can/Can't Bring Yourself to Reread

50/50 Friday is a meme hosted by Carrie @The Butterfly Reads and I and focuses on the opposite sides of books (best/worst, differing opinions, etc).  Every week will have a new topic and several advance topics will be listed in the tab labeled 50/50 Friday!

Today's Topic: Book You Can/Can't Bring Yourself to Reread

Wednesday, May 16, 2018

Review Wednesday: Empire of Storms by Sarah J. Maas (Throne of Glass #5)

Throne of Glass #5
Released: 2016

"The long path to the throne has only just begun for Aelin Galathynius as war looms on the horizon. Loyalties have been broken and bought, friends have been lost and gained, and those who possess magic find themselves at odds with those who don't.

With her heart sworn to the warrior-prince by her side, and her fealty pledged to the people she is determined to save, Aelin will delve into the depths of her power to protect those she loves. But as monsters emerge from the horrors of the past, and dark forces become poised to claim her world, the only chance for salvation will lie in a desperate quest that may mark the end of everything Aelin holds dear.

In this breathtaking fifth installment of the New York Times bestselling Throne of Glass series, Aelin will have to choose what—and who—to sacrifice if she's to keep the world of Erilea from breaking apart."

Sunday, May 13, 2018

Review Sunday: A Court of Frost and Starlight by Sarah J. Maas

A Court of Thorns and Roses #3.1
Released: May 1st, 2018

"The Winter Solstice. In a week. I was still new enough to being High Lady that I had no idea what my formal role was to be. If we'd have a High Priestess do some odious ceremony, as lanthe had done the year before. A year. Gods, nearly a year since Rhys had called in his bargain, desperate to get me away from the poison of the Spring Court to save me from my despair. Had he been only a minute later, the Mother knew what would have happened. Where I'd now be. Snow swirled and eddied in the garden, catching in the brown fibers of the burlap covering the shrubs My mate who had worked so hard and so selflessly, all without hope that I would ever be with him We had both fought for that love, bled for it. Rhys had died for it."

Friday, May 11, 2018

50/50 Friday (84): Series On Your TBR You'll Keep/Get Rid Of

50/50 Friday is a meme hosted by Carrie @The Butterfly Reads and I and focuses on the opposite sides of books (best/worst, differing opinions, etc).  Every week will have a new topic and several advance topics will be listed in the tab labeled 50/50 Friday!

Today's Topic: Series On Your TBR You'll Keep/Get Rid Of

Wednesday, May 9, 2018

Review Wednesday: By a Charm and a Curse by Jaime Questell

Standalone to date
Released: February 6th, 2018

"Le Grand’s Carnival Fantastic isn’t like other traveling circuses. It’s bound by a charm, held together by a centuries-old curse, that protects its members from ever growing older or getting hurt. Emmaline King is drawn to the circus like a moth to a flame…and unwittingly recruited into its folds by a mysterious teen boy whose kiss is as cold as ice.

Forced to travel through Texas as the new Girl in the Box, Emmaline is completely trapped. Breaking the curse seems like her only chance at freedom, but with no curse, there’s no charm, either—dooming everyone who calls the Carnival Fantastic home. Including the boy she’s afraid she’s falling for.

Everything—including his life—could end with just one kiss."

Related Posts Plugin for WordPress, Blogger...