Creating a FAQ (Frequently Asked Questions) Webpage

One thing that you will probably get as you have more and more contact with people visiting your website is questions.

People are searching for answers. After one is asked several times, you can save yourself time and save the Visitor time by posting it along with the answer to a FAQ page on your website.

It seems to work best by putting all the questions together, making a link from each to its answer. Once a visitor finds the question she just clicks on it and is immediately presented with the answer.

When the number of questions grows large, say over 15 or 20 or so, you might want to Categorize them to help the visitor to find the Question. The load time for the page is what will make you decide to split Questions into more than one page. If it involves mostly text, it should be fast loading with many questions.

(You might want screenshots - see below)

The coding breaks down into 3 parts. o The link from the question to the answer. o The tag that marks the location of the answer. o The link at the end of the answer to return to the list of questions.

Here Is How To Create It.

Enter the following into Notepad and save it on your desktop as faq.html

------------start code copy <html> <body> <!-- bookmarks like name="top" and href="Question1" are case-sensitive. Just make sure that they are typed the same wherever they are used. \ First here are the questions --> <ul><a name="top"></a> <h2>Questions</h2> <li><a href="#Question1">What does html mean? Replace this text with Question 1. </a> <li><a href="#Question2">Replace this with Question 2.</a> <li><a href="#Question3">Put Question 3 here.</a> <li><a href="#Question4">Put Question 4 here.</a> <li><a href="#Question5">Put Question 5 here.</a> <li><a href="#Question6">Put Question 6 here.</a> <li>continue questions <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ul> <!-- Here are the questions repeated followed by the answer add as much text as you need to answer the question. --> <h4><a name="Question1"></a> What does html mean? Repeat Question 1 here also so that the answer appears right after the question.</h4> <p>Add another paragraph or add more text as needed. </p> <p>html means hypertext markup language. Replace this with your answer to question 1. </p> <p>Return to the<a href="#top">Top</a></p> <h4><a name="Question2"></a>Put Question 2 here also so it appears with the answer</h4> <p>put answer to question 2 here</p> <p>Return to the <a href="#top">Top</a></p> <h4><a name="Question3"></a>Put Question 3 here also so it appears with the answer</h4> <p>put answer to question 3 here</p> <p>Return to the<a href="#top">Top</a></p> <h4><a name="Question4"></a>Put Question 4 here also so it appears with the answer</h4> <p>put answer to question 4 here</p> <p>Return to the<a href="#top">Top</a></p> <h4><a name="Question5"></a>Put Question 5 here also so it appears with the answer</h4> <p>put answer to question 5 here</p> <p>Return to the <a href="#top">Top</a></p> <h4><a name="Question6"></a>Put Question 6 here also so it appears with the answer</h4> <p>put answer to question 6 here</p> <p>Return to the <a href="#top">Top</a></p> <p>Continue other answers</p> </body> </html> ----end of code copy

Now double click the file name faq.html on your desktop and it should open in your browser. Shrink the browser page vertically to about two inches high or the page will not appear to be working right. Click the Links to test that they move you to the answer and back to the top.

You just add other lines for additional questions by copying and changing the question number.

Code Explained

The ul tag creates an unordered list.

The li tag creates an item in the list.

This list is the list of Questions.

The anchor tag - name="top" - creates a bookmark or destination anchor, a place in the document called by the name given within the quotations. In this case it just marks the beginning of the questions. Then a hyperlink to the top bookmark is placed at the end of each question so the user can return to the beginning of the questions.

The "a href="#question1" creates a Return Link in the document that is the beginning of the answer to question 1.

Using Screen Captures To Help With Questions

A picture is worth a thousand words so you may want to include a screen shot of some program to better explain your answer. The program used for this is Snag-It. It is pretty simple to use and it is very powerful. You just call the program, then mark the area of your screen that you want copied. The file can then be modified with comments in “callouts” so you can “point” to a particular place in the screen shot.

Here is an example

http://www.how-to-setup-your-own-website.com/composerscrnshot.html

More info at http://www.techsmith.com/products/snagit/