HTML All Book Bloggers Need To Know In Order To Be Successful - Plus Free Cheat Sheets

Wednesday, May 11, 2016

Paper Bindings - HTML All Book Blogger Needs To Know In Order To Be Successful - My backstory and codes I cannot live without.


When I first started working with coding, there was a little thing called Geocities.

The website allowed anyone to create a free website. Fansites for anything and everything popped up overnight. Some were good, most not so much. But if you knew what you were doing, you could really create a site that stood out.

During my 'Fansite Years,' I dedicated myself to learning all I could about HTML and Photoshop. I used frames, mastered tables, and dreamed in html. By myself, I coded and designed every single aspect of that website, and turned it into something I could really be proud of.

If something broke, I fixed it. If I couldn't get something to work the first time, I played with the coding until it did. (Always on a separate file so I would never mess up my design irrevocably in my attempts.)

After I drifted away from my Mutant X days (I had a killer Mutant X fansite by the way, and the floppy disks to prove it) I did not touch a piece of coding for years.

But coding has a way of sticking with you. And once you get it, you never really forget it.



Coding Is A Language Anyone Can Learn.

After starting my blog Paper Bindings (formerly Once Upon A Dream Books) I knew I need to brush up on my website skills. I scanned a few HTML classes, and thankfully it all came back to me. Encouraged, I started teaching myself CSS.

Best decision I ever made.

Everything I've learned these last few years has cemented one thing in my mind: I will never stop using HTML and CSS for my blog.




All Bloggers Need A Basic Understanding Of Website Coding.

It doesn't matter what your blog's focus is, what your education level is, or how much you spend on your blog, if you can't use basic coding, you are severely limiting your own potential.

Raise your hand if your blog has ever messed up the coding on a post you edited on the compose screen. *raise her hand*

It happens, and you need to have the knowledge base to fix it.



Links

Links direct you to another webpage, whether it is on the same website or not. And they are exceptionally easy to code.

<a href="THEURLHERE">WHAT YOUR LINK WILL BE CALLED HERE</a>

Planning a Trip to Harry Potter World at Universal?

Want to open the link in a new window?:
<a href="THEURLHERE" target="_blank">WHAT YOUR LINK WILL BE CALLED HERE</a>

Check out: A Muggle's Guide to Harry Potter World at Universal

Links can get as complex as you want them to:
  • You can change the font of the text.*
  • Link to sections of the same page.
  • Turn images into links. (See below)
* Overall changes should be done via the blog setting menu or by utilizing CSS so you do not have to go back and change every single link if you ever change your design.


RELATEDW3Schools - HTML Links



Images

<img src="THEIMAGEURLHERE">
Paper Bindings - HTML All Book Blogger Needs To Know In Order To Be Successful - My backstory and codes I cannot live without.

Image as a link

<a href="THESITEURLHERE"><img src="THEIMAGEURLHERE"></a>

Paper Bindings - HTML All Book Blogger Needs To Know In Order To Be Successful - My backstory and codes I cannot live without.

Images can get more complex by adding the following attributes inside the <img> tag:

  • border="NUMBER"
  • alt="What text you want to be displayed if the image does not load"
  • width="Number(pixels)"
  • height="Number(pixels)"


*Never direct link to an image from someone else's website. You are stealing bandwidth if you do. Upload the images to your own blog and link to that url. If you are using the image for a signature somewhere else, there are free image website hosts (like photobucket.com) you can use.

**You should always add descriptions to every images. Not only does it does it inform your readers what that blank space should be if it fails to load, fully describing the image and what the post is about allows pinning it to Pinterest to be a snap.

RELATED: Nosegraze's How to Use and Compress Images to Improve SEO & User Experience // W3Schools - HTML Images



Headings

Headings separate text into areas based on content.

I'll be honest here, for years I just selected the heading I thought looked the best and went with that. It wasn't until I read Ashley's SEO Heading Post that I actually understood what they meant to be used for.

<h2>TEXT HERE</h2>

TEXT HERE



<h3>TEXT HERE</h3>

TEXT HERE



<h4>TEXT HERE</h4>

TEXT HERE

<h5> TEXT HERE</h5>

TEXT HERE

<h6>TEXT HERE</h6>
TEXT HERE
*These styles will differ based upon your blog's settings. But the general idea is the same. The lower the number the less important the text falls on the blog's hierarchy.

RELATED: Ashley's SEO Heading Post (Definitely a must read if you do not understand headings.)



Lists

List do exactly as the name implies.

Not only can you list anything your heart desires in a nice organized way, you can use the coding to break up the text and give speed readers something to focus on. If they like what they see, they may be more encouraged to read the more detailed text below it.

Ordered

  1. what
  2. ever
  3. you 
  4. want
<ol>
<li>what</li>
<li>ever</li>
<li>you</li>
<li>want</li>
</ol>


Unordered

  • see 
  • the
  • difference
  • here
<ul>
<li>see</li>
<li>the</li>
<li>difference</li>
<li>here</li>
</ul>
RELATED: Crini from All About Books' Tutorial : Customizing Lists



A Tag I Can't Live Without

div

The div tag separates the headers, images, paragraphs, etc., into different sections on the webpage.

<div>ALL THE GOODIES GO HERE. From paragraphs to links to images and more.</div>

It might seem like a simple tag, but when combined with CSS, it's powerful.

<div class"NAME">TEXT</div>

It not only allows me to customize so much of my blog, but if I want to change something, I simply edit the CSS once and it changes the text everywhere.


Don't Miss It

On Friday I am going to show you how to take these basic html coding skills and dazzle them with the use of CSS.


Your Free HTML Guides


Paper Bindings - HTML All Book Blogger Needs To Know In Order To Be Successful - Basic HTML Cheetsheat

Paper Bindings - HTML All Book Blogger Needs To Know In Order To Be Successful - Bonus HTML Cheetsheat




2 comments:

  1. Aren't you good and helpful, are you? Thank you so much! I have been dying to know the headings part and I saw this all at once.

    <3,
    Paper Boulevard

    ReplyDelete
    Replies
    1. Yay! I am so glad the post helped you. I was writing it with my cobloggers in mind and was crossing my fingers someone else would be helped by it.

      Thank you for stopping by.

      Delete

Thank you for visiting and taking the time to sharing your thoughts with us.

Related Posts Plugin for WordPress, Blogger...