Basic HTML Guide  
   

Basic HTML Guide

 
   

A Few HTML Commands

 
  Basic HTML Guide  
     
This guide was created to help my clients who wanted to be able to make minor changes to their sites on their own. Clients who were using content management systems wanted to be able to add hyperlinks and paragraphs in the content they added. This guide is now, obviously freely available to anyone who doesn't know the first thing about HTML and wants to get started somewhere.

I tried to make this as simple as possible, unfortunately this has the result of leaving a lot out and often only telling part of the story. This was never intended to be "the last word on HTML", rather a very simple starting place for those new to HTML.

All the spaces (or lack of spaces) are usually a deal breaker; make sure you place the spaces as I've shown.

For a better explanation of nearly any html go to Sizzling HTML Jalfrezi. That is where I go when I need to look something up, it is truly a great resource for HTML. It is kind of old (the HTML language is constantly evolving) but it is still very helpful.

Here we go:

  • To end a paragraph, use <p> (the "p" stands for "paragraph"). This will have the effect of putting a space between paragraphs.

    Example: This will put a space between these lines.<p>See what I mean? This would produce:

    This will put a space between these lines.

    See what I mean?

  • To end a line, but not put a space before the next line starts use <br> (the "br" stands for "break").

    Example: There will be no space between these lines.<br>See, no space. This would produce:

    There will be no space between these lines.
    See, no space.

  • To make something bold, use <b> before the word or phrase you want in bold, then </b> where you want the bold to end.

    Example: Look, this word is <b>bold</b>. This would produce:

    Look, this word is bold.

    Italics works the same way, except you would use <i> instead of <b> and </i> after the part you want in italics instead of </b>.

  • To center something, an image, a table, text, or nearly anything else, use <center> before what you want centered and </center> after.

    Example: <center>This is centered</center> This would produce:

    This is centered
  • To make a link (also called a "hyperlink") you would use <a href="http://www.example.net">Link Text</a> (the "a" stands for anchor, and "href" stands for "Hypertext REFrence").

    Example: <a href="http://www.divergentlines.com">My Site</a> This would produce:

    My Site

    If you are going to link to a page that is not on your site, I suggest having it open in a new window. This is just a trick to keep people on your site. You would add "target="_blank""" to the code. Make sure you literally use "_blank" where I did.

    Example: <a href="http://www.divergentlines.com" target="_blank">My Site</a> This would produce:

    My Site

  • To make an email link you would use <a href=mailto:email@address.com>Visible Text</a>. You can put whatever you want where you see "Visible Text". You will often see the email address placed there so that people can copy and paste it if they use Yahoo or some other web-based email.

    Example: <a href=mailto:dsmith@divergentlines.com>Contact Me</a> This would produce:

    Contact Me

  • Adding an image can get really tricky really fast. Having it put where you want, the size you want, with other things doing what you want around the picture involves code that I won't get into here.

    To add an image, it first needs to be uploaded to the internet somewhere. For the most part, it doesn't have to be uploaded to your server, just somewhere on the net. First you would make an image the size you want using PhotoShop, PaintShop Pro, or whatever image editor you are using. Then you would ftp (file transfer protocol, or "upload") it to the server. In most cases there will be an "images" folder, put it in there to keep things organized. Then you would use <img src="http://www.example.net/images/image.jpg"> in your HTML using the path to the image you just uploaded.

    If you try this and when you're done there is no image or there is a box with a red x or other symbol indicating a "broken" image, you did something wrong. Make sure you uploaded the image, you have the path to the image correct, and that your syntax in the code is correct.

    Example: <img src="http://www.divergentlines.com/images/html.jpg"> This would produce:

I think this will give most people new to HTML someplace to start. If you ever get stuck or confused, try going to google and searching for what you are stuck on. There are plenty of other tutorials and examples on how to use HTML. And, of course, if you ever find you need a professional, you can always contact us. Good luck and have fun!
 
 
   
This site © 2004 by Divergent Lines, all rights reserved. Email Damian at service@divergentlines.com. Divergent Lines is located in the north San Antonio, Texas Hill Country Region. I continue to provide my services worldwide.

Basic HTML Guide at Divergent Lines