ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel HTML for Beginners Guide Tutorial For Making Money Online

Updated on June 19, 2013
Written by author-turned-retail-store-owner, Tori Thompson
Written by author-turned-retail-store-owner, Tori Thompson | Source

HTML is NOT scary. You do not need to be a computer programmer or rocket scientist or even relatively intelligent to be able to do this. Hell, I taught myself and if I can do it, anyone can.

So lets start with the most simple parts of HTML:

Basically everything in HTML needs to start with a < and end with a >, and whatever you place in between the < and the > symbols is the action you taking.

Please click on image below or use Scroll Bar to view full Chart


What I Want
Finished Product
A Space in Between Paragraphs
My Text on the Next Line, No Space
Insert a Link
<a href="SITE">TEXT</a>
<a href="#" id="broken_link_35719193" style="color:#333; text-decoration:line-through" oncontextmenu="return showBrokenLink(35719193, false);" onclick="return showBrokenLink(35719193, false)">POSH by Tori</a>
Insert a Link to Email Me
<a href="mailto:EMAIL">TEXT</a>
<a href="">Email Tori!</a>
Insert an Image from
<a href="LINK" border="0" alt="TEXT"/></a>
<a href="" target="_blank"><img src="" border="0" alt=""/></a>
Make Text BOLD
Make Text Italic

Really, to begin HTML with qa site like HubPages, Squidoo, Blogger, etc; this is more than what you need to know to be “snazzy” with your content. So, in my previous article, I showed ya how to make awesome Hubs BUT we didn’t do any html “editing” / “formatting”, so that’s what we’re going to get into now. So, in my previous article(s), I just wrote my Hub Page in Microsoft Word (and Saved it to my PC for Backup!), then copies and pasted it into Hub Pages, which left ugly “gaps” in between my paragraphs (see photo below - notice the GIANT gaps in between my paragraphs? YUCK!):

So now I want to get rid of these gaps by selecting my TEXT box, "EDIT" then the blue HTML word in the bar right above where the text is. After I select this, I will get a somewhat scary looking "code-like-thing"; NO WORRIES! Let's take a look at a small paragraph in HTML version:


As you can see above, I have highlighted, two <P> symbols. If you referance the chart at the beginning of this article, you will see that <P> means "Paragraph", so what this means is that the HTML code is saying "Insert TWO Paragraph SPACES right here" - but we don't want two paragraph spaces there, so we are going to simply delete these <P>'s.

You will also notice more double-<P>'s two lines down. This is once again saying "Hey! Put in more gaps!" - so lets delete those as well. Heck, let's just go nuts and kill off every <P> we see that is causing an unwanted, ugly GAP.


Now it is time to select the button in the upper right that says "CLEAN HTML"; this just means that you're done getting rid of things (or adding things). Then select SAVE. Now you should have a nice, clean-looking, Ugly-Gap-Free text box, like this one.


So, let's say you just exterminated all the <P>'s and you now realize you made an error. You have a few options; 1. You can delete the entire text box and Add a New one OR go back into your HTML and add a <P> where you want that gap to be.

Need a lot of spaces? Add more <P>'s. Each <P> you add is telling the computer "Give me another line of blank space right here!


If you do not want a <P> (Paragraph) Space / Gap and all you want is to

make your text
appear on the next

then you need to go into HTML and insert BREAKS which is code <br>. You may see some of those pesky <P>s (Paragraph) symbols where you dont want them, so once again, delete the <P>s and make them <br>'s.


Of course, you can use the B or the I in your text editor box to make text Bold or Italic. But you can also do it through HTML.

Using the chart above, <strong> means "Make this text bold!" and "em" means "Put my text in Italics!

So, if we go into html, we want to find the text we want BOLD, we want to add <strong> BEFORE the text we want to turn BOLD and </strong> AFTER the last word/letter we want to be bold.

If you want it to be in Italic, follow the same directions as above, but instead use the code <em> before the first word/letter and </em> after the last thing you want in italics.

How To Insert an HTML Link To...Anything

Every HTML code for "Insert a link to something" is made up of two simple parts, "link" and "text", like so:

<a href="LINK">TEXT</a>

The LINK is going to be the FULL URL link to whatever you want inserted. Your LINK must contain the "http://" part of the link or it will not work. For example, if I want to link to my website: WILL work. WILL NOT work.

So, at this point, my code looks like this:

<a href=>TEXT</a>

Now I need to enter the TEXT that I want my link to say when it appears in my content. If I want it to say VISIT MY WEBSITE, I would type this where TEXT is, like so:

<a href=>Visit My Website!</a>

Or, maybe I just want my link to say "Posh by Tori":

<a href=>Posh by Tori</a>

Orrrrrrrr....maybe I want it to say "The Best Boutique in Michigan!!!!!"

<a href=>The BEST Boutique in Michigan!!!!!</a>

Now, when I go into my HTML and insert this code, this is what appears:

The BEST Boutique in Michigan!!!!!

IF you insert your link, then click on it and, instead of going to the place you wanted to link to you get an error page, its is because SOMETHING is missing. So start over and make sure you have all of the required code: <a href="LINK">TEXT</a>

If you are missing a ", < , / or ANYTHING from the above code it won't work. And don't forget to include the http://


I love, love, love inserting my email without sharing my email address (it totally helps cut back on spam!). All you need to do is go into your HTML section and insert a "mail to code". The basic code is very similar to the traditional insert-a-link-anywhere that we discussed above. It consists of two main parts; mailto:YOUR EMAIL and TEXT, so it looks like this:

<a href="mailto:YOUR EMAIL ADDRESS">TEXT</a>

Now we simply need to fill it in correctly with the right information.

<a href="">Email Me</a>


<a href="">Email Tori</a>


<a href="">CONTACT US</a>


With HubPages you won't be able to use this code, but with pretty much any other site you can.

I use for all of my 100% FREE photo uploading needs.

After you upload a photo through photobucket, or whatever site you use (Flickr, Picassa, etc). Get the HTML CODE. It'll look like this:

<a href="" target="_blank"><img src="" border="0" alt="TEXT"/></a>

Unlike the other codes we have used, an image code consists of three parts:

1. The image its self

2. The place where the image is stored online - meaning, when someone clicks the image, they will go to the website where the image is stored (unless you change this)

2. The TEXT that will appear if someone mouse-overs the image.

You can manipulate two of these three parts with ease.

Let's begin with the easiest; the TEXT:

<a href="" target="_blank"><img src="" border="0" alt="TEXT"/></a>

As you can see above, I have BOLDED the are where the TEXT is. You can type anything you want into this area and it will appear when the visitor "hovers" over your image. You could make it say "Shoes!" or "Check Out My Site" or....anything. If you don't want it to say anything, then delete everything between the " " so it looks like this:

<a href="" target="_blank"><img src="" border="0" alt=" "/></a>

NEXT, lets say you want to have the image UNCLICKABLE - meaning if someone clicks it, nothing will happen. (For example, eBay does not allow images to be clickable, so if you wish to insert an image into your eBay listing, you will need to do the following):

Simply REMOVE/DELETE the "LINK". It helps to find the whole LINK if you look at the whole script as two remaining pieces:

PIECE 1: CLICKABLE LINK <a href="" target="_blank">


<img src="" border="0" alt=" "/></a>

Notice that the IMAGE ITS SELF starts with the code <img src <--this means "image source". We NEED this or the image will disappear. What we can play with is the OTHER link that starts with <a href <---remember seeing that before when we made links earlier in this article?

Ok, so if you want an UNCLICKABLE image, then DELETE ALL of the first part:

<a href="" target="_blank"><img src="" border="0" alt=" YOUR TEXT HERE "/></a>

Now all you should have is the second part:

<img src="" border="0" alt="YOUR TEXT HERE "/></a>

(or, if you already got rid of the TEXT, it will look like this:

<img src="" border="0" alt=" "/></a>

AND FINALLY, Lets say we want to use the full code and make it so when someone clicks on the photo, it goes to whatever site or page we select, we simply change the LINK:

<a href="" target="_blank"><img src="" border="0" alt=" YOUR TEXT HERE "/></a>

Lets say I want this image to go to, then I will need to replace it with the new URL:

<a href= target="_blank"><img src="" border="0" alt=" YOUR TEXT HERE "/></a>

....See, HTML isn't scary at all!!! And remember, you can always start over!


    0 of 8192 characters used
    Post Comment
    • passionate77 profile image


      8 years ago

      oh it is so nice to read about HTML, to me it has always been so scary indeed, and yet i have read all this hub , could not get so deeply, but happy to read about email coding and site link and some other things seems easier in the above section about removing spaces and so on. but image coding still seems so difficult, anyways i bookmarked the page to read over and over to learn more, thanks for sharing about this scary topic, ( lol, at least to me it's been so scary). stay blessed dear!


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
    ClickscoThis is a data management platform studying reader behavior (Privacy Policy)