ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Quick HTML Help For Newbies

Updated on September 28, 2014

A basic reference guide to the most commonly used formatting codes when writing online

This quick HTML tutorial covers all the basics - bold, italics, links, paragraph alignment, as well as a few extras (such as the numeric code for the pound sign!). Basically, I wrote it based on all the code I can actually remember readily, use often and expect to see on a webpage.

Anything else - from colour text to borders - may look pretty but is usually just a fancy extra. The code on this page is what I consider the functional basics. You know, the stuff you use all the time when typing something in Microsoft Word!

I know there are several good HTML and CSS guides on Hubpages already, but this is designed as a quick basic guide for my mother, of all the codes she actually wants to use.

All a bit beyond you? There's always this Rich Text editor, from the marvellous GreekGeek - just write, bold, link away, and copy the code at the end back over to your website! And remember, there's probably a module that can do it for you if you're using something like Hubpages.

Need to talk to someone, get further help or explain a complicated situation? Leave me a comment or drop into the forums where there are more people who'll happily help, and more ways to demonstrate stuff to you! (And check out my The Stupid Question Project!)

Code Quicklist

If you know what you want, just copy the code below!

Basic text changes
<b> </b> or <strong> </strong>
<i> </i> or <em> </em>
<u> </u>

Links:
<a href=""> </a>

Paragraph alignment
<p align=center> </p>
<p align=right> </p>
<p align=justify> </p>

Other formatting
<br> </br>
<ul> </ul>
<span style="text-decoration: line-through"> </span>

Bulletpoints:
<li> </li>
<ol> </ol>
<ul> </ul>

Pound Sign £
&#163;

Images
<img src="" >
width=
alt=""
title=""
align="right"
align="left"
<p style="float:right">
<p style="float:left">


Other formatting


Bulletpoints:

Pound Sign £

£

Images

width=

alt=""

title=""

align="right"

align="left"

What is HTML?

How to use HTML on a page

There are several different 'code languages' that have developed over the history of computers and the internet. Two that are still widely in use (and can be read by most browsers) are:

  • HTML - HyperText Markup Language
  • CSS - Cascading Styles Sheets

If you are using a are 'raw' code editor, then you have to type in (or copy and paste) the HTML for any special effects you want to add (e.g. bolding, font, bullet points, colour). The other kind of editor is called a WYSIWYG (What You See Is What You Get) editor. You can usually switch between the two options on many sites.

The code you add goes around the text you want it to affect. The < and > symbols tell the website that it is code, and not to appear as visible text. So to bold or link a word, you would write it in this order:


< code for bold/link/other effect >Word you want to format</closing tag>


Usually all the information goes into the first bit of code, and it can get very long and complicated!

The closing tag is usually only one letter long (whichever letter starts off the opening code). If you forget to close it, the website will assume it continues until the end of the module or section or page. In theory, if you have multiple code effects, you should close them in the same order you opened them (e.g. if you bold and italicise a word), but in practice it often makes no difference.

Sometimes there is more than one way to do the same thing (for example, using CSS instead of HTML) - it doesn't usually matter which you use, so pick whichever you remember best. CSS is a bit more complicated and is often used to affect entire pages or blocks of text.

If you have a blog (e.g. Blogger or Livejournal), you can type, bold and link in the WYSIWYG view, then switch to the HTML view to see and copy the code. If you want to type it straight into a Hubpages module, you'll need to know a bit more though. And be careful - not all code works on a Hubpages page, so some may simply disappear.

Bold, Underline, Italic

The most basic text formatting options

Bold or 'strong' emphasis: <b>bold</b> or <strong>strong</strong>

Italics or emphasis: <i>italics</i> or <em>emphasis</em>

Underline: <u>Underline</u>

Building HTML Links

How to create hyperlinks in your text

If you want to create a text link it will not become a link unless you either add it to a link module (e.g. Link List, Links Plexo) or use HTML.

  • The opening code for a link is: <a href="Http://www...link goes here!">
  • The closing code is </a>
  • And the words you want to use as the link go inside both.

For example: <a href="https://hubpages.com/travel/antoni-gaudi-2">An awesome page about Gaudi</a> becomes An awesome page about Gaudi

Always include the http:// or it may try and redirect within the website you are on. If it is another page on the same site, you can often drop the domain part of the link (the 'http://www.squidoo.com/' part) and just use the last bit. (e.g. /hub/antoni-gaudi-2)

The link code can go around anything that you want to become a link - including an image code. Simply replace the words you want to appear with the image code.

If you want to add various special attributes to HTML they are separated using "quote marks" inside the span tags (the <>). Most of the time, you will never need to add anything else to a link, but always make sure the quote marks are in the right places.

Common extras include "rel=no_follow" and "target=blank"

These could be added like this: <a href="URL" "target=blank" "rel=no_follow" >


  • "rel=no_follow" is recommended for paid links, to tell Google this is a paid and not a 'genuine' recommendation.
  • The target attribute tells the new page where to appear. "target=blank" is used to force a link to open in a new browser window. Use sparingly, as most visitors will be annoyed by this.

Aligning Paragraphs

Left, right, centred and justified.

If you want to centre your text or align it to left or right, you can do that using the <p> or paragraph attribute. Obviously, the text is already automatically aligned on the left, so you don't need that. And just remember to use American spelling for 'center'!

Like the links, you use the quote marks to separate the different effects - but unlike links, a lot of website editors will add them in automatically, so I never bother to type them if I know that the website will fix it for me.

  • To center paragraphs, add <p align=center> (or <p align="center">!)beforehand, and </p> when you want it to stop.
  • And to align them on theleft, just replace the ‘center’ with the word ‘right’: add <p align="right">
  • You can also justify the text (spread it out evenly) with <p align="justify"> but this may have either no visible effect or be hard to read. Using ‘justify’ depends on the spacing of the paragraph and your personal preference.



CSS alternatives: The CSS to align paragraphs right is <p style="text-align:right"> and you can also ‘float’ entire blocks of text and images to one side or the other of normal text using <p style="float:right">. (Again, replace ‘right’ with left, center or justify, as required).

Indenting Paragraphs

Move the text further in from the left

If you want to add a quote, or just indent the text for visual purposes, you can indent it using:

<ul> (not supported on Hubpages)


    • This line is indented.
      • And this line is indented again!
        • In fact, you can just keep adding <ul>s!
        • If you want it to stop indenting and keep typing, you will need to
          • close each <ul> tag with </ul>.


Tip

  • The <ul> adds a line break after itself, so there will be more space before the following text than you may realise.

Bulletpoints and Numbered Lists

How to create lists automatically

If you want to create a bulletpoint list you have a few different options, depending on what you want.

But the most basic code is:

<li> </li>

You don’t even have to have the closing </li> in between each point, as it will automatically close each time it encounters a new <li> (but you’ll need to close the last point if you’ve written anything afterwards!). Squidoo automatically creates a new line before each <li> so you can fiddle with the spacing. If you add line breaks in the code and closing tags

  • <li>Each</li>


  • <li>point</li>


  • <li>will</li>


  • <li>be</li>


  • <li>widely</li>


  • <li>spaced.</li>



Compared to either

  • <li>leaving
  • <li>out the
  • <li>closing tag</li>

    (or typing the <li>code</li> <li>and</li> <li>points</li> in one long line

– same result as leaving out the closing tag above).

If you want to change how the list itself looks….
You add one or two other pieces of code before the first <li> and after the last </li>.
<ol> </ol> – ordered list
<ul> </ul> – unordered list

<ol> </ol> used on its own around your <li> points turns the bullet points into numbers.

  1. like
  2. this
  3. as
  4. many
  5. points
  6. as
  7. you
  8. want



While <ul> </ul> creates an indent (if you don’t like how close the list is to the left hand side). You can also use the <ul> for normal text.

So <ul><li> point 1</li><li> point 2</li></ul> will look like:

  • point 1
  • point 2



If you want to get fancy, you can combine <ol> and <ul>. The order you use them in matters.
If <ul> goes first, everything is indented a bit futher towards the middle.
<ul><ol><li> point 1</li><li> point 2</li></ol></ul> will look like:

  1. point 1
  2. point 2



Whereas if <ol> goes first, it actually changes the bullet points as well as indenting even further.
So <ol> <ul><li> point 1</li><li> point 2</li></ul></ol> will look like:

  • point 1
  • point 2

Line Breaks

Go down a line after your text.

Sometimes websites just won't pay attention in certain modules when you try and tell it

to

go

down...

Or you want to be able to add a certain number of line breaks, without having to scroll past blank space while typing. Easy. Just add a line break in the code: <br>

You don’t even have to close it. Just add a <br> every time you want to go down a line.

Strikethrough

Put a line through your text.

Want to strike out your text?

<s> </s>


Unfortunately, the basic HTML option doesn't work on every site. This longer version may work instead:


<span style="text-decoration: line-through"> </span>

The Pound Sign

Getting symbols to appear

Unicode symbols are associated with a certain number, for example, the pound sign is 0163. There are a couple of different ways to type the pound sign £ (and other symbols, which will use different numbers).

  • To type the pound sign, press and hold the Alt key while typing 0163 on the numeric keypad at the right of the keyboard (This doesn’t work if you use the row of numbers along the top).
  • Alternatively, use &#163; and it should become £

Headings and Sub-headings

Header tags decide how large the text will be!

If you want to add different sizes of text for headings and subheadings, you would use header tags in ascending order. Blogposts and Hubs already use <h1> and <h2> for the title and subtitles or module titles.

Elsewhere on the web, you can use <h1> through to <h6> (largest to smallest).

Basic Image Sizing and Alignment

How to change image size and location

If you are linking to an image from elsewhere - for example, a Zazzle or Amazon image, or on a storage site such as Photobucket or Flickr, then this is called hotlinking. It's fine if you link to a site that's built for that - such as the above examples - but is bad if you do it to someone else's personal site because they have to pay for the bandwidth, and they control the image (see this page about hotlinking).

Hotlinking gives you a lot more flexibility and control. Even sites that let you upload an image use hotlinking by linking to where it is stored on the website to display it, with code that you can't see.

I cannot demonstrate the following examples, because Hubpages does not allow you to use img tags (all images must be uploaded in their Photo modules).

You will need the image source code. You will get this either from the code provided by the image hosting site, or by right clicking on the image and copying the image location/image URL. This is not the same as the page URL.

  • <img src="">
      • - Image (code), image source.

    • Similar to a text link, you add the image link in between the quote marks (don’t forget them – they’re important!)

Unlike most HTML, you don't need to close the image code.


But what if you want the picture in the middle?

Easy, just use the paragraph alignment code around the image code.

<p align="center"><img src=""></p>


You can do the same think with the link code, or any other examples. But what if you have a block of text and want it to sit next to the picture?

Easy! Just add align="right" (or left) inside the image code.




And what if you want to include a caption under the image?

Well, then you can use the <p style="float:right"> (or left) CSS code, which will include any text after the picture until you close it with </p>.

  • You may have to break up the text so that it sits neatly otherwise long sentences may push the ‘floating’ section out too far into the main text.
  • Experiment with putting the image code at the beginning of different sentences to change how high or low it sits.


Changing size is easy – just add another attribute into the image code: width="100″
(You can also uses height="xxx" instead, but many websites calculate the size automatically so I only bother to use one. And width is slightly easier to work with.

If you use both at once, make sure you get the proportions right as the image will be skewed to match whatever numbers you use!).

  • So you can put two or more small images next to each other…

    Code: <img src="image URL" width=”100″> <img src="image URL" width=”100″> … etcetera!




Alternate and Title Text


The last couple of attributes are optional, but often useful extras.

  • alt="alternate text" allows you to describe a picture for search engines, which helps with traffic. This is also what appears if an image can’t load, or is read out by text to speech programs.
  • title="title text" works similarly, except that the words you write here appear in a pop-up caption when you put your mouse over a picture.



Like align and width, alt and title are added in the image code. You can use as many as you like, in any order – as long as you remember all the quote marks!

For example:


<img src="image URL" width="150″ alt="a picture of a purple cat" title="Purple cat says meow!" align="right" >

…and to link it, you can add the link HTML at the front
<a href="URL"><img src="…etcetera ></a>


Quote Mark Warning

If you copy or write code into Word, it may use quote marks that are not compatible with HTML code. See the difference between " and ” ? The second one will not work.

Comments

    0 of 8192 characters used
    Post Comment

    • Poison kitty profile image

      Poison kitty 6 years ago

      Great Lens! Beleive it or not, it took me forever to find te justify code, nobody ever has that on their tutorial lenses!

    • profile image

      anonymous 6 years ago

      Thank you so much for all the helpful tips. It helped me creating my new lens.

    • jethrosas profile image

      Jethro 5 years ago from Philippines

      I easily learned your tutorials. It means you made it great! Cheers! :)

    • hysongdesigns profile image

      hysongdesigns 5 years ago

      oooh I just discovered this one! Now I will admit my eyes were rolling up in my head by the end of it but that is not your fault. That is my reaction to most coding instructions. But I'm getting better, I can go longer before it happens now. In the mean time I want to say THANK YOU for all of the things you do here on Squidoo and SquidU to help us all out. I have learned a lot from you (and sooomany others too) and I really appreciate you help and comments on SquidU. So this is my Thanks Giving comment ;-)

    • profile image

      AprilMonth 5 years ago

      Hi Flynn, this article is really awesome, thanks for sharing, now I will have to bookmark your page for future reference whenever I need help on html etc.

    • favored profile image

      Fay Favored 5 years ago from USA

      Added this to my Helps lens. Thank you, especially for the code list.

    • mary lighthouse15 profile image

      mary lighthouse15 5 years ago

      I found this very helpful. Thanks for sharing!

    • profile image

      velmayilraja 5 years ago

      Just started to create lenses, these tips are worthwhile . thanks

    • profile image

      anonymous 5 years ago

      Very helpful lens. Thank you for sharing.

    • FallenAngel 483 profile image

      FallenAngel 483 5 years ago

      Thank you this is really helpful and well explained information. I understand everything except how to make a block of images with links all neatly alligned together. HTML isn't easy but I think it is worth learning.

    • Aquavel profile image

      Aquavel 5 years ago

      Excellent lens filled with info and examples. Thanks for the CSS alternatives too!

    • Wednesday-Elf profile image

      Wednesday-Elf 5 years ago from Savannah, Georgia

      Very, very basic HTML is what I have been working with here on Squidoo. I have been wanting (and needing) to learn more HTML and this page is a great place to begin. I have bookmarked it for future reference, particularly for some of the links you have included here. Just by reading this, I have learned several things I did not already know. Thanks much.

    • BowWowBear profile image

      BowWowBear 4 years ago

      Great GREAT lens Flynn! You present your thoughts clearly, illustratively and concisely! Thanks so much for a very helpful lens. I look forward to looking at more.

    • cgbroome profile image

      cgbroome 4 years ago

      Another great lessons lens to bookmark. Thanks for the help!

    • IgnitionGolfer profile image

      IgnitionGolfer 4 years ago

      Thanks for the code, I appreciate the help.

      ig

    • AstroGremlin profile image

      AstroGremlin 4 years ago

      Terrific lens for lensmasters. Was looking for a quick and easy way to bold text. Looks as though I need to use HTML code, but good to know. Really good to learn how to center a photo.

    • greencurator profile image

      greencurator 4 years ago

      Thanks a lot. You don't have any idea how you have helped me with my project.

    • Niagara Ghosts profile image

      Niagara Ghosts 4 years ago

      Wow! Did I ever learn a bunch!! Thanks for taking the time to so thoroughly explain that which was previously about as understandable as Latin. With your great advice, I just may be able to 'get this' html thing. Awesome Lens:-)

    • MichaelJoeNess profile image

      MichaelJoeNess 4 years ago

      My new favorite lens!

    • profile image

      tonymic85 4 years ago

      @favored: Do anyone know how to break or separate paragraphs?I've tried everything and for some reason the codes they put up everywhere don't work for me.

    • FlynntheCat1 profile image
      Author

      FlynntheCat1 4 years ago

      @tonymic85: If you're just typing normal text, you shouldn't need actual code in a Squidoo module, it does it automatically when you hit Enter.

      But if you're having problems...

      Try

      If you want a bit more space, use

      If some code is messing things up somehow, use

    • FlynntheCat1 profile image
      Author

      FlynntheCat1 4 years ago

      @FlynntheCat1: Okay, it ate the code! I'll just try again:

      If you're just typing normal text, you shouldn't need actual code in a Squidoo module, it does it automatically when you hit Enter.

      But if you're having problems...

      Try

      If you want a bit more space, use

      If some code is messing things up somehow, use

    • profile image

      tonymic85 4 years ago

      I'm a newbie flynn!It would really help if you could print the code exactly the way it should look and i will just duplicate it.I don't know why this is so complicated.I see almost everybody breaking up paragraphs on their lens,but some how I can't.

    • FlynntheCat1 profile image
      Author

      FlynntheCat1 4 years ago

      @tonymic85: Are you just typing normal words without code in? Because you shouldn't need code at all to separate out paragraphs on Squidoo. You should just be able to type, hit Enter whenever you want to go down a line or two, and save. If that's not showing properly, something's weird.

      To add code into it, just to see what happens, you would do this where you just type until the end of the sentence then type in

    • FlynntheCat1 profile image
      Author

      FlynntheCat1 4 years ago

      @FlynntheCat1: sorry, - getting the HTML to show up is a little tricky!

      But I used it right after 'you would do' and it just dropped to the next line for everything after it. Obviously you'd want to use it at the END of sentences most of the time :D

      Like ( goeshere) this!

    • MBurgess profile image

      Maria Burgess 4 years ago from Las Vegas, Nevada

      Thanks, Flynn! I wanted to find out how to add my image credits neatly. Everything here is very helpful! However, I am still in the dark when it comes to the H1 and other "H" tags. I want Google smilies!

    • FlynntheCat1 profile image
      Author

      FlynntheCat1 4 years ago

      @MBurgess: Don't worry about them on Squidoo - basically, every module title and subtitle is already an automatic header tag. You can use them in text just to make words bold, but it won't make a difference to Google. Use the titles and subtitles of modules and you'll be fine.

    • madeinamericasc1 profile image

      madeinamericasc1 4 years ago

      ahhh, thank you for this. So simple, but I did not realize Squidoo allowed HTML in the TEXT blocks, seems so obvious. Again, thanks for posting this.

    • profile image

      tonymic85 4 years ago

      If someone could please show me an extremely simple example of a photo url.I'm trying to post a photo on my lens of a picture I have downloaded through the html code or what have you.I tried getting the photo through Flickr but I don't understand what that is Flickr is giving me.If someone could show me just a super extremely simple example of what one look exactly like when you post it on to your lens it would be incredibly appreciated.

    • FlynntheCat1 profile image
      Author

      FlynntheCat1 4 years ago

      @tonymic85: So the link to the page it is on is what people would click through to. So...

      http://www.flickr.com/photos/shironekoeuro/4432797... is the page a picture is on.

      http://farm5.staticflickr.com/4022/4432797164_b467... is the actual image link

      Image links would usually end in .jpg (JPEG image file type; other common kinds are .png and .gif)

      So you'd end up with &amp;lt:a href="http://www.flickr.com/photos/shironekoeuro/4432797...

      Sometimes the picture itself is going to be too big for your page, or you want it to go somewhere particular with text wrapping around it; that's when you'll need to add more code into it. But this is a basic clickable image.

      If you want to just copy from Flickr, go to Share (over the image) and expand the "Grab the HTML/BBCode" option. (HTML is the default, so you shouldn't have to worry about this. But if you see square [ ] brackets, that's BBcode, which is for forums, not Squidoo).

      Then choose a size from the drop down menu (this is based on what it currently looks like, but it can change). 500 is large, nearly the full size of a Squidoo text area.

      Simply copy that code it gives you, paste into a text module, save, and have a look at it to see if it's what you want. It has some extra stuff in it - a "title" and alt (alternate) text which is text that shows up when hovering over the image/description for blind people, as well as the size limits.

    • FlynntheCat1 profile image
      Author

      FlynntheCat1 4 years ago

      @tonymic85: Oh, it's a bit of a pain writing HTML code into these comments, as it tries to just convert into the final result, but

      is JUST an image link with no clickable part. So a real example from this page would be

    • flinnie lm profile image

      Gloria Freeman 4 years ago from Alabama USA

      Hi this is all so new to me, thanks for sharing. I will keep on reading your lens, maybe something will click for me.

    • JeffGilbert profile image

      JeffGilbert 4 years ago

      Great resource, thanks for making this page, very helpful... :)

    • profile image

      anonymous 4 years ago

      @JeffGilbert: Thanks!I will be updating from time to time,so stay tuned!

    • kmhrsn profile image

      kmhrsn 4 years ago

      Great lens, just what I was looking for. And your mom's lenses are great too! :-)

    • profile image

      tonymic85 4 years ago

      Strangely enough my workshop page to my lens was rearranged,then today is just shut down only showing a mall piece of the workshop page.Anybody know or experienced this ?

    • FlynntheCat1 profile image
      Author

      FlynntheCat1 4 years ago

      @tonymic85: Squidoo has been updating the Workshop view - that's probably the problem. You probably need to submit a bug report (or just wait and hope it gets fixed)

      http://hq.squidoo.com/squid-news/announcing-the-ne...

    • profile image

      tonymic85 4 years ago

      @FlynntheCat1: You're right!My content is back to where it was,but the update for the workshop so far isn't as good as it was.I use to be able to view the whole page on my smart phone,but right now I can't see or get to certain things.

    • Vera-S profile image

      Vera-S 4 years ago

      Great lens. Thank you for creating this very helpful lens.

    • ixodoi profile image

      ixodoi 4 years ago

      Thanks I was searching for some of those things for a while now.

    Click to Rate This Article