How to Create and Maintain Your Own Website

Step 1: Go to Blogger.com and sign up (it's free)

Step 2: Select "Create Blog" and give your blog a name (use your domain name or top keywords for your practice), URL, input the security code and select "Continue." As I'm writing this I'm creating a blog for this article at www.blogspot.createyourownprivatepracticewebsite.com

Step 3:  Select your template. I'm choosing the very first option I see called "Minima." Click "Create" and your blog is up!

Step 4: Select "Start Posting" and create or paste in your first page. I'm going to post this article.

Step 5: Select "Settings" and make sure the title and other settings are as you want them. Type in a description if you wish. Click "Republish" to activate your changes.

Step 6: Edit your template. This is where some knowledge of HTML is handy. For demonstration, I'm going to add my photo and some links. You can play around by removing sidebar and footer tags, then click "Preview" to see the changes. If you mess up you can click "Clear Edits" and no harm done. Click "Save Changes to Template" and "Republish" only when you have it the way you want it.

Note that when I'm done tweaking, the navbar at the top is the only indicator this is on a blog and not an actual website.

Note about using WYSIWYG: While helpful and easier, I wouldn't call it easy, especially if you're like me and you have a very specific idea of what you want your page to look like (line spacing, placement of graphics, etc). I find it necessary to know basic html to use WYSIWYG web editing software.

Here's a real-time example as I'm using Nvu to write this: half the time when I embed a link and try to continue typing  it extends the link and won't let me go back to typing the sentence in plain text. When this happens I have to switch to "Source" view and manually place the cursor outside the tag for the hyperlink. Why won't it just do this automatically? Who knows! It should, but it doesn't. With Dreamweaver I'm always switching to html view to adjust spaces that the program won't let me do from WYSIWYG view.

Note: to help you learn the information below I recommend using "View" "Source" to get the code of a web page and paste into your html editor and start identifying and modifying tags to see how they look and work.

A. General info: Most html tags have an opening tag and closing tag. A "tag" is one or more characters inside two angle brackets like this- <insert character here>. The opening tag will have the characters, and the closing tag will start with a slash inside the brackets like this- </sample>. HTML is pretty unforgiving. It has very specific rules and if one character is missing or misplaced, it won't work. The documentation says that Nvu has some html validation features and will make suggestions, but I use a f`ree HTML Validator program that helps to validate the html code and identify problems to fix.

B. Links: Links to other web pages start like this- <a href="yourentireURLhere"> (the quote marks are required) and end like this- </a>. Whatever you put between those two tags will show up on the web page (note the embedded links above). Here is what the link for "Nvu" above looks like in html- <a href="http://www.nvu.com/">Nvu</a>.

You can create a hyperlink for graphics this way as well by putting the graphic tag in between the opening and closing link tags like this-
<a href="http://www.buildingyouridealpractice.com"><img src="http://www.buildingyouridealpractice.com/images/toolkitcombomed.jpg"></a>.

This code will show my How to Get Clients Toolkit graphic hyperlinked to the home page of buildingyouridealpractice.com. ("Hyperlink" means if you click it will take you to a web page)

C. Graphics: First, your graphic must be on the web someplace, such as your web host. Usually, it's pretty easy to upload graphics using File Manager, you just have to give it a name and use the right URL. Typically, your webmaster will create a file called "images" and the URL for your graphic would look like this- http://www.yourwebsite.com/images/yourgraphic.jpg. The last letters are the file extention for the kind of graphic, such as gif, jpg, etc. For downloadable documents, you upload the same as graphics, and the file extention would be doc, pdf, etc. If you don't know the type of file you have, right-click and select "Properties" to find out.

Graphics don't have closing tags, as in this example-
<img src="http://www.buildingyouridealpractice.com/images/toolkitcombomed.jpg">
("img src" means "Image Source"). Be sure to always enclose the URL with quotes. Be sure to double-check URLs for typos before going live. You can paste the graphic URL into your internet browser window to check it, or use "Preview."

There are a lot of supplementary tags you can use with graphics that go inside the angle brackets, such as-

Alignment- adjusts where the text goes in relation to the graphic. 
align="left" (graphic is on left, text is on the right side of the graphic)
align="right" (graphic is on right, text is on the left side of the graphic)
align="middle" (text starts in the vertical middle of the graphic)

Spacing- adjusts distance between graphic and text
hspace="insertnumberhere" (adjusts horizontal space between text and graphic
vspace="insertnumberhere" (adjusts vertical space between text and graphic

Border- border="insertnumberhere" (Zero would be no border at all, and 1, 2, 3, would be increasing border thickness)

Size- adjusts the size of the graphic
height="insertpixelsizehere"
width="insertpixelsizehere"

Here is an example of a graphics tag using the above-
<img src="http://www.buildingyouridealpractice.com/images/toolkitcombomed.jpg" align="left" hspace="5" vspace="5" border="0" height="270" width="210">

C. Font Style:

Bold- <b>your text here</b>
Italics- <em>yourtexthere</em>
Underline- <u>yourtexthere</u>
Size- <font size="insertnumberhere">yourtexthere</font> (the larger the number, the larger the font)
Style- (easiest to use default or select from html editor)
Headings- <h1>yourheadinghere</h1> (the larger the number, the smaller the heading.. go figure)
Color- <font color="insertcolorcodehere">yourcoloredtexthere</font> Find color codes here

Here is an example of a font tag using the all of the above-
<font size="3" color="#0000FF"><b><u><em>Check this out!</em></u></em></b></font>
which looks like this- Check this out! Note that the tags are nested in a particular order.

D. Formatting:

Paragraph- <p>yourparagraphhere</p>
Line Break- <br> (you can use as many of these as you like to create spaces)
Horizontal Rule- <hr> (can adjust width, color and thickness like this- <hr size="1" width="60%" align="center"> )
Indenting- <blockquote>yourtexthere</blockquote>
Centering- <center>yourtexthere</center>
Bullets- <ul><li>yourbullethere</li>
                    <li>yournextbullethere</li></ul> ("LI" means "list item." "UL" mean "unordered list," and for numbers use "OL" which means "Ordered List")

E. Special Characters: When using an HTML editor you can insert special characters like a word processing program. Using Nvu  go the "Insert" menu and select "Characters and Symbols." Here are the codes for some common special characters-

• & Ampersand-  &amp;
• Blank Space- &nbsp;
• © Copyright- &copy;
• ® Registered- &reg;
• ™ Trademark- &trade;
• ¢ Cent- &cent;
• ° Degree- &deg;

In "Source" view insert the code for the special character where you want it to appear. No need for angle brackets. Note that all special characters begin with an ampersand and end with a semi-colon.

Here's an example-  "© 2006 by David Steele" looks like this in html- &copy; 2006 by David Steele