Basic HTML for Writers
by Linda Melin

Understanding simple and basic HTML is important for writers working online. It is not necessary that you learn how to write HTML code or design web pages, but a simple understanding of how HTML works and a few basic codes can help you publish to the web.

First, you need to be able to see the HTML code for the page you are viewing. On Internet Explorer (IE), click on View, then click on Source. This will bring up a screen in Notepad. At first glance it looks rather confusing. You can toggle between the browser screen and Notepad by using ALT TAB.

There are three parts to a web page.

Take a look at Notepad, the very first line you will find <HTML>. This tells the browser that this is a web page. Web page files are saved with file extensions of .htm or .html. Since HTML codes usually comes in pairs, at the end of the page you will find a </HTML>. HTML Code uses < > with a word or words inside. These are called tags. When you close a command, you use a closing tag< / >.

The Head. <HEAD>. This section gives important information about the web page, but doesn't appear on the page itself. Included in the Head is Title. <TITLE>. The title for this page.

Basic HTML for Writers

You will find it at the very top of the screen.
As you look at the code you will find<TITLE> Basic HTML for Writers </TITLE> followed by </HEAD> HTML coding follows a sequence or order. First open is last closed. You will find codes nested together. As you examine the coding for the page you will see how this works. The Head must be closed </HEAD> before you can start the next part.

The Body <BODY>. This is the web page, what you see on the screen.

HTML doesn't work the way your word processor does, you can't automatically indent paragraphs. You will find that if you don't deliberately establish paragraphs and lines it will just continue on, one continuous sentence. Even if you put a space or indent on the file, it will not show on the browser screen. Compare this paragraph as it is in Notepad and how it shows on the screen.

To create paragraphs:
Paragraphs 
Line breaks (line breaks have only one code)
Block quote <blockquote> </blockquote>

Using a will create two paragraphs with a blank line between them, as between the two preceeding paragraphs. While using a using a will move to the next line as in the preceeding paragraph. Blockquote indents the paragraph on both sides as you use for long quotes.

If you want some white spaces or to indent a paragraph you use one of the special character symbols. These do not work for all browsers so you may want to test it in various browsers. Each character begins with & followed by letters or numbers. There are no brackets. Look at this paragraph in Notepad to see how this special code was used.

To create a space use & nbsp (when you code it there is no space between the & and nbsp) If I wrote it properly the browser would act on the code and give me a space. I have also used the character symbols for < > to be able to show the HTML Code. Without those character codes in place of the < > the browser would assume it is a code and act upon it. < use & lt; and > use & gt;. A trick for remembering lt means lesser than and gt means greater than. Another character you might find useful is the copyright symbol © & copy.

Next are commands to change the appearance of the text.
To bold your text 
To use italics 
To underline your text When you create a hypertext link it is automatically underlined. You don't need to use the underline. Since underline usually means hypertext link, it is rarely used. Usually book titles are in italics or just begining caps such as Gone With the Wind or Gone With The Wind.
To create a vertical line across the page. <HR>. <HR> is another one of those rare codes that doesn't need a closing tag.

Create a Heading

To create a heading you use <H#> The numbers range from 1 to 6. One being the largest. To center the heading you use <H1 align="center">.

The Largest

The Smallest

You can also use the align command to center the body or a paragraph as I did with this paragraph.

If you want to make a list of things there is a simple way. Do you wish your list to be a list with bullets (an unordered list) <UL> or a numbered list (an ordered list) <OL>?

Apple
Banana
Orange

Start with <UL> or <OL>
Use <LI> type the first item on your list.
Use </LI>, then go on to the next item on the list and use another <LI>.
Keep repeating until the list is finished. Then type </UL> or </OL>. Your list is done.

Hypertext Links

Finally the all important links. You should already know what a link is. It is an URL (Uniform Resource Locator), in other words, an address that usually begins http://.
http://suite101.com/welcome.cfm/vampire_ebook_authors

Often all you have to do is to type in the URL and you get a link. Many programs are set up to automatically convert the URL into a HyperText Link, but sometimes you need to do a bit more. If you are creating a web page, you may need to create the link using HTML code for it to work.

You can link to another page within the site or to a URL that is outside the site. The code to link to another URL is <A HREF="URL">NAME</A> For example <A HREF="http://playmurder.terrashare.com">http://playmurder.terrashare.com</A> creates http://playmurder.terrashare.com Now, you may notice this address is missing the www. I didn't make a mistake, that is the actual address of the site. You need to use the exact address if you want the link to work. The easiest way is to go to the site, click on the address to select it, copy it, then paste it in your document. That way you know you have gotten it right.

Perhaps you want to show a descriptive name rather than the actual URL. Whatever you type in place of NAME will be what appears on the webpage <A HREF="http://playmurder.terrashare.com">Play Murder</A> Play Murder.

This web page was created using only these few basic HTML tags. Take a careful look at the source code, and you will recognize everything I have talked about. You may want to print out the source code to compare with what you see on the browser. You might even want to try a few of these yourself.

You can make changes to this page in Notepad or try creating your own page. Save it on to your hard drive with a .htm or .html ending. To see it in the browser window, go to File and click on open. This will bring you to the open box, click on the browse button and go to where you have stored the file and click on it. Then click ok. The page will open in the browser window. If you are imputing the tags by hand, as I did with this page, you have to be very careful that your tags are correct. That there is an opening and closing tag. Missing quotation marks, misspelling, missing > < , incorrect URL can all cause problems or keep your page from displaying. Also after you have made changes in the source code, you need to save the document and click on the refresh button in your browser to be able to see the changes. If you are interest in learning more, there are many free tutorials to help you learn HTML. One of my favorite sites for easy to understand tutorials and lots of information is Draac.com.

Return to Resource Page | Return to BNWC Homepage

Basic HTML for Writers by Linda Melin

Create a Heading

The Largest

The Smallest

Hypertext Links

Basic HTML for Writers
by Linda Melin