This html tutorial for beginners will show you just how the average blogger works with html. Cause believe me, there is a lot of bloggers out there that work with html coding who have no idea how to write coding themselves.
This includes me! That is right, I did not go to college and learn how to work with html coding and I love working with it now. It is like a little puzzle where all you have to do is get the pieces in the right place!
This html tuorial for beginners will do just that! It will show you just how to fit the pieces of working with html coding together. I will be going over these 5 easy secrets so you can start working with html coding yourself!
- What Is Html coding
- How to interpret html coding.
- How average bloggers use html coding
- How to find html codes
- Where to extend your html coding education
Html tutorial | What is html coding exactley
The acronym H.T.M.L stands for Hyper Text Markup Language, and to put it simply it is the universal language of the internet. Html code is the language used for describing web documents!
It is what search engine “spiders” crawl over to index webpages and blog post, and it is what is behind pretty much everything you see online!
Okay, so now that you know what html coding is let’s continue with the 4 different kinds of coding that you will commonly hear about and what their function is online!
The 4 Different Types of Html Coding Is:
These are the common 4 types of html coding that you have probably seen. The first thing you have to realize as an average Joe working with coding is that these 4 types of coding are ALL html coding.
In fact, three of those codes is just later versions of the first html code. Here is a list of html code versions:
- HTML: version released in 1991
- HTML 2.0: version released in 1995
- HTML 3.2: version released in 1997
- HTML 4.01: version released in 1999
- XHTML: version released in 2000
- HTML5: Version released in 2014
What do these different versions mean? Well, think of it like any other piece of software or application out there that gets updated.
They always have a version number to keep track of their updates on that piece of software or app, and the updates usually fixes bugs or improves on the existing software!
Same thing with html coding! These are just later versions of the same coding construct! Pretty much they are like app updates just for html coding.
Take the latest update HTML5, this update added new elements for media files and created tags like <audio> and <video> to try to simplify our use of adding multimedia in our web documents.
It also added new semantic elements like <header>,<footer>,<article>, and <section>
So that is why there is a name difference for html codes! They are all still html and work in the same way, just updated versions to increase performance and use.
Oh, you didn’t think that I forgot about CSS did you….. well I haven’t. CSS is actually another acronym that stands for Cascading Style Sheets. This is STILL just another form of html coding.
This style of html coding is actually for describing how elements are render on your computer screen, on paper, or in media. To put it a little more simple it is the colors, designs, and text styles on a website.
CSS is actually the coding that is used for creating your WordPress Theme. It pretty much tells colors where to be at, and what fonts certain text should look like (like website menus, blog text, and headers and footers)
Okay, Not Too Bad Right? To Put It Simply:
- Html Coding is used to insert content and format web documents
- CSS Coding is used for design. Like color schemes, and font style.
Great! Now that we got that part of the html tutorial out of the way, let’s get to some fun stuff!
Html Tutorial | Interpreting Html Coding
This is where a lot of people get lost! I mean VERY LOST! That is because when you look at html coding in raw format, it looks like a bunch of gibberish mixed in with some English!
Well, that is because it IS a bunch of gibberish! But it is gibberish that we can look at and actually start to decipher ourselves!
The basic rule for coding is that there is no spacing in between codes; there is however, spacing inside the code! We will touch on this more here in a second! First let’s learn how to decipher the code!
You have to realize that a lot of coding is written using abbreviations and acronyms. This is where the real fun comes in. Trying to figure out what the abbreviation or acronym stands for in the code! Take the html code for an image:
<img class=”alignnone size-full wp-image-1654″ src=”http://toddworley.com/wp-content/uploads/html-323453_640.jpg” alt=”html coding ” width=”640″ height=”413″ />
Now I might not know every little bit of code in this image but I can tell that:
img is image,
size-full is pretty self explanitory (the full image),
src= I can tell that there is a link after the equal sign and I know that images are stored on my hosting so I know that scr must me source!
alt= has the alternative text that I used for this image.
And of course width= and height= is just telling me the dimensions of the image.
Hey, that wasn’t so hard. Let’s take a look at some of the most common html element tags that you will come across and what they mean.
- <p>= paragragh (normal text)
- <b>= bold text (also <strong> will bold text too! It just adds extra importance to that paticular text)
- <br>= line break (starts a new line)
- <ol>= ordered list (numbered list)
- <ul>= unordered list (bulletin points)
- <li>= list item (individual items in your number list and bulletin points)
You get the idea! That is really the secret behind html coding. Learning the language of abbreviations and acronyms. Of course not all code is in abbreviations and acronyms. Some are just the word itself!
<font> code says exactly what it is. Learning some CODE COMBOS, is another great way to start to feel like a coding champ. Say I wanted some font to be Green. Well, I would write a code to change the font like this,
<font color=green>Green font would be here</font> This would be normal font again! (notice that there is NO SPACE in between the code, and the text whose color we changed!)
Did you see the STOP CODE that I used? That is right, </font> is a stop code to stop the font color change. Actually the forward slash </>is the STOP and the word FONT says what to stop; </font>
Now what is some common font stuff that we normally use to change the look of our font! Well, we have:
Font size: Which the html code to change font size is <font size=any number 1-7 for size> example: <font size=4>
So two Code Combos you could use with the <font> code is size, and color.
<font size= number 1-7>
<font color=any color>
Sometimes the code requires you to specify specific aspects. Like when we change the font style!
<font style=“font-family:Tahoma;”>This is Your Tahoma Font Text</font>
This code here if we break it down can be interpreted in three different aspects:
- The Command, which would be changing font style; <font style=>
- The Property, what about the font are we changing. Here would be the; “font-family:”
- The font-family itself, what font we want our text to be. Here we chose Tahoma.
By breaking down the code you can really start to decipher just how coding actually works! This is really how the average blogger starts to interpret html coding!
Well now that we can decipher coding a little better let’s see how the average blogger works with html coding as we continue our html tutorial.
Html Tutorial | How Average Bloggers Work With Html Coding
This is the big secret behind how 80% of the bloggers work with html coding! Just two things that you have to do!
- Copy (ctrl-c) or (right-click copy)
- Paste (ctrl-v) or (right-click paste)
Yep, it is just that easy! Most bloggers out here have no idea how to write code. That includes me! So what we do is we hit the Google search engine and look for places to get codes from!
When we find the code that we want, we simply copy and paste that code where we need it to be at! That truly is the big secret behind how the average blogger uses coding! Just copy and paste!
A lot of codes will actually tell you what to do with that particular code! For example if I was to search for a html code to place an affiliate link into an image I would see a code written like this:
<a href=”AFFILIATELINK”><img border=”0″ src=”http://image link banner here.jpg” width=”900″ height=”2927″></a>
Now look at where it says AFFILIATE LINK! Notice how it is in ALL CAPS! That is because this code is telling me exactly where to place my affiliate link!
A lot of codes that you search for will actually tell you where to input things at! Look at this code for linking anchor text!
<a href=”http://YOUR LINK HERE/”>THIS IS YOUR LINKED ANCHOR TEXT!</a> (notice that there is NO SPACE in between the code, and the text whose color we changed!)
If I was looking at this code I could plainly see where I should insert my link and where the anchor text that I am linking goes! Pretty easy stuff right!
What about the coding that doesn’t come right out and say where you need to input things? That is what we are going to tackle right now in this html tutorial!
If you search for a code, there are going to be times that it is not always so forth coming with how to use it. Now you could always expand your search or use that head on your shoulders and start deciphering what the code is trying to say or do.
For the next example in this html tutorial I want to look at a problem that I had when I first started blogging. It was a simple problem, but one that I had to decipher what was going on.
As we all know in WordPress we can’t put spaces in between number list items without using some sort of coding. I went to Google search and found a forum where somebody said that the code to use to put a space in between numbered list is:
style=”margin-bottom: 10px;” “Use this code to create a space in between number line items”
Not very specific on how to use this code when it stands alone. But, through just the means of common sense, I know that the style= part of the code went after the element that I was changing. Just like in the font code <font style=so and so>
So now I just have to find the code for my numbered list. Well, sometimes the simplest way to find a code is to try it out on your own WordPress and look in the TEXT section of your editor!
Open your editor and just create a number list. You can see that the number list starts at the top like this <ol> (which means order list) and in between the <ol> and the </ol> are my list items using the element <li> for list item.
Great! Now I have my element and my code. Let’s put them together just like the font code.
<li style=”margin-bottom: 10px;”>
TA-DA! You have officially written your first code. Of course no average blogger writes their own codes so I would have copied the code style=”margin-bottom: 10px;” and pasted it right behind the li in the code <li> to create the code above.
Easy as can be once you start to get the hang of it! This is not rocket science and if you just use a little deciphering you can really start to see the language behind the code! Let’s move on in our html tutorial.
Html Tutorial | Where to find html codes!
Marching forward in this html tutorial finding codes is pretty simple. Your search engine will pretty much do the job for you if you put the term “html code” behind anything that you are looking for.
Sometimes Google’s search engine will actually pop up code elements just like definitions at the top of their search engine. Other times you will be guided to:
Whenever you are taken to one of these places just look for the code that you need and read how to use it (if specified) and copy and paste the code where you need it to go!
Just to make your life a little simpler I do have a list of html codes on my Ultimate Resource Page. Just subscribe and you will get access to a page of resources that you can use at anytime including a list of html codes!
Html Tutorial | Where to go for further education
If you want to extend your training you can subscribe to my full video training library, which will have video training on how the average blogger uses html coding!
But if you are looking for a move extensive training program then w3schools is the place that you want to be! W3schools is actually where I learned how to decipher an interpret html coding and is a great website for anyone just learning how to work with html coding!
They have great html tutorials and they even have places where you can practice using the code itself. AWESOME place for training, codes, and for pretty much all you html needs!
To start your html tutorial at w3schools: Click Here
At the top of the page on the left is a gray column. Start at the top and go through the lessons for yourself. Any place you see a green box that says “try it yourself” click on it and try working with the code yourself!
You Can Learn Html Coding!
You can learn html coding! It is not as hard as you might think and the more that you use it the more that you will become familiar with it.
Before you know it, you will be the one giving html tutorials!