17 February 2015

Hypertext Helpline: HTML Basics For Bloggers

Hypertext Helpline Cover 

Welcome to a brand new series on Nerdjoy! I kept talking about how I wanted to do a technical tutorial series to help anyone interested in learning more about code and that day is finally here! After a landslide of technical how-to requests from the blog reader survey, I finally put together something that everyone can enjoy.

This is going to be a series posted on Tuesdays (or Wednesdays if I'm swamped with work/school). I already have quite a few posts in the pipeline but wanted to start with some HTML basics to kick-off this series. Let's get started!

HTML BASICS

A good foundation of web development starts with HTML. This is going to be the code you see that starts out like this:
<head>
Super Awesome Website
</head>
 <body>
Hello!
</body> 

These little doodads are called tags and make up the entire language of HTML. It's how you build a blog post, website, or whatever you want with HTML. When you use it in a blog post, you usually don't need to worry about the <head> tags and want to focus on the text tags you can put in the <body>, the text you're reading right now.

Let's put together a simple blog post using text tags!

<b>Bold</b>
<i>Italics</i>
<u>Underline</u>

<center>Center Justification</center>

<br>Line Break

<h1>Headline Tags</h1>
<h2>Headline Tags</h2>
<h3>Headline Tags</h3>
<h4>Headline Tags</h4>
<h5>Headline Tags</h5>
<h6>Headline Tags</h6>

<a href="www.simplelink.com">Simple Link</a>

A couple things to remember:
  • You don't have to put an ending line break tag. For example, if you want space between paragraphs, you would just need a couple <br> tags and check how big of a gap you want in your post preview. If you want it smaller, just delete a <br> tag or two while you add more if you want a bigger line break.
  • Everything will be automatically left justified unless you manually put in right or center justifications such as the <center> tag.
  • Header (or headline) tags are kind of in a screwy order. H1 tags are the biggest and go down in size from there.

SAMPLE BLOG POST WITH HTML TAGS:
<center>Super Awesome Blog Title</center>
<br>
<br>
<b>Hello, how are you today?</b>
<br>
<i>I'm doing pretty dandy!</i>
<br>
<u>But how about yourself?</u>
You should check out this <a href="www.website.com">cool link</a>
<br>
<br>
<center><h2>Goodbye for now!</h2></center>

Why is it good to know HTML tags when you could always do everything with the word processor blog platforms provide? Well, one reason is because they can glitch out and sometimes a headline won't center, an image won't link where it needs to, and you'll need to manually "override" that through the code. Another reason is it's just good to know some HTML and show off to friends and family! ;)

I've also created this infographic as a "cheat sheet" just in case you need any references to anything that was covered in this blog post. I'll create more in the future.



If you have anything that you want addressed in the Helpline series, just email me at stephymercedes@gmail.com or say hi on Twitter. See you next Tuesday! :)


post signature

2 comments:

  1. I've worked with HTML since 2008 and taken a few classes on it, and I can honestly say it's always nice to have a refresher course! The way you wrote it up is very helpful! :)

    ReplyDelete
  2. Yay, so happy you've started posting this series! :) I'm very new to all of this, so it's wonderful to get a little help!

    ReplyDelete

Theme designed by Feeric Studios. Copyright © 2013. Powered by Blogger